@fragments-sdk/ui 0.4.0 → 0.6.0

package/src/components/Form/Form.fragment.tsx

@@ -1,16 +1,16 @@
 import React from 'react';
 import { defineSegment } from '@fragments/core';
-import { Form } from './index.js';
-import { Field } from '../Field/index.js';
-import { Fieldset } from '../Fieldset/index.js';
-import { Input } from '../Input/index.js';
-import { Textarea } from '../Textarea/index.js';
-import { Select } from '../Select/index.js';
-import { Checkbox } from '../Checkbox/index.js';
-import { RadioGroup } from '../RadioGroup/index.js';
-import { Toggle } from '../Toggle/index.js';
-import { Button } from '../Button/index.js';
-import { Grid } from '../Grid/index.js';
+import { Form } from '.';
+import { Field } from '../Field';
+import { Fieldset } from '../Fieldset';
+import { Input } from '../Input';
+import { Textarea } from '../Textarea';
+import { Select } from '../Select';
+import { Checkbox } from '../Checkbox';
+import { RadioGroup } from '../RadioGroup';
+import { Toggle } from '../Toggle';
+import { Button } from '../Button';
+import { Grid } from '../Grid';
 
 export default defineSegment({
   component: Form,

package/src/components/Grid/Grid.fragment.tsx

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

package/src/components/Header/Header.fragment.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { defineSegment } from '@fragments/core';
-import { Header } from './index.js';
-import { ThemeToggle, ThemeProvider } from '../Theme/index.js';
-import { Button } from '../Button/index.js';
-import { Input } from '../Input/index.js';
+import { Header } from '.';
+import { ThemeToggle, ThemeProvider } from '../Theme';
+import { Button } from '../Button';
+import { Input } from '../Input';
 
 function SearchIcon() {
   return (

package/src/components/Header/Header.module.scss

@@ -8,15 +8,15 @@
 .header {
   display: flex;
   align-items: center;
-  height: var(--header-height, 56px);
-  min-height: var(--header-height, 56px);
+  height: var(--header-height, var(--fui-appshell-header-height, $fui-appshell-header-height));
+  min-height: var(--header-height, var(--fui-appshell-header-height, $fui-appshell-header-height));
   background-color: var(--fui-bg-primary, $fui-bg-primary);
   padding: 0 var(--fui-space-4, $fui-space-4);
-  z-index: var(--fui-header-z-index, 40);
+  z-index: var(--fui-header-z-index, $fui-header-z-index);
 }
 
 .fixed {
-  position: fixed;
+  position: sticky;
   top: 0;
   left: 0;
   right: 0;
@@ -55,7 +55,6 @@
 
   img,
   svg {
-    height: 32px;
     width: auto;
   }
 }
@@ -94,7 +93,7 @@
   color: var(--fui-text-secondary, $fui-text-secondary);
   text-decoration: none;
   white-space: nowrap;
-  min-height: 36px;
+  min-height: var(--fui-button-height-md, $fui-button-height-md);
 
   &:hover {
     background-color: var(--fui-bg-hover, $fui-bg-hover);
@@ -151,8 +150,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 44px;
-  height: 44px;
+  width: var(--fui-touch-lg, $fui-touch-lg);
+  height: var(--fui-touch-lg, $fui-touch-lg);
   border-radius: var(--fui-radius-md, $fui-radius-md);
   color: var(--fui-text-primary, $fui-text-primary);
   flex-shrink: 0;
@@ -162,8 +161,8 @@
   }
 
   svg {
-    width: 24px;
-    height: 24px;
+    width: var(--fui-icon-xl, $fui-icon-xl);
+    height: var(--fui-icon-xl, $fui-icon-xl);
   }
 }
 

package/src/components/Icon/Icon.fragment.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { defineSegment } from '@fragments/core';
-import { Icon } from './index.js';
+import { Icon } from '.';
 import { Heart, Star, Check, Warning, Info } from '@phosphor-icons/react';
 
 export default defineSegment({
@@ -9,7 +9,7 @@ export default defineSegment({
   meta: {
     name: 'Icon',
     description: 'Wrapper for Phosphor icons with consistent sizing and semantic colors. Provides standardized icon rendering across the design system.',
-    category: 'data-display',
+    category: 'display',
     status: 'stable',
     tags: ['icon', 'phosphor', 'visual', 'symbol', 'graphic'],
     since: '0.1.0',

package/src/components/Image/Image.fragment.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { defineSegment } from '@fragments/core';
-import { Image } from './index.js';
+import { Image } from '.';
 
 export default defineSegment({
   component: Image,
@@ -8,7 +8,7 @@ export default defineSegment({
   meta: {
     name: 'Image',
     description: 'Responsive image component with aspect ratio control, loading states, and error fallbacks. Handles image display with consistent styling.',
-    category: 'data-display',
+    category: 'display',
     status: 'stable',
     tags: ['image', 'media', 'photo', 'picture', 'visual'],
     since: '0.1.0',

package/src/components/Input/Input.fragment.tsx

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

package/src/components/Input/Input.module.scss

@@ -43,7 +43,7 @@
 
 // Size variants
 .sm {
-  height: var(--fui-button-height-sm, $fui-button-height-sm);
+  height: var(--fui-input-height-sm, $fui-input-height-sm);
   padding: 0 var(--fui-space-2, $fui-space-2);
   font-size: var(--fui-font-size-xs, $fui-font-size-xs);
 }
@@ -55,7 +55,7 @@
 }
 
 .lg {
-  height: var(--fui-button-height-lg, $fui-button-height-lg);
+  height: var(--fui-input-height-lg, $fui-input-height-lg);
   padding: 0 var(--fui-space-4, $fui-space-4);
   font-size: var(--fui-font-size-base, $fui-font-size-base);
 }

package/src/components/Link/Link.fragment.tsx

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

package/src/components/List/List.fragment.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { defineSegment } from '@fragments/core';
-import { List } from './index.js';
+import { List } from '.';
 import { Check, Star, ArrowRight } from '@phosphor-icons/react';
 
 export default defineSegment({
@@ -9,7 +9,7 @@ export default defineSegment({
   meta: {
     name: 'List',
     description: 'Compound component for rendering ordered or unordered lists with consistent styling. Supports bullet, numbered, and icon-prefixed items.',
-    category: 'layout',
+    category: 'display',
     status: 'stable',
     tags: ['list', 'items', 'bullet', 'ordered', 'unordered'],
     since: '0.1.0',

package/src/components/Listbox/Listbox.fragment.tsx

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

package/src/components/Loading/Loading.fragment.tsx

@@ -0,0 +1,153 @@
+import React from 'react';
+import { defineSegment } from '@fragments/core';
+import { Loading } from '.';
+
+export default defineSegment({
+  component: Loading,
+
+  meta: {
+    name: 'Loading',
+    description: 'Versatile loading indicator with multiple variants for showing progress or waiting states',
+    category: 'feedback',
+    status: 'stable',
+    tags: ['loading', 'spinner', 'progress', 'feedback', 'indicator', 'async'],
+  },
+
+  usage: {
+    when: [
+      'Indicating content is being fetched or processed',
+      'Showing a pending state while waiting for an async operation',
+      'Displaying loading state for buttons, forms, or page sections',
+      'Full-screen loading during initial app/page load',
+    ],
+    whenNot: [
+      'For showing determinate progress - use Progress component instead',
+      'For showing skeleton placeholders - use Skeleton component instead',
+      'For AI-specific thinking states - use ThinkingIndicator instead',
+    ],
+    guidelines: [
+      'Use spinner variant for general loading states',
+      'Use dots variant for chat/messaging contexts',
+      'Use pulse variant for subtle, ambient loading',
+      'Always provide a meaningful label for screen readers',
+      'Consider using Loading.Screen for initial page loads',
+      'Use Loading.Inline when loading indicator should flow with text',
+    ],
+    accessibility: [
+      'Component uses role="status" and aria-live="polite"',
+      'Always provide descriptive label prop for screen readers',
+      'Animations respect prefers-reduced-motion preference',
+    ],
+  },
+
+  props: {
+    size: {
+      type: 'enum',
+      values: ['sm', 'md', 'lg', 'xl'],
+      default: 'md',
+      description: 'Size of the loading indicator',
+    },
+    variant: {
+      type: 'enum',
+      values: ['spinner', 'dots', 'pulse'],
+      default: 'spinner',
+      description: 'Visual style of the loading animation',
+    },
+    label: {
+      type: 'string',
+      default: 'Loading...',
+      description: 'Accessible label for screen readers',
+    },
+    centered: {
+      type: 'boolean',
+      default: false,
+      description: 'Whether to center the loading indicator in its container',
+    },
+    fill: {
+      type: 'boolean',
+      default: false,
+      description: 'Whether to fill the parent container',
+    },
+    overlay: {
+      type: 'boolean',
+      default: false,
+      description: 'Whether to show with a backdrop overlay',
+    },
+    color: {
+      type: 'enum',
+      values: ['accent', 'current', 'muted'],
+      default: 'accent',
+      description: 'Color variant - accent uses theme color, current inherits text color',
+    },
+  },
+
+  variants: [
+    {
+      name: 'Default',
+      description: 'Default spinner loading indicator',
+      render: () => <Loading />,
+    },
+    {
+      name: 'Sizes',
+      description: 'Loading indicators in different sizes',
+      render: () => (
+        <div style={{ display: 'flex', alignItems: 'center', gap: '24px' }}>
+          <Loading size="sm" />
+          <Loading size="md" />
+          <Loading size="lg" />
+          <Loading size="xl" />
+        </div>
+      ),
+    },
+    {
+      name: 'Dots',
+      description: 'Bouncing dots animation',
+      render: () => <Loading variant="dots" />,
+    },
+    {
+      name: 'Pulse',
+      description: 'Pulsing circle animation',
+      render: () => <Loading variant="pulse" />,
+    },
+    {
+      name: 'Colors',
+      description: 'Different color variants',
+      render: () => (
+        <div style={{ display: 'flex', alignItems: 'center', gap: '24px' }}>
+          <Loading color="accent" />
+          <Loading color="muted" />
+          <span style={{ color: '#3b82f6' }}>
+            <Loading color="current" />
+          </span>
+        </div>
+      ),
+    },
+    {
+      name: 'Inline',
+      description: 'Inline loading indicator that flows with text',
+      render: () => (
+        <p style={{ margin: 0 }}>
+          Processing your request <Loading.Inline /> please wait...
+        </p>
+      ),
+    },
+    {
+      name: 'Centered',
+      description: 'Centered in container',
+      render: () => (
+        <div style={{ width: '200px', height: '100px', border: '1px dashed #ccc', borderRadius: '8px' }}>
+          <Loading centered fill />
+        </div>
+      ),
+    },
+    {
+      name: 'Screen',
+      description: 'Full-screen loading state with optional label',
+      render: () => (
+        <div style={{ position: 'relative', width: '300px', height: '200px', border: '1px solid #ccc', borderRadius: '8px', overflow: 'hidden' }}>
+          <Loading.Screen size="lg" label="Loading application..." showLabel />
+        </div>
+      ),
+    },
+  ],
+});

package/src/components/Loading/Loading.module.scss

@@ -0,0 +1,256 @@
+@use '../../tokens/variables' as *;
+@use '../../tokens/mixins' as *;
+
+// ============================================
+// Loading Base
+// ============================================
+
+.loading {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+// ============================================
+// Sizes
+// ============================================
+
+.sm {
+  --loading-size: #{$fui-icon-sm};  // 14px
+}
+
+.md {
+  --loading-size: #{$fui-icon-lg};  // 20px
+}
+
+.lg {
+  --loading-size: #{$fui-icon-xl};  // 24px
+}
+
+.xl {
+  --loading-size: 2.286rem;  // 32px
+}
+
+// ============================================
+// Colors
+// ============================================
+
+.color-accent {
+  color: var(--fui-color-accent, $fui-color-accent);
+}
+
+.color-current {
+  color: currentColor;
+}
+
+.color-muted {
+  color: var(--fui-text-tertiary, $fui-text-tertiary);
+}
+
+// ============================================
+// Layout Modifiers
+// ============================================
+
+.centered {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.fill {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+// ============================================
+// Spinner Variant
+// ============================================
+
+.spinnerIcon {
+  width: var(--loading-size);
+  height: var(--loading-size);
+  animation: spin 0.8s linear infinite;
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+    opacity: 0.7;
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+// ============================================
+// Dots Variant
+// ============================================
+
+.dots {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--loading-size) * 0.3);
+}
+
+.dot {
+  width: calc(var(--loading-size) * 0.35);
+  height: calc(var(--loading-size) * 0.35);
+  border-radius: var(--fui-radius-full, $fui-radius-full);
+  background-color: currentColor;
+  animation: bounce 1.4s ease-in-out infinite;
+
+  &:nth-child(1) {
+    animation-delay: 0s;
+  }
+
+  &:nth-child(2) {
+    animation-delay: 0.2s;
+  }
+
+  &:nth-child(3) {
+    animation-delay: 0.4s;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+    opacity: 0.6;
+  }
+}
+
+@keyframes bounce {
+  0%,
+  60%,
+  100% {
+    transform: translateY(0);
+    opacity: 0.4;
+  }
+  30% {
+    transform: translateY(-30%);
+    opacity: 1;
+  }
+}
+
+// ============================================
+// Pulse Variant
+// ============================================
+
+.pulse {
+  position: relative;
+  width: var(--loading-size);
+  height: var(--loading-size);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pulseRing {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-radius: var(--fui-radius-full, $fui-radius-full);
+  background-color: currentColor;
+  opacity: 0.3;
+  animation: pulseRing 1.5s ease-out infinite;
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+    opacity: 0.2;
+  }
+}
+
+.pulseDot {
+  width: 50%;
+  height: 50%;
+  border-radius: var(--fui-radius-full, $fui-radius-full);
+  background-color: currentColor;
+  z-index: 1;
+}
+
+@keyframes pulseRing {
+  0% {
+    transform: scale(0.5);
+    opacity: 0.5;
+  }
+  100% {
+    transform: scale(1.5);
+    opacity: 0;
+  }
+}
+
+// ============================================
+// Overlay
+// ============================================
+
+.overlayBackdrop {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--fui-backdrop, $fui-backdrop);
+  z-index: 50;
+}
+
+.overlay {
+  // Additional styling if needed when in overlay mode
+}
+
+// ============================================
+// Inline Variant
+// ============================================
+
+.inline {
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+}
+
+.inline-sm {
+  --inline-size: 0.875em;  // Relative to surrounding text
+}
+
+.inline-md {
+  --inline-size: 1.125em;
+}
+
+.inlineSpinner {
+  width: var(--inline-size);
+  height: var(--inline-size);
+  animation: spin 0.8s linear infinite;
+  color: currentColor;
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+    opacity: 0.7;
+  }
+}
+
+// ============================================
+// Screen (Full-screen loading)
+// ============================================
+
+.screen {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--fui-space-3, $fui-space-3);
+  background-color: var(--fui-bg-primary, $fui-bg-primary);
+  z-index: 100;
+}
+
+.screenLabel {
+  @include text-base;
+  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
+  color: var(--fui-text-secondary, $fui-text-secondary);
+}