@kubetail/ui 2.3.0 → 2.4.0

package/dist/elements/avatar.cjs

@@ -0,0 +1,2 @@
+"use client";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(`react`);r=e.__toESM(r);let i=require(`radix-ui`);function a({className:e,size:r=`default`,...a}){return(0,n.jsx)(i.Avatar.Root,{"data-slot":`avatar`,"data-size":r,className:t.cn(`group/avatar relative flex size-8 shrink-0 rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6`,e),...a})}function o({className:e,...r}){return(0,n.jsx)(i.Avatar.Image,{"data-slot":`avatar-image`,className:t.cn(`aspect-square size-full rounded-full`,e),...r})}function s({className:e,...r}){return(0,n.jsx)(i.Avatar.Fallback,{"data-slot":`avatar-fallback`,className:t.cn(`flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs`,e),...r})}function c({className:e,...r}){return(0,n.jsx)(`span`,{"data-slot":`avatar-badge`,className:t.cn(`absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground ring-2 ring-background select-none`,`group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden`,`group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2`,`group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2`,e),...r})}function l({className:e,...r}){return(0,n.jsx)(`div`,{"data-slot":`avatar-group`,className:t.cn(`group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background`,e),...r})}function u({className:e,...r}){return(0,n.jsx)(`div`,{"data-slot":`avatar-group-count`,className:t.cn(`relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3`,e),...r})}exports.Avatar=a,exports.AvatarBadge=c,exports.AvatarFallback=s,exports.AvatarGroup=l,exports.AvatarGroupCount=u,exports.AvatarImage=o;
+//# sourceMappingURL=avatar.cjs.map

package/dist/elements/avatar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.cjs","names":[],"sources":["../../src/elements/avatar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Avatar as AvatarPrimitive } from 'radix-ui';\n\nimport { cn } from '@/lib/utils';\n\nfunction Avatar({\n  className,\n  size = 'default',\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Root> & {\n  size?: 'default' | 'sm' | 'lg';\n}) {\n  return (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      data-size={size}\n      className={cn(\n        'group/avatar relative flex size-8 shrink-0 rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>) {\n  return (\n    <AvatarPrimitive.Image\n      data-slot=\"avatar-image\"\n      className={cn('aspect-square size-full rounded-full', className)}\n      {...props}\n    />\n  );\n}\n\nfunction AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        'flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"avatar-badge\"\n      className={cn(\n        'absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground ring-2 ring-background select-none',\n        'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden',\n        'group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2',\n        'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AvatarGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"avatar-group\"\n      className={cn(\n        'group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AvatarGroupCount({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"avatar-group-count\"\n      className={cn(\n        'relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount };\n"],"mappings":"kQAOA,SAAS,EAAO,CACd,YACA,OAAO,UACP,GAAG,GAGF,CACD,OAAA,EAAA,EAAA,KACG,EAAA,OAAgB,KAAjB,CACE,YAAU,SACV,YAAW,EACX,UAAW,EAAA,GACT,mHACA,EACD,CACD,GAAI,EACJ,CAAA,CAIN,SAAS,EAAY,CAAE,YAAW,GAAG,GAA6D,CAChG,OAAA,EAAA,EAAA,KACG,EAAA,OAAgB,MAAjB,CACE,YAAU,eACV,UAAW,EAAA,GAAG,uCAAwC,EAAU,CAChE,GAAI,EACJ,CAAA,CAIN,SAAS,EAAe,CAAE,YAAW,GAAG,GAAgE,CACtG,OAAA,EAAA,EAAA,KACG,EAAA,OAAgB,SAAjB,CACE,YAAU,kBACV,UAAW,EAAA,GACT,qIACA,EACD,CACD,GAAI,EACJ,CAAA,CAIN,SAAS,EAAY,CAAE,YAAW,GAAG,GAAuC,CAC1E,OAAA,EAAA,EAAA,KACG,OAAD,CACE,YAAU,eACV,UAAW,EAAA,GACT,4JACA,gFACA,4FACA,gFACA,EACD,CACD,GAAI,EACJ,CAAA,CAIN,SAAS,EAAY,CAAE,YAAW,GAAG,GAAsC,CACzE,OAAA,EAAA,EAAA,KACG,MAAD,CACE,YAAU,eACV,UAAW,EAAA,GACT,sGACA,EACD,CACD,GAAI,EACJ,CAAA,CAIN,SAAS,EAAiB,CAAE,YAAW,GAAG,GAAsC,CAC9E,OAAA,EAAA,EAAA,KACG,MAAD,CACE,YAAU,qBACV,UAAW,EAAA,GACT,2VACA,EACD,CACD,GAAI,EACJ,CAAA"}

package/dist/elements/avatar.d.ts

@@ -0,0 +1,11 @@
+import { Avatar as AvatarPrimitive } from 'radix-ui';
+import * as React from 'react';
+declare function Avatar({ className, size, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root> & {
+    size?: 'default' | 'sm' | 'lg';
+}): import("react/jsx-runtime").JSX.Element;
+declare function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>): import("react/jsx-runtime").JSX.Element;
+declare function AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>): import("react/jsx-runtime").JSX.Element;
+declare function AvatarBadge({ className, ...props }: React.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
+declare function AvatarGroup({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function AvatarGroupCount({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount };

package/dist/elements/avatar.js

@@ -0,0 +1,53 @@
+"use client";
+import { cn as e } from "../lib/utils.js";
+import { jsx as t } from "react/jsx-runtime";
+import "react";
+import { Avatar as n } from "radix-ui";
+//#region src/elements/avatar.tsx
+function r({ className: r, size: i = "default", ...a }) {
+	return /* @__PURE__ */ t(n.Root, {
+		"data-slot": "avatar",
+		"data-size": i,
+		className: e("group/avatar relative flex size-8 shrink-0 rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6", r),
+		...a
+	});
+}
+function i({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Image, {
+		"data-slot": "avatar-image",
+		className: e("aspect-square size-full rounded-full", r),
+		...i
+	});
+}
+function a({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Fallback, {
+		"data-slot": "avatar-fallback",
+		className: e("flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs", r),
+		...i
+	});
+}
+function o({ className: n, ...r }) {
+	return /* @__PURE__ */ t("span", {
+		"data-slot": "avatar-badge",
+		className: e("absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground ring-2 ring-background select-none", "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden", "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2", "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2", n),
+		...r
+	});
+}
+function s({ className: n, ...r }) {
+	return /* @__PURE__ */ t("div", {
+		"data-slot": "avatar-group",
+		className: e("group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background", n),
+		...r
+	});
+}
+function c({ className: n, ...r }) {
+	return /* @__PURE__ */ t("div", {
+		"data-slot": "avatar-group-count",
+		className: e("relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3", n),
+		...r
+	});
+}
+//#endregion
+export { r as Avatar, o as AvatarBadge, a as AvatarFallback, s as AvatarGroup, c as AvatarGroupCount, i as AvatarImage };
+
+//# sourceMappingURL=avatar.js.map

package/dist/elements/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.js","names":[],"sources":["../../src/elements/avatar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Avatar as AvatarPrimitive } from 'radix-ui';\n\nimport { cn } from '@/lib/utils';\n\nfunction Avatar({\n  className,\n  size = 'default',\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Root> & {\n  size?: 'default' | 'sm' | 'lg';\n}) {\n  return (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      data-size={size}\n      className={cn(\n        'group/avatar relative flex size-8 shrink-0 rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>) {\n  return (\n    <AvatarPrimitive.Image\n      data-slot=\"avatar-image\"\n      className={cn('aspect-square size-full rounded-full', className)}\n      {...props}\n    />\n  );\n}\n\nfunction AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        'flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"avatar-badge\"\n      className={cn(\n        'absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground ring-2 ring-background select-none',\n        'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden',\n        'group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2',\n        'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AvatarGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"avatar-group\"\n      className={cn(\n        'group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AvatarGroupCount({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"avatar-group-count\"\n      className={cn(\n        'relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount };\n"],"mappings":";;;;;;AAOA,SAAS,EAAO,EACd,cACA,UAAO,WACP,GAAG,KAGF;AACD,QACE,kBAAC,EAAgB,MAAjB;EACE,aAAU;EACV,aAAW;EACX,WAAW,EACT,oHACA,EACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,EAAY,EAAE,cAAW,GAAG,KAA6D;AAChG,QACE,kBAAC,EAAgB,OAAjB;EACE,aAAU;EACV,WAAW,EAAG,wCAAwC,EAAU;EAChE,GAAI;EACJ,CAAA;;AAIN,SAAS,EAAe,EAAE,cAAW,GAAG,KAAgE;AACtG,QACE,kBAAC,EAAgB,UAAjB;EACE,aAAU;EACV,WAAW,EACT,sIACA,EACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,EAAY,EAAE,cAAW,GAAG,KAAuC;AAC1E,QACE,kBAAC,QAAD;EACE,aAAU;EACV,WAAW,EACT,6JACA,iFACA,6FACA,iFACA,EACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,EAAY,EAAE,cAAW,GAAG,KAAsC;AACzE,QACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAW,EACT,uGACA,EACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,EAAiB,EAAE,cAAW,GAAG,KAAsC;AAC9E,QACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAW,EACT,4VACA,EACD;EACD,GAAI;EACJ,CAAA"}

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

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

package/dist/elements/button.d.ts

@@ -1,6 +1,6 @@
 import { VariantProps } from 'class-variance-authority';
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
+    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
     size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type ButtonVariantProps = VariantProps<typeof buttonVariants>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubetail/ui",
-  "version": "v2.3.0",
+  "version": "v2.4.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/kubetail-org/kubetail-ui"
@@ -47,6 +47,7 @@
     "@radix-ui/react-toggle": "^1",
     "@radix-ui/react-tooltip": "^1",
     "lucide-react": "*",
+    "radix-ui": "^1",
     "react": "^19",
     "react-day-picker": "^9",
     "react-dom": "^19",
@@ -93,6 +94,9 @@
     "lucide-react": {
       "optional": true
     },
+    "radix-ui": {
+      "optional": true
+    },
     "react-day-picker": {
       "optional": true
     },
@@ -148,6 +152,7 @@
     "jsdom": "^29.0.0",
     "lucide-react": "^0.577.0",
     "prettier": "^3.8.1",
+    "radix-ui": "^1.4.3",
     "react-day-picker": "^9.14.0",
     "react-docgen-typescript": "^2.4.0",
     "react-hook-form": "^7.71.2",