@fragments-sdk/ui 0.3.0 → 0.4.0

package/src/recipes/DashboardNav.recipe.ts

@@ -0,0 +1,183 @@
+import { defineRecipe } from '@fragments/core';
+
+export default defineRecipe({
+  name: 'Dashboard Navigation',
+  description: 'Sidebar navigation pattern for dashboard applications with user profile, sections, and nested menus',
+  category: 'navigation',
+  components: ['Sidebar', 'Avatar'],
+  tags: ['navigation', 'sidebar', 'dashboard', 'admin', 'menu'],
+  code: `
+// Dashboard Navigation with User Profile
+// A complete sidebar navigation for admin/dashboard interfaces
+
+function DashboardNav({ user, currentPath }) {
+  const [collapsed, setCollapsed] = React.useState(false);
+  const [projectsExpanded, setProjectsExpanded] = React.useState(false);
+
+  return (
+    <Sidebar
+      collapsed={collapsed}
+      onCollapsedChange={setCollapsed}
+    >
+      {/* Brand header */}
+      <Sidebar.Header>
+        <svg width="32" height="32" viewBox="0 0 256 256" fill="var(--fui-color-accent)">
+          <path d="M208,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32Zm0,176H48V48H208V208Z" />
+        </svg>
+        {!collapsed && (
+          <span style={{ fontWeight: 600, fontSize: '16px' }}>Dashboard</span>
+        )}
+        <Sidebar.CollapseToggle />
+      </Sidebar.Header>
+
+      {/* Main navigation */}
+      <Sidebar.Nav aria-label="Dashboard navigation">
+        {/* Primary section */}
+        <Sidebar.Section>
+          <Sidebar.Item
+            icon={<HomeIcon />}
+            href="/dashboard"
+            active={currentPath === '/dashboard'}
+          >
+            Overview
+          </Sidebar.Item>
+          <Sidebar.Item
+            icon={<ChartIcon />}
+            href="/analytics"
+            active={currentPath === '/analytics'}
+            badge="New"
+          >
+            Analytics
+          </Sidebar.Item>
+          <Sidebar.Item
+            icon={<InboxIcon />}
+            href="/inbox"
+            active={currentPath === '/inbox'}
+            badge="5"
+          >
+            Inbox
+          </Sidebar.Item>
+        </Sidebar.Section>
+
+        {/* Projects section with nested items */}
+        <Sidebar.Section label="Workspace">
+          <Sidebar.Item
+            icon={<FolderIcon />}
+            hasSubmenu
+            expanded={projectsExpanded}
+            onExpandedChange={setProjectsExpanded}
+          >
+            Projects
+          </Sidebar.Item>
+          <Sidebar.Submenu>
+            <Sidebar.SubItem
+              href="/projects/website"
+              active={currentPath === '/projects/website'}
+            >
+              Website Redesign
+            </Sidebar.SubItem>
+            <Sidebar.SubItem
+              href="/projects/mobile"
+              active={currentPath === '/projects/mobile'}
+            >
+              Mobile App
+            </Sidebar.SubItem>
+            <Sidebar.SubItem
+              href="/projects/api"
+              active={currentPath === '/projects/api'}
+            >
+              API Integration
+            </Sidebar.SubItem>
+          </Sidebar.Submenu>
+          <Sidebar.Item
+            icon={<UsersIcon />}
+            href="/team"
+            active={currentPath === '/team'}
+          >
+            Team Members
+          </Sidebar.Item>
+          <Sidebar.Item
+            icon={<CalendarIcon />}
+            href="/calendar"
+            active={currentPath === '/calendar'}
+          >
+            Calendar
+          </Sidebar.Item>
+        </Sidebar.Section>
+
+        {/* Settings section */}
+        <Sidebar.Section label="Account">
+          <Sidebar.Item
+            icon={<GearIcon />}
+            href="/settings"
+            active={currentPath === '/settings'}
+          >
+            Settings
+          </Sidebar.Item>
+          <Sidebar.Item
+            icon={<HelpIcon />}
+            href="/help"
+            active={currentPath === '/help'}
+          >
+            Help & Support
+          </Sidebar.Item>
+        </Sidebar.Section>
+      </Sidebar.Nav>
+
+      {/* Footer with user profile */}
+      <Sidebar.Footer>
+        <div style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: '12px',
+          padding: collapsed ? '0' : '8px',
+          borderRadius: '8px',
+          cursor: 'pointer',
+        }}>
+          <Avatar
+            src={user.avatar}
+            name={user.name}
+            size="sm"
+          />
+          {!collapsed && (
+            <div style={{ flex: 1, minWidth: 0 }}>
+              <div style={{
+                fontWeight: 500,
+                fontSize: '14px',
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+              }}>
+                {user.name}
+              </div>
+              <div style={{
+                fontSize: '12px',
+                color: 'var(--fui-text-secondary)',
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+              }}>
+                {user.email}
+              </div>
+            </div>
+          )}
+        </div>
+      </Sidebar.Footer>
+    </Sidebar>
+  );
+}
+
+// Usage example:
+// <DashboardNav
+//   user={{ name: 'Jane Doe', email: 'jane@example.com', avatar: '/avatar.jpg' }}
+//   currentPath="/dashboard"
+// />
+
+// Icon components (use your preferred icon library)
+const HomeIcon = () => (
+  <svg width="20" height="20" viewBox="0 0 256 256" fill="currentColor">
+    <path d="M219.31,108.68l-80-80a16,16,0,0,0-22.62,0l-80,80A15.87,15.87,0,0,0,32,120v96a8,8,0,0,0,8,8H96a8,8,0,0,0,8-8V160h48v56a8,8,0,0,0,8,8h56a8,8,0,0,0,8-8V120A15.87,15.87,0,0,0,219.31,108.68Z" />
+  </svg>
+);
+`.trim(),
+});

package/src/recipes/LoginForm.recipe.ts

@@ -14,6 +14,13 @@ export default defineRecipe({
   <Input type="password" />
 </FormField>
 <Button type="submit" variant="primary">Sign in</Button>
-{error && <Alert variant="danger">{error}</Alert>}
+{error && (
+  <Alert severity="error">
+    <Alert.Icon />
+    <Alert.Body>
+      <Alert.Content>{error}</Alert.Content>
+    </Alert.Body>
+  </Alert>
+)}
 `.trim(),
 });

package/src/recipes/SettingsPage.recipe.ts

@@ -8,30 +8,47 @@ export default defineRecipe({
   tags: ['settings', 'preferences', 'form', 'toggle', 'layout'],
   code: `
 <Grid columns={1} gap="lg">
-  <Card title="Profile" description="Your public profile information">
-    <Grid columns={2} gap="md">
-      <Input label="Display Name" defaultValue={user.name} />
-      <Input label="Email" type="email" defaultValue={user.email} />
-      <Grid.Item colSpan="full">
-        <Input label="Website" type="url" defaultValue={user.website} />
-      </Grid.Item>
-    </Grid>
+  <Card>
+    <Card.Header>
+      <Card.Title>Profile</Card.Title>
+      <Card.Description>Your public profile information</Card.Description>
+    </Card.Header>
+    <Card.Body>
+      <Grid columns={2} gap="md">
+        <Input label="Display Name" defaultValue={user.name} />
+        <Input label="Email" type="email" defaultValue={user.email} />
+        <Grid.Item colSpan="full">
+          <Input label="Website" type="url" defaultValue={user.website} />
+        </Grid.Item>
+      </Grid>
+    </Card.Body>
   </Card>
 
-  <Card title="Notifications" description="Choose what you get notified about">
-    <Grid columns={1} gap="sm">
-      <Toggle label="Email notifications" checked={prefs.emailNotifs} onChange={onToggle('emailNotifs')} />
-      <Toggle label="Push notifications" checked={prefs.pushNotifs} onChange={onToggle('pushNotifs')} />
-      <Toggle label="Weekly digest" checked={prefs.digest} onChange={onToggle('digest')} />
-    </Grid>
+  <Card>
+    <Card.Header>
+      <Card.Title>Notifications</Card.Title>
+      <Card.Description>Choose what you get notified about</Card.Description>
+    </Card.Header>
+    <Card.Body>
+      <Grid columns={1} gap="sm">
+        <Toggle label="Email notifications" checked={prefs.emailNotifs} onChange={onToggle('emailNotifs')} />
+        <Toggle label="Push notifications" checked={prefs.pushNotifs} onChange={onToggle('pushNotifs')} />
+        <Toggle label="Weekly digest" checked={prefs.digest} onChange={onToggle('digest')} />
+      </Grid>
+    </Card.Body>
   </Card>
 
-  <Card title="Appearance">
-    <Select label="Theme" value={prefs.theme} onChange={onThemeChange}>
-      <Select.Item value="light">Light</Select.Item>
-      <Select.Item value="dark">Dark</Select.Item>
-      <Select.Item value="system">System</Select.Item>
-    </Select>
+  <Card>
+    <Card.Header>
+      <Card.Title>Appearance</Card.Title>
+    </Card.Header>
+    <Card.Body>
+      <Select label="Theme" value={prefs.theme} onChange={onThemeChange}>
+        <Select.Item value="light">Light</Select.Item>
+        <Select.Item value="dark">Dark</Select.Item>
+        <Select.Item value="system">System</Select.Item>
+      </Select>
+    </Card.Body>
   </Card>
 
   <Separator />

package/src/styles/globals.scss

@@ -15,3 +15,34 @@
 
 // Output all CSS custom properties
 @include fui-css-variables;
+
+// ============================================
+// Accessibility: Reduced Motion
+// ============================================
+// Respects user's system preference for reduced motion.
+// Disables animations and transitions globally when enabled.
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+// ============================================
+// Accessibility: Focus Visible
+// ============================================
+// Ensures focus indicators are only shown for keyboard navigation
+
+:focus:not(:focus-visible) {
+  outline: none;
+}
+
+:focus-visible {
+  outline: var(--fui-focus-ring-width, 2px) solid var(--fui-focus-ring-color, #18181b);
+  outline-offset: var(--fui-focus-ring-offset, 2px);
+}

package/src/tokens/_index.scss

@@ -0,0 +1,3 @@
+// Forward both variables and mixins
+@forward 'variables';
+@forward 'mixins';

package/src/tokens/_mixins.scss

@@ -79,12 +79,19 @@
   border-radius: var(--fui-radius-lg, #{$fui-radius-lg});
 }
 
-// Responsive breakpoint mixins (mobile-first)
+// Responsive breakpoint mixins (mobile-first, min-width)
 @mixin breakpoint-sm { @media (min-width: $fui-breakpoint-sm) { @content; } }
 @mixin breakpoint-md { @media (min-width: $fui-breakpoint-md) { @content; } }
 @mixin breakpoint-lg { @media (min-width: $fui-breakpoint-lg) { @content; } }
 @mixin breakpoint-xl { @media (min-width: $fui-breakpoint-xl) { @content; } }
 
+// Responsive breakpoint mixins (desktop-first, max-width)
+// Use for hiding/changing elements below a breakpoint
+@mixin below-sm { @media (max-width: #{$fui-breakpoint-sm - 1px}) { @content; } }
+@mixin below-md { @media (max-width: #{$fui-breakpoint-md - 1px}) { @content; } }
+@mixin below-lg { @media (max-width: #{$fui-breakpoint-lg - 1px}) { @content; } }
+@mixin below-xl { @media (max-width: #{$fui-breakpoint-xl - 1px}) { @content; } }
+
 // Visually hidden (for screen readers)
 @mixin visually-hidden {
   position: absolute;
@@ -97,3 +104,49 @@
   white-space: nowrap;
   border: 0;
 }
+
+// ============================================
+// Accessibility Mixins
+// ============================================
+
+// Reduced motion preference - respects user's system setting
+@mixin prefers-reduced-motion {
+  @media (prefers-reduced-motion: reduce) {
+    @content;
+  }
+}
+
+// High contrast mode support - for users who need more visual contrast
+@mixin prefers-contrast {
+  @media (prefers-contrast: more) {
+    @content;
+  }
+}
+
+// Safe transition - respects reduced motion preference
+// Usage: @include safe-transition(background-color 150ms ease, border-color 150ms ease);
+@mixin safe-transition($transitions...) {
+  transition: $transitions;
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}
+
+// Safe animation - respects reduced motion preference
+// Usage: @include safe-animation(fadeIn 200ms ease);
+@mixin safe-animation($animation) {
+  animation: $animation;
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+}
+
+// Focus ring for error states (e.g., invalid form fields)
+@mixin focus-ring-error {
+  outline: none;
+  box-shadow:
+    0 0 0 var(--fui-focus-ring-offset, #{$fui-focus-ring-offset}) var(--fui-bg-primary, #{$fui-bg-primary}),
+    0 0 0 calc(var(--fui-focus-ring-offset, #{$fui-focus-ring-offset}) + var(--fui-focus-ring-width, #{$fui-focus-ring-width})) var(--fui-color-danger, #{$fui-color-danger});
+}