@fragments-sdk/ui 0.9.6 → 0.9.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fragments-sdk/ui",
-  "version": "0.9.6",
+  "version": "0.9.7",
   "license": "MIT",
   "description": "Customizable UI components built on Base UI headless primitives",
   "author": "Conan McNicholl",

package/src/components/Chip/index.tsx

@@ -113,8 +113,10 @@ const ChipBase = React.forwardRef<HTMLButtonElement, ChipProps>(
   }
 );
 
+const EMPTY_CHIP_GROUP: string[] = [];
+
 function ChipGroupInner(
-  { children, value: controlledValue, defaultValue = [], onChange, className }: ChipGroupProps,
+  { children, value: controlledValue, defaultValue = EMPTY_CHIP_GROUP, onChange, className }: ChipGroupProps,
   ref: React.Ref<HTMLDivElement>
 ) {
   const [internalValue, setInternalValue] = React.useState<string[]>(defaultValue);

package/src/components/CodeBlock/index.tsx

@@ -544,8 +544,7 @@ const CodeBlockBase = React.forwardRef<HTMLDivElement, CodeBlockProps>(function
   ref
 ) {
   const [copied, setCopied] = useState(false);
-  const [highlightedHtml, setHighlightedHtml] = useState<string>("");
-  const [isLoading, setIsLoading] = useState(true);
+  const [highlight, setHighlight] = useState<{ html: string; loading: boolean }>({ html: '', loading: true });
   const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
 
   const trimmedCode = useMemo(() => normalizeCode(code), [code]);
@@ -570,50 +569,45 @@ const CodeBlockBase = React.forwardRef<HTMLDivElement, CodeBlockProps>(function
   // Apply syntax highlighting
   useEffect(() => {
     let cancelled = false;
-    setIsLoading(true);
+    setHighlight((prev) => ({ ...prev, loading: true }));
 
-    loadShikiDeps();
+    const run = async () => {
+      loadShikiDeps();
 
-    if (_shikiFailed || !_codeToHtml) {
-      if (_shikiFailed && process.env.NODE_ENV === "development") {
-        console.warn(
-          "[@fragments-sdk/ui] CodeBlock: shiki is not installed. " +
-            "Install it with: npm install shiki"
-        );
-      }
-      // Fallback to plain text without syntax highlighting
-      setHighlightedHtml(`<pre class="shiki"><code>${escapeHtml(visibleCode)}</code></pre>`);
-      setIsLoading(false);
-      return;
-    }
+      const fallbackHtml = `<pre class="shiki"><code>${escapeHtml(visibleCode)}</code></pre>`;
 
-    _codeToHtml(visibleCode, {
-      lang: language,
-      theme,
-    })
-      .then((html) => {
-        if (!cancelled) {
-          const processed = processShikiHtml(html, {
-            showLineNumbers,
-            startLineNumber,
-            highlightLines: highlightSet,
-            addedLines: addedSet,
-            removedLines: removedSet,
-          });
-          setHighlightedHtml(processed);
-          setIsLoading(false);
+      if (_shikiFailed || !_codeToHtml) {
+        if (_shikiFailed && process.env.NODE_ENV === "development") {
+          console.warn(
+            "[@fragments-sdk/ui] CodeBlock: shiki is not installed. " +
+              "Install it with: npm install shiki"
+          );
         }
-      })
-      .catch((err) => {
+        return fallbackHtml;
+      }
+
+      try {
+        const html = await _codeToHtml(visibleCode, { lang: language, theme });
+        return processShikiHtml(html, {
+          showLineNumbers,
+          startLineNumber,
+          highlightLines: highlightSet,
+          addedLines: addedSet,
+          removedLines: removedSet,
+        });
+      } catch (err) {
         if (process.env.NODE_ENV !== "production") {
           console.error("Syntax highlighting failed:", err);
         }
-        if (!cancelled) {
-          // Fallback to plain text
-          setHighlightedHtml(`<pre class="shiki"><code>${escapeHtml(visibleCode)}</code></pre>`);
-          setIsLoading(false);
-        }
-      });
+        return fallbackHtml;
+      }
+    };
+
+    run().then((html) => {
+      if (!cancelled) {
+        setHighlight({ html, loading: false });
+      }
+    });
 
     return () => {
       cancelled = true;
@@ -701,7 +695,7 @@ const CodeBlockBase = React.forwardRef<HTMLDivElement, CodeBlockProps>(function
             {copied ? <CheckIcon className={styles.icon} /> : <CopyIcon className={styles.icon} />}
           </button>
         )}
-        {isLoading ? (
+        {highlight.loading ? (
           <div className={styles.loading} style={codeContainerStyle}>
             <pre>
               <code>{visibleCode}</code>
@@ -711,7 +705,7 @@ const CodeBlockBase = React.forwardRef<HTMLDivElement, CodeBlockProps>(function
           <div
             className={styles.codeContainer}
             style={codeContainerStyle}
-            dangerouslySetInnerHTML={{ __html: highlightedHtml }}
+            dangerouslySetInnerHTML={{ __html: highlight.html }}
           />
         )}
         {persistentCopy && (

package/src/components/ColorPicker/ColorPicker.fragment.tsx

@@ -2,6 +2,22 @@ import React from 'react';
 import { defineFragment } from '@fragments-sdk/cli/core';
 import { ColorPicker } from '.';
 
+function ControlledColorPickerDemo() {
+  const [color, setColor] = React.useState('#ef4444');
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+      <ColorPicker
+        label="Accent Color"
+        value={color}
+        onChange={setColor}
+      />
+      <div style={{ fontSize: '14px', color: 'var(--fui-text-secondary)' }}>
+        Selected: {color}
+      </div>
+    </div>
+  );
+}
+
 export default defineFragment({
   component: ColorPicker,
 
@@ -133,21 +149,7 @@ export default defineFragment({
     {
       name: 'Controlled',
       description: 'Controlled color picker that logs changes',
-      render: () => {
-        const [color, setColor] = React.useState('#ef4444');
-        return (
-          <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
-            <ColorPicker
-              label="Accent Color"
-              value={color}
-              onChange={setColor}
-            />
-            <div style={{ fontSize: '14px', color: 'var(--fui-text-secondary)' }}>
-              Selected: {color}
-            </div>
-          </div>
-        );
-      },
+      render: () => <ControlledColorPickerDemo />,
     },
     {
       name: 'Multiple Pickers',

package/src/components/Command/index.tsx

@@ -400,6 +400,7 @@ function CommandItem({
       data-active={isActive || undefined}
       data-disabled={disabled || undefined}
       onClick={handleClick}
+      onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleClick(); } }}
       onMouseEnter={handleMouseEnter}
       className={[
         styles.item,

package/src/components/DataTable/index.tsx

@@ -102,6 +102,41 @@ export interface DataTableProps<T> extends Omit<React.HTMLAttributes<HTMLTableEl
   bordered?: boolean;
 }
 
+function getColumnSizeStyle(
+  column: {
+    getSize: () => number;
+    columnDef: { size?: number; minSize?: number; maxSize?: number };
+  }
+): React.CSSProperties | undefined {
+  const { size, minSize, maxSize } = column.columnDef;
+  const hasExplicitSize = size !== undefined || minSize !== undefined || maxSize !== undefined;
+
+  if (!hasExplicitSize) {
+    return undefined;
+  }
+
+  const resolvedSize = column.getSize();
+
+  return {
+    width: resolvedSize,
+    minWidth: minSize ?? resolvedSize,
+    maxWidth: maxSize ?? resolvedSize,
+  };
+}
+
+function isInteractiveTarget(
+  target: EventTarget | null,
+  currentTarget: HTMLTableRowElement
+) {
+  if (!(target instanceof Element)) return false;
+
+  const interactiveElement = target.closest(
+    'button, a, input, select, textarea, [role="button"], [role="link"], [role="checkbox"], [role="switch"]'
+  );
+
+  return Boolean(interactiveElement && currentTarget.contains(interactiveElement));
+}
+
 function DataTableRoot<T>({
   columns: userColumns,
   data,
@@ -178,6 +213,16 @@ function DataTableRoot<T>({
     return [checkboxColumn, ...userColumns];
   }, [userColumns, showCheckbox, selectable]);
 
+  const hasExplicitColumnSizing = React.useMemo(
+    () =>
+      columns.some((column) =>
+        column.size !== undefined ||
+        column.minSize !== undefined ||
+        column.maxSize !== undefined
+      ),
+    [columns]
+  );
+
   if (_tableFailed || !_useReactTable) {
     if (_tableFailed && process.env.NODE_ENV === 'development') {
       console.warn(
@@ -213,16 +258,6 @@ function DataTableRoot<T>({
 
   const isEmpty = data.length === 0;
 
-  const hasExplicitColumnSizing = React.useMemo(
-    () =>
-      columns.some((column) =>
-        column.size !== undefined ||
-        column.minSize !== undefined ||
-        column.maxSize !== undefined
-      ),
-    [columns]
-  );
-
   const rootClasses = [
     styles.table,
     hasExplicitColumnSizing && styles.fixedLayout,
@@ -233,28 +268,6 @@ function DataTableRoot<T>({
     .filter(Boolean)
     .join(' ');
 
-  const getColumnSizeStyle = (
-    column: {
-      getSize: () => number;
-      columnDef: { size?: number; minSize?: number; maxSize?: number };
-    }
-  ): React.CSSProperties | undefined => {
-    const { size, minSize, maxSize } = column.columnDef;
-    const hasExplicitSize = size !== undefined || minSize !== undefined || maxSize !== undefined;
-
-    if (!hasExplicitSize) {
-      return undefined;
-    }
-
-    const resolvedSize = column.getSize();
-
-    return {
-      width: resolvedSize,
-      minWidth: minSize ?? resolvedSize,
-      maxWidth: maxSize ?? resolvedSize,
-    };
-  };
-
   if (isEmpty) {
     return (
       <div className={styles.emptyState}>
@@ -263,19 +276,6 @@ function DataTableRoot<T>({
     );
   }
 
-  const isInteractiveTarget = (
-    target: EventTarget | null,
-    currentTarget: HTMLTableRowElement
-  ) => {
-    if (!(target instanceof Element)) return false;
-
-    const interactiveElement = target.closest(
-      'button, a, input, select, textarea, [role="button"], [role="link"], [role="checkbox"], [role="switch"]'
-    );
-
-    return Boolean(interactiveElement && currentTarget.contains(interactiveElement));
-  };
-
   return (
     <div className={[styles.wrapper, bordered && styles.bordered].filter(Boolean).join(' ')}>
       <table

package/src/components/Listbox/index.tsx

@@ -243,6 +243,7 @@ function ListboxItem({
       aria-disabled={disabled}
       data-active={context?.activeId === itemId || undefined}
       onClick={disabled ? undefined : onClick}
+      onKeyDown={disabled ? undefined : (e: React.KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onClick?.(); } }}
       onMouseEnter={handleMouseEnter}
       className={classes}
       style={style}

package/src/components/Loading/index.tsx

@@ -118,17 +118,11 @@ const LoadingRoot = React.forwardRef<HTMLDivElement, LoadingProps>(
       .filter(Boolean)
       .join(' ');
 
-    const renderAnimation = () => {
-      switch (variant) {
-        case 'dots':
-          return <DotsAnimation className={styles.dots} />;
-        case 'pulse':
-          return <PulseAnimation className={styles.pulse} />;
-        case 'spinner':
-        default:
-          return <SpinnerIcon className={styles.spinnerIcon} />;
-      }
-    };
+    const animation = variant === 'dots'
+      ? <DotsAnimation className={styles.dots} />
+      : variant === 'pulse'
+        ? <PulseAnimation className={styles.pulse} />
+        : <SpinnerIcon className={styles.spinnerIcon} />;
 
     const content = (
       <div
@@ -139,7 +133,7 @@ const LoadingRoot = React.forwardRef<HTMLDivElement, LoadingProps>(
         aria-live="polite"
         {...htmlProps}
       >
-        {renderAnimation()}
+        {animation}
       </div>
     );
 

package/src/components/Markdown/index.tsx

@@ -59,8 +59,8 @@ function FallbackRenderer({ content, className }: { content: string; className?:
   const paragraphs = content.split(/\n{2,}/);
   return (
     <div className={className}>
-      {paragraphs.map((p, i) => (
-        <p key={i}>{p}</p>
+      {paragraphs.map((p) => (
+        <p key={p}>{p}</p>
       ))}
     </div>
   );

package/src/components/Menu/Menu.fragment.tsx

@@ -3,6 +3,22 @@ import { defineFragment } from '@fragments-sdk/cli/core';
 import { Menu } from '.';
 import { Button } from '../Button';
 
+function CheckedItemsMenuDemo() {
+  const [view, setView] = React.useState('grid');
+  return (
+    <Menu>
+      <Menu.Trigger asChild>
+        <Button variant="secondary">View</Button>
+      </Menu.Trigger>
+      <Menu.Content>
+        <Menu.Item checked={view === 'grid'} onSelect={() => setView('grid')}>Grid</Menu.Item>
+        <Menu.Item checked={view === 'list'} onSelect={() => setView('list')}>List</Menu.Item>
+        <Menu.Item checked={view === 'board'} onSelect={() => setView('board')}>Board</Menu.Item>
+      </Menu.Content>
+    </Menu>
+  );
+}
+
 export default defineFragment({
   component: Menu,
 
@@ -181,21 +197,7 @@ export default defineFragment({
     {
       name: 'With Checked Items',
       description: 'Filter menu with check marks indicating active selections',
-      render: () => {
-        const [view, setView] = React.useState('grid');
-        return (
-          <Menu>
-            <Menu.Trigger asChild>
-              <Button variant="secondary">View</Button>
-            </Menu.Trigger>
-            <Menu.Content>
-              <Menu.Item checked={view === 'grid'} onSelect={() => setView('grid')}>Grid</Menu.Item>
-              <Menu.Item checked={view === 'list'} onSelect={() => setView('list')}>List</Menu.Item>
-              <Menu.Item checked={view === 'board'} onSelect={() => setView('board')}>Board</Menu.Item>
-            </Menu.Content>
-          </Menu>
-        );
-      },
+      render: () => <CheckedItemsMenuDemo />,
     },
     {
       name: 'With Submenu',

package/src/components/NavigationMenu/index.tsx

@@ -840,7 +840,12 @@ function MobileCollapsibleSection({
         {label}
       </Collapsible.Trigger>
       <Collapsible.Content>
-        <div className={styles.drawerCollapsibleContent} onClick={onLinkClick}>
+        <div
+          className={styles.drawerCollapsibleContent}
+          onClick={onLinkClick}
+          onKeyDown={(e) => { if (e.key === 'Enter') onLinkClick(); }}
+          role="group"
+        >
           {children}
         </div>
       </Collapsible.Content>

package/src/components/Skeleton/index.tsx

@@ -134,11 +134,11 @@ function SkeletonText({
 
   return (
     <div className={containerClasses} aria-hidden="true">
-      {Array.from({ length: lines }, (_, i) => {
-        const isLast = i === lines - 1;
+      {Array.from({ length: lines }, (_, lineIdx) => {
+        const isLast = lineIdx === lines - 1;
         return (
           <div
-            key={i}
+            key={`line-${lineIdx}`}
             className={styles.textLine}
             style={isLast && lines > 1 ? { width: `${lastLineWidth}%` } : undefined}
           />

package/src/components/Slider/Slider.fragment.tsx

@@ -2,6 +2,24 @@ import React from 'react';
 import { defineFragment } from '@fragments-sdk/cli/core';
 import { Slider } from '.';
 
+function ControlledSliderDemo() {
+  const [value, setValue] = React.useState(50);
+  return (
+    <div style={{ width: '300px', display: 'flex', flexDirection: 'column', gap: '12px' }}>
+      <Slider
+        label="Opacity"
+        value={value}
+        onChange={setValue}
+        showValue
+        valueSuffix="%"
+      />
+      <div style={{ fontSize: '14px', color: 'var(--fui-text-secondary)' }}>
+        Current value: {value}%
+      </div>
+    </div>
+  );
+}
+
 export default defineFragment({
   component: Slider,
 
@@ -165,23 +183,7 @@ export default defineFragment({
     {
       name: 'Controlled',
       description: 'Controlled slider with external state',
-      render: () => {
-        const [value, setValue] = React.useState(50);
-        return (
-          <div style={{ width: '300px', display: 'flex', flexDirection: 'column', gap: '12px' }}>
-            <Slider
-              label="Opacity"
-              value={value}
-              onChange={setValue}
-              showValue
-              valueSuffix="%"
-            />
-            <div style={{ fontSize: '14px', color: 'var(--fui-text-secondary)' }}>
-              Current value: {value}%
-            </div>
-          </div>
-        );
-      },
+      render: () => <ControlledSliderDemo />,
     },
     {
       name: 'Disabled',

package/src/components/Stack/index.tsx

@@ -147,11 +147,12 @@ const StackRoot = React.forwardRef<HTMLElement, StackProps>(
         ) : separator;
 
         const items: React.ReactNode[] = [];
-        validChildren.forEach((child, i) => {
+        validChildren.forEach((child, idx) => {
           items.push(child);
-          if (i < validChildren.length - 1) {
+          if (idx < validChildren.length - 1) {
+            const childKey = React.isValidElement(child) && child.key != null ? child.key : `idx-${idx}`;
             items.push(
-              <React.Fragment key={`sep-${i}`}>{separatorEl}</React.Fragment>
+              <React.Fragment key={`sep-${childKey}`}>{separatorEl}</React.Fragment>
             );
           }
         });