@drivenets/design-system 0.9.1 → 0.11.0

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

@@ -23,6 +23,9 @@ export interface DsTagProps {
 	 * Locale object (you can pass custom strings for localization)
 	 */
 	locale?: {
+		/**
+		 * aria-label for the delete button (shown when `onDelete` is provided).
+		 */
 		deleteAriaLabel?: string;
 	};
 	/**
@@ -58,6 +61,9 @@ export interface DsTagProps {
 	 */
 	disabled?: boolean;
 
+	/**
+	 * Optional render slots for customizing parts of the tag.
+	 */
 	slots?: {
 		/**
 		 * Icon to display at the start of the input

package/src/components/ds-tag-filter/ds-tag-filter.module.scss

@@ -1,11 +1,11 @@
 .container {
 	display: flex;
 	flex-direction: column;
-	gap: var(--spacing-xs);
-	padding: var(--spacing-xs) var(--spacing-standard);
-	background: var(--color-background-selected-weak);
-	border: 1px solid var(--color-outline-weak);
-	border-radius: var(--spacing-3xs);
+	gap: var(--xs);
+	padding: var(--xs) var(--standard);
+	background: var(--background-secondary-hover);
+	border: 1px solid var(--outline-weak);
+	border-radius: var(--3xs);
 	overflow: hidden;
 
 	&.expanded {
@@ -17,14 +17,14 @@
 	display: flex;
 	align-items: center;
 	width: 100%;
-	gap: var(--spacing-xs);
+	gap: var(--xs);
 	flex-shrink: 0;
 }
 
 .headerActions {
 	display: flex;
 	align-items: center;
-	gap: var(--spacing-xs);
+	gap: var(--xs);
 	flex-shrink: 0;
 	margin-left: auto;
 }
@@ -33,12 +33,12 @@
 	display: flex;
 	align-items: center;
 	width: 100%;
-	gap: var(--spacing-xs);
+	gap: var(--xs);
 	flex-wrap: wrap;
 }
 
 .label {
-	color: var(--color-font-secondary);
+	color: var(--font-secondary);
 	white-space: nowrap;
 	flex-shrink: 0;
 }
@@ -62,7 +62,7 @@
 	pointer-events: none;
 	display: flex;
 	align-items: center;
-	gap: var(--spacing-xs);
+	gap: var(--xs);
 	height: 0;
 	overflow: hidden;
 	position: absolute;

package/src/components/ds-tag-filter/ds-tag-filter.types.ts

@@ -22,6 +22,10 @@ export interface TagFilterItem {
 	 * Additional props to pass to the components
 	 */
 	slotProps?: {
+		/**
+		 * Props forwarded to the underlying `DsTag` rendered for this item. Useful
+		 * for per-item overrides such as `variant` or `size`.
+		 */
 		tag?: Partial<DsTagProps>;
 	};
 }
@@ -35,9 +39,21 @@ export interface DsTagFilterProps {
 	 * Locale object (you can pass custom strings for localization)
 	 */
 	locale?: {
+		/**
+		 * Heading label shown above the tag list (e.g., "Filters").
+		 */
 		label?: string;
+		/**
+		 * Label for the "Clear all" button.
+		 */
 		clearButton?: string;
+		/**
+		 * Label for the button that reveals hidden tags when the list overflows.
+		 */
 		showMore?: string;
+		/**
+		 * Label for the button that collapses the expanded list back to the preview.
+		 */
 		showLess?: string;
 	};
 	/**

package/src/components/ds-text-input/ds-text-input.module.scss

@@ -2,7 +2,7 @@
 
 .textInputContainer {
 	@include input.inputContainer;
-	gap: var(--spacing-xs);
+	gap: var(--xs);
 }
 
 .input {

package/src/components/ds-text-input/ds-text-input.types.ts

@@ -99,6 +99,9 @@ export interface DsTextInputProps {
 	 */
 	tabIndex?: number;
 
+	/**
+	 * Optional render slots for customizing parts of the input.
+	 */
 	slots?: {
 		/**
 		 * Custom component to wrap the input element

package/src/components/ds-time-picker/components/time-item/time-item.module.scss

@@ -11,27 +11,27 @@ $time-item-width: 48px;
 	align-items: center;
 	border-radius: 8px;
 	background: transparent;
-	color: var(--color-font-main);
+	color: var(--font-main);
 
 	&.selected {
-		background: var(--color-background-selected);
-		color: var(--color-font-on-action);
+		background: var(--background-primary);
+		color: var(--font-on-action);
 	}
 
 	&.disabled {
-		color: var(--color-font-disabled);
+		color: var(--font-disabled);
 		pointer-events: none;
 	}
 
 	&:not(.selected, .disabled) {
 		&:hover {
-			border: 1px solid var(--color-border);
-			background: var(--color-background-action-hover-weak);
+			border: 1px solid var(--border);
+			background: var(--background-action-hover-weak);
 		}
 
 		&:focus-visible {
-			border: 2px solid var(--color-border-action-secondary);
-			background: var(--color-background-action-hover-weak);
+			border: 2px solid var(--border-action-secondary);
+			background: var(--background-action-hover-weak);
 		}
 	}
 }

package/src/components/ds-time-picker/components/time-item/time-item.types.ts

@@ -1,10 +1,29 @@
 import type { RefObject } from 'react';
 
 export interface TimeItemProps {
+	/**
+	 * Ref forwarded to the item button element
+	 */
 	ref?: RefObject<HTMLButtonElement | null>;
+	/**
+	 * Additional CSS class name applied to the item button
+	 */
 	className?: string;
+	/**
+	 * Text displayed in the item button (e.g., "03", "15", "AM").
+	 */
 	label: string;
+	/**
+	 * Whether this item is the currently selected value on its scroller.
+	 */
 	selected: boolean;
+	/**
+	 * Whether the item is disabled and cannot be selected.
+	 * @default false
+	 */
 	disabled?: boolean;
+	/**
+	 * Called when the item button is clicked.
+	 */
 	onClick: () => void;
 }

package/src/components/ds-time-picker/components/time-scroller/time-scroller.module.scss

@@ -3,8 +3,8 @@ $column-max-height: 280px;
 
 .container {
 	display: flex;
-	padding: var(--spacing-xs);
-	background: var(--color-background);
+	padding: var(--xs);
+	background: var(--background);
 	box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.22);
 }
 
@@ -13,7 +13,7 @@ $column-max-height: 280px;
 	flex-direction: column;
 	align-items: center;
 	width: $column-width;
-	gap: var(--spacing-xs);
+	gap: var(--xs);
 	max-height: $column-max-height;
 	overflow-y: auto;
 	scroll-snap-type: y mandatory;

package/src/components/ds-time-picker/components/time-scroller/time-scroller.types.ts

@@ -1,17 +1,46 @@
 export type TimePeriod = 'AM' | 'PM';
 
 export interface TimeScrollerProps {
+	/**
+	 * Additional CSS class name applied to the scroller wrapper.
+	 */
 	className?: string;
+	/**
+	 * Whether the parent popover is open. Used to snap the scrollers to their
+	 * selected values when the popover is shown.
+	 */
 	open: boolean;
+	/**
+	 * Props for each scroller sub-slot (hour, minute, period).
+	 */
 	slotProps: {
+		/**
+		 * Hour scroller state and handlers.
+		 */
 		hour: TimeScrollerSlotProps<number>;
+		/**
+		 * Minute scroller state and handlers.
+		 */
 		minute: TimeScrollerSlotProps<number>;
+		/**
+		 * AM/PM period scroller state and handlers.
+		 */
 		period: TimeScrollerSlotProps<TimePeriod>;
 	};
 }
 
 export interface TimeScrollerSlotProps<TValue> {
+	/**
+	 * Currently selected value on this scroller.
+	 */
 	value?: TValue;
+	/**
+	 * Called when the user changes the selection. Receives the new value.
+	 */
 	onChange?: (value: TValue) => void;
+	/**
+	 * Predicate that marks a value as disabled. Receives the candidate value and
+	 * returns `true` to disable selecting it.
+	 */
 	isDisabled?: (value: TValue) => boolean;
 }

package/src/components/ds-time-picker/ds-time-picker.module.scss

@@ -1,3 +1,5 @@
+@use '../../styles/shared/dropdown';
+
 .root {
 	&:where(:hover, :focus-within) {
 		.clearTrigger {
@@ -9,3 +11,8 @@
 .clearTrigger {
 	visibility: hidden;
 }
+
+.content {
+	@include dropdown.dropdown-content;
+	width: auto;
+}

package/src/components/ds-time-picker/ds-time-picker.tsx

@@ -25,6 +25,7 @@ const DsTimePicker = (props: DsTimePickerProps) => {
 		disablePortal = false,
 		locale,
 		slotProps,
+		onBlur,
 	} = props;
 	const [value, setValue] = useControlled(props.value, props.onChange, props.defaultValue ?? null);
 	const [isOpen, setIsOpen] = useControlled(props.open, props.onOpenChange, props.defaultOpen ?? false);
@@ -84,6 +85,7 @@ const DsTimePicker = (props: DsTimePickerProps) => {
 
 		if (!inputVal) {
 			setValue(null);
+			onBlur?.();
 			return;
 		}
 
@@ -96,6 +98,8 @@ const DsTimePicker = (props: DsTimePickerProps) => {
 		} else {
 			resetInput();
 		}
+
+		onBlur?.();
 	};
 
 	const handleOpenChange = (details: Popover.OpenChangeDetails) => {
@@ -166,7 +170,10 @@ const DsTimePicker = (props: DsTimePickerProps) => {
 
 			<Wrapper>
 				<Popover.Positioner>
-					<Popover.Content {...slotProps?.popover}>
+					<Popover.Content
+						{...slotProps?.popover}
+						className={classNames(styles.content, slotProps?.popover?.className)}
+					>
 						<TimeScroller open={isOpen} {...timeScrollerAdapter(value, setValue, min, max)} />
 					</Popover.Content>
 				</Popover.Positioner>

package/src/components/ds-time-picker/ds-time-picker.types.ts

@@ -3,22 +3,63 @@ import type { DsTextInputProps } from '../ds-text-input';
 import type { PopoverContentProps } from '@ark-ui/react/popover';
 
 export interface DsTimePickerProps {
+	/**
+	 * Unique identifier for the input field
+	 */
 	id?: string;
+	/**
+	 * Ref forwarded to the time picker root element
+	 */
 	ref?: RefObject<HTMLDivElement>;
+	/**
+	 * Additional CSS class name applied to the root element
+	 */
 	className?: string;
 
+	/**
+	 * Current selected time (controlled). Use `null` to represent no selection.
+	 * Pair with `onChange`.
+	 */
 	value?: Date | null;
+	/**
+	 * Initial time when uncontrolled.
+	 */
 	defaultValue?: Date;
 
+	/**
+	 * Whether the popover is open (controlled). Pair with `onOpenChange`.
+	 */
 	open?: boolean;
+	/**
+	 * Whether the popover is initially open when uncontrolled.
+	 * @default false
+	 */
 	defaultOpen?: boolean;
 
+	/**
+	 * Placeholder text shown in the input when no time is selected.
+	 */
 	placeholder?: string;
 
+	/**
+	 * Earliest selectable time. Times before this are disabled.
+	 */
 	min?: Date;
+	/**
+	 * Latest selectable time. Times after this are disabled.
+	 */
 	max?: Date;
 
+	/**
+	 * Whether the picker is disabled and cannot be interacted with.
+	 * @default false
+	 */
 	disabled?: boolean;
+	/**
+	 * Whether the picker is read-only. The input is focusable but the value cannot
+	 * be changed.
+	 * @default false
+	 */
 	readOnly?: boolean;
 
 	/**
@@ -33,22 +74,61 @@ export interface DsTimePickerProps {
 	 */
 	disablePortal?: boolean;
 
+	/**
+	 * Localized labels used in the picker UI and for accessibility.
+	 */
 	locale?: DsTimePickerLocale;
+	/**
+	 * Props forwarded to the internal input and popover slots.
+	 */
 	slotProps?: DsTimePickerSlotProps;
 
+	/**
+	 * Called when the selected time changes. Receives the new Date or `null` when
+	 * cleared.
+	 */
 	onChange?: (value: Date | null) => void;
+	/**
+	 * Called when the popover opens or closes. Receives the next `open` state.
+	 */
 	onOpenChange?: (open: boolean) => void;
+
+	/**
+	 * Called when the input is blurred
+	 */
+	onBlur?: () => void;
 }
 
 export interface DsTimePickerLocale {
+	/**
+	 * aria-label for the button that opens the popover
+	 */
 	openLabel?: string;
+	/**
+	 * aria-label for the clear button
+	 */
 	clearLabel?: string;
+	/**
+	 * aria-label for the hour scroller
+	 */
 	hourLabel?: string;
+	/**
+	 * aria-label for the minute scroller
+	 */
 	minuteLabel?: string;
+	/**
+	 * aria-label for the AM/PM period scroller
+	 */
 	periodLabel?: string;
 }
 
 export interface DsTimePickerSlotProps {
+	/**
+	 * Props forwarded to the underlying `DsTextInput` that displays the selected time.
+	 */
 	input?: DsTextInputProps;
+	/**
+	 * Props forwarded to the Ark popover content that hosts the time scrollers.
+	 */
 	popover?: PopoverContentProps;
 }

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

@@ -7,11 +7,11 @@
 		'description description description'
 		'actions actions actions';
 	align-items: start;
-	padding: var(--spacing-standard);
+	padding: var(--standard);
 	border-radius: 4px;
-	column-gap: var(--spacing-xs);
-	row-gap: var(--spacing-4xs);
-	color: var(--color-font-on-action);
+	column-gap: var(--xs);
+	row-gap: var(--4xs);
+	color: var(--font-on-action);
 	box-shadow: 0 1.25px 4px 0 rgba(0, 0, 0, 0.25);
 	// approx. 6 columns (64 * 2)
 	min-width: 384px;
@@ -33,19 +33,19 @@
 	}
 
 	&[data-type='success'] {
-		background: var(--color-background-success-strong);
+		background: var(--background-success-strong);
 	}
 
 	&[data-type='info'] {
-		background: var(--color-background-info-strong);
+		background: var(--background-info-strong);
 	}
 
 	&[data-type='warning'] {
-		background: var(--color-background-warning-strong);
+		background: var(--background-warning-strong);
 	}
 
 	&[data-type='error'] {
-		background: var(--color-background-danger-strong);
+		background: var(--background-error);
 	}
 
 	&:not(:has([data-scope='toast'][data-part='title'])) {
@@ -64,7 +64,7 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	border-radius: var(--spacing-4xs);
+	border-radius: var(--4xs);
 
 	&:hover {
 		background: rgba(0, 0, 0, 0.05);
@@ -86,12 +86,12 @@
 
 .icon {
 	grid-area: icon;
-	color: var(--color-icon-inverse);
+	color: var(--icon-inverse);
 }
 
 .actions {
 	grid-area: actions;
-	margin-top: var(--spacing-sm);
+	margin-top: var(--sm);
 }
 
 @media (max-width: 640px) {

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

@@ -34,15 +34,15 @@
 		height: var(--thumb-size);
 
 		&[data-state='unchecked'] {
-			background: var(--color-background-deselected);
+			background: var(--background-deselected);
 
 			&[data-hover] {
-				background: var(--color-background-deselected-hover);
+				background: var(--background-deselected-hover);
 			}
 
 			&[data-focus-visible] {
-				outline-color: var(--color-background-action-hover);
-				background: var(--color-background-deselected-hover);
+				outline-color: var(--background-action-hover);
+				background: var(--background-deselected-hover);
 			}
 
 			.iconCheck {
@@ -55,15 +55,15 @@
 		}
 
 		&[data-state='checked'] {
-			background: var(--color-background-selected);
+			background: var(--background-primary);
 
 			&[data-hover] {
-				background: var(--color-background-selected-hover);
+				background: var(--background-primary-hover);
 			}
 
 			&[data-focus-visible] {
-				outline-color: var(--color-background-selected);
-				background: var(--color-background-selected-hover);
+				outline-color: var(--background-primary);
+				background: var(--background-primary-hover);
 			}
 
 			.iconCheck {
@@ -77,15 +77,15 @@
 
 		&[data-disabled] {
 			cursor: not-allowed;
-			background: var(--color-background-disable);
+			background: var(--background-disable);
 
 			&[data-hover] {
-				background: var(--color-background-deselected-hover);
+				background: var(--background-deselected-hover);
 			}
 
 			&[data-focus-visible] {
-				outline-color: var(--color-background-action-hover);
-				background: var(--color-background-deselected-hover);
+				outline-color: var(--background-action-hover);
+				background: var(--background-deselected-hover);
 			}
 		}
 	}
@@ -94,7 +94,7 @@
 		border-radius: 9999px;
 		position: relative;
 		transition-property: transform;
-		background: var(--color-background);
+		background: var(--background);
 		transition-duration: var(--transition-duration);
 		height: 100%;
 		aspect-ratio: 1/1;
@@ -119,25 +119,25 @@
 		cursor: pointer;
 		display: flex;
 		flex-direction: column;
-		margin-left: var(--spacing-xs);
+		margin-left: var(--xs);
 
 		.labelInfo {
 			width: 100%;
-			color: var(--color-font-secondary);
+			color: var(--font-secondary);
 		}
 
 		&[data-disabled] {
-			color: var(--color-font-disabled);
+			color: var(--font-disabled);
 			cursor: default;
 
 			.labelInfo {
-				color: var(--color-background-disable);
+				color: var(--background-disable);
 			}
 		}
 	}
 
 	.icon {
-		color: var(--color-icon-inverse);
+		color: var(--icon-inverse);
 		position: absolute;
 		top: 50%;
 		transform: translateY(-50%);

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

@@ -1,13 +1,13 @@
 .tooltip {
-	color: var(--color-font-on-action);
-	background-color: var(--color-background-brand);
-	padding: var(--spacing-xs) var(--spacing-sm);
-	border-radius: var(--exo-spacing-2x-small);
+	color: var(--font-on-action);
+	background-color: var(--background-brand);
+	padding: var(--xs) var(--sm);
+	border-radius: var(--3xs);
 	max-width: 384px;
 	overflow-wrap: break-word;
 	z-index: 9999;
 }
 
 .arrow {
-	fill: var(--neutral-1);
+	fill: var(--color-dap-gray-700);
 }

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

@@ -9,7 +9,13 @@ export interface DsTooltipProps {
 	 * The content to be rendered inside the tooltip
 	 */
 	children: ReactNode;
+	/**
+	 * Props forwarded to nested sub-components.
+	 */
 	slotProps?: {
+		/**
+		 * Props forwarded to the tooltip content popover (className / inline styles).
+		 */
 		content?: {
 			className?: string;
 			style?: CSSProperties;