@lglab/compose-ui 0.27.0 → 0.29.0

package/dist/avatar.js

@@ -1,81 +1,68 @@
-"use client";
-import { jsx as a, jsxs as u } from "react/jsx-runtime";
-import { Avatar as n } from "@base-ui/react/avatar";
-import { cva as A } from "class-variance-authority";
-import * as f from "react";
-import { c as s } from "./utils-B6yFEsav.js";
-const v = A(
-  [
-    "relative flex shrink-0 items-center justify-center overflow-hidden rounded-full",
-    "bg-muted text-foreground",
-    "border-2 border-background"
-  ],
-  {
-    variants: {
-      size: {
-        sm: "size-8 text-xs",
-        default: "size-10 text-sm",
-        lg: "size-12 text-base"
-      }
-    },
-    defaultVariants: {
-      size: "default"
-    }
-  }
-), h = ({ className: t, size: e, ...l }) => /* @__PURE__ */ a(n.Root, { className: s(v({ size: e }), t), ...l });
-h.displayName = "AvatarRoot";
-const g = ({ className: t, ...e }) => /* @__PURE__ */ a(
-  n.Image,
-  {
-    className: s("aspect-square h-full w-full object-cover", t),
-    ...e
-  }
-);
-g.displayName = "AvatarImage";
-const y = ({ className: t, ...e }) => /* @__PURE__ */ a(
-  n.Fallback,
-  {
-    className: s(
-      "flex h-full w-full items-center justify-center font-medium",
-      t
-    ),
-    ...e
-  }
-);
-y.displayName = "AvatarFallback";
-const z = ({
-  "aria-label": t,
-  maxVisible: e,
-  className: l,
-  children: p
-}) => {
-  const o = f.Children.toArray(p), i = o.length, c = e !== void 0 ? Math.min(e, i) : i, d = i - c, b = o.slice(0, c), x = (() => {
-    const r = o[0];
-    return f.isValidElement(r) && r.type === h ? r.props.size ?? "default" : "default";
-  })();
-  return /* @__PURE__ */ u("ul", { "aria-label": t, className: s("flex -space-x-2", l), children: [
-    b.map((r, m) => /* @__PURE__ */ a("li", { children: r }, m)),
-    d > 0 && /* @__PURE__ */ a("li", { children: /* @__PURE__ */ u(
-      "span",
-      {
-        className: s(
-          "relative flex shrink-0 items-center justify-center overflow-hidden rounded-full",
-          "bg-muted text-foreground border-2 border-background",
-          "font-medium",
-          v({ size: x })
-        ),
-        children: [
-          "+",
-          d
-        ]
-      }
-    ) })
-  ] });
+'use client';
+
+import { cn } from "./lib/utils.js";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Avatar } from "@base-ui/react/avatar";
+
+//#region src/components/avatar.tsx
+const avatarVariants = cva([
+	"relative flex shrink-0 items-center justify-center overflow-hidden rounded-full",
+	"bg-muted text-foreground",
+	"border-2 border-background"
+], {
+	variants: { size: {
+		sm: "size-8 text-xs",
+		default: "size-10 text-sm",
+		lg: "size-12 text-base"
+	} },
+	defaultVariants: { size: "default" }
+});
+const AvatarRoot = ({ className, size, ...props }) => {
+	return /* @__PURE__ */ jsx(Avatar.Root, {
+		className: cn(avatarVariants({ size }), className),
+		...props
+	});
 };
-z.displayName = "AvatarStack";
-export {
-  y as AvatarFallback,
-  g as AvatarImage,
-  h as AvatarRoot,
-  z as AvatarStack
+AvatarRoot.displayName = "AvatarRoot";
+const AvatarImage = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Avatar.Image, {
+		className: cn("aspect-square h-full w-full object-cover", className),
+		...props
+	});
 };
+AvatarImage.displayName = "AvatarImage";
+const AvatarFallback = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Avatar.Fallback, {
+		className: cn("flex h-full w-full items-center justify-center font-medium", className),
+		...props
+	});
+};
+AvatarFallback.displayName = "AvatarFallback";
+const AvatarStack = ({ "aria-label": ariaLabel, maxVisible, className, children }) => {
+	const childrenArray = React.Children.toArray(children);
+	const totalCount = childrenArray.length;
+	const visibleCount = maxVisible !== void 0 ? Math.min(maxVisible, totalCount) : totalCount;
+	const overflowCount = totalCount - visibleCount;
+	const visibleAvatars = childrenArray.slice(0, visibleCount);
+	const inferSizeFromFirstChild = () => {
+		const firstChild = childrenArray[0];
+		if (React.isValidElement(firstChild) && firstChild.type === AvatarRoot) return firstChild.props.size ?? "default";
+		return "default";
+	};
+	const overflowSize = inferSizeFromFirstChild();
+	return /* @__PURE__ */ jsxs("ul", {
+		"aria-label": ariaLabel,
+		className: cn("flex -space-x-2", className),
+		children: [visibleAvatars.map((child, index) => /* @__PURE__ */ jsx("li", { children: child }, index)), overflowCount > 0 && /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("span", {
+			className: cn("relative flex shrink-0 items-center justify-center overflow-hidden rounded-full", "bg-muted text-foreground border-2 border-background", "font-medium", avatarVariants({ size: overflowSize })),
+			children: ["+", overflowCount]
+		}) })]
+	});
+};
+AvatarStack.displayName = "AvatarStack";
+
+//#endregion
+export { AvatarFallback, AvatarImage, AvatarRoot, AvatarStack };
+//# sourceMappingURL=avatar.js.map

package/dist/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.js","names":["BaseAvatar"],"sources":["../src/components/avatar.tsx"],"sourcesContent":["'use client'\n\nimport { Avatar as BaseAvatar } from '@base-ui/react/avatar'\nimport { cva } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { cn } from '../lib/utils'\n\n// ============================================================================\n// Avatar Variants\n// ============================================================================\n\nconst avatarVariants = cva(\n  [\n    'relative flex shrink-0 items-center justify-center overflow-hidden rounded-full',\n    'bg-muted text-foreground',\n    'border-2 border-background',\n  ],\n  {\n    variants: {\n      size: {\n        sm: 'size-8 text-xs',\n        default: 'size-10 text-sm',\n        lg: 'size-12 text-base',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n    },\n  },\n)\n\ntype AvatarSize = 'sm' | 'default' | 'lg'\n\n// ============================================================================\n// AvatarRoot\n// ============================================================================\n\ntype AvatarRootProps = React.ComponentProps<typeof BaseAvatar.Root> & {\n  /** Size of the avatar */\n  size?: AvatarSize\n}\n\nconst AvatarRoot = ({ className, size, ...props }: AvatarRootProps) => {\n  return (\n    <BaseAvatar.Root className={cn(avatarVariants({ size }), className)} {...props} />\n  )\n}\n\nAvatarRoot.displayName = 'AvatarRoot'\n\n// ============================================================================\n// AvatarImage\n// ============================================================================\n\ntype AvatarImageProps = React.ComponentProps<typeof BaseAvatar.Image>\n\nconst AvatarImage = ({ className, ...props }: AvatarImageProps) => {\n  return (\n    <BaseAvatar.Image\n      className={cn('aspect-square h-full w-full object-cover', className)}\n      {...props}\n    />\n  )\n}\n\nAvatarImage.displayName = 'AvatarImage'\n\n// ============================================================================\n// AvatarFallback\n// ============================================================================\n\ntype AvatarFallbackProps = React.ComponentProps<typeof BaseAvatar.Fallback>\n\nconst AvatarFallback = ({ className, ...props }: AvatarFallbackProps) => {\n  return (\n    <BaseAvatar.Fallback\n      className={cn(\n        'flex h-full w-full items-center justify-center font-medium',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nAvatarFallback.displayName = 'AvatarFallback'\n\n// ============================================================================\n// AvatarStack\n// ============================================================================\n\ntype AvatarStackProps = {\n  /** ARIA label for the avatar stack list */\n  'aria-label': string\n  /** Maximum number of avatars to display before showing overflow indicator */\n  maxVisible?: number\n  /** Additional CSS classes */\n  className?: string\n  /** Avatar components to display */\n  children: React.ReactNode\n}\n\nconst AvatarStack = ({\n  'aria-label': ariaLabel,\n  maxVisible,\n  className,\n  children,\n}: AvatarStackProps) => {\n  const childrenArray = React.Children.toArray(children)\n  const totalCount = childrenArray.length\n  const visibleCount =\n    maxVisible !== undefined ? Math.min(maxVisible, totalCount) : totalCount\n  const overflowCount = totalCount - visibleCount\n\n  const visibleAvatars = childrenArray.slice(0, visibleCount)\n\n  const inferSizeFromFirstChild = (): AvatarSize => {\n    const firstChild = childrenArray[0]\n    if (React.isValidElement(firstChild) && firstChild.type === AvatarRoot) {\n      const childProps = firstChild.props as unknown as { size?: AvatarSize }\n      return childProps.size ?? 'default'\n    }\n    return 'default'\n  }\n\n  const overflowSize = inferSizeFromFirstChild()\n\n  return (\n    <ul aria-label={ariaLabel} className={cn('flex -space-x-2', className)}>\n      {visibleAvatars.map((child, index) => (\n        <li key={index}>{child}</li>\n      ))}\n      {overflowCount > 0 && (\n        <li>\n          <span\n            className={cn(\n              'relative flex shrink-0 items-center justify-center overflow-hidden rounded-full',\n              'bg-muted text-foreground border-2 border-background',\n              'font-medium',\n              avatarVariants({ size: overflowSize }),\n            )}\n          >\n            +{overflowCount}\n          </span>\n        </li>\n      )}\n    </ul>\n  )\n}\n\nAvatarStack.displayName = 'AvatarStack'\n\n// ============================================================================\n// Exports\n// ============================================================================\n\nexport { AvatarRoot, AvatarImage, AvatarFallback, AvatarStack }\n\nexport type { AvatarRootProps, AvatarImageProps, AvatarFallbackProps, AvatarStackProps }\n"],"mappings":";;;;;;;;;AAYA,MAAM,iBAAiB,IACrB;CACE;CACA;CACA;CACD,EACD;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,SAAS;EACT,IAAI;EACL,EACF;CACD,iBAAiB,EACf,MAAM,WACP;CACF,CACF;AAaD,MAAM,cAAc,EAAE,WAAW,MAAM,GAAG,YAA6B;AACrE,QACE,oBAACA,OAAW;EAAK,WAAW,GAAG,eAAe,EAAE,MAAM,CAAC,EAAE,UAAU;EAAE,GAAI;GAAS;;AAItF,WAAW,cAAc;AAQzB,MAAM,eAAe,EAAE,WAAW,GAAG,YAA8B;AACjE,QACE,oBAACA,OAAW;EACV,WAAW,GAAG,4CAA4C,UAAU;EACpE,GAAI;GACJ;;AAIN,YAAY,cAAc;AAQ1B,MAAM,kBAAkB,EAAE,WAAW,GAAG,YAAiC;AACvE,QACE,oBAACA,OAAW;EACV,WAAW,GACT,8DACA,UACD;EACD,GAAI;GACJ;;AAIN,eAAe,cAAc;AAiB7B,MAAM,eAAe,EACnB,cAAc,WACd,YACA,WACA,eACsB;CACtB,MAAM,gBAAgB,MAAM,SAAS,QAAQ,SAAS;CACtD,MAAM,aAAa,cAAc;CACjC,MAAM,eACJ,eAAe,SAAY,KAAK,IAAI,YAAY,WAAW,GAAG;CAChE,MAAM,gBAAgB,aAAa;CAEnC,MAAM,iBAAiB,cAAc,MAAM,GAAG,aAAa;CAE3D,MAAM,gCAA4C;EAChD,MAAM,aAAa,cAAc;AACjC,MAAI,MAAM,eAAe,WAAW,IAAI,WAAW,SAAS,WAE1D,QADmB,WAAW,MACZ,QAAQ;AAE5B,SAAO;;CAGT,MAAM,eAAe,yBAAyB;AAE9C,QACE,qBAAC;EAAG,cAAY;EAAW,WAAW,GAAG,mBAAmB,UAAU;aACnE,eAAe,KAAK,OAAO,UAC1B,oBAAC,kBAAgB,SAAR,MAAmB,CAC5B,EACD,gBAAgB,KACf,oBAAC,kBACC,qBAAC;GACC,WAAW,GACT,mFACA,uDACA,eACA,eAAe,EAAE,MAAM,cAAc,CAAC,CACvC;cACF,KACG;IACG,GACJ;GAEJ;;AAIT,YAAY,cAAc"}

package/dist/badge.d.ts

@@ -0,0 +1,48 @@
+import * as React from "react";
+import * as react_jsx_runtime225 from "react/jsx-runtime";
+
+//#region src/components/badge.d.ts
+type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'success' | 'warning' | 'info';
+type BadgeAppearance = 'default' | 'outline' | 'light' | 'ghost';
+type BadgeSize = 'sm' | 'md' | 'lg';
+type BadgeShape = 'pill' | 'rounded';
+type BadgeProps = React.ComponentProps<'span'> & {
+  /** Visual style variant */
+  variant?: BadgeVariant;
+  /** Appearance style */
+  appearance?: BadgeAppearance;
+  /** Size of the badge */
+  size?: BadgeSize;
+  /** Shape of the badge */
+  shape?: BadgeShape;
+};
+declare const Badge: {
+  ({
+    className,
+    variant,
+    appearance,
+    size,
+    shape,
+    ...props
+  }: BadgeProps): react_jsx_runtime225.JSX.Element;
+  displayName: string;
+};
+type BadgeDotProps = React.ComponentProps<'span'>;
+declare const BadgeDot: {
+  ({
+    className,
+    ...props
+  }: BadgeDotProps): react_jsx_runtime225.JSX.Element;
+  displayName: string;
+};
+type BadgeButtonProps = React.ComponentProps<'button'>;
+declare const BadgeButton: {
+  ({
+    className,
+    ...props
+  }: BadgeButtonProps): react_jsx_runtime225.JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { Badge, BadgeAppearance, BadgeButton, type BadgeButtonProps, BadgeDot, type BadgeDotProps, type BadgeProps, BadgeShape, BadgeSize, BadgeVariant };
+//# sourceMappingURL=badge.d.ts.map

package/dist/badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","names":[],"sources":["../src/components/badge.tsx"],"sourcesContent":[],"mappings":";;;;KAiLY,YAAA;KAQA,eAAA;KAEA,SAAA;AAVA,KAYA,UAAA,GAZY,MAAA,GAAA,SAAA;AAQxB,KAUK,UAAA,GAAa,KAAA,CAAM,cAVG,CAAA,MAAA,CAAA,GAAA;EAEf;EAEA,OAAA,CAAA,EAQA,YARU;EAMjB;EAAU,UAAA,CAAA,EAIA,eAJA;;MAEH,CAAA,EAIH,SAJG;;OAIH,CAAA,EAEC,UAFD;;cAKH,KAHc,EAAA;EAGd,CAAA;IAAA,SAOL;IAAA,OAAA;IAAA,UAAA;IAAA,IAAA;IAAA,KAAA;IAAA,GAAA;EAAA,CAAA,EAPyE,UAOzE,CAAA,EAPmF,oBAAA,CAAA,GAAA,CAAA,OAOnF;EAAA,WAAA,EAAA,MAAA;;KAQI,aAAA,GAAgB,KAAA,CAAM;cAErB;;;;KAAqC,gBAAa,oBAAA,CAAA,GAAA,CAAA;;;KAgBnD,gBAAA,GAAmB,KAAA,CAAM,cAjCsD,CAAA,QAAA,CAAA;cAmC9E,WAnC8E,EAAA;EAe/E,CAAA;IAAA,SAAA;IAAA,GAAa;EAAS,CAAT,EAoB4B,gBApBnB,CAAA,EAoBmC,oBAAA,CAAA,GAAA,CAAA,OApBrB;EAEnC,WAQL,EAAA,MAAA;CAAA"}

package/dist/badge.js

@@ -0,0 +1,196 @@
+'use client';
+
+import { cn } from "./lib/utils.js";
+import "react";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/badge.tsx
+const badgeVariants = cva(["inline-flex items-center gap-1.5 whitespace-nowrap font-medium transition-colors", "[&_svg]:pointer-events-none [&_svg]:shrink-0"], {
+	variants: {
+		variant: {
+			default: "",
+			secondary: "",
+			destructive: "",
+			success: "",
+			warning: "",
+			info: ""
+		},
+		appearance: {
+			default: "",
+			outline: "border",
+			light: "",
+			ghost: ""
+		},
+		size: {
+			sm: "text-xs px-2 h-5 min-w-5 [&_svg]:size-3",
+			md: "text-xs px-2.5 h-6 min-w-6 [&_svg]:size-3.5",
+			lg: "text-sm px-3 h-7 min-w-7 [&_svg]:size-4"
+		},
+		shape: {
+			pill: "rounded-full",
+			rounded: "rounded-md"
+		}
+	},
+	compoundVariants: [
+		{
+			variant: "default",
+			appearance: "default",
+			class: "bg-primary text-primary-foreground"
+		},
+		{
+			variant: "secondary",
+			appearance: "default",
+			class: "bg-secondary text-secondary-foreground"
+		},
+		{
+			variant: "destructive",
+			appearance: "default",
+			class: "bg-destructive text-white"
+		},
+		{
+			variant: "success",
+			appearance: "default",
+			class: "bg-success text-white"
+		},
+		{
+			variant: "warning",
+			appearance: "default",
+			class: "bg-warning text-white"
+		},
+		{
+			variant: "info",
+			appearance: "default",
+			class: "bg-info text-white"
+		},
+		{
+			variant: "default",
+			appearance: "light",
+			class: "bg-primary/10 text-primary"
+		},
+		{
+			variant: "secondary",
+			appearance: "light",
+			class: "bg-secondary text-secondary-foreground"
+		},
+		{
+			variant: "destructive",
+			appearance: "light",
+			class: "bg-destructive/10 text-destructive"
+		},
+		{
+			variant: "success",
+			appearance: "light",
+			class: "bg-success/10 text-success"
+		},
+		{
+			variant: "warning",
+			appearance: "light",
+			class: "bg-warning/10 text-warning"
+		},
+		{
+			variant: "info",
+			appearance: "light",
+			class: "bg-info/10 text-info"
+		},
+		{
+			variant: "default",
+			appearance: "outline",
+			class: "border-primary bg-primary/10 text-primary"
+		},
+		{
+			variant: "secondary",
+			appearance: "outline",
+			class: "bg-secondary border-border text-foreground"
+		},
+		{
+			variant: "destructive",
+			appearance: "outline",
+			class: "border-destructive bg-destructive/10 text-destructive"
+		},
+		{
+			variant: "success",
+			appearance: "outline",
+			class: "border-success bg-success/10 text-success"
+		},
+		{
+			variant: "warning",
+			appearance: "outline",
+			class: "border-warning bg-warning/10 text-warning"
+		},
+		{
+			variant: "info",
+			appearance: "outline",
+			class: "border-info bg-info/10 text-info"
+		},
+		{
+			variant: "default",
+			appearance: "ghost",
+			class: "text-primary"
+		},
+		{
+			variant: "secondary",
+			appearance: "ghost",
+			class: "text-secondary-foreground"
+		},
+		{
+			variant: "destructive",
+			appearance: "ghost",
+			class: "text-destructive"
+		},
+		{
+			variant: "success",
+			appearance: "ghost",
+			class: "text-success"
+		},
+		{
+			variant: "warning",
+			appearance: "ghost",
+			class: "text-warning"
+		},
+		{
+			variant: "info",
+			appearance: "ghost",
+			class: "text-info"
+		}
+	],
+	defaultVariants: {
+		variant: "default",
+		appearance: "default",
+		size: "md",
+		shape: "rounded"
+	}
+});
+const Badge = ({ className, variant, appearance, size, shape, ...props }) => {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn(badgeVariants({
+			variant,
+			appearance,
+			size,
+			shape
+		}), className),
+		...props
+	});
+};
+Badge.displayName = "Badge";
+const BadgeDot = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "badge-dot",
+		className: cn("size-2 rounded-full bg-[currentColor]", className),
+		...props
+	});
+};
+BadgeDot.displayName = "BadgeDot";
+const BadgeButton = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("button", {
+		"data-slot": "badge-button",
+		type: "button",
+		className: cn("cursor-pointer transition-all inline-flex items-center justify-center leading-none size-3.5 [&>svg]:opacity-100! [&>svg]:size-3.5! p-0 rounded-md -me-0.5 opacity-60 hover:opacity-100", className),
+		...props
+	});
+};
+BadgeButton.displayName = "BadgeButton";
+
+//#endregion
+export { Badge, BadgeButton, BadgeDot };
+//# sourceMappingURL=badge.js.map

package/dist/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","names":[],"sources":["../src/components/badge.tsx"],"sourcesContent":["'use client'\n\nimport { cva } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { cn } from '../lib/utils'\n\n// ============================================================================\n// Badge Variants\n// ============================================================================\n\nconst badgeVariants = cva(\n  [\n    'inline-flex items-center gap-1.5 whitespace-nowrap font-medium transition-colors',\n    '[&_svg]:pointer-events-none [&_svg]:shrink-0',\n  ],\n  {\n    variants: {\n      variant: {\n        default: '',\n        secondary: '',\n        destructive: '',\n        success: '',\n        warning: '',\n        info: '',\n      },\n      appearance: {\n        default: '',\n        outline: 'border',\n        light: '',\n        ghost: '',\n      },\n      size: {\n        sm: 'text-xs px-2 h-5 min-w-5 [&_svg]:size-3',\n        md: 'text-xs px-2.5 h-6 min-w-6 [&_svg]:size-3.5',\n        lg: 'text-sm px-3 h-7 min-w-7 [&_svg]:size-4',\n      },\n      shape: {\n        pill: 'rounded-full',\n        rounded: 'rounded-md',\n      },\n    },\n    compoundVariants: [\n      // Default appearance (solid) - full color bg, white text\n      {\n        variant: 'default',\n        appearance: 'default',\n        class: 'bg-primary text-primary-foreground',\n      },\n      {\n        variant: 'secondary',\n        appearance: 'default',\n        class: 'bg-secondary text-secondary-foreground',\n      },\n      {\n        variant: 'destructive',\n        appearance: 'default',\n        class: 'bg-destructive text-white',\n      },\n      {\n        variant: 'success',\n        appearance: 'default',\n        class: 'bg-success text-white',\n      },\n      {\n        variant: 'warning',\n        appearance: 'default',\n        class: 'bg-warning text-white',\n      },\n      {\n        variant: 'info',\n        appearance: 'default',\n        class: 'bg-info text-white',\n      },\n      // Light appearance - 10% bg, colored text\n      {\n        variant: 'default',\n        appearance: 'light',\n        class: 'bg-primary/10 text-primary',\n      },\n      {\n        variant: 'secondary',\n        appearance: 'light',\n        class: 'bg-secondary text-secondary-foreground',\n      },\n      {\n        variant: 'destructive',\n        appearance: 'light',\n        class: 'bg-destructive/10 text-destructive',\n      },\n      {\n        variant: 'success',\n        appearance: 'light',\n        class: 'bg-success/10 text-success',\n      },\n      {\n        variant: 'warning',\n        appearance: 'light',\n        class: 'bg-warning/10 text-warning',\n      },\n      {\n        variant: 'info',\n        appearance: 'light',\n        class: 'bg-info/10 text-info',\n      },\n      // Outline appearance - border + 10% bg, colored text\n      {\n        variant: 'default',\n        appearance: 'outline',\n        class: 'border-primary bg-primary/10 text-primary',\n      },\n      {\n        variant: 'secondary',\n        appearance: 'outline',\n        class: 'bg-secondary border-border text-foreground',\n      },\n      {\n        variant: 'destructive',\n        appearance: 'outline',\n        class: 'border-destructive bg-destructive/10 text-destructive',\n      },\n      {\n        variant: 'success',\n        appearance: 'outline',\n        class: 'border-success bg-success/10 text-success',\n      },\n      {\n        variant: 'warning',\n        appearance: 'outline',\n        class: 'border-warning bg-warning/10 text-warning',\n      },\n      {\n        variant: 'info',\n        appearance: 'outline',\n        class: 'border-info bg-info/10 text-info',\n      },\n      // Ghost appearance - just colored text\n      {\n        variant: 'default',\n        appearance: 'ghost',\n        class: 'text-primary',\n      },\n      {\n        variant: 'secondary',\n        appearance: 'ghost',\n        class: 'text-secondary-foreground',\n      },\n      {\n        variant: 'destructive',\n        appearance: 'ghost',\n        class: 'text-destructive',\n      },\n      {\n        variant: 'success',\n        appearance: 'ghost',\n        class: 'text-success',\n      },\n      {\n        variant: 'warning',\n        appearance: 'ghost',\n        class: 'text-warning',\n      },\n      {\n        variant: 'info',\n        appearance: 'ghost',\n        class: 'text-info',\n      },\n    ],\n    defaultVariants: {\n      variant: 'default',\n      appearance: 'default',\n      size: 'md',\n      shape: 'rounded',\n    },\n  },\n)\n\nexport type BadgeVariant =\n  | 'default'\n  | 'secondary'\n  | 'destructive'\n  | 'success'\n  | 'warning'\n  | 'info'\n\nexport type BadgeAppearance = 'default' | 'outline' | 'light' | 'ghost'\n\nexport type BadgeSize = 'sm' | 'md' | 'lg'\n\nexport type BadgeShape = 'pill' | 'rounded'\n\n// ============================================================================\n// Badge\n// ============================================================================\n\ntype BadgeProps = React.ComponentProps<'span'> & {\n  /** Visual style variant */\n  variant?: BadgeVariant\n  /** Appearance style */\n  appearance?: BadgeAppearance\n  /** Size of the badge */\n  size?: BadgeSize\n  /** Shape of the badge */\n  shape?: BadgeShape\n}\n\nconst Badge = ({ className, variant, appearance, size, shape, ...props }: BadgeProps) => {\n  return (\n    <span\n      className={cn(badgeVariants({ variant, appearance, size, shape }), className)}\n      {...props}\n    />\n  )\n}\n\nBadge.displayName = 'Badge'\n\n// ============================================================================\n// BadgeDot\n// ============================================================================\n\ntype BadgeDotProps = React.ComponentProps<'span'>\n\nconst BadgeDot = ({ className, ...props }: BadgeDotProps) => {\n  return (\n    <span\n      data-slot='badge-dot'\n      className={cn('size-2 rounded-full bg-[currentColor]', className)}\n      {...props}\n    />\n  )\n}\n\nBadgeDot.displayName = 'BadgeDot'\n\n// ============================================================================\n// BadgeButton\n// ============================================================================\n\ntype BadgeButtonProps = React.ComponentProps<'button'>\n\nconst BadgeButton = ({ className, ...props }: BadgeButtonProps) => {\n  return (\n    <button\n      data-slot='badge-button'\n      type='button'\n      className={cn(\n        'cursor-pointer transition-all inline-flex items-center justify-center leading-none size-3.5 [&>svg]:opacity-100! [&>svg]:size-3.5! p-0 rounded-md -me-0.5 opacity-60 hover:opacity-100',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nBadgeButton.displayName = 'BadgeButton'\n\n// ============================================================================\n// Exports\n// ============================================================================\n\nexport { Badge, BadgeDot, BadgeButton }\n\nexport type { BadgeProps, BadgeDotProps, BadgeButtonProps }\n"],"mappings":";;;;;;;;AAWA,MAAM,gBAAgB,IACpB,CACE,oFACA,+CACD,EACD;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,WAAW;GACX,aAAa;GACb,SAAS;GACT,SAAS;GACT,MAAM;GACP;EACD,YAAY;GACV,SAAS;GACT,SAAS;GACT,OAAO;GACP,OAAO;GACR;EACD,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL;EACD,OAAO;GACL,MAAM;GACN,SAAS;GACV;EACF;CACD,kBAAkB;EAEhB;GACE,SAAS;GACT,YAAY;GACZ,OAAO;GACR;EACD;GACE,SAAS;GACT,YAAY;GACZ,OAAO;GACR;EACD;GACE,SAAS;GACT,YAAY;GACZ,OAAO;GACR;EACD;GACE,SAAS;GACT,YAAY;GACZ,OAAO;GACR;EACD;GACE,SAAS;GACT,YAAY;GACZ,OAAO;GACR;EACD;GACE,SAAS;GACT,YAAY;GACZ,OAAO;GACR;EAED;GACE,SAAS;GACT,YAAY;GACZ,OAAO;GACR;EACD;GACE,SAAS;GACT,YAAY;GACZ,OAAO;GACR;EACD;GACE,SAAS;GACT,YAAY;GACZ,OAAO;GACR;EACD;GACE,SAAS;GACT,YAAY;GACZ,OAAO;GACR;EACD;GACE,SAAS;GACT,YAAY;GACZ,OAAO;GACR;EACD;GACE,SAAS;GACT,YAAY;GACZ,OAAO;GACR;EAED;GACE,SAAS;GACT,YAAY;GACZ,OAAO;GACR;EACD;GACE,SAAS;GACT,YAAY;GACZ,OAAO;GACR;EACD;GACE,SAAS;GACT,YAAY;GACZ,OAAO;GACR;EACD;GACE,SAAS;GACT,YAAY;GACZ,OAAO;GACR;EACD;GACE,SAAS;GACT,YAAY;GACZ,OAAO;GACR;EACD;GACE,SAAS;GACT,YAAY;GACZ,OAAO;GACR;EAED;GACE,SAAS;GACT,YAAY;GACZ,OAAO;GACR;EACD;GACE,SAAS;GACT,YAAY;GACZ,OAAO;GACR;EACD;GACE,SAAS;GACT,YAAY;GACZ,OAAO;GACR;EACD;GACE,SAAS;GACT,YAAY;GACZ,OAAO;GACR;EACD;GACE,SAAS;GACT,YAAY;GACZ,OAAO;GACR;EACD;GACE,SAAS;GACT,YAAY;GACZ,OAAO;GACR;EACF;CACD,iBAAiB;EACf,SAAS;EACT,YAAY;EACZ,MAAM;EACN,OAAO;EACR;CACF,CACF;AA+BD,MAAM,SAAS,EAAE,WAAW,SAAS,YAAY,MAAM,OAAO,GAAG,YAAwB;AACvF,QACE,oBAAC;EACC,WAAW,GAAG,cAAc;GAAE;GAAS;GAAY;GAAM;GAAO,CAAC,EAAE,UAAU;EAC7E,GAAI;GACJ;;AAIN,MAAM,cAAc;AAQpB,MAAM,YAAY,EAAE,WAAW,GAAG,YAA2B;AAC3D,QACE,oBAAC;EACC,aAAU;EACV,WAAW,GAAG,yCAAyC,UAAU;EACjE,GAAI;GACJ;;AAIN,SAAS,cAAc;AAQvB,MAAM,eAAe,EAAE,WAAW,GAAG,YAA8B;AACjE,QACE,oBAAC;EACC,aAAU;EACV,MAAK;EACL,WAAW,GACT,0LACA,UACD;EACD,GAAI;GACJ;;AAIN,YAAY,cAAc"}

package/dist/button.d.ts

@@ -1,21 +1,26 @@
-import { Button as Button_2 } from '@base-ui/react/button';
-import { JSX } from 'react/jsx-runtime';
-import * as React_2 from 'react';
-
-export declare const Button: {
-    ({ className, variant, size, disabled, children, ...props }: ButtonProps): JSX.Element;
-    displayName: string;
-};
-
-export declare type ButtonProps = React_2.ComponentProps<typeof Button_2> & {
-    /** Visual style variant */
-    variant?: ButtonVariant;
-    /** Size of the button */
-    size?: ButtonSize;
-};
-
-declare type ButtonSize = 'sm' | 'default' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg';
-
-declare type ButtonVariant = 'default' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'link';
-
-export { }
+import { ButtonSize, ButtonVariant } from "./lib/button-variants.js";
+import { Button as Button$1 } from "@base-ui/react/button";
+import * as React from "react";
+import * as react_jsx_runtime18 from "react/jsx-runtime";
+
+//#region src/components/button.d.ts
+type ButtonProps = React.ComponentProps<typeof Button$1> & {
+  /** Visual style variant */
+  variant?: ButtonVariant;
+  /** Size of the button */
+  size?: ButtonSize;
+};
+declare const Button: {
+  ({
+    className,
+    variant,
+    size,
+    disabled,
+    children,
+    ...props
+  }: ButtonProps): react_jsx_runtime18.JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { Button, type ButtonProps };
+//# sourceMappingURL=button.d.ts.map

package/dist/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","names":[],"sources":["../src/components/button.tsx"],"sourcesContent":[],"mappings":";;;;;;KAYK,WAAA,GAAc,KAAA,CAAM,sBAAsB;;YAEnC;EAFP;EAAW,IAAA,CAAA,EAIP,UAJO;;cAOV,MAPmB,EAAA;;IAEb,SAAA;IAAA,OAAA;IAAA,IAAA;IAAA,QAAA;IAAA,QAAA;IAAA,GAAA;EAAA,CAAA,EAYT,WAZS,CAAA,EAYE,mBAAA,CAAA,GAAA,CAAA,OAZF;aAEH,EAAA,MAAA;CAAU"}

package/dist/button.js

@@ -1,25 +1,25 @@
-"use client";
-import { jsx as a } from "react/jsx-runtime";
-import { Button as i } from "@base-ui/react/button";
-import { b as u } from "./button-variants-CbFMPwc8.js";
-import { c as e } from "./utils-B6yFEsav.js";
-const p = ({
-  className: t,
-  variant: o,
-  size: r,
-  disabled: m,
-  children: n,
-  ...s
-}) => /* @__PURE__ */ a(
-  i,
-  {
-    className: e(u({ variant: o, size: r }), t),
-    disabled: m,
-    ...s,
-    children: n
-  }
-);
-p.displayName = "Button";
-export {
-  p as Button
+'use client';
+
+import { buttonVariants } from "./lib/button-variants.js";
+import { cn } from "./lib/utils.js";
+import { Button as Button$1 } from "@base-ui/react/button";
+import "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/button.tsx
+const Button = ({ className, variant, size, disabled, children, ...props }) => {
+	return /* @__PURE__ */ jsx(Button$1, {
+		className: cn(buttonVariants({
+			variant,
+			size
+		}), className),
+		disabled,
+		...props,
+		children
+	});
 };
+Button.displayName = "Button";
+
+//#endregion
+export { Button };
+//# sourceMappingURL=button.js.map

package/dist/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","names":["BaseButton"],"sources":["../src/components/button.tsx"],"sourcesContent":["'use client'\n\nimport { Button as BaseButton } from '@base-ui/react/button'\nimport * as React from 'react'\n\nimport {\n  type ButtonSize,\n  type ButtonVariant,\n  buttonVariants,\n} from '../lib/button-variants'\nimport { cn } from '../lib/utils'\n\ntype ButtonProps = React.ComponentProps<typeof BaseButton> & {\n  /** Visual style variant */\n  variant?: ButtonVariant\n  /** Size of the button */\n  size?: ButtonSize\n}\n\nconst Button = ({\n  className,\n  variant,\n  size,\n  disabled,\n  children,\n  ...props\n}: ButtonProps) => {\n  return (\n    <BaseButton\n      className={cn(buttonVariants({ variant, size }), className)}\n      disabled={disabled}\n      {...props}\n    >\n      {children}\n    </BaseButton>\n  )\n}\n\nButton.displayName = 'Button'\n\nexport { Button }\n\nexport type { ButtonProps }\n"],"mappings":";;;;;;;;;AAmBA,MAAM,UAAU,EACd,WACA,SACA,MACA,UACA,UACA,GAAG,YACc;AACjB,QACE,oBAACA;EACC,WAAW,GAAG,eAAe;GAAE;GAAS;GAAM,CAAC,EAAE,UAAU;EACjD;EACV,GAAI;EAEH;GACU;;AAIjB,OAAO,cAAc"}