@etus/ui 0.4.0-beta.2 → 0.4.0-beta.4

package/dist/chunk-TAZPML2P.js

@@ -0,0 +1,198 @@
+import { Divider } from './chunk-3L5G7VI2.js';
+import { cn } from './chunk-HRNDJU7D.js';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import * as React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var ButtonGroupContext = React.createContext(null);
+function useButtonGroup() {
+  return React.use(ButtonGroupContext);
+}
+var buttonGroupVariants = cva(
+  "flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2",
+  {
+    variants: {
+      variant: {
+        default: "",
+        segmented: "border border-[color:var(--button-group-root-border-color-default)] rounded-[var(--button-group-root-radius)] shadow-[var(--button-group-root-shadow)] overflow-clip isolate [&>*:not(:first-child)]:rounded-none [&>*:first-child]:rounded-l-[var(--button-group-root-radius)] [&>*:first-child]:rounded-r-none [&>*:last-child]:rounded-r-[var(--button-group-root-radius)] [&>*:last-child]:rounded-l-none",
+        primary: "border border-[color:var(--button-group-root-border-color-primary)] bg-[color:var(--button-group-root-bg-primary)] text-[color:var(--button-group-root-fg-primary)] rounded-[var(--button-group-root-radius)] shadow-[var(--button-group-root-shadow)] overflow-clip isolate [&>*:not(:first-child)]:rounded-none [&>*:first-child]:rounded-l-[var(--button-group-root-radius)] [&>*:first-child]:rounded-r-none [&>*:last-child]:rounded-r-[var(--button-group-root-radius)] [&>*:last-child]:rounded-l-none"
+      },
+      orientation: {
+        horizontal: "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
+        vertical: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none"
+      }
+    },
+    compoundVariants: [
+      // Segmented variant removes default border handling (items have their own dividers)
+      {
+        variant: "segmented",
+        orientation: "horizontal",
+        className: "[&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:border-r [&>*:not(:last-child)]:border-border"
+      },
+      {
+        variant: "segmented",
+        orientation: "vertical",
+        className: "[&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:border-b [&>*:not(:last-child)]:border-border"
+      }
+    ],
+    defaultVariants: {
+      variant: "default",
+      orientation: "horizontal"
+    }
+  }
+);
+var buttonGroupItemVariants = cva(
+  "inline-flex items-center justify-center gap-[var(--button-group-item-gap)] leading-[length:var(--button-group-item-line-height)] font-[var(--button-group-item-font-weight)] transition-colors outline-none whitespace-nowrap [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-5 [&_svg]:shrink-0 focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset disabled:pointer-events-none disabled:text-muted-foreground",
+  {
+    variants: {
+      size: {
+        sm: "h-[var(--button-group-item-height-sm)] text-[length:var(--button-group-item-font-size-sm)]",
+        md: "h-[var(--button-group-item-height-md)] text-[length:var(--button-group-item-font-size-md)]",
+        lg: "h-[var(--button-group-item-height-lg)] text-[length:var(--button-group-item-font-size-lg)]"
+      },
+      iconMode: {
+        none: "",
+        leading: "",
+        dot: "",
+        only: ""
+      },
+      current: {
+        true: "bg-[color:var(--button-group-item-background-active)]",
+        false: "bg-[color:var(--button-group-item-background)] hover:bg-[color:var(--button-group-item-background-hover)]"
+      }
+    },
+    compoundVariants: [
+      // Padding pairs per size × iconMode (only is icon-only, gets symmetric px)
+      { size: "sm", iconMode: "none", className: "px-[var(--button-group-item-padding-x-sm)] py-[var(--button-group-item-padding-y-sm)]" },
+      { size: "sm", iconMode: "leading", className: "pl-2.5 pr-[var(--button-group-item-padding-x-sm)] py-[var(--button-group-item-padding-y-sm)]" },
+      { size: "sm", iconMode: "dot", className: "px-[var(--button-group-item-padding-x-sm)] py-[var(--button-group-item-padding-y-sm)]" },
+      { size: "sm", iconMode: "only", className: "px-2 py-[var(--button-group-item-padding-y-sm)]" },
+      { size: "md", iconMode: "none", className: "px-[var(--button-group-item-padding-x-md)] py-[var(--button-group-item-padding-y-md)]" },
+      { size: "md", iconMode: "leading", className: "pl-3 pr-[var(--button-group-item-padding-x-md)] py-[var(--button-group-item-padding-y-md)]" },
+      { size: "md", iconMode: "dot", className: "px-[var(--button-group-item-padding-x-md)] py-[var(--button-group-item-padding-y-md)]" },
+      { size: "md", iconMode: "only", className: "px-2.5 py-[var(--button-group-item-padding-y-md)]" },
+      { size: "lg", iconMode: "none", className: "px-[var(--button-group-item-padding-x-lg)] py-[var(--button-group-item-padding-y-lg)]" },
+      { size: "lg", iconMode: "leading", className: "pl-3.5 pr-[var(--button-group-item-padding-x-lg)] py-[var(--button-group-item-padding-y-lg)]" },
+      { size: "lg", iconMode: "dot", className: "px-[var(--button-group-item-padding-x-lg)] py-[var(--button-group-item-padding-y-lg)]" },
+      { size: "lg", iconMode: "only", className: "px-3 py-[var(--button-group-item-padding-y-lg)]" }
+    ],
+    defaultVariants: {
+      size: "md",
+      iconMode: "none",
+      current: false
+    }
+  }
+);
+function ButtonGroup({
+  className,
+  orientation,
+  variant,
+  size,
+  buttonVariant,
+  disabled,
+  children,
+  ...props
+}) {
+  const contextValue = React.useMemo(
+    () => ({ size, buttonVariant, disabled }),
+    [size, buttonVariant, disabled]
+  );
+  return /* @__PURE__ */ jsx(ButtonGroupContext, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(buttonGroupVariants({ orientation, variant }), className),
+      "data-orientation": orientation,
+      "data-slot": "button-group",
+      "data-variant": variant,
+      role: "group",
+      ...props,
+      children
+    }
+  ) });
+}
+function ButtonGroupText({
+  className,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      className: cn(
+        "bg-[color:var(--button-group-text-background)] flex items-center gap-2 rounded-[var(--button-group-root-radius)] border px-[var(--button-group-text-padding-x)] text-[length:var(--button-group-text-font-size)] font-[var(--button-group-text-font-weight)] shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      "data-slot": "button-group-text",
+      ...props
+    }
+  );
+}
+function ButtonGroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Divider,
+    {
+      className: cn(
+        "bg-[color:var(--button-group-separator-color)] relative !m-0 self-stretch data-[orientation=vertical]:h-auto",
+        className
+      ),
+      "data-slot": "button-group-separator",
+      orientation,
+      ...props
+    }
+  );
+}
+function ButtonGroupItem({
+  className,
+  current = false,
+  iconMode = "none",
+  icon,
+  dot,
+  children,
+  disabled,
+  size = "md",
+  ...props
+}) {
+  const effectiveIconMode = icon && !children ? "only" : dot ? "dot" : icon ? "leading" : iconMode;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      className: cn(
+        buttonGroupItemVariants({
+          size,
+          iconMode: effectiveIconMode,
+          current
+        }),
+        className
+      ),
+      "data-current": current,
+      "data-slot": "button-group-item",
+      disabled,
+      type: "button",
+      ...props,
+      children: [
+        dot && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "size-2 rounded-full shrink-0",
+              typeof dot === "string" ? dot : "bg-success"
+            ),
+            "data-slot": "button-group-item-dot"
+          }
+        ),
+        icon && effectiveIconMode !== "dot" && /* @__PURE__ */ jsx("span", { className: "shrink-0", "data-slot": "button-group-item-icon", children: icon }),
+        children && effectiveIconMode !== "only" && /* @__PURE__ */ jsx("span", { "data-slot": "button-group-item-text", children })
+      ]
+    }
+  );
+}
+
+export { ButtonGroup, ButtonGroupContext, ButtonGroupItem, ButtonGroupSeparator, ButtonGroupText, buttonGroupItemVariants, buttonGroupVariants, useButtonGroup };
+//# sourceMappingURL=chunk-TAZPML2P.js.map
+//# sourceMappingURL=chunk-TAZPML2P.js.map

package/dist/chunk-TAZPML2P.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":"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","file":"chunk-TAZPML2P.js","sourcesContent":["import type {\n  ButtonGroupContextValue,\n  ButtonGroupItemProps,\n  ButtonGroupProps,\n  ButtonGroupSeparatorProps,\n  ButtonGroupTextProps,\n} from \"./ButtonGroup.types\"\n\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { Divider } from \"../Divider\"\n\n/**\n * Context for ButtonGroup prop inheritance\n * Child buttons can use useButtonGroup() to access group-level props\n */\nconst ButtonGroupContext = React.createContext<ButtonGroupContextValue | null>(null)\n\n/**\n * Hook to access ButtonGroup context values\n * Returns null if not inside a ButtonGroup\n */\nfunction useButtonGroup(): ButtonGroupContextValue | null {\n  return React.use(ButtonGroupContext)\n}\n\nconst buttonGroupVariants = cva(\n  \"flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2\",\n  {\n    variants: {\n      variant: {\n        default: \"\",\n        segmented:\n          \"border border-[color:var(--button-group-root-border-color-default)] rounded-[var(--button-group-root-radius)] shadow-[var(--button-group-root-shadow)] overflow-clip isolate [&>*:not(:first-child)]:rounded-none [&>*:first-child]:rounded-l-[var(--button-group-root-radius)] [&>*:first-child]:rounded-r-none [&>*:last-child]:rounded-r-[var(--button-group-root-radius)] [&>*:last-child]:rounded-l-none\",\n        primary:\n          \"border border-[color:var(--button-group-root-border-color-primary)] bg-[color:var(--button-group-root-bg-primary)] text-[color:var(--button-group-root-fg-primary)] rounded-[var(--button-group-root-radius)] shadow-[var(--button-group-root-shadow)] overflow-clip isolate [&>*:not(:first-child)]:rounded-none [&>*:first-child]:rounded-l-[var(--button-group-root-radius)] [&>*:first-child]:rounded-r-none [&>*:last-child]:rounded-r-[var(--button-group-root-radius)] [&>*:last-child]:rounded-l-none\",\n      },\n      orientation: {\n        horizontal:\n          \"[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none\",\n        vertical:\n          \"flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none\",\n      },\n    },\n    compoundVariants: [\n      // Segmented variant removes default border handling (items have their own dividers)\n      {\n        variant: \"segmented\",\n        orientation: \"horizontal\",\n        className:\n          \"[&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:border-r [&>*:not(:last-child)]:border-border\",\n      },\n      {\n        variant: \"segmented\",\n        orientation: \"vertical\",\n        className:\n          \"[&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:border-b [&>*:not(:last-child)]:border-border\",\n      },\n    ],\n    defaultVariants: {\n      variant: \"default\",\n      orientation: \"horizontal\",\n    },\n  }\n)\n\nconst buttonGroupItemVariants = cva(\n  \"inline-flex items-center justify-center gap-[var(--button-group-item-gap)] leading-[length:var(--button-group-item-line-height)] font-[var(--button-group-item-font-weight)] transition-colors outline-none whitespace-nowrap [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-5 [&_svg]:shrink-0 focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset disabled:pointer-events-none disabled:text-muted-foreground\",\n  {\n    variants: {\n      size: {\n        sm: \"h-[var(--button-group-item-height-sm)] text-[length:var(--button-group-item-font-size-sm)]\",\n        md: \"h-[var(--button-group-item-height-md)] text-[length:var(--button-group-item-font-size-md)]\",\n        lg: \"h-[var(--button-group-item-height-lg)] text-[length:var(--button-group-item-font-size-lg)]\",\n      },\n      iconMode: {\n        none: \"\",\n        leading: \"\",\n        dot: \"\",\n        only: \"\",\n      },\n      current: {\n        true: \"bg-[color:var(--button-group-item-background-active)]\",\n        false: \"bg-[color:var(--button-group-item-background)] hover:bg-[color:var(--button-group-item-background-hover)]\",\n      },\n    },\n    compoundVariants: [\n      // Padding pairs per size × iconMode (only is icon-only, gets symmetric px)\n      { size: \"sm\", iconMode: \"none\", className: \"px-[var(--button-group-item-padding-x-sm)] py-[var(--button-group-item-padding-y-sm)]\" },\n      { size: \"sm\", iconMode: \"leading\", className: \"pl-2.5 pr-[var(--button-group-item-padding-x-sm)] py-[var(--button-group-item-padding-y-sm)]\" },\n      { size: \"sm\", iconMode: \"dot\", className: \"px-[var(--button-group-item-padding-x-sm)] py-[var(--button-group-item-padding-y-sm)]\" },\n      { size: \"sm\", iconMode: \"only\", className: \"px-2 py-[var(--button-group-item-padding-y-sm)]\" },\n      { size: \"md\", iconMode: \"none\", className: \"px-[var(--button-group-item-padding-x-md)] py-[var(--button-group-item-padding-y-md)]\" },\n      { size: \"md\", iconMode: \"leading\", className: \"pl-3 pr-[var(--button-group-item-padding-x-md)] py-[var(--button-group-item-padding-y-md)]\" },\n      { size: \"md\", iconMode: \"dot\", className: \"px-[var(--button-group-item-padding-x-md)] py-[var(--button-group-item-padding-y-md)]\" },\n      { size: \"md\", iconMode: \"only\", className: \"px-2.5 py-[var(--button-group-item-padding-y-md)]\" },\n      { size: \"lg\", iconMode: \"none\", className: \"px-[var(--button-group-item-padding-x-lg)] py-[var(--button-group-item-padding-y-lg)]\" },\n      { size: \"lg\", iconMode: \"leading\", className: \"pl-3.5 pr-[var(--button-group-item-padding-x-lg)] py-[var(--button-group-item-padding-y-lg)]\" },\n      { size: \"lg\", iconMode: \"dot\", className: \"px-[var(--button-group-item-padding-x-lg)] py-[var(--button-group-item-padding-y-lg)]\" },\n      { size: \"lg\", iconMode: \"only\", className: \"px-3 py-[var(--button-group-item-padding-y-lg)]\" },\n    ],\n    defaultVariants: {\n      size: \"md\",\n      iconMode: \"none\",\n      current: false,\n    },\n  }\n)\n\nfunction ButtonGroup({\n  className,\n  orientation,\n  variant,\n  size,\n  buttonVariant,\n  disabled,\n  children,\n  ...props\n}: ButtonGroupProps) {\n  const contextValue = React.useMemo<ButtonGroupContextValue>(\n    () => ({ size, buttonVariant, disabled }),\n    [size, buttonVariant, disabled]\n  )\n\n  return (\n    <ButtonGroupContext value={contextValue}>\n      <div\n        className={cn(buttonGroupVariants({ orientation, variant }), className)}\n        data-orientation={orientation}\n        data-slot=\"button-group\"\n        data-variant={variant}\n        role=\"group\"\n        {...props}\n      >\n        {children}\n      </div>\n    </ButtonGroupContext>\n  )\n}\n\nfunction ButtonGroupText({\n  className,\n  asChild = false,\n  ...props\n}: ButtonGroupTextProps) {\n  const Comp = asChild ? Slot : \"div\"\n\n  return (\n    <Comp\n      className={cn(\n        \"bg-[color:var(--button-group-text-background)] flex items-center gap-2 rounded-[var(--button-group-root-radius)] border px-[var(--button-group-text-padding-x)] text-[length:var(--button-group-text-font-size)] font-[var(--button-group-text-font-weight)] shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      data-slot=\"button-group-text\"\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupSeparator({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: ButtonGroupSeparatorProps) {\n  return (\n    <Divider\n      className={cn(\n        \"bg-[color:var(--button-group-separator-color)] relative !m-0 self-stretch data-[orientation=vertical]:h-auto\",\n        className\n      )}\n      data-slot=\"button-group-separator\"\n      orientation={orientation}\n      {...props}\n    />\n  )\n}\n\n/**\n * ButtonGroupItem - Individual segment in a segmented button group\n * Use within ButtonGroup variant=\"segmented\"\n */\nfunction ButtonGroupItem({\n  className,\n  current = false,\n  iconMode = \"none\",\n  icon,\n  dot,\n  children,\n  disabled,\n  size = \"md\",\n  ...props\n}: ButtonGroupItemProps) {\n  // Determine effective icon mode based on props\n  const effectiveIconMode = icon && !children ? \"only\" : dot ? \"dot\" : icon ? \"leading\" : iconMode\n\n  return (\n    <button\n      className={cn(\n        buttonGroupItemVariants({\n          size,\n          iconMode: effectiveIconMode,\n          current,\n        }),\n        className\n      )}\n      data-current={current}\n      data-slot=\"button-group-item\"\n      disabled={disabled}\n      type=\"button\"\n      {...props}\n    >\n      {/* Status dot */}\n      {dot && (\n        <span\n          className={cn(\n            \"size-2 rounded-full shrink-0\",\n            typeof dot === \"string\" ? dot : \"bg-success\"\n          )}\n          data-slot=\"button-group-item-dot\"\n        />\n      )}\n\n      {/* Leading icon */}\n      {icon && effectiveIconMode !== \"dot\" && (\n        <span className=\"shrink-0\" data-slot=\"button-group-item-icon\">\n          {icon}\n        </span>\n      )}\n\n      {/* Text content */}\n      {children && effectiveIconMode !== \"only\" && (\n        <span data-slot=\"button-group-item-text\">{children}</span>\n      )}\n    </button>\n  )\n}\n\nexport {\n  ButtonGroup,\n  ButtonGroupContext,\n  ButtonGroupItem,\n  buttonGroupItemVariants,\n  ButtonGroupSeparator,\n  ButtonGroupText,\n  buttonGroupVariants,\n  useButtonGroup,\n}\n"]}

package/dist/chunk-TNROOKX3.js

@@ -0,0 +1,352 @@
+import { Tooltip, TooltipTrigger, TooltipContent } from './chunk-7ZJ32KRQ.js';
+import { cn } from './chunk-HRNDJU7D.js';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { X } from 'lucide-react';
+import * as React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var legacyVariantMap = {
+  default: { type: "pill-color", color: "primary" },
+  secondary: { type: "pill-color", color: "muted" },
+  destructive: { type: "pill-color", color: "destructive" },
+  outline: { type: "pill-outline", color: "muted" }
+};
+var dotColorMap = {
+  primary: "bg-primary-foreground",
+  destructive: "bg-white",
+  warning: "bg-warning-foreground",
+  success: "bg-success-foreground",
+  info: "bg-white",
+  tip: "bg-white",
+  muted: "bg-muted-foreground",
+  "blue-gray": "bg-white",
+  "blue-light": "bg-white",
+  blue: "bg-white",
+  indigo: "bg-white",
+  purple: "bg-white",
+  pink: "bg-white",
+  orange: "bg-white"
+};
+var dismissColorMap = {
+  primary: "text-primary-foreground hover:bg-primary-foreground/20",
+  destructive: "text-white hover:bg-white/20",
+  warning: "text-warning-foreground hover:bg-warning-foreground/20",
+  success: "text-success-foreground hover:bg-success-foreground/20",
+  info: "text-white hover:bg-white/20",
+  tip: "text-white hover:bg-white/20",
+  muted: "text-muted-foreground hover:bg-muted-foreground/20",
+  "blue-gray": "text-white hover:bg-white/20",
+  "blue-light": "text-white hover:bg-white/20",
+  blue: "text-white hover:bg-white/20",
+  indigo: "text-white hover:bg-white/20",
+  purple: "text-white hover:bg-white/20",
+  pink: "text-white hover:bg-white/20",
+  orange: "text-white hover:bg-white/20"
+};
+var badgeVariants = cva(
+  "inline-flex items-center justify-center font-medium w-fit whitespace-nowrap shrink-0 gap-1.5 transition-[color,background-color,box-shadow,filter] overflow-hidden border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none",
+  {
+    variants: {
+      type: {
+        "pill-color": "rounded-[var(--badge-radius-pill)] border-transparent",
+        "pill-outline": "rounded-[var(--badge-radius-pill)] bg-transparent",
+        "badge-color": "rounded-[var(--badge-radius-default)] border-transparent",
+        "badge-outline": "rounded-[var(--badge-radius-default)] bg-transparent",
+        "badge-modern": "rounded-[var(--badge-radius-default)] border-transparent border-l-[3px] pr-2.5 pl-2 shadow-xs"
+      },
+      color: {
+        primary: "",
+        destructive: "",
+        warning: "",
+        success: "",
+        info: "",
+        tip: "",
+        muted: "",
+        "blue-gray": "",
+        "blue-light": "",
+        blue: "",
+        indigo: "",
+        purple: "",
+        pink: "",
+        orange: ""
+      },
+      size: {
+        sm: "h-[var(--badge-size-sm-h)] px-[var(--badge-size-sm-px)] text-[length:var(--badge-size-sm-text)] [&_svg]:size-3",
+        default: "h-[var(--badge-size-md-h)] px-[var(--badge-size-md-px)] text-[length:var(--badge-size-md-text)] [&_svg]:size-3.5",
+        lg: "h-[var(--badge-size-lg-h)] px-[var(--badge-size-lg-px)] text-[length:var(--badge-size-lg-text)] [&_svg]:size-4"
+      }
+    },
+    compoundVariants: [
+      // ========================================
+      // PILL-COLOR VARIANTS
+      // ========================================
+      { type: "pill-color", color: "primary", className: "bg-[color:var(--badge-color-primary-bg)] text-[color:var(--badge-color-primary-fg)]" },
+      { type: "pill-color", color: "destructive", className: "bg-[color:var(--badge-color-destructive-bg)] text-[color:var(--badge-color-destructive-fg)]" },
+      { type: "pill-color", color: "warning", className: "bg-[color:var(--badge-color-warning-bg)] text-[color:var(--badge-color-warning-fg)]" },
+      { type: "pill-color", color: "success", className: "bg-[color:var(--badge-color-success-bg)] text-[color:var(--badge-color-success-fg)]" },
+      { type: "pill-color", color: "info", className: "bg-info text-info-foreground" },
+      { type: "pill-color", color: "tip", className: "bg-tip text-white" },
+      { type: "pill-color", color: "muted", className: "bg-[color:var(--badge-color-secondary-bg)] text-[color:var(--badge-color-secondary-fg)]" },
+      { type: "pill-color", color: "blue-gray", className: "bg-slate-500 text-white" },
+      { type: "pill-color", color: "blue-light", className: "bg-sky-400 text-sky-950" },
+      { type: "pill-color", color: "blue", className: "bg-blue-400 text-blue-950" },
+      { type: "pill-color", color: "indigo", className: "bg-indigo-400 text-indigo-950" },
+      { type: "pill-color", color: "purple", className: "bg-violet-400 text-violet-950" },
+      { type: "pill-color", color: "pink", className: "bg-pink-400 text-pink-950" },
+      { type: "pill-color", color: "orange", className: "bg-orange-500 text-orange-950" },
+      // ========================================
+      // PILL-OUTLINE VARIANTS
+      // ========================================
+      { type: "pill-outline", color: "primary", className: "border-primary text-primary" },
+      { type: "pill-outline", color: "destructive", className: "border-destructive text-destructive" },
+      { type: "pill-outline", color: "warning", className: "border-warning text-warning" },
+      { type: "pill-outline", color: "success", className: "border-success text-success" },
+      { type: "pill-outline", color: "info", className: "border-info text-info" },
+      { type: "pill-outline", color: "tip", className: "border-tip text-tip" },
+      { type: "pill-outline", color: "muted", className: "border-border text-muted-foreground" },
+      { type: "pill-outline", color: "blue-gray", className: "border-slate-500 text-slate-500" },
+      { type: "pill-outline", color: "blue-light", className: "border-sky-400 text-sky-400" },
+      { type: "pill-outline", color: "blue", className: "border-blue-400 text-blue-400" },
+      { type: "pill-outline", color: "indigo", className: "border-indigo-400 text-indigo-400" },
+      { type: "pill-outline", color: "purple", className: "border-violet-400 text-violet-400" },
+      { type: "pill-outline", color: "pink", className: "border-pink-400 text-pink-400" },
+      { type: "pill-outline", color: "orange", className: "border-orange-500 text-orange-500" },
+      // ========================================
+      // BADGE-COLOR VARIANTS
+      // ========================================
+      { type: "badge-color", color: "primary", className: "bg-primary text-primary-foreground" },
+      { type: "badge-color", color: "destructive", className: "bg-destructive text-white" },
+      { type: "badge-color", color: "warning", className: "bg-[color:var(--badge-color-warning-bg)] text-[color:var(--badge-color-warning-fg)]" },
+      { type: "badge-color", color: "success", className: "bg-[color:var(--badge-color-success-bg)] text-[color:var(--badge-color-success-fg)]" },
+      { type: "badge-color", color: "info", className: "bg-info text-info-foreground" },
+      { type: "badge-color", color: "tip", className: "bg-tip text-white" },
+      { type: "badge-color", color: "muted", className: "bg-muted text-muted-foreground" },
+      { type: "badge-color", color: "blue-gray", className: "bg-slate-500 text-white" },
+      { type: "badge-color", color: "blue-light", className: "bg-sky-400 text-sky-950" },
+      { type: "badge-color", color: "blue", className: "bg-blue-400 text-blue-950" },
+      { type: "badge-color", color: "indigo", className: "bg-indigo-400 text-indigo-950" },
+      { type: "badge-color", color: "purple", className: "bg-violet-400 text-violet-950" },
+      { type: "badge-color", color: "pink", className: "bg-pink-400 text-pink-950" },
+      { type: "badge-color", color: "orange", className: "bg-orange-500 text-orange-950" },
+      // ========================================
+      // BADGE-OUTLINE VARIANTS
+      // ========================================
+      { type: "badge-outline", color: "primary", className: "border-primary text-primary" },
+      { type: "badge-outline", color: "destructive", className: "border-destructive text-destructive" },
+      { type: "badge-outline", color: "warning", className: "border-warning text-warning" },
+      { type: "badge-outline", color: "success", className: "border-success text-success" },
+      { type: "badge-outline", color: "info", className: "border-info text-info" },
+      { type: "badge-outline", color: "tip", className: "border-tip text-tip" },
+      { type: "badge-outline", color: "muted", className: "border-border text-muted-foreground" },
+      { type: "badge-outline", color: "blue-gray", className: "border-slate-500 text-slate-500" },
+      { type: "badge-outline", color: "blue-light", className: "border-sky-400 text-sky-400" },
+      { type: "badge-outline", color: "blue", className: "border-blue-400 text-blue-400" },
+      { type: "badge-outline", color: "indigo", className: "border-indigo-400 text-indigo-400" },
+      { type: "badge-outline", color: "purple", className: "border-violet-400 text-violet-400" },
+      { type: "badge-outline", color: "pink", className: "border-pink-400 text-pink-400" },
+      { type: "badge-outline", color: "orange", className: "border-orange-500 text-orange-500" },
+      // ========================================
+      // BADGE-MODERN VARIANTS (with left accent)
+      // ========================================
+      { type: "badge-modern", color: "primary", className: "bg-primary/10 text-primary border-l-primary" },
+      { type: "badge-modern", color: "destructive", className: "bg-destructive/10 text-destructive border-l-destructive" },
+      { type: "badge-modern", color: "warning", className: "bg-warning/10 text-warning border-l-warning" },
+      { type: "badge-modern", color: "success", className: "bg-success/10 text-success border-l-success" },
+      { type: "badge-modern", color: "info", className: "bg-info/10 text-info border-l-info" },
+      { type: "badge-modern", color: "tip", className: "bg-tip/10 text-tip border-l-tip" },
+      { type: "badge-modern", color: "muted", className: "bg-muted text-muted-foreground border-l-muted-foreground" },
+      { type: "badge-modern", color: "blue-gray", className: "bg-slate-500/10 text-slate-500 border-l-slate-500" },
+      { type: "badge-modern", color: "blue-light", className: "bg-sky-400/10 text-sky-400 border-l-sky-400" },
+      { type: "badge-modern", color: "blue", className: "bg-blue-400/10 text-blue-400 border-l-blue-400" },
+      { type: "badge-modern", color: "indigo", className: "bg-indigo-400/10 text-indigo-400 border-l-indigo-400" },
+      { type: "badge-modern", color: "purple", className: "bg-violet-400/10 text-violet-400 border-l-violet-400" },
+      { type: "badge-modern", color: "pink", className: "bg-pink-400/10 text-pink-400 border-l-pink-400" },
+      { type: "badge-modern", color: "orange", className: "bg-orange-500/10 text-orange-500 border-l-orange-500" }
+    ],
+    defaultVariants: {
+      type: "pill-color",
+      color: "primary",
+      size: "default"
+    }
+  }
+);
+function BadgeDot({ color }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn("size-1.5 rounded-full shrink-0", dotColorMap[color] ?? dotColorMap["primary"]),
+      "data-slot": "badge-dot"
+    }
+  );
+}
+function BadgeDismiss({ onClick, color, type, dismissLabel = "Dismiss" }) {
+  const handleClick = (e) => {
+    e.stopPropagation();
+    onClick();
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      e.stopPropagation();
+      onClick();
+    }
+  };
+  const isPill = type === "pill-color" || type === "pill-outline";
+  const shapeClass = isPill ? "rounded-full" : "rounded-sm";
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: cn(
+        "size-4 -mr-1 inline-flex items-center justify-center shrink-0 transition-colors cursor-pointer",
+        shapeClass,
+        "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+        dismissColorMap[color] ?? dismissColorMap["primary"]
+      ),
+      "aria-label": dismissLabel,
+      "data-slot": "badge-dismiss",
+      type: "button",
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      children: /* @__PURE__ */ jsx(X, { className: "size-3" })
+    }
+  );
+}
+function BadgeAvatar({ src, fallback, alt }) {
+  const [imageError, setImageError] = React.useState(false);
+  const initials = fallback.split(" ").map((word) => word[0]).join("").toUpperCase().slice(0, 2);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "size-4 -ml-1 rounded-full shrink-0 inline-flex items-center justify-center overflow-hidden bg-muted text-xs font-medium",
+      "data-slot": "badge-avatar",
+      children: src && !imageError ? /* @__PURE__ */ jsx(
+        "img",
+        {
+          alt: alt ?? fallback,
+          className: "size-full object-cover",
+          src,
+          onError: () => {
+            setImageError(true);
+          }
+        }
+      ) : /* @__PURE__ */ jsx("span", { "aria-label": alt ?? fallback, children: initials })
+    }
+  );
+}
+function BadgeCountry({ code }) {
+  const countryToFlag = (countryCode) => {
+    const codePoints = Array.from(countryCode.toUpperCase()).map(
+      (char) => 127397 + char.charCodeAt(0)
+    );
+    return String.fromCodePoint(...codePoints);
+  };
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-label": `Flag of ${code}`,
+      className: "text-base -ml-0.5 shrink-0 leading-none",
+      "data-slot": "badge-country",
+      role: "img",
+      children: countryToFlag(code)
+    }
+  );
+}
+function Badge({
+  className,
+  type,
+  color,
+  size,
+  disabled,
+  dot,
+  icon,
+  leadingIcon,
+  trailingIcon,
+  country,
+  avatar,
+  iconOnly,
+  onDismiss,
+  dismissLabel,
+  interactive,
+  tooltip,
+  // eslint-disable-next-line @typescript-eslint/no-deprecated -- Intentionally supporting legacy variant for backwards compatibility
+  variant,
+  asChild = false,
+  children,
+  onClick,
+  ...props
+}) {
+  const legacyMapping = variant ? legacyVariantMap[variant] : null;
+  const resolvedType = type ?? legacyMapping?.type ?? "pill-color";
+  const resolvedColor = color ?? legacyMapping?.color ?? "primary";
+  const iconOnlyClass = iconOnly ? "px-0 aspect-square" : "";
+  const badgeClassName = cn(
+    badgeVariants({ type: resolvedType, color: resolvedColor, size }),
+    iconOnlyClass,
+    Boolean(interactive ?? onClick) && "cursor-pointer hover:brightness-90",
+    className
+  );
+  const stateAttrs = {
+    "aria-disabled": disabled ? true : void 0,
+    "data-disabled": disabled ? true : void 0
+  };
+  if (asChild) {
+    return /* @__PURE__ */ jsx(Slot, { className: badgeClassName, "data-slot": "badge", ...stateAttrs, ...props, children });
+  }
+  const resolvedLeadingIcon = leadingIcon ?? icon;
+  const renderLeading = () => {
+    if (avatar) return /* @__PURE__ */ jsx(BadgeAvatar, { ...avatar });
+    if (country) return /* @__PURE__ */ jsx(BadgeCountry, { code: country });
+    if (dot) return /* @__PURE__ */ jsx(BadgeDot, { color: resolvedColor });
+    if (resolvedLeadingIcon) return /* @__PURE__ */ jsx("span", { className: "shrink-0", "data-slot": "badge-leading-icon", children: resolvedLeadingIcon });
+    return null;
+  };
+  const renderTrailing = () => {
+    if (onDismiss) return /* @__PURE__ */ jsx(BadgeDismiss, { color: resolvedColor, dismissLabel, type: resolvedType ?? "pill-color", onClick: onDismiss });
+    if (trailingIcon) return /* @__PURE__ */ jsx("span", { className: "shrink-0", "data-slot": "badge-trailing-icon", children: trailingIcon });
+    return null;
+  };
+  const wrapWithTooltip = (element) => {
+    if (!tooltip) return element;
+    return /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: element }),
+      /* @__PURE__ */ jsx(TooltipContent, { children: tooltip })
+    ] });
+  };
+  if (iconOnly) {
+    return wrapWithTooltip(
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: badgeClassName,
+          "data-slot": "badge",
+          onClick,
+          ...stateAttrs,
+          ...props,
+          children: /* @__PURE__ */ jsx("span", { className: "shrink-0", "data-slot": "badge-icon-only", children: iconOnly })
+        }
+      )
+    );
+  }
+  return wrapWithTooltip(
+    /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: badgeClassName,
+        "data-slot": "badge",
+        onClick,
+        ...stateAttrs,
+        ...props,
+        children: [
+          renderLeading(),
+          children,
+          renderTrailing()
+        ]
+      }
+    )
+  );
+}
+
+export { Badge, badgeVariants };
+//# sourceMappingURL=chunk-TNROOKX3.js.map
+//# sourceMappingURL=chunk-TNROOKX3.js.map