@fragments-sdk/ui 0.8.3 → 0.8.5

package/src/components/NavigationMenu/useNavigationMenu.ts

@@ -0,0 +1,91 @@
+'use client';
+
+import * as React from 'react';
+import type { NavigationMenuItemInfo } from './NavigationMenuContext';
+
+export interface UseNavigationMenuOptions {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  delayDuration?: number;
+  skipDelayDuration?: number;
+}
+
+export function useNavigationMenu({
+  value: controlledValue,
+  defaultValue = '',
+  onValueChange,
+  delayDuration = 200,
+  skipDelayDuration = 300,
+}: UseNavigationMenuOptions) {
+  const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
+  const isControlled = controlledValue !== undefined;
+  const value = isControlled ? controlledValue : uncontrolledValue;
+
+  const setValue = React.useCallback(
+    (newValue: string) => {
+      if (!isControlled) {
+        setUncontrolledValue(newValue);
+      }
+      onValueChange?.(newValue);
+    },
+    [isControlled, onValueChange]
+  );
+
+  // Hover delay timers
+  const openTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+  const closeTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Skip-delay: when moving between triggers, open instantly
+  const isRecentlyOpenRef = React.useRef(false);
+  const skipDelayTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Trigger registry for keyboard nav
+  const triggerRefs = React.useRef<Map<string, HTMLButtonElement>>(new Map());
+  const triggerOrder = React.useRef<string[]>([]);
+
+  // Item info registry for mobile drawer
+  const itemInfoMap = React.useRef<Map<string, NavigationMenuItemInfo>>(new Map());
+
+  // Viewport sizing
+  const [viewportSize, setViewportSize] = React.useState({ width: 0, height: 0 });
+  const viewportRef = React.useRef<HTMLDivElement>(null);
+
+  // Track previous value for animation direction
+  const previousValue = React.useRef(value);
+
+  // Mobile state
+  const [mobileOpen, setMobileOpen] = React.useState(false);
+  const [mobileContentChildren, setMobileContentChildren] = React.useState<React.ReactNode>(null);
+
+  // Clean up timers on unmount
+  React.useEffect(() => {
+    return () => {
+      if (openTimerRef.current) clearTimeout(openTimerRef.current);
+      if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
+      if (skipDelayTimerRef.current) clearTimeout(skipDelayTimerRef.current);
+    };
+  }, []);
+
+  return {
+    value,
+    setValue,
+    delayDuration,
+    skipDelayDuration,
+    openTimerRef,
+    closeTimerRef,
+    isRecentlyOpenRef,
+    skipDelayTimerRef,
+    triggerRefs,
+    triggerOrder,
+    itemInfoMap,
+    viewportSize,
+    setViewportSize,
+    viewportRef,
+    previousValue,
+    mobileOpen,
+    setMobileOpen,
+    mobileContentChildren,
+    setMobileContentChildren,
+  };
+}

package/src/components/Sidebar/Sidebar.fragment.tsx

@@ -511,7 +511,7 @@ export default defineFragment({
 
   ai: {
     compositionPattern: 'compound',
-    subComponents: ['Header', 'Nav', 'Section', 'Item', 'SubItem', 'Submenu', 'Footer', 'CollapseToggle', 'Rail', 'MenuSkeleton', 'SectionAction'],
+    subComponents: ['Header', 'Nav', 'Section', 'SectionAction', 'Item', 'SubItem', 'Submenu', 'Footer', 'Trigger', 'Overlay', 'CollapseToggle', 'Rail', 'MenuSkeleton'],
     requiredChildren: ['Nav'],
     commonPatterns: [
       '<Sidebar><Sidebar.Header>{logo}</Sidebar.Header><Sidebar.Nav><Sidebar.Section><Sidebar.Item icon={icon} active>{label}</Sidebar.Item></Sidebar.Section></Sidebar.Nav><Sidebar.Footer><Sidebar.CollapseToggle /></Sidebar.Footer></Sidebar>',

package/src/components/Sidebar/Sidebar.module.scss

@@ -10,7 +10,8 @@
   display: flex;
   flex-direction: column;
   width: var(--sidebar-width);
-  height: 100vh;
+  height: 100%;
+  max-height: 100vh;
   background-color: var(--fui-bg-primary, $fui-bg-primary);
   transition: width var(--fui-transition-normal, $fui-transition-normal);
   overflow: hidden;

package/src/components/Table/Table.fragment.tsx

@@ -47,6 +47,9 @@ export default defineFragment({
     status: 'stable',
     tags: ['table', 'data', 'grid', 'list', 'sorting'],
     since: '0.1.0',
+    dependencies: [
+      { name: '@tanstack/react-table', version: '>=8.0.0', reason: 'Table state management and rendering' },
+    ],
   },
 
   usage: {

package/src/components/Table/index.tsx

@@ -1,21 +1,58 @@
 import * as React from 'react';
-import {
-  useReactTable,
-  getCoreRowModel,
-  getSortedRowModel,
-  flexRender,
-  type ColumnDef,
-  type SortingState,
-  type RowSelectionState,
-  type OnChangeFn,
-} from '@tanstack/react-table';
 // Import globals to ensure CSS variables are defined
 import '../../styles/globals.scss';
 import styles from './Table.module.scss';
 
-// Column definition helper type
+// ============================================
+// Types (self-owned — no external dependency for types)
+// ============================================
+
+/** Column definition compatible with @tanstack/react-table */
+export type ColumnDef<TData = unknown, TValue = unknown> = {
+  id?: string;
+  accessorKey?: string;
+  accessorFn?: (row: TData) => TValue;
+  header?: string | ((context: any) => React.ReactNode);
+  cell?: string | ((context: any) => React.ReactNode);
+  size?: number;
+  minSize?: number;
+  maxSize?: number;
+  enableSorting?: boolean;
+  [key: string]: unknown;
+};
+
+export type SortingState = Array<{ id: string; desc: boolean }>;
+export type RowSelectionState = Record<string, boolean>;
+type OnChangeFn<T> = ((updaterOrValue: T | ((prev: T) => T)) => void);
+
 export type TableColumn<T> = ColumnDef<T, unknown>;
 
+// ============================================
+// Lazy-loaded dependency (@tanstack/react-table)
+// ============================================
+
+let _useReactTable: any = null;
+let _getCoreRowModel: any = null;
+let _getSortedRowModel: any = null;
+let _flexRender: any = null;
+let _tableLoaded = false;
+let _tableFailed = false;
+
+function loadTableDeps() {
+  if (_tableLoaded) return;
+  _tableLoaded = true;
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const rt = require('@tanstack/react-table');
+    _useReactTable = rt.useReactTable;
+    _getCoreRowModel = rt.getCoreRowModel;
+    _getSortedRowModel = rt.getSortedRowModel;
+    _flexRender = rt.flexRender;
+  } catch {
+    _tableFailed = true;
+  }
+}
+
 export interface TableProps<T> extends Omit<React.HTMLAttributes<HTMLTableElement>, 'onClick'> {
   /** Column definitions */
   columns: TableColumn<T>[];
@@ -73,6 +110,8 @@ function TableRoot<T>({
   'aria-describedby': ariaDescribedBy,
   ...htmlProps
 }: TableProps<T>) {
+  loadTableDeps();
+
   // Internal sorting state when uncontrolled
   const [internalSorting, setInternalSorting] = React.useState<SortingState>([]);
   const sorting = controlledSorting ?? internalSorting;
@@ -83,12 +122,22 @@ function TableRoot<T>({
   const rowSelection = controlledRowSelection ?? internalRowSelection;
   const handleRowSelectionChange = onRowSelectionChange ?? setInternalRowSelection;
 
-  const table = useReactTable({
+  if (_tableFailed || !_useReactTable) {
+    if (_tableFailed && process.env.NODE_ENV === 'development') {
+      console.warn(
+        '[@fragments-sdk/ui] Table: @tanstack/react-table is not installed. ' +
+        'Install it with: npm install @tanstack/react-table'
+      );
+    }
+    return null;
+  }
+
+  const table = _useReactTable({
     data,
     columns,
     getRowId,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: sortable ? getSortedRowModel() : undefined,
+    getCoreRowModel: _getCoreRowModel(),
+    getSortedRowModel: sortable ? _getSortedRowModel() : undefined,
     state: {
       sorting: sortable ? sorting : undefined,
       rowSelection: selectable ? rowSelection : undefined,
@@ -178,9 +227,9 @@ function TableRoot<T>({
           </caption>
         )}
         <thead className={styles.thead}>
-          {table.getHeaderGroups().map((headerGroup) => (
+          {table.getHeaderGroups().map((headerGroup: any) => (
             <tr key={headerGroup.id} className={styles.headerRow}>
-              {headerGroup.headers.map((header) => {
+              {headerGroup.headers.map((header: any) => {
                 const canSort = sortable && header.column.getCanSort();
                 const sortDirection = header.column.getIsSorted();
                 const toggleSorting = canSort ? header.column.getToggleSortingHandler() : undefined;
@@ -210,7 +259,7 @@ function TableRoot<T>({
                         <span className={styles.headerContent}>
                           {header.isPlaceholder
                             ? null
-                            : flexRender(
+                            : _flexRender(
                                 header.column.columnDef.header,
                                 header.getContext()
                               )}
@@ -229,7 +278,7 @@ function TableRoot<T>({
                       <div className={styles.headerContent}>
                         {header.isPlaceholder
                           ? null
-                          : flexRender(
+                          : _flexRender(
                               header.column.columnDef.header,
                               header.getContext()
                             )}
@@ -242,7 +291,7 @@ function TableRoot<T>({
           ))}
         </thead>
         <tbody className={styles.tbody}>
-          {table.getRowModel().rows.map((row) => {
+          {table.getRowModel().rows.map((row: any) => {
             const isClickable = !!onRowClick;
             const isSelected = selectable ? row.getIsSelected() : false;
             const handleRowClick = (event: React.MouseEvent<HTMLTableRowElement>) => {
@@ -275,9 +324,9 @@ function TableRoot<T>({
                 tabIndex={isClickable ? 0 : undefined}
                 data-selected={isSelected || undefined}
               >
-                {row.getVisibleCells().map((cell) => (
+                {row.getVisibleCells().map((cell: any) => (
                   <td key={cell.id} className={styles.td} style={getColumnSizeStyle(cell.column)}>
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    {_flexRender(cell.column.columnDef.cell, cell.getContext())}
                   </td>
                 ))}
               </tr>
@@ -366,9 +415,6 @@ export function createColumns<T>(
   }));
 }
 
-// Re-export useful types
-export type { ColumnDef, SortingState, RowSelectionState };
-
 export const Table = Object.assign(TableRoot, {
   Root: TableRoot,
   Columns: createColumns,

package/src/index.ts

@@ -529,6 +529,31 @@ export {
 // Assets
 export { FragmentsLogo, type FragmentsLogoProps } from './assets/fragments-logo';
 
+// NavigationMenu
+export {
+  NavigationMenu,
+  NavigationMenuRoot,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuTrigger,
+  NavigationMenuContent,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+  NavigationMenuMobileContent,
+  NavigationMenuMobileSection,
+  type NavigationMenuProps,
+  type NavigationMenuListProps,
+  type NavigationMenuItemProps,
+  type NavigationMenuTriggerProps,
+  type NavigationMenuContentProps,
+  type NavigationMenuLinkProps,
+  type NavigationMenuIndicatorProps,
+  type NavigationMenuViewportProps,
+  type NavigationMenuMobileContentProps,
+  type NavigationMenuMobileSectionProps,
+} from './components/NavigationMenu';
+
 // Accessibility Utilities
 export {
   useId,

package/src/tokens/_palettes.scss

@@ -12,10 +12,10 @@
 @use 'sass:math';
 
 // --------------------------------------------
-// Wind - Muted cool neutrals (Default)
+// Stone - Muted cool neutrals (Default)
 // Subtle, balanced feel - matches current zinc-like palette
 // --------------------------------------------
-$palette-wind: (
+$palette-stone: (
   50:  #fafafa,
   100: #f4f4f5,
   200: #e4e4e7,
@@ -105,11 +105,12 @@ $palette-fire: (
 // Palette Map for Dynamic Access
 // --------------------------------------------
 $palettes: (
-  "wind": $palette-wind,
+  "stone": $palette-stone,
   "ice": $palette-ice,
   "sand": $palette-sand,
   "earth": $palette-earth,
-  "fire": $palette-fire
+  "fire": $palette-fire,
+  "wind": $palette-stone  // Legacy alias — "wind" was renamed to "stone"
 );
 
 // --------------------------------------------
@@ -117,12 +118,12 @@ $palettes: (
 // --------------------------------------------
 
 /// Get a palette map by name
-/// @param {String} $name - Palette name (wind, ice, sand, earth, fire)
+/// @param {String} $name - Palette name (stone, ice, sand, earth, fire)
 /// @return {Map} The palette map with shades 50-950
 @function get-palette($name) {
   @if not map.has-key($palettes, $name) {
-    @warn "Unknown palette '#{$name}'. Using 'wind' as fallback.";
-    @return $palette-wind;
+    @warn "Unknown palette '#{$name}'. Using 'stone' as fallback.";
+    @return $palette-stone;
   }
   @return map.get($palettes, $name);
 }

package/src/tokens/_seeds.scss

@@ -22,9 +22,9 @@
 $fui-brand: #18181b !default;
 
 /// Neutral palette name for surfaces, text, and borders
-/// Options: "wind" | "ice" | "earth" | "sand" | "fire"
+/// Options: "stone" | "ice" | "earth" | "sand" | "fire"
 /// @type String
-$fui-neutral: "wind" !default;
+$fui-neutral: "stone" !default;
 
 /// Density preset controlling spacing scale
 /// Options: "compact" | "default" | "relaxed"