@neasg/design-system 0.1.3 → 0.2.1

package/dist/phone-input.js

@@ -0,0 +1,135 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { getCountries, getCountryCallingCode } from "libphonenumber-js";
+import { Field, FieldDescription, FieldError, FieldLabel } from "./field";
+import { InputControl } from "./input-control";
+import { combineValidators, validatePhoneForCountry, validateRequired, } from "./input-validation";
+import { cn } from "./lib/utils";
+import { SelectContent, SelectGroup, SelectItem, SelectLabel, SelectRoot, SelectSeparator, SelectTrigger, } from "./select-primitive";
+const PINNED_COUNTRY_CODES = [
+    "SG",
+    "MY",
+    "ID",
+    "TH",
+    "VN",
+    "PH",
+    "IN",
+    "CN",
+    "JP",
+    "KR",
+    "AU",
+    "US",
+    "GB",
+];
+const pinnedCountryOrder = new Map(PINNED_COUNTRY_CODES.map((code, index) => [code, index]));
+const regionNames = typeof Intl !== "undefined" && typeof Intl.DisplayNames !== "undefined"
+    ? new Intl.DisplayNames(["en"], { type: "region" })
+    : undefined;
+export const DEFAULT_COUNTRY_CODES = getCountries()
+    .map((code) => {
+    var _a;
+    return ({
+        code,
+        dialCode: `+${getCountryCallingCode(code)}`,
+        name: (_a = regionNames === null || regionNames === void 0 ? void 0 : regionNames.of(code)) !== null && _a !== void 0 ? _a : code,
+    });
+})
+    .sort((left, right) => {
+    const leftPinnedIndex = pinnedCountryOrder.get(left.code);
+    const rightPinnedIndex = pinnedCountryOrder.get(right.code);
+    if (leftPinnedIndex !== undefined && rightPinnedIndex !== undefined) {
+        return leftPinnedIndex - rightPinnedIndex;
+    }
+    if (leftPinnedIndex !== undefined) {
+        return -1;
+    }
+    if (rightPinnedIndex !== undefined) {
+        return 1;
+    }
+    return left.name.localeCompare(right.name, "en");
+});
+function PhoneInput({ label, value, onValueChange, countryCode, onCountryCodeChange, error: externalError, invalid = false, description, hideLabel = false, onClearError, validators = [], required = false, fieldName = "Mobile number", validateOnChange = false, countryCodes = DEFAULT_COUNTRY_CODES, defaultCountryCode = "SG", className, inputClassName, triggerClassName, contentClassName, labelClassName, descriptionClassName, errorClassName, countryCodeAriaLabel = "Country code", id, disabled, onBlur, autoComplete = "tel-national", inputMode = "numeric", placeholder = "1234 5678", "aria-describedby": ariaDescribedBy, ...props }) {
+    var _a, _b;
+    const [internalError, setInternalError] = React.useState();
+    const [touched, setTouched] = React.useState(false);
+    const [selectedCountry, setSelectedCountry] = React.useState(countryCode !== null && countryCode !== void 0 ? countryCode : defaultCountryCode);
+    React.useEffect(() => {
+        setSelectedCountry(countryCode !== null && countryCode !== void 0 ? countryCode : defaultCountryCode);
+    }, [countryCode, defaultCountryCode]);
+    const fallbackCountry = (_a = countryCodes[0]) !== null && _a !== void 0 ? _a : {
+        code: defaultCountryCode,
+        dialCode: "",
+        name: defaultCountryCode,
+    };
+    const selectedCountryData = (_b = countryCodes.find((country) => country.code === selectedCountry)) !== null && _b !== void 0 ? _b : fallbackCountry;
+    const resolvedCountryCode = selectedCountryData.code;
+    const pinnedCountries = countryCodes.filter((country) => pinnedCountryOrder.has(country.code));
+    const otherCountries = countryCodes.filter((country) => !pinnedCountryOrder.has(country.code));
+    const showCountryGroups = pinnedCountries.length > 0 && otherCountries.length > 0;
+    const validate = React.useMemo(() => {
+        const rules = [];
+        if (required) {
+            rules.push(validateRequired(fieldName));
+        }
+        rules.push(validatePhoneForCountry(resolvedCountryCode, fieldName));
+        rules.push(...validators);
+        return combineValidators(...rules);
+    }, [fieldName, required, resolvedCountryCode, validators]);
+    const generatedId = React.useId();
+    const phoneId = id !== null && id !== void 0 ? id : `phone-input-${generatedId}`;
+    const errorId = externalError || internalError ? `${phoneId}-error` : undefined;
+    const displayError = externalError !== null && externalError !== void 0 ? externalError : internalError;
+    const showDescription = Boolean(description) && !displayError;
+    const descriptionId = showDescription ? `${phoneId}-description` : undefined;
+    const describedBy = [ariaDescribedBy, descriptionId, errorId].filter(Boolean).join(" ") ||
+        undefined;
+    const handlePhoneChange = React.useCallback((event) => {
+        const nextValue = event.target.value.replace(/[^\d\s]/g, "");
+        onValueChange(nextValue);
+        if (externalError) {
+            onClearError === null || onClearError === void 0 ? void 0 : onClearError();
+        }
+        if (validateOnChange && touched) {
+            setInternalError(validate(nextValue));
+            return;
+        }
+        if (internalError) {
+            setInternalError(undefined);
+        }
+    }, [
+        externalError,
+        internalError,
+        onClearError,
+        onValueChange,
+        touched,
+        validate,
+        validateOnChange,
+    ]);
+    const handleCountryChange = React.useCallback((nextCountryCode) => {
+        setSelectedCountry(nextCountryCode);
+        onCountryCodeChange === null || onCountryCodeChange === void 0 ? void 0 : onCountryCodeChange(nextCountryCode);
+        if (externalError) {
+            onClearError === null || onClearError === void 0 ? void 0 : onClearError();
+        }
+        if (touched) {
+            setInternalError(combineValidators(...(required ? [validateRequired(fieldName)] : []), validatePhoneForCountry(nextCountryCode, fieldName), ...validators)(value));
+        }
+    }, [
+        externalError,
+        fieldName,
+        onClearError,
+        onCountryCodeChange,
+        required,
+        touched,
+        validators,
+        value,
+    ]);
+    const handleBlur = React.useCallback((event) => {
+        setTouched(true);
+        setInternalError(validate(value));
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+    }, [onBlur, validate, value]);
+    const isInvalid = invalid || Boolean(displayError);
+    return (_jsxs(Field, { className: className, "data-disabled": disabled ? "true" : undefined, "data-invalid": isInvalid ? "true" : undefined, children: [_jsx(FieldLabel, { htmlFor: phoneId, className: cn(hideLabel && "sr-only", labelClassName), children: label }), _jsxs("div", { className: "flex gap-2", children: [_jsxs(SelectRoot, { value: resolvedCountryCode, onValueChange: handleCountryChange, disabled: disabled, children: [_jsx(SelectTrigger, { "aria-label": countryCodeAriaLabel, "aria-describedby": describedBy, "aria-invalid": isInvalid ? "true" : undefined, className: cn("w-[88px] shrink-0 px-2.5", triggerClassName), children: _jsx("span", { className: "font-medium tabular-nums", children: selectedCountryData.dialCode }) }), _jsxs(SelectContent, { className: cn("min-w-[240px]", contentClassName), children: [pinnedCountries.length > 0 ? (_jsxs(SelectGroup, { children: [showCountryGroups ? _jsx(SelectLabel, { children: "Common" }) : null, pinnedCountries.map((country) => (_jsx(SelectItem, { value: country.code, textValue: `${country.name} ${country.code} ${country.dialCode}`, children: _jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-3", children: [_jsx("span", { className: "min-w-0 flex-1 truncate", children: country.name }), _jsx("span", { className: "shrink-0 tabular-nums text-muted-foreground", children: country.dialCode })] }) }, country.code)))] })) : null, showCountryGroups ? _jsx(SelectSeparator, {}) : null, otherCountries.length > 0 ? (_jsxs(SelectGroup, { children: [showCountryGroups ? _jsx(SelectLabel, { children: "All Countries" }) : null, otherCountries.map((country) => (_jsx(SelectItem, { value: country.code, textValue: `${country.name} ${country.code} ${country.dialCode}`, children: _jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-3", children: [_jsx("span", { className: "min-w-0 flex-1 truncate", children: country.name }), _jsx("span", { className: "shrink-0 tabular-nums text-muted-foreground", children: country.dialCode })] }) }, country.code)))] })) : null, countryCodes.length === 0 ? (_jsx(SelectItem, { value: resolvedCountryCode, disabled: true, children: _jsx("span", { className: "text-muted-foreground", children: "No country codes available" }) })) : null] })] }), _jsx(InputControl, { id: phoneId, type: "tel", value: value, onChange: handlePhoneChange, onBlur: handleBlur, placeholder: placeholder, autoComplete: autoComplete, inputMode: inputMode, required: required, disabled: disabled, "aria-invalid": isInvalid ? "true" : undefined, "aria-describedby": describedBy, className: cn("flex-1", inputClassName), ...props })] }), showDescription ? (_jsx(FieldDescription, { id: descriptionId, className: descriptionClassName, children: description })) : null, _jsx(FieldError, { id: errorId, className: errorClassName, children: displayError })] }));
+}
+export { PhoneInput };

package/dist/right-drawer.d.ts

@@ -0,0 +1,2 @@
+export { Drawer as RightDrawer } from "./drawer";
+export type { DrawerAction as RightDrawerAction, DrawerProps as RightDrawerProps, } from "./drawer";

package/dist/right-drawer.js

@@ -0,0 +1 @@
+export { Drawer as RightDrawer } from "./drawer";

package/dist/search-input-shell.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+interface SearchInputShellProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    iconClassName?: string;
+    iconSize?: number;
+}
+declare function SearchInputShell({ children, className, iconClassName, iconSize, ...props }: SearchInputShellProps): import("react/jsx-runtime").JSX.Element;
+export { SearchInputShell };

package/dist/search-input-shell.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "./lib/utils";
+function SearchInputIcon({ className, size = 16, }) {
+    return (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: className, style: { width: size, height: size }, "aria-hidden": "true", children: [_jsx("circle", { cx: "11", cy: "11", r: "8" }), _jsx("path", { d: "m21 21-4.3-4.3" })] }));
+}
+function SearchInputShell({ children, className, iconClassName, iconSize = 14, ...props }) {
+    return (_jsxs("div", { className: cn("relative w-full", className), ...props, children: [_jsx(SearchInputIcon, { className: cn("pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground", iconClassName), size: iconSize }), children] }));
+}
+export { SearchInputShell };

package/dist/search-input.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { InputControl } from "./input-control";
+export interface SearchInputProps extends Omit<React.ComponentProps<typeof InputControl>, "onChange" | "type" | "value"> {
+    value: string;
+    onValueChange: (value: string) => void;
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    error?: React.ReactNode;
+    invalid?: boolean;
+    containerClassName?: string;
+    labelClassName?: string;
+    descriptionClassName?: string;
+    errorClassName?: string;
+    onSearch?: (value: string) => void;
+    searchDelay?: number;
+    searchOnChange?: boolean;
+    searchOnEnter?: boolean;
+}
+declare const SearchInput: React.ForwardRefExoticComponent<Omit<SearchInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export { SearchInput };

package/dist/search-input.js

@@ -0,0 +1,73 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { XIcon } from "./animated-icons/x";
+import { Field, FieldDescription, FieldError, FieldLabel } from "./field";
+import { InputControl } from "./input-control";
+import { cn } from "./lib/utils";
+import { SearchInputShell } from "./search-input-shell";
+const SearchInput = React.forwardRef(({ value, onValueChange, label = "Search", description, error, invalid = false, placeholder = "Search...", containerClassName, labelClassName, descriptionClassName, errorClassName, onSearch, searchDelay = 300, searchOnChange = true, searchOnEnter = true, className, id, disabled, onKeyDown, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedBy, ...props }, ref) => {
+    const searchTimeoutRef = React.useRef();
+    React.useEffect(() => {
+        return () => {
+            if (searchTimeoutRef.current) {
+                clearTimeout(searchTimeoutRef.current);
+            }
+        };
+    }, []);
+    const generatedId = React.useId();
+    const inputId = id !== null && id !== void 0 ? id : `search-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;
+    const runSearch = React.useCallback((nextValue) => {
+        if (!onSearch) {
+            return;
+        }
+        if (searchTimeoutRef.current) {
+            clearTimeout(searchTimeoutRef.current);
+            searchTimeoutRef.current = undefined;
+        }
+        onSearch(nextValue);
+    }, [onSearch]);
+    const scheduleSearch = React.useCallback((nextValue) => {
+        if (!onSearch || !searchOnChange) {
+            return;
+        }
+        if (searchTimeoutRef.current) {
+            clearTimeout(searchTimeoutRef.current);
+        }
+        if (searchDelay <= 0) {
+            onSearch(nextValue);
+            return;
+        }
+        searchTimeoutRef.current = setTimeout(() => {
+            onSearch(nextValue);
+            searchTimeoutRef.current = undefined;
+        }, searchDelay);
+    }, [onSearch, searchDelay, searchOnChange]);
+    const handleChange = React.useCallback((event) => {
+        const nextValue = event.target.value;
+        onValueChange(nextValue);
+        scheduleSearch(nextValue);
+    }, [onValueChange, scheduleSearch]);
+    const handleKeyDown = React.useCallback((event) => {
+        if (event.key === "Enter" && searchOnEnter) {
+            runSearch(event.currentTarget.value);
+        }
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+    }, [onKeyDown, runSearch, searchOnEnter]);
+    return (_jsxs(Field, { className: containerClassName, "data-disabled": disabled ? "true" : undefined, "data-invalid": isInvalid ? "true" : undefined, children: [_jsx(FieldLabel, { htmlFor: inputId, className: cn("sr-only", labelClassName), children: label }), _jsxs(SearchInputShell, { children: [_jsx(InputControl, { ref: ref, id: inputId, type: "text", placeholder: placeholder, value: value, onChange: handleChange, onKeyDown: handleKeyDown, disabled: disabled, "aria-invalid": isInvalid ? "true" : undefined, "aria-describedby": describedBy, className: cn("bg-background pl-9 pr-8", className), ...props }), value ? (_jsx("button", { type: "button", onClick: () => {
+                            onValueChange("");
+                            runSearch("");
+                        }, disabled: disabled, className: "absolute right-2 top-1/2 -translate-y-1/2 rounded-sm p-0.5 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none", "aria-label": "Clear search", children: _jsx(XIcon, { size: 14 }) })) : null] }), showDescription ? (_jsx(FieldDescription, { id: descriptionId, className: descriptionClassName, children: description })) : null, _jsx(FieldError, { id: errorId, className: errorClassName, children: error })] }));
+});
+SearchInput.displayName = "SearchInput";
+export { SearchInput };

package/dist/select-primitive.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+declare function SelectRoot(props: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function SelectGroup(props: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
+declare function SelectValue(props: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Value>): import("react/jsx-runtime").JSX.Element;
+declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface SelectContentProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> {
+    header?: React.ReactNode;
+    viewportClassName?: string;
+}
+declare const SelectContent: React.ForwardRefExoticComponent<SelectContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { SelectContent, SelectGroup, SelectItem, SelectLabel, SelectRoot, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };

package/dist/select-primitive.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+import { cn } from "./lib/utils";
+function SelectRoot(props) {
+    return _jsx(SelectPrimitive.Root, { "data-slot": "select", ...props });
+}
+function SelectGroup(props) {
+    return _jsx(SelectPrimitive.Group, { "data-slot": "select-group", ...props });
+}
+function SelectValue(props) {
+    return _jsx(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
+}
+const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Trigger, { ref: ref, "data-slot": "select-trigger", className: cn("flex h-10 w-full cursor-pointer items-center justify-between gap-2 whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid=true]:border-destructive aria-[invalid=true]:ring-destructive/20 data-[placeholder]:text-muted-foreground [&>span]:line-clamp-1 [&_svg]:pointer-events-none [&_svg]:shrink-0", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDown, { className: "h-4 w-4 shrink-0 opacity-50" }) })] })));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.ScrollUpButton, { ref: ref, "data-slot": "select-scroll-up-button", className: cn("flex cursor-pointer items-center justify-center py-1", className), ...props, children: _jsx(ChevronUp, { className: "h-4 w-4" }) })));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.ScrollDownButton, { ref: ref, "data-slot": "select-scroll-down-button", className: cn("flex cursor-pointer items-center justify-center py-1", className), ...props, children: _jsx(ChevronDown, { className: "h-4 w-4" }) })));
+SelectScrollDownButton.displayName =
+    SelectPrimitive.ScrollDownButton.displayName;
+const SelectContent = React.forwardRef(({ className, children, header, position = "popper", viewportClassName, ...props }, ref) => (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { ref: ref, "data-slot": "select-content", className: cn("relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className), position: position, ...props, children: [header ? _jsx("div", { className: "border-b p-1", children: header }) : null, _jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.Viewport, { className: cn("p-1", position === "popper" &&
+                    "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]", viewportClassName), children: children }), _jsx(SelectScrollDownButton, {})] }) })));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Label, { ref: ref, "data-slot": "select-label", className: cn("px-2 py-1.5 text-xs text-muted-foreground", className), ...props })));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Item, { ref: ref, "data-slot": "select-item", className: cn("relative flex w-full cursor-pointer select-none items-center gap-2 rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), ...props, children: [_jsx("span", { "data-slot": "select-item-indicator", className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(Check, { className: "h-4 w-4" }) }) }), _jsx(SelectPrimitive.ItemText, { className: "break-words", children: children })] })));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Separator, { ref: ref, "data-slot": "select-separator", className: cn("-mx-1 my-1 h-px bg-border", className), ...props })));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+export { SelectContent, SelectGroup, SelectItem, SelectLabel, SelectRoot, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };

package/dist/select.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+import { SelectRoot } from "./select-primitive";
+export interface SelectOption {
+    label: React.ReactNode;
+    value: string;
+    disabled?: boolean;
+    group?: string;
+    textValue?: string;
+}
+export interface SelectProps extends Pick<React.ComponentProps<typeof SelectRoot>, "defaultOpen" | "defaultValue" | "disabled" | "name" | "onOpenChange" | "onValueChange" | "open" | "required" | "value"> {
+    label: React.ReactNode;
+    options: SelectOption[];
+    placeholder?: string;
+    description?: React.ReactNode;
+    error?: React.ReactNode;
+    invalid?: boolean;
+    hideLabel?: boolean;
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    searchEmptyMessage?: React.ReactNode;
+    searchInputAriaLabel?: string;
+    className?: string;
+    triggerClassName?: string;
+    contentClassName?: string;
+    labelClassName?: string;
+    descriptionClassName?: string;
+    errorClassName?: string;
+    id?: string;
+}
+declare function Select({ label, options, placeholder, description, error, invalid, hideLabel, searchable, searchPlaceholder, searchEmptyMessage, searchInputAriaLabel, className, triggerClassName, contentClassName, labelClassName, descriptionClassName, errorClassName, id, disabled, open, onOpenChange, ...props }: SelectProps): import("react/jsx-runtime").JSX.Element;
+export { Select };

package/dist/select.js

@@ -0,0 +1,97 @@
+"use client";
+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";
+import { SearchHighlight } from "./use-search-highlight";
+import { SelectContent, SelectGroup, SelectItem, SelectLabel, SelectRoot, SelectSeparator, SelectTrigger, SelectValue, } from "./select-primitive";
+function groupOptions(options) {
+    const groups = [];
+    options.forEach((option) => {
+        const existingGroup = groups.find((group) => group.group === option.group);
+        if (existingGroup) {
+            existingGroup.options.push(option);
+            return;
+        }
+        groups.push({
+            group: option.group,
+            options: [option],
+        });
+    });
+    return groups;
+}
+function getOptionTextValue(option) {
+    if (option.textValue) {
+        return option.textValue;
+    }
+    if (typeof option.label === "string" || typeof option.label === "number") {
+        return String(option.label);
+    }
+    return option.value;
+}
+function renderHighlightedLabel(label, query) {
+    if (!query.trim()) {
+        return label;
+    }
+    if (typeof label === "string" || typeof label === "number") {
+        return _jsx(SearchHighlight, { text: String(label), query: query });
+    }
+    return label;
+}
+function Select({ label, options, placeholder = "Select an option", description, error, invalid = false, hideLabel = false, searchable = false, searchPlaceholder = "Search options...", searchEmptyMessage = "No options found.", searchInputAriaLabel = "Search options", className, triggerClassName, contentClassName, labelClassName, descriptionClassName, errorClassName, id, disabled, open, onOpenChange, ...props }) {
+    const generatedId = React.useId();
+    const selectId = id !== null && id !== void 0 ? id : `select-${generatedId}`;
+    const searchInputRef = React.useRef(null);
+    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
+    const [searchQuery, setSearchQuery] = React.useState("");
+    const errorId = error ? `${selectId}-error` : undefined;
+    const showDescription = Boolean(description) && !error;
+    const descriptionId = showDescription ? `${selectId}-description` : undefined;
+    const isInvalid = invalid || Boolean(error);
+    const isOpen = open !== null && open !== void 0 ? open : uncontrolledOpen;
+    const normalizedSearchQuery = searchQuery.trim().toLowerCase();
+    const filteredOptions = searchable && normalizedSearchQuery
+        ? options.filter((option) => [
+            getOptionTextValue(option),
+            option.value,
+            option.group,
+        ]
+            .filter(Boolean)
+            .some((value) => String(value).toLowerCase().includes(normalizedSearchQuery)))
+        : options;
+    const optionGroups = groupOptions(filteredOptions);
+    const hasVisibleOptions = filteredOptions.length > 0;
+    React.useEffect(() => {
+        if (!isOpen) {
+            setSearchQuery("");
+            return;
+        }
+        if (!searchable) {
+            return;
+        }
+        const animationFrame = window.requestAnimationFrame(() => {
+            var _a;
+            (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        });
+        return () => {
+            window.cancelAnimationFrame(animationFrame);
+        };
+    }, [isOpen, searchable]);
+    const handleOpenChange = React.useCallback((nextOpen) => {
+        if (open === undefined) {
+            setUncontrolledOpen(nextOpen);
+        }
+        if (!nextOpen) {
+            setSearchQuery("");
+        }
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(nextOpen);
+    }, [onOpenChange, open]);
+    return (_jsxs(Field, { className: className, "data-disabled": disabled ? "true" : undefined, "data-invalid": isInvalid ? "true" : undefined, children: [_jsx(FieldLabel, { htmlFor: selectId, className: cn(hideLabel && "sr-only", labelClassName), children: label }), _jsxs(SelectRoot, { disabled: disabled, open: open, onOpenChange: handleOpenChange, ...props, children: [_jsx(SelectTrigger, { id: selectId, className: triggerClassName, "aria-invalid": isInvalid ? "true" : undefined, "aria-describedby": [descriptionId, errorId].filter(Boolean).join(" ") || undefined, children: _jsx(SelectValue, { placeholder: placeholder }) }), _jsx(SelectContent, { className: contentClassName, header: searchable ? (_jsx(InputControl, { ref: searchInputRef, value: searchQuery, onChange: (event) => setSearchQuery(event.target.value), placeholder: searchPlaceholder, "aria-label": searchInputAriaLabel, autoComplete: "off", className: "h-8 border-0 bg-transparent px-2 py-0 text-sm shadow-none focus-visible:border-0 focus-visible:ring-0", onKeyDown: (event) => {
+                                event.stopPropagation();
+                            } })) : undefined, viewportClassName: searchable ? "max-h-64" : undefined, children: hasVisibleOptions ? (optionGroups.map((group, groupIndex) => {
+                            var _a;
+                            return (_jsxs(React.Fragment, { children: [_jsxs(SelectGroup, { children: [group.group ? (_jsx(SelectLabel, { children: _jsx(SearchHighlight, { text: group.group, query: searchQuery }) })) : null, group.options.map((option) => (_jsx(SelectItem, { value: option.value, disabled: option.disabled, textValue: getOptionTextValue(option), children: renderHighlightedLabel(option.label, searchQuery) }, option.value)))] }), groupIndex < optionGroups.length - 1 ? _jsx(SelectSeparator, {}) : null] }, (_a = group.group) !== null && _a !== void 0 ? _a : `group-${groupIndex}`));
+                        })) : (_jsx("div", { className: "px-3 py-6 text-sm text-muted-foreground", children: searchEmptyMessage })) })] }), showDescription ? (_jsx(FieldDescription, { id: descriptionId, className: descriptionClassName, children: description })) : null, _jsx(FieldError, { id: errorId, className: errorClassName, children: error })] }));
+}
+export { Select };

package/dist/styles.css

@@ -4,6 +4,17 @@
 
 @layer base {
   :root {
+    --space-0: 0rem;
+    --space-1: 0.25rem;
+    --space-2: 0.5rem;
+    --space-3: 0.75rem;
+    --space-4: 1rem;
+    --space-5: 1.25rem;
+    --space-6: 1.5rem;
+    --space-8: 2rem;
+    --space-10: 2.5rem;
+    --space-12: 3rem;
+
     --nea-green-50: 140 57% 96%;
     --nea-green-100: 141 50% 90%;
     --nea-green-200: 142 45% 80%;
@@ -15,6 +26,50 @@
     --nea-green-800: 145 100% 21%;
     --nea-green-900: 146 100% 15%;
 
+    --nea-blue-50: 214 100% 97%;
+    --nea-blue-100: 214 95% 93%;
+    --nea-blue-200: 213 97% 87%;
+    --nea-blue-300: 213 97% 78%;
+    --nea-blue-400: 213 94% 68%;
+    --nea-blue-500: 217 91% 60%;
+    --nea-blue-600: 221 83% 53%;
+    --nea-blue-700: 224 76% 48%;
+    --nea-blue-800: 226 71% 40%;
+    --nea-blue-900: 224 64% 33%;
+
+    --nea-amber-50: 48 100% 96%;
+    --nea-amber-100: 48 96% 89%;
+    --nea-amber-200: 48 97% 77%;
+    --nea-amber-300: 43 96% 66%;
+    --nea-amber-400: 43 96% 56%;
+    --nea-amber-500: 38 92% 50%;
+    --nea-amber-600: 32 95% 44%;
+    --nea-amber-700: 26 90% 37%;
+    --nea-amber-800: 22 82% 31%;
+    --nea-amber-900: 22 78% 26%;
+
+    --nea-red-50: 0 86% 97%;
+    --nea-red-100: 0 93% 94%;
+    --nea-red-200: 0 96% 89%;
+    --nea-red-300: 0 94% 82%;
+    --nea-red-400: 0 91% 71%;
+    --nea-red-500: 0 84% 60%;
+    --nea-red-600: 0 72% 51%;
+    --nea-red-700: 0 74% 42%;
+    --nea-red-800: 0 74% 35%;
+    --nea-red-900: 0 63% 31%;
+
+    --nea-violet-50: 250 100% 98%;
+    --nea-violet-100: 250 100% 97%;
+    --nea-violet-200: 252 96% 90%;
+    --nea-violet-300: 252 95% 85%;
+    --nea-violet-400: 255 92% 76%;
+    --nea-violet-500: 258 90% 66%;
+    --nea-violet-600: 263 89% 60%;
+    --nea-violet-700: 263 84% 50%;
+    --nea-violet-800: 263 70% 42%;
+    --nea-violet-900: 264 69% 35%;
+
     --nea-neutral-0: 0 0% 100%;
     --nea-neutral-50: 210 20% 98%;
     --nea-neutral-100: 210 18% 96%;
@@ -27,6 +82,16 @@
     --nea-neutral-800: 222 36% 11%;
     --nea-neutral-900: 222 84% 5%;
 
+    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+      "Segoe UI", sans-serif;
+    --font-mono: "SFMono-Regular", "SF Mono", ui-monospace, Menlo, Monaco, Consolas,
+      "Liberation Mono", "Courier New", monospace;
+    --font-size-root: 14px;
+    --font-weight-regular: 400;
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+
     --background: var(--nea-neutral-0);
     --foreground: var(--nea-neutral-900);
 
@@ -51,11 +116,42 @@
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 210 40% 98%;
 
+    --status-success: var(--nea-green-100);
+    --status-success-foreground: var(--nea-green-800);
+    --status-warning: var(--nea-amber-100);
+    --status-warning-foreground: var(--nea-amber-800);
+    --status-info: var(--nea-blue-100);
+    --status-info-foreground: var(--nea-blue-800);
+    --status-accent: var(--nea-violet-100);
+    --status-accent-foreground: var(--nea-violet-800);
+    --status-destructive: var(--nea-red-100);
+    --status-destructive-foreground: var(--nea-red-800);
+
     --border: var(--nea-neutral-200);
     --input: var(--nea-neutral-200);
     --ring: var(--nea-green-700);
 
     --radius: 0.5rem;
+    --radius-sm: calc(var(--radius) - 4px);
+    --radius-md: calc(var(--radius) - 2px);
+    --radius-lg: var(--radius);
+    --radius-xl: calc(var(--radius) + 4px);
+
+    --layout-shell-background: 223 30% 95.5%;
+    --layout-sidebar-width: 18rem;
+    --layout-sidebar-collapsed-width: 4rem;
+    --layout-sidebar-padding-inline: var(--space-2);
+    --layout-sidebar-padding-top: var(--space-3);
+    --layout-content-gap-start: var(--space-2);
+    --layout-content-gap-start-md: var(--space-3);
+    --layout-content-gap-start-lg: var(--space-4);
+    --layout-content-padding: var(--space-4);
+    --layout-content-padding-md: var(--space-6);
+    --layout-content-padding-lg: var(--space-8);
+    --layout-surface-padding: var(--space-4);
+    --layout-surface-padding-md: var(--space-6);
+    --layout-surface-padding-lg: var(--space-8);
+    --layout-surface-gap: var(--space-6);
   }
 
   .dark {
@@ -83,6 +179,17 @@
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 210 40% 98%;
 
+    --status-success: var(--nea-green-900);
+    --status-success-foreground: var(--nea-green-300);
+    --status-warning: var(--nea-amber-900);
+    --status-warning-foreground: var(--nea-amber-300);
+    --status-info: var(--nea-blue-900);
+    --status-info-foreground: var(--nea-blue-300);
+    --status-accent: var(--nea-violet-900);
+    --status-accent-foreground: var(--nea-violet-300);
+    --status-destructive: var(--nea-red-900);
+    --status-destructive-foreground: var(--nea-red-300);
+
     --border: 217.2 32.6% 17.5%;
     --input: 217.2 32.6% 17.5%;
     --ring: 212.7 26.8% 83.9%;
@@ -93,10 +200,13 @@
   }
 
   html {
-    font-size: 14px;
+    font-size: var(--font-size-root);
+    font-family: var(--font-sans);
   }
 
   body {
     @apply bg-background text-foreground;
+    font-family: var(--font-sans);
+    font-weight: var(--font-weight-regular);
   }
 }

package/dist/table-toolbar.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { type SearchInputProps } from "./search-input";
+export interface TableToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
+    search?: SearchInputProps;
+}
+declare function TableToolbar({ search, className, children, ...props }: TableToolbarProps): import("react/jsx-runtime").JSX.Element;
+export { TableToolbar };

package/dist/table-toolbar.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SearchInput } from "./search-input";
+import { cn } from "./lib/utils";
+function TableToolbar({ search, className, children, ...props }) {
+    return (_jsxs("div", { className: cn("flex flex-wrap items-center gap-2", className), ...props, children: [search ? (_jsx(SearchInput, { ...search, containerClassName: cn("min-w-[200px] flex-1 max-w-md", search.containerClassName) })) : null, children] }));
+}
+export { TableToolbar };