@drivenets/design-system 0.0.4 → 0.1.0

package/src/components/ds-date-input/ds-date-input.utils.ts

@@ -0,0 +1,242 @@
+import { type DateValue } from '@ark-ui/react/date-picker';
+import { CalendarDate, parseDate } from '@internationalized/date';
+
+/**
+ * Validation result for date input
+ */
+interface DateInputValidation {
+	isValid: boolean;
+	error?: string;
+}
+
+/**
+ * Parsed date range result
+ */
+interface ParsedDateRange {
+	start: string | null;
+	end: string | null;
+	isValid: boolean;
+}
+
+/**
+ * Convert ISO date string to DateValue
+ */
+export const isoStringToDateValue = (isoDate: string): DateValue | undefined => {
+	try {
+		return parseDate(isoDate) as unknown as DateValue;
+	} catch {
+		return undefined;
+	}
+};
+
+/**
+ * Convert string or tuple to DateValue array (for internal use with Ark UI)
+ */
+export const stringToDateValue = (dates: string | [string, string]): DateValue[] => {
+	const dateArray = Array.isArray(dates) ? dates : [dates];
+
+	return dateArray.map(isoStringToDateValue).filter((d) => !!d);
+};
+
+/**
+ * Convert DateValue array to string or tuple (for public API)
+ */
+export const dateValuesToStrings = (dates: DateValue[], range: boolean): string | [string, string] => {
+	const values = dates.map((date) => date.toString());
+
+	return range ? [values[0], values[1]] : values[0];
+};
+
+/**
+ * Format a DateValue to string (MM/DD/YYYY)
+ */
+const formatDateValue = (date: DateValue): string => {
+	const paddedMonth = String(date.month).padStart(2, '0');
+	const paddedDay = String(date.day).padStart(2, '0');
+
+	return `${paddedMonth}/${paddedDay}/${String(date.year)}`;
+};
+
+/**
+ * Format an array of DateValues to a unified string
+ * Single: "12/25/2024"
+ * Range: "12/01/2024 - 12/31/2024"
+ */
+export const formatDateInputValue = (value: DateValue[], range: boolean): string => {
+	if (value.length === 0) {
+		return '';
+	}
+	const newValue = value.map(formatDateValue);
+
+	return range ? newValue.join(' - ') : newValue[0];
+};
+
+/**
+ * Parse a date string (MM/DD/YYYY) to DateValue
+ */
+const parseDateString = (dateStr: string): DateValue | null => {
+	if (!dateStr || !dateStr.trim()) {
+		return null;
+	}
+
+	// Try MM/DD/YYYY format
+	const match = dateStr.trim().match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/);
+	if (!match) {
+		return null;
+	}
+
+	const [, month, day, year] = match;
+	const monthNum = parseInt(month, 10);
+	const dayNum = parseInt(day, 10);
+	const yearNum = parseInt(year, 10);
+
+	// Use native Date for proper validation (handles leap years, month lengths, etc.)
+	// Note: Date months are 0-indexed, so subtract 1
+	const date = new Date(yearNum, monthNum - 1, dayNum);
+
+	// Check if the date is valid and matches what we parsed
+	// (e.g., 02/31/2024 would roll over to 03/02/2024, so we detect that)
+	if (date.getFullYear() !== yearNum || date.getMonth() !== monthNum - 1 || date.getDate() !== dayNum) {
+		return null;
+	}
+
+	return new CalendarDate(yearNum, monthNum, dayNum) as unknown as DateValue;
+};
+
+/**
+ * Parse a range input string (MM/DD/YYYY - MM/DD/YYYY)
+ */
+const parseRangeInput = (text: string): ParsedDateRange => {
+	if (!text.trim()) {
+		return { start: null, end: null, isValid: true }; // Empty is valid
+	}
+
+	// Check if it contains a dash separator
+	if (!text.includes('-')) {
+		// Single date format, treat as incomplete range
+		const date = parseDateString(text.trim());
+		return {
+			start: date ? formatDateValue(date) : null,
+			end: null,
+			isValid: false, // Incomplete range
+		};
+	}
+
+	// Split by dash
+	const parts = text.split('-').map((p) => p.trim());
+	if (parts.length !== 2) {
+		return { start: null, end: null, isValid: false };
+	}
+
+	const [startStr, endStr] = parts;
+	const startDate = parseDateString(startStr);
+	const endDate = parseDateString(endStr);
+
+	// Both must be valid dates
+	if (!startDate || !endDate) {
+		return {
+			start: startDate ? formatDateValue(startDate) : null,
+			end: endDate ? formatDateValue(endDate) : null,
+			isValid: false,
+		};
+	}
+
+	return {
+		start: formatDateValue(startDate),
+		end: formatDateValue(endDate),
+		isValid: true,
+	};
+};
+
+/**
+ * Parse input text based on range flag
+ */
+export const parseInputText = (text: string, range: boolean): DateValue[] => {
+	if (!range) {
+		const date = parseDateString(text);
+		return date ? [date] : [];
+	}
+
+	// Range mode
+	const parsed = parseRangeInput(text);
+	if (!parsed.isValid || !parsed.start || !parsed.end) {
+		return [];
+	}
+
+	const startDate = parseDateString(parsed.start);
+	const endDate = parseDateString(parsed.end);
+
+	if (!startDate || !endDate) {
+		return [];
+	}
+
+	return [startDate, endDate];
+};
+
+/**
+ * Validate date input
+ */
+export const validateDateString = ({
+	text,
+	range,
+	min,
+	max,
+}: {
+	text: string;
+	range: boolean;
+	min?: DateValue;
+	max?: DateValue;
+}): DateInputValidation => {
+	if (!text.trim()) {
+		return { isValid: true }; // Empty is valid (let required validation handle it)
+	}
+
+	if (!range) {
+		const date = parseDateString(text);
+		if (!date) {
+			return { isValid: false, error: 'Invalid date format. Use MM/DD/YYYY' };
+		}
+
+		// Check min/max
+		if (min && date.compare(min) < 0) {
+			return { isValid: false, error: 'Date is before minimum allowed date' };
+		}
+		if (max && date.compare(max) > 0) {
+			return { isValid: false, error: 'Date is after maximum allowed date' };
+		}
+
+		return { isValid: true };
+	}
+
+	// Range mode validation
+	const parsed = parseRangeInput(text);
+	if (!parsed.isValid) {
+		return { isValid: false, error: 'Invalid date range format. Use MM/DD/YYYY - MM/DD/YYYY' };
+	}
+
+	if (!parsed.start || !parsed.end) {
+		return { isValid: false, error: 'Both start and end dates are required' };
+	}
+
+	const startDate = parseDateString(parsed.start);
+	const endDate = parseDateString(parsed.end);
+
+	if (!startDate || !endDate) {
+		return { isValid: false, error: 'Invalid date format. Use MM/DD/YYYY' };
+	}
+
+	// Validate start <= end
+	if (startDate.compare(endDate) > 0) {
+		return { isValid: false, error: 'Start date must be before or equal to end date' };
+	}
+
+	// Check min/max
+	if (min && startDate.compare(min) < 0) {
+		return { isValid: false, error: 'Start date is before minimum allowed date' };
+	}
+	if (max && endDate.compare(max) > 0) {
+		return { isValid: false, error: 'End date is after maximum allowed date' };
+	}
+
+	return { isValid: true };
+};

package/src/components/ds-date-input/index.ts

@@ -0,0 +1,2 @@
+export { default as DsDateInput } from './ds-date-input';
+export type { DsDateInputProps } from './ds-date-input.types';

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

@@ -0,0 +1,21 @@
+.divider {
+	display: block;
+
+	border: 0;
+	padding: 0;
+	color: transparent;
+
+	background-color: var(--color-border-secondary);
+	flex-shrink: 0;
+}
+
+.horizontal {
+	width: 100%;
+	height: 1px;
+}
+
+.vertical {
+	width: 1px;
+	height: auto;
+	align-self: stretch;
+}

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

@@ -0,0 +1,22 @@
+import type React from 'react';
+import classNames from 'classnames';
+import styles from './ds-divider.module.scss';
+import { type DsDividerProps } from './ds-divider.types';
+
+const DsDivider: React.FC<DsDividerProps> = ({ orientation = 'horizontal', component, style, className }) => {
+	const isVertical = orientation === 'vertical';
+	const Component = component ?? (isVertical ? 'div' : 'hr');
+
+	const classes = classNames(
+		styles.divider,
+		{
+			[styles.vertical]: isVertical,
+			[styles.horizontal]: !isVertical,
+		},
+		className,
+	);
+
+	return <Component role="separator" aria-orientation={orientation} className={classes} style={style} />;
+};
+
+export default DsDivider;

package/src/components/ds-divider/ds-divider.types.ts

@@ -0,0 +1,21 @@
+import type React from 'react';
+
+export interface DsDividerProps {
+	/**
+	 * Controls orientation of the divider. Horizontal by default.
+	 */
+	orientation?: 'horizontal' | 'vertical';
+	/**
+	 * Underlying element/component to render.
+	 * Examples: "hr", "div", "span", Link, etc.
+	 */
+	component?: React.ElementType;
+	/**
+	 * Additional CSS styles.
+	 */
+	style?: React.CSSProperties;
+	/**
+	 * Additional CSS classes.
+	 */
+	className?: string;
+}

package/src/components/ds-divider/index.ts

@@ -0,0 +1,2 @@
+export { default as DsDivider } from './ds-divider';
+export * from './ds-divider.types';

package/src/components/ds-dropdown-menu/ds-dropdown-menu.module.scss

@@ -8,6 +8,7 @@
 	max-height: var(--available-height, 400px);
 	overflow-y: auto;
 	width: auto;
+	z-index: var(--layer-index);
 
 	&:focus-visible {
 		outline-offset: 2px;
@@ -29,9 +30,12 @@
 
 .item {
 	@include dropdown.dropdown-item;
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-xs);
+
+	.triggerItem {
+		display: flex;
+		align-items: center;
+		gap: var(--spacing-xs);
+	}
 
 	&.selected {
 		.indicator {
@@ -105,6 +109,10 @@
 	}
 }
 
+.triggerItemIcon {
+	margin-left: auto;
+}
+
 /** Legacy classes */
 .contentLegacy {
 	@include dropdown.dropdown-content;

package/src/components/ds-dropdown-menu/ds-dropdown-menu.tsx

@@ -21,6 +21,7 @@ import type {
 	DsDropdownMenuPositioning,
 	DsDropdownMenuRootProps,
 	DsDropdownMenuSeparatorProps,
+	DsDropdownMenuTriggerItemProps,
 	DsDropdownMenuTriggerProps,
 } from './ds-dropdown-menu.types';
 
@@ -195,7 +196,7 @@ const ItemGroup: React.FC<DsDropdownMenuItemGroupProps> = ({
 
 	return (
 		<GroupContext.Provider value={{ collapsed, toggle }}>
-			<Menu.ItemGroup className={classNames(styles.group, className)} style={style}>
+			<Menu.ItemGroup className={className} style={style}>
 				{children}
 			</Menu.ItemGroup>
 		</GroupContext.Provider>
@@ -264,6 +265,20 @@ const Separator: React.FC<DsDropdownMenuSeparatorProps> = ({ className, style })
 	return <Menu.Separator className={classNames(styles.separator, className)} style={style} />;
 };
 
+/**
+ * TriggerItem component - triggers a nested submenu
+ */
+const TriggerItem: React.FC<DsDropdownMenuTriggerItemProps> = ({ className, style, children, ...props }) => {
+	return (
+		<Menu.TriggerItem className={styles.item} {...props}>
+			<div className={classNames(styles.triggerItem, className)} style={style}>
+				{children}
+			</div>
+			<DsIcon className={styles.triggerItemIcon} icon="keyboard_arrow_right" />
+		</Menu.TriggerItem>
+	);
+};
+
 /**
  * DEPRECATED: Legacy DsDropdownMenu component with options array
  * Use compound component pattern instead
@@ -387,6 +402,7 @@ export const DsDropdownMenu = {
 	Content,
 	Item,
 	ItemIndicator,
+	TriggerItem,
 	Header,
 	Actions,
 	ItemGroup,

package/src/components/ds-dropdown-menu/ds-dropdown-menu.types.tsx

@@ -260,3 +260,8 @@ export interface DsDropdownMenuItemGroupContentProps {
  * Props for the DsDropdownMenu Separator component
  */
 export type DsDropdownMenuSeparatorProps = Menu.SeparatorProps;
+
+/**
+ * Props for the DsDropdownMenu TriggerItem component (for nested submenus)
+ */
+export type DsDropdownMenuTriggerItemProps = Menu.TriggerItemProps;

package/src/components/ds-form-control/ds-form-control.tsx

@@ -9,6 +9,7 @@ import { DsNumberInput } from '../ds-number-input';
 import { DsPasswordInput } from '../ds-password-input';
 import type { DsFormControlDescriptionProps, DsFormControlProps } from './ds-form-control.types';
 import styles from './ds-form-control.module.scss';
+import { DsDateInput } from '../ds-date-input';
 
 const FormControlContext = createContext<{ controlId: string } | null>(null);
 
@@ -87,6 +88,7 @@ const DsFormControl = ({
 DsFormControl.TextInput = controlify(DsTextInput);
 DsFormControl.NumberInput = controlify(DsNumberInput);
 DsFormControl.PasswordInput = controlify(DsPasswordInput);
+DsFormControl.DateInput = controlify(DsDateInput);
 DsFormControl.Textarea = controlify(DsTextarea);
 DsFormControl.Select = controlify(DsSelect);
 DsFormControl.Description = DsFormControlDescription;

package/src/components/ds-radio-group/ds-radio-group.types.tsx

@@ -7,7 +7,7 @@ import { type RadioGroupItemProps, type RadioGroupRootProps } from '@ark-ui/reac
  */
 export interface DsRadioGroupRootProps extends Pick<
 	RadioGroupRootProps,
-	'value' | 'defaultValue' | 'disabled' | 'name' | 'className' | 'style' | 'orientation' | 'children'
+	'id' | 'value' | 'defaultValue' | 'disabled' | 'name' | 'className' | 'style' | 'orientation' | 'children'
 > {
 	/**
 	 * Event handler called when the selected value changes

package/src/components/ds-segment-group/ds-segment-group.module.scss

@@ -0,0 +1,99 @@
+.segmentGroupRoot {
+	display: inline-flex;
+	align-items: center;
+	position: relative;
+	background: var(--color-background-secondary);
+	border: 1px solid var(--color-border-contrast);
+	border-radius: 4px;
+	gap: var(--spacing-2xs);
+	height: 36px;
+	padding: var(--spacing-3xs);
+
+	&.small {
+		height: 28px;
+		padding: var(--spacing-4xs);
+
+		.segmentItem {
+			padding: var(--spacing-4xs) var(--spacing-xs);
+		}
+	}
+}
+
+.segmentItem {
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: var(--spacing-3xs) var(--spacing-sm);
+	gap: var(--spacing-2xs);
+	flex: 1;
+	z-index: 1;
+	cursor: pointer;
+	border-radius: 4px;
+
+	&[data-state='checked'] {
+		.segmentItemText {
+			color: var(--color-font-main);
+			font-weight: var(--font-weight-medium);
+		}
+	}
+
+	&[data-state='unchecked'] {
+		background: transparent;
+
+		.segmentItemText {
+			color: var(--color-background-action);
+		}
+
+		&:hover:not([data-disabled]) {
+			background: var(--color-background-action-secondary);
+		}
+
+		&:active:not([data-disabled]) {
+			background: var(--color-background);
+			border-color: var(--color-border-contrast);
+		}
+	}
+
+	&[data-disabled] {
+		cursor: not-allowed;
+		background: var(--color-background-secondary);
+
+		.segmentItemText {
+			color: var(--color-font-disabled);
+		}
+	}
+
+	&:focus-visible {
+		outline: 2px solid var(--color-border-action-secondary);
+		outline-offset: 2px;
+	}
+}
+
+[data-scope='segment-group'][data-part='item-control'] {
+	position: absolute;
+	inset: 0;
+	pointer-events: none;
+}
+
+.segmentItemText {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	white-space: nowrap;
+	transition: color 150ms ease-in-out;
+}
+
+.segmentIndicator {
+	position: absolute;
+	background: var(--color-background);
+	border: 1px solid var(--color-border-contrast);
+	border-radius: 4px;
+	box-shadow: 0 1.25px 4px 0 rgba(0, 0, 0, 0.25);
+	z-index: 0;
+	pointer-events: none;
+	width: var(--width);
+	height: var(--height);
+	left: var(--left);
+	top: var(--top);
+}

package/src/components/ds-segment-group/ds-segment-group.tsx

@@ -0,0 +1,76 @@
+import type React from 'react';
+import { SegmentGroup } from '@ark-ui/react/segment-group';
+import classNames from 'classnames';
+import styles from './ds-segment-group.module.scss';
+import DsTypography from '../ds-typography/ds-typography';
+import {
+	type DsSegmentGroupItemProps,
+	type DsSegmentGroupItemTextProps,
+	type DsSegmentGroupRootProps,
+} from './ds-segment-group.types';
+
+/**
+ * Root component - provides segment group context
+ */
+const Root: React.FC<DsSegmentGroupRootProps> = ({
+	className,
+	children,
+	onValueChange,
+	size = 'default',
+	...props
+}) => (
+	<SegmentGroup.Root
+		className={classNames(styles.segmentGroupRoot, size === 'small' && styles.small, className)}
+		onValueChange={(details) => onValueChange?.(details.value)}
+		{...props}
+	>
+		<SegmentGroup.Indicator className={styles.segmentIndicator} />
+		{children}
+	</SegmentGroup.Root>
+);
+
+/**
+ * Item component - renders a single segment button
+ */
+const Item: React.FC<DsSegmentGroupItemProps> = ({ value, label, className, style, children, ...props }) => {
+	return (
+		<SegmentGroup.Item
+			value={value}
+			className={classNames(styles.segmentItem, className)}
+			style={style}
+			{...props}
+		>
+			{label ? <ItemText>{label}</ItemText> : children}
+			<SegmentGroup.ItemControl />
+			<SegmentGroup.ItemHiddenInput />
+		</SegmentGroup.Item>
+	);
+};
+
+/**
+ * ItemText component - renders text content within an item
+ */
+const ItemText: React.FC<DsSegmentGroupItemTextProps> = ({ className, children, ...props }) => (
+	<SegmentGroup.ItemText className={classNames(styles.segmentItemText, className)} {...props} asChild>
+		<DsTypography variant="body-sm-reg">{children}</DsTypography>
+	</SegmentGroup.ItemText>
+);
+
+/**
+ * Design system SegmentGroup component
+ *
+ * @example
+ * <DsSegmentGroup.Root value={value} onValueChange={setValue} size="default">
+ *   <DsSegmentGroup.Indicator />
+ *   <DsSegmentGroup.Item value="option1" label="Option 1" />
+ *   <DsSegmentGroup.Item value="option2">
+ *     <DsIcon icon="settings" />
+ *     <DsSegmentGroup.ItemText>Option 2</DsSegmentGroup.ItemText>
+ *   </DsSegmentGroup.Item>
+ * </DsSegmentGroup.Root>
+ */
+export const DsSegmentGroup = {
+	Root,
+	Item,
+	ItemText,
+};

package/src/components/ds-segment-group/ds-segment-group.types.tsx

@@ -0,0 +1,64 @@
+import { type ReactNode } from 'react';
+import {
+	type SegmentGroupItemProps,
+	type SegmentGroupItemTextProps,
+	type SegmentGroupRootProps,
+} from '@ark-ui/react/segment-group';
+
+/**
+ * Size variants for the segment group
+ */
+export type DsSegmentGroupSize = 'small' | 'default';
+
+/**
+ * Props for the DsSegmentGroup Root component
+ */
+export interface DsSegmentGroupRootProps extends Pick<
+	SegmentGroupRootProps,
+	'value' | 'defaultValue' | 'disabled' | 'name' | 'className' | 'style' | 'children'
+> {
+	/**
+	 * Size variant of the segment group
+	 * @default 'default'
+	 */
+	size?: DsSegmentGroupSize;
+	/**
+	 * Event handler called when the selected value changes
+	 */
+	onValueChange?: (value: string | null) => void;
+}
+
+/**
+ * Props for the DsSegmentGroup Item component
+ */
+export type DsSegmentGroupItemProps = Pick<
+	SegmentGroupItemProps,
+	'id' | 'value' | 'disabled' | 'className' | 'style'
+> &
+	(
+		| {
+				/**
+				 * The segment group item content
+				 */
+				children: ReactNode;
+				/**
+				 * Optional label text for the segment item
+				 */
+				label?: never;
+		  }
+		| {
+				/**
+				 * The segment group item content
+				 */
+				children?: never;
+				/**
+				 * Optional label text for the segment item
+				 */
+				label: string;
+		  }
+	);
+
+/**
+ * Props for the DsSegmentGroup ItemText component
+ */
+export type DsSegmentGroupItemTextProps = Pick<SegmentGroupItemTextProps, 'className' | 'style' | 'children'>;

package/src/components/ds-segment-group/index.tsx

@@ -0,0 +1,2 @@
+export { DsSegmentGroup } from './ds-segment-group';
+export * from './ds-segment-group.types';

package/src/components/ds-table/filters/hooks/index.ts

@@ -1 +1,2 @@
+export { useTableFilters } from './use-table-filters';
 export type { UseTableFiltersResult } from './use-table-filters';

package/src/components/ds-table/index.ts

@@ -1,4 +1,6 @@
 export type { SecondaryRowAction, RowAction } from './components/ds-table-cell';
 
+export * from './filters';
+
 export { default as DsTable } from './ds-table';
 export * from './ds-table.types';