@fragments-sdk/ui 0.8.8 → 0.9.0

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

@@ -1,9 +1,9 @@
-import React from 'react';
-import { defineFragment } from '@fragments-sdk/cli/core';
-import { ToggleGroup } from '.';
+import React from "react";
+import { defineFragment } from "@fragments-sdk/cli/core";
+import { ToggleGroup } from ".";
 
 function DefaultExample() {
-  const [value, setValue] = React.useState('left');
+  const [value, setValue] = React.useState("left");
 
   return (
     <ToggleGroup value={value} onChange={setValue}>
@@ -15,7 +15,7 @@ function DefaultExample() {
 }
 
 function PillsExample() {
-  const [value, setValue] = React.useState('all');
+  const [value, setValue] = React.useState("all");
 
   return (
     <ToggleGroup value={value} onChange={setValue} variant="pills">
@@ -27,7 +27,7 @@ function PillsExample() {
 }
 
 function OutlineExample() {
-  const [value, setValue] = React.useState('day');
+  const [value, setValue] = React.useState("day");
 
   return (
     <ToggleGroup value={value} onChange={setValue} variant="outline">
@@ -39,11 +39,11 @@ function OutlineExample() {
 }
 
 function SizesExample() {
-  const [value1, setValue1] = React.useState('a');
-  const [value2, setValue2] = React.useState('a');
+  const [value1, setValue1] = React.useState("a");
+  const [value2, setValue2] = React.useState("a");
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+    <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>
@@ -57,12 +57,19 @@ function SizesExample() {
 }
 
 function ViewSwitcherExample() {
-  const [view, setView] = React.useState('grid');
+  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">
+        <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" />
@@ -70,7 +77,14 @@ function ViewSwitcherExample() {
         </svg>
       </ToggleGroup.Item>
       <ToggleGroup.Item value="list">
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <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" />
@@ -81,13 +95,15 @@ function ViewSwitcherExample() {
 }
 
 function DisabledItemExample() {
-  const [value, setValue] = React.useState('basic');
+  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.Item value="enterprise" disabled>
+        Enterprise
+      </ToggleGroup.Item>
     </ToggleGroup>
   );
 }
@@ -96,104 +112,105 @@ export default defineFragment({
   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', 'fragmented', 'control', 'tabs', 'switch'],
-    since: '0.2.0',
+    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", "fragmented", "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)',
-      'Fragmented controls like view switchers',
-      'Filter or sort options',
+      "Switching between mutually exclusive views or modes",
+      "Selecting one option from a small set (2-5 options)",
+      "Fragmented 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 Switch component)',
+      "Multiple selections allowed (use Checkbox group)",
+      "Many options (use Select or RadioGroup)",
+      "Navigation between pages (use Tabs)",
+      "On/off toggle (use Switch 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',
+      "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',
+      "Keyboard navigable with Tab and arrow keys",
+      "Focus visible on active item",
     ],
   },
 
   props: {
     value: {
-      type: 'string',
-      description: 'Currently selected value',
+      type: "string",
+      description: "Currently selected value",
       required: true,
     },
     onChange: {
-      type: 'function',
-      description: 'Called with new value when selection changes',
+      type: "function",
+      description: "Called with new value when selection changes",
       required: true,
     },
     children: {
-      type: 'node',
-      description: 'ToggleGroup.Item components',
+      type: "node",
+      description: "ToggleGroup.Item components",
       required: true,
     },
     variant: {
-      type: 'enum',
-      description: 'Visual style',
-      values: ['default', 'pills', 'outline'],
-      default: 'default',
+      type: "enum",
+      description: "Visual style",
+      values: ["default", "pills", "outline"],
+      default: "default",
     },
     size: {
-      type: 'enum',
-      description: 'Size variant',
-      values: ['sm', 'md'],
-      default: 'md',
+      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',
+      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: 'Switch', relationship: 'sibling', note: 'Switch for single on/off control' },
+    {
+      component: "RadioGroup",
+      relationship: "alternative",
+      note: "RadioGroup for form-style single selection",
+    },
+    { component: "Tabs", relationship: "alternative", note: "Tabs for content panel switching" },
+    { component: "Switch", relationship: "sibling", note: "Switch 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.fragmented',
+      "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",
     ],
-    a11yRules: ['A11Y_GROUP_ROLE', 'A11Y_KEYBOARD_ACCESSIBLE'],
+    scenarioTags: ["forms.selection", "input.toggle", "control.fragmented"],
+    a11yRules: ["A11Y_GROUP_ROLE", "A11Y_KEYBOARD_ACCESSIBLE"],
   },
 
   variants: [
     {
-      name: 'Default',
-      description: 'Basic toggle group',
+      name: "Default",
+      description: "Basic toggle group",
       code: `<ToggleGroup value={value} onChange={setValue}>
   <ToggleGroup.Item value="left">Left</ToggleGroup.Item>
   <ToggleGroup.Item value="center">Center</ToggleGroup.Item>
@@ -202,8 +219,8 @@ export default defineFragment({
       render: () => <DefaultExample />,
     },
     {
-      name: 'Pills Variant',
-      description: 'Pill-shaped toggle buttons',
+      name: "Pills Variant",
+      description: "Pill-shaped toggle buttons",
       code: `<ToggleGroup value={value} onChange={setValue} variant="pills">
   <ToggleGroup.Item value="all">All</ToggleGroup.Item>
   <ToggleGroup.Item value="active">Active</ToggleGroup.Item>
@@ -212,8 +229,8 @@ export default defineFragment({
       render: () => <PillsExample />,
     },
     {
-      name: 'Outline Variant',
-      description: 'Outlined toggle buttons',
+      name: "Outline Variant",
+      description: "Outlined toggle buttons",
       code: `<ToggleGroup value={value} onChange={setValue} variant="outline">
   <ToggleGroup.Item value="day">Day</ToggleGroup.Item>
   <ToggleGroup.Item value="week">Week</ToggleGroup.Item>
@@ -222,8 +239,8 @@ export default defineFragment({
       render: () => <OutlineExample />,
     },
     {
-      name: 'Sizes',
-      description: 'Different size variants',
+      name: "Sizes",
+      description: "Different size variants",
       code: `<ToggleGroup value={value} onChange={setValue} size="sm">
   <ToggleGroup.Item value="a">Small</ToggleGroup.Item>
   <ToggleGroup.Item value="b">Size</ToggleGroup.Item>
@@ -235,8 +252,8 @@ export default defineFragment({
       render: () => <SizesExample />,
     },
     {
-      name: 'View Switcher',
-      description: 'Common pattern for switching between views',
+      name: "View Switcher",
+      description: "Common pattern for switching between views",
       code: `<ToggleGroup value={view} onChange={setView} size="sm">
   <ToggleGroup.Item value="grid"><GridIcon /></ToggleGroup.Item>
   <ToggleGroup.Item value="list"><ListIcon /></ToggleGroup.Item>
@@ -244,8 +261,8 @@ export default defineFragment({
       render: () => <ViewSwitcherExample />,
     },
     {
-      name: 'With Disabled Item',
-      description: 'Toggle group with a disabled option',
+      name: "With Disabled Item",
+      description: "Toggle group with a disabled option",
       code: `<ToggleGroup value={value} onChange={setValue}>
   <ToggleGroup.Item value="basic">Basic</ToggleGroup.Item>
   <ToggleGroup.Item value="pro">Pro</ToggleGroup.Item>

package/src/components/ToggleGroup/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import styles from './ToggleGroup.module.scss';
 import '../../styles/globals.scss';

package/src/components/Tooltip/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';
 import styles from './Tooltip.module.scss';

package/src/index.ts

@@ -1,5 +1,3 @@
-'use client';
-
 // Import CSS variables and base styles
 // This ensures --fui-* variables are available when using any component
 import './styles/globals.scss';
@@ -184,6 +182,9 @@ export {
 // Grid
 export { Grid, type GridProps, type GridItemProps, type ResponsiveColumns } from './components/Grid';
 
+// BentoGrid
+export { BentoGrid, type BentoGridProps, type BentoGridItemProps, type ResponsiveSpan } from './components/BentoGrid';
+
 // Separator
 export { Separator, type SeparatorProps } from './components/Separator';
 

package/src/styles/globals.scss

@@ -44,6 +44,11 @@ body {
   font-feature-settings: "rlig" 1, "calt" 1;
 }
 
+// Global link reset
+a {
+  text-decoration: none;
+}
+
 *::selection {
   background-color: var(--fui-color-success-bg, rgba(16, 163, 127, 0.1));
   color: var(--fui-text-primary, #171717);

package/src/tokens/_variables.scss

@@ -350,7 +350,7 @@ $fui-theme-toggle-lg-height: 34px !default;
 $fui-theme-toggle-lg-icon: 18px !default;
 
 // CodeBlock (light mode)
-$fui-code-bg: var(--fui-bg-elevated) !default;
+$fui-code-bg: #1e1e1e !default;
 $fui-code-header-bg: var(--fui-bg-elevated) !default;
 $fui-code-text: #d4d4d4 !default;
 $fui-code-text-muted: #6b7280 !default;