@kubetail/ui 2.0.5 → 2.1.2

package/dist/elements/link.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../_virtual/rolldown:runtime.cjs`),t=require(`../lib/utils.cjs`);let n=require(`react/jsx-runtime`),r=require(`@radix-ui/react-slot`),i=require(`class-variance-authority`);var a=(0,i.cva)(`inline-flex items-center gap-1 text-primary underline-offset-4 hover:underline transition-colors outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px] rounded-sm cursor-pointer`,{variants:{variant:{default:``,external:``}},defaultVariants:{variant:`default`}}),o=null;function s(e){o=e}function c(){return o}function l({className:e,variant:i,asChild:o=!1,...s}){return(0,n.jsx)(o?r.Slot:`a`,{"data-slot":`link`,className:t.cn(a({variant:i,className:e})),...i===`external`&&!o?{target:`_blank`,rel:`noopener noreferrer`}:{},...s})}function u({className:e,variant:r,...i}){let s=o||`a`;return(0,n.jsx)(s,{"data-slot":`link`,className:t.cn(a({variant:r,className:e})),...r===`external`&&s===`a`?{target:`_blank`,rel:`noopener noreferrer`}:{},...i})}exports.Link=l,exports.RouterLink=u,exports.getLinkComponent=c,exports.linkStyles=a,exports.setLinkComponent=s;
+//# sourceMappingURL=link.cjs.map

package/dist/elements/link.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"link.cjs","names":["configuredLinkComponent: LinkComponent | null"],"sources":["../../src/elements/link.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\nconst linkStyles = cva(\n  'inline-flex items-center gap-1 text-primary underline-offset-4 hover:underline transition-colors outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px] rounded-sm cursor-pointer',\n  {\n    variants: {\n      variant: {\n        default: '',\n        external: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n);\n\nexport type LinkVariantProps = VariantProps<typeof linkStyles>;\n\ntype LinkComponent = React.ElementType;\n\nlet configuredLinkComponent: LinkComponent | null = null;\n\n/**\n * Set a custom component to be used by `RouterLink` (e.g. your router's Link component).\n *\n * @example\n * import { setLinkComponent } from '@kubetail/ui/elements/link';\n * import { Link } from 'react-router-dom';\n * setLinkComponent(Link);\n */\nfunction setLinkComponent(component: LinkComponent) {\n  configuredLinkComponent = component;\n}\n\n/**\n * Get the currently configured link component.\n */\nfunction getLinkComponent(): LinkComponent | null {\n  return configuredLinkComponent;\n}\n\ntype LinkProps = React.ComponentProps<'a'> &\n  LinkVariantProps & {\n    asChild?: boolean;\n  };\n\n/**\n * `Link` renders a styled anchor element.\n *\n * Supports `asChild` via Radix UI Slot for composition with custom components.\n *\n * @param props.variant - \"default\" | \"external\" (adds target=\"_blank\" and rel=\"noopener noreferrer\")\n * @param props.asChild - render as child element via Radix Slot\n */\nfunction Link({ className, variant, asChild = false, ...props }: LinkProps) {\n  const Comp = asChild ? Slot : 'a';\n\n  return (\n    <Comp\n      data-slot=\"link\"\n      className={cn(linkStyles({ variant, className }))}\n      {...(variant === 'external' && !asChild ? { target: '_blank', rel: 'noopener noreferrer' } : {})}\n      {...props}\n    />\n  );\n}\n\ntype RouterLinkProps = Omit<LinkProps, 'asChild'> & Record<string, unknown>;\n\n/**\n * `RouterLink` renders using the component set via `setLinkComponent()`,\n * falling back to a plain `<a>` tag if none has been configured.\n *\n * @example\n * // In your app entry:\n * import { setLinkComponent } from '@kubetail/ui/elements/link';\n * import { Link as RRLink } from 'react-router-dom';\n * setLinkComponent(RRLink);\n *\n * // Then use RouterLink anywhere:\n * <RouterLink to=\"/dashboard\">Dashboard</RouterLink>\n */\nfunction RouterLink({ className, variant, ...props }: RouterLinkProps) {\n  const Comp = configuredLinkComponent || 'a';\n\n  return (\n    <Comp\n      data-slot=\"link\"\n      className={cn(linkStyles({ variant, className }))}\n      {...(variant === 'external' && Comp === 'a' ? { target: '_blank', rel: 'noopener noreferrer' } : {})}\n      {...props}\n    />\n  );\n}\n\nexport { Link, RouterLink, linkStyles, setLinkComponent, getLinkComponent };\n"],"mappings":"gQAKA,IAAM,GAAA,EAAA,EAAA,KACJ,8LACA,CACE,SAAU,CACR,QAAS,CACP,QAAS,GACT,SAAU,GACX,CACF,CACD,gBAAiB,CACf,QAAS,UACV,CACF,CACF,CAMGA,EAAgD,KAUpD,SAAS,EAAiB,EAA0B,CAClD,EAA0B,EAM5B,SAAS,GAAyC,CAChD,OAAO,EAgBT,SAAS,EAAK,CAAE,YAAW,UAAS,UAAU,GAAO,GAAG,GAAoB,CAG1E,OACE,EAAA,EAAA,KAHW,EAAU,EAAA,KAAO,IAG3B,CACC,YAAU,OACV,UAAW,EAAA,GAAG,EAAW,CAAE,UAAS,YAAW,CAAC,CAAC,CACjD,GAAK,IAAY,YAAc,CAAC,EAAU,CAAE,OAAQ,SAAU,IAAK,sBAAuB,CAAG,EAAE,CAC/F,GAAI,GACJ,CAmBN,SAAS,EAAW,CAAE,YAAW,UAAS,GAAG,GAA0B,CACrE,IAAM,EAAO,GAA2B,IAExC,OACE,EAAA,EAAA,KAAC,EAAA,CACC,YAAU,OACV,UAAW,EAAA,GAAG,EAAW,CAAE,UAAS,YAAW,CAAC,CAAC,CACjD,GAAK,IAAY,YAAc,IAAS,IAAM,CAAE,OAAQ,SAAU,IAAK,sBAAuB,CAAG,EAAE,CACnG,GAAI,GACJ"}

package/dist/elements/link.d.ts

@@ -0,0 +1,47 @@
+import { VariantProps } from 'class-variance-authority';
+declare const linkStyles: (props?: ({
+    variant?: "default" | "external" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type LinkVariantProps = VariantProps<typeof linkStyles>;
+type LinkComponent = React.ElementType;
+/**
+ * Set a custom component to be used by `RouterLink` (e.g. your router's Link component).
+ *
+ * @example
+ * import { setLinkComponent } from '@kubetail/ui/elements/link';
+ * import { Link } from 'react-router-dom';
+ * setLinkComponent(Link);
+ */
+declare function setLinkComponent(component: LinkComponent): void;
+/**
+ * Get the currently configured link component.
+ */
+declare function getLinkComponent(): LinkComponent | null;
+type LinkProps = React.ComponentProps<'a'> & LinkVariantProps & {
+    asChild?: boolean;
+};
+/**
+ * `Link` renders a styled anchor element.
+ *
+ * Supports `asChild` via Radix UI Slot for composition with custom components.
+ *
+ * @param props.variant - "default" | "external" (adds target="_blank" and rel="noopener noreferrer")
+ * @param props.asChild - render as child element via Radix Slot
+ */
+declare function Link({ className, variant, asChild, ...props }: LinkProps): import("react/jsx-runtime").JSX.Element;
+type RouterLinkProps = Omit<LinkProps, 'asChild'> & Record<string, unknown>;
+/**
+ * `RouterLink` renders using the component set via `setLinkComponent()`,
+ * falling back to a plain `<a>` tag if none has been configured.
+ *
+ * @example
+ * // In your app entry:
+ * import { setLinkComponent } from '@kubetail/ui/elements/link';
+ * import { Link as RRLink } from 'react-router-dom';
+ * setLinkComponent(RRLink);
+ *
+ * // Then use RouterLink anywhere:
+ * <RouterLink to="/dashboard">Dashboard</RouterLink>
+ */
+declare function RouterLink({ className, variant, ...props }: RouterLinkProps): import("react/jsx-runtime").JSX.Element;
+export { Link, RouterLink, linkStyles, setLinkComponent, getLinkComponent };

package/dist/elements/link.js

@@ -0,0 +1,49 @@
+import { cn } from "../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+var linkStyles = cva("inline-flex items-center gap-1 text-primary underline-offset-4 hover:underline transition-colors outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px] rounded-sm cursor-pointer", {
+	variants: { variant: {
+		default: "",
+		external: ""
+	} },
+	defaultVariants: { variant: "default" }
+}), configuredLinkComponent = null;
+function setLinkComponent(e) {
+	configuredLinkComponent = e;
+}
+function getLinkComponent() {
+	return configuredLinkComponent;
+}
+function Link({ className: o, variant: s, asChild: c = !1, ...l }) {
+	return /* @__PURE__ */ jsx(c ? Slot : "a", {
+		"data-slot": "link",
+		className: cn(linkStyles({
+			variant: s,
+			className: o
+		})),
+		...s === "external" && !c ? {
+			target: "_blank",
+			rel: "noopener noreferrer"
+		} : {},
+		...l
+	});
+}
+function RouterLink({ className: a, variant: o, ...c }) {
+	let l = configuredLinkComponent || "a";
+	return /* @__PURE__ */ jsx(l, {
+		"data-slot": "link",
+		className: cn(linkStyles({
+			variant: o,
+			className: a
+		})),
+		...o === "external" && l === "a" ? {
+			target: "_blank",
+			rel: "noopener noreferrer"
+		} : {},
+		...c
+	});
+}
+export { Link, RouterLink, getLinkComponent, linkStyles, setLinkComponent };
+
+//# sourceMappingURL=link.js.map

package/dist/elements/link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link.js","names":["configuredLinkComponent: LinkComponent | null"],"sources":["../../src/elements/link.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\nconst linkStyles = cva(\n  'inline-flex items-center gap-1 text-primary underline-offset-4 hover:underline transition-colors outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px] rounded-sm cursor-pointer',\n  {\n    variants: {\n      variant: {\n        default: '',\n        external: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n);\n\nexport type LinkVariantProps = VariantProps<typeof linkStyles>;\n\ntype LinkComponent = React.ElementType;\n\nlet configuredLinkComponent: LinkComponent | null = null;\n\n/**\n * Set a custom component to be used by `RouterLink` (e.g. your router's Link component).\n *\n * @example\n * import { setLinkComponent } from '@kubetail/ui/elements/link';\n * import { Link } from 'react-router-dom';\n * setLinkComponent(Link);\n */\nfunction setLinkComponent(component: LinkComponent) {\n  configuredLinkComponent = component;\n}\n\n/**\n * Get the currently configured link component.\n */\nfunction getLinkComponent(): LinkComponent | null {\n  return configuredLinkComponent;\n}\n\ntype LinkProps = React.ComponentProps<'a'> &\n  LinkVariantProps & {\n    asChild?: boolean;\n  };\n\n/**\n * `Link` renders a styled anchor element.\n *\n * Supports `asChild` via Radix UI Slot for composition with custom components.\n *\n * @param props.variant - \"default\" | \"external\" (adds target=\"_blank\" and rel=\"noopener noreferrer\")\n * @param props.asChild - render as child element via Radix Slot\n */\nfunction Link({ className, variant, asChild = false, ...props }: LinkProps) {\n  const Comp = asChild ? Slot : 'a';\n\n  return (\n    <Comp\n      data-slot=\"link\"\n      className={cn(linkStyles({ variant, className }))}\n      {...(variant === 'external' && !asChild ? { target: '_blank', rel: 'noopener noreferrer' } : {})}\n      {...props}\n    />\n  );\n}\n\ntype RouterLinkProps = Omit<LinkProps, 'asChild'> & Record<string, unknown>;\n\n/**\n * `RouterLink` renders using the component set via `setLinkComponent()`,\n * falling back to a plain `<a>` tag if none has been configured.\n *\n * @example\n * // In your app entry:\n * import { setLinkComponent } from '@kubetail/ui/elements/link';\n * import { Link as RRLink } from 'react-router-dom';\n * setLinkComponent(RRLink);\n *\n * // Then use RouterLink anywhere:\n * <RouterLink to=\"/dashboard\">Dashboard</RouterLink>\n */\nfunction RouterLink({ className, variant, ...props }: RouterLinkProps) {\n  const Comp = configuredLinkComponent || 'a';\n\n  return (\n    <Comp\n      data-slot=\"link\"\n      className={cn(linkStyles({ variant, className }))}\n      {...(variant === 'external' && Comp === 'a' ? { target: '_blank', rel: 'noopener noreferrer' } : {})}\n      {...props}\n    />\n  );\n}\n\nexport { Link, RouterLink, linkStyles, setLinkComponent, getLinkComponent };\n"],"mappings":";;;;AAKA,IAAM,aAAa,IACjB,+LACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,UAAU;EACX,EACF;CACD,iBAAiB,EACf,SAAS,WACV;CACF,CACF,EAMGA,0BAAgD;AAUpD,SAAS,iBAAiB,GAA0B;AAClD,2BAA0B;;AAM5B,SAAS,mBAAyC;AAChD,QAAO;;AAgBT,SAAS,KAAK,EAAE,cAAW,YAAS,aAAU,IAAO,GAAG,KAAoB;AAG1E,QACE,oBAHW,IAAU,OAAO,KAG3B;EACC,aAAU;EACV,WAAW,GAAG,WAAW;GAAE;GAAS;GAAW,CAAC,CAAC;EACjD,GAAK,MAAY,cAAc,CAAC,IAAU;GAAE,QAAQ;GAAU,KAAK;GAAuB,GAAG,EAAE;EAC/F,GAAI;GACJ;;AAmBN,SAAS,WAAW,EAAE,cAAW,YAAS,GAAG,KAA0B;CACrE,IAAM,IAAO,2BAA2B;AAExC,QACE,oBAAC,GAAA;EACC,aAAU;EACV,WAAW,GAAG,WAAW;GAAE;GAAS;GAAW,CAAC,CAAC;EACjD,GAAK,MAAY,cAAc,MAAS,MAAM;GAAE,QAAQ;GAAU,KAAK;GAAuB,GAAG,EAAE;EACnG,GAAI;GACJ"}

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

@@ -0,0 +1,25 @@
+import { StoryObj } from '@storybook/react-vite';
+import { Link } from './link';
+declare const meta: {
+    title: string;
+    tags: string[];
+    component: typeof Link;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    argTypes: {
+        children: {
+            control: "text";
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const External: Story;
+export declare const CustomColor: Story;
+export declare const AsChild: Story;

package/dist/elements/link.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index.css

@@ -29,13 +29,13 @@
   --chart-5: oklch(0.769 0.188 70.08);
   --radius: 0.625rem;
   --sidebar: var(--color-zinc-200);
-  --sidebar-foreground: var(--foreground);
+  --sidebar-foreground: var(--color-zinc-950);
   --sidebar-primary: var(--primary);
   --sidebar-primary-foreground: var(--primary-foreground);
-  --sidebar-accent: var(--color-zinc-300);
-  --sidebar-accent-foreground: var(--foreground);
+  --sidebar-accent: var(--color-blue-200);
+  --sidebar-accent-foreground: var(--color-blue-900);
   --sidebar-border: var(--color-zinc-300);
-  --sidebar-ring: var(--ring);
+  --sidebar-ring: var(--color-blue-500);
 }
 
 .dark {
@@ -47,11 +47,11 @@
   --popover-foreground: var(--color-white);
   --primary: var(--color-blue-500);                          /* color-bg-primary */
   --primary-foreground: var(--color-white);                  /* color-text-on-color */
-  --secondary: var(--color-zinc-600);                        /* color-bg-secondary */
+  --secondary: var(--color-zinc-800);                        /* color-bg-secondary */
   --secondary-foreground: var(--color-zinc-50);              /* color-text */
   --muted: var(--color-zinc-900);                            /* color-bg-subtle */
   --muted-foreground: var(--color-zinc-400);                 /* color-text-muted */
-  --accent: var(--color-blue-900);
+  --accent: var(--color-blue-950);
   --accent-foreground: var(--color-white);
   --destructive: var(--color-red-400);                       /* color-bg-error-strong */
   --destructive-foreground: var(--color-zinc-50);            /* color-text */
@@ -64,13 +64,13 @@
   --chart-4: oklch(0.627 0.265 303.9);
   --chart-5: oklch(0.645 0.246 16.439);
   --sidebar: var(--color-zinc-950);
-  --sidebar-foreground: var(--foreground);
+  --sidebar-foreground: var(--color-zinc-50);
   --sidebar-primary: var(--primary);
   --sidebar-primary-foreground: var(--primary-foreground);
-  --sidebar-accent: var(--color-zinc-700);
-  --sidebar-accent-foreground: var(--foreground);
+  --sidebar-accent: var(--color-blue-800);
+  --sidebar-accent-foreground: var(--color-zinc-50);
   --sidebar-border: var(--color-zinc-700);
-  --sidebar-ring: var(--ring);
+  --sidebar-ring: var(--color-blue-500);
 }
 
 @theme inline {

package/package.json

@@ -1,6 +1,10 @@
 {
   "name": "@kubetail/ui",
-  "version": "v2.0.5",
+  "version": "v2.1.2",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/kubetail-org/kubetail-ui"
+  },
   "type": "module",
   "sideEffects": false,
   "module": "./dist/index.js",
@@ -19,6 +23,10 @@
       "import": "./dist/elements/*.js",
       "require": "./dist/elements/*.cjs"
     },
+    "./lib*": {
+      "import": "./dist/lib/*.js",
+      "require": "./dist/elements/*.cjs"
+    },
     "./package.json": "./package.json"
   },
   "style": "./dist/index.css",