impact-nova 2.0.9 → 2.1.0-alpha.10

package/dist/components/primitives/loader/loader.variants.js

@@ -0,0 +1,20 @@
+import { cva as e } from "class-variance-authority";
+const t = e(
+  "relative rounded-full flex items-center justify-center overflow-hidden",
+  {
+    variants: {
+      size: {
+        sm: "h-6 w-6",
+        md: "h-12 w-12",
+        lg: "h-18 w-18",
+        xl: "h-24 w-24"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+export {
+  t as loaderVariants
+};

package/dist/components/primitives/portal/portal.d.ts

@@ -0,0 +1,4 @@
+import { PortalProps } from './portal.types';
+import * as React from "react";
+declare const Portal: React.ForwardRefExoticComponent<PortalProps & React.RefAttributes<HTMLDivElement>>;
+export { Portal };

package/dist/components/primitives/portal/portal.js

@@ -0,0 +1,22 @@
+import { jsx as l } from "react/jsx-runtime";
+import * as e from "react";
+import { createPortal as m } from "react-dom";
+import { createComponent as s } from "../../../lib/primitives/create-component.js";
+const i = s(
+  "Portal",
+  ({ children: o, container: r }, n) => {
+    const [a, u] = e.useState(!1);
+    if (e.useEffect(() => {
+      u(!0);
+    }, []), !a)
+      return null;
+    const t = r || (typeof document < "u" ? document.body : null);
+    return t ? m(
+      /* @__PURE__ */ l("div", { ref: n, "data-component": "portal", style: { display: "contents" }, children: o }),
+      t
+    ) : null;
+  }
+);
+export {
+  i as Portal
+};

package/dist/components/primitives/portal/portal.types.d.ts

@@ -0,0 +1,5 @@
+import type * as React from "react";
+export interface PortalProps {
+    children: React.ReactNode;
+    container?: HTMLElement | null;
+}

package/dist/components/primitives/progress/progress.d.ts

@@ -0,0 +1,5 @@
+import { ProgressProps } from './progress.types';
+import * as React from "react";
+declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;
+export { Progress };
+export type { ProgressProps } from './progress.types';

package/dist/components/primitives/progress/progress.js

@@ -0,0 +1,68 @@
+import { jsxs as f, jsx as d } from "react/jsx-runtime";
+import * as m from "react";
+import * as u from "@radix-ui/react-progress";
+import { createComponent as p } from "../../../lib/primitives/create-component.js";
+import { cn as l } from "../../../lib/utils.js";
+function g(s, r, e, t) {
+  if (s === !1 || s === null) return null;
+  if (s && typeof s != "boolean") return s;
+  if (r === "success") return "Completed";
+  if (r === "destructive") return "Failed";
+  const o = `${Math.round(e || 0)}%`;
+  return t ? `${o} • ${t} seconds remaining` : o;
+}
+const P = p(
+  "Progress",
+  ({ className: s, value: r, variant: e = "default", label: t, time: o, ...i }, a) => {
+    const c = g(t, e, r, o), n = m.useId();
+    return /* @__PURE__ */ f("div", { className: "w-full", "data-component": "progress", "data-variant": e, children: [
+      c ? /* @__PURE__ */ d(
+        "div",
+        {
+          id: n,
+          "data-component": "progress-label",
+          className: l(
+            "text-[12px] font-medium mb-1",
+            e === "default" && "text-content-tertiary",
+            e === "success" && "text-success",
+            e === "destructive" && "text-destructive"
+          ),
+          children: c
+        }
+      ) : null,
+      /* @__PURE__ */ d(
+        u.Root,
+        {
+          ref: a,
+          "aria-labelledby": c ? n : void 0,
+          "aria-label": c ? void 0 : "Progress",
+          className: l(
+            "relative h-2 w-full overflow-hidden rounded-full",
+            e === "default" && "bg-brand/10",
+            e === "success" && "bg-feedback-success-surface",
+            e === "destructive" && "bg-feedback-error-surface",
+            s
+          ),
+          value: r,
+          ...i,
+          children: /* @__PURE__ */ d(
+            u.Indicator,
+            {
+              "data-component": "progress-indicator",
+              className: l(
+                "h-full w-full flex-1 transition-all",
+                e === "default" && "bg-brand",
+                e === "success" && "bg-success",
+                e === "destructive" && "bg-destructive"
+              ),
+              style: { transform: `translateX(-${100 - (r || 0)}%)` }
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+export {
+  P as Progress
+};

package/dist/components/primitives/progress/progress.types.d.ts

@@ -0,0 +1,7 @@
+import type * as React from "react";
+import type * as ProgressPrimitive from "@radix-ui/react-progress";
+export interface ProgressProps extends React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> {
+    variant?: "default" | "success" | "destructive";
+    label?: React.ReactNode | boolean;
+    time?: number | string;
+}

package/dist/components/primitives/stepper/stepper.d.ts

@@ -0,0 +1,4 @@
+import { StepperProps } from './stepper.types';
+import * as React from "react";
+declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLDivElement>>;
+export { Stepper };

package/dist/components/primitives/stepper/stepper.js

@@ -0,0 +1,76 @@
+import { jsx as t, jsxs as p } from "react/jsx-runtime";
+import * as y from "react";
+import { Checkmark as I } from "impact-nova-icons";
+import { createComponent as j } from "../../../lib/primitives/create-component.js";
+import { cn as a } from "../../../lib/utils.js";
+import { useImpactNovaI18n as k } from "../../../i18n/use-impact-nova-i18n.js";
+import { iconVariants as z, stepVariants as D, stepperVariants as V } from "./stepper.variants.js";
+const R = j(
+  "Stepper",
+  ({ className: u, currentStep: x, steps: n, orientation: e = "horizontal", onStepClick: s, ...v }, b) => {
+    const { t: N } = k(), g = n.length;
+    return /* @__PURE__ */ t(
+      "div",
+      {
+        ref: b,
+        className: a(V({ orientation: e }), u),
+        "data-orientation": e,
+        "data-component": "stepper",
+        role: "list",
+        ...v,
+        children: n.map((d, o) => {
+          const c = typeof d == "string" ? { label: d } : d, l = o + 1, f = l === x, h = l < x, i = c.disabled, r = h ? "completed" : f ? "active" : "default", w = N("stepper.stepOfTotal", { current: l, total: g });
+          return /* @__PURE__ */ p(y.Fragment, { children: [
+            /* @__PURE__ */ p(
+              "div",
+              {
+                role: "listitem",
+                onClick: () => !i && s?.(o),
+                "aria-label": w,
+                "aria-current": f ? "step" : void 0,
+                tabIndex: s && !i ? 0 : void 0,
+                onKeyDown: s && !i ? (m) => {
+                  (m.key === "Enter" || m.key === " ") && (m.preventDefault(), s(o));
+                } : void 0,
+                "data-step": l,
+                "data-status": r,
+                "data-disabled": i || void 0,
+                className: a(
+                  D({ orientation: e, status: r }),
+                  e === "horizontal" && "min-w-[140px]",
+                  i ? "opacity-80 cursor-not-allowed" : s ? "cursor-pointer" : "cursor-default"
+                ),
+                children: [
+                  /* @__PURE__ */ t("div", { className: a(z({ status: r }), "mr-2"), children: h ? /* @__PURE__ */ t(I, { className: "h-5 w-5 stroke-[3px]" }) : /* @__PURE__ */ t("span", { children: c.icon || l }) }),
+                  /* @__PURE__ */ p("div", { className: "flex flex-col justify-center overflow-hidden", children: [
+                    /* @__PURE__ */ t("div", { className: a(
+                      "text-[14px] leading-tight font-medium truncate max-w-[200px]",
+                      r === "completed" ? "text-success" : "text-content",
+                      r === "active" && e === "vertical" ? "text-brand" : ""
+                    ), children: c.label }),
+                    c.description && /* @__PURE__ */ t("div", { className: a(
+                      "text-[12px] leading-tight mt-0.5 truncate max-w-[200px]",
+                      r === "completed" ? "text-success" : "text-secondary-foreground"
+                    ), children: c.description })
+                  ] })
+                ]
+              }
+            ),
+            o < n.length - 1 && /* @__PURE__ */ t(
+              "div",
+              {
+                className: a(
+                  "border-t border-dashed border-stroke-hairline transition-colors",
+                  e === "horizontal" ? "flex-1 min-w-[24px] mx-1 self-center" : "h-6 w-0 border-l ml-[12px] my-[-4px]"
+                )
+              }
+            )
+          ] }, o);
+        })
+      }
+    );
+  }
+);
+export {
+  R as Stepper
+};

package/dist/components/primitives/stepper/stepper.types.d.ts

@@ -0,0 +1,14 @@
+import { VariantProps } from 'class-variance-authority';
+import { stepperVariants } from './stepper.variants';
+import type * as React from "react";
+export interface StepItem {
+    label: string;
+    description?: string;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+}
+export interface StepperProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof stepperVariants> {
+    currentStep: number;
+    steps: (string | StepItem)[];
+    onStepClick?: (index: number) => void;
+}

package/dist/components/primitives/stepper/stepper.variants.d.ts

@@ -0,0 +1,10 @@
+export declare const stepperVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const stepVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+    status?: "default" | "active" | "completed" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const iconVariants: (props?: ({
+    status?: "default" | "active" | "completed" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/primitives/stepper/stepper.variants.js

@@ -0,0 +1,82 @@
+import { cva as t } from "class-variance-authority";
+const a = t("flex w-full gap-0", {
+  variants: {
+    orientation: {
+      horizontal: "flex-row items-center",
+      vertical: "flex-col items-stretch"
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal"
+  }
+}), r = t(
+  "relative flex items-center transition-all duration-200",
+  {
+    variants: {
+      orientation: {
+        horizontal: "h-[44px] px-3 rounded-lg border-b-2 bg-canvas-elevated shadow-elevation-card flex-none",
+        vertical: "w-full py-4 px-3 mb-2 rounded-lg border-none"
+      },
+      status: {
+        default: "",
+        active: "",
+        completed: ""
+      }
+    },
+    compoundVariants: [
+      {
+        orientation: "horizontal",
+        status: "active",
+        className: "border-brand after:absolute after:bottom-[-9.5px] after:left-[18px] after:h-0 after:w-0 after:border-l-[6.5px] after:border-r-[6.5px] after:border-t-[10px] after:border-l-transparent after:border-r-transparent after:border-t-brand after:content-['']"
+      },
+      {
+        orientation: "horizontal",
+        status: "completed",
+        className: "border-success"
+      },
+      {
+        orientation: "horizontal",
+        status: "default",
+        className: "border-stroke-hairline"
+      },
+      {
+        orientation: "vertical",
+        status: "active",
+        className: "bg-canvas-tint before:absolute before:left-[-8px] before:top-1/2 before:h-8 before:w-[4px] before:-translate-y-1/2 before:bg-brand before:rounded-full before:content-['']"
+      },
+      {
+        orientation: "vertical",
+        status: "completed",
+        className: "bg-feedback-success-surface"
+      },
+      {
+        orientation: "vertical",
+        status: "default",
+        className: "bg-secondary"
+      }
+    ],
+    defaultVariants: {
+      orientation: "horizontal",
+      status: "default"
+    }
+  }
+), o = t(
+  "flex h-6 w-6 shrink-0 items-center justify-center rounded-[8px] text-xs font-extrabold transition-all",
+  {
+    variants: {
+      status: {
+        default: "bg-muted text-navigation-muted",
+        active: "bg-brand text-brand-foreground",
+        completed: "bg-success text-success-foreground"
+      }
+    },
+    defaultVariants: {
+      status: "default"
+    }
+  }
+);
+export {
+  o as iconVariants,
+  r as stepVariants,
+  a as stepperVariants
+};

package/dist/components/primitives/tabs/tabs.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+declare const Tabs: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    variant?: import('./tabs.types').TabsVariant;
+    size?: import('./tabs.types').TabsSize;
+    hideInactiveLabel?: boolean;
+    tooltipClassName?: string;
+    maxWords?: number;
+    renderTabTooltip?: import('../../..').InfoTooltipRender;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+    icon?: React.ReactNode;
+    maxWords?: number;
+    activeColor?: import('./tabs.types').ActiveColorConfig;
+} & React.RefAttributes<HTMLButtonElement>>;
+declare const TabsContent: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const TabsImage: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    activeImage: React.ReactNode;
+    inactiveImage: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+export { Tabs, TabsList, TabsTrigger, TabsContent, TabsImage };

package/dist/components/primitives/tabs/tabs.js

@@ -0,0 +1,148 @@
+import { jsx as n, jsxs as N, Fragment as R } from "react/jsx-runtime";
+import * as i from "react";
+import * as b from "@radix-ui/react-tabs";
+import { useControllableState as I } from "@radix-ui/react-use-controllable-state";
+import { createComponent as M } from "../../../lib/primitives/create-component.js";
+import { cn as c } from "../../../lib/utils.js";
+const T = i.createContext({
+  variant: "line",
+  size: "default"
+}), P = (e, a) => {
+  const t = e.split(/\s+/);
+  return t.length <= a ? e : t.slice(0, a).join(" ") + "...";
+}, S = i.forwardRef(({ variant: e = "line", size: a = "default", hideInactiveLabel: t = !1, tooltipClassName: o, maxWords: r, renderTabTooltip: x, value: v, defaultValue: f, onValueChange: s, ...g }, h) => {
+  const [d, y] = I({
+    prop: v,
+    defaultProp: f,
+    onChange: (p) => {
+      p !== void 0 && s?.(p);
+    }
+  }), w = i.useMemo(
+    () => ({ variant: e, size: a, activeValue: d, hideInactiveLabel: t, tooltipClassName: o, maxWords: r, renderTabTooltip: x }),
+    [e, a, d, t, o, r, x]
+  );
+  return /* @__PURE__ */ n(T.Provider, { value: w, children: /* @__PURE__ */ n(
+    b.Root,
+    {
+      ref: h,
+      value: d,
+      onValueChange: y,
+      "data-component": "tabs",
+      "data-variant": e,
+      ...g
+    }
+  ) });
+});
+S.displayName = b.Root.displayName;
+const B = i.forwardRef(({ className: e, ...a }, t) => {
+  const { variant: o } = i.useContext(T);
+  return /* @__PURE__ */ n(
+    b.List,
+    {
+      ref: t,
+      "data-tabs": "list",
+      className: c(
+        "inline-flex items-center justify-center rounded-lg",
+        o === "line" && "h-[38px] bg-canvas-elevated border w-full justify-start gap-2 px-2 shrink-0 py-0",
+        o === "pill" && "h-[38px] p-1 bg-brand-tint text-brand gap-1",
+        o === "outline" && "bg-transparent gap-2 w-full justify-start",
+        o === "box" && "h-auto bg-transparent border-0 w-full justify-start gap-[16px] p-0 shrink-0",
+        e
+      ),
+      style: { overflow: "visible" },
+      ...a
+    }
+  );
+}), $ = i.forwardRef(({ className: e, icon: a, children: t, maxWords: o, activeColor: r, style: x, ...v }, f) => {
+  const { variant: s, size: g, activeValue: h, hideInactiveLabel: d, tooltipClassName: y, maxWords: w, renderTabTooltip: p } = i.useContext(T), m = o ?? w, u = h === v.value, j = typeof t == "string", k = j && m ? P(t, m) : t, V = j && m && t.split(/\s+/).length > m, W = d && !u || V, l = { ...x };
+  s === "box" && r && (l["--tab-border"] = r.border, l["--tab-bg"] = r.bg, l["--tab-text"] = r.text, l["--tab-hover-border"] = `color-mix(in srgb, ${r.border} 40%, transparent)`, l["--tab-hover-bg"] = `color-mix(in srgb, ${r.bg} 50%, white)`, l["--tab-hover-text"] = `color-mix(in srgb, ${r.text} 60%, var(--color-foreground-tertiary))`);
+  const C = s === "box" ? /* @__PURE__ */ N(R, { children: [
+    t,
+    u && /* @__PURE__ */ n(
+      "span",
+      {
+        className: "absolute -bottom-[5.5px] start-1/2 -translate-x-1/2 w-[11px] h-[11px] rotate-45 border-b border-e bg-inherit border-b-inherit border-e-inherit"
+      }
+    )
+  ] }) : /* @__PURE__ */ N(R, { children: [
+    a && /* @__PURE__ */ n("span", { className: c("h-4 w-4 shrink-0", !d || u ? "me-2" : "me-0"), children: a }),
+    /* @__PURE__ */ n("span", { className: c(d && !u && "sr-only"), children: k })
+  ] });
+  return /* @__PURE__ */ n(
+    b.Trigger,
+    {
+      ref: f,
+      "data-tabs": "trigger",
+      className: c(
+        "relative inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
+        s === "line" && [
+          "h-full rounded-none border-b-2 border-transparent px-1 text-[13px] font-medium capitalize text-content-tertiary -mb-[1px]",
+          "data-[state=active]:border-brand data-[state=active]:text-brand data-[state=active]:shadow-none",
+          "hover:text-brand py-1.5 px-3"
+        ],
+        s === "pill" && [
+          "rounded-md text-brand/70 text-[13px]",
+          "data-[state=active]:bg-canvas-elevated data-[state=active]:text-brand data-[state=active]:shadow-sm",
+          "py-1.5 px-3"
+        ],
+        s === "outline" && [
+          "rounded-full border border-content-badge bg-canvas-elevated text-content-badge font-['Manrope']",
+          "hover:bg-canvas-muted hover:text-content",
+          "data-[state=active]:border-brand data-[state=active]:text-brand",
+          g === "sm" ? "h-[24px] px-[8px] py-[2px] text-xs" : "h-9 px-4 py-2"
+        ],
+        s === "box" && [
+          "group flex flex-row items-center justify-between min-w-[231px] w-fit gap-4 min-h-[45px] h-auto py-2 px-[16px] rounded-[8px] bg-canvas-elevated text-content-tertiary transition-none overflow-visible",
+          "border border-stroke-field",
+          "text-[16px]",
+          "hover:border-[color:var(--tab-hover-border,var(--color-tab-hover-border))] hover:bg-[color:var(--tab-hover-bg,var(--color-tab-hover-surface))] hover:text-[color:var(--tab-hover-text,var(--color-tab-hover-foreground))]",
+          "data-[state=active]:border-[color:var(--tab-border,var(--color-tab-active-border))]",
+          "data-[state=active]:bg-[color:var(--tab-bg,var(--color-tab-active-surface))]",
+          "data-[state=active]:text-[color:var(--tab-text,var(--color-tab-active-foreground))]"
+        ],
+        e
+      ),
+      style: l,
+      ...v,
+      children: W && p ? p(C, t, y) : C
+    }
+  );
+});
+$.displayName = b.Trigger.displayName;
+const z = i.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ n(
+  b.Content,
+  {
+    ref: t,
+    "data-tabs": "content",
+    tabIndex: -1,
+    className: c(
+      "mt-2 focus-visible:outline-none focus:outline-none",
+      e
+    ),
+    ...a
+  }
+));
+z.displayName = b.Content.displayName;
+const D = M(
+  "TabsImage",
+  ({ className: e, activeImage: a, inactiveImage: t, ...o }, r) => /* @__PURE__ */ N(
+    "div",
+    {
+      ref: r,
+      "data-component": "tabs-image",
+      className: c("relative flex items-center justify-center shrink-0", e),
+      ...o,
+      children: [
+        /* @__PURE__ */ n("div", { className: "flex group-data-[state=active]:hidden", children: t }),
+        /* @__PURE__ */ n("div", { className: "hidden group-data-[state=active]:flex", children: a })
+      ]
+    }
+  )
+);
+export {
+  S as Tabs,
+  z as TabsContent,
+  D as TabsImage,
+  B as TabsList,
+  $ as TabsTrigger
+};

package/dist/components/primitives/tabs/tabs.types.d.ts

@@ -0,0 +1,28 @@
+import { InfoTooltipRender } from '../../../lib/primitives/info-slot.types';
+import type * as React from "react";
+import type * as TabsPrimitive from "@radix-ui/react-tabs";
+export type TabsVariant = "line" | "pill" | "outline" | "box";
+export type TabsSize = "default" | "sm";
+export type ActiveColorConfig = {
+    text: string;
+    bg: string;
+    border: string;
+};
+export type TabsProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {
+    variant?: TabsVariant;
+    size?: TabsSize;
+    hideInactiveLabel?: boolean;
+    tooltipClassName?: string;
+    maxWords?: number;
+    /** Inject tooltip at app layer (see defaultTabTooltipRender in feedback/tooltip). */
+    renderTabTooltip?: InfoTooltipRender;
+};
+export type TabsTriggerProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {
+    icon?: React.ReactNode;
+    maxWords?: number;
+    activeColor?: ActiveColorConfig;
+};
+export type TabsImageProps = React.HTMLAttributes<HTMLDivElement> & {
+    activeImage: React.ReactNode;
+    inactiveImage: React.ReactNode;
+};

package/dist/components/primitives/tag/tag.d.ts

@@ -0,0 +1,4 @@
+import { TagProps } from './tag.types';
+import * as React from "react";
+declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<HTMLElement>>;
+export { Tag };

package/dist/components/primitives/tag/tag.js

@@ -0,0 +1,84 @@
+import { jsxs as v, Fragment as x, jsx as t } from "react/jsx-runtime";
+import "react";
+import { Slot as C } from "@radix-ui/react-slot";
+import { Cross as j } from "impact-nova-icons";
+import { Button as k } from "../button/button.js";
+import { createComponent as y } from "../../../lib/primitives/create-component.js";
+import { cn as w } from "../../../lib/utils.js";
+import { useImpactNovaI18n as z } from "../../../i18n/use-impact-nova-i18n.js";
+import { tagVariants as T } from "./tag.variants.js";
+const E = y(
+  "Tag",
+  ({
+    className: p,
+    variant: o,
+    size: m,
+    shape: i,
+    leftIcon: l,
+    rightIcon: c,
+    removable: u,
+    onRemove: d,
+    asChild: f = !1,
+    asButton: h = !1,
+    children: g,
+    ...a
+  }, e) => {
+    const { t: N } = z(), n = w(T({ variant: o, size: m, shape: i }), p), r = {
+      "data-component": "tag",
+      "data-variant": o ?? "default",
+      "data-size": m ?? "md",
+      "data-shape": i ?? "pill"
+    }, s = /* @__PURE__ */ v(x, { children: [
+      l ? /* @__PURE__ */ t("span", { className: "me-1.5 flex shrink-0 items-center justify-center", children: l }) : null,
+      g,
+      c ? /* @__PURE__ */ t("span", { className: "ms-1.5 flex shrink-0 items-center justify-center", children: c }) : null,
+      u ? /* @__PURE__ */ t(
+        k,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "icon",
+          "aria-label": N("aria.remove"),
+          onClick: (b) => {
+            b.stopPropagation(), d?.();
+          },
+          className: "ms-1.5 h-4 w-4 shrink-0 rounded-full hover:bg-content/10 transition-colors p-0 [&_svg]:size-3",
+          "data-component": "tag-remove",
+          children: /* @__PURE__ */ t(j, { className: "!h-2.5 !w-2.5" })
+        }
+      ) : null
+    ] });
+    return f ? /* @__PURE__ */ t(
+      C,
+      {
+        ref: e,
+        className: n,
+        ...r,
+        ...a,
+        children: s
+      }
+    ) : h ? /* @__PURE__ */ t(
+      "button",
+      {
+        ref: e,
+        type: "button",
+        className: n,
+        ...r,
+        ...a,
+        children: s
+      }
+    ) : /* @__PURE__ */ t(
+      "span",
+      {
+        ref: e,
+        className: n,
+        ...r,
+        ...a,
+        children: s
+      }
+    );
+  }
+);
+export {
+  E as Tag
+};

package/dist/components/primitives/tag/tag.types.d.ts

@@ -0,0 +1,13 @@
+import { VariantProps } from 'class-variance-authority';
+import { tagVariants } from './tag.variants';
+import type * as React from "react";
+export interface TagProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof tagVariants> {
+    shape?: "pill" | "rounded";
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    removable?: boolean;
+    onRemove?: () => void;
+    asChild?: boolean;
+    /** Render a native `<button>` instead of `<span>` for interactive tags. */
+    asButton?: boolean;
+}

package/dist/components/primitives/tag/tag.variants.d.ts

@@ -0,0 +1,5 @@
+export declare const tagVariants: (props?: ({
+    variant?: "default" | "secondary" | "tertiary" | "outline" | "destructive" | "ghost" | "info" | "warning" | "success" | "choice" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    shape?: "rounded" | "pill" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;