@skiddph/prui 0.1.0

package/dist/core/modal.d.ts

@@ -0,0 +1,56 @@
+import { PropsMeta } from './props-meta';
+import * as React from "react";
+/**
+ * Modal, ported from icanhelp-tracker's production modal (the invented one):
+ * size scale xs/sm/md/lg/xl, open/close animations, shake-on-blocked-close,
+ * overlay blur, body scroll lock, noPadding/padding control, closeOnOverlayClick
+ * false = shake feedback, and an imperative confirmModal() that renders a
+ * typed confirmation dialog imperatively and resolves a Promise<boolean>.
+ * Restyled onto PRUI tokens instead of hardcoded hex.
+ */
+export type ModalSize = "xs" | "sm" | "md" | "lg" | "xl";
+export interface ModalProps {
+    open: boolean;
+    onClose: () => void;
+    children?: React.ReactNode;
+    /** Block overlay/esc close (still shows the X unless hideClose). */
+    disableDefaultClose?: boolean;
+    /** When false, an overlay click shakes instead of closing. Default true. */
+    closeOnOverlayClick?: boolean;
+    size?: ModalSize;
+    xs?: boolean;
+    sm?: boolean;
+    md?: boolean;
+    lg?: boolean;
+    xl?: boolean;
+    /** Custom max-width CSS value. */
+    maxWidth?: string;
+    /** Custom padding, e.g. "24px 32px". */
+    padding?: string;
+    noPadding?: boolean;
+    showCloseButton?: boolean;
+    /** Accessible label. */
+    ariaLabel?: string;
+    className?: string;
+}
+export declare function Modal({ open, onClose, children, disableDefaultClose, closeOnOverlayClick, size, xs, sm, md, lg, xl, maxWidth, padding, noPadding, showCloseButton, ariaLabel, className, }: ModalProps): React.JSX.Element | null;
+export declare namespace Modal {
+    var displayName: string;
+}
+export type ConfirmModalType = "success" | "warning" | "danger" | "error" | "info";
+export interface ConfirmModalOptions {
+    title: string;
+    message: string;
+    confirmText?: string;
+    cancelText?: string;
+    type?: ConfirmModalType;
+    size?: ModalSize;
+}
+/**
+ * confirmModal({ title, message, type }) => Promise<boolean>
+ * Renders the confirmation modal imperatively; resolves true on confirm,
+ * false on cancel/Escape/overlay-shake close. Focus-trapped like the original.
+ */
+export declare function confirmModal(options: ConfirmModalOptions): Promise<boolean>;
+export declare const modalPropsMeta: PropsMeta;
+export declare const confirmModalPropsMeta: PropsMeta;

package/dist/core/modal.js

@@ -0,0 +1,303 @@
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
+import * as r from "react";
+import { createRoot as I } from "react-dom/client";
+import { X as K } from "lucide-react";
+import { cn as Y } from "./cn.js";
+const P = {
+  xs: { width: "320px", minWidth: "280px" },
+  sm: { width: "448px", minWidth: "320px" },
+  md: { width: "640px", minWidth: "384px" },
+  lg: { width: "896px", minWidth: "512px" },
+  xl: { width: "1152px", minWidth: "640px" }
+}, D = {
+  xs: "24px 32px",
+  sm: "24px 32px",
+  md: "32px 40px",
+  lg: "32px 40px",
+  xl: "40px 48px"
+};
+function O({
+  open: n,
+  onClose: o,
+  children: W,
+  disableDefaultClose: u = !1,
+  closeOnOverlayClick: L = !0,
+  size: y,
+  xs: T,
+  sm: S,
+  md: z,
+  lg: f,
+  xl: v,
+  maxWidth: E,
+  padding: N,
+  noPadding: h = !1,
+  showCloseButton: M = !0,
+  ariaLabel: x,
+  className: k
+}) {
+  const l = y ?? (T ? "xs" : S ? "sm" : f ? "lg" : v ? "xl" : "md"), [R, g] = r.useState(n), [c, m] = r.useState(!1), [w, i] = r.useState(!1), C = r.useRef(null);
+  if (r.useEffect(() => {
+    if (n) {
+      g(!0);
+      const t = setTimeout(() => {
+        m(!0), document.body.classList.add("modal-open");
+      }, 10);
+      return () => clearTimeout(t);
+    }
+    m(!1), document.body.classList.remove("modal-open");
+  }, [n]), r.useEffect(() => () => document.body.classList.remove("modal-open"), []), r.useEffect(() => {
+    if (!n) return;
+    const t = (p) => {
+      p.key === "Escape" && (u ? (i(!0), setTimeout(() => i(!1), 500)) : o());
+    };
+    return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
+  }, [n, u, o]), !R && !c) return null;
+  const a = (t) => {
+    if (t.target === t.currentTarget) {
+      if (u || !L) {
+        i(!0), setTimeout(() => i(!1), 500);
+        return;
+      }
+      o();
+    }
+  }, s = P[l], b = h ? "0" : N ?? D[l];
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: "prui-modal-overlay fixed inset-0 z-[10000] flex justify-center overflow-y-auto p-4",
+      style: {
+        alignItems: "flex-start",
+        paddingTop: "10vh",
+        backgroundColor: "rgba(0, 0, 0, 0.55)",
+        backdropFilter: "blur(4px)",
+        opacity: c ? 1 : 0,
+        transition: "opacity 0.3s cubic-bezier(0.25, 0.1, 0.25, 1)"
+      },
+      onClick: a,
+      onMouseDown: (t) => {
+        t.target === t.currentTarget && a(t);
+      },
+      children: /* @__PURE__ */ d(
+        "div",
+        {
+          ref: C,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": x,
+          className: Y(
+            "prui-modal-content relative h-fit m-auto w-full",
+            w && "prui-modal-shake",
+            k
+          ),
+          style: {
+            width: s.width,
+            minWidth: s.minWidth,
+            maxWidth: E ?? s.width,
+            padding: b,
+            backgroundColor: "var(--prui-surface)",
+            border: "1px solid var(--prui-line)",
+            borderRadius: "var(--prui-radius-3)",
+            boxShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2)",
+            color: "var(--prui-fg)",
+            transform: c ? "scale(1) translateY(0)" : "scale(0.95) translateY(8px)",
+            opacity: c ? 1 : 0,
+            transition: "transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.3s cubic-bezier(0.25, 0.1, 0.25, 1)"
+          },
+          onTransitionEnd: () => {
+            n || g(!1);
+          },
+          children: [
+            M && !u ? /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                onClick: o,
+                "aria-label": "Close modal",
+                className: "absolute right-4 top-4 flex h-10 w-10 cursor-pointer items-center justify-center rounded-[var(--prui-radius)] text-[var(--prui-dim)] transition-all hover:bg-[var(--prui-raise)] hover:text-[var(--prui-fg)]",
+                children: /* @__PURE__ */ e(K, { className: "h-4 w-4", "aria-hidden": !0 })
+              }
+            ) : null,
+            W
+          ]
+        }
+      )
+    }
+  );
+}
+O.displayName = "Modal";
+const B = {
+  success: "var(--prui-ok)",
+  warning: "var(--prui-warn)",
+  danger: "var(--prui-danger)",
+  error: "var(--prui-danger)",
+  info: "var(--prui-brand)",
+  default: "var(--prui-brand)"
+}, A = ({ type: n }) => {
+  const o = B[n ?? "default"];
+  switch (n) {
+    case "success":
+      return /* @__PURE__ */ d("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", style: { color: o }, children: [
+        /* @__PURE__ */ e("path", { d: "M9 12l2 2 4-4", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+        /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "9", stroke: "currentColor", strokeWidth: "2" })
+      ] });
+    case "warning":
+      return /* @__PURE__ */ e("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", style: { color: o }, children: /* @__PURE__ */ e("path", { d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.694-.833-2.464 0L4.34 16.5c-.77.833.192 2.5 1.732 2.5z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
+    case "danger":
+    case "error":
+      return /* @__PURE__ */ d("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", style: { color: o }, children: [
+        /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "9", stroke: "currentColor", strokeWidth: "2" }),
+        /* @__PURE__ */ e("path", { d: "M15 9l-6 6m0-6l6 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+      ] });
+    case "info":
+      return /* @__PURE__ */ d("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", style: { color: o }, children: [
+        /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "9", stroke: "currentColor", strokeWidth: "2" }),
+        /* @__PURE__ */ e("path", { d: "M12 8v4m0 4h.01", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+      ] });
+    default:
+      return null;
+  }
+};
+function G(n) {
+  const { title: o, message: W, confirmText: u = "Confirm", cancelText: L = "Cancel", type: y, size: T = "sm" } = n, S = B[y ?? "default"];
+  return new Promise((z) => {
+    const f = document.createElement("div");
+    document.body.appendChild(f);
+    const v = I(f), E = () => {
+      setTimeout(() => {
+        v.unmount(), f.remove();
+      }, 320);
+    }, N = () => {
+      const [h, M] = r.useState(!1), [x, k] = r.useState(!1), [l, R] = r.useState(!1), g = r.useRef(null), c = r.useRef(null);
+      r.useEffect(() => {
+        const i = setTimeout(() => {
+          M(!0), k(!0), document.body.classList.add("modal-open");
+        }, 10);
+        return () => clearTimeout(i);
+      }, []), r.useEffect(() => {
+        var C;
+        if (!h || l) return;
+        (C = c.current) == null || C.focus();
+        const i = (a) => {
+          if (l) return;
+          if (a.key === "Escape") {
+            a.preventDefault(), m(!1);
+            return;
+          }
+          if (a.key !== "Tab") return;
+          const s = [g.current, c.current].filter((j) => !!j);
+          if (!s.length) return;
+          const b = s[0], t = s[s.length - 1], p = document.activeElement;
+          !p || !s.some((j) => j === p) ? (a.preventDefault(), b.focus()) : a.shiftKey && p === b ? (a.preventDefault(), t.focus()) : !a.shiftKey && p === t && (a.preventDefault(), b.focus());
+        };
+        return document.addEventListener("keydown", i), () => document.removeEventListener("keydown", i);
+      }, [h, l]);
+      const m = (i) => {
+        R(!0), k(!1), document.body.classList.remove("modal-open"), setTimeout(() => {
+          E(), z(i);
+        }, 300);
+      };
+      if (!h) return null;
+      const w = P[T];
+      return /* @__PURE__ */ e(
+        "div",
+        {
+          className: "prui-modal-overlay fixed inset-0 z-[10001] flex justify-center overflow-y-auto p-4",
+          style: {
+            alignItems: "flex-start",
+            paddingTop: "12vh",
+            backgroundColor: "rgba(0, 0, 0, 0.55)",
+            backdropFilter: "blur(4px)",
+            opacity: x ? 1 : 0,
+            transition: "opacity 0.3s cubic-bezier(0.25, 0.1, 0.25, 1)"
+          },
+          children: /* @__PURE__ */ d(
+            "div",
+            {
+              role: "alertdialog",
+              "aria-modal": "true",
+              "aria-label": o,
+              className: "prui-modal-content relative m-auto w-full",
+              style: {
+                width: w.width,
+                minWidth: w.minWidth,
+                backgroundColor: "var(--prui-surface)",
+                border: "1px solid var(--prui-line)",
+                borderRadius: "var(--prui-radius-3)",
+                boxShadow: "0 20px 25px -5px rgba(0,0,0,0.4), 0 10px 10px -5px rgba(0,0,0,0.2)",
+                color: "var(--prui-fg)",
+                transform: x ? "scale(1) translateY(0)" : "scale(0.95) translateY(8px)",
+                opacity: x ? 1 : 0,
+                transition: "transform 0.3s cubic-bezier(0.25,0.1,0.25,1), opacity 0.3s cubic-bezier(0.25,0.1,0.25,1)"
+              },
+              children: [
+                /* @__PURE__ */ d("div", { className: "flex items-start gap-3 p-4 pb-2", children: [
+                  /* @__PURE__ */ e(A, { type: y }),
+                  /* @__PURE__ */ d("div", { className: "min-w-0", children: [
+                    /* @__PURE__ */ e("h2", { className: "m-0 text-lg font-semibold leading-normal", style: { color: "var(--prui-fg)" }, children: o }),
+                    /* @__PURE__ */ e("p", { className: "mt-2 text-sm leading-normal", style: { color: "var(--prui-dim)" }, children: W })
+                  ] })
+                ] }),
+                /* @__PURE__ */ d("div", { className: "flex items-center justify-end gap-3 px-4 pb-4", children: [
+                  /* @__PURE__ */ e(
+                    "button",
+                    {
+                      type: "button",
+                      ref: g,
+                      disabled: l,
+                      onClick: () => m(!1),
+                      className: "cursor-pointer rounded-[var(--prui-radius)] border px-4 py-2 text-sm font-medium transition-all disabled:opacity-60",
+                      style: { background: "transparent", borderColor: "var(--prui-line)", color: "var(--prui-fg)" },
+                      children: L
+                    }
+                  ),
+                  /* @__PURE__ */ e(
+                    "button",
+                    {
+                      type: "button",
+                      ref: c,
+                      disabled: l,
+                      onClick: () => m(!0),
+                      className: "cursor-pointer rounded-[var(--prui-radius)] border border-transparent px-4 py-2 text-sm font-medium text-white transition-all disabled:opacity-60",
+                      style: { backgroundColor: S },
+                      children: u
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
+        }
+      );
+    };
+    v.render(/* @__PURE__ */ e(N, {}));
+  });
+}
+const H = {
+  name: "Modal",
+  props: [
+    { name: "open", type: "boolean", default: null, control: "boolean" },
+    { name: "onClose", type: "() => void", default: null, control: "none" },
+    { name: "size", type: "'xs' | 'sm' | 'md' | 'lg' | 'xl'", default: "'md'", control: "select", options: ["xs", "sm", "md", "lg", "xl"] },
+    { name: "closeOnOverlayClick", type: "boolean", default: "true", control: "boolean" },
+    { name: "disableDefaultClose", type: "boolean", default: "false", control: "boolean" },
+    { name: "noPadding", type: "boolean", default: "false", control: "boolean" },
+    { name: "showCloseButton", type: "boolean", default: "true", control: "boolean" },
+    { name: "padding", type: "string (CSS)", default: "per-size", control: "text" },
+    { name: "maxWidth", type: "string (CSS)", default: "per-size", control: "text" }
+  ]
+}, J = {
+  name: "confirmModal",
+  props: [
+    { name: "title", type: "string", default: null, control: "text" },
+    { name: "message", type: "string", default: null, control: "textarea" },
+    { name: "confirmText", type: "string", default: "'Confirm'", control: "text" },
+    { name: "cancelText", type: "string", default: "'Cancel'", control: "text" },
+    { name: "type", type: "'success' | 'warning' | 'danger' | 'error' | 'info'", default: "undefined", control: "select", options: ["success", "warning", "danger", "error", "info"] }
+  ]
+};
+export {
+  O as Modal,
+  G as confirmModal,
+  J as confirmModalPropsMeta,
+  H as modalPropsMeta
+};

package/dist/core/props-meta.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Prop metadata system.
+ * Every PRUI component exports a propsMeta declaration describing its props,
+ * types, defaults, and control hints. This is the single source that drives
+ * docs tables, playground controls, and generated snippets later.
+ */
+export type PropControl = "text" | "textarea" | "number" | "boolean" | "select" | "multiselect" | "color" | "date" | "daterange" | "icon" | "object" | "none";
+export interface PropMeta {
+    /** Prop name as written in JSX. */
+    name: string;
+    /** Human-readable type label, e.g. "'primary' | 'default'". */
+    type: string;
+    /** Default value rendered into snippets; null when required. */
+    default: string | number | boolean | null;
+    /** Control hint for the playground. "none" hides the control. */
+    control: PropControl;
+    /** Options for select/multiselect controls. */
+    options?: readonly string[];
+    /** Short description for docs tables. */
+    description?: string;
+}
+export interface PropsMeta {
+    /** Component name, e.g. "Button". */
+    name: string;
+    props: readonly PropMeta[];
+}

package/dist/core/props-meta.js

@@ -0,0 +1 @@
+

package/dist/core/scroll-area.d.ts

@@ -0,0 +1,8 @@
+import { PropsMeta } from './props-meta';
+import * as React from "react";
+export interface ScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Max height in px before scrolling. */
+    maxHeight?: number | string;
+}
+export declare const ScrollArea: React.ForwardRefExoticComponent<ScrollAreaProps & React.RefAttributes<HTMLDivElement>>;
+export declare const scrollAreaPropsMeta: PropsMeta;

package/dist/core/scroll-area.js

@@ -0,0 +1,27 @@
+import { jsx as t } from "react/jsx-runtime";
+import * as n from "react";
+import { cn as c } from "./cn.js";
+const m = n.forwardRef(
+  ({ className: r, maxHeight: e, children: o, ...a }, l) => /* @__PURE__ */ t(
+    "div",
+    {
+      ref: l,
+      className: c("prui-scroll-area relative overflow-y-auto", r),
+      style: e !== void 0 ? { maxHeight: e } : void 0,
+      ...a,
+      children: o
+    }
+  )
+);
+m.displayName = "ScrollArea";
+const d = {
+  name: "ScrollArea",
+  props: [
+    { name: "maxHeight", type: "number | string", default: "undefined", control: "number" },
+    { name: "children", type: "ReactNode", default: null, control: "text" }
+  ]
+};
+export {
+  m as ScrollArea,
+  d as scrollAreaPropsMeta
+};

package/dist/core/select.d.ts

@@ -0,0 +1,38 @@
+import { PropsMeta } from './props-meta';
+import * as React from "react";
+export interface SelectOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+export interface SelectProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "value"> {
+    options?: SelectOption[];
+    value?: string;
+    defaultValue?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    name?: string;
+    onChange?: (value: string) => void;
+    onOpenChange?: (open: boolean) => void;
+}
+export declare const Select: {
+    ({ options, value: valueProp, defaultValue, placeholder, disabled, name, onChange, onOpenChange, children, }: SelectProps): React.JSX.Element;
+    displayName: string;
+};
+export type SelectTriggerProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
+export declare const SelectTrigger: React.ForwardRefExoticComponent<SelectTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export interface SelectValueProps extends React.HTMLAttributes<HTMLSpanElement> {
+    placeholder?: string;
+}
+export declare const SelectValue: React.ForwardRefExoticComponent<SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
+export type SelectContentProps = React.HTMLAttributes<HTMLDivElement>;
+export declare const SelectContent: React.ForwardRefExoticComponent<SelectContentProps & React.RefAttributes<HTMLDivElement>>;
+export type SelectItemProps = React.HTMLAttributes<HTMLDivElement> & {
+    value: string;
+    disabled?: boolean;
+};
+export declare const SelectItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    value: string;
+    disabled?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const selectPropsMeta: PropsMeta;

package/dist/core/select.js

@@ -0,0 +1,157 @@
+import { jsxs as b, jsx as s, Fragment as O } from "react/jsx-runtime";
+import * as o from "react";
+import { ChevronDown as E, Check as P } from "lucide-react";
+import { cn as m } from "./cn.js";
+const S = o.createContext(null);
+function g() {
+  const r = o.useContext(S);
+  if (!r) throw new Error("Select parts must be used inside <Select>");
+  return r;
+}
+const z = ({
+  options: r,
+  value: a,
+  defaultValue: t,
+  placeholder: i = "Select...",
+  disabled: e,
+  name: d,
+  onChange: c,
+  onOpenChange: l,
+  children: f
+}) => {
+  const [p, u] = o.useState(t ?? ""), [v, I] = o.useState(!1), [R, T] = o.useState(), x = a !== void 0 ? a : p, V = (n) => {
+    a === void 0 && u(n), c == null || c(n);
+  }, j = (n) => {
+    I(n), l == null || l(n);
+  };
+  return /* @__PURE__ */ b(
+    S.Provider,
+    {
+      value: { value: x, open: v, triggerId: R, setValue: V, setOpen: j, registerTrigger: T },
+      children: [
+        d ? /* @__PURE__ */ s("input", { type: "hidden", name: d, value: x }) : null,
+        f ?? /* @__PURE__ */ b(O, { children: [
+          /* @__PURE__ */ s(h, { disabled: e, children: /* @__PURE__ */ s(y, { placeholder: i }) }),
+          /* @__PURE__ */ s(w, { children: (r ?? []).map((n) => /* @__PURE__ */ s(N, { value: n.value, disabled: n.disabled, children: n.label }, n.value)) })
+        ] })
+      ]
+    }
+  );
+};
+z.displayName = "Select";
+const h = o.forwardRef(
+  ({ className: r, children: a, onClick: t, disabled: i, id: e, ...d }, c) => {
+    const { open: l, setOpen: f, registerTrigger: p } = g();
+    return o.useEffect(() => {
+      e && p(e);
+    }, [e, p]), /* @__PURE__ */ b(
+      "button",
+      {
+        ref: c,
+        id: e,
+        type: "button",
+        role: "combobox",
+        "aria-expanded": l,
+        "aria-haspopup": "listbox",
+        disabled: i,
+        "data-state": l ? "open" : "closed",
+        className: m(
+          "prui-select-trigger flex h-9 w-full items-center justify-between gap-2 border border-[var(--prui-line)]",
+          "bg-[var(--prui-background)] rounded-[var(--prui-radius)] px-3 text-sm text-[var(--prui-fg)]",
+          "outline-none transition-colors focus:border-[var(--prui-brand)] focus:ring-2 focus:ring-[var(--prui-brand)]/30",
+          "disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer",
+          r
+        ),
+        onClick: (u) => {
+          t == null || t(u), u.defaultPrevented || f(!l);
+        },
+        ...d,
+        children: [
+          a,
+          /* @__PURE__ */ s(E, { className: m("h-4 w-4 shrink-0 text-[var(--prui-dim)] transition-transform", l && "rotate-180"), "aria-hidden": !0 })
+        ]
+      }
+    );
+  }
+);
+h.displayName = "SelectTrigger";
+const y = o.forwardRef(
+  ({ className: r, placeholder: a, children: t, ...i }, e) => {
+    const { value: d } = g();
+    return /* @__PURE__ */ s("span", { ref: e, className: m("truncate", r), ...i, children: t ?? (d || /* @__PURE__ */ s("span", { className: "text-[var(--prui-dim)]", children: a })) });
+  }
+);
+y.displayName = "SelectValue";
+const w = o.forwardRef(
+  ({ className: r, children: a, ...t }, i) => {
+    const { open: e, setOpen: d, triggerId: c } = g();
+    return e ? /* @__PURE__ */ s(
+      "div",
+      {
+        ref: i,
+        role: "listbox",
+        "aria-labelledby": c,
+        tabIndex: -1,
+        "data-state": e ? "open" : "closed",
+        className: m(
+          "prui-select-content absolute z-50 mt-1 min-w-40 max-h-60 overflow-auto p-1",
+          "bg-[var(--prui-surface)] border border-[var(--prui-line)] rounded-[var(--prui-radius)] shadow-lg",
+          r
+        ),
+        ...t,
+        children: a
+      }
+    ) : null;
+  }
+);
+w.displayName = "SelectContent";
+const N = o.forwardRef(
+  ({ className: r, value: a, disabled: t, children: i, onClick: e, ...d }, c) => {
+    const { value: l, setValue: f, setOpen: p } = g(), u = l === a;
+    return /* @__PURE__ */ b(
+      "div",
+      {
+        ref: c,
+        role: "option",
+        "aria-selected": u,
+        "aria-disabled": t,
+        "data-selected": u || void 0,
+        className: m(
+          "prui-select-item relative flex cursor-pointer items-center gap-2 rounded-[calc(var(--prui-radius)-1px)]",
+          "py-1.5 pl-3 pr-8 text-sm text-[var(--prui-fg)] hover:bg-[var(--prui-raise)]",
+          u && "font-medium",
+          t && "opacity-50 pointer-events-none",
+          r
+        ),
+        onClick: (v) => {
+          e == null || e(v), !(v.defaultPrevented || t) && (f(a), p(!1));
+        },
+        ...d,
+        children: [
+          i,
+          u ? /* @__PURE__ */ s(P, { className: "absolute right-2 h-4 w-4 text-[var(--prui-brand)]", "aria-hidden": !0 }) : null
+        ]
+      }
+    );
+  }
+);
+N.displayName = "SelectItem";
+const U = {
+  name: "Select",
+  props: [
+    { name: "options", type: "SelectOption[]", default: "[]", control: "object" },
+    { name: "value", type: "string", default: "undefined", control: "text" },
+    { name: "defaultValue", type: "string", default: "undefined", control: "text" },
+    { name: "placeholder", type: "string", default: "'Select...'", control: "text" },
+    { name: "disabled", type: "boolean", default: "false", control: "boolean" },
+    { name: "onChange", type: "(value: string) => void", default: null, control: "none" }
+  ]
+};
+export {
+  z as Select,
+  w as SelectContent,
+  N as SelectItem,
+  h as SelectTrigger,
+  y as SelectValue,
+  U as selectPropsMeta
+};

package/dist/core/switch.d.ts

@@ -0,0 +1,10 @@
+import { PropsMeta } from './props-meta';
+import * as React from "react";
+export interface SwitchProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    disabled?: boolean;
+    onChange?: (checked: boolean) => void;
+}
+export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const switchPropsMeta: PropsMeta;