@spark-ui/components/dist/chip/index.js

Spark (Leboncoin design system) components.

"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"]
      }
    }
  }
);

// 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