pixelize-design-library 2.2.192 → 3.0.1-beta.1

package/dist/components-v2/NavigationBar/NavigationBar.js

@@ -0,0 +1,148 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationBar = NavigationBar;
+const React = __importStar(require("react"));
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../../lib/utils");
+const ThemeProvider_1 = require("../../theme-v2/ThemeProvider");
+const avatar_1 = require("../ui/avatar");
+const button_1 = require("../ui/button");
+const dialog_1 = require("../ui/dialog");
+const dropdown_menu_1 = require("../ui/dropdown-menu");
+const input_1 = require("../ui/input");
+const Breadcrumbs_1 = require("../Breadcrumbs/Breadcrumbs");
+function NavigationBar({ logo, appName, onSidebarToggle, sidebarOpen, breadcrumb, pageTitle, backAction, actions, user, userMenuItems = [], onLogout, logoutLabel = "Sign out", notificationCount, notificationIcon, onNotificationClick, globalSearch, showThemeSwitcher = false, className, }) {
+    var _a, _b, _c;
+    const [searchOpen, setSearchOpen] = React.useState(false);
+    const [searchQuery, setSearchQuery] = React.useState("");
+    const submitSearch = (event) => {
+        var _a;
+        event === null || event === void 0 ? void 0 : event.preventDefault();
+        (_a = globalSearch === null || globalSearch === void 0 ? void 0 : globalSearch.onSearch) === null || _a === void 0 ? void 0 : _a.call(globalSearch, searchQuery);
+    };
+    const NotificationIcon = notificationIcon !== null && notificationIcon !== void 0 ? notificationIcon : lucide_react_1.Bell;
+    const showNotification = onNotificationClick !== undefined ||
+        typeof notificationCount === "number";
+    return (React.createElement("header", { role: "banner", className: (0, utils_1.cn)("sticky top-0 z-40 flex h-14 shrink-0 items-center gap-2 border-b border-border bg-background px-3", className) },
+        onSidebarToggle && (React.createElement("button", { type: "button", "aria-label": sidebarOpen ? "Close sidebar" : "Open sidebar", "aria-expanded": sidebarOpen, onClick: onSidebarToggle, className: "inline-flex h-9 w-9 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring md:hidden" },
+            React.createElement(lucide_react_1.Menu, { "aria-hidden": "true", className: "h-5 w-5" }))),
+        (logo || appName) && (React.createElement("div", { className: "flex items-center gap-2 md:hidden" },
+            logo ? (React.createElement("img", { src: logo, alt: "", className: "h-6 w-6 rounded-sm object-contain" })) : null,
+            appName && (React.createElement("span", { className: "text-sm font-semibold text-foreground" }, appName)))),
+        backAction && (React.createElement("button", { type: "button", onClick: backAction.onClick, "aria-label": (_a = backAction.label) !== null && _a !== void 0 ? _a : "Go back", className: "inline-flex items-center gap-1 rounded-md px-2 py-1 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" },
+            React.createElement(lucide_react_1.ChevronLeft, { "aria-hidden": "true", className: "h-4 w-4" }),
+            backAction.label && (React.createElement("span", { className: "hidden sm:inline" }, backAction.label)))),
+        React.createElement("div", { className: "min-w-0 flex-1" }, breadcrumb && breadcrumb.length > 0 ? (React.createElement(Breadcrumbs_1.Breadcrumbs, { items: breadcrumb, maxItems: 4 })) : pageTitle ? (React.createElement("h1", { className: "truncate text-sm font-semibold text-foreground" }, pageTitle)) : null),
+        React.createElement("nav", { "aria-label": "Global", className: "flex items-center gap-1" },
+            globalSearch && (React.createElement("button", { type: "button", onClick: () => setSearchOpen(true), "aria-label": "Open search", className: "hidden h-9 items-center gap-2 rounded-md border border-input bg-background px-2.5 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring sm:inline-flex" },
+                React.createElement(lucide_react_1.Search, { "aria-hidden": "true", className: "h-4 w-4" }),
+                React.createElement("span", { className: "hidden md:inline" }, (_b = globalSearch.placeholder) !== null && _b !== void 0 ? _b : "Search…"),
+                globalSearch.shortcut && (React.createElement("kbd", { className: "ml-1 rounded border border-border bg-muted px-1 text-[10px] font-medium text-muted-foreground" }, globalSearch.shortcut)))),
+            globalSearch && (React.createElement("button", { type: "button", onClick: () => setSearchOpen(true), "aria-label": "Open search", className: "inline-flex h-9 w-9 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring sm:hidden" },
+                React.createElement(lucide_react_1.Search, { "aria-hidden": "true", className: "h-5 w-5" }))),
+            actions,
+            showThemeSwitcher && React.createElement(ThemeSwitcher, null),
+            showNotification && (React.createElement("button", { type: "button", onClick: onNotificationClick, "aria-label": typeof notificationCount === "number" && notificationCount > 0
+                    ? `Notifications (${notificationCount} unread)`
+                    : "Notifications", className: "relative inline-flex h-9 w-9 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" },
+                React.createElement(NotificationIcon, { "aria-hidden": "true", className: "h-5 w-5" }),
+                typeof notificationCount === "number" && notificationCount > 0 && (React.createElement("span", { "aria-hidden": "true", className: "absolute right-1 top-1 inline-flex min-w-[16px] items-center justify-center rounded-full bg-destructive px-1 text-[10px] font-semibold leading-none text-destructive-foreground" }, notificationCount > 99 ? "99+" : notificationCount)))),
+            user && (React.createElement(UserMenu, { user: user, items: userMenuItems, onLogout: onLogout, logoutLabel: logoutLabel }))),
+        globalSearch && (React.createElement(dialog_1.Dialog, { open: searchOpen, onOpenChange: setSearchOpen },
+            React.createElement(dialog_1.DialogContent, { size: "lg", className: "top-[25%] gap-3" },
+                React.createElement(dialog_1.DialogHeader, null,
+                    React.createElement(dialog_1.DialogTitle, null, "Search")),
+                React.createElement("form", { onSubmit: submitSearch, className: "flex gap-2" },
+                    React.createElement(input_1.Input, { autoFocus: true, value: searchQuery, onChange: (event) => setSearchQuery(event.target.value), placeholder: (_c = globalSearch.placeholder) !== null && _c !== void 0 ? _c : "Search…", size: "lg" }),
+                    React.createElement(button_1.Button, { type: "submit", size: "lg" }, "Go")))))));
+}
+function UserMenu({ user, items, onLogout, logoutLabel, }) {
+    var _a;
+    const initials = (_a = user.initials) !== null && _a !== void 0 ? _a : user.name
+        .split(/\s+/)
+        .map((part) => part[0])
+        .filter(Boolean)
+        .slice(0, 2)
+        .join("")
+        .toUpperCase();
+    return (React.createElement(dropdown_menu_1.DropdownMenu, null,
+        React.createElement(dropdown_menu_1.DropdownMenuTrigger, { asChild: true },
+            React.createElement("button", { type: "button", "aria-label": `Account menu for ${user.name}`, className: "ml-1 rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background" },
+                React.createElement(avatar_1.Avatar, { size: "sm" },
+                    user.avatarUrl && (React.createElement(avatar_1.AvatarImage, { src: user.avatarUrl, alt: user.name })),
+                    React.createElement(avatar_1.AvatarFallback, null, initials || "?")))),
+        React.createElement(dropdown_menu_1.DropdownMenuContent, { align: "end", className: "w-56" },
+            React.createElement("div", { className: "px-2 py-1.5" },
+                React.createElement("p", { className: "truncate text-sm font-medium text-foreground" }, user.name),
+                user.email && (React.createElement("p", { className: "truncate text-xs text-muted-foreground" }, user.email))),
+            items.length > 0 && React.createElement(dropdown_menu_1.DropdownMenuSeparator, null),
+            items.map((item, index) => (React.createElement(React.Fragment, { key: `${item.label}-${index}` },
+                item.separator && React.createElement(dropdown_menu_1.DropdownMenuSeparator, null),
+                item.href ? (React.createElement(dropdown_menu_1.DropdownMenuItem, { asChild: true },
+                    React.createElement("a", { href: item.href, className: (0, utils_1.cn)(item.variant === "destructive" &&
+                            "text-destructive focus:text-destructive") },
+                        item.icon,
+                        item.label))) : (React.createElement(dropdown_menu_1.DropdownMenuItem, { onClick: item.onClick, className: (0, utils_1.cn)(item.variant === "destructive" &&
+                        "text-destructive focus:text-destructive") },
+                    item.icon,
+                    item.label))))),
+            onLogout && (React.createElement(React.Fragment, null,
+                React.createElement(dropdown_menu_1.DropdownMenuSeparator, null),
+                React.createElement(dropdown_menu_1.DropdownMenuItem, { onClick: onLogout, className: "text-destructive focus:text-destructive" },
+                    React.createElement(lucide_react_1.LogOut, { "aria-hidden": "true", className: "h-4 w-4" }),
+                    logoutLabel))))));
+}
+function ThemeSwitcher() {
+    const { mode, setMode } = (0, ThemeProvider_1.useTheme)();
+    const Icon = mode === "dark" ? lucide_react_1.Moon : mode === "light" ? lucide_react_1.Sun : lucide_react_1.Monitor;
+    return (React.createElement(dropdown_menu_1.DropdownMenu, null,
+        React.createElement(dropdown_menu_1.DropdownMenuTrigger, { asChild: true },
+            React.createElement("button", { type: "button", "aria-label": "Change theme", className: "inline-flex h-9 w-9 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" },
+                React.createElement(Icon, { "aria-hidden": "true", className: "h-5 w-5" }))),
+        React.createElement(dropdown_menu_1.DropdownMenuContent, { align: "end", className: "w-40" },
+            React.createElement(dropdown_menu_1.DropdownMenuLabel, null, "Theme"),
+            React.createElement(dropdown_menu_1.DropdownMenuSeparator, null),
+            React.createElement(dropdown_menu_1.DropdownMenuRadioGroup, { value: mode, onValueChange: (value) => setMode(value) },
+                React.createElement(dropdown_menu_1.DropdownMenuRadioItem, { value: "light" },
+                    React.createElement(lucide_react_1.Sun, { "aria-hidden": "true", className: "h-4 w-4" }),
+                    "Light"),
+                React.createElement(dropdown_menu_1.DropdownMenuRadioItem, { value: "dark" },
+                    React.createElement(lucide_react_1.Moon, { "aria-hidden": "true", className: "h-4 w-4" }),
+                    "Dark"),
+                React.createElement(dropdown_menu_1.DropdownMenuRadioItem, { value: "system" },
+                    React.createElement(lucide_react_1.Monitor, { "aria-hidden": "true", className: "h-4 w-4" }),
+                    "System")))));
+}

package/dist/components-v2/Notification/Notification.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+export type NotificationType = "info" | "success" | "warning" | "error";
+export interface NotificationProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    /** Absolute timestamp, ISO string, or pre-formatted string. */
+    timestamp?: Date | string;
+    /** When false, the item is rendered with the "unread" indicator. */
+    read?: boolean;
+    onRead?: () => void;
+    onDismiss?: () => void;
+    type?: NotificationType;
+    /** Inline avatar (URL or initials). */
+    avatar?: {
+        src?: string;
+        initials?: string;
+        alt?: string;
+    };
+    /** Action row below the description. */
+    actions?: React.ReactNode;
+}
+export declare const Notification: React.ForwardRefExoticComponent<NotificationProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components-v2/Notification/Notification.js

@@ -0,0 +1,113 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Notification = void 0;
+const React = __importStar(require("react"));
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../../lib/utils");
+const avatar_1 = require("../ui/avatar");
+const TYPE_STYLES = {
+    info: {
+        border: "border-l-primary",
+        bg: "bg-primary/5",
+        icon: React.createElement(lucide_react_1.Info, { "aria-hidden": "true", className: "h-4 w-4 text-primary" }),
+    },
+    success: {
+        border: "border-l-success",
+        bg: "bg-success/5",
+        icon: React.createElement(lucide_react_1.CheckCircle2, { "aria-hidden": "true", className: "h-4 w-4 text-success" }),
+    },
+    warning: {
+        border: "border-l-warning",
+        bg: "bg-warning/5",
+        icon: React.createElement(lucide_react_1.AlertTriangle, { "aria-hidden": "true", className: "h-4 w-4 text-warning" }),
+    },
+    error: {
+        border: "border-l-destructive",
+        bg: "bg-destructive/5",
+        icon: React.createElement(lucide_react_1.AlertCircle, { "aria-hidden": "true", className: "h-4 w-4 text-destructive" }),
+    },
+};
+function formatTimestamp(value) {
+    const date = value instanceof Date ? value : new Date(value);
+    if (Number.isNaN(date.getTime()))
+        return String(value);
+    return date.toLocaleString(undefined, {
+        month: "short",
+        day: "numeric",
+        hour: "numeric",
+        minute: "2-digit",
+    });
+}
+exports.Notification = React.forwardRef((_a, ref) => {
+    var _b, _c;
+    var { className, title, description, timestamp, read = false, onRead, onDismiss, type = "info", avatar, actions, onClick } = _a, rest = __rest(_a, ["className", "title", "description", "timestamp", "read", "onRead", "onDismiss", "type", "avatar", "actions", "onClick"]);
+    const styles = TYPE_STYLES[type];
+    const handleClick = (event) => {
+        if (!read)
+            onRead === null || onRead === void 0 ? void 0 : onRead();
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    };
+    return (React.createElement("div", Object.assign({ ref: ref, role: "article", "aria-live": !read ? "polite" : undefined, onClick: handleClick, className: (0, utils_1.cn)("relative flex gap-3 border-l-2 p-3 transition-colors", "hover:bg-accent/40", read ? "border-l-transparent" : (0, utils_1.cn)(styles.border, styles.bg), onClick && "cursor-pointer", className) }, rest),
+        avatar ? (React.createElement(avatar_1.Avatar, { size: "sm" },
+            avatar.src && (React.createElement(avatar_1.AvatarImage, { src: avatar.src, alt: (_b = avatar.alt) !== null && _b !== void 0 ? _b : "" })),
+            React.createElement(avatar_1.AvatarFallback, null, (_c = avatar.initials) !== null && _c !== void 0 ? _c : "?"))) : (React.createElement("span", { className: "mt-0.5 inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-card" }, styles.icon)),
+        React.createElement("div", { className: "min-w-0 flex-1" },
+            React.createElement("div", { className: "flex items-start justify-between gap-2" },
+                React.createElement("p", { className: (0, utils_1.cn)("text-sm", read
+                        ? "font-medium text-muted-foreground"
+                        : "font-semibold text-foreground") }, title),
+                timestamp && (React.createElement("time", { className: "shrink-0 text-[11px] text-muted-foreground" }, formatTimestamp(timestamp)))),
+            description && (React.createElement("p", { className: "mt-0.5 text-sm text-muted-foreground" }, description)),
+            actions && React.createElement("div", { className: "mt-2 flex gap-2" }, actions)),
+        !read && (React.createElement("span", { "aria-label": "Unread", className: "absolute right-3 top-3 h-2 w-2 rounded-full bg-primary" })),
+        onDismiss && (React.createElement("button", { type: "button", "aria-label": "Dismiss notification", onClick: (event) => {
+                event.stopPropagation();
+                onDismiss();
+            }, className: "absolute bottom-2 right-2 rounded-sm text-muted-foreground opacity-0 transition-opacity hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring group-hover:opacity-100" },
+            React.createElement(lucide_react_1.X, { "aria-hidden": "true", className: "h-3.5 w-3.5" })))));
+});
+exports.Notification.displayName = "Notification";

package/dist/components-v2/NumberInput/NumberInput.d.ts

@@ -0,0 +1,37 @@
+import * as React from "react";
+export type NumberInputSize = "sm" | "md" | "lg";
+export interface NumberInputProps {
+    id?: string;
+    name?: string;
+    label?: React.ReactNode;
+    placeholder?: string;
+    value?: number | null;
+    defaultValue?: number | null;
+    onChange?: (value: number | null) => void;
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    /** Decimal places — applied on clamp/blur. */
+    precision?: number;
+    /** Custom display formatter (e.g. currency). Called when input isn't focused. */
+    format?: (value: number) => string;
+    /** Inverse of format. Receives the raw input string. Return NaN to reject. */
+    parse?: (raw: string) => number;
+    helperText?: React.ReactNode;
+    error?: boolean;
+    errorMessage?: React.ReactNode;
+    isInformation?: boolean;
+    informationMessage?: React.ReactNode;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    isRequired?: boolean;
+    size?: NumberInputSize;
+    width?: string;
+    className?: string;
+    autoFocus?: boolean;
+    /** Hide the +/- stepper buttons. */
+    hideSteppers?: boolean;
+}
+export declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components-v2/NumberInput/NumberInput.js

@@ -0,0 +1,210 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NumberInput = void 0;
+const React = __importStar(require("react"));
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../../lib/utils");
+const field_1 = require("../ui/field");
+const input_1 = require("../ui/input");
+const form_field_1 = require("../ui/form-field");
+const STEPPER_SIZE = {
+    sm: "w-5",
+    md: "w-6",
+    lg: "w-7",
+};
+const STEPPER_ICON = {
+    sm: "h-2.5 w-2.5",
+    md: "h-3 w-3",
+    lg: "h-3.5 w-3.5",
+};
+function clamp(value, min, max) {
+    if (typeof min === "number" && value < min)
+        return min;
+    if (typeof max === "number" && value > max)
+        return max;
+    return value;
+}
+function roundTo(value, precision) {
+    const factor = 10 ** precision;
+    return Math.round(value * factor) / factor;
+}
+function defaultParse(raw) {
+    if (raw.trim() === "")
+        return NaN;
+    const cleaned = raw.replace(/[^\d.\-+eE]/g, "");
+    return parseFloat(cleaned);
+}
+function defaultFormat(value, precision) {
+    if (Number.isNaN(value))
+        return "";
+    if (typeof precision === "number")
+        return value.toFixed(precision);
+    return String(value);
+}
+exports.NumberInput = React.forwardRef((props, ref) => {
+    const { id, label, placeholder, value, defaultValue, onChange, onBlur, onFocus, min, max, step = 1, precision, format, parse = defaultParse, helperText, error = false, errorMessage, isInformation, informationMessage, isDisabled, isReadOnly, isRequired, size = "md", width, className, autoFocus, hideSteppers = false, name, } = props;
+    return (React.createElement(field_1.Field, { id: id, label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage, helperText: helperText, error: error, errorMessage: errorMessage, width: width },
+        React.createElement(NumberInputControl, { ref: ref, name: name, placeholder: placeholder, value: value, defaultValue: defaultValue, onChange: onChange, onBlur: onBlur, onFocus: onFocus, min: min, max: max, step: step, precision: precision, format: format, parse: parse, isDisabled: isDisabled, isReadOnly: isReadOnly, error: error, size: size, className: className, autoFocus: autoFocus, hideSteppers: hideSteppers })));
+});
+exports.NumberInput.displayName = "NumberInput";
+const NumberInputControl = React.forwardRef(({ placeholder, value, defaultValue, onChange, onBlur, onFocus, min, max, step = 1, precision, format, parse = defaultParse, isDisabled, isReadOnly, error = false, size = "md", className, autoFocus, hideSteppers = false, name, }, ref) => {
+    const field = (0, form_field_1.useFormField)();
+    const [draft, setDraft] = React.useState(() => {
+        const initial = typeof value === "number"
+            ? value
+            : typeof defaultValue === "number"
+                ? defaultValue
+                : null;
+        return initial === null ? "" : (format
+            ? format(initial)
+            : defaultFormat(initial, precision));
+    });
+    const [focused, setFocused] = React.useState(false);
+    React.useEffect(() => {
+        if (focused)
+            return;
+        if (value === undefined)
+            return;
+        setDraft(value === null
+            ? ""
+            : format
+                ? format(value)
+                : defaultFormat(value, precision));
+    }, [value, focused, format, precision]);
+    const innerRef = React.useRef(null);
+    const setRefs = React.useCallback((node) => {
+        innerRef.current = node;
+        if (typeof ref === "function")
+            ref(node);
+        else if (ref)
+            ref.current =
+                node;
+    }, [ref]);
+    const commit = (next) => {
+        const formatted = next === null
+            ? ""
+            : format
+                ? format(next)
+                : defaultFormat(next, precision);
+        setDraft(formatted);
+        onChange === null || onChange === void 0 ? void 0 : onChange(next);
+    };
+    const adjustBy = (delta) => {
+        if (isDisabled || isReadOnly)
+            return;
+        const parsed = parse(draft);
+        const base = Number.isNaN(parsed) ? min !== null && min !== void 0 ? min : 0 : parsed;
+        let next = base + delta * step;
+        if (typeof precision === "number")
+            next = roundTo(next, precision);
+        next = clamp(next, min, max);
+        commit(next);
+    };
+    const handleChange = (event) => {
+        setDraft(event.target.value);
+        const parsed = parse(event.target.value);
+        if (Number.isNaN(parsed)) {
+            if (event.target.value === "")
+                onChange === null || onChange === void 0 ? void 0 : onChange(null);
+        }
+        else {
+            onChange === null || onChange === void 0 ? void 0 : onChange(parsed);
+        }
+    };
+    const handleBlur = (event) => {
+        setFocused(false);
+        const parsed = parse(draft);
+        if (Number.isNaN(parsed)) {
+            if (draft.trim() === "")
+                commit(null);
+            else
+                commit(value !== null && value !== void 0 ? value : null);
+        }
+        else {
+            let next = parsed;
+            if (typeof precision === "number")
+                next = roundTo(next, precision);
+            next = clamp(next, min, max);
+            commit(next);
+        }
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+    };
+    const handleFocus = (event) => {
+        setFocused(true);
+        const parsed = parse(draft);
+        if (!Number.isNaN(parsed)) {
+            setDraft(defaultFormat(parsed, precision));
+        }
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+    };
+    const handleKeyDown = (event) => {
+        if (event.key === "ArrowUp") {
+            event.preventDefault();
+            adjustBy(event.shiftKey ? 10 : 1);
+        }
+        else if (event.key === "ArrowDown") {
+            event.preventDefault();
+            adjustBy(event.shiftKey ? -10 : -1);
+        }
+    };
+    const atMin = typeof min === "number" && parseSafe(draft) <= min;
+    const atMax = typeof max === "number" && parseSafe(draft) >= max;
+    return (React.createElement("div", { className: (0, utils_1.cn)("relative", className) },
+        React.createElement(input_1.Input, { ref: setRefs, name: name, type: "text", inputMode: "decimal", placeholder: placeholder, value: draft, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, disabled: isDisabled, readOnly: isReadOnly, autoFocus: autoFocus, size: size, "aria-invalid": error || field.hasError || undefined, role: "spinbutton", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": typeof value === "number" ? value : undefined, className: (0, utils_1.cn)(!hideSteppers && stepperPadding(size), "tabular-nums", error &&
+                "border-destructive bg-destructive/5 focus-visible:ring-destructive") }),
+        !hideSteppers && (React.createElement("div", { className: (0, utils_1.cn)("pointer-events-none absolute inset-y-0 right-0 flex flex-col border-l border-input", STEPPER_SIZE[size]), "aria-hidden": "true" },
+            React.createElement(StepperButton, { label: "Increment", disabled: isDisabled || isReadOnly || atMax, onClick: () => adjustBy(1), size: size, position: "top" },
+                React.createElement(lucide_react_1.ChevronUp, { className: STEPPER_ICON[size] })),
+            React.createElement(StepperButton, { label: "Decrement", disabled: isDisabled || isReadOnly || atMin, onClick: () => adjustBy(-1), size: size, position: "bottom" },
+                React.createElement(lucide_react_1.ChevronDown, { className: STEPPER_ICON[size] }))))));
+});
+NumberInputControl.displayName = "NumberInputControl";
+function parseSafe(raw) {
+    const n = parseFloat(raw);
+    return Number.isNaN(n) ? -Infinity : n;
+}
+function stepperPadding(size) {
+    if (size === "sm")
+        return "pr-7";
+    if (size === "lg")
+        return "pr-9";
+    return "pr-8";
+}
+function StepperButton({ label, disabled, onClick, size, position, children, }) {
+    return (React.createElement("button", { type: "button", tabIndex: -1, "aria-label": label, disabled: disabled, onMouseDown: (event) => {
+            event.preventDefault();
+        }, onClick: onClick, className: (0, utils_1.cn)("pointer-events-auto flex flex-1 items-center justify-center text-muted-foreground transition-colors", "hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50", position === "top" ? "rounded-tr-md" : "rounded-br-md", size === "sm" ? "min-h-0" : "min-h-0") }, children));
+}

package/dist/components-v2/PinInput/PinInput.d.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+export type PinInputSize = "sm" | "md" | "lg";
+export type PinInputType = "number" | "alphanumeric";
+export interface PinInputProps {
+    length?: number;
+    type?: PinInputType;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    /** Fires when all boxes are filled. */
+    onComplete?: (value: string) => void;
+    autoFocus?: boolean;
+    /** Replace the visible character with • (e.g. for OTP secrets). */
+    mask?: boolean;
+    label?: React.ReactNode;
+    helperText?: React.ReactNode;
+    error?: boolean;
+    errorMessage?: React.ReactNode;
+    isRequired?: boolean;
+    size?: PinInputSize;
+    name?: string;
+    isDisabled?: boolean;
+    className?: string;
+    id?: string;
+}
+export declare const PinInput: React.ForwardRefExoticComponent<PinInputProps & React.RefAttributes<HTMLDivElement>>;