@fragments-sdk/ui 0.4.0 → 0.5.0

package/src/components/Progress/Progress.fragment.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { defineSegment } from '@fragments/core';
-import { Progress, CircularProgress } from './index.js';
+import { Progress, CircularProgress } from '.';
 
 export default defineSegment({
   component: Progress,

package/src/components/Prompt/Prompt.fragment.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { defineSegment } from '@fragments/core';
-import { Prompt } from './index.js';
+import { Prompt } from '.';
 
 export default defineSegment({
   component: Prompt,
@@ -8,7 +8,7 @@ export default defineSegment({
   meta: {
     name: 'Prompt',
     description: 'Multi-line input with toolbar for AI/chat interfaces',
-    category: 'forms',
+    category: 'ai',
     status: 'stable',
     tags: ['prompt', 'chat', 'ai', 'input', 'textarea', 'form'],
   },

package/src/components/RadioGroup/RadioGroup.fragment.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { defineSegment } from '@fragments/core';
-import { RadioGroup } from './index.js';
+import { RadioGroup } from '.';
 
 export default defineSegment({
   component: RadioGroup,

package/src/components/RadioGroup/RadioGroup.module.scss

@@ -89,23 +89,26 @@
   margin-top: 0;
 }
 
-// The indicator dot
+// The indicator dot - use absolute positioning for perfect centering
 .indicator {
+  position: absolute;
+  top: 50%;
+  left: 50%;
   width: 0.5rem;
   height: 0.5rem;
   background-color: var(--fui-color-accent, $fui-color-accent);
   border-radius: var(--fui-radius-full, $fui-radius-full);
 
-  // Animation
+  // Animation - use translate for centering combined with scale
   opacity: 0;
-  transform: scale(0);
+  transform: translate(-50%, -50%) scale(0);
   transition:
     opacity var(--fui-transition-fast, $fui-transition-fast),
     transform var(--fui-transition-fast, $fui-transition-fast);
 
   [data-checked] > & {
     opacity: 1;
-    transform: scale(1);
+    transform: translate(-50%, -50%) scale(1);
   }
 }
 

package/src/components/Select/Select.fragment.tsx

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

package/src/components/Select/Select.module.scss

@@ -37,15 +37,23 @@
 // Value display
 .value {
   flex: 1;
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  display: flex;
+  align-items: center;
 
   &[data-placeholder] {
     color: var(--fui-text-tertiary, $fui-text-tertiary);
   }
 }
 
+// Placeholder text
+.placeholder {
+  color: var(--fui-text-tertiary, $fui-text-tertiary);
+}
+
 // Chevron icon
 .icon {
   display: flex;

package/src/components/Select/index.tsx

@@ -101,10 +101,23 @@ function CheckIcon() {
 }
 
 // ============================================
-// Context for placeholder
+// Context for Select state
 // ============================================
 
-const SelectContext = React.createContext<{ placeholder?: string }>({});
+interface SelectContextValue {
+  placeholder?: string;
+  value?: SelectValue | null;
+  itemsRef: React.MutableRefObject<Map<SelectValue, React.ReactNode>>;
+  // Version counter to trigger re-renders when items register
+  itemsVersion: number;
+  incrementItemsVersion: () => void;
+}
+
+const SelectContext = React.createContext<SelectContextValue>({
+  itemsRef: { current: new Map() },
+  itemsVersion: 0,
+  incrementItemsVersion: () => {},
+});
 
 // ============================================
 // Components
@@ -123,12 +136,55 @@ function SelectRoot({
   name,
   placeholder,
 }: SelectProps) {
+  // Track current value for controlled and uncontrolled modes
+  const [internalValue, setInternalValue] = React.useState<SelectValue | null | undefined>(
+    value ?? defaultValue ?? null
+  );
+
+  // Registry for item children - allows trigger to render selected item's content
+  const itemsRef = React.useRef<Map<SelectValue, React.ReactNode>>(new Map());
+
+  // Version counter to trigger trigger re-render when items register
+  const [itemsVersion, setItemsVersion] = React.useState(0);
+  const incrementItemsVersion = React.useCallback(() => {
+    setItemsVersion((v) => v + 1);
+  }, []);
+
+  // Sync internal value with controlled value
+  React.useEffect(() => {
+    if (value !== undefined) {
+      setInternalValue(value);
+    }
+  }, [value]);
+
+  const handleValueChange = React.useCallback(
+    (newValue: SelectValue | null) => {
+      if (value === undefined) {
+        // Uncontrolled mode
+        setInternalValue(newValue);
+      }
+      onValueChange?.(newValue);
+    },
+    [value, onValueChange]
+  );
+
+  const contextValue = React.useMemo(
+    () => ({
+      placeholder,
+      value: value !== undefined ? value : internalValue,
+      itemsRef,
+      itemsVersion,
+      incrementItemsVersion,
+    }),
+    [placeholder, value, internalValue, itemsVersion, incrementItemsVersion]
+  );
+
   return (
-    <SelectContext.Provider value={{ placeholder }}>
+    <SelectContext.Provider value={contextValue}>
       <BaseSelect.Root
         value={value}
         defaultValue={defaultValue}
-        onValueChange={onValueChange}
+        onValueChange={handleValueChange}
         open={open}
         defaultOpen={defaultOpen}
         onOpenChange={onOpenChange}
@@ -148,11 +204,24 @@ function SelectTrigger({ children, placeholder, className, ...htmlProps }: Selec
 
   const classes = [styles.trigger, className].filter(Boolean).join(' ');
 
+  // Get the selected item's children from the registry
+  // Note: itemsVersion in context ensures we re-render when items register
+  const selectedContent = context.value != null
+    ? context.itemsRef.current.get(context.value)
+    : null;
+
+  // Determine what to show in the value area
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const _version = context.itemsVersion; // Force dependency on itemsVersion for re-render
+  const displayContent = selectedContent ?? (
+    placeholderText ? <span className={styles.placeholder}>{placeholderText}</span> : null
+  );
+
   return (
     <BaseSelect.Trigger {...htmlProps} className={classes}>
       {children ?? (
         <>
-          <BaseSelect.Value placeholder={placeholderText} className={styles.value} />
+          <span className={styles.value}>{displayContent}</span>
           <BaseSelect.Icon className={styles.icon}>
             <ChevronDownIcon />
           </BaseSelect.Icon>
@@ -187,8 +256,19 @@ function SelectContent({
 }
 
 function SelectItem({ children, value, disabled, className }: SelectItemProps) {
+  const context = React.useContext(SelectContext);
   const classes = [styles.item, className].filter(Boolean).join(' ');
 
+  // Register this item's children in the registry so the trigger can display them
+  React.useEffect(() => {
+    context.itemsRef.current.set(value, children);
+    // Trigger re-render of trigger to show the registered content
+    context.incrementItemsVersion();
+    return () => {
+      context.itemsRef.current.delete(value);
+    };
+  }, [context, value, children]);
+
   return (
     <BaseSelect.Item value={value} disabled={disabled} className={classes}>
       <BaseSelect.ItemText>{children}</BaseSelect.ItemText>

package/src/components/Separator/Separator.fragment.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { defineSegment } from '@fragments/core';
-import { Separator } from './index.js';
+import { Separator } from '.';
 
 export default defineSegment({
   component: Separator,

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

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { defineSegment } from '@fragments/core';
-import { Sidebar, SidebarProvider, useSidebar } from './index.js';
-import { Button } from '../Button/index.js';
+import { Sidebar, SidebarProvider, useSidebar } from '.';
+import { Button } from '../Button';
 
 // Example icons (inline SVGs for demo)
 const HomeIcon = () => (

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

@@ -159,6 +159,25 @@
   padding: 0;
 }
 
+// Collapsible section styles (using Collapsible component)
+.sectionCollapsible {
+  // Override Collapsible trigger styles for sidebar context
+  :global(.collapsible-trigger),
+  button[aria-expanded] {
+    background: transparent;
+    justify-content: space-between;
+    padding: var(--fui-space-1, $fui-space-1) var(--fui-space-2, $fui-space-2);
+
+    &:hover {
+      background-color: var(--fui-bg-hover, $fui-bg-hover);
+    }
+  }
+}
+
+.sectionContent {
+  // Content container - no extra padding needed
+}
+
 // ============================================
 // Item
 // ============================================

package/src/components/Sidebar/index.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import styles from './Sidebar.module.scss';
 import { Tooltip } from '../Tooltip';
 import { Skeleton } from '../Skeleton';
+import { Collapsible } from '../Collapsible';
 // Import globals to ensure CSS variables are defined
 import '../../styles/globals.scss';
 
@@ -82,6 +83,10 @@ export interface SidebarSectionProps {
   label?: string;
   /** Action element to display in the section header (e.g., "Add" button) */
   action?: React.ReactNode;
+  /** Enable collapsible behavior */
+  collapsible?: boolean;
+  /** Default expanded state (only applies when collapsible is true) */
+  defaultOpen?: boolean;
   className?: string;
 }
 
@@ -618,23 +623,59 @@ function SidebarNav({ children, 'aria-label': ariaLabel = 'Main navigation', cla
   );
 }
 
-function SidebarSection({ children, label, action, className }: SidebarSectionProps) {
+function SidebarSection({
+  children,
+  label,
+  action,
+  collapsible: isCollapsibleProp = false,
+  defaultOpen = true,
+  className
+}: SidebarSectionProps) {
   const { collapsed, isMobile } = useSidebarContext();
-  const classes = [styles.section, className].filter(Boolean).join(' ');
+
+  const classes = [
+    styles.section,
+    className
+  ].filter(Boolean).join(' ');
+
   const showLabel = label && (!collapsed || isMobile);
   const showAction = action && (!collapsed || isMobile);
+  const isCollapsible = isCollapsibleProp && showLabel;
+
+  // Non-collapsible section
+  if (!isCollapsible) {
+    return (
+      <div className={classes} role="group" aria-label={label}>
+        {(showLabel || showAction) && (
+          <div className={styles.sectionHeader}>
+            {showLabel && <div className={styles.sectionLabel}>{label}</div>}
+            {showAction && <div className={styles.sectionActionWrapper}>{action}</div>}
+          </div>
+        )}
+        <ul className={styles.sectionList}>
+          {children}
+        </ul>
+      </div>
+    );
+  }
 
+  // Collapsible section using Collapsible component
   return (
     <div className={classes} role="group" aria-label={label}>
-      {(showLabel || showAction) && (
-        <div className={styles.sectionHeader}>
-          {showLabel && <div className={styles.sectionLabel}>{label}</div>}
-          {showAction && <div className={styles.sectionActionWrapper}>{action}</div>}
-        </div>
-      )}
-      <ul className={styles.sectionList}>
-        {children}
-      </ul>
+      <Collapsible defaultOpen={defaultOpen} className={styles.sectionCollapsible}>
+        <Collapsible.Trigger
+          className={styles.sectionHeader}
+          chevronPosition="end"
+        >
+          <span className={styles.sectionLabel}>{label}</span>
+          {showAction && <span className={styles.sectionActionWrapper} onClick={(e) => e.stopPropagation()}>{action}</span>}
+        </Collapsible.Trigger>
+        <Collapsible.Content className={styles.sectionContent}>
+          <ul className={styles.sectionList}>
+            {children}
+          </ul>
+        </Collapsible.Content>
+      </Collapsible>
     </div>
   );
 }

package/src/components/Skeleton/Skeleton.fragment.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { defineSegment } from '@fragments/core';
-import { Skeleton } from './index.js';
+import { Skeleton } from '.';
 
 export default defineSegment({
   component: Skeleton,

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

@@ -0,0 +1,201 @@
+import React from 'react';
+import { defineSegment } from '@fragments/core';
+import { Slider } from '.';
+
+export default defineSegment({
+  component: Slider,
+
+  meta: {
+    name: 'Slider',
+    description: 'Range input control for selecting a numeric value within a defined range. Supports labels, value display, and custom step intervals.',
+    category: 'forms',
+    status: 'stable',
+    tags: ['slider', 'range', 'input', 'number', 'control'],
+    since: '0.2.0',
+  },
+
+  usage: {
+    when: [
+      'Selecting a value from a continuous range',
+      'Volume or brightness controls',
+      'Price range filters',
+      'Settings that benefit from visual feedback',
+    ],
+    whenNot: [
+      'Precise numeric input (use Input type="number")',
+      'Discrete options (use RadioGroup or Select)',
+      'Yes/no choices (use Toggle)',
+    ],
+    guidelines: [
+      'Always provide a label describing what the slider controls',
+      'Show the current value when precision matters',
+      'Use appropriate min/max values for the context',
+      'Consider step size for usability',
+    ],
+    accessibility: [
+      'Label is associated with the slider',
+      'Keyboard accessible with arrow keys',
+      'Current value is announced to screen readers',
+      'Uses native slider semantics',
+    ],
+  },
+
+  props: {
+    value: {
+      type: 'number',
+      description: 'Controlled value',
+    },
+    defaultValue: {
+      type: 'number',
+      description: 'Default value for uncontrolled usage',
+    },
+    onChange: {
+      type: 'function',
+      description: 'Called with new value when changed',
+    },
+    min: {
+      type: 'number',
+      description: 'Minimum value',
+      default: '0',
+    },
+    max: {
+      type: 'number',
+      description: 'Maximum value',
+      default: '100',
+    },
+    step: {
+      type: 'number',
+      description: 'Step interval',
+      default: '1',
+    },
+    label: {
+      type: 'string',
+      description: 'Label text',
+    },
+    showValue: {
+      type: 'boolean',
+      description: 'Display current value',
+      default: 'false',
+    },
+    valueSuffix: {
+      type: 'string',
+      description: 'Suffix after value (e.g., "%", "px")',
+    },
+    disabled: {
+      type: 'boolean',
+      description: 'Disable the slider',
+      default: 'false',
+    },
+  },
+
+  relations: [
+    { component: 'Input', relationship: 'alternative', note: 'Use Input for precise numeric entry' },
+    { component: 'Progress', relationship: 'sibling', note: 'Similar visual, but Progress is read-only' },
+  ],
+
+  contract: {
+    propsSummary: [
+      'value: number - controlled value',
+      'defaultValue: number - initial value',
+      'onChange: (value: number) => void - change handler',
+      'min/max: number - range bounds',
+      'step: number - increment size',
+      'label: string - field label',
+      'showValue: boolean - display value',
+      'valueSuffix: string - unit suffix',
+    ],
+    scenarioTags: [
+      'forms.range',
+      'input.numeric',
+      'control.slider',
+    ],
+    a11yRules: ['A11Y_LABEL_REQUIRED', 'A11Y_KEYBOARD_ACCESSIBLE'],
+  },
+
+  variants: [
+    {
+      name: 'Default',
+      description: 'Basic slider with label',
+      render: () => (
+        <div style={{ width: '300px' }}>
+          <Slider label="Volume" defaultValue={50} />
+        </div>
+      ),
+    },
+    {
+      name: 'With Value Display',
+      description: 'Shows current value alongside the slider',
+      render: () => (
+        <div style={{ width: '300px' }}>
+          <Slider
+            label="Brightness"
+            defaultValue={75}
+            showValue
+            valueSuffix="%"
+          />
+        </div>
+      ),
+    },
+    {
+      name: 'Custom Range',
+      description: 'Custom min, max, and step values',
+      render: () => (
+        <div style={{ width: '300px', display: 'flex', flexDirection: 'column', gap: '16px' }}>
+          <Slider
+            label="Temperature"
+            min={60}
+            max={80}
+            step={1}
+            defaultValue={72}
+            showValue
+            valueSuffix="°F"
+          />
+          <Slider
+            label="Font Size"
+            min={12}
+            max={32}
+            step={2}
+            defaultValue={16}
+            showValue
+            valueSuffix="px"
+          />
+        </div>
+      ),
+    },
+    {
+      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>
+        );
+      },
+    },
+    {
+      name: 'Disabled',
+      description: 'Disabled slider',
+      render: () => (
+        <div style={{ width: '300px' }}>
+          <Slider
+            label="Locked Setting"
+            defaultValue={30}
+            showValue
+            disabled
+          />
+        </div>
+      ),
+    },
+  ],
+});