@skiddph/prui 0.9.1 → 0.10.0

package/dist/core/input.d.ts

@@ -12,6 +12,10 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     size?: InputSize;
     /** Visual variant: outlined (default) or filled. */
     variant?: "default" | "filled";
+    /** Icon rendered inside the field's leading edge. */
+    icon?: React.ReactNode;
+    /** Icon rendered inside the field's trailing edge. */
+    trailingIcon?: React.ReactNode;
 }
 export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 export declare const inputPropsMeta: PropsMeta;

package/dist/core/input.js

@@ -1,46 +1,59 @@
-import { jsx as o } from "react/jsx-runtime";
-import * as l from "react";
-import { resolveSurface as v, withSurface as h } from "./surface.js";
-import { cn as s } from "./cn.js";
-const u = "prui-f-control prui-input w-full bg-[var(--prui-s-bg,var(--prui-background))] text-[var(--prui-s-fg,var(--prui-fg))] placeholder:text-[var(--prui-dim)] border border-[var(--prui-line)] rounded-[var(--prui-s-radius,var(--prui-radius))] text-sm 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", w = {
+import { jsx as a, jsxs as N } from "react/jsx-runtime";
+import * as d from "react";
+import { resolveSurface as R, withSurface as j } from "./surface.js";
+import { cn as u } from "./cn.js";
+const p = "prui-f-control prui-input w-full bg-[var(--prui-s-bg,var(--prui-background))] text-[var(--prui-s-fg,var(--prui-fg))] placeholder:text-[var(--prui-dim)] border border-[var(--prui-line)] rounded-[var(--prui-s-radius,var(--prui-radius))] text-sm 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", z = {
   sm: "h-8 px-2.5",
   md: "h-9 px-3",
   lg: "h-11 px-4 text-base"
-}, N = l.forwardRef(
-  ({ className: e, style: t, type: r = "text", size: a = "md", variant: i = "default", bg: p, fg: d, radius: c, texture: m, textureColor: f, elevation: x, ...b }, g) => {
-    const y = v({ bg: p, fg: d, radius: c, texture: m, textureColor: f, elevation: x }), n = h(
-      s(u, w[a], i === "filled" && "bg-[var(--prui-s-bg,var(--prui-raise))] border-transparent", e),
-      t,
-      y
-    );
-    return /* @__PURE__ */ o("input", { ref: g, type: r, className: n.className, style: n.style, ...b });
+}, C = d.forwardRef(
+  ({ className: r, style: n, type: l = "text", size: o = "md", variant: c = "default", icon: e, trailingIcon: t, bg: m, fg: f, radius: g, texture: x, textureColor: v, elevation: y, ...b }, h) => {
+    const w = R({ bg: m, fg: f, radius: g, texture: x, textureColor: v, elevation: y }), s = j(
+      u(
+        p,
+        z[o],
+        c === "filled" && "bg-[var(--prui-s-bg,var(--prui-raise))] border-transparent",
+        e && "pl-9",
+        t && "pr-9",
+        r
+      ),
+      n,
+      w
+    ), i = /* @__PURE__ */ a("input", { ref: h, type: l, className: s.className, style: s.style, ...b });
+    return !e && !t ? i : /* @__PURE__ */ N("span", { className: "relative inline-flex w-full", children: [
+      e ? /* @__PURE__ */ a("span", { "aria-hidden": !0, className: "pointer-events-none absolute left-3 top-1/2 flex -translate-y-1/2 items-center text-[var(--prui-dim)] [&>svg]:h-4 [&>svg]:w-4", children: e }) : null,
+      i,
+      t ? /* @__PURE__ */ a("span", { "aria-hidden": !0, className: "pointer-events-none absolute right-3 top-1/2 flex -translate-y-1/2 items-center text-[var(--prui-dim)] [&>svg]:h-4 [&>svg]:w-4", children: t }) : null
+    ] });
   }
 );
-N.displayName = "Input";
-const S = {
+C.displayName = "Input";
+const P = {
   name: "Input",
   props: [
     { name: "type", type: "string", default: "'text'", control: "select", options: ["text", "password", "email", "number", "search"] },
     { name: "size", type: "'sm' | 'md' | 'lg'", default: "'md'", control: "select", options: ["sm", "md", "lg"] },
     { name: "variant", type: "'default' | 'filled'", default: "'default'", control: "select", options: ["default", "filled"] },
+    { name: "icon", type: "ReactNode", default: "undefined", control: "none", description: "Icon inside the leading edge (padding adjusts)." },
+    { name: "trailingIcon", type: "ReactNode", default: "undefined", control: "none", description: "Icon inside the trailing edge." },
     { name: "value", type: "string", default: null, control: "text" },
     { name: "placeholder", type: "string", default: "undefined", control: "text" },
     { name: "disabled", type: "boolean", default: "false", control: "boolean" },
     { name: "onChange", type: "(e) => void", default: null, control: "none" }
   ]
-}, z = l.forwardRef(
-  ({ className: e, style: t, ...r }, a) => /* @__PURE__ */ o(
+}, I = d.forwardRef(
+  ({ className: r, style: n, ...l }, o) => /* @__PURE__ */ a(
     "textarea",
     {
-      ref: a,
-      style: t,
-      className: s(u, "h-auto min-h-20 py-2 resize-y", e),
-      ...r
+      ref: o,
+      style: n,
+      className: u(p, "h-auto min-h-20 resize-y px-3 py-2", r),
+      ...l
     }
   )
 );
-z.displayName = "Textarea";
-const T = {
+I.displayName = "Textarea";
+const k = {
   name: "Textarea",
   props: [
     { name: "value", type: "string", default: null, control: "textarea" },
@@ -50,8 +63,8 @@ const T = {
   ]
 };
 export {
-  N as Input,
-  z as Textarea,
-  S as inputPropsMeta,
-  T as textareaPropsMeta
+  C as Input,
+  I as Textarea,
+  P as inputPropsMeta,
+  k as textareaPropsMeta
 };

package/dist/core/select.d.ts

@@ -1,28 +1,44 @@
 import { PropsMeta } from './props-meta';
 import * as React from "react";
 /**
- * Select: a native-feeling single-select listbox. Full keyboard support:
- * Enter/Space/ArrowDown open, ArrowUp/Down/Home/End move, Enter/Space pick,
- * Escape (topmost overlay only) closes and restores focus, Tab closes,
- * printable-character typeahead jumps. Non-modal: no scroll lock.
+ * Select: a native-feeling single/multiple select listbox.
+ *
+ * - searchable: a filter input pins to the top of the listbox; typing
+ *   narrows the options in place (works with the options prop and with
+ *   compound <SelectItem> children alike).
+ * - multiple: multi-select — clicking toggles without closing; value and
+ *   onChange become string[] and the trigger shows the first selected
+ *   label plus a +N count.
+ *
+ * Keyboard: Enter/Space/ArrowDown open, ArrowUp/Down/Home/End move,
+ * Enter/Space pick, Escape (topmost overlay only) closes and restores
+ * focus, Tab closes, printable-character typeahead jumps. Non-modal: no
+ * scroll lock. The listbox portals to the body and anchors under the
+ * trigger, so no ancestor can clip or displace it.
  */
 export interface SelectOption {
     label: string;
     value: string;
     disabled?: boolean;
 }
-export interface SelectProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "value"> {
+export interface SelectProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "value" | "defaultValue" | "multiple"> {
     options?: SelectOption[];
-    value?: string;
-    defaultValue?: string;
+    /** string in single mode, string[] with multiple. */
+    value?: string | string[];
+    defaultValue?: string | string[];
     placeholder?: string;
     disabled?: boolean;
     name?: string;
-    onChange?: (value: string) => void;
+    /** Emits string in single mode, string[] with multiple. */
+    onChange?: (value: string | string[]) => void;
     onOpenChange?: (open: boolean) => void;
+    /** Type-to-filter the options inside the listbox. */
+    searchable?: boolean;
+    /** Multi-select: value/onChange become string[], items toggle. */
+    multiple?: boolean;
 }
 export declare const Select: {
-    ({ options, value: valueProp, defaultValue, placeholder, disabled, name, id, onChange, onOpenChange, children, ...rest }: SelectProps): React.JSX.Element;
+    ({ options, value: valueProp, defaultValue, placeholder, disabled, name, onChange, onOpenChange, searchable, multiple, id, children, ...rest }: SelectProps): React.JSX.Element;
     displayName: string;
 };
 export type SelectTriggerProps = React.ButtonHTMLAttributes<HTMLButtonElement>;