@flanksource/clicky-ui 0.2.17 → 0.2.19

package/dist/layout/Panel.d.ts

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+import { StaticIconComponent } from '../data/Icon';
+export type PanelTone = "default" | "danger" | "warning" | "success" | "info";
+export type PanelProps = {
+    /** Header title. Omit (with no icon/count/actions) to render a headerless card. */
+    title?: ReactNode;
+    /** Optional leading icon. */
+    icon?: string | StaticIconComponent;
+    /** Optional count pill shown after the title. */
+    count?: number;
+    /** Right-aligned header content (copy buttons, summaries, links). */
+    actions?: ReactNode;
+    /** Optional footer row below the body. */
+    footer?: ReactNode;
+    /** Semantic left-border accent. */
+    tone?: PanelTone;
+    /** Pad the body. Defaults to true; pass false for flush row lists. */
+    padded?: boolean;
+    /** Classes applied to the panel root. */
+    className?: string;
+    /** Classes applied to the header row. */
+    headerClassName?: string;
+    /** Classes applied to the body. */
+    bodyClassName?: string;
+    /** Panel content. */
+    children: ReactNode;
+};
+/**
+ * A non-collapsible carded surface with an optional header. Use for content
+ * panels (checks, results, comments) where {@link Section}'s disclosure
+ * behaviour isn't wanted. Sits on `bg-card` with a border and rounded corners.
+ */
+export declare function Panel({ title, icon, count, actions, footer, tone, padded, className, headerClassName, bodyClassName, children, }: PanelProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Panel.d.ts.map

package/dist/layout/Panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../src/layout/Panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAQ,KAAK,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAE9D,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;AAE9E,MAAM,MAAM,UAAU,GAAG;IACvB,mFAAmF;IACnF,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qEAAqE;IACrE,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,mCAAmC;IACnC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,sEAAsE;IACtE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mCAAmC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qBAAqB;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAUF;;;;GAIG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,IAAI,EACJ,KAAK,EACL,OAAO,EACP,MAAM,EACN,IAAgB,EAChB,MAAa,EACb,SAAS,EACT,eAAe,EACf,aAAa,EACb,QAAQ,GACT,EAAE,UAAU,2CAwCZ"}

package/dist/layout/Panel.js

@@ -0,0 +1,66 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+import { Icon } from "../data/Icon.js";
+const toneRing = {
+  default: "",
+  danger: "border-l-2 border-l-red-500",
+  warning: "border-l-2 border-l-yellow-500",
+  success: "border-l-2 border-l-green-500",
+  info: "border-l-2 border-l-blue-500"
+};
+function Panel({
+  title,
+  icon,
+  count,
+  actions,
+  footer,
+  tone = "default",
+  padded = true,
+  className,
+  headerClassName,
+  bodyClassName,
+  children
+}) {
+  const hasHeader = title !== void 0 || icon !== void 0 || actions !== void 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "rounded-md border border-border bg-card overflow-hidden",
+        toneRing[tone],
+        className
+      ),
+      children: [
+        hasHeader && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex items-center gap-2 px-density-3 py-density-2 border-b border-border",
+              headerClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+                icon && /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    ...typeof icon === "string" ? { name: icon } : { icon },
+                    className: "text-base text-muted-foreground"
+                  }
+                ),
+                title !== void 0 && /* @__PURE__ */ jsx("span", { className: "font-medium text-sm truncate text-card-foreground", children: title }),
+                count !== void 0 && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center rounded-full bg-muted px-1.5 text-[11px] font-semibold text-muted-foreground", children: count })
+              ] }),
+              actions && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-1", children: actions })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: cn(padded && "px-density-3 py-density-2", bodyClassName), children }),
+        footer && /* @__PURE__ */ jsx("div", { className: "px-density-3 py-density-2 border-t border-border", children: footer })
+      ]
+    }
+  );
+}
+export {
+  Panel
+};
+//# sourceMappingURL=Panel.js.map

package/dist/layout/Panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.js","sources":["../../src/layout/Panel.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\n\nexport type PanelTone = \"default\" | \"danger\" | \"warning\" | \"success\" | \"info\";\n\nexport type PanelProps = {\n  /** Header title. Omit (with no icon/count/actions) to render a headerless card. */\n  title?: ReactNode;\n  /** Optional leading icon. */\n  icon?: string | StaticIconComponent;\n  /** Optional count pill shown after the title. */\n  count?: number;\n  /** Right-aligned header content (copy buttons, summaries, links). */\n  actions?: ReactNode;\n  /** Optional footer row below the body. */\n  footer?: ReactNode;\n  /** Semantic left-border accent. */\n  tone?: PanelTone;\n  /** Pad the body. Defaults to true; pass false for flush row lists. */\n  padded?: boolean;\n  /** Classes applied to the panel root. */\n  className?: string;\n  /** Classes applied to the header row. */\n  headerClassName?: string;\n  /** Classes applied to the body. */\n  bodyClassName?: string;\n  /** Panel content. */\n  children: ReactNode;\n};\n\nconst toneRing: Record<PanelTone, string> = {\n  default: \"\",\n  danger: \"border-l-2 border-l-red-500\",\n  warning: \"border-l-2 border-l-yellow-500\",\n  success: \"border-l-2 border-l-green-500\",\n  info: \"border-l-2 border-l-blue-500\",\n};\n\n/**\n * A non-collapsible carded surface with an optional header. Use for content\n * panels (checks, results, comments) where {@link Section}'s disclosure\n * behaviour isn't wanted. Sits on `bg-card` with a border and rounded corners.\n */\nexport function Panel({\n  title,\n  icon,\n  count,\n  actions,\n  footer,\n  tone = \"default\",\n  padded = true,\n  className,\n  headerClassName,\n  bodyClassName,\n  children,\n}: PanelProps) {\n  const hasHeader = title !== undefined || icon !== undefined || actions !== undefined;\n  return (\n    <div\n      className={cn(\n        \"rounded-md border border-border bg-card overflow-hidden\",\n        toneRing[tone],\n        className,\n      )}\n    >\n      {hasHeader && (\n        <div\n          className={cn(\n            \"flex items-center gap-2 px-density-3 py-density-2 border-b border-border\",\n            headerClassName,\n          )}\n        >\n          <div className=\"flex min-w-0 flex-1 items-center gap-2\">\n            {icon && (\n              <Icon\n                {...(typeof icon === \"string\" ? { name: icon } : { icon })}\n                className=\"text-base text-muted-foreground\"\n              />\n            )}\n            {title !== undefined && (\n              <span className=\"font-medium text-sm truncate text-card-foreground\">{title}</span>\n            )}\n            {count !== undefined && (\n              <span className=\"inline-flex items-center justify-center rounded-full bg-muted px-1.5 text-[11px] font-semibold text-muted-foreground\">\n                {count}\n              </span>\n            )}\n          </div>\n          {actions && <div className=\"flex shrink-0 items-center gap-1\">{actions}</div>}\n        </div>\n      )}\n      <div className={cn(padded && \"px-density-3 py-density-2\", bodyClassName)}>{children}</div>\n      {footer && <div className=\"px-density-3 py-density-2 border-t border-border\">{footer}</div>}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;AA+BA,MAAM,WAAsC;AAAA,EAC1C,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAAS;AAAA,EACT,MAAM;AACR;AAOO,SAAS,MAAM;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAe;AACb,QAAM,YAAY,UAAU,UAAa,SAAS,UAAa,YAAY;AAC3E,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,SAAS,IAAI;AAAA,QACb;AAAA,MAAA;AAAA,MAGD,UAAA;AAAA,QAAA,aACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,YAGF,UAAA;AAAA,cAAA,qBAAC,OAAA,EAAI,WAAU,0CACZ,UAAA;AAAA,gBAAA,QACC;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACE,GAAI,OAAO,SAAS,WAAW,EAAE,MAAM,KAAA,IAAS,EAAE,KAAA;AAAA,oBACnD,WAAU;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAGb,UAAU,UACT,oBAAC,QAAA,EAAK,WAAU,qDAAqD,UAAA,OAAM;AAAA,gBAE5E,UAAU,UACT,oBAAC,QAAA,EAAK,WAAU,wHACb,UAAA,MAAA,CACH;AAAA,cAAA,GAEJ;AAAA,cACC,WAAW,oBAAC,OAAA,EAAI,WAAU,oCAAoC,UAAA,QAAA,CAAQ;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAG3E,oBAAC,SAAI,WAAW,GAAG,UAAU,6BAA6B,aAAa,GAAI,UAAS;AAAA,QACnF,UAAU,oBAAC,OAAA,EAAI,WAAU,oDAAoD,UAAA,OAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG3F;"}

package/dist/layout/Tabs.cjs

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const utils = require("../lib/utils.cjs");
+const TabButton = require("../data/TabButton.cjs");
+function Tabs({ tabs, value, onChange, variant = "underline", className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "tablist",
+      className: utils.cn(
+        "flex items-center gap-density-1",
+        variant === "underline" && "border-b border-border",
+        className
+      ),
+      children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
+        TabButton.TabButton,
+        {
+          active: tab.id === value,
+          onClick: () => {
+            if (!tab.disabled) onChange(tab.id);
+          },
+          label: tab.label,
+          variant,
+          ...tab.icon !== void 0 ? { icon: tab.icon } : {},
+          ...tab.count !== void 0 ? { count: tab.count } : {},
+          ...tab.countColor !== void 0 ? { countColor: tab.countColor } : {},
+          ...tab.disabled ? { className: "opacity-50 pointer-events-none" } : {}
+        },
+        tab.id
+      ))
+    }
+  );
+}
+exports.Tabs = Tabs;
+//# sourceMappingURL=Tabs.cjs.map

package/dist/layout/Tabs.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.cjs","sources":["../../src/layout/Tabs.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { TabButton, type TabButtonVariant } from \"../data/TabButton\";\nimport type { StaticIconComponent } from \"../data/Icon\";\n\nexport type TabItem = {\n  /** Stable id; also the value compared against the selected `value`. */\n  id: string;\n  /** Visible label. */\n  label: ReactNode;\n  /** Optional leading icon (icon name or component). */\n  icon?: string | StaticIconComponent;\n  /** Optional count badge; hidden when zero. */\n  count?: number;\n  /** Classes for the count badge background. */\n  countColor?: string;\n  /** Disables selecting this tab. */\n  disabled?: boolean;\n};\n\nexport type TabsProps = {\n  /** Tabs to render, in order. */\n  tabs: TabItem[];\n  /** Currently selected tab id. */\n  value: string;\n  /** Called with the next tab id when a tab is clicked. */\n  onChange: (id: string) => void;\n  /** Visual style. Defaults to `underline`. */\n  variant?: TabButtonVariant;\n  /** Classes applied to the tablist row. */\n  className?: string;\n};\n\n/**\n * A controlled tab strip built on {@link TabButton}. Defaults to the\n * `underline` variant — the row carries a bottom border and the active tab's\n * underline overlaps it. Render the matching panel yourself based on `value`.\n */\nexport function Tabs({ tabs, value, onChange, variant = \"underline\", className }: TabsProps) {\n  return (\n    <div\n      role=\"tablist\"\n      className={cn(\n        \"flex items-center gap-density-1\",\n        variant === \"underline\" && \"border-b border-border\",\n        className,\n      )}\n    >\n      {tabs.map((tab) => (\n        <TabButton\n          key={tab.id}\n          active={tab.id === value}\n          onClick={() => {\n            if (!tab.disabled) onChange(tab.id);\n          }}\n          label={tab.label}\n          variant={variant}\n          {...(tab.icon !== undefined ? { icon: tab.icon } : {})}\n          {...(tab.count !== undefined ? { count: tab.count } : {})}\n          {...(tab.countColor !== undefined ? { countColor: tab.countColor } : {})}\n          {...(tab.disabled ? { className: \"opacity-50 pointer-events-none\" } : {})}\n        />\n      ))}\n    </div>\n  );\n}\n"],"names":["jsx","cn","TabButton"],"mappings":";;;;;AAsCO,SAAS,KAAK,EAAE,MAAM,OAAO,UAAU,UAAU,aAAa,aAAwB;AAC3F,SACEA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAWC,MAAAA;AAAAA,QACT;AAAA,QACA,YAAY,eAAe;AAAA,QAC3B;AAAA,MAAA;AAAA,MAGD,UAAA,KAAK,IAAI,CAAC,QACTD,2BAAAA;AAAAA,QAACE,UAAAA;AAAAA,QAAA;AAAA,UAEC,QAAQ,IAAI,OAAO;AAAA,UACnB,SAAS,MAAM;AACb,gBAAI,CAAC,IAAI,SAAU,UAAS,IAAI,EAAE;AAAA,UACpC;AAAA,UACA,OAAO,IAAI;AAAA,UACX;AAAA,UACC,GAAI,IAAI,SAAS,SAAY,EAAE,MAAM,IAAI,KAAA,IAAS,CAAA;AAAA,UAClD,GAAI,IAAI,UAAU,SAAY,EAAE,OAAO,IAAI,MAAA,IAAU,CAAA;AAAA,UACrD,GAAI,IAAI,eAAe,SAAY,EAAE,YAAY,IAAI,WAAA,IAAe,CAAA;AAAA,UACpE,GAAI,IAAI,WAAW,EAAE,WAAW,iCAAA,IAAqC,CAAA;AAAA,QAAC;AAAA,QAVlE,IAAI;AAAA,MAAA,CAYZ;AAAA,IAAA;AAAA,EAAA;AAGP;;"}

package/dist/layout/Tabs.d.ts

@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+import { TabButtonVariant } from '../data/TabButton';
+import { StaticIconComponent } from '../data/Icon';
+export type TabItem = {
+    /** Stable id; also the value compared against the selected `value`. */
+    id: string;
+    /** Visible label. */
+    label: ReactNode;
+    /** Optional leading icon (icon name or component). */
+    icon?: string | StaticIconComponent;
+    /** Optional count badge; hidden when zero. */
+    count?: number;
+    /** Classes for the count badge background. */
+    countColor?: string;
+    /** Disables selecting this tab. */
+    disabled?: boolean;
+};
+export type TabsProps = {
+    /** Tabs to render, in order. */
+    tabs: TabItem[];
+    /** Currently selected tab id. */
+    value: string;
+    /** Called with the next tab id when a tab is clicked. */
+    onChange: (id: string) => void;
+    /** Visual style. Defaults to `underline`. */
+    variant?: TabButtonVariant;
+    /** Classes applied to the tablist row. */
+    className?: string;
+};
+/**
+ * A controlled tab strip built on {@link TabButton}. Defaults to the
+ * `underline` variant — the row carries a bottom border and the active tab's
+ * underline overlaps it. Render the matching panel yourself based on `value`.
+ */
+export declare function Tabs({ tabs, value, onChange, variant, className }: TabsProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Tabs.d.ts.map

package/dist/layout/Tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../src/layout/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAa,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACrE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAExD,MAAM,MAAM,OAAO,GAAG;IACpB,uEAAuE;IACvE,EAAE,EAAE,MAAM,CAAC;IACX,qBAAqB;IACrB,KAAK,EAAE,SAAS,CAAC;IACjB,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,gCAAgC;IAChC,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,iCAAiC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,yDAAyD;IACzD,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,6CAA6C;IAC7C,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAqB,EAAE,SAAS,EAAE,EAAE,SAAS,2CA2B1F"}

package/dist/layout/Tabs.js

@@ -0,0 +1,36 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+import { TabButton } from "../data/TabButton.js";
+function Tabs({ tabs, value, onChange, variant = "underline", className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "tablist",
+      className: cn(
+        "flex items-center gap-density-1",
+        variant === "underline" && "border-b border-border",
+        className
+      ),
+      children: tabs.map((tab) => /* @__PURE__ */ jsx(
+        TabButton,
+        {
+          active: tab.id === value,
+          onClick: () => {
+            if (!tab.disabled) onChange(tab.id);
+          },
+          label: tab.label,
+          variant,
+          ...tab.icon !== void 0 ? { icon: tab.icon } : {},
+          ...tab.count !== void 0 ? { count: tab.count } : {},
+          ...tab.countColor !== void 0 ? { countColor: tab.countColor } : {},
+          ...tab.disabled ? { className: "opacity-50 pointer-events-none" } : {}
+        },
+        tab.id
+      ))
+    }
+  );
+}
+export {
+  Tabs
+};
+//# sourceMappingURL=Tabs.js.map

package/dist/layout/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","sources":["../../src/layout/Tabs.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { TabButton, type TabButtonVariant } from \"../data/TabButton\";\nimport type { StaticIconComponent } from \"../data/Icon\";\n\nexport type TabItem = {\n  /** Stable id; also the value compared against the selected `value`. */\n  id: string;\n  /** Visible label. */\n  label: ReactNode;\n  /** Optional leading icon (icon name or component). */\n  icon?: string | StaticIconComponent;\n  /** Optional count badge; hidden when zero. */\n  count?: number;\n  /** Classes for the count badge background. */\n  countColor?: string;\n  /** Disables selecting this tab. */\n  disabled?: boolean;\n};\n\nexport type TabsProps = {\n  /** Tabs to render, in order. */\n  tabs: TabItem[];\n  /** Currently selected tab id. */\n  value: string;\n  /** Called with the next tab id when a tab is clicked. */\n  onChange: (id: string) => void;\n  /** Visual style. Defaults to `underline`. */\n  variant?: TabButtonVariant;\n  /** Classes applied to the tablist row. */\n  className?: string;\n};\n\n/**\n * A controlled tab strip built on {@link TabButton}. Defaults to the\n * `underline` variant — the row carries a bottom border and the active tab's\n * underline overlaps it. Render the matching panel yourself based on `value`.\n */\nexport function Tabs({ tabs, value, onChange, variant = \"underline\", className }: TabsProps) {\n  return (\n    <div\n      role=\"tablist\"\n      className={cn(\n        \"flex items-center gap-density-1\",\n        variant === \"underline\" && \"border-b border-border\",\n        className,\n      )}\n    >\n      {tabs.map((tab) => (\n        <TabButton\n          key={tab.id}\n          active={tab.id === value}\n          onClick={() => {\n            if (!tab.disabled) onChange(tab.id);\n          }}\n          label={tab.label}\n          variant={variant}\n          {...(tab.icon !== undefined ? { icon: tab.icon } : {})}\n          {...(tab.count !== undefined ? { count: tab.count } : {})}\n          {...(tab.countColor !== undefined ? { countColor: tab.countColor } : {})}\n          {...(tab.disabled ? { className: \"opacity-50 pointer-events-none\" } : {})}\n        />\n      ))}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;AAsCO,SAAS,KAAK,EAAE,MAAM,OAAO,UAAU,UAAU,aAAa,aAAwB;AAC3F,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW;AAAA,QACT;AAAA,QACA,YAAY,eAAe;AAAA,QAC3B;AAAA,MAAA;AAAA,MAGD,UAAA,KAAK,IAAI,CAAC,QACT;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,QAAQ,IAAI,OAAO;AAAA,UACnB,SAAS,MAAM;AACb,gBAAI,CAAC,IAAI,SAAU,UAAS,IAAI,EAAE;AAAA,UACpC;AAAA,UACA,OAAO,IAAI;AAAA,UACX;AAAA,UACC,GAAI,IAAI,SAAS,SAAY,EAAE,MAAM,IAAI,KAAA,IAAS,CAAA;AAAA,UAClD,GAAI,IAAI,UAAU,SAAY,EAAE,OAAO,IAAI,MAAA,IAAU,CAAA;AAAA,UACrD,GAAI,IAAI,eAAe,SAAY,EAAE,YAAY,IAAI,WAAA,IAAe,CAAA;AAAA,UACpE,GAAI,IAAI,WAAW,EAAE,WAAW,iCAAA,IAAqC,CAAA;AAAA,QAAC;AAAA,QAVlE,IAAI;AAAA,MAAA,CAYZ;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/styles.cjs

@@ -1,3 +1,4 @@
 "use strict";
+;/* empty css                       */
 ;/* empty css                    */
 //# sourceMappingURL=styles.cjs.map

package/dist/styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styles.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
+{"version":3,"file":"styles.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}