@neasg/design-system 0.2.0 → 0.3.0

package/README.md

@@ -125,15 +125,28 @@ One-time setup:
 
 Release flow:
 
-```bash
-npm version patch   # 0.2.0 → 0.2.1
-npm version minor   # 0.2.0 → 0.3.0
-npm version major   # 0.2.0 → 1.0.0
-npm version 0.5.0   # set an exact version
-git push origin main --follow-tags
-```
-
-Pushing a `v*` tag triggers `.github/workflows/publish.yml`, which runs tests, builds the package, and publishes it to npm.
+1. Make sure all your changes are committed and pushed to `main`.
+2. Bump the version — this updates `package.json` and creates a git tag automatically:
+   ```bash
+   npm version patch   # 0.2.0 → 0.2.1
+   npm version minor   # 0.2.0 → 0.3.0
+   npm version major   # 0.2.0 → 1.0.0
+   npm version 0.5.0   # set an exact version
+   ```
+3. Push the commit and tag together:
+   ```bash
+   git push origin main --follow-tags
+   ```
+4. The `v*` tag triggers `.github/workflows/publish.yml`, which runs tests, builds, and publishes to npm.
+
+> **Note:** If GPG signing fails on step 2, you can do it manually:
+> ```bash
+> npm version 0.2.0 --no-git-tag-version
+> git add package.json package-lock.json
+> git commit -m "0.2.0"
+> git tag v0.2.0
+> git push origin main --follow-tags
+> ```
 
 ## Storybook Deployment
 

package/dist/badge.d.ts

@@ -9,6 +9,8 @@ declare const badgeVariants: (props?: ({
  * surface the full label via `title`.
  */
 export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+    /** Show a visible border matching the badge colour. */
+    bordered?: boolean;
 }
-declare function Badge({ className, variant, children, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+declare function Badge({ className, variant, bordered, children, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
 export { Badge, badgeVariants };

package/dist/badge.js

@@ -19,12 +19,23 @@ const badgeVariants = cva("inline-flex max-w-[200px] items-center justify-center
         variant: "secondary",
     },
 });
-function Badge({ className, variant, children, ...props }) {
+function Badge({ className, variant, bordered = false, children, ...props }) {
     const textContent = typeof children === "string"
         ? children
         : React.Children.toArray(children)
             .filter((child) => typeof child === "string")
             .join("");
-    return (_jsx("div", { className: cn(badgeVariants({ variant }), className), title: textContent || undefined, ...props, children: children }));
+    const resolvedVariant = variant !== null && variant !== void 0 ? variant : "secondary";
+    const borderedClasses = {
+        secondary: "border-secondary-foreground/30",
+        muted: "border-muted-foreground/30",
+        destructive: "border-[hsl(var(--status-destructive-foreground))]/30",
+        outline: "border-foreground/30",
+        success: "border-[hsl(var(--status-success-foreground))]/30",
+        warning: "border-[hsl(var(--status-warning-foreground))]/30",
+        info: "border-[hsl(var(--status-info-foreground))]/30",
+        accent: "border-[hsl(var(--status-accent-foreground))]/30",
+    };
+    return (_jsx("div", { className: cn(badgeVariants({ variant }), bordered && borderedClasses[resolvedVariant], className), title: textContent || undefined, ...props, children: children }));
 }
 export { Badge, badgeVariants };

package/dist/button.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const buttonVariants: (props?: ({
     variant?: "link" | "default" | "outline" | "secondary" | "destructive" | "ghost" | null | undefined;
-    size?: "default" | "sm" | "icon" | "lg" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     /**

package/dist/button.js

@@ -14,10 +14,10 @@ const buttonVariants = cva("inline-flex cursor-pointer items-center justify-cent
             link: "text-primary underline-offset-4 hover:underline",
         },
         size: {
-            default: "h-9 px-4 py-2 [&_svg]:h-4 [&_svg]:w-4",
-            sm: "h-8 rounded-md px-3 text-xs [&_svg]:h-4 [&_svg]:w-4",
-            lg: "h-10 rounded-md px-8 [&_svg]:h-5 [&_svg]:w-5",
-            icon: "h-9 w-9 [&_svg]:h-4 [&_svg]:w-4",
+            default: "h-10 px-4 py-2 [&_svg]:h-4 [&_svg]:w-4",
+            sm: "h-9 rounded-md px-3 text-xs [&_svg]:h-4 [&_svg]:w-4",
+            lg: "h-11 rounded-md px-8 [&_svg]:h-5 [&_svg]:w-5",
+            icon: "h-10 w-10 [&_svg]:h-4 [&_svg]:w-4",
         },
     },
     defaultVariants: {

package/dist/calendar.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { DayButton, DayPicker } from "react-day-picker";
+import { Button } from "./button";
+declare function CalendarDayButton({ className, day, modifiers, children, disabled, onClick, onFocus, onBlur, onKeyDown, onMouseEnter, onMouseLeave, tabIndex, type, "aria-label": ariaLabel, "aria-pressed": ariaPressed, "aria-selected": ariaSelected, }: React.ComponentProps<typeof DayButton>): import("react/jsx-runtime").JSX.Element;
+declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, ...props }: React.ComponentProps<typeof DayPicker> & {
+    buttonVariant?: React.ComponentProps<typeof Button>["variant"];
+}): import("react/jsx-runtime").JSX.Element;
+export { Calendar, CalendarDayButton };

package/dist/calendar.js

@@ -0,0 +1,80 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { DayPicker, getDefaultClassNames } from "react-day-picker";
+import { buttonVariants } from "./button";
+import { cn } from "./lib/utils";
+function CalendarDayButton({ className, day, modifiers, children, disabled, onClick, onFocus, onBlur, onKeyDown, onMouseEnter, onMouseLeave, tabIndex, type, "aria-label": ariaLabel, "aria-pressed": ariaPressed, "aria-selected": ariaSelected, }) {
+    const defaultClassNames = getDefaultClassNames();
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        var _a;
+        if (modifiers.focused)
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [modifiers.focused]);
+    return (_jsx("button", { ref: ref, type: type, disabled: disabled, onClick: onClick, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, tabIndex: tabIndex, "aria-label": ariaLabel, "aria-pressed": ariaPressed, "aria-selected": ariaSelected, "data-day": day.date.toLocaleDateString(), "data-selected-single": modifiers.selected &&
+            !modifiers.range_start &&
+            !modifiers.range_end &&
+            !modifiers.range_middle, "data-range-start": modifiers.range_start, "data-range-end": modifiers.range_end, "data-range-middle": modifiers.range_middle, className: cn("inline-flex cursor-pointer items-center justify-center rounded-md text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 aspect-square w-full min-w-[--cell-size] font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px]", defaultClassNames.day, className), children: children }));
+}
+function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", formatters, components, ...props }) {
+    const defaultClassNames = getDefaultClassNames();
+    return (_jsx(DayPicker, { showOutsideDays: showOutsideDays, className: cn("bg-background group/calendar p-3 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent", String.raw `rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw `rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className), captionLayout: captionLayout, formatters: {
+            formatMonthDropdown: (date) => date.toLocaleString("default", { month: "short" }),
+            ...formatters,
+        }, classNames: {
+            root: cn("w-fit", defaultClassNames.root),
+            months: cn("relative flex flex-col gap-4 md:flex-row", defaultClassNames.months),
+            month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+            nav: cn("absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1", defaultClassNames.nav),
+            button_previous: cn(buttonVariants({ variant: buttonVariant }), "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50", defaultClassNames.button_previous),
+            button_next: cn(buttonVariants({ variant: buttonVariant }), "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50", defaultClassNames.button_next),
+            month_caption: cn("flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]", defaultClassNames.month_caption),
+            dropdowns: cn("flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium", defaultClassNames.dropdowns),
+            dropdown_root: cn("has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border", defaultClassNames.dropdown_root),
+            dropdown: cn("bg-popover absolute inset-0 opacity-0", defaultClassNames.dropdown),
+            caption_label: cn("select-none font-medium", captionLayout === "label"
+                ? "text-sm"
+                : "[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5", defaultClassNames.caption_label),
+            table: "w-full border-collapse",
+            weekdays: cn("flex", defaultClassNames.weekdays),
+            weekday: cn("text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal", defaultClassNames.weekday),
+            week: cn("mt-2 flex w-full", defaultClassNames.week),
+            week_number_header: cn("w-[--cell-size] select-none", defaultClassNames.week_number_header),
+            week_number: cn("text-muted-foreground select-none text-[0.8rem]", defaultClassNames.week_number),
+            day: cn("group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md", defaultClassNames.day),
+            range_start: cn("bg-accent rounded-l-md", defaultClassNames.range_start),
+            range_middle: cn("rounded-none", defaultClassNames.range_middle),
+            range_end: cn("bg-accent rounded-r-md", defaultClassNames.range_end),
+            today: cn("bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none", defaultClassNames.today),
+            outside: cn("text-muted-foreground aria-selected:text-muted-foreground", defaultClassNames.outside),
+            disabled: cn("text-muted-foreground opacity-50", defaultClassNames.disabled),
+            hidden: cn("invisible", defaultClassNames.hidden),
+            ...classNames,
+        }, components: {
+            Root: ({ className: rootClassName, rootRef, ...rootProps }) => (_jsx("div", { "data-slot": "calendar", ref: rootRef, className: cn(rootClassName), ...rootProps })),
+            Chevron: ({ className: chevronClassName, orientation }) => {
+                const svgProps = {
+                    className: cn("size-4", chevronClassName),
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: 2,
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    "aria-hidden": true,
+                };
+                if (orientation === "left") {
+                    return _jsx("svg", { ...svgProps, children: _jsx("path", { d: "m15 18-6-6 6-6" }) });
+                }
+                if (orientation === "right") {
+                    return _jsx("svg", { ...svgProps, children: _jsx("path", { d: "m9 18 6-6-6-6" }) });
+                }
+                return _jsx("svg", { ...svgProps, children: _jsx("path", { d: "m6 9 6 6 6-6" }) });
+            },
+            DayButton: CalendarDayButton,
+            WeekNumber: ({ children, ...weekNumberProps }) => (_jsx("td", { ...weekNumberProps, children: _jsx("div", { className: "flex size-[--cell-size] items-center justify-center text-center", children: children }) })),
+            ...components,
+        }, ...props }));
+}
+export { Calendar, CalendarDayButton };

package/dist/card.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+export interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    variant?: "default" | "elevated" | "gradient";
+    /** Large value displayed above the title — use for stat/metric cards. */
+    stat?: React.ReactNode;
+    /** Small supporting text below the stat or body — use for sub-metrics. */
+    subMetric?: React.ReactNode;
+    footer?: React.ReactNode;
+    active?: boolean;
+}
+declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+export { Card };

package/dist/card.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "./lib/utils";
+import { Typography } from "./typography";
+const Card = React.forwardRef(({ title, description, variant = "default", stat, subMetric, footer, active, children, className, onClick, ...props }, ref) => (_jsxs("div", { ref: ref, onClick: onClick, className: cn("rounded-xl border text-card-foreground", variant === "default" && "bg-card", variant === "elevated" && "bg-card shadow-sm", variant === "gradient" &&
+        "border-primary/20 bg-gradient-to-br from-primary to-primary/80 text-primary-foreground", active && "border-primary bg-primary/10 ring-1 ring-primary/20", onClick && "cursor-pointer transition-colors hover:border-primary", className), ...props, children: [_jsxs("div", { className: "flex flex-col gap-2 p-6", children: [_jsx(Typography, { as: "p", variant: "label", color: variant === "gradient" ? "inherit" : "muted", className: variant === "gradient" ? "opacity-80" : undefined, children: title }), description ? (_jsx(Typography, { as: "p", variant: "caption", color: variant === "gradient" ? "inherit" : undefined, className: variant === "gradient" ? "opacity-70" : undefined, children: description })) : null, stat ? (_jsx(Typography, { as: "p", variant: "title", color: variant === "gradient" ? "inherit" : undefined, children: stat })) : null, subMetric ? (_jsx(Typography, { as: "p", variant: "caption", color: variant === "gradient" ? "inherit" : undefined, className: variant === "gradient" ? "opacity-80" : undefined, children: subMetric })) : null] }), children ? _jsx("div", { className: "p-6 pt-0", children: children }) : null, footer ? (_jsx("div", { className: "flex items-center p-6 pt-0", children: footer })) : null] })));
+Card.displayName = "Card";
+export { Card };

package/dist/command-search.js

@@ -8,6 +8,7 @@ import { SearchIcon } from "./animated-icons/search";
 import { DialogRoot, DialogSurface } from "./dialog-primitive";
 import { FilterToggle } from "./filter-toggle";
 import { cn } from "./lib/utils";
+import { Typography } from "./typography";
 import { SearchHighlight } from "./use-search-highlight";
 function CommandSearchEmptyIcon({ className }) {
     return _jsx(SearchIcon, { className: className, size: 20 });
@@ -57,14 +58,14 @@ function CommandSearch({ value, onValueChange, sections, children, className, is
         }
     }, [isOpen]);
     return (_jsxs("div", { className: className, ...props, children: [_jsxs(Button, { type: "button", onClick: () => setIsOpen(true), variant: "ghost", className: cn(isCollapsed
-                    ? "h-9 w-full justify-center rounded-lg px-3 !font-normal text-muted-foreground hover:bg-white hover:text-foreground"
-                    : "h-9 w-full min-w-[14rem] justify-start gap-3 rounded-lg border border-gray-200 bg-white px-3 !font-normal text-muted-foreground shadow-sm hover:bg-white hover:text-foreground"), children: [_jsx(SearchIcon, { className: "shrink-0", size: 16 }), !isCollapsed ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "flex-1 text-left text-sm", children: triggerPlaceholder }), _jsx("kbd", { className: "hidden h-5 items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] text-muted-foreground sm:inline-flex", children: resolvedLabel })] })) : null] }), _jsx(DialogRoot, { open: isOpen, onOpenChange: setIsOpen, children: _jsx(DialogSurface, { className: cn("max-w-xl gap-0 overflow-hidden p-0 sm:max-w-xl", dialogClassName), hideCloseButton: true, children: _jsxs(Command, { shouldFilter: false, className: "rounded-none border-0", children: [_jsx(CommandInput, { ref: inputRef, value: value, onValueChange: onValueChange, placeholder: inputPlaceholder, className: "text-sm" }), allFilter || filters.length ? (_jsxs("div", { className: "flex items-center gap-1 border-b px-3 py-2", children: [allFilter ? (_jsx(FilterToggle, { selected: allFilter.selected, onClick: allFilter.onSelect, children: allFilter.label })) : null, filters.map((filter) => (_jsx(FilterToggle, { selected: filter.selected, onClick: filter.onSelect, children: filter.label }, filter.value)))] })) : null, _jsx(CommandList, { className: cn("max-h-[400px] p-1", resultsClassName), children: children !== undefined ? children : sections ? (visibleSections.length ? (visibleSections.map((section, index) => (_jsxs(React.Fragment, { children: [index > 0 ? _jsx(CommandSeparator, { alwaysRender: true }) : null, _jsx(CommandGroup, { heading: section.heading, children: section.items.map((item) => (_jsx(CommandItem, { value: getCommandSearchItemValue(item), disabled: item.disabled, onSelect: () => {
+                    ? "h-10 w-full justify-center rounded-lg px-3 !font-normal text-muted-foreground hover:bg-white hover:text-foreground"
+                    : "h-10 w-full min-w-[14rem] justify-start gap-3 rounded-lg border border-gray-200 bg-white px-3 !font-normal text-muted-foreground hover:bg-white hover:text-foreground"), children: [_jsx(SearchIcon, { className: "shrink-0", size: 16 }), !isCollapsed ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "flex-1 text-left text-sm", children: triggerPlaceholder }), _jsx("kbd", { className: "hidden h-5 items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] text-muted-foreground sm:inline-flex", children: resolvedLabel })] })) : null] }), _jsx(DialogRoot, { open: isOpen, onOpenChange: setIsOpen, children: _jsx(DialogSurface, { className: cn("max-w-xl gap-0 overflow-hidden p-0 sm:max-w-xl", dialogClassName), hideCloseButton: true, children: _jsxs(Command, { shouldFilter: false, className: "rounded-none border-0", children: [_jsx(CommandInput, { ref: inputRef, value: value, onValueChange: onValueChange, placeholder: inputPlaceholder, className: "text-sm" }), allFilter || filters.length ? (_jsxs("div", { className: "flex items-center gap-1 border-b px-3 py-2", children: [allFilter ? (_jsx(FilterToggle, { selected: allFilter.selected, onClick: allFilter.onSelect, children: allFilter.label })) : null, filters.map((filter) => (_jsx(FilterToggle, { selected: filter.selected, onClick: filter.onSelect, children: filter.label }, filter.value)))] })) : null, _jsx(CommandList, { className: cn("max-h-[400px] p-1", resultsClassName), children: children !== undefined ? children : sections ? (visibleSections.length ? (visibleSections.map((section, index) => (_jsxs(React.Fragment, { children: [index > 0 ? _jsx(CommandSeparator, { alwaysRender: true }) : null, _jsx(CommandGroup, { heading: section.heading, children: section.items.map((item) => (_jsx(CommandItem, { value: getCommandSearchItemValue(item), disabled: item.disabled, onSelect: () => {
                                                     var _a;
                                                     (_a = item.onSelect) === null || _a === void 0 ? void 0 : _a.call(item);
                                                     if (item.closeOnSelect !== false) {
                                                         setIsOpen(false);
                                                     }
-                                                }, children: _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "truncate text-sm font-medium", children: _jsx(SearchHighlight, { text: item.title, query: value }) }), item.subtitle ? (_jsx("p", { className: "truncate text-xs text-muted-foreground", children: _jsx(SearchHighlight, { text: item.subtitle, query: value }) })) : null] }) }, item.id))) })] }, section.key)))) : (_jsx(EmptyState, { icon: CommandSearchEmptyIcon, message: normalizedValue ? "No results found" : "Start typing to search", description: normalizedValue
+                                                }, children: _jsxs("div", { className: "min-w-0", children: [_jsx(Typography, { as: "p", variant: "label", className: "truncate", children: _jsx(SearchHighlight, { text: item.title, query: value }) }), item.subtitle ? (_jsx(Typography, { as: "p", variant: "caption", className: "truncate", children: _jsx(SearchHighlight, { text: item.subtitle, query: value }) })) : null] }) }, item.id))) })] }, section.key)))) : (_jsx(EmptyState, { icon: CommandSearchEmptyIcon, message: normalizedValue ? "No results found" : "Start typing to search", description: normalizedValue
                                         ? `No results found for "${value}".`
                                         : "Results will appear here as you type." }))) : (_jsx(EmptyState, { icon: CommandSearchEmptyIcon, message: normalizedValue ? "No results found" : "Start typing to search", description: normalizedValue
                                         ? `No results found for "${value}".`

package/dist/date-input.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+export interface DateInputProps {
+    label: React.ReactNode;
+    value: string;
+    onValueChange: (value: string) => void;
+    description?: React.ReactNode;
+    error?: React.ReactNode;
+    invalid?: boolean;
+    hideLabel?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    minDate?: Date;
+    maxDate?: Date;
+    className?: string;
+    triggerClassName?: string;
+    labelClassName?: string;
+    descriptionClassName?: string;
+    errorClassName?: string;
+    id?: string;
+}
+declare const DateInput: React.ForwardRefExoticComponent<DateInputProps & React.RefAttributes<HTMLButtonElement>>;
+export { DateInput };

package/dist/date-input.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { format, parse } from "date-fns";
+import { Calendar } from "./calendar";
+import { inputControlClassName } from "./input-control";
+import { Field, FieldDescription, FieldError, FieldLabel } from "./field";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+import { cn } from "./lib/utils";
+function parseDateString(dateStr) {
+    if (!(dateStr === null || dateStr === void 0 ? void 0 : dateStr.trim()))
+        return undefined;
+    try {
+        const nativeDate = new Date(dateStr);
+        if (!isNaN(nativeDate.getTime()))
+            return nativeDate;
+        const ddmmyyyyMatch = dateStr.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})/);
+        if (ddmmyyyyMatch) {
+            const [, day, month, year] = ddmmyyyyMatch;
+            const date = new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
+            if (!isNaN(date.getTime()))
+                return date;
+        }
+        const date = parse(dateStr, "yyyy-MM-dd", new Date());
+        if (!isNaN(date.getTime()))
+            return date;
+        return undefined;
+    }
+    catch {
+        return undefined;
+    }
+}
+function formatISODate(date) {
+    return format(date, "yyyy-MM-dd");
+}
+const DateInput = React.forwardRef(({ label, value, onValueChange, description, error, invalid = false, hideLabel = false, placeholder = "Pick a date", disabled = false, minDate, maxDate, className, triggerClassName, labelClassName, descriptionClassName, errorClassName, id, }, ref) => {
+    const [open, setOpen] = React.useState(false);
+    const generatedId = React.useId();
+    const inputId = id !== null && id !== void 0 ? id : `date-input-${generatedId}`;
+    const errorId = error ? `${inputId}-error` : undefined;
+    const showDescription = Boolean(description) && !error;
+    const descriptionId = showDescription ? `${inputId}-description` : undefined;
+    const isInvalid = invalid || Boolean(error);
+    const selectedDate = React.useMemo(() => parseDateString(value), [value]);
+    const displayValue = selectedDate
+        ? format(selectedDate, "d MMM yyyy")
+        : undefined;
+    const handleSelect = (date) => {
+        onValueChange(date ? formatISODate(date) : "");
+        setOpen(false);
+    };
+    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 }), _jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("div", { className: "relative w-full", children: [_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground", style: { width: 14, height: 14 }, "aria-hidden": "true", children: [_jsx("rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", ry: "2" }), _jsx("line", { x1: "16", x2: "16", y1: "2", y2: "6" }), _jsx("line", { x1: "8", x2: "8", y1: "2", y2: "6" }), _jsx("line", { x1: "3", x2: "21", y1: "10", y2: "10" })] }), _jsx("button", { ref: ref, type: "button", id: inputId, disabled: disabled, "aria-invalid": isInvalid ? "true" : undefined, "aria-describedby": [descriptionId, errorId].filter(Boolean).join(" ") || undefined, className: cn(inputControlClassName, "cursor-pointer pl-9 text-left", !selectedDate && "text-muted-foreground", isInvalid && "border-destructive focus-visible:ring-destructive", triggerClassName), children: displayValue !== null && displayValue !== void 0 ? displayValue : _jsx("span", { children: placeholder }) })] }) }), _jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: _jsx(Calendar, { mode: "single", selected: selectedDate, onSelect: handleSelect, disabled: (date) => {
+                                if (minDate && date < minDate)
+                                    return true;
+                                if (maxDate && date > maxDate)
+                                    return true;
+                                return false;
+                            }, defaultMonth: selectedDate, autoFocus: true }) })] }), showDescription ? (_jsx(FieldDescription, { id: descriptionId, className: descriptionClassName, children: description })) : null, _jsx(FieldError, { id: errorId, className: errorClassName, children: error })] }));
+});
+DateInput.displayName = "DateInput";
+export { DateInput };

package/dist/editable-table.js

@@ -101,7 +101,7 @@ function EditableTable({ value, onChange, columns, isEditing = false, className,
                                         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 ||
+                                        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-10 w-full text-sm" })) : (_jsx("span", { className: cn("block whitespace-normal break-words", cellValue === null ||
                                                     cellValue === undefined ||
                                                     cellValue === ""
                                                     ? "text-muted-foreground"
@@ -116,7 +116,7 @@ function EditableTable({ value, onChange, columns, isEditing = false, className,
                                                         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] }));
+                                                    : null, isEditing ? (_jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "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/govt-masthead.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+export interface GovtMastheadProps extends React.HTMLAttributes<HTMLElement> {
+    fluid?: boolean;
+}
+declare function GovtMasthead({ fluid, ...props }: GovtMastheadProps): import("react/jsx-runtime").JSX.Element;
+declare namespace GovtMasthead {
+    var displayName: string;
+}
+export { GovtMasthead };

package/dist/govt-masthead.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SgdsMasthead } from "@govtechsg/sgds-web-component/react";
+function GovtMasthead({ fluid = false, ...props }) {
+    return _jsx(SgdsMasthead, { fluid: fluid, ...props });
+}
+GovtMasthead.displayName = "GovtMasthead";
+export { GovtMasthead };

package/dist/index.d.ts

@@ -2,7 +2,12 @@ export { Avatar, AvatarProfile, AvatarRoot, AvatarImage, AvatarFallback, } from
 export type { AvatarProps, AvatarProfileProps, AvatarRootProps, } from "./avatar";
 export * from "./animated-icons";
 export { Badge, badgeVariants } from "./badge";
+export { Card } from "./card";
+export type { CardProps } from "./card";
 export type { BadgeProps } from "./badge";
+export { Calendar, CalendarDayButton } from "./calendar";
+export { DateInput } from "./date-input";
+export type { DateInputProps } from "./date-input";
 export { CountBadge } from "./count-badge";
 export type { CountBadgeProps } from "./count-badge";
 export { EmptyState } from "./empty-state";
@@ -15,6 +20,8 @@ export { Input } from "./input";
 export type { InputProps } from "./input";
 export { Select } from "./select";
 export type { SelectOption, SelectProps } from "./select";
+export { MultiSelect } from "./multi-select";
+export type { MultiSelectOption, MultiSelectProps } from "./multi-select";
 export { DEFAULT_COUNTRY_CODES, PhoneInput, } from "./phone-input";
 export type { CountryCode, PhoneInputProps, } from "./phone-input";
 export { OtpInput } from "./otp-input";
@@ -33,6 +40,8 @@ export { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, 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 { GovtMasthead } from "./govt-masthead";
+export type { GovtMastheadProps } from "./govt-masthead";
 export { SearchHighlight, useSearchHighlight, } from "./use-search-highlight";
 export type { SearchHighlightProps, SearchHighlightSegment, } from "./use-search-highlight";
 export { Textarea } from "./textarea";
@@ -54,5 +63,9 @@ 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 { TabWithDropdown } from "./tab-with-dropdown";
+export type { TabWithDropdownProps, TabDropdownSection } from "./tab-with-dropdown";
 export { Tooltip, TooltipRoot, TooltipTrigger, TooltipContent, TooltipProvider, type TooltipProps, } from "./tooltip";
+export { Toaster, toast } from "./toaster";
+export type { ToasterProps } from "./toaster";
 export { cn } from "./lib/utils";

package/dist/index.js

@@ -1,12 +1,16 @@
 export { Avatar, AvatarProfile, AvatarRoot, AvatarImage, AvatarFallback, } from "./avatar";
 export * from "./animated-icons";
 export { Badge, badgeVariants } from "./badge";
+export { Card } from "./card";
+export { Calendar, CalendarDayButton } from "./calendar";
+export { DateInput } from "./date-input";
 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 { MultiSelect } from "./multi-select";
 export { DEFAULT_COUNTRY_CODES, PhoneInput, } from "./phone-input";
 export { OtpInput } from "./otp-input";
 export { LabelValue, isEmptyValue, } from "./label-value";
@@ -17,6 +21,7 @@ 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 { GovtMasthead } from "./govt-masthead";
 export { SearchHighlight, useSearchHighlight, } from "./use-search-highlight";
 export { Textarea } from "./textarea";
 export { DraggableTabs, } from "./draggable-tabs";
@@ -30,5 +35,7 @@ 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 { TabWithDropdown } from "./tab-with-dropdown";
 export { Tooltip, TooltipRoot, TooltipTrigger, TooltipContent, TooltipProvider, } from "./tooltip";
+export { Toaster, toast } from "./toaster";
 export { cn } from "./lib/utils";

package/dist/input-control.d.ts

@@ -1,4 +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 inputControlClassName = "h-10 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-8 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

@@ -1,7 +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 inputControlClassName = "h-10 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-8 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/label-value.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "./lib/utils";
+import { Typography } from "./typography";
 export function isEmptyValue(value) {
     if (value === null || value === undefined || value === "")
         return true;
@@ -14,6 +15,6 @@ function LabelValue({ label, value, className, labelClassName, hideIfEmpty = fal
     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 })] }));
+    return (_jsxs("div", { className: cn("min-w-0 h-full space-y-1", className), children: [_jsx(Typography, { as: "p", variant: "label", className: 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

@@ -9,8 +9,10 @@ export declare function SidebarProvider({ children }: {
 }): import("react/jsx-runtime").JSX.Element;
 export declare function useSidebar(): SidebarContextType;
 export interface DashboardLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
+    masthead?: React.ReactNode;
+    prototypeBanner?: React.ReactNode;
 }
-declare function DashboardLayout({ className, children, ...props }: DashboardLayoutProps): import("react/jsx-runtime").JSX.Element;
+declare function DashboardLayout({ className, masthead, prototypeBanner, children, style, ...props }: DashboardLayoutProps): import("react/jsx-runtime").JSX.Element;
 export interface DashboardSidebarProps extends React.HTMLAttributes<HTMLElement> {
     logo?: React.ReactNode | ((context: {
         isCollapsed: boolean;

package/dist/layout.js

@@ -9,7 +9,9 @@ import { CountBadge } from "./count-badge";
 import { Tooltip } from "./tooltip";
 import { cn } from "./lib/utils";
 const COLLAPSE_BREAKPOINT = 1280;
+const TOP_OFFSET_CSS_VAR = "--layout-top-offset";
 const SidebarContext = React.createContext(undefined);
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? React.useEffect : React.useLayoutEffect;
 export function SidebarProvider({ children }) {
     const [isCollapsed, setIsCollapsed] = React.useState(false);
     const manualCollapsedRef = React.useRef(false);
@@ -42,11 +44,35 @@ export function useSidebar() {
     }
     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 DashboardLayout({ className, masthead, prototypeBanner, children, style, ...props }) {
+    const chromeRef = React.useRef(null);
+    const [topOffset, setTopOffset] = React.useState(0);
+    const layoutStyle = React.useMemo(() => ({
+        ...style,
+        [TOP_OFFSET_CSS_VAR]: `${topOffset}px`,
+    }), [style, topOffset]);
+    useIsomorphicLayoutEffect(() => {
+        const node = chromeRef.current;
+        if (!node) {
+            setTopOffset(0);
+            return;
+        }
+        const updateOffset = () => {
+            setTopOffset(node.getBoundingClientRect().height);
+        };
+        updateOffset();
+        if (typeof ResizeObserver === "undefined") {
+            window.addEventListener("resize", updateOffset);
+            return () => window.removeEventListener("resize", updateOffset);
+        }
+        const observer = new ResizeObserver(() => updateOffset());
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [masthead, prototypeBanner]);
+    return (_jsxs("div", { className: cn("flex min-h-screen flex-col bg-[hsl(var(--layout-shell-background))]", className), style: layoutStyle, ...props, children: [masthead || prototypeBanner ? (_jsxs("div", { ref: chromeRef, className: "sticky top-0 z-40 shrink-0", children: [masthead, prototypeBanner] })) : null, _jsx("div", { className: "flex min-h-0 flex-1", 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
+    return (_jsx("aside", { className: cn("fixed left-0 top-[var(--layout-top-offset)] z-30 flex h-[calc(100dvh-var(--layout-top-offset))] 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 }));
 }
@@ -72,7 +98,7 @@ 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
+    return (_jsx(Button, { asChild: asChild, variant: "ghost", disabled: disabled, className: cn("h-10 w-full justify-start gap-3 rounded-lg 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"
@@ -133,7 +159,7 @@ function DashboardContent({ className, surfaceClassName, children, ...props }) {
             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
+    return (_jsx("main", { onClick: handleContentClick, className: cn("flex min-h-[calc(100dvh-var(--layout-top-offset))] 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 }) }));
 }

package/dist/multi-select.d.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+export interface MultiSelectOption {
+    label: string;
+    value: string;
+    description?: string;
+    disabled?: boolean;
+}
+export interface MultiSelectProps {
+    label: React.ReactNode;
+    options: MultiSelectOption[];
+    value: string[];
+    onValueChange: (value: string[]) => void;
+    placeholder?: string;
+    description?: React.ReactNode;
+    error?: React.ReactNode;
+    invalid?: boolean;
+    disabled?: boolean;
+    hideLabel?: boolean;
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    className?: string;
+    triggerClassName?: string;
+    labelClassName?: string;
+    descriptionClassName?: string;
+    errorClassName?: string;
+    id?: string;
+}
+declare function MultiSelect({ label, options, value, onValueChange, placeholder, description, error, invalid, disabled, hideLabel, searchable, searchPlaceholder, className, triggerClassName, labelClassName, descriptionClassName, errorClassName, id, }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;
+export { MultiSelect };

package/dist/multi-select.js

@@ -0,0 +1,77 @@
+"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 { Badge } from "./badge";
+import { Button } from "./button";
+import { Field, FieldDescription, FieldError, FieldLabel } from "./field";
+import { InputControl } from "./input-control";
+import { cn } from "./lib/utils";
+import { Typography } from "./typography";
+function MultiSelect({ label, options, value, onValueChange, placeholder = "Select options", description, error, invalid = false, disabled = false, hideLabel = false, searchable = false, searchPlaceholder = "Search...", className, triggerClassName, labelClassName, descriptionClassName, errorClassName, id, }) {
+    const generatedId = React.useId();
+    const selectId = id !== null && id !== void 0 ? id : `multi-select-${generatedId}`;
+    const errorId = error ? `${selectId}-error` : undefined;
+    const showDescription = Boolean(description) && !error;
+    const descriptionId = showDescription ? `${selectId}-description` : undefined;
+    const isInvalid = invalid || Boolean(error);
+    const [open, setOpen] = React.useState(false);
+    const [searchQuery, setSearchQuery] = React.useState("");
+    const containerRef = React.useRef(null);
+    const searchInputRef = React.useRef(null);
+    const normalizedQuery = searchQuery.trim().toLowerCase();
+    const filteredOptions = searchable && normalizedQuery
+        ? options.filter((opt) => {
+            var _a, _b;
+            return opt.label.toLowerCase().includes(normalizedQuery) ||
+                ((_b = (_a = opt.description) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(normalizedQuery)) !== null && _b !== void 0 ? _b : false);
+        })
+        : options;
+    const selectedLabels = value
+        .map((v) => options.find((opt) => opt.value === v))
+        .filter(Boolean);
+    const toggleOption = React.useCallback((optionValue) => {
+        const next = value.includes(optionValue)
+            ? value.filter((v) => v !== optionValue)
+            : [...value, optionValue];
+        onValueChange(next);
+    }, [value, onValueChange]);
+    const removeOption = React.useCallback((optionValue) => {
+        onValueChange(value.filter((v) => v !== optionValue));
+    }, [value, onValueChange]);
+    React.useEffect(() => {
+        if (!open) {
+            setSearchQuery("");
+            return;
+        }
+        if (searchable) {
+            const frame = window.requestAnimationFrame(() => {
+                var _a;
+                (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            });
+            return () => window.cancelAnimationFrame(frame);
+        }
+    }, [open, searchable]);
+    React.useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (containerRef.current &&
+                !containerRef.current.contains(event.target)) {
+                setOpen(false);
+            }
+        };
+        if (open) {
+            document.addEventListener("mousedown", handleClickOutside);
+            return () => document.removeEventListener("mousedown", handleClickOutside);
+        }
+    }, [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("div", { ref: containerRef, className: "relative", children: [_jsx("button", { type: "button", id: selectId, disabled: disabled, onClick: () => setOpen((prev) => !prev), "aria-expanded": open, "aria-haspopup": "listbox", "aria-invalid": isInvalid ? "true" : undefined, "aria-describedby": [descriptionId, errorId].filter(Boolean).join(" ") || undefined, className: cn("flex min-h-10 w-full flex-wrap items-center gap-1.5 rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background md:text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", isInvalid ? "border-destructive" : "border-input", triggerClassName), children: selectedLabels.length > 0 ? (selectedLabels.map((opt) => (_jsxs(Badge, { variant: "secondary", className: "gap-1 pr-1", children: [opt.label, _jsx(Button, { variant: "ghost", size: "icon", className: "h-4 w-4 p-0 hover:bg-transparent", onClick: (e) => {
+                                        e.stopPropagation();
+                                        removeOption(opt.value);
+                                    }, "aria-label": `Remove ${opt.label}`, children: _jsx(XIcon, { size: 10 }) })] }, opt.value)))) : (_jsx("span", { className: "text-muted-foreground", children: placeholder })) }), open ? (_jsxs("div", { className: "absolute z-50 mt-1 w-full rounded-md border bg-popover shadow-md", children: [searchable ? (_jsx("div", { className: "border-b p-2", children: _jsx(InputControl, { ref: searchInputRef, value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: searchPlaceholder, className: "h-8 border-0 bg-transparent px-2 py-0 text-sm shadow-none focus-visible:ring-0", onKeyDown: (e) => e.stopPropagation() }) })) : null, _jsx("div", { role: "listbox", "aria-label": typeof label === "string" ? label : "Options", "aria-multiselectable": "true", className: "max-h-64 overflow-y-auto p-1", children: filteredOptions.length > 0 ? (filteredOptions.map((option) => {
+                                    const isSelected = value.includes(option.value);
+                                    return (_jsxs("button", { type: "button", role: "option", "aria-selected": isSelected, disabled: option.disabled, onClick: () => toggleOption(option.value), className: cn("flex h-10 w-full cursor-pointer items-center gap-2 rounded-sm px-2 text-left text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50", isSelected && "bg-accent"), children: [_jsx("div", { className: cn("mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border", isSelected
+                                                    ? "border-primary bg-primary text-primary-foreground"
+                                                    : "border-input"), children: isSelected ? (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", className: "h-3 w-3", children: _jsx("polyline", { points: "20 6 9 17 4 12" }) })) : null }), _jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { children: option.label }), option.description ? (_jsx(Typography, { as: "span", variant: "caption", children: option.description })) : null] })] }, option.value));
+                                })) : (_jsx("div", { className: "px-3 py-6 text-center text-sm text-muted-foreground", children: "No options found." })) })] })) : null] }), showDescription ? (_jsx(FieldDescription, { id: descriptionId, className: descriptionClassName, children: description })) : null, _jsx(FieldError, { id: errorId, className: errorClassName, children: error })] }));
+}
+export { MultiSelect };

package/dist/otp-input.js

@@ -7,7 +7,7 @@ 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 &&
+    return (_jsxs("div", { "data-slot": "otp-slot", className: cn("relative flex size-10 items-center justify-center rounded-md border bg-transparent text-sm font-medium 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] }));
@@ -54,7 +54,7 @@ const OtpInput = React.forwardRef(({ label, value, onValueChange, description, e
         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 })] }));
+    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 justify-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/pagination.js

@@ -6,6 +6,7 @@ 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";
+import { Typography } from "./typography";
 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 })));
@@ -16,7 +17,7 @@ function Pagination({ currentPage, totalPages, totalItems, itemsPerPage = 5, onP
     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) => {
+    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(Typography, { as: "span", variant: "caption", 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" }) }) })] }) })] })] }));

package/dist/popover.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
+declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const PopoverAnchor: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & React.RefAttributes<HTMLDivElement>>;
+declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

package/dist/popover.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { cn } from "./lib/utils";
+const Popover = PopoverPrimitive.Root;
+const PopoverTrigger = PopoverPrimitive.Trigger;
+const PopoverAnchor = PopoverPrimitive.Anchor;
+const PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { ref: ref, align: align, sideOffset: sideOffset, className: cn("z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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", className), ...props }) })));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

package/dist/select-primitive.d.ts

@@ -12,6 +12,8 @@ interface SelectContentProps extends React.ComponentPropsWithoutRef<typeof Selec
 }
 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 SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    description?: React.ReactNode;
+} & 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

@@ -4,6 +4,7 @@ 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";
+import { Typography } from "./typography";
 function SelectRoot(props) {
     return _jsx(SelectPrimitive.Root, { "data-slot": "select", ...props });
 }
@@ -13,7 +14,7 @@ function SelectGroup(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-9 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" }) })] })));
+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-base transition-[color,box-shadow] md:text-sm 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;
@@ -26,7 +27,7 @@ const SelectContent = React.forwardRef(({ className, children, header, position
 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 })] })));
+const SelectItem = React.forwardRef(({ className, children, description, ...props }, ref) => (_jsxs(SelectPrimitive.Item, { ref: ref, "data-slot": "select-item", className: cn("relative flex h-10 w-full cursor-pointer select-none items-center gap-2 rounded-sm 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" }) }) }), _jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx(SelectPrimitive.ItemText, { className: "break-words font-normal", children: children }), description ? (_jsx(Typography, { as: "span", variant: "caption", children: description })) : null] })] })));
 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;

package/dist/select.d.ts

@@ -3,6 +3,7 @@ import { SelectRoot } from "./select-primitive";
 export interface SelectOption {
     label: React.ReactNode;
     value: string;
+    description?: React.ReactNode;
     disabled?: boolean;
     group?: string;
     textValue?: string;

package/dist/select.js

@@ -91,7 +91,7 @@ function Select({ label, options, placeholder = "Select an option", description,
                                 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}`));
+                            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), description: option.description, 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/tab-with-dropdown.d.ts

@@ -0,0 +1,18 @@
+export interface TabDropdownSection {
+    id: string;
+    label: string;
+}
+export interface TabWithDropdownProps {
+    /** Tab value — must match a TabsContent value. */
+    value: string;
+    /** Tab label shown in the trigger. */
+    label: string;
+    /** Dropdown sections shown on hover. */
+    sections: TabDropdownSection[];
+    /** Called when a section is selected. Receives the section id. */
+    onSectionSelect?: (sectionId: string) => void;
+    /** Scroll offset in pixels when scrolling to a section. */
+    scrollOffset?: number;
+}
+declare function TabWithDropdown({ value, label, sections, onSectionSelect, scrollOffset, }: TabWithDropdownProps): import("react/jsx-runtime").JSX.Element;
+export { TabWithDropdown };

package/dist/tab-with-dropdown.js

@@ -0,0 +1,70 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChevronDownIcon } from "./animated-icons/chevron-down";
+import { cn } from "./lib/utils";
+import { TabsTrigger, useTabsContext } from "./tabs";
+function TabWithDropdown({ value, label, sections, onSectionSelect, scrollOffset = 200, }) {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [dropdownPosition, setDropdownPosition] = React.useState({
+        top: 0,
+        left: 0,
+    });
+    const triggerRef = React.useRef(null);
+    const timeoutRef = React.useRef(null);
+    const tabsContext = useTabsContext();
+    const updatePosition = React.useCallback(() => {
+        if (triggerRef.current) {
+            const rect = triggerRef.current.getBoundingClientRect();
+            setDropdownPosition({
+                top: rect.bottom + 8,
+                left: rect.left,
+            });
+        }
+    }, []);
+    const handleMouseEnter = () => {
+        if (timeoutRef.current)
+            clearTimeout(timeoutRef.current);
+        updatePosition();
+        setIsOpen(true);
+    };
+    const handleMouseLeave = () => {
+        timeoutRef.current = setTimeout(() => setIsOpen(false), 150);
+    };
+    const handleDropdownMouseEnter = () => {
+        if (timeoutRef.current)
+            clearTimeout(timeoutRef.current);
+    };
+    const handleDropdownMouseLeave = () => {
+        timeoutRef.current = setTimeout(() => setIsOpen(false), 150);
+    };
+    const handleSectionClick = (sectionId) => {
+        if (onSectionSelect) {
+            onSectionSelect(sectionId);
+        }
+        else {
+            // Default: switch tab and scroll to the section element
+            const doScroll = () => {
+                const element = document.getElementById(sectionId);
+                if (!element)
+                    return;
+                const top = element.getBoundingClientRect().top + window.scrollY - scrollOffset;
+                window.scrollTo({ top, behavior: "smooth" });
+            };
+            if (tabsContext && tabsContext.value !== value) {
+                tabsContext.setValue(value);
+                setTimeout(doScroll, 50);
+            }
+            else {
+                doScroll();
+            }
+        }
+        setIsOpen(false);
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: triggerRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: _jsxs(TabsTrigger, { value: value, className: "flex items-center gap-1", children: [label, sections.length > 0 ? (_jsx(ChevronDownIcon, { className: cn("transition-transform duration-200", isOpen && "rotate-180"), size: 12 })) : null] }) }), isOpen &&
+                sections.length > 0 &&
+                typeof document !== "undefined" &&
+                ReactDOM.createPortal(_jsx("div", { className: "fixed z-[100] rounded-md border bg-popover p-1 shadow-lg animate-in fade-in-0 zoom-in-95", style: { top: dropdownPosition.top, left: dropdownPosition.left }, onMouseEnter: handleDropdownMouseEnter, onMouseLeave: handleDropdownMouseLeave, children: sections.map((section) => (_jsx("button", { type: "button", onClick: () => handleSectionClick(section.id), className: "block w-full rounded-sm px-3 py-2 text-left text-sm transition-colors hover:bg-accent hover:text-accent-foreground", children: section.label }, section.id))) }), document.body)] }));
+}
+export { TabWithDropdown };

package/dist/textarea.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Field, FieldDescription, FieldError, FieldLabel } from "./field";
 import { cn } from "./lib/utils";
-const TextareaControl = React.forwardRef(({ className, ...props }, ref) => (_jsx("textarea", { ref: ref, "data-slot": "textarea", className: cn("flex min-h-20 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm transition-[color,box-shadow] outline-none placeholder:text-muted-foreground 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 md:text-sm", className), ...props })));
+const TextareaControl = React.forwardRef(({ className, ...props }, ref) => (_jsx("textarea", { ref: ref, "data-slot": "textarea", className: cn("flex min-h-20 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base transition-[color,box-shadow] outline-none placeholder:text-muted-foreground 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 md:text-sm", className), ...props })));
 TextareaControl.displayName = "TextareaControl";
 const Textarea = React.forwardRef(({ label, description, error, invalid = false, hideLabel = false, className, textareaClassName, labelClassName, descriptionClassName, errorClassName, id, disabled, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedBy, ...props }, ref) => {
     const generatedId = React.useId();

package/dist/toaster.d.ts

@@ -0,0 +1,13 @@
+import { toast } from "sonner";
+export interface ToasterProps {
+    /** Position of the toast container. */
+    position?: "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+    /** Maximum number of toasts visible at once. */
+    visibleToasts?: number;
+    /** Whether to show the close button on each toast. */
+    closeButton?: boolean;
+    /** Duration in milliseconds before auto-dismiss. */
+    duration?: number;
+}
+declare function Toaster({ position, visibleToasts, closeButton, duration, }: ToasterProps): import("react/jsx-runtime").JSX.Element;
+export { Toaster, toast };

package/dist/toaster.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Toaster as SonnerToaster, toast } from "sonner";
+function Toaster({ position = "bottom-right", visibleToasts = 3, closeButton = true, duration = 4000, }) {
+    return (_jsx(SonnerToaster, { position: position, visibleToasts: visibleToasts, closeButton: closeButton, duration: duration, toastOptions: {
+            classNames: {
+                toast: "group border border-border bg-background text-foreground shadow-md rounded-lg p-4 flex items-start gap-3",
+                title: "text-sm font-medium",
+                description: "text-sm text-muted-foreground",
+                closeButton: "text-muted-foreground hover:text-foreground",
+                success: "border-[hsl(var(--status-success-foreground))]/20",
+                error: "border-destructive/20",
+                warning: "border-[hsl(var(--status-warning-foreground))]/20",
+                info: "border-[hsl(var(--status-info-foreground))]/20",
+            },
+        } }));
+}
+export { Toaster, toast };

package/dist/typography.d.ts

@@ -6,6 +6,8 @@ declare const typographyVariants: (props?: ({
 export interface TypographyProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof typographyVariants> {
     as?: keyof React.JSX.IntrinsicElements;
     asChild?: boolean;
+    /** Override the built-in text colour. Use "inherit" to inherit from a parent container. */
+    color?: "inherit" | "foreground" | "muted";
 }
 declare const Typography: React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<HTMLElement>>;
 export { Typography, typographyVariants };

package/dist/typography.js

@@ -30,12 +30,19 @@ const defaultElementByVariant = {
     caption: "span",
     eyebrow: "span",
 };
-const Typography = React.forwardRef(({ as, asChild = false, className, variant, ...props }, ref) => {
+const Typography = React.forwardRef(({ as, asChild = false, className, variant, color, ...props }, ref) => {
     const resolvedVariant = (variant !== null && variant !== void 0 ? variant : "body");
     const Comp = asChild
         ? Slot
         : as !== null && as !== void 0 ? as : defaultElementByVariant[resolvedVariant];
-    return (_jsx(Comp, { ref: ref, className: cn(typographyVariants({ variant: resolvedVariant }), className), ...props }));
+    const colorClass = color === "inherit"
+        ? "text-inherit"
+        : color === "foreground"
+            ? "text-foreground"
+            : color === "muted"
+                ? "text-muted-foreground"
+                : undefined;
+    return (_jsx(Comp, { ref: ref, className: cn(typographyVariants({ variant: resolvedVariant }), colorClass, className), ...props }));
 });
 Typography.displayName = "Typography";
 export { Typography, typographyVariants };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neasg/design-system",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "NEA shared design system primitives, theme tokens, and Storybook docs.",
   "license": "UNLICENSED",
   "type": "module",
@@ -15,7 +15,7 @@
     "README.md"
   ],
   "scripts": {
-    "build": "tsc -p tsconfig.build.json && node scripts/copy-css.mjs",
+    "build": "node scripts/clean-dist.mjs && tsc -p tsconfig.build.json && node scripts/copy-css.mjs",
     "storybook": "storybook dev -p 6007 -c .storybook",
     "build-storybook": "storybook build -c .storybook",
     "test": "vitest run",
@@ -33,8 +33,10 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
+    "@govtechsg/sgds-web-component": "^3.8.1",
     "@radix-ui/react-avatar": "^1.1.11",
     "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tabs": "^1.1.13",
@@ -42,10 +44,13 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
     "input-otp": "^1.4.2",
     "libphonenumber-js": "^1.12.41",
     "lucide-react": "^0.555.0",
     "motion": "^12.33.0",
+    "react-day-picker": "^9.14.0",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7"
   },