@freighttech/ui 0.13.18

package/dist/primitives-v2/Button.js

@@ -0,0 +1,85 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cn } from "./utils.js";
+const VARIANT_CLASSES = {
+  primary: cn(
+    "bg-primary-v2 text-primary-v2-foreground",
+    "enabled:hover:bg-primary-v2-hover",
+    "focus-visible:ring-primary-v2",
+    "disabled:opacity-40"
+  ),
+  secondary: cn(
+    "bg-secondary-v2 text-secondary-v2-foreground border border-border-v2",
+    "enabled:hover:bg-secondary-v2-hover",
+    "focus-visible:ring-primary-v2",
+    "disabled:opacity-40"
+  ),
+  outline: cn(
+    "bg-background-v2 text-foreground-v2 border border-border-v2-strong",
+    "enabled:hover:bg-secondary-v2",
+    "focus-visible:ring-primary-v2",
+    "disabled:opacity-40"
+  ),
+  ghost: cn(
+    "bg-transparent text-foreground-v2",
+    "enabled:hover:bg-secondary-v2",
+    "focus-visible:ring-primary-v2",
+    "disabled:opacity-40"
+  ),
+  destructive: cn(
+    "bg-destructive-v2 text-destructive-v2-foreground",
+    "enabled:hover:bg-destructive-v2-hover",
+    "focus-visible:ring-destructive-v2",
+    "disabled:opacity-40"
+  )
+};
+const SIZE_CLASSES = {
+  xs: "h-7 gap-1 rounded-md px-2.5 text-body-regular-xs",
+  sm: "h-8 gap-1.5 rounded-md px-3 text-sm font-semibold",
+  md: "h-9 gap-2 rounded-md px-4 text-sm font-semibold",
+  lg: "h-10 gap-2 rounded-md px-6 text-sm font-semibold"
+};
+const ICON_ONLY_SIZE_CLASSES = {
+  xs: "h-7 w-7 rounded-md",
+  sm: "h-8 w-8 rounded-md",
+  md: "h-9 w-9 rounded-md",
+  lg: "h-10 w-10 rounded-md"
+};
+const Button = React.forwardRef(function Button2({
+  variant = "primary",
+  size = "md",
+  icon,
+  iconPosition = "left",
+  iconOnly = false,
+  asChild = false,
+  className,
+  children,
+  type = "button",
+  ...props
+}, ref) {
+  const base = "inline-flex cursor-pointer items-center justify-center whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background-v2 disabled:cursor-not-allowed";
+  const classes = cn(
+    base,
+    iconOnly ? ICON_ONLY_SIZE_CLASSES[size] : SIZE_CLASSES[size],
+    VARIANT_CLASSES[variant],
+    className
+  );
+  if (asChild) {
+    return /* @__PURE__ */ jsx(Slot, { ref, className: classes, ...props, children });
+  }
+  return /* @__PURE__ */ jsxs("button", { ref, type, className: classes, ...props, children: [
+    icon && iconPosition === "left" && !iconOnly ? /* @__PURE__ */ jsx(ButtonIcon, { size, children: icon }) : null,
+    !iconOnly && children,
+    icon && iconPosition === "right" && !iconOnly ? /* @__PURE__ */ jsx(ButtonIcon, { size, children: icon }) : null,
+    iconOnly ? /* @__PURE__ */ jsx(ButtonIcon, { size, children: icon }) : null
+  ] });
+});
+function ButtonIcon({ size, children }) {
+  const dim = size === "xs" || size === "sm" ? "h-3.5 w-3.5" : "h-4 w-4";
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn("inline-flex shrink-0 items-center justify-center", dim), children });
+}
+export {
+  Button
+};
+//# sourceMappingURL=Button.js.map

package/dist/primitives-v2/Button.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/primitives-v2/Button.tsx"],
+  "sourcesContent": ["import * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cn } from './utils'\n\n/*\n  Figma source: FMS-Componenets \u2192 Button (component-set 44:92).\n\n  Variant \u00D7 state matrix extracted from Figma (one entry per leaf\n  variant's `fills` / `strokes` / text fill):\n\n    | Variant     | State    | Background        | Border    | Text\n    |-------------|----------|-------------------|-----------|-----------\n    | primary     | default  | #0E3762 (-v2)     | \u2014         | #FFFFFF\n    | primary     | hover    | #0B2C4F (-v2-hov) | \u2014         | #FFFFFF\n    | primary     | disabled | #0E3762 @ 50%     | \u2014         | #A0A0AA\n    | secondary   | default  | #F4F4F5           | #E4E4E7   | #18181A\n    | secondary   | hover    | #EDEDEF           | #E4E4E7   | #18181A\n    | secondary   | disabled | #F4F4F5           | #E4E4E7   | #A0A0AA\n    | outline     | default  | #FFFFFF           | #D4D4D8   | #18181A\n    | outline     | hover    | #F4F4F5           | #D4D4D8   | #18181A\n    | outline     | disabled | #FFFFFF           | #E4E4E7   | #A0A0AA\n    | ghost       | default  | transparent       | \u2014         | #18181A\n    | ghost       | hover    | #F4F4F5           | \u2014         | #18181A\n    | ghost       | disabled | transparent       | \u2014         | #A0A0AA\n    | destructive | default  | #E7000B           | \u2014         | #FFFFFF\n    | destructive | hover    | #C00009           | \u2014         | #FFFFFF\n    | destructive | disabled | #F4F4F5           | \u2014         | #A0A0AA\n\n  Colors live in `packages/ui/src/theme/tokens.css` as `-v2` tokens.\n\n  Sizes (Figma):\n    xs: h-7 (28px) \u00B7 px-2.5 (10px) \u00B7 gap-1 (4px)   \u2014 compact inline CTA\n    sm: h-8 (32px) \u00B7 px-3 (12px) \u00B7 gap-1.5 (6px)\n    md: h-9 (36px) \u00B7 px-4 (16px) \u00B7 gap-2 (8px)\n    lg: h-10 (40px) \u00B7 px-6 (24px) \u00B7 gap-2 (8px)\n  Radius: rounded-md (= 8px with --radius=0.625rem).\n  Text: sm/md/lg use `text-sm font-semibold` (Geist 14/600). The xs size\n  uses `text-body-regular-xs` (12px / 400) \u2014 matches the in-card \"small\n  pill\" CTA pattern from the FMS Teczka detail mockup.\n*/\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive'\nexport type ButtonSize = 'xs' | 'sm' | 'md' | 'lg'\nexport type ButtonIconPosition = 'left' | 'right'\n\nexport type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n  variant?: ButtonVariant\n  size?: ButtonSize\n  /** Optional icon element. Renders before children by default; pass `iconPosition=\"right\"` to flip. */\n  icon?: React.ReactNode\n  iconPosition?: ButtonIconPosition\n  /** When true, the button shrinks to a square and only renders the icon. `children` is ignored. */\n  iconOnly?: boolean\n  /**\n   * Render as a Radix `Slot`, merging the button styling onto the single\n   * child element (e.g. a Next.js `<Link>`) instead of a `<button>`. The\n   * caller owns the child's content \u2014 `icon` / `iconOnly` are ignored.\n   */\n  asChild?: boolean\n}\n\n/*\n  One row per variant. Each row carries default / hover / disabled\n  triplet, plus the focus ring color. Disabled rules use Tailwind's\n  `disabled:` modifier (works on native <button>) so callers don't\n  need to track state in React.\n*/\n/**\n * Disabled state follows the Figma design system: each variant keeps its own\n * brand color (faded navy, faded red, etc.) instead of collapsing to a neutral\n * gray. We achieve that with `disabled:opacity-40` \u2014 preserving bg, text, and\n * border tone, just dimmed. Hover affordances are gated on `enabled:` so they\n * never trigger when the button is disabled.\n */\nconst VARIANT_CLASSES: Record<ButtonVariant, string> = {\n  primary: cn(\n    'bg-primary-v2 text-primary-v2-foreground',\n    'enabled:hover:bg-primary-v2-hover',\n    'focus-visible:ring-primary-v2',\n    'disabled:opacity-40',\n  ),\n  secondary: cn(\n    'bg-secondary-v2 text-secondary-v2-foreground border border-border-v2',\n    'enabled:hover:bg-secondary-v2-hover',\n    'focus-visible:ring-primary-v2',\n    'disabled:opacity-40',\n  ),\n  outline: cn(\n    'bg-background-v2 text-foreground-v2 border border-border-v2-strong',\n    'enabled:hover:bg-secondary-v2',\n    'focus-visible:ring-primary-v2',\n    'disabled:opacity-40',\n  ),\n  ghost: cn(\n    'bg-transparent text-foreground-v2',\n    'enabled:hover:bg-secondary-v2',\n    'focus-visible:ring-primary-v2',\n    'disabled:opacity-40',\n  ),\n  destructive: cn(\n    'bg-destructive-v2 text-destructive-v2-foreground',\n    'enabled:hover:bg-destructive-v2-hover',\n    'focus-visible:ring-destructive-v2',\n    'disabled:opacity-40',\n  ),\n}\n\nconst SIZE_CLASSES: Record<ButtonSize, string> = {\n  xs: 'h-7 gap-1 rounded-md px-2.5 text-body-regular-xs',\n  sm: 'h-8 gap-1.5 rounded-md px-3 text-sm font-semibold',\n  md: 'h-9 gap-2 rounded-md px-4 text-sm font-semibold',\n  lg: 'h-10 gap-2 rounded-md px-6 text-sm font-semibold',\n}\n\nconst ICON_ONLY_SIZE_CLASSES: Record<ButtonSize, string> = {\n  xs: 'h-7 w-7 rounded-md',\n  sm: 'h-8 w-8 rounded-md',\n  md: 'h-9 w-9 rounded-md',\n  lg: 'h-10 w-10 rounded-md',\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    variant = 'primary',\n    size = 'md',\n    icon,\n    iconPosition = 'left',\n    iconOnly = false,\n    asChild = false,\n    className,\n    children,\n    type = 'button',\n    ...props\n  },\n  ref,\n) {\n  const base =\n    'inline-flex cursor-pointer items-center justify-center whitespace-nowrap transition-colors ' +\n    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 ' +\n    'focus-visible:ring-offset-background-v2 disabled:cursor-not-allowed'\n\n  const classes = cn(\n    base,\n    iconOnly ? ICON_ONLY_SIZE_CLASSES[size] : SIZE_CLASSES[size],\n    VARIANT_CLASSES[variant],\n    className,\n  )\n\n  if (asChild) {\n    // Slot forwards the styling onto the caller's child (e.g. a <Link>);\n    // the child owns its own content, so we don't inject `icon`/children.\n    return (\n      <Slot ref={ref as React.Ref<HTMLElement>} className={classes} {...props}>\n        {children}\n      </Slot>\n    )\n  }\n\n  return (\n    <button ref={ref} type={type} className={classes} {...props}>\n      {icon && iconPosition === 'left' && !iconOnly ? <ButtonIcon size={size}>{icon}</ButtonIcon> : null}\n      {!iconOnly && children}\n      {icon && iconPosition === 'right' && !iconOnly ? (\n        <ButtonIcon size={size}>{icon}</ButtonIcon>\n      ) : null}\n      {iconOnly ? <ButtonIcon size={size}>{icon}</ButtonIcon> : null}\n    </button>\n  )\n})\n\nfunction ButtonIcon({ size, children }: { size: ButtonSize; children: React.ReactNode }) {\n  const dim = size === 'xs' || size === 'sm' ? 'h-3.5 w-3.5' : 'h-4 w-4'\n  return (\n    <span aria-hidden=\"true\" className={cn('inline-flex shrink-0 items-center justify-center', dim)}>\n      {children}\n    </span>\n  )\n}\n"],
+  "mappings": "AAwJM,cAOF,YAPE;AAxJN,YAAY,WAAW;AACvB,SAAS,YAAY;AACrB,SAAS,UAAU;AAwEnB,MAAM,kBAAiD;AAAA,EACrD,SAAS;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,WAAW;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,SAAS;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,OAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,aAAa;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAEA,MAAM,eAA2C;AAAA,EAC/C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,yBAAqD;AAAA,EACzD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,MAAM,SAAS,MAAM,WAA2C,SAASA,QAC9E;AAAA,EACE,UAAU;AAAA,EACV,OAAO;AAAA,EACP;AAAA,EACA,eAAe;AAAA,EACf,WAAW;AAAA,EACX,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACL,GACA,KACA;AACA,QAAM,OACJ;AAIF,QAAM,UAAU;AAAA,IACd;AAAA,IACA,WAAW,uBAAuB,IAAI,IAAI,aAAa,IAAI;AAAA,IAC3D,gBAAgB,OAAO;AAAA,IACvB;AAAA,EACF;AAEA,MAAI,SAAS;AAGX,WACE,oBAAC,QAAK,KAAoC,WAAW,SAAU,GAAG,OAC/D,UACH;AAAA,EAEJ;AAEA,SACE,qBAAC,YAAO,KAAU,MAAY,WAAW,SAAU,GAAG,OACnD;AAAA,YAAQ,iBAAiB,UAAU,CAAC,WAAW,oBAAC,cAAW,MAAa,gBAAK,IAAgB;AAAA,IAC7F,CAAC,YAAY;AAAA,IACb,QAAQ,iBAAiB,WAAW,CAAC,WACpC,oBAAC,cAAW,MAAa,gBAAK,IAC5B;AAAA,IACH,WAAW,oBAAC,cAAW,MAAa,gBAAK,IAAgB;AAAA,KAC5D;AAEJ,CAAC;AAED,SAAS,WAAW,EAAE,MAAM,SAAS,GAAoD;AACvF,QAAM,MAAM,SAAS,QAAQ,SAAS,OAAO,gBAAgB;AAC7D,SACE,oBAAC,UAAK,eAAY,QAAO,WAAW,GAAG,oDAAoD,GAAG,GAC3F,UACH;AAEJ;",
+  "names": ["Button"]
+}

package/dist/primitives-v2/Button.stories.js

@@ -0,0 +1,48 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Plus, ArrowRight, Trash2 } from "lucide-react";
+import { Button } from "./Button.js";
+const meta = {
+  title: "Components/Button",
+  component: Button,
+  parameters: {
+    backgrounds: {
+      default: "figma-surface",
+      values: [{ name: "figma-surface", value: "#F8F8FA" }]
+    },
+    docs: {
+      description: {
+        component: "Figma: FMS-Componenets \u2192 Button (44:92). Colors come from the `-v2` token set in `tokens.css`, extracted directly from each Figma variant. Hover, focus, and disabled use CSS pseudo-classes \u2014 interact with the rendered buttons to see them."
+      }
+    }
+  }
+};
+var Button_stories_default = meta;
+const VARIANTS = ["primary", "secondary", "outline", "ghost", "destructive"];
+const SIZES = ["sm", "md", "lg"];
+const Showcase = {
+  name: "Button",
+  render: () => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
+    /* @__PURE__ */ jsxs("table", { className: "border-separate border-spacing-x-4 border-spacing-y-3", children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "text-label-semibold-xs uppercase tracking-wider text-muted-v2-foreground", children: [
+        /* @__PURE__ */ jsx("th", { className: "text-left", children: "Variant \u2193 / Size \u2192" }),
+        SIZES.map((s) => /* @__PURE__ */ jsx("th", { className: "text-left", children: s }, s))
+      ] }) }),
+      /* @__PURE__ */ jsx("tbody", { children: VARIANTS.map((v) => /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx("td", { className: "text-label-medium-md text-foreground-v2", children: v }),
+        SIZES.map((s) => /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(Button, { variant: v, size: s, children: v }) }, s))
+      ] }, v)) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+      /* @__PURE__ */ jsx(Button, { icon: /* @__PURE__ */ jsx(Plus, {}), children: "Dodaj faktur\u0119" }),
+      /* @__PURE__ */ jsx(Button, { variant: "outline", icon: /* @__PURE__ */ jsx(ArrowRight, {}), iconPosition: "right", children: "Dalej" }),
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", iconOnly: true, icon: /* @__PURE__ */ jsx(Plus, {}), "aria-label": "Dodaj" }),
+      /* @__PURE__ */ jsx(Button, { variant: "destructive", icon: /* @__PURE__ */ jsx(Trash2, {}), children: "Usu\u0144" }),
+      /* @__PURE__ */ jsx(Button, { disabled: true, children: "Disabled" })
+    ] })
+  ] })
+};
+export {
+  Showcase,
+  Button_stories_default as default
+};
+//# sourceMappingURL=Button.stories.js.map

package/dist/primitives-v2/Button.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/primitives-v2/Button.stories.tsx"],
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react-vite'\nimport { Plus, ArrowRight, Trash2 } from 'lucide-react'\nimport { Button, type ButtonVariant, type ButtonSize } from './Button'\n\nconst meta: Meta<typeof Button> = {\n  title: 'Components/Button',\n  component: Button,\n  parameters: {\n    backgrounds: {\n      default: 'figma-surface',\n      values: [{ name: 'figma-surface', value: '#F8F8FA' }],\n    },\n    docs: {\n      description: {\n        component:\n          'Figma: FMS-Componenets \u2192 Button (44:92). Colors come from the `-v2` token set in `tokens.css`, extracted directly from each Figma variant. Hover, focus, and disabled use CSS pseudo-classes \u2014 interact with the rendered buttons to see them.',\n      },\n    },\n  },\n}\n\nexport default meta\n\ntype Story = StoryObj<typeof Button>\n\nconst VARIANTS: ButtonVariant[] = ['primary', 'secondary', 'outline', 'ghost', 'destructive']\nconst SIZES: ButtonSize[] = ['sm', 'md', 'lg']\n\nexport const Showcase: Story = {\n  name: 'Button',\n  render: () => (\n    <div className=\"flex flex-col gap-6\">\n      <table className=\"border-separate border-spacing-x-4 border-spacing-y-3\">\n        <thead>\n          <tr className=\"text-label-semibold-xs uppercase tracking-wider text-muted-v2-foreground\">\n            <th className=\"text-left\">Variant \u2193 / Size \u2192</th>\n            {SIZES.map((s) => (\n              <th key={s} className=\"text-left\">\n                {s}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {VARIANTS.map((v) => (\n            <tr key={v}>\n              <td className=\"text-label-medium-md text-foreground-v2\">{v}</td>\n              {SIZES.map((s) => (\n                <td key={s}>\n                  <Button variant={v} size={s}>\n                    {v}\n                  </Button>\n                </td>\n              ))}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n      <div className=\"flex flex-wrap items-center gap-3\">\n        <Button icon={<Plus />}>Dodaj faktur\u0119</Button>\n        <Button variant=\"outline\" icon={<ArrowRight />} iconPosition=\"right\">\n          Dalej\n        </Button>\n        <Button variant=\"ghost\" iconOnly icon={<Plus />} aria-label=\"Dodaj\" />\n        <Button variant=\"destructive\" icon={<Trash2 />}>\n          Usu\u0144\n        </Button>\n        <Button disabled>Disabled</Button>\n      </div>\n    </div>\n  ),\n}\n"],
+  "mappings": "AAkCU,SACE,KADF;AAjCV,SAAS,MAAM,YAAY,cAAc;AACzC,SAAS,cAAmD;AAE5D,MAAM,OAA4B;AAAA,EAChC,OAAO;AAAA,EACP,WAAW;AAAA,EACX,YAAY;AAAA,IACV,aAAa;AAAA,MACX,SAAS;AAAA,MACT,QAAQ,CAAC,EAAE,MAAM,iBAAiB,OAAO,UAAU,CAAC;AAAA,IACtD;AAAA,IACA,MAAM;AAAA,MACJ,aAAa;AAAA,QACX,WACE;AAAA,MACJ;AAAA,IACF;AAAA,EACF;AACF;AAEA,IAAO,yBAAQ;AAIf,MAAM,WAA4B,CAAC,WAAW,aAAa,WAAW,SAAS,aAAa;AAC5F,MAAM,QAAsB,CAAC,MAAM,MAAM,IAAI;AAEtC,MAAM,WAAkB;AAAA,EAC7B,MAAM;AAAA,EACN,QAAQ,MACN,qBAAC,SAAI,WAAU,uBACb;AAAA,yBAAC,WAAM,WAAU,yDACf;AAAA,0BAAC,WACC,+BAAC,QAAG,WAAU,4EACZ;AAAA,4BAAC,QAAG,WAAU,aAAY,0CAAkB;AAAA,QAC3C,MAAM,IAAI,CAAC,MACV,oBAAC,QAAW,WAAU,aACnB,eADM,CAET,CACD;AAAA,SACH,GACF;AAAA,MACA,oBAAC,WACE,mBAAS,IAAI,CAAC,MACb,qBAAC,QACC;AAAA,4BAAC,QAAG,WAAU,2CAA2C,aAAE;AAAA,QAC1D,MAAM,IAAI,CAAC,MACV,oBAAC,QACC,8BAAC,UAAO,SAAS,GAAG,MAAM,GACvB,aACH,KAHO,CAIT,CACD;AAAA,WARM,CAST,CACD,GACH;AAAA,OACF;AAAA,IACA,qBAAC,SAAI,WAAU,qCACb;AAAA,0BAAC,UAAO,MAAM,oBAAC,QAAK,GAAI,gCAAa;AAAA,MACrC,oBAAC,UAAO,SAAQ,WAAU,MAAM,oBAAC,cAAW,GAAI,cAAa,SAAQ,mBAErE;AAAA,MACA,oBAAC,UAAO,SAAQ,SAAQ,UAAQ,MAAC,MAAM,oBAAC,QAAK,GAAI,cAAW,SAAQ;AAAA,MACpE,oBAAC,UAAO,SAAQ,eAAc,MAAM,oBAAC,UAAO,GAAI,uBAEhD;AAAA,MACA,oBAAC,UAAO,UAAQ,MAAC,sBAAQ;AAAA,OAC3B;AAAA,KACF;AAEJ;",
+  "names": []
+}

package/dist/primitives-v2/Checkbox.js

@@ -0,0 +1,65 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "./utils.js";
+const CHECK_SVG = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.5 3.5L13 5' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")`;
+const DASH_SVG = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8h9' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E")`;
+const Checkbox = React.forwardRef(function Checkbox2({ indeterminate = false, hasError = false, label, className, disabled, id, ...props }, forwardedRef) {
+  const innerRef = React.useRef(null);
+  React.useImperativeHandle(forwardedRef, () => innerRef.current);
+  React.useEffect(() => {
+    if (innerRef.current) innerRef.current.indeterminate = indeterminate;
+  }, [indeterminate]);
+  const generatedId = React.useId();
+  const inputId = id ?? generatedId;
+  const box = /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref: innerRef,
+      id: inputId,
+      type: "checkbox",
+      disabled,
+      "aria-invalid": hasError || void 0,
+      style: {
+        ["--cb-check-svg"]: CHECK_SVG,
+        ["--cb-dash-svg"]: DASH_SVG
+      },
+      className: cn(
+        "relative inline-flex h-4 w-4 shrink-0 cursor-pointer appearance-none rounded border bg-background-v2 transition-colors",
+        "border-border-v2-strong",
+        "checked:border-selection-v2 checked:bg-selection-v2",
+        "indeterminate:border-selection-v2 indeterminate:bg-selection-v2",
+        "checked:bg-[image:var(--cb-check-svg)] checked:bg-center checked:bg-no-repeat",
+        "indeterminate:bg-[image:var(--cb-dash-svg)] indeterminate:bg-center indeterminate:bg-no-repeat",
+        // Focus uses the brand blue selection accent.
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-selection-v2 focus-visible:ring-offset-1 focus-visible:ring-offset-background-v2",
+        // Disabled
+        "disabled:cursor-not-allowed disabled:border-border-v2 disabled:bg-secondary-v2",
+        "disabled:checked:border-muted-v2-foreground disabled:checked:bg-muted-v2-foreground",
+        "disabled:indeterminate:border-muted-v2-foreground disabled:indeterminate:bg-muted-v2-foreground",
+        // Error
+        hasError ? "border-destructive-v2 checked:border-destructive-v2 checked:bg-destructive-v2 indeterminate:border-destructive-v2 indeterminate:bg-destructive-v2 focus-visible:ring-destructive-v2" : null
+      ),
+      ...props
+    }
+  );
+  if (label == null) return box;
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      htmlFor: inputId,
+      className: cn(
+        "inline-flex cursor-pointer items-center gap-2 text-body-regular-sm text-foreground-v2",
+        disabled ? "cursor-not-allowed text-muted-v2-foreground" : null,
+        className
+      ),
+      children: [
+        box,
+        /* @__PURE__ */ jsx("span", { className: "select-none", children: label })
+      ]
+    }
+  );
+});
+export {
+  Checkbox
+};
+//# sourceMappingURL=Checkbox.js.map

package/dist/primitives-v2/Checkbox.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/primitives-v2/Checkbox.tsx"],
+  "sourcesContent": ["import * as React from 'react'\nimport { cn } from './utils'\n\n/*\n  Figma source: FMS-Componenets \u2192 Checkbox (component-set 45:73).\n  The checked / indeterminate fill is the brand blue `#3B82F6`\n  (Figma blue/500), stored as `--selection-v2` and shared with the\n  active Tab underline and the selected-row fill. (It was teal\n  `#0D9488` / `--accent-v2` until the Teczka design moved selection\n  states to blue.)\n\n    | State           | Bg                | Border           | Glyph\n    |-----------------|-------------------|-------------------|------\n    | unchecked       | #FFFFFF           | #D4D4D8           | \u2014\n    | checked         | #3B82F6 (blue)    | #3B82F6           | white check\n    | indeterminate   | #3B82F6 (blue)    | #3B82F6           | white dash\n    | disabled        | #F4F4F5           | #E4E4E7           | dimmed\n    | error           | #FFFFFF           | #E7000B           | \u2014\n    | focus           | (border blue)     | #3B82F6 (blue)    | \u2014 (ring)\n\n  Implementation: native `<input type=\"checkbox\">` with `appearance: none`\n  and inline-SVG background-images for the check / dash glyphs. The\n  `indeterminate` flag is set imperatively via the ref (HTML has no\n  declarative attribute for it).\n*/\n\nexport type CheckboxProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> & {\n  indeterminate?: boolean\n  hasError?: boolean\n  /** Inline label rendered to the right of the box. */\n  label?: React.ReactNode\n}\n\nconst CHECK_SVG =\n  \"url(\\\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.5 3.5L13 5' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\\\")\"\n\nconst DASH_SVG =\n  \"url(\\\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8h9' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E\\\")\"\n\nexport const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(\n  { indeterminate = false, hasError = false, label, className, disabled, id, ...props },\n  forwardedRef,\n) {\n  const innerRef = React.useRef<HTMLInputElement | null>(null)\n  React.useImperativeHandle(forwardedRef, () => innerRef.current as HTMLInputElement)\n  React.useEffect(() => {\n    if (innerRef.current) innerRef.current.indeterminate = indeterminate\n  }, [indeterminate])\n\n  const generatedId = React.useId()\n  const inputId = id ?? generatedId\n\n  const box = (\n    <input\n      ref={innerRef}\n      id={inputId}\n      type=\"checkbox\"\n      disabled={disabled}\n      aria-invalid={hasError || undefined}\n      style={\n        {\n          ['--cb-check-svg' as never]: CHECK_SVG,\n          ['--cb-dash-svg' as never]: DASH_SVG,\n        } as React.CSSProperties\n      }\n      className={cn(\n        'relative inline-flex h-4 w-4 shrink-0 cursor-pointer appearance-none rounded border bg-background-v2 transition-colors',\n        'border-border-v2-strong',\n        'checked:border-selection-v2 checked:bg-selection-v2',\n        'indeterminate:border-selection-v2 indeterminate:bg-selection-v2',\n        'checked:bg-[image:var(--cb-check-svg)] checked:bg-center checked:bg-no-repeat',\n        'indeterminate:bg-[image:var(--cb-dash-svg)] indeterminate:bg-center indeterminate:bg-no-repeat',\n        // Focus uses the brand blue selection accent.\n        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-selection-v2 focus-visible:ring-offset-1 focus-visible:ring-offset-background-v2',\n        // Disabled\n        'disabled:cursor-not-allowed disabled:border-border-v2 disabled:bg-secondary-v2',\n        'disabled:checked:border-muted-v2-foreground disabled:checked:bg-muted-v2-foreground',\n        'disabled:indeterminate:border-muted-v2-foreground disabled:indeterminate:bg-muted-v2-foreground',\n        // Error\n        hasError\n          ? 'border-destructive-v2 checked:border-destructive-v2 checked:bg-destructive-v2 indeterminate:border-destructive-v2 indeterminate:bg-destructive-v2 focus-visible:ring-destructive-v2'\n          : null,\n      )}\n      {...props}\n    />\n  )\n\n  if (label == null) return box\n\n  return (\n    <label\n      htmlFor={inputId}\n      className={cn(\n        'inline-flex cursor-pointer items-center gap-2 text-body-regular-sm text-foreground-v2',\n        disabled ? 'cursor-not-allowed text-muted-v2-foreground' : null,\n        className,\n      )}\n    >\n      {box}\n      <span className=\"select-none\">{label}</span>\n    </label>\n  )\n})\n"],
+  "mappings": "AAqDI,cAqCA,YArCA;AArDJ,YAAY,WAAW;AACvB,SAAS,UAAU;AAgCnB,MAAM,YACJ;AAEF,MAAM,WACJ;AAEK,MAAM,WAAW,MAAM,WAA4C,SAASA,UACjF,EAAE,gBAAgB,OAAO,WAAW,OAAO,OAAO,WAAW,UAAU,IAAI,GAAG,MAAM,GACpF,cACA;AACA,QAAM,WAAW,MAAM,OAAgC,IAAI;AAC3D,QAAM,oBAAoB,cAAc,MAAM,SAAS,OAA2B;AAClF,QAAM,UAAU,MAAM;AACpB,QAAI,SAAS,QAAS,UAAS,QAAQ,gBAAgB;AAAA,EACzD,GAAG,CAAC,aAAa,CAAC;AAElB,QAAM,cAAc,MAAM,MAAM;AAChC,QAAM,UAAU,MAAM;AAEtB,QAAM,MACJ;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,IAAI;AAAA,MACJ,MAAK;AAAA,MACL;AAAA,MACA,gBAAc,YAAY;AAAA,MAC1B,OACE;AAAA,QACE,CAAC,gBAAyB,GAAG;AAAA,QAC7B,CAAC,eAAwB,GAAG;AAAA,MAC9B;AAAA,MAEF,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,QAEA;AAAA;AAAA,QAEA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,QAEA,WACI,wLACA;AAAA,MACN;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAGF,MAAI,SAAS,KAAM,QAAO;AAE1B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,WAAW;AAAA,QACT;AAAA,QACA,WAAW,gDAAgD;AAAA,QAC3D;AAAA,MACF;AAAA,MAEC;AAAA;AAAA,QACD,oBAAC,UAAK,WAAU,eAAe,iBAAM;AAAA;AAAA;AAAA,EACvC;AAEJ,CAAC;",
+  "names": ["Checkbox"]
+}

package/dist/primitives-v2/Checkbox.stories.js

@@ -0,0 +1,31 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Checkbox } from "./Checkbox.js";
+const meta = {
+  title: "Components/Checkbox",
+  component: Checkbox,
+  parameters: {
+    docs: {
+      description: {
+        component: "Figma: FMS-Componenets \u2192 Checkbox (45:73). Native input with custom paint. Focus and hover are CSS pseudo-classes \u2014 interact with the rendered element to see them."
+      }
+    }
+  }
+};
+var Checkbox_stories_default = meta;
+const Showcase = {
+  name: "Checkbox",
+  render: () => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsx(Checkbox, { label: "Unchecked" }),
+    /* @__PURE__ */ jsx(Checkbox, { label: "Checked", defaultChecked: true }),
+    /* @__PURE__ */ jsx(Checkbox, { label: "Indeterminate", indeterminate: true }),
+    /* @__PURE__ */ jsx(Checkbox, { label: "Disabled (unchecked)", disabled: true }),
+    /* @__PURE__ */ jsx(Checkbox, { label: "Disabled (checked)", disabled: true, defaultChecked: true }),
+    /* @__PURE__ */ jsx(Checkbox, { label: "Error", hasError: true }),
+    /* @__PURE__ */ jsx(Checkbox, { label: "Error + checked", hasError: true, defaultChecked: true })
+  ] })
+};
+export {
+  Showcase,
+  Checkbox_stories_default as default
+};
+//# sourceMappingURL=Checkbox.stories.js.map

package/dist/primitives-v2/Checkbox.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/primitives-v2/Checkbox.stories.tsx"],
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react-vite'\nimport { Checkbox } from './Checkbox'\n\nconst meta: Meta<typeof Checkbox> = {\n  title: 'Components/Checkbox',\n  component: Checkbox,\n  parameters: {\n    docs: {\n      description: {\n        component:\n          'Figma: FMS-Componenets \u2192 Checkbox (45:73). Native input with custom paint. Focus and hover are CSS pseudo-classes \u2014 interact with the rendered element to see them.',\n      },\n    },\n  },\n}\n\nexport default meta\n\ntype Story = StoryObj<typeof Checkbox>\n\nexport const Showcase: Story = {\n  name: 'Checkbox',\n  render: () => (\n    <div className=\"flex flex-col gap-3\">\n      <Checkbox label=\"Unchecked\" />\n      <Checkbox label=\"Checked\" defaultChecked />\n      <Checkbox label=\"Indeterminate\" indeterminate />\n      <Checkbox label=\"Disabled (unchecked)\" disabled />\n      <Checkbox label=\"Disabled (checked)\" disabled defaultChecked />\n      <Checkbox label=\"Error\" hasError />\n      <Checkbox label=\"Error + checked\" hasError defaultChecked />\n    </div>\n  ),\n}\n"],
+  "mappings": "AAuBI,SACE,KADF;AAtBJ,SAAS,gBAAgB;AAEzB,MAAM,OAA8B;AAAA,EAClC,OAAO;AAAA,EACP,WAAW;AAAA,EACX,YAAY;AAAA,IACV,MAAM;AAAA,MACJ,aAAa;AAAA,QACX,WACE;AAAA,MACJ;AAAA,IACF;AAAA,EACF;AACF;AAEA,IAAO,2BAAQ;AAIR,MAAM,WAAkB;AAAA,EAC7B,MAAM;AAAA,EACN,QAAQ,MACN,qBAAC,SAAI,WAAU,uBACb;AAAA,wBAAC,YAAS,OAAM,aAAY;AAAA,IAC5B,oBAAC,YAAS,OAAM,WAAU,gBAAc,MAAC;AAAA,IACzC,oBAAC,YAAS,OAAM,iBAAgB,eAAa,MAAC;AAAA,IAC9C,oBAAC,YAAS,OAAM,wBAAuB,UAAQ,MAAC;AAAA,IAChD,oBAAC,YAAS,OAAM,sBAAqB,UAAQ,MAAC,gBAAc,MAAC;AAAA,IAC7D,oBAAC,YAAS,OAAM,SAAQ,UAAQ,MAAC;AAAA,IACjC,oBAAC,YAAS,OAAM,mBAAkB,UAAQ,MAAC,gBAAc,MAAC;AAAA,KAC5D;AAEJ;",
+  "names": []
+}

package/dist/primitives-v2/IconButton.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Button } from "./Button.js";
+const IconButton = React.forwardRef(function IconButton2({ icon, variant = "ghost", size = "md", asChild = false, children, ...props }, ref) {
+  if (asChild) {
+    return /* @__PURE__ */ jsx(Button, { ref, variant, size, iconOnly: true, asChild: true, ...props, children });
+  }
+  return /* @__PURE__ */ jsx(Button, { ref, variant, size, iconOnly: true, icon, ...props });
+});
+export {
+  IconButton
+};
+//# sourceMappingURL=IconButton.js.map

package/dist/primitives-v2/IconButton.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/primitives-v2/IconButton.tsx"],
+  "sourcesContent": ["import * as React from 'react'\nimport { Button, type ButtonProps, type ButtonSize, type ButtonVariant } from './Button'\n\n/*\n  Figma source: FMS-Componenets \u2192 IconButton (component-set 148:377).\n  Matrix: state \u00D7 size. Built as a thin wrapper around Button with\n  `iconOnly` always true and the icon passed as the only content.\n  This keeps the visual contract (radius, hover, focus ring, variants)\n  in sync with Button \u2014 change one, change both.\n*/\n\nexport type IconButtonProps = Omit<ButtonProps, 'iconOnly' | 'children' | 'icon' | 'iconPosition'> & {\n  /** The icon to render. Required unless `asChild` is set (the child owns its content). */\n  icon?: React.ReactNode\n  /** Accessible label \u2014 required since the button has no visible text. */\n  'aria-label': string\n  variant?: ButtonVariant\n  size?: ButtonSize\n  /**\n   * Render the square icon-button styling onto a single child element\n   * (e.g. a Next.js `<Link>`) via Radix `Slot`. Pass the icon as the\n   * child instead of the `icon` prop.\n   */\n  asChild?: boolean\n  children?: React.ReactNode\n}\n\nexport const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(\n  { icon, variant = 'ghost', size = 'md', asChild = false, children, ...props },\n  ref,\n) {\n  if (asChild) {\n    return (\n      <Button ref={ref} variant={variant} size={size} iconOnly asChild {...props}>\n        {children}\n      </Button>\n    )\n  }\n  return <Button ref={ref} variant={variant} size={size} iconOnly icon={icon} {...props} />\n})\n"],
+  "mappings": "AAiCM;AAjCN,YAAY,WAAW;AACvB,SAAS,cAAqE;AA0BvE,MAAM,aAAa,MAAM,WAA+C,SAASA,YACtF,EAAE,MAAM,UAAU,SAAS,OAAO,MAAM,UAAU,OAAO,UAAU,GAAG,MAAM,GAC5E,KACA;AACA,MAAI,SAAS;AACX,WACE,oBAAC,UAAO,KAAU,SAAkB,MAAY,UAAQ,MAAC,SAAO,MAAE,GAAG,OAClE,UACH;AAAA,EAEJ;AACA,SAAO,oBAAC,UAAO,KAAU,SAAkB,MAAY,UAAQ,MAAC,MAAa,GAAG,OAAO;AACzF,CAAC;",
+  "names": ["IconButton"]
+}

package/dist/primitives-v2/IconButton.stories.js

@@ -0,0 +1,37 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MoreHorizontal, Trash2, Pencil } from "lucide-react";
+import { IconButton } from "./IconButton.js";
+const meta = {
+  title: "Components/IconButton",
+  component: IconButton,
+  parameters: {
+    docs: {
+      description: {
+        component: "Figma: FMS-Componenets \u2192 IconButton (148:377). Square button for icon-only actions (close, more, sort). Inherits all visual states from `Button`. **Always pass `aria-label`** \u2014 there is no visible text."
+      }
+    }
+  }
+};
+var IconButton_stories_default = meta;
+const Showcase = {
+  name: "IconButton",
+  render: () => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx(IconButton, { variant: "primary", icon: /* @__PURE__ */ jsx(Pencil, {}), "aria-label": "Edytuj" }),
+      /* @__PURE__ */ jsx(IconButton, { variant: "secondary", icon: /* @__PURE__ */ jsx(Pencil, {}), "aria-label": "Edytuj" }),
+      /* @__PURE__ */ jsx(IconButton, { variant: "outline", icon: /* @__PURE__ */ jsx(Pencil, {}), "aria-label": "Edytuj" }),
+      /* @__PURE__ */ jsx(IconButton, { variant: "ghost", icon: /* @__PURE__ */ jsx(Pencil, {}), "aria-label": "Edytuj" }),
+      /* @__PURE__ */ jsx(IconButton, { variant: "destructive", icon: /* @__PURE__ */ jsx(Trash2, {}), "aria-label": "Usu\u0144" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx(MoreHorizontal, {}), "aria-label": "Wi\u0119cej" }),
+      /* @__PURE__ */ jsx(IconButton, { size: "md", icon: /* @__PURE__ */ jsx(MoreHorizontal, {}), "aria-label": "Wi\u0119cej" }),
+      /* @__PURE__ */ jsx(IconButton, { size: "lg", icon: /* @__PURE__ */ jsx(MoreHorizontal, {}), "aria-label": "Wi\u0119cej" })
+    ] })
+  ] })
+};
+export {
+  Showcase,
+  IconButton_stories_default as default
+};
+//# sourceMappingURL=IconButton.stories.js.map

package/dist/primitives-v2/IconButton.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/primitives-v2/IconButton.stories.tsx"],
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react-vite'\nimport { MoreHorizontal, Trash2, Pencil } from 'lucide-react'\nimport { IconButton } from './IconButton'\n\nconst meta: Meta<typeof IconButton> = {\n  title: 'Components/IconButton',\n  component: IconButton,\n  parameters: {\n    docs: {\n      description: {\n        component:\n          'Figma: FMS-Componenets \u2192 IconButton (148:377). Square button for icon-only actions (close, more, sort). Inherits all visual states from `Button`. **Always pass `aria-label`** \u2014 there is no visible text.',\n      },\n    },\n  },\n}\n\nexport default meta\n\ntype Story = StoryObj<typeof IconButton>\n\nexport const Showcase: Story = {\n  name: 'IconButton',\n  render: () => (\n    <div className=\"flex flex-col gap-6\">\n      <div className=\"flex items-center gap-3\">\n        <IconButton variant=\"primary\" icon={<Pencil />} aria-label=\"Edytuj\" />\n        <IconButton variant=\"secondary\" icon={<Pencil />} aria-label=\"Edytuj\" />\n        <IconButton variant=\"outline\" icon={<Pencil />} aria-label=\"Edytuj\" />\n        <IconButton variant=\"ghost\" icon={<Pencil />} aria-label=\"Edytuj\" />\n        <IconButton variant=\"destructive\" icon={<Trash2 />} aria-label=\"Usu\u0144\" />\n      </div>\n      <div className=\"flex items-center gap-3\">\n        <IconButton size=\"sm\" icon={<MoreHorizontal />} aria-label=\"Wi\u0119cej\" />\n        <IconButton size=\"md\" icon={<MoreHorizontal />} aria-label=\"Wi\u0119cej\" />\n        <IconButton size=\"lg\" icon={<MoreHorizontal />} aria-label=\"Wi\u0119cej\" />\n      </div>\n    </div>\n  ),\n}\n"],
+  "mappings": "AAyBM,SACsC,KADtC;AAxBN,SAAS,gBAAgB,QAAQ,cAAc;AAC/C,SAAS,kBAAkB;AAE3B,MAAM,OAAgC;AAAA,EACpC,OAAO;AAAA,EACP,WAAW;AAAA,EACX,YAAY;AAAA,IACV,MAAM;AAAA,MACJ,aAAa;AAAA,QACX,WACE;AAAA,MACJ;AAAA,IACF;AAAA,EACF;AACF;AAEA,IAAO,6BAAQ;AAIR,MAAM,WAAkB;AAAA,EAC7B,MAAM;AAAA,EACN,QAAQ,MACN,qBAAC,SAAI,WAAU,uBACb;AAAA,yBAAC,SAAI,WAAU,2BACb;AAAA,0BAAC,cAAW,SAAQ,WAAU,MAAM,oBAAC,UAAO,GAAI,cAAW,UAAS;AAAA,MACpE,oBAAC,cAAW,SAAQ,aAAY,MAAM,oBAAC,UAAO,GAAI,cAAW,UAAS;AAAA,MACtE,oBAAC,cAAW,SAAQ,WAAU,MAAM,oBAAC,UAAO,GAAI,cAAW,UAAS;AAAA,MACpE,oBAAC,cAAW,SAAQ,SAAQ,MAAM,oBAAC,UAAO,GAAI,cAAW,UAAS;AAAA,MAClE,oBAAC,cAAW,SAAQ,eAAc,MAAM,oBAAC,UAAO,GAAI,cAAW,aAAO;AAAA,OACxE;AAAA,IACA,qBAAC,SAAI,WAAU,2BACb;AAAA,0BAAC,cAAW,MAAK,MAAK,MAAM,oBAAC,kBAAe,GAAI,cAAW,eAAS;AAAA,MACpE,oBAAC,cAAW,MAAK,MAAK,MAAM,oBAAC,kBAAe,GAAI,cAAW,eAAS;AAAA,MACpE,oBAAC,cAAW,MAAK,MAAK,MAAM,oBAAC,kBAAe,GAAI,cAAW,eAAS;AAAA,OACtE;AAAA,KACF;AAEJ;",
+  "names": []
+}

package/dist/primitives-v2/Input.js

@@ -0,0 +1,74 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "./utils.js";
+const SIZE_CLASSES = {
+  sm: "h-8 text-[13px]",
+  md: "h-9 text-[13px]",
+  lg: "h-10 text-sm"
+};
+const PADDING_CLASSES = {
+  sm: { base: "px-3", left: "pl-9", right: "pr-9" },
+  md: { base: "px-3", left: "pl-9", right: "pr-9" },
+  lg: { base: "px-4", left: "pl-10", right: "pr-10" }
+};
+const Input = React.forwardRef(function Input2({ inputSize = "md", hasError = false, leftAddon, rightAddon, className, disabled, ...props }, ref) {
+  const pad = PADDING_CLASSES[inputSize];
+  const padClass = cn(leftAddon ? pad.left : null, rightAddon ? pad.right : null, !leftAddon && !rightAddon ? pad.base : null);
+  const baseStateClasses = hasError ? (
+    // Error: red border, red focus ring
+    "border-destructive-v2 text-foreground-v2 placeholder:text-muted-v2-foreground focus-visible:border-destructive-v2 focus-visible:ring-destructive-v2/30"
+  ) : disabled ? (
+    // Disabled: muted bg, soft border, no focus
+    "bg-secondary-v2 border-border-v2 text-muted-v2-foreground placeholder:text-muted-v2-foreground cursor-not-allowed"
+  ) : (
+    // Idle → hover (darker border) → focus (teal accent)
+    "border-border-v2-strong text-foreground-v2 placeholder:text-muted-v2-foreground hover:border-muted-v2-foreground focus-visible:border-accent-v2 focus-visible:ring-accent-v2/30"
+  );
+  const input = /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref,
+      disabled,
+      "aria-invalid": hasError || void 0,
+      className: cn(
+        "w-full rounded-md border bg-background-v2 transition-colors",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-0",
+        SIZE_CLASSES[inputSize],
+        padClass,
+        baseStateClasses,
+        className
+      ),
+      ...props
+    }
+  );
+  if (!leftAddon && !rightAddon) return input;
+  return /* @__PURE__ */ jsxs("div", { className: "relative inline-flex w-full items-center", children: [
+    leftAddon ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: cn(
+          "pointer-events-none absolute inset-y-0 left-0 flex items-center text-muted-v2-foreground [&>svg]:h-4 [&>svg]:w-4",
+          inputSize === "sm" ? "pl-2.5" : inputSize === "lg" ? "pl-3.5" : "pl-3"
+        ),
+        children: leftAddon
+      }
+    ) : null,
+    input,
+    rightAddon ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: cn(
+          "pointer-events-none absolute inset-y-0 right-0 flex items-center text-muted-v2-foreground [&>svg]:h-4 [&>svg]:w-4",
+          inputSize === "sm" ? "pr-2.5" : inputSize === "lg" ? "pr-3.5" : "pr-3"
+        ),
+        children: rightAddon
+      }
+    ) : null
+  ] });
+});
+export {
+  Input
+};
+//# sourceMappingURL=Input.js.map

package/dist/primitives-v2/Input.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/primitives-v2/Input.tsx"],
+  "sourcesContent": ["import * as React from 'react'\nimport { cn } from './utils'\n\n/*\n  Figma source: FMS-Componenets \u2192 Input (component-set 147:379).\n\n  State \u00D7 size matrix (extracted per-variant):\n    | State    | Background | Border             | Text content |\n    |----------|-----------|--------------------|--------------|\n    | default  | #FFFFFF   | #D4D4D8            | #71717A (placeholder)\n    | hover    | #FFFFFF   | #A0A0AA            | #18181A\n    | focus    | #FFFFFF   | #0D9488 (teal!)    | #18181A\n    | error    | #FFFFFF   | #E7000B            | #18181A\n    | disabled | #F4F4F5   | #E4E4E7            | #71717A\n\n  Sizes in Figma: sm (h=32) and md (h=36). We add a `lg` (h=40) for\n  parity with Button; not present in Figma.\n\n  Notable: focus border is **teal**, not the navy primary \u2014 a\n  deliberate accent. Reuses `--status-v2-teal-text` from the v2\n  status palette so the focus color stays consistent with Tag's\n  `teczka` variant.\n\n  Text: 13px Geist Regular. Padding 0 12px (sm) / same (md).\n*/\n\nexport type InputSize = 'sm' | 'md' | 'lg'\n\nexport type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & {\n  inputSize?: InputSize\n  /** Marks the input as invalid; border + focus ring switch to destructive. */\n  hasError?: boolean\n  /** Optional element rendered inside the input at the start (icon, currency, \u2026). */\n  leftAddon?: React.ReactNode\n  /** Optional element rendered inside the input at the end. */\n  rightAddon?: React.ReactNode\n}\n\nconst SIZE_CLASSES: Record<InputSize, string> = {\n  sm: 'h-8 text-[13px]',\n  md: 'h-9 text-[13px]',\n  lg: 'h-10 text-sm',\n}\n\nconst PADDING_CLASSES: Record<InputSize, { base: string; left: string; right: string }> = {\n  sm: { base: 'px-3', left: 'pl-9', right: 'pr-9' },\n  md: { base: 'px-3', left: 'pl-9', right: 'pr-9' },\n  lg: { base: 'px-4', left: 'pl-10', right: 'pr-10' },\n}\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(function Input(\n  { inputSize = 'md', hasError = false, leftAddon, rightAddon, className, disabled, ...props },\n  ref,\n) {\n  const pad = PADDING_CLASSES[inputSize]\n  const padClass = cn(leftAddon ? pad.left : null, rightAddon ? pad.right : null, !leftAddon && !rightAddon ? pad.base : null)\n\n  const baseStateClasses = hasError\n    ? // Error: red border, red focus ring\n      'border-destructive-v2 text-foreground-v2 placeholder:text-muted-v2-foreground focus-visible:border-destructive-v2 focus-visible:ring-destructive-v2/30'\n    : disabled\n      ? // Disabled: muted bg, soft border, no focus\n        'bg-secondary-v2 border-border-v2 text-muted-v2-foreground placeholder:text-muted-v2-foreground cursor-not-allowed'\n      : // Idle \u2192 hover (darker border) \u2192 focus (teal accent)\n        'border-border-v2-strong text-foreground-v2 placeholder:text-muted-v2-foreground hover:border-muted-v2-foreground focus-visible:border-accent-v2 focus-visible:ring-accent-v2/30'\n\n  const input = (\n    <input\n      ref={ref}\n      disabled={disabled}\n      aria-invalid={hasError || undefined}\n      className={cn(\n        'w-full rounded-md border bg-background-v2 transition-colors',\n        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-0',\n        SIZE_CLASSES[inputSize],\n        padClass,\n        baseStateClasses,\n        className,\n      )}\n      {...props}\n    />\n  )\n\n  if (!leftAddon && !rightAddon) return input\n\n  return (\n    <div className=\"relative inline-flex w-full items-center\">\n      {leftAddon ? (\n        <span\n          aria-hidden=\"true\"\n          className={cn(\n            'pointer-events-none absolute inset-y-0 left-0 flex items-center text-muted-v2-foreground [&>svg]:h-4 [&>svg]:w-4',\n            inputSize === 'sm' ? 'pl-2.5' : inputSize === 'lg' ? 'pl-3.5' : 'pl-3',\n          )}\n        >\n          {leftAddon}\n        </span>\n      ) : null}\n      {input}\n      {rightAddon ? (\n        <span\n          aria-hidden=\"true\"\n          className={cn(\n            'pointer-events-none absolute inset-y-0 right-0 flex items-center text-muted-v2-foreground [&>svg]:h-4 [&>svg]:w-4',\n            inputSize === 'sm' ? 'pr-2.5' : inputSize === 'lg' ? 'pr-3.5' : 'pr-3',\n          )}\n        >\n          {rightAddon}\n        </span>\n      ) : null}\n    </div>\n  )\n})\n"],
+  "mappings": "AAmEI,cAmBA,YAnBA;AAnEJ,YAAY,WAAW;AACvB,SAAS,UAAU;AAqCnB,MAAM,eAA0C;AAAA,EAC9C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,kBAAoF;AAAA,EACxF,IAAI,EAAE,MAAM,QAAQ,MAAM,QAAQ,OAAO,OAAO;AAAA,EAChD,IAAI,EAAE,MAAM,QAAQ,MAAM,QAAQ,OAAO,OAAO;AAAA,EAChD,IAAI,EAAE,MAAM,QAAQ,MAAM,SAAS,OAAO,QAAQ;AACpD;AAEO,MAAM,QAAQ,MAAM,WAAyC,SAASA,OAC3E,EAAE,YAAY,MAAM,WAAW,OAAO,WAAW,YAAY,WAAW,UAAU,GAAG,MAAM,GAC3F,KACA;AACA,QAAM,MAAM,gBAAgB,SAAS;AACrC,QAAM,WAAW,GAAG,YAAY,IAAI,OAAO,MAAM,aAAa,IAAI,QAAQ,MAAM,CAAC,aAAa,CAAC,aAAa,IAAI,OAAO,IAAI;AAE3H,QAAM,mBAAmB;AAAA;AAAA,IAErB;AAAA,MACA;AAAA;AAAA,IAEE;AAAA;AAAA;AAAA,IAEA;AAAA;AAEN,QAAM,QACJ;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,gBAAc,YAAY;AAAA,MAC1B,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA,aAAa,SAAS;AAAA,QACtB;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAGF,MAAI,CAAC,aAAa,CAAC,WAAY,QAAO;AAEtC,SACE,qBAAC,SAAI,WAAU,4CACZ;AAAA,gBACC;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ,WAAW;AAAA,UACT;AAAA,UACA,cAAc,OAAO,WAAW,cAAc,OAAO,WAAW;AAAA,QAClE;AAAA,QAEC;AAAA;AAAA,IACH,IACE;AAAA,IACH;AAAA,IACA,aACC;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ,WAAW;AAAA,UACT;AAAA,UACA,cAAc,OAAO,WAAW,cAAc,OAAO,WAAW;AAAA,QAClE;AAAA,QAEC;AAAA;AAAA,IACH,IACE;AAAA,KACN;AAEJ,CAAC;",
+  "names": ["Input"]
+}

package/dist/primitives-v2/Input.stories.js

@@ -0,0 +1,56 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Search } from "lucide-react";
+import { Input } from "./Input.js";
+const meta = {
+  title: "Components/Input",
+  component: Input,
+  parameters: {
+    backgrounds: {
+      default: "figma-surface",
+      values: [{ name: "figma-surface", value: "#F8F8FA" }]
+    },
+    docs: {
+      description: {
+        component: "Figma: FMS-Componenets \u2192 Input (147:379). 5 states \xD7 2 sizes in Figma (we add `lg` for parity with Button). **Focus border is teal `#0D9488`**, not navy \u2014 a deliberate accent. Tab into a field to see it."
+      }
+    }
+  }
+};
+var Input_stories_default = meta;
+const Showcase = {
+  name: "Input",
+  render: () => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-8", children: [
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[100px_repeat(2,_minmax(240px,_auto))] items-center gap-x-4 gap-y-3", children: [
+      /* @__PURE__ */ jsx("span", {}),
+      /* @__PURE__ */ jsx("span", { className: "text-label-semibold-xs uppercase tracking-wider text-status-v2-neutral-text", children: "sm" }),
+      /* @__PURE__ */ jsx("span", { className: "text-label-semibold-xs uppercase tracking-wider text-status-v2-neutral-text", children: "md" }),
+      /* @__PURE__ */ jsx("span", { className: "text-label-medium-md text-foreground-v2", children: "default" }),
+      /* @__PURE__ */ jsx(Input, { inputSize: "sm", placeholder: "Placeholder..." }),
+      /* @__PURE__ */ jsx(Input, { inputSize: "md", placeholder: "Placeholder..." }),
+      /* @__PURE__ */ jsx("span", { className: "text-label-medium-md text-foreground-v2", children: "filled" }),
+      /* @__PURE__ */ jsx(Input, { inputSize: "sm", defaultValue: "Warto\u015B\u0107" }),
+      /* @__PURE__ */ jsx(Input, { inputSize: "md", defaultValue: "Warto\u015B\u0107" }),
+      /* @__PURE__ */ jsx("span", { className: "text-label-medium-md text-foreground-v2", children: "error" }),
+      /* @__PURE__ */ jsx(Input, { inputSize: "sm", defaultValue: "Niepoprawna warto\u015B\u0107", hasError: true }),
+      /* @__PURE__ */ jsx(Input, { inputSize: "md", defaultValue: "Niepoprawna warto\u015B\u0107", hasError: true }),
+      /* @__PURE__ */ jsx("span", { className: "text-label-medium-md text-foreground-v2", children: "disabled" }),
+      /* @__PURE__ */ jsx(Input, { inputSize: "sm", defaultValue: "Wy\u0142\u0105czone", disabled: true }),
+      /* @__PURE__ */ jsx(Input, { inputSize: "md", defaultValue: "Wy\u0142\u0105czone", disabled: true })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex w-[420px] flex-col gap-3", children: [
+      /* @__PURE__ */ jsx(Input, { placeholder: "Szukaj kontrahenta\u2026", leftAddon: /* @__PURE__ */ jsx(Search, {}) }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          defaultValue: "12 450,00",
+          rightAddon: /* @__PURE__ */ jsx("span", { className: "text-body-regular-sm text-muted-v2-foreground", children: "PLN" })
+        }
+      )
+    ] })
+  ] })
+};
+export {
+  Showcase,
+  Input_stories_default as default
+};
+//# sourceMappingURL=Input.stories.js.map

package/dist/primitives-v2/Input.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/primitives-v2/Input.stories.tsx"],
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react-vite'\nimport { Search } from 'lucide-react'\nimport { Input } from './Input'\n\nconst meta: Meta<typeof Input> = {\n  title: 'Components/Input',\n  component: Input,\n  parameters: {\n    backgrounds: {\n      default: 'figma-surface',\n      values: [{ name: 'figma-surface', value: '#F8F8FA' }],\n    },\n    docs: {\n      description: {\n        component:\n          'Figma: FMS-Componenets \u2192 Input (147:379). 5 states \u00D7 2 sizes in Figma (we add `lg` for parity with Button). **Focus border is teal `#0D9488`**, not navy \u2014 a deliberate accent. Tab into a field to see it.',\n      },\n    },\n  },\n}\n\nexport default meta\n\ntype Story = StoryObj<typeof Input>\n\nexport const Showcase: Story = {\n  name: 'Input',\n  render: () => (\n    <div className=\"flex flex-col gap-8\">\n      <div className=\"grid grid-cols-[100px_repeat(2,_minmax(240px,_auto))] items-center gap-x-4 gap-y-3\">\n        <span />\n        <span className=\"text-label-semibold-xs uppercase tracking-wider text-status-v2-neutral-text\">sm</span>\n        <span className=\"text-label-semibold-xs uppercase tracking-wider text-status-v2-neutral-text\">md</span>\n\n        <span className=\"text-label-medium-md text-foreground-v2\">default</span>\n        <Input inputSize=\"sm\" placeholder=\"Placeholder...\" />\n        <Input inputSize=\"md\" placeholder=\"Placeholder...\" />\n\n        <span className=\"text-label-medium-md text-foreground-v2\">filled</span>\n        <Input inputSize=\"sm\" defaultValue=\"Warto\u015B\u0107\" />\n        <Input inputSize=\"md\" defaultValue=\"Warto\u015B\u0107\" />\n\n        <span className=\"text-label-medium-md text-foreground-v2\">error</span>\n        <Input inputSize=\"sm\" defaultValue=\"Niepoprawna warto\u015B\u0107\" hasError />\n        <Input inputSize=\"md\" defaultValue=\"Niepoprawna warto\u015B\u0107\" hasError />\n\n        <span className=\"text-label-medium-md text-foreground-v2\">disabled</span>\n        <Input inputSize=\"sm\" defaultValue=\"Wy\u0142\u0105czone\" disabled />\n        <Input inputSize=\"md\" defaultValue=\"Wy\u0142\u0105czone\" disabled />\n      </div>\n      <div className=\"flex w-[420px] flex-col gap-3\">\n        <Input placeholder=\"Szukaj kontrahenta\u2026\" leftAddon={<Search />} />\n        <Input\n          defaultValue=\"12 450,00\"\n          rightAddon={<span className=\"text-body-regular-sm text-muted-v2-foreground\">PLN</span>}\n        />\n      </div>\n    </div>\n  ),\n}\n"],
+  "mappings": "AA6BM,SACE,KADF;AA5BN,SAAS,cAAc;AACvB,SAAS,aAAa;AAEtB,MAAM,OAA2B;AAAA,EAC/B,OAAO;AAAA,EACP,WAAW;AAAA,EACX,YAAY;AAAA,IACV,aAAa;AAAA,MACX,SAAS;AAAA,MACT,QAAQ,CAAC,EAAE,MAAM,iBAAiB,OAAO,UAAU,CAAC;AAAA,IACtD;AAAA,IACA,MAAM;AAAA,MACJ,aAAa;AAAA,QACX,WACE;AAAA,MACJ;AAAA,IACF;AAAA,EACF;AACF;AAEA,IAAO,wBAAQ;AAIR,MAAM,WAAkB;AAAA,EAC7B,MAAM;AAAA,EACN,QAAQ,MACN,qBAAC,SAAI,WAAU,uBACb;AAAA,yBAAC,SAAI,WAAU,sFACb;AAAA,0BAAC,UAAK;AAAA,MACN,oBAAC,UAAK,WAAU,+EAA8E,gBAAE;AAAA,MAChG,oBAAC,UAAK,WAAU,+EAA8E,gBAAE;AAAA,MAEhG,oBAAC,UAAK,WAAU,2CAA0C,qBAAO;AAAA,MACjE,oBAAC,SAAM,WAAU,MAAK,aAAY,kBAAiB;AAAA,MACnD,oBAAC,SAAM,WAAU,MAAK,aAAY,kBAAiB;AAAA,MAEnD,oBAAC,UAAK,WAAU,2CAA0C,oBAAM;AAAA,MAChE,oBAAC,SAAM,WAAU,MAAK,cAAa,qBAAU;AAAA,MAC7C,oBAAC,SAAM,WAAU,MAAK,cAAa,qBAAU;AAAA,MAE7C,oBAAC,UAAK,WAAU,2CAA0C,mBAAK;AAAA,MAC/D,oBAAC,SAAM,WAAU,MAAK,cAAa,iCAAsB,UAAQ,MAAC;AAAA,MAClE,oBAAC,SAAM,WAAU,MAAK,cAAa,iCAAsB,UAAQ,MAAC;AAAA,MAElE,oBAAC,UAAK,WAAU,2CAA0C,sBAAQ;AAAA,MAClE,oBAAC,SAAM,WAAU,MAAK,cAAa,uBAAY,UAAQ,MAAC;AAAA,MACxD,oBAAC,SAAM,WAAU,MAAK,cAAa,uBAAY,UAAQ,MAAC;AAAA,OAC1D;AAAA,IACA,qBAAC,SAAI,WAAU,iCACb;AAAA,0BAAC,SAAM,aAAY,4BAAsB,WAAW,oBAAC,UAAO,GAAI;AAAA,MAChE;AAAA,QAAC;AAAA;AAAA,UACC,cAAa;AAAA,UACb,YAAY,oBAAC,UAAK,WAAU,iDAAgD,iBAAG;AAAA;AAAA,MACjF;AAAA,OACF;AAAA,KACF;AAEJ;",
+  "names": []
+}

package/dist/primitives-v2/NavGroup.js

@@ -0,0 +1,54 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ChevronDown as LucideChevronDown } from "lucide-react";
+import { cn } from "./utils.js";
+const ChevronDown = () => /* @__PURE__ */ jsx(LucideChevronDown, { "aria-hidden": "true", className: "h-3 w-3" });
+function NavGroup({
+  title,
+  defaultCollapsed = false,
+  collapsed,
+  onCollapse,
+  className,
+  children,
+  ...props
+}) {
+  const [internalCollapsed, setInternalCollapsed] = React.useState(defaultCollapsed);
+  const isCollapsed = collapsed !== void 0 ? collapsed : internalCollapsed;
+  const toggle = () => {
+    const next = !isCollapsed;
+    if (collapsed === void 0) setInternalCollapsed(next);
+    onCollapse?.(next);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex w-full flex-col gap-1", className), ...props, children: [
+    title ? /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: toggle,
+        "aria-expanded": !isCollapsed,
+        className: cn(
+          "group/navgroup mx-2 inline-flex items-center justify-between rounded-sm px-1 py-1",
+          "text-body-regular-xs uppercase tracking-wider text-sidebar-v2-muted",
+          "hover:text-sidebar-v2-foreground transition-colors",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-v2 focus-visible:ring-offset-1"
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { children: title }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: cn("inline-flex transition-transform", isCollapsed ? "rotate-0" : "rotate-180"),
+              children: /* @__PURE__ */ jsx(ChevronDown, {})
+            }
+          )
+        ]
+      }
+    ) : null,
+    !isCollapsed ? /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0.5", children }) : null
+  ] });
+}
+export {
+  NavGroup
+};
+//# sourceMappingURL=NavGroup.js.map

package/dist/primitives-v2/NavGroup.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/primitives-v2/NavGroup.tsx"],
+  "sourcesContent": ["import * as React from 'react'\nimport { ChevronDown as LucideChevronDown } from 'lucide-react'\nimport { cn } from './utils'\n\n/*\n  Figma source: FMS-Componenets \u2192 NavGroup (component-set 72:154).\n  Figma encodes membership as 10 boolean `itemN_show` props. We\n  collapse that to a single React composition: pass `NavItem`s (or\n  any nodes) as children. State (expanded / collapsed) is exposed as\n  `defaultCollapsed` for uncontrolled use and `collapsed`/`onCollapse`\n  for controlled use.\n\n  Title row is optional. When present, it acts as the toggle.\n*/\n\nexport type NavGroupProps = React.HTMLAttributes<HTMLDivElement> & {\n  /** Group section label (uppercase, small). Falls back to children-only layout when omitted. */\n  title?: React.ReactNode\n  /** Default collapsed state for uncontrolled use. */\n  defaultCollapsed?: boolean\n  /** Controlled collapsed state \u2014 pair with `onCollapse`. */\n  collapsed?: boolean\n  onCollapse?: (next: boolean) => void\n}\n\nconst ChevronDown = () => <LucideChevronDown aria-hidden=\"true\" className=\"h-3 w-3\" />\n\nexport function NavGroup({\n  title,\n  defaultCollapsed = false,\n  collapsed,\n  onCollapse,\n  className,\n  children,\n  ...props\n}: NavGroupProps) {\n  const [internalCollapsed, setInternalCollapsed] = React.useState(defaultCollapsed)\n  const isCollapsed = collapsed !== undefined ? collapsed : internalCollapsed\n\n  const toggle = () => {\n    const next = !isCollapsed\n    if (collapsed === undefined) setInternalCollapsed(next)\n    onCollapse?.(next)\n  }\n\n  return (\n    <div className={cn('flex w-full flex-col gap-1', className)} {...props}>\n      {title ? (\n        <button\n          type=\"button\"\n          onClick={toggle}\n          aria-expanded={!isCollapsed}\n          className={cn(\n            'group/navgroup mx-2 inline-flex items-center justify-between rounded-sm px-1 py-1',\n            'text-body-regular-xs uppercase tracking-wider text-sidebar-v2-muted',\n            'hover:text-sidebar-v2-foreground transition-colors',\n            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-v2 focus-visible:ring-offset-1',\n          )}\n        >\n          <span>{title}</span>\n          {/*\n            Chevron points UP when expanded (click-to-collapse hint), DOWN when collapsed.\n            Matches the Figma \"NavGroup \u2014 state (expanded / collapsed)\" interaction model.\n          */}\n          <span\n            aria-hidden=\"true\"\n            className={cn('inline-flex transition-transform', isCollapsed ? 'rotate-0' : 'rotate-180')}\n          >\n            <ChevronDown />\n          </span>\n        </button>\n      ) : null}\n      {!isCollapsed ? <div className=\"flex flex-col gap-0.5\">{children}</div> : null}\n    </div>\n  )\n}\n"],
+  "mappings": "AAyB0B,cAuBlB,YAvBkB;AAzB1B,YAAY,WAAW;AACvB,SAAS,eAAe,yBAAyB;AACjD,SAAS,UAAU;AAuBnB,MAAM,cAAc,MAAM,oBAAC,qBAAkB,eAAY,QAAO,WAAU,WAAU;AAE7E,SAAS,SAAS;AAAA,EACvB;AAAA,EACA,mBAAmB;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAkB;AAChB,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,MAAM,SAAS,gBAAgB;AACjF,QAAM,cAAc,cAAc,SAAY,YAAY;AAE1D,QAAM,SAAS,MAAM;AACnB,UAAM,OAAO,CAAC;AACd,QAAI,cAAc,OAAW,sBAAqB,IAAI;AACtD,iBAAa,IAAI;AAAA,EACnB;AAEA,SACE,qBAAC,SAAI,WAAW,GAAG,8BAA8B,SAAS,GAAI,GAAG,OAC9D;AAAA,YACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,iBAAe,CAAC;AAAA,QAChB,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QAEA;AAAA,8BAAC,UAAM,iBAAM;AAAA,UAKb;AAAA,YAAC;AAAA;AAAA,cACC,eAAY;AAAA,cACZ,WAAW,GAAG,oCAAoC,cAAc,aAAa,YAAY;AAAA,cAEzF,8BAAC,eAAY;AAAA;AAAA,UACf;AAAA;AAAA;AAAA,IACF,IACE;AAAA,IACH,CAAC,cAAc,oBAAC,SAAI,WAAU,yBAAyB,UAAS,IAAS;AAAA,KAC5E;AAEJ;",
+  "names": []
+}