@drivenets/design-system 0.0.4 → 0.1.0

package/src/components/ds-toggle/ds-toggle.module.scss

@@ -0,0 +1,154 @@
+.root {
+	display: flex;
+	align-items: flex-start;
+	position: relative;
+	width: fit-content;
+
+	--switch-track-width: 36px;
+	--thumb-size: 16px;
+	--thumb-gap: 2px;
+	--transition-duration: 200ms;
+	--switch-track-diff: calc(var(--switch-track-width) - var(--thumb-size));
+	--switch-thumb-x: var(--switch-track-diff);
+	--icon-spacing: 2px;
+
+	&.small {
+		--switch-track-width: 26px;
+		--thumb-size: 12px;
+		--icon-spacing: 1px;
+	}
+
+	[data-part='control'] {
+		position: relative;
+		outline: 2px solid transparent;
+		display: inline-flex;
+		flex-shrink: 0;
+		justify-content: flex-start;
+		box-sizing: content-box;
+		cursor: pointer;
+		border-radius: 9999px;
+		transition-property: background-color, color, fill, stroke, opacity, transform, outline-color, opacity;
+		transition-duration: var(--transition-duration);
+		padding: var(--thumb-gap);
+		width: var(--switch-track-width);
+		height: var(--thumb-size);
+
+		&[data-state='unchecked'] {
+			background: var(--color-background-deselected);
+
+			&[data-hover] {
+				background: var(--color-background-deselected-hover);
+			}
+
+			&[data-focus-visible] {
+				outline-color: var(--color-background-action-hover);
+				background: var(--color-background-deselected-hover);
+			}
+
+			.iconCheck {
+				opacity: 0;
+			}
+
+			.iconClose {
+				opacity: 1;
+			}
+		}
+
+		&[data-state='checked'] {
+			background: var(--color-background-selected);
+
+			&[data-hover] {
+				background: var(--color-background-selected-hover);
+			}
+
+			&[data-focus-visible] {
+				outline-color: var(--color-background-selected);
+				background: var(--color-background-selected-hover);
+			}
+
+			.iconCheck {
+				opacity: 1;
+			}
+
+			.iconClose {
+				opacity: 0;
+			}
+		}
+
+		&[data-disabled] {
+			cursor: not-allowed;
+			background: var(--color-background-disable);
+
+			&[data-hover] {
+				background: var(--color-background-deselected-hover);
+			}
+
+			&[data-focus-visible] {
+				outline-color: var(--color-background-action-hover);
+				background: var(--color-background-deselected-hover);
+			}
+		}
+	}
+
+	[data-part='thumb'] {
+		border-radius: 9999px;
+		position: relative;
+		transition-property: transform;
+		background: var(--color-background);
+		transition-duration: var(--transition-duration);
+		height: 100%;
+		aspect-ratio: 1/1;
+
+		&:before {
+			content: '';
+			transition: background-color var(--transition-duration) ease-in-out;
+			position: absolute;
+			background-color: transparent;
+			z-index: 10;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+		}
+
+		&[data-state='checked'] {
+			transform: translateX(var(--switch-thumb-x));
+		}
+	}
+
+	[data-part='label'] {
+		cursor: pointer;
+		display: flex;
+		flex-direction: column;
+		margin-left: var(--spacing-xs);
+
+		.labelInfo {
+			width: 100%;
+			color: var(--color-font-secondary);
+		}
+
+		&[data-disabled] {
+			color: var(--color-font-disabled);
+			cursor: default;
+
+			.labelInfo {
+				color: var(--color-background-disable);
+			}
+		}
+	}
+
+	.icon {
+		color: var(--color-icon-inverse);
+		position: absolute;
+		top: 50%;
+		transform: translateY(-50%);
+		pointer-events: none;
+	}
+
+	.iconCheck {
+		left: var(--icon-spacing);
+	}
+
+	.iconClose {
+		right: var(--icon-spacing);
+	}
+}

package/src/components/ds-toggle/ds-toggle.tsx

@@ -0,0 +1,78 @@
+import { Switch, type SwitchCheckedChangeDetails } from '@ark-ui/react/switch';
+import classNames from 'classnames';
+import type { DsToggleProps } from './ds-toggle.types';
+import styles from './ds-toggle.module.scss';
+import { DsIcon } from '../ds-icon';
+import { DsTypography } from '../ds-typography';
+import type { Ref } from 'react';
+
+/**
+ * Design system Toggle component
+ */
+const DsToggle = ({
+	ref,
+	label,
+	name,
+	labelInfo,
+	className,
+	style = {},
+	onChange,
+	onValueChange,
+	size = 'default',
+	children,
+	checked,
+	...rest
+}: DsToggleProps) => {
+	const isSmall = size === 'small';
+	const iconSize = isSmall ? 'tiny' : 'small';
+	const checkIconClass = classNames(styles.icon, styles.iconCheck);
+	const closeIconClass = classNames(styles.icon, styles.iconClose);
+
+	const rootClass = classNames(
+		styles.root,
+		{
+			[styles.small]: isSmall,
+		},
+		className,
+	);
+
+	const handleCheckedChange = (e: SwitchCheckedChangeDetails) => {
+		onValueChange?.(e.checked);
+	};
+
+	return (
+		<Switch.Root
+			ref={ref as Ref<HTMLLabelElement>}
+			style={style}
+			className={rootClass}
+			label={label}
+			checked={checked}
+			name={name}
+			onCheckedChange={handleCheckedChange}
+			onClick={onChange}
+			{...rest}
+		>
+			<Switch.Control>
+				<DsIcon icon="check" size={iconSize} className={checkIconClass} />
+				<Switch.Thumb />
+				<DsIcon icon="close" size={iconSize} className={closeIconClass} />
+			</Switch.Control>
+
+			{label ? (
+				<Switch.Label>
+					<DsTypography variant={isSmall ? 'body-xs-md' : 'body-sm-md'}>{label}</DsTypography>
+					{!!labelInfo && (
+						<DsTypography variant="body-xs-reg" className={styles.labelInfo}>
+							{labelInfo}
+						</DsTypography>
+					)}
+				</Switch.Label>
+			) : (
+				children
+			)}
+			<Switch.HiddenInput />
+		</Switch.Root>
+	);
+};
+
+export default DsToggle;

package/src/components/ds-toggle/ds-toggle.types.tsx

@@ -0,0 +1,76 @@
+import type { CSSProperties, MouseEvent, ReactNode, Ref } from 'react';
+
+export const toggleSizes = ['default', 'small'] as const;
+export type ToggleSize = (typeof toggleSizes)[number];
+
+/**
+ * Props for the DsToggle component
+ */
+export type DsToggleProps = {
+	/**
+	 * Forwarded ref for the toggle label element
+	 */
+	ref?: Ref<HTMLElement>;
+
+	/**
+	 * Optional form field name
+	 */
+	name?: string;
+
+	/**
+	 * Additional CSS class names
+	 */
+	className?: string;
+
+	/**
+	 * Additional styles to apply to the component
+	 */
+	style?: CSSProperties;
+
+	/**
+	 * Event handler called on user interaction.
+	 * Note: prefer `onValueChange` for checked-state changes.
+	 */
+	onChange?: (event: MouseEvent<HTMLElement>) => void;
+
+	/**
+	 * Event handler called when the checked state changes
+	 */
+	onValueChange?: (checked: boolean) => void;
+
+	/**
+	 * Visual size of the toggle
+	 */
+	size?: ToggleSize;
+
+	/**
+	 * Controlled checked state
+	 */
+	checked?: boolean;
+
+	/**
+	 * Whether the toggle is disabled
+	 */
+	disabled?: boolean;
+} & (
+	| {
+			/**
+			 * Optional children (e.g., custom label content)
+			 */
+			children: ReactNode;
+			label?: never;
+			labelInfo?: never;
+	  }
+	| {
+			children?: never;
+			/**
+			 * Optional label text displayed next to the toggle
+			 */
+			label?: string;
+
+			/**
+			 * Optional additional info text displayed below the label
+			 */
+			labelInfo?: string;
+	  }
+);

package/src/components/ds-toggle/index.tsx

@@ -0,0 +1,2 @@
+export { default as DsToggle } from './ds-toggle';
+export type { ToggleSize, DsToggleProps } from './ds-toggle.types';

package/src/index.ts

@@ -5,7 +5,9 @@ export * from './components/ds-checkbox';
 export * from './components/ds-chip';
 export * from './components/ds-chip-group';
 export * from './components/ds-confirmation';
+export * from './components/ds-date-input';
 export * from './components/ds-dialog';
+export * from './components/ds-divider';
 export * from './components/ds-drawer';
 export * from './components/ds-dropdown-menu';
 export * from './components/ds-expandable-text-input';
@@ -19,6 +21,7 @@ export * from './components/ds-panel';
 export * from './components/ds-password-input';
 export * from './components/ds-popover';
 export * from './components/ds-radio-group';
+export * from './components/ds-segment-group';
 export * from './components/ds-select';
 export * from './components/ds-smart-tabs';
 export * from './components/ds-spinner';
@@ -29,6 +32,7 @@ export * from './components/ds-table';
 export * from './components/ds-text-input';
 export * from './components/ds-textarea';
 export * from './components/ds-toast';
+export * from './components/ds-toggle';
 export * from './components/ds-tooltip';
 export * from './components/ds-typography';
 export * from './components/ds-vertical-tabs';