@kubetail/ui 2.0.1 → 2.0.3

package/dist/elements/skeleton.js

@@ -0,0 +1,9 @@
+import { jsx as o } from "react/jsx-runtime";
+import { cn as n } from "../lib/utils.js";
+function m({ className: e, ...t }) {
+  return /* @__PURE__ */ o("div", { "data-slot": "skeleton", className: n("bg-accent animate-pulse rounded-md", e), ...t });
+}
+export {
+  m as Skeleton
+};
+//# sourceMappingURL=skeleton.js.map

package/dist/elements/skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.js","sources":["../../src/elements/skeleton.tsx"],"sourcesContent":["import { cn } from '@/lib/utils';\n\nfunction Skeleton({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div data-slot=\"skeleton\" className={cn('bg-accent animate-pulse rounded-md', className)} {...props} />;\n}\n\nexport { Skeleton };\n"],"names":["Skeleton","className","props","jsx","cn"],"mappings":";;AAEA,SAASA,EAAS,EAAE,WAAAC,GAAW,GAAGC,KAAsC;AACtE,SAAO,gBAAAC,EAAC,OAAA,EAAI,aAAU,YAAW,WAAWC,EAAG,sCAAsCH,CAAS,GAAI,GAAGC,EAAA,CAAO;AAC9G;"}

package/dist/elements/skeleton.stories.d.ts

@@ -0,0 +1,15 @@
+import { Skeleton } from './skeleton';
+declare const meta: {
+    title: string;
+    tags: string[];
+    component: typeof Skeleton;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default meta;
+export declare function Demo(): import("react/jsx-runtime").JSX.Element;

package/dist/elements/tooltip.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("@radix-ui/react-tooltip"),d=require("../lib/utils.cjs");function s(t){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const i in t)if(i!=="default"){const n=Object.getOwnPropertyDescriptor(t,i);Object.defineProperty(o,i,n.get?n:{enumerable:!0,get:()=>t[i]})}}return o.default=t,Object.freeze(o)}const r=s(l);function a({delayDuration:t=0,...o}){return e.jsx(r.Provider,{"data-slot":"tooltip-provider",delayDuration:t,...o})}function c({...t}){return e.jsx(a,{children:e.jsx(r.Root,{"data-slot":"tooltip",...t})})}function u({...t}){return e.jsx(r.Trigger,{"data-slot":"tooltip-trigger",...t})}function p({className:t,sideOffset:o=0,children:i,...n}){return e.jsx(r.Portal,{children:e.jsxs(r.Content,{"data-slot":"tooltip-content",sideOffset:o,className:d.cn("bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",t),...n,children:[i,e.jsx(r.Arrow,{className:"bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]"})]})})}exports.Tooltip=c;exports.TooltipContent=p;exports.TooltipProvider=a;exports.TooltipTrigger=u;
+//# sourceMappingURL=tooltip.cjs.map

package/dist/elements/tooltip.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.cjs","sources":["../../src/elements/tooltip.tsx"],"sourcesContent":["'use client';\n\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip';\n\nimport { cn } from '@/lib/utils';\n\nfunction TooltipProvider({ delayDuration = 0, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n  return <TooltipPrimitive.Provider data-slot=\"tooltip-provider\" delayDuration={delayDuration} {...props} />;\n}\n\nfunction Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n  return (\n    <TooltipProvider>\n      <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n    </TooltipProvider>\n  );\n}\n\nfunction TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\n\nfunction TooltipContent({\n  className,\n  sideOffset = 0,\n  children,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Content>) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        data-slot=\"tooltip-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          'bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        <TooltipPrimitive.Arrow className=\"bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]\" />\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  );\n}\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };\n"],"names":["TooltipProvider","delayDuration","props","jsx","TooltipPrimitive","Tooltip","TooltipTrigger","TooltipContent","className","sideOffset","children","jsxs","cn"],"mappings":"kdAMA,SAASA,EAAgB,CAAE,cAAAC,EAAgB,EAAG,GAAGC,GAAiE,CAChH,OAAOC,EAAAA,IAACC,EAAiB,SAAjB,CAA0B,YAAU,mBAAmB,cAAAH,EAA+B,GAAGC,EAAO,CAC1G,CAEA,SAASG,EAAQ,CAAE,GAAGH,GAA6D,CACjF,OACEC,EAAAA,IAACH,EAAA,CACC,SAAAG,EAAAA,IAACC,EAAiB,KAAjB,CAAsB,YAAU,UAAW,GAAGF,CAAA,CAAO,CAAA,CACxD,CAEJ,CAEA,SAASI,EAAe,CAAE,GAAGJ,GAAgE,CAC3F,aAAQE,EAAiB,QAAjB,CAAyB,YAAU,kBAAmB,GAAGF,EAAO,CAC1E,CAEA,SAASK,EAAe,CACtB,UAAAC,EACA,WAAAC,EAAa,EACb,SAAAC,EACA,GAAGR,CACL,EAA0D,CACxD,OACEC,EAAAA,IAACC,EAAiB,OAAjB,CACC,SAAAO,EAAAA,KAACP,EAAiB,QAAjB,CACC,YAAU,kBACV,WAAAK,EACA,UAAWG,EAAAA,GACT,oaACAJ,CAAA,EAED,GAAGN,EAEH,SAAA,CAAAQ,EACDP,EAAAA,IAACC,EAAiB,MAAjB,CAAuB,UAAU,oGAAA,CAAqG,CAAA,CAAA,CAAA,EAE3I,CAEJ"}

package/dist/elements/tooltip.d.ts

@@ -0,0 +1,6 @@
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+declare function TooltipProvider({ delayDuration, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>): import("react/jsx-runtime").JSX.Element;
+declare function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function TooltipContent({ className, sideOffset, children, ...props }: React.ComponentProps<typeof TooltipPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/dist/elements/tooltip.js

@@ -0,0 +1,42 @@
+import { jsx as i, jsxs as n } from "react/jsx-runtime";
+import * as o from "@radix-ui/react-tooltip";
+import { cn as d } from "../lib/utils.js";
+function l({ delayDuration: t = 0, ...r }) {
+  return /* @__PURE__ */ i(o.Provider, { "data-slot": "tooltip-provider", delayDuration: t, ...r });
+}
+function m({ ...t }) {
+  return /* @__PURE__ */ i(l, { children: /* @__PURE__ */ i(o.Root, { "data-slot": "tooltip", ...t }) });
+}
+function p({ ...t }) {
+  return /* @__PURE__ */ i(o.Trigger, { "data-slot": "tooltip-trigger", ...t });
+}
+function c({
+  className: t,
+  sideOffset: r = 0,
+  children: e,
+  ...a
+}) {
+  return /* @__PURE__ */ i(o.Portal, { children: /* @__PURE__ */ n(
+    o.Content,
+    {
+      "data-slot": "tooltip-content",
+      sideOffset: r,
+      className: d(
+        "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+        t
+      ),
+      ...a,
+      children: [
+        e,
+        /* @__PURE__ */ i(o.Arrow, { className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
+      ]
+    }
+  ) });
+}
+export {
+  m as Tooltip,
+  c as TooltipContent,
+  l as TooltipProvider,
+  p as TooltipTrigger
+};
+//# sourceMappingURL=tooltip.js.map

package/dist/elements/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","sources":["../../src/elements/tooltip.tsx"],"sourcesContent":["'use client';\n\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip';\n\nimport { cn } from '@/lib/utils';\n\nfunction TooltipProvider({ delayDuration = 0, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n  return <TooltipPrimitive.Provider data-slot=\"tooltip-provider\" delayDuration={delayDuration} {...props} />;\n}\n\nfunction Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n  return (\n    <TooltipProvider>\n      <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n    </TooltipProvider>\n  );\n}\n\nfunction TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\n\nfunction TooltipContent({\n  className,\n  sideOffset = 0,\n  children,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Content>) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        data-slot=\"tooltip-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          'bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        <TooltipPrimitive.Arrow className=\"bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]\" />\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  );\n}\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };\n"],"names":["TooltipProvider","delayDuration","props","jsx","TooltipPrimitive","Tooltip","TooltipTrigger","TooltipContent","className","sideOffset","children","jsxs","cn"],"mappings":";;;AAMA,SAASA,EAAgB,EAAE,eAAAC,IAAgB,GAAG,GAAGC,KAAiE;AAChH,SAAO,gBAAAC,EAACC,EAAiB,UAAjB,EAA0B,aAAU,oBAAmB,eAAAH,GAA+B,GAAGC,GAAO;AAC1G;AAEA,SAASG,EAAQ,EAAE,GAAGH,KAA6D;AACjF,SACE,gBAAAC,EAACH,GAAA,EACC,UAAA,gBAAAG,EAACC,EAAiB,MAAjB,EAAsB,aAAU,WAAW,GAAGF,EAAA,CAAO,EAAA,CACxD;AAEJ;AAEA,SAASI,EAAe,EAAE,GAAGJ,KAAgE;AAC3F,2BAAQE,EAAiB,SAAjB,EAAyB,aAAU,mBAAmB,GAAGF,GAAO;AAC1E;AAEA,SAASK,EAAe;AAAA,EACtB,WAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,UAAAC;AAAA,EACA,GAAGR;AACL,GAA0D;AACxD,SACE,gBAAAC,EAACC,EAAiB,QAAjB,EACC,UAAA,gBAAAO;AAAA,IAACP,EAAiB;AAAA,IAAjB;AAAA,MACC,aAAU;AAAA,MACV,YAAAK;AAAA,MACA,WAAWG;AAAA,QACT;AAAA,QACAJ;AAAA,MAAA;AAAA,MAED,GAAGN;AAAA,MAEH,UAAA;AAAA,QAAAQ;AAAA,QACD,gBAAAP,EAACC,EAAiB,OAAjB,EAAuB,WAAU,qGAAA,CAAqG;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAE3I;AAEJ;"}

package/dist/elements/tooltip.stories.d.ts

@@ -0,0 +1,15 @@
+import { Tooltip } from './tooltip';
+declare const meta: {
+    title: string;
+    tags: string[];
+    component: typeof Tooltip;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default meta;
+export declare function Demo(): import("react/jsx-runtime").JSX.Element;

package/dist/hooks/use-mobile.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react"),e=768;function r(){const[s,t]=o.useState(void 0);return o.useEffect(()=>{const n=window.matchMedia(`(max-width: ${e-1}px)`),i=()=>{t(window.innerWidth<e)};return n.addEventListener("change",i),t(window.innerWidth<e),()=>n.removeEventListener("change",i)},[]),!!s}exports.useIsMobile=r;
+//# sourceMappingURL=use-mobile.cjs.map

package/dist/hooks/use-mobile.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-mobile.cjs","sources":["../../src/hooks/use-mobile.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nconst MOBILE_BREAKPOINT = 768;\n\nexport function useIsMobile() {\n  const [isMobile, setIsMobile] = useState<boolean | undefined>(undefined);\n\n  useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n    };\n    mql.addEventListener('change', onChange);\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n    return () => mql.removeEventListener('change', onChange);\n  }, []);\n\n  return !!isMobile;\n}\n"],"names":["MOBILE_BREAKPOINT","useIsMobile","isMobile","setIsMobile","useState","useEffect","mql","onChange"],"mappings":"yGAEMA,EAAoB,IAEnB,SAASC,GAAc,CAC5B,KAAM,CAACC,EAAUC,CAAW,EAAIC,EAAAA,SAA8B,MAAS,EAEvEC,OAAAA,EAAAA,UAAU,IAAM,CACd,MAAMC,EAAM,OAAO,WAAW,eAAeN,EAAoB,CAAC,KAAK,EACjEO,EAAW,IAAM,CACrBJ,EAAY,OAAO,WAAaH,CAAiB,CACnD,EACA,OAAAM,EAAI,iBAAiB,SAAUC,CAAQ,EACvCJ,EAAY,OAAO,WAAaH,CAAiB,EAC1C,IAAMM,EAAI,oBAAoB,SAAUC,CAAQ,CACzD,EAAG,CAAA,CAAE,EAEE,CAAC,CAACL,CACX"}

package/dist/hooks/use-mobile.d.ts

@@ -0,0 +1 @@
+export declare function useIsMobile(): boolean;

package/dist/hooks/use-mobile.js

@@ -0,0 +1,15 @@
+import { useState as s, useEffect as r } from "react";
+const e = 768;
+function c() {
+  const [o, n] = s(void 0);
+  return r(() => {
+    const t = window.matchMedia(`(max-width: ${e - 1}px)`), i = () => {
+      n(window.innerWidth < e);
+    };
+    return t.addEventListener("change", i), n(window.innerWidth < e), () => t.removeEventListener("change", i);
+  }, []), !!o;
+}
+export {
+  c as useIsMobile
+};
+//# sourceMappingURL=use-mobile.js.map

package/dist/hooks/use-mobile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-mobile.js","sources":["../../src/hooks/use-mobile.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nconst MOBILE_BREAKPOINT = 768;\n\nexport function useIsMobile() {\n  const [isMobile, setIsMobile] = useState<boolean | undefined>(undefined);\n\n  useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n    };\n    mql.addEventListener('change', onChange);\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n    return () => mql.removeEventListener('change', onChange);\n  }, []);\n\n  return !!isMobile;\n}\n"],"names":["MOBILE_BREAKPOINT","useIsMobile","isMobile","setIsMobile","useState","useEffect","mql","onChange"],"mappings":";AAEA,MAAMA,IAAoB;AAEnB,SAASC,IAAc;AAC5B,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAA8B,MAAS;AAEvE,SAAAC,EAAU,MAAM;AACd,UAAMC,IAAM,OAAO,WAAW,eAAeN,IAAoB,CAAC,KAAK,GACjEO,IAAW,MAAM;AACrB,MAAAJ,EAAY,OAAO,aAAaH,CAAiB;AAAA,IACnD;AACA,WAAAM,EAAI,iBAAiB,UAAUC,CAAQ,GACvCJ,EAAY,OAAO,aAAaH,CAAiB,GAC1C,MAAMM,EAAI,oBAAoB,UAAUC,CAAQ;AAAA,EACzD,GAAG,CAAA,CAAE,GAEE,CAAC,CAACL;AACX;"}

package/dist/index.css

@@ -11,7 +11,7 @@
   --popover-foreground: var(--color-zinc-950);
   --primary: oklch(0.563 0.194 262.62);                     /* color-bg-primary */
   --primary-foreground: var(--color-white);                   /* color-text-on-color */
-  --secondary: var(--color-zinc-50);                          /* color-bg-secondary */
+  --secondary: var(--color-zinc-100);                         /* color-bg-secondary */
   --secondary-foreground: var(--color-zinc-950);              /* color-text */
   --muted: var(--color-zinc-50);                              /* color-bg-subtle */
   --muted-foreground: var(--color-zinc-500);                  /* color-text-muted */
@@ -20,7 +20,7 @@
   --destructive: var(--color-red-500);                        /* color-bg-error-strong */
   --destructive-foreground: var(--color-white);               /* color-text-on-color */ 
   --border: var(--color-zinc-200);                            /* color-border */
-  --input: var(--color-zinc-200);                             /* color-border-input */
+  --input: var(--color-zinc-300);                             /* color-border-input */
   --ring: var(--color-blue-500);                              /* color-border-focusRing */
   --chart-1: oklch(0.646 0.222 41.116);
   --chart-2: oklch(0.6 0.118 184.704);
@@ -28,14 +28,14 @@
   --chart-4: oklch(0.828 0.189 84.429);
   --chart-5: oklch(0.769 0.188 70.08);
   --radius: 0.625rem;
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
+  --sidebar: var(--color-zinc-200);
+  --sidebar-foreground: var(--foreground);
+  --sidebar-primary: var(--primary);
+  --sidebar-primary-foreground: var(--primary-foreground);
+  --sidebar-accent: var(--color-zinc-300);
+  --sidebar-accent-foreground: var(--foreground);
+  --sidebar-border: var(--color-zinc-300);
+  --sidebar-ring: var(--ring);
 }
 
 .dark {
@@ -56,21 +56,21 @@
   --destructive: var(--color-red-400);                       /* color-bg-error-strong */
   --destructive-foreground: var(--color-zinc-50);            /* color-text */
   --border: var(--color-zinc-700);                           /* color-border */
-  --input: var(--color-zinc-400);                            /* color-border-input */
+  --input: var(--color-zinc-600);                            /* color-border-input */
   --ring: var(--color-blue-500);                             /* color-border-focusRing */
   --chart-1: oklch(0.488 0.243 264.376);
   --chart-2: oklch(0.696 0.17 162.48);
   --chart-3: oklch(0.769 0.188 70.08);
   --chart-4: oklch(0.627 0.265 303.9);
   --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(0.269 0 0);
-  --sidebar-ring: oklch(0.439 0 0);
+  --sidebar: var(--color-zinc-950);
+  --sidebar-foreground: var(--foreground);
+  --sidebar-primary: var(--primary);
+  --sidebar-primary-foreground: var(--primary-foreground);
+  --sidebar-accent: var(--color-zinc-700);
+  --sidebar-accent-foreground: var(--foreground);
+  --sidebar-border: var(--color-zinc-700);
+  --sidebar-ring: var(--ring);
 }
 
 @theme inline {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubetail/ui",
-  "version": "v2.0.1",
+  "version": "v2.0.3",
   "type": "module",
   "sideEffects": false,
   "module": "./dist/index.js",
@@ -32,8 +32,10 @@
     "@radix-ui/react-label": "^2",
     "@radix-ui/react-popover": "^1",
     "@radix-ui/react-select": "^2",
+    "@radix-ui/react-separator": "^1",
     "@radix-ui/react-slot": "^1",
     "@radix-ui/react-tabs": "^1",
+    "@radix-ui/react-tooltip": "^1",
     "lucide-react": "*",
     "react": "^19",
     "react-day-picker": "^9",
@@ -63,9 +65,15 @@
     "@radix-ui/react-select": {
       "optional": true
     },
+    "@radix-ui/react-separator": {
+      "optional": true
+    },
     "@radix-ui/react-tabs": {
       "optional": true
     },
+    "@radix-ui/react-tooltip": {
+      "optional": true
+    },
     "lucide-react": {
       "optional": true
     },
@@ -88,8 +96,10 @@
     "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@storybook/addon-docs": "^9.0.9",
     "@storybook/addon-links": "^9.0.9",
     "@storybook/addon-themes": "^9.0.9",