@neasg/design-system 0.3.0 → 0.4.3

package/dist/use-table-sort.js

@@ -0,0 +1,53 @@
+import * as React from "react";
+export function useTableSort({ defaultField = null, defaultDirection = "asc", cycle = "asc-desc", onChange, } = {}) {
+    const [field, setField] = React.useState(defaultField);
+    const [direction, setDirection] = React.useState(defaultDirection);
+    const emit = React.useCallback((nextField, nextDirection) => {
+        setField(nextField);
+        setDirection(nextDirection);
+        onChange === null || onChange === void 0 ? void 0 : onChange(nextField, nextDirection);
+    }, [onChange]);
+    const onSort = React.useCallback((nextField) => {
+        const typed = nextField;
+        if (field !== typed) {
+            emit(typed, "asc");
+            return;
+        }
+        if (direction === "asc") {
+            emit(typed, "desc");
+            return;
+        }
+        if (cycle === "asc-desc-none") {
+            emit(null, "asc");
+            return;
+        }
+        emit(typed, "asc");
+    }, [field, direction, cycle, emit]);
+    const setSort = React.useCallback((nextField, nextDirection = "asc") => {
+        emit(nextField, nextDirection);
+    }, [emit]);
+    const reset = React.useCallback(() => {
+        emit(defaultField, defaultDirection);
+    }, [emit, defaultField, defaultDirection]);
+    const sortRows = React.useCallback((rows, accessor) => {
+        if (!field)
+            return rows;
+        const multiplier = direction === "asc" ? 1 : -1;
+        return [...rows].sort((a, b) => {
+            const av = accessor(a, field);
+            const bv = accessor(b, field);
+            if (av == null && bv == null)
+                return 0;
+            if (av == null)
+                return 1;
+            if (bv == null)
+                return -1;
+            if (typeof av === "number" && typeof bv === "number") {
+                return (av - bv) * multiplier;
+            }
+            return String(av).localeCompare(String(bv)) * multiplier;
+        });
+    }, [field, direction]);
+    const sorting = React.useMemo(() => ({ field, direction, onSort }), [field, direction, onSort]);
+    return { field, direction, sorting, setSort, reset, sortRows };
+}

package/dist/use-viewport-threshold.d.ts

@@ -0,0 +1,12 @@
+import { type RefObject } from "react";
+export interface UseViewportThresholdOptions {
+    collapseAt: number;
+    expandAt?: number;
+    initialPastThreshold?: boolean;
+    disabled?: boolean;
+}
+export interface UseViewportThresholdReturn<TElement extends Element> {
+    isPastThreshold: boolean;
+    sentinelRef: RefObject<TElement>;
+}
+export declare function useViewportThreshold<TElement extends Element = HTMLDivElement>({ collapseAt, expandAt, initialPastThreshold, disabled, }: UseViewportThresholdOptions): UseViewportThresholdReturn<TElement>;

package/dist/use-viewport-threshold.js

@@ -0,0 +1,43 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+export function useViewportThreshold({ collapseAt, expandAt = collapseAt, initialPastThreshold = false, disabled = false, }) {
+    const [isPastThreshold, setIsPastThreshold] = useState(initialPastThreshold);
+    const sentinelRef = useRef(null);
+    useEffect(() => {
+        if (disabled)
+            return;
+        const sentinel = sentinelRef.current;
+        if (!sentinel)
+            return;
+        let frameId = null;
+        const updateThresholdState = () => {
+            frameId = null;
+            const sentinelTop = sentinel.getBoundingClientRect().top;
+            setIsPastThreshold((prev) => {
+                if (prev) {
+                    return sentinelTop <= expandAt;
+                }
+                return sentinelTop <= collapseAt;
+            });
+        };
+        const requestUpdate = () => {
+            if (frameId !== null)
+                return;
+            frameId = window.requestAnimationFrame(updateThresholdState);
+        };
+        requestUpdate();
+        window.addEventListener("scroll", requestUpdate, { passive: true });
+        window.addEventListener("resize", requestUpdate);
+        return () => {
+            if (frameId !== null) {
+                window.cancelAnimationFrame(frameId);
+            }
+            window.removeEventListener("scroll", requestUpdate);
+            window.removeEventListener("resize", requestUpdate);
+        };
+    }, [collapseAt, disabled, expandAt]);
+    return {
+        isPastThreshold,
+        sentinelRef,
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neasg/design-system",
-  "version": "0.3.0",
+  "version": "0.4.3",
   "description": "NEA shared design system primitives, theme tokens, and Storybook docs.",
   "license": "UNLICENSED",
   "type": "module",
@@ -35,10 +35,12 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@govtechsg/sgds-web-component": "^3.8.1",
     "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-collapsible": "^1.1.12",
     "@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-switch": "^1.2.6",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.8",
     "class-variance-authority": "^0.7.0",
@@ -56,10 +58,10 @@
   },
   "devDependencies": {
     "@fontsource/inter": "^5.2.8",
-    "@storybook/addon-docs": "10.2.19",
-    "@storybook/addon-themes": "10.2.19",
-    "@storybook/react": "10.2.19",
-    "@storybook/react-vite": "10.2.19",
+    "@storybook/addon-docs": "10.3.5",
+    "@storybook/addon-mcp": "^0.5.0",
+    "@storybook/addon-themes": "10.3.5",
+    "@storybook/react-vite": "10.3.5",
     "@testing-library/jest-dom": "^6.9.1",
     "@types/node": "^20.10.5",
     "@types/react": "^18.2.45",
@@ -70,7 +72,7 @@
     "postcss": "^8.4.31",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "storybook": "10.2.19",
+    "storybook": "10.3.5",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.3.3",
     "vitest": "^4.1.0"
@@ -92,6 +94,10 @@
       "types": "./dist/badge.d.ts",
       "import": "./dist/badge.js"
     },
+    "./back-button": {
+      "types": "./dist/back-button.d.ts",
+      "import": "./dist/back-button.js"
+    },
     "./button": {
       "types": "./dist/button.d.ts",
       "import": "./dist/button.js"
@@ -172,6 +178,14 @@
       "types": "./dist/page-header.d.ts",
       "import": "./dist/page-header.js"
     },
+    "./page-section": {
+      "types": "./dist/page-section.d.ts",
+      "import": "./dist/page-section.js"
+    },
+    "./popover": {
+      "types": "./dist/popover.d.ts",
+      "import": "./dist/popover.js"
+    },
     "./pagination": {
       "types": "./dist/pagination.d.ts",
       "import": "./dist/pagination.js"
@@ -180,6 +194,10 @@
       "types": "./dist/search-input.d.ts",
       "import": "./dist/search-input.js"
     },
+    "./section-nav": {
+      "types": "./dist/section-nav.d.ts",
+      "import": "./dist/section-nav.js"
+    },
     "./styles.css": "./dist/styles.css",
     "./table": {
       "types": "./dist/table.d.ts",
@@ -213,6 +231,14 @@
       "types": "./dist/tooltip.d.ts",
       "import": "./dist/tooltip.js"
     },
+    "./separator": {
+      "types": "./dist/separator.d.ts",
+      "import": "./dist/separator.js"
+    },
+    "./collapsible-section": {
+      "types": "./dist/collapsible-section.d.ts",
+      "import": "./dist/collapsible-section.js"
+    },
     "./lib/utils": {
       "types": "./dist/lib/utils.d.ts",
       "import": "./dist/lib/utils.js"

package/dist/tab-with-dropdown.d.ts

@@ -1,18 +0,0 @@
-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

@@ -1,70 +0,0 @@
-"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 };