@uisatin/ui 0.0.0-stage → 0.1.1

package/chunk-YPJYW624.js

@@ -0,0 +1,195 @@
+import { Floating } from './chunk-Y5AYU7PK.js';
+import { Select } from './chunk-72OCFAPT.js';
+import { Badge } from './chunk-O7F3CIDV.js';
+import { cn } from './chunk-H63FYCMY.js';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var defaultFormat = (n) => n.toLocaleString("en-US");
+function ChartCard({
+  title,
+  range,
+  total,
+  change,
+  periods,
+  value,
+  onPeriodChange,
+  className,
+  children,
+  ...props
+}) {
+  const titleId = React.useId();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "chart-card",
+      role: "figure",
+      "aria-labelledby": titleId,
+      className: cn("@container flex flex-col gap-4 overflow-hidden rounded-2xl border border-border-default bg-bg-card p-4", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-h-7 items-center gap-3", children: [
+            /* @__PURE__ */ jsx("p", { id: titleId, className: "min-w-0 flex-1 truncate text-lg leading-6 font-medium text-text-default", children: title }),
+            periods && /* @__PURE__ */ jsx(PeriodSelect, { periods, value, onValueChange: onPeriodChange })
+          ] }),
+          total == null && /* @__PURE__ */ jsx("p", { className: "text-sm leading-(--text-sm--line-height) text-text-muted", children: range })
+        ] }),
+        total != null && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-xl leading-(--text-xl--line-height) font-semibold text-text-default tabular-nums", children: total }),
+            change && /* @__PURE__ */ jsx(
+              Badge,
+              {
+                tone: /^[−-]/.test(change) ? "red" : "green",
+                size: "sm",
+                className: "[box-shadow:inset_0_0_0_1px_var(--tone-border)]",
+                children: change
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm leading-(--text-sm--line-height) text-text-muted", children: range })
+        ] }),
+        children
+      ]
+    }
+  );
+}
+function PeriodSelect({
+  periods,
+  value,
+  onValueChange
+}) {
+  const groups = Array.isArray(periods[0]) ? periods : [periods];
+  return /* @__PURE__ */ jsx(
+    Select,
+    {
+      size: "sm",
+      "aria-label": "Period",
+      options: groups.map((g) => ({ options: g.map((p) => ({ value: p, label: p })) })),
+      value,
+      onValueChange,
+      wrapperClassName: "w-[132px] shrink-0"
+    }
+  );
+}
+function ChartLegendPill({
+  color,
+  label,
+  value,
+  variant = "outline",
+  active,
+  dimmed,
+  className,
+  ...props
+}) {
+  const plain = variant === "plain";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "chart-legend-pill",
+      "data-variant": variant,
+      className: cn(
+        "inline-flex h-8 items-center gap-1.5 rounded-pill text-sm leading-(--text-sm--line-height) whitespace-nowrap",
+        "transition-[border-color,background-color] duration-(--duration-fast) ease-(--ease-out)",
+        "*:transition-opacity *:duration-(--duration-fast) *:ease-(--ease-out)",
+        plain ? "px-2" : "border px-2.5",
+        !plain && (active ? "border-border-strong" : "border-border-default"),
+        plain && active && "bg-bg-hover",
+        dimmed && "*:opacity-45",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "size-2 shrink-0 rounded-full", style: { background: color } }),
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate text-text-default", children: label }),
+        value != null && /* @__PURE__ */ jsx("span", { className: "font-medium text-text-default tabular-nums", children: value })
+      ]
+    }
+  );
+}
+var pointerPath = "M1.17721 0.5H13.1772L8.23721 5.62C7.65721 6.22 6.69721 6.22 6.11721 5.62L1.17721 0.5Z";
+var tooltipShadow = "[filter:drop-shadow(0_2px_2px_var(--effect-shadow-sm))_drop-shadow(0_4px_3px_var(--effect-shadow-sm))]";
+function TooltipPill({ label, value }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 rounded-md bg-text-default px-2.5 py-1.5 text-sm leading-(--text-sm--line-height) whitespace-nowrap text-bg-canvas", children: [
+    /* @__PURE__ */ jsx("span", { className: "font-medium", children: label }),
+    /* @__PURE__ */ jsx("span", { className: "opacity-72", children: value })
+  ] });
+}
+function ChartTooltip({
+  label,
+  value,
+  anchor,
+  sideOffset = 4,
+  className,
+  ...props
+}) {
+  if (anchor !== void 0) {
+    return /* @__PURE__ */ jsx(Floating, { anchor, side: "top", sideOffset: sideOffset + 5, className: "pointer-events-none", children: ({ side, arrowRef, arrowStyle }) => /* @__PURE__ */ jsxs("div", { "data-slot": "chart-tooltip", className: cn("relative", tooltipShadow, className), ...props, children: [
+      /* @__PURE__ */ jsx(TooltipPill, { label, value }),
+      /* @__PURE__ */ jsx(
+        "svg",
+        {
+          ref: arrowRef,
+          width: "12",
+          height: "6",
+          viewBox: "1.17 0.5 12 5.57",
+          "aria-hidden": true,
+          className: cn("absolute block text-text-default", side === "bottom" ? "bottom-full -mb-px rotate-180" : "top-full -mt-px"),
+          style: arrowStyle,
+          children: /* @__PURE__ */ jsx("path", { d: pointerPath, fill: "currentColor" })
+        }
+      )
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "chart-tooltip",
+      className: cn("pointer-events-none flex flex-col items-center", tooltipShadow, className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(TooltipPill, { label, value }),
+        /* @__PURE__ */ jsx("svg", { width: "12", height: "6", viewBox: "1.17 0.5 12 5.57", "aria-hidden": true, className: "-mt-px block text-text-default", children: /* @__PURE__ */ jsx("path", { d: pointerPath, fill: "currentColor" }) })
+      ]
+    }
+  );
+}
+function ChartLegendRow({
+  color,
+  label,
+  value,
+  note,
+  active,
+  dimmed,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "chart-legend-row",
+      className: cn(
+        "flex h-8 items-center gap-2 rounded-md px-2 py-1.5 text-sm leading-(--text-sm--line-height)",
+        // The dim fades the row's content, never its ground: on the row itself it would multiply
+        // the leaving highlight's fade-out and cut it short.
+        "transition-[background-color] duration-(--duration-fast) ease-(--ease-out)",
+        "*:transition-opacity *:duration-(--duration-fast) *:ease-(--ease-out)",
+        active && "bg-bg-muted",
+        dimmed && "*:opacity-45",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "size-2 shrink-0 rounded-full", style: { background: color } }),
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 text-text-default", children: label }),
+        /* @__PURE__ */ jsx("span", { className: "shrink-0 font-medium whitespace-nowrap text-text-default", children: value }),
+        note && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-right whitespace-nowrap text-text-muted", children: note })
+      ]
+    }
+  );
+}
+
+export { ChartCard, ChartLegendPill, ChartLegendRow, ChartTooltip, defaultFormat };
+//# sourceMappingURL=chunk-YPJYW624.js.map
+//# sourceMappingURL=chunk-YPJYW624.js.map

package/chunk-YPJYW624.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/chart.tsx"],"names":[],"mappings":"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","file":"chunk-YPJYW624.js","sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../lib/utils'\nimport { Badge } from './badge'\nimport { Floating } from './floating'\nimport { Select } from './select'\n\n/**\n * The parts every chart card shares, 1:1 with the uiKit `chart/barCard` (3607:18253) and `chart/channelCard`\n * (3608:18797) frames and the parts `chart/legendRow`\n * (3602:17559) and `chart/tooltip` (3602:17522). Plain React and CSS, no chart library.\n *\n * Every card sits in ChartCard: the title and a period Select on one row, the KPI with its\n * change and the range under it, then the chart.\n *\n * The tooltip is a text/default pill with bg/canvas text, medium label + value at 72%, 10×6\n * padding, radius-md, a 12×6 pointer and a two-step sm shadow.\n */\n\nexport type ChartDatum = {\n  label: string\n  value: number\n  /** Tooltip title; defaults to the label. */\n  tooltipLabel?: string\n}\n\nexport type Periods = string[] | string[][]\n\nexport interface ChartCardBaseProps extends Omit<React.ComponentProps<'div'>, 'title'> {\n  title: string\n  /** The dates the card covers, under the KPI, e.g. \"Oct 26 – Nov 1, 2026 · vs previous 7 days\". */\n  range: string\n  data: ChartDatum[]\n  /** The KPI under the title, e.g. \"€48,260\". Cards that have one default it to the formatted sum. */\n  total?: string\n  /** The change badge after the KPI, e.g. \"+5.2%\". A leading minus turns it red. */\n  change?: string\n  /** Periods for the Select in the header. Nested arrays become titled-less groups split by a rule. */\n  periods?: Periods\n  /** The selected period. */\n  value?: string\n  onPeriodChange?: (period: string) => void\n  /** Formats values in the tooltip, the legend and the axis. */\n  formatValue?: (value: number) => string\n  /** Index of the datum shown as hovered (state sheets, docs). */\n  highlight?: number\n}\n\nexport const defaultFormat = (n: number) => n.toLocaleString('en-US')\n\n/* ---------- shared parts ---------- */\n\n/**\n * The card every chart sits in (uiKit \"chart explorations\" A, 4084:3591): bg/card, 1px\n * border-default, radius-2xl, 16px in and 16 between rows. Row one: the title (16/24 medium,\n * text/default) and, when there are `periods`, a small Select for the period at the right. Row\n * two: the KPI (text/xl semibold) with its change badge, and the range under it in text/muted, 2px\n * apart; without a KPI the range sits 4px under the title. Then the chart. The card is a size\n * container, so a chart can lay itself out wider from 560px (`@min-[560px]:`).\n */\nexport function ChartCard({\n  title,\n  range,\n  total,\n  change,\n  periods,\n  value,\n  onPeriodChange,\n  className,\n  children,\n  ...props\n}: Omit<ChartCardBaseProps, 'data' | 'formatValue' | 'highlight'>) {\n  const titleId = React.useId()\n  return (\n    <div\n      data-slot=\"chart-card\"\n      role=\"figure\"\n      aria-labelledby={titleId}\n      className={cn('@container flex flex-col gap-4 overflow-hidden rounded-2xl border border-border-default bg-bg-card p-4', className)}\n      {...props}\n    >\n      <div className=\"flex flex-col gap-1\">\n        <div className=\"flex min-h-7 items-center gap-3\">\n          <p id={titleId} className=\"min-w-0 flex-1 truncate text-lg leading-6 font-medium text-text-default\">\n            {title}\n          </p>\n          {periods && <PeriodSelect periods={periods} value={value} onValueChange={onPeriodChange} />}\n        </div>\n        {/* Without a KPI the range sits right under the title. */}\n        {total == null && <p className=\"text-sm leading-(--text-sm--line-height) text-text-muted\">{range}</p>}\n      </div>\n      {total != null && (\n        <div className=\"flex flex-col gap-0.5\">\n          <div className=\"flex items-center gap-2\">\n            <span className=\"text-xl leading-(--text-xl--line-height) font-semibold text-text-default tabular-nums\">{total}</span>\n            {change && (\n              <Badge\n                tone={/^[−-]/.test(change) ? 'red' : 'green'}\n                size=\"sm\"\n                className=\"[box-shadow:inset_0_0_0_1px_var(--tone-border)]\"\n              >\n                {change}\n              </Badge>\n            )}\n          </div>\n          <p className=\"text-sm leading-(--text-sm--line-height) text-text-muted\">{range}</p>\n        </div>\n      )}\n      {children}\n    </div>\n  )\n}\n\nfunction PeriodSelect({\n  periods,\n  value,\n  onValueChange,\n}: {\n  periods: Periods\n  value?: string\n  onValueChange?: (v: string) => void\n}) {\n  const groups: string[][] = Array.isArray(periods[0]) ? (periods as string[][]) : [periods as string[]]\n  return (\n    <Select\n      size=\"sm\"\n      aria-label=\"Period\"\n      options={groups.map((g) => ({ options: g.map((p) => ({ value: p, label: p })) }))}\n      value={value}\n      onValueChange={onValueChange}\n      wrapperClassName=\"w-[132px] shrink-0\"\n    />\n  )\n}\n\n/**\n * chart/legendPill (4061:4182).\n * - `outline`: an outline pill with no fill — 8px swatch, label, value 6 apart, 6 / 10 in. Active\n *   turns the ring border-strong.\n * - `plain` (the Donut legend): no ring and no value, 6 / 8 in; active fills bg/hover, as plain\n *   controls do on hover.\n * Dimmed fades the content to 45%, never the ground.\n */\nexport function ChartLegendPill({\n  color,\n  label,\n  value,\n  variant = 'outline',\n  active,\n  dimmed,\n  className,\n  ...props\n}: {\n  color: string\n  label: React.ReactNode\n  value?: React.ReactNode\n  variant?: 'outline' | 'plain'\n  active?: boolean\n  dimmed?: boolean\n} & React.ComponentProps<'div'>) {\n  const plain = variant === 'plain'\n  return (\n    <div\n      data-slot=\"chart-legend-pill\"\n      data-variant={variant}\n      className={cn(\n        'inline-flex h-8 items-center gap-1.5 rounded-pill text-sm leading-(--text-sm--line-height) whitespace-nowrap',\n        'transition-[border-color,background-color] duration-(--duration-fast) ease-(--ease-out)',\n        '*:transition-opacity *:duration-(--duration-fast) *:ease-(--ease-out)',\n        plain ? 'px-2' : 'border px-2.5',\n        !plain && (active ? 'border-border-strong' : 'border-border-default'),\n        plain && active && 'bg-bg-hover',\n        dimmed && '*:opacity-45',\n        className,\n      )}\n      {...props}\n    >\n      <span aria-hidden className=\"size-2 shrink-0 rounded-full\" style={{ background: color }} />\n      <span className=\"min-w-0 truncate text-text-default\">{label}</span>\n      {value != null && <span className=\"font-medium text-text-default tabular-nums\">{value}</span>}\n    </div>\n  )\n}\n\nconst pointerPath = 'M1.17721 0.5H13.1772L8.23721 5.62C7.65721 6.22 6.69721 6.22 6.11721 5.62L1.17721 0.5Z'\nconst tooltipShadow = '[filter:drop-shadow(0_2px_2px_var(--effect-shadow-sm))_drop-shadow(0_4px_3px_var(--effect-shadow-sm))]'\n\nfunction TooltipPill({ label, value }: { label: React.ReactNode; value: React.ReactNode }) {\n  return (\n    <div className=\"flex items-center gap-1.5 rounded-md bg-text-default px-2.5 py-1.5 text-sm leading-(--text-sm--line-height) whitespace-nowrap text-bg-canvas\">\n      <span className=\"font-medium\">{label}</span>\n      <span className=\"opacity-72\">{value}</span>\n    </div>\n  )\n}\n\n/**\n * The chart tooltip pill with its pointer. Exported for custom charts.\n * With `anchor` it floats over the page (see Floating): it never gets cut off by the card,\n * flips below when there's no room above, slides in from the screen edge, and its pointer\n * keeps pointing at the anchor. Without it, it renders in place.\n */\nexport function ChartTooltip({\n  label,\n  value,\n  anchor,\n  sideOffset = 4,\n  className,\n  ...props\n}: {\n  label: React.ReactNode\n  value: React.ReactNode\n  /** The element it points at. */\n  anchor?: Element | null\n  /** Gap between the anchor and the pointer's tip. */\n  sideOffset?: number\n} & React.ComponentProps<'div'>) {\n  if (anchor !== undefined) {\n    // The pointer is 6 high and overlaps the pill by 1px.\n    return (\n      <Floating anchor={anchor} side=\"top\" sideOffset={sideOffset + 5} className=\"pointer-events-none\">\n        {({ side, arrowRef, arrowStyle }) => (\n          <div data-slot=\"chart-tooltip\" className={cn('relative', tooltipShadow, className)} {...props}>\n            <TooltipPill label={label} value={value} />\n            <svg\n              ref={arrowRef as React.Ref<SVGSVGElement>}\n              width=\"12\"\n              height=\"6\"\n              viewBox=\"1.17 0.5 12 5.57\"\n              aria-hidden\n              className={cn('absolute block text-text-default', side === 'bottom' ? 'bottom-full -mb-px rotate-180' : 'top-full -mt-px')}\n              style={arrowStyle}\n            >\n              <path d={pointerPath} fill=\"currentColor\" />\n            </svg>\n          </div>\n        )}\n      </Floating>\n    )\n  }\n  return (\n    <div\n      data-slot=\"chart-tooltip\"\n      className={cn('pointer-events-none flex flex-col items-center', tooltipShadow, className)}\n      {...props}\n    >\n      <TooltipPill label={label} value={value} />\n      <svg width=\"12\" height=\"6\" viewBox=\"1.17 0.5 12 5.57\" aria-hidden className=\"-mt-px block text-text-default\">\n        <path d={pointerPath} fill=\"currentColor\" />\n      </svg>\n    </div>\n  )\n}\n\n/** One legend row: 8px swatch, label, value and an optional note. */\nexport function ChartLegendRow({\n  color,\n  label,\n  value,\n  note,\n  active,\n  dimmed,\n  className,\n  ...props\n}: {\n  color: string\n  label: React.ReactNode\n  value: React.ReactNode\n  note?: React.ReactNode\n  active?: boolean\n  dimmed?: boolean\n} & React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"chart-legend-row\"\n      className={cn(\n        'flex h-8 items-center gap-2 rounded-md px-2 py-1.5 text-sm leading-(--text-sm--line-height)',\n        // The dim fades the row's content, never its ground: on the row itself it would multiply\n        // the leaving highlight's fade-out and cut it short.\n        'transition-[background-color] duration-(--duration-fast) ease-(--ease-out)',\n        '*:transition-opacity *:duration-(--duration-fast) *:ease-(--ease-out)',\n        active && 'bg-bg-muted',\n        dimmed && '*:opacity-45',\n        className,\n      )}\n      {...props}\n    >\n      <span aria-hidden className=\"size-2 shrink-0 rounded-full\" style={{ background: color }} />\n      <span className=\"min-w-0 flex-1 text-text-default\">{label}</span>\n      <span className=\"shrink-0 font-medium whitespace-nowrap text-text-default\">{value}</span>\n      {note && <span className=\"shrink-0 text-right whitespace-nowrap text-text-muted\">{note}</span>}\n    </div>\n  )\n}\n\n/** Rounds the top of the axis up to a nice number that splits into four steps. */\n"]}

package/chunk-YPNKBE5X.js

@@ -0,0 +1,104 @@
+import { useFormField } from './chunk-UBNHSZSE.js';
+import { cn } from './chunk-H63FYCMY.js';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function Input({
+  label,
+  hint,
+  error,
+  size = "md",
+  leadingIcon,
+  trailingIcon,
+  className,
+  wrapperClassName,
+  id,
+  disabled,
+  required,
+  value,
+  defaultValue,
+  onChange,
+  "aria-describedby": ariaDescribedBy,
+  "data-force": force,
+  ...props
+}) {
+  const field = useFormField();
+  const autoId = React.useId();
+  const inputId = id ?? field?.id ?? autoId;
+  const isDisabled = disabled ?? field?.disabled ?? false;
+  const invalid = Boolean(error) || (field?.invalid ?? false);
+  const message = typeof error === "string" || React.isValidElement(error) ? error : hint;
+  const messageId = message ? `${inputId}-hint` : void 0;
+  const describedBy = [ariaDescribedBy, field?.describedBy, messageId].filter(Boolean).join(" ") || void 0;
+  const [uncontrolledFilled, setUncontrolledFilled] = React.useState(
+    defaultValue != null && String(defaultValue).length > 0
+  );
+  const filled = value != null ? String(value).length > 0 : uncontrolledFilled;
+  const inputRef = React.useRef(null);
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "input-wrapper", className: cn("grid w-full gap-2", wrapperClassName), children: [
+    label && /* @__PURE__ */ jsx(
+      "label",
+      {
+        htmlFor: inputId,
+        className: "text-sm leading-[18px] font-medium text-text-default",
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-slot": "input-field",
+        "data-size": size,
+        "data-filled": filled || void 0,
+        "data-invalid": invalid || void 0,
+        "data-disabled": isDisabled || void 0,
+        "data-force": force,
+        className: cn("satin-field", className),
+        onMouseDown: (e) => {
+          const target = e.target;
+          if (target !== inputRef.current && !isDisabled && !target.closest('button, a, [role="button"]')) {
+            e.preventDefault();
+            inputRef.current?.focus();
+          }
+        },
+        children: [
+          leadingIcon && /* @__PURE__ */ jsx("span", { className: "satin-field-icon", "aria-hidden": true, children: leadingIcon }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              id: inputId,
+              "data-slot": "input",
+              className: "satin-field-input",
+              disabled: isDisabled,
+              required: required ?? field?.required,
+              "aria-invalid": invalid || void 0,
+              "aria-describedby": describedBy,
+              value,
+              defaultValue,
+              onChange: (e) => {
+                if (value == null) setUncontrolledFilled(e.target.value.length > 0);
+                onChange?.(e);
+              },
+              ...props
+            }
+          ),
+          trailingIcon && // Not aria-hidden: the trailing slot may hold an action, such as a clear button.
+          /* @__PURE__ */ jsx("span", { className: "satin-field-icon", children: trailingIcon })
+        ]
+      }
+    ),
+    message && /* @__PURE__ */ jsx(
+      "p",
+      {
+        id: messageId,
+        className: cn("text-sm", typeof error === "string" || React.isValidElement(error) ? "text-action-destructive-bg" : "text-text-muted"),
+        children: message
+      }
+    )
+  ] });
+}
+
+export { Input };
+//# sourceMappingURL=chunk-YPNKBE5X.js.map
+//# sourceMappingURL=chunk-YPNKBE5X.js.map

package/chunk-YPNKBE5X.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/input.tsx"],"names":[],"mappings":"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","file":"chunk-YPNKBE5X.js","sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../lib/utils'\nimport { useFormField } from './form-field'\n\n/**\n * Input, 1:1 with the uiKit `Input` set (820:51657): a label (medium), the field, and a hint\n * (13/19.5, muted) 8px apart. The label is 13px at every size. Three sizes: sm 28 with a 13px\n * value, md 32 and lg 36 with 14px (lg at radius-xl), fixed whatever the theme's body size; 12px side padding,\n * optional 16px leading and trailing icons 8px from the text.\n *\n * Placeholder is text/muted; a value is text/default and turns the icons from muted to\n * default (Figma's `filled`). `error` swaps the hint for the message in action/destructive/bg\n * and sets `aria-invalid`. Hover, focus and the error ring are styles/components/input.css.\n *\n * Inside a FormField, leave out `label`, `hint` and `error`: the field supplies the id,\n * description and invalid state.\n */\nexport interface InputProps extends Omit<React.ComponentProps<'input'>, 'size'> {\n  label?: React.ReactNode\n  hint?: React.ReactNode\n  /** An error message (replaces the hint), or `true` to mark the field invalid without one. */\n  error?: React.ReactNode | boolean\n  size?: 'sm' | 'md' | 'lg'\n  leadingIcon?: React.ReactNode\n  trailingIcon?: React.ReactNode\n  /** Classes for the outer wrapper (label + field + hint). `className` styles the field. */\n  wrapperClassName?: string\n  /** Show a state without interacting, for state sheets. */\n  'data-force'?: 'hover' | 'focus'\n}\n\nexport function Input({\n  label,\n  hint,\n  error,\n  size = 'md',\n  leadingIcon,\n  trailingIcon,\n  className,\n  wrapperClassName,\n  id,\n  disabled,\n  required,\n  value,\n  defaultValue,\n  onChange,\n  'aria-describedby': ariaDescribedBy,\n  'data-force': force,\n  ...props\n}: InputProps) {\n  const field = useFormField()\n  const autoId = React.useId()\n  const inputId = id ?? field?.id ?? autoId\n  const isDisabled = disabled ?? field?.disabled ?? false\n  const invalid = Boolean(error) || (field?.invalid ?? false)\n  const message = typeof error === 'string' || React.isValidElement(error) ? error : hint\n  const messageId = message ? `${inputId}-hint` : undefined\n  const describedBy = [ariaDescribedBy, field?.describedBy, messageId].filter(Boolean).join(' ') || undefined\n\n  // Figma's `filled`: track whether there is a value, controlled or not.\n  const [uncontrolledFilled, setUncontrolledFilled] = React.useState(\n    defaultValue != null && String(defaultValue).length > 0,\n  )\n  const filled = value != null ? String(value).length > 0 : uncontrolledFilled\n\n  const inputRef = React.useRef<HTMLInputElement>(null)\n\n  return (\n    <div data-slot=\"input-wrapper\" className={cn('grid w-full gap-2', wrapperClassName)}>\n      {label && (\n        <label\n          htmlFor={inputId}\n          className=\"text-sm leading-[18px] font-medium text-text-default\"\n        >\n          {label}\n        </label>\n      )}\n      <div\n        data-slot=\"input-field\"\n        data-size={size}\n        data-filled={filled || undefined}\n        data-invalid={invalid || undefined}\n        data-disabled={isDisabled || undefined}\n        data-force={force}\n        className={cn('satin-field', className)}\n        // Clicking the padding or an icon focuses the input; buttons in the icon slots keep their click.\n        onMouseDown={(e) => {\n          const target = e.target as HTMLElement\n          if (target !== inputRef.current && !isDisabled && !target.closest('button, a, [role=\"button\"]')) {\n            e.preventDefault()\n            inputRef.current?.focus()\n          }\n        }}\n      >\n        {leadingIcon && (\n          <span className=\"satin-field-icon\" aria-hidden>\n            {leadingIcon}\n          </span>\n        )}\n        <input\n          ref={inputRef}\n          id={inputId}\n          data-slot=\"input\"\n          className=\"satin-field-input\"\n          disabled={isDisabled}\n          required={required ?? field?.required}\n          aria-invalid={invalid || undefined}\n          aria-describedby={describedBy}\n          value={value}\n          defaultValue={defaultValue}\n          onChange={(e) => {\n            if (value == null) setUncontrolledFilled(e.target.value.length > 0)\n            onChange?.(e)\n          }}\n          {...props}\n        />\n        {trailingIcon && (\n          // Not aria-hidden: the trailing slot may hold an action, such as a clear button.\n          <span className=\"satin-field-icon\">\n            {trailingIcon}\n          </span>\n        )}\n      </div>\n      {message && (\n        <p\n          id={messageId}\n          className={cn('text-sm', typeof error === 'string' || React.isValidElement(error) ? 'text-action-destructive-bg' : 'text-text-muted')}\n        >\n          {message}\n        </p>\n      )}\n    </div>\n  )\n}\n"]}