@freighttech/ui 0.13.18

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

@@ -0,0 +1,51 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Tab, TabBar } from "./Tab.js";
+const meta = {
+  title: "Components/Tab",
+  component: Tab,
+  parameters: {
+    backgrounds: {
+      default: "figma-surface",
+      values: [{ name: "figma-surface", value: "#F8F8FA" }]
+    },
+    docs: {
+      description: {
+        component: "Figma: FMS-Componenets \u2192 Tab (45:90) and TabBar (183:453). Active tab uses the teal `--accent-v2` (`#0D9488`) as an underline overlapping the TabBar baseline."
+      }
+    }
+  }
+};
+var Tab_stories_default = meta;
+const Showcase = {
+  name: "Tab",
+  render: () => {
+    const [a, setA] = React.useState("details");
+    const [b, setB] = React.useState("docs");
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-8 px-6", children: [
+      /* @__PURE__ */ jsxs(TabBar, { value: a, onChange: setA, ariaLabel: "Tabs", children: [
+        /* @__PURE__ */ jsx(Tab, { value: "details", children: "Szczeg\xF3\u0142y" }),
+        /* @__PURE__ */ jsx(Tab, { value: "cargo", children: "\u0141adunek" }),
+        /* @__PURE__ */ jsx(Tab, { value: "docs", children: "Dokumenty" }),
+        /* @__PURE__ */ jsx(Tab, { value: "costs", children: "Koszty" }),
+        /* @__PURE__ */ jsx(Tab, { value: "timeline", children: "O\u015B czasu" })
+      ] }),
+      /* @__PURE__ */ jsxs(TabBar, { value: b, onChange: setB, ariaLabel: "Tabs with badges", children: [
+        /* @__PURE__ */ jsx(Tab, { value: "details", children: "Szczeg\xF3\u0142y" }),
+        /* @__PURE__ */ jsx(Tab, { value: "cargo", badge: "3", children: "\u0141adunek" }),
+        /* @__PURE__ */ jsx(Tab, { value: "docs", badge: "12", children: "Dokumenty" }),
+        /* @__PURE__ */ jsx(Tab, { value: "costs", badge: "0", children: "Koszty" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-6 border-b border-border-v2 px-0 py-2", children: [
+        /* @__PURE__ */ jsx(Tab, { children: "Default" }),
+        /* @__PURE__ */ jsx(Tab, { isActive: true, children: "Active" }),
+        /* @__PURE__ */ jsx(Tab, { disabled: true, children: "Disabled" })
+      ] })
+    ] });
+  }
+};
+export {
+  Showcase,
+  Tab_stories_default as default
+};
+//# sourceMappingURL=Tab.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/primitives-v2/Tab.stories.tsx"],
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react-vite'\nimport * as React from 'react'\nimport { Tab, TabBar } from './Tab'\n\nconst meta: Meta<typeof Tab> = {\n  title: 'Components/Tab',\n  component: Tab,\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 Tab (45:90) and TabBar (183:453). Active tab uses the teal `--accent-v2` (`#0D9488`) as an underline overlapping the TabBar baseline.',\n      },\n    },\n  },\n}\n\nexport default meta\n\ntype Story = StoryObj<typeof Tab>\n\nexport const Showcase: Story = {\n  name: 'Tab',\n  render: () => {\n    const [a, setA] = React.useState('details')\n    const [b, setB] = React.useState('docs')\n    return (\n      <div className=\"flex flex-col gap-8 px-6\">\n        <TabBar value={a} onChange={setA} ariaLabel=\"Tabs\">\n          <Tab value=\"details\">Szczeg\u00F3\u0142y</Tab>\n          <Tab value=\"cargo\">\u0141adunek</Tab>\n          <Tab value=\"docs\">Dokumenty</Tab>\n          <Tab value=\"costs\">Koszty</Tab>\n          <Tab value=\"timeline\">O\u015B czasu</Tab>\n        </TabBar>\n\n        <TabBar value={b} onChange={setB} ariaLabel=\"Tabs with badges\">\n          <Tab value=\"details\">Szczeg\u00F3\u0142y</Tab>\n          <Tab value=\"cargo\" badge=\"3\">\n            \u0141adunek\n          </Tab>\n          <Tab value=\"docs\" badge=\"12\">\n            Dokumenty\n          </Tab>\n          <Tab value=\"costs\" badge=\"0\">\n            Koszty\n          </Tab>\n        </TabBar>\n\n        <div className=\"flex items-end gap-6 border-b border-border-v2 px-0 py-2\">\n          <Tab>Default</Tab>\n          <Tab isActive>Active</Tab>\n          <Tab disabled>Disabled</Tab>\n        </div>\n      </div>\n    )\n  },\n}\n"],
+  "mappings": "AAgCQ,SACE,KADF;AA/BR,YAAY,WAAW;AACvB,SAAS,KAAK,cAAc;AAE5B,MAAM,OAAyB;AAAA,EAC7B,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,sBAAQ;AAIR,MAAM,WAAkB;AAAA,EAC7B,MAAM;AAAA,EACN,QAAQ,MAAM;AACZ,UAAM,CAAC,GAAG,IAAI,IAAI,MAAM,SAAS,SAAS;AAC1C,UAAM,CAAC,GAAG,IAAI,IAAI,MAAM,SAAS,MAAM;AACvC,WACE,qBAAC,SAAI,WAAU,4BACb;AAAA,2BAAC,UAAO,OAAO,GAAG,UAAU,MAAM,WAAU,QAC1C;AAAA,4BAAC,OAAI,OAAM,WAAU,+BAAS;AAAA,QAC9B,oBAAC,OAAI,OAAM,SAAQ,0BAAO;AAAA,QAC1B,oBAAC,OAAI,OAAM,QAAO,uBAAS;AAAA,QAC3B,oBAAC,OAAI,OAAM,SAAQ,oBAAM;AAAA,QACzB,oBAAC,OAAI,OAAM,YAAW,2BAAQ;AAAA,SAChC;AAAA,MAEA,qBAAC,UAAO,OAAO,GAAG,UAAU,MAAM,WAAU,oBAC1C;AAAA,4BAAC,OAAI,OAAM,WAAU,+BAAS;AAAA,QAC9B,oBAAC,OAAI,OAAM,SAAQ,OAAM,KAAI,0BAE7B;AAAA,QACA,oBAAC,OAAI,OAAM,QAAO,OAAM,MAAK,uBAE7B;AAAA,QACA,oBAAC,OAAI,OAAM,SAAQ,OAAM,KAAI,oBAE7B;AAAA,SACF;AAAA,MAEA,qBAAC,SAAI,WAAU,4DACb;AAAA,4BAAC,OAAI,qBAAO;AAAA,QACZ,oBAAC,OAAI,UAAQ,MAAC,oBAAM;AAAA,QACpB,oBAAC,OAAI,UAAQ,MAAC,sBAAQ;AAAA,SACxB;AAAA,OACF;AAAA,EAEJ;AACF;",
+  "names": []
+}

package/dist/primitives-v2/Tag.js

@@ -0,0 +1,61 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { X } from "lucide-react";
+import { cn } from "./utils.js";
+const VARIANT_CLASSES = {
+  default: "bg-status-v2-neutral-bg border-status-v2-neutral-border text-status-v2-neutral-text",
+  container: "bg-status-v2-primary-bg border-status-v2-primary-border text-status-v2-primary-text",
+  teczka: "bg-status-v2-teal-bg border-status-v2-teal-border text-status-v2-teal-text",
+  success: "bg-status-v2-success-bg border-status-v2-success-border text-status-v2-success-text",
+  error: "bg-status-v2-error-bg border-status-v2-error-border text-status-v2-error-text",
+  warning: "bg-status-v2-warning-bg border-status-v2-warning-border text-status-v2-warning-text",
+  info: "bg-status-v2-info-bg border-status-v2-info-border text-status-v2-info-text",
+  purple: "bg-status-v2-purple-bg border-status-v2-purple-border text-status-v2-purple-text",
+  orange: "bg-status-v2-orange-bg border-status-v2-orange-border text-status-v2-orange-text"
+};
+const SIZE_CLASSES = {
+  sm: "py-[2px] text-label-semibold-xs",
+  md: "py-[3px] text-[13px]"
+};
+const Tag = React.forwardRef(function Tag2({ variant = "default", size = "md", onRemove, removeAriaLabel = "Usu\u0144", leading, className, children, ...props }, ref) {
+  const removable = typeof onRemove === "function";
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref,
+      className: cn(
+        // Tag text is always uppercase — matches the FMS chip convention
+        // (IMPORT / AKTYWNA / LOADED / …). Callers can opt out with
+        // `className="normal-case"` if they ever need raw casing.
+        "inline-flex items-center gap-1 rounded-[6px] border uppercase tracking-wide",
+        SIZE_CLASSES[size],
+        removable ? "pl-2 pr-1.5" : "px-2",
+        VARIANT_CLASSES[variant],
+        className
+      ),
+      ...props,
+      children: [
+        leading != null ? /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0", children: leading }) : null,
+        /* @__PURE__ */ jsx("span", { children }),
+        removable ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onRemove,
+            "aria-label": removeAriaLabel,
+            className: cn(
+              "ml-0.5 inline-flex h-3 w-3 shrink-0 items-center justify-center rounded-sm",
+              "opacity-70 transition-opacity hover:bg-black/5 hover:opacity-100",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current focus-visible:ring-offset-1"
+            ),
+            children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
+          }
+        ) : null
+      ]
+    }
+  );
+});
+export {
+  Tag
+};
+//# sourceMappingURL=Tag.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/primitives-v2/Tag.tsx"],
+  "sourcesContent": ["import * as React from 'react'\nimport { X } from 'lucide-react'\nimport { cn } from './utils'\n\n/*\n  Figma source: FMS-Componenets \u2192 Tag (component-set 46:38).\n\n  Variant matrix (extracted from each variant's `fills`/`strokes`/text fill):\n    | Variant   | Background | Border  | Text    | Notes\n    |-----------|-----------|---------|---------|------\n    | default   | #F4F4F5   | #E4E4E7 | #71717A | gray, generic\n    | container | #E8EEF4   | #C9D9E7 | #18181A | \"kontener\" \u2014 container IDs\n    | teczka    | #CCFBF1   | #99E7D8 | #0D9488 | folder/project IDs\n\n  Plus status-color variants (success / error / warning / info / purple /\n  orange) that reuse the `--status-v2-*` tokens shared with `Badge`. These\n  let callers render a Tag-shaped chip (rectangular w/ 6px radius) for\n  status pills like \"AKTYWNA\" / \"Ready\" / \"Pending\" without falling back\n  to the pill-shaped Badge component. They're additive \u2014 `default` /\n  `container` / `teczka` still match the Figma source exactly.\n\n  Plus a `state` of `default | removable`. Removable adds a trailing\n  \"\u00D7\" close button.\n\n  Layout: gap 4px, padding 3px 8px (default) / 3px 6px 3px 8px (removable),\n  radius 6px (`rounded-[6px]`), text 13px / Geist Regular 400. Matches\n  the FMS Teczka detail mockup's chip \u2014 visible corner roundness but\n  still reads as a rectangular tag rather than a pill at small heights.\n*/\n\nexport type TagVariant =\n  | 'default'\n  | 'container'\n  | 'teczka'\n  | 'success'\n  | 'error'\n  | 'warning'\n  | 'info'\n  | 'purple'\n  | 'orange'\n\n/**\n * `md` (default): Figma source \u2014 13px / 3px padding.\n * `sm`: compact 12px / 2px padding \u2014 matches the in-card \"chip\" pattern\n * from the FMS Teczka detail mockup (e.g. IMPORT / AKTYWNA).\n */\nexport type TagSize = 'sm' | 'md'\n\nexport type TagProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'onSelect'> & {\n  variant?: TagVariant\n  size?: TagSize\n  /** When provided, renders a close \"\u00D7\" button after the children and calls this on click. */\n  onRemove?: (e: React.MouseEvent<HTMLButtonElement>) => void\n  /** Accessible label for the close button. Falls back to \"Usu\u0144\". */\n  removeAriaLabel?: string\n  /** Optional leading element (icon, dot, avatar). */\n  leading?: React.ReactNode\n}\n\nconst VARIANT_CLASSES: Record<TagVariant, string> = {\n  default: 'bg-status-v2-neutral-bg border-status-v2-neutral-border text-status-v2-neutral-text',\n  container: 'bg-status-v2-primary-bg border-status-v2-primary-border text-status-v2-primary-text',\n  teczka: 'bg-status-v2-teal-bg border-status-v2-teal-border text-status-v2-teal-text',\n  success: 'bg-status-v2-success-bg border-status-v2-success-border text-status-v2-success-text',\n  error: 'bg-status-v2-error-bg border-status-v2-error-border text-status-v2-error-text',\n  warning: 'bg-status-v2-warning-bg border-status-v2-warning-border text-status-v2-warning-text',\n  info: 'bg-status-v2-info-bg border-status-v2-info-border text-status-v2-info-text',\n  purple: 'bg-status-v2-purple-bg border-status-v2-purple-border text-status-v2-purple-text',\n  orange: 'bg-status-v2-orange-bg border-status-v2-orange-border text-status-v2-orange-text',\n}\n\nconst SIZE_CLASSES: Record<TagSize, string> = {\n  sm: 'py-[2px] text-label-semibold-xs',\n  md: 'py-[3px] text-[13px]',\n}\n\nexport const Tag = React.forwardRef<HTMLSpanElement, TagProps>(function Tag(\n  { variant = 'default', size = 'md', onRemove, removeAriaLabel = 'Usu\u0144', leading, className, children, ...props },\n  ref,\n) {\n  const removable = typeof onRemove === 'function'\n  return (\n    <span\n      ref={ref}\n      className={cn(\n        // Tag text is always uppercase \u2014 matches the FMS chip convention\n        // (IMPORT / AKTYWNA / LOADED / \u2026). Callers can opt out with\n        // `className=\"normal-case\"` if they ever need raw casing.\n        'inline-flex items-center gap-1 rounded-[6px] border uppercase tracking-wide',\n        SIZE_CLASSES[size],\n        removable ? 'pl-2 pr-1.5' : 'px-2',\n        VARIANT_CLASSES[variant],\n        className,\n      )}\n      {...props}\n    >\n      {leading != null ? <span className=\"inline-flex shrink-0\">{leading}</span> : null}\n      <span>{children}</span>\n      {removable ? (\n        <button\n          type=\"button\"\n          onClick={onRemove}\n          aria-label={removeAriaLabel}\n          className={cn(\n            'ml-0.5 inline-flex h-3 w-3 shrink-0 items-center justify-center rounded-sm',\n            'opacity-70 transition-opacity hover:bg-black/5 hover:opacity-100',\n            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current focus-visible:ring-offset-1',\n          )}\n        >\n          <X className=\"h-3 w-3\" />\n        </button>\n      ) : null}\n    </span>\n  )\n})\n"],
+  "mappings": "AAkFI,SAcqB,KAdrB;AAlFJ,YAAY,WAAW;AACvB,SAAS,SAAS;AAClB,SAAS,UAAU;AAyDnB,MAAM,kBAA8C;AAAA,EAClD,SAAS;AAAA,EACT,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AACV;AAEA,MAAM,eAAwC;AAAA,EAC5C,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,MAAM,MAAM,MAAM,WAAsC,SAASA,KACtE,EAAE,UAAU,WAAW,OAAO,MAAM,UAAU,kBAAkB,aAAQ,SAAS,WAAW,UAAU,GAAG,MAAM,GAC/G,KACA;AACA,QAAM,YAAY,OAAO,aAAa;AACtC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA;AAAA;AAAA;AAAA,QAIT;AAAA,QACA,aAAa,IAAI;AAAA,QACjB,YAAY,gBAAgB;AAAA,QAC5B,gBAAgB,OAAO;AAAA,QACvB;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,mBAAW,OAAO,oBAAC,UAAK,WAAU,wBAAwB,mBAAQ,IAAU;AAAA,QAC7E,oBAAC,UAAM,UAAS;AAAA,QACf,YACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS;AAAA,YACT,cAAY;AAAA,YACZ,WAAW;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,YACF;AAAA,YAEA,8BAAC,KAAE,WAAU,WAAU;AAAA;AAAA,QACzB,IACE;AAAA;AAAA;AAAA,EACN;AAEJ,CAAC;",
+  "names": ["Tag"]
+}

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

@@ -0,0 +1,121 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Tag } from "./Tag.js";
+const meta = {
+  title: "Components/Tag",
+  component: Tag,
+  parameters: {
+    backgrounds: {
+      default: "figma-surface",
+      values: [{ name: "figma-surface", value: "#F8F8FA" }]
+    },
+    docs: {
+      description: {
+        component: "Figma: FMS-Componenets \u2192 Tag (46:38). Three **identity** variants (`default`, `container`, `teczka`) plus six additive **status-color** variants (`success`, `error`, `warning`, `info`, `purple`, `orange`) that reuse the `--status-v2-*` palette so the same chip shape can render status pills (e.g. `Loaded`, `Przeterminowana`). Each can be `removable` via `onRemove`. `size`: `sm` (12 px / 2 px padding \u2014 used in dense rows) or `md` (13 px / 3 px \u2014 the Figma default)."
+      }
+    }
+  }
+};
+var Tag_stories_default = meta;
+const Showcase = {
+  name: "All variants",
+  render: () => /* @__PURE__ */ jsxs("div", { className: "space-y-8", children: [
+    /* @__PURE__ */ jsxs(
+      Section,
+      {
+        title: "Identity (Figma source)",
+        subtitle: "default \xB7 container \xB7 teczka \u2014 paired with their removable state",
+        children: [
+          /* @__PURE__ */ jsxs(Row, { label: "default", children: [
+            /* @__PURE__ */ jsx(Tag, { variant: "default", children: "FCL 40'" }),
+            /* @__PURE__ */ jsx(Tag, { variant: "default", onRemove: () => {
+            }, children: "FCL 40'" })
+          ] }),
+          /* @__PURE__ */ jsxs(Row, { label: "container", children: [
+            /* @__PURE__ */ jsx(Tag, { variant: "container", children: "MSCU7234561" }),
+            /* @__PURE__ */ jsx(Tag, { variant: "container", onRemove: () => {
+            }, children: "MSCU7234561" })
+          ] }),
+          /* @__PURE__ */ jsxs(Row, { label: "teczka", children: [
+            /* @__PURE__ */ jsx(Tag, { variant: "teczka", children: "SPOL-2025-041" }),
+            /* @__PURE__ */ jsx(Tag, { variant: "teczka", onRemove: () => {
+            }, children: "SPOL-2025-041" })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Section,
+      {
+        title: "Status colors (additive)",
+        subtitle: "Reuse the `--status-v2-*` palette so the same chip shape covers status pills.",
+        children: [
+          /* @__PURE__ */ jsxs(Row, { label: "success", children: [
+            /* @__PURE__ */ jsx(Tag, { variant: "success", children: "Za\u0142adowany" }),
+            /* @__PURE__ */ jsx(Tag, { variant: "success", size: "sm", children: "Zap\u0142acona" })
+          ] }),
+          /* @__PURE__ */ jsxs(Row, { label: "error", children: [
+            /* @__PURE__ */ jsx(Tag, { variant: "error", children: "Przeterminowana" }),
+            /* @__PURE__ */ jsx(Tag, { variant: "error", size: "sm", children: "Failed" })
+          ] }),
+          /* @__PURE__ */ jsxs(Row, { label: "warning", children: [
+            /* @__PURE__ */ jsx(Tag, { variant: "warning", children: "Oczekuje" }),
+            /* @__PURE__ */ jsx(Tag, { variant: "warning", size: "sm", children: "Partial" })
+          ] }),
+          /* @__PURE__ */ jsxs(Row, { label: "info", children: [
+            /* @__PURE__ */ jsx(Tag, { variant: "info", children: "Planowanie" }),
+            /* @__PURE__ */ jsx(Tag, { variant: "info", size: "sm", children: "Estimated" })
+          ] }),
+          /* @__PURE__ */ jsxs(Row, { label: "purple", children: [
+            /* @__PURE__ */ jsx(Tag, { variant: "purple", children: "Estimated" }),
+            /* @__PURE__ */ jsx(Tag, { variant: "purple", size: "sm", children: "Invoiced" })
+          ] }),
+          /* @__PURE__ */ jsxs(Row, { label: "orange", children: [
+            /* @__PURE__ */ jsx(Tag, { variant: "orange", children: "Partially Delivered" }),
+            /* @__PURE__ */ jsx(Tag, { variant: "orange", size: "sm", children: "In Transit" })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Section,
+      {
+        title: "Size",
+        subtitle: "`md` (Figma default, 13 px / 3 px padding) vs `sm` (compact, 12 px / 2 px padding).",
+        children: [
+          /* @__PURE__ */ jsxs(Row, { label: "md", children: [
+            /* @__PURE__ */ jsx(Tag, { variant: "default", size: "md", children: "IMPORT" }),
+            /* @__PURE__ */ jsx(Tag, { variant: "success", size: "md", children: "Za\u0142adowany" }),
+            /* @__PURE__ */ jsx(Tag, { variant: "container", size: "md", children: "MSCU7234561" })
+          ] }),
+          /* @__PURE__ */ jsxs(Row, { label: "sm", children: [
+            /* @__PURE__ */ jsx(Tag, { variant: "default", size: "sm", children: "IMPORT" }),
+            /* @__PURE__ */ jsx(Tag, { variant: "success", size: "sm", children: "Za\u0142adowany" }),
+            /* @__PURE__ */ jsx(Tag, { variant: "container", size: "sm", children: "MSCU7234561" })
+          ] })
+        ]
+      }
+    )
+  ] })
+};
+function Section({
+  title,
+  subtitle,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("h3", { className: "text-heading-semibold-md text-foreground-v2 mb-1", children: title }),
+    /* @__PURE__ */ jsx("p", { className: "text-body-regular-xs text-status-v2-neutral-text mb-3", children: subtitle }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-[100px_minmax(0,1fr)] items-center gap-x-6 gap-y-2.5", children })
+  ] });
+}
+function Row({ label, children }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "text-label-medium-md text-foreground-v2", children: label }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2", children })
+  ] });
+}
+export {
+  Showcase,
+  Tag_stories_default as default
+};
+//# sourceMappingURL=Tag.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/primitives-v2/Tag.stories.tsx"],
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react-vite'\nimport { Tag } from './Tag'\n\nconst meta: Meta<typeof Tag> = {\n  title: 'Components/Tag',\n  component: Tag,\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 Tag (46:38). Three **identity** variants (`default`, `container`, `teczka`) plus six additive **status-color** variants (`success`, `error`, `warning`, `info`, `purple`, `orange`) that reuse the `--status-v2-*` palette so the same chip shape can render status pills (e.g. `Loaded`, `Przeterminowana`). Each can be `removable` via `onRemove`. `size`: `sm` (12 px / 2 px padding \u2014 used in dense rows) or `md` (13 px / 3 px \u2014 the Figma default).',\n      },\n    },\n  },\n}\n\nexport default meta\n\ntype Story = StoryObj<typeof Tag>\n\nexport const Showcase: Story = {\n  name: 'All variants',\n  render: () => (\n    <div className=\"space-y-8\">\n      <Section\n        title=\"Identity (Figma source)\"\n        subtitle=\"default \u00B7 container \u00B7 teczka \u2014 paired with their removable state\"\n      >\n        <Row label=\"default\">\n          <Tag variant=\"default\">FCL 40&apos;</Tag>\n          <Tag variant=\"default\" onRemove={() => {}}>FCL 40&apos;</Tag>\n        </Row>\n        <Row label=\"container\">\n          <Tag variant=\"container\">MSCU7234561</Tag>\n          <Tag variant=\"container\" onRemove={() => {}}>MSCU7234561</Tag>\n        </Row>\n        <Row label=\"teczka\">\n          <Tag variant=\"teczka\">SPOL-2025-041</Tag>\n          <Tag variant=\"teczka\" onRemove={() => {}}>SPOL-2025-041</Tag>\n        </Row>\n      </Section>\n\n      <Section\n        title=\"Status colors (additive)\"\n        subtitle=\"Reuse the `--status-v2-*` palette so the same chip shape covers status pills.\"\n      >\n        <Row label=\"success\">\n          <Tag variant=\"success\">Za\u0142adowany</Tag>\n          <Tag variant=\"success\" size=\"sm\">Zap\u0142acona</Tag>\n        </Row>\n        <Row label=\"error\">\n          <Tag variant=\"error\">Przeterminowana</Tag>\n          <Tag variant=\"error\" size=\"sm\">Failed</Tag>\n        </Row>\n        <Row label=\"warning\">\n          <Tag variant=\"warning\">Oczekuje</Tag>\n          <Tag variant=\"warning\" size=\"sm\">Partial</Tag>\n        </Row>\n        <Row label=\"info\">\n          <Tag variant=\"info\">Planowanie</Tag>\n          <Tag variant=\"info\" size=\"sm\">Estimated</Tag>\n        </Row>\n        <Row label=\"purple\">\n          <Tag variant=\"purple\">Estimated</Tag>\n          <Tag variant=\"purple\" size=\"sm\">Invoiced</Tag>\n        </Row>\n        <Row label=\"orange\">\n          <Tag variant=\"orange\">Partially Delivered</Tag>\n          <Tag variant=\"orange\" size=\"sm\">In Transit</Tag>\n        </Row>\n      </Section>\n\n      <Section\n        title=\"Size\"\n        subtitle=\"`md` (Figma default, 13 px / 3 px padding) vs `sm` (compact, 12 px / 2 px padding).\"\n      >\n        <Row label=\"md\">\n          <Tag variant=\"default\" size=\"md\">IMPORT</Tag>\n          <Tag variant=\"success\" size=\"md\">Za\u0142adowany</Tag>\n          <Tag variant=\"container\" size=\"md\">MSCU7234561</Tag>\n        </Row>\n        <Row label=\"sm\">\n          <Tag variant=\"default\" size=\"sm\">IMPORT</Tag>\n          <Tag variant=\"success\" size=\"sm\">Za\u0142adowany</Tag>\n          <Tag variant=\"container\" size=\"sm\">MSCU7234561</Tag>\n        </Row>\n      </Section>\n    </div>\n  ),\n}\n\nfunction Section({\n  title,\n  subtitle,\n  children,\n}: {\n  title: string\n  subtitle: string\n  children: React.ReactNode\n}) {\n  return (\n    <div>\n      <h3 className=\"text-heading-semibold-md text-foreground-v2 mb-1\">{title}</h3>\n      <p className=\"text-body-regular-xs text-status-v2-neutral-text mb-3\">{subtitle}</p>\n      <div className=\"grid grid-cols-[100px_minmax(0,1fr)] items-center gap-x-6 gap-y-2.5\">\n        {children}\n      </div>\n    </div>\n  )\n}\n\nfunction Row({ label, children }: { label: string; children: React.ReactNode }) {\n  return (\n    <>\n      <span className=\"text-label-medium-md text-foreground-v2\">{label}</span>\n      <div className=\"flex flex-wrap items-center gap-2\">{children}</div>\n    </>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/primitives-v2/Toggle.js

@@ -0,0 +1,72 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "./utils.js";
+const TRACK_SIZE = {
+  sm: "h-4 w-7",
+  md: "h-5 w-9"
+};
+const THUMB_SIZE = {
+  sm: "h-3 w-3 translate-x-0.5 peer-checked:translate-x-3.5",
+  md: "h-4 w-4 translate-x-0.5 peer-checked:translate-x-4"
+};
+const Toggle = React.forwardRef(function Toggle2({ toggleSize = "md", label, className, disabled, id, ...props }, ref) {
+  const generatedId = React.useId();
+  const inputId = id ?? generatedId;
+  const control = /* @__PURE__ */ jsxs("span", { className: "relative inline-flex shrink-0 items-center", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        id: inputId,
+        type: "checkbox",
+        role: "switch",
+        disabled,
+        className: "peer sr-only",
+        ...props
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: cn(
+          "inline-flex shrink-0 cursor-pointer rounded-full bg-border-v2 transition-colors",
+          TRACK_SIZE[toggleSize],
+          "peer-checked:bg-accent-v2",
+          "peer-focus-visible:ring-2 peer-focus-visible:ring-accent-v2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-offset-background-v2",
+          "peer-disabled:cursor-not-allowed peer-disabled:opacity-50"
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: cn(
+          "pointer-events-none absolute top-1/2 -translate-y-1/2 rounded-full bg-background-v2 shadow-sm transition-transform",
+          THUMB_SIZE[toggleSize]
+        )
+      }
+    )
+  ] });
+  if (label == null) return control;
+  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: [
+        control,
+        /* @__PURE__ */ jsx("span", { className: "select-none", children: label })
+      ]
+    }
+  );
+});
+export {
+  Toggle
+};
+//# sourceMappingURL=Toggle.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/primitives-v2/Toggle.tsx"],
+  "sourcesContent": ["import * as React from 'react'\nimport { cn } from './utils'\n\n/*\n  Figma source: FMS-Componenets \u2192 Toggle (component-set 45:80).\n  Colours verified by visual diff against the Figma frame (we never\n  walked the Figma variants \u2014 rate-limit hit on the first attempt \u2014\n  but the side-by-side screenshot confirmed teal `#0D9488` is the\n  on-state track, matching Checkbox's checked fill, Input's focus\n  border, and Tag's `teczka` variant. Stored as `--accent-v2`.\n\n    off:       track #E4E4E7, thumb #FFFFFF\n    on:        track #0D9488 (accent), thumb #FFFFFF\n    disabled:  track #F4F4F5, thumb dimmed (via opacity)\n    focus:     accent ring (matches Input / Checkbox)\n\n  Built on `<input type=\"checkbox\" role=\"switch\">` with a styled track\n  + absolute-positioned thumb. Two sizes \u2014 Figma ships one (md); we\n  also expose `sm` for inline / table-row usage.\n*/\n\nexport type ToggleSize = 'sm' | 'md'\n\nexport type ToggleProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> & {\n  toggleSize?: ToggleSize\n  /** Optional label rendered to the right of the switch. */\n  label?: React.ReactNode\n}\n\nconst TRACK_SIZE: Record<ToggleSize, string> = {\n  sm: 'h-4 w-7',\n  md: 'h-5 w-9',\n}\n\nconst THUMB_SIZE: Record<ToggleSize, string> = {\n  sm: 'h-3 w-3 translate-x-0.5 peer-checked:translate-x-3.5',\n  md: 'h-4 w-4 translate-x-0.5 peer-checked:translate-x-4',\n}\n\nexport const Toggle = React.forwardRef<HTMLInputElement, ToggleProps>(function Toggle(\n  { toggleSize = 'md', label, className, disabled, id, ...props },\n  ref,\n) {\n  const generatedId = React.useId()\n  const inputId = id ?? generatedId\n\n  const control = (\n    <span className=\"relative inline-flex shrink-0 items-center\">\n      <input\n        ref={ref}\n        id={inputId}\n        type=\"checkbox\"\n        role=\"switch\"\n        disabled={disabled}\n        className=\"peer sr-only\"\n        {...props}\n      />\n      <span\n        aria-hidden=\"true\"\n        className={cn(\n          'inline-flex shrink-0 cursor-pointer rounded-full bg-border-v2 transition-colors',\n          TRACK_SIZE[toggleSize],\n          'peer-checked:bg-accent-v2',\n          'peer-focus-visible:ring-2 peer-focus-visible:ring-accent-v2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-offset-background-v2',\n          'peer-disabled:cursor-not-allowed peer-disabled:opacity-50',\n        )}\n      />\n      <span\n        aria-hidden=\"true\"\n        className={cn(\n          'pointer-events-none absolute top-1/2 -translate-y-1/2 rounded-full bg-background-v2 shadow-sm transition-transform',\n          THUMB_SIZE[toggleSize],\n        )}\n      />\n    </span>\n  )\n\n  if (label == null) return control\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      {control}\n      <span className=\"select-none\">{label}</span>\n    </label>\n  )\n})\n"],
+  "mappings": "AA+CI,SACE,KADF;AA/CJ,YAAY,WAAW;AACvB,SAAS,UAAU;AA4BnB,MAAM,aAAyC;AAAA,EAC7C,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,aAAyC;AAAA,EAC7C,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,MAAM,SAAS,MAAM,WAA0C,SAASA,QAC7E,EAAE,aAAa,MAAM,OAAO,WAAW,UAAU,IAAI,GAAG,MAAM,GAC9D,KACA;AACA,QAAM,cAAc,MAAM,MAAM;AAChC,QAAM,UAAU,MAAM;AAEtB,QAAM,UACJ,qBAAC,UAAK,WAAU,8CACd;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,IAAI;AAAA,QACJ,MAAK;AAAA,QACL,MAAK;AAAA,QACL;AAAA,QACA,WAAU;AAAA,QACT,GAAG;AAAA;AAAA,IACN;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ,WAAW;AAAA,UACT;AAAA,UACA,WAAW,UAAU;AAAA,UACrB;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ,WAAW;AAAA,UACT;AAAA,UACA,WAAW,UAAU;AAAA,QACvB;AAAA;AAAA,IACF;AAAA,KACF;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": ["Toggle"]
+}

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

@@ -0,0 +1,34 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Toggle } from "./Toggle.js";
+const meta = {
+  title: "Components/Toggle",
+  component: Toggle,
+  parameters: {
+    docs: {
+      description: {
+        component: 'Figma: FMS-Componenets \u2192 Toggle (45:80). Native `<input type="checkbox" role="switch">` with a styled track + thumb. Two sizes \u2014 Figma defines one, we expose `sm` and `md`.'
+      }
+    }
+  }
+};
+var Toggle_stories_default = meta;
+const Showcase = {
+  name: "Toggle",
+  render: () => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsx(Toggle, { label: "Off (default)" }),
+      /* @__PURE__ */ jsx(Toggle, { label: "On", defaultChecked: true }),
+      /* @__PURE__ */ jsx(Toggle, { label: "Disabled (off)", disabled: true }),
+      /* @__PURE__ */ jsx(Toggle, { label: "Disabled (on)", disabled: true, defaultChecked: true })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-6", children: [
+      /* @__PURE__ */ jsx(Toggle, { toggleSize: "sm", label: "Small", defaultChecked: true }),
+      /* @__PURE__ */ jsx(Toggle, { toggleSize: "md", label: "Medium (default)", defaultChecked: true })
+    ] })
+  ] })
+};
+export {
+  Showcase,
+  Toggle_stories_default as default
+};
+//# sourceMappingURL=Toggle.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/primitives-v2/Toggle.stories.tsx"],
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react-vite'\nimport { Toggle } from './Toggle'\n\nconst meta: Meta<typeof Toggle> = {\n  title: 'Components/Toggle',\n  component: Toggle,\n  parameters: {\n    docs: {\n      description: {\n        component:\n          'Figma: FMS-Componenets \u2192 Toggle (45:80). Native `<input type=\"checkbox\" role=\"switch\">` with a styled track + thumb. Two sizes \u2014 Figma defines one, we expose `sm` and `md`.',\n      },\n    },\n  },\n}\n\nexport default meta\n\ntype Story = StoryObj<typeof Toggle>\n\nexport const Showcase: Story = {\n  name: 'Toggle',\n  render: () => (\n    <div className=\"flex flex-col gap-6\">\n      <div className=\"flex flex-col gap-3\">\n        <Toggle label=\"Off (default)\" />\n        <Toggle label=\"On\" defaultChecked />\n        <Toggle label=\"Disabled (off)\" disabled />\n        <Toggle label=\"Disabled (on)\" disabled defaultChecked />\n      </div>\n      <div className=\"flex items-center gap-6\">\n        <Toggle toggleSize=\"sm\" label=\"Small\" defaultChecked />\n        <Toggle toggleSize=\"md\" label=\"Medium (default)\" defaultChecked />\n      </div>\n    </div>\n  ),\n}\n"],
+  "mappings": "AAwBM,SACE,KADF;AAvBN,SAAS,cAAc;AAEvB,MAAM,OAA4B;AAAA,EAChC,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,yBAAQ;AAIR,MAAM,WAAkB;AAAA,EAC7B,MAAM;AAAA,EACN,QAAQ,MACN,qBAAC,SAAI,WAAU,uBACb;AAAA,yBAAC,SAAI,WAAU,uBACb;AAAA,0BAAC,UAAO,OAAM,iBAAgB;AAAA,MAC9B,oBAAC,UAAO,OAAM,MAAK,gBAAc,MAAC;AAAA,MAClC,oBAAC,UAAO,OAAM,kBAAiB,UAAQ,MAAC;AAAA,MACxC,oBAAC,UAAO,OAAM,iBAAgB,UAAQ,MAAC,gBAAc,MAAC;AAAA,OACxD;AAAA,IACA,qBAAC,SAAI,WAAU,2BACb;AAAA,0BAAC,UAAO,YAAW,MAAK,OAAM,SAAQ,gBAAc,MAAC;AAAA,MACrD,oBAAC,UAAO,YAAW,MAAK,OAAM,oBAAmB,gBAAc,MAAC;AAAA,OAClE;AAAA,KACF;AAEJ;",
+  "names": []
+}

package/dist/primitives-v2/Topbar.js

@@ -0,0 +1,24 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "./utils.js";
+function Topbar({ leading, center, trailing, className, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "header",
+    {
+      className: cn(
+        "flex h-13 w-full shrink-0 items-center gap-3 border-b border-border-v2 bg-background-v2 px-6",
+        className
+      ),
+      style: { height: 52 },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: leading }),
+        center ? /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", children: center }) : null,
+        /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", children: trailing })
+      ]
+    }
+  );
+}
+export {
+  Topbar
+};
+//# sourceMappingURL=Topbar.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/primitives-v2/Topbar.tsx"],
+  "sourcesContent": ["import * as React from 'react'\nimport { cn } from './utils'\n\n/*\n  Figma source: FMS-Componenets \u2192 Topbar (component 150:367, 1440\u00D752).\n  Three-slot composition: leading (breadcrumb / page title), center\n  (search / context controls), trailing (org selector / actions /\n  avatar). Height pinned to 52px to match Figma; horizontal padding\n  24px.\n\n  Stays presentation-only \u2014 no router wiring; pass whatever JSX you\n  need into each slot. The Storybook story shows a realistic FMS\n  composition.\n*/\n\nexport type TopbarProps = React.HTMLAttributes<HTMLElement> & {\n  leading?: React.ReactNode\n  center?: React.ReactNode\n  trailing?: React.ReactNode\n}\n\nexport function Topbar({ leading, center, trailing, className, ...props }: TopbarProps) {\n  return (\n    <header\n      className={cn(\n        'flex h-13 w-full shrink-0 items-center gap-3 border-b border-border-v2 bg-background-v2 px-6',\n        className,\n      )}\n      style={{ height: 52 }}\n      {...props}\n    >\n      <div className=\"flex min-w-0 flex-1 items-center gap-3\">{leading}</div>\n      {center ? <div className=\"flex shrink-0 items-center gap-2\">{center}</div> : null}\n      <div className=\"flex shrink-0 items-center gap-2\">{trailing}</div>\n    </header>\n  )\n}\n"],
+  "mappings": "AAuBI,SAQE,KARF;AAtBJ,SAAS,UAAU;AAoBZ,SAAS,OAAO,EAAE,SAAS,QAAQ,UAAU,WAAW,GAAG,MAAM,GAAgB;AACtF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACA,OAAO,EAAE,QAAQ,GAAG;AAAA,MACnB,GAAG;AAAA,MAEJ;AAAA,4BAAC,SAAI,WAAU,0CAA0C,mBAAQ;AAAA,QAChE,SAAS,oBAAC,SAAI,WAAU,oCAAoC,kBAAO,IAAS;AAAA,QAC7E,oBAAC,SAAI,WAAU,oCAAoC,oBAAS;AAAA;AAAA;AAAA,EAC9D;AAEJ;",
+  "names": []
+}

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

@@ -0,0 +1,58 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Bell, CircleHelp, Plus } from "lucide-react";
+import { Topbar } from "./Topbar.js";
+import { Breadcrumb } from "./Breadcrumb.js";
+import { SearchInput } from "./SearchInput.js";
+import { IconButton } from "./IconButton.js";
+import { Avatar } from "./Avatar.js";
+import { Badge } from "./Badge.js";
+import { Button } from "./Button.js";
+const meta = {
+  title: "Components/Topbar",
+  component: Topbar,
+  parameters: {
+    layout: "fullscreen",
+    backgrounds: {
+      default: "figma-surface",
+      values: [{ name: "figma-surface", value: "#F8F8FA" }]
+    },
+    docs: {
+      description: {
+        component: "Figma: FMS-Componenets \u2192 Topbar (150:367 \u2014 1440\xD752). Three slots: `leading`, `center`, `trailing`. Composition of the other components."
+      }
+    }
+  }
+};
+var Topbar_stories_default = meta;
+const Showcase = {
+  name: "Topbar",
+  render: () => /* @__PURE__ */ jsx(
+    Topbar,
+    {
+      leading: /* @__PURE__ */ jsx(
+        Breadcrumb,
+        {
+          items: [
+            { label: "Faktury", href: "/invoices" },
+            { label: "FV/2025/0041" }
+          ]
+        }
+      ),
+      center: /* @__PURE__ */ jsx(SearchInput, { inputSize: "sm", className: "w-[280px]", placeholder: "Szukaj\u2026", shortcut: "\u2318K" }),
+      trailing: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Button, { size: "sm", icon: /* @__PURE__ */ jsx(Plus, {}), children: "Nowa faktura" }),
+        /* @__PURE__ */ jsxs("span", { className: "relative inline-flex", children: [
+          /* @__PURE__ */ jsx(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx(Bell, {}), "aria-label": "Powiadomienia" }),
+          /* @__PURE__ */ jsx("span", { className: "absolute -right-1 -top-1", children: /* @__PURE__ */ jsx(Badge, { variant: "error", size: "sm", children: "3" }) })
+        ] }),
+        /* @__PURE__ */ jsx(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx(CircleHelp, {}), "aria-label": "Pomoc" }),
+        /* @__PURE__ */ jsx(Avatar, { size: "sm", name: "Karolina Firmowe" })
+      ] })
+    }
+  )
+};
+export {
+  Showcase,
+  Topbar_stories_default as default
+};
+//# sourceMappingURL=Topbar.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/primitives-v2/Topbar.stories.tsx"],
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react-vite'\nimport { Bell, CircleHelp, Plus } from 'lucide-react'\nimport { Topbar } from './Topbar'\nimport { Breadcrumb } from './Breadcrumb'\nimport { SearchInput } from './SearchInput'\nimport { IconButton } from './IconButton'\nimport { Avatar } from './Avatar'\nimport { Badge } from './Badge'\nimport { Button } from './Button'\n\nconst meta: Meta<typeof Topbar> = {\n  title: 'Components/Topbar',\n  component: Topbar,\n  parameters: {\n    layout: 'fullscreen',\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 Topbar (150:367 \u2014 1440\u00D752). Three slots: `leading`, `center`, `trailing`. Composition of the other components.',\n      },\n    },\n  },\n}\n\nexport default meta\n\ntype Story = StoryObj<typeof Topbar>\n\nexport const Showcase: Story = {\n  name: 'Topbar',\n  render: () => (\n    <Topbar\n      leading={\n        <Breadcrumb\n          items={[\n            { label: 'Faktury', href: '/invoices' },\n            { label: 'FV/2025/0041' },\n          ]}\n        />\n      }\n      center={<SearchInput inputSize=\"sm\" className=\"w-[280px]\" placeholder=\"Szukaj\u2026\" shortcut=\"\u2318K\" />}\n      trailing={\n        <>\n          <Button size=\"sm\" icon={<Plus />}>\n            Nowa faktura\n          </Button>\n          <span className=\"relative inline-flex\">\n            <IconButton size=\"sm\" icon={<Bell />} aria-label=\"Powiadomienia\" />\n            <span className=\"absolute -right-1 -top-1\">\n              <Badge variant=\"error\" size=\"sm\">\n                3\n              </Badge>\n            </span>\n          </span>\n          <IconButton size=\"sm\" icon={<CircleHelp />} aria-label=\"Pomoc\" />\n          <Avatar size=\"sm\" name=\"Karolina Firmowe\" />\n        </>\n      }\n    />\n  ),\n}\n"],
+  "mappings": "AAqCQ,SASA,UATA,KAaE,YAbF;AApCR,SAAS,MAAM,YAAY,YAAY;AACvC,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AACvB,SAAS,aAAa;AACtB,SAAS,cAAc;AAEvB,MAAM,OAA4B;AAAA,EAChC,OAAO;AAAA,EACP,WAAW;AAAA,EACX,YAAY;AAAA,IACV,QAAQ;AAAA,IACR,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;AAIR,MAAM,WAAkB;AAAA,EAC7B,MAAM;AAAA,EACN,QAAQ,MACN;AAAA,IAAC;AAAA;AAAA,MACC,SACE;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,YACL,EAAE,OAAO,WAAW,MAAM,YAAY;AAAA,YACtC,EAAE,OAAO,eAAe;AAAA,UAC1B;AAAA;AAAA,MACF;AAAA,MAEF,QAAQ,oBAAC,eAAY,WAAU,MAAK,WAAU,aAAY,aAAY,gBAAU,UAAS,WAAK;AAAA,MAC9F,UACE,iCACE;AAAA,4BAAC,UAAO,MAAK,MAAK,MAAM,oBAAC,QAAK,GAAI,0BAElC;AAAA,QACA,qBAAC,UAAK,WAAU,wBACd;AAAA,8BAAC,cAAW,MAAK,MAAK,MAAM,oBAAC,QAAK,GAAI,cAAW,iBAAgB;AAAA,UACjE,oBAAC,UAAK,WAAU,4BACd,8BAAC,SAAM,SAAQ,SAAQ,MAAK,MAAK,eAEjC,GACF;AAAA,WACF;AAAA,QACA,oBAAC,cAAW,MAAK,MAAK,MAAM,oBAAC,cAAW,GAAI,cAAW,SAAQ;AAAA,QAC/D,oBAAC,UAAO,MAAK,MAAK,MAAK,oBAAmB;AAAA,SAC5C;AAAA;AAAA,EAEJ;AAEJ;",
+  "names": []
+}

package/dist/primitives-v2/index.js

@@ -0,0 +1,41 @@
+import { Alert } from "./Alert.js";
+import { Avatar, AvatarStack } from "./Avatar.js";
+import { Badge } from "./Badge.js";
+import { Breadcrumb } from "./Breadcrumb.js";
+import {
+  Button
+} from "./Button.js";
+import { Checkbox } from "./Checkbox.js";
+import { IconButton } from "./IconButton.js";
+import { Input } from "./Input.js";
+import { NavGroup } from "./NavGroup.js";
+import { NavItem } from "./NavItem.js";
+import { SearchInput } from "./SearchInput.js";
+import { Sidebar, SidebarFooter, SidebarHeader } from "./Sidebar.js";
+import { Tab, TabBar } from "./Tab.js";
+import { Tag } from "./Tag.js";
+import { Toggle } from "./Toggle.js";
+import { Topbar } from "./Topbar.js";
+export {
+  Alert,
+  Avatar,
+  AvatarStack,
+  Badge,
+  Breadcrumb,
+  Button,
+  Checkbox,
+  IconButton,
+  Input,
+  NavGroup,
+  NavItem,
+  SearchInput,
+  Sidebar,
+  SidebarFooter,
+  SidebarHeader,
+  Tab,
+  TabBar,
+  Tag,
+  Toggle,
+  Topbar
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/primitives-v2/index.ts"],
+  "sourcesContent": ["/*\n  Public surface of the FMS-Componenets-aligned design-system layer.\n\n  Components live alongside their Storybook stories so designers and\n  engineers see the same artefacts. The legacy primitives under\n  `../primitives/` are kept for Tier-3 backwards compatibility but\n  carry `@deprecated` JSDoc pointing here.\n*/\n\nexport { Alert, type AlertProps, type AlertVariant } from './Alert'\nexport { Avatar, AvatarStack, type AvatarProps, type AvatarSize, type AvatarStackProps } from './Avatar'\nexport { Badge, type BadgeProps, type BadgeSize, type BadgeVariant } from './Badge'\nexport { Breadcrumb, type BreadcrumbItem, type BreadcrumbProps } from './Breadcrumb'\nexport {\n  Button,\n  type ButtonProps,\n  type ButtonVariant,\n  type ButtonSize,\n  type ButtonIconPosition,\n} from './Button'\nexport { Checkbox, type CheckboxProps } from './Checkbox'\nexport { IconButton, type IconButtonProps } from './IconButton'\nexport { Input, type InputProps, type InputSize } from './Input'\nexport { NavGroup, type NavGroupProps } from './NavGroup'\nexport { NavItem, type NavItemProps } from './NavItem'\nexport { SearchInput, type SearchInputProps } from './SearchInput'\nexport { Sidebar, SidebarFooter, SidebarHeader, type SidebarProps, type SidebarHeaderProps, type SidebarFooterProps } from './Sidebar'\nexport { Tab, TabBar, type TabProps, type TabBarProps } from './Tab'\nexport { Tag, type TagProps, type TagVariant } from './Tag'\nexport { Toggle, type ToggleProps, type ToggleSize } from './Toggle'\nexport { Topbar, type TopbarProps } from './Topbar'\n"],
+  "mappings": "AASA,SAAS,aAAiD;AAC1D,SAAS,QAAQ,mBAA6E;AAC9F,SAAS,aAAiE;AAC1E,SAAS,kBAA6D;AACtE;AAAA,EACE;AAAA,OAKK;AACP,SAAS,gBAAoC;AAC7C,SAAS,kBAAwC;AACjD,SAAS,aAA8C;AACvD,SAAS,gBAAoC;AAC7C,SAAS,eAAkC;AAC3C,SAAS,mBAA0C;AACnD,SAAS,SAAS,eAAe,qBAA0F;AAC3H,SAAS,KAAK,cAA+C;AAC7D,SAAS,WAA2C;AACpD,SAAS,cAAiD;AAC1D,SAAS,cAAgC;",
+  "names": []
+}

package/dist/primitives-v2/utils.js

@@ -0,0 +1,7 @@
+function cn(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+export {
+  cn
+};
+//# sourceMappingURL=utils.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/primitives-v2/utils.ts"],
+  "sourcesContent": ["/*\n  Local className concatenation helper. The legacy primitives in\n  `../primitives/` depend on `@open-mercato/shared/lib/utils#cn`, but\n  that subpath isn't in the shared package's `exports` map. The new\n  components in this directory deliberately avoid that coupling.\n*/\nexport function cn(...classes: Array<string | undefined | null | false>): string {\n  return classes.filter(Boolean).join(' ')\n}\n"],
+  "mappings": "AAMO,SAAS,MAAM,SAA2D;AAC/E,SAAO,QAAQ,OAAO,OAAO,EAAE,KAAK,GAAG;AACzC;",
+  "names": []
+}