@spark-ui/components 13.1.3 → 13.1.4

package/dist/chip/index.mjs

@@ -1,17 +1,23 @@
-import { jsx as v, jsxs as M, Fragment as W } from "react/jsx-runtime";
-import { tw as a, makeVariants as O } from "@spark-ui/internal-utils";
-import { c as H, a as L } from "../index-BmAFn37q.mjs";
-import { createContext as ee, useContext as ne, Children as ae, isValidElement as re, useCallback as te, cloneElement as ie } from "react";
-import { useCombinedState as S } from "@spark-ui/hooks/use-combined-state";
-import { a as F } from "../Slot-C98rL4yy.mjs";
-import { Close as se } from "@spark-ui/icons/Close";
-import { I as oe } from "../Icon-D1RueiPY.mjs";
-const de = [
+import {
+  Icon
+} from "../chunk-UMUMFMFB.mjs";
+import "../chunk-KEGAAGJW.mjs";
+import {
+  Slot
+} from "../chunk-6QCEPQ3U.mjs";
+
+// src/chip/Chip.styles.tsx
+import { makeVariants } from "@spark-ui/internal-utils";
+import { cva } from "class-variance-authority";
+
+// src/chip/variants/outlined.ts
+import { tw } from "@spark-ui/internal-utils";
+var outlinedVariants = [
   /** Intents **/
   {
     design: "outlined",
     intent: "main",
-    class: a([
+    class: tw([
       "enabled:hover:bg-main/dim-5",
       "enabled:active:bg-main/dim-5",
       "focus-visible:bg-main/dim-5",
@@ -22,7 +28,7 @@ const de = [
   {
     design: "outlined",
     intent: "support",
-    class: a([
+    class: tw([
       "enabled:hover:bg-support/dim-5",
       "enabled:active:bg-support/dim-5",
       "focus-visible:bg-support/dim-5",
@@ -33,7 +39,7 @@ const de = [
   {
     design: "outlined",
     intent: "basic",
-    class: a([
+    class: tw([
       "enabled:hover:bg-basic/dim-5",
       "enabled:active:bg-basic/dim-5",
       "focus-visible:bg-basic/dim-5",
@@ -44,7 +50,7 @@ const de = [
   {
     intent: "accent",
     design: "outlined",
-    class: a([
+    class: tw([
       "enabled:hover:bg-accent/dim-5",
       "enabled:active:bg-accent/dim-5",
       "focus-visible:bg-accent/dim-5",
@@ -56,7 +62,7 @@ const de = [
   {
     design: "outlined",
     intent: "success",
-    class: a([
+    class: tw([
       "enabled:hover:bg-success/dim-5",
       "enabled:active:bg-success/dim-5",
       "focus-visible:bg-success/dim-5",
@@ -67,7 +73,7 @@ const de = [
   {
     intent: "alert",
     design: "outlined",
-    class: a([
+    class: tw([
       "enabled:hover:bg-alert/dim-5",
       "enabled:active:bg-alert/dim-5",
       "focus-visible:bg-alert/dim-5",
@@ -78,7 +84,7 @@ const de = [
   {
     design: "outlined",
     intent: "danger",
-    class: a([
+    class: tw([
       "enabled:hover:bg-error/dim-5",
       "enabled:active:bg-error/dim-5",
       "focus-visible:bg-error/dim-5",
@@ -89,7 +95,7 @@ const de = [
   {
     design: "outlined",
     intent: "info",
-    class: a([
+    class: tw([
       "enabled:hover:bg-info/dim-5",
       "enabled:active:bg-info/dim-5",
       "focus-visible:bg-info/dim-5",
@@ -100,7 +106,7 @@ const de = [
   {
     design: "outlined",
     intent: "neutral",
-    class: a([
+    class: tw([
       "enabled:hover:bg-neutral/dim-5",
       "enabled:active:bg-neutral/dim-5",
       "focus-visible:bg-neutral/dim-5",
@@ -111,7 +117,7 @@ const de = [
   {
     design: "outlined",
     intent: "surface",
-    class: a([
+    class: tw([
       "enabled:hover:bg-surface/dim-5",
       "enabled:active:bg-surface/dim-5",
       "focus-visible:bg-surface/dim-5",
@@ -122,20 +128,24 @@ const de = [
   /** Spacings **/
   {
     design: "outlined",
-    hasClearButton: !1,
-    class: a(["px-[calc(var(--spacing-md)-var(--border-width-sm))]"])
+    hasClearButton: false,
+    class: tw(["px-[calc(var(--spacing-md)-var(--border-width-sm))]"])
   },
   {
     design: "outlined",
-    hasClearButton: !0,
-    class: a(["pl-[calc(var(--spacing-md)-var(--border-width-sm))]"])
+    hasClearButton: true,
+    class: tw(["pl-[calc(var(--spacing-md)-var(--border-width-sm))]"])
   }
-], ce = [
+];
+
+// src/chip/variants/tinted.ts
+import { tw as tw2 } from "@spark-ui/internal-utils";
+var tintedVariants = [
   /** Intents **/
   {
     intent: "main",
     design: "tinted",
-    class: a([
+    class: tw2([
       "bg-main-container",
       "enabled:hover:bg-main-container-hovered",
       "enabled:active:bg-main-container-hovered",
@@ -147,7 +157,7 @@ const de = [
   {
     intent: "support",
     design: "tinted",
-    class: a([
+    class: tw2([
       "bg-support-container",
       "enabled:hover:bg-support-container-hovered",
       "enabled:active:bg-support-container-hovered",
@@ -159,7 +169,7 @@ const de = [
   {
     intent: "basic",
     design: "tinted",
-    class: a([
+    class: tw2([
       "bg-basic-container",
       "enabled:hover:bg-basic-container-hovered",
       "enabled:active:bg-basic-container-hovered",
@@ -171,7 +181,7 @@ const de = [
   {
     intent: "accent",
     design: "tinted",
-    class: a([
+    class: tw2([
       "bg-accent-container",
       "enabled:hover:bg-accent-container-hovered",
       "enabled:active:bg-accent-container-hovered",
@@ -183,7 +193,7 @@ const de = [
   {
     intent: "success",
     design: "tinted",
-    class: a([
+    class: tw2([
       "bg-success-container",
       "enabled:hover:bg-success-container-hovered",
       "enabled:active:bg-success-container-hovered",
@@ -195,7 +205,7 @@ const de = [
   {
     intent: "alert",
     design: "tinted",
-    class: a([
+    class: tw2([
       "bg-alert-container",
       "enabled:hover:bg-alert-container-hovered",
       "enabled:active:bg-alert-container-hovered",
@@ -207,7 +217,7 @@ const de = [
   {
     intent: "danger",
     design: "tinted",
-    class: a([
+    class: tw2([
       "bg-error-container",
       "enabled:hover:bg-error-container-hovered",
       "enabled:active:bg-error-container-hovered",
@@ -219,7 +229,7 @@ const de = [
   {
     intent: "info",
     design: "tinted",
-    class: a([
+    class: tw2([
       "bg-info-container",
       "enabled:hover:bg-info-container-hovered",
       "enabled:active:bg-info-container-hovered",
@@ -231,7 +241,7 @@ const de = [
   {
     intent: "neutral",
     design: "tinted",
-    class: a([
+    class: tw2([
       "bg-neutral-container",
       "enabled:hover:bg-neutral-container-hovered",
       "enabled:active:bg-neutral-container-hovered",
@@ -243,7 +253,7 @@ const de = [
   {
     intent: "surface",
     design: "tinted",
-    class: a([
+    class: tw2([
       "bg-surface/dim-1",
       "enabled:hover:bg-surface-hovered/dim-1",
       "enabled:active:bg-surface-hovered/dim-1",
@@ -255,20 +265,24 @@ const de = [
   /** Spacings **/
   {
     design: "tinted",
-    hasClearButton: !1,
-    class: a(["px-md"])
+    hasClearButton: false,
+    class: tw2(["px-md"])
   },
   {
     design: "tinted",
-    hasClearButton: !0,
-    class: a(["pl-md"])
+    hasClearButton: true,
+    class: tw2(["pl-md"])
   }
-], le = [
+];
+
+// src/chip/variants/dashed.ts
+import { tw as tw3 } from "@spark-ui/internal-utils";
+var dashedVariants = [
   /** Intents **/
   {
     intent: "main",
     design: "dashed",
-    class: a([
+    class: tw3([
       "enabled:hover:bg-main/dim-5",
       "enabled:active:bg-main/dim-5",
       "focus-visible:bg-main/dim-5",
@@ -279,7 +293,7 @@ const de = [
   {
     intent: "support",
     design: "dashed",
-    class: a([
+    class: tw3([
       "enabled:hover:bg-support/dim-5",
       "enabled:active:bg-support/dim-5",
       "focus-visible:bg-support/dim-5",
@@ -290,7 +304,7 @@ const de = [
   {
     intent: "basic",
     design: "dashed",
-    class: a([
+    class: tw3([
       "enabled:hover:bg-basic/dim-5",
       "enabled:active:bg-basic/dim-5",
       "focus-visible:bg-basic/dim-5",
@@ -301,7 +315,7 @@ const de = [
   {
     intent: "accent",
     design: "dashed",
-    class: a([
+    class: tw3([
       "enabled:hover:bg-accent/dim-5",
       "enabled:active:bg-accent/dim-5",
       "focus-visible:bg-accent/dim-5",
@@ -312,7 +326,7 @@ const de = [
   {
     intent: "success",
     design: "dashed",
-    class: a([
+    class: tw3([
       "enabled:hover:bg-success/dim-5",
       "enabled:active:bg-success/dim-5",
       "focus-visible:bg-success/dim-5",
@@ -323,7 +337,7 @@ const de = [
   {
     intent: "alert",
     design: "dashed",
-    class: a([
+    class: tw3([
       "enabled:hover:bg-alert/dim-5",
       "enabled:active:bg-alert/dim-5",
       "focus-visible:bg-alert/dim-5",
@@ -334,7 +348,7 @@ const de = [
   {
     intent: "danger",
     design: "dashed",
-    class: a([
+    class: tw3([
       "enabled:hover:bg-error/dim-5",
       "enabled:active:bg-error/dim-5",
       "focus-visible:bg-error/dim-5",
@@ -345,7 +359,7 @@ const de = [
   {
     intent: "info",
     design: "dashed",
-    class: a([
+    class: tw3([
       "enabled:hover:bg-info/dim-5",
       "enabled:active:bg-info/dim-5",
       "focus-visible:bg-info/dim-5",
@@ -356,7 +370,7 @@ const de = [
   {
     intent: "neutral",
     design: "dashed",
-    class: a([
+    class: tw3([
       "enabled:hover:bg-neutral/dim-5",
       "enabled:active:bg-neutral/dim-5",
       "focus-visible:bg-neutral/dim-5",
@@ -367,7 +381,7 @@ const de = [
   {
     intent: "surface",
     design: "dashed",
-    class: a([
+    class: tw3([
       "enabled:hover:bg-surface/dim-5",
       "enabled:active:bg-surface/dim-5",
       "focus-visible:bg-surface/dim-5",
@@ -378,15 +392,18 @@ const de = [
   /** Spacings **/
   {
     design: "dashed",
-    hasClearButton: !1,
-    class: a(["px-[calc(var(--spacing-md)-var(--border-width-sm))]"])
+    hasClearButton: false,
+    class: tw3(["px-[calc(var(--spacing-md)-var(--border-width-sm))]"])
   },
   {
     design: "dashed",
-    hasClearButton: !0,
-    class: a(["pl-[calc(var(--spacing-md)-var(--border-width-sm))]"])
+    hasClearButton: true,
+    class: tw3(["pl-[calc(var(--spacing-md)-var(--border-width-sm))]"])
   }
-], be = H(
+];
+
+// src/chip/Chip.styles.tsx
+var chipStyles = cva(
   [
     "box-border inline-flex h-sz-32 flex-nowrap items-center justify-center rounded-md text-body-1 font-regular",
     "focus-visible:u-outline",
@@ -405,7 +422,7 @@ const de = [
        *
        * - `dashed`: Chip will be transparent with an outline dashed.
        */
-      design: O({
+      design: makeVariants({
         outlined: ["bg-transparent border-sm border-solid border-current"],
         tinted: [""],
         dashed: [
@@ -415,7 +432,7 @@ const de = [
       /**
        * Color scheme of the chip.
        */
-      intent: O({
+      intent: makeVariants({
         main: [],
         support: [],
         basic: [],
@@ -439,298 +456,182 @@ const de = [
       }
       // 'pl-[calc(var(--spacing-md)-(var(--border-width-sm)))]'
     },
-    compoundVariants: [...de, ...ce, ...le],
+    compoundVariants: [...outlinedVariants, ...tintedVariants, ...dashedVariants],
     defaultVariants: {
       design: "outlined",
       intent: "basic"
     }
   }
-), $ = ee({}), ue = () => ne($) || {};
-var P = {}, q;
-function pe() {
-  return q || (q = 1, (function(t) {
-    Object.defineProperty(t, "__esModule", { value: !0 }), t.emulateTab = void 0;
-    var i = new Array("offsetHeight", "scrollHeight", "clientHeight"), s = !0, f = /text|password|search|tel|url/;
-    function c() {
-      var e = m() || document.body, n = N(e);
-      return u(e, n);
+);
+
+// src/chip/useChipContext.tsx
+import { createContext, useContext } from "react";
+var ChipContext = createContext({});
+var useChipContext = () => useContext(ChipContext) || {};
+
+// src/chip/useChipElement.tsx
+import { useCombinedState } from "@spark-ui/hooks/use-combined-state";
+import { emulateTab } from "emulate-tab";
+import {
+  Children,
+  isValidElement
+} from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var getDisplayName = (element) => {
+  return element ? element.type.displayName : "";
+};
+var findElement = (children) => (...values) => {
+  const validChildren = Children.toArray(children).filter(isValidElement);
+  return validChildren.find((child) => {
+    const displayName = getDisplayName(child);
+    return values.includes(displayName || "");
+  });
+};
+var useChipElement = ({
+  onClick,
+  asChild,
+  pressed,
+  defaultPressed,
+  disabled,
+  value,
+  defaultValue,
+  children,
+  onClear
+}) => {
+  const [isPressed, setIsPressed] = useCombinedState(pressed, defaultPressed);
+  const [innerValue] = useCombinedState(
+    value,
+    defaultValue
+  );
+  const findChipElement = findElement(children);
+  const leadingIcon = findChipElement("Chip.LeadingIcon");
+  const trailingIcon = findChipElement("Chip.TrailingIcon");
+  const content = findChipElement("Chip.Content");
+  const clearButton = findChipElement("Chip.ClearButton");
+  const isButton = (onClick || isPressed) !== void 0;
+  const formattedChildren = [leadingIcon, content, clearButton].every(
+    (element) => element === void 0
+  ) ? /* @__PURE__ */ jsx("span", { className: "inline-block grow truncate", children }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    leadingIcon,
+    content,
+    leadingIcon === void 0 ? trailingIcon : null,
+    clearButton
+  ] });
+  const onKeyDown = (event) => {
+    if (!!clearButton && !disabled && ["Delete", "Backspace"].includes(event.key)) {
+      if (onClear) {
+        onClear();
+        event.key === "Delete" && emulateTab();
+        event.key === "Backspace" && emulateTab.backwards();
+      }
     }
-    t.emulateTab = c, (function(e) {
-      e.from = b, e.to = function(n, r) {
-        return r === void 0 && (r = !1), b(m()).to(n, r);
-      }, e.backwards = function() {
-        return e.to(l(m()), s);
-      }, e.forwards = function() {
-        return e();
-      }, e.findSelectableElements = x;
-    })(c = t.emulateTab || (t.emulateTab = {}));
-    function b(e) {
-      return e === void 0 && (e = document.body), {
-        /**
-         * emulate tab to the element before the starting element (which is the active element by default)
-         *
-         * @returns true if switched elemenet and false if default action had been prevented
-         */
-        toPreviousElement: function() {
-          return u(e, l(), s);
+  };
+  if (isButton) {
+    return {
+      Element: asChild ? Slot : "button",
+      chipProps: {
+        type: "button",
+        ...isPressed !== void 0 && {
+          "aria-pressed": isPressed,
+          "data-state": isPressed ? "on" : "off"
         },
-        /**
-         * emulate tab to the element after the starting element (which is the active element by default)
-         *
-         * @returns true if switched elemenet and false if default action had been prevented
-         */
-        toNextElement: function() {
-          return u(e, N(e));
+        onClick: (event) => {
+          isPressed !== void 0 && setIsPressed(!isPressed);
+          onClick && onClick(event, { pressed: isPressed, value: innerValue });
         },
-        /**
-         * emulate tab to a custom given element
-         *
-         * @param target element after tab
-         * @param sendKeyEventsWithShiftModifier like shift tab would do
-         * @returns true if switched elemenet and false if default action had been prevented
-         */
-        to: function(n, r) {
-          return r === void 0 && (r = !1), u(e, n, r);
-        }
-      };
-    }
-    function u(e, n, r) {
-      r === void 0 && (r = !1);
-      var o = e.dispatchEvent(p("keydown", r));
-      if (o) {
-        if (e.blur(), n.focus(), document.activeElement !== n)
-          try {
-            document.activeElement = n;
-          } catch {
-            console.warn("could not switch active element");
-          }
-        n instanceof HTMLInputElement && f.test(n.type) && (n.selectionStart = 0);
-        var d = p("keyup", r);
-        return n.dispatchEvent(d), !0;
-      } else
-        return e.dispatchEvent(p("keypress", r)), e.dispatchEvent(p("keyup", r)), !1;
-    }
-    function p(e, n) {
-      return n === void 0 && (n = !1), new KeyboardEvent(e, {
-        code: "Tab",
-        key: "Tab",
-        cancelable: !0,
-        bubbles: !0,
-        shiftKey: n
-      });
-    }
-    function m() {
-      var e = document.activeElement;
-      return e instanceof HTMLElement ? e : void 0;
-    }
-    function l(e) {
-      e === void 0 && (e = document.body);
-      var n = x();
-      if (n.length < 1)
-        throw new Error("no selectable elements found");
-      var r = n.indexOf(e), o = (r > 0 ? r : n.length) - 1, d = n[o];
-      return d;
-    }
-    function N(e) {
-      e === void 0 && (e = document.body);
-      var n = x();
-      if (n.length < 1)
-        throw new Error("no selectable elements found");
-      var r = n.indexOf(e), o = r + 1 < n.length ? r + 1 : 0, d = n[o];
-      return d;
-    }
-    function x() {
-      var e = Array.from(document.querySelectorAll("*")).filter(y);
-      I();
-      var n = e.filter(k(V, g, C, X, Z)).reduce(function(o, d) {
-        var w = d.tabIndex, A = o["" + w] || { tabIndex: w, elements: [] };
-        return A.elements.push(d), o[w] = A, o;
-      }, {}), r = Object.values(n).sort(K).reduce(function(o, d) {
-        return o.concat(d.elements);
-      }, new Array());
-      return r;
-    }
-    var y = function(e) {
-      return e instanceof HTMLElement;
-    }, g, I = function() {
-      var e = h();
-      e ? g = E(e) : g = T, I = function() {
-      };
-    }, E = function(e) {
-      return function(n) {
-        var r = n[e];
-        return !!r && typeof r == "number" && r > 0;
-      };
-    };
-    function h(e) {
-      e === void 0 && (e = document.body);
-      var n = e, r = i.find(function(_) {
-        var z = n[_];
-        return z && typeof z == "number" && z > 0;
-      });
-      if (r)
-        return r;
-      for (var o = e.children, d = 0, w = Array.from(o); d < w.length; d++) {
-        var A = w[d], D = h(A);
-        if (D)
-          return D;
+        onKeyDown,
+        disabled,
+        children: formattedChildren
+      },
+      compoundElements: {
+        leadingIcon,
+        trailingIcon,
+        content,
+        clearButton
       }
-    }
-    var T = function(e) {
-      if (!e.isConnected)
-        return !1;
-      if (e.tagName === "BODY")
-        return !0;
-      var n = getComputedStyle(e);
-      if (n.display === "none" || n.visibility === "collapse")
-        return !1;
-      var r = e.parentElement;
-      return r ? T(r) : !1;
-    };
-    function k() {
-      for (var e = [], n = 0; n < arguments.length; n++)
-        e[n] = arguments[n];
-      return function(r) {
-        return !e.some(function(o) {
-          return !o(r);
-        });
-      };
-    }
-    function V(e) {
-      return typeof e.tabIndex == "number" && e.tabIndex >= 0;
-    }
-    var C = function(e) {
-      return !e.disabled;
     };
-    function X(e) {
-      return !(e instanceof HTMLAnchorElement) || !!e.href || e.getAttribute("tabIndex") !== null;
-    }
-    var Z = function(e) {
-      return getComputedStyle(e).visibility !== "collapse";
-    };
-    function K(e, n) {
-      if (e.tabIndex > 0 && n.tabIndex > 0)
-        return e.tabIndex - n.tabIndex;
-      if (e.tabIndex > 0)
-        return -e.tabIndex;
-      if (n.tabIndex > 0)
-        return n.tabIndex;
-      throw new Error("same tab index for two groups");
-    }
-  })(P)), P;
-}
-var G = pe();
-const me = (t) => t ? t.type.displayName : "", ge = (t) => (...i) => ae.toArray(t).filter(re).find((f) => {
-  const c = me(f);
-  return i.includes(c || "");
-}), ve = ({
-  onClick: t,
-  asChild: i,
-  pressed: s,
-  defaultPressed: f,
-  disabled: c,
-  value: b,
-  defaultValue: u,
-  children: p,
-  onClear: m
-}) => {
-  const [l, N] = S(s, f), [x] = S(
-    b,
-    u
-  ), y = ge(p), g = y("Chip.LeadingIcon"), I = y("Chip.TrailingIcon"), E = y("Chip.Content"), h = y("Chip.ClearButton"), T = (t || l) !== void 0, k = [g, E, h].every(
-    (C) => C === void 0
-  ) ? /* @__PURE__ */ v("span", { className: "inline-block grow truncate", children: p }) : /* @__PURE__ */ M(W, { children: [
-    g,
-    E,
-    g === void 0 ? I : null,
-    h
-  ] }), V = (C) => {
-    h && !c && ["Delete", "Backspace"].includes(C.key) && m && (m(), C.key === "Delete" && G.emulateTab(), C.key === "Backspace" && G.emulateTab.backwards());
-  };
-  return T ? {
-    Element: i ? F : "button",
-    chipProps: {
-      type: "button",
-      ...l !== void 0 && {
-        "aria-pressed": l,
-        "data-state": l ? "on" : "off"
-      },
-      onClick: (C) => {
-        l !== void 0 && N(!l), t && t(C, { pressed: l, value: x });
-      },
-      onKeyDown: V,
-      disabled: c,
-      children: k
-    },
-    compoundElements: {
-      leadingIcon: g,
-      trailingIcon: I,
-      content: E,
-      clearButton: h
-    }
-  } : {
-    Element: i ? F : "div",
+  }
+  return {
+    Element: asChild ? Slot : "div",
     chipProps: {
-      "aria-disabled": c,
-      children: k,
-      onKeyDown: V
+      "aria-disabled": disabled,
+      children: formattedChildren,
+      onKeyDown
     },
     compoundElements: {
-      leadingIcon: g,
-      trailingIcon: I,
-      content: E,
-      clearButton: h
+      leadingIcon,
+      trailingIcon,
+      content,
+      clearButton
     }
   };
-}, R = ({
-  design: t = "outlined",
-  disabled: i,
-  children: s,
-  intent: f = "basic",
-  defaultPressed: c,
-  pressed: b,
-  asChild: u,
-  className: p,
-  onClick: m,
-  onClear: l,
-  ref: N,
-  ...x
+};
+
+// src/chip/Chip.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Chip = ({
+  design = "outlined",
+  disabled,
+  children,
+  intent = "basic",
+  defaultPressed,
+  pressed,
+  asChild,
+  className,
+  onClick,
+  onClear,
+  ref: forwardedRef,
+  ...otherProps
 }) => {
   const {
-    Element: y,
-    chipProps: { children: g, ...I },
-    compoundElements: E
-  } = ve({
-    asChild: u,
-    pressed: b,
-    defaultPressed: c,
-    onClick: m,
-    disabled: !!i,
-    value: x.value,
-    defaultValue: x.defaultValue,
-    children: s,
-    onClear: l
-  }), { clearButton: h } = E;
-  return /* @__PURE__ */ v($.Provider, { value: { disabled: i, design: t, intent: f, onClear: l }, children: /* @__PURE__ */ v(
-    y,
+    Element: ChipElement,
+    chipProps: { children: formattedChildren, ...chipProps },
+    compoundElements
+  } = useChipElement({
+    asChild,
+    pressed,
+    defaultPressed,
+    onClick,
+    disabled: !!disabled,
+    value: otherProps.value,
+    defaultValue: otherProps.defaultValue,
+    children,
+    onClear
+  });
+  const { clearButton } = compoundElements;
+  return /* @__PURE__ */ jsx2(ChipContext.Provider, { value: { disabled, design, intent, onClear }, children: /* @__PURE__ */ jsx2(
+    ChipElement,
     {
-      ref: N,
-      className: be({
-        className: p,
-        design: t,
-        disabled: i,
-        intent: f,
-        hasClearButton: !!h
+      ref: forwardedRef,
+      className: chipStyles({
+        className,
+        design,
+        disabled,
+        intent,
+        hasClearButton: !!clearButton
       }),
-      ...I,
-      ...x,
+      ...{
+        ...chipProps,
+        ...otherProps
+      },
       "data-spark-component": "chip",
-      children: g
+      children: formattedChildren
     }
   ) });
 };
-R.displayName = "Chip";
-const fe = H(
+Chip.displayName = "Chip";
+
+// src/chip/ChipClearButton.tsx
+import { Close } from "@spark-ui/icons/Close";
+import {
+  cloneElement,
+  useCallback
+} from "react";
+
+// src/chip/ChipClearButton.styles.tsx
+import { tw as tw4 } from "@spark-ui/internal-utils";
+import { cva as cva2 } from "class-variance-authority";
+var chipClearButtonWrapperStyles = cva2(
   ["ml-md flex h-full items-center justify-center focus-visible:outline-hidden"],
   {
     variants: {
@@ -751,37 +652,38 @@ const fe = H(
     compoundVariants: [
       {
         design: "outlined",
-        disabled: !1,
-        class: a(["hover:opacity-dim-1"])
+        disabled: false,
+        class: tw4(["hover:opacity-dim-1"])
       },
       {
         design: "outlined",
-        disabled: !0,
-        class: a(["opacity-dim-3"])
+        disabled: true,
+        class: tw4(["opacity-dim-3"])
       },
       {
         design: "tinted",
-        disabled: !1,
-        class: a(["hover:opacity-dim-1"])
+        disabled: false,
+        class: tw4(["hover:opacity-dim-1"])
       },
       {
         design: "tinted",
-        disabled: !0,
-        class: a(["opacity-dim-3"])
+        disabled: true,
+        class: tw4(["opacity-dim-3"])
       },
       {
         design: "dashed",
-        disabled: !1,
-        class: a(["hover:opacity-dim-1"])
+        disabled: false,
+        class: tw4(["hover:opacity-dim-1"])
       },
       {
         design: "dashed",
-        disabled: !0,
-        class: a(["opacity-dim-3"])
+        disabled: true,
+        class: tw4(["opacity-dim-3"])
       }
     ]
   }
-), he = H(
+);
+var chipClearButtonStyles = cva2(
   ["rounded-full p-sz-2 [font-size:var(--spacing-sz-8)] border-sm", "focus-visible:u-outline"],
   {
     variants: {
@@ -791,74 +693,104 @@ const fe = H(
       }
     },
     defaultVariants: {
-      disabled: !1
+      disabled: false
     }
   }
-), Y = ({
-  children: t = /* @__PURE__ */ v(oe, { children: /* @__PURE__ */ v(se, {}) }),
-  tabIndex: i = 0,
-  label: s,
-  ref: f
+);
+
+// src/chip/ChipClearButton.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var ChipClearButton = ({
+  children = /* @__PURE__ */ jsx3(Icon, { children: /* @__PURE__ */ jsx3(Close, {}) }),
+  tabIndex = 0,
+  label,
+  ref: forwardedRef
 }) => {
-  const { design: c, disabled: b, onClear: u } = ue(), p = te(
-    (m) => {
-      m.stopPropagation(), !b && u && u(m);
+  const { design, disabled, onClear } = useChipContext();
+  const onClearHandler = useCallback(
+    (event) => {
+      event.stopPropagation();
+      !disabled && onClear && onClear(event);
     },
-    [b, u]
+    [disabled, onClear]
   );
-  return /* @__PURE__ */ v(
+  return /* @__PURE__ */ jsx3(
     "span",
     {
-      className: fe({
-        isBordered: ["outline", "dashed"].includes(`${c}`),
-        disabled: !!b,
-        design: c
+      className: chipClearButtonWrapperStyles({
+        isBordered: ["outline", "dashed"].includes(`${design}`),
+        disabled: !!disabled,
+        design
       }),
-      onClick: p,
-      ref: f,
-      children: /* @__PURE__ */ v(
+      onClick: onClearHandler,
+      ref: forwardedRef,
+      children: /* @__PURE__ */ jsx3(
         "button",
         {
-          tabIndex: i,
+          tabIndex,
           type: "button",
-          disabled: !!b,
-          className: he({ disabled: b }),
-          "aria-label": s,
-          children: t && ie(t, { ariaLabel: s })
+          disabled: !!disabled,
+          className: chipClearButtonStyles({ disabled }),
+          "aria-label": label,
+          children: children && cloneElement(children, { ariaLabel: label })
         }
       )
     }
   );
 };
-Y.displayName = "Chip.ClearButton";
-const J = ({ children: t, className: i, ref: s }) => /* @__PURE__ */ v("span", { className: L("inline-block grow truncate", i), ref: s, children: t });
-J.displayName = "Chip.Content";
-const j = ({ children: t, className: i, ref: s }) => /* @__PURE__ */ v("span", { className: L("flex h-full items-center justify-center", i), ref: s, children: t });
-j.displayName = "Chip.Icon";
-const Q = ({
-  className: t,
-  ref: i,
-  ...s
-}) => /* @__PURE__ */ v(j, { className: L("mr-sm", t), ref: i, ...s });
-Q.displayName = "Chip.LeadingIcon";
-const U = ({
-  className: t,
-  ref: i,
-  ...s
-}) => /* @__PURE__ */ v(j, { className: L("ml-md", t), ref: i, ...s });
-U.displayName = "Chip.TrailingIcon";
-const B = Object.assign(R, {
-  Content: J,
-  LeadingIcon: Q,
-  TrailingIcon: U,
-  ClearButton: Y
+ChipClearButton.displayName = "Chip.ClearButton";
+
+// src/chip/ChipContent.tsx
+import { cx } from "class-variance-authority";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var ChipContent = ({ children, className, ref: forwardedRef }) => {
+  return /* @__PURE__ */ jsx4("span", { className: cx("inline-block grow truncate", className), ref: forwardedRef, children });
+};
+ChipContent.displayName = "Chip.Content";
+
+// src/chip/ChipLeadingIcon.tsx
+import { cx as cx3 } from "class-variance-authority";
+
+// src/chip/ChipIcon.tsx
+import { cx as cx2 } from "class-variance-authority";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var ChipIcon = ({ children, className, ref: forwardedRef }) => {
+  return /* @__PURE__ */ jsx5("span", { className: cx2("flex h-full items-center justify-center", className), ref: forwardedRef, children });
+};
+ChipIcon.displayName = "Chip.Icon";
+
+// src/chip/ChipLeadingIcon.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var ChipLeadingIcon = ({
+  className,
+  ref: forwardedRef,
+  ...props
+}) => /* @__PURE__ */ jsx6(ChipIcon, { className: cx3("mr-sm", className), ref: forwardedRef, ...props });
+ChipLeadingIcon.displayName = "Chip.LeadingIcon";
+
+// src/chip/ChipTrailingIcon.tsx
+import { cx as cx4 } from "class-variance-authority";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var ChipTrailingIcon = ({
+  className,
+  ref: forwardedRef,
+  ...props
+}) => /* @__PURE__ */ jsx7(ChipIcon, { className: cx4("ml-md", className), ref: forwardedRef, ...props });
+ChipTrailingIcon.displayName = "Chip.TrailingIcon";
+
+// src/chip/index.ts
+var Chip2 = Object.assign(Chip, {
+  Content: ChipContent,
+  LeadingIcon: ChipLeadingIcon,
+  TrailingIcon: ChipTrailingIcon,
+  ClearButton: ChipClearButton
 });
-B.displayName = "Chip";
-B.ClearButton.displayName = "Chip.ClearButton";
-B.Content.displayName = "Chip.Content";
-B.LeadingIcon.displayName = "Chip.LeadingIcon";
-B.TrailingIcon.displayName = "Chip.TrailingIcon";
+Chip2.displayName = "Chip";
+Chip2.ClearButton.displayName = "Chip.ClearButton";
+Chip2.Content.displayName = "Chip.Content";
+Chip2.LeadingIcon.displayName = "Chip.LeadingIcon";
+Chip2.TrailingIcon.displayName = "Chip.TrailingIcon";
 export {
-  B as Chip
+  Chip2 as Chip
 };
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map