@neasg/design-system 0.1.3 → 0.2.0

package/dist/drawer.d.ts

@@ -0,0 +1,30 @@
+import * as React from "react";
+import { type ButtonProps } from "./button";
+interface DrawerRenderHelpers {
+    close: () => void;
+}
+export type DrawerSide = "left" | "right";
+export interface DrawerAction extends Omit<ButtonProps, "children"> {
+    label: React.ReactNode;
+    closeOnClick?: boolean;
+}
+type DrawerRenderable = React.ReactNode | ((helpers: DrawerRenderHelpers) => React.ReactNode);
+export interface DrawerProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    modal?: boolean;
+    trigger?: React.ReactElement;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    children?: DrawerRenderable;
+    footer?: DrawerRenderable;
+    primaryAction?: DrawerAction;
+    secondaryAction?: DrawerAction;
+    side?: DrawerSide;
+    contentClassName?: string;
+    bodyClassName?: string;
+    hideCloseButton?: boolean;
+}
+declare function Drawer({ open, defaultOpen, onOpenChange, modal, trigger, title, description, children, footer, primaryAction, secondaryAction, side, contentClassName, bodyClassName, hideCloseButton, }: DrawerProps): import("react/jsx-runtime").JSX.Element;
+export { Drawer };

package/dist/drawer.js

@@ -0,0 +1,77 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { cva } from "class-variance-authority";
+import { XIcon } from "./animated-icons/x";
+import { Button } from "./button";
+import { DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogRoot, DialogTitle, DialogTrigger, } from "./dialog-primitive";
+import { cn } from "./lib/utils";
+function useControllableOpen({ open, defaultOpen, onOpenChange, }) {
+    const [internalOpen, setInternalOpen] = React.useState(defaultOpen !== null && defaultOpen !== void 0 ? defaultOpen : false);
+    const isControlled = open !== undefined;
+    const currentOpen = isControlled ? open : internalOpen;
+    const setOpen = React.useCallback((next) => {
+        if (!isControlled) {
+            setInternalOpen(next);
+        }
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(next);
+    }, [isControlled, onOpenChange]);
+    return [currentOpen, setOpen];
+}
+function resolveDrawerRenderable(value, helpers) {
+    if (typeof value === "function") {
+        return value(helpers);
+    }
+    return value;
+}
+function renderDrawerAction({ action, close, defaultVariant, }) {
+    const { label, onClick, closeOnClick = true, type = "button", variant = defaultVariant, ...buttonProps } = action;
+    return (_jsx(Button, { ...buttonProps, type: type, variant: variant, onClick: (event) => {
+            onClick === null || onClick === void 0 ? void 0 : onClick(event);
+            if (!event.defaultPrevented && closeOnClick) {
+                close();
+            }
+        }, children: label }));
+}
+const drawerSurfaceVariants = cva("fixed z-50 flex flex-col gap-4 overflow-y-auto bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out", {
+    variants: {
+        side: {
+            left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-lg",
+            right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-lg",
+        },
+    },
+    defaultVariants: {
+        side: "right",
+    },
+});
+function DrawerSurface({ side, className, children, hideCloseButton, ...props }) {
+    return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { className: cn(drawerSurfaceVariants({ side }), className), ...props, children: [children, !hideCloseButton ? (_jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 cursor-pointer rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [_jsx(XIcon, { size: 16 }), _jsx("span", { className: "sr-only", children: "Close" })] })) : null] })] }));
+}
+function Drawer({ open, defaultOpen, onOpenChange, modal, trigger, title, description, children, footer, primaryAction, secondaryAction, side = "right", contentClassName, bodyClassName, hideCloseButton, }) {
+    const [isOpen, setIsOpen] = useControllableOpen({
+        open,
+        defaultOpen,
+        onOpenChange,
+    });
+    const helpers = React.useMemo(() => ({
+        close: () => setIsOpen(false),
+    }), [setIsOpen]);
+    const body = resolveDrawerRenderable(children, helpers);
+    const customFooter = resolveDrawerRenderable(footer, helpers);
+    const hasFooter = Boolean(customFooter || primaryAction || secondaryAction);
+    return (_jsxs(DialogRoot, { open: isOpen, onOpenChange: setIsOpen, modal: modal, children: [trigger ? _jsx(DialogTrigger, { asChild: true, children: trigger }) : null, _jsxs(DrawerSurface, { side: side, className: contentClassName, hideCloseButton: hideCloseButton, children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: title }), description ? (_jsx(DialogDescription, { children: description })) : null] }), body ? _jsx("div", { className: cn("grid gap-4", bodyClassName), children: body }) : null, hasFooter ? (_jsx(DialogFooter, { className: "mt-auto", children: customFooter !== null && customFooter !== void 0 ? customFooter : (_jsxs(_Fragment, { children: [secondaryAction
+                                    ? renderDrawerAction({
+                                        action: secondaryAction,
+                                        close: helpers.close,
+                                        defaultVariant: "outline",
+                                    })
+                                    : null, primaryAction
+                                    ? renderDrawerAction({
+                                        action: primaryAction,
+                                        close: helpers.close,
+                                        defaultVariant: "default",
+                                    })
+                                    : null] })) })) : null] })] }));
+}
+export { Drawer };

package/dist/editable-table.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+export interface EditableTableColumn {
+    header: string;
+    path: string;
+    width?: string;
+    minWidth?: string;
+    maxWidth?: string;
+}
+export interface EditableTableRowActionContext {
+    row: Record<string, unknown>;
+    rowIndex: number;
+    rows: Record<string, unknown>[];
+    isEditing: boolean;
+    updateRow: (nextRow: Record<string, unknown>) => void;
+    insertRow: (nextRow: Record<string, unknown>, index?: number) => void;
+    removeRow: () => void;
+}
+export interface EditableTableProps {
+    value: Record<string, unknown>[];
+    onChange: (value: Record<string, unknown>[]) => void;
+    columns: EditableTableColumn[];
+    isEditing?: boolean;
+    className?: string;
+    emptyPlaceholder?: string;
+    renderRowActions?: (context: EditableTableRowActionContext) => React.ReactNode;
+}
+declare function EditableTable({ value, onChange, columns, isEditing, className, emptyPlaceholder, renderRowActions, }: EditableTableProps): import("react/jsx-runtime").JSX.Element;
+declare namespace EditableTable {
+    var displayName: string;
+}
+export { EditableTable };

package/dist/editable-table.js

@@ -0,0 +1,122 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Button } from "./button";
+import { PlusIcon } from "./animated-icons/plus";
+import { TrashIcon } from "./animated-icons/trash";
+import { InputControl } from "./input-control";
+import { TableRoot as Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "./table";
+import { cn } from "./lib/utils";
+function getNestedValue(obj, path) {
+    return path.split(".").reduce((acc, part) => {
+        if (acc && typeof acc === "object" && part in acc) {
+            return acc[part];
+        }
+        return undefined;
+    }, obj);
+}
+function setNestedValue(obj, path, value) {
+    const result = { ...obj };
+    const parts = path.split(".");
+    let current = result;
+    for (let index = 0; index < parts.length - 1; index += 1) {
+        const part = parts[index];
+        if (!(part in current) || typeof current[part] !== "object") {
+            current[part] = {};
+        }
+        else {
+            current[part] = { ...current[part] };
+        }
+        current = current[part];
+    }
+    current[parts[parts.length - 1]] = value;
+    return result;
+}
+function EditableTable({ value, onChange, columns, isEditing = false, className, emptyPlaceholder = "-", renderRowActions, }) {
+    const [editingCell, setEditingCell] = React.useState(null);
+    const [editValue, setEditValue] = React.useState("");
+    const inputRef = React.useRef(null);
+    const getColumnMaxWidth = React.useCallback((column) => { var _a; return (_a = column.maxWidth) !== null && _a !== void 0 ? _a : "320px"; }, []);
+    const getColumnMinWidth = React.useCallback((column) => { var _a; return (_a = column.minWidth) !== null && _a !== void 0 ? _a : `${Math.max(column.header.length + 4, 12)}ch`; }, []);
+    React.useEffect(() => {
+        if (editingCell && inputRef.current) {
+            inputRef.current.focus();
+            inputRef.current.select();
+        }
+    }, [editingCell]);
+    const handleCellClick = (rowIndex, colPath) => {
+        if (!isEditing) {
+            return;
+        }
+        const cellValue = getNestedValue(value[rowIndex], colPath);
+        setEditValue(cellValue !== undefined && cellValue !== null ? String(cellValue) : "");
+        setEditingCell({ rowIndex, colPath });
+    };
+    const commitEdit = () => {
+        if (!editingCell) {
+            return;
+        }
+        const { rowIndex, colPath } = editingCell;
+        const nextRows = [...value];
+        nextRows[rowIndex] = setNestedValue(nextRows[rowIndex], colPath, editValue);
+        onChange(nextRows);
+        setEditingCell(null);
+    };
+    const handleReplaceRow = React.useCallback((rowIndex, nextRow) => {
+        const nextRows = [...value];
+        nextRows[rowIndex] = nextRow;
+        onChange(nextRows);
+    }, [onChange, value]);
+    const handleInsertRow = React.useCallback((nextRow, index = value.length) => {
+        const nextRows = [...value];
+        nextRows.splice(index, 0, nextRow);
+        onChange(nextRows);
+    }, [onChange, value]);
+    const handleKeyDown = (event) => {
+        if (event.key === "Enter") {
+            commitEdit();
+            return;
+        }
+        if (event.key === "Escape") {
+            setEditingCell(null);
+        }
+    };
+    const handleAddRow = () => {
+        let nextRow = {};
+        columns.forEach((column) => {
+            nextRow = setNestedValue(nextRow, column.path, "");
+        });
+        handleInsertRow(nextRow);
+    };
+    const handleDeleteRow = React.useCallback((rowIndex) => {
+        onChange(value.filter((_, index) => index !== rowIndex));
+    }, [onChange, value]);
+    const formatCellValue = (cellValue) => {
+        if (cellValue === null || cellValue === undefined || cellValue === "") {
+            return emptyPlaceholder;
+        }
+        return String(cellValue);
+    };
+    const hasActionsColumn = isEditing || Boolean(renderRowActions);
+    return (_jsxs("div", { className: cn("space-y-2", className), children: [_jsx("div", { className: "rounded-md border", children: _jsxs(Table, { className: "table-fixed", children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [columns.map((column, index) => (_jsx(TableHead, { width: column.width, minWidth: getColumnMinWidth(column), children: _jsx("div", { className: "whitespace-nowrap", children: column.header }) }, `header-${index}`))), hasActionsColumn ? (_jsx(TableHead, { width: renderRowActions ? undefined : "56px", minWidth: renderRowActions ? "120px" : "56px" })) : null] }) }), _jsx(TableBody, { children: value.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: columns.length + (hasActionsColumn ? 1 : 0), className: "py-8 text-center text-muted-foreground", children: "No data available" }) })) : (value.map((row, rowIndex) => (_jsxs(TableRow, { className: rowIndex % 2 === 0 ? "bg-muted/30" : undefined, children: [columns.map((column, columnIndex) => {
+                                        const cellValue = getNestedValue(row, column.path);
+                                        const isEditingCell = (editingCell === null || editingCell === void 0 ? void 0 : editingCell.rowIndex) === rowIndex &&
+                                            (editingCell === null || editingCell === void 0 ? void 0 : editingCell.colPath) === column.path;
+                                        return (_jsx(TableCell, { className: cn("whitespace-normal", isEditing && "cursor-pointer hover:bg-muted/50"), minWidth: getColumnMinWidth(column), onClick: () => handleCellClick(rowIndex, column.path), children: isEditingCell ? (_jsx(InputControl, { ref: inputRef, value: editValue, onChange: (event) => setEditValue(event.target.value), onBlur: commitEdit, onKeyDown: handleKeyDown, className: "h-9 w-full text-sm" })) : (_jsx("span", { className: cn("block whitespace-normal break-words", cellValue === null ||
+                                                    cellValue === undefined ||
+                                                    cellValue === ""
+                                                    ? "text-muted-foreground"
+                                                    : undefined), style: { maxWidth: getColumnMaxWidth(column) }, children: formatCellValue(cellValue) })) }, `cell-${rowIndex}-${columnIndex}`));
+                                    }), hasActionsColumn ? (_jsx(TableCell, { children: _jsxs("div", { className: "flex items-center justify-end gap-1", children: [renderRowActions
+                                                    ? renderRowActions({
+                                                        row,
+                                                        rowIndex,
+                                                        rows: value,
+                                                        isEditing,
+                                                        updateRow: (nextRow) => handleReplaceRow(rowIndex, nextRow),
+                                                        insertRow: (nextRow, index = rowIndex + 1) => handleInsertRow(nextRow, index),
+                                                        removeRow: () => handleDeleteRow(rowIndex),
+                                                    })
+                                                    : null, isEditing ? (_jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "h-8 w-8 text-destructive hover:bg-destructive/10 hover:text-destructive", onClick: () => handleDeleteRow(rowIndex), "aria-label": `Delete row ${rowIndex + 1}`, children: _jsx(TrashIcon, { size: 16 }) })) : null] }) })) : null] }, `row-${rowIndex}`)))) })] }) }), isEditing ? (_jsxs(Button, { type: "button", variant: "outline", onClick: handleAddRow, className: "w-full justify-center", children: [_jsx(PlusIcon, { size: 16 }), "Add Row"] })) : null] }));
+}
+EditableTable.displayName = "EditableTable";
+export { EditableTable };

package/dist/email-input.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { type InputProps } from "./input";
+export interface EmailInputValidatorHelpers {
+    super: () => string | undefined;
+}
+export type EmailInputValidator = (value: string, helpers: EmailInputValidatorHelpers) => string | undefined;
+export interface EmailInputProps extends Omit<InputProps, "error" | "invalid" | "type"> {
+    error?: string;
+    invalid?: boolean;
+    onClearError?: () => void;
+    fieldName?: string;
+    validateOnChange?: boolean;
+    validator?: EmailInputValidator;
+}
+declare const EmailInput: React.ForwardRefExoticComponent<Omit<EmailInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export { EmailInput };

package/dist/email-input.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Input } from "./input";
+import { combineValidators, validateEmail, validateRequired, } from "./input-validation";
+const EmailInput = React.forwardRef(({ onChange, error: externalError, invalid = false, onClearError, required = false, fieldName = "Email address", validateOnChange = false, validator, onBlur, inputClassName, autoComplete = "email", placeholder = "name@example.com", ...props }, ref) => {
+    const [internalError, setInternalError] = React.useState();
+    const [touched, setTouched] = React.useState(false);
+    const validateBase = React.useMemo(() => {
+        const rules = [];
+        if (required) {
+            rules.push(validateRequired(fieldName));
+        }
+        rules.push(validateEmail);
+        return combineValidators(...rules);
+    }, [fieldName, required]);
+    const validate = React.useCallback((nextValue) => {
+        const runSuper = () => validateBase(nextValue);
+        if (validator) {
+            return validator(nextValue, { super: runSuper });
+        }
+        return runSuper();
+    }, [validateBase, validator]);
+    const handleChange = React.useCallback((event) => {
+        const nextValue = event.target.value;
+        onChange === null || onChange === void 0 ? void 0 : onChange(event);
+        if (externalError) {
+            onClearError === null || onClearError === void 0 ? void 0 : onClearError();
+        }
+        if (validateOnChange && touched) {
+            setInternalError(validate(nextValue));
+            return;
+        }
+        if (internalError) {
+            setInternalError(undefined);
+        }
+    }, [
+        externalError,
+        internalError,
+        onChange,
+        onClearError,
+        touched,
+        validate,
+        validateOnChange,
+    ]);
+    const handleBlur = React.useCallback((event) => {
+        const nextValue = event.currentTarget.value;
+        setTouched(true);
+        setInternalError(validate(nextValue));
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+    }, [onBlur, validate]);
+    const displayError = externalError !== null && externalError !== void 0 ? externalError : internalError;
+    return (_jsx(Input, { ref: ref, type: "email", onChange: handleChange, onBlur: handleBlur, placeholder: placeholder, autoComplete: autoComplete, required: required, error: displayError, invalid: invalid || Boolean(displayError), inputClassName: inputClassName, ...props }));
+});
+EmailInput.displayName = "EmailInput";
+export { EmailInput };

package/dist/empty-state.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
+    message: React.ReactNode;
+    description?: React.ReactNode;
+    icon?: React.ComponentType<{
+        className?: string;
+    }>;
+    action?: React.ReactNode;
+}
+declare function EmptyState({ message, description, icon: Icon, action, className, ...props }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
+export { EmptyState };

package/dist/empty-state.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "./lib/utils";
+import { Typography } from "./typography";
+function EmptyState({ message, description, icon: Icon, action, className, ...props }) {
+    return (_jsxs("div", { className: cn("flex flex-col items-center justify-center px-6 py-10 text-center", className), ...props, children: [Icon ? (_jsx(Icon, { className: "mb-4 h-5 w-5 text-muted-foreground/70" })) : null, _jsxs("div", { className: "space-y-1.5", children: [_jsx(Typography, { as: "p", variant: "bodySm", className: "font-semibold", children: message }), description ? (_jsx(Typography, { as: "p", variant: "caption", className: "max-w-md", children: description })) : null] }), action ? _jsx("div", { className: "pt-4", children: action }) : null] }));
+}
+export { EmptyState };

package/dist/field.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+declare function Field({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function FieldLabel({ className, ...props }: React.ComponentProps<"label">): import("react/jsx-runtime").JSX.Element;
+declare function FieldDescription({ className, ...props }: React.ComponentProps<"p">): import("react/jsx-runtime").JSX.Element;
+declare function FieldError({ className, ...props }: React.ComponentProps<"p">): import("react/jsx-runtime").JSX.Element | null;
+export { Field, FieldDescription, FieldError, FieldLabel };

package/dist/field.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "./lib/utils";
+function Field({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "field", className: cn("group/field flex w-full flex-col gap-2", className), ...props }));
+}
+function FieldLabel({ className, ...props }) {
+    return (_jsx("label", { "data-slot": "field-label", className: cn("text-sm font-medium leading-none group-data-[disabled=true]/field:cursor-not-allowed group-data-[disabled=true]/field:opacity-50 group-data-[invalid=true]/field:text-destructive", className), ...props }));
+}
+function FieldDescription({ className, ...props }) {
+    return (_jsx("p", { "data-slot": "field-description", className: cn("text-sm leading-normal text-muted-foreground", className), ...props }));
+}
+function FieldError({ className, ...props }) {
+    if (!props.children) {
+        return null;
+    }
+    return (_jsx("p", { role: "alert", "data-slot": "field-error", className: cn("text-sm leading-normal text-destructive", className), ...props }));
+}
+export { Field, FieldDescription, FieldError, FieldLabel };

package/dist/filter-toggle.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const filterToggleVariants: (props?: ({
+    variant?: "muted" | "default" | null | undefined;
+    selected?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface FilterToggleProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof filterToggleVariants> {
+    selected?: boolean;
+    icon?: React.ReactNode;
+}
+declare const FilterToggle: React.ForwardRefExoticComponent<FilterToggleProps & React.RefAttributes<HTMLButtonElement>>;
+export { FilterToggle, filterToggleVariants };

package/dist/filter-toggle.js

@@ -0,0 +1,23 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "./lib/utils";
+const filterToggleVariants = cva("inline-flex cursor-pointer select-none items-center justify-center gap-1.5 rounded-md border px-2.5 py-1 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", {
+    variants: {
+        variant: {
+            default: "",
+            muted: "",
+        },
+        selected: {
+            true: "border-transparent bg-primary/10 text-primary",
+            false: "border-transparent bg-muted text-muted-foreground hover:bg-muted/80",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        selected: false,
+    },
+});
+const FilterToggle = React.forwardRef(({ className, variant, selected = false, icon, children, ...props }, ref) => (_jsxs("button", { ref: ref, className: cn(filterToggleVariants({ variant, selected, className })), ...props, children: [icon, children] })));
+FilterToggle.displayName = "FilterToggle";
+export { FilterToggle, filterToggleVariants };

package/dist/index.d.ts

@@ -1,9 +1,58 @@
+export { Avatar, AvatarProfile, AvatarRoot, AvatarImage, AvatarFallback, } from "./avatar";
+export type { AvatarProps, AvatarProfileProps, AvatarRootProps, } from "./avatar";
+export * from "./animated-icons";
 export { Badge, badgeVariants } from "./badge";
 export type { BadgeProps } from "./badge";
+export { CountBadge } from "./count-badge";
+export type { CountBadgeProps } from "./count-badge";
+export { EmptyState } from "./empty-state";
+export type { EmptyStateProps } from "./empty-state";
+export { EditableTable } from "./editable-table";
+export type { EditableTableColumn, EditableTableProps, EditableTableRowActionContext, } from "./editable-table";
+export { EmailInput } from "./email-input";
+export type { EmailInputProps, EmailInputValidator, EmailInputValidatorHelpers, } from "./email-input";
+export { Input } from "./input";
+export type { InputProps } from "./input";
+export { Select } from "./select";
+export type { SelectOption, SelectProps } from "./select";
+export { DEFAULT_COUNTRY_CODES, PhoneInput, } from "./phone-input";
+export type { CountryCode, PhoneInputProps, } from "./phone-input";
+export { OtpInput } from "./otp-input";
+export type { OtpInputProps } from "./otp-input";
+export { LabelValue, isEmptyValue, } from "./label-value";
+export type { LabelValueProps, } from "./label-value";
+export { LabelValueGrid } from "./label-value-grid";
+export type { LabelValueGridItem, LabelValueGridProps, } from "./label-value-grid";
+export { Breadcrumb, BreadcrumbNav, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, } from "./breadcrumb";
+export type { BreadcrumbEntry, BreadcrumbProps } from "./breadcrumb";
 export { Button, buttonVariants } from "./button";
 export type { ButtonProps } from "./button";
-export { neaPalette, semanticColorTokens } from "./theme";
-export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, } from "./table";
-export { Tabs, TabsList, TabsTrigger, TabsContent, useTabsContext, } from "./tabs";
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "./tooltip";
+export { Dialog } from "./dialog";
+export type { DialogAction, DialogProps } from "./dialog";
+export { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator, CommandShortcut, } from "./command";
+export { CommandSearch, type CommandSearchFilter, type CommandSearchItem, type CommandSearchProps, type CommandSearchSection, } from "./command-search";
+export { SearchInput } from "./search-input";
+export type { SearchInputProps } from "./search-input";
+export { SearchHighlight, useSearchHighlight, } from "./use-search-highlight";
+export type { SearchHighlightProps, SearchHighlightSegment, } from "./use-search-highlight";
+export { Textarea } from "./textarea";
+export type { TextareaProps } from "./textarea";
+export { DraggableTabs, type DraggableTabItem, type DraggableTabsProps, } from "./draggable-tabs";
+export { Drawer, } from "./drawer";
+export type { DrawerAction, DrawerProps, DrawerSide } from "./drawer";
+export { DashboardLayout, DashboardSidebar, DashboardContent, SidebarProvider, useSidebar, } from "./layout";
+export type { DashboardSidebarNavGroup, DashboardSidebarNavItem, } from "./layout";
+export { PageHeader } from "./page-header";
+export { Typography, typographyVariants } from "./typography";
+export type { TypographyProps } from "./typography";
+export { neaPalette, semanticColorTokens, typographyTokens, radiusTokens, spacingTokens, layoutTokens, } from "./theme";
+export { neaDesignSystemContent, neaTailwindPreset, } from "./tailwind-preset";
+export { Pagination } from "./pagination";
+export type { PaginationProps } from "./pagination";
+export { TableToolbar } from "./table-toolbar";
+export type { TableToolbarProps } from "./table-toolbar";
+export { Table, TableRoot, TableContainer, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, TableRowSkeleton, TABLE_SKELETON_PRESETS, } from "./table";
+export type { TableColumn, TableProps, TableSortDirection, TableSortingProps, TableSkeletonConfig, TableRowSkeletonProps, } from "./table";
+export { Tabs, TabsRoot, type TabsItem, type TabsProps, TabsList, TabsTrigger, TabsContent, useTabsContext, } from "./tabs";
+export { Tooltip, TooltipRoot, TooltipTrigger, TooltipContent, TooltipProvider, type TooltipProps, } from "./tooltip";
 export { cn } from "./lib/utils";

package/dist/index.js

@@ -1,7 +1,34 @@
+export { Avatar, AvatarProfile, AvatarRoot, AvatarImage, AvatarFallback, } from "./avatar";
+export * from "./animated-icons";
 export { Badge, badgeVariants } from "./badge";
+export { CountBadge } from "./count-badge";
+export { EmptyState } from "./empty-state";
+export { EditableTable } from "./editable-table";
+export { EmailInput } from "./email-input";
+export { Input } from "./input";
+export { Select } from "./select";
+export { DEFAULT_COUNTRY_CODES, PhoneInput, } from "./phone-input";
+export { OtpInput } from "./otp-input";
+export { LabelValue, isEmptyValue, } from "./label-value";
+export { LabelValueGrid } from "./label-value-grid";
+export { Breadcrumb, BreadcrumbNav, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, } from "./breadcrumb";
 export { Button, buttonVariants } from "./button";
-export { neaPalette, semanticColorTokens } from "./theme";
-export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, } from "./table";
-export { Tabs, TabsList, TabsTrigger, TabsContent, useTabsContext, } from "./tabs";
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "./tooltip";
+export { Dialog } from "./dialog";
+export { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator, CommandShortcut, } from "./command";
+export { CommandSearch, } from "./command-search";
+export { SearchInput } from "./search-input";
+export { SearchHighlight, useSearchHighlight, } from "./use-search-highlight";
+export { Textarea } from "./textarea";
+export { DraggableTabs, } from "./draggable-tabs";
+export { Drawer, } from "./drawer";
+export { DashboardLayout, DashboardSidebar, DashboardContent, SidebarProvider, useSidebar, } from "./layout";
+export { PageHeader } from "./page-header";
+export { Typography, typographyVariants } from "./typography";
+export { neaPalette, semanticColorTokens, typographyTokens, radiusTokens, spacingTokens, layoutTokens, } from "./theme";
+export { neaDesignSystemContent, neaTailwindPreset, } from "./tailwind-preset";
+export { Pagination } from "./pagination";
+export { TableToolbar } from "./table-toolbar";
+export { Table, TableRoot, TableContainer, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, TableRowSkeleton, TABLE_SKELETON_PRESETS, } from "./table";
+export { Tabs, TabsRoot, TabsList, TabsTrigger, TabsContent, useTabsContext, } from "./tabs";
+export { Tooltip, TooltipRoot, TooltipTrigger, TooltipContent, TooltipProvider, } from "./tooltip";
 export { cn } from "./lib/utils";

package/dist/input-control.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+declare const inputControlClassName = "h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-[invalid=true]:border-destructive aria-[invalid=true]:ring-destructive/20 md:text-sm";
+declare const InputControl: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export { InputControl, inputControlClassName };

package/dist/input-control.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "./lib/utils";
+const inputControlClassName = "h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-[invalid=true]:border-destructive aria-[invalid=true]:ring-destructive/20 md:text-sm";
+const InputControl = React.forwardRef(({ className, type = "text", ...props }, ref) => (_jsx("input", { ref: ref, type: type, "data-slot": "input", className: cn(inputControlClassName, className), ...props })));
+InputControl.displayName = "InputControl";
+export { InputControl, inputControlClassName };

package/dist/input-validation.d.ts

@@ -0,0 +1,9 @@
+export type Validator = (value: string) => string | undefined;
+declare function validateRequired(fieldName?: string): Validator;
+declare const validateEmail: Validator;
+declare const validateGovernmentEmail: Validator;
+declare const validatePhone: Validator;
+declare const validatePhoneForCountry: (countryCode: string, fieldName?: string) => Validator;
+declare const validateOtp: (length: number, fieldName?: string) => Validator;
+declare function combineValidators(...validators: Validator[]): Validator;
+export { combineValidators, validateEmail, validateGovernmentEmail, validateOtp, validatePhone, validatePhoneForCountry, validateRequired, };

package/dist/input-validation.js

@@ -0,0 +1,75 @@
+import { parsePhoneNumberFromString, } from "libphonenumber-js";
+function validateRequired(fieldName = "This field") {
+    return (value) => {
+        if (!value.trim()) {
+            return `${fieldName} is required`;
+        }
+        return undefined;
+    };
+}
+const validateEmail = (value) => {
+    if (!value.trim()) {
+        return undefined;
+    }
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailRegex.test(value.trim())) {
+        return "Please enter a valid email address";
+    }
+    return undefined;
+};
+const validateGovernmentEmail = (value) => {
+    const emailError = validateEmail(value);
+    if (emailError) {
+        return emailError;
+    }
+    if (value && !value.trim().toLowerCase().endsWith(".gov.sg")) {
+        return "Only government emails (*.gov.sg) are allowed";
+    }
+    return undefined;
+};
+const validatePhone = (value) => {
+    if (!value.trim()) {
+        return undefined;
+    }
+    const cleaned = value.replace(/\s/g, "");
+    const phoneRegex = /^[0-9]{6,15}$/;
+    if (!phoneRegex.test(cleaned)) {
+        return "Please enter a valid phone number (digits only, 6-15 digits)";
+    }
+    return undefined;
+};
+const validatePhoneForCountry = (countryCode, fieldName = "Phone number") => {
+    return (value) => {
+        if (!value.trim()) {
+            return undefined;
+        }
+        const phoneNumber = parsePhoneNumberFromString(value, countryCode);
+        if (!phoneNumber || !phoneNumber.isValid()) {
+            return `Please enter a valid ${fieldName.toLowerCase()}`;
+        }
+        return undefined;
+    };
+};
+const validateOtp = (length, fieldName = "Verification code") => {
+    return (value) => {
+        if (!value.trim()) {
+            return undefined;
+        }
+        if (value.trim().length !== length) {
+            return `Please enter the complete ${fieldName.toLowerCase()}`;
+        }
+        return undefined;
+    };
+};
+function combineValidators(...validators) {
+    return (value) => {
+        for (const validator of validators) {
+            const error = validator(value);
+            if (error) {
+                return error;
+            }
+        }
+        return undefined;
+    };
+}
+export { combineValidators, validateEmail, validateGovernmentEmail, validateOtp, validatePhone, validatePhoneForCountry, validateRequired, };