@freighttech/ui 0.13.18

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

@@ -0,0 +1,39 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Folder, FileText, Truck } from "lucide-react";
+import { NavGroup } from "./NavGroup.js";
+import { NavItem } from "./NavItem.js";
+const meta = {
+  title: "Components/NavGroup",
+  component: NavGroup,
+  parameters: {
+    docs: {
+      description: {
+        component: "Figma: FMS-Componenets \u2192 NavGroup (72:154). Section header + collapsible list of `NavItem`s. Figma's 10 boolean `itemN_show` flags become plain React children \u2014 pass any number of items."
+      }
+    }
+  }
+};
+var NavGroup_stories_default = meta;
+const Showcase = {
+  name: "NavGroup",
+  render: () => /* @__PURE__ */ jsx("div", { className: "w-[240px] rounded-md bg-sidebar-v2 p-2", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsxs(NavGroup, { title: "Workspace", children: [
+      /* @__PURE__ */ jsx(NavItem, { icon: /* @__PURE__ */ jsx(Folder, {}), isActive: true, children: "Pulpit" }),
+      /* @__PURE__ */ jsx(NavItem, { icon: /* @__PURE__ */ jsx(FileText, {}), badge: "3", children: "Powiadomienia" })
+    ] }),
+    /* @__PURE__ */ jsxs(NavGroup, { title: "Operacje", children: [
+      /* @__PURE__ */ jsx(NavItem, { icon: /* @__PURE__ */ jsx(Folder, {}), children: "Teczki" }),
+      /* @__PURE__ */ jsx(NavItem, { icon: /* @__PURE__ */ jsx(FileText, {}), badge: "12", children: "Faktury" }),
+      /* @__PURE__ */ jsx(NavItem, { icon: /* @__PURE__ */ jsx(Truck, {}), children: "Transporty" })
+    ] }),
+    /* @__PURE__ */ jsxs(NavGroup, { title: "Archiwum", defaultCollapsed: true, children: [
+      /* @__PURE__ */ jsx(NavItem, { children: "2024" }),
+      /* @__PURE__ */ jsx(NavItem, { children: "2023" })
+    ] })
+  ] }) })
+};
+export {
+  Showcase,
+  NavGroup_stories_default as default
+};
+//# sourceMappingURL=NavGroup.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/primitives-v2/NavGroup.stories.tsx"],
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react-vite'\nimport { Folder, FileText, Truck } from 'lucide-react'\nimport { NavGroup } from './NavGroup'\nimport { NavItem } from './NavItem'\n\nconst meta: Meta<typeof NavGroup> = {\n  title: 'Components/NavGroup',\n  component: NavGroup,\n  parameters: {\n    docs: {\n      description: {\n        component:\n          'Figma: FMS-Componenets \u2192 NavGroup (72:154). Section header + collapsible list of `NavItem`s. Figma\\'s 10 boolean `itemN_show` flags become plain React children \u2014 pass any number of items.',\n      },\n    },\n  },\n}\n\nexport default meta\n\ntype Story = StoryObj<typeof NavGroup>\n\nexport const Showcase: Story = {\n  name: 'NavGroup',\n  render: () => (\n    <div className=\"w-[240px] rounded-md bg-sidebar-v2 p-2\">\n      <div className=\"flex flex-col gap-3\">\n        <NavGroup title=\"Workspace\">\n          <NavItem icon={<Folder />} isActive>\n            Pulpit\n          </NavItem>\n          <NavItem icon={<FileText />} badge=\"3\">\n            Powiadomienia\n          </NavItem>\n        </NavGroup>\n        <NavGroup title=\"Operacje\">\n          <NavItem icon={<Folder />}>Teczki</NavItem>\n          <NavItem icon={<FileText />} badge=\"12\">\n            Faktury\n          </NavItem>\n          <NavItem icon={<Truck />}>Transporty</NavItem>\n        </NavGroup>\n        <NavGroup title=\"Archiwum\" defaultCollapsed>\n          <NavItem>2024</NavItem>\n          <NavItem>2023</NavItem>\n        </NavGroup>\n      </div>\n    </div>\n  ),\n}\n"],
+  "mappings": "AA2BQ,SACiB,KADjB;AA1BR,SAAS,QAAQ,UAAU,aAAa;AACxC,SAAS,gBAAgB;AACzB,SAAS,eAAe;AAExB,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,oBAAC,SAAI,WAAU,0CACb,+BAAC,SAAI,WAAU,uBACb;AAAA,yBAAC,YAAS,OAAM,aACd;AAAA,0BAAC,WAAQ,MAAM,oBAAC,UAAO,GAAI,UAAQ,MAAC,oBAEpC;AAAA,MACA,oBAAC,WAAQ,MAAM,oBAAC,YAAS,GAAI,OAAM,KAAI,2BAEvC;AAAA,OACF;AAAA,IACA,qBAAC,YAAS,OAAM,YACd;AAAA,0BAAC,WAAQ,MAAM,oBAAC,UAAO,GAAI,oBAAM;AAAA,MACjC,oBAAC,WAAQ,MAAM,oBAAC,YAAS,GAAI,OAAM,MAAK,qBAExC;AAAA,MACA,oBAAC,WAAQ,MAAM,oBAAC,SAAM,GAAI,wBAAU;AAAA,OACtC;AAAA,IACA,qBAAC,YAAS,OAAM,YAAW,kBAAgB,MACzC;AAAA,0BAAC,WAAQ,kBAAI;AAAA,MACb,oBAAC,WAAQ,kBAAI;AAAA,OACf;AAAA,KACF,GACF;AAEJ;",
+  "names": []
+}

package/dist/primitives-v2/NavItem.js

@@ -0,0 +1,61 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "./utils.js";
+const NavItem = React.forwardRef(function NavItem2({ icon, badge, isActive = false, render, className, children, disabled, ...props }, ref) {
+  const baseClass = cn(
+    "group/navitem relative inline-flex w-full items-center gap-2 rounded-lg border border-transparent px-3 py-2 text-body-medium-sm transition-colors",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-v2 focus-visible:ring-offset-1",
+    isActive ? (
+      // Active: white pill with 1px slate/200 border, brand-blue text + icon
+      "bg-sidebar-v2-accent-active text-sidebar-v2-accent-foreground border-sidebar-v2-accent"
+    ) : disabled ? (
+      // Disabled: faded text, no hover
+      "cursor-not-allowed text-sidebar-v2-item-disabled hover:bg-transparent"
+    ) : (
+      // Default + hover: slate-200 pill, slate-600 text
+      "cursor-pointer text-sidebar-v2-item-foreground hover:bg-sidebar-v2-accent"
+    ),
+    className
+  );
+  const iconColorClass = isActive ? "text-sidebar-v2-accent-foreground" : disabled ? "text-sidebar-v2-item-disabled" : "text-sidebar-v2-item-foreground";
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    icon ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: cn("inline-flex h-4 w-4 shrink-0 items-center justify-center", iconColorClass),
+        children: icon
+      }
+    ) : null,
+    /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-left", children }),
+    badge != null ? typeof badge === "string" || typeof badge === "number" ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full bg-sidebar-v2-badge-bg px-1.5 text-label-semibold-xs text-sidebar-v2-badge-foreground",
+          disabled ? "opacity-50" : null
+        ),
+        children: badge
+      }
+    ) : badge : null
+  ] });
+  if (render) {
+    return render({ className: baseClass, children: content });
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      disabled,
+      "aria-current": isActive ? "page" : void 0,
+      className: baseClass,
+      ...props,
+      children: content
+    }
+  );
+});
+export {
+  NavItem
+};
+//# sourceMappingURL=NavItem.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/primitives-v2/NavItem.tsx"],
+  "sourcesContent": ["import * as React from 'react'\nimport { cn } from './utils'\n\n/*\n  Figma source: FMS-Componenets \u2192 NavItem (component-set 60:78), aligned to the\n  current backend Sidebar frame (137:354).\n\n    | State    | Background          | Text                          | Icon                          | Badge\n    |----------|---------------------|-------------------------------|-------------------------------|--------------\n    | default  | transparent         | item-foreground (slate/600)   | item-foreground               | solid blue\n    | hover    | accent (slate/200)  | item-foreground (slate/600)   | item-foreground               | solid blue\n    | active   | white pill + 1px slate/200 border | accent-foreground (blue/700) | accent-foreground (blue/700) | solid blue\n    | disabled | transparent         | item-disabled (slate/500)     | item-disabled (slate/500)     | opacity-50\n\n  Typography is `body/medium/sm` (Figma name) \u2192 `text-body-medium-sm`.\n  The active row is a white pill carrying brand-blue text + icon \u2014 see\n  spec `.ai/specs/2026-05-25-sidebar-redesign.md`. The earlier rail\n  (3px left bar) treatment was removed; pill is the only supported\n  active state. The count badge is a sidebar-specific solid blue pill,\n  not a general-purpose `Badge`.\n\n  Rendered as a polymorphic element: defaults to <button> but accepts\n  a custom element via the `render` callback for Next.js <Link>\n  integration.\n*/\n\nexport type NavItemProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n  icon?: React.ReactNode\n  /** Numeric count rendered on the right. Strings/numbers get the default solid-blue pill; pass a ReactNode to render a custom element. */\n  badge?: React.ReactNode\n  /** Highlight as the currently selected route. */\n  isActive?: boolean\n  /** Render a custom element (e.g. Next's Link) \u2014 return a JSX element that the parent will style. */\n  render?: (props: { className: string; children: React.ReactNode }) => React.ReactElement\n}\n\nexport const NavItem = React.forwardRef<HTMLButtonElement, NavItemProps>(function NavItem(\n  { icon, badge, isActive = false, render, className, children, disabled, ...props },\n  ref,\n) {\n  const baseClass = cn(\n    'group/navitem relative inline-flex w-full items-center gap-2 rounded-lg border border-transparent px-3 py-2 text-body-medium-sm transition-colors',\n    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-v2 focus-visible:ring-offset-1',\n    isActive\n      ? // Active: white pill with 1px slate/200 border, brand-blue text + icon\n        'bg-sidebar-v2-accent-active text-sidebar-v2-accent-foreground border-sidebar-v2-accent'\n      : disabled\n        ? // Disabled: faded text, no hover\n          'cursor-not-allowed text-sidebar-v2-item-disabled hover:bg-transparent'\n        : // Default + hover: slate-200 pill, slate-600 text\n          'cursor-pointer text-sidebar-v2-item-foreground hover:bg-sidebar-v2-accent',\n    className,\n  )\n\n  const iconColorClass = isActive\n    ? 'text-sidebar-v2-accent-foreground'\n    : disabled\n      ? 'text-sidebar-v2-item-disabled'\n      : 'text-sidebar-v2-item-foreground'\n\n  const content = (\n    <>\n      {icon ? (\n        <span\n          aria-hidden=\"true\"\n          className={cn('inline-flex h-4 w-4 shrink-0 items-center justify-center', iconColorClass)}\n        >\n          {icon}\n        </span>\n      ) : null}\n      <span className=\"flex-1 truncate text-left\">{children}</span>\n      {badge != null ? (\n        typeof badge === 'string' || typeof badge === 'number' ? (\n          <span\n            className={cn(\n              'inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full bg-sidebar-v2-badge-bg px-1.5 text-label-semibold-xs text-sidebar-v2-badge-foreground',\n              disabled ? 'opacity-50' : null,\n            )}\n          >\n            {badge}\n          </span>\n        ) : (\n          badge\n        )\n      ) : null}\n    </>\n  )\n\n  if (render) {\n    return render({ className: baseClass, children: content })\n  }\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      disabled={disabled}\n      aria-current={isActive ? 'page' : undefined}\n      className={baseClass}\n      {...props}\n    >\n      {content}\n    </button>\n  )\n})\n"],
+  "mappings": "AA6DI,mBAEI,KAFJ;AA7DJ,YAAY,WAAW;AACvB,SAAS,UAAU;AAmCZ,MAAM,UAAU,MAAM,WAA4C,SAASA,SAChF,EAAE,MAAM,OAAO,WAAW,OAAO,QAAQ,WAAW,UAAU,UAAU,GAAG,MAAM,GACjF,KACA;AACA,QAAM,YAAY;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA;AAAA,MAEI;AAAA,QACA;AAAA;AAAA,MAEE;AAAA;AAAA;AAAA,MAEA;AAAA;AAAA,IACN;AAAA,EACF;AAEA,QAAM,iBAAiB,WACnB,sCACA,WACE,kCACA;AAEN,QAAM,UACJ,iCACG;AAAA,WACC;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ,WAAW,GAAG,4DAA4D,cAAc;AAAA,QAEvF;AAAA;AAAA,IACH,IACE;AAAA,IACJ,oBAAC,UAAK,WAAU,6BAA6B,UAAS;AAAA,IACrD,SAAS,OACR,OAAO,UAAU,YAAY,OAAO,UAAU,WAC5C;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,WAAW,eAAe;AAAA,QAC5B;AAAA,QAEC;AAAA;AAAA,IACH,IAEA,QAEA;AAAA,KACN;AAGF,MAAI,QAAQ;AACV,WAAO,OAAO,EAAE,WAAW,WAAW,UAAU,QAAQ,CAAC;AAAA,EAC3D;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL;AAAA,MACA,gBAAc,WAAW,SAAS;AAAA,MAClC,WAAW;AAAA,MACV,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ,CAAC;",
+  "names": ["NavItem"]
+}

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

@@ -0,0 +1,56 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Folder } from "lucide-react";
+import { NavItem } from "./NavItem.js";
+const meta = {
+  title: "Components/NavItem",
+  component: NavItem,
+  parameters: {
+    backgrounds: {
+      default: "figma-surface",
+      values: [{ name: "figma-surface", value: "#F8F8FA" }]
+    },
+    docs: {
+      description: {
+        component: "Figma: FMS-Componenets \u2192 NavItem (60:78), aligned to the current Sidebar frame. Single row in a sidebar / dropdown / nav list. States: default / hover / active (white pill, brand-blue text + icon) / disabled. Use the `render` prop to integrate with Next's `<Link>` without losing styling."
+      }
+    }
+  }
+};
+var NavItem_stories_default = meta;
+const Showcase = {
+  name: "NavItem",
+  render: () => {
+    const columns = [
+      { label: "default", extraClass: "" },
+      { label: "hover", extraClass: "bg-sidebar-v2-accent" },
+      { label: "active", extraClass: "", isActive: true },
+      { label: "disabled", extraClass: "", disabled: true }
+    ];
+    const rows = [
+      { label: "icon, no badge", icon: /* @__PURE__ */ jsx(Folder, {}), badge: void 0 },
+      { label: "icon + badge", icon: /* @__PURE__ */ jsx(Folder, {}), badge: "12" },
+      { label: "no icon", icon: void 0, badge: void 0 },
+      { label: "no icon + badge", icon: void 0, badge: "12" }
+    ];
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 gap-3 px-1 text-label-semibold-xs uppercase tracking-wider text-status-v2-neutral-text", children: columns.map((c) => /* @__PURE__ */ jsx("span", { children: c.label }, c.label)) }),
+      rows.map((row) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 gap-3 rounded-md bg-sidebar-v2 p-2", children: columns.map((col) => /* @__PURE__ */ jsx(
+        NavItem,
+        {
+          icon: row.icon,
+          badge: row.badge,
+          isActive: "isActive" in col && col.isActive,
+          disabled: "disabled" in col && col.disabled,
+          className: col.extraClass,
+          children: "Nav item"
+        },
+        col.label
+      )) }, row.label))
+    ] });
+  }
+};
+export {
+  Showcase,
+  NavItem_stories_default as default
+};
+//# sourceMappingURL=NavItem.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/primitives-v2/NavItem.stories.tsx"],
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react-vite'\nimport { Folder } from 'lucide-react'\nimport { NavItem } from './NavItem'\n\nconst meta: Meta<typeof NavItem> = {\n  title: 'Components/NavItem',\n  component: NavItem,\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 NavItem (60:78), aligned to the current Sidebar frame. Single row in a sidebar / dropdown / nav list. States: default / hover / active (white pill, brand-blue text + icon) / disabled. Use the `render` prop to integrate with Next\\'s `<Link>` without losing styling.',\n      },\n    },\n  },\n}\n\nexport default meta\n\ntype Story = StoryObj<typeof NavItem>\n\nexport const Showcase: Story = {\n  name: 'NavItem',\n  render: () => {\n    const columns = [\n      { label: 'default', extraClass: '' },\n      { label: 'hover', extraClass: 'bg-sidebar-v2-accent' },\n      { label: 'active', extraClass: '', isActive: true },\n      { label: 'disabled', extraClass: '', disabled: true },\n    ] as const\n    const rows = [\n      { label: 'icon, no badge', icon: <Folder />, badge: undefined as string | undefined },\n      { label: 'icon + badge', icon: <Folder />, badge: '12' },\n      { label: 'no icon', icon: undefined, badge: undefined as string | undefined },\n      { label: 'no icon + badge', icon: undefined, badge: '12' },\n    ]\n    return (\n      <div className=\"space-y-3\">\n        <div className=\"grid grid-cols-4 gap-3 px-1 text-label-semibold-xs uppercase tracking-wider text-status-v2-neutral-text\">\n          {columns.map((c) => (\n            <span key={c.label}>{c.label}</span>\n          ))}\n        </div>\n        {rows.map((row) => (\n          <div key={row.label} className=\"grid grid-cols-4 gap-3 rounded-md bg-sidebar-v2 p-2\">\n            {columns.map((col) => (\n              <NavItem\n                key={col.label}\n                icon={row.icon}\n                badge={row.badge}\n                isActive={'isActive' in col && col.isActive}\n                disabled={'disabled' in col && col.disabled}\n                className={col.extraClass}\n              >\n                Nav item\n              </NavItem>\n            ))}\n          </div>\n        ))}\n      </div>\n    )\n  },\n}\n\n"],
+  "mappings": "AAmCuC,cAMjC,YANiC;AAlCvC,SAAS,cAAc;AACvB,SAAS,eAAe;AAExB,MAAM,OAA6B;AAAA,EACjC,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,0BAAQ;AAIR,MAAM,WAAkB;AAAA,EAC7B,MAAM;AAAA,EACN,QAAQ,MAAM;AACZ,UAAM,UAAU;AAAA,MACd,EAAE,OAAO,WAAW,YAAY,GAAG;AAAA,MACnC,EAAE,OAAO,SAAS,YAAY,uBAAuB;AAAA,MACrD,EAAE,OAAO,UAAU,YAAY,IAAI,UAAU,KAAK;AAAA,MAClD,EAAE,OAAO,YAAY,YAAY,IAAI,UAAU,KAAK;AAAA,IACtD;AACA,UAAM,OAAO;AAAA,MACX,EAAE,OAAO,kBAAkB,MAAM,oBAAC,UAAO,GAAI,OAAO,OAAgC;AAAA,MACpF,EAAE,OAAO,gBAAgB,MAAM,oBAAC,UAAO,GAAI,OAAO,KAAK;AAAA,MACvD,EAAE,OAAO,WAAW,MAAM,QAAW,OAAO,OAAgC;AAAA,MAC5E,EAAE,OAAO,mBAAmB,MAAM,QAAW,OAAO,KAAK;AAAA,IAC3D;AACA,WACE,qBAAC,SAAI,WAAU,aACb;AAAA,0BAAC,SAAI,WAAU,2GACZ,kBAAQ,IAAI,CAAC,MACZ,oBAAC,UAAoB,YAAE,SAAZ,EAAE,KAAgB,CAC9B,GACH;AAAA,MACC,KAAK,IAAI,CAAC,QACT,oBAAC,SAAoB,WAAU,uDAC5B,kBAAQ,IAAI,CAAC,QACZ;AAAA,QAAC;AAAA;AAAA,UAEC,MAAM,IAAI;AAAA,UACV,OAAO,IAAI;AAAA,UACX,UAAU,cAAc,OAAO,IAAI;AAAA,UACnC,UAAU,cAAc,OAAO,IAAI;AAAA,UACnC,WAAW,IAAI;AAAA,UAChB;AAAA;AAAA,QANM,IAAI;AAAA,MAQX,CACD,KAZO,IAAI,KAad,CACD;AAAA,OACH;AAAA,EAEJ;AACF;",
+  "names": []
+}

package/dist/primitives-v2/SearchInput.js

@@ -0,0 +1,93 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Search, X } from "lucide-react";
+import { Input } from "./Input.js";
+import { cn } from "./utils.js";
+const DefaultSearchIcon = () => /* @__PURE__ */ jsx(Search, { "aria-hidden": "true" });
+const CLEAR_PAD = {
+  sm: "pr-9",
+  md: "pr-10",
+  lg: "pr-11"
+};
+const SearchInput = React.forwardRef(function SearchInput2({
+  onClear,
+  searchIcon,
+  shortcut,
+  value,
+  defaultValue,
+  inputSize = "md",
+  placeholder = "Szukaj\u2026",
+  type = "search",
+  className,
+  ...props
+}, ref) {
+  const [internalValue, setInternalValue] = React.useState(
+    defaultValue
+  );
+  const effectiveValue = value !== void 0 ? value : internalValue;
+  const hasValue = !!effectiveValue && String(effectiveValue).length > 0;
+  const showClear = typeof onClear === "function" && hasValue;
+  const showShortcut = !!shortcut && !hasValue;
+  const innerRef = React.useRef(null);
+  React.useImperativeHandle(ref, () => innerRef.current);
+  const handleChange = (e) => {
+    if (value === void 0) setInternalValue(e.target.value);
+    props.onChange?.(e);
+  };
+  return /* @__PURE__ */ jsxs("span", { className: "relative inline-flex w-full items-center", children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        ref: innerRef,
+        type,
+        placeholder,
+        leftAddon: searchIcon ?? /* @__PURE__ */ jsx(DefaultSearchIcon, {}),
+        inputSize,
+        value,
+        defaultValue,
+        onChange: handleChange,
+        className: cn(showClear || showShortcut ? CLEAR_PAD[inputSize] : null, className),
+        ...props
+      }
+    ),
+    showShortcut ? /* @__PURE__ */ jsx(
+      "kbd",
+      {
+        "aria-hidden": "true",
+        className: cn(
+          "pointer-events-none absolute inline-flex items-center justify-center rounded border border-border-v2 bg-secondary-v2 px-1.5 font-mono text-[11px] text-muted-v2-foreground",
+          inputSize === "sm" ? "right-2 h-4" : inputSize === "lg" ? "right-3 h-5" : "right-2.5 h-[18px]"
+        ),
+        children: shortcut
+      }
+    ) : null,
+    showClear ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Wyczy\u015B\u0107 wyszukiwanie",
+        onClick: () => {
+          if (value === void 0) setInternalValue("");
+          if (innerRef.current) {
+            innerRef.current.value = "";
+            const evt = new Event("input", { bubbles: true });
+            innerRef.current.dispatchEvent(evt);
+          }
+          onClear?.();
+          innerRef.current?.focus();
+        },
+        className: cn(
+          "absolute inline-flex items-center justify-center rounded-sm text-muted-v2-foreground",
+          "hover:text-foreground-v2 transition-colors",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-v2 focus-visible:ring-offset-1",
+          inputSize === "sm" ? "right-2.5 h-4 w-4" : inputSize === "lg" ? "right-3.5 h-5 w-5" : "right-3 h-4 w-4"
+        ),
+        children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5" })
+      }
+    ) : null
+  ] });
+});
+export {
+  SearchInput
+};
+//# sourceMappingURL=SearchInput.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/primitives-v2/SearchInput.tsx"],
+  "sourcesContent": ["import * as React from 'react'\nimport { Search, X } from 'lucide-react'\nimport { Input, type InputProps, type InputSize } from './Input'\nimport { cn } from './utils'\n\n/*\n  Figma source: FMS-Componenets \u2192 SearchInput (component-set 149:375).\n  State variants: default / focus / typing (with clear button) / disabled.\n\n  Built as a thin specialization of `Input` so size/error/focus\n  semantics stay consistent. Renders a search icon on the left and a\n  clear \"\u00D7\" button on the right whenever the value is non-empty (and\n  `onClear` is provided).\n*/\n\nexport type SearchInputProps = Omit<InputProps, 'leftAddon' | 'rightAddon'> & {\n  /** Called when the user clicks the inline clear button. */\n  onClear?: () => void\n  /** Override the default search icon. */\n  searchIcon?: React.ReactNode\n  /**\n   * Optional keyboard shortcut hint rendered as a `<kbd>` pill on the\n   * right side of the input when there's no value (Figma's `\u2318K`\n   * pattern). Hidden automatically while typing so the clear button\n   * has room.\n   */\n  shortcut?: React.ReactNode\n}\n\nconst DefaultSearchIcon = () => <Search aria-hidden=\"true\" />\n\n\nconst CLEAR_PAD: Record<InputSize, string> = {\n  sm: 'pr-9',\n  md: 'pr-10',\n  lg: 'pr-11',\n}\n\nexport const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(function SearchInput(\n  {\n    onClear,\n    searchIcon,\n    shortcut,\n    value,\n    defaultValue,\n    inputSize = 'md',\n    placeholder = 'Szukaj\u2026',\n    type = 'search',\n    className,\n    ...props\n  },\n  ref,\n) {\n  // Track value so we know whether to render the clear button when uncontrolled.\n  const [internalValue, setInternalValue] = React.useState<string | number | readonly string[] | undefined>(\n    defaultValue,\n  )\n  const effectiveValue = value !== undefined ? value : internalValue\n  const hasValue = !!effectiveValue && String(effectiveValue).length > 0\n  const showClear = typeof onClear === 'function' && hasValue\n  const showShortcut = !!shortcut && !hasValue\n\n  const innerRef = React.useRef<HTMLInputElement | null>(null)\n  React.useImperativeHandle(ref, () => innerRef.current as HTMLInputElement)\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (value === undefined) setInternalValue(e.target.value)\n    props.onChange?.(e)\n  }\n\n  return (\n    <span className=\"relative inline-flex w-full items-center\">\n      <Input\n        ref={innerRef}\n        type={type}\n        placeholder={placeholder}\n        leftAddon={searchIcon ?? <DefaultSearchIcon />}\n        inputSize={inputSize}\n        value={value}\n        defaultValue={defaultValue}\n        onChange={handleChange}\n        className={cn(showClear || showShortcut ? CLEAR_PAD[inputSize] : null, className)}\n        {...props}\n      />\n      {showShortcut ? (\n        <kbd\n          aria-hidden=\"true\"\n          className={cn(\n            'pointer-events-none absolute inline-flex items-center justify-center rounded border border-border-v2 bg-secondary-v2 px-1.5 font-mono text-[11px] text-muted-v2-foreground',\n            inputSize === 'sm' ? 'right-2 h-4' : inputSize === 'lg' ? 'right-3 h-5' : 'right-2.5 h-[18px]',\n          )}\n        >\n          {shortcut}\n        </kbd>\n      ) : null}\n      {showClear ? (\n        <button\n          type=\"button\"\n          aria-label=\"Wyczy\u015B\u0107 wyszukiwanie\"\n          onClick={() => {\n            if (value === undefined) setInternalValue('')\n            if (innerRef.current) {\n              innerRef.current.value = ''\n              // Fire a synthetic change event so controlled callers stay in sync.\n              const evt = new Event('input', { bubbles: true })\n              innerRef.current.dispatchEvent(evt)\n            }\n            onClear?.()\n            innerRef.current?.focus()\n          }}\n          className={cn(\n            'absolute inline-flex items-center justify-center rounded-sm text-muted-v2-foreground',\n            'hover:text-foreground-v2 transition-colors',\n            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-v2 focus-visible:ring-offset-1',\n            inputSize === 'sm' ? 'right-2.5 h-4 w-4' : inputSize === 'lg' ? 'right-3.5 h-5 w-5' : 'right-3 h-4 w-4',\n          )}\n        >\n          <X className=\"h-3.5 w-3.5\" />\n        </button>\n      ) : null}\n    </span>\n  )\n})\n"],
+  "mappings": "AA6BgC,cA0C5B,YA1C4B;AA7BhC,YAAY,WAAW;AACvB,SAAS,QAAQ,SAAS;AAC1B,SAAS,aAA8C;AACvD,SAAS,UAAU;AA0BnB,MAAM,oBAAoB,MAAM,oBAAC,UAAO,eAAY,QAAO;AAG3D,MAAM,YAAuC;AAAA,EAC3C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,MAAM,cAAc,MAAM,WAA+C,SAASA,aACvF;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,GACA,KACA;AAEA,QAAM,CAAC,eAAe,gBAAgB,IAAI,MAAM;AAAA,IAC9C;AAAA,EACF;AACA,QAAM,iBAAiB,UAAU,SAAY,QAAQ;AACrD,QAAM,WAAW,CAAC,CAAC,kBAAkB,OAAO,cAAc,EAAE,SAAS;AACrE,QAAM,YAAY,OAAO,YAAY,cAAc;AACnD,QAAM,eAAe,CAAC,CAAC,YAAY,CAAC;AAEpC,QAAM,WAAW,MAAM,OAAgC,IAAI;AAC3D,QAAM,oBAAoB,KAAK,MAAM,SAAS,OAA2B;AAEzE,QAAM,eAAe,CAAC,MAA2C;AAC/D,QAAI,UAAU,OAAW,kBAAiB,EAAE,OAAO,KAAK;AACxD,UAAM,WAAW,CAAC;AAAA,EACpB;AAEA,SACE,qBAAC,UAAK,WAAU,4CACd;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA;AAAA,QACA,WAAW,cAAc,oBAAC,qBAAkB;AAAA,QAC5C;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV,WAAW,GAAG,aAAa,eAAe,UAAU,SAAS,IAAI,MAAM,SAAS;AAAA,QAC/E,GAAG;AAAA;AAAA,IACN;AAAA,IACC,eACC;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ,WAAW;AAAA,UACT;AAAA,UACA,cAAc,OAAO,gBAAgB,cAAc,OAAO,gBAAgB;AAAA,QAC5E;AAAA,QAEC;AAAA;AAAA,IACH,IACE;AAAA,IACH,YACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAW;AAAA,QACX,SAAS,MAAM;AACb,cAAI,UAAU,OAAW,kBAAiB,EAAE;AAC5C,cAAI,SAAS,SAAS;AACpB,qBAAS,QAAQ,QAAQ;AAEzB,kBAAM,MAAM,IAAI,MAAM,SAAS,EAAE,SAAS,KAAK,CAAC;AAChD,qBAAS,QAAQ,cAAc,GAAG;AAAA,UACpC;AACA,oBAAU;AACV,mBAAS,SAAS,MAAM;AAAA,QAC1B;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA,cAAc,OAAO,sBAAsB,cAAc,OAAO,sBAAsB;AAAA,QACxF;AAAA,QAEA,8BAAC,KAAE,WAAU,eAAc;AAAA;AAAA,IAC7B,IACE;AAAA,KACN;AAEJ,CAAC;",
+  "names": ["SearchInput"]
+}

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

@@ -0,0 +1,41 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { SearchInput } from "./SearchInput.js";
+const meta = {
+  title: "Components/SearchInput",
+  component: SearchInput,
+  parameters: {
+    docs: {
+      description: {
+        component: 'Figma: FMS-Componenets \u2192 SearchInput (149:375). Specialization of `Input` with a search icon on the left and an inline clear "\xD7" on the right (visible when there\'s a value AND an `onClear` handler).'
+      }
+    }
+  }
+};
+var SearchInput_stories_default = meta;
+function Controlled() {
+  const [value, setValue] = React.useState("FV/2025/0041");
+  return /* @__PURE__ */ jsx(
+    SearchInput,
+    {
+      value,
+      onChange: (e) => setValue(e.target.value),
+      onClear: () => setValue(""),
+      placeholder: "Z przyciskiem clear"
+    }
+  );
+}
+const Showcase = {
+  name: "SearchInput",
+  render: () => /* @__PURE__ */ jsxs("div", { className: "flex w-[420px] flex-col gap-3", children: [
+    /* @__PURE__ */ jsx(SearchInput, { placeholder: "Default \u2014 pusty" }),
+    /* @__PURE__ */ jsx(SearchInput, { defaultValue: "Maersk", placeholder: "Z wpisanym tekstem" }),
+    /* @__PURE__ */ jsx(Controlled, {}),
+    /* @__PURE__ */ jsx(SearchInput, { defaultValue: "Tylko do odczytu", disabled: true })
+  ] })
+};
+export {
+  Showcase,
+  SearchInput_stories_default as default
+};
+//# sourceMappingURL=SearchInput.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/primitives-v2/SearchInput.stories.tsx"],
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react-vite'\nimport * as React from 'react'\nimport { SearchInput } from './SearchInput'\n\nconst meta: Meta<typeof SearchInput> = {\n  title: 'Components/SearchInput',\n  component: SearchInput,\n  parameters: {\n    docs: {\n      description: {\n        component:\n          'Figma: FMS-Componenets \u2192 SearchInput (149:375). Specialization of `Input` with a search icon on the left and an inline clear \"\u00D7\" on the right (visible when there\\'s a value AND an `onClear` handler).',\n      },\n    },\n  },\n}\n\nexport default meta\n\ntype Story = StoryObj<typeof SearchInput>\n\nfunction Controlled() {\n  const [value, setValue] = React.useState('FV/2025/0041')\n  return (\n    <SearchInput\n      value={value}\n      onChange={(e) => setValue(e.target.value)}\n      onClear={() => setValue('')}\n      placeholder=\"Z przyciskiem clear\"\n    />\n  )\n}\n\nexport const Showcase: Story = {\n  name: 'SearchInput',\n  render: () => (\n    <div className=\"flex w-[420px] flex-col gap-3\">\n      <SearchInput placeholder=\"Default \u2014 pusty\" />\n      <SearchInput defaultValue=\"Maersk\" placeholder=\"Z wpisanym tekstem\" />\n      <Controlled />\n      <SearchInput defaultValue=\"Tylko do odczytu\" disabled />\n    </div>\n  ),\n}\n"],
+  "mappings": "AAwBI,cAYA,YAZA;AAvBJ,YAAY,WAAW;AACvB,SAAS,mBAAmB;AAE5B,MAAM,OAAiC;AAAA,EACrC,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,8BAAQ;AAIf,SAAS,aAAa;AACpB,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAS,cAAc;AACvD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,MACxC,SAAS,MAAM,SAAS,EAAE;AAAA,MAC1B,aAAY;AAAA;AAAA,EACd;AAEJ;AAEO,MAAM,WAAkB;AAAA,EAC7B,MAAM;AAAA,EACN,QAAQ,MACN,qBAAC,SAAI,WAAU,iCACb;AAAA,wBAAC,eAAY,aAAY,wBAAkB;AAAA,IAC3C,oBAAC,eAAY,cAAa,UAAS,aAAY,sBAAqB;AAAA,IACpE,oBAAC,cAAW;AAAA,IACZ,oBAAC,eAAY,cAAa,oBAAmB,UAAQ,MAAC;AAAA,KACxD;AAEJ;",
+  "names": []
+}

package/dist/primitives-v2/Sidebar.js

@@ -0,0 +1,48 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "./utils.js";
+function Sidebar({ header, footer, className, children, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      className: cn(
+        "flex h-full w-[240px] shrink-0 flex-col bg-sidebar-v2 text-sidebar-v2-foreground",
+        className
+      ),
+      ...props,
+      children: [
+        header ? /* @__PURE__ */ jsx(SidebarHeaderShell, { children: header }) : null,
+        /* @__PURE__ */ jsx("nav", { className: "flex-1 overflow-y-auto px-2 py-3", "aria-label": "G\u0142\xF3wna nawigacja", children }),
+        footer ? /* @__PURE__ */ jsx(SidebarFooterShell, { children: footer }) : null
+      ]
+    }
+  );
+}
+function SidebarHeaderShell({ children }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "flex shrink-0 items-center gap-2.5 bg-sidebar-v2 px-3",
+      style: { height: 52 },
+      children
+    }
+  );
+}
+function SidebarFooterShell({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: "flex shrink-0 flex-col gap-2 border-t border-sidebar-v2-border bg-sidebar-v2 px-2 pb-3 pt-2", children });
+}
+function SidebarHeader({ logo, title, trailing }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-2.5", children: [
+    logo ? /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0 items-center", children: logo }) : null,
+    /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-body-medium-md text-sidebar-v2-foreground", children: title }),
+    trailing ? /* @__PURE__ */ jsx("span", { className: "ml-auto inline-flex shrink-0", children: trailing }) : null
+  ] });
+}
+function SidebarFooter({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children });
+}
+export {
+  Sidebar,
+  SidebarFooter,
+  SidebarHeader
+};
+//# sourceMappingURL=Sidebar.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/primitives-v2/Sidebar.tsx"],
+  "sourcesContent": ["import * as React from 'react'\nimport { cn } from './utils'\n\n/*\n  Figma sources:\n    - SidebarHeader (component 112:110)\n    - SidebarFooter (component 112:117)\n    - Sidebar       (component 137:354, 240\u00D71656)\n\n  The shell is a column flexbox with three slots: header (sticky top,\n  border-bottom), body (scrollable), footer (sticky bottom,\n  border-top). Background uses the existing `--sidebar` token so the\n  theme system (light / dark / brand) flows in.\n\n  Width default: 240px to match the Figma \"Sidebar\" frame. Override via className.\n*/\n\nexport type SidebarProps = React.HTMLAttributes<HTMLElement> & {\n  header?: React.ReactNode\n  footer?: React.ReactNode\n}\n\nexport function Sidebar({ header, footer, className, children, ...props }: SidebarProps) {\n  return (\n    <aside\n      className={cn(\n        'flex h-full w-[240px] shrink-0 flex-col bg-sidebar-v2 text-sidebar-v2-foreground',\n        className,\n      )}\n      {...props}\n    >\n      {header ? <SidebarHeaderShell>{header}</SidebarHeaderShell> : null}\n      <nav className=\"flex-1 overflow-y-auto px-2 py-3\" aria-label=\"G\u0142\u00F3wna nawigacja\">\n        {children}\n      </nav>\n      {footer ? <SidebarFooterShell>{footer}</SidebarFooterShell> : null}\n    </aside>\n  )\n}\n\nfunction SidebarHeaderShell({ children }: { children: React.ReactNode }) {\n  return (\n    <div\n      className=\"flex shrink-0 items-center gap-2.5 bg-sidebar-v2 px-3\"\n      style={{ height: 52 }}\n    >\n      {children}\n    </div>\n  )\n}\n\nfunction SidebarFooterShell({ children }: { children: React.ReactNode }) {\n  return (\n    <div className=\"flex shrink-0 flex-col gap-2 border-t border-sidebar-v2-border bg-sidebar-v2 px-2 pb-3 pt-2\">\n      {children}\n    </div>\n  )\n}\n\nexport type SidebarHeaderProps = {\n  /**\n   * Brand mark / logo on the left. Rendered as-is \u2014 pass an `<img>`,\n   * an SVG, or any styled element. The header does not wrap it in a\n   * coloured square; the caller controls its full appearance.\n   */\n  logo?: React.ReactNode\n  /** Workspace / org name. */\n  title?: React.ReactNode\n  /** Optional trailing element (e.g. sidebar-collapse toggle). */\n  trailing?: React.ReactNode\n}\n\n/** Default header layout \u2014 pass `logo`, `title`, and an optional `trailing` slot. */\nexport function SidebarHeader({ logo, title, trailing }: SidebarHeaderProps) {\n  return (\n    <div className=\"flex w-full items-center gap-2.5\">\n      {logo ? <span className=\"inline-flex shrink-0 items-center\">{logo}</span> : null}\n      <span className=\"min-w-0 flex-1 truncate text-body-medium-md text-sidebar-v2-foreground\">{title}</span>\n      {trailing ? <span className=\"ml-auto inline-flex shrink-0\">{trailing}</span> : null}\n    </div>\n  )\n}\n\nexport type SidebarFooterProps = {\n  /** Primary footer row (e.g. user info). */\n  children: React.ReactNode\n}\n\n/** Default footer layout. Renders the children inside the footer shell. */\nexport function SidebarFooter({ children }: SidebarFooterProps) {\n  return <div className=\"flex flex-col gap-2\">{children}</div>\n}\n"],
+  "mappings": "AAwBI,SAOY,KAPZ;AAvBJ,SAAS,UAAU;AAqBZ,SAAS,QAAQ,EAAE,QAAQ,QAAQ,WAAW,UAAU,GAAG,MAAM,GAAiB;AACvF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,iBAAS,oBAAC,sBAAoB,kBAAO,IAAwB;AAAA,QAC9D,oBAAC,SAAI,WAAU,oCAAmC,cAAW,4BAC1D,UACH;AAAA,QACC,SAAS,oBAAC,sBAAoB,kBAAO,IAAwB;AAAA;AAAA;AAAA,EAChE;AAEJ;AAEA,SAAS,mBAAmB,EAAE,SAAS,GAAkC;AACvE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO,EAAE,QAAQ,GAAG;AAAA,MAEnB;AAAA;AAAA,EACH;AAEJ;AAEA,SAAS,mBAAmB,EAAE,SAAS,GAAkC;AACvE,SACE,oBAAC,SAAI,WAAU,+FACZ,UACH;AAEJ;AAgBO,SAAS,cAAc,EAAE,MAAM,OAAO,SAAS,GAAuB;AAC3E,SACE,qBAAC,SAAI,WAAU,oCACZ;AAAA,WAAO,oBAAC,UAAK,WAAU,qCAAqC,gBAAK,IAAU;AAAA,IAC5E,oBAAC,UAAK,WAAU,0EAA0E,iBAAM;AAAA,IAC/F,WAAW,oBAAC,UAAK,WAAU,gCAAgC,oBAAS,IAAU;AAAA,KACjF;AAEJ;AAQO,SAAS,cAAc,EAAE,SAAS,GAAuB;AAC9D,SAAO,oBAAC,SAAI,WAAU,uBAAuB,UAAS;AACxD;",
+  "names": []
+}

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

@@ -0,0 +1,76 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Folder, FileText, Truck, BarChart3, PanelLeftClose } from "lucide-react";
+import { Sidebar, SidebarHeader, SidebarFooter } from "./Sidebar.js";
+import { NavGroup } from "./NavGroup.js";
+import { NavItem } from "./NavItem.js";
+import { Avatar } from "./Avatar.js";
+const meta = {
+  title: "Components/Sidebar",
+  component: Sidebar,
+  parameters: {
+    layout: "fullscreen",
+    backgrounds: {
+      default: "figma-surface",
+      values: [{ name: "figma-surface", value: "#F8F8FA" }]
+    },
+    docs: {
+      description: {
+        component: "Figma sources: SidebarHeader (112:110), SidebarFooter (112:117), Sidebar shell (137:354 \u2014 220\xD7900). Three slots: `header`, scrollable body (children), `footer`. Compose with `NavGroup` + `NavItem`."
+      }
+    }
+  }
+};
+var Sidebar_stories_default = meta;
+const BrandMark = () => /* @__PURE__ */ jsx(
+  "span",
+  {
+    className: "inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md border border-dashed border-border-v2-strong bg-secondary-v2 text-[10px] text-muted-v2-foreground",
+    "aria-hidden": "true",
+    children: "img"
+  }
+);
+const CollapseToggle = () => /* @__PURE__ */ jsx(
+  "button",
+  {
+    type: "button",
+    "aria-label": "Zwi\u0144 pasek boczny",
+    className: "inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-v2-foreground hover:bg-sidebar-v2-accent hover:text-foreground-v2 transition-colors",
+    children: /* @__PURE__ */ jsx(PanelLeftClose, { className: "h-4 w-4" })
+  }
+);
+const Showcase = {
+  name: "Sidebar",
+  render: () => /* @__PURE__ */ jsx("div", { className: "h-[900px]", children: /* @__PURE__ */ jsxs(
+    Sidebar,
+    {
+      header: /* @__PURE__ */ jsx(SidebarHeader, { logo: /* @__PURE__ */ jsx(BrandMark, {}), title: "FreightTech FMS", trailing: /* @__PURE__ */ jsx(CollapseToggle, {}) }),
+      footer: /* @__PURE__ */ jsx(SidebarFooter, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-2 py-1.5", children: [
+        /* @__PURE__ */ jsx(Avatar, { size: "sm", name: "Karolina Firmowe" }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("div", { className: "truncate text-body-medium-sm text-sidebar-v2-foreground", children: "Karolina Firmowe" }),
+          /* @__PURE__ */ jsx("div", { className: "truncate text-caption-medium-md text-muted-v2-foreground", children: "karolina@example.com" })
+        ] })
+      ] }) }),
+      children: [
+        /* @__PURE__ */ jsxs(NavGroup, { title: "Workspace", children: [
+          /* @__PURE__ */ jsx(NavItem, { icon: /* @__PURE__ */ jsx(BarChart3, {}), isActive: true, children: "Pulpit" }),
+          /* @__PURE__ */ jsx(NavItem, { icon: /* @__PURE__ */ jsx(FileText, {}), badge: "3", children: "Powiadomienia" })
+        ] }),
+        /* @__PURE__ */ jsxs(NavGroup, { title: "Operacje", children: [
+          /* @__PURE__ */ jsx(NavItem, { icon: /* @__PURE__ */ jsx(Folder, {}), badge: "248", children: "Teczki" }),
+          /* @__PURE__ */ jsx(NavItem, { icon: /* @__PURE__ */ jsx(FileText, {}), badge: "12", children: "Faktury" }),
+          /* @__PURE__ */ jsx(NavItem, { icon: /* @__PURE__ */ jsx(Truck, {}), children: "Transporty" })
+        ] }),
+        /* @__PURE__ */ jsxs(NavGroup, { title: "Archiwum", defaultCollapsed: true, children: [
+          /* @__PURE__ */ jsx(NavItem, { children: "2024" }),
+          /* @__PURE__ */ jsx(NavItem, { children: "2023" })
+        ] })
+      ]
+    }
+  ) })
+};
+export {
+  Showcase,
+  Sidebar_stories_default as default
+};
+//# sourceMappingURL=Sidebar.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/primitives-v2/Sidebar.stories.tsx"],
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react-vite'\nimport { Folder, FileText, Truck, BarChart3, PanelLeftClose } from 'lucide-react'\nimport { Sidebar, SidebarHeader, SidebarFooter } from './Sidebar'\nimport { NavGroup } from './NavGroup'\nimport { NavItem } from './NavItem'\nimport { Avatar } from './Avatar'\n\nconst meta: Meta<typeof Sidebar> = {\n  title: 'Components/Sidebar',\n  component: Sidebar,\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 sources: SidebarHeader (112:110), SidebarFooter (112:117), Sidebar shell (137:354 \u2014 220\u00D7900). Three slots: `header`, scrollable body (children), `footer`. Compose with `NavGroup` + `NavItem`.',\n      },\n    },\n  },\n}\n\nexport default meta\n\ntype Story = StoryObj<typeof Sidebar>\n\nconst BrandMark = () => (\n  <span\n    className=\"inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md border border-dashed border-border-v2-strong bg-secondary-v2 text-[10px] text-muted-v2-foreground\"\n    aria-hidden=\"true\"\n  >\n    img\n  </span>\n)\n\nconst CollapseToggle = () => (\n  <button\n    type=\"button\"\n    aria-label=\"Zwi\u0144 pasek boczny\"\n    className=\"inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-v2-foreground hover:bg-sidebar-v2-accent hover:text-foreground-v2 transition-colors\"\n  >\n    <PanelLeftClose className=\"h-4 w-4\" />\n  </button>\n)\n\nexport const Showcase: Story = {\n  name: 'Sidebar',\n  render: () => (\n    <div className=\"h-[900px]\">\n      <Sidebar\n        header={<SidebarHeader logo={<BrandMark />} title=\"FreightTech FMS\" trailing={<CollapseToggle />} />}\n        footer={\n          <SidebarFooter>\n            <div className=\"flex items-center gap-2 px-2 py-1.5\">\n              <Avatar size=\"sm\" name=\"Karolina Firmowe\" />\n              <div className=\"min-w-0 flex-1\">\n                <div className=\"truncate text-body-medium-sm text-sidebar-v2-foreground\">Karolina Firmowe</div>\n                <div className=\"truncate text-caption-medium-md text-muted-v2-foreground\">karolina@example.com</div>\n              </div>\n            </div>\n          </SidebarFooter>\n        }\n      >\n        <NavGroup title=\"Workspace\">\n          <NavItem icon={<BarChart3 />} isActive>\n            Pulpit\n          </NavItem>\n          <NavItem icon={<FileText />} badge=\"3\">\n            Powiadomienia\n          </NavItem>\n        </NavGroup>\n        <NavGroup title=\"Operacje\">\n          <NavItem icon={<Folder />} badge=\"248\">\n            Teczki\n          </NavItem>\n          <NavItem icon={<FileText />} badge=\"12\">\n            Faktury\n          </NavItem>\n          <NavItem icon={<Truck />}>Transporty</NavItem>\n        </NavGroup>\n        <NavGroup title=\"Archiwum\" defaultCollapsed>\n          <NavItem>2024</NavItem>\n          <NavItem>2023</NavItem>\n        </NavGroup>\n      </Sidebar>\n    </div>\n  ),\n}\n"],
+  "mappings": "AA8BE,cA4BY,YA5BZ;AA7BF,SAAS,QAAQ,UAAU,OAAO,WAAW,sBAAsB;AACnE,SAAS,SAAS,eAAe,qBAAqB;AACtD,SAAS,gBAAgB;AACzB,SAAS,eAAe;AACxB,SAAS,cAAc;AAEvB,MAAM,OAA6B;AAAA,EACjC,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,0BAAQ;AAIf,MAAM,YAAY,MAChB;AAAA,EAAC;AAAA;AAAA,IACC,WAAU;AAAA,IACV,eAAY;AAAA,IACb;AAAA;AAED;AAGF,MAAM,iBAAiB,MACrB;AAAA,EAAC;AAAA;AAAA,IACC,MAAK;AAAA,IACL,cAAW;AAAA,IACX,WAAU;AAAA,IAEV,8BAAC,kBAAe,WAAU,WAAU;AAAA;AACtC;AAGK,MAAM,WAAkB;AAAA,EAC7B,MAAM;AAAA,EACN,QAAQ,MACN,oBAAC,SAAI,WAAU,aACb;AAAA,IAAC;AAAA;AAAA,MACC,QAAQ,oBAAC,iBAAc,MAAM,oBAAC,aAAU,GAAI,OAAM,mBAAkB,UAAU,oBAAC,kBAAe,GAAI;AAAA,MAClG,QACE,oBAAC,iBACC,+BAAC,SAAI,WAAU,uCACb;AAAA,4BAAC,UAAO,MAAK,MAAK,MAAK,oBAAmB;AAAA,QAC1C,qBAAC,SAAI,WAAU,kBACb;AAAA,8BAAC,SAAI,WAAU,2DAA0D,8BAAgB;AAAA,UACzF,oBAAC,SAAI,WAAU,4DAA2D,kCAAoB;AAAA,WAChG;AAAA,SACF,GACF;AAAA,MAGF;AAAA,6BAAC,YAAS,OAAM,aACd;AAAA,8BAAC,WAAQ,MAAM,oBAAC,aAAU,GAAI,UAAQ,MAAC,oBAEvC;AAAA,UACA,oBAAC,WAAQ,MAAM,oBAAC,YAAS,GAAI,OAAM,KAAI,2BAEvC;AAAA,WACF;AAAA,QACA,qBAAC,YAAS,OAAM,YACd;AAAA,8BAAC,WAAQ,MAAM,oBAAC,UAAO,GAAI,OAAM,OAAM,oBAEvC;AAAA,UACA,oBAAC,WAAQ,MAAM,oBAAC,YAAS,GAAI,OAAM,MAAK,qBAExC;AAAA,UACA,oBAAC,WAAQ,MAAM,oBAAC,SAAM,GAAI,wBAAU;AAAA,WACtC;AAAA,QACA,qBAAC,YAAS,OAAM,YAAW,kBAAgB,MACzC;AAAA,8BAAC,WAAQ,kBAAI;AAAA,UACb,oBAAC,WAAQ,kBAAI;AAAA,WACf;AAAA;AAAA;AAAA,EACF,GACF;AAEJ;",
+  "names": []
+}

package/dist/primitives-v2/Tab.js

@@ -0,0 +1,78 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "./utils.js";
+const TabBarContext = React.createContext(null);
+function TabBar({
+  value,
+  onChange,
+  ariaLabel,
+  className,
+  children,
+  ...props
+}) {
+  const ctx = React.useMemo(() => ({ value, onChange }), [value, onChange]);
+  return /* @__PURE__ */ jsx(TabBarContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "tablist",
+      "aria-label": ariaLabel,
+      className: cn(
+        "flex items-end gap-6 border-b border-border-v2",
+        className
+      ),
+      ...props,
+      children
+    }
+  ) });
+}
+const Tab = React.forwardRef(function Tab2({ value, isActive, badge, className, children, disabled, onClick, ...props }, ref) {
+  const ctx = React.useContext(TabBarContext);
+  const active = isActive !== void 0 ? isActive : ctx && value !== void 0 && ctx.value === value;
+  const handleClick = (e) => {
+    onClick?.(e);
+    if (e.defaultPrevented) return;
+    if (ctx?.onChange && value !== void 0) ctx.onChange(value);
+  };
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      type: "button",
+      role: "tab",
+      "aria-selected": active || void 0,
+      disabled,
+      onClick: handleClick,
+      className: cn(
+        "relative inline-flex items-center gap-1.5 pb-2 pt-1 text-body-medium-sm transition-colors",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-v2 focus-visible:ring-offset-1",
+        active ? (
+          // active: dark text + --tab-v2-indicator underline (offset to overlap the TabBar's border-bottom)
+          cn(
+            "text-foreground-v2 font-medium cursor-pointer",
+            'after:absolute after:inset-x-0 after:-bottom-px after:h-[2px] after:bg-tab-v2-indicator after:content-[""]'
+          )
+        ) : disabled ? "text-muted-v2-foreground cursor-not-allowed" : "text-status-v2-neutral-text hover:text-foreground-v2 cursor-pointer",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        badge != null ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "inline-flex h-4 min-w-4 items-center justify-center rounded-full px-1.5 text-label-semibold-xs",
+              active ? "bg-accent-v2/10 text-accent-v2" : "bg-status-v2-neutral-bg text-status-v2-neutral-text"
+            ),
+            children: badge
+          }
+        ) : null
+      ]
+    }
+  );
+});
+export {
+  Tab,
+  TabBar
+};
+//# sourceMappingURL=Tab.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/primitives-v2/Tab.tsx"],
+  "sourcesContent": ["import * as React from 'react'\nimport { cn } from './utils'\n\n/*\n  Figma source: FMS-Componenets \u2192 Tab (component-set 45:90) and\n  TabBar (component-set 183:453).\n\n  Built from Tier 3 endpoints only \u2014 Tier 1 was rate-limited when this\n  was added. Visual reference: per-variant thumbnails downloaded via\n  `GET /v1/files/:key/components` + each component's `thumbnail_url`.\n  See `.ai/figma-rules.md` \"Rate limit\" section.\n\n  Variant matrix (verified by thumbnail + user correction):\n    | State    | Text color           | Underline\n    |----------|----------------------|---------------------------\n    | default  | --status-v2-neutral- | \u2014\n    |          |   text (#71717A)     |\n    | active   | --foreground-v2      | 2px --tab-v2-indicator\n    |          |   (#18181A) + medium |   (Figma blue/500)\n    | disabled | --muted-v2-foreground| \u2014\n    |          |   (#A0A0AA)          |\n\n  Underline color was updated from `--accent-v2-bright` (teal-400) to\n  the brand blue (`--tab-v2-indicator`) per FMS Teczka design \u2014 the\n  teal Figma value read too cold against the navy primary CTAs in this\n  app.\n\n  Figma's `Tab` variant axis is just `state`. The `hasBadge` / `count`\n  are **configurable component properties** (text + boolean), not\n  variants \u2014 we expose them as React props (`badge`).\n\n  `TabBar` provides context so multiple Tab children share a single\n  `value` / `onChange` pair. Tabs can also be controlled by passing\n  `isActive` directly when used outside a TabBar.\n*/\n\n// \u2500\u2500 Context \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\ntype TabBarContextValue = {\n  value?: string\n  onChange?: (next: string) => void\n}\n\nconst TabBarContext = React.createContext<TabBarContextValue | null>(null)\n\n// \u2500\u2500 TabBar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nexport type TabBarProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & {\n  /** Currently active tab `value`. */\n  value?: string\n  /** Called when a child Tab is clicked. */\n  onChange?: (next: string) => void\n  /** Optional aria-label for the tablist landmark. */\n  ariaLabel?: string\n}\n\nexport function TabBar({\n  value,\n  onChange,\n  ariaLabel,\n  className,\n  children,\n  ...props\n}: TabBarProps) {\n  const ctx = React.useMemo<TabBarContextValue>(() => ({ value, onChange }), [value, onChange])\n  return (\n    <TabBarContext.Provider value={ctx}>\n      <div\n        role=\"tablist\"\n        aria-label={ariaLabel}\n        className={cn(\n          'flex items-end gap-6 border-b border-border-v2',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </TabBarContext.Provider>\n  )\n}\n\n// \u2500\u2500 Tab \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nexport type TabProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'value'> & {\n  /** Identifier used by the parent TabBar to track which tab is active. */\n  value?: string\n  /** Use this if the Tab is rendered outside a TabBar. Inside a TabBar the\n   *  active state is derived from the bar's `value` prop. */\n  isActive?: boolean\n  /** Optional numeric/text badge rendered after the label. */\n  badge?: React.ReactNode\n}\n\nexport const Tab = React.forwardRef<HTMLButtonElement, TabProps>(function Tab(\n  { value, isActive, badge, className, children, disabled, onClick, ...props },\n  ref,\n) {\n  const ctx = React.useContext(TabBarContext)\n  const active =\n    isActive !== undefined ? isActive : ctx && value !== undefined && ctx.value === value\n\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    onClick?.(e)\n    if (e.defaultPrevented) return\n    if (ctx?.onChange && value !== undefined) ctx.onChange(value)\n  }\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      role=\"tab\"\n      aria-selected={active || undefined}\n      disabled={disabled}\n      onClick={handleClick}\n      className={cn(\n        'relative inline-flex items-center gap-1.5 pb-2 pt-1 text-body-medium-sm transition-colors',\n        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-v2 focus-visible:ring-offset-1',\n        active\n          ? // active: dark text + --tab-v2-indicator underline (offset to overlap the TabBar's border-bottom)\n            cn(\n              'text-foreground-v2 font-medium cursor-pointer',\n              'after:absolute after:inset-x-0 after:-bottom-px after:h-[2px] after:bg-tab-v2-indicator after:content-[\"\"]',\n            )\n          : disabled\n            ? 'text-muted-v2-foreground cursor-not-allowed'\n            : 'text-status-v2-neutral-text hover:text-foreground-v2 cursor-pointer',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {badge != null ? (\n        <span\n          className={cn(\n            'inline-flex h-4 min-w-4 items-center justify-center rounded-full px-1.5 text-label-semibold-xs',\n            active\n              ? 'bg-accent-v2/10 text-accent-v2'\n              : 'bg-status-v2-neutral-bg text-status-v2-neutral-text',\n          )}\n        >\n          {badge}\n        </span>\n      ) : null}\n    </button>\n  )\n})\n"],
+  "mappings": "AAmEM,cA0CF,YA1CE;AAnEN,YAAY,WAAW;AACvB,SAAS,UAAU;AA0CnB,MAAM,gBAAgB,MAAM,cAAyC,IAAI;AAalE,SAAS,OAAO;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAgB;AACd,QAAM,MAAM,MAAM,QAA4B,OAAO,EAAE,OAAO,SAAS,IAAI,CAAC,OAAO,QAAQ,CAAC;AAC5F,SACE,oBAAC,cAAc,UAAd,EAAuB,OAAO,KAC7B;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH,GACF;AAEJ;AAcO,MAAM,MAAM,MAAM,WAAwC,SAASA,KACxE,EAAE,OAAO,UAAU,OAAO,WAAW,UAAU,UAAU,SAAS,GAAG,MAAM,GAC3E,KACA;AACA,QAAM,MAAM,MAAM,WAAW,aAAa;AAC1C,QAAM,SACJ,aAAa,SAAY,WAAW,OAAO,UAAU,UAAa,IAAI,UAAU;AAElF,QAAM,cAAc,CAAC,MAA2C;AAC9D,cAAU,CAAC;AACX,QAAI,EAAE,iBAAkB;AACxB,QAAI,KAAK,YAAY,UAAU,OAAW,KAAI,SAAS,KAAK;AAAA,EAC9D;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,MAAK;AAAA,MACL,iBAAe,UAAU;AAAA,MACzB;AAAA,MACA,SAAS;AAAA,MACT,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA;AAAA,UAEI;AAAA,YACE;AAAA,YACA;AAAA,UACF;AAAA,YACA,WACE,gDACA;AAAA,QACN;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,QACA,SAAS,OACR;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,SACI,mCACA;AAAA,YACN;AAAA,YAEC;AAAA;AAAA,QACH,IACE;AAAA;AAAA;AAAA,EACN;AAEJ,CAAC;",
+  "names": ["Tab"]
+}