@drivenets/design-system 0.9.0 → 0.10.0

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

@@ -1,7 +1,7 @@
 import type React from 'react';
-import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import { RadioGroup } from '@ark-ui/react/radio-group';
 import classNames from 'classnames';
+import { DsTypography } from '../ds-typography';
 import styles from './ds-radio-group.module.scss';
 import type {
 	DsRadioGroupItemProps,
@@ -47,13 +47,11 @@ const Item: React.FC<DsRadioGroupItemProps> = ({
 				</div>
 			</RadioGroup.ItemControl>
 			<RadioGroup.ItemHiddenInput />
-			{label ? (
-				<RadioGroup.ItemText className={styles.radioLabel}>
-					{label}
-					{labelInfo && <div className={styles.labelInfo}>{labelInfo}</div>}
-				</RadioGroup.ItemText>
-			) : (
-				children
+			{label ? <RadioGroup.ItemText className={styles.radioLabel}>{label}</RadioGroup.ItemText> : children}
+			{!!labelInfo && (
+				<DsTypography variant="body-xs-reg" className={styles.labelInfo}>
+					{labelInfo}
+				</DsTypography>
 			)}
 		</RadioGroup.Item>
 	);
@@ -70,35 +68,44 @@ export const DsRadioGroupLegacy: React.FC<DsRadioGroupLegacyProps> = ({
 	value,
 	defaultValue,
 	onValueChange,
+	disabled,
 	className,
-	...props
+	style,
 }) => (
-	<RadioGroupPrimitive.Root
+	<RadioGroup.Root
 		className={classNames(styles.radioGroupRoot, className)}
-		value={value}
+		style={style}
+		value={value ?? undefined}
 		defaultValue={defaultValue}
-		onValueChange={onValueChange}
-		{...props}
+		disabled={disabled}
+		onValueChange={(details) => {
+			if (details.value !== null) {
+				onValueChange?.(details.value);
+			}
+		}}
 	>
 		{options.map((option) => (
-			<div key={option.value} className={styles.radioItemContainer}>
-				<RadioGroupPrimitive.Item
-					className={styles.radioItem}
-					value={option.value}
-					disabled={option.disabled}
-					id={option.value}
-				>
+			<RadioGroup.Item
+				key={option.value}
+				value={option.value}
+				disabled={option.disabled}
+				className={styles.radioItemContainer}
+			>
+				<RadioGroup.ItemControl className={styles.radioItem}>
 					<div className={styles.radioItemWrapper}>
-						<RadioGroupPrimitive.Indicator className={styles.radioIndicator} />
+						<div className={styles.radioIndicator} data-part="indicator" />
 					</div>
-				</RadioGroupPrimitive.Item>
-				<label className={styles.radioLabel} htmlFor={option.value}>
-					{option.label}
-					{option.labelInfo && <div className={styles.labelInfo}>{option.labelInfo}</div>}
-				</label>
-			</div>
+				</RadioGroup.ItemControl>
+				<RadioGroup.ItemHiddenInput />
+				<RadioGroup.ItemText className={styles.radioLabel}>{option.label}</RadioGroup.ItemText>
+				{!!option.labelInfo && (
+					<DsTypography variant="body-xs-reg" className={styles.labelInfo}>
+						{option.labelInfo}
+					</DsTypography>
+				)}
+			</RadioGroup.Item>
 		))}
-	</RadioGroupPrimitive.Root>
+	</RadioGroup.Root>
 );
 /* c8 ignore stop */
 

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

@@ -1,5 +1,4 @@
 import type React from 'react';
-import type * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import { type RadioGroupItemProps, type RadioGroupRootProps } from '@ark-ui/react/radio-group';
 
 /**
@@ -9,6 +8,28 @@ export interface DsRadioGroupRootProps extends Pick<
 	RadioGroupRootProps,
 	'id' | 'value' | 'defaultValue' | 'disabled' | 'name' | 'className' | 'style' | 'orientation' | 'children'
 > {
+	/**
+	 * Currently selected radio value (controlled). Pair with `onValueChange`.
+	 */
+	value?: RadioGroupRootProps['value'];
+	/**
+	 * Initially selected radio value when uncontrolled.
+	 */
+	defaultValue?: RadioGroupRootProps['defaultValue'];
+	/**
+	 * Whether the entire radio group is disabled.
+	 * @default false
+	 */
+	disabled?: RadioGroupRootProps['disabled'];
+	/**
+	 * HTML name attribute applied to each radio input, used in form submissions.
+	 */
+	name?: RadioGroupRootProps['name'];
+	/**
+	 * Layout orientation of the radio items.
+	 * @default vertical
+	 */
+	orientation?: RadioGroupRootProps['orientation'];
 	/**
 	 * Event handler called when the selected value changes
 	 */
@@ -22,6 +43,16 @@ export interface DsRadioGroupItemProps extends Pick<
 	RadioGroupItemProps,
 	'value' | 'disabled' | 'className' | 'style' | 'children'
 > {
+	/**
+	 * Underlying value submitted when this item is selected.
+	 */
+	value: RadioGroupItemProps['value'];
+	/**
+	 * Whether this radio item is disabled. Takes precedence over the group-level
+	 * `disabled` when the group is enabled.
+	 * @default false
+	 */
+	disabled?: RadioGroupItemProps['disabled'];
 	/**
 	 * Optional label text for the radio item
 	 */
@@ -61,9 +92,7 @@ export interface DsRadioOptionLegacy<ValueType = string> {
  * Use compound component pattern instead
  * @deprecated
  */
-export interface DsRadioGroupLegacyProps<
-	TOption extends DsRadioOptionLegacy = DsRadioOptionLegacy,
-> extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> {
+export interface DsRadioGroupLegacyProps<TOption extends DsRadioOptionLegacy = DsRadioOptionLegacy> {
 	/**
 	 * The radio group options
 	 */
@@ -78,16 +107,18 @@ export interface DsRadioGroupLegacyProps<
 	defaultValue?: TOption['value'];
 	/**
 	 * Event handler called when the selected value changes
-	 *
-	 * @param value
 	 */
 	onValueChange?: (value: TOption['value']) => void;
+	/**
+	 * Whether the entire radio group is disabled.
+	 */
+	disabled?: boolean;
 	/**
 	 * Additional CSS class names
 	 */
 	className?: string;
 	/**
-	 * Additional styles to apply to the component
+	 * Additional inline styles
 	 */
 	style?: React.CSSProperties;
 }

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

@@ -17,6 +17,23 @@ export interface DsSegmentGroupRootProps extends Pick<
 	SegmentGroupRootProps,
 	'value' | 'defaultValue' | 'disabled' | 'name' | 'className' | 'style' | 'children'
 > {
+	/**
+	 * Currently selected segment value (controlled). Pair with `onValueChange`.
+	 */
+	value?: SegmentGroupRootProps['value'];
+	/**
+	 * Initially selected segment value when uncontrolled.
+	 */
+	defaultValue?: SegmentGroupRootProps['defaultValue'];
+	/**
+	 * Whether the entire segment group is disabled.
+	 * @default false
+	 */
+	disabled?: SegmentGroupRootProps['disabled'];
+	/**
+	 * HTML name attribute used when the group participates in a form submission.
+	 */
+	name?: SegmentGroupRootProps['name'];
 	/**
 	 * Size variant of the segment group
 	 * @default 'default'

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

@@ -65,18 +65,39 @@ export type DsSelectProps = {
 	renderOption?: (option: DsSelectOption) => ReactNode;
 } & (
 	| {
+			/**
+			 * When `false` or omitted, the select cannot be cleared. `onClear` is not
+			 * accepted in this branch.
+			 * @default false
+			 */
 			clearable?: undefined | false;
 			onClear?: never;
 	  }
 	| {
+			/**
+			 * When `true`, renders a clear affordance on the trigger. Pair with `onClear`.
+			 */
 			clearable: true;
+			/**
+			 * Called when the user clicks the clear affordance.
+			 */
 			onClear?: () => void;
 	  }
 ) &
 	(
 		| {
+				/**
+				 * Single-selection mode. When `false` or omitted, `value` is a single string.
+				 * @default false
+				 */
 				multiple?: undefined | false;
+				/**
+				 * Currently selected option value (controlled).
+				 */
 				value: SelectOptionValue;
+				/**
+				 * Called when the selection changes. Receives the newly selected option value.
+				 */
 				onValueChange?: (value: SelectOptionValue) => void;
 				/**
 				 * Custom render function for the selected value in the trigger.
@@ -86,8 +107,19 @@ export type DsSelectProps = {
 				renderValue?: (selectedOption: DsSelectOption) => ReactNode;
 		  }
 		| {
+				/**
+				 * Multi-selection mode. When `true`, `value` is an array of selected option
+				 * values and `onValueChange` receives the full updated array.
+				 */
 				multiple: true;
+				/**
+				 * Currently selected option values (controlled).
+				 */
 				value: SelectOptionValue[];
+				/**
+				 * Called when the selection changes. Receives the full updated array of
+				 * selected values.
+				 */
 				onValueChange?: (value: SelectOptionValue[]) => void;
 				/**
 				 * Custom render function for the selected value in the trigger.

package/src/components/ds-split-button/ds-split-button.module.scss

@@ -49,11 +49,11 @@ $border-width: 1px;
 	}
 
 	&:not(:disabled):is(:hover, :active, [data-selected='true']) {
-		border-right-color: var(--border-border-secondary-hover);
+		border-right-color: var(--border-secondary-hover);
 	}
 
 	&:not(:disabled):focus-visible {
-		border-right-color: var(--border-border-inverse);
+		border-right-color: var(--border-inverse);
 	}
 }
 
@@ -74,8 +74,8 @@ $border-width: 1px;
 	left: -$divider-width;
 	z-index: $divider-z-index;
 	width: $divider-width;
-	padding: var(--spacing-3xs) 0;
-	background-color: var(--background-background);
+	padding: var(--3xs) 0;
+	background-color: var(--background);
 
 	@include when-button-highlighted {
 		display: none;
@@ -86,14 +86,14 @@ $border-width: 1px;
 }
 
 .divider {
-	background-color: var(--color-border-secondary);
+	background-color: var(--border-secondary);
 	width: $divider-width;
 	height: 100%;
 
 	@include when-button-disabled {
-		background-color: var(--border-border-disabled);
+		background-color: var(--border-disabled);
 	}
 	@include when-select-disabled {
-		background-color: var(--border-border-disabled);
+		background-color: var(--border-disabled);
 	}
 }

package/src/components/ds-split-button/ds-split-button.types.ts

@@ -11,15 +11,43 @@ type ButtonSlotProps = Omit<DsButtonV3Props, 'variant' | 'color' | 'size'>;
 type SelectSlotProps = DistributiveOmit<DsSelectProps, 'size'>;
 
 export interface DsSplitButtonSlotProps {
+	/**
+	 * Props forwarded to the primary action button (`DsButtonV3`). `variant`, `color`
+	 * and `size` are controlled by the split button and cannot be overridden here.
+	 */
 	button: ButtonSlotProps;
+	/**
+	 * Props forwarded to the dropdown select (`DsSelect`). `size` is controlled by
+	 * the split button and cannot be overridden here.
+	 */
 	select: SelectSlotProps;
 }
 
 export interface DsSplitButtonProps {
+	/**
+	 * Ref forwarded to the split-button wrapper element
+	 */
 	ref?: Ref<HTMLDivElement>;
+	/**
+	 * Additional CSS class name applied to the wrapper element
+	 */
 	className?: string;
+	/**
+	 * Inline styles applied to the wrapper element
+	 */
 	style?: CSSProperties;
+	/**
+	 * Visual size applied to both the button and select slots.
+	 * @default medium
+	 */
 	size?: SplitButtonSize;
+	/**
+	 * Whether both the button and the select are disabled.
+	 * @default false
+	 */
 	disabled?: boolean;
+	/**
+	 * Props forwarded to the internal button and select slots.
+	 */
 	slotProps: DsSplitButtonSlotProps;
 }

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

@@ -4,12 +4,35 @@ type CSSProps = Properties<string | number>;
 import type { CSSProperties, ReactNode, Ref } from 'react';
 
 export interface DsStackProps {
+	/**
+	 * Flex direction of the stack (maps to CSS `flex-direction`).
+	 * @default row
+	 */
 	direction?: CSSProps['flexDirection'];
+	/**
+	 * Space between children (maps to CSS `gap`). Accepts any valid CSS gap value,
+	 * e.g. `8`, `'1rem'`, `'var(--ds-space-2)'`.
+	 */
 	gap?: CSSProps['gap'];
+	/**
+	 * Cross-axis alignment of children (maps to CSS `align-items`).
+	 */
 	alignItems?: CSSProps['alignItems'];
+	/**
+	 * Main-axis alignment of children (maps to CSS `justify-content`).
+	 */
 	justifyContent?: CSSProps['justifyContent'];
+	/**
+	 * Flex shorthand applied to the stack itself (maps to CSS `flex`).
+	 */
 	flex?: CSSProps['flex'];
+	/**
+	 * Whether and how children wrap onto multiple lines (maps to CSS `flex-wrap`).
+	 */
 	flexWrap?: CSSProps['flexWrap'];
+	/**
+	 * Width of the stack container (maps to CSS `width`).
+	 */
 	width?: CSSProps['width'];
 
 	children?: ReactNode;

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

@@ -7,16 +7,49 @@ export type DsStepperOrientation = 'horizontal' | 'vertical';
 
 export type DsStepperProps = PropsWithChildren<
 	{
+		/**
+		 * Visual variant of the stepper. Currently only `single` is supported.
+		 * @default single
+		 */
 		variant?: DsStepperVariant;
+		/**
+		 * Layout orientation of the stepper.
+		 * @default horizontal
+		 */
 		orientation?: DsStepperOrientation;
+		/**
+		 * When `true`, renders the stepper as a floating overlay (typically pinned
+		 * to the bottom of the viewport) instead of inline in the layout.
+		 * @default false
+		 */
 		floating?: boolean;
+		/**
+		 * Called when the final step completes (i.e., the user finishes the last step).
+		 */
 		onComplete?: steps.Props['onStepComplete'];
+		/**
+		 * Zero-based index of the currently active step (controlled). Pair with
+		 * `onStepChange`.
+		 */
 		activeStep?: steps.Props['step'];
+		/**
+		 * Additional CSS class name applied to the stepper root.
+		 */
 		className?: string;
 		/**
 		 * Optional actions rendered at the end of the stepper.
 		 * Horizontal: displayed after the steps. Vertical: displayed at the bottom.
 		 */
 		actions?: ReactNode;
-	} & Pick<steps.Props, 'onStepChange' | 'count'>
+	} & Pick<steps.Props, 'onStepChange' | 'count'> & {
+			/**
+			 * Called when the active step changes. Receives the zag-js step-change
+			 * details including the new index.
+			 */
+			onStepChange?: steps.Props['onStepChange'];
+			/**
+			 * Total number of steps in the stepper.
+			 */
+			count?: steps.Props['count'];
+		}
 >;

package/src/components/ds-table/components/ds-table-body-virtualized/ds-table-body-virtualized.types.ts

@@ -2,12 +2,39 @@ import { type RefObject, type ReactNode } from 'react';
 import { type RowSelectionState, type Table } from '@tanstack/react-table';
 
 export interface DsTableBodyVirtualizedProps<TData> {
+	/**
+	 * TanStack Table instance driving the body. Provides row models, visible rows,
+	 * and column state.
+	 */
 	table: Table<TData>;
+	/**
+	 * Ref to the scrollable container that hosts the virtualized rows. Required by
+	 * the virtualizer to measure viewport size and listen for scroll events.
+	 */
 	tableContainerRef: RefObject<HTMLDivElement | null>;
+	/**
+	 * Optional content rendered in place of rows when the table has no data.
+	 */
 	emptyState?: ReactNode;
+	/**
+	 * Initial estimated row height in pixels. Used before actual rows are measured
+	 * to compute the virtual scroll size.
+	 */
 	estimateSize: number;
+	/**
+	 * Number of rows to render above and below the visible viewport to reduce
+	 * flicker during fast scrolling.
+	 * @default 5
+	 */
 	overscan?: number;
+	/**
+	 * Called on every scroll event with the current scroll metrics. Useful for
+	 * infinite-scroll hooks and scroll-position indicators.
+	 */
 	onScroll?: (params: ScrollParams) => void;
+	/**
+	 * Current row selection state from TanStack Table. Used to style selected rows.
+	 */
 	rowSelection: RowSelectionState;
 }
 

package/src/components/ds-table/components/ds-table-cell/ds-table-cell.tsx

@@ -19,13 +19,16 @@ export const DsTableCell = <TData, TValue>({
 	primaryRowActions = [],
 	secondaryRowActions = [],
 }: DsTableCellProps<TData, TValue>) => {
-	if (primaryRowActions.length || secondaryRowActions.length) {
-		const hasSecondaryRowActions = secondaryRowActions.some((action) => !action.disabled?.(row.original));
+	const visiblePrimary = primaryRowActions.filter((action) => !action.hidden?.(row.original));
+	const visibleSecondary = secondaryRowActions.filter((action) => !action.hidden?.(row.original));
+
+	if (visiblePrimary.length || visibleSecondary.length) {
+		const hasSecondaryRowActions = visibleSecondary.length > 0;
 		return (
 			<div className={styles.lastCell}>
 				<DsDefaultTableCell cell={cell} />
 				<div className={styles.cellActions}>
-					{primaryRowActions.map((action, i) => {
+					{visiblePrimary.map((action, i) => {
 						const isDisabled = action.disabled?.(row.original);
 						const label = typeof action.label === 'function' ? action.label(row.original) : action.label;
 						return (
@@ -67,7 +70,7 @@ export const DsTableCell = <TData, TValue>({
 								</button>
 							</DsDropdownMenu.Trigger>
 							<DsDropdownMenu.Content>
-								{secondaryRowActions.map((action, i) => {
+								{visibleSecondary.map((action, i) => {
 									const label =
 										typeof action.label === 'function' ? action.label(row.original) : action.label;
 									const isDisabled = action.disabled?.(row.original);

package/src/components/ds-table/components/ds-table-cell/ds-table-cell.types.ts

@@ -20,6 +20,12 @@ export interface RowAction<TData> {
 	 */
 	tooltip?: string;
 
+	/**
+	 * Optional function to determine if the action should be hidden for a specific row.
+	 * When it returns `true`, the action is omitted from that row's menu. Takes precedence over `disabled`.
+	 */
+	hidden?: (row: TData) => boolean;
+
 	/**
 	 * Optional function to determine if the action should be disabled for a specific row
 	 */

package/src/components/ds-table/components/ds-table-row-expandable-cell/ds-table-row-expandable-cell.types.ts

@@ -1,7 +1,17 @@
 import type { Row } from '@tanstack/react-table';
 
 export interface DsTableRowExpandableCellProps<TData> {
+	/**
+	 * TanStack Table row model for the parent row. Used to toggle the row's
+	 * expanded state when the button is clicked.
+	 */
 	row: Row<TData>;
+	/**
+	 * Additional CSS class name applied to the cell element.
+	 */
 	className?: string;
+	/**
+	 * Additional CSS class name applied to the expand/collapse button.
+	 */
 	buttonClassName?: string;
 }

package/src/components/ds-table/components/ds-table-row-selectable-cell/ds-table-row-selectable-cell.types.ts

@@ -1,7 +1,18 @@
 import type { Row } from '@tanstack/react-table';
 
 export interface DsTableRowSelectableCellProps<TData> {
+	/**
+	 * TanStack Table row model for the parent row. Used to toggle the row's
+	 * selection state when the checkbox is clicked.
+	 */
 	row: Row<TData>;
+	/**
+	 * Whether the parent row is currently selected. Drives the checkbox's
+	 * checked state.
+	 */
 	isSelected: boolean;
+	/**
+	 * Additional CSS class name applied to the cell element.
+	 */
 	className?: string;
 }

package/src/components/ds-table/components/ds-table-row-virtualized/ds-table-row-virtualized.types.ts

@@ -3,11 +3,38 @@ import { type Row } from '@tanstack/react-table';
 import { type VirtualItem, type Virtualizer } from '@tanstack/react-virtual';
 
 export interface DsTableRowVirtualizedProps<TData> {
+	/**
+	 * TanStack Table row model for this visual row.
+	 */
 	row: Row<TData>;
+	/**
+	 * Whether this row is currently part of the selection.
+	 */
 	isSelected: boolean;
+	/**
+	 * Shared ref that maps row ids to their rendered `<tr>` elements. The row
+	 * registers itself here on mount so the virtualizer can measure heights and
+	 * reference rows by id.
+	 */
 	rowsMapRef: RefObject<Map<string, HTMLTableRowElement>>;
+	/**
+	 * Shared ref that caches the measured height of each row by id, so the
+	 * virtualizer can preserve layout across remounts.
+	 */
 	rowHeightsMapRef: RefObject<Map<string, number>>;
+	/**
+	 * TanStack virtualizer driving the scroll window for the table body.
+	 */
 	rowVirtualizer: Virtualizer<HTMLDivElement, HTMLTableRowElement>;
+	/**
+	 * Virtual item descriptor for this row (index, start, size) from the virtualizer.
+	 */
 	virtualRow: VirtualItem;
+	/**
+	 * Whether this row renders expanded-row content (e.g., detail panel under the
+	 * parent row) rather than a regular data row. Click handlers stop propagation
+	 * when true to avoid triggering the parent's `onRowClick`.
+	 * @default false
+	 */
 	isExpandedRowContent?: boolean;
 }

package/src/components/ds-table/filters/types/filter-adapter.types.ts

@@ -106,6 +106,12 @@ export interface FilterState<TValue> {
  * Column filter for TanStack Table
  */
 export interface ColumnFilterState<TValue> {
+	/**
+	 * Column identifier this filter applies to (matches the column `accessorKey`).
+	 */
 	id: string;
+	/**
+	 * Current filter value, passed to the column's filter function.
+	 */
 	value: TValue;
 }

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.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.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