@drivenets/design-system 0.0.1

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

@@ -0,0 +1,100 @@
+@use '../../styles/shared/modal' as shared;
+
+$pad-x: 24px;
+$pad-y: 16px;
+$max-width: 90vw;
+$max-height: 90vh;
+
+.overlay {
+	@include shared.overlay-base;
+}
+
+.modal {
+	@include shared.modal-base;
+}
+
+.content {
+	@include shared.content-base;
+	height: 100%;
+}
+
+.header,
+.footer,
+.body {
+	padding: $pad-y $pad-x;
+}
+
+.header {
+	@include shared.header-base;
+}
+
+.footer {
+	@include shared.footer-base;
+	display: flex;
+}
+
+.title {
+	@include shared.title-base;
+}
+
+.body {
+	@include shared.body-base;
+}
+
+.actions {
+	@include shared.actions-base;
+	margin-left: auto;
+}
+
+// width classes derived from DS grid
+.modal {
+	inline-size: min(var(--col-span-6), $max-width);
+}
+
+.modal.cols-1 {
+	inline-size: min(var(--col-span-1), $max-width);
+}
+
+.modal.cols-2 {
+	inline-size: min(var(--col-span-2), $max-width);
+}
+
+.modal.cols-3 {
+	inline-size: min(var(--col-span-3), $max-width);
+}
+
+.modal.cols-4 {
+	inline-size: min(var(--col-span-4), $max-width);
+}
+
+.modal.cols-5 {
+	inline-size: min(var(--col-span-5), $max-width);
+}
+
+.modal.cols-6 {
+	inline-size: min(var(--col-span-6), $max-width);
+}
+
+.modal.cols-7 {
+	inline-size: min(var(--col-span-7), $max-width);
+}
+
+.modal.cols-8 {
+	inline-size: min(var(--col-span-8), $max-width);
+}
+
+.modal.cols-9 {
+	inline-size: min(var(--col-span-9), $max-width);
+}
+
+.modal.cols-10 {
+	inline-size: min(var(--col-span-10), $max-width);
+}
+
+.modal.cols-11 {
+	inline-size: min(var(--col-span-11), $max-width);
+}
+
+.modal.cols-12 {
+	inline-size: min(var(--col-span-12), $max-width);
+}

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

@@ -0,0 +1,136 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { Dialog } from '@ark-ui/react/dialog';
+import { Portal } from '@ark-ui/react/portal';
+import classNames from 'classnames';
+import type { DsModalProps } from './ds-modal.types';
+import styles from './ds-modal.module.scss';
+import { DsIcon } from '../ds-icon';
+import { DsTypography } from '../ds-typography';
+
+/**
+ * Composable modal dialog.
+ * Supports custom header, footer, and body content with grid-based sizing.
+ * Use columns prop to control modal width (1-12 grid columns).
+ */
+const DsModal = ({
+	open,
+	onOpenChange,
+	columns = 6,
+	style,
+	className,
+	modal = true,
+	closeOnEscape,
+	closeOnInteractOutside = false,
+	children,
+}: DsModalProps) => {
+	const handleOpenChange = (details: { open: boolean }) => {
+		onOpenChange(details.open);
+	};
+
+	return (
+		<Dialog.Root
+			open={open}
+			onOpenChange={handleOpenChange}
+			modal={modal}
+			closeOnEscape={closeOnEscape}
+			closeOnInteractOutside={closeOnInteractOutside}
+		>
+			<Portal>
+				<Dialog.Backdrop className={styles.overlay} />
+				<Dialog.Positioner>
+					<Dialog.Content
+						style={style}
+						className={classNames(styles.modal, styles[`cols-${String(columns)}`], className)}
+					>
+						<div className={classNames(styles.content)}>{children}</div>
+					</Dialog.Content>
+				</Dialog.Positioner>
+			</Portal>
+		</Dialog.Root>
+	);
+};
+
+const Header = ({
+	style,
+	className,
+	children,
+}: {
+	style?: CSSProperties;
+	className?: string;
+	children: ReactNode;
+}) => (
+	<div style={style} className={classNames(styles.header, className)}>
+		{children}
+	</div>
+);
+
+const Title = ({
+	style,
+	className,
+	children,
+}: {
+	style?: CSSProperties;
+	className?: string;
+	children: ReactNode;
+}) => (
+	<Dialog.Title className={classNames(styles.title, className)} style={style} asChild>
+		<DsTypography variant="heading3">{children}</DsTypography>
+	</Dialog.Title>
+);
+
+const CloseTrigger = ({ style, className }: { style?: CSSProperties; className?: string }) => (
+	<Dialog.CloseTrigger style={style} className={className}>
+		<DsIcon icon="close" size="small"></DsIcon>
+	</Dialog.CloseTrigger>
+);
+
+const Body = ({
+	style,
+	className,
+	children,
+}: {
+	style?: CSSProperties;
+	className?: string;
+	children: ReactNode;
+}) => (
+	<div style={style} className={classNames(styles.body, className)}>
+		{children}
+	</div>
+);
+
+const Footer = ({
+	style,
+	className,
+	children,
+}: {
+	style?: CSSProperties;
+	className?: string;
+	children: ReactNode;
+}) => (
+	<div style={style} className={classNames(styles.footer, className)}>
+		{children}
+	</div>
+);
+
+const Actions = ({
+	style,
+	className,
+	children,
+}: {
+	style?: CSSProperties;
+	className?: string;
+	children: ReactNode;
+}) => (
+	<div style={style} className={classNames(styles.actions, className)}>
+		{children}
+	</div>
+);
+
+DsModal.Header = Header;
+DsModal.Title = Title;
+DsModal.CloseTrigger = CloseTrigger;
+DsModal.Body = Body;
+DsModal.Footer = Footer;
+DsModal.Actions = Actions;
+
+export default DsModal;

package/src/components/ds-modal/ds-modal.types.tsx

@@ -0,0 +1,44 @@
+import type { CSSProperties, ReactNode } from 'react';
+import type { UseDialogProps as DialogProps } from '@ark-ui/react/dialog';
+
+/**
+ * Available column sizes for modal width
+ */
+export type DsModalColumns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+
+/**
+ * Props for the DsModal component
+ */
+export interface DsModalProps extends Pick<
+	DialogProps,
+	'modal' | 'closeOnEscape' | 'closeOnInteractOutside'
+> {
+	/**
+	 * Whether the modal is open
+	 */
+	open: boolean;
+	/**
+	 * Callback when modal open state changes
+	 * @param open - whether the modal is open
+	 */
+	onOpenChange: (open: boolean) => void;
+
+	/**
+	 * Number of grid columns for modal width
+	 * @default 6
+	 */
+	columns?: DsModalColumns;
+	/**
+	 * Optional inline styles to apply to the component
+	 */
+	style?: CSSProperties;
+	/**
+	 * Additional CSS class name
+	 */
+	className?: string;
+
+	/**
+	 * Modal body content
+	 */
+	children: ReactNode;
+}

package/src/components/ds-modal/index.tsx

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

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

@@ -0,0 +1,15 @@
+@use '../../styles/shared/input';
+
+.textInputContainer {
+	@include input.inputContainer;
+}
+
+.input {
+	@include input.input;
+
+	text-align: center;
+}
+
+.iconButton {
+	@include input.iconButton;
+}

package/src/components/ds-number-input/ds-number-input.tsx

@@ -0,0 +1,74 @@
+import type { FC } from 'react';
+import classNames from 'classnames';
+import { NumberInput } from '@ark-ui/react';
+import styles from './ds-number-input.module.scss';
+import type { DsNumberInputProps } from './ds-number-input.types';
+import { DsIcon } from '../ds-icon';
+
+const DsNumberInput: FC<DsNumberInputProps> = ({
+	id,
+	ref,
+	name,
+	size = 'default',
+	onBlur,
+	onChange,
+	onValueChange,
+	className,
+	style = {},
+	placeholder,
+	disabled = false,
+	min,
+	max,
+	step,
+	value,
+	defaultValue,
+}) => {
+	const containerClass = classNames(
+		styles.textInputContainer,
+		{
+			[styles.small]: size === 'small',
+			[styles.default]: size === 'default',
+		},
+		className,
+	);
+
+	return (
+		<NumberInput.Root
+			id={id}
+			min={min}
+			max={max}
+			step={step}
+			disabled={disabled}
+			value={typeof value !== 'undefined' ? String(value) : undefined}
+			defaultValue={typeof defaultValue !== 'undefined' ? String(defaultValue) : undefined}
+			onValueChange={(details) => onValueChange?.(details.valueAsNumber)}
+		>
+			<NumberInput.Control asChild>
+				<div className={containerClass} style={style}>
+					<NumberInput.DecrementTrigger asChild>
+						<button type="button" className={classNames(styles.iconButton)} aria-label="Decrease value">
+							<DsIcon icon="remove" size="tiny" />
+						</button>
+					</NumberInput.DecrementTrigger>
+
+					<NumberInput.Input
+						ref={ref}
+						name={name}
+						className={classNames(styles.input)}
+						placeholder={placeholder}
+						onBlur={onBlur}
+						onChange={onChange}
+					></NumberInput.Input>
+
+					<NumberInput.IncrementTrigger asChild>
+						<button type="button" className={classNames(styles.iconButton)} aria-label="Increase value">
+							<DsIcon icon="add" size="tiny" />
+						</button>
+					</NumberInput.IncrementTrigger>
+				</div>
+			</NumberInput.Control>
+		</NumberInput.Root>
+	);
+};
+
+export default DsNumberInput;

package/src/components/ds-number-input/ds-number-input.types.tsx

@@ -0,0 +1,76 @@
+import type React from 'react';
+
+export interface DsNumberInputProps {
+	/**
+	 * Unique identifier for the input field
+	 */
+	id?: string;
+	/**
+	 * The ref to the input field
+	 */
+	ref?: React.Ref<HTMLInputElement>;
+	/**
+	 * The name of the input field
+	 */
+	name?: string;
+	/**
+	 * The size of the input field
+	 * @default default
+	 */
+	size?: 'small' | 'default';
+	/**
+	 * Event handler called when the input field loses focus
+	 *
+	 * @param event
+	 */
+	onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+	/**
+	 * Callback when the value changes (native input onChange event)
+	 * This is provided for compatibility but onValueChange is preferred
+	 */
+	onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+	/**
+	 * Value change event handler (provides just the number value)
+	 * This is the preferred way to handle value changes
+	 */
+	onValueChange?: (value: number) => void;
+	/**
+	 * Additional CSS class names
+	 */
+	className?: string;
+	/**
+	 * Additional styles to apply to the component
+	 */
+	style?: React.CSSProperties;
+	/**
+	 * The placeholder text
+	 */
+	placeholder?: string;
+	/**
+	 * Whether the number input is disabled
+	 */
+	disabled?: boolean;
+	/**
+	 * The minimum value of the number input
+	 */
+	min?: number | undefined;
+	/**
+	 * The maximum value of the number input
+	 * @default Number.MAX_SAFE_INTEGER
+	 */
+	max?: number | undefined;
+	/**
+	 * The amount to increment or decrement the value by
+	 * @default 1
+	 */
+	step?: number | undefined;
+	/**
+	 * The controlled value of the input
+	 */
+	value?: number | undefined;
+	/**
+	 * The initial value of the input when rendered.
+	 * Use when you don't need to control the value of the input.
+	 */
+	defaultValue?: number | undefined;
+}

package/src/components/ds-number-input/index.tsx

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

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

@@ -0,0 +1,95 @@
+.root {
+	position: relative;
+	background: var(--white);
+	padding: var(--spacing-6);
+	width: 340px;
+	border-inline-end: 1px solid transparent;
+
+	&[data-state='open']:hover,
+	&[data-state='open']:focus-within {
+		border-color: var(--color-border);
+	}
+
+	&[data-state='closed'] {
+		display: none;
+	}
+
+	&.variantFloating {
+		position: absolute;
+		inset-inline-start: var(--spacing-3);
+		top: var(--spacing-3);
+		border: none;
+		border-radius: var(--spacing-2);
+		filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.22));
+	}
+
+	&.disablePadding {
+		padding: 0;
+	}
+}
+
+.trigger {
+	--size: 28px;
+
+	position: absolute;
+	cursor: pointer;
+	user-select: none;
+	display: none;
+	height: var(--size);
+	width: var(--size);
+	padding: 1px;
+	border: 1px solid var(--color-border-secondary);
+	border-radius: 100%;
+	background: var(--white);
+	color: var(--color-icon-secondary);
+	top: var(--spacing-6);
+	inset-inline-start: 100%;
+	margin-inline-start: calc(var(--size) / -2);
+
+	&[data-state='closed'],
+	&.triggerCollapsed {
+		rotate: y 180deg;
+	}
+
+	.root:hover &,
+	.root:focus-within & {
+		display: flex;
+	}
+
+	&:hover,
+	&:focus {
+		color: var(--color-icon-primary);
+		border-color: var(--color-border-action-primary);
+		outline: none;
+		background: var(--color-background-action-tertiary);
+
+		.root:has(&) {
+			border-color: var(--color-border-action-primary);
+
+			// Add an inset single-sided border on hover without affecting the layout.
+			&.variantDocked[data-state='open']::before {
+				content: '';
+				display: block;
+				position: absolute;
+				height: 100%;
+				width: 1px;
+				top: 0;
+				inset-inline-end: 0;
+				background: var(--color-border-action-primary);
+				pointer-events: none;
+			}
+		}
+	}
+
+	// Increase surface size for better clickability.
+	&::after {
+		content: '';
+		position: absolute;
+		inset: calc(-1 * var(--spacing-1));
+	}
+
+	.root.variantFloating & {
+		top: 50%;
+		transform: translateY(-50%);
+	}
+}

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

@@ -0,0 +1,46 @@
+import * as Collapsible from '@radix-ui/react-collapsible';
+import classnames from 'classnames';
+import styles from './ds-panel.module.scss';
+import { DsIcon } from '../ds-icon';
+import type { DsPanelCollapseButtonProps, DsPanelProps } from './ds-panel.types';
+
+export function DsPanel({
+	open,
+	onOpenChange,
+	children,
+	className,
+	slotProps,
+	variant = 'docked',
+	disablePadding = false,
+	...props
+}: DsPanelProps) {
+	return (
+		<Collapsible.Root
+			open={open}
+			onOpenChange={onOpenChange}
+			className={classnames(styles.root, className, {
+				[styles.variantDocked]: variant === 'docked',
+				[styles.variantFloating]: variant === 'floating',
+				[styles.disablePadding]: disablePadding,
+			})}
+			{...props}
+		>
+			<DsPanelCollapseButton {...slotProps?.collapseButton} />
+			{children}
+		</Collapsible.Root>
+	);
+}
+
+function DsPanelCollapseButton({ collapsed, ...props }: DsPanelCollapseButtonProps) {
+	return (
+		<Collapsible.Trigger
+			className={classnames(styles.trigger, {
+				[styles.triggerCollapsed]: collapsed,
+			})}
+			aria-label="Toggle panel"
+			{...props}
+		>
+			<DsIcon icon="arrow_circle_left" variant="outlined" />
+		</Collapsible.Trigger>
+	);
+}

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

@@ -0,0 +1,17 @@
+import type * as Collapsible from '@radix-ui/react-collapsible';
+
+export type DsPanelVariant = 'docked' | 'floating';
+
+export type DsPanelProps = Omit<Collapsible.CollapsibleProps, 'onOpenChange'> & {
+	variant?: DsPanelVariant;
+	disablePadding?: boolean;
+	slotProps?: {
+		collapseButton?: DsPanelCollapseButtonProps;
+	};
+	onOpenChange?: (open: boolean) => void;
+};
+
+export type DsPanelCollapseButtonProps = {
+	onClick?: () => void;
+	collapsed?: boolean;
+};

package/src/components/ds-panel/index.tsx

@@ -0,0 +1,2 @@
+export { DsPanel } from './ds-panel';
+export type { DsPanelProps, DsPanelVariant, DsPanelCollapseButtonProps } from './ds-panel.types';

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

@@ -0,0 +1,10 @@
+@use '../../styles/typography';
+@use '../../styles/shared/input';
+
+.textInputContainer {
+	@include input.inputContainer;
+}
+
+.input {
+	@include input.input;
+}

package/src/components/ds-password-input/ds-password-input.tsx

@@ -0,0 +1,67 @@
+import type { FC } from 'react';
+import classNames from 'classnames';
+import { PasswordInput } from '@ark-ui/react';
+import styles from './ds-password-input.module.scss';
+import type { DsPasswordInputProps } from './ds-password-input.types';
+import { DsIcon } from '../ds-icon';
+
+const DsPasswordInput: FC<DsPasswordInputProps> = ({
+	id,
+	ref,
+	name,
+	size = 'default',
+	onBlur,
+	onChange,
+	onValueChange,
+	className,
+	style = {},
+	value,
+	defaultValue,
+	placeholder,
+	disabled = false,
+}) => {
+	const containerClass = classNames(
+		styles.textInputContainer,
+		{
+			[styles.small]: size === 'small',
+			[styles.default]: size === 'default',
+		},
+		className,
+	);
+
+	return (
+		<PasswordInput.Root disabled={disabled}>
+			<PasswordInput.Control>
+				<div className={containerClass} style={style}>
+					<PasswordInput.Input asChild>
+						<input
+							id={id}
+							ref={ref}
+							name={name}
+							className={classNames(styles.input)}
+							value={value}
+							defaultValue={defaultValue}
+							placeholder={placeholder}
+							onBlur={onBlur}
+							onChange={(event) => {
+								onChange?.(event);
+								onValueChange?.(event.target.value);
+							}}
+						/>
+					</PasswordInput.Input>
+
+					<PasswordInput.VisibilityTrigger className={styles.trigger} aria-label="Toggle password visibility">
+						<PasswordInput.Indicator
+							className={styles.indicator}
+							fallback={<DsIcon icon="visibility_off" size="tiny" />}
+						>
+							<DsIcon icon="visibility" size="tiny" />
+						</PasswordInput.Indicator>
+					</PasswordInput.VisibilityTrigger>
+				</div>
+			</PasswordInput.Control>
+		</PasswordInput.Root>
+	);
+};
+
+export default DsPasswordInput;