@neasg/design-system 0.1.3 → 0.2.0

package/dist/input.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { InputControl } from "./input-control";
+export interface InputProps extends Omit<React.ComponentProps<typeof InputControl>, "className"> {
+    label: React.ReactNode;
+    description?: React.ReactNode;
+    error?: React.ReactNode;
+    invalid?: boolean;
+    hideLabel?: boolean;
+    className?: string;
+    inputClassName?: string;
+    labelClassName?: string;
+    descriptionClassName?: string;
+    errorClassName?: string;
+}
+declare const Input: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export { Input };

package/dist/input.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Field, FieldDescription, FieldError, FieldLabel } from "./field";
+import { InputControl } from "./input-control";
+import { cn } from "./lib/utils";
+const Input = React.forwardRef(({ label, description, error, invalid = false, hideLabel = false, className, inputClassName, labelClassName, descriptionClassName, errorClassName, id, disabled, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedBy, ...props }, ref) => {
+    const generatedId = React.useId();
+    const inputId = id !== null && id !== void 0 ? id : `input-${generatedId}`;
+    const errorId = error ? `${inputId}-error` : undefined;
+    const showDescription = Boolean(description) && !error;
+    const descriptionId = showDescription ? `${inputId}-description` : undefined;
+    const isInvalid = invalid ||
+        ariaInvalid === true ||
+        ariaInvalid === "true" ||
+        Boolean(error);
+    const describedBy = [ariaDescribedBy, descriptionId, errorId]
+        .filter(Boolean)
+        .join(" ") || undefined;
+    return (_jsxs(Field, { className: className, "data-disabled": disabled ? "true" : undefined, "data-invalid": isInvalid ? "true" : undefined, children: [_jsx(FieldLabel, { htmlFor: inputId, className: cn(hideLabel && "sr-only", labelClassName), children: label }), _jsx(InputControl, { ref: ref, id: inputId, disabled: disabled, "aria-invalid": isInvalid ? "true" : undefined, "aria-describedby": describedBy, className: inputClassName, ...props }), showDescription ? (_jsx(FieldDescription, { id: descriptionId, className: descriptionClassName, children: description })) : null, _jsx(FieldError, { id: errorId, className: errorClassName, children: error })] }));
+});
+Input.displayName = "Input";
+export { Input };

package/dist/label-value-grid.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { type LabelValueProps } from "./label-value";
+export interface LabelValueGridItem extends LabelValueProps {
+    id?: string;
+}
+export interface LabelValueGridProps extends React.HTMLAttributes<HTMLDivElement> {
+    items: LabelValueGridItem[];
+    columns?: 1 | 2 | 3 | 4;
+    itemClassName?: string;
+    minColumnWidth?: number;
+}
+declare function LabelValueGrid({ items, columns, className, itemClassName, minColumnWidth, style, ...props }: LabelValueGridProps): import("react/jsx-runtime").JSX.Element;
+export { LabelValueGrid };

package/dist/label-value-grid.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { LabelValue } from "./label-value";
+import { cn } from "./lib/utils";
+function getResponsiveColumnCount(width, maxColumns, minColumnWidth, gap) {
+    const nextColumns = Math.floor((width + gap) / (minColumnWidth + gap));
+    return Math.max(1, Math.min(maxColumns, nextColumns));
+}
+function getAvailableWidth(element) {
+    var _a, _b, _c, _d, _e, _f;
+    return Math.max(element.getBoundingClientRect().width, element.clientWidth, element.offsetWidth, (_b = (_a = element.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) !== null && _b !== void 0 ? _b : 0, (_d = (_c = element.parentElement) === null || _c === void 0 ? void 0 : _c.clientWidth) !== null && _d !== void 0 ? _d : 0, (_f = (_e = element.parentElement) === null || _e === void 0 ? void 0 : _e.offsetWidth) !== null && _f !== void 0 ? _f : 0);
+}
+function LabelValueGrid({ items, columns = 4, className, itemClassName, minColumnWidth = 192, style, ...props }) {
+    const containerRef = React.useRef(null);
+    const [resolvedColumns, setResolvedColumns] = React.useState(columns);
+    React.useLayoutEffect(() => {
+        const element = containerRef.current;
+        if (!element)
+            return;
+        const GAP_PX = 24;
+        let frameId = null;
+        const updateColumns = () => {
+            const width = getAvailableWidth(element);
+            if (width <= 0) {
+                return;
+            }
+            setResolvedColumns(getResponsiveColumnCount(width, columns, minColumnWidth, GAP_PX));
+        };
+        const requestUpdate = () => {
+            if (frameId !== null) {
+                window.cancelAnimationFrame(frameId);
+            }
+            frameId = window.requestAnimationFrame(updateColumns);
+        };
+        requestUpdate();
+        const observer = new ResizeObserver(() => {
+            requestUpdate();
+        });
+        observer.observe(element);
+        if (element.parentElement) {
+            observer.observe(element.parentElement);
+        }
+        window.addEventListener("resize", requestUpdate);
+        return () => {
+            if (frameId !== null) {
+                window.cancelAnimationFrame(frameId);
+            }
+            window.removeEventListener("resize", requestUpdate);
+            observer.disconnect();
+        };
+    }, [columns, minColumnWidth]);
+    return (_jsx("div", { ref: containerRef, className: cn("grid auto-rows-fr items-start gap-x-6 gap-y-3", className), style: {
+            ...style,
+            gridTemplateColumns: `repeat(${resolvedColumns}, minmax(0, 1fr))`,
+        }, ...props, children: items.map((item, index) => {
+            var _a;
+            return (_jsx(LabelValue, { ...item, className: cn("min-w-0", itemClassName, item.className) }, (_a = item.id) !== null && _a !== void 0 ? _a : `${item.label}-${index}`));
+        }) }));
+}
+export { LabelValueGrid };

package/dist/label-value.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+export interface LabelValueProps {
+    label: string;
+    value: React.ReactNode;
+    className?: string;
+    labelClassName?: string;
+    hideIfEmpty?: boolean;
+}
+export declare function isEmptyValue(value: React.ReactNode): boolean;
+declare function LabelValue({ label, value, className, labelClassName, hideIfEmpty, }: LabelValueProps): import("react/jsx-runtime").JSX.Element | null;
+export { LabelValue };

package/dist/label-value.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "./lib/utils";
+export function isEmptyValue(value) {
+    if (value === null || value === undefined || value === "")
+        return true;
+    if (typeof value === "string") {
+        const trimmed = value.trim().toLowerCase();
+        return trimmed === "" || trimmed === "n/a" || trimmed === "-";
+    }
+    return false;
+}
+function LabelValue({ label, value, className, labelClassName, hideIfEmpty = false, }) {
+    const empty = isEmptyValue(value);
+    if (hideIfEmpty && empty) {
+        return null;
+    }
+    return (_jsxs("div", { className: cn("min-w-0 h-full space-y-1", className), children: [_jsx("p", { className: cn("text-sm font-semibold text-foreground", labelClassName), children: label }), _jsx("div", { className: cn("min-w-0 break-words text-sm text-foreground", empty && "italic text-muted-foreground/60"), children: empty ? "-" : value })] }));
+}
+export { LabelValue };

package/dist/layout.d.ts

@@ -0,0 +1,55 @@
+import * as React from "react";
+import { type CountBadgeProps } from "./count-badge";
+type SidebarContextType = {
+    isCollapsed: boolean;
+    toggle: () => void;
+};
+export declare function SidebarProvider({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useSidebar(): SidebarContextType;
+export interface DashboardLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare function DashboardLayout({ className, children, ...props }: DashboardLayoutProps): import("react/jsx-runtime").JSX.Element;
+export interface DashboardSidebarProps extends React.HTMLAttributes<HTMLElement> {
+    logo?: React.ReactNode | ((context: {
+        isCollapsed: boolean;
+    }) => React.ReactNode);
+    search?: React.ReactNode | ((context: {
+        isCollapsed: boolean;
+    }) => React.ReactNode);
+    navGroups?: DashboardSidebarNavGroup[];
+    footerItems?: DashboardSidebarNavItem[];
+    footer?: React.ReactNode | ((context: {
+        isCollapsed: boolean;
+    }) => React.ReactNode);
+    toggleAriaLabel?: string;
+}
+export interface DashboardSidebarNavItem {
+    id: string;
+    label: string;
+    icon: React.ElementType;
+    href?: string;
+    target?: string;
+    rel?: string;
+    active?: boolean;
+    disabled?: boolean;
+    wip?: boolean;
+    badgeCount?: number;
+    badgeVariant?: CountBadgeProps["variant"];
+    badgePulse?: boolean;
+    trailing?: React.ReactNode;
+    onClick?: () => void;
+    onHoverStart?: () => void;
+    onHoverEnd?: () => void;
+}
+export interface DashboardSidebarNavGroup {
+    label?: string;
+    items: DashboardSidebarNavItem[];
+}
+declare function DashboardSidebar({ className, children, logo, search, navGroups, footerItems, footer, toggleAriaLabel, ...props }: DashboardSidebarProps): import("react/jsx-runtime").JSX.Element;
+export interface DashboardContentProps extends React.HTMLAttributes<HTMLElement> {
+    surfaceClassName?: string;
+}
+declare function DashboardContent({ className, surfaceClassName, children, ...props }: DashboardContentProps): import("react/jsx-runtime").JSX.Element;
+export { DashboardLayout, DashboardSidebar, DashboardContent };

package/dist/layout.js

@@ -0,0 +1,140 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { ChevronLeftIcon } from "./animated-icons/chevron-left";
+import { ChevronRightIcon } from "./animated-icons/chevron-right";
+import { Badge } from "./badge";
+import { Button } from "./button";
+import { CountBadge } from "./count-badge";
+import { Tooltip } from "./tooltip";
+import { cn } from "./lib/utils";
+const COLLAPSE_BREAKPOINT = 1280;
+const SidebarContext = React.createContext(undefined);
+export function SidebarProvider({ children }) {
+    const [isCollapsed, setIsCollapsed] = React.useState(false);
+    const manualCollapsedRef = React.useRef(false);
+    const toggle = () => {
+        setIsCollapsed((prev) => {
+            const next = !prev;
+            manualCollapsedRef.current = next;
+            return next;
+        });
+    };
+    React.useEffect(() => {
+        const handleResize = () => {
+            if (window.innerWidth < COLLAPSE_BREAKPOINT) {
+                setIsCollapsed(true);
+            }
+            else {
+                setIsCollapsed(manualCollapsedRef.current);
+            }
+        };
+        handleResize();
+        window.addEventListener("resize", handleResize);
+        return () => window.removeEventListener("resize", handleResize);
+    }, []);
+    return (_jsx(SidebarContext.Provider, { value: { isCollapsed, toggle }, children: children }));
+}
+export function useSidebar() {
+    const context = React.useContext(SidebarContext);
+    if (!context) {
+        throw new Error("useSidebar must be used within a SidebarProvider");
+    }
+    return context;
+}
+function DashboardLayout({ className, children, ...props }) {
+    return (_jsx("div", { className: cn("flex min-h-screen bg-[hsl(var(--layout-shell-background))]", className), ...props, children: children }));
+}
+function SidebarShell({ isCollapsed, className, children, ...props }) {
+    return (_jsx("aside", { className: cn("fixed left-0 top-0 z-30 flex h-screen shrink-0 flex-col overflow-hidden bg-[hsl(var(--layout-shell-background))] pb-2 pl-[var(--layout-sidebar-padding-inline)] pt-[var(--layout-sidebar-padding-top)] transition-all duration-300 ease-in-out", isCollapsed
+            ? "w-[var(--layout-sidebar-collapsed-width)]"
+            : "w-[var(--layout-sidebar-width)]", className), ...props, children: children }));
+}
+function SidebarHeader({ className, children, }) {
+    return _jsx("div", { className: cn("shrink-0", className), children: children });
+}
+function SidebarContent({ className, children, }) {
+    return _jsx("div", { className: cn("flex-1 overflow-y-auto", className), children: children });
+}
+function SidebarFooter({ className, children, }) {
+    return _jsx("div", { className: cn("shrink-0", className), children: children });
+}
+function SidebarGroup({ className, children, }) {
+    return _jsx("div", { className: className, children: children });
+}
+function SidebarGroupLabel({ className, children, }) {
+    return (_jsx("p", { className: cn("px-3 py-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground", className), children: children }));
+}
+function SidebarMenu({ className, children, }) {
+    return _jsx("ul", { className: cn("space-y-1", className), children: children });
+}
+function SidebarMenuItem({ className, children, }) {
+    return _jsx("li", { className: className, children: children });
+}
+function SidebarMenuButton({ active = false, collapsed = false, disabled = false, className, asChild = false, children, ...props }) {
+    return (_jsx(Button, { asChild: asChild, variant: "ghost", disabled: disabled, className: cn("h-auto w-full justify-start gap-3 rounded-lg py-2 text-sm font-medium shadow-none", collapsed ? "justify-center px-3" : "px-3", disabled
+            ? "text-muted-foreground/50 hover:bg-transparent hover:text-muted-foreground/50"
+            : active
+                ? "bg-white text-foreground hover:bg-white hover:text-foreground"
+                : "text-muted-foreground hover:bg-white hover:text-foreground", className), ...props, children: children }));
+}
+function renderSidebarSlot(slot, isCollapsed) {
+    if (typeof slot === "function") {
+        return slot({ isCollapsed });
+    }
+    return slot !== null && slot !== void 0 ? slot : null;
+}
+function DashboardSidebarItem({ item, isCollapsed, }) {
+    const Icon = item.icon;
+    const iconRef = React.useRef(null);
+    const showWipBadge = item.disabled || item.wip;
+    const handleMouseEnter = () => {
+        var _a, _b, _c;
+        if (!item.disabled) {
+            (_b = (_a = iconRef.current) === null || _a === void 0 ? void 0 : _a.startAnimation) === null || _b === void 0 ? void 0 : _b.call(_a);
+            (_c = item.onHoverStart) === null || _c === void 0 ? void 0 : _c.call(item);
+        }
+    };
+    const handleMouseLeave = () => {
+        var _a, _b, _c;
+        if (!item.disabled) {
+            (_b = (_a = iconRef.current) === null || _a === void 0 ? void 0 : _a.stopAnimation) === null || _b === void 0 ? void 0 : _b.call(_a);
+            (_c = item.onHoverEnd) === null || _c === void 0 ? void 0 : _c.call(item);
+        }
+    };
+    const content = (_jsxs(_Fragment, { children: [_jsxs("div", { className: "relative flex h-5 w-5 shrink-0 items-center justify-center", children: [_jsx(Icon, { ref: iconRef, size: 16 }), isCollapsed && item.badgeCount !== undefined ? (_jsx(CountBadge, { count: item.badgeCount, variant: item.badgeVariant, size: "sm", pulse: item.badgePulse, className: "absolute -right-2 -top-2" })) : null] }), !isCollapsed ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "flex-1 truncate text-left", children: item.label }), showWipBadge ? _jsx(Badge, { variant: "muted", children: "WIP" }) : null, item.trailing, item.badgeCount !== undefined ? (_jsx(CountBadge, { count: item.badgeCount, variant: item.badgeVariant, size: "md", pulse: item.badgePulse })) : null] })) : null] }));
+    const button = (_jsx(SidebarMenuButton, { onClick: item.onClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onFocus: handleMouseEnter, onBlur: handleMouseLeave, disabled: item.disabled, active: item.active, collapsed: isCollapsed, "aria-current": item.active ? "page" : undefined, children: content }));
+    const interactive = item.href && !item.disabled ? (_jsx(SidebarMenuButton, { asChild: true, onClick: item.onClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onFocus: handleMouseEnter, onBlur: handleMouseLeave, active: item.active, collapsed: isCollapsed, "aria-current": item.active ? "page" : undefined, children: _jsx("a", { href: item.href, target: item.target, rel: item.rel, children: content }) })) : (button);
+    if (isCollapsed) {
+        return (_jsx(Tooltip, { side: "right", content: _jsxs("p", { children: [item.label, showWipBadge ? " (WIP)" : ""] }), children: interactive }));
+    }
+    return interactive;
+}
+function DashboardSidebar({ className, children, logo, search, navGroups, footerItems, footer, toggleAriaLabel = "Toggle sidebar", ...props }) {
+    var _a;
+    const { isCollapsed, toggle } = useSidebar();
+    const hasStructuredSidebar = logo !== undefined ||
+        search !== undefined ||
+        navGroups !== undefined ||
+        footerItems !== undefined ||
+        footer !== undefined;
+    if (!hasStructuredSidebar) {
+        return (_jsx(SidebarShell, { isCollapsed: isCollapsed, className: className, ...props, children: children }));
+    }
+    return (_jsxs(SidebarShell, { isCollapsed: isCollapsed, className: className, ...props, children: [_jsxs(SidebarHeader, { className: cn("flex h-14 items-center gap-2", isCollapsed ? "justify-center px-2" : "justify-between px-3"), children: [renderSidebarSlot(logo, isCollapsed), _jsx(Button, { variant: "ghost", size: "icon", "aria-label": toggleAriaLabel, className: "h-7 w-7 shrink-0", onClick: toggle, children: isCollapsed ? (_jsx(ChevronRightIcon, { size: 16 })) : (_jsx(ChevronLeftIcon, { size: 16 })) })] }), search ? (_jsx(SidebarHeader, { className: "px-2 pb-3 pt-2", children: renderSidebarSlot(search, isCollapsed) })) : null, search || ((_a = navGroups === null || navGroups === void 0 ? void 0 : navGroups.length) !== null && _a !== void 0 ? _a : 0) > 0 ? (_jsx(SidebarHeader, { className: "mx-2 mb-2 border-t" })) : null, (navGroups === null || navGroups === void 0 ? void 0 : navGroups.length) ? (_jsx(SidebarContent, { className: "p-2", children: _jsx("nav", { "aria-label": "Sidebar navigation", children: navGroups.map((group, groupIndex) => {
+                        var _a;
+                        return (_jsxs(SidebarGroup, { children: [isCollapsed && groupIndex > 0 ? (_jsx("div", { className: "mx-2 my-2 border-t" })) : null, _jsxs("div", { className: cn(!isCollapsed && groupIndex > 0 && "mt-4"), children: [!isCollapsed && group.label ? (_jsx(SidebarGroupLabel, { children: group.label })) : null, _jsx(SidebarMenu, { children: group.items.map((item) => (_jsx(SidebarMenuItem, { children: _jsx(DashboardSidebarItem, { item: item, isCollapsed: isCollapsed }) }, item.id))) })] })] }, `${(_a = group.label) !== null && _a !== void 0 ? _a : "group"}-${groupIndex}`));
+                    }) }) })) : null, (footerItems === null || footerItems === void 0 ? void 0 : footerItems.length) ? (_jsx(SidebarFooter, { className: "px-2 py-1", children: _jsx(SidebarMenu, { children: footerItems.map((item) => (_jsx(SidebarMenuItem, { children: _jsx(DashboardSidebarItem, { item: item, isCollapsed: isCollapsed }) }, item.id))) }) })) : null, footer ? _jsx(SidebarFooter, { className: "mx-2 mt-2 border-t pt-2" }) : null, footer ? (_jsx(SidebarFooter, { children: renderSidebarSlot(footer, isCollapsed) })) : null] }));
+}
+function DashboardContent({ className, surfaceClassName, children, ...props }) {
+    const { isCollapsed, toggle } = useSidebar();
+    const handleContentClick = React.useCallback(() => {
+        if (!isCollapsed && window.innerWidth < COLLAPSE_BREAKPOINT) {
+            toggle();
+        }
+    }, [isCollapsed, toggle]);
+    return (_jsx("main", { onClick: handleContentClick, className: cn("flex min-w-0 flex-1 flex-col bg-[hsl(var(--layout-shell-background))] pb-[var(--layout-content-padding)] pl-[var(--layout-content-gap-start)] pr-[var(--layout-content-padding)] pt-[var(--layout-content-padding)] transition-all duration-300 md:pb-[var(--layout-content-padding-md)] md:pl-[var(--layout-content-gap-start-md)] md:pr-[var(--layout-content-padding-md)] md:pt-[var(--layout-content-padding-md)] lg:pb-[var(--layout-content-padding-lg)] lg:pl-[var(--layout-content-gap-start-lg)] lg:pr-[var(--layout-content-padding-lg)] lg:pt-[var(--layout-content-padding-lg)]", isCollapsed
+            ? "ml-[var(--layout-sidebar-collapsed-width)]"
+            : "ml-[var(--layout-sidebar-width)]", className), ...props, children: _jsx("div", { className: cn("flex flex-1 flex-col gap-[var(--layout-surface-gap)] overflow-x-clip rounded-[var(--radius-lg)] bg-background p-[var(--layout-surface-padding)] shadow-sm md:p-[var(--layout-surface-padding-md)] lg:p-[var(--layout-surface-padding-lg)]", surfaceClassName), children: children }) }));
+}
+export { DashboardLayout, DashboardSidebar, DashboardContent };

package/dist/otp-input.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { OTPInput } from "input-otp";
+export interface OtpInputProps extends Omit<React.ComponentProps<typeof OTPInput>, "children" | "className" | "containerClassName" | "maxLength" | "onChange" | "pasteTransformer" | "render" | "value"> {
+    label: React.ReactNode;
+    value: string;
+    onValueChange: (value: string) => void;
+    description?: React.ReactNode;
+    error?: React.ReactNode;
+    invalid?: boolean;
+    hideLabel?: boolean;
+    onClearError?: () => void;
+    length?: number;
+    className?: string;
+    groupClassName?: string;
+    slotClassName?: string;
+    labelClassName?: string;
+    descriptionClassName?: string;
+    errorClassName?: string;
+}
+declare const OtpInput: React.ForwardRefExoticComponent<Omit<OtpInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export { OtpInput };

package/dist/otp-input.js

@@ -0,0 +1,60 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { OTPInput, REGEXP_ONLY_DIGITS, } from "input-otp";
+import { Field, FieldDescription, FieldError, FieldLabel } from "./field";
+import { validateOtp } from "./input-validation";
+import { cn } from "./lib/utils";
+function OtpSlot({ slot, invalid, className, }) {
+    var _a, _b;
+    return (_jsxs("div", { "data-slot": "otp-slot", className: cn("relative flex size-9 items-center justify-center rounded-md border bg-transparent text-sm font-medium shadow-sm transition-[border-color,box-shadow,color] outline-none group-data-[disabled=true]/field:cursor-not-allowed group-data-[disabled=true]/field:bg-muted/30 group-data-[disabled=true]/field:text-muted-foreground group-data-[disabled=true]/field:opacity-50", invalid ? "border-destructive" : "border-input", slot.isActive &&
+            (invalid
+                ? "border-destructive ring-[3px] ring-destructive/20"
+                : "border-ring ring-[3px] ring-ring/50"), className), children: [_jsx("span", { className: cn("pointer-events-none", !slot.char && slot.placeholderChar ? "text-muted-foreground" : ""), children: (_b = (_a = slot.char) !== null && _a !== void 0 ? _a : slot.placeholderChar) !== null && _b !== void 0 ? _b : "" }), slot.hasFakeCaret ? (_jsx("span", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: _jsx("span", { className: "h-4 w-px animate-pulse bg-foreground" }) })) : null] }));
+}
+const OtpInput = React.forwardRef(({ label, value, onValueChange, description, error: externalError, invalid = false, hideLabel = false, onClearError, length = 6, className, groupClassName, slotClassName, labelClassName, descriptionClassName, errorClassName, id, disabled, onBlur, autoComplete = "one-time-code", inputMode = "numeric", pattern = REGEXP_ONLY_DIGITS, pushPasswordManagerStrategy = "none", "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedBy, ...props }, ref) => {
+    const [internalError, setInternalError] = React.useState();
+    const [touched, setTouched] = React.useState(false);
+    const validate = React.useMemo(() => validateOtp(length, "Verification code"), [length]);
+    const generatedId = React.useId();
+    const inputId = id !== null && id !== void 0 ? id : `otp-input-${generatedId}`;
+    const displayError = externalError !== null && externalError !== void 0 ? externalError : internalError;
+    const errorId = displayError ? `${inputId}-error` : undefined;
+    const showDescription = Boolean(description) && !displayError;
+    const descriptionId = showDescription ? `${inputId}-description` : undefined;
+    const isInvalid = invalid ||
+        ariaInvalid === true ||
+        ariaInvalid === "true" ||
+        Boolean(displayError);
+    const describedBy = [ariaDescribedBy, descriptionId, errorId]
+        .filter(Boolean)
+        .join(" ") || undefined;
+    const handleChange = React.useCallback((nextValue) => {
+        onValueChange(nextValue);
+        if (externalError) {
+            onClearError === null || onClearError === void 0 ? void 0 : onClearError();
+        }
+        if (touched) {
+            setInternalError(validate(nextValue));
+            return;
+        }
+        if (internalError) {
+            setInternalError(undefined);
+        }
+    }, [
+        externalError,
+        internalError,
+        onClearError,
+        onValueChange,
+        touched,
+        validate,
+    ]);
+    const handleBlur = React.useCallback((event) => {
+        setTouched(true);
+        setInternalError(validate(value));
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+    }, [onBlur, validate, value]);
+    return (_jsxs(Field, { className: className, "data-disabled": disabled ? "true" : undefined, "data-invalid": isInvalid ? "true" : undefined, children: [_jsx(FieldLabel, { htmlFor: inputId, className: cn(hideLabel && "sr-only", labelClassName), children: label }), _jsx(OTPInput, { ref: ref, id: inputId, value: value, onChange: handleChange, onBlur: handleBlur, disabled: disabled, maxLength: length, autoComplete: autoComplete, inputMode: inputMode, pattern: pattern, pushPasswordManagerStrategy: pushPasswordManagerStrategy, "aria-invalid": isInvalid ? "true" : undefined, "aria-describedby": describedBy, containerClassName: cn("flex w-full items-center gap-2", groupClassName), render: ({ slots }) => slots.map((slot, index) => (_jsx(OtpSlot, { slot: slot, invalid: isInvalid, className: slotClassName }, `${inputId}-${index}`))), ...props }), showDescription ? (_jsx(FieldDescription, { id: descriptionId, className: descriptionClassName, children: description })) : null, _jsx(FieldError, { id: errorId, className: errorClassName, children: displayError })] }));
+});
+OtpInput.displayName = "OtpInput";
+export { OtpInput };

package/dist/page-header.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+export interface PageHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    title: React.ReactNode;
+    subtitle?: React.ReactNode;
+    breadcrumbs?: React.ReactNode;
+    children?: React.ReactNode;
+}
+declare function PageHeader({ title, subtitle, breadcrumbs, children, className, ...props }: PageHeaderProps): import("react/jsx-runtime").JSX.Element;
+export { PageHeader };

package/dist/page-header.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Typography } from "./typography";
+function PageHeader({ title, subtitle, breadcrumbs, children, className, ...props }) {
+    return (_jsx("div", { className: className, ...props, children: _jsxs("div", { className: "flex items-center justify-between gap-4", children: [_jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [breadcrumbs ? _jsx("div", { className: "mb-1", children: breadcrumbs }) : null, _jsx("div", { className: "flex items-center gap-3", children: _jsx(Typography, { as: "h2", variant: "title", children: title }) }), subtitle ? (_jsx(Typography, { as: "p", variant: "caption", children: subtitle })) : null] }), children] }) }));
+}
+export { PageHeader };

package/dist/pagination.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+export interface PaginationProps extends React.HTMLAttributes<HTMLDivElement> {
+    currentPage: number;
+    totalPages: number;
+    totalItems: number;
+    itemsPerPage?: number;
+    onPageChange: (page: number) => void;
+    onItemsPerPageChange?: (itemsPerPage: number) => void;
+    itemsPerPageOptions?: number[];
+}
+declare function Pagination({ currentPage, totalPages, totalItems, itemsPerPage, onPageChange, onItemsPerPageChange, itemsPerPageOptions, className, ...props }: PaginationProps): import("react/jsx-runtime").JSX.Element;
+export { Pagination };

package/dist/pagination.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ChevronsLeft, ChevronsRight } from "lucide-react";
+import { ChevronLeftIcon } from "./animated-icons/chevron-left";
+import { ChevronRightIcon } from "./animated-icons/chevron-right";
+import { Button } from "./button";
+import { SelectContent, SelectItem, SelectRoot, SelectTrigger, SelectValue, } from "./select-primitive";
+import { cn } from "./lib/utils";
+const PaginationNav = React.forwardRef(({ className, ...props }, ref) => (_jsx("nav", { ref: ref, role: "navigation", "aria-label": "pagination", className: cn("flex w-full justify-center", className), ...props })));
+PaginationNav.displayName = "PaginationNav";
+const PaginationContent = React.forwardRef(({ className, ...props }, ref) => (_jsx("ul", { ref: ref, className: cn("flex flex-row items-center gap-1", className), ...props })));
+PaginationContent.displayName = "PaginationContent";
+const PaginationItem = React.forwardRef(({ className, ...props }, ref) => (_jsx("li", { ref: ref, className: cn("", className), ...props })));
+PaginationItem.displayName = "PaginationItem";
+function Pagination({ currentPage, totalPages, totalItems, itemsPerPage = 5, onPageChange, onItemsPerPageChange, itemsPerPageOptions = [5, 10, 20, 50, 100], className, ...props }) {
+    const normalizedTotalPages = totalPages || 1;
+    const startItem = totalItems === 0 ? 0 : (currentPage - 1) * itemsPerPage + 1;
+    const endItem = Math.min(currentPage * itemsPerPage, totalItems);
+    return (_jsxs("div", { className: cn("flex items-center justify-between gap-6", className), ...props, children: [_jsxs("div", { className: "text-sm text-muted-foreground", children: ["Showing ", startItem, "-", endItem, " out of ", totalItems] }), _jsxs("div", { className: "flex items-center gap-6", children: [onItemsPerPageChange ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm text-muted-foreground", children: "Rows per page" }), _jsxs(SelectRoot, { value: itemsPerPage.toString(), onValueChange: (value) => {
+                                    onItemsPerPageChange(Number(value));
+                                    onPageChange(1);
+                                }, children: [_jsx(SelectTrigger, { className: "h-8 w-[70px] text-sm", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: itemsPerPageOptions.map((option) => (_jsx(SelectItem, { value: option.toString(), children: option }, option))) })] })] })) : null, _jsxs("div", { className: "text-sm text-muted-foreground", children: ["Page ", currentPage, " of ", normalizedTotalPages] }), _jsx(PaginationNav, { className: "mx-0 w-auto justify-start", children: _jsxs(PaginationContent, { children: [_jsx(PaginationItem, { children: _jsx(Button, { type: "button", variant: "outline", size: "icon", className: "h-8 w-8", onClick: () => onPageChange(1), disabled: currentPage === 1, "aria-label": "Go to first page", children: _jsx(ChevronsLeft, { className: "h-4 w-4" }) }) }), _jsx(PaginationItem, { children: _jsx(Button, { type: "button", variant: "outline", size: "icon", className: "h-8 w-8", onClick: () => onPageChange(Math.max(1, currentPage - 1)), disabled: currentPage === 1, "aria-label": "Go to previous page", children: _jsx(ChevronLeftIcon, { size: 16 }) }) }), _jsx(PaginationItem, { children: _jsx(Button, { type: "button", variant: "outline", size: "icon", className: "h-8 w-8", onClick: () => onPageChange(Math.min(normalizedTotalPages, currentPage + 1)), disabled: currentPage === normalizedTotalPages || totalPages === 0, "aria-label": "Go to next page", children: _jsx(ChevronRightIcon, { size: 16 }) }) }), _jsx(PaginationItem, { children: _jsx(Button, { type: "button", variant: "outline", size: "icon", className: "h-8 w-8", onClick: () => onPageChange(normalizedTotalPages), disabled: currentPage === normalizedTotalPages || totalPages === 0, "aria-label": "Go to last page", children: _jsx(ChevronsRight, { className: "h-4 w-4" }) }) })] }) })] })] }));
+}
+export { Pagination };

package/dist/phone-input.d.ts

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { InputControl } from "./input-control";
+import { type Validator } from "./input-validation";
+export interface CountryCode {
+    code: string;
+    dialCode: string;
+    name: string;
+}
+export declare const DEFAULT_COUNTRY_CODES: CountryCode[];
+export interface PhoneInputProps extends Omit<React.ComponentProps<typeof InputControl>, "className" | "defaultValue" | "onChange" | "type" | "value"> {
+    label: React.ReactNode;
+    value: string;
+    onValueChange: (value: string) => void;
+    countryCode?: string;
+    onCountryCodeChange?: (code: string) => void;
+    error?: string;
+    invalid?: boolean;
+    description?: React.ReactNode;
+    hideLabel?: boolean;
+    onClearError?: () => void;
+    validators?: Validator[];
+    fieldName?: string;
+    validateOnChange?: boolean;
+    countryCodes?: CountryCode[];
+    defaultCountryCode?: string;
+    className?: string;
+    inputClassName?: string;
+    triggerClassName?: string;
+    contentClassName?: string;
+    labelClassName?: string;
+    descriptionClassName?: string;
+    errorClassName?: string;
+    countryCodeAriaLabel?: string;
+}
+declare function PhoneInput({ label, value, onValueChange, countryCode, onCountryCodeChange, error: externalError, invalid, description, hideLabel, onClearError, validators, required, fieldName, validateOnChange, countryCodes, defaultCountryCode, className, inputClassName, triggerClassName, contentClassName, labelClassName, descriptionClassName, errorClassName, countryCodeAriaLabel, id, disabled, onBlur, autoComplete, inputMode, placeholder, "aria-describedby": ariaDescribedBy, ...props }: PhoneInputProps): import("react/jsx-runtime").JSX.Element;
+export { PhoneInput };