@fragments-sdk/ui 0.12.0 → 0.14.0

package/src/components/CodeBlock/index.tsx

@@ -767,6 +767,8 @@ const CodeBlockBase = React.forwardRef<HTMLDivElement, CodeBlockProps>(function
 export interface CodeBlockTab {
   /** Label shown in the tab */
   label: string;
+  /** Stable tab value (defaults to label) */
+  value?: string;
   /** Code string to display */
   code: string;
   /** Programming language for syntax highlighting */
@@ -776,8 +778,12 @@ export interface CodeBlockTab {
 export interface TabbedCodeBlockProps {
   /** Array of code tabs */
   tabs: CodeBlockTab[];
-  /** Default selected tab (by label) */
+  /** Default selected tab (by tab value, or label when value is omitted) */
   defaultTab?: string;
+  /** Controlled selected tab value */
+  value?: string;
+  /** Called when the selected tab changes */
+  onValueChange?: (value: string) => void;
   /** Show copy button */
   showCopy?: boolean;
   /** Placement of copy button when not using persistent copy */
@@ -801,6 +807,8 @@ export interface TabbedCodeBlockProps {
 function TabbedCodeBlock({
   tabs,
   defaultTab,
+  value,
+  onValueChange,
   showCopy = true,
   copyPlacement = "auto",
   showLineNumbers = false,
@@ -811,20 +819,25 @@ function TabbedCodeBlock({
   className,
   onCopy,
 }: TabbedCodeBlockProps) {
-  const defaultValue = defaultTab || tabs[0]?.label || "";
+  const defaultValue = defaultTab || tabs[0]?.value || tabs[0]?.label || "";
 
   return (
     <div className={className}>
-      <TabsRoot defaultValue={defaultValue}>
+      <TabsRoot defaultValue={defaultValue} value={value} onValueChange={onValueChange}>
         <TabsList variant={tabsVariant}>
-          {tabs.map((tab) => (
-            <Tab key={tab.label} value={tab.label}>
+          {tabs.map((tab, index) => {
+            const tabValue = tab.value ?? tab.label;
+            return (
+            <Tab key={`${tabValue}-${index}`} value={tabValue}>
               {tab.label}
             </Tab>
-          ))}
+            );
+          })}
         </TabsList>
-        {tabs.map((tab) => (
-          <TabsPanel key={tab.label} value={tab.label} flush className={styles.tabbedPanel}>
+        {tabs.map((tab, index) => {
+          const tabValue = tab.value ?? tab.label;
+          return (
+          <TabsPanel key={`${tabValue}-panel-${index}`} value={tabValue} flush className={styles.tabbedPanel}>
             <CodeBlockBase
               code={tab.code}
               language={tab.language}
@@ -837,7 +850,8 @@ function TabbedCodeBlock({
               onCopy={onCopy ? () => onCopy(tab.label) : undefined}
             />
           </TabsPanel>
-        ))}
+          );
+        })}
       </TabsRoot>
     </div>
   );

package/src/components/Collapsible/Collapsible.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments-sdk/cli/core';
+import { defineFragment } from '@fragments-sdk/core';
 import { Collapsible } from '.';
 
 export default defineFragment({

package/src/components/Collapsible/Collapsible.module.scss

@@ -9,7 +9,7 @@
   display: flex;
   align-items: center;
   width: 100%;
-  padding: var(--fui-padding-item-xs);
+  padding: var(--fui-space-1);
   background: transparent;
   border: none;
   border-radius: var(--fui-radius-md, $fui-radius-md);

package/src/components/Collapsible/Collapsible.test.tsx

@@ -96,6 +96,47 @@ describe('Collapsible', () => {
     expect(screen.queryByText('Collapsible content here')).not.toBeInTheDocument();
   });
 
+  it('composes child handlers when trigger uses asChild', async () => {
+    const user = userEvent.setup();
+    const childClick = vi.fn();
+    const childKeyDown = vi.fn();
+
+    render(
+      <Collapsible>
+        <Collapsible.Trigger asChild>
+          <button onClick={childClick} onKeyDown={childKeyDown}>Toggle</button>
+        </Collapsible.Trigger>
+        <Collapsible.Content>Collapsible content here</Collapsible.Content>
+      </Collapsible>
+    );
+
+    const trigger = screen.getByRole('button', { name: /toggle/i });
+    await user.click(trigger);
+    expect(childClick).toHaveBeenCalled();
+    expect(screen.getByText('Collapsible content here')).toBeInTheDocument();
+
+    await user.keyboard('{Enter}');
+    expect(childKeyDown).toHaveBeenCalled();
+  });
+
+  it('forwards html props to root, trigger, and content', async () => {
+    const user = userEvent.setup();
+    render(
+      <Collapsible data-testid="root" data-track="collapsible-root">
+        <Collapsible.Trigger data-testid="trigger" aria-label="Toggle section">Toggle</Collapsible.Trigger>
+        <Collapsible.Content data-testid="content" data-panel="details">
+          Collapsible content here
+        </Collapsible.Content>
+      </Collapsible>
+    );
+
+    await user.click(screen.getByTestId('trigger'));
+
+    expect(screen.getByTestId('root')).toHaveAttribute('data-track', 'collapsible-root');
+    expect(screen.getByTestId('trigger')).toHaveAttribute('aria-label', 'Toggle section');
+    expect(screen.getByTestId('content')).toHaveAttribute('data-panel', 'details');
+  });
+
   it('has no accessibility violations', async () => {
     const { container } = renderCollapsible({ defaultOpen: true });
     await expectNoA11yViolations(container);

package/src/components/Collapsible/index.tsx

@@ -3,6 +3,17 @@
 import React, { useState, useCallback, useId, createContext, useContext } from 'react';
 import styles from './Collapsible.module.scss';
 
+function composeEventHandlers<E extends { defaultPrevented: boolean }>(
+  userHandler: ((event: E) => void) | undefined,
+  internalHandler: (event: E) => void
+) {
+  return (event: E) => {
+    userHandler?.(event);
+    if (event.defaultPrevented) return;
+    internalHandler(event);
+  };
+}
+
 // Context for sharing state between compound components
 interface CollapsibleContextValue {
   isOpen: boolean;
@@ -23,7 +34,7 @@ function useCollapsibleContext() {
 }
 
 // Root component
-export interface CollapsibleRootProps {
+export interface CollapsibleRootProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
   /** Whether the collapsible is initially open */
   defaultOpen?: boolean;
@@ -33,8 +44,6 @@ export interface CollapsibleRootProps {
   onOpenChange?: (open: boolean) => void;
   /** Whether the collapsible is disabled */
   disabled?: boolean;
-  /** Additional class name */
-  className?: string;
 }
 
 function CollapsibleRoot({
@@ -44,6 +53,7 @@ function CollapsibleRoot({
   onOpenChange,
   disabled = false,
   className,
+  ...htmlProps
 }: CollapsibleRootProps) {
   const [internalOpen, setInternalOpen] = useState(defaultOpen);
   const isControlled = controlledOpen !== undefined;
@@ -78,6 +88,7 @@ function CollapsibleRoot({
   return (
     <CollapsibleContext.Provider value={contextValue}>
       <div
+        {...htmlProps}
         className={`${styles.root} ${isOpen ? styles.open : ''} ${disabled ? styles.disabled : ''} ${className || ''}`}
         data-state={isOpen ? 'open' : 'closed'}
         data-disabled={disabled || undefined}
@@ -89,10 +100,8 @@ function CollapsibleRoot({
 }
 
 // Trigger component
-export interface CollapsibleTriggerProps {
+export interface CollapsibleTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children: React.ReactNode;
-  /** Additional class name */
-  className?: string;
   /** Show chevron indicator */
   showChevron?: boolean;
   /** Chevron position */
@@ -107,6 +116,9 @@ function CollapsibleTrigger({
   showChevron = true,
   chevronPosition = 'end',
   asChild = false,
+  onClick,
+  onKeyDown,
+  ...htmlProps
 }: CollapsibleTriggerProps) {
   const { isOpen, toggle, contentId, triggerId, disabled } = useCollapsibleContext();
 
@@ -117,6 +129,10 @@ function CollapsibleTrigger({
     }
   };
 
+  const handleClick = () => {
+    toggle();
+  };
+
   const chevronIcon = showChevron && (
     <svg
       className={`${styles.chevron} ${isOpen ? styles.chevronOpen : ''}`}
@@ -137,26 +153,47 @@ function CollapsibleTrigger({
   );
 
   if (asChild && React.isValidElement(children)) {
+    const childProps = children.props as {
+      className?: string;
+      onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+      onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;
+    };
+
     return React.cloneElement(children as React.ReactElement<any>, {
-      id: triggerId,
+      ...htmlProps,
+      id: (htmlProps.id as string | undefined) ?? triggerId,
       'aria-expanded': isOpen,
       'aria-controls': contentId,
       'aria-disabled': disabled || undefined,
-      onClick: toggle,
-      onKeyDown: handleKeyDown,
+      onClick: composeEventHandlers(
+        (event: React.MouseEvent<HTMLElement>) => {
+          childProps.onClick?.(event);
+          onClick?.(event as unknown as React.MouseEvent<HTMLButtonElement>);
+        },
+        () => handleClick()
+      ),
+      onKeyDown: composeEventHandlers(
+        (event: React.KeyboardEvent<HTMLElement>) => {
+          childProps.onKeyDown?.(event);
+          onKeyDown?.(event as unknown as React.KeyboardEvent<HTMLButtonElement>);
+        },
+        (event) => handleKeyDown(event as unknown as React.KeyboardEvent)
+      ),
+      className: [className, childProps.className].filter(Boolean).join(' '),
     });
   }
 
   return (
     <button
+      {...htmlProps}
       type="button"
-      id={triggerId}
+      id={(htmlProps.id as string | undefined) ?? triggerId}
       className={`${styles.trigger} ${className || ''}`}
       aria-expanded={isOpen}
       aria-controls={contentId}
       aria-disabled={disabled || undefined}
-      onClick={toggle}
-      onKeyDown={handleKeyDown}
+      onClick={composeEventHandlers(onClick, handleClick)}
+      onKeyDown={composeEventHandlers(onKeyDown, handleKeyDown)}
       disabled={disabled}
     >
       {chevronPosition === 'start' && chevronIcon}
@@ -167,10 +204,8 @@ function CollapsibleTrigger({
 }
 
 // Content component
-export interface CollapsibleContentProps {
+export interface CollapsibleContentProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
-  /** Additional class name */
-  className?: string;
   /** Force mount content even when closed (useful for animations) */
   forceMount?: boolean;
 }
@@ -179,6 +214,7 @@ function CollapsibleContent({
   children,
   className,
   forceMount = false,
+  ...htmlProps
 }: CollapsibleContentProps) {
   const { isOpen, contentId, triggerId } = useCollapsibleContext();
 
@@ -189,7 +225,8 @@ function CollapsibleContent({
 
   return (
     <div
-      id={contentId}
+      {...htmlProps}
+      id={(htmlProps.id as string | undefined) ?? contentId}
       role="region"
       aria-labelledby={triggerId}
       className={`${styles.content} ${isOpen ? styles.contentOpen : styles.contentClosed} ${className || ''}`}

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments-sdk/cli/core';
+import { defineFragment } from '@fragments-sdk/core';
 import { ColorPicker } from '.';
 
 function ControlledColorPickerDemo() {

package/src/components/Combobox/Combobox.fragment.tsx

@@ -1,18 +1,49 @@
 import React, { useState } from 'react';
-import { defineFragment } from '@fragments-sdk/cli/core';
-import { Combobox } from '.';
+import { defineFragment } from '@fragments-sdk/core';
+import { Combobox, type ComboboxMultipleProps, type ComboboxSingleProps } from '.';
 
 // Stateful wrapper for interactive demos
-function StatefulCombobox(props: React.ComponentProps<typeof Combobox> & {
-  children: React.ReactNode;
-  initialValue?: string | string[];
-}) {
+function StatefulCombobox(
+  props:
+    | (Omit<React.ComponentProps<typeof Combobox>, 'value' | 'onValueChange'> & {
+        children: React.ReactNode;
+        multiple: true;
+        initialValue?: string[];
+      })
+    | (Omit<React.ComponentProps<typeof Combobox>, 'value' | 'onValueChange'> & {
+        children: React.ReactNode;
+        multiple?: false;
+        initialValue?: string;
+      })
+) {
   const { initialValue, children, ...rest } = props;
-  const [value, setValue] = useState<string | string[] | null>(initialValue ?? (props.multiple ? [] : null));
+
+  if (props.multiple) {
+    const [value, setValue] = useState<string[]>(
+      Array.isArray(initialValue) ? initialValue : []
+    );
+    const multiProps = rest as Omit<React.ComponentProps<typeof Combobox>, 'value' | 'onValueChange'> & {
+      multiple: true;
+    };
+    const MultiCombobox = Combobox as unknown as (props: ComboboxMultipleProps) => React.JSX.Element;
+    return (
+      <MultiCombobox {...(multiProps as ComboboxMultipleProps)} multiple value={value} onValueChange={setValue}>
+        {children}
+      </MultiCombobox>
+    );
+  }
+
+  const [value, setValue] = useState<string | null>(
+    typeof initialValue === 'string' ? initialValue : null
+  );
+  const singleProps = rest as Omit<React.ComponentProps<typeof Combobox>, 'value' | 'onValueChange'> & {
+    multiple?: false;
+  };
+  const SingleCombobox = Combobox as unknown as (props: ComboboxSingleProps) => React.JSX.Element;
   return (
-    <Combobox {...rest} value={value} onValueChange={setValue}>
+    <SingleCombobox {...(singleProps as ComboboxSingleProps)} value={value} onValueChange={setValue}>
       {children}
-    </Combobox>
+    </SingleCombobox>
   );
 }
 
@@ -76,6 +107,10 @@ export default defineFragment({
       type: 'function',
       description: 'Called when selection changes',
     },
+    onChange: {
+      type: 'function',
+      description: 'Alias for onValueChange',
+    },
     multiple: {
       type: 'boolean',
       description: 'Allow multiple selections with chips',
@@ -120,10 +155,13 @@ export default defineFragment({
     propsSummary: [
       'value: string | string[] - controlled selected value',
       'onValueChange: (value) => void - selection handler',
+      'onChange: (value) => void - alias for onValueChange',
       'multiple: boolean - enable multi-select with chips',
+      'When multiple=true, value/defaultValue must be string[] (single mode uses string|null)',
       'placeholder: string - input placeholder text',
       'disabled: boolean - disable combobox',
       'autoHighlight: boolean - auto-highlight first match',
+      'Combobox.Input showTrigger: boolean - hide built-in trigger when using Combobox.Trigger explicitly',
       'maxVisibleItems: number - max visible options before scrolling (default 4)',
     ],
     scenarioTags: [
@@ -142,6 +180,7 @@ export default defineFragment({
     commonPatterns: [
       '<Combobox placeholder="Search..."><Combobox.Input /><Combobox.Content><Combobox.Item value="opt1">{label1}</Combobox.Item><Combobox.Item value="opt2">{label2}</Combobox.Item></Combobox.Content></Combobox>',
       '<Combobox multiple placeholder="Select items..."><Combobox.Input /><Combobox.Content><Combobox.Item value="opt1">{label1}</Combobox.Item><Combobox.Item value="opt2">{label2}</Combobox.Item></Combobox.Content></Combobox>',
+      '<Combobox placeholder="Search..."><Combobox.Input showTrigger={false} /><Combobox.Trigger aria-label="Open" /><Combobox.Content>...</Combobox.Content></Combobox>',
     ],
   },
 
@@ -274,5 +313,20 @@ export default defineFragment({
         </Combobox>
       ),
     },
+    {
+      name: 'Explicit Trigger',
+      description: 'Hide the built-in input trigger when rendering a separate Combobox.Trigger',
+      render: () => (
+        <StatefulCombobox placeholder="Search assignees...">
+          <Combobox.Input showTrigger={false} />
+          <Combobox.Trigger aria-label="Open assignee list" />
+          <Combobox.Content>
+            <Combobox.Item value="alice">Alice</Combobox.Item>
+            <Combobox.Item value="bob">Bob</Combobox.Item>
+            <Combobox.Item value="carol">Carol</Combobox.Item>
+          </Combobox.Content>
+        </StatefulCombobox>
+      ),
+    },
   ],
 });

package/src/components/Combobox/Combobox.module.scss

@@ -175,7 +175,7 @@
     var(--_item-h) * var(--fui-select-max-items, 4.5) + var(--fui-space-1, #{$fui-space-1}) * 2
   ) !important;
   overflow-y: auto !important;
-  padding: var(--fui-padding-item-xs, $fui-padding-item-xs);
+  padding: var(--fui-space-1, $fui-space-1);
   box-shadow: var(--fui-shadow-md, $fui-shadow-md);
 
   // Animation
@@ -207,8 +207,7 @@
   align-items: center;
   gap: var(--fui-space-2, $fui-space-2);
   width: 100%;
-  padding: var(--fui-padding-item-xs, $fui-padding-item-xs)
-    var(--fui-padding-item-md, $fui-padding-item-md);
+  padding: var(--fui-space-1, $fui-space-1) var(--fui-space-3, $fui-space-3);
   border-radius: var(--fui-radius-sm, $fui-radius-sm);
   cursor: pointer;
   outline: none;
@@ -254,8 +253,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: var(--fui-padding-item-lg, $fui-padding-item-lg)
-    var(--fui-padding-item-md, $fui-padding-item-md);
+  padding: var(--fui-space-2, $fui-space-2) var(--fui-space-3, $fui-space-3);
   color: var(--fui-text-tertiary, $fui-text-tertiary);
   font-size: var(--fui-font-size-sm, $fui-font-size-sm);
 }
@@ -271,8 +269,7 @@
 
 // Group label
 .groupLabel {
-  padding: var(--fui-padding-item-xs, $fui-padding-item-xs)
-    var(--fui-padding-item-md, $fui-padding-item-md);
+  padding: var(--fui-space-1, $fui-space-1) var(--fui-space-3, $fui-space-3);
   font-size: var(--fui-font-size-xs, $fui-font-size-xs);
   font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
   color: var(--fui-text-tertiary, $fui-text-tertiary);

package/src/components/Combobox/Combobox.test.tsx

@@ -2,12 +2,33 @@ import { describe, it, expect, vi } from 'vitest';
 import { render, screen, userEvent, expectNoA11yViolations } from '../../test/utils';
 import { Combobox } from './index';
 
-function renderCombobox(props: { onValueChange?: (v: string | string[] | null) => void; multiple?: boolean; placeholder?: string } = {}) {
+type RenderComboboxProps =
+  | { onValueChange?: (v: string | null) => void; multiple?: false; placeholder?: string }
+  | { onValueChange?: (v: string[]) => void; multiple: true; placeholder?: string };
+
+function renderCombobox(props: RenderComboboxProps = {}) {
+  if (props.multiple) {
+    return render(
+      <Combobox
+        placeholder={props.placeholder ?? 'Search...'}
+        onValueChange={props.onValueChange}
+        multiple
+      >
+        <Combobox.Input />
+        <Combobox.Content>
+          <Combobox.Item value="react">React</Combobox.Item>
+          <Combobox.Item value="vue">Vue</Combobox.Item>
+          <Combobox.Item value="angular">Angular</Combobox.Item>
+          <Combobox.Empty>No results found</Combobox.Empty>
+        </Combobox.Content>
+      </Combobox>
+    );
+  }
+
   return render(
     <Combobox
       placeholder={props.placeholder ?? 'Search...'}
       onValueChange={props.onValueChange}
-      multiple={props.multiple}
     >
       <Combobox.Input />
       <Combobox.Content>
@@ -79,9 +100,29 @@ describe('Combobox', () => {
     expect(await screen.findByText('Frameworks')).toBeInTheDocument();
   });
 
+  it('forwards html props to item and labels', async () => {
+    const user = userEvent.setup();
+    render(
+      <Combobox placeholder="Search">
+        <Combobox.Input />
+        <Combobox.Content>
+          <Combobox.Group id="framework-group">
+            <Combobox.GroupLabel id="framework-group-label">Frameworks</Combobox.GroupLabel>
+            <Combobox.Item id="react-option" value="react">React</Combobox.Item>
+          </Combobox.Group>
+        </Combobox.Content>
+      </Combobox>
+    );
+
+    await user.click(screen.getByRole('combobox'));
+    expect(await screen.findByRole('option', { name: 'React' })).toHaveAttribute('id', 'react-option');
+    expect(screen.getByText('Frameworks')).toHaveAttribute('id', 'framework-group-label');
+    expect(screen.getByText('Frameworks').closest('#framework-group')).toBeInTheDocument();
+  });
+
   it('supports multiple selection mode', async () => {
     const user = userEvent.setup();
-    const onChange = vi.fn();
+    const onChange = vi.fn<(value: string[]) => void>();
     renderCombobox({ multiple: true, onValueChange: onChange });
 
     await user.click(screen.getByRole('combobox'));
@@ -90,6 +131,22 @@ describe('Combobox', () => {
     expect(onChange).toHaveBeenCalled();
   });
 
+  it('uses text content for non-string item labels', async () => {
+    render(
+      <Combobox multiple value={['react']} defaultOpen>
+        <Combobox.Input />
+        <Combobox.Content>
+          <Combobox.Item value="react">
+            <span>React</span>
+          </Combobox.Item>
+        </Combobox.Content>
+      </Combobox>
+    );
+
+    expect((await screen.findAllByText('React')).length).toBeGreaterThan(0);
+    expect(screen.queryByText('[object Object]')).not.toBeInTheDocument();
+  });
+
   it('has no accessibility violations', async () => {
     const { container } = render(
       <Combobox placeholder="Search...">
@@ -199,4 +256,23 @@ describe('Combobox', () => {
       expect(screen.queryByRole('option')).not.toBeInTheDocument();
     });
   });
+
+  it('updates chip label when selected option is removed', async () => {
+    const renderDemo = (showReact: boolean) => (
+      <Combobox multiple value={['react']} defaultOpen>
+        <Combobox.Input />
+        <Combobox.Content>
+          {showReact && <Combobox.Item value="react">React</Combobox.Item>}
+          <Combobox.Item value="vue">Vue</Combobox.Item>
+        </Combobox.Content>
+      </Combobox>
+    );
+
+    const { rerender } = render(renderDemo(true));
+
+    await screen.findAllByText('React');
+    rerender(renderDemo(false));
+
+    expect(await screen.findByText('react')).toBeInTheDocument();
+  });
 });