@fragments-sdk/ui 0.4.0 → 0.6.0

package/src/components/ThinkingIndicator/index.tsx

@@ -0,0 +1,258 @@
+'use client';
+
+import * as React from 'react';
+import styles from './ThinkingIndicator.module.scss';
+import '../../styles/globals.scss';
+import { Loading } from '../Loading';
+
+// ============================================
+// Types
+// ============================================
+
+export type ThinkingVariant = 'dots' | 'pulse' | 'spinner';
+export type StepStatus = 'pending' | 'active' | 'complete' | 'error';
+
+export interface ThinkingStep {
+  id: string;
+  label: string;
+  status?: StepStatus;
+}
+
+export interface ThinkingIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Whether thinking is active */
+  active?: boolean;
+  /** Status text */
+  label?: string;
+  /** Animation style */
+  variant?: ThinkingVariant;
+  /** Show elapsed time */
+  showElapsed?: boolean;
+  /** Multi-step progress */
+  steps?: ThinkingStep[];
+}
+
+export interface ThinkingStepsProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+export interface ThinkingStepProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Step label */
+  label: string;
+  /** Step status */
+  status?: StepStatus;
+}
+
+// ============================================
+// Context
+// ============================================
+
+interface ThinkingIndicatorContextValue {
+  active: boolean;
+  variant: ThinkingVariant;
+}
+
+const ThinkingIndicatorContext = React.createContext<ThinkingIndicatorContextValue | null>(null);
+
+function useThinkingIndicatorContext() {
+  const context = React.useContext(ThinkingIndicatorContext);
+  if (!context) {
+    throw new Error('ThinkingIndicator compound components must be used within a ThinkingIndicator');
+  }
+  return context;
+}
+
+// ============================================
+// Hooks
+// ============================================
+
+function useElapsedTime(active: boolean): string {
+  const [elapsed, setElapsed] = React.useState(0);
+  const startTimeRef = React.useRef<number>(Date.now());
+
+  React.useEffect(() => {
+    if (!active) {
+      setElapsed(0);
+      return;
+    }
+
+    startTimeRef.current = Date.now();
+    const interval = setInterval(() => {
+      setElapsed(Date.now() - startTimeRef.current);
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [active]);
+
+  if (elapsed < 1000) return '';
+
+  const seconds = Math.floor(elapsed / 1000);
+  if (seconds < 60) return `${seconds}s`;
+
+  const minutes = Math.floor(seconds / 60);
+  const remainingSeconds = seconds % 60;
+  return `${minutes}m ${remainingSeconds}s`;
+}
+
+// ============================================
+// Icons
+// ============================================
+
+function CheckIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="3"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <polyline points="20 6 9 17 4 12" />
+    </svg>
+  );
+}
+
+function ErrorIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="3"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <line x1="18" y1="6" x2="6" y2="18" />
+      <line x1="6" y1="6" x2="18" y2="18" />
+    </svg>
+  );
+}
+
+// ============================================
+// Sub-components
+// ============================================
+
+function ThinkingSteps({ children, className, ...htmlProps }: ThinkingStepsProps) {
+  const classes = [styles.steps, className].filter(Boolean).join(' ');
+
+  return (
+    <div {...htmlProps} className={classes}>
+      {children}
+    </div>
+  );
+}
+
+function ThinkingStep({
+  label,
+  status = 'pending',
+  className,
+  ...htmlProps
+}: ThinkingStepProps) {
+  const classes = [
+    styles.step,
+    styles[`step${status.charAt(0).toUpperCase() + status.slice(1)}`],
+    className,
+  ].filter(Boolean).join(' ');
+
+  return (
+    <div {...htmlProps} className={classes}>
+      <span className={styles.stepIndicator}>
+        {status === 'complete' && <CheckIcon />}
+        {status === 'error' && <ErrorIcon />}
+        {status === 'active' && <Loading size="sm" variant="spinner" color="current" label="" />}
+        {status === 'pending' && <span className={styles.stepDot} />}
+      </span>
+      <span className={styles.stepLabel}>{label}</span>
+    </div>
+  );
+}
+
+// ============================================
+// Main Component
+// ============================================
+
+function ThinkingIndicatorRoot({
+  active = true,
+  label = 'Thinking...',
+  variant = 'dots',
+  showElapsed = false,
+  steps,
+  className,
+  ...htmlProps
+}: ThinkingIndicatorProps) {
+  const elapsedTime = useElapsedTime(active && showElapsed);
+
+  const contextValue: ThinkingIndicatorContextValue = {
+    active,
+    variant,
+  };
+
+  if (!active) return null;
+
+  const classes = [
+    styles.thinkingIndicator,
+    className,
+  ].filter(Boolean).join(' ');
+
+  // Map ThinkingIndicator variants to Loading variants
+  const loadingVariant = variant === 'dots' ? 'dots'
+    : variant === 'pulse' ? 'pulse'
+    : 'spinner';
+
+  return (
+    <ThinkingIndicatorContext.Provider value={contextValue}>
+      <div
+        {...htmlProps}
+        className={classes}
+        role="status"
+        aria-label={label}
+        aria-live="polite"
+      >
+        <div className={styles.main}>
+          <Loading size="sm" variant={loadingVariant} color="muted" label="" />
+          <span className={styles.label}>{label}</span>
+          {showElapsed && elapsedTime && (
+            <span className={styles.elapsed}>{elapsedTime}</span>
+          )}
+        </div>
+
+        {steps && steps.length > 0 && (
+          <ThinkingSteps>
+            {steps.map((step) => (
+              <ThinkingStep
+                key={step.id}
+                label={step.label}
+                status={step.status}
+              />
+            ))}
+          </ThinkingSteps>
+        )}
+      </div>
+    </ThinkingIndicatorContext.Provider>
+  );
+}
+
+// ============================================
+// Export compound component
+// ============================================
+
+export const ThinkingIndicator = Object.assign(ThinkingIndicatorRoot, {
+  Steps: ThinkingSteps,
+  Step: ThinkingStep,
+});
+
+export {
+  ThinkingIndicatorRoot,
+  ThinkingSteps,
+  ThinkingStep,
+};
+
+export { useThinkingIndicatorContext };

package/src/components/Toast/Toast.fragment.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { defineSegment } from '@fragments/core';
-import { Toast, ToastProvider, useToast } from './index.js';
+import { Toast, ToastProvider, useToast } from '.';
 
 // Demo component that triggers toasts
 function ToastDemo() {

package/src/components/Toggle/Toggle.fragment.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { defineSegment } from '@fragments/core';
-import { Toggle } from './index.js';
+import { Toggle } from '.';
 
 // Stateful wrapper for interactive demos
 function StatefulToggle(props: React.ComponentProps<typeof Toggle>) {

package/src/components/ToggleGroup/ToggleGroup.fragment.tsx

@@ -0,0 +1,207 @@
+import React from 'react';
+import { defineSegment } from '@fragments/core';
+import { ToggleGroup } from '.';
+
+export default defineSegment({
+  component: ToggleGroup,
+
+  meta: {
+    name: 'ToggleGroup',
+    description: 'A group of toggle buttons where only one can be selected at a time. Useful for switching between views, modes, or options.',
+    category: 'forms',
+    status: 'stable',
+    tags: ['toggle', 'group', 'segmented', 'control', 'tabs', 'switch'],
+    since: '0.2.0',
+  },
+
+  usage: {
+    when: [
+      'Switching between mutually exclusive views or modes',
+      'Selecting one option from a small set (2-5 options)',
+      'Segmented controls like view switchers',
+      'Filter or sort options',
+    ],
+    whenNot: [
+      'Multiple selections allowed (use Checkbox group)',
+      'Many options (use Select or RadioGroup)',
+      'Navigation between pages (use Tabs)',
+      'On/off toggle (use Toggle component)',
+    ],
+    guidelines: [
+      'Keep options to 2-5 items for clarity',
+      'Use clear, concise labels',
+      'Consider icons for common actions (grid/list view)',
+      'Ensure adequate touch targets on mobile',
+    ],
+    accessibility: [
+      'Uses role="group" for semantic grouping',
+      'Each item has role="radio" with aria-checked',
+      'Keyboard navigable with Tab and arrow keys',
+      'Focus visible on active item',
+    ],
+  },
+
+  props: {
+    value: {
+      type: 'string',
+      description: 'Currently selected value',
+      required: true,
+    },
+    onChange: {
+      type: 'function',
+      description: 'Called with new value when selection changes',
+      required: true,
+    },
+    children: {
+      type: 'node',
+      description: 'ToggleGroup.Item components',
+      required: true,
+    },
+    variant: {
+      type: 'enum',
+      description: 'Visual style',
+      values: ['default', 'pills', 'outline'],
+      default: 'default',
+    },
+    size: {
+      type: 'enum',
+      description: 'Size variant',
+      values: ['sm', 'md'],
+      default: 'md',
+    },
+    gap: {
+      type: 'enum',
+      description: 'Gap between items (pills/outline variants)',
+      values: ['none', 'xs', 'sm'],
+      default: 'xs',
+    },
+  },
+
+  relations: [
+    { component: 'RadioGroup', relationship: 'alternative', note: 'RadioGroup for form-style single selection' },
+    { component: 'Tabs', relationship: 'alternative', note: 'Tabs for content panel switching' },
+    { component: 'Toggle', relationship: 'sibling', note: 'Toggle for single on/off control' },
+  ],
+
+  contract: {
+    propsSummary: [
+      'value: string - selected value (required)',
+      'onChange: (value: string) => void - change handler (required)',
+      'children: ToggleGroup.Item[] - toggle items',
+      'variant: default|pills|outline - visual style',
+      'size: sm|md - size variant',
+      'gap: none|xs|sm - spacing',
+    ],
+    scenarioTags: [
+      'forms.selection',
+      'input.toggle',
+      'control.segmented',
+    ],
+    a11yRules: ['A11Y_GROUP_ROLE', 'A11Y_KEYBOARD_ACCESSIBLE'],
+  },
+
+  variants: [
+    {
+      name: 'Default',
+      description: 'Basic toggle group',
+      render: () => {
+        const [value, setValue] = React.useState('left');
+        return (
+          <ToggleGroup value={value} onChange={setValue}>
+            <ToggleGroup.Item value="left">Left</ToggleGroup.Item>
+            <ToggleGroup.Item value="center">Center</ToggleGroup.Item>
+            <ToggleGroup.Item value="right">Right</ToggleGroup.Item>
+          </ToggleGroup>
+        );
+      },
+    },
+    {
+      name: 'Pills Variant',
+      description: 'Pill-shaped toggle buttons',
+      render: () => {
+        const [value, setValue] = React.useState('all');
+        return (
+          <ToggleGroup value={value} onChange={setValue} variant="pills">
+            <ToggleGroup.Item value="all">All</ToggleGroup.Item>
+            <ToggleGroup.Item value="active">Active</ToggleGroup.Item>
+            <ToggleGroup.Item value="completed">Completed</ToggleGroup.Item>
+          </ToggleGroup>
+        );
+      },
+    },
+    {
+      name: 'Outline Variant',
+      description: 'Outlined toggle buttons',
+      render: () => {
+        const [value, setValue] = React.useState('day');
+        return (
+          <ToggleGroup value={value} onChange={setValue} variant="outline">
+            <ToggleGroup.Item value="day">Day</ToggleGroup.Item>
+            <ToggleGroup.Item value="week">Week</ToggleGroup.Item>
+            <ToggleGroup.Item value="month">Month</ToggleGroup.Item>
+          </ToggleGroup>
+        );
+      },
+    },
+    {
+      name: 'Sizes',
+      description: 'Different size variants',
+      render: () => {
+        const [value1, setValue1] = React.useState('a');
+        const [value2, setValue2] = React.useState('a');
+        return (
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+            <ToggleGroup value={value1} onChange={setValue1} size="sm">
+              <ToggleGroup.Item value="a">Small</ToggleGroup.Item>
+              <ToggleGroup.Item value="b">Size</ToggleGroup.Item>
+            </ToggleGroup>
+            <ToggleGroup value={value2} onChange={setValue2} size="md">
+              <ToggleGroup.Item value="a">Medium</ToggleGroup.Item>
+              <ToggleGroup.Item value="b">Size</ToggleGroup.Item>
+            </ToggleGroup>
+          </div>
+        );
+      },
+    },
+    {
+      name: 'View Switcher',
+      description: 'Common pattern for switching between views',
+      render: () => {
+        const [view, setView] = React.useState('grid');
+        return (
+          <ToggleGroup value={view} onChange={setView} size="sm">
+            <ToggleGroup.Item value="grid">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                <rect x="3" y="3" width="7" height="7" />
+                <rect x="14" y="3" width="7" height="7" />
+                <rect x="3" y="14" width="7" height="7" />
+                <rect x="14" y="14" width="7" height="7" />
+              </svg>
+            </ToggleGroup.Item>
+            <ToggleGroup.Item value="list">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                <line x1="3" y1="6" x2="21" y2="6" />
+                <line x1="3" y1="12" x2="21" y2="12" />
+                <line x1="3" y1="18" x2="21" y2="18" />
+              </svg>
+            </ToggleGroup.Item>
+          </ToggleGroup>
+        );
+      },
+    },
+    {
+      name: 'With Disabled Item',
+      description: 'Toggle group with a disabled option',
+      render: () => {
+        const [value, setValue] = React.useState('basic');
+        return (
+          <ToggleGroup value={value} onChange={setValue}>
+            <ToggleGroup.Item value="basic">Basic</ToggleGroup.Item>
+            <ToggleGroup.Item value="pro">Pro</ToggleGroup.Item>
+            <ToggleGroup.Item value="enterprise" disabled>Enterprise</ToggleGroup.Item>
+          </ToggleGroup>
+        );
+      },
+    },
+  ],
+});

package/src/components/Tooltip/Tooltip.fragment.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { defineSegment } from '@fragments/core';
-import { Tooltip, TooltipProvider } from './index.js';
-import { Button } from '../Button/index.js';
+import { Tooltip, TooltipProvider } from '.';
+import { Button } from '../Button';
 
 export default defineSegment({
   component: Tooltip,
@@ -9,7 +9,7 @@ export default defineSegment({
   meta: {
     name: 'Tooltip',
     description: 'Contextual help text that appears on hover or focus. Perfect for explaining icons, truncated text, or providing additional context.',
-    category: 'overlays',
+    category: 'feedback',
     status: 'stable',
     tags: ['tooltip', 'hint', 'help', 'hover', 'contextual'],
     since: '0.1.0',

package/src/components/VisuallyHidden/VisuallyHidden.fragment.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { defineSegment } from '@fragments/core';
-import { VisuallyHidden } from './index.js';
+import { VisuallyHidden } from '.';
 
 export default defineSegment({
   component: VisuallyHidden,
@@ -8,7 +8,7 @@ export default defineSegment({
   meta: {
     name: 'VisuallyHidden',
     description: 'Hides content visually while keeping it accessible to screen readers. Essential for accessible icon-only buttons and supplementary text.',
-    category: 'utilities',
+    category: 'navigation',
     status: 'stable',
     tags: ['accessibility', 'a11y', 'screen-reader', 'hidden', 'sr-only'],
     since: '0.1.0',

package/src/index.ts

@@ -57,6 +57,19 @@ export {
   type AccordionValue,
 } from './components/Accordion';
 
+// Collapsible
+export {
+  Collapsible,
+  CollapsibleRoot,
+  CollapsibleTrigger,
+  CollapsibleContent,
+  useCollapsibleContext,
+  type CollapsibleProps,
+  type CollapsibleRootProps,
+  type CollapsibleTriggerProps,
+  type CollapsibleContentProps,
+} from './components/Collapsible';
+
 // Dialog
 export {
   Dialog,
@@ -143,6 +156,19 @@ export {
 // Checkbox
 export { Checkbox, type CheckboxProps } from './components/Checkbox';
 
+// Combobox
+export {
+  Combobox,
+  type ComboboxProps,
+  type ComboboxInputProps,
+  type ComboboxTriggerProps,
+  type ComboboxContentProps,
+  type ComboboxItemProps,
+  type ComboboxEmptyProps,
+  type ComboboxGroupProps,
+  type ComboboxGroupLabelProps,
+} from './components/Combobox';
+
 // RadioGroup
 export {
   RadioGroup,
@@ -165,6 +191,19 @@ export {
   type SkeletonSize,
 } from './components/Skeleton';
 
+// Loading
+export {
+  Loading,
+  LoadingRoot,
+  LoadingInline,
+  LoadingScreen,
+  type LoadingProps,
+  type LoadingSize,
+  type LoadingVariant,
+  type LoadingInlineProps,
+  type LoadingScreenProps,
+} from './components/Loading';
+
 // Table
 export {
   Table,
@@ -310,9 +349,6 @@ export { Slider, type SliderProps } from './components/Slider';
 // ColorPicker
 export { ColorPicker, type ColorPickerProps } from './components/ColorPicker';
 
-// ColorChip
-export { ColorChip, type ColorChipProps } from './components/ColorChip';
-
 // Prompt
 export {
   Prompt,
@@ -379,6 +415,66 @@ export { VisuallyHidden, type VisuallyHiddenProps } from './components/VisuallyH
 // Brand
 export { BRAND, type Brand } from './brand';
 
+// Message (AI Chat)
+export {
+  Message,
+  MessageRoot,
+  MessageContent,
+  MessageActions,
+  MessageTimestamp,
+  MessageAvatar,
+  useMessageContext,
+  type MessageProps,
+  type MessageRole,
+  type MessageStatus,
+  type MessageContentProps,
+  type MessageActionsProps,
+  type MessageTimestampProps,
+  type MessageAvatarProps,
+} from './components/Message';
+
+// ConversationList (AI Chat)
+export {
+  ConversationList,
+  ConversationListRoot,
+  DateSeparator,
+  TypingIndicator,
+  useConversationList,
+  type ConversationListProps,
+  type AutoScrollBehavior,
+  type DateSeparatorProps,
+  type TypingIndicatorProps,
+} from './components/ConversationList';
+
+// ThinkingIndicator (AI Chat)
+export {
+  ThinkingIndicator,
+  ThinkingIndicatorRoot,
+  ThinkingSteps,
+  ThinkingStep,
+  useThinkingIndicatorContext,
+  type ThinkingIndicatorProps,
+  type ThinkingVariant,
+  type ThinkingStep as ThinkingStepType,
+  type StepStatus,
+  type ThinkingStepsProps,
+  type ThinkingStepProps,
+} from './components/ThinkingIndicator';
+
+// Chart
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  useChartConfig,
+  type ChartConfig,
+  type ChartContainerProps,
+  type ChartTooltipContentProps,
+  type ChartLegendContentProps,
+} from './components/Chart';
+
 // Accessibility Utilities
 export {
   useId,