@pibit.ai/cure-design-system 0.3.6 → 0.3.8

package/dist/patterns/tree-view/tree-view.js

@@ -0,0 +1,167 @@
+import { jsxs as A, jsx as r, Fragment as j } from "react/jsx-runtime";
+import { useState as $ } from "react";
+import { SearchSm as T, ChevronDown as K, ChevronRight as V } from "@untitledui/icons";
+import { cn as k } from "../../utils/cn.js";
+import { Input as I } from "../../primitives/input/input.js";
+const N = 10;
+function C(e, t, s = "") {
+  const {
+    labelKey: u,
+    childrenKey: n,
+    dataKey: p = "metadata",
+    typeKey: y = "type",
+    idKey: o,
+    maxDepth: i
+  } = t, f = s ? s.split(".").length : 0;
+  return i != null && f >= i ? [] : (Array.isArray(e) ? e : Object.values(e)).map((l, w) => {
+    const v = o != null ? l[o] : void 0, c = String(v ?? w), h = s ? `${s}.${c}` : c, a = l[n], d = Array.isArray(a) ? a : a != null ? Object.values(a) : [];
+    return {
+      id: h,
+      label: l[u] ?? "Untitled",
+      type: l[y] ?? "Untitled",
+      isOpen: !1,
+      children: d.length > 0 ? C(d, t, h) : [],
+      [p]: l
+    };
+  });
+}
+function O(e, t) {
+  const s = e.label ?? "", u = Array.isArray(e.children) ? e.children : [];
+  return s.toLowerCase().includes(t.toLowerCase()) ? !0 : u.some((n) => O(n, t));
+}
+const _ = () => /* @__PURE__ */ r("div", { className: "flex h-[28px] items-center px-[13px] shrink-0", children: /* @__PURE__ */ r("div", { className: "relative h-full w-0 shrink-0", children: /* @__PURE__ */ r(
+  "div",
+  {
+    className: "absolute inset-y-0 bg-(--color-border-secondary)",
+    style: { left: "-0.5px", width: 1 }
+  }
+) }) }), D = ({
+  data: e,
+  config: t,
+  CustomNode: s,
+  onNodeClick: u,
+  selectedNodeId: n,
+  showSearch: p = !1,
+  searchPlaceholder: y = "Search...",
+  searchClassName: o,
+  searchInputClassName: i
+}) => {
+  const [f, b] = $(() => C(e, t)), [l, w] = $("");
+  function v(c, h) {
+    const a = structuredClone(f), d = h.split("-"), g = Number(d[0]);
+    d.shift();
+    let m = a[g];
+    d.length > 0 && (m = d.reduce((x, L) => x.children[Number(L)], a[g])), m.isOpen = !m.isOpen, b(a);
+  }
+  return /* @__PURE__ */ A("div", { className: "min-w-max", children: [
+    p && /* @__PURE__ */ r("div", { className: k("mb-2", o), children: /* @__PURE__ */ r(
+      I,
+      {
+        type: "search",
+        placeholder: y,
+        value: l,
+        onChange: (c) => w(c),
+        size: "sm",
+        className: i,
+        leftIcon: /* @__PURE__ */ r(
+          T,
+          {
+            className: "text-(--color-fg-quaternary)",
+            style: { width: 14, height: 14 }
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ r("div", { className: "flex flex-col", children: f.map((c, h) => /* @__PURE__ */ r(
+      S,
+      {
+        node: c,
+        parentId: String(h),
+        depth: 0,
+        handleToggle: v,
+        onNodeClick: u,
+        selectedNodeId: n,
+        CustomNode: s,
+        query: l
+      },
+      c.id || h
+    )) })
+  ] });
+};
+D.displayName = "TreeView";
+const S = ({
+  node: e,
+  parentId: t,
+  depth: s = 0,
+  handleToggle: u,
+  onNodeClick: n,
+  selectedNodeId: p,
+  CustomNode: y,
+  query: o
+}) => {
+  const i = o.length > 0, f = Array.isArray(e.children) ? e.children : [], b = e.label ?? "";
+  if (i && !O(e, o))
+    return null;
+  const l = f.length > 0, w = p != null && e.id === p, v = l && (i || (e.isOpen ?? !1)), c = (m) => {
+    m.stopPropagation(), l && (i || u(e, t), n == null || n(e));
+  }, h = s === 0 ? "pl-[6px]" : "", a = s === 0 ? "pl-[2px]" : "pl-[8px]", d = i && b.toLowerCase().includes(o.toLowerCase()), g = i ? !0 : e.isOpen;
+  return /* @__PURE__ */ A("div", { className: "relative", children: [
+    /* @__PURE__ */ A(
+      "div",
+      {
+        className: `flex h-[28px] w-full items-center pr-[8px] rounded-sm ${h} ${d ? "bg-(--color-bg-secondary)" : ""} ${l ? "cursor-pointer hover:bg-(--color-bg-secondary)" : ""}`,
+        onClick: c,
+        children: [
+          s > 0 && Array.from({ length: s }).map((m, x) => /* @__PURE__ */ r(_, {}, x)),
+          l ? /* @__PURE__ */ r(
+            "div",
+            {
+              className: `flex flex-col h-full items-center shrink-0 ${a} ${g ? "justify-end" : "justify-center"}`,
+              children: g ? /* @__PURE__ */ A(j, { children: [
+                /* @__PURE__ */ r(
+                  K,
+                  {
+                    className: "shrink-0 text-(--color-gray-400)",
+                    style: { width: N, height: N }
+                  }
+                ),
+                /* @__PURE__ */ r("div", { className: "relative h-[8px] w-0 shrink-0", children: /* @__PURE__ */ r(
+                  "div",
+                  {
+                    className: "absolute inset-y-0 bg-(--color-border-secondary)",
+                    style: { left: "-0.5px", width: 1 }
+                  }
+                ) })
+              ] }) : /* @__PURE__ */ r(
+                V,
+                {
+                  className: "shrink-0 text-(--color-gray-400)",
+                  style: { width: N, height: N }
+                }
+              )
+            }
+          ) : s > 0 ? /* @__PURE__ */ r("div", { className: "h-full w-[6px] shrink-0" }) : null,
+          /* @__PURE__ */ r("div", { className: "flex flex-1 h-full items-center min-w-0 pl-[2px]", children: /* @__PURE__ */ r(y, { node: e, isSelected: w }) })
+        ]
+      }
+    ),
+    v && /* @__PURE__ */ r("div", { className: "relative", children: f.map((m, x) => /* @__PURE__ */ r(
+      S,
+      {
+        node: m,
+        parentId: `${t}-${x}`,
+        depth: s + 1,
+        handleToggle: u,
+        onNodeClick: n,
+        selectedNodeId: p,
+        CustomNode: y,
+        query: o
+      },
+      m.id || `${t}-${x}`
+    )) })
+  ] });
+};
+export {
+  D as TreeView,
+  C as buildTreeViewNodes
+};

package/dist/primitives/badge/badge-types.d.ts

@@ -0,0 +1,17 @@
+import { ComponentType, SVGProps } from 'react';
+export declare const badgeTypes: {
+    readonly pillColor: "pill-color";
+    readonly color: "color";
+    readonly modern: "modern";
+};
+export type BadgeTypes = (typeof badgeTypes)[keyof typeof badgeTypes];
+export type BadgeColors = "clear" | "gray" | "brand" | "error" | "warning" | "success" | "gray-blue" | "blue-light" | "blue" | "indigo" | "purple" | "pink" | "orange";
+export type Sizes = "sm" | "md" | "lg";
+export type FlagTypes = string;
+export type IconComponentType = ComponentType<SVGProps<SVGSVGElement>>;
+export type BadgeTypeToColorMap<T extends Record<string, {
+    styles: Record<string, unknown>;
+}>> = {
+    [K in keyof T]: keyof T[K]["styles"];
+};
+//# sourceMappingURL=badge-types.d.ts.map

package/dist/primitives/badge/badge-types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge-types.d.ts","sourceRoot":"","sources":["../../../src/primitives/badge/badge-types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAErD,eAAO,MAAM,UAAU;;;;CAIb,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,OAAO,UAAU,CAAC,CAAC;AAEtE,MAAM,MAAM,WAAW,GACjB,OAAO,GACP,MAAM,GACN,OAAO,GACP,OAAO,GACP,SAAS,GACT,SAAS,GACT,WAAW,GACX,YAAY,GACZ,MAAM,GACN,QAAQ,GACR,QAAQ,GACR,MAAM,GACN,QAAQ,CAAC;AAEf,MAAM,MAAM,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEvC,MAAM,MAAM,SAAS,GAAG,MAAM,CAAC;AAE/B,MAAM,MAAM,iBAAiB,GAAG,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;AAEvE,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE;IAAE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CAAE,CAAC,IAAI;KAC5F,CAAC,IAAI,MAAM,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;CACvC,CAAC"}

package/dist/primitives/badge/badge-types.js

@@ -0,0 +1,8 @@
+const o = {
+  pillColor: "pill-color",
+  color: "color",
+  modern: "modern"
+};
+export {
+  o as badgeTypes
+};

package/dist/primitives/badge/badge.d.ts

@@ -1,28 +1,121 @@
-import { VariantProps } from 'class-variance-authority';
-import { ReactNode } from 'react';
-declare const badgeVariants: (props?: ({
-    variant?: "primary" | "default" | "error" | "success" | "warning" | "outline" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface BadgeProps extends VariantProps<typeof badgeVariants> {
-    /** Badge content */
+import { MouseEventHandler, ReactNode } from 'react';
+import { BadgeColors, BadgeTypeToColorMap, BadgeTypes, FlagTypes, IconComponentType, Sizes } from './badge-types';
+export declare const filledColors: Record<BadgeColors, {
+    root: string;
+    addon: string;
+    addonButton: string;
+}>;
+declare const withPillTypes: {
+    "pill-color": {
+        common: string;
+        styles: Record<BadgeColors, {
+            root: string;
+            addon: string;
+            addonButton: string;
+        }>;
+    };
+    color: {
+        common: string;
+        styles: Record<BadgeColors, {
+            root: string;
+            addon: string;
+            addonButton: string;
+        }>;
+    };
+    modern: {
+        common: string;
+        styles: Record<BadgeColors, {
+            root: string;
+            addon: string;
+            addonButton: string;
+        }>;
+    };
+};
+declare const withBadgeTypes: {
+    "pill-color": {
+        common: string;
+        styles: Record<BadgeColors, {
+            root: string;
+            addon: string;
+            addonButton: string;
+        }>;
+    };
+    color: {
+        common: string;
+        styles: Record<BadgeColors, {
+            root: string;
+            addon: string;
+            addonButton: string;
+        }>;
+    };
+    modern: {
+        common: string;
+        styles: Record<BadgeColors, {
+            root: string;
+            addon: string;
+        }>;
+    };
+};
+export type BadgeColor<T extends BadgeTypes> = BadgeTypeToColorMap<typeof withPillTypes>[T];
+export interface BadgeProps<T extends BadgeTypes> {
+    type?: T;
+    size?: Sizes;
+    color?: BadgeColor<T>;
     children: ReactNode;
-    /** Additional CSS classes */
     className?: string;
-    /** Icon to display before text */
-    icon?: ReactNode;
 }
-/**
- * Badge component for labels, tags, and status indicators
- *
- * @example
- * <Badge>Default</Badge>
- * <Badge variant="success">Active</Badge>
- * <Badge variant="error" size="sm">Error</Badge>
- */
-export declare function Badge({ variant, size, className, children, icon, }: BadgeProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace Badge {
-    var displayName: string;
+export declare const Badge: <T extends BadgeTypes>(props: BadgeProps<T>) => import("react/jsx-runtime").JSX.Element;
+export interface BadgeWithDotProps<T extends BadgeTypes> {
+    type?: T;
+    size?: Sizes;
+    color?: BadgeTypeToColorMap<typeof withBadgeTypes>[T];
+    className?: string;
+    children: ReactNode;
+}
+export declare const BadgeWithDot: <T extends BadgeTypes>(props: BadgeWithDotProps<T>) => import("react/jsx-runtime").JSX.Element;
+export interface BadgeWithIconProps<T extends BadgeTypes> {
+    type?: T;
+    size?: Sizes;
+    color?: BadgeTypeToColorMap<typeof withBadgeTypes>[T];
+    iconLeading?: ReactNode;
+    iconTrailing?: ReactNode;
+    children: ReactNode;
+    className?: string;
+}
+export declare const BadgeWithIcon: <T extends BadgeTypes>(props: BadgeWithIconProps<T>) => import("react/jsx-runtime").JSX.Element;
+export interface BadgeWithFlagProps<T extends BadgeTypes> {
+    type?: T;
+    size?: Sizes;
+    flag?: FlagTypes;
+    color?: BadgeTypeToColorMap<typeof withPillTypes>[T];
+    children: ReactNode;
+}
+export declare const BadgeWithFlag: <T extends BadgeTypes>(props: BadgeWithFlagProps<T>) => import("react/jsx-runtime").JSX.Element;
+export interface BadgeWithImageProps<T extends BadgeTypes> {
+    type?: T;
+    size?: Sizes;
+    imgSrc: string;
+    color?: BadgeTypeToColorMap<typeof withPillTypes>[T];
+    children: ReactNode;
+}
+export declare const BadgeWithImage: <T extends BadgeTypes>(props: BadgeWithImageProps<T>) => import("react/jsx-runtime").JSX.Element;
+export interface BadgeWithButtonProps<T extends BadgeTypes> {
+    type?: T;
+    size?: Sizes;
+    icon?: IconComponentType;
+    color?: BadgeTypeToColorMap<typeof withPillTypes>[T];
+    children: ReactNode;
+    buttonLabel?: string;
+    onButtonClick?: MouseEventHandler<HTMLButtonElement>;
+}
+export declare const BadgeWithButton: <T extends BadgeTypes>(props: BadgeWithButtonProps<T>) => import("react/jsx-runtime").JSX.Element;
+export interface BadgeIconProps<T extends BadgeTypes> {
+    type?: T;
+    size?: Sizes;
+    icon: IconComponentType;
+    color?: BadgeTypeToColorMap<typeof withPillTypes>[T];
+    children?: ReactNode;
 }
+export declare const BadgeIcon: <T extends BadgeTypes>(props: BadgeIconProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=badge.d.ts.map

package/dist/primitives/badge/badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/primitives/badge/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,QAAA,MAAM,aAAa;;;8EAuBlB,CAAC;AAEF,MAAM,WAAW,UAAW,SAAQ,YAAY,CAAC,OAAO,aAAa,CAAC;IACpE,oBAAoB;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED;;;;;;;GAOG;AACH,wBAAgB,KAAK,CAAC,EACpB,OAAO,EACP,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,IAAI,GACL,EAAE,UAAU,2CAOZ;yBAbe,KAAK"}
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/primitives/badge/badge.tsx"],"names":[],"mappings":"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"}

package/dist/primitives/badge/badge.js

@@ -1,43 +1,277 @@
-import { jsxs as n, jsx as i } from "react/jsx-runtime";
-import { cva as d } from "class-variance-authority";
-import { cn as m } from "../../utils/cn.js";
-const g = d(
-  "inline-flex items-center gap-1 rounded-md font-medium",
-  {
-    variants: {
-      variant: {
-        default: "bg-gray-100 text-gray-800",
-        primary: "bg-brand-100 text-brand-800",
-        success: "bg-success-100 text-success-800",
-        warning: "bg-warning-100 text-warning-800",
-        error: "bg-error-100 text-error-800",
-        outline: "border border-gray-300 bg-white text-gray-700"
-      },
-      size: {
-        sm: "px-2 py-0.5 text-xs",
-        md: "px-2.5 py-1 text-sm",
-        lg: "px-3 py-1.5 text-sm"
-      }
+import { jsx as u, jsxs as c, Fragment as f } from "react/jsx-runtime";
+import { X as v } from "@untitledui/icons";
+import { Dot as w } from "../../foundations/dot-icon/index.js";
+import { badgeTypes as t } from "./badge-types.js";
+import { cx as d } from "../../utils/cn.js";
+const y = {
+  clear: {
+    root: "bg-primary text-secondary ring-secondary",
+    addon: "text-gray-500",
+    addonButton: "hover:bg-utility-gray-100 text-utility-gray-400 hover:text-utility-gray-500"
+  },
+  gray: {
+    root: "bg-utility-gray-100 text-utility-gray-700 ring-utility-gray-100",
+    addon: "text-utility-gray-500",
+    addonButton: "hover:bg-utility-gray-100 text-utility-gray-400 hover:text-utility-gray-500"
+  },
+  brand: {
+    root: "bg-utility-brand-50 text-utility-brand-600 ring-utility-brand-50",
+    addon: "text-utility-brand-500",
+    addonButton: "hover:bg-utility-brand-100 text-utility-brand-400 hover:text-utility-brand-500"
+  },
+  error: {
+    root: "bg-utility-error-100 text-utility-error-700 ring-utility-error-100",
+    addon: "text-utility-error-500",
+    addonButton: "hover:bg-utility-error-100 text-utility-error-400 hover:text-utility-error-500"
+  },
+  warning: {
+    root: "bg-utility-warning-100 text-utility-warning-700 ring-utility-warning-100",
+    addon: "text-utility-warning-500",
+    addonButton: "hover:bg-utility-warning-100 text-utility-warning-400 hover:text-utility-warning-500"
+  },
+  success: {
+    root: "bg-utility-success-100 text-utility-success-700 ring-utility-success-100",
+    addon: "text-utility-success-500",
+    addonButton: "hover:bg-utility-success-100 text-utility-success-400 hover:text-utility-success-500"
+  },
+  "gray-blue": {
+    root: "bg-utility-gray-blue-100 text-utility-gray-blue-700 ring-utility-gray-blue-100",
+    addon: "text-utility-gray-blue-500",
+    addonButton: "hover:bg-utility-gray-blue-100 text-utility-gray-blue-400 hover:text-utility-gray-blue-500"
+  },
+  "blue-light": {
+    root: "bg-utility-blue-light-100 text-utility-blue-light-700 ring-utility-blue-light-100",
+    addon: "text-utility-blue-light-500",
+    addonButton: "hover:bg-utility-blue-light-100 text-utility-blue-light-400 hover:text-utility-blue-light-500"
+  },
+  blue: {
+    root: "bg-utility-blue-100 text-utility-blue-700 ring-utility-blue-100",
+    addon: "text-utility-blue-500",
+    addonButton: "hover:bg-utility-blue-100 text-utility-blue-400 hover:text-utility-blue-500"
+  },
+  indigo: {
+    root: "bg-utility-indigo-100 text-utility-indigo-700 ring-utility-indigo-100",
+    addon: "text-utility-indigo-500",
+    addonButton: "hover:bg-utility-indigo-100 text-utility-indigo-400 hover:text-utility-indigo-500"
+  },
+  purple: {
+    root: "bg-utility-purple-100 text-utility-purple-700 ring-utility-purple-100",
+    addon: "text-utility-purple-500",
+    addonButton: "hover:bg-utility-purple-100 text-utility-purple-400 hover:text-utility-purple-500"
+  },
+  pink: {
+    root: "bg-utility-pink-100 text-utility-pink-700 ring-utility-pink-100",
+    addon: "text-utility-pink-500",
+    addonButton: "hover:bg-utility-pink-100 text-utility-pink-400 hover:text-utility-pink-500"
+  },
+  orange: {
+    root: "bg-utility-orange-100 text-utility-orange-700 ring-utility-orange-100",
+    addon: "text-utility-orange-500",
+    addonButton: "hover:bg-utility-orange-100 text-utility-orange-400 hover:text-utility-orange-500"
+  }
+}, B = Object.fromEntries(
+  Object.entries(y).map(([e, s]) => [e, { root: "", addon: s.addon }])
+), x = {
+  [t.pillColor]: {
+    common: "size-max flex items-center whitespace-nowrap rounded-full ring-1 ring-inset",
+    styles: y
+  },
+  [t.color]: {
+    common: "size-max flex items-center whitespace-nowrap rounded-sm ring-1 ring-inset",
+    styles: y
+  },
+  [t.modern]: {
+    common: "size-max flex items-center whitespace-nowrap rounded-sm ring-1 ring-inset ring-secondary",
+    styles: y
+  }
+}, h = {
+  [t.pillColor]: {
+    common: "size-max flex items-center whitespace-nowrap rounded-full ring-1 ring-inset",
+    styles: y
+  },
+  [t.color]: {
+    common: "size-max flex items-center whitespace-nowrap rounded-sm ring-1 ring-inset",
+    styles: y
+  },
+  [t.modern]: {
+    common: "size-max flex items-center whitespace-nowrap rounded-sm ring-1 ring-inset bg-primary text-secondary ring-secondary",
+    styles: B
+  }
+}, j = (e) => {
+  const { type: s = "pill-color", size: a = "sm", color: i = "gray", children: p } = e, o = x[s], l = {
+    sm: "py-0.5 px-2 text-xs font-medium",
+    md: "py-0.5 px-2 text-sm font-medium",
+    lg: "py-1 px-3 text-sm font-medium"
+  }, n = {
+    sm: "py-0.5 px-2 text-xs font-medium",
+    md: "py-0.5 px-2 text-sm font-medium",
+    lg: "py-1 px-3 text-sm font-medium rounded-lg"
+  }, r = {
+    [t.pillColor]: l,
+    [t.color]: n,
+    [t.modern]: n
+  };
+  return /* @__PURE__ */ u("span", { className: d(o.common, r[s][a], o.styles[i].root, e.className), children: p });
+}, T = (e) => {
+  const { size: s = "sm", color: a = "gray", type: i = "pill-color", className: p, children: o } = e, l = h[i], n = {
+    sm: "gap-0.5 py-0.5 px-1 text-xs font-medium",
+    md: "gap-1 py-0.5 pl-1.5 pr-2 text-xs font-medium",
+    lg: "gap-1.5 py-0.5 pl-2 pr-2.5 text-sm font-medium"
+  }, r = {
+    sm: "gap-0.5 py-0.5 px-1 text-xs font-medium",
+    md: "gap-1 py-0.5 px-1.5 text-xs font-medium",
+    lg: "gap-1.5 py-0.5 px-2 text-sm font-medium"
+  }, m = {
+    [t.pillColor]: n,
+    [t.color]: r,
+    [t.modern]: r
+  }, g = a;
+  return /* @__PURE__ */ c("span", { className: d(l.common, m[i][s], l.styles[g].root, p), children: [
+    /* @__PURE__ */ u(w, { className: l.styles[g].addon, size: "sm" }),
+    o
+  ] });
+}, W = (e) => {
+  const {
+    size: s = "sm",
+    color: a = "gray",
+    type: i = "pill-color",
+    iconLeading: p,
+    iconTrailing: o,
+    children: l,
+    className: n
+  } = e, r = h[i], m = p ? "leading" : "trailing", g = {
+    sm: {
+      trailing: "gap-0.5 py-0.5 px-1 text-xs font-medium",
+      leading: "gap-0.5 py-0.5 px-1 text-xs font-medium"
+    },
+    md: {
+      trailing: "gap-0.5 py-0.5 pl-2 pr-1.5 text-xs font-medium",
+      leading: "gap-0.5 py-0.5 pr-2 pl-1.5 text-xs font-medium"
     },
-    defaultVariants: {
-      variant: "default",
-      size: "md"
+    lg: {
+      trailing: "gap-1 py-0.5 pl-2.5 pr-2 text-sm font-medium",
+      leading: "gap-1 py-0.5 pr-2.5 pl-2 text-sm font-medium"
     }
-  }
-);
-function x({
-  variant: r,
-  size: t,
-  className: a,
-  children: s,
-  icon: e
-}) {
-  return /* @__PURE__ */ n("span", { className: m(g({ variant: r, size: t }), a), children: [
-    e && /* @__PURE__ */ i("span", { className: "inline-flex", children: e }),
-    s
+  }, b = {
+    sm: {
+      trailing: "gap-0.5 py-0.5 px-1 text-xs font-medium",
+      leading: "gap-0.5 py-0.5 px-1 text-xs font-medium"
+    },
+    md: {
+      trailing: "gap-0.5 py-0.5 pl-2 pr-1.5 text-xs font-medium",
+      leading: "gap-0.5 py-0.5 pr-2 pl-1.5 text-xs font-medium"
+    },
+    lg: {
+      trailing: "gap-1 py-0.5 pl-2 pr-1.5 text-sm font-medium",
+      leading: "gap-1 py-0.5 pr-2 pl-1.5 text-sm font-medium"
+    }
+  }, z = {
+    [t.pillColor]: g,
+    [t.color]: b,
+    [t.modern]: b
+  };
+  return /* @__PURE__ */ c("span", { className: d(r.common, z[i][s][m], r.styles[a].root, n), children: [
+    p && /* @__PURE__ */ u(f, { children: p }),
+    l,
+    o && /* @__PURE__ */ u(f, { children: o })
+  ] });
+}, L = (e) => {
+  const { size: s = "sm", color: a = "gray", flag: i = "AU", type: p = "pill-color", children: o } = e, l = x[p], n = {
+    sm: "gap-0.5 py-0.5 pl-0.75 pr-2 text-xs font-medium",
+    md: "gap-1 py-0.5 pl-0.75 pr-2 text-xs font-medium",
+    lg: "gap-1.5 py-0.5 pl-1 pr-2.5 text-sm font-medium"
+  }, r = {
+    sm: "gap-0.5 py-0.5 pl-1 pr-1.5 text-xs font-medium",
+    md: "gap-1 py-0.5 pl-1 pr-1.5 text-xs font-medium",
+    lg: "gap-1.5 py-0.5 pl-1.5 pr-2 text-sm font-medium"
+  }, m = {
+    [t.pillColor]: n,
+    [t.color]: r,
+    [t.modern]: r
+  };
+  return /* @__PURE__ */ c("span", { className: d(l.common, m[p][s], l.styles[a].root), children: [
+    /* @__PURE__ */ u(
+      "img",
+      {
+        src: `https://www.untitledui.com/images/flags/${i}.svg`,
+        className: "size-4 max-w-none rounded-full",
+        alt: `${i} flag`
+      }
+    ),
+    o
   ] });
-}
-x.displayName = "Badge";
+}, O = (e) => {
+  const { size: s = "sm", color: a = "gray", type: i = "pill-color", imgSrc: p, children: o } = e, l = x[i], n = {
+    sm: "gap-0.5 py-0.5 pl-0.75 pr-2 text-xs font-medium",
+    md: "gap-1 py-0.5 pl-0.75 pr-2 text-xs font-medium",
+    lg: "gap-1.5 py-0.5 pl-1 pr-2.5 text-sm font-medium"
+  }, r = {
+    sm: "gap-0.5 py-0.5 pl-1 pr-1.5 text-xs font-medium",
+    md: "gap-1 py-0.5 pl-1 pr-1.5 text-xs font-medium",
+    lg: "gap-1.5 py-0.5 pl-1.5 pr-2 text-sm font-medium"
+  }, m = {
+    [t.pillColor]: n,
+    [t.color]: r,
+    [t.modern]: r
+  };
+  return /* @__PURE__ */ c("span", { className: d(l.common, m[i][s], l.styles[a].root), children: [
+    /* @__PURE__ */ u("img", { src: p, className: "size-4 max-w-none rounded-full", alt: "Badge image" }),
+    o
+  ] });
+}, D = (e) => {
+  const { size: s = "sm", color: a = "gray", type: i = "pill-color", icon: p = v, buttonLabel: o, children: l } = e, n = x[i], r = {
+    sm: "gap-0.5 py-0.5 pl-2 pr-0.75 text-xs font-medium",
+    md: "gap-0.5 py-0.5 pl-2 pr-0.75 text-xs font-medium",
+    lg: "gap-0.5 py-0.5 pl-2.5 pr-1 text-sm font-medium"
+  }, m = {
+    sm: "gap-0.5 py-0.5 pl-1.5 pr-0.75 text-xs font-medium",
+    md: "gap-0.5 py-0.5 pl-1.5 pr-0.75 text-xs font-medium",
+    lg: "gap-0.5 py-0.5 pl-2 pr-1 text-sm font-medium"
+  }, g = {
+    [t.pillColor]: r,
+    [t.color]: m,
+    [t.modern]: m
+  };
+  return /* @__PURE__ */ c("span", { className: d(n.common, g[i][s], n.styles[a].root), children: [
+    l,
+    /* @__PURE__ */ u(
+      "button",
+      {
+        type: "button",
+        "aria-label": o,
+        onClick: e.onButtonClick,
+        className: d(
+          "flex cursor-pointer items-center justify-center p-0.5 outline-focus-ring transition duration-100 ease-linear focus-visible:outline-2",
+          n.styles[a].addonButton,
+          i === "pill-color" ? "rounded-full" : "rounded-[3px]"
+        ),
+        children: /* @__PURE__ */ u(p, { className: "size-3 stroke-[3px] transition-inherit-all" })
+      }
+    )
+  ] });
+}, F = (e) => {
+  const { size: s = "sm", color: a = "gray", type: i = "pill-color", icon: p } = e, o = x[i], l = {
+    sm: "p-1",
+    md: "p-1.25",
+    lg: "p-1.5"
+  }, n = {
+    sm: "p-1",
+    md: "p-1.25",
+    lg: "p-1.5"
+  }, r = {
+    [t.pillColor]: l,
+    [t.color]: n,
+    [t.modern]: n
+  };
+  return /* @__PURE__ */ u("span", { className: d(o.common, r[i][s], o.styles[a].root), children: /* @__PURE__ */ u(p, { className: d("size-3 stroke-[3px]", o.styles[a].addon) }) });
+};
 export {
-  x as Badge
+  j as Badge,
+  F as BadgeIcon,
+  D as BadgeWithButton,
+  T as BadgeWithDot,
+  L as BadgeWithFlag,
+  W as BadgeWithIcon,
+  O as BadgeWithImage,
+  y as filledColors
 };