@drivenets/design-system 0.0.5 → 0.1.0

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';
@@ -30,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';