@freighttech/ui 0.13.18

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/primitives-v2/Alert.tsx"],
+  "sourcesContent": ["import * as React from 'react'\nimport { Info, CheckCircle2, AlertTriangle, XCircle, X } from 'lucide-react'\nimport { cn } from './utils'\n\n/*\n  Figma source: FMS-Componenets \u2192 Alert (component-set 46:22).\n\n  Variant matrix (extracted from each variant's `fills`/`strokes`/text fill):\n    | Variant  | Background | Border  | Text    |\n    |----------|-----------|---------|---------|\n    | info     | #EFF6FF   | #BFDBFE | #1E40AF |\n    | success  | #F0FDF4   | #BBF7D0 | #166534 |\n    | warning  | #FFFBEB   | #FDE68A | #92400E |\n    | error    | #FEF2F2   | #FECACA | #991B1B |\n\n  Figma does NOT define a `neutral` Alert variant. We keep one in code\n  via the v2 neutral tokens for situations where the page needs an\n  informational message without urgency (e.g. empty-state hints).\n\n  Figma's Alert is TEXT-ONLY \u2014 no leading icon. We add lucide icons by\n  default (`Info` / `CheckCircle2` / `AlertTriangle` / `XCircle`) because\n  every realistic FMS screen renders one; pass `icon={null}` to hide.\n\n  Title uses `heading/semibold/md`, description uses `body/regular/xs`.\n  Border radius 10px = `rounded-[10px]`. Padding 12px / 16px-12px.\n*/\n\nexport type AlertVariant = 'info' | 'success' | 'warning' | 'error' | 'neutral'\n\nexport type AlertProps = React.HTMLAttributes<HTMLDivElement> & {\n  variant?: AlertVariant\n  title?: React.ReactNode\n  /** Override the default icon. Pass `null` to hide. */\n  icon?: React.ReactNode | null\n  /** When provided, renders a dismiss \"\u00D7\" button that calls this. */\n  onDismiss?: () => void\n  dismissAriaLabel?: string\n}\n\nconst VARIANT_CLASSES: Record<AlertVariant, string> = {\n  info: 'bg-status-v2-info-bg border-status-v2-info-border text-status-v2-info-text',\n  success: 'bg-status-v2-success-bg border-status-v2-success-border text-status-v2-success-text',\n  warning: 'bg-status-v2-warning-bg border-status-v2-warning-border text-status-v2-warning-text',\n  error: 'bg-status-v2-error-bg border-status-v2-error-border text-status-v2-error-text',\n  neutral: 'bg-status-v2-neutral-bg border-status-v2-neutral-border text-status-v2-neutral-text',\n}\n\nconst DEFAULT_ICONS: Record<AlertVariant, React.ReactNode> = {\n  info: <Info />,\n  success: <CheckCircle2 />,\n  warning: <AlertTriangle />,\n  error: <XCircle />,\n  neutral: <Info />,\n}\n\nexport const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(\n  {\n    variant = 'info',\n    title,\n    icon,\n    onDismiss,\n    dismissAriaLabel = 'Zamknij',\n    className,\n    children,\n    role = 'alert',\n    ...props\n  },\n  ref,\n) {\n  const resolvedIcon = icon === undefined ? DEFAULT_ICONS[variant] : icon\n\n  return (\n    <div\n      ref={ref}\n      role={role}\n      className={cn(\n        'flex w-full items-start gap-3 rounded-[10px] border px-4 py-3',\n        VARIANT_CLASSES[variant],\n        className,\n      )}\n      {...props}\n    >\n      {resolvedIcon ? (\n        <span aria-hidden=\"true\" className=\"mt-0.5 inline-flex h-5 w-5 shrink-0 items-center justify-center [&>svg]:h-4 [&>svg]:w-4\">\n          {resolvedIcon}\n        </span>\n      ) : null}\n      <div className=\"flex-1 min-w-0\">\n        {title ? <div className=\"text-heading-semibold-md\">{title}</div> : null}\n        {children ? <div className={cn('text-body-regular-xs', title ? 'mt-0.5' : null)}>{children}</div> : null}\n      </div>\n      {onDismiss ? (\n        <button\n          type=\"button\"\n          onClick={onDismiss}\n          aria-label={dismissAriaLabel}\n          className={cn(\n            'shrink-0 inline-flex h-6 w-6 items-center justify-center rounded-md',\n            'opacity-70 transition-opacity hover:opacity-100 hover:bg-black/5',\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.5 w-3.5\" />\n        </button>\n      ) : null}\n    </div>\n  )\n})\n"],
+  "mappings": "AAgDQ,cAuCF,YAvCE;AAhDR,YAAY,WAAW;AACvB,SAAS,MAAM,cAAc,eAAe,SAAS,SAAS;AAC9D,SAAS,UAAU;AAqCnB,MAAM,kBAAgD;AAAA,EACpD,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AACX;AAEA,MAAM,gBAAuD;AAAA,EAC3D,MAAM,oBAAC,QAAK;AAAA,EACZ,SAAS,oBAAC,gBAAa;AAAA,EACvB,SAAS,oBAAC,iBAAc;AAAA,EACxB,OAAO,oBAAC,WAAQ;AAAA,EAChB,SAAS,oBAAC,QAAK;AACjB;AAEO,MAAM,QAAQ,MAAM,WAAuC,SAASA,OACzE;AAAA,EACE,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACL,GACA,KACA;AACA,QAAM,eAAe,SAAS,SAAY,cAAc,OAAO,IAAI;AAEnE,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA,gBAAgB,OAAO;AAAA,QACvB;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,uBACC,oBAAC,UAAK,eAAY,QAAO,WAAU,2FAChC,wBACH,IACE;AAAA,QACJ,qBAAC,SAAI,WAAU,kBACZ;AAAA,kBAAQ,oBAAC,SAAI,WAAU,4BAA4B,iBAAM,IAAS;AAAA,UAClE,WAAW,oBAAC,SAAI,WAAW,GAAG,wBAAwB,QAAQ,WAAW,IAAI,GAAI,UAAS,IAAS;AAAA,WACtG;AAAA,QACC,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,eAAc;AAAA;AAAA,QAC7B,IACE;AAAA;AAAA;AAAA,EACN;AAEJ,CAAC;",
+  "names": ["Alert"]
+}

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

@@ -0,0 +1,42 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Alert } from "./Alert.js";
+const meta = {
+  title: "Components/Alert",
+  component: Alert,
+  parameters: {
+    backgrounds: {
+      default: "figma-surface",
+      values: [{ name: "figma-surface", value: "#F8F8FA" }]
+    },
+    docs: {
+      description: {
+        component: "Figma: FMS-Componenets \u2192 Alert (46:22). Four variants in Figma (info / success / warning / error); a `neutral` is exposed in code for non-urgent helper messages. Colors come from the `-v2` status tokens extracted directly from the Figma variants."
+      }
+    }
+  }
+};
+var Alert_stories_default = meta;
+const Showcase = {
+  name: "Alert",
+  render: () => {
+    const [open, setOpen] = React.useState(true);
+    return /* @__PURE__ */ jsxs("div", { className: "flex max-w-[560px] flex-col gap-3", children: [
+      /* @__PURE__ */ jsx(Alert, { variant: "info", title: "Synchronizacja w toku", children: "Powi\u0105zane faktury zostan\u0105 zaktualizowane w ci\u0105gu kilku minut." }),
+      /* @__PURE__ */ jsx(Alert, { variant: "success", title: "Faktura zatwierdzona", children: "FV/2025/0041 zosta\u0142a przekazana do ksi\u0119gowo\u015Bci." }),
+      /* @__PURE__ */ jsx(Alert, { variant: "warning", title: "Wymaga uwagi", children: "Actual Cost = $0 dla 3 pozycji \u2014 uzupe\u0142nij alokacj\u0119 przed zamkni\u0119ciem." }),
+      /* @__PURE__ */ jsx(Alert, { variant: "error", title: "Nie uda\u0142o si\u0119 wys\u0142a\u0107 do KSeF", children: "Sprawd\u017A dane kontrahenta i spr\xF3buj ponownie." }),
+      /* @__PURE__ */ jsx(Alert, { variant: "neutral", title: "Wstrzymane", children: "Powi\u0105zany transport oczekuje na potwierdzenie spedytora." }),
+      /* @__PURE__ */ jsx(Alert, { variant: "info", children: "Bez tytu\u0142u \u2014 sama tre\u015B\u0107 opisowa." }),
+      open && /* @__PURE__ */ jsxs(Alert, { variant: "success", title: "Faktura wys\u0142ana do KSeF", onDismiss: () => setOpen(false), children: [
+        "Mo\u017Cna zamkn\u0105\u0107 \u2014 numer ref. ",
+        /* @__PURE__ */ jsx("code", { className: "text-code-regular-sm", children: "KS-2025-0041" })
+      ] })
+    ] });
+  }
+};
+export {
+  Showcase,
+  Alert_stories_default as default
+};
+//# sourceMappingURL=Alert.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/primitives-v2/Alert.stories.tsx"],
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react-vite'\nimport * as React from 'react'\nimport { Alert } from './Alert'\n\nconst meta: Meta<typeof Alert> = {\n  title: 'Components/Alert',\n  component: Alert,\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 Alert (46:22). Four variants in Figma (info / success / warning / error); a `neutral` is exposed in code for non-urgent helper messages. Colors come from the `-v2` status tokens extracted directly from the Figma variants.',\n      },\n    },\n  },\n}\n\nexport default meta\n\ntype Story = StoryObj<typeof Alert>\n\nexport const Showcase: Story = {\n  name: 'Alert',\n  render: () => {\n    const [open, setOpen] = React.useState(true)\n    return (\n      <div className=\"flex max-w-[560px] flex-col gap-3\">\n        <Alert variant=\"info\" title=\"Synchronizacja w toku\">\n          Powi\u0105zane faktury zostan\u0105 zaktualizowane w ci\u0105gu kilku minut.\n        </Alert>\n        <Alert variant=\"success\" title=\"Faktura zatwierdzona\">\n          FV/2025/0041 zosta\u0142a przekazana do ksi\u0119gowo\u015Bci.\n        </Alert>\n        <Alert variant=\"warning\" title=\"Wymaga uwagi\">\n          Actual Cost = $0 dla 3 pozycji \u2014 uzupe\u0142nij alokacj\u0119 przed zamkni\u0119ciem.\n        </Alert>\n        <Alert variant=\"error\" title=\"Nie uda\u0142o si\u0119 wys\u0142a\u0107 do KSeF\">\n          Sprawd\u017A dane kontrahenta i spr\u00F3buj ponownie.\n        </Alert>\n        <Alert variant=\"neutral\" title=\"Wstrzymane\">\n          Powi\u0105zany transport oczekuje na potwierdzenie spedytora.\n        </Alert>\n        <Alert variant=\"info\">Bez tytu\u0142u \u2014 sama tre\u015B\u0107 opisowa.</Alert>\n        {open && (\n          <Alert variant=\"success\" title=\"Faktura wys\u0142ana do KSeF\" onDismiss={() => setOpen(false)}>\n            Mo\u017Cna zamkn\u0105\u0107 \u2014 numer ref. <code className=\"text-code-regular-sm\">KS-2025-0041</code>\n          </Alert>\n        )}\n      </div>\n    )\n  },\n}\n"],
+  "mappings": "AA+BQ,cAiBE,YAjBF;AA9BR,YAAY,WAAW;AACvB,SAAS,aAAa;AAEtB,MAAM,OAA2B;AAAA,EAC/B,OAAO;AAAA,EACP,WAAW;AAAA,EACX,YAAY;AAAA,IACV,aAAa;AAAA,MACX,SAAS;AAAA,MACT,QAAQ,CAAC,EAAE,MAAM,iBAAiB,OAAO,UAAU,CAAC;AAAA,IACtD;AAAA,IACA,MAAM;AAAA,MACJ,aAAa;AAAA,QACX,WACE;AAAA,MACJ;AAAA,IACF;AAAA,EACF;AACF;AAEA,IAAO,wBAAQ;AAIR,MAAM,WAAkB;AAAA,EAC7B,MAAM;AAAA,EACN,QAAQ,MAAM;AACZ,UAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAS,IAAI;AAC3C,WACE,qBAAC,SAAI,WAAU,qCACb;AAAA,0BAAC,SAAM,SAAQ,QAAO,OAAM,yBAAwB,0FAEpD;AAAA,MACA,oBAAC,SAAM,SAAQ,WAAU,OAAM,wBAAuB,4EAEtD;AAAA,MACA,oBAAC,SAAM,SAAQ,WAAU,OAAM,gBAAe,wGAE9C;AAAA,MACA,oBAAC,SAAM,SAAQ,SAAQ,OAAM,oDAA+B,kEAE5D;AAAA,MACA,oBAAC,SAAM,SAAQ,WAAU,OAAM,cAAa,2EAE5C;AAAA,MACA,oBAAC,SAAM,SAAQ,QAAO,kEAAgC;AAAA,MACrD,QACC,qBAAC,SAAM,SAAQ,WAAU,OAAM,gCAA0B,WAAW,MAAM,QAAQ,KAAK,GAAG;AAAA;AAAA,QAC7D,oBAAC,UAAK,WAAU,wBAAuB,0BAAY;AAAA,SAChF;AAAA,OAEJ;AAAA,EAEJ;AACF;",
+  "names": []
+}

package/dist/primitives-v2/Avatar.js

@@ -0,0 +1,93 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { User } from "lucide-react";
+import { cn } from "./utils.js";
+const SIZE_CLASSES = {
+  xs: "h-6 w-6 text-[10px]",
+  sm: "h-8 w-8 text-xs",
+  md: "h-10 w-10 text-sm",
+  lg: "h-12 w-12 text-base",
+  xl: "h-16 w-16 text-lg"
+};
+function deriveInitials(input) {
+  if (!input) return "";
+  const parts = input.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return "";
+  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+}
+const Avatar = React.forwardRef(function Avatar2({ size = "md", src, name, initials, icon, className, ...props }, ref) {
+  const [imageOk, setImageOk] = React.useState(true);
+  React.useEffect(() => {
+    setImageOk(true);
+  }, [src]);
+  const resolvedInitials = initials ?? deriveInitials(name);
+  const showImage = !!src && imageOk;
+  const showInitials = !showImage && !!resolvedInitials;
+  const showIcon = !showImage && !showInitials && !!icon;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref,
+      className: cn(
+        "relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden rounded-full bg-secondary-v2 text-muted-v2-foreground font-semibold uppercase",
+        SIZE_CLASSES[size],
+        className
+      ),
+      ...props,
+      children: [
+        showImage ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src,
+              alt: name ?? "",
+              className: "h-full w-full object-cover",
+              onError: () => setImageOk(false)
+            }
+          )
+        ) : showInitials ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: resolvedInitials }) : showIcon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "inline-flex h-1/2 w-1/2 items-center justify-center [&>svg]:h-full [&>svg]:w-full", children: icon }) : /* @__PURE__ */ jsx(User, { "aria-hidden": "true", className: "h-1/2 w-1/2" }),
+        !showImage && name ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: name }) : null
+      ]
+    }
+  );
+});
+function AvatarStack({ size = "md", max = 4, children }) {
+  const items = React.Children.toArray(children);
+  const visible = items.slice(0, max);
+  const overflow = items.length - visible.length;
+  return /* @__PURE__ */ jsxs("div", { className: "inline-flex", children: [
+    visible.map((child, i) => /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "relative inline-flex",
+          i > 0 ? "-ml-2" : null,
+          "ring-2 ring-background-v2 rounded-full"
+        ),
+        children: React.isValidElement(child) ? React.cloneElement(child, { size }) : child
+      },
+      i
+    )),
+    overflow > 0 ? /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: cn(
+          "-ml-2 ring-2 ring-background-v2",
+          "relative inline-flex shrink-0 select-none items-center justify-center rounded-full bg-secondary-v2 text-muted-v2-foreground font-semibold",
+          SIZE_CLASSES[size]
+        ),
+        children: [
+          "+",
+          overflow
+        ]
+      }
+    ) : null
+  ] });
+}
+export {
+  Avatar,
+  AvatarStack
+};
+//# sourceMappingURL=Avatar.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/primitives-v2/Avatar.tsx"],
+  "sourcesContent": ["import * as React from 'react'\nimport { User } from 'lucide-react'\nimport { cn } from './utils'\n\n/*\n  Figma source: FMS-Componenets \u2192 Avatar (component-set 46:67).\n  Note: Figma rate limit prevented re-walking the variants in this\n  revision. Colours follow the v2 neutral palette:\n\n    bg:    --secondary-v2  (#F4F4F5)\n    text:  --muted-v2-foreground (#A0A0AA \u2014 for initials when image fails)\n\n  Matrix: size \u00D7 type (image / initials / icon / placeholder). Image\n  load failures degrade gracefully to derived initials, then to the\n  passed `icon`, then to a generic user placeholder.\n*/\n\nexport type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n\nexport type AvatarProps = React.HTMLAttributes<HTMLSpanElement> & {\n  size?: AvatarSize\n  /** Image source. Falls back to initials/icon on error. */\n  src?: string\n  /** Alt text \u2014 also used as the source for derived initials when `initials` is not set. */\n  name?: string\n  /** Explicit initials (up to 2 characters). Wins over `name`-derived ones. */\n  initials?: string\n  /** Optional glyph. Renders when there's no image and no initials. */\n  icon?: React.ReactNode\n}\n\nconst SIZE_CLASSES: Record<AvatarSize, string> = {\n  xs: 'h-6 w-6 text-[10px]',\n  sm: 'h-8 w-8 text-xs',\n  md: 'h-10 w-10 text-sm',\n  lg: 'h-12 w-12 text-base',\n  xl: 'h-16 w-16 text-lg',\n}\n\nfunction deriveInitials(input: string | undefined): string {\n  if (!input) return ''\n  const parts = input.trim().split(/\\s+/).filter(Boolean)\n  if (parts.length === 0) return ''\n  if (parts.length === 1) return parts[0]!.slice(0, 2).toUpperCase()\n  return (parts[0]![0]! + parts[parts.length - 1]![0]!).toUpperCase()\n}\n\nexport const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>(function Avatar(\n  { size = 'md', src, name, initials, icon, className, ...props },\n  ref,\n) {\n  const [imageOk, setImageOk] = React.useState(true)\n  React.useEffect(() => {\n    setImageOk(true)\n  }, [src])\n\n  const resolvedInitials = initials ?? deriveInitials(name)\n  const showImage = !!src && imageOk\n  const showInitials = !showImage && !!resolvedInitials\n  const showIcon = !showImage && !showInitials && !!icon\n\n  return (\n    <span\n      ref={ref}\n      className={cn(\n        'relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden rounded-full bg-secondary-v2 text-muted-v2-foreground font-semibold uppercase',\n        SIZE_CLASSES[size],\n        className,\n      )}\n      {...props}\n    >\n      {showImage ? (\n        // eslint-disable-next-line @next/next/no-img-element\n        <img\n          src={src}\n          alt={name ?? ''}\n          className=\"h-full w-full object-cover\"\n          onError={() => setImageOk(false)}\n        />\n      ) : showInitials ? (\n        <span aria-hidden=\"true\">{resolvedInitials}</span>\n      ) : showIcon ? (\n        <span aria-hidden=\"true\" className=\"inline-flex h-1/2 w-1/2 items-center justify-center [&>svg]:h-full [&>svg]:w-full\">\n          {icon}\n        </span>\n      ) : (\n        <User aria-hidden=\"true\" className=\"h-1/2 w-1/2\" />\n      )}\n      {!showImage && name ? <span className=\"sr-only\">{name}</span> : null}\n    </span>\n  )\n})\n\n/*\n  Stack of avatars used for \"showing N participants\" patterns. Trailing\n  +N pill is added automatically when `max` is exceeded.\n*/\n\nexport type AvatarStackProps = {\n  size?: AvatarSize\n  /** Maximum avatars to render before collapsing into a +N pill. */\n  max?: number\n  children: React.ReactNode\n}\n\nexport function AvatarStack({ size = 'md', max = 4, children }: AvatarStackProps) {\n  const items = React.Children.toArray(children)\n  const visible = items.slice(0, max)\n  const overflow = items.length - visible.length\n  return (\n    <div className=\"inline-flex\">\n      {visible.map((child, i) => (\n        <span\n          key={i}\n          className={cn(\n            'relative inline-flex',\n            i > 0 ? '-ml-2' : null,\n            'ring-2 ring-background-v2 rounded-full',\n          )}\n        >\n          {React.isValidElement<{ size?: AvatarSize }>(child)\n            ? React.cloneElement(child, { size })\n            : child}\n        </span>\n      ))}\n      {overflow > 0 ? (\n        <span\n          className={cn(\n            '-ml-2 ring-2 ring-background-v2',\n            'relative inline-flex shrink-0 select-none items-center justify-center rounded-full bg-secondary-v2 text-muted-v2-foreground font-semibold',\n            SIZE_CLASSES[size],\n          )}\n        >\n          +{overflow}\n        </span>\n      ) : null}\n    </div>\n  )\n}\n"],
+  "mappings": "AA8DI,SAWI,KAXJ;AA9DJ,YAAY,WAAW;AACvB,SAAS,YAAY;AACrB,SAAS,UAAU;AA6BnB,MAAM,eAA2C;AAAA,EAC/C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,SAAS,eAAe,OAAmC;AACzD,MAAI,CAAC,MAAO,QAAO;AACnB,QAAM,QAAQ,MAAM,KAAK,EAAE,MAAM,KAAK,EAAE,OAAO,OAAO;AACtD,MAAI,MAAM,WAAW,EAAG,QAAO;AAC/B,MAAI,MAAM,WAAW,EAAG,QAAO,MAAM,CAAC,EAAG,MAAM,GAAG,CAAC,EAAE,YAAY;AACjE,UAAQ,MAAM,CAAC,EAAG,CAAC,IAAK,MAAM,MAAM,SAAS,CAAC,EAAG,CAAC,GAAI,YAAY;AACpE;AAEO,MAAM,SAAS,MAAM,WAAyC,SAASA,QAC5E,EAAE,OAAO,MAAM,KAAK,MAAM,UAAU,MAAM,WAAW,GAAG,MAAM,GAC9D,KACA;AACA,QAAM,CAAC,SAAS,UAAU,IAAI,MAAM,SAAS,IAAI;AACjD,QAAM,UAAU,MAAM;AACpB,eAAW,IAAI;AAAA,EACjB,GAAG,CAAC,GAAG,CAAC;AAER,QAAM,mBAAmB,YAAY,eAAe,IAAI;AACxD,QAAM,YAAY,CAAC,CAAC,OAAO;AAC3B,QAAM,eAAe,CAAC,aAAa,CAAC,CAAC;AACrC,QAAM,WAAW,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;AAElD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA,aAAa,IAAI;AAAA,QACjB;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA;AAAA,UAEC;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA,KAAK,QAAQ;AAAA,cACb,WAAU;AAAA,cACV,SAAS,MAAM,WAAW,KAAK;AAAA;AAAA,UACjC;AAAA,YACE,eACF,oBAAC,UAAK,eAAY,QAAQ,4BAAiB,IACzC,WACF,oBAAC,UAAK,eAAY,QAAO,WAAU,qFAChC,gBACH,IAEA,oBAAC,QAAK,eAAY,QAAO,WAAU,eAAc;AAAA,QAElD,CAAC,aAAa,OAAO,oBAAC,UAAK,WAAU,WAAW,gBAAK,IAAU;AAAA;AAAA;AAAA,EAClE;AAEJ,CAAC;AAcM,SAAS,YAAY,EAAE,OAAO,MAAM,MAAM,GAAG,SAAS,GAAqB;AAChF,QAAM,QAAQ,MAAM,SAAS,QAAQ,QAAQ;AAC7C,QAAM,UAAU,MAAM,MAAM,GAAG,GAAG;AAClC,QAAM,WAAW,MAAM,SAAS,QAAQ;AACxC,SACE,qBAAC,SAAI,WAAU,eACZ;AAAA,YAAQ,IAAI,CAAC,OAAO,MACnB;AAAA,MAAC;AAAA;AAAA,QAEC,WAAW;AAAA,UACT;AAAA,UACA,IAAI,IAAI,UAAU;AAAA,UAClB;AAAA,QACF;AAAA,QAEC,gBAAM,eAAsC,KAAK,IAC9C,MAAM,aAAa,OAAO,EAAE,KAAK,CAAC,IAClC;AAAA;AAAA,MATC;AAAA,IAUP,CACD;AAAA,IACA,WAAW,IACV;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA,aAAa,IAAI;AAAA,QACnB;AAAA,QACD;AAAA;AAAA,UACG;AAAA;AAAA;AAAA,IACJ,IACE;AAAA,KACN;AAEJ;",
+  "names": ["Avatar"]
+}

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

@@ -0,0 +1,57 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { User } from "lucide-react";
+import { Avatar, AvatarStack } from "./Avatar.js";
+const meta = {
+  title: "Components/Avatar",
+  component: Avatar,
+  parameters: {
+    docs: {
+      description: {
+        component: "Figma: FMS-Componenets \u2192 Avatar (46:67). Size \xD7 type matrix (image \xB7 initials \xB7 icon \xB7 placeholder). Falls back to initials on image load failure."
+      }
+    }
+  }
+};
+var Avatar_stories_default = meta;
+const Showcase = {
+  name: "Avatar",
+  render: () => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-8", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+      /* @__PURE__ */ jsx(Avatar, { size: "xs", name: "Anna Kowalska" }),
+      /* @__PURE__ */ jsx(Avatar, { size: "sm", name: "Anna Kowalska" }),
+      /* @__PURE__ */ jsx(Avatar, { size: "md", name: "Anna Kowalska" }),
+      /* @__PURE__ */ jsx(Avatar, { size: "lg", name: "Anna Kowalska" }),
+      /* @__PURE__ */ jsx(Avatar, { size: "xl", name: "Anna Kowalska" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2 text-caption-medium-md text-muted-v2-foreground", children: [
+        /* @__PURE__ */ jsx(Avatar, { size: "lg", src: "https://i.pravatar.cc/120?img=12", name: "Anna Kowalska" }),
+        "Image"
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2 text-caption-medium-md text-muted-v2-foreground", children: [
+        /* @__PURE__ */ jsx(Avatar, { size: "lg", name: "Anna Kowalska" }),
+        "Initials"
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2 text-caption-medium-md text-muted-v2-foreground", children: [
+        /* @__PURE__ */ jsx(Avatar, { size: "lg", icon: /* @__PURE__ */ jsx(User, {}) }),
+        "Icon"
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2 text-caption-medium-md text-muted-v2-foreground", children: [
+        /* @__PURE__ */ jsx(Avatar, { size: "lg" }),
+        "Placeholder"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(AvatarStack, { size: "md", max: 3, children: [
+      /* @__PURE__ */ jsx(Avatar, { name: "Anna Kowalska" }),
+      /* @__PURE__ */ jsx(Avatar, { name: "Bartek Lipi\u0144ski" }),
+      /* @__PURE__ */ jsx(Avatar, { name: "Cezary Mr\xF3z" }),
+      /* @__PURE__ */ jsx(Avatar, { name: "Dorota Nowak" }),
+      /* @__PURE__ */ jsx(Avatar, { name: "Edward O." })
+    ] })
+  ] })
+};
+export {
+  Showcase,
+  Avatar_stories_default as default
+};
+//# sourceMappingURL=Avatar.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/primitives-v2/Avatar.stories.tsx"],
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react-vite'\nimport { User } from 'lucide-react'\nimport { Avatar, AvatarStack } from './Avatar'\n\nconst meta: Meta<typeof Avatar> = {\n  title: 'Components/Avatar',\n  component: Avatar,\n  parameters: {\n    docs: {\n      description: {\n        component:\n          'Figma: FMS-Componenets \u2192 Avatar (46:67). Size \u00D7 type matrix (image \u00B7 initials \u00B7 icon \u00B7 placeholder). Falls back to initials on image load failure.',\n      },\n    },\n  },\n}\n\nexport default meta\n\ntype Story = StoryObj<typeof Avatar>\n\nexport const Showcase: Story = {\n  name: 'Avatar',\n  render: () => (\n    <div className=\"flex flex-col gap-8\">\n      <div className=\"flex items-center gap-4\">\n        <Avatar size=\"xs\" name=\"Anna Kowalska\" />\n        <Avatar size=\"sm\" name=\"Anna Kowalska\" />\n        <Avatar size=\"md\" name=\"Anna Kowalska\" />\n        <Avatar size=\"lg\" name=\"Anna Kowalska\" />\n        <Avatar size=\"xl\" name=\"Anna Kowalska\" />\n      </div>\n      <div className=\"flex items-center gap-4\">\n        <div className=\"flex flex-col items-center gap-2 text-caption-medium-md text-muted-v2-foreground\">\n          <Avatar size=\"lg\" src=\"https://i.pravatar.cc/120?img=12\" name=\"Anna Kowalska\" />\n          Image\n        </div>\n        <div className=\"flex flex-col items-center gap-2 text-caption-medium-md text-muted-v2-foreground\">\n          <Avatar size=\"lg\" name=\"Anna Kowalska\" />\n          Initials\n        </div>\n        <div className=\"flex flex-col items-center gap-2 text-caption-medium-md text-muted-v2-foreground\">\n          <Avatar size=\"lg\" icon={<User />} />\n          Icon\n        </div>\n        <div className=\"flex flex-col items-center gap-2 text-caption-medium-md text-muted-v2-foreground\">\n          <Avatar size=\"lg\" />\n          Placeholder\n        </div>\n      </div>\n      <AvatarStack size=\"md\" max={3}>\n        <Avatar name=\"Anna Kowalska\" />\n        <Avatar name=\"Bartek Lipi\u0144ski\" />\n        <Avatar name=\"Cezary Mr\u00F3z\" />\n        <Avatar name=\"Dorota Nowak\" />\n        <Avatar name=\"Edward O.\" />\n      </AvatarStack>\n    </div>\n  ),\n}\n"],
+  "mappings": "AAyBM,SACE,KADF;AAxBN,SAAS,YAAY;AACrB,SAAS,QAAQ,mBAAmB;AAEpC,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,2BACb;AAAA,0BAAC,UAAO,MAAK,MAAK,MAAK,iBAAgB;AAAA,MACvC,oBAAC,UAAO,MAAK,MAAK,MAAK,iBAAgB;AAAA,MACvC,oBAAC,UAAO,MAAK,MAAK,MAAK,iBAAgB;AAAA,MACvC,oBAAC,UAAO,MAAK,MAAK,MAAK,iBAAgB;AAAA,MACvC,oBAAC,UAAO,MAAK,MAAK,MAAK,iBAAgB;AAAA,OACzC;AAAA,IACA,qBAAC,SAAI,WAAU,2BACb;AAAA,2BAAC,SAAI,WAAU,oFACb;AAAA,4BAAC,UAAO,MAAK,MAAK,KAAI,oCAAmC,MAAK,iBAAgB;AAAA,QAAE;AAAA,SAElF;AAAA,MACA,qBAAC,SAAI,WAAU,oFACb;AAAA,4BAAC,UAAO,MAAK,MAAK,MAAK,iBAAgB;AAAA,QAAE;AAAA,SAE3C;AAAA,MACA,qBAAC,SAAI,WAAU,oFACb;AAAA,4BAAC,UAAO,MAAK,MAAK,MAAM,oBAAC,QAAK,GAAI;AAAA,QAAE;AAAA,SAEtC;AAAA,MACA,qBAAC,SAAI,WAAU,oFACb;AAAA,4BAAC,UAAO,MAAK,MAAK;AAAA,QAAE;AAAA,SAEtB;AAAA,OACF;AAAA,IACA,qBAAC,eAAY,MAAK,MAAK,KAAK,GAC1B;AAAA,0BAAC,UAAO,MAAK,iBAAgB;AAAA,MAC7B,oBAAC,UAAO,MAAK,wBAAkB;AAAA,MAC/B,oBAAC,UAAO,MAAK,kBAAc;AAAA,MAC3B,oBAAC,UAAO,MAAK,gBAAe;AAAA,MAC5B,oBAAC,UAAO,MAAK,aAAY;AAAA,OAC3B;AAAA,KACF;AAEJ;",
+  "names": []
+}

package/dist/primitives-v2/Badge.js

@@ -0,0 +1,50 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "./utils.js";
+const VARIANT_CLASSES = {
+  neutral: "bg-status-v2-neutral-bg border-status-v2-neutral-border text-status-v2-neutral-text",
+  primary: "bg-status-v2-primary-bg border-status-v2-primary-border text-status-v2-primary-text",
+  outline: "bg-status-v2-outline-bg border-status-v2-outline-border text-status-v2-outline-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",
+  teal: "bg-status-v2-teal-bg border-status-v2-teal-border text-status-v2-teal-text",
+  orange: "bg-status-v2-orange-bg border-status-v2-orange-border text-status-v2-orange-text",
+  sky: "bg-status-v2-sky-bg border-status-v2-sky-border text-status-v2-sky-text",
+  rose: "bg-status-v2-rose-bg border-status-v2-rose-border text-status-v2-rose-text"
+};
+const SIZE_CLASSES = {
+  sm: "h-5 px-2 text-label-semibold-xs",
+  md: "h-6 px-2.5 text-label-semibold-md"
+};
+const Badge = React.forwardRef(function Badge2({ variant = "neutral", size = "sm", withDot = false, className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref,
+      className: cn(
+        "inline-flex items-center gap-1 rounded-full border",
+        SIZE_CLASSES[size],
+        VARIANT_CLASSES[variant],
+        className
+      ),
+      ...props,
+      children: [
+        withDot ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "inline-block h-1.5 w-1.5 shrink-0 rounded-full bg-current opacity-80"
+          }
+        ) : null,
+        children
+      ]
+    }
+  );
+});
+export {
+  Badge
+};
+//# sourceMappingURL=Badge.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/primitives-v2/Badge.tsx"],
+  "sourcesContent": ["import * as React from 'react'\nimport { cn } from './utils'\n\n/*\n  Figma source: FMS-Componenets \u2192 Badge (component-set 45:26).\n\n  Variant matrix (extracted from each variant's `fills`/`strokes`/text fill):\n    | Variant   | Background | Border  | Text    |\n    |-----------|-----------|---------|---------|\n    | neutral   | #F4F4F5   | #E4E4E7 | #71717A |\n    | primary   | #E8EEF4   | #C9D9E7 | #18181A |\n    | outline   | #FFFFFF   | #E4E4E7 | #71717A |\n    | success   | #F0FDF4   | #BBF7D0 | #166534 |\n    | error     | #FEF2F2   | #FECACA | #991B1B |\n    | warning   | #FFFBEB   | #FDE68A | #92400E |\n    | info      | #EFF6FF   | #BFDBFE | #1E40AF |\n    | purple    | #EDE9FE   | #DDD6FE | #6D28D9 |\n    | teal      | #CCFBF1   | #99F6E4 | #0F766E |\n    | orange    | #FFEDD5   | #FED7AA | #C2410C |\n    | sky       | #E0F2FE   | #BAE6FD | #0369A1 |\n    | rose      | #FFE4E6   | #FECDD3 | #BE123C |\n\n  All variants pull from `-v2-status-*` tokens in tokens.css. Border\n  is rendered as a 1px outline (Figma uses 1px strokes on every variant).\n\n  Sizes:\n    sm: `label/semibold/xs` (12px / 16px) \u2014 Figma's default for tags.\n    md: `label/semibold/md` (14px / 20px).\n  Padding 2px / 10px. Radius 9999px (pill).\n*/\n\nexport type BadgeVariant =\n  | 'neutral'\n  | 'primary'\n  | 'outline'\n  | 'success'\n  | 'error'\n  | 'warning'\n  | 'info'\n  | 'purple'\n  | 'teal'\n  | 'orange'\n  | 'sky'\n  | 'rose'\n\nexport type BadgeSize = 'sm' | 'md'\n\nexport type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & {\n  variant?: BadgeVariant\n  size?: BadgeSize\n  /** Optional leading dot indicator (e.g. coloured status indicator). */\n  withDot?: boolean\n}\n\nconst VARIANT_CLASSES: Record<BadgeVariant, string> = {\n  neutral: 'bg-status-v2-neutral-bg border-status-v2-neutral-border text-status-v2-neutral-text',\n  primary: 'bg-status-v2-primary-bg border-status-v2-primary-border text-status-v2-primary-text',\n  outline: 'bg-status-v2-outline-bg border-status-v2-outline-border text-status-v2-outline-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  teal: 'bg-status-v2-teal-bg border-status-v2-teal-border text-status-v2-teal-text',\n  orange: 'bg-status-v2-orange-bg border-status-v2-orange-border text-status-v2-orange-text',\n  sky: 'bg-status-v2-sky-bg border-status-v2-sky-border text-status-v2-sky-text',\n  rose: 'bg-status-v2-rose-bg border-status-v2-rose-border text-status-v2-rose-text',\n}\n\nconst SIZE_CLASSES: Record<BadgeSize, string> = {\n  sm: 'h-5 px-2 text-label-semibold-xs',\n  md: 'h-6 px-2.5 text-label-semibold-md',\n}\n\nexport const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\n  { variant = 'neutral', size = 'sm', withDot = false, className, children, ...props },\n  ref,\n) {\n  return (\n    <span\n      ref={ref}\n      className={cn(\n        'inline-flex items-center gap-1 rounded-full border',\n        SIZE_CLASSES[size],\n        VARIANT_CLASSES[variant],\n        className,\n      )}\n      {...props}\n    >\n      {withDot ? (\n        <span\n          aria-hidden=\"true\"\n          className=\"inline-block h-1.5 w-1.5 shrink-0 rounded-full bg-current opacity-80\"\n        />\n      ) : null}\n      {children}\n    </span>\n  )\n})\n"],
+  "mappings": "AA+EI,SAWI,KAXJ;AA/EJ,YAAY,WAAW;AACvB,SAAS,UAAU;AAqDnB,MAAM,kBAAgD;AAAA,EACpD,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,MAAM;AACR;AAEA,MAAM,eAA0C;AAAA,EAC9C,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,MAAM,QAAQ,MAAM,WAAwC,SAASA,OAC1E,EAAE,UAAU,WAAW,OAAO,MAAM,UAAU,OAAO,WAAW,UAAU,GAAG,MAAM,GACnF,KACA;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA,aAAa,IAAI;AAAA,QACjB,gBAAgB,OAAO;AAAA,QACvB;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,kBACC;AAAA,UAAC;AAAA;AAAA,YACC,eAAY;AAAA,YACZ,WAAU;AAAA;AAAA,QACZ,IACE;AAAA,QACH;AAAA;AAAA;AAAA,EACH;AAEJ,CAAC;",
+  "names": ["Badge"]
+}

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

@@ -0,0 +1,66 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Badge } from "./Badge.js";
+const meta = {
+  title: "Components/Badge",
+  component: Badge,
+  parameters: {
+    backgrounds: {
+      default: "figma-surface",
+      values: [{ name: "figma-surface", value: "#F8F8FA" }]
+    },
+    docs: {
+      description: {
+        component: "Figma: FMS-Componenets \u2192 Badge (45:26). 12 variants \xD7 2 sizes. Colors come from the `-v2` status palette (extracted from Figma). Use `Tag` for filter chips, `Badge` for short status/count pills."
+      }
+    }
+  }
+};
+var Badge_stories_default = meta;
+const VARIANTS = [
+  "neutral",
+  "primary",
+  "outline",
+  "success",
+  "error",
+  "warning",
+  "info",
+  "purple",
+  "teal",
+  "orange",
+  "sky",
+  "rose"
+];
+const Showcase = {
+  name: "Badge",
+  render: () => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-8", children: [
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[80px_repeat(2,_auto)] items-center gap-x-6 gap-y-3", children: [
+      /* @__PURE__ */ jsx("span", {}),
+      /* @__PURE__ */ jsx("span", { className: "text-label-semibold-xs uppercase tracking-wider text-status-v2-neutral-text", children: "sm" }),
+      /* @__PURE__ */ jsx("span", { className: "text-label-semibold-xs uppercase tracking-wider text-status-v2-neutral-text", children: "md" }),
+      VARIANTS.map((v) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "text-label-medium-md text-foreground-v2", children: v }),
+        /* @__PURE__ */ jsx(Badge, { size: "sm", variant: v, children: "Label" }),
+        /* @__PURE__ */ jsx(Badge, { size: "md", variant: v, children: "Label" })
+      ] }, v))
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+      /* @__PURE__ */ jsx(Badge, { variant: "success", withDot: true, children: "Online" }),
+      /* @__PURE__ */ jsx(Badge, { variant: "warning", withDot: true, children: "Przekroczony termin" }),
+      /* @__PURE__ */ jsx(Badge, { variant: "error", withDot: true, children: "Zablokowany" }),
+      /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2 text-body-regular-sm text-foreground-v2", children: [
+        "Faktury ",
+        /* @__PURE__ */ jsx(Badge, { variant: "primary", children: "12" })
+      ] }),
+      /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2 text-body-regular-sm text-foreground-v2", children: [
+        "Powiadomienia ",
+        /* @__PURE__ */ jsx(Badge, { variant: "error", children: "99+" })
+      ] })
+    ] })
+  ] })
+};
+export {
+  Showcase,
+  Badge_stories_default as default
+};
+//# sourceMappingURL=Badge.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/primitives-v2/Badge.stories.tsx"],
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react-vite'\nimport * as React from 'react'\nimport { Badge, type BadgeVariant } from './Badge'\n\nconst meta: Meta<typeof Badge> = {\n  title: 'Components/Badge',\n  component: Badge,\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 Badge (45:26). 12 variants \u00D7 2 sizes. Colors come from the `-v2` status palette (extracted from Figma). Use `Tag` for filter chips, `Badge` for short status/count pills.',\n      },\n    },\n  },\n}\n\nexport default meta\n\ntype Story = StoryObj<typeof Badge>\n\nconst VARIANTS: BadgeVariant[] = [\n  'neutral',\n  'primary',\n  'outline',\n  'success',\n  'error',\n  'warning',\n  'info',\n  'purple',\n  'teal',\n  'orange',\n  'sky',\n  'rose',\n]\n\nexport const Showcase: Story = {\n  name: 'Badge',\n  render: () => (\n    <div className=\"flex flex-col gap-8\">\n      <div className=\"grid grid-cols-[80px_repeat(2,_auto)] items-center gap-x-6 gap-y-3\">\n        <span />\n        <span className=\"text-label-semibold-xs uppercase tracking-wider text-status-v2-neutral-text\">sm</span>\n        <span className=\"text-label-semibold-xs uppercase tracking-wider text-status-v2-neutral-text\">md</span>\n        {VARIANTS.map((v) => (\n          <React.Fragment key={v}>\n            <span className=\"text-label-medium-md text-foreground-v2\">{v}</span>\n            <Badge size=\"sm\" variant={v}>\n              Label\n            </Badge>\n            <Badge size=\"md\" variant={v}>\n              Label\n            </Badge>\n          </React.Fragment>\n        ))}\n      </div>\n      <div className=\"flex flex-wrap items-center gap-3\">\n        <Badge variant=\"success\" withDot>\n          Online\n        </Badge>\n        <Badge variant=\"warning\" withDot>\n          Przekroczony termin\n        </Badge>\n        <Badge variant=\"error\" withDot>\n          Zablokowany\n        </Badge>\n        <span className=\"inline-flex items-center gap-2 text-body-regular-sm text-foreground-v2\">\n          Faktury <Badge variant=\"primary\">12</Badge>\n        </span>\n        <span className=\"inline-flex items-center gap-2 text-body-regular-sm text-foreground-v2\">\n          Powiadomienia <Badge variant=\"error\">99+</Badge>\n        </span>\n      </div>\n    </div>\n  ),\n}\n"],
+  "mappings": "AA6CQ,cAIE,YAJF;AA5CR,YAAY,WAAW;AACvB,SAAS,aAAgC;AAEzC,MAAM,OAA2B;AAAA,EAC/B,OAAO;AAAA,EACP,WAAW;AAAA,EACX,YAAY;AAAA,IACV,aAAa;AAAA,MACX,SAAS;AAAA,MACT,QAAQ,CAAC,EAAE,MAAM,iBAAiB,OAAO,UAAU,CAAC;AAAA,IACtD;AAAA,IACA,MAAM;AAAA,MACJ,aAAa;AAAA,QACX,WACE;AAAA,MACJ;AAAA,IACF;AAAA,EACF;AACF;AAEA,IAAO,wBAAQ;AAIf,MAAM,WAA2B;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEO,MAAM,WAAkB;AAAA,EAC7B,MAAM;AAAA,EACN,QAAQ,MACN,qBAAC,SAAI,WAAU,uBACb;AAAA,yBAAC,SAAI,WAAU,sEACb;AAAA,0BAAC,UAAK;AAAA,MACN,oBAAC,UAAK,WAAU,+EAA8E,gBAAE;AAAA,MAChG,oBAAC,UAAK,WAAU,+EAA8E,gBAAE;AAAA,MAC/F,SAAS,IAAI,CAAC,MACb,qBAAC,MAAM,UAAN,EACC;AAAA,4BAAC,UAAK,WAAU,2CAA2C,aAAE;AAAA,QAC7D,oBAAC,SAAM,MAAK,MAAK,SAAS,GAAG,mBAE7B;AAAA,QACA,oBAAC,SAAM,MAAK,MAAK,SAAS,GAAG,mBAE7B;AAAA,WAPmB,CAQrB,CACD;AAAA,OACH;AAAA,IACA,qBAAC,SAAI,WAAU,qCACb;AAAA,0BAAC,SAAM,SAAQ,WAAU,SAAO,MAAC,oBAEjC;AAAA,MACA,oBAAC,SAAM,SAAQ,WAAU,SAAO,MAAC,iCAEjC;AAAA,MACA,oBAAC,SAAM,SAAQ,SAAQ,SAAO,MAAC,yBAE/B;AAAA,MACA,qBAAC,UAAK,WAAU,0EAAyE;AAAA;AAAA,QAC/E,oBAAC,SAAM,SAAQ,WAAU,gBAAE;AAAA,SACrC;AAAA,MACA,qBAAC,UAAK,WAAU,0EAAyE;AAAA;AAAA,QACzE,oBAAC,SAAM,SAAQ,SAAQ,iBAAG;AAAA,SAC1C;AAAA,OACF;AAAA,KACF;AAEJ;",
+  "names": []
+}

package/dist/primitives-v2/Breadcrumb.js

@@ -0,0 +1,53 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "./utils.js";
+function Breadcrumb({
+  items,
+  maxItems = 4,
+  separator,
+  className,
+  ...props
+}) {
+  const collapsed = items.length > maxItems;
+  const visibleItems = collapsed ? [items[0], "ellipsis", ...items.slice(items.length - (maxItems - 2))] : items;
+  const sep = separator ?? /* @__PURE__ */ jsx("span", { className: "text-muted-v2-foreground/70 select-none", "aria-hidden": "true", children: "/" });
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className: cn("w-full", className), ...props, children: /* @__PURE__ */ jsx("ol", { className: "flex flex-wrap items-center gap-1.5 text-body-regular-sm", children: visibleItems.map((item, idx) => {
+    const last = idx === visibleItems.length - 1;
+    if (item === "ellipsis") {
+      return /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "text-muted-v2-foreground",
+            "aria-label": `${items.length - (maxItems - 1)} ukrytych element\xF3w`,
+            children: "\u2026"
+          }
+        ),
+        !last ? sep : null
+      ] }, `ellipsis-${idx}`);
+    }
+    return /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-1.5", children: [
+      last ? /* @__PURE__ */ jsx("span", { "aria-current": "page", className: "text-foreground-v2 font-medium", children: item.label }) : item.href ? /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: item.href,
+          onClick: item.onClick,
+          className: "rounded-sm text-muted-v2-foreground transition-colors hover:text-foreground-v2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-v2 focus-visible:ring-offset-1",
+          children: item.label
+        }
+      ) : /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: item.onClick,
+          className: "rounded-sm text-muted-v2-foreground transition-colors hover:text-foreground-v2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-v2 focus-visible:ring-offset-1",
+          children: item.label
+        }
+      ),
+      !last ? sep : null
+    ] }, `${item.label}-${idx}`);
+  }) }) });
+}
+export {
+  Breadcrumb
+};
+//# sourceMappingURL=Breadcrumb.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/primitives-v2/Breadcrumb.tsx"],
+  "sourcesContent": ["import * as React from 'react'\nimport { cn } from './utils'\n\n/*\n  Figma source: FMS-Componenets \u2192 Breadcrumb (component-set 148:411).\n  Variants by depth \u2014 we expose it via the items array length rather\n  than discrete variant props. Long trails auto-collapse with an\n  ellipsis when `maxItems` is exceeded.\n\n  Composition over magic: callers pass an array of `BreadcrumbItem`s\n  describing each crumb (`href`, `label`, optional `onClick`). The\n  final crumb (current page) is automatically styled as non-link and\n  marked `aria-current=\"page\"`.\n*/\n\nexport type BreadcrumbItem = {\n  label: string\n  href?: string\n  onClick?: (e: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void\n}\n\nexport type BreadcrumbProps = React.HTMLAttributes<HTMLElement> & {\n  items: BreadcrumbItem[]\n  /** Beyond this number, intermediate crumbs collapse into \"\u2026\". Default: 4. */\n  maxItems?: number\n  /** Custom separator. Defaults to a \"/\" slash (matches Figma). */\n  separator?: React.ReactNode\n}\n\nexport function Breadcrumb({\n  items,\n  maxItems = 4,\n  separator,\n  className,\n  ...props\n}: BreadcrumbProps) {\n  const collapsed = items.length > maxItems\n  const visibleItems: Array<BreadcrumbItem | 'ellipsis'> = collapsed\n    ? [items[0]!, 'ellipsis', ...items.slice(items.length - (maxItems - 2))]\n    : items\n\n  const sep = separator ?? (\n    <span className=\"text-muted-v2-foreground/70 select-none\" aria-hidden=\"true\">\n      /\n    </span>\n  )\n\n  return (\n    <nav aria-label=\"Breadcrumb\" className={cn('w-full', className)} {...props}>\n      <ol className=\"flex flex-wrap items-center gap-1.5 text-body-regular-sm\">\n        {visibleItems.map((item, idx) => {\n          const last = idx === visibleItems.length - 1\n          if (item === 'ellipsis') {\n            return (\n              <li key={`ellipsis-${idx}`} className=\"flex items-center gap-1.5\">\n                <span\n                  className=\"text-muted-v2-foreground\"\n                  aria-label={`${items.length - (maxItems - 1)} ukrytych element\u00F3w`}\n                >\n                  \u2026\n                </span>\n                {!last ? sep : null}\n              </li>\n            )\n          }\n          return (\n            <li key={`${item.label}-${idx}`} className=\"flex items-center gap-1.5\">\n              {last ? (\n                <span aria-current=\"page\" className=\"text-foreground-v2 font-medium\">\n                  {item.label}\n                </span>\n              ) : item.href ? (\n                <a\n                  href={item.href}\n                  onClick={item.onClick}\n                  className=\"rounded-sm text-muted-v2-foreground transition-colors hover:text-foreground-v2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-v2 focus-visible:ring-offset-1\"\n                >\n                  {item.label}\n                </a>\n              ) : (\n                <button\n                  type=\"button\"\n                  onClick={item.onClick}\n                  className=\"rounded-sm text-muted-v2-foreground transition-colors hover:text-foreground-v2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-v2 focus-visible:ring-offset-1\"\n                >\n                  {item.label}\n                </button>\n              )}\n              {!last ? sep : null}\n            </li>\n          )\n        })}\n      </ol>\n    </nav>\n  )\n}\n"],
+  "mappings": "AA0CI,cAYU,YAZV;AAzCJ,SAAS,UAAU;AA4BZ,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,QAAM,YAAY,MAAM,SAAS;AACjC,QAAM,eAAmD,YACrD,CAAC,MAAM,CAAC,GAAI,YAAY,GAAG,MAAM,MAAM,MAAM,UAAU,WAAW,EAAE,CAAC,IACrE;AAEJ,QAAM,MAAM,aACV,oBAAC,UAAK,WAAU,2CAA0C,eAAY,QAAO,eAE7E;AAGF,SACE,oBAAC,SAAI,cAAW,cAAa,WAAW,GAAG,UAAU,SAAS,GAAI,GAAG,OACnE,8BAAC,QAAG,WAAU,4DACX,uBAAa,IAAI,CAAC,MAAM,QAAQ;AAC/B,UAAM,OAAO,QAAQ,aAAa,SAAS;AAC3C,QAAI,SAAS,YAAY;AACvB,aACE,qBAAC,QAA2B,WAAU,6BACpC;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,cAAY,GAAG,MAAM,UAAU,WAAW,EAAE;AAAA,YAC7C;AAAA;AAAA,QAED;AAAA,QACC,CAAC,OAAO,MAAM;AAAA,WAPR,YAAY,GAAG,EAQxB;AAAA,IAEJ;AACA,WACE,qBAAC,QAAgC,WAAU,6BACxC;AAAA,aACC,oBAAC,UAAK,gBAAa,QAAO,WAAU,kCACjC,eAAK,OACR,IACE,KAAK,OACP;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,KAAK;AAAA,UACX,SAAS,KAAK;AAAA,UACd,WAAU;AAAA,UAET,eAAK;AAAA;AAAA,MACR,IAEA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS,KAAK;AAAA,UACd,WAAU;AAAA,UAET,eAAK;AAAA;AAAA,MACR;AAAA,MAED,CAAC,OAAO,MAAM;AAAA,SAtBR,GAAG,KAAK,KAAK,IAAI,GAAG,EAuB7B;AAAA,EAEJ,CAAC,GACH,GACF;AAEJ;",
+  "names": []
+}

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

@@ -0,0 +1,70 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Breadcrumb } from "./Breadcrumb.js";
+const meta = {
+  title: "Components/Breadcrumb",
+  component: Breadcrumb,
+  parameters: {
+    docs: {
+      description: {
+        component: "Figma: FMS-Componenets \u2192 Breadcrumb (148:411). Variants are by depth \u2014 the same component handles any number of crumbs and auto-collapses long trails with an ellipsis."
+      }
+    }
+  }
+};
+var Breadcrumb_stories_default = meta;
+const Showcase = {
+  name: "Breadcrumb",
+  render: () => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsx(Breadcrumb, { items: [{ label: "Dashboard" }] }),
+    /* @__PURE__ */ jsx(
+      Breadcrumb,
+      {
+        items: [
+          { label: "Faktury", href: "/invoices" },
+          { label: "FV/2025/0041" }
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Breadcrumb,
+      {
+        items: [
+          { label: "Teczki", href: "/folders" },
+          { label: "SPOL-2025-041", href: "/folders/spol-2025-041" },
+          { label: "Faktury" }
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Breadcrumb,
+      {
+        items: [
+          { label: "Teczki", href: "/folders" },
+          { label: "SPOL-2025-041", href: "/folders/spol-2025-041" },
+          { label: "Faktury", href: "/folders/spol-2025-041/invoices" },
+          { label: "FV/2025/0041" }
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Breadcrumb,
+      {
+        maxItems: 4,
+        items: [
+          { label: "Workspace", href: "/" },
+          { label: "Klienci", href: "/clients" },
+          { label: "Maersk Line A/S", href: "/clients/maersk" },
+          { label: "Teczki", href: "/clients/maersk/folders" },
+          { label: "SPOL-2025-041", href: "/folders/spol-2025-041" },
+          { label: "Faktury", href: "/folders/spol-2025-041/invoices" },
+          { label: "FV/2025/0041" }
+        ]
+      }
+    )
+  ] })
+};
+export {
+  Showcase,
+  Breadcrumb_stories_default as default
+};
+//# sourceMappingURL=Breadcrumb.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/primitives-v2/Breadcrumb.stories.tsx"],
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react-vite'\nimport { Breadcrumb } from './Breadcrumb'\n\nconst meta: Meta<typeof Breadcrumb> = {\n  title: 'Components/Breadcrumb',\n  component: Breadcrumb,\n  parameters: {\n    docs: {\n      description: {\n        component:\n          'Figma: FMS-Componenets \u2192 Breadcrumb (148:411). Variants are by depth \u2014 the same component handles any number of crumbs and auto-collapses long trails with an ellipsis.',\n      },\n    },\n  },\n}\n\nexport default meta\n\ntype Story = StoryObj<typeof Breadcrumb>\n\nexport const Showcase: Story = {\n  name: 'Breadcrumb',\n  render: () => (\n    <div className=\"flex flex-col gap-3\">\n      <Breadcrumb items={[{ label: 'Dashboard' }]} />\n      <Breadcrumb\n        items={[\n          { label: 'Faktury', href: '/invoices' },\n          { label: 'FV/2025/0041' },\n        ]}\n      />\n      <Breadcrumb\n        items={[\n          { label: 'Teczki', href: '/folders' },\n          { label: 'SPOL-2025-041', href: '/folders/spol-2025-041' },\n          { label: 'Faktury' },\n        ]}\n      />\n      <Breadcrumb\n        items={[\n          { label: 'Teczki', href: '/folders' },\n          { label: 'SPOL-2025-041', href: '/folders/spol-2025-041' },\n          { label: 'Faktury', href: '/folders/spol-2025-041/invoices' },\n          { label: 'FV/2025/0041' },\n        ]}\n      />\n      <Breadcrumb\n        maxItems={4}\n        items={[\n          { label: 'Workspace', href: '/' },\n          { label: 'Klienci', href: '/clients' },\n          { label: 'Maersk Line A/S', href: '/clients/maersk' },\n          { label: 'Teczki', href: '/clients/maersk/folders' },\n          { label: 'SPOL-2025-041', href: '/folders/spol-2025-041' },\n          { label: 'Faktury', href: '/folders/spol-2025-041/invoices' },\n          { label: 'FV/2025/0041' },\n        ]}\n      />\n    </div>\n  ),\n}\n"],
+  "mappings": "AAuBI,SACE,KADF;AAtBJ,SAAS,kBAAkB;AAE3B,MAAM,OAAgC;AAAA,EACpC,OAAO;AAAA,EACP,WAAW;AAAA,EACX,YAAY;AAAA,IACV,MAAM;AAAA,MACJ,aAAa;AAAA,QACX,WACE;AAAA,MACJ;AAAA,IACF;AAAA,EACF;AACF;AAEA,IAAO,6BAAQ;AAIR,MAAM,WAAkB;AAAA,EAC7B,MAAM;AAAA,EACN,QAAQ,MACN,qBAAC,SAAI,WAAU,uBACb;AAAA,wBAAC,cAAW,OAAO,CAAC,EAAE,OAAO,YAAY,CAAC,GAAG;AAAA,IAC7C;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,EAAE,OAAO,WAAW,MAAM,YAAY;AAAA,UACtC,EAAE,OAAO,eAAe;AAAA,QAC1B;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,EAAE,OAAO,UAAU,MAAM,WAAW;AAAA,UACpC,EAAE,OAAO,iBAAiB,MAAM,yBAAyB;AAAA,UACzD,EAAE,OAAO,UAAU;AAAA,QACrB;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,EAAE,OAAO,UAAU,MAAM,WAAW;AAAA,UACpC,EAAE,OAAO,iBAAiB,MAAM,yBAAyB;AAAA,UACzD,EAAE,OAAO,WAAW,MAAM,kCAAkC;AAAA,UAC5D,EAAE,OAAO,eAAe;AAAA,QAC1B;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,OAAO;AAAA,UACL,EAAE,OAAO,aAAa,MAAM,IAAI;AAAA,UAChC,EAAE,OAAO,WAAW,MAAM,WAAW;AAAA,UACrC,EAAE,OAAO,mBAAmB,MAAM,kBAAkB;AAAA,UACpD,EAAE,OAAO,UAAU,MAAM,0BAA0B;AAAA,UACnD,EAAE,OAAO,iBAAiB,MAAM,yBAAyB;AAAA,UACzD,EAAE,OAAO,WAAW,MAAM,kCAAkC;AAAA,UAC5D,EAAE,OAAO,eAAe;AAAA,QAC1B;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
+  "names": []
+}