@drivenets/design-system 0.9.0 → 0.10.0

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

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

@@ -4,53 +4,129 @@ import type { IconType } from '../ds-icon';
 import type { FilterStatus } from '../ds-filter-status-icon';
 
 export interface DsTreeNode {
+	/**
+	 * Stable identifier for the node. Used as the key in selection, expansion, and
+	 * checked-state arrays.
+	 */
 	id: string;
+	/**
+	 * Display name rendered for the node
+	 */
 	name: string;
+	/**
+	 * Whether the node is disabled and cannot be selected, expanded, or checked.
+	 * @default false
+	 */
 	disabled?: boolean;
+	/**
+	 * Optional icon rendered before the node name
+	 */
 	icon?: IconType;
+	/**
+	 * Optional status indicator shown next to the node (e.g., active/inactive filter).
+	 */
 	status?: FilterStatus;
+	/**
+	 * Child nodes rendered under this node when it is expanded. Leaf nodes omit this.
+	 */
 	children?: DsTreeNode[];
 }
 
 export const dsTreeSizes = ['medium', 'small'] as const;
 export type DsTreeSize = (typeof dsTreeSizes)[number];
 
-interface DsTreeBaseProps {
+export interface DsTreeBaseProps {
 	className?: string;
 	style?: CSSProperties;
 }
 
-interface DsTreeBasePropsWithChildren extends DsTreeBaseProps {
+export interface DsTreeBasePropsWithChildren extends DsTreeBaseProps {
 	children?: ReactNode;
 }
 
 export interface DsTreeRootProps<T extends DsTreeNode = DsTreeNode> extends DsTreeBasePropsWithChildren {
+	/**
+	 * Ark UI tree collection describing the node hierarchy. Build it with
+	 * `createTreeCollection` and pass the resulting collection in.
+	 */
 	collection: ArkTreeView.RootProps<T>['collection'];
+	/**
+	 * Controls visual density of tree rows.
+	 * @default medium
+	 */
 	size?: DsTreeSize;
+	/**
+	 * Ref forwarded to the tree root element
+	 */
 	ref?: Ref<HTMLDivElement>;
 
+	/**
+	 * Ids of currently selected nodes (controlled). Use with `onSelectionChange`.
+	 */
 	selectedValue?: string[];
+	/**
+	 * Ids of nodes selected initially when uncontrolled.
+	 */
 	defaultSelectedValue?: string[];
+	/**
+	 * Called when node selection changes. Receives the Ark selection details
+	 * including the new `selectedValue` array.
+	 */
 	onSelectionChange?: ArkTreeView.RootProps<T>['onSelectionChange'];
+	/**
+	 * Whether only one node can be selected at a time (`single`) or multiple
+	 * selections are allowed (`multiple`).
+	 * @default single
+	 */
 	selectionMode?: 'single' | 'multiple';
 
+	/**
+	 * Ids of currently expanded branch nodes (controlled). Use with `onExpandedChange`.
+	 */
 	expandedValue?: string[];
+	/**
+	 * Ids of branch nodes expanded initially when uncontrolled.
+	 */
 	defaultExpandedValue?: string[];
+	/**
+	 * Called when the set of expanded nodes changes. Receives the Ark expansion
+	 * details including the new `expandedValue` array.
+	 */
 	onExpandedChange?: ArkTreeView.RootProps<T>['onExpandedChange'];
+	/**
+	 * Whether clicking anywhere on a branch row toggles its expansion in addition
+	 * to clicking the branch indicator.
+	 * @default false
+	 */
 	expandOnClick?: boolean;
 
+	/**
+	 * Ids of nodes currently in the "checked" state (for checkbox trees). Use with
+	 * `onCheckedChange`.
+	 */
 	checkedValue?: string[];
+	/**
+	 * Ids of nodes initially checked when uncontrolled.
+	 */
 	defaultCheckedValue?: string[];
+	/**
+	 * Called when the set of checked nodes changes. Receives the Ark checked-change
+	 * details including the new `checkedValue` array.
+	 */
 	onCheckedChange?: ArkTreeView.RootProps<T>['onCheckedChange'];
 
 	/**
-	 * Whether to enable typeahead navigation — typing characters focuses matching nodes
+	 * Whether to enable typeahead navigation — typing characters focuses matching nodes.
 	 */
 	typeahead?: boolean;
 	/**
-	 * Whether to defer mounting of branch content until a branch is first expanded
+	 * Whether to defer mounting of branch content until a branch is first expanded.
 	 */
 	lazyMount?: boolean;
+	/**
+	 * Whether to unmount branch content when the branch is collapsed (vs. hiding it).
+	 * Pair with `lazyMount` to control mounting strategy.
+	 */
 	unmountOnExit?: boolean;
 }
 
@@ -69,6 +145,9 @@ export type DsTreeBranchContentProps = DsTreeBasePropsWithChildren;
 export type DsTreeBranchIndentGuideProps = DsTreeBaseProps;
 
 export interface DsTreeItemProps extends DsTreeBasePropsWithChildren {
+	/**
+	 * Called when the leaf item is clicked. Receives the native mouse event.
+	 */
 	onClick?: (event: MouseEvent<HTMLDivElement>) => void;
 }
 
@@ -79,5 +158,8 @@ export type DsTreeItemIndicatorProps = DsTreeBaseProps;
 export type DsTreeNodeCheckboxProps = DsTreeBaseProps;
 
 export interface DsTreeItemActionProps extends DsTreeBasePropsWithChildren {
+	/**
+	 * Called when the row action button is clicked. Receives the native mouse event.
+	 */
 	onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
 }

package/src/components/ds-typography/ds-typography.config.ts

@@ -1,32 +1,51 @@
-export const semanticElementMap = {
-	// Body variants
-	'body-md-reg': 'p',
-	'body-md-md': 'p',
-	'body-md-semi-bold': 'p',
-	'body-md-bold': 'p',
-	'body-md-link': 'a',
+import { ark } from '@ark-ui/react';
 
-	'body-sm-reg': 'span',
-	'body-sm-md': 'span',
-	'body-sm-semi-bold': 'span',
-	'body-sm-bold': 'span',
-	'body-sm-link': 'a',
+export const typographyVariantConfig = {
+	'body-md-reg': { element: 'p', component: ark.p },
+	'body-md-md': { element: 'p', component: ark.p },
+	'body-md-semi-bold': { element: 'p', component: ark.p },
+	'body-md-bold': { element: 'p', component: ark.p },
+	'body-md-link': { element: 'a', component: ark.a },
 
-	'body-xs-reg': 'span',
-	'body-xs-md': 'span',
-	'body-xs-semi-bold': 'span',
-	'body-xs-bold': 'span',
-	'body-xs-link': 'a',
+	'body-sm-reg': { element: 'span', component: ark.span },
+	'body-sm-md': { element: 'span', component: ark.span },
+	'body-sm-semi-bold': { element: 'span', component: ark.span },
+	'body-sm-bold': { element: 'span', component: ark.span },
+	'body-sm-link': { element: 'a', component: ark.a },
 
-	// Code variants
-	'code-sm-reg': 'code',
-	'code-sm-semi-bold': 'code',
-	'code-xs-reg': 'code',
-	'code-xs-semi-bold': 'code',
+	'body-xs-reg': { element: 'span', component: ark.span },
+	'body-xs-md': { element: 'span', component: ark.span },
+	'body-xs-semi-bold': { element: 'span', component: ark.span },
+	'body-xs-bold': { element: 'span', component: ark.span },
+	'body-xs-link': { element: 'a', component: ark.a },
 
-	// Heading variants
-	heading1: 'h1',
-	heading2: 'h2',
-	heading3: 'h3',
-	heading4: 'h4',
+	'code-sm-reg': { element: 'code', component: ark.code },
+	'code-sm-semi-bold': { element: 'code', component: ark.code },
+	'code-xs-reg': { element: 'code', component: ark.code },
+	'code-xs-semi-bold': { element: 'code', component: ark.code },
+
+	heading1: { element: 'h1', component: ark.h1 },
+	heading2: { element: 'h2', component: ark.h2 },
+	heading3: { element: 'h3', component: ark.h3 },
+	heading4: { element: 'h4', component: ark.h4 },
 } as const;
+
+/** Semantic text colors backed by `--font-*` tokens in `_root_new.scss`. */
+export const typographyColors = [
+	'main',
+	'secondary',
+	'action',
+	'action-hover',
+	'action-secondary',
+	'action-secondary-hover',
+	'disabled',
+	'light-disabled',
+	'on-action',
+	'on-disabled',
+	'placeholder',
+	'highlight',
+	'success',
+	'warning',
+	'error',
+	'code',
+] as const;

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

@@ -1,24 +1,39 @@
-import type React from 'react';
-import { Slot } from '@radix-ui/react-slot';
 import classNames from 'classnames';
 import type { DsTypographyProps } from './ds-typography.types';
-import { semanticElementMap } from './ds-typography.config';
+import { typographyColors, typographyVariantConfig } from './ds-typography.config';
 import styles from './ds-typography.module.scss';
 
+const semanticColorSet = new Set<string>(typographyColors);
+
+const resolveColor = (color: string): string =>
+	semanticColorSet.has(color) ? `var(--font-${color})` : color;
+
 /*
  * Design system Typography component that provides consistent text styling
  */
-const DsTypography: React.FC<DsTypographyProps & { ref?: React.Ref<HTMLElement> }> = ({
+const DsTypography = ({
 	ref,
 	variant,
 	asChild = false,
 	className,
+	style,
+	color,
 	children,
 	...props
-}) => {
-	const Component: React.ElementType = asChild ? Slot : semanticElementMap[variant];
+}: DsTypographyProps) => {
+	const Component = typographyVariantConfig[variant].component;
+
 	return (
-		<Component ref={ref} className={classNames(styles[variant], className)} {...props}>
+		<Component
+			// very dynamic ref in here
+			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+			// @ts-expect-error
+			ref={ref}
+			asChild={asChild}
+			className={classNames(styles[variant], className)}
+			style={color ? { color: resolveColor(color), ...style } : style}
+			{...props}
+		>
 			{children}
 		</Component>
 	);

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

@@ -1,13 +1,24 @@
-import type React from 'react';
-import type { semanticElementMap } from './ds-typography.config';
+import type { Ref } from 'react';
+import type { typographyColors, typographyVariantConfig } from './ds-typography.config';
 
-export type SemanticVariant = keyof typeof semanticElementMap;
+export type SemanticVariant = keyof typeof typographyVariantConfig;
+export type TypographyColor = (typeof typographyColors)[number];
 
 export interface DsTypographyProps {
+	/**
+	 * Ref to the rendered element.
+	 */
+	ref?: Ref<HTMLElement>;
 	/**
 	 * The semantic variant of the component
 	 */
 	variant: SemanticVariant;
+	/**
+	 * Text color. Semantic names map to `--font-*` tokens; raw CSS color values
+	 * (hex, rgb, hsl, CSS variables, named colors) pass through unchanged.
+	 * Omit to inherit.
+	 */
+	color?: TypographyColor | (string & {});
 	/**
 	 * Additional CSS class names
 	 */
@@ -17,7 +28,7 @@ export interface DsTypographyProps {
 	 */
 	style?: React.CSSProperties;
 	/**
-	 * When true, renders as Slot component for composition without extra DOM nodes
+	 * When true, composes typography styles onto the child element without extra DOM nodes
 	 */
 	asChild?: boolean;
 	/**

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

@@ -0,0 +1,55 @@
+.root {
+	--ds-workspace-header-height: 54px;
+	--ds-workspace-header-gradient: radial-gradient(
+		ellipse at left bottom,
+		rgba(1, 75, 253, 1) 0%,
+		rgba(10, 60, 194, 1) 78%,
+		rgba(16, 51, 160, 1) 89%,
+		rgba(21, 42, 126, 1) 100%
+	);
+
+	display: flex;
+	flex-direction: column;
+	height: 100vh;
+	overflow: hidden;
+	background: var(--background);
+}
+
+.fillParent {
+	height: 100%;
+}
+
+.header {
+	display: flex;
+	align-items: center;
+	flex-shrink: 0;
+	height: var(--ds-workspace-header-height);
+	padding: 0 var(--sm) 0 var(--lg);
+	background: var(--ds-workspace-header-gradient);
+	color: var(--font-on-action);
+	overflow: clip;
+}
+
+.subHeader {
+	display: flex;
+	align-items: center;
+	flex-shrink: 0;
+	padding: var(--xs) var(--standard);
+	border-bottom: 1px solid var(--border);
+	background: var(--background);
+}
+
+.content {
+	position: relative;
+	flex: 1;
+	overflow: auto;
+}
+
+.footer {
+	display: flex;
+	align-items: center;
+	flex-shrink: 0;
+	padding: var(--xs) var(--standard);
+	border-top: 1px solid var(--border);
+	background: var(--background);
+}

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

@@ -0,0 +1,37 @@
+import classNames from 'classnames';
+import styles from './ds-workspace.module.scss';
+import type {
+	DsWorkspaceProps,
+	DsWorkspaceHeaderProps,
+	DsWorkspaceSubHeaderProps,
+	DsWorkspaceContentProps,
+	DsWorkspaceFooterProps,
+} from './ds-workspace.types';
+
+const DsWorkspace = ({ className, fillParent = false, ...rest }: DsWorkspaceProps) => (
+	<div {...rest} className={classNames(styles.root, { [styles.fillParent]: fillParent }, className)} />
+);
+
+const Header = ({ className, ...rest }: DsWorkspaceHeaderProps) => (
+	<header {...rest} className={classNames(styles.header, className)} />
+);
+
+const SubHeader = ({ className, ...rest }: DsWorkspaceSubHeaderProps) => (
+	<div {...rest} className={classNames(styles.subHeader, className)} />
+);
+
+/** Stacking context for non-portal drawer containment. */
+const Content = ({ className, ...rest }: DsWorkspaceContentProps) => (
+	<div {...rest} className={classNames(styles.content, className)} />
+);
+
+const Footer = ({ className, ...rest }: DsWorkspaceFooterProps) => (
+	<footer {...rest} className={classNames(styles.footer, className)} />
+);
+
+DsWorkspace.Header = Header;
+DsWorkspace.SubHeader = SubHeader;
+DsWorkspace.Content = Content;
+DsWorkspace.Footer = Footer;
+
+export default DsWorkspace;