@drivenets/design-system 0.0.1

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

@@ -0,0 +1,160 @@
+import { type CSSProperties, type ReactNode, Fragment } from 'react';
+import { Dialog } from '@ark-ui/react/dialog';
+import { Portal } from '@ark-ui/react/portal';
+import classNames from 'classnames';
+import type { DsDrawerProps } from './ds-drawer.types';
+import styles from './ds-drawer.module.scss';
+import { DsIcon } from '../ds-icon';
+import { DsTypography } from '../ds-typography';
+
+/**
+ * Composable drawer component.
+ * Supports grid-based sizing, flexible positioning, and compound components.
+ * Use columns prop to control drawer width (1-12 grid columns).
+ */
+const DsDrawer = ({
+	open,
+	onOpenChange,
+	columns = 4,
+	position = 'end',
+	backdrop = false,
+	closeOnEscape = true,
+	closeOnInteractOutside = false,
+	portal = false,
+	style,
+	className,
+	children,
+}: DsDrawerProps) => {
+	const handleOpenChange = (details: { open: boolean }) => {
+		onOpenChange(details.open);
+	};
+	const Wrapper = portal ? Portal : Fragment;
+
+	return (
+		<Dialog.Root
+			open={open}
+			onOpenChange={handleOpenChange}
+			modal={backdrop}
+			closeOnEscape={closeOnEscape}
+			closeOnInteractOutside={closeOnInteractOutside}
+			preventScroll={backdrop}
+		>
+			<Wrapper>
+				{backdrop && <Dialog.Backdrop className={styles.backdrop} />}
+				<Dialog.Positioner className={styles.positioner}>
+					<Dialog.Content
+						style={style}
+						className={classNames(
+							styles.drawer,
+							styles[`cols-${String(columns)}`],
+							styles[`position-${position}`],
+							className,
+						)}
+					>
+						<div className={styles.content}>{children}</div>
+					</Dialog.Content>
+				</Dialog.Positioner>
+			</Wrapper>
+		</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={classNames(styles.closeTrigger, className)}>
+		<DsIcon icon="close" size="small" />
+	</Dialog.CloseTrigger>
+);
+
+const Toolbar = ({
+	style,
+	className,
+	children,
+}: {
+	style?: CSSProperties;
+	className?: string;
+	children: ReactNode;
+}) => (
+	<div style={style} className={classNames(styles.toolbar, className)}>
+		{children}
+	</div>
+);
+
+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>
+);
+
+DsDrawer.Header = Header;
+DsDrawer.Title = Title;
+DsDrawer.CloseTrigger = CloseTrigger;
+DsDrawer.Toolbar = Toolbar;
+DsDrawer.Body = Body;
+DsDrawer.Footer = Footer;
+DsDrawer.Actions = Actions;
+
+export default DsDrawer;

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

@@ -0,0 +1,54 @@
+import type { CSSProperties, ReactNode } from 'react';
+import type { UseDialogProps as DialogProps } from '@ark-ui/react/dialog';
+
+/**
+ * Available positions for the drawer
+ */
+export type DsDrawerPosition = 'start' | 'end';
+/**
+ * Available column sizes for drawer width
+ */
+export type DsDrawerColumns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+
+export interface DsDrawerProps extends Pick<DialogProps, 'closeOnEscape' | 'closeOnInteractOutside'> {
+	/**
+	 * Whether the drawer is open
+	 */
+	open: boolean;
+	/**
+	 * Callback when the drawer open state changes
+	 */
+	onOpenChange: (open: boolean) => void;
+	/**
+	 * Number of grid columns the drawer should span (1-12)
+	 * @default 4
+	 */
+	columns?: DsDrawerColumns;
+	/**
+	 * Position of the drawer
+	 * @default 'end'
+	 */
+	position?: DsDrawerPosition;
+	/**
+	 * Whether to show backdrop overlay
+	 * @default false
+	 */
+	backdrop?: boolean;
+	/**
+	 * Whether to append the drawer to the body instead of rendering in place
+	 * @default false
+	 */
+	portal?: boolean;
+	/**
+	 * Additional CSS styles
+	 */
+	style?: CSSProperties;
+	/**
+	 * Additional CSS class names
+	 */
+	className?: string;
+	/**
+	 * Children components
+	 */
+	children: ReactNode;
+}

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

@@ -0,0 +1,2 @@
+export { default as DsDrawer } from './ds-drawer';
+export type { DsDrawerProps, DsDrawerPosition, DsDrawerColumns } from './ds-drawer.types';

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

@@ -0,0 +1,123 @@
+@use '../../styles/typography';
+@use '../../styles/shared/dropdown';
+
+.content {
+	@include dropdown.dropdown-content;
+	display: flex;
+	flex-direction: column;
+	max-height: var(--available-height, 400px);
+	overflow-y: auto;
+	width: auto;
+
+	&:focus-visible {
+		outline-offset: 2px;
+	}
+
+	&[hidden] {
+		display: none;
+	}
+}
+
+.header {
+	position: sticky;
+	top: 0;
+	z-index: 1;
+	padding: var(--spacing-3xs);
+	border-bottom: 1px solid var(--color-border-secondary);
+	background-color: var(--color-background);
+}
+
+.item {
+	@include dropdown.dropdown-item;
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-xs);
+
+	&.selected {
+		.indicator {
+			display: flex;
+			min-width: var(--icon-width-medium);
+			margin-left: auto;
+		}
+
+		&:hover {
+			.indicator {
+				color: var(--color-background-selected);
+			}
+		}
+	}
+}
+
+.itemIcon {
+	flex-shrink: 0;
+}
+
+.label {
+	flex: 1;
+}
+
+.separator {
+	height: 1px;
+	background-color: var(--color-border-secondary);
+	margin: var(--spacing-4xs) var(--spacing-xs);
+}
+
+.actions {
+	position: sticky;
+	bottom: -1px;
+	z-index: 1;
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	gap: var(--spacing-xs);
+	padding: var(--spacing-3xs) var(--spacing-xs);
+	border-top: 1px solid var(--color-border-secondary);
+	background-color: var(--color-background);
+}
+
+.groupLabel {
+	display: flex;
+	align-items: center;
+	padding: var(--spacing-3xs) var(--spacing-xs);
+	background-color: var(--color-background);
+	outline-offset: -1px;
+
+	&Collapsible {
+		justify-content: space-between;
+		width: 100%;
+		text-align: left;
+		cursor: pointer;
+		border: none;
+		transition: background-color 0.15s ease;
+
+		&:hover {
+			background-color: var(--color-background-action-hover-weak);
+		}
+	}
+}
+
+.groupLabelIcon {
+	flex-shrink: 0;
+
+	&Rotated {
+		transform: rotate(180deg);
+		transition: transform 0.2s ease-in-out;
+	}
+}
+
+/** Legacy classes */
+.contentLegacy {
+	@include dropdown.dropdown-content;
+	min-width: 200px;
+	width: var(--radix-select-trigger-width);
+}
+
+.viewportLegacy {
+	@include dropdown.dropdown-viewport;
+}
+
+.itemLegacy {
+	@include dropdown.dropdown-item;
+	@include typography.p-special;
+	@include typography.ellipsis;
+}