@iamsaroj/smart-ui 0.2.0

package/dist/smart-components/smart-multi-select.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Check, ChevronsUpDown, X } from "lucide-react";
+import { cn } from "@iamsaroj/smart-ui/lib/utils";
+import { Button } from "@iamsaroj/smart-ui/components/button";
+import { Badge } from "@iamsaroj/smart-ui/components/badge";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from "@iamsaroj/smart-ui/components/command";
+import { Popover, PopoverContent, PopoverTrigger, } from "@iamsaroj/smart-ui/components/popover";
+import { Label } from "@iamsaroj/smart-ui/components/label";
+/**
+ * Multi-select with badge chips, search, and checkbox indicators.
+ * Built on Command + Popover.
+ *
+ * ```tsx
+ * <SmartMultiSelect
+ *   label="Skills"
+ *   options={skillOptions}
+ *   value={skills}
+ *   onValueChange={setSkills}
+ * />
+ * ```
+ */
+export const SmartMultiSelect = ({ options, value = [], onValueChange, placeholder = "Select…", searchPlaceholder = "Search…", emptyText = "No options found.", maxSelected, disabled, className, label, description, error, required, optional, fieldClassName, }) => {
+    const id = React.useId();
+    const [open, setOpen] = React.useState(false);
+    const hasHint = error != null || description != null;
+    const hintId = hasHint ? `${id}-hint` : undefined;
+    const toggle = (optValue) => {
+        const isSelected = value.includes(optValue);
+        if (isSelected) {
+            onValueChange?.(value.filter((v) => v !== optValue));
+        }
+        else if (maxSelected != null && value.length >= maxSelected) {
+            return;
+        }
+        else {
+            onValueChange?.([...value, optValue]);
+        }
+    };
+    const remove = (optValue, e) => {
+        e.stopPropagation();
+        onValueChange?.(value.filter((v) => v !== optValue));
+    };
+    const selectedOpts = options.filter((o) => value.includes(o.value));
+    return (_jsxs("div", { "data-slot": "field", className: cn("flex flex-col gap-1.5", fieldClassName), children: [label != null && (_jsxs(Label, { children: [label, required && (_jsx("span", { className: "text-destructive", "aria-hidden": "true", children: "*" })), optional && (_jsxs("span", { className: "font-normal text-muted-foreground", children: [" ", "(optional)"] }))] })), _jsxs(Popover, { open: open, onOpenChange: disabled ? undefined : setOpen, children: [_jsxs(PopoverTrigger, { render: _jsx(Button, { variant: "outline", role: "combobox", "aria-expanded": open, "aria-invalid": error != null ? true : undefined, "aria-describedby": hintId, disabled: disabled, className: cn("h-auto min-h-7 w-full flex-wrap justify-between gap-1 px-2 py-1 font-normal", className) }), children: [_jsx("div", { className: "flex flex-1 flex-wrap gap-1", children: selectedOpts.length === 0 ? (_jsx("span", { className: "text-muted-foreground", children: placeholder })) : (selectedOpts.map((opt) => (_jsxs(Badge, { variant: "secondary", className: "gap-0.5 text-xs", children: [opt.label, _jsx("button", { type: "button", onClick: (e) => remove(opt.value, e), className: "ml-0.5 rounded-full hover:text-foreground focus-visible:outline-none", "aria-label": `Remove ${opt.label}`, children: _jsx(X, { className: "size-2.5" }) })] }, opt.value)))) }), _jsx(ChevronsUpDown, { className: "size-3.5 shrink-0 opacity-50" })] }), _jsx(PopoverContent, { className: "w-72 p-0", side: "bottom", align: "start", children: _jsxs(Command, { children: [_jsx(CommandInput, { placeholder: searchPlaceholder }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: emptyText }), _jsx(CommandGroup, { children: options.map((opt) => {
+                                                const selected = value.includes(opt.value);
+                                                const atMax = !selected &&
+                                                    maxSelected != null &&
+                                                    value.length >= maxSelected;
+                                                return (_jsxs(CommandItem, { value: opt.value, disabled: opt.disabled || atMax, onSelect: () => toggle(opt.value), children: [_jsx("div", { className: cn("mr-2 flex size-3.5 items-center justify-center rounded-sm border", selected
+                                                                ? "border-primary bg-primary text-primary-foreground"
+                                                                : "border-muted-foreground/40"), children: selected && _jsx(Check, { className: "size-2.5" }) }), opt.label] }, opt.value));
+                                            }) })] })] }) })] }), hasHint && (_jsx("p", { id: hintId, className: cn("text-xs", error != null ? "text-destructive" : "text-muted-foreground"), children: error ?? description }))] }));
+};
+//# sourceMappingURL=smart-multi-select.js.map

package/dist/smart-components/smart-multi-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"smart-multi-select.js","sourceRoot":"","sources":["../../src/smart-components/smart-multi-select.tsx"],"names":[],"mappings":"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"}

package/dist/smart-components/smart-native-select.d.ts

@@ -0,0 +1,45 @@
+import * as React from "react";
+export interface SmartNativeSelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface SmartNativeSelectGroup {
+    label: string;
+    options: SmartNativeSelectOption[];
+}
+export interface SmartNativeSelectProps extends Omit<React.ComponentProps<"select">, "children"> {
+    /** Flat list of options. Mutually exclusive with `groups`. */
+    options?: SmartNativeSelectOption[];
+    /** Optgroup-based grouped options. Mutually exclusive with `options`. */
+    groups?: SmartNativeSelectGroup[];
+    /** Disabled placeholder option rendered as the first entry. */
+    placeholder?: string;
+    /** Field label rendered above the select. */
+    label?: React.ReactNode;
+    /** Hint rendered below. Hidden when `error` is set. */
+    description?: React.ReactNode;
+    /** Validation error shown below instead of `description`. */
+    error?: React.ReactNode;
+    fieldRequired?: boolean;
+    optional?: boolean;
+    fieldClassName?: string;
+}
+/**
+ * Styled native `<select>` with field label, description, and error support.
+ * Prefer `SmartSelect` (JS-powered) for rich option layouts; use this when
+ * you need native form submission, mobile-native pickers, or zero JS overhead.
+ *
+ * ```tsx
+ * <SmartNativeSelect
+ *   label="Country"
+ *   placeholder="Choose a country"
+ *   options={[
+ *     { value: "kr", label: "South Korea" },
+ *     { value: "us", label: "United States" },
+ *   ]}
+ * />
+ * ```
+ */
+export declare const SmartNativeSelect: ({ options, groups, placeholder, label, description, error, fieldRequired, optional, fieldClassName, className, id: idProp, required, disabled, ...selectProps }: SmartNativeSelectProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=smart-native-select.d.ts.map

package/dist/smart-components/smart-native-select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"smart-native-select.d.ts","sourceRoot":"","sources":["../../src/smart-components/smart-native-select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,uBAAuB,EAAE,CAAA;CACnC;AAED,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAClD,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAC9B,UAAU,CACX;IACC,8DAA8D;IAC9D,OAAO,CAAC,EAAE,uBAAuB,EAAE,CAAA;IACnC,yEAAyE;IACzE,MAAM,CAAC,EAAE,sBAAsB,EAAE,CAAA;IACjC,+DAA+D;IAC/D,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,uDAAuD;IACvD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,6DAA6D;IAC7D,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,iBAAiB,GAAI,iKAe/B,sBAAsB,4CAmFxB,CAAA"}

package/dist/smart-components/smart-native-select.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@iamsaroj/smart-ui/lib/utils";
+import { Label } from "@iamsaroj/smart-ui/components/label";
+/**
+ * Styled native `<select>` with field label, description, and error support.
+ * Prefer `SmartSelect` (JS-powered) for rich option layouts; use this when
+ * you need native form submission, mobile-native pickers, or zero JS overhead.
+ *
+ * ```tsx
+ * <SmartNativeSelect
+ *   label="Country"
+ *   placeholder="Choose a country"
+ *   options={[
+ *     { value: "kr", label: "South Korea" },
+ *     { value: "us", label: "United States" },
+ *   ]}
+ * />
+ * ```
+ */
+export const SmartNativeSelect = ({ options, groups, placeholder, label, description, error, fieldRequired, optional, fieldClassName, className, id: idProp, required, disabled, ...selectProps }) => {
+    const autoId = React.useId();
+    const id = idProp ?? autoId;
+    const hasHint = error != null || description != null;
+    const hintId = hasHint ? `${id}-hint` : undefined;
+    const isRequired = required ?? fieldRequired;
+    return (_jsxs("div", { "data-slot": "field", className: cn("flex flex-col gap-1.5", fieldClassName), children: [label != null && (_jsxs(Label, { htmlFor: id, children: [label, isRequired && (_jsx("span", { className: "text-destructive", "aria-hidden": "true", children: "*" })), optional && (_jsxs("span", { className: "font-normal text-muted-foreground", children: [" ", "(optional)"] }))] })), _jsxs("select", { id: id, disabled: disabled, required: isRequired, "aria-describedby": hintId, "aria-invalid": error != null ? true : undefined, className: cn("flex h-7 w-full appearance-none rounded-md border border-input bg-input/20 px-2 py-0.5 text-xs/relaxed outline-none", "focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30", "disabled:cursor-not-allowed disabled:opacity-50", "dark:bg-input/30", error != null &&
+                    "border-destructive focus-visible:border-destructive focus-visible:ring-destructive/30", className), ...selectProps, children: [placeholder && (_jsx("option", { value: "", disabled: true, children: placeholder })), groups
+                        ? groups.map((group) => (_jsx("optgroup", { label: group.label, children: group.options.map((opt) => (_jsx("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value))) }, group.label)))
+                        : options?.map((opt) => (_jsx("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value)))] }), hasHint && (_jsx("p", { id: hintId, className: cn("text-xs", error != null ? "text-destructive" : "text-muted-foreground"), children: error ?? description }))] }));
+};
+//# sourceMappingURL=smart-native-select.js.map

package/dist/smart-components/smart-native-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"smart-native-select.js","sourceRoot":"","sources":["../../src/smart-components/smart-native-select.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,EAAE,EAAE,MAAM,8BAA8B,CAAA;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,qCAAqC,CAAA;AAmC3D;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAChC,OAAO,EACP,MAAM,EACN,WAAW,EACX,KAAK,EACL,WAAW,EACX,KAAK,EACL,aAAa,EACb,QAAQ,EACR,cAAc,EACd,SAAS,EACT,EAAE,EAAE,MAAM,EACV,QAAQ,EACR,QAAQ,EACR,GAAG,WAAW,EACS,EAAE,EAAE;IAC3B,MAAM,MAAM,GAAG,KAAK,CAAC,KAAK,EAAE,CAAA;IAC5B,MAAM,EAAE,GAAG,MAAM,IAAI,MAAM,CAAA;IAC3B,MAAM,OAAO,GAAG,KAAK,IAAI,IAAI,IAAI,WAAW,IAAI,IAAI,CAAA;IACpD,MAAM,MAAM,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAA;IACjD,MAAM,UAAU,GAAG,QAAQ,IAAI,aAAa,CAAA;IAE5C,OAAO,CACL,4BACY,OAAO,EACjB,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,cAAc,CAAC,aAErD,KAAK,IAAI,IAAI,IAAI,CAChB,MAAC,KAAK,IAAC,OAAO,EAAE,EAAE,aACf,KAAK,EACL,UAAU,IAAI,CACb,eAAM,SAAS,EAAC,kBAAkB,iBAAa,MAAM,kBAE9C,CACR,EACA,QAAQ,IAAI,CACX,gBAAM,SAAS,EAAC,mCAAmC,aAChD,GAAG,kBAEC,CACR,IACK,CACT,EACD,kBACE,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,UAAU,sBACF,MAAM,kBACV,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EAC9C,SAAS,EAAE,EAAE,CACX,qHAAqH,EACrH,2EAA2E,EAC3E,iDAAiD,EACjD,kBAAkB,EAClB,KAAK,IAAI,IAAI;oBACX,uFAAuF,EACzF,SAAS,CACV,KACG,WAAW,aAEd,WAAW,IAAI,CACd,iBAAQ,KAAK,EAAC,EAAE,EAAC,QAAQ,kBACtB,WAAW,GACL,CACV,EACA,MAAM;wBACL,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACpB,mBAA4B,KAAK,EAAE,KAAK,CAAC,KAAK,YAC3C,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAC1B,iBAEE,KAAK,EAAE,GAAG,CAAC,KAAK,EAChB,QAAQ,EAAE,GAAG,CAAC,QAAQ,YAErB,GAAG,CAAC,KAAK,IAJL,GAAG,CAAC,KAAK,CAKP,CACV,CAAC,IATW,KAAK,CAAC,KAAK,CAUf,CACZ,CAAC;wBACJ,CAAC,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACpB,iBAAwB,KAAK,EAAE,GAAG,CAAC,KAAK,EAAE,QAAQ,EAAE,GAAG,CAAC,QAAQ,YAC7D,GAAG,CAAC,KAAK,IADC,GAAG,CAAC,KAAK,CAEb,CACV,CAAC,IACC,EACR,OAAO,IAAI,CACV,YACE,EAAE,EAAE,MAAM,EACV,SAAS,EAAE,EAAE,CACX,SAAS,EACT,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,uBAAuB,CAC7D,YAEA,KAAK,IAAI,WAAW,GACnB,CACL,IACG,CACP,CAAA;AACH,CAAC,CAAA"}

package/dist/smart-components/smart-nav-sidebar.d.ts

@@ -0,0 +1,47 @@
+import * as React from "react";
+export interface SmartNavSidebarItem {
+    name: string;
+    icon: React.ComponentType<{
+        className?: string;
+    }>;
+}
+export interface SmartNavSidebarProps {
+    items: SmartNavSidebarItem[];
+    /** Name of the currently active item. */
+    activeItem?: string;
+    children?: React.ReactNode;
+}
+/**
+ * Settings-style nav sidebar layout.
+ * Wraps the full SidebarProvider + Sidebar + nav item list, with a slot for
+ * the main content area passed as `children`.
+ *
+ * ```tsx
+ * // Before
+ * <SidebarProvider className="items-start">
+ *   <Sidebar collapsible="none" className="hidden md:flex">
+ *     <SidebarContent>
+ *       <SidebarGroup><SidebarGroupContent>
+ *         <SidebarMenu>
+ *           {items.map(item => (
+ *             <SidebarMenuItem key={item.name}>
+ *               <SidebarMenuButton isActive={item.name === active}>
+ *                 <a href="#"><item.icon /><span>{item.name}</span></a>
+ *               </SidebarMenuButton>
+ *             </SidebarMenuItem>
+ *           ))}
+ *         </SidebarMenu>
+ *       </SidebarGroupContent></SidebarGroup>
+ *     </SidebarContent>
+ *   </Sidebar>
+ *   <main>…</main>
+ * </SidebarProvider>
+ *
+ * // After
+ * <SmartNavSidebar items={items} activeItem="Messages & media">
+ *   <main>…</main>
+ * </SmartNavSidebar>
+ * ```
+ */
+export declare const SmartNavSidebar: ({ items, activeItem, children, }: SmartNavSidebarProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=smart-nav-sidebar.d.ts.map

package/dist/smart-components/smart-nav-sidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"smart-nav-sidebar.d.ts","sourceRoot":"","sources":["../../src/smart-components/smart-nav-sidebar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAY9B,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;CAClD;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,mBAAmB,EAAE,CAAA;IAC5B,yCAAyC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,eAAO,MAAM,eAAe,GAAI,kCAI7B,oBAAoB,4CAsBtB,CAAA"}

package/dist/smart-components/smart-nav-sidebar.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Sidebar, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider, } from "@iamsaroj/smart-ui/components/sidebar";
+/**
+ * Settings-style nav sidebar layout.
+ * Wraps the full SidebarProvider + Sidebar + nav item list, with a slot for
+ * the main content area passed as `children`.
+ *
+ * ```tsx
+ * // Before
+ * <SidebarProvider className="items-start">
+ *   <Sidebar collapsible="none" className="hidden md:flex">
+ *     <SidebarContent>
+ *       <SidebarGroup><SidebarGroupContent>
+ *         <SidebarMenu>
+ *           {items.map(item => (
+ *             <SidebarMenuItem key={item.name}>
+ *               <SidebarMenuButton isActive={item.name === active}>
+ *                 <a href="#"><item.icon /><span>{item.name}</span></a>
+ *               </SidebarMenuButton>
+ *             </SidebarMenuItem>
+ *           ))}
+ *         </SidebarMenu>
+ *       </SidebarGroupContent></SidebarGroup>
+ *     </SidebarContent>
+ *   </Sidebar>
+ *   <main>…</main>
+ * </SidebarProvider>
+ *
+ * // After
+ * <SmartNavSidebar items={items} activeItem="Messages & media">
+ *   <main>…</main>
+ * </SmartNavSidebar>
+ * ```
+ */
+export const SmartNavSidebar = ({ items, activeItem, children, }) => (_jsxs(SidebarProvider, { className: "items-start", children: [_jsx(Sidebar, { collapsible: "none", className: "hidden md:flex", children: _jsx(SidebarContent, { children: _jsx(SidebarGroup, { children: _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: items.map((item) => (_jsx(SidebarMenuItem, { children: _jsxs(SidebarMenuButton, { isActive: item.name === activeItem, children: [_jsx(item.icon, {}), _jsx("span", { children: item.name })] }) }, item.name))) }) }) }) }) }), children] }));
+//# sourceMappingURL=smart-nav-sidebar.js.map

package/dist/smart-components/smart-nav-sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"smart-nav-sidebar.js","sourceRoot":"","sources":["../../src/smart-components/smart-nav-sidebar.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAGZ,OAAO,EACL,OAAO,EACP,cAAc,EACd,YAAY,EACZ,mBAAmB,EACnB,WAAW,EACX,iBAAiB,EACjB,eAAe,EACf,eAAe,GAChB,MAAM,uCAAuC,CAAA;AAc9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAC9B,KAAK,EACL,UAAU,EACV,QAAQ,GACa,EAAE,EAAE,CAAC,CAC1B,MAAC,eAAe,IAAC,SAAS,EAAC,aAAa,aACtC,KAAC,OAAO,IAAC,WAAW,EAAC,MAAM,EAAC,SAAS,EAAC,gBAAgB,YACpD,KAAC,cAAc,cACb,KAAC,YAAY,cACX,KAAC,mBAAmB,cAClB,KAAC,WAAW,cACT,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,KAAC,eAAe,cACd,MAAC,iBAAiB,IAAC,QAAQ,EAAE,IAAI,CAAC,IAAI,KAAK,UAAU,aACnD,KAAC,IAAI,CAAC,IAAI,KAAG,EACb,yBAAO,IAAI,CAAC,IAAI,GAAQ,IACN,IAJA,IAAI,CAAC,IAAI,CAKb,CACnB,CAAC,GACU,GACM,GACT,GACA,GACT,EACT,QAAQ,IACO,CACnB,CAAA"}

package/dist/smart-components/smart-password-input.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+export interface SmartPasswordInputProps extends Omit<React.ComponentProps<"input">, "type"> {
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    error?: React.ReactNode;
+    required?: boolean;
+    optional?: boolean;
+    fieldClassName?: string;
+    /**
+     * By default the value may not *start* with whitespace: Space at the
+     * beginning is ignored (including a held space bar) and pasted leading
+     * spaces are stripped; spaces after the first character work normally.
+     * Set to `true` if leading spaces are legal in your passwords.
+     */
+    allowLeadingSpace?: boolean;
+}
+/**
+ * Password input with a show/hide toggle button.
+ *
+ * ```tsx
+ * <SmartPasswordInput
+ *   label="Password"
+ *   value={password}
+ *   onChange={(e) => setPassword(e.target.value)}
+ *   required
+ *   error={passwordError}
+ * />
+ * ```
+ */
+export declare const SmartPasswordInput: ({ label, description, error, required, optional, fieldClassName, className, id: idProp, disabled, allowLeadingSpace, onKeyDown, onChange, ...inputProps }: SmartPasswordInputProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=smart-password-input.d.ts.map

package/dist/smart-components/smart-password-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"smart-password-input.d.ts","sourceRoot":"","sources":["../../src/smart-components/smart-password-input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAY9B,MAAM,WAAW,uBAAwB,SAAQ,IAAI,CACnD,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAC7B,MAAM,CACP;IACC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;CAC5B;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,kBAAkB,GAAI,2JAchC,uBAAuB,4CAmEzB,CAAA"}

package/dist/smart-components/smart-password-input.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Eye, EyeOff } from "lucide-react";
+import { cn } from "@iamsaroj/smart-ui/lib/utils";
+import { withLeadingSpaceGuard } from "@iamsaroj/smart-ui/lib/leading-space";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, } from "@iamsaroj/smart-ui/components/input-group";
+import { Label } from "@iamsaroj/smart-ui/components/label";
+/**
+ * Password input with a show/hide toggle button.
+ *
+ * ```tsx
+ * <SmartPasswordInput
+ *   label="Password"
+ *   value={password}
+ *   onChange={(e) => setPassword(e.target.value)}
+ *   required
+ *   error={passwordError}
+ * />
+ * ```
+ */
+export const SmartPasswordInput = ({ label, description, error, required, optional, fieldClassName, className, id: idProp, disabled, allowLeadingSpace, onKeyDown, onChange, ...inputProps }) => {
+    const autoId = React.useId();
+    const id = idProp ?? autoId;
+    const [show, setShow] = React.useState(false);
+    const hasHint = error != null || description != null;
+    const hintId = hasHint ? `${id}-hint` : undefined;
+    return (_jsxs("div", { "data-slot": "field", className: cn("flex flex-col gap-1.5", fieldClassName), children: [label != null && (_jsxs(Label, { htmlFor: id, children: [label, required && (_jsx("span", { className: "text-destructive", "aria-hidden": "true", children: "*" })), optional && (_jsxs("span", { className: "font-normal text-muted-foreground", children: [" ", "(optional)"] }))] })), _jsxs(InputGroup, { "data-disabled": disabled ? "true" : undefined, children: [_jsx(InputGroupInput, { id: id, type: show ? "text" : "password", disabled: disabled, "aria-describedby": hintId, "aria-invalid": error != null ? true : undefined, className: className, ...inputProps, ...withLeadingSpaceGuard({ onKeyDown, onChange }, allowLeadingSpace) }), _jsx(InputGroupAddon, { align: "inline-end", children: _jsx(InputGroupButton, { type: "button", onClick: () => setShow((s) => !s), "aria-label": show ? "Hide password" : "Show password", disabled: disabled, children: show ? (_jsx(EyeOff, { className: "size-3.5" })) : (_jsx(Eye, { className: "size-3.5" })) }) })] }), hasHint && (_jsx("p", { id: hintId, className: cn("text-xs", error != null ? "text-destructive" : "text-muted-foreground"), children: error ?? description }))] }));
+};
+//# sourceMappingURL=smart-password-input.js.map

package/dist/smart-components/smart-password-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"smart-password-input.js","sourceRoot":"","sources":["../../src/smart-components/smart-password-input.tsx"],"names":[],"mappings":"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"}

package/dist/smart-components/smart-radio-group.d.ts

@@ -0,0 +1,58 @@
+import * as React from "react";
+export interface SmartRadioOption {
+    value: string;
+    label: React.ReactNode;
+    description?: React.ReactNode;
+    disabled?: boolean;
+}
+export interface SmartRadioGroupProps {
+    /** Radio options rendered in order. */
+    items: SmartRadioOption[];
+    value?: string;
+    onValueChange?: (value: string) => void;
+    defaultValue?: string;
+    name?: string;
+    disabled?: boolean;
+    /** "horizontal" stacks items in a row. @default "vertical" */
+    orientation?: "horizontal" | "vertical";
+    className?: string;
+    /** Field label rendered above the group. */
+    label?: React.ReactNode;
+    /** Hint rendered below the group. Hidden when `error` is set. */
+    description?: React.ReactNode;
+    /** Validation error shown below the group instead of `description`. */
+    error?: React.ReactNode;
+    required?: boolean;
+    fieldClassName?: string;
+}
+/**
+ * Data-driven RadioGroup with per-item labels and optional descriptions.
+ * Auto-wires `id`/`htmlFor` for every item.
+ *
+ * ```tsx
+ * // Before
+ * <RadioGroup value={plan} onValueChange={setPlan}>
+ *   <div className="flex items-center gap-2">
+ *     <RadioGroupItem value="free" id="plan-free" />
+ *     <Label htmlFor="plan-free">Free</Label>
+ *   </div>
+ *   <div className="flex items-center gap-2">
+ *     <RadioGroupItem value="pro" id="plan-pro" />
+ *     <Label htmlFor="plan-pro">Pro</Label>
+ *   </div>
+ * </RadioGroup>
+ *
+ * // After
+ * <SmartRadioGroup
+ *   label="Plan"
+ *   value={plan}
+ *   onValueChange={setPlan}
+ *   items={[
+ *     { value: "free", label: "Free" },
+ *     { value: "pro",  label: "Pro", description: "$12/mo" },
+ *   ]}
+ * />
+ * ```
+ */
+export declare const SmartRadioGroup: ({ items, value, onValueChange, defaultValue, name, disabled, orientation, className, label, description, error, required, fieldClassName, }: SmartRadioGroupProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=smart-radio-group.d.ts.map

package/dist/smart-components/smart-radio-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"smart-radio-group.d.ts","sourceRoot":"","sources":["../../src/smart-components/smart-radio-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,oBAAoB;IACnC,uCAAuC;IACvC,KAAK,EAAE,gBAAgB,EAAE,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,8DAA8D;IAC9D,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,iEAAiE;IACjE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,uEAAuE;IACvE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,eAAe,GAAI,6IAc7B,oBAAoB,4CAsFtB,CAAA"}

package/dist/smart-components/smart-radio-group.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@iamsaroj/smart-ui/lib/utils";
+import { RadioGroup, RadioGroupItem, } from "@iamsaroj/smart-ui/components/radio-group";
+import { Label } from "@iamsaroj/smart-ui/components/label";
+/**
+ * Data-driven RadioGroup with per-item labels and optional descriptions.
+ * Auto-wires `id`/`htmlFor` for every item.
+ *
+ * ```tsx
+ * // Before
+ * <RadioGroup value={plan} onValueChange={setPlan}>
+ *   <div className="flex items-center gap-2">
+ *     <RadioGroupItem value="free" id="plan-free" />
+ *     <Label htmlFor="plan-free">Free</Label>
+ *   </div>
+ *   <div className="flex items-center gap-2">
+ *     <RadioGroupItem value="pro" id="plan-pro" />
+ *     <Label htmlFor="plan-pro">Pro</Label>
+ *   </div>
+ * </RadioGroup>
+ *
+ * // After
+ * <SmartRadioGroup
+ *   label="Plan"
+ *   value={plan}
+ *   onValueChange={setPlan}
+ *   items={[
+ *     { value: "free", label: "Free" },
+ *     { value: "pro",  label: "Pro", description: "$12/mo" },
+ *   ]}
+ * />
+ * ```
+ */
+export const SmartRadioGroup = ({ items, value, onValueChange, defaultValue, name, disabled, orientation = "vertical", className, label, description, error, required, fieldClassName, }) => {
+    const groupId = React.useId();
+    const hasHint = error != null || description != null;
+    const hintId = hasHint ? `${groupId}-hint` : undefined;
+    return (_jsxs("div", { "data-slot": "field", className: cn("flex flex-col gap-1.5", fieldClassName), children: [label != null && (_jsxs(Label, { children: [label, required && (_jsx("span", { className: "text-destructive", "aria-hidden": "true", children: "*" }))] })), _jsx(RadioGroup, { value: value, onValueChange: onValueChange, defaultValue: defaultValue, name: name, disabled: disabled, "aria-describedby": hintId, className: cn(orientation === "horizontal"
+                    ? "flex flex-row flex-wrap gap-4"
+                    : "flex flex-col gap-2", className), children: items.map((item) => {
+                    const itemId = `${groupId}-${item.value}`;
+                    const descId = item.description ? `${itemId}-desc` : undefined;
+                    return (_jsxs("div", { className: "flex items-start gap-2", children: [_jsx(RadioGroupItem, { value: item.value, id: itemId, disabled: item.disabled, "aria-describedby": descId, className: "mt-0.5" }), _jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx(Label, { htmlFor: itemId, className: cn("font-normal", (disabled || item.disabled) &&
+                                            "cursor-not-allowed opacity-50"), children: item.label }), item.description != null && (_jsx("p", { id: descId, className: cn("text-xs text-muted-foreground", (disabled || item.disabled) && "opacity-50"), children: item.description }))] })] }, item.value));
+                }) }), hasHint && (_jsx("p", { id: hintId, className: cn("text-xs", error != null ? "text-destructive" : "text-muted-foreground"), children: error ?? description }))] }));
+};
+//# sourceMappingURL=smart-radio-group.js.map

package/dist/smart-components/smart-radio-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"smart-radio-group.js","sourceRoot":"","sources":["../../src/smart-components/smart-radio-group.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,EAAE,EAAE,MAAM,8BAA8B,CAAA;AACjD,OAAO,EACL,UAAU,EACV,cAAc,GACf,MAAM,2CAA2C,CAAA;AAClD,OAAO,EAAE,KAAK,EAAE,MAAM,qCAAqC,CAAA;AA+B3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAC9B,KAAK,EACL,KAAK,EACL,aAAa,EACb,YAAY,EACZ,IAAI,EACJ,QAAQ,EACR,WAAW,GAAG,UAAU,EACxB,SAAS,EACT,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAQ,EACR,cAAc,GACO,EAAE,EAAE;IACzB,MAAM,OAAO,GAAG,KAAK,CAAC,KAAK,EAAE,CAAA;IAC7B,MAAM,OAAO,GAAG,KAAK,IAAI,IAAI,IAAI,WAAW,IAAI,IAAI,CAAA;IACpD,MAAM,MAAM,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,OAAO,CAAC,CAAC,CAAC,SAAS,CAAA;IAEtD,OAAO,CACL,4BACY,OAAO,EACjB,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,cAAc,CAAC,aAErD,KAAK,IAAI,IAAI,IAAI,CAChB,MAAC,KAAK,eACH,KAAK,EACL,QAAQ,IAAI,CACX,eAAM,SAAS,EAAC,kBAAkB,iBAAa,MAAM,kBAE9C,CACR,IACK,CACT,EACD,KAAC,UAAU,IACT,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,EAC5B,YAAY,EAAE,YAAY,EAC1B,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,sBACA,MAAM,EACxB,SAAS,EAAE,EAAE,CACX,WAAW,KAAK,YAAY;oBAC1B,CAAC,CAAC,+BAA+B;oBACjC,CAAC,CAAC,qBAAqB,EACzB,SAAS,CACV,YAEA,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;oBAClB,MAAM,MAAM,GAAG,GAAG,OAAO,IAAI,IAAI,CAAC,KAAK,EAAE,CAAA;oBACzC,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,MAAM,OAAO,CAAC,CAAC,CAAC,SAAS,CAAA;oBAC9D,OAAO,CACL,eAAsB,SAAS,EAAC,wBAAwB,aACtD,KAAC,cAAc,IACb,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,EAAE,EAAE,MAAM,EACV,QAAQ,EAAE,IAAI,CAAC,QAAQ,sBACL,MAAM,EACxB,SAAS,EAAC,QAAQ,GAClB,EACF,eAAK,SAAS,EAAC,uBAAuB,aACpC,KAAC,KAAK,IACJ,OAAO,EAAE,MAAM,EACf,SAAS,EAAE,EAAE,CACX,aAAa,EACb,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC;4CACzB,+BAA+B,CAClC,YAEA,IAAI,CAAC,KAAK,GACL,EACP,IAAI,CAAC,WAAW,IAAI,IAAI,IAAI,CAC3B,YACE,EAAE,EAAE,MAAM,EACV,SAAS,EAAE,EAAE,CACX,+BAA+B,EAC/B,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,YAAY,CAC5C,YAEA,IAAI,CAAC,WAAW,GACf,CACL,IACG,KA9BE,IAAI,CAAC,KAAK,CA+Bd,CACP,CAAA;gBACH,CAAC,CAAC,GACS,EACZ,OAAO,IAAI,CACV,YACE,EAAE,EAAE,MAAM,EACV,SAAS,EAAE,EAAE,CACX,SAAS,EACT,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,uBAAuB,CAC7D,YAEA,KAAK,IAAI,WAAW,GACnB,CACL,IACG,CACP,CAAA;AACH,CAAC,CAAA"}

package/dist/smart-components/smart-segmented.d.ts

@@ -0,0 +1,33 @@
+import * as React from "react";
+export interface SmartSegmentedOption {
+    value: string;
+    label: React.ReactNode;
+    disabled?: boolean;
+}
+export interface SmartSegmentedProps {
+    options: SmartSegmentedOption[];
+    value?: string;
+    onValueChange?: (value: string) => void;
+    disabled?: boolean;
+    className?: string;
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    error?: React.ReactNode;
+    required?: boolean;
+    optional?: boolean;
+    fieldClassName?: string;
+}
+/**
+ * Segmented control (connected button group) for single-value selection.
+ *
+ * ```tsx
+ * <SmartSegmented
+ *   label="Account type"
+ *   options={[{ value: "personal", label: "Personal" }, { value: "business", label: "Business" }]}
+ *   value={type}
+ *   onValueChange={setType}
+ * />
+ * ```
+ */
+export declare const SmartSegmented: ({ options, value, onValueChange, disabled, className, label, description, error, required, optional, fieldClassName, }: SmartSegmentedProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=smart-segmented.d.ts.map

package/dist/smart-components/smart-segmented.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"smart-segmented.d.ts","sourceRoot":"","sources":["../../src/smart-components/smart-segmented.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,oBAAoB,EAAE,CAAA;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,cAAc,GAAI,wHAY5B,mBAAmB,4CA8DrB,CAAA"}

package/dist/smart-components/smart-segmented.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@iamsaroj/smart-ui/lib/utils";
+import { Button } from "@iamsaroj/smart-ui/components/button";
+import { Label } from "@iamsaroj/smart-ui/components/label";
+/**
+ * Segmented control (connected button group) for single-value selection.
+ *
+ * ```tsx
+ * <SmartSegmented
+ *   label="Account type"
+ *   options={[{ value: "personal", label: "Personal" }, { value: "business", label: "Business" }]}
+ *   value={type}
+ *   onValueChange={setType}
+ * />
+ * ```
+ */
+export const SmartSegmented = ({ options, value, onValueChange, disabled, className, label, description, error, required, optional, fieldClassName, }) => {
+    const id = React.useId();
+    const hasHint = error != null || description != null;
+    const hintId = hasHint ? `${id}-hint` : undefined;
+    return (_jsxs("div", { "data-slot": "field", className: cn("flex flex-col gap-1.5", fieldClassName), children: [label != null && (_jsxs(Label, { children: [label, required && (_jsx("span", { className: "text-destructive", "aria-hidden": "true", children: "*" })), optional && (_jsxs("span", { className: "font-normal text-muted-foreground", children: [" ", "(optional)"] }))] })), _jsx("div", { role: "group", "aria-describedby": hintId, className: cn("flex w-full", className), children: options.map((opt, i) => (_jsx(Button, { type: "button", variant: value === opt.value ? "default" : "outline", disabled: disabled || opt.disabled, onClick: () => onValueChange?.(opt.value), className: cn("flex-1 rounded-none focus:z-10", i === 0 && "rounded-l-md", i === options.length - 1 && "rounded-r-md", i > 0 && "-ml-px"), children: opt.label }, opt.value))) }), hasHint && (_jsx("p", { id: hintId, className: cn("text-xs", error != null ? "text-destructive" : "text-muted-foreground"), children: error ?? description }))] }));
+};
+//# sourceMappingURL=smart-segmented.js.map

package/dist/smart-components/smart-segmented.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"smart-segmented.js","sourceRoot":"","sources":["../../src/smart-components/smart-segmented.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,EAAE,EAAE,MAAM,8BAA8B,CAAA;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,sCAAsC,CAAA;AAC7D,OAAO,EAAE,KAAK,EAAE,MAAM,qCAAqC,CAAA;AAsB3D;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,OAAO,EACP,KAAK,EACL,aAAa,EACb,QAAQ,EACR,SAAS,EACT,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,cAAc,GACM,EAAE,EAAE;IACxB,MAAM,EAAE,GAAG,KAAK,CAAC,KAAK,EAAE,CAAA;IACxB,MAAM,OAAO,GAAG,KAAK,IAAI,IAAI,IAAI,WAAW,IAAI,IAAI,CAAA;IACpD,MAAM,MAAM,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAA;IAEjD,OAAO,CACL,4BACY,OAAO,EACjB,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,cAAc,CAAC,aAErD,KAAK,IAAI,IAAI,IAAI,CAChB,MAAC,KAAK,eACH,KAAK,EACL,QAAQ,IAAI,CACX,eAAM,SAAS,EAAC,kBAAkB,iBAAa,MAAM,kBAE9C,CACR,EACA,QAAQ,IAAI,CACX,gBAAM,SAAS,EAAC,mCAAmC,aAChD,GAAG,kBAEC,CACR,IACK,CACT,EACD,cACE,IAAI,EAAC,OAAO,sBACM,MAAM,EACxB,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,CAAC,YAEtC,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,CACvB,KAAC,MAAM,IAEL,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,KAAK,KAAK,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACpD,QAAQ,EAAE,QAAQ,IAAI,GAAG,CAAC,QAAQ,EAClC,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,EACzC,SAAS,EAAE,EAAE,CACX,gCAAgC,EAChC,CAAC,KAAK,CAAC,IAAI,cAAc,EACzB,CAAC,KAAK,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,cAAc,EAC1C,CAAC,GAAG,CAAC,IAAI,QAAQ,CAClB,YAEA,GAAG,CAAC,KAAK,IAZL,GAAG,CAAC,KAAK,CAaP,CACV,CAAC,GACE,EACL,OAAO,IAAI,CACV,YACE,EAAE,EAAE,MAAM,EACV,SAAS,EAAE,EAAE,CACX,SAAS,EACT,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,uBAAuB,CAC7D,YAEA,KAAK,IAAI,WAAW,GACnB,CACL,IACG,CACP,CAAA;AACH,CAAC,CAAA"}

package/dist/smart-components/smart-select.d.ts

@@ -0,0 +1,71 @@
+import * as React from "react";
+export interface SmartSelectOption {
+    value: string;
+    label: React.ReactNode;
+    disabled?: boolean;
+}
+export interface SmartSelectGroup {
+    label: string;
+    options: SmartSelectOption[];
+}
+export interface SmartSelectProps {
+    /** Flat list of options. Mutually exclusive with `groups`. */
+    options?: SmartSelectOption[];
+    /** Grouped options with a section label. Mutually exclusive with `options`. */
+    groups?: SmartSelectGroup[];
+    /**
+     * Controlled value. Pass `null` (not `undefined`) for "controlled with no
+     * selection" — Base UI decides controlled-ness on first render (`undefined`
+     * = uncontrolled) and warns if the value later flips to a string.
+     */
+    value?: string | null;
+    onValueChange?: (value: string | null) => void;
+    defaultValue?: string;
+    name?: string;
+    disabled?: boolean;
+    required?: boolean;
+    /** Placeholder text shown when no value is selected. */
+    placeholder?: string;
+    size?: "default" | "sm";
+    /** Class applied to the SelectTrigger element. */
+    triggerClassName?: string;
+    /** Field label rendered above the trigger. */
+    label?: React.ReactNode;
+    /** Hint rendered below the trigger. Hidden when `error` is set. */
+    description?: React.ReactNode;
+    /** Validation error shown below instead of `description`. */
+    error?: React.ReactNode;
+    fieldRequired?: boolean;
+    optional?: boolean;
+    fieldClassName?: string;
+}
+/**
+ * Data-driven Select with optional field label, description, and error.
+ *
+ * ```tsx
+ * // Before
+ * <Select value={role} onValueChange={setRole}>
+ *   <SelectTrigger className="w-full"><SelectValue placeholder="Choose role" /></SelectTrigger>
+ *   <SelectContent>
+ *     <SelectItem value="admin">Admin</SelectItem>
+ *     <SelectItem value="editor">Editor</SelectItem>
+ *     <SelectItem value="viewer">Viewer</SelectItem>
+ *   </SelectContent>
+ * </Select>
+ *
+ * // After
+ * <SmartSelect
+ *   label="Role"
+ *   placeholder="Choose role"
+ *   value={role}
+ *   onValueChange={setRole}
+ *   options={[
+ *     { value: "admin",  label: "Admin" },
+ *     { value: "editor", label: "Editor" },
+ *     { value: "viewer", label: "Viewer" },
+ *   ]}
+ * />
+ * ```
+ */
+export declare const SmartSelect: ({ options, groups, value, onValueChange, defaultValue, name, disabled, required, placeholder, size, triggerClassName, label, description, error, fieldRequired, optional, fieldClassName, }: SmartSelectProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=smart-select.d.ts.map

package/dist/smart-components/smart-select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"smart-select.d.ts","sourceRoot":"","sources":["../../src/smart-components/smart-select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAa9B,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,iBAAiB,EAAE,CAAA;CAC7B;AAED,MAAM,WAAW,gBAAgB;IAC/B,8DAA8D;IAC9D,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAA;IAC7B,+EAA+E;IAC/E,MAAM,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC3B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAC9C,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,wDAAwD;IACxD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,CAAA;IACvB,kDAAkD;IAClD,gBAAgB,CAAC,EAAE,MAAM,CAAA;IAEzB,8CAA8C;IAC9C,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,mEAAmE;IACnE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,6DAA6D;IAC7D,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,WAAW,GAAI,6LAkBzB,gBAAgB,4CAoFlB,CAAA"}