@acronis-platform/ui-react 0.57.0 → 0.57.1

package/dist/components/ui/form/form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.js","sources":["../../../../src/components/ui/form/form.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Form as FormPrimitive,\n  type FormProps as BaseFormProps,\n} from '@base-ui/react/form';\n\nimport { cn } from '@/lib/utils';\n\n// Ported from `@acronis-platform/shadcn-uikit`'s `form`\n// (packages/ui-legacy/src/components/ui/form.tsx), rebuilt on Base UI's Form.\n// The legacy form was a react-hook-form wrapper (FormProvider/Controller); this\n// version drops that dependency and coordinates the ui-react `Field`s directly via\n// Base UI's native form: it collects values by each Field's `name`, runs their\n// validation on submit (or per `validationMode`), surfaces server `errors` keyed\n// by field name, and calls `onFormSubmit(values)` only when all fields are valid.\nexport interface FormProps<\n  FormValues extends Record<string, unknown> = Record<string, unknown>,\n> extends Omit<BaseFormProps<FormValues>, 'className'> {\n  className?: string;\n}\n\nfunction Form<\n  FormValues extends Record<string, unknown> = Record<string, unknown>,\n>({ className, ...props }: FormProps<FormValues>) {\n  return (\n    <FormPrimitive\n      className={cn('flex w-full flex-col gap-6', className)}\n      {...props}\n    />\n  );\n}\n\nexport { Form };\n"],"names":["Form","className","props","jsx","FormPrimitive","cn"],"mappings":";;;AAsBA,SAASA,EAEP,EAAE,WAAAC,GAAW,GAAGC,KAAgC;AAChD,SACE,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,WAAWC,EAAG,8BAA8BJ,CAAS;AAAA,MACpD,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;"}

package/dist/components/ui/grid/grid.js

@@ -0,0 +1,69 @@
+import { jsx as r } from "react/jsx-runtime";
+import * as a from "react";
+import { cva as m } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { cn as o } from "../../../lib/utils.js";
+const t = m("grid", {
+  variants: {
+    cols: {
+      1: "grid-cols-1",
+      2: "grid-cols-1 sm:grid-cols-2",
+      3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+      4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4",
+      6: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-6",
+      12: "grid-cols-4 sm:grid-cols-6 lg:grid-cols-12"
+    },
+    gap: {
+      none: "gap-0",
+      sm: "gap-2",
+      md: "gap-4",
+      lg: "gap-6",
+      xl: "gap-8"
+    }
+  },
+  defaultVariants: {
+    cols: 3,
+    gap: "md"
+  }
+}), n = {
+  1: "grid-cols-1",
+  2: "grid-cols-1 @md/grid:grid-cols-2",
+  3: "grid-cols-1 @md/grid:grid-cols-2 @4xl/grid:grid-cols-3",
+  4: "grid-cols-1 @md/grid:grid-cols-2 @4xl/grid:grid-cols-4",
+  6: "grid-cols-2 @lg/grid:grid-cols-3 @4xl/grid:grid-cols-6",
+  12: "grid-cols-4 @lg/grid:grid-cols-6 @4xl/grid:grid-cols-12"
+}, p = {
+  none: "gap-0",
+  sm: "gap-2",
+  md: "gap-4",
+  lg: "gap-6",
+  xl: "gap-8"
+}, e = a.forwardRef(
+  ({ className: g, cols: d = 3, gap: i = "md", container: c, ...s }, l) => c ? /* @__PURE__ */ r("div", { className: "@container/grid", children: /* @__PURE__ */ r(
+    "div",
+    {
+      ref: l,
+      "data-slot": "grid",
+      className: o(
+        "grid",
+        p[i ?? "md"],
+        n[d ?? 3],
+        g
+      ),
+      ...s
+    }
+  ) }) : /* @__PURE__ */ r(
+    "div",
+    {
+      ref: l,
+      "data-slot": "grid",
+      className: o(t({ cols: d, gap: i }), g),
+      ...s
+    }
+  )
+);
+e.displayName = "Grid";
+export {
+  e as Grid,
+  t as gridVariants
+};
+//# sourceMappingURL=grid.js.map

package/dist/components/ui/grid/grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.js","sources":["../../../../src/components/ui/grid/grid.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n// A responsive CSS-grid layout primitive. By default columns step down at viewport\n// breakpoints. With `container`, the grid is wrapped in a `@container/grid` and its\n// columns respond to the grid's own available width (its column/content area)\n// rather than the viewport — the right behavior for widget grids inside App Shell,\n// whose width shrinks as the sidebar expands.\nconst gridVariants = cva('grid', {\n  variants: {\n    cols: {\n      1: 'grid-cols-1',\n      2: 'grid-cols-1 sm:grid-cols-2',\n      3: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',\n      4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',\n      6: 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-6',\n      12: 'grid-cols-4 sm:grid-cols-6 lg:grid-cols-12',\n    },\n    gap: {\n      none: 'gap-0',\n      sm: 'gap-2',\n      md: 'gap-4',\n      lg: 'gap-6',\n      xl: 'gap-8',\n    },\n  },\n  defaultVariants: {\n    cols: 3,\n    gap: 'md',\n  },\n});\n\n// Container-query column classes (named container `grid`), mirroring the viewport\n// scale above but keyed to the grid's own width.\nconst containerColsClass: Record<NonNullable<GridProps['cols']>, string> = {\n  1: 'grid-cols-1',\n  2: 'grid-cols-1 @md/grid:grid-cols-2',\n  3: 'grid-cols-1 @md/grid:grid-cols-2 @4xl/grid:grid-cols-3',\n  4: 'grid-cols-1 @md/grid:grid-cols-2 @4xl/grid:grid-cols-4',\n  6: 'grid-cols-2 @lg/grid:grid-cols-3 @4xl/grid:grid-cols-6',\n  12: 'grid-cols-4 @lg/grid:grid-cols-6 @4xl/grid:grid-cols-12',\n};\nconst gapClass: Record<NonNullable<GridProps['gap']>, string> = {\n  none: 'gap-0',\n  sm: 'gap-2',\n  md: 'gap-4',\n  lg: 'gap-6',\n  xl: 'gap-8',\n};\n\nexport interface GridProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof gridVariants> {\n  /**\n   * Size columns by the grid's own width (container queries) instead of the\n   * viewport. Wraps the grid in a `@container/grid`.\n   */\n  container?: boolean;\n}\n\nconst Grid = React.forwardRef<HTMLDivElement, GridProps>(\n  ({ className, cols = 3, gap = 'md', container, ...props }, ref) => {\n    if (container) {\n      return (\n        <div className=\"@container/grid\">\n          <div\n            ref={ref}\n            data-slot=\"grid\"\n            className={cn(\n              'grid',\n              gapClass[gap ?? 'md'],\n              containerColsClass[cols ?? 3],\n              className\n            )}\n            {...props}\n          />\n        </div>\n      );\n    }\n    return (\n      <div\n        ref={ref}\n        data-slot=\"grid\"\n        className={cn(gridVariants({ cols, gap }), className)}\n        {...props}\n      />\n    );\n  }\n);\nGrid.displayName = 'Grid';\n\nexport { Grid, gridVariants };\n"],"names":["gridVariants","cva","containerColsClass","gapClass","Grid","React","className","cols","gap","container","props","ref","jsx","cn"],"mappings":";;;;AAUA,MAAMA,IAAeC,EAAI,QAAQ;AAAA,EAC/B,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,IAAI;AAAA,IAAA;AAAA,IAEN,KAAK;AAAA,MACH,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA;AAAA,EACN;AAAA,EAEF,iBAAiB;AAAA,IACf,MAAM;AAAA,IACN,KAAK;AAAA,EAAA;AAET,CAAC,GAIKC,IAAqE;AAAA,EACzE,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AACN,GACMC,IAA0D;AAAA,EAC9D,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAYMC,IAAOC,EAAM;AAAA,EACjB,CAAC,EAAE,WAAAC,GAAW,MAAAC,IAAO,GAAG,KAAAC,IAAM,MAAM,WAAAC,GAAW,GAAGC,EAAA,GAASC,MACrDF,IAEA,gBAAAG,EAAC,OAAA,EAAI,WAAU,mBACb,UAAA,gBAAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,aAAU;AAAA,MACV,WAAWE;AAAA,QACT;AAAA,QACAV,EAASK,KAAO,IAAI;AAAA,QACpBN,EAAmBK,KAAQ,CAAC;AAAA,QAC5BD;AAAA,MAAA;AAAA,MAED,GAAGI;AAAA,IAAA;AAAA,EAAA,GAER,IAIF,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,aAAU;AAAA,MACV,WAAWE,EAAGb,EAAa,EAAE,MAAAO,GAAM,KAAAC,EAAA,CAAK,GAAGF,CAAS;AAAA,MACnD,GAAGI;AAAA,IAAA;AAAA,EAAA;AAIZ;AACAN,EAAK,cAAc;"}

package/dist/components/ui/input/input.js

@@ -0,0 +1,22 @@
+import { jsx as l } from "react/jsx-runtime";
+import * as t from "react";
+import { cn as a } from "../../../lib/utils.js";
+const d = t.forwardRef(
+  ({ className: r, type: o = "text", ...i }, e) => /* @__PURE__ */ l(
+    "input",
+    {
+      ref: e,
+      type: o,
+      className: a(
+        "h-[var(--ui-input-text-global-box-height)] w-full min-w-0 rounded-[var(--ui-input-text-global-box-border-radius)] border bg-[var(--ui-input-text-global-box-color-idle)] border-[var(--ui-input-text-normal-box-border-color-idle)] px-[var(--ui-input-text-global-box-padding-x)] text-sm leading-6 text-[var(--ui-input-text-global-value-color-idle)] transition-colors placeholder:text-[var(--ui-input-text-global-placeholder-color-idle)] focus-visible:outline-none focus-visible:ring-[3px] enabled:not-aria-[invalid=true]:hover:border-[var(--ui-input-text-normal-box-border-color-hover)] enabled:not-aria-[invalid=true]:hover:bg-[var(--ui-input-text-global-box-color-hover)] not-aria-[invalid=true]:focus-visible:border-[var(--ui-input-text-normal-box-border-color-hover)] not-aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-primary)] aria-[invalid=true]:border-[var(--ui-input-text-error-msg-box-border-color-idle)] aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-error)] disabled:cursor-not-allowed disabled:border-[var(--ui-input-text-normal-box-border-color-disabled)] disabled:bg-[var(--ui-input-text-global-box-color-disabled)] disabled:text-[var(--ui-input-text-global-value-color-disabled)] disabled:placeholder:text-[var(--ui-input-text-global-placeholder-color-disabled)]",
+        r
+      ),
+      ...i
+    }
+  )
+);
+d.displayName = "InputBox";
+export {
+  d as InputBox
+};
+//# sourceMappingURL=input.js.map

package/dist/components/ui/input/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","sources":["../../../../src/components/ui/input/input.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\n// Internal primitive: the bare single-line input box behind the public\n// `InputText` field (which is also exported as `Input`). Not exported from the\n// package; consumed by `input-text`. Themed by the dedicated next-gen `--ui-input-text-*`\n// token tier from @acronis-platform/tokens-pd. The box fill (`global-box-color-*`)\n// and the normal border (`normal-box-border-color-*`) are wired per state: idle /\n// hover / focus / disabled. The `normal-box-border-color-*` tier has no `-active`,\n// so focus reuses `-hover` for the border, paired with a 3px `--ui-focus-primary`\n// ring. Value and placeholder text use `global-value-color-*` /\n// `global-placeholder-color-*`. The error state is driven by `aria-invalid` —\n// `error-msg-box-border-color-*` border and, on focus, a `--ui-focus-error` ring —\n// scoped with `not-aria-[invalid]` so it wins over the hover/focus border. Box\n// geometry (32px height, 4px radius, 12px padding-x) comes from\n// `--ui-input-text-global-box-*`. Label, description, and error message are\n// composed by the consumer (a Field component is future work).\nexport type InputBoxProps = React.ComponentPropsWithoutRef<'input'>;\n\nconst InputBox = React.forwardRef<HTMLInputElement, InputBoxProps>(\n  ({ className, type = 'text', ...props }, ref) => (\n    <input\n      ref={ref}\n      type={type}\n      className={cn(\n        'h-[var(--ui-input-text-global-box-height)] w-full min-w-0 rounded-[var(--ui-input-text-global-box-border-radius)] border bg-[var(--ui-input-text-global-box-color-idle)] border-[var(--ui-input-text-normal-box-border-color-idle)] px-[var(--ui-input-text-global-box-padding-x)] text-sm leading-6 text-[var(--ui-input-text-global-value-color-idle)] transition-colors placeholder:text-[var(--ui-input-text-global-placeholder-color-idle)] focus-visible:outline-none focus-visible:ring-[3px] enabled:not-aria-[invalid=true]:hover:border-[var(--ui-input-text-normal-box-border-color-hover)] enabled:not-aria-[invalid=true]:hover:bg-[var(--ui-input-text-global-box-color-hover)] not-aria-[invalid=true]:focus-visible:border-[var(--ui-input-text-normal-box-border-color-hover)] not-aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-primary)] aria-[invalid=true]:border-[var(--ui-input-text-error-msg-box-border-color-idle)] aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-error)] disabled:cursor-not-allowed disabled:border-[var(--ui-input-text-normal-box-border-color-disabled)] disabled:bg-[var(--ui-input-text-global-box-color-disabled)] disabled:text-[var(--ui-input-text-global-value-color-disabled)] disabled:placeholder:text-[var(--ui-input-text-global-placeholder-color-disabled)]',\n        className\n      )}\n      {...props}\n    />\n  )\n);\nInputBox.displayName = 'InputBox';\n\nexport { InputBox };\n"],"names":["InputBox","React","className","type","props","ref","jsx","cn"],"mappings":";;;AAoBA,MAAMA,IAAWC,EAAM;AAAA,EACrB,CAAC,EAAE,WAAAC,GAAW,MAAAC,IAAO,QAAQ,GAAGC,EAAA,GAASC,MACvC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,MAAAF;AAAA,MACA,WAAWI;AAAA,QACT;AAAA,QACAL;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,IAAA;AAAA,EAAA;AAGV;AACAJ,EAAS,cAAc;"}

package/dist/components/ui/input-date-picker/input-date-picker.js

@@ -0,0 +1,104 @@
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import * as m from "react";
+import { CalendarIcon as C } from "@acronis-platform/icons-react/stroke-mono";
+import { cn as p } from "../../../lib/utils.js";
+const E = m.forwardRef(
+  ({
+    className: k,
+    id: h,
+    label: e,
+    required: s,
+    description: f,
+    error: a,
+    pickerType: N = "date",
+    placeholder: w,
+    value: o,
+    startDate: l,
+    endDate: t,
+    separator: I = "–",
+    open: b,
+    disabled: d,
+    "aria-invalid": y,
+    ...R
+  }, j) => {
+    const P = m.useId(), n = h ?? P, v = `${n}-message`, c = a != null && a !== "", q = c || y, u = c ? a : f, g = u != null && u !== "", x = N === "dateRange", z = x ? l != null && l !== "" || t != null && t !== "" : o != null && o !== "";
+    return /* @__PURE__ */ i("div", { className: "flex w-full min-w-[var(--ui-input-date-picker-global-container-width-min)] flex-col gap-[var(--ui-input-date-picker-global-container-gap)]", children: [
+      e != null && e !== "" && /* @__PURE__ */ i(
+        "label",
+        {
+          htmlFor: n,
+          className: p(
+            "flex gap-[var(--ui-input-date-picker-global-container-label-gap)] text-sm leading-4",
+            d ? "text-[var(--ui-input-date-picker-global-label-color-disabled)]" : "text-[var(--ui-input-date-picker-global-label-color-idle)]"
+          ),
+          children: [
+            e,
+            s && /* @__PURE__ */ r(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "text-[var(--ui-input-date-picker-global-required-color)]",
+                children: "*"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ i(
+        "button",
+        {
+          ref: j,
+          id: n,
+          type: "button",
+          disabled: d,
+          "aria-invalid": q || void 0,
+          "aria-required": s || void 0,
+          "aria-haspopup": "dialog",
+          "aria-expanded": b || void 0,
+          "aria-describedby": g ? v : void 0,
+          "data-open": b || void 0,
+          className: p(
+            "group flex h-[var(--ui-input-date-picker-global-box-height)] w-full min-w-0 cursor-pointer items-center gap-[var(--ui-input-date-picker-global-box-gap)] rounded-[var(--ui-input-date-picker-global-box-border-radius)] border bg-[var(--ui-input-date-picker-global-box-color-idle)] border-[var(--ui-input-date-picker-normal-box-border-color-idle)] px-[var(--ui-input-date-picker-global-box-padding-x)] text-start text-sm leading-6 text-[var(--ui-input-date-picker-global-value-color-idle)] outline-none transition-colors",
+            "enabled:not-aria-[invalid=true]:hover:bg-[var(--ui-input-date-picker-global-box-color-hover)] enabled:not-aria-[invalid=true]:hover:border-[var(--ui-input-date-picker-normal-box-border-color-hover)]",
+            "not-aria-[invalid=true]:data-[open]:border-[var(--ui-input-date-picker-normal-box-border-color-active)]",
+            "not-aria-[invalid=true]:focus-visible:border-[var(--ui-input-date-picker-normal-box-border-color-active)] not-aria-[invalid=true]:focus-visible:ring-[3px] not-aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-primary)]",
+            "aria-[invalid=true]:border-[var(--ui-input-date-picker-error-box-border-color-idle)] enabled:aria-[invalid=true]:hover:border-[var(--ui-input-date-picker-error-box-border-color-hover)] aria-[invalid=true]:data-[open]:border-[var(--ui-input-date-picker-error-box-border-color-active)] aria-[invalid=true]:focus-visible:border-[var(--ui-input-date-picker-error-box-border-color-active)] aria-[invalid=true]:focus-visible:ring-[3px] aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-error)]",
+            "disabled:cursor-not-allowed disabled:border-[var(--ui-input-date-picker-normal-box-border-color-disabled)] disabled:bg-[var(--ui-input-date-picker-global-box-color-disabled)] disabled:text-[var(--ui-input-date-picker-global-value-color-disabled)]",
+            k
+          ),
+          ...R,
+          children: [
+            z ? x ? /* @__PURE__ */ i("span", { className: "flex min-w-0 flex-1 items-center gap-[var(--ui-input-date-picker-global-box-gap-range)] truncate", children: [
+              /* @__PURE__ */ r("span", { children: l }),
+              /* @__PURE__ */ r("span", { className: "text-[var(--ui-input-date-picker-global-separator-color-idle)] group-disabled:text-[var(--ui-input-date-picker-global-separator-color-disabled)]", children: I }),
+              /* @__PURE__ */ r("span", { children: t })
+            ] }) : /* @__PURE__ */ r("span", { className: "min-w-0 flex-1 truncate", children: o }) : /* @__PURE__ */ r("span", { className: "min-w-0 flex-1 truncate text-[var(--ui-input-date-picker-global-placeholder-color-idle)] group-disabled:text-[var(--ui-input-date-picker-global-placeholder-color-disabled)]", children: w }),
+            /* @__PURE__ */ r(
+              C,
+              {
+                size: 16,
+                className: "shrink-0 text-[var(--ui-input-date-picker-normal-icon-color-idle)] group-disabled:text-[var(--ui-input-date-picker-normal-icon-color-disabled)] group-aria-[invalid=true]:text-[var(--ui-input-date-picker-error-icon-color-idle)]"
+              }
+            )
+          ]
+        }
+      ),
+      g && /* @__PURE__ */ r(
+        "p",
+        {
+          id: v,
+          className: p(
+            "text-xs leading-4",
+            c ? "text-[var(--ui-input-date-picker-error-error-msg-color)]" : d ? "text-[var(--ui-input-date-picker-normal-description-color-disabled)]" : "text-[var(--ui-input-date-picker-normal-description-color-idle)]"
+          ),
+          children: u
+        }
+      )
+    ] });
+  }
+);
+E.displayName = "InputDatePicker";
+export {
+  E as InputDatePicker
+};
+//# sourceMappingURL=input-date-picker.js.map

package/dist/components/ui/input-date-picker/input-date-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-date-picker.js","sources":["../../../../src/components/ui/input-date-picker/input-date-picker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { CalendarIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// Mirrors the Figma \"InputDatePicker\" component: the date-field **trigger** — a\n// button box that displays a formatted date `value` (or a `startDate – endDate`\n// range when `pickerType=\"dateRange\"`) and a trailing calendar icon, with the field\n// furniture (optional `label` + required `*`, optional `description` / `error`).\n// Themed by the `--ui-input-date-picker-*` tier. The box border is wired per state:\n// idle / hover / open (`open` → `-active`) / focus (`-active` + a 3px\n// `--ui-focus-primary` ring) / disabled; `error` (or `aria-invalid`) swaps the\n// border to `error-box-border-color-*` and the ring to `--ui-focus-error`.\n//\n// This is the trigger only — the calendar popup is NOT in the Figma design or the\n// token tier yet, so the consumer renders the date `value`/range as formatted\n// strings and wires their own calendar to `open` / `onClick`.\nexport interface InputDatePickerProps\n  extends Omit<React.ComponentPropsWithoutRef<'button'>, 'value'> {\n  /** Field label, rendered above the box. */\n  label?: React.ReactNode;\n  /** Marks the field required — appends a `*` after the label. */\n  required?: boolean;\n  /** Helper text below the box. Hidden while `error` is set. */\n  description?: React.ReactNode;\n  /** Error message below the box. Its presence switches the field to the error treatment. */\n  error?: React.ReactNode;\n  /** Single date or a start–end range. */\n  pickerType?: 'date' | 'dateRange';\n  /** Hint shown when no value is selected. */\n  placeholder?: React.ReactNode;\n  /** Formatted selected date (`pickerType=\"date\"`). */\n  value?: React.ReactNode;\n  /** Formatted range start (`pickerType=\"dateRange\"`). */\n  startDate?: React.ReactNode;\n  /** Formatted range end (`pickerType=\"dateRange\"`). */\n  endDate?: React.ReactNode;\n  /** Separator between range dates. */\n  separator?: React.ReactNode;\n  /** Whether the (consumer-owned) calendar popup is open — paints the active border. */\n  open?: boolean;\n}\n\nconst InputDatePicker = React.forwardRef<HTMLButtonElement, InputDatePickerProps>(\n  (\n    {\n      className,\n      id,\n      label,\n      required,\n      description,\n      error,\n      pickerType = 'date',\n      placeholder,\n      value,\n      startDate,\n      endDate,\n      separator = '–',\n      open,\n      disabled,\n      'aria-invalid': ariaInvalid,\n      ...props\n    },\n    ref\n  ) => {\n    const reactId = React.useId();\n    const inputId = id ?? reactId;\n    const messageId = `${inputId}-message`;\n\n    const hasError = error != null && error !== '';\n    const invalid = hasError || ariaInvalid;\n    const message = hasError ? error : description;\n    const hasMessage = message != null && message !== '';\n\n    const isRange = pickerType === 'dateRange';\n    const hasValue = isRange\n      ? (startDate != null && startDate !== '') ||\n        (endDate != null && endDate !== '')\n      : value != null && value !== '';\n\n    return (\n      <div className=\"flex w-full min-w-[var(--ui-input-date-picker-global-container-width-min)] flex-col gap-[var(--ui-input-date-picker-global-container-gap)]\">\n        {label != null && label !== '' && (\n          <label\n            htmlFor={inputId}\n            className={cn(\n              'flex gap-[var(--ui-input-date-picker-global-container-label-gap)] text-sm leading-4',\n              disabled\n                ? 'text-[var(--ui-input-date-picker-global-label-color-disabled)]'\n                : 'text-[var(--ui-input-date-picker-global-label-color-idle)]'\n            )}\n          >\n            {label}\n            {required && (\n              <span\n                aria-hidden=\"true\"\n                className=\"text-[var(--ui-input-date-picker-global-required-color)]\"\n              >\n                *\n              </span>\n            )}\n          </label>\n        )}\n\n        <button\n          ref={ref}\n          id={inputId}\n          type=\"button\"\n          disabled={disabled}\n          aria-invalid={invalid || undefined}\n          aria-required={required || undefined}\n          aria-haspopup=\"dialog\"\n          aria-expanded={open || undefined}\n          aria-describedby={hasMessage ? messageId : undefined}\n          data-open={open || undefined}\n          className={cn(\n            'group flex h-[var(--ui-input-date-picker-global-box-height)] w-full min-w-0 cursor-pointer items-center gap-[var(--ui-input-date-picker-global-box-gap)] rounded-[var(--ui-input-date-picker-global-box-border-radius)] border bg-[var(--ui-input-date-picker-global-box-color-idle)] border-[var(--ui-input-date-picker-normal-box-border-color-idle)] px-[var(--ui-input-date-picker-global-box-padding-x)] text-start text-sm leading-6 text-[var(--ui-input-date-picker-global-value-color-idle)] outline-none transition-colors',\n            'enabled:not-aria-[invalid=true]:hover:bg-[var(--ui-input-date-picker-global-box-color-hover)] enabled:not-aria-[invalid=true]:hover:border-[var(--ui-input-date-picker-normal-box-border-color-hover)]',\n            'not-aria-[invalid=true]:data-[open]:border-[var(--ui-input-date-picker-normal-box-border-color-active)]',\n            'not-aria-[invalid=true]:focus-visible:border-[var(--ui-input-date-picker-normal-box-border-color-active)] not-aria-[invalid=true]:focus-visible:ring-[3px] not-aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-primary)]',\n            'aria-[invalid=true]:border-[var(--ui-input-date-picker-error-box-border-color-idle)] enabled:aria-[invalid=true]:hover:border-[var(--ui-input-date-picker-error-box-border-color-hover)] aria-[invalid=true]:data-[open]:border-[var(--ui-input-date-picker-error-box-border-color-active)] aria-[invalid=true]:focus-visible:border-[var(--ui-input-date-picker-error-box-border-color-active)] aria-[invalid=true]:focus-visible:ring-[3px] aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-error)]',\n            'disabled:cursor-not-allowed disabled:border-[var(--ui-input-date-picker-normal-box-border-color-disabled)] disabled:bg-[var(--ui-input-date-picker-global-box-color-disabled)] disabled:text-[var(--ui-input-date-picker-global-value-color-disabled)]',\n            className\n          )}\n          {...props}\n        >\n          {hasValue ? (\n            isRange ? (\n              <span className=\"flex min-w-0 flex-1 items-center gap-[var(--ui-input-date-picker-global-box-gap-range)] truncate\">\n                <span>{startDate}</span>\n                <span className=\"text-[var(--ui-input-date-picker-global-separator-color-idle)] group-disabled:text-[var(--ui-input-date-picker-global-separator-color-disabled)]\">\n                  {separator}\n                </span>\n                <span>{endDate}</span>\n              </span>\n            ) : (\n              <span className=\"min-w-0 flex-1 truncate\">{value}</span>\n            )\n          ) : (\n            <span className=\"min-w-0 flex-1 truncate text-[var(--ui-input-date-picker-global-placeholder-color-idle)] group-disabled:text-[var(--ui-input-date-picker-global-placeholder-color-disabled)]\">\n              {placeholder}\n            </span>\n          )}\n          <CalendarIcon\n            size={16}\n            className=\"shrink-0 text-[var(--ui-input-date-picker-normal-icon-color-idle)] group-disabled:text-[var(--ui-input-date-picker-normal-icon-color-disabled)] group-aria-[invalid=true]:text-[var(--ui-input-date-picker-error-icon-color-idle)]\"\n          />\n        </button>\n\n        {hasMessage && (\n          <p\n            id={messageId}\n            className={cn(\n              'text-xs leading-4',\n              hasError\n                ? 'text-[var(--ui-input-date-picker-error-error-msg-color)]'\n                : disabled\n                  ? 'text-[var(--ui-input-date-picker-normal-description-color-disabled)]'\n                  : 'text-[var(--ui-input-date-picker-normal-description-color-idle)]'\n            )}\n          >\n            {message}\n          </p>\n        )}\n      </div>\n    );\n  }\n);\nInputDatePicker.displayName = 'InputDatePicker';\n\nexport { InputDatePicker };\n"],"names":["InputDatePicker","React","className","id","label","required","description","error","pickerType","placeholder","value","startDate","endDate","separator","open","disabled","ariaInvalid","props","ref","reactId","inputId","messageId","hasError","invalid","message","hasMessage","isRange","hasValue","jsxs","cn","jsx","CalendarIcon"],"mappings":"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"}

package/dist/components/ui/input-search/input-search.js

@@ -0,0 +1,56 @@
+import { jsxs as c, jsx as l } from "react/jsx-runtime";
+import * as o from "react";
+import { cn as s } from "../../../lib/utils.js";
+import { SearchBox as f } from "../search/search.js";
+const v = o.forwardRef(
+  ({
+    className: u,
+    id: p,
+    label: a,
+    required: r,
+    disabled: e,
+    "aria-label": i,
+    ...d
+  }, h) => {
+    const m = o.useId(), t = p ?? m, n = a != null && a !== "", x = n ? { "aria-label": void 0 } : i != null ? { "aria-label": i } : {};
+    return /* @__PURE__ */ c("div", { className: s("flex w-full min-w-[var(--ui-input-search-container-width-min)] flex-col gap-[var(--ui-input-search-container-gap)]", u), children: [
+      n && /* @__PURE__ */ c(
+        "label",
+        {
+          htmlFor: t,
+          className: s(
+            "flex gap-[var(--ui-input-search-container-label-gap)] text-sm leading-4",
+            e ? "text-[var(--ui-input-search-color-disabled)]" : "text-[var(--ui-input-search-color-idle)]"
+          ),
+          children: [
+            a,
+            r && /* @__PURE__ */ l(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "text-[var(--ui-input-search-required-color)]",
+                children: "*"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ l(
+        f,
+        {
+          ref: h,
+          id: t,
+          disabled: e,
+          "aria-required": r || void 0,
+          ...x,
+          ...d
+        }
+      )
+    ] });
+  }
+);
+v.displayName = "InputSearch";
+export {
+  v as InputSearch
+};
+//# sourceMappingURL=input-search.js.map

package/dist/components/ui/input-search/input-search.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-search.js","sources":["../../../../src/components/ui/input-search/input-search.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\nimport { SearchBox, type SearchBoxProps } from '../search';\n\n// Mirrors the Figma \"InputSearch\" component: a full search field built around the\n// bare `SearchBox` (themed by the `--ui-input-search-*` tier). It adds the field\n// furniture — an optional `label` above the box (with an optional `required` `*`).\n// Every other prop (placeholder, value, onClear, disabled, …) passes straight\n// through to `Search`. Label colors come from `--ui-input-search-color-{idle,disabled}`\n// and the required marker from `--ui-input-search-required-color`, so brand overrides\n// are honored. When a visible label is present it names the field via `htmlFor`/`id`,\n// and `Search`'s built-in `aria-label=\"Search\"` is cleared so it doesn't shadow the\n// visible label.\nexport interface InputSearchProps extends SearchBoxProps {\n  /** Field label, rendered above the search box. */\n  label?: React.ReactNode;\n  /** Marks the field required — appends a `*` after the label. */\n  required?: boolean;\n}\n\nconst InputSearch = React.forwardRef<HTMLInputElement, InputSearchProps>(\n  (\n    {\n      className,\n      id,\n      label,\n      required,\n      disabled,\n      'aria-label': ariaLabel,\n      ...props\n    },\n    ref\n  ) => {\n    const reactId = React.useId();\n    const inputId = id ?? reactId;\n    const hasLabel = label != null && label !== '';\n\n    // A visible label names the field via `htmlFor`/`id`, so clear `Search`'s\n    // default `aria-label`. With no label, forward the caller's `aria-label` (if\n    // any) and otherwise let `Search`'s default stand.\n    const ariaLabelProps = hasLabel\n      ? { 'aria-label': undefined }\n      : ariaLabel != null\n        ? { 'aria-label': ariaLabel }\n        : {};\n\n    return (\n      <div className={cn('flex w-full min-w-[var(--ui-input-search-container-width-min)] flex-col gap-[var(--ui-input-search-container-gap)]', className)}>\n        {hasLabel && (\n          <label\n            htmlFor={inputId}\n            className={cn(\n              'flex gap-[var(--ui-input-search-container-label-gap)] text-sm leading-4',\n              disabled\n                ? 'text-[var(--ui-input-search-color-disabled)]'\n                : 'text-[var(--ui-input-search-color-idle)]'\n            )}\n          >\n            {label}\n            {required && (\n              <span\n                aria-hidden=\"true\"\n                className=\"text-[var(--ui-input-search-required-color)]\"\n              >\n                *\n              </span>\n            )}\n          </label>\n        )}\n        <SearchBox\n          ref={ref}\n          id={inputId}\n          disabled={disabled}\n          aria-required={required || undefined}\n          {...ariaLabelProps}\n          {...props}\n        />\n      </div>\n    );\n  }\n);\nInputSearch.displayName = 'InputSearch';\n\nexport { InputSearch };\n"],"names":["InputSearch","React","className","id","label","required","disabled","ariaLabel","props","ref","reactId","inputId","hasLabel","ariaLabelProps","cn","jsxs","jsx","SearchBox"],"mappings":";;;;AAqBA,MAAMA,IAAcC,EAAM;AAAA,EACxB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,IAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,cAAcC;AAAA,IACd,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAUT,EAAM,MAAA,GAChBU,IAAUR,KAAMO,GAChBE,IAAWR,KAAS,QAAQA,MAAU,IAKtCS,IAAiBD,IACnB,EAAE,cAAc,OAAA,IAChBL,KAAa,OACX,EAAE,cAAcA,EAAA,IAChB,CAAA;AAEN,6BACG,OAAA,EAAI,WAAWO,EAAG,sHAAsHZ,CAAS,GAC/I,UAAA;AAAA,MAAAU,KACC,gBAAAG;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAASJ;AAAA,UACT,WAAWG;AAAA,YACT;AAAA,YACAR,IACI,iDACA;AAAA,UAAA;AAAA,UAGL,UAAA;AAAA,YAAAF;AAAA,YACAC,KACC,gBAAAW;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,eAAY;AAAA,gBACZ,WAAU;AAAA,gBACX,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UAED;AAAA,QAAA;AAAA,MAAA;AAAA,MAIN,gBAAAA;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,KAAAR;AAAA,UACA,IAAIE;AAAA,UACJ,UAAAL;AAAA,UACA,iBAAeD,KAAY;AAAA,UAC1B,GAAGQ;AAAA,UACH,GAAGL;AAAA,QAAA;AAAA,MAAA;AAAA,IACN,GACF;AAAA,EAEJ;AACF;AACAR,EAAY,cAAc;"}