asheeui 0.5.0

package/dist/components/carousel/Carousel.js

@@ -0,0 +1,250 @@
+"use client";
+import { jsxs as T, jsx as l, Fragment as Ae } from "react/jsx-runtime";
+import { cn as u } from "@asheeui/utils";
+import { forwardRef as Se, useId as Pe, useMemo as Ne, useState as p, useRef as ke, useCallback as j, useEffect as Le } from "react";
+import { ChevronLeftIcon as Re } from "../../icons/ChevronLeftIcon.js";
+import { ChevronRightIcon as De } from "../../icons/ChevronRightIcon.js";
+import { useAsheeConfig as Oe } from "../../libs/context.js";
+import { RADIUS_CLASS as Ie } from "../../shared/radius.js";
+import { resolveCascade as d, resolveRadiusKey as _e, resolveClassKey as A } from "../../utils/resolve-token.js";
+import { FALLBACK_CAROUSEL_CONFIG as s } from "./carousel-config.js";
+import { CAROUSEL_HEIGHT_CLASS as Ee, CAROUSEL_PADDING_CLASS as He, CAROUSEL_VARIANT_CLASS as F } from "./carousel-styles.js";
+const G = 50, ze = Se(
+  ({
+    items: h = [],
+    variant: $,
+    size: V,
+    radius: X,
+    autoPlay: x,
+    autoPlayInterval: B,
+    loop: C,
+    showControls: W,
+    showIndicators: q,
+    pauseOnHover: J,
+    disableAnimation: Q = !1,
+    defaultIndex: Y = 0,
+    index: S,
+    onIndexChange: n,
+    renderPrevControl: P,
+    renderNextControl: N,
+    itemClassName: Z,
+    controlClassName: k,
+    indicatorClassName: ee,
+    className: re,
+    style: oe,
+    children: c,
+    id: te,
+    ...se
+  }, le) => {
+    var M;
+    const y = Oe(), e = (M = y.components) == null ? void 0 : M.carousel, ae = Pe(), ne = te ?? ae, L = d(
+      V,
+      e == null ? void 0 : e.size,
+      void 0,
+      s.size
+    ), ie = d(
+      $,
+      e == null ? void 0 : e.variant,
+      y.defaultVariant,
+      s.variant
+    ), de = _e(
+      X,
+      e == null ? void 0 : e.radius,
+      y.defaultRadius,
+      s.radius
+    ), R = d(
+      x,
+      e == null ? void 0 : e.autoPlay,
+      void 0,
+      s.autoPlay
+    ), D = d(
+      B,
+      e == null ? void 0 : e.autoPlayInterval,
+      void 0,
+      s.autoPlayInterval
+    ), f = d(
+      C,
+      e == null ? void 0 : e.loop,
+      void 0,
+      s.loop
+    ), ue = d(
+      W,
+      e == null ? void 0 : e.showControls,
+      void 0,
+      s.showControls
+    ), ce = d(
+      q,
+      e == null ? void 0 : e.showIndicators,
+      void 0,
+      s.showIndicators
+    ), O = d(
+      J,
+      e == null ? void 0 : e.pauseOnHover,
+      void 0,
+      s.pauseOnHover
+    ), fe = A(
+      L,
+      Ee,
+      s.size
+    ), ve = A(
+      L,
+      He,
+      s.size
+    ), be = A(
+      de,
+      Ie,
+      s.radius
+    ), me = F[ie] ?? F.bordered, t = Ne(() => h.length > 0 ? h : c ? (Array.isArray(c) ? c : [c]).map((o, we) => ({
+      id: `slide-${we}`,
+      content: o
+    })) : [], [h, c]), v = S !== void 0, [pe, I] = p(Y), a = v ? S : pe, [_, m] = p(!1), [b, E] = p(!1), [g, w] = p(0), H = ke(0), i = j(
+      (r) => {
+        if (t.length <= 1) return;
+        let o = a + r;
+        o < 0 ? o = f ? t.length - 1 : 0 : o >= t.length && (o = f ? 0 : t.length - 1), o !== a && (v || I(o), n == null || n(o));
+      },
+      [a, t.length, f, v, n]
+    ), he = j(
+      (r) => {
+        r === a || r < 0 || r >= t.length || (v || I(r), n == null || n(r));
+      },
+      [a, t.length, v, n]
+    );
+    Le(() => {
+      if (!R || O && _ || b || t.length <= 1)
+        return;
+      const r = setInterval(() => {
+        i(1);
+      }, D);
+      return () => clearInterval(r);
+    }, [
+      R,
+      D,
+      O,
+      _,
+      b,
+      t.length,
+      i
+    ]);
+    const ye = (r) => {
+      r.target.closest("button") || (E(!0), H.current = r.clientX, w(0), r.currentTarget.setPointerCapture(r.pointerId));
+    }, ge = (r) => {
+      if (!b) return;
+      const o = r.clientX - H.current;
+      w(o);
+    }, z = () => {
+      b && (E(!1), g < -G ? i(1) : g > G && i(-1), w(0));
+    }, U = !f && a === 0, K = !f && a === t.length - 1;
+    return /* @__PURE__ */ T(
+      "div",
+      {
+        ref: le,
+        id: ne,
+        onMouseEnter: () => m(!0),
+        onMouseLeave: () => m(!1),
+        onFocus: () => m(!0),
+        onBlur: () => m(!1),
+        className: u(
+          "relative overflow-hidden w-full select-none flex flex-col group",
+          me,
+          be,
+          fe,
+          e == null ? void 0 : e.className,
+          re
+        ),
+        style: oe,
+        ...se,
+        children: [
+          /* @__PURE__ */ l(
+            "div",
+            {
+              onPointerDown: ye,
+              onPointerMove: ge,
+              onPointerUp: z,
+              onPointerCancel: z,
+              className: "relative w-full h-full overflow-hidden flex-1 touch-pan-y cursor-grab active:cursor-grabbing",
+              children: /* @__PURE__ */ l(
+                "div",
+                {
+                  className: u(
+                    "flex w-full h-full",
+                    !b && !Q && "transition-transform duration-300 ease-out"
+                  ),
+                  style: {
+                    transform: `translate3d(calc(${-a * 100}% + ${g}px), 0, 0)`
+                  },
+                  children: t.map((r, o) => /* @__PURE__ */ l(
+                    "div",
+                    {
+                      className: u(
+                        "w-full h-full shrink-0 flex items-center justify-center overflow-hidden",
+                        ve,
+                        Z
+                      ),
+                      children: r.content
+                    },
+                    r.id || o
+                  ))
+                }
+              )
+            }
+          ),
+          ue && t.length > 1 && /* @__PURE__ */ T(Ae, { children: [
+            P ? P({
+              onClick: () => i(-1),
+              disabled: U
+            }) : /* @__PURE__ */ l(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Previous Slide",
+                disabled: U,
+                onClick: () => i(-1),
+                className: u(
+                  "absolute left-3 top-1/2 -translate-y-1/2 z-20 p-2.5 rounded-full bg-background/80 hover:bg-background text-foreground border border-border/50 backdrop-blur-md shadow-md transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:opacity-30 disabled:cursor-not-allowed",
+                  k
+                ),
+                children: /* @__PURE__ */ l(Re, { className: "w-5 h-5" })
+              }
+            ),
+            N ? N({
+              onClick: () => i(1),
+              disabled: K
+            }) : /* @__PURE__ */ l(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Next Slide",
+                disabled: K,
+                onClick: () => i(1),
+                className: u(
+                  "absolute right-3 top-1/2 -translate-y-1/2 z-20 p-2.5 rounded-full bg-background/80 hover:bg-background text-foreground border border-border/50 backdrop-blur-md shadow-md transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:opacity-30 disabled:cursor-not-allowed",
+                  k
+                ),
+                children: /* @__PURE__ */ l(De, { className: "w-5 h-5" })
+              }
+            )
+          ] }),
+          ce && t.length > 1 && /* @__PURE__ */ l("div", { className: "absolute bottom-3 inset-x-0 z-20 flex justify-center items-center gap-1.5 pointer-events-none", children: /* @__PURE__ */ l("div", { className: "flex items-center gap-1.5 p-1.5 rounded-full bg-background/40 backdrop-blur-md pointer-events-auto border border-white/10", children: t.map((r, o) => /* @__PURE__ */ l(
+            "button",
+            {
+              type: "button",
+              "aria-label": `Go to slide ${o + 1}`,
+              onClick: () => he(o),
+              className: u(
+                "h-2 rounded-full transition-all duration-300 focus:outline-none focus-visible:ring-1 focus-visible:ring-primary",
+                o === a ? "w-6 bg-primary" : "w-2 bg-foreground/40 hover:bg-foreground/70",
+                ee
+              )
+            },
+            r.id || o
+          )) }) })
+        ]
+      }
+    );
+  }
+);
+ze.displayName = "Carousel";
+export {
+  ze as Carousel
+};

package/dist/components/carousel/carousel-config.d.ts

@@ -0,0 +1,40 @@
+import { ReactNode } from 'react';
+import { Radius } from '../../shared/radius';
+import { Size } from '../../shared/size';
+export type CarouselVariant = "bordered" | "ghost";
+export type CarouselSizeKey = Size;
+export type CarouselRadiusKey = Radius;
+export interface CarouselItem {
+    id?: string;
+    content: ReactNode;
+}
+export interface CarouselConfig {
+    variant?: CarouselVariant;
+    size?: CarouselSizeKey;
+    radius?: CarouselRadiusKey;
+    autoPlay?: boolean;
+    autoPlayInterval?: number;
+    loop?: boolean;
+    showControls?: boolean;
+    showIndicators?: boolean;
+    pauseOnHover?: boolean;
+    className?: string;
+}
+export declare const defaultCarouselConfig: CarouselConfig;
+declare module "../../libs/registry" {
+    interface ComponentTypeConfigRegistry {
+        carousel: CarouselConfig;
+    }
+}
+export declare const FALLBACK_CAROUSEL_CONFIG: {
+    readonly size: "md";
+    readonly variant: "bordered";
+    readonly radius: "lg";
+    readonly autoPlay: false;
+    readonly autoPlayInterval: 5000;
+    readonly loop: true;
+    readonly showControls: true;
+    readonly showIndicators: true;
+    readonly pauseOnHover: true;
+};
+//# sourceMappingURL=carousel-config.d.ts.map

package/dist/components/carousel/carousel-config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel-config.d.ts","sourceRoot":"","sources":["../../../src/components/carousel/carousel-config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAE9C,MAAM,MAAM,eAAe,GAAG,UAAU,GAAG,OAAO,CAAC;AACnD,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC;AACnC,MAAM,MAAM,iBAAiB,GAAG,MAAM,CAAC;AAEvC,MAAM,WAAW,YAAY;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,SAAS,CAAC;CACpB;AAED,MAAM,WAAW,cAAc;IAC7B,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,qBAAqB,EAAE,cAQnC,CAAC;AAEF,OAAO,QAAQ,qBAAqB,CAAC;IACnC,UAAU,2BAA2B;QACnC,QAAQ,EAAE,cAAc,CAAC;KAC1B;CACF;AAID,eAAO,MAAM,wBAAwB;;;;;;;;;;CAU3B,CAAC"}

package/dist/components/carousel/carousel-config.js

@@ -0,0 +1,27 @@
+"use client";
+import { registerComponentDefaults as e } from "../../libs/registry.js";
+const o = {
+  size: "md",
+  autoPlay: !1,
+  autoPlayInterval: 5e3,
+  loop: !0,
+  showControls: !0,
+  showIndicators: !0,
+  pauseOnHover: !0
+};
+e("carousel", o);
+const r = {
+  size: "md",
+  variant: "bordered",
+  radius: "lg",
+  autoPlay: !1,
+  autoPlayInterval: 5e3,
+  loop: !0,
+  showControls: !0,
+  showIndicators: !0,
+  pauseOnHover: !0
+};
+export {
+  r as FALLBACK_CAROUSEL_CONFIG,
+  o as defaultCarouselConfig
+};

package/dist/components/carousel/carousel-styles.d.ts

@@ -0,0 +1,6 @@
+import { Size } from '../../shared/size';
+import { CarouselVariant } from './carousel-config';
+export declare const CAROUSEL_HEIGHT_CLASS: Record<Size, string>;
+export declare const CAROUSEL_PADDING_CLASS: Record<Size, string>;
+export declare const CAROUSEL_VARIANT_CLASS: Record<CarouselVariant, string>;
+//# sourceMappingURL=carousel-styles.d.ts.map

package/dist/components/carousel/carousel-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel-styles.d.ts","sourceRoot":"","sources":["../../../src/components/carousel/carousel-styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEzD,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,CAItD,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,CAIvD,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,eAAe,EAAE,MAAM,CAGlE,CAAC"}

package/dist/components/carousel/carousel-styles.js

@@ -0,0 +1,18 @@
+"use client";
+const r = {
+  sm: "h-60 md:h-80",
+  md: "h-80 md:h-[420px]",
+  lg: "h-[400px] md:h-[520px]"
+}, d = {
+  sm: "p-4",
+  md: "p-6",
+  lg: "p-8"
+}, o = {
+  bordered: "bg-background border-2 border-border",
+  ghost: "bg-transparent"
+};
+export {
+  r as CAROUSEL_HEIGHT_CLASS,
+  d as CAROUSEL_PADDING_CLASS,
+  o as CAROUSEL_VARIANT_CLASS
+};

package/dist/components/carousel/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Carousel';
+export * from './carousel-config';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/carousel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/carousel/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC"}

package/dist/components/carousel/index.js

@@ -0,0 +1,3 @@
+export * from "./Carousel.js";
+export * from "./carousel-config.js";
+export * from "./carousel-styles.js";

package/dist/components/chip/Chip.d.ts

@@ -0,0 +1,93 @@
+import { HTMLAttributes, MouseEvent, ReactNode } from 'react';
+import { Radius } from '../../shared/radius';
+import { Size } from '../../shared/size';
+import { Color } from '../../shared/variant';
+import { ChipVariant } from './chip-config';
+/**
+ * Configuration options for the Chip component.
+ */
+export interface ChipProps extends Omit<HTMLAttributes<HTMLDivElement>, "color" | "size"> {
+    /** Visual style variant.
+     *
+     * @default "bordered"
+     */
+    variant?: ChipVariant;
+    /** Theme accent color.
+     *
+     * @default "primary"
+     */
+    color?: Color;
+    /** Height and font-size scale.
+     *
+     * @default "md"
+     */
+    size?: Size;
+    /** Corner rounding.
+     *
+     * @default "full"
+     */
+    radius?: Radius;
+    /** Disables interactions and dims the chip.
+     *
+     * @default false
+     */
+    isDisabled?: boolean;
+    /** Leading icon rendered before the content. */
+    startIcon?: ReactNode;
+    /** Trailing icon rendered after the content (hidden when closable). */
+    endIcon?: ReactNode;
+    /** Avatar node rendered before the content, replacing `startIcon`. */
+    avatar?: ReactNode;
+    /** Renders a small status dot.
+     *
+     * Pass `true` for the current color, or a CSS color string.
+     */
+    dot?: boolean | string;
+    /** When provided, renders a remove button that fires this callback. */
+    onClose?: (e: MouseEvent<HTMLButtonElement>) => void;
+    /** Custom remove icon shown inside the close button. */
+    closeIcon?: ReactNode;
+    /** Chip content. */
+    children?: ReactNode;
+}
+/**
+ * A compact element that represents an input, choice, or attribute.
+ *
+ * Chip displays short labels with optional avatars, icons, a status
+ * dot, and an optional close button. When `onClose` is provided the
+ * chip becomes keyboard-operable for removal. Visual tokens resolve
+ * through the standard AsheeUI cascade.
+ *
+ * @param props - Chip configuration options and HTML div props.
+ * @param props.variant - Visual style variant. Defaults to "bordered".
+ * @param props.color - Theme accent color. Defaults to "primary".
+ * @param props.size - Density scale. Defaults to "md".
+ * @param props.radius - Corner rounding. Defaults to "full".
+ * @param props.isDisabled - Disabled state. Defaults to false.
+ * @param props.startIcon - Leading icon.
+ * @param props.endIcon - Trailing icon.
+ * @param props.avatar - Avatar node.
+ * @param props.dot - Status dot.
+ * @param props.onClose - Close callback.
+ * @param props.closeIcon - Custom close icon.
+ * @param props.children - Chip label content.
+ *
+ * @example
+ * ```tsx
+ * import { Chip } from "asheeui";
+ *
+ * export function Example() {
+ *   return (
+ *     <Chip
+ *       variant="solid"
+ *       color="primary"
+ *       onClose={() => console.log("Removed")}
+ *     >
+ *       React
+ *     </Chip>
+ *   );
+ * }
+ * ```
+ */
+export declare const Chip: import('react').ForwardRefExoticComponent<ChipProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Chip.d.ts.map

package/dist/components/chip/Chip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../src/components/chip/Chip.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,cAAc,EAEnB,KAAK,UAAU,EACf,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAgB,KAAK,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAChE,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,KAAK,KAAK,EAAuB,MAAM,sBAAsB,CAAC;AAMvE,OAAO,EAEL,KAAK,WAAW,EAEjB,MAAM,eAAe,CAAC;AASvB;;GAEG;AACH,MAAM,WAAW,SACf,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC9D;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gDAAgD;IAChD,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,uEAAuE;IACvE,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,sEAAsE;IACtE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;OAGG;IACH,GAAG,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACvB,uEAAuE;IACvE,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACrD,wDAAwD;IACxD,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,eAAO,MAAM,IAAI,sGAsOhB,CAAC"}

package/dist/components/chip/Chip.js

@@ -0,0 +1,193 @@
+"use client";
+import { jsxs as F, jsx as i } from "react/jsx-runtime";
+import { cn as c } from "@asheeui/utils";
+import { forwardRef as O } from "react";
+import { CloseIcon as X } from "../../icons/CloseIcon.js";
+import { useAsheeConfig as Y } from "../../libs/context.js";
+import { RADIUS_CLASS as T } from "../../shared/radius.js";
+import { resolveVariantClass as B } from "../../shared/variant.js";
+import { resolveCascade as p, resolveRadiusKey as M, resolveClassKey as a } from "../../utils/resolve-token.js";
+import { FALLBACK_CHIP_CONFIG as s } from "./chip-config.js";
+import { CHIP_HEIGHT_CLASS as U, CHIP_PADDING_CLASS as Z, CHIP_FONT_CLASS as q, CHIP_GAP_CLASS as D, CHIP_ICON_SIZE_CLASS as J } from "./chip-styles.js";
+const Q = O(
+  ({
+    variant: S,
+    color: _,
+    size: N,
+    radius: A,
+    isDisabled: t = !1,
+    startIcon: h,
+    endIcon: y,
+    avatar: d,
+    dot: f,
+    onClose: o,
+    closeIcon: C,
+    children: I,
+    className: b,
+    style: w,
+    onClick: n,
+    ...x
+  }, z) => {
+    var K;
+    const u = Y(), e = (K = u.components) == null ? void 0 : K.chip, v = p(
+      S,
+      e == null ? void 0 : e.variant,
+      u.defaultVariant,
+      s.variant
+    ), P = v === "underlined" ? "bordered" : v, H = p(
+      _,
+      e == null ? void 0 : e.color,
+      u.defaultColor,
+      s.color
+    ), l = p(
+      N,
+      e == null ? void 0 : e.size,
+      void 0,
+      s.size
+    ), L = M(
+      A,
+      e == null ? void 0 : e.radius,
+      u.defaultRadius,
+      s.radius
+    ), g = a(
+      l,
+      U,
+      s.size
+    ), j = a(
+      l,
+      Z,
+      s.size
+    ), R = a(
+      l,
+      q,
+      s.size
+    ), k = a(
+      l,
+      D,
+      s.size
+    ), m = a(
+      l,
+      J,
+      s.size
+    ), E = a(
+      L,
+      T,
+      s.radius
+    ), G = (r) => {
+      r.stopPropagation(), !t && (o == null || o(r));
+    };
+    return /* @__PURE__ */ F(
+      "div",
+      {
+        ref: z,
+        tabIndex: t ? -1 : 0,
+        "aria-disabled": t,
+        onClick: (r) => {
+          t || n == null || n(r);
+        },
+        onKeyDown: (r) => {
+          if (!t && (r.key === "Enter" || r.key === " ")) {
+            r.preventDefault();
+            const V = {
+              ...r,
+              button: 0,
+              buttons: 1,
+              clientX: 0,
+              clientY: 0,
+              pageX: 0,
+              pageY: 0,
+              screenX: 0,
+              screenY: 0,
+              altKey: r.altKey,
+              ctrlKey: r.ctrlKey,
+              metaKey: r.metaKey,
+              shiftKey: r.shiftKey,
+              type: "click"
+            };
+            n == null || n(V);
+          }
+        },
+        className: c(
+          "inline-flex items-center font-medium transition-all duration-200 select-none shrink-0",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2",
+          B(P, H),
+          g,
+          j,
+          R,
+          k,
+          E,
+          t && "opacity-50 pointer-events-none cursor-not-allowed",
+          n && !t && "cursor-pointer hover:opacity-90 active:scale-[0.98]",
+          e == null ? void 0 : e.className,
+          b
+        ),
+        style: w,
+        ...x,
+        children: [
+          f && /* @__PURE__ */ i(
+            "span",
+            {
+              className: "shrink-0 rounded-full",
+              style: {
+                width: "0.5em",
+                height: "0.5em",
+                backgroundColor: typeof f == "string" ? f : "currentColor"
+              }
+            }
+          ),
+          d && /* @__PURE__ */ i(
+            "span",
+            {
+              className: c(
+                "inline-flex items-center justify-center shrink-0 overflow-hidden rounded-full",
+                m
+              ),
+              children: d
+            }
+          ),
+          h && !d && /* @__PURE__ */ i(
+            "span",
+            {
+              className: c(
+                "inline-flex items-center justify-center shrink-0",
+                m
+              ),
+              children: h
+            }
+          ),
+          I,
+          y && !o && /* @__PURE__ */ i(
+            "span",
+            {
+              className: c(
+                "inline-flex items-center justify-center shrink-0",
+                m
+              ),
+              children: y
+            }
+          ),
+          o && /* @__PURE__ */ i(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Remove chip",
+              disabled: t,
+              onClick: G,
+              className: c(
+                "inline-flex items-center justify-center shrink-0 rounded-full transition-opacity",
+                "hover:opacity-70 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-current",
+                "opacity-80 -mr-1",
+                m
+              ),
+              children: C ?? /* @__PURE__ */ i(X, { className: "w-full h-full" })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Q.displayName = "Chip";
+export {
+  Q as Chip
+};