@fragments-sdk/ui 0.8.8 → 0.9.0

package/src/components/BentoGrid/index.tsx

@@ -0,0 +1,150 @@
+import * as React from 'react';
+import styles from './BentoGrid.module.scss';
+// Import globals to ensure CSS variables are defined
+import '../../styles/globals.scss';
+
+// ============================================
+// Types
+// ============================================
+
+type SpanValue = 1 | 2 | 3;
+
+export interface ResponsiveSpan {
+  /** Default (mobile-first) */
+  base?: SpanValue;
+  /** ≥640px */
+  sm?: SpanValue;
+  /** ≥768px */
+  md?: SpanValue;
+  /** ≥1024px */
+  lg?: SpanValue;
+  /** ≥1280px */
+  xl?: SpanValue;
+}
+
+export interface BentoGridProps {
+  children?: React.ReactNode;
+  /** Number of columns (default: 3) — auto-collapses responsively */
+  columns?: 2 | 3 | 4;
+  /** Gap between grid items */
+  gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  /** Additional class name */
+  className?: string;
+  /** Inline styles */
+  style?: React.CSSProperties;
+}
+
+export interface BentoGridItemProps {
+  children?: React.ReactNode;
+  /** Columns to span — number for all breakpoints, object for per-breakpoint */
+  colSpan?: SpanValue | ResponsiveSpan;
+  /** Rows to span — number for all breakpoints, object for per-breakpoint */
+  rowSpan?: SpanValue | ResponsiveSpan;
+  /** Additional class name */
+  className?: string;
+}
+
+// ============================================
+// Helpers
+// ============================================
+
+const gapClasses: Record<NonNullable<BentoGridProps['gap']>, string> = {
+  none: styles.gapNone,
+  xs: styles.gapXs,
+  sm: styles.gapSm,
+  md: styles.gapMd,
+  lg: styles.gapLg,
+  xl: styles.gapXl,
+};
+
+function getSpanVars(
+  span: SpanValue | ResponsiveSpan | undefined,
+  prefix: string
+): Record<string, number> {
+  if (!span || span === 1) return {};
+  if (typeof span === 'number') return { [`--${prefix}`]: span };
+  const vars: Record<string, number> = {};
+  if (span.base && span.base > 1) vars[`--${prefix}`] = span.base;
+  if (span.sm) vars[`--${prefix}-sm`] = span.sm;
+  if (span.md) vars[`--${prefix}-md`] = span.md;
+  if (span.lg) vars[`--${prefix}-lg`] = span.lg;
+  if (span.xl) vars[`--${prefix}-xl`] = span.xl;
+  return vars;
+}
+
+// ============================================
+// BentoGrid Component
+// ============================================
+
+export const BentoGrid = React.forwardRef<HTMLDivElement, BentoGridProps>(
+  function BentoGrid(
+    {
+      children,
+      columns = 3,
+      gap = 'md',
+      className,
+      style,
+    },
+    ref
+  ) {
+    const classes = [
+      styles.grid,
+      styles[`columns${columns}`],
+      gapClasses[gap],
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ');
+
+    return (
+      <div ref={ref} className={classes} style={style}>
+        {children}
+      </div>
+    );
+  }
+) as BentoGridComponent;
+
+// ============================================
+// BentoGrid.Item Sub-component
+// ============================================
+
+const BentoGridItem = React.forwardRef<HTMLDivElement, BentoGridItemProps>(
+  function BentoGridItem(
+    {
+      children,
+      colSpan,
+      rowSpan,
+      className,
+    },
+    ref
+  ) {
+    const spanVars = {
+      ...getSpanVars(colSpan, 'bento-col-span'),
+      ...getSpanVars(rowSpan, 'bento-row-span'),
+    };
+
+    const hasVars = Object.keys(spanVars).length > 0;
+    const inlineStyle = hasVars
+      ? (spanVars as unknown as React.CSSProperties)
+      : undefined;
+
+    const classes = [styles.item, className].filter(Boolean).join(' ');
+
+    return (
+      <div ref={ref} className={classes} style={inlineStyle}>
+        {children}
+      </div>
+    );
+  }
+);
+
+// ============================================
+// Compound component type
+// ============================================
+
+interface BentoGridComponent
+  extends React.ForwardRefExoticComponent<BentoGridProps & React.RefAttributes<HTMLDivElement>> {
+  Item: typeof BentoGridItem;
+}
+
+(BentoGrid as BentoGridComponent).Item = BentoGridItem;

package/src/components/Button/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { Button as BaseButton } from '@base-ui/react/button';
 import styles from './Button.module.scss';

package/src/components/Card/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import styles from './Card.module.scss';
 // Import globals to ensure CSS variables are defined

package/src/components/Chart/Chart.test.tsx

@@ -11,8 +11,8 @@ import {
 
 // Mock recharts to avoid SVG rendering issues in jsdom
 vi.mock('recharts', () => ({
-  Tooltip: ({ content, ...props }: any) => <div data-testid="recharts-tooltip" {...props} />,
-  Legend: ({ content, ...props }: any) => <div data-testid="recharts-legend" {...props} />,
+  Tooltip: ({ content: _content, ...props }: any) => <div data-testid="recharts-tooltip" {...props} />,
+  Legend: ({ content: _content, ...props }: any) => <div data-testid="recharts-legend" {...props} />,
 }));
 
 const config: ChartConfig = {

package/src/components/Checkbox/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';
 import styles from './Checkbox.module.scss';

package/src/components/CodeBlock/index.tsx

@@ -668,7 +668,7 @@ const CodeBlockBase = React.forwardRef<HTMLDivElement, CodeBlockProps>(
       : {};
 
     return (
-      <div ref={ref} {...htmlProps} className={classNames}>
+      <div ref={ref} {...htmlProps} className={classNames} data-theme="dark">
         {title && <div className={styles.title}>{title}</div>}
         <div className={wrapperClasses}>
           {shouldRenderHeader && (

package/src/components/Command/Command.test.tsx

@@ -283,7 +283,7 @@ describe('Command', () => {
     const user = userEvent.setup();
     const onSearchChange = vi.fn();
 
-    const { rerender } = render(
+    render(
       <Command search="open" onSearchChange={onSearchChange}>
         <Command.Input placeholder="Search..." />
         <Command.List>

package/src/components/Command/index.tsx

@@ -53,7 +53,7 @@ export interface CommandEmptyProps extends React.HTMLAttributes<HTMLDivElement>
   children: React.ReactNode;
 }
 
-export interface CommandSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {}
+export type CommandSeparatorProps = React.HTMLAttributes<HTMLDivElement>;
 
 // ============================================
 // Default filter

package/src/components/DatePicker/index.tsx

@@ -350,7 +350,7 @@ function DatePickerRoot({
       // matches shadcn behavior and avoids premature close on first
       // click or preset selection.
     },
-    [selectedRangeProp, onRangeSelect, isControlledOpen, onOpenChange]
+    [selectedRangeProp, onRangeSelect]
   );
 
   const defaultPlaceholder = mode === 'range' ? 'Select date range' : 'Pick a date';

package/src/components/Dialog/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { Dialog as BaseDialog } from '@base-ui/react/dialog';
 import styles from './Dialog.module.scss';

package/src/components/Drawer/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { Dialog as BaseDialog } from '@base-ui/react/dialog';
 import styles from './Drawer.module.scss';

package/src/components/EmptyState/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import styles from './EmptyState.module.scss';
 // Import globals to ensure CSS variables are defined

package/src/components/Field/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { Field as BaseField, type FieldValidityState } from '@base-ui/react/field';
 import styles from './Field.module.scss';

package/src/components/Fieldset/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { Fieldset as BaseFieldset } from '@base-ui/react/fieldset';
 import styles from './Fieldset.module.scss';

package/src/components/Form/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { Form as BaseForm } from '@base-ui/react/form';
 import styles from './Form.module.scss';

package/src/components/Header/Header.module.scss

@@ -33,6 +33,10 @@
   gap: var(--fui-space-4, $fui-space-4);
   width: 100%;
   max-width: 100%;
+
+  @include below-md {
+    gap: var(--fui-space-1, $fui-space-1);
+  }
 }
 
 // ============================================

package/src/components/Icon/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import type { IconProps as PhosphorIconProps } from '@phosphor-icons/react';
 import styles from './Icon.module.scss';

package/src/components/List/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import styles from './List.module.scss';
 import '../../styles/globals.scss';

package/src/components/Menu/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { Menu as BaseMenu } from '@base-ui/react/menu';
 import styles from './Menu.module.scss';

package/src/components/NavigationMenu/NavigationMenu.module.scss

@@ -277,7 +277,6 @@
   width: var(--fui-navmenu-viewport-width);
   height: var(--fui-navmenu-viewport-height);
   transition:
-    left var(--fui-transition-fast, $fui-transition-fast),
     opacity var(--fui-transition-fast, $fui-transition-fast);
 
   // Hidden when no item is open
@@ -372,7 +371,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: var(--fui-space-3, $fui-space-3) var(--fui-padding-container-md, $fui-padding-container-md);
+  padding: 0 var(--fui-padding-container-md, $fui-padding-container-md);
   border-bottom: 1px solid var(--fui-border, $fui-border);
   min-height: var(--fui-appshell-header-height, $fui-appshell-header-height);
 }

package/src/components/NavigationMenu/NavigationMenuContext.ts

@@ -53,6 +53,8 @@ export interface NavigationMenuContextValue {
   setMobileOpen: (open: boolean) => void;
   mobileContentChildren: React.ReactNode;
   setMobileContentChildren: (children: React.ReactNode) => void;
+  mobileBrandChildren: React.ReactNode;
+  setMobileBrandChildren: (children: React.ReactNode) => void;
 
   // Root nav id
   rootId: string;

package/src/components/NavigationMenu/index.tsx

@@ -89,6 +89,10 @@ export interface NavigationMenuMobileContentProps {
   children: React.ReactNode;
 }
 
+export interface NavigationMenuMobileBrandProps {
+  children: React.ReactNode;
+}
+
 export interface NavigationMenuMobileSectionProps {
   children: React.ReactNode;
   /** Section heading label */
@@ -664,6 +668,22 @@ function NavigationMenuMobileContent({ children }: NavigationMenuMobileContentPr
   return null;
 }
 
+// ============================================
+// MobileBrand (slot for brand in mobile drawer header)
+// ============================================
+
+function NavigationMenuMobileBrand({ children }: NavigationMenuMobileBrandProps) {
+  const ctx = useNavigationMenuContext();
+
+  React.useEffect(() => {
+    ctx.setMobileBrandChildren(children);
+    return () => ctx.setMobileBrandChildren(null);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [children]);
+
+  return null;
+}
+
 // ============================================
 // MobileSection
 // ============================================
@@ -755,7 +775,7 @@ function MobileDrawer() {
         aria-label="Navigation"
       >
         <div className={styles.drawerHeader}>
-          <span />
+          {ctx.mobileBrandChildren ?? <span />}
           <button
             type="button"
             className={styles.drawerClose}
@@ -766,29 +786,34 @@ function MobileDrawer() {
           </button>
         </div>
         <ScrollArea orientation="vertical" className={styles.drawerBody}>
-          <div className={styles.drawerNav}>
-            {autoItems.map((item) =>
-              item.contentChildren ? (
-                <MobileCollapsibleSection
-                  key={item.value}
-                  label={item.triggerLabel}
-                  onLinkClick={handleLinkClick}
-                >
-                  {item.contentChildren}
-                </MobileCollapsibleSection>
-              ) : item.linkHref ? (
-                <a
-                  key={item.value}
-                  className={styles.drawerLink}
-                  href={item.linkHref}
-                  onClick={handleLinkClick}
-                >
-                  {item.triggerLabel}
-                </a>
-              ) : null
-            )}
-          </div>
-          {ctx.mobileContentChildren}
+          {/* When MobileContent is provided, it takes full control of the drawer nav.
+              Otherwise, auto-convert registered Trigger+Content items. */}
+          {ctx.mobileContentChildren ? (
+            ctx.mobileContentChildren
+          ) : (
+            <div className={styles.drawerNav}>
+              {autoItems.map((item) =>
+                item.contentChildren ? (
+                  <MobileCollapsibleSection
+                    key={item.value}
+                    label={item.triggerLabel}
+                    onLinkClick={handleLinkClick}
+                  >
+                    {item.contentChildren}
+                  </MobileCollapsibleSection>
+                ) : item.linkHref ? (
+                  <a
+                    key={item.value}
+                    className={styles.drawerLink}
+                    href={item.linkHref}
+                    onClick={handleLinkClick}
+                  >
+                    {item.triggerLabel}
+                  </a>
+                ) : null
+              )}
+            </div>
+          )}
         </ScrollArea>
       </div>
     </>
@@ -837,6 +862,7 @@ export const NavigationMenu = Object.assign(NavigationMenuRoot, {
   Link: NavigationMenuLink,
   Indicator: NavigationMenuIndicator,
   Viewport: NavigationMenuViewport,
+  MobileBrand: NavigationMenuMobileBrand,
   MobileContent: NavigationMenuMobileContent,
   MobileSection: NavigationMenuMobileSection,
 });
@@ -850,6 +876,7 @@ export {
   NavigationMenuLink,
   NavigationMenuIndicator,
   NavigationMenuViewport,
+  NavigationMenuMobileBrand,
   NavigationMenuMobileContent,
   NavigationMenuMobileSection,
 };

package/src/components/NavigationMenu/useNavigationMenu.ts

@@ -57,6 +57,7 @@ export function useNavigationMenu({
   // Mobile state
   const [mobileOpen, setMobileOpen] = React.useState(false);
   const [mobileContentChildren, setMobileContentChildren] = React.useState<React.ReactNode>(null);
+  const [mobileBrandChildren, setMobileBrandChildren] = React.useState<React.ReactNode>(null);
 
   // Clean up timers on unmount
   React.useEffect(() => {
@@ -87,5 +88,7 @@ export function useNavigationMenu({
     setMobileOpen,
     mobileContentChildren,
     setMobileContentChildren,
+    mobileBrandChildren,
+    setMobileBrandChildren,
   };
 }

package/src/components/Pagination/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import styles from './Pagination.module.scss';
 import '../../styles/globals.scss';

package/src/components/Popover/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { Popover as BasePopover } from '@base-ui/react/popover';
 import styles from './Popover.module.scss';

package/src/components/Progress/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { Progress as BaseProgress } from '@base-ui/react/progress';
 import styles from './Progress.module.scss';

package/src/components/RadioGroup/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group';
 import { Radio as BaseRadio } from '@base-ui/react/radio';

package/src/components/Separator/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { Separator as BaseSeparator } from '@base-ui/react/separator';
 import styles from './Separator.module.scss';

package/src/components/Switch/index.ts

@@ -1 +1,3 @@
+'use client';
+
 export { Switch, type SwitchProps, Toggle, type ToggleProps } from '../Toggle';

package/src/components/Theme/index.tsx

@@ -206,9 +206,10 @@ function ThemeProvider({
     setMounted(true);
   }, [isControlled, storageKey]);
 
-  // Apply theme to DOM
+  // Apply theme to DOM — skip until mounted so we don't overwrite
+  // the inline script that prevents flash on initial page load
   React.useEffect(() => {
-    if (typeof document === 'undefined') return;
+    if (typeof document === 'undefined' || !mounted) return;
 
     const root = document.documentElement;
 
@@ -218,7 +219,7 @@ function ThemeProvider({
       root.classList.remove('light', 'dark');
       root.classList.add(resolvedMode);
     }
-  }, [resolvedMode, attribute]);
+  }, [resolvedMode, attribute, mounted]);
 
   // Persist to localStorage when mode changes
   React.useEffect(() => {

package/src/components/Toggle/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { Switch as BaseSwitch } from '@base-ui/react/switch';
 import styles from './Toggle.module.scss';