@spark-ui/components 11.1.0 → 11.1.2

package/dist/chip/index.js

@@ -0,0 +1,908 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/chip/index.ts
+var chip_exports = {};
+__export(chip_exports, {
+  Chip: () => Chip2
+});
+module.exports = __toCommonJS(chip_exports);
+
+// src/chip/Chip.styles.tsx
+var import_internal_utils4 = require("@spark-ui/internal-utils");
+var import_class_variance_authority = require("class-variance-authority");
+
+// src/chip/variants/outlined.ts
+var import_internal_utils = require("@spark-ui/internal-utils");
+var outlinedVariants = [
+  /** Intents **/
+  {
+    design: "outlined",
+    intent: "main",
+    class: (0, import_internal_utils.tw)([
+      "enabled:hover:bg-main/dim-5",
+      "enabled:active:bg-main/dim-5",
+      "focus-visible:bg-main/dim-5",
+      "aria-pressed:bg-main-container aria-pressed:text-on-main-container aria-pressed:enabled:hover:bg-main-container/dim-1",
+      "text-main"
+    ])
+  },
+  {
+    design: "outlined",
+    intent: "support",
+    class: (0, import_internal_utils.tw)([
+      "enabled:hover:bg-support/dim-5",
+      "enabled:active:bg-support/dim-5",
+      "focus-visible:bg-support/dim-5",
+      "aria-pressed:bg-support-container aria-pressed:text-on-support-container aria-pressed:enabled:hover:bg-support-container/dim-1",
+      "text-support"
+    ])
+  },
+  {
+    design: "outlined",
+    intent: "basic",
+    class: (0, import_internal_utils.tw)([
+      "enabled:hover:bg-basic/dim-5",
+      "enabled:active:bg-basic/dim-5",
+      "focus-visible:bg-basic/dim-5",
+      "aria-pressed:bg-basic-container aria-pressed:text-on-basic-container aria-pressed:enabled:hover:bg-basic-container/dim-1",
+      "text-basic"
+    ])
+  },
+  {
+    intent: "accent",
+    design: "outlined",
+    class: (0, import_internal_utils.tw)([
+      "enabled:hover:bg-accent/dim-5",
+      "enabled:active:bg-accent/dim-5",
+      "focus-visible:bg-accent/dim-5",
+      "aria-pressed:bg-accent-container",
+      "aria-pressed:bg-accent-container aria-pressed:text-on-accent-container aria-pressed:enabled:hover:bg-accent-container/dim-1",
+      "text-accent"
+    ])
+  },
+  {
+    design: "outlined",
+    intent: "success",
+    class: (0, import_internal_utils.tw)([
+      "enabled:hover:bg-success/dim-5",
+      "enabled:active:bg-success/dim-5",
+      "focus-visible:bg-success/dim-5",
+      "aria-pressed:bg-success-container aria-pressed:text-on-success-container aria-pressed:enabled:hover:bg-success-container/dim-1",
+      "text-success"
+    ])
+  },
+  {
+    intent: "alert",
+    design: "outlined",
+    class: (0, import_internal_utils.tw)([
+      "enabled:hover:bg-alert/dim-5",
+      "enabled:active:bg-alert/dim-5",
+      "focus-visible:bg-alert/dim-5",
+      "aria-pressed:bg-alert-container aria-pressed:text-on-alert-container aria-pressed:enabled:hover:bg-alert-container/dim-1",
+      "text-alert"
+    ])
+  },
+  {
+    design: "outlined",
+    intent: "danger",
+    class: (0, import_internal_utils.tw)([
+      "enabled:hover:bg-error/dim-5",
+      "enabled:active:bg-error/dim-5",
+      "focus-visible:bg-error/dim-5",
+      "aria-pressed:bg-error-container aria-pressed:text-on-error-container aria-pressed:enabled:hover:bg-error-container/dim-1",
+      "text-error"
+    ])
+  },
+  {
+    design: "outlined",
+    intent: "info",
+    class: (0, import_internal_utils.tw)([
+      "enabled:hover:bg-info/dim-5",
+      "enabled:active:bg-info/dim-5",
+      "focus-visible:bg-info/dim-5",
+      "aria-pressed:bg-info-container aria-pressed:text-on-info-container aria-pressed:enabled:hover:bg-info-container/dim-1",
+      "text-info"
+    ])
+  },
+  {
+    design: "outlined",
+    intent: "neutral",
+    class: (0, import_internal_utils.tw)([
+      "enabled:hover:bg-neutral/dim-5",
+      "enabled:active:bg-neutral/dim-5",
+      "focus-visible:bg-neutral/dim-5",
+      "aria-pressed:bg-neutral-container aria-pressed:text-on-neutral-container aria-pressed:enabled:hover:bg-neutral-container/dim-1",
+      "text-neutral"
+    ])
+  },
+  {
+    design: "outlined",
+    intent: "surface",
+    class: (0, import_internal_utils.tw)([
+      "enabled:hover:bg-surface/dim-5",
+      "enabled:active:bg-surface/dim-5",
+      "focus-visible:bg-surface/dim-5",
+      "aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered",
+      "text-surface"
+    ])
+  },
+  /** Spacings **/
+  {
+    design: "outlined",
+    hasClearButton: false,
+    class: (0, import_internal_utils.tw)(["px-[calc(var(--spacing-md)-var(--border-width-sm))]"])
+  },
+  {
+    design: "outlined",
+    hasClearButton: true,
+    class: (0, import_internal_utils.tw)(["pl-[calc(var(--spacing-md)-var(--border-width-sm))]"])
+  }
+];
+
+// src/chip/variants/tinted.ts
+var import_internal_utils2 = require("@spark-ui/internal-utils");
+var tintedVariants = [
+  /** Intents **/
+  {
+    intent: "main",
+    design: "tinted",
+    class: (0, import_internal_utils2.tw)([
+      "bg-main-container",
+      "enabled:hover:bg-main-container-hovered",
+      "enabled:active:bg-main-container-hovered",
+      "focus-visible:bg-main-container-hovered",
+      "aria-pressed:bg-main aria-pressed:text-on-main aria-pressed:enabled:hover:bg-main/dim-1",
+      "text-on-main-container"
+    ])
+  },
+  {
+    intent: "support",
+    design: "tinted",
+    class: (0, import_internal_utils2.tw)([
+      "bg-support-container",
+      "enabled:hover:bg-support-container-hovered",
+      "enabled:active:bg-support-container-hovered",
+      "focus-visible:bg-support-container-hovered",
+      "aria-pressed:bg-support aria-pressed:text-on-support aria-pressed:enabled:hover:bg-support/dim-1",
+      "text-on-support-container"
+    ])
+  },
+  {
+    intent: "basic",
+    design: "tinted",
+    class: (0, import_internal_utils2.tw)([
+      "bg-basic-container",
+      "enabled:hover:bg-basic-container-hovered",
+      "enabled:active:bg-basic-container-hovered",
+      "focus-visible:bg-basic-container-hovered",
+      "aria-pressed:bg-basic aria-pressed:text-on-basic aria-pressed:enabled:hover:bg-basic/dim-1",
+      "text-on-basic-container"
+    ])
+  },
+  {
+    intent: "accent",
+    design: "tinted",
+    class: (0, import_internal_utils2.tw)([
+      "bg-accent-container",
+      "enabled:hover:bg-accent-container-hovered",
+      "enabled:active:bg-accent-container-hovered",
+      "focus-visible:bg-accent-container-hovered",
+      "aria-pressed:bg-accent aria-pressed:text-on-accent aria-pressed:enabled:hover:bg-accent/dim-1",
+      "text-on-accent-container"
+    ])
+  },
+  {
+    intent: "success",
+    design: "tinted",
+    class: (0, import_internal_utils2.tw)([
+      "bg-success-container",
+      "enabled:hover:bg-success-container-hovered",
+      "enabled:active:bg-success-container-hovered",
+      "focus-visible:bg-success-container-hovered",
+      "aria-pressed:bg-success aria-pressed:text-on-success aria-pressed:enabled:hover:bg-success/dim-1",
+      "text-on-success-container"
+    ])
+  },
+  {
+    intent: "alert",
+    design: "tinted",
+    class: (0, import_internal_utils2.tw)([
+      "bg-alert-container",
+      "enabled:hover:bg-alert-container-hovered",
+      "enabled:active:bg-alert-container-hovered",
+      "focus-visible:bg-alert-container-hovered",
+      "aria-pressed:bg-alert aria-pressed:text-on-alert aria-pressed:enabled:hover:bg-alert/dim-1",
+      "text-on-alert-container"
+    ])
+  },
+  {
+    intent: "danger",
+    design: "tinted",
+    class: (0, import_internal_utils2.tw)([
+      "bg-error-container",
+      "enabled:hover:bg-error-container-hovered",
+      "enabled:active:bg-error-container-hovered",
+      "focus-visible:bg-error-container-hovered",
+      "aria-pressed:bg-error aria-pressed:text-on-error aria-pressed:enabled:hover:bg-error/dim-1",
+      "text-on-error-container"
+    ])
+  },
+  {
+    intent: "info",
+    design: "tinted",
+    class: (0, import_internal_utils2.tw)([
+      "bg-info-container",
+      "enabled:hover:bg-info-container-hovered",
+      "enabled:active:bg-info-container-hovered",
+      "focus-visible:bg-info-container-hovered",
+      "aria-pressed:bg-info aria-pressed:text-on-info aria-pressed:enabled:hover:bg-info/dim-1",
+      "text-on-info-container"
+    ])
+  },
+  {
+    intent: "neutral",
+    design: "tinted",
+    class: (0, import_internal_utils2.tw)([
+      "bg-neutral-container",
+      "enabled:hover:bg-neutral-container-hovered",
+      "enabled:active:bg-neutral-container-hovered",
+      "focus-visible:bg-neutral-container-hovered",
+      "aria-pressed:bg-neutral aria-pressed:text-on-neutral aria-pressed:enabled:hover:bg-neutral/dim-1",
+      "text-on-neutral-container"
+    ])
+  },
+  {
+    intent: "surface",
+    design: "tinted",
+    class: (0, import_internal_utils2.tw)([
+      "bg-surface/dim-1",
+      "enabled:hover:bg-surface-hovered/dim-1",
+      "enabled:active:bg-surface-hovered/dim-1",
+      "focus-visible:bg-surface-hovered/dim-1",
+      "aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered",
+      "text-on-surface/dim-1"
+    ])
+  },
+  /** Spacings **/
+  {
+    design: "tinted",
+    hasClearButton: false,
+    class: (0, import_internal_utils2.tw)(["px-md"])
+  },
+  {
+    design: "tinted",
+    hasClearButton: true,
+    class: (0, import_internal_utils2.tw)(["pl-md"])
+  }
+];
+
+// src/chip/variants/dashed.ts
+var import_internal_utils3 = require("@spark-ui/internal-utils");
+var dashedVariants = [
+  /** Intents **/
+  {
+    intent: "main",
+    design: "dashed",
+    class: (0, import_internal_utils3.tw)([
+      "enabled:hover:bg-main/dim-5",
+      "enabled:active:bg-main/dim-5",
+      "focus-visible:bg-main/dim-5",
+      "aria-pressed:bg-main-container aria-pressed:text-on-main-container aria-pressed:enabled:hover:bg-main-container/dim-1",
+      "text-main"
+    ])
+  },
+  {
+    intent: "support",
+    design: "dashed",
+    class: (0, import_internal_utils3.tw)([
+      "enabled:hover:bg-support/dim-5",
+      "enabled:active:bg-support/dim-5",
+      "focus-visible:bg-support/dim-5",
+      "aria-pressed:bg-support-container aria-pressed:text-on-support-container aria-pressed:enabled:hover:bg-support-container/dim-1",
+      "text-support"
+    ])
+  },
+  {
+    intent: "basic",
+    design: "dashed",
+    class: (0, import_internal_utils3.tw)([
+      "enabled:hover:bg-basic/dim-5",
+      "enabled:active:bg-basic/dim-5",
+      "focus-visible:bg-basic/dim-5",
+      "aria-pressed:bg-basic-container aria-pressed:text-on-basic-container aria-pressed:enabled:hover:bg-basic-container/dim-1",
+      "text-basic"
+    ])
+  },
+  {
+    intent: "accent",
+    design: "dashed",
+    class: (0, import_internal_utils3.tw)([
+      "enabled:hover:bg-accent/dim-5",
+      "enabled:active:bg-accent/dim-5",
+      "focus-visible:bg-accent/dim-5",
+      "aria-pressed:bg-accent-container aria-pressed:text-on-accent-container aria-pressed:enabled:hover:bg-accent-container/dim-1",
+      "text-accent"
+    ])
+  },
+  {
+    intent: "success",
+    design: "dashed",
+    class: (0, import_internal_utils3.tw)([
+      "enabled:hover:bg-success/dim-5",
+      "enabled:active:bg-success/dim-5",
+      "focus-visible:bg-success/dim-5",
+      "aria-pressed:bg-success-container aria-pressed:text-on-success-container aria-pressed:enabled:hover:bg-success-container/dim-1",
+      "text-success"
+    ])
+  },
+  {
+    intent: "alert",
+    design: "dashed",
+    class: (0, import_internal_utils3.tw)([
+      "enabled:hover:bg-alert/dim-5",
+      "enabled:active:bg-alert/dim-5",
+      "focus-visible:bg-alert/dim-5",
+      "aria-pressed:bg-alert-container aria-pressed:text-on-alert-container aria-pressed:enabled:hover:bg-alert-container/dim-1",
+      "text-alert"
+    ])
+  },
+  {
+    intent: "danger",
+    design: "dashed",
+    class: (0, import_internal_utils3.tw)([
+      "enabled:hover:bg-error/dim-5",
+      "enabled:active:bg-error/dim-5",
+      "focus-visible:bg-error/dim-5",
+      "aria-pressed:bg-error-container aria-pressed:text-on-error-container aria-pressed:enabled:hover:bg-error-container/dim-1",
+      "text-error"
+    ])
+  },
+  {
+    intent: "info",
+    design: "dashed",
+    class: (0, import_internal_utils3.tw)([
+      "enabled:hover:bg-info/dim-5",
+      "enabled:active:bg-info/dim-5",
+      "focus-visible:bg-info/dim-5",
+      "aria-pressed:bg-info-container aria-pressed:text-on-info-container aria-pressed:enabled:hover:bg-info-container/dim-1",
+      "text-info"
+    ])
+  },
+  {
+    intent: "neutral",
+    design: "dashed",
+    class: (0, import_internal_utils3.tw)([
+      "enabled:hover:bg-neutral/dim-5",
+      "enabled:active:bg-neutral/dim-5",
+      "focus-visible:bg-neutral/dim-5",
+      "aria-pressed:bg-neutral-container aria-pressed:text-on-neutral-container aria-pressed:enabled:hover:bg-neutral-container/dim-1",
+      "text-neutral"
+    ])
+  },
+  {
+    intent: "surface",
+    design: "dashed",
+    class: (0, import_internal_utils3.tw)([
+      "enabled:hover:bg-surface/dim-5",
+      "enabled:active:bg-surface/dim-5",
+      "focus-visible:bg-surface/dim-5",
+      "aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered",
+      "text-surface"
+    ])
+  },
+  /** Spacings **/
+  {
+    design: "dashed",
+    hasClearButton: false,
+    class: (0, import_internal_utils3.tw)(["px-[calc(var(--spacing-md)-var(--border-width-sm))]"])
+  },
+  {
+    design: "dashed",
+    hasClearButton: true,
+    class: (0, import_internal_utils3.tw)(["pl-[calc(var(--spacing-md)-var(--border-width-sm))]"])
+  }
+];
+
+// src/chip/Chip.styles.tsx
+var chipStyles = (0, import_class_variance_authority.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",
+    "ease-out duration-150"
+  ],
+  {
+    variants: {
+      /**
+       * Main style of the chip.
+       *
+       * - `filled`: Chip will be plain.
+       *
+       * - `outlined`: Chip will be transparent with an outline.
+       *
+       * - `tinted`: Chip will be filled but using a lighter color scheme.
+       *
+       * - `dashed`: Chip will be transparent with an outline dashed.
+       */
+      design: (0, import_internal_utils4.makeVariants)({
+        outlined: ["bg-transparent border-sm border-solid border-current"],
+        tinted: [""],
+        dashed: [
+          "bg-transparent border-sm border-dashed shadow-none focus-visible:border-outline-high"
+        ]
+      }),
+      /**
+       * Color scheme of the chip.
+       */
+      intent: (0, import_internal_utils4.makeVariants)({
+        main: [],
+        support: [],
+        basic: [],
+        accent: [],
+        success: [],
+        alert: [],
+        danger: [],
+        info: [],
+        neutral: [],
+        surface: []
+      }),
+      /**
+       * Disable the chip, preventing user interaction and adding opacity.
+       */
+      disabled: {
+        true: ["cursor-not-allowed", "opacity-dim-3"]
+      },
+      hasClearButton: {
+        true: [],
+        false: []
+      }
+      // 'pl-[calc(var(--spacing-md)-(var(--border-width-sm)))]'
+    },
+    compoundVariants: [...outlinedVariants, ...tintedVariants, ...dashedVariants],
+    defaultVariants: {
+      design: "outlined",
+      intent: "basic"
+    }
+  }
+);
+
+// src/chip/useChipContext.tsx
+var import_react = require("react");
+var ChipContext = (0, import_react.createContext)({});
+var useChipContext = () => (0, import_react.useContext)(ChipContext) || {};
+
+// src/chip/useChipElement.tsx
+var import_use_combined_state = require("@spark-ui/hooks/use-combined-state");
+var import_emulate_tab = require("emulate-tab");
+var import_react3 = require("react");
+
+// src/slot/Slot.tsx
+var import_radix_ui = require("radix-ui");
+var import_react2 = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Slottable = import_radix_ui.Slot.Slottable;
+var Slot = ({ ref, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Slot.Root, { ref, ...props });
+};
+
+// src/chip/useChipElement.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var getDisplayName = (element) => {
+  return element ? element.type.displayName : "";
+};
+var findElement = (children) => (...values) => {
+  const validChildren = import_react3.Children.toArray(children).filter(import_react3.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] = (0, import_use_combined_state.useCombinedState)(pressed, defaultPressed);
+  const [innerValue] = (0, import_use_combined_state.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__ */ (0, import_jsx_runtime2.jsx)("span", { className: "inline-block grow truncate", children }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.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" && (0, import_emulate_tab.emulateTab)();
+        event.key === "Backspace" && import_emulate_tab.emulateTab.backwards();
+      }
+    }
+  };
+  if (isButton) {
+    return {
+      Element: asChild ? Slot : "button",
+      chipProps: {
+        type: "button",
+        ...isPressed !== void 0 && {
+          "aria-pressed": isPressed,
+          "data-state": isPressed ? "on" : "off"
+        },
+        onClick: (event) => {
+          isPressed !== void 0 && setIsPressed(!isPressed);
+          onClick && onClick(event, { pressed: isPressed, value: innerValue });
+        },
+        onKeyDown,
+        disabled,
+        children: formattedChildren
+      },
+      compoundElements: {
+        leadingIcon,
+        trailingIcon,
+        content,
+        clearButton
+      }
+    };
+  }
+  return {
+    Element: asChild ? Slot : "div",
+    chipProps: {
+      "aria-disabled": disabled,
+      children: formattedChildren,
+      onKeyDown
+    },
+    compoundElements: {
+      leadingIcon,
+      trailingIcon,
+      content,
+      clearButton
+    }
+  };
+};
+
+// src/chip/Chip.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Chip = ({
+  design = "outlined",
+  disabled,
+  children,
+  intent = "basic",
+  defaultPressed,
+  pressed,
+  asChild,
+  className,
+  onClick,
+  onClear,
+  ref: forwardedRef,
+  ...otherProps
+}) => {
+  const {
+    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__ */ (0, import_jsx_runtime3.jsx)(ChipContext.Provider, { value: { disabled, design, intent, onClear }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    ChipElement,
+    {
+      ref: forwardedRef,
+      className: chipStyles({
+        className,
+        design,
+        disabled,
+        intent,
+        hasClearButton: !!clearButton
+      }),
+      ...{
+        ...chipProps,
+        ...otherProps
+      },
+      "data-spark-component": "chip",
+      children: formattedChildren
+    }
+  ) });
+};
+Chip.displayName = "Chip";
+
+// src/chip/ChipClearButton.tsx
+var import_Close = require("@spark-ui/icons/Close");
+var import_react5 = require("react");
+
+// src/icon/Icon.tsx
+var import_react4 = require("react");
+
+// src/visually-hidden/VisuallyHidden.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var VisuallyHidden = ({ asChild = false, ref, ...props }) => {
+  const Component = asChild ? Slot : "span";
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    Component,
+    {
+      ...props,
+      ref,
+      style: {
+        // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss
+        position: "absolute",
+        border: 0,
+        width: 1,
+        height: 1,
+        padding: 0,
+        margin: -1,
+        overflow: "hidden",
+        clip: "rect(0, 0, 0, 0)",
+        whiteSpace: "nowrap",
+        wordWrap: "normal",
+        ...props.style
+      }
+    }
+  );
+};
+VisuallyHidden.displayName = "VisuallyHidden";
+
+// src/icon/Icon.styles.tsx
+var import_internal_utils5 = require("@spark-ui/internal-utils");
+var import_class_variance_authority2 = require("class-variance-authority");
+var iconStyles = (0, import_class_variance_authority2.cva)(["fill-current shrink-0"], {
+  variants: {
+    /**
+     * Color scheme of the icon.
+     */
+    intent: (0, import_internal_utils5.makeVariants)({
+      current: ["text-current"],
+      main: ["text-main"],
+      support: ["text-support"],
+      accent: ["text-accent"],
+      basic: ["text-basic"],
+      success: ["text-success"],
+      alert: ["text-alert"],
+      error: ["text-error"],
+      info: ["text-info"],
+      neutral: ["text-neutral"]
+    }),
+    /**
+     * Sets the size of the icon.
+     */
+    size: (0, import_internal_utils5.makeVariants)({
+      current: ["u-current-font-size"],
+      sm: ["w-sz-16", "h-sz-16"],
+      md: ["w-sz-24", "h-sz-24"],
+      lg: ["w-sz-32", "h-sz-32"],
+      xl: ["w-sz-40", "h-sz-40"]
+    })
+  }
+});
+
+// src/icon/Icon.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var Icon = ({
+  label,
+  className,
+  size = "current",
+  intent = "current",
+  children,
+  ...others
+}) => {
+  const child = import_react4.Children.only(children);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    (0, import_react4.cloneElement)(child, {
+      className: iconStyles({ className, size, intent }),
+      "data-spark-component": "icon",
+      "aria-hidden": "true",
+      focusable: "false",
+      ...others
+    }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(VisuallyHidden, { children: label })
+  ] });
+};
+Icon.displayName = "Icon";
+
+// src/chip/ChipClearButton.styles.tsx
+var import_internal_utils6 = require("@spark-ui/internal-utils");
+var import_class_variance_authority3 = require("class-variance-authority");
+var chipClearButtonWrapperStyles = (0, import_class_variance_authority3.cva)(
+  ["ml-md flex h-full items-center justify-center focus-visible:outline-hidden"],
+  {
+    variants: {
+      disabled: {
+        false: ["cursor-pointer"],
+        true: ["cursor-not-allowed"]
+      },
+      isBordered: {
+        false: ["pr-md"],
+        true: ["pr-[7px]"]
+      },
+      design: {
+        outlined: [],
+        tinted: [],
+        dashed: []
+      }
+    },
+    compoundVariants: [
+      {
+        design: "outlined",
+        disabled: false,
+        class: (0, import_internal_utils6.tw)(["hover:opacity-dim-1"])
+      },
+      {
+        design: "outlined",
+        disabled: true,
+        class: (0, import_internal_utils6.tw)(["opacity-dim-3"])
+      },
+      {
+        design: "tinted",
+        disabled: false,
+        class: (0, import_internal_utils6.tw)(["hover:opacity-dim-1"])
+      },
+      {
+        design: "tinted",
+        disabled: true,
+        class: (0, import_internal_utils6.tw)(["opacity-dim-3"])
+      },
+      {
+        design: "dashed",
+        disabled: false,
+        class: (0, import_internal_utils6.tw)(["hover:opacity-dim-1"])
+      },
+      {
+        design: "dashed",
+        disabled: true,
+        class: (0, import_internal_utils6.tw)(["opacity-dim-3"])
+      }
+    ]
+  }
+);
+var chipClearButtonStyles = (0, import_class_variance_authority3.cva)(
+  ["rounded-full p-sz-2 [font-size:var(--spacing-sz-8)] border-sm", "focus-visible:u-outline"],
+  {
+    variants: {
+      disabled: {
+        true: ["cursor-not-allowed"],
+        false: ["cursor-pointer"]
+      }
+    },
+    defaultVariants: {
+      disabled: false
+    }
+  }
+);
+
+// src/chip/ChipClearButton.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var ChipClearButton = ({
+  children = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_Close.Close, {}) }),
+  tabIndex = 0,
+  label,
+  ref: forwardedRef
+}) => {
+  const { design, disabled, onClear } = useChipContext();
+  const onClearHandler = (0, import_react5.useCallback)(
+    (event) => {
+      event.stopPropagation();
+      !disabled && onClear && onClear(event);
+    },
+    [disabled, onClear]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "span",
+    {
+      className: chipClearButtonWrapperStyles({
+        isBordered: ["outline", "dashed"].includes(`${design}`),
+        disabled: !!disabled,
+        design
+      }),
+      onClick: onClearHandler,
+      ref: forwardedRef,
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "button",
+        {
+          tabIndex,
+          type: "button",
+          disabled: !!disabled,
+          className: chipClearButtonStyles({ disabled }),
+          "aria-label": label,
+          children: children && (0, import_react5.cloneElement)(children, { ariaLabel: label })
+        }
+      )
+    }
+  );
+};
+ChipClearButton.displayName = "Chip.ClearButton";
+
+// src/chip/ChipContent.tsx
+var import_class_variance_authority4 = require("class-variance-authority");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var ChipContent = ({ children, className, ref: forwardedRef }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: (0, import_class_variance_authority4.cx)("inline-block grow truncate", className), ref: forwardedRef, children });
+};
+ChipContent.displayName = "Chip.Content";
+
+// src/chip/ChipLeadingIcon.tsx
+var import_class_variance_authority6 = require("class-variance-authority");
+
+// src/chip/ChipIcon.tsx
+var import_class_variance_authority5 = require("class-variance-authority");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var ChipIcon = ({ children, className, ref: forwardedRef }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: (0, import_class_variance_authority5.cx)("flex h-full items-center justify-center", className), ref: forwardedRef, children });
+};
+ChipIcon.displayName = "Chip.Icon";
+
+// src/chip/ChipLeadingIcon.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var ChipLeadingIcon = ({
+  className,
+  ref: forwardedRef,
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChipIcon, { className: (0, import_class_variance_authority6.cx)("mr-sm", className), ref: forwardedRef, ...props });
+ChipLeadingIcon.displayName = "Chip.LeadingIcon";
+
+// src/chip/ChipTrailingIcon.tsx
+var import_class_variance_authority7 = require("class-variance-authority");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var ChipTrailingIcon = ({
+  className,
+  ref: forwardedRef,
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChipIcon, { className: (0, import_class_variance_authority7.cx)("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
+});
+Chip2.displayName = "Chip";
+Chip2.ClearButton.displayName = "Chip.ClearButton";
+Chip2.Content.displayName = "Chip.Content";
+Chip2.LeadingIcon.displayName = "Chip.LeadingIcon";
+Chip2.TrailingIcon.displayName = "Chip.TrailingIcon";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Chip
+});
+//# sourceMappingURL=index.js.map