@fragments-sdk/ui 0.3.0 → 0.4.0

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

@@ -12,18 +12,11 @@
   width: var(--sidebar-width);
   height: 100vh;
   background-color: var(--fui-bg-primary, $fui-bg-primary);
-  border-right: 1px solid var(--fui-border, $fui-border);
   transition: width var(--fui-transition-normal, $fui-transition-normal);
   overflow: hidden;
   flex-shrink: 0;
 }
 
-// Right position variant
-.positionRight {
-  border-right: none;
-  border-left: 1px solid var(--fui-border, $fui-border);
-}
-
 // Desktop collapsed state
 .collapsed {
   width: var(--sidebar-collapsed-width);
@@ -91,10 +84,9 @@
   display: flex;
   align-items: center;
   gap: var(--fui-space-3, $fui-space-3);
-  padding: var(--fui-space-4, $fui-space-4) var(--fui-space-4, $fui-space-4);
-  border-bottom: 1px solid var(--fui-border, $fui-border);
-  min-height: 60px;
+  padding: var(--fui-space-2, $fui-space-2) var(--fui-space-2, $fui-space-2);
   flex-shrink: 0;
+  height: var(--appshell-header-height, 56px);
 }
 
 // ============================================
@@ -122,7 +114,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: var(--fui-space-2, $fui-space-2) var(--fui-space-3, $fui-space-3);
+  padding: var(--fui-space-1, $fui-space-1) var(--fui-space-2, $fui-space-2);
 }
 
 .sectionLabel {
@@ -145,8 +137,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 24px;
-  height: 24px;
+  width: $fui-touch-sm;
+  height: $fui-touch-sm;
   border-radius: var(--fui-radius-sm, $fui-radius-sm);
   color: var(--fui-text-tertiary, $fui-text-tertiary);
 
@@ -156,8 +148,8 @@
   }
 
   svg {
-    width: 16px;
-    height: 16px;
+    width: $fui-icon-md;
+    height: $fui-icon-md;
   }
 }
 
@@ -184,11 +176,11 @@
   align-items: center;
   gap: var(--fui-space-3, $fui-space-3);
   width: 100%;
-  padding: var(--fui-space-2, $fui-space-2) var(--fui-space-3, $fui-space-3);
+  padding: var(--fui-space-1, $fui-space-1) var(--fui-space-2, $fui-space-2);
   border-radius: var(--fui-radius-md, $fui-radius-md);
   color: var(--fui-text-secondary, $fui-text-secondary);
   text-decoration: none;
-  min-height: 40px;
+  min-height: $fui-sidebar-item-height;
 
   &:hover:not(.itemDisabled) {
     background-color: var(--fui-bg-hover, $fui-bg-hover);
@@ -224,14 +216,14 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 20px;
-  height: 20px;
+  width: $fui-icon-lg;
+  height: $fui-icon-lg;
   flex-shrink: 0;
   color: var(--fui-text-tertiary, $fui-text-tertiary);
 
   svg {
-    width: 20px;
-    height: 20px;
+    width: $fui-icon-lg;
+    height: $fui-icon-lg;
   }
 
   .item:hover:not(.itemDisabled) & {
@@ -258,7 +250,7 @@
   background-color: var(--fui-color-accent-hover, $fui-color-accent-hover);
   color: var(--fui-text-inverse, $fui-text-inverse);
   border-radius: var(--fui-radius-full, $fui-radius-full);
-  min-width: 20px;
+  min-width: $fui-icon-lg;
   line-height: 1;
 
   .itemActive & {
@@ -271,14 +263,14 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 16px;
-  height: 16px;
+  width: $fui-icon-md;
+  height: $fui-icon-md;
   flex-shrink: 0;
   transition: transform var(--fui-transition-fast, $fui-transition-fast);
 
   svg {
-    width: 16px;
-    height: 16px;
+    width: $fui-icon-md;
+    height: $fui-icon-md;
   }
 }
 
@@ -325,12 +317,12 @@
   display: flex;
   align-items: center;
   width: 100%;
-  padding: var(--fui-space-2, $fui-space-2) var(--fui-space-3, $fui-space-3);
+  padding: var(--fui-space-1, $fui-space-1) var(--fui-space-2, $fui-space-2);
   border-radius: var(--fui-radius-md, $fui-radius-md);
   color: var(--fui-text-secondary, $fui-text-secondary);
   text-decoration: none;
   font-size: var(--fui-font-size-sm, $fui-font-size-sm);
-  min-height: 36px;
+  min-height: $fui-sidebar-subitem-height;
   position: relative;
 
   // Left border indicator
@@ -340,8 +332,8 @@
     left: 0;
     top: 50%;
     transform: translateY(-50%);
-    width: 2px;
-    height: 16px;
+    width: $fui-sidebar-indicator-width;
+    height: $fui-sidebar-indicator-height;
     background-color: transparent;
     border-radius: var(--fui-radius-full, $fui-radius-full);
     transition: background-color var(--fui-transition-fast, $fui-transition-fast);
@@ -381,7 +373,6 @@
   flex-direction: column;
   gap: var(--fui-space-2, $fui-space-2);
   padding: var(--fui-space-4, $fui-space-4);
-  border-top: 1px solid var(--fui-border, $fui-border);
   margin-top: auto;
   flex-shrink: 0;
 }
@@ -397,8 +388,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 44px;
-  height: 44px;
+  width: $fui-touch-lg;
+  height: $fui-touch-lg;
   border-radius: var(--fui-radius-md, $fui-radius-md);
   color: var(--fui-text-primary, $fui-text-primary);
 
@@ -407,8 +398,8 @@
   }
 
   svg {
-    width: 24px;
-    height: 24px;
+    width: $fui-icon-xl;
+    height: $fui-icon-xl;
   }
 }
 
@@ -440,8 +431,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 32px;
-  height: 32px;
+  width: $fui-touch-md;
+  height: $fui-touch-md;
   border-radius: var(--fui-radius-md, $fui-radius-md);
   color: var(--fui-text-secondary, $fui-text-secondary);
   margin-left: auto;
@@ -452,8 +443,8 @@
   }
 
   svg {
-    width: 20px;
-    height: 20px;
+    width: $fui-icon-lg;
+    height: $fui-icon-lg;
   }
 }
 
@@ -480,7 +471,7 @@
   position: absolute;
   top: 0;
   right: 0;
-  width: 16px;
+  width: $fui-sidebar-rail-width;
   height: 100%;
   cursor: pointer;
   z-index: 10;
@@ -502,9 +493,9 @@
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
-    right: 4px;
-    width: 4px;
-    height: 40px;
+    right: $fui-sidebar-rail-indicator-width;
+    width: $fui-sidebar-rail-indicator-width;
+    height: $fui-sidebar-rail-indicator-height;
     border-radius: var(--fui-radius-full, $fui-radius-full);
     background-color: var(--fui-border, $fui-border);
     opacity: 0;
@@ -515,14 +506,14 @@
 
     .positionRight & {
       right: auto;
-      left: 4px;
+      left: $fui-sidebar-rail-indicator-width;
     }
   }
 
   // Show indicator on hover
   &:hover::before {
     opacity: 1;
-    height: 56px;
+    height: $fui-sidebar-rail-indicator-height-hover;
     background-color: var(--fui-color-accent, $fui-color-accent);
   }
 
@@ -552,10 +543,44 @@
   display: flex;
   align-items: center;
   gap: var(--fui-space-3, $fui-space-3);
-  padding: var(--fui-space-2, $fui-space-2) var(--fui-space-3, $fui-space-3);
-  min-height: 40px;
+  padding: var(--fui-space-1, $fui-space-1) var(--fui-space-2, $fui-space-2);
+  min-height: $fui-sidebar-item-height;
 }
 
 .skeletonLabel {
   flex: 1;
 }
+
+// ============================================
+// Accessibility: Reduced Motion
+// ============================================
+
+@media (prefers-reduced-motion: reduce) {
+  .root {
+    transition: none;
+  }
+
+  .mobile {
+    transition: none;
+  }
+
+  .overlay {
+    transition: none;
+  }
+
+  .submenu {
+    transition: none;
+  }
+
+  .itemChevron {
+    transition: none;
+  }
+
+  .rail::before {
+    transition: none;
+  }
+
+  .subItem::before {
+    transition: none;
+  }
+}

package/src/components/Sidebar/index.tsx

@@ -38,7 +38,7 @@ export interface SidebarProviderProps {
   enableKeyboardShortcut?: boolean;
 }
 
-export interface SidebarProps {
+export interface SidebarProps extends React.HTMLAttributes<HTMLElement> {
   children: React.ReactNode;
   /** Icon-only mode (desktop) - controlled */
   collapsed?: boolean;
@@ -60,8 +60,6 @@ export interface SidebarProps {
   position?: 'left' | 'right';
   /** Collapse behavior: 'icon' (default), 'offcanvas', or 'none' */
   collapsible?: SidebarCollapsible;
-  /** Additional class name */
-  className?: string;
 }
 
 export interface SidebarHeaderProps {
@@ -475,6 +473,8 @@ function SidebarRoot({
   position = 'left',
   collapsible = 'icon',
   className,
+  style: styleProp,
+  ...htmlProps
 }: SidebarProps) {
   // Check if we're inside a SidebarProvider
   const existingContext = React.useContext(SidebarContext);
@@ -570,10 +570,12 @@ function SidebarRoot({
   const style: React.CSSProperties = {
     '--sidebar-width': resolvedWidth,
     '--sidebar-collapsed-width': resolvedCollapsedWidth,
+    ...styleProp,
   } as React.CSSProperties;
 
   const content = (
     <aside
+      {...htmlProps}
       className={classes}
       style={style}
       data-state={isMobile ? (open ? 'open' : 'closed') : (collapsed ? 'collapsed' : 'expanded')}

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

@@ -110,7 +110,7 @@ export default defineSegment({
       name: 'Semantic Variants',
       description: 'Pre-configured shapes for common elements',
       render: () => (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--fui-space-2)' }}>
           <Skeleton variant="heading" width={200} />
           <Skeleton variant="text" width="100%" />
           <Skeleton variant="text" width="80%" />
@@ -121,7 +121,7 @@ export default defineSegment({
       name: 'Avatar Skeleton',
       description: 'Circular placeholder for avatars',
       render: () => (
-        <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+        <div style={{ display: 'flex', gap: 'var(--fui-space-1)', alignItems: 'center' }}>
           <Skeleton.Circle size="sm" />
           <Skeleton.Circle size="md" />
           <Skeleton.Circle size="lg" />
@@ -132,12 +132,12 @@ export default defineSegment({
       name: 'Card Skeleton',
       description: 'Composed skeleton for a card layout',
       render: () => (
-        <div style={{ width: 300, padding: 16, border: '1px solid #e5e7eb', borderRadius: 8 }}>
+        <div style={{ width: 300, padding: 'var(--fui-space-2)', border: '1px solid var(--fui-border)', borderRadius: 'var(--fui-radius-lg)' }}>
           <Skeleton variant="rect" height={120} radius="md" />
-          <div style={{ marginTop: 12 }}>
+          <div style={{ marginTop: 'var(--fui-space-2)' }}>
             <Skeleton variant="heading" width="60%" />
           </div>
-          <div style={{ marginTop: 8 }}>
+          <div style={{ marginTop: 'var(--fui-space-1)' }}>
             <Skeleton.Text lines={2} />
           </div>
         </div>

package/src/components/Skeleton/Skeleton.module.scss

@@ -164,3 +164,14 @@
     background-color: var(--fui-bg-tertiary, #{$fui-dark-bg-tertiary});
   }
 }
+
+// ============================================
+// Accessibility: Reduced Motion
+// ============================================
+
+@media (prefers-reduced-motion: reduce) {
+  .skeleton,
+  .textLine {
+    animation: none;
+  }
+}

package/src/components/Slider/Slider.module.scss

@@ -0,0 +1,87 @@
+@use '../../tokens/variables' as *;
+@use '../../tokens/mixins' as *;
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--fui-space-2, $fui-space-2);
+}
+
+.label {
+  @include label-text;
+}
+
+.value {
+  font-family: var(--fui-font-mono, $fui-font-mono);
+  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
+  color: var(--fui-text-secondary, $fui-text-secondary);
+  min-width: 60px;
+  text-align: right;
+}
+
+.root {
+  width: 100%;
+}
+
+.control {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.track {
+  position: relative;
+  height: $fui-slider-track-height;
+  width: 100%;
+  background-color: var(--fui-bg-tertiary, $fui-bg-tertiary);
+  border-radius: var(--fui-radius-full, $fui-radius-full);
+  cursor: pointer;
+
+  &[data-disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+.indicator {
+  position: absolute;
+  height: 100%;
+  background-color: var(--fui-color-accent, $fui-color-accent);
+  border-radius: var(--fui-radius-full, $fui-radius-full);
+}
+
+.thumb {
+  width: $fui-slider-thumb-size;
+  height: $fui-slider-thumb-size;
+  background-color: var(--fui-bg-primary, $fui-bg-primary);
+  border: $fui-slider-thumb-border solid var(--fui-color-accent, $fui-color-accent);
+  border-radius: var(--fui-radius-full, $fui-radius-full);
+  cursor: grab;
+  transition:
+    transform var(--fui-transition-fast, $fui-transition-fast),
+    box-shadow var(--fui-transition-fast, $fui-transition-fast);
+
+  &:hover {
+    transform: scale(1.1);
+  }
+
+  &:active {
+    cursor: grabbing;
+    transform: scale(1.05);
+  }
+
+  &:focus-visible {
+    @include focus-ring;
+  }
+
+  &[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}

package/src/components/Slider/index.tsx

@@ -0,0 +1,88 @@
+import * as React from 'react';
+import { Field } from '@base-ui/react/field';
+import { Slider as BaseSlider } from '@base-ui/react/slider';
+import styles from './Slider.module.scss';
+import '../../styles/globals.scss';
+
+export interface SliderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+  label?: string;
+  value?: number;
+  defaultValue?: number;
+  onChange?: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  showValue?: boolean;
+  valueSuffix?: string;
+  disabled?: boolean;
+  name?: string;
+}
+
+export const Slider = React.forwardRef<HTMLDivElement, SliderProps>(
+  function Slider(
+    {
+      label,
+      value,
+      defaultValue,
+      onChange,
+      min = 0,
+      max = 100,
+      step = 1,
+      showValue = false,
+      valueSuffix = '',
+      disabled = false,
+      className,
+      name,
+      id,
+      ...htmlProps
+    },
+    ref
+  ) {
+    // For controlled component, use value; otherwise track internal state for display
+    const [internalValue, setInternalValue] = React.useState(defaultValue ?? min);
+    const displayValue = value !== undefined ? value : internalValue;
+
+    const handleChange = (newValue: number | number[]) => {
+      const val = Array.isArray(newValue) ? newValue[0] : newValue;
+      setInternalValue(val);
+      onChange?.(val);
+    };
+
+    const sliderValue = value !== undefined ? [value] : (defaultValue !== undefined ? [defaultValue] : undefined);
+
+    return (
+      <Field.Root {...htmlProps} disabled={disabled} className={[styles.wrapper, className].filter(Boolean).join(' ')}>
+        {(label || showValue) && (
+          <div className={styles.header}>
+            {label && <Field.Label className={styles.label}>{label}</Field.Label>}
+            {showValue && (
+              <span className={styles.value}>
+                {displayValue}{valueSuffix}
+              </span>
+            )}
+          </div>
+        )}
+        <BaseSlider.Root
+          ref={ref}
+          value={sliderValue}
+          defaultValue={defaultValue !== undefined ? [defaultValue] : undefined}
+          onValueChange={handleChange}
+          min={min}
+          max={max}
+          step={step}
+          disabled={disabled}
+          name={name}
+          id={id}
+          className={styles.root}
+        >
+          <BaseSlider.Control className={styles.control}>
+            <BaseSlider.Track className={styles.track}>
+              <BaseSlider.Indicator className={styles.indicator} />
+              <BaseSlider.Thumb className={styles.thumb} />
+            </BaseSlider.Track>
+          </BaseSlider.Control>
+        </BaseSlider.Root>
+      </Field.Root>
+    );
+  }
+);

package/src/components/Stack/Stack.module.scss

@@ -0,0 +1,120 @@
+@use '../../tokens/variables' as *;
+
+.stack {
+  display: flex;
+}
+
+// Direction
+.row {
+  flex-direction: row;
+}
+
+.column {
+  flex-direction: column;
+}
+
+// Responsive direction
+.directionResponsive {
+  flex-direction: var(--fui-stack-direction, column);
+
+  @media (min-width: 640px) {
+    flex-direction: var(--fui-stack-direction-sm, var(--fui-stack-direction, column));
+  }
+
+  @media (min-width: 768px) {
+    flex-direction: var(--fui-stack-direction-md, var(--fui-stack-direction-sm, var(--fui-stack-direction, column)));
+  }
+
+  @media (min-width: 1024px) {
+    flex-direction: var(--fui-stack-direction-lg, var(--fui-stack-direction-md, var(--fui-stack-direction-sm, var(--fui-stack-direction, column))));
+  }
+
+  @media (min-width: 1280px) {
+    flex-direction: var(--fui-stack-direction-xl, var(--fui-stack-direction-lg, var(--fui-stack-direction-md, var(--fui-stack-direction-sm, var(--fui-stack-direction, column)))));
+  }
+}
+
+// Gap sizes
+.gap-xs {
+  gap: var(--fui-space-1, $fui-space-1);
+}
+
+.gap-sm {
+  gap: var(--fui-space-2, $fui-space-2);
+}
+
+.gap-md {
+  gap: var(--fui-space-3, $fui-space-3);
+}
+
+.gap-lg {
+  gap: var(--fui-space-4, $fui-space-4);
+}
+
+.gap-xl {
+  gap: var(--fui-space-6, $fui-space-6);
+}
+
+// Responsive gap
+.gapResponsive {
+  gap: var(--fui-stack-gap, 0);
+
+  @media (min-width: 640px) {
+    gap: var(--fui-stack-gap-sm, var(--fui-stack-gap, 0));
+  }
+
+  @media (min-width: 768px) {
+    gap: var(--fui-stack-gap-md, var(--fui-stack-gap-sm, var(--fui-stack-gap, 0)));
+  }
+
+  @media (min-width: 1024px) {
+    gap: var(--fui-stack-gap-lg, var(--fui-stack-gap-md, var(--fui-stack-gap-sm, var(--fui-stack-gap, 0))));
+  }
+
+  @media (min-width: 1280px) {
+    gap: var(--fui-stack-gap-xl, var(--fui-stack-gap-lg, var(--fui-stack-gap-md, var(--fui-stack-gap-sm, var(--fui-stack-gap, 0)))));
+  }
+}
+
+// Align (cross-axis)
+.align-start {
+  align-items: flex-start;
+}
+
+.align-center {
+  align-items: center;
+}
+
+.align-end {
+  align-items: flex-end;
+}
+
+.align-stretch {
+  align-items: stretch;
+}
+
+.align-baseline {
+  align-items: baseline;
+}
+
+// Justify (main-axis)
+.justify-start {
+  justify-content: flex-start;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-end {
+  justify-content: flex-end;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+// Wrap
+.wrap {
+  flex-wrap: wrap;
+}