@neasg/design-system 0.2.0 → 0.2.1

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/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/command-search.js

@@ -57,8 +57,8 @@ 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 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: () => {
                                                     var _a;
                                                     (_a = item.onSelect) === null || _a === void 0 ? void 0 : _a.call(item);
                                                     if (item.closeOnSelect !== false) {

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

@@ -33,6 +33,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";

package/dist/index.js

@@ -17,6 +17,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";

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 shadow-sm 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 shadow-sm 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/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: "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 }));
 }
@@ -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/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 shadow-sm transition-[border-color,box-shadow,color] outline-none group-data-[disabled=true]/field:cursor-not-allowed group-data-[disabled=true]/field:bg-muted/30 group-data-[disabled=true]/field:text-muted-foreground group-data-[disabled=true]/field:opacity-50", invalid ? "border-destructive" : "border-input", slot.isActive &&
             (invalid
                 ? "border-destructive ring-[3px] ring-destructive/20"
                 : "border-ring ring-[3px] ring-ring/50"), className), children: [_jsx("span", { className: cn("pointer-events-none", !slot.char && slot.placeholderChar ? "text-muted-foreground" : ""), children: (_b = (_a = slot.char) !== null && _a !== void 0 ? _a : slot.placeholderChar) !== null && _b !== void 0 ? _b : "" }), slot.hasFakeCaret ? (_jsx("span", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: _jsx("span", { className: "h-4 w-px animate-pulse bg-foreground" }) })) : null] }));
@@ -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/select-primitive.js

@@ -13,7 +13,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-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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neasg/design-system",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "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,6 +33,7 @@
     "@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-select": "^2.2.6",