@jiwambe/components 0.2.0

package/dist/components/Container/Container.d.ts

@@ -0,0 +1,72 @@
+import { default as React } from 'react';
+import { SpacingProps } from '../../types/spacing';
+import { LayoutProps } from '../../types/layout';
+/**
+ * Preset max-width keys for Container. Maps to rem values in the design system.
+ * false = no max-width constraint.
+ */
+export type ContainerMaxWidth = 'sm' | 'md' | 'lg' | 'xl' | false;
+/**
+ * Props for the Container component. Extends div attributes, SpacingProps,
+ * and a subset of LayoutProps (alignItems, justifyContent only).
+ *
+ * Effective horizontal padding: when disableGutters is true, no padding is
+ * applied regardless of px. When disableGutters is false, the px prop
+ * (from SpacingProps) is used, defaulting to 'fluid-4-9'.
+ */
+export interface ContainerProps extends React.HTMLAttributes<HTMLDivElement>, SpacingProps, Pick<LayoutProps, 'alignItems' | 'justifyContent'> {
+    /** Content to render inside the container. */
+    children: React.ReactNode;
+    /**
+     * Maximum width of the container content area.
+     *
+     * Preset values:
+     * - 'sm'  600px  (37.5rem)
+     * - 'md'  800px  (50rem)
+     * - 'lg'  940px  (58.75rem)
+     * - 'xl'  1328px (83rem) — default
+     * - false No max-width constraint
+     *
+     * Also accepts any valid CSS width string (e.g. '75ch', '1200px').
+     * @default 'xl'
+     */
+    maxWidth?: ContainerMaxWidth | string;
+    /**
+     * When true, suppresses horizontal padding entirely. Takes precedence
+     * over the px prop. The container still constrains width and centres itself.
+     * @default false
+     * @see px
+     */
+    disableGutters?: boolean;
+    /** Forwarded ref for the root div. @default undefined */
+    ref?: React.Ref<HTMLDivElement>;
+}
+/**
+ * Page-width constraint wrapper. Renders a full-width div that is
+ * centred horizontally (mx-auto) with a maximum width and fluid
+ * horizontal gutters by default.
+ *
+ * Use Container as the outermost wrapper for every page section to
+ * ensure consistent content width and horizontal breathing room
+ * across viewport sizes. Do not nest Containers — use Box for
+ * inner layout needs.
+ *
+ * Default gutters use the fluid-4-9 token, which scales from 1rem
+ * at 360px viewport to 2.25rem at 1240px viewport.
+ *
+ * @example
+ * // Default — fluid gutters, xl max-width
+ * <Container>
+ *   <Stack spacing="space-8">...</Stack>
+ * </Container>
+ *
+ * @example
+ * // Custom max-width and gutters
+ * <Container maxWidth="md" px="space-8">...</Container>
+ *
+ * @example
+ * // No gutters — content touches the container edge
+ * <Container disableGutters>...</Container>
+ */
+export declare function Container({ children, className, style, maxWidth, disableGutters, px: pxProp, alignItems, justifyContent, ref, ...rest }: ContainerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Container.d.ts.map

package/dist/components/Container/Container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container.d.ts","sourceRoot":"","sources":["../../../src/components/Container/Container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAItD;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AAIlE;;;;;;;GAOG;AACH,MAAM,WAAW,cACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,YAAY,EACZ,IAAI,CAAC,WAAW,EAAE,YAAY,GAAG,gBAAgB,CAAC;IACpD,8CAA8C;IAC9C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;;;;;;;;OAYG;IACH,QAAQ,CAAC,EAAE,iBAAiB,GAAG,MAAM,CAAC;IACtC;;;;;OAKG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,yDAAyD;IACzD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC;AAaD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,SAAc,EACd,KAAK,EACL,QAAe,EACf,cAAsB,EACtB,EAAE,EAAE,MAAM,EACV,UAAU,EACV,cAAc,EACd,GAAG,EACH,GAAG,IAAI,EACR,EAAE,cAAc,2CAyChB"}

package/dist/components/Container/Container.js

@@ -0,0 +1,69 @@
+import { jsx } from "react/jsx-runtime";
+import { resolveSpacing } from "../../utils/spacing.js";
+import { resolveLayout } from "../../utils/layoutClasses.js";
+const CONTAINER_LAYOUT_KEYS = ["alignItems", "justifyContent"];
+const MAX_WIDTH_PRESETS = {
+  sm: "37.5rem",
+  md: "50rem",
+  lg: "58.75rem",
+  xl: "83rem"
+};
+const SPACING_KEYS = [
+  "p",
+  "px",
+  "py",
+  "pt",
+  "pb",
+  "pl",
+  "pr",
+  "m",
+  "mx",
+  "my",
+  "mt",
+  "mb",
+  "ml",
+  "mr"
+];
+function Container({
+  children,
+  className = "",
+  style,
+  maxWidth = "xl",
+  disableGutters = false,
+  px: pxProp,
+  alignItems,
+  justifyContent,
+  ref,
+  ...rest
+}) {
+  const resolvedMax = maxWidth === false ? void 0 : MAX_WIDTH_PRESETS[maxWidth] ?? maxWidth;
+  const effectivePx = disableGutters ? void 0 : pxProp ?? "fluid-4-9";
+  const spacingProps = { ...rest, px: effectivePx };
+  const spacingClasses = resolveSpacing(spacingProps);
+  const layoutClasses = resolveLayout({ alignItems, justifyContent });
+  const restWithoutSpacing = { ...rest };
+  for (const key of SPACING_KEYS) {
+    delete restWithoutSpacing[key];
+  }
+  for (const key of CONTAINER_LAYOUT_KEYS) {
+    delete restWithoutSpacing[key];
+  }
+  const classes = [
+    "w-full",
+    resolvedMax && "mx-auto",
+    layoutClasses,
+    spacingClasses,
+    className
+  ].filter(Boolean).join(" ");
+  const inlineStyle = {
+    ...style
+  };
+  if (resolvedMax) {
+    inlineStyle.maxWidth = resolvedMax;
+  }
+  return /* @__PURE__ */ jsx("div", { ref, className: classes, style: inlineStyle, ...restWithoutSpacing, children });
+}
+export {
+  Container
+};
+//# sourceMappingURL=Container.js.map

package/dist/components/Container/Container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container.js","sources":["../../../src/components/Container/Container.tsx"],"sourcesContent":["import React from 'react';\nimport type { SpacingProps } from '../../types/spacing';\nimport type { LayoutProps } from '../../types/layout';\nimport { resolveSpacing } from '../../utils/spacing';\nimport { resolveLayout } from '../../utils/layoutClasses';\n\n/**\n * Preset max-width keys for Container. Maps to rem values in the design system.\n * false = no max-width constraint.\n */\nexport type ContainerMaxWidth = 'sm' | 'md' | 'lg' | 'xl' | false;\n\nconst CONTAINER_LAYOUT_KEYS = ['alignItems', 'justifyContent'] as const;\n\n/**\n * Props for the Container component. Extends div attributes, SpacingProps,\n * and a subset of LayoutProps (alignItems, justifyContent only).\n *\n * Effective horizontal padding: when disableGutters is true, no padding is\n * applied regardless of px. When disableGutters is false, the px prop\n * (from SpacingProps) is used, defaulting to 'fluid-4-9'.\n */\nexport interface ContainerProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    SpacingProps,\n    Pick<LayoutProps, 'alignItems' | 'justifyContent'> {\n  /** Content to render inside the container. */\n  children: React.ReactNode;\n  /**\n   * Maximum width of the container content area.\n   *\n   * Preset values:\n   * - 'sm'  600px  (37.5rem)\n   * - 'md'  800px  (50rem)\n   * - 'lg'  940px  (58.75rem)\n   * - 'xl'  1328px (83rem) — default\n   * - false No max-width constraint\n   *\n   * Also accepts any valid CSS width string (e.g. '75ch', '1200px').\n   * @default 'xl'\n   */\n  maxWidth?: ContainerMaxWidth | string;\n  /**\n   * When true, suppresses horizontal padding entirely. Takes precedence\n   * over the px prop. The container still constrains width and centres itself.\n   * @default false\n   * @see px\n   */\n  disableGutters?: boolean;\n  /** Forwarded ref for the root div. @default undefined */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nconst MAX_WIDTH_PRESETS: Record<string, string> = {\n  sm: '37.5rem',\n  md: '50rem',\n  lg: '58.75rem',\n  xl: '83rem',\n};\n\nconst SPACING_KEYS = [\n  'p', 'px', 'py', 'pt', 'pb', 'pl', 'pr', 'm', 'mx', 'my', 'mt', 'mb', 'ml', 'mr',\n] as const;\n\n/**\n * Page-width constraint wrapper. Renders a full-width div that is\n * centred horizontally (mx-auto) with a maximum width and fluid\n * horizontal gutters by default.\n *\n * Use Container as the outermost wrapper for every page section to\n * ensure consistent content width and horizontal breathing room\n * across viewport sizes. Do not nest Containers — use Box for\n * inner layout needs.\n *\n * Default gutters use the fluid-4-9 token, which scales from 1rem\n * at 360px viewport to 2.25rem at 1240px viewport.\n *\n * @example\n * // Default — fluid gutters, xl max-width\n * <Container>\n *   <Stack spacing=\"space-8\">...</Stack>\n * </Container>\n *\n * @example\n * // Custom max-width and gutters\n * <Container maxWidth=\"md\" px=\"space-8\">...</Container>\n *\n * @example\n * // No gutters — content touches the container edge\n * <Container disableGutters>...</Container>\n */\nexport function Container({\n  children,\n  className = '',\n  style,\n  maxWidth = 'xl',\n  disableGutters = false,\n  px: pxProp,\n  alignItems,\n  justifyContent,\n  ref,\n  ...rest\n}: ContainerProps) {\n  const resolvedMax =\n    maxWidth === false\n      ? undefined\n      : MAX_WIDTH_PRESETS[maxWidth as string] ?? maxWidth;\n\n  const effectivePx = disableGutters ? undefined : (pxProp ?? 'fluid-4-9');\n  const spacingProps: SpacingProps = { ...rest, px: effectivePx };\n  const spacingClasses = resolveSpacing(spacingProps);\n  const layoutClasses = resolveLayout({ alignItems, justifyContent });\n\n  const restWithoutSpacing = { ...rest };\n  for (const key of SPACING_KEYS) {\n    delete (restWithoutSpacing as Record<string, unknown>)[key];\n  }\n  for (const key of CONTAINER_LAYOUT_KEYS) {\n    delete (restWithoutSpacing as Record<string, unknown>)[key];\n  }\n\n  const classes = [\n    'w-full',\n    resolvedMax && 'mx-auto',\n    layoutClasses,\n    spacingClasses,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const inlineStyle: React.CSSProperties = {\n    ...style,\n  };\n  if (resolvedMax) {\n    inlineStyle.maxWidth = resolvedMax;\n  }\n\n  return (\n    <div ref={ref} className={classes} style={inlineStyle} {...restWithoutSpacing}>\n      {children}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;AAYA,MAAM,wBAAwB,CAAC,cAAc,gBAAgB;AAyC7D,MAAM,oBAA4C;AAAA,EAChD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,eAAe;AAAA,EACnB;AAAA,EAAK;AAAA,EAAM;AAAA,EAAM;AAAA,EAAM;AAAA,EAAM;AAAA,EAAM;AAAA,EAAM;AAAA,EAAK;AAAA,EAAM;AAAA,EAAM;AAAA,EAAM;AAAA,EAAM;AAAA,EAAM;AAC9E;AA6BO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,IAAI;AAAA,EACJ;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAmB;AACjB,QAAM,cACJ,aAAa,QACT,SACA,kBAAkB,QAAkB,KAAK;AAE/C,QAAM,cAAc,iBAAiB,SAAa,UAAU;AAC5D,QAAM,eAA6B,EAAE,GAAG,MAAM,IAAI,YAAA;AAClD,QAAM,iBAAiB,eAAe,YAAY;AAClD,QAAM,gBAAgB,cAAc,EAAE,YAAY,gBAAgB;AAElE,QAAM,qBAAqB,EAAE,GAAG,KAAA;AAChC,aAAW,OAAO,cAAc;AAC9B,WAAQ,mBAA+C,GAAG;AAAA,EAC5D;AACA,aAAW,OAAO,uBAAuB;AACvC,WAAQ,mBAA+C,GAAG;AAAA,EAC5D;AAEA,QAAM,UAAU;AAAA,IACd;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,QAAM,cAAmC;AAAA,IACvC,GAAG;AAAA,EAAA;AAEL,MAAI,aAAa;AACf,gBAAY,WAAW;AAAA,EACzB;AAEA,SACE,oBAAC,SAAI,KAAU,WAAW,SAAS,OAAO,aAAc,GAAG,oBACxD,SAAA,CACH;AAEJ;"}

package/dist/components/DateInput/DateInput.d.ts

@@ -0,0 +1,61 @@
+import { default as React } from 'react';
+/**
+ * Date value as three string segments (DD, MM, YY). Day and month are zero-padded (e.g. "01");
+ * year is two digits. Empty strings mean "no selection".
+ */
+export interface DateValue {
+    day: string;
+    month: string;
+    year: string;
+}
+/**
+ * Props for the DateInput component. Supports controlled (value/onChange) or uncontrolled
+ * (defaultValue) usage. Format is segment-based (day, month, year); locale or display
+ * formatting is not applied — use your own formatting for display or submission.
+ */
+export interface DateInputProps {
+    /** Label text displayed above the date selects. @default undefined */
+    label?: string;
+    /** Secondary label shown lighter beside the main label. @default undefined */
+    secondaryLabel?: string;
+    /** Supportive text rendered below the label. @default undefined */
+    supportText?: string;
+    /** Controlled date value. Use with onChange. @default undefined */
+    value?: DateValue;
+    /** Uncontrolled default date value. @default undefined */
+    defaultValue?: DateValue;
+    /** Called when any segment (day, month, year) changes. @default undefined */
+    onChange?: (date: DateValue) => void;
+    /** Disables all three selects. @default false */
+    disabled?: boolean;
+    /** Places the component in an error state (borders and optional errorMessage). @default false */
+    error?: boolean;
+    /** Error message shown in the alert below the selects when error is true. @default undefined */
+    errorMessage?: string;
+    /** Shows an asterisk next to the label. @default undefined */
+    required?: boolean;
+    /** Additional class names on the outer wrapper. @default undefined */
+    className?: string;
+    /** HTML id for the first select; day/month/year inputs get derived ids. @default undefined */
+    id?: string;
+    /** Base year for the year dropdown. Pass explicitly to avoid hydration mismatches near year boundaries. @default current year */
+    baseYear?: number;
+    /** Number of years shown in the year dropdown (counting back from baseYear). @default 10 */
+    yearRange?: number;
+    /** Forwarded ref for the root div. @default undefined */
+    ref?: React.Ref<HTMLDivElement>;
+}
+/**
+ * Three-segment date input (day, month, year) using native selects. Renders DD, MM, YY
+ * dropdowns with design-token styling. Use for birth dates or simple date capture where
+ * a single native date picker is not desired. Values are strings; convert to Date or
+ * ISO string in your app as needed.
+ *
+ * @example
+ * <DateInput label="Date of birth" value={date} onChange={setDate} />
+ *
+ * @example
+ * <DateInput label="Start date" defaultValue={{ day: '', month: '', year: '' }} baseYear={2024} yearRange={5} />
+ */
+export declare function DateInput({ label, secondaryLabel, supportText, value: valueProp, defaultValue, onChange, disabled, error, errorMessage, required, className, id: idProp, baseYear, yearRange, ref, }: DateInputProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DateInput.d.ts.map

package/dist/components/DateInput/DateInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../src/components/DateInput/DateInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAMlD;;;GAGG;AACH,MAAM,WAAW,SAAS;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;;GAIG;AACH,MAAM,WAAW,cAAc;IAC7B,sEAAsE;IACtE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8EAA8E;IAC9E,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mEAAmE;IACnE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mEAAmE;IACnE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,0DAA0D;IAC1D,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACrC,iDAAiD;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iGAAiG;IACjG,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,gGAAgG;IAChG,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sEAAsE;IACtE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8FAA8F;IAC9F,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iIAAiI;IACjI,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4FAA4F;IAC5F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC;AA6ID;;;;;;;;;;;GAWG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,cAAc,EACd,WAAW,EACX,KAAK,EAAE,SAAS,EAChB,YAAY,EACZ,QAAQ,EACR,QAAgB,EAChB,KAAa,EACb,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,MAAM,EACV,QAAQ,EACR,SAAc,EACd,GAAG,GACJ,EAAE,cAAc,2CAkHhB"}

package/dist/components/DateInput/DateInput.js

@@ -0,0 +1,234 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useId, useCallback } from "react";
+function ChevronDown({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.25",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "M6 9L12 15L18 9" })
+    }
+  );
+}
+function ErrorIcon({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 20 20",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z",
+          clipRule: "evenodd"
+        }
+      )
+    }
+  );
+}
+const DAYS = Array.from(
+  { length: 31 },
+  (_, i) => String(i + 1).padStart(2, "0")
+);
+const MONTHS = Array.from(
+  { length: 12 },
+  (_, i) => String(i + 1).padStart(2, "0")
+);
+function buildYearOptions(baseYear, range) {
+  return Array.from(
+    { length: range },
+    (_, i) => String(baseYear - i).slice(-2)
+  );
+}
+function Segment({
+  id,
+  placeholder,
+  options,
+  value,
+  disabled,
+  error,
+  onChange,
+  wrapperClassName = ""
+}) {
+  const hasValue = value !== "";
+  const classes = [
+    "w-full min-h-[48px] pl-space-4 pr-10 py-space-3 appearance-none",
+    "rounded-rad-md text-form-text outline-none",
+    "transition-all duration-150",
+    hasValue ? "text-text-primary" : "text-text-disabled",
+    !disabled && !error && "border-border-sm border-border-form-primary bg-fill-bg-primary",
+    !disabled && error && "border-border-sm border-border-err bg-fill-bg-primary",
+    !disabled && "hover:border-border-md hover:border-border-form-primary-hover",
+    !disabled && "focus:border-border-md focus:border-border-form-primary-active focus:text-text-primary",
+    !disabled && [
+      "focus-visible:border-border-sm focus-visible:border-border-form-primary-focus",
+      "focus-visible:ring-[1.5px] focus-visible:ring-border-focus focus-visible:ring-offset-[3px]"
+    ].join(" "),
+    disabled && "border-border-sm border-border-form-primary-disabled bg-fill-form-primary-disabled text-text-disabled cursor-not-allowed"
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: `date-segment relative flex-1 min-w-0 ${wrapperClassName}`, children: [
+    /* @__PURE__ */ jsxs(
+      "select",
+      {
+        id,
+        disabled,
+        value,
+        onChange: (e) => onChange(e.target.value),
+        className: classes,
+        "aria-invalid": error || void 0,
+        children: [
+          /* @__PURE__ */ jsx("option", { value: "", disabled: true, hidden: true, children: placeholder }),
+          options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt, children: opt }, opt))
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: `absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none flex items-center ${disabled ? "text-icon-primary-disabled" : "text-icon-primary"}`,
+        children: /* @__PURE__ */ jsx(ChevronDown, { className: "w-6 h-6" })
+      }
+    )
+  ] });
+}
+function DateInput({
+  label,
+  secondaryLabel,
+  supportText,
+  value: valueProp,
+  defaultValue,
+  onChange,
+  disabled = false,
+  error = false,
+  errorMessage,
+  required,
+  className,
+  id: idProp,
+  baseYear,
+  yearRange = 10,
+  ref
+}) {
+  const autoId = useId();
+  const baseId = idProp ?? autoId;
+  const isControlled = valueProp !== void 0;
+  const [internal, setInternal] = React.useState(
+    defaultValue ?? { day: "", month: "", year: "" }
+  );
+  const current = isControlled ? valueProp : internal;
+  const update = useCallback(
+    (segment, val) => {
+      const next = { ...current, [segment]: val };
+      if (!isControlled) setInternal(next);
+      onChange == null ? void 0 : onChange(next);
+    },
+    [current, isControlled, onChange]
+  );
+  const showErrorAlert = error && errorMessage;
+  const resolvedBaseYear = baseYear ?? (/* @__PURE__ */ new Date()).getFullYear();
+  const YEARS = React.useMemo(() => buildYearOptions(resolvedBaseYear, yearRange), [resolvedBaseYear, yearRange]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: `flex flex-col gap-space-2 w-full ${className ?? ""}`,
+      children: [
+        (label || supportText) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-space-1", children: [
+          label && /* @__PURE__ */ jsxs(
+            "label",
+            {
+              htmlFor: `${baseId}-day`,
+              className: `text-form-label ${disabled ? "text-text-disabled" : "text-text-primary"}`,
+              children: [
+                label,
+                secondaryLabel && /* @__PURE__ */ jsx("span", { className: "text-text-secondary font-normal ml-1", children: secondaryLabel }),
+                required && /* @__PURE__ */ jsx("span", { className: "text-text-err ml-0.5", children: "*" })
+              ]
+            }
+          ),
+          supportText && /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: `text-text-xs ${disabled ? "text-text-disabled" : "text-text-secondary"}`,
+              children: supportText
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-space-2", children: [
+          /* @__PURE__ */ jsx(
+            Segment,
+            {
+              id: `${baseId}-day`,
+              placeholder: "DD",
+              options: DAYS,
+              value: current.day,
+              disabled,
+              error,
+              onChange: (v) => update("day", v)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Segment,
+            {
+              id: `${baseId}-month`,
+              placeholder: "MM",
+              options: MONTHS,
+              value: current.month,
+              disabled,
+              error,
+              onChange: (v) => update("month", v)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Segment,
+            {
+              id: `${baseId}-year`,
+              placeholder: "YY",
+              options: YEARS,
+              value: current.year,
+              disabled,
+              error,
+              onChange: (v) => update("year", v)
+            }
+          )
+        ] }),
+        showErrorAlert && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            id: `${baseId}-error`,
+            role: "alert",
+            className: `flex items-start gap-space-4 p-space-4 rounded-rad-md ${disabled ? "bg-fill-bg-secondary" : "bg-fill-bg-err"}`,
+            children: [
+              /* @__PURE__ */ jsx(
+                ErrorIcon,
+                {
+                  className: `w-5 h-5 shrink-0 ${disabled ? "text-icon-primary-disabled" : "text-icon-err"}`
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: `text-text-xs ${disabled ? "text-text-disabled" : "text-text-err"}`,
+                  children: errorMessage
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  DateInput
+};
+//# sourceMappingURL=DateInput.js.map

package/dist/components/DateInput/DateInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateInput.js","sources":["../../../src/components/DateInput/DateInput.tsx"],"sourcesContent":["'use client';\n\nimport React, { useId, useCallback } from 'react';\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\n/**\n * Date value as three string segments (DD, MM, YY). Day and month are zero-padded (e.g. \"01\");\n * year is two digits. Empty strings mean \"no selection\".\n */\nexport interface DateValue {\n  day: string;\n  month: string;\n  year: string;\n}\n\n/**\n * Props for the DateInput component. Supports controlled (value/onChange) or uncontrolled\n * (defaultValue) usage. Format is segment-based (day, month, year); locale or display\n * formatting is not applied — use your own formatting for display or submission.\n */\nexport interface DateInputProps {\n  /** Label text displayed above the date selects. @default undefined */\n  label?: string;\n  /** Secondary label shown lighter beside the main label. @default undefined */\n  secondaryLabel?: string;\n  /** Supportive text rendered below the label. @default undefined */\n  supportText?: string;\n  /** Controlled date value. Use with onChange. @default undefined */\n  value?: DateValue;\n  /** Uncontrolled default date value. @default undefined */\n  defaultValue?: DateValue;\n  /** Called when any segment (day, month, year) changes. @default undefined */\n  onChange?: (date: DateValue) => void;\n  /** Disables all three selects. @default false */\n  disabled?: boolean;\n  /** Places the component in an error state (borders and optional errorMessage). @default false */\n  error?: boolean;\n  /** Error message shown in the alert below the selects when error is true. @default undefined */\n  errorMessage?: string;\n  /** Shows an asterisk next to the label. @default undefined */\n  required?: boolean;\n  /** Additional class names on the outer wrapper. @default undefined */\n  className?: string;\n  /** HTML id for the first select; day/month/year inputs get derived ids. @default undefined */\n  id?: string;\n  /** Base year for the year dropdown. Pass explicitly to avoid hydration mismatches near year boundaries. @default current year */\n  baseYear?: number;\n  /** Number of years shown in the year dropdown (counting back from baseYear). @default 10 */\n  yearRange?: number;\n  /** Forwarded ref for the root div. @default undefined */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\nfunction ChevronDown({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.25\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M6 9L12 15L18 9\" />\n    </svg>\n  );\n}\n\nfunction ErrorIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      viewBox=\"0 0 20 20\"\n      fill=\"currentColor\"\n      aria-hidden=\"true\"\n    >\n      <path\n        fillRule=\"evenodd\"\n        d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z\"\n        clipRule=\"evenodd\"\n      />\n    </svg>\n  );\n}\n\nconst DAYS = Array.from({ length: 31 }, (_, i) =>\n  String(i + 1).padStart(2, '0'),\n);\n\nconst MONTHS = Array.from({ length: 12 }, (_, i) =>\n  String(i + 1).padStart(2, '0'),\n);\n\nfunction buildYearOptions(baseYear: number, range: number): string[] {\n  return Array.from({ length: range }, (_, i) =>\n    String(baseYear - i).slice(-2),\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Internal segment select\n// ---------------------------------------------------------------------------\n\ninterface SegmentProps {\n  id: string;\n  placeholder: string;\n  options: string[];\n  value: string;\n  disabled: boolean;\n  error: boolean;\n  onChange: (val: string) => void;\n  wrapperClassName?: string;\n}\n\nfunction Segment({\n  id,\n  placeholder,\n  options,\n  value,\n  disabled,\n  error,\n  onChange,\n  wrapperClassName = '',\n}: SegmentProps) {\n  const hasValue = value !== '';\n\n  const classes = [\n    'w-full min-h-[48px] pl-space-4 pr-10 py-space-3 appearance-none',\n    'rounded-rad-md text-form-text outline-none',\n    'transition-all duration-150',\n    hasValue ? 'text-text-primary' : 'text-text-disabled',\n\n    !disabled && !error &&\n      'border-border-sm border-border-form-primary bg-fill-bg-primary',\n    !disabled && error &&\n      'border-border-sm border-border-err bg-fill-bg-primary',\n\n    !disabled &&\n      'hover:border-border-md hover:border-border-form-primary-hover',\n    !disabled &&\n      'focus:border-border-md focus:border-border-form-primary-active focus:text-text-primary',\n    !disabled && [\n      'focus-visible:border-border-sm focus-visible:border-border-form-primary-focus',\n      'focus-visible:ring-[1.5px] focus-visible:ring-border-focus focus-visible:ring-offset-[3px]',\n    ].join(' '),\n\n    disabled &&\n      'border-border-sm border-border-form-primary-disabled bg-fill-form-primary-disabled text-text-disabled cursor-not-allowed',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={`date-segment relative flex-1 min-w-0 ${wrapperClassName}`}>\n      <select\n        id={id}\n        disabled={disabled}\n        value={value}\n        onChange={(e) => onChange(e.target.value)}\n        className={classes}\n        aria-invalid={error || undefined}\n      >\n        <option value=\"\" disabled hidden>\n          {placeholder}\n        </option>\n        {options.map((opt) => (\n          <option key={opt} value={opt}>\n            {opt}\n          </option>\n        ))}\n      </select>\n      <span\n        className={`absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none flex items-center ${\n          disabled ? 'text-icon-primary-disabled' : 'text-icon-primary'\n        }`}\n      >\n        <ChevronDown className=\"w-6 h-6\" />\n      </span>\n    </div>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\n/**\n * Three-segment date input (day, month, year) using native selects. Renders DD, MM, YY\n * dropdowns with design-token styling. Use for birth dates or simple date capture where\n * a single native date picker is not desired. Values are strings; convert to Date or\n * ISO string in your app as needed.\n *\n * @example\n * <DateInput label=\"Date of birth\" value={date} onChange={setDate} />\n *\n * @example\n * <DateInput label=\"Start date\" defaultValue={{ day: '', month: '', year: '' }} baseYear={2024} yearRange={5} />\n */\nexport function DateInput({\n  label,\n  secondaryLabel,\n  supportText,\n  value: valueProp,\n  defaultValue,\n  onChange,\n  disabled = false,\n  error = false,\n  errorMessage,\n  required,\n  className,\n  id: idProp,\n  baseYear,\n  yearRange = 10,\n  ref,\n}: DateInputProps) {\n  const autoId = useId();\n  const baseId = idProp ?? autoId;\n\n  const isControlled = valueProp !== undefined;\n  const [internal, setInternal] = React.useState<DateValue>(\n    defaultValue ?? { day: '', month: '', year: '' },\n  );\n  const current = isControlled ? valueProp : internal;\n\n  const update = useCallback(\n    (segment: keyof DateValue, val: string) => {\n      const next = { ...current, [segment]: val };\n      if (!isControlled) setInternal(next);\n      onChange?.(next);\n    },\n    [current, isControlled, onChange],\n  );\n\n  const showErrorAlert = error && errorMessage;\n\n  const resolvedBaseYear = baseYear ?? new Date().getFullYear();\n  const YEARS = React.useMemo(() => buildYearOptions(resolvedBaseYear, yearRange), [resolvedBaseYear, yearRange]);\n\n  return (\n    <div\n      ref={ref}\n      className={`flex flex-col gap-space-2 w-full ${className ?? ''}`}\n    >\n      {/* Label + support text */}\n      {(label || supportText) && (\n        <div className=\"flex flex-col gap-space-1\">\n          {label && (\n            <label\n              htmlFor={`${baseId}-day`}\n              className={`text-form-label ${disabled ? 'text-text-disabled' : 'text-text-primary'}`}\n            >\n              {label}\n              {secondaryLabel && (\n                <span className=\"text-text-secondary font-normal ml-1\">\n                  {secondaryLabel}\n                </span>\n              )}\n              {required && (\n                <span className=\"text-text-err ml-0.5\">*</span>\n              )}\n            </label>\n          )}\n          {supportText && (\n            <p\n              className={`text-text-xs ${disabled ? 'text-text-disabled' : 'text-text-secondary'}`}\n            >\n              {supportText}\n            </p>\n          )}\n        </div>\n      )}\n\n      {/* Three-segment row: DD | MM | YY */}\n      <div className=\"flex items-start gap-space-2\">\n        <Segment\n          id={`${baseId}-day`}\n          placeholder=\"DD\"\n          options={DAYS}\n          value={current.day}\n          disabled={disabled}\n          error={error}\n          onChange={(v) => update('day', v)}\n        />\n        <Segment\n          id={`${baseId}-month`}\n          placeholder=\"MM\"\n          options={MONTHS}\n          value={current.month}\n          disabled={disabled}\n          error={error}\n          onChange={(v) => update('month', v)}\n        />\n        <Segment\n          id={`${baseId}-year`}\n          placeholder=\"YY\"\n          options={YEARS}\n          value={current.year}\n          disabled={disabled}\n          error={error}\n          onChange={(v) => update('year', v)}\n        />\n      </div>\n\n      {/* Error alert */}\n      {showErrorAlert && (\n        <div\n          id={`${baseId}-error`}\n          role=\"alert\"\n          className={`flex items-start gap-space-4 p-space-4 rounded-rad-md ${\n            disabled ? 'bg-fill-bg-secondary' : 'bg-fill-bg-err'\n          }`}\n        >\n          <ErrorIcon\n            className={`w-5 h-5 shrink-0 ${\n              disabled ? 'text-icon-primary-disabled' : 'text-icon-err'\n            }`}\n          />\n          <span\n            className={`text-text-xs ${\n              disabled ? 'text-text-disabled' : 'text-text-err'\n            }`}\n          >\n            {errorMessage}\n          </span>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;AA4DA;AACE;AACE;AAAC;AAAA;AACC;AACQ;AACH;AACE;AACK;AACE;AACC;AACH;AAEc;AAAA;AAGhC;AAEA;AACE;AACE;AAAC;AAAA;AACC;AACQ;AACH;AACO;AAEZ;AAAC;AAAA;AACU;AACP;AACO;AAAA;AAAA;AACX;AAGN;AAEA;AAAmB;AAAe;AAElC;AAEA;AAAqB;AAAe;AAEpC;AAEA;AACE;AAAa;AAAe;AACG;AAEjC;AAiBA;AAAiB;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AAEF;AACE;AAEA;AAAgB;AACd;AACA;AACA;AACiC;AAG/B;AAEA;AAGA;AAEA;AACW;AACX;AACA;AACQ;AAGR;AAKJ;AAEI;AAAA;AAAC;AAAA;AACC;AACA;AACA;AACwC;AAC7B;AACY;AAEvB;AAEA;AAKC;AAAA;AAAA;AAAA;AAEH;AAAC;AAAA;AAGC;AAEiC;AAAA;AAAA;AAIzC;AAkBO;AAAmB;AACxB;AACA;AACA;AACO;AACP;AACA;AACW;AACH;AACR;AACA;AACA;AACI;AACJ;AACY;AAEd;AACE;AACA;AAEA;AACA;AAAsC;AACQ;AAE9C;AAEA;AAAe;AAEX;AACA;AACA;AAAW;AACb;AACgC;AAGlC;AAEA;AACA;AAEA;AACE;AAAC;AAAA;AACC;AAC8D;AAG5D;AAEG;AACC;AAAC;AAAA;AACmB;AACiE;AAElF;AAAA;AAIC;AAGwC;AAAA;AAAA;AAAA;AAK5C;AAAC;AAAA;AACmF;AAEjF;AAAA;AAAA;AAGP;AAKA;AAAA;AAAC;AAAA;AACc;AACD;AACH;AACM;AACf;AACA;AACgC;AAAA;AAAA;AAElC;AAAC;AAAA;AACc;AACD;AACH;AACM;AACf;AACA;AACkC;AAAA;AAAA;AAEpC;AAAC;AAAA;AACc;AACD;AACH;AACM;AACf;AACA;AACiC;AAAA;AAAA;AAErC;AAIE;AAAC;AAAA;AACc;AACR;AAGL;AAEA;AAAA;AAAC;AAAA;AAGC;AAAA;AAAA;AAEF;AAAC;AAAA;AAGC;AAEC;AAAA;AAAA;AACH;AAAA;AAAA;AACF;AAAA;AAIR;;;;"}

package/dist/components/Divider/Divider.d.ts

@@ -0,0 +1,44 @@
+import { default as React } from 'react';
+/**
+ * Divider orientation. Horizontal renders a full-width top border;
+ * vertical renders a left border and requires a height (e.g. via className).
+ */
+export type DividerOrientation = 'horizontal' | 'vertical';
+/**
+ * Divider border weight. Maps to design-system border tokens.
+ * - 'light'  border-border-light (subtle).
+ * - 'heavy'  border-border-heavy (more prominent).
+ */
+export type DividerVariant = 'light' | 'heavy';
+/**
+ * Props for the Divider component. Renders an <hr> (or separator when vertical).
+ */
+export interface DividerProps extends React.HTMLAttributes<HTMLHRElement> {
+    /**
+     * Orientation of the divider line. Vertical dividers use border-left and
+     * need a height from className or parent layout.
+     * @default 'horizontal'
+     */
+    orientation?: DividerOrientation;
+    /**
+     * Border weight token. Light for subtle separation, heavy for emphasis.
+     * @default 'light'
+     */
+    variant?: DividerVariant;
+    /** Forwarded ref for the root hr element. @default undefined */
+    ref?: React.Ref<HTMLHRElement>;
+}
+/**
+ * Renders a horizontal or vertical separator using design-system border
+ * tokens. Use between sections, list groups, or inline to separate content.
+ * Renders an <hr> with role="separator" when vertical.
+ *
+ * @example
+ * <Divider />
+ * <Divider variant="heavy" />
+ *
+ * @example
+ * <Divider orientation="vertical" className="h-8" />
+ */
+export declare function Divider({ orientation, variant, className, style, ref, ...rest }: DividerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Divider.d.ts.map

package/dist/components/Divider/Divider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../src/components/Divider/Divider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE3D;;;;GAIG;AACH,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,OAAO,CAAC;AAE/C;;GAEG;AACH,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC;IACvE;;;;OAIG;IACH,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,gEAAgE;IAChE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;CAChC;AAOD;;;;;;;;;;;GAWG;AACH,wBAAgB,OAAO,CAAC,EACtB,WAA0B,EAC1B,OAAiB,EACjB,SAAc,EACd,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,YAAY,2CAuBd"}

package/dist/components/Divider/Divider.js

@@ -0,0 +1,35 @@
+import { jsx } from "react/jsx-runtime";
+const variantClasses = {
+  light: "border-border-light",
+  heavy: "border-border-heavy"
+};
+function Divider({
+  orientation = "horizontal",
+  variant = "light",
+  className = "",
+  style,
+  ref,
+  ...rest
+}) {
+  const isVertical = orientation === "vertical";
+  const classes = [
+    isVertical ? "self-stretch border-l border-t-0 w-0 m-0" : "block w-full border-t border-l-0",
+    variantClasses[variant],
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(
+    "hr",
+    {
+      ref,
+      className: classes,
+      style,
+      role: isVertical ? "separator" : void 0,
+      "aria-orientation": isVertical ? "vertical" : void 0,
+      ...rest
+    }
+  );
+}
+export {
+  Divider
+};
+//# sourceMappingURL=Divider.js.map

package/dist/components/Divider/Divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.js","sources":["../../../src/components/Divider/Divider.tsx"],"sourcesContent":["import React from 'react';\n\n/**\n * Divider orientation. Horizontal renders a full-width top border;\n * vertical renders a left border and requires a height (e.g. via className).\n */\nexport type DividerOrientation = 'horizontal' | 'vertical';\n\n/**\n * Divider border weight. Maps to design-system border tokens.\n * - 'light'  border-border-light (subtle).\n * - 'heavy'  border-border-heavy (more prominent).\n */\nexport type DividerVariant = 'light' | 'heavy';\n\n/**\n * Props for the Divider component. Renders an <hr> (or separator when vertical).\n */\nexport interface DividerProps extends React.HTMLAttributes<HTMLHRElement> {\n  /**\n   * Orientation of the divider line. Vertical dividers use border-left and\n   * need a height from className or parent layout.\n   * @default 'horizontal'\n   */\n  orientation?: DividerOrientation;\n  /**\n   * Border weight token. Light for subtle separation, heavy for emphasis.\n   * @default 'light'\n   */\n  variant?: DividerVariant;\n  /** Forwarded ref for the root hr element. @default undefined */\n  ref?: React.Ref<HTMLHRElement>;\n}\n\nconst variantClasses: Record<DividerVariant, string> = {\n  light: 'border-border-light',\n  heavy: 'border-border-heavy',\n};\n\n/**\n * Renders a horizontal or vertical separator using design-system border\n * tokens. Use between sections, list groups, or inline to separate content.\n * Renders an <hr> with role=\"separator\" when vertical.\n *\n * @example\n * <Divider />\n * <Divider variant=\"heavy\" />\n *\n * @example\n * <Divider orientation=\"vertical\" className=\"h-8\" />\n */\nexport function Divider({\n  orientation = 'horizontal',\n  variant = 'light',\n  className = '',\n  style,\n  ref,\n  ...rest\n}: DividerProps) {\n  const isVertical = orientation === 'vertical';\n\n  const classes = [\n    isVertical\n      ? 'self-stretch border-l border-t-0 w-0 m-0'\n      : 'block w-full border-t border-l-0',\n    variantClasses[variant],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <hr\n      ref={ref}\n      className={classes}\n      style={style}\n      role={isVertical ? 'separator' : undefined}\n      aria-orientation={isVertical ? 'vertical' : undefined}\n      {...rest}\n    />\n  );\n}\n"],"names":[],"mappings":";AAkCA,MAAM,iBAAiD;AAAA,EACrD,OAAO;AAAA,EACP,OAAO;AACT;AAcO,SAAS,QAAQ;AAAA,EACtB,cAAc;AAAA,EACd,UAAU;AAAA,EACV,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiB;AACf,QAAM,aAAa,gBAAgB;AAEnC,QAAM,UAAU;AAAA,IACd,aACI,6CACA;AAAA,IACJ,eAAe,OAAO;AAAA,IACtB;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA,MAAM,aAAa,cAAc;AAAA,MACjC,oBAAkB,aAAa,aAAa;AAAA,MAC3C,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}

package/dist/components/Drawer/Drawer.d.ts

@@ -0,0 +1,35 @@
+import { default as React } from 'react';
+/**
+ * Edge from which the drawer panel slides in. Use 'left' for navigation-style drawers,
+ * 'right' for filters or detail panels.
+ */
+export type DrawerAnchor = 'left' | 'right';
+/**
+ * Props for the Drawer component. Drawer does not control visibility — use it inside
+ * an Overlay and control open/onClose on the Overlay.
+ */
+export interface DrawerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Which edge the drawer panel slides in from. @default 'right' */
+    anchor?: DrawerAnchor;
+    /** Max width of the drawer panel. @default '24rem' (384px) */
+    maxWidth?: string;
+    /** Panel content. Typically Stack or nav content. @default undefined */
+    children?: React.ReactNode;
+    /** Forwarded ref for the root div. @default undefined */
+    ref?: React.Ref<HTMLDivElement>;
+}
+/**
+ * Slide-in side panel for mobile navigation, filters, or detail views.
+ * Designed to be used inside an `<Overlay>`.
+ *
+ * @example
+ * ```tsx
+ * <Overlay open={isOpen} onClose={close}>
+ *   <Drawer anchor="right">
+ *     <Stack gap="space-4" className="p-space-4">...</Stack>
+ *   </Drawer>
+ * </Overlay>
+ * ```
+ */
+export declare function Drawer({ anchor, maxWidth, children, className, style, ref, ...rest }: DrawerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Drawer.d.ts.map

package/dist/components/Drawer/Drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,OAAO,CAAC;AAE5C;;;GAGG;AACH,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACvE,mEAAmE;IACnE,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,yDAAyD;IACzD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC;AAOD;;;;;;;;;;;;GAYG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAgB,EAChB,QAAkB,EAClB,QAAQ,EACR,SAAc,EACd,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,WAAW,2CAqBb"}

package/dist/components/Drawer/Drawer.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+const anchorClasses = {
+  left: "left-0",
+  right: "right-0"
+};
+function Drawer({
+  anchor = "right",
+  maxWidth = "24rem",
+  children,
+  className = "",
+  style,
+  ref,
+  ...rest
+}) {
+  const classes = [
+    "absolute inset-y-0 w-full bg-fill-bg-primary shadow-elevation-normal",
+    anchorClasses[anchor],
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: classes,
+      style: { maxWidth, ...style },
+      role: "dialog",
+      "aria-modal": "true",
+      ...rest,
+      children
+    }
+  );
+}
+export {
+  Drawer
+};
+//# sourceMappingURL=Drawer.js.map