@spear-ai/spectral 1.3.42 → 1.3.44

package/dist/RadioButtonGroup/RadioButtonGroupBase.js

@@ -1,58 +1,61 @@
 "use client";
 import "../styles/main.css";
 import { jsx as s } from "react/jsx-runtime";
+import { Slot as m } from "../primitives/slot.js";
 import { c as l } from "../twUtils-CRiPKpXj.js";
-import { createContext as f, useContext as b } from "react";
-const u = f(null), x = ({
-  value: e,
-  onValueChange: r,
+import { createContext as x, useContext as h } from "react";
+const c = x(null), G = ({
+  value: t,
+  onValueChange: n,
   children: i,
-  className: t,
-  isKeptActive: o = !1,
-  expanded: n = !1
-}) => /* @__PURE__ */ s(u.Provider, { value: { value: e, onValueChange: r, isKeptActive: o, expanded: n }, children: /* @__PURE__ */ s(
+  className: o,
+  isKeptActive: r = !1,
+  expanded: e = !1
+}) => /* @__PURE__ */ s(c.Provider, { value: { value: t, onValueChange: n, isKeptActive: r, expanded: e }, children: /* @__PURE__ */ s(
   "div",
   {
     role: "radiogroup",
-    "data-expanded": n,
+    "data-expanded": e,
     className: l(
       "flex h-fit w-fit items-center rounded-md [&_button:first-of-type]:rounded-l-md [&_button:last-of-type]:rounded-r-md",
       "data-[expanded=true]:w-full",
-      t
+      o
     ),
     children: i
   }
-) }), w = ({ value: e, children: r, className: i, disabled: t = !1 }) => {
-  const o = b(u);
-  if (!o)
+) }), R = ({
+  value: t,
+  children: n,
+  className: i,
+  disabled: o = !1,
+  asChild: r = !1
+}) => {
+  const e = h(c);
+  if (!e)
     throw new Error("RadioButtonGroupItem must be used within a RadioButtonGroup");
-  const { value: n, onValueChange: a, isKeptActive: c, expanded: g } = o, d = n === e;
-  return /* @__PURE__ */ s(
-    "button",
-    {
-      type: "button",
-      role: "radio",
-      "aria-checked": d,
-      "data-state": d ? "on" : "off",
-      disabled: t,
-      onClick: () => {
-        !t && a && a(e);
-      },
-      className: l(
-        "bg-toggle-bg inline-flex items-center justify-center gap-2 border text-sm font-medium disabled:pointer-events-none disabled:opacity-50",
-        "text-toggle-text hover:bg-toggle-bg--hover hover:text-toggle-text--hover transition-[colors] hover:cursor-pointer disabled:cursor-not-allowed",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus:outline-none focus-visible:ring-[3px] [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        'border-toggle-border hover:border-toggle-border--hover h-9 min-w-9 px-3 outline-none [&_svg:not([class*="size-"]):not([width]):not([height])]:size-4',
-        "rounded-none shadow-none focus:z-10 focus-visible:z-10 [&:not(:first-child)]:border-l-0",
-        g && "w-full",
-        c && "data-[state=on]:bg-toggle-bg--active data-[state=on]:text-toggle-text--active data-[state=on]:border-toggle-border--active",
-        i
-      ),
-      children: r
-    }
-  );
+  const { value: g, onValueChange: a, isKeptActive: u, expanded: b } = e, d = g === t, f = () => {
+    !o && a && a(t);
+  }, v = r ? m : "button", p = {
+    role: "radio",
+    "aria-checked": d,
+    "data-state": d ? "on" : "off",
+    disabled: o,
+    onClick: f,
+    className: l(
+      "bg-toggle-bg inline-flex items-center justify-center gap-2 border text-sm font-medium disabled:pointer-events-none disabled:opacity-50",
+      "disabled:cursor-not-allowed hover:cursor-pointer text-toggle-text hover:bg-toggle-bg--hover hover:text-toggle-text--hover transition-[colors]",
+      "[&_svg]:pointer-events-none [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] focus:outline-none",
+      'outline-none border-toggle-border hover:border-toggle-border--hover h-9 px-3 min-w-9 [&_svg:not([class*="size-"]):not([width]):not([height])]:size-4',
+      "rounded-none shadow-none focus:z-10 focus-visible:z-10 [&:not(:first-child)]:border-l-0 active:bg-toggle-bg--active active:text-toggle-text--active",
+      "active:border-toggle-border--active",
+      b && "w-full",
+      u && "data-[state=on]:bg-toggle-bg--active data-[state=on]:text-toggle-text--active data-[state=on]:border-toggle-border--active",
+      i
+    )
+  };
+  return /* @__PURE__ */ s(v, { ...!r && { type: "button" }, ...p, children: n });
 };
 export {
-  x as RadioButtonGroupBase,
-  w as RadioButtonGroupItem
+  G as RadioButtonGroupBase,
+  R as RadioButtonGroupItem
 };

package/dist/RadioButtonGroup.d.ts

@@ -1,6 +1,6 @@
 import { RadioButtonGroupBase } from './RadioButtonGroupBase';
-import { ComponentProps } from '../../../node_modules/react';
+import { ComponentProps } from 'react';
 export type RadioButtonGroupProps = ComponentProps<typeof RadioButtonGroupBase>;
 export declare const RadioButtonGroup: ({ className, children, ...props }: RadioButtonGroupProps) => import("react/jsx-runtime").JSX.Element;
-export declare const RadioButtonGroupItem: ({ value, children, className, disabled }: import('./RadioButtonGroupBase').RadioButtonGroupItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RadioButtonGroupItem: ({ value, children, className, disabled, asChild, }: import('./RadioButtonGroupBase').RadioButtonGroupItemProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=RadioButtonGroup.d.ts.map

package/dist/RadioButtonGroup.js

@@ -1,19 +1,19 @@
 import "./styles/main.css";
 import { jsx as e } from "react/jsx-runtime";
-import { RadioButtonGroupItem as u, RadioButtonGroupBase as m } from "./RadioButtonGroup/RadioButtonGroupBase.js";
-import { c as n } from "./twUtils-CRiPKpXj.js";
+import { RadioButtonGroupItem as n, RadioButtonGroupBase as u } from "./RadioButtonGroup/RadioButtonGroupBase.js";
+import { c as m } from "./twUtils-CRiPKpXj.js";
 import "react";
 const s = ({ className: t, children: o, ...r }) => /* @__PURE__ */ e(
-  m,
+  u,
   {
-    className: n(
-      "flex h-fit w-fit items-center rounded-md [&_button:first-of-type]:rounded-l-md [&_button:last-of-type]:rounded-r-md",
+    className: m(
+      "flex h-fit w-fit items-center rounded-md px-2 whitespace-nowrap [&_button:first-of-type]:rounded-l-md [&_button:last-of-type]:rounded-r-md",
       t
     ),
     ...r,
     children: o
   }
-), f = u;
+), f = n;
 export {
   s as RadioButtonGroup,
   f as RadioButtonGroupItem

package/dist/RadioGroup/RadioGroupBase.d.ts

@@ -1,5 +1,5 @@
 import { AsChildProp } from '../../primitives/slot';
-import { ButtonHTMLAttributes, HTMLAttributes } from '../../../node_modules/react';
+import { ButtonHTMLAttributes, HTMLAttributes } from 'react';
 type Orientation = 'horizontal' | 'vertical';
 type Dir = 'ltr' | 'rtl';
 type GroupBaseProps = Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'role'>;
@@ -26,7 +26,7 @@ export type RadioGroupItemProps = ItemBaseProps & AsChildProp & {
 export type RadioGroupIndicatorProps = HTMLAttributes<HTMLSpanElement> & AsChildProp & {
     forceMount?: boolean;
 };
-export declare const RadioGroup: import('../../../node_modules/react').ForwardRefExoticComponent<GroupBaseProps & AsChildProp & {
+export declare const RadioGroup: import('react').ForwardRefExoticComponent<GroupBaseProps & AsChildProp & {
     value?: string;
     defaultValue?: string;
     onValueChange?: (value: string | undefined) => void;
@@ -38,15 +38,15 @@ export declare const RadioGroup: import('../../../node_modules/react').ForwardRe
     dir?: Dir;
     loop?: boolean;
     variant?: "default" | "unstyled";
-} & import('../../../node_modules/react').RefAttributes<HTMLDivElement>>;
-export declare const RadioGroupItem: import('../../../node_modules/react').ForwardRefExoticComponent<ItemBaseProps & AsChildProp & {
+} & import('react').RefAttributes<HTMLDivElement>>;
+export declare const RadioGroupItem: import('react').ForwardRefExoticComponent<ItemBaseProps & AsChildProp & {
     value: string;
     disabled?: boolean;
     id?: string;
     'aria-label'?: string;
-} & import('../../../node_modules/react').RefAttributes<HTMLButtonElement>>;
-export declare const RadioGroupIndicator: import('../../../node_modules/react').ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & AsChildProp & {
+} & import('react').RefAttributes<HTMLButtonElement>>;
+export declare const RadioGroupIndicator: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & AsChildProp & {
     forceMount?: boolean;
-} & import('../../../node_modules/react').RefAttributes<HTMLSpanElement>>;
+} & import('react').RefAttributes<HTMLSpanElement>>;
 export {};
 //# sourceMappingURL=RadioGroupBase.d.ts.map

package/dist/RadioGroup.d.ts

@@ -1,4 +1,4 @@
-import { ComponentProps } from '../../../node_modules/react';
+import { ComponentProps } from 'react';
 import * as RadioGroupPrimitive from './RadioGroupBase';
 type RadioGroupVariant = 'default' | 'unstyled';
 export type RadioGroupProps = ComponentProps<typeof RadioGroupPrimitive.RadioGroup> & {

package/dist/Select/SelectBase.d.ts

@@ -0,0 +1,26 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+export type SelectState = 'default' | 'error' | 'disabled' | 'loading';
+export interface SelectOption {
+    label: string;
+    value: string;
+    group?: string;
+    disabled?: boolean;
+}
+export interface SelectBaseProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'onChange'> {
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    options: SelectOption[];
+    placeholder?: string;
+    state?: SelectState;
+    errorMessage?: string;
+    emptyMessage?: ReactNode;
+    loadingMessage?: string;
+    name?: string;
+    id?: string;
+    label?: string;
+    'aria-label'?: string;
+    'aria-describedby'?: string;
+}
+export declare const SelectBase: import('react').ForwardRefExoticComponent<SelectBaseProps & import('react').RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=SelectBase.d.ts.map

package/dist/Select/SelectBase.js

@@ -0,0 +1,233 @@
+"use client";
+import "../styles/main.css";
+import { jsxs as p, jsx as n, Fragment as ee } from "react/jsx-runtime";
+import { c as b } from "../twUtils-CRiPKpXj.js";
+import { forwardRef as te, useId as re, useState as C, useRef as T, useMemo as _, useCallback as E, useEffect as S } from "react";
+import { L as $ } from "../loader-circle-CvdzOiQ_.js";
+import { C as se, a as ne } from "../chevron-down-UbkgS76q.js";
+const B = "h-4 w-4", G = "h-5 w-5", ae = (t) => ({
+  error: "border-danger hover:border-danger focus-visible:border-danger focus-visible:ring-danger",
+  loading: "cursor-wait pointer-events-none border-input-border--disabled",
+  disabled: "cursor-not-allowed opacity-50 border-input-border--disabled bg-input-bg--disabled",
+  default: ""
+})[t], de = (t, l, i) => b(
+  "flex h-12 w-full items-center justify-between rounded-lg border border-input-border bg-input-bg px-4 py-3 text-sm",
+  "hover:border-input-border--hover focus:border-input-border--focus focus:outline-none",
+  "focus:ring-2 focus:ring-black focus:ring-offset-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2",
+  "disabled:cursor-not-allowed disabled:opacity-50 disabled:border-input-border--disabled disabled:bg-input-bg--disabled",
+  "transition duration-200 text-input-text [&>span]:line-clamp-1",
+  l && "border-input-border--focus ring-2 ring-black ring-offset-2",
+  ae(t),
+  i
+), le = (t) => b(
+  "absolute top-full left-0 right-0 z-50 mt-1 max-h-96 min-w-[8rem] overflow-hidden rounded-lg border border-input-border bg-input-bg shadow-md",
+  "transition-all duration-200 origin-top",
+  t ? "scale-100 opacity-100 translate-y-0" : "scale-95 opacity-0 -translate-y-1 pointer-events-none"
+), ie = (t) => {
+  const l = T(null);
+  return S(() => {
+    const i = (a) => {
+      l.current && !l.current.contains(a.target) && t();
+    };
+    return document.addEventListener("mousedown", i), () => document.removeEventListener("mousedown", i);
+  }, [t]), l;
+}, oe = (t, l, i, a, m) => {
+  const [r, c] = C(-1);
+  S(() => {
+    if (m) {
+      const s = t.findIndex((g) => g.value === l);
+      c(s >= 0 ? s : 0);
+    } else
+      c(-1);
+  }, [m, l, t]);
+  const k = E(
+    (s) => {
+      if (!m)
+        return s.key === "ArrowDown" || s.key === "ArrowUp" || s.key === " " || s.key === "Enter" ? (s.preventDefault(), "open") : void 0;
+      const y = {
+        ArrowDown: () => {
+          s.preventDefault(), c((h) => {
+            const o = Math.min(h + 1, t.length - 1);
+            return t[o]?.disabled && o < t.length - 1 ? Math.min(o + 1, t.length - 1) : o;
+          });
+        },
+        ArrowUp: () => {
+          s.preventDefault(), c((h) => {
+            const o = Math.max(h - 1, 0);
+            return t[o]?.disabled && o > 0 ? Math.max(o - 1, 0) : o;
+          });
+        },
+        Enter: () => {
+          s.preventDefault(), r >= 0 && t[r] && !t[r].disabled && (i(t[r].value), a());
+        },
+        " ": () => {
+          s.preventDefault(), r >= 0 && t[r] && !t[r].disabled && (i(t[r].value), a());
+        },
+        Escape: () => {
+          s.preventDefault(), a();
+        },
+        Home: () => {
+          s.preventDefault(), c(0);
+        },
+        End: () => {
+          s.preventDefault(), c(t.length - 1);
+        }
+      }[s.key];
+      y && y();
+    },
+    [t, r, i, a, m]
+  );
+  return { focusedIndex: r, setFocusedIndex: c, handleKeyDown: k };
+}, ce = te(
+  ({
+    value: t,
+    defaultValue: l,
+    onChange: i,
+    options: a = [],
+    placeholder: m = "Select an option",
+    state: r = "default",
+    errorMessage: c,
+    emptyMessage: k = "No options found",
+    loadingMessage: s = "Loading...",
+    name: g,
+    id: y,
+    label: h,
+    className: o,
+    "aria-label": I,
+    "aria-describedby": U,
+    ...j
+  }, Z) => {
+    const z = re(), L = y || `${g}-${z}`, M = `${L}-error`, [f, x] = C(!1), [P, W] = C(l || ""), A = t !== void 0, w = A ? t : P, q = ie(() => x(!1)), D = T(null), O = j.disabled || r === "disabled", J = r === "loading", Q = r === "error", v = _(() => {
+      const e = {}, u = [];
+      return a.forEach((d) => {
+        d.group ? (e[d.group] || (e[d.group] = []), e[d.group].push(d)) : u.push(d);
+      }), { groups: e, ungrouped: u, hasGroups: Object.keys(e).length > 0 };
+    }, [a]), K = _(() => a.find((e) => e.value === w), [a, w]), { focusedIndex: N, handleKeyDown: R } = oe(
+      a,
+      w,
+      F,
+      () => x(!1),
+      f
+    ), V = E(() => {
+      O || x((e) => !e);
+    }, [O]);
+    function F(e) {
+      a.find((d) => d.value === e)?.disabled || (A || W(e), i?.(e), x(!1));
+    }
+    const X = E(
+      (e) => {
+        R(e) === "open" && x(!0);
+      },
+      [R]
+    );
+    S(() => {
+      if (f && N >= 0 && D.current) {
+        const e = D.current.children[N];
+        e && e.scrollIntoView({ block: "nearest" });
+      }
+    }, [N, f]);
+    const H = (e, u) => {
+      const d = w === e.value;
+      return /* @__PURE__ */ p(
+        "button",
+        {
+          type: "button",
+          className: b(
+            "relative flex w-full cursor-default items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none select-none",
+            "hover:bg-input-bg--hover focus:bg-input-bg--hover hover:cursor-pointer",
+            "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+            u === N && "bg-input-bg--hover",
+            d && "bg-input-bg--selected text-input-text"
+          ),
+          onClick: () => F(e.value),
+          disabled: e.disabled,
+          "data-disabled": e.disabled,
+          "aria-selected": d,
+          role: "option",
+          children: [
+            /* @__PURE__ */ n("span", { className: "block truncate", children: e.label }),
+            d && /* @__PURE__ */ n("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ n(ne, { className: b(B, "text-input-text") }) })
+          ]
+        },
+        e.value
+      );
+    }, Y = () => ({
+      "--select-min-width": "8rem",
+      "--select-border-radius": "0.5rem",
+      "--select-trigger-height": "3rem"
+    });
+    return /* @__PURE__ */ p("div", { className: "w-full", "data-testid": "select-root", children: [
+      /* @__PURE__ */ p("div", { ref: q, className: "relative", "data-testid": "select-wrapper", children: [
+        /* @__PURE__ */ p(
+          "button",
+          {
+            ref: Z,
+            type: "button",
+            id: L,
+            name: g,
+            className: de(r, f, o),
+            onClick: V,
+            onKeyDown: X,
+            disabled: O,
+            "aria-label": I || h,
+            "aria-describedby": b(Q && M, U),
+            "aria-expanded": f,
+            "aria-haspopup": "listbox",
+            "data-state": r,
+            style: Y(),
+            ...j,
+            children: [
+              /* @__PURE__ */ n("span", { className: "block truncate", children: K ? K.label : /* @__PURE__ */ n("span", { className: "text-input-text-placeholder", children: m }) }),
+              /* @__PURE__ */ n("div", { className: "flex items-center", children: r === "loading" ? /* @__PURE__ */ n($, { className: b(G, "text-input-icon animate-spin") }) : /* @__PURE__ */ n(
+                se,
+                {
+                  className: b(
+                    G,
+                    "text-input-icon transition-transform duration-200",
+                    f && "rotate-180"
+                  )
+                }
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ n("div", { className: le(f), "data-testid": "select-dropdown", children: /* @__PURE__ */ n("div", { className: "p-1", children: /* @__PURE__ */ n(
+          "div",
+          {
+            ref: D,
+            className: "max-h-80 overflow-x-hidden overflow-y-auto",
+            role: "listbox",
+            "aria-multiselectable": "false",
+            tabIndex: -1,
+            children: J ? /* @__PURE__ */ p("div", { className: "text-input-text-secondary flex items-center justify-center gap-2 py-6 text-sm", children: [
+              /* @__PURE__ */ n($, { className: b(B, "animate-spin") }),
+              s
+            ] }) : a.length === 0 ? /* @__PURE__ */ n("div", { className: "text-input-text-secondary py-6 text-center text-sm", children: k }) : /* @__PURE__ */ p(ee, { children: [
+              v.ungrouped.length > 0 && /* @__PURE__ */ n("div", { className: "mb-1", children: v.ungrouped.map((e) => H(e, a.indexOf(e))) }),
+              Object.entries(v.groups).map(([e, u]) => /* @__PURE__ */ p("div", { className: "mb-1", children: [
+                (v.ungrouped.length > 0 || Object.keys(v.groups).indexOf(e) > 0) && /* @__PURE__ */ n("div", { className: "bg-input-border -mx-1 my-1 h-px" }),
+                /* @__PURE__ */ n("div", { className: "text-input-text-secondary px-2 py-1.5 text-sm font-semibold", children: e }),
+                u.map((d) => H(d, a.indexOf(d)))
+              ] }, e))
+            ] })
+          }
+        ) }) })
+      ] }),
+      r === "error" && c && /* @__PURE__ */ n(
+        "p",
+        {
+          id: M,
+          className: "text-danger mt-1.5 text-sm",
+          "data-testid": "select-error-message",
+          "aria-live": "polite",
+          "aria-atomic": "true",
+          children: c
+        }
+      )
+    ] });
+  }
+);
+ce.displayName = "SelectBase";
+export {
+  ce as SelectBase
+};

package/dist/Select.d.ts

@@ -0,0 +1,50 @@
+import { SelectBase, SelectBaseProps, SelectOption } from './SelectBase';
+import { ReactNode } from 'react';
+export type SelectState = 'default' | 'error' | 'disabled' | 'loading';
+export type SelectItem = {
+    label: string;
+    value: string;
+    disabled?: boolean;
+};
+export interface SelectProps extends Omit<SelectBaseProps, 'options' | 'onChange'> {
+    contentClassName?: string;
+    defaultValue?: string;
+    itemClassName?: string;
+    items: SelectItem[];
+    onValueChange?: (value: string) => void;
+    placeholder: string;
+    triggerClassName?: string;
+    value?: string;
+    disabled?: boolean;
+    name?: string;
+    id?: string;
+    state?: SelectState;
+    emptyMessage?: ReactNode;
+    errorMessage?: string;
+    label?: string;
+    'aria-label'?: string;
+    'aria-describedby'?: string;
+}
+declare const Select: import('react').ForwardRefExoticComponent<SelectProps & import('react').RefAttributes<HTMLButtonElement>> & {
+    Root: ({ children, ...props }: {
+        children: ReactNode;
+    } & any) => import("react/jsx-runtime").JSX.Element;
+    Group: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    Value: ({ placeholder, children }: {
+        placeholder?: string;
+        children?: ReactNode;
+    }) => import("react/jsx-runtime").JSX.Element;
+    Trigger: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
+    Content: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    Label: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    Item: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        disabled?: boolean;
+    } & import('react').RefAttributes<HTMLDivElement>>;
+    Separator: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    EmptyMessage: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    LoadingMessage: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        message?: string;
+    } & import('react').RefAttributes<HTMLDivElement>>;
+};
+export { Select, SelectBase, type SelectBaseProps, type SelectOption };
+//# sourceMappingURL=Select.d.ts.map

package/dist/Select.js

@@ -0,0 +1,136 @@
+"use client";
+import "./styles/main.css";
+import { jsx as s, jsxs as m } from "react/jsx-runtime";
+import { SelectBase as E } from "./Select/SelectBase.js";
+import { c as i } from "./twUtils-CRiPKpXj.js";
+import { forwardRef as o, useId as $ } from "react";
+import { a as k } from "./chevron-down-UbkgS76q.js";
+import { L as O } from "./loader-circle-CvdzOiQ_.js";
+const q = ({ children: e, ...t }) => /* @__PURE__ */ s("div", { ...t, children: e }), p = o(({ className: e, ...t }, a) => /* @__PURE__ */ s("div", { ref: a, className: i("text-text-secondary px-2 py-1.5 text-sm font-semibold", e), ...t }));
+p.displayName = "SelectGroup";
+const z = ({ placeholder: e, children: t }) => /* @__PURE__ */ s("span", { children: t || e }), b = o(
+  ({ className: e, children: t, ...a }, l) => /* @__PURE__ */ s("button", { ref: l, className: e, ...a, children: t })
+);
+b.displayName = "SelectTrigger";
+const u = o(
+  ({ className: e, children: t, ...a }, l) => /* @__PURE__ */ s("div", { ref: l, className: e, ...a, children: t })
+);
+u.displayName = "SelectContent";
+const g = o(({ className: e, ...t }, a) => /* @__PURE__ */ s("div", { ref: a, className: i("text-input-text-secondary px-2 py-1.5 text-sm font-semibold", e), ...t }));
+g.displayName = "SelectLabel";
+const y = o(
+  ({ className: e, children: t, disabled: a, ...l }, r) => /* @__PURE__ */ m(
+    "div",
+    {
+      ref: r,
+      className: i(
+        "relative flex w-full cursor-default items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none select-none",
+        "hover:bg-input-bg--hover focus:bg-input-bg--hover hover:cursor-pointer",
+        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        e
+      ),
+      "data-disabled": a,
+      ...l,
+      children: [
+        /* @__PURE__ */ s("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ s(k, { className: "text-input-text h-4 w-4" }) }),
+        /* @__PURE__ */ s("span", { children: t })
+      ]
+    }
+  )
+);
+y.displayName = "SelectItem";
+const x = o(({ className: e, ...t }, a) => /* @__PURE__ */ s("div", { ref: a, className: i("bg-input-border -mx-1 my-1 h-px", e), ...t }));
+x.displayName = "SelectSeparator";
+const S = o(
+  ({ className: e, children: t, ...a }, l) => /* @__PURE__ */ s(
+    "div",
+    {
+      ref: l,
+      className: i("text-input-text-secondary py-6 text-center text-sm", e),
+      role: "status",
+      ...a,
+      children: t
+    }
+  )
+);
+S.displayName = "SelectEmptyMessage";
+const f = o(
+  ({ className: e, message: t = "Loading...", children: a, ...l }, r) => /* @__PURE__ */ m(
+    "div",
+    {
+      ref: r,
+      className: i("text-input-text-secondary flex items-center justify-center gap-2 py-6 text-sm", e),
+      role: "status",
+      "aria-live": "polite",
+      ...l,
+      children: [
+        /* @__PURE__ */ s(O, { className: "h-4 w-4 animate-spin" }),
+        a || t
+      ]
+    }
+  )
+);
+f.displayName = "SelectLoadingMessage";
+const N = o((e, t) => {
+  const {
+    defaultValue: a,
+    items: l = [],
+    onValueChange: r,
+    placeholder: v,
+    triggerClassName: h,
+    value: C,
+    disabled: L,
+    name: c,
+    id: I,
+    state: d = "default",
+    emptyMessage: M = "No items found",
+    errorMessage: j,
+    label: w,
+    "aria-label": V,
+    "aria-describedby": D,
+    ...G
+  } = e, R = $(), T = I || `${c}-${R}`, B = l.map((n) => ({
+    label: n.label,
+    value: n.value,
+    disabled: n.disabled
+  }));
+  return /* @__PURE__ */ s(
+    E,
+    {
+      ref: t,
+      id: T,
+      name: c,
+      value: C,
+      defaultValue: a,
+      onChange: r,
+      options: B,
+      placeholder: v,
+      state: d,
+      errorMessage: j,
+      emptyMessage: M,
+      label: w,
+      disabled: L || d === "disabled",
+      "aria-label": V,
+      "aria-describedby": D,
+      className: h,
+      ...G
+    }
+  );
+});
+N.displayName = "Select";
+const U = Object.assign(N, {
+  Root: q,
+  Group: p,
+  Value: z,
+  Trigger: b,
+  Content: u,
+  Label: g,
+  Item: y,
+  Separator: x,
+  EmptyMessage: S,
+  LoadingMessage: f
+});
+export {
+  U as Select,
+  E as SelectBase
+};

package/dist/Skeleton.d.ts

@@ -1,4 +1,4 @@
-import { ComponentProps } from '../../../node_modules/react';
+import { ComponentProps } from 'react';
 declare function Skeleton({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 export { Skeleton };
 //# sourceMappingURL=Skeleton.d.ts.map