Merge pull request #2 from Bland-UI/feat/toggle

New component : Toggle

.changeset/purple-owls-explain.md

@@ -0,0 +1,6 @@
+---
+"@blandui/blandui-react": patch
+"@blandui/blandui": patch
+---
+
+Toggle component added and tailwind plugin fixed

apps/storybook-react/stories/Toggle.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Toggle } from '@blandui/blandui-react';
+
+const meta: Meta<typeof Toggle> = {
+	title:     'Component/Toggle',
+	component: Toggle,
+};
+
+export default meta;
+type Story = StoryObj<typeof Toggle>;
+
+export const Default: Story = {
+	render: () => (
+		<div className="flex flex-col gap-lg items-start justify-center">
+			<div className="flex gap-md">
+				<Toggle size="sm" label="Small" />
+				<Toggle size="sm" disabled label="Disabled" />
+				<Toggle size="sm" disabled checked label="Checked & Disabled" />
+
+			</div>
+			<div className="flex gap-md">
+				<Toggle size="md" label="Medium" />
+				<Toggle size="md" disabled label="Disabled" />
+				<Toggle size="md" disabled checked label="Checked & Disabled" />
+			</div>
+		</div>
+	),
+};

packages/blandui-react/src/components/Toggle/Toggle.tsx

@@ -0,0 +1,54 @@
+import { ComponentProps, forwardRef } from 'react';
+import cn from '../../utils/cn';
+
+export interface ToggleProps extends Omit<ComponentProps<'input'>, 'size'> {
+	className?: string;
+
+	label?: string;
+	size?: 'sm' | 'md';
+}
+
+export const Toggle = forwardRef<HTMLInputElement, ToggleProps>(({
+	className,
+	label,
+	size = 'md',
+	...props
+}: ToggleProps, ref) => {
+	const baseKnobCn = [
+		'flex items-center flex-shrink-0 px-xs rounded-full bg-toggle-surface-unchecked',
+
+		'peer-checked:bg-toggle-surface-checked',
+		'peer-disabled:bg-toggle-surface-unchecked-disabled',
+
+		'group-has-[:checked]:bg-toggle-surface-checked-disabled',
+
+		'duration-300 ease-in-out',
+
+		'after:rounded-full after:bg-toggle-knob-rest',
+		'after:duration-300',
+		'peer-disabled:after:bg-toggle-knob-disabled',
+	];
+
+	const sizeClasses = {
+		sm: 'w-3xl h-xl after:w-lg after:h-lg peer-checked:after:translate-x-lg',
+		md: 'w-5xl h-2xl after:w-xl after:h-xl peer-checked:after:translate-x-xl',
+	};
+
+	const knobCn = cn([
+		baseKnobCn,
+		sizeClasses[size],
+		className,
+	]);
+
+	return (
+		<label className="flex justify-between items-center gap-md p-xs text-bold body-md group">
+			<input ref={ref} type="checkbox" {...props} className="peer sr-only" />
+
+			<span className={knobCn}/>
+
+			{ label }
+		</label>
+	);
+});
+
+Toggle.displayName = 'Toggle';

packages/blandui-react/src/components/Toggle/index.ts

@@ -0,0 +1,2 @@
+export { Toggle } from './Toggle';
+export type { ToggleProps } from './Toggle';

packages/blandui-react/src/index.ts

@@ -1,6 +1,7 @@
 export * from './components/Badge';
-export * from './components/Button/Button';
-export * from './components/Checkbox/Checkbox';
-export * from './components/SegmentedBar/SegmentedBar';
-export * from './components/Typography/Typography';
-export * from './components/TextInput/TextInput';
+export * from './components/Button';
+export * from './components/Checkbox';
+export * from './components/SegmentedBar';
+export * from './components/Typography';
+export * from './components/TextInput';
+export * from './components/Toggle';

packages/blandui/src/Color/backgroundColor.ts

@@ -141,6 +141,16 @@ export default {
 	'input-surface-rest':  colors.gray[50],
 	'input-surface-hover': colors.gray[100],
 
+	// TOGGLE
+	'toggle-surface-checked':          colors.carbon[1000],
+	'toggle-surface-checked-disabled': colors.gray[200],
+
+	'toggle-surface-unchecked':          colors.gray[200],
+	'toggle-surface-unchecked-disabled': colors.gray[100],
+
+	'toggle-knob-rest':     colors.gray[0],
+	'toggle-knob-disabled': colors.gray[400],
+
 	// MENU
 	'menu-surface-rest':    colors.gray[0],
 	'menu-surface-hover':   colors.gray[50],

pnpm-workspace.yaml

@@ -1,4 +1,3 @@
 packages:
-  - 'apps/storybook-react/**'
-  - 'packages/blandui-react/**'
-  - 'packages/blandui/**'
+  - 'app/**'
+  - 'packages/**'