@fragments-sdk/ui 0.9.0 → 0.9.2

package/src/components/Message/index.tsx

@@ -2,7 +2,6 @@
 
 import * as React from 'react';
 import styles from './Message.module.scss';
-import '../../styles/globals.scss';
 import { Markdown } from '../Markdown';
 
 // ============================================

package/src/components/NavigationMenu/index.tsx

@@ -15,8 +15,6 @@ import {
 } from './NavigationMenuContext';
 import { useNavigationMenu } from './useNavigationMenu';
 import styles from './NavigationMenu.module.scss';
-// Import globals to ensure CSS variables are defined
-import '../../styles/globals.scss';
 
 // ============================================
 // Types

package/src/components/Pagination/index.tsx

@@ -2,7 +2,6 @@
 
 import * as React from 'react';
 import styles from './Pagination.module.scss';
-import '../../styles/globals.scss';
 
 // ============================================
 // Types

package/src/components/Popover/index.tsx

@@ -3,8 +3,6 @@
 import * as React from 'react';
 import { Popover as BasePopover } from '@base-ui/react/popover';
 import styles from './Popover.module.scss';
-// Import globals to ensure CSS variables are defined
-import '../../styles/globals.scss';
 
 // ============================================
 // Types

package/src/components/Progress/index.tsx

@@ -3,8 +3,6 @@
 import * as React from 'react';
 import { Progress as BaseProgress } from '@base-ui/react/progress';
 import styles from './Progress.module.scss';
-// Import globals to ensure CSS variables are defined
-import '../../styles/globals.scss';
 
 // ============================================
 // Types

package/src/components/Prompt/index.tsx

@@ -2,7 +2,6 @@
 
 import * as React from 'react';
 import styles from './Prompt.module.scss';
-import '../../styles/globals.scss';
 import { Loading } from '../Loading';
 
 // ============================================

package/src/components/RadioGroup/index.tsx

@@ -4,8 +4,6 @@ import * as React from 'react';
 import { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group';
 import { Radio as BaseRadio } from '@base-ui/react/radio';
 import styles from './RadioGroup.module.scss';
-// Import globals to ensure CSS variables are defined
-import '../../styles/globals.scss';
 
 // ============================================
 // Types

package/src/components/ScrollArea/index.tsx

@@ -2,7 +2,6 @@
 
 import * as React from 'react';
 import styles from './ScrollArea.module.scss';
-import '../../styles/globals.scss';
 
 // ============================================
 // Types

package/src/components/Select/index.tsx

@@ -3,8 +3,6 @@
 import * as React from 'react';
 import { Select as BaseSelect } from '@base-ui/react/select';
 import styles from './Select.module.scss';
-// Import globals to ensure CSS variables are defined
-import '../../styles/globals.scss';
 
 // ============================================
 // Types

package/src/components/Separator/index.tsx

@@ -3,8 +3,6 @@
 import * as React from 'react';
 import { Separator as BaseSeparator } from '@base-ui/react/separator';
 import styles from './Separator.module.scss';
-// Import globals to ensure CSS variables are defined
-import '../../styles/globals.scss';
 
 // ============================================
 // Types

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

@@ -86,44 +86,56 @@ const demoContainerStyle: React.CSSProperties = {
   width: '100%',
 };
 
+// Isolate preview sidebar state from any parent SidebarProvider (e.g., docs app's AppShell)
+function PreviewIsolation({ children }: { children: React.ReactNode }) {
+  return (
+    <SidebarProvider enableKeyboardShortcut={false}>
+      {children}
+    </SidebarProvider>
+  );
+}
+
 // Stateful demo for collapsed state
 function CollapsedDemo() {
   const [collapsed, setCollapsed] = useState(true);
   return (
-    <div style={demoContainerStyle}>
-      <Sidebar collapsed={collapsed} onCollapsedChange={setCollapsed}>
-        <Sidebar.Header collapsedContent={<LogoIcon size={32} />}>
-          <LogoIcon size={32} />
-          <span style={{ fontWeight: 600, fontSize: '16px' }}>Acme App</span>
-        </Sidebar.Header>
-        <Sidebar.Nav>
-          <Sidebar.Section>
-            <Sidebar.Item icon={<HomeIcon />} active>Dashboard</Sidebar.Item>
-            <Sidebar.Item icon={<ChartIcon />}>Analytics</Sidebar.Item>
-            <Sidebar.Item icon={<UsersIcon />}>Team</Sidebar.Item>
-            <Sidebar.Item icon={<FolderIcon />}>Projects</Sidebar.Item>
-          </Sidebar.Section>
-          <Sidebar.Section label="Settings">
-            <Sidebar.Item icon={<GearIcon />}>Preferences</Sidebar.Item>
-            <Sidebar.Item icon={<HelpIcon />}>Help</Sidebar.Item>
-          </Sidebar.Section>
-        </Sidebar.Nav>
-        <Sidebar.Footer>
-          <Sidebar.CollapseToggle />
-        </Sidebar.Footer>
-      </Sidebar>
-      <main style={mainContentStyle}>
-        Hover over icons to see tooltips. Click toggle to expand.
-      </main>
-    </div>
+    <SidebarProvider collapsed={collapsed} onCollapsedChange={setCollapsed} enableKeyboardShortcut={false}>
+      <div style={demoContainerStyle}>
+        <Sidebar>
+          <Sidebar.Header collapsedContent={<LogoIcon size={32} />}>
+            <LogoIcon size={32} />
+            <span style={{ fontWeight: 600, fontSize: '16px' }}>Acme App</span>
+          </Sidebar.Header>
+          <Sidebar.Nav>
+            <Sidebar.Section>
+              <Sidebar.Item icon={<HomeIcon />} active>Dashboard</Sidebar.Item>
+              <Sidebar.Item icon={<ChartIcon />}>Analytics</Sidebar.Item>
+              <Sidebar.Item icon={<UsersIcon />}>Team</Sidebar.Item>
+              <Sidebar.Item icon={<FolderIcon />}>Projects</Sidebar.Item>
+            </Sidebar.Section>
+            <Sidebar.Section label="Settings">
+              <Sidebar.Item icon={<GearIcon />}>Preferences</Sidebar.Item>
+              <Sidebar.Item icon={<HelpIcon />}>Help</Sidebar.Item>
+            </Sidebar.Section>
+          </Sidebar.Nav>
+          <Sidebar.Footer>
+            <Sidebar.CollapseToggle />
+          </Sidebar.Footer>
+        </Sidebar>
+        <main style={mainContentStyle}>
+          Hover over icons to see tooltips. Click toggle to expand.
+        </main>
+      </div>
+    </SidebarProvider>
   );
 }
 
 // Demo for submenu expansion using uncontrolled defaultExpanded
 function SubmenuDemo() {
   return (
-    <div style={demoContainerStyle}>
-      <Sidebar>
+    <PreviewIsolation>
+      <div style={demoContainerStyle}>
+        <Sidebar>
         <Sidebar.Header collapsedContent={<LogoIcon size={32} />}>
           <LogoIcon size={32} />
           <span style={{ fontWeight: 600, fontSize: '16px' }}>Acme App</span>
@@ -156,6 +168,7 @@ function SubmenuDemo() {
         Click on "Projects" or "Team" to toggle their submenus
       </main>
     </div>
+    </PreviewIsolation>
   );
 }
 
@@ -182,7 +195,7 @@ function ExternalTriggerContent() {
 function ProviderDemo() {
   return (
     <div style={demoContainerStyle}>
-      <SidebarProvider>
+      <SidebarProvider enableKeyboardShortcut={false}>
         <Sidebar>
           <Sidebar.Header collapsedContent={<LogoIcon size={32} />}>
             <LogoIcon size={32} />
@@ -206,8 +219,9 @@ function ProviderDemo() {
 // Demo for asChild pattern with mock Link
 function AsChildDemo() {
   return (
-    <div style={demoContainerStyle}>
-      <Sidebar>
+    <PreviewIsolation>
+      <div style={demoContainerStyle}>
+        <Sidebar>
         <Sidebar.Header collapsedContent={<LogoIcon size={32} />}>
           <LogoIcon size={32} />
           <span style={{ fontWeight: 600, fontSize: '16px' }}>Acme App</span>
@@ -236,14 +250,16 @@ function AsChildDemo() {
         Items rendered as Link components using asChild pattern
       </main>
     </div>
+    </PreviewIsolation>
   );
 }
 
 // Demo for section with action button
 function SectionActionDemo() {
   return (
-    <div style={demoContainerStyle}>
-      <Sidebar>
+    <PreviewIsolation>
+      <div style={demoContainerStyle}>
+        <Sidebar>
         <Sidebar.Header collapsedContent={<LogoIcon size={32} />}>
           <LogoIcon size={32} />
           <span style={{ fontWeight: 600, fontSize: '16px' }}>Acme App</span>
@@ -274,6 +290,7 @@ function SectionActionDemo() {
         Section header has an "Add" action button
       </main>
     </div>
+    </PreviewIsolation>
   );
 }
 
@@ -282,8 +299,9 @@ function SkeletonDemo() {
   const [loading, setLoading] = useState(true);
 
   return (
-    <div style={demoContainerStyle}>
-      <Sidebar>
+    <PreviewIsolation>
+      <div style={demoContainerStyle}>
+        <Sidebar>
         <Sidebar.Header collapsedContent={<LogoIcon size={32} />}>
           <LogoIcon size={32} />
           <span style={{ fontWeight: 600, fontSize: '16px' }}>Acme App</span>
@@ -317,6 +335,7 @@ function SkeletonDemo() {
         </div>
       </main>
     </div>
+    </PreviewIsolation>
   );
 }
 
@@ -324,8 +343,9 @@ function SkeletonDemo() {
 function OffcanvasDemo() {
   const [collapsed, setCollapsed] = useState(true);
   return (
-    <div style={demoContainerStyle}>
-      <Sidebar collapsed={collapsed} onCollapsedChange={setCollapsed} collapsible="offcanvas">
+    <SidebarProvider collapsed={collapsed} onCollapsedChange={setCollapsed} collapsible="offcanvas" enableKeyboardShortcut={false}>
+      <div style={demoContainerStyle}>
+        <Sidebar>
         <Sidebar.Header collapsedContent={<LogoIcon size={32} />}>
           <LogoIcon size={32} />
           <span style={{ fontWeight: 600, fontSize: '16px' }}>Acme App</span>
@@ -346,6 +366,7 @@ function OffcanvasDemo() {
         Offcanvas mode hides sidebar completely. Toggle stays visible to re-open.
       </main>
     </div>
+    </SidebarProvider>
   );
 }
 
@@ -354,8 +375,9 @@ function RailDemo() {
   const [collapsed, setCollapsed] = useState(false);
 
   return (
-    <div style={{ ...demoContainerStyle, position: 'relative' }}>
-      <Sidebar collapsed={collapsed} onCollapsedChange={setCollapsed}>
+    <SidebarProvider collapsed={collapsed} onCollapsedChange={setCollapsed} enableKeyboardShortcut={false}>
+      <div style={{ ...demoContainerStyle, position: 'relative' }}>
+        <Sidebar>
         <Sidebar.Header collapsedContent={<LogoIcon size={32} />}>
           <LogoIcon size={32} />
           <span style={{ fontWeight: 600, fontSize: '16px' }}>Acme App</span>
@@ -380,6 +402,7 @@ function RailDemo() {
         </div>
       </main>
     </div>
+    </SidebarProvider>
   );
 }
 
@@ -544,32 +567,34 @@ export default defineFragment({
   </Sidebar.Footer>
 </Sidebar>`,
       render: () => (
-        <div style={demoContainerStyle}>
-          <Sidebar>
-            <Sidebar.Header collapsedContent={<LogoIcon size={32} />}>
-              <LogoIcon size={32} />
-              <span style={{ fontWeight: 600, fontSize: '16px' }}>Acme App</span>
-            </Sidebar.Header>
-            <Sidebar.Nav>
-              <Sidebar.Section>
-                <Sidebar.Item icon={<HomeIcon />} active>Dashboard</Sidebar.Item>
-                <Sidebar.Item icon={<ChartIcon />}>Analytics</Sidebar.Item>
-                <Sidebar.Item icon={<UsersIcon />}>Team</Sidebar.Item>
-                <Sidebar.Item icon={<FolderIcon />}>Projects</Sidebar.Item>
-              </Sidebar.Section>
-              <Sidebar.Section label="Settings">
-                <Sidebar.Item icon={<GearIcon />}>Preferences</Sidebar.Item>
-                <Sidebar.Item icon={<HelpIcon />}>Help</Sidebar.Item>
-              </Sidebar.Section>
-            </Sidebar.Nav>
-            <Sidebar.Footer>
-              <Sidebar.CollapseToggle />
-            </Sidebar.Footer>
-          </Sidebar>
-          <main style={mainContentStyle}>
-            Dashboard content goes here
-          </main>
-        </div>
+        <PreviewIsolation>
+          <div style={demoContainerStyle}>
+            <Sidebar>
+              <Sidebar.Header collapsedContent={<LogoIcon size={32} />}>
+                <LogoIcon size={32} />
+                <span style={{ fontWeight: 600, fontSize: '16px' }}>Acme App</span>
+              </Sidebar.Header>
+              <Sidebar.Nav>
+                <Sidebar.Section>
+                  <Sidebar.Item icon={<HomeIcon />} active>Dashboard</Sidebar.Item>
+                  <Sidebar.Item icon={<ChartIcon />}>Analytics</Sidebar.Item>
+                  <Sidebar.Item icon={<UsersIcon />}>Team</Sidebar.Item>
+                  <Sidebar.Item icon={<FolderIcon />}>Projects</Sidebar.Item>
+                </Sidebar.Section>
+                <Sidebar.Section label="Settings">
+                  <Sidebar.Item icon={<GearIcon />}>Preferences</Sidebar.Item>
+                  <Sidebar.Item icon={<HelpIcon />}>Help</Sidebar.Item>
+                </Sidebar.Section>
+              </Sidebar.Nav>
+              <Sidebar.Footer>
+                <Sidebar.CollapseToggle />
+              </Sidebar.Footer>
+            </Sidebar>
+            <main style={mainContentStyle}>
+              Dashboard content goes here
+            </main>
+          </div>
+        </PreviewIsolation>
       ),
     },
     {
@@ -612,28 +637,30 @@ export default defineFragment({
   </Sidebar.Nav>
 </Sidebar>`,
       render: () => (
-        <div style={demoContainerStyle}>
-          <Sidebar>
-            <Sidebar.Header collapsedContent={<LogoIcon size={32} />}>
-              <LogoIcon size={32} />
-              <span style={{ fontWeight: 600, fontSize: '16px' }}>Acme App</span>
-            </Sidebar.Header>
-            <Sidebar.Nav>
-              <Sidebar.Section>
-                <Sidebar.Item icon={<HomeIcon />} active>Dashboard</Sidebar.Item>
-                <Sidebar.Item icon={<ChartIcon />} badge="3">Analytics</Sidebar.Item>
-                <Sidebar.Item icon={<UsersIcon />} badge="12">Team</Sidebar.Item>
-                <Sidebar.Item icon={<FolderIcon />}>Projects</Sidebar.Item>
-              </Sidebar.Section>
-            </Sidebar.Nav>
-            <Sidebar.Footer>
-              <Sidebar.CollapseToggle />
-            </Sidebar.Footer>
-          </Sidebar>
-          <main style={mainContentStyle}>
-            Badges indicate unread items or notifications
-          </main>
-        </div>
+        <PreviewIsolation>
+          <div style={demoContainerStyle}>
+            <Sidebar>
+              <Sidebar.Header collapsedContent={<LogoIcon size={32} />}>
+                <LogoIcon size={32} />
+                <span style={{ fontWeight: 600, fontSize: '16px' }}>Acme App</span>
+              </Sidebar.Header>
+              <Sidebar.Nav>
+                <Sidebar.Section>
+                  <Sidebar.Item icon={<HomeIcon />} active>Dashboard</Sidebar.Item>
+                  <Sidebar.Item icon={<ChartIcon />} badge="3">Analytics</Sidebar.Item>
+                  <Sidebar.Item icon={<UsersIcon />} badge="12">Team</Sidebar.Item>
+                  <Sidebar.Item icon={<FolderIcon />}>Projects</Sidebar.Item>
+                </Sidebar.Section>
+              </Sidebar.Nav>
+              <Sidebar.Footer>
+                <Sidebar.CollapseToggle />
+              </Sidebar.Footer>
+            </Sidebar>
+            <main style={mainContentStyle}>
+              Badges indicate unread items or notifications
+            </main>
+          </div>
+        </PreviewIsolation>
       ),
     },
     {
@@ -683,28 +710,30 @@ export default defineFragment({
   </Sidebar.Nav>
 </Sidebar>`,
       render: () => (
-        <div style={demoContainerStyle}>
-          <Sidebar>
-            <Sidebar.Header collapsedContent={<LogoIcon size={32} />}>
-              <LogoIcon size={32} />
-              <span style={{ fontWeight: 600, fontSize: '16px' }}>Acme App</span>
-            </Sidebar.Header>
-            <Sidebar.Nav>
-              <Sidebar.Section>
-                <Sidebar.Item icon={<HomeIcon />} active>Dashboard</Sidebar.Item>
-                <Sidebar.Item icon={<ChartIcon />}>Analytics</Sidebar.Item>
-                <Sidebar.Item icon={<UsersIcon />} disabled>Team (Coming Soon)</Sidebar.Item>
-                <Sidebar.Item icon={<FolderIcon />} disabled>Projects (Upgrade)</Sidebar.Item>
-              </Sidebar.Section>
-            </Sidebar.Nav>
-            <Sidebar.Footer>
-              <Sidebar.CollapseToggle />
-            </Sidebar.Footer>
-          </Sidebar>
-          <main style={mainContentStyle}>
-            Disabled items cannot be clicked
-          </main>
-        </div>
+        <PreviewIsolation>
+          <div style={demoContainerStyle}>
+            <Sidebar>
+              <Sidebar.Header collapsedContent={<LogoIcon size={32} />}>
+                <LogoIcon size={32} />
+                <span style={{ fontWeight: 600, fontSize: '16px' }}>Acme App</span>
+              </Sidebar.Header>
+              <Sidebar.Nav>
+                <Sidebar.Section>
+                  <Sidebar.Item icon={<HomeIcon />} active>Dashboard</Sidebar.Item>
+                  <Sidebar.Item icon={<ChartIcon />}>Analytics</Sidebar.Item>
+                  <Sidebar.Item icon={<UsersIcon />} disabled>Team (Coming Soon)</Sidebar.Item>
+                  <Sidebar.Item icon={<FolderIcon />} disabled>Projects (Upgrade)</Sidebar.Item>
+                </Sidebar.Section>
+              </Sidebar.Nav>
+              <Sidebar.Footer>
+                <Sidebar.CollapseToggle />
+              </Sidebar.Footer>
+            </Sidebar>
+            <main style={mainContentStyle}>
+              Disabled items cannot be clicked
+            </main>
+          </div>
+        </PreviewIsolation>
       ),
     },
     {

package/src/components/Sidebar/index.tsx

@@ -7,8 +7,6 @@ import { Skeleton } from '../Skeleton';
 import { Collapsible } from '../Collapsible';
 import { ScrollArea } from '../ScrollArea';
 import { useFocusTrap } from '../../utils/a11y';
-// Import globals to ensure CSS variables are defined
-import '../../styles/globals.scss';
 
 // ============================================
 // Types

package/src/components/Skeleton/index.tsx

@@ -1,7 +1,5 @@
 import * as React from 'react';
 import styles from './Skeleton.module.scss';
-// Import globals to ensure CSS variables are defined
-import '../../styles/globals.scss';
 
 // ============================================
 // Types

package/src/components/Slider/index.tsx

@@ -4,7 +4,6 @@ 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;

package/src/components/Stack/index.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import styles from './Stack.module.scss';
-import '../../styles/globals.scss';
 
 type Direction = 'row' | 'column';
 type Gap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';

package/src/components/TableOfContents/index.tsx

@@ -3,7 +3,6 @@
 import * as React from 'react';
 import styles from './TableOfContents.module.scss';
 import { Text } from '../Text';
-import '../../styles/globals.scss';
 
 // ============================================
 // Types

package/src/components/Tabs/index.tsx

@@ -3,8 +3,6 @@
 import * as React from 'react';
 import { Tabs as BaseTabs } from '@base-ui/react/tabs';
 import styles from './Tabs.module.scss';
-// Import globals to ensure CSS variables are defined
-import '../../styles/globals.scss';
 
 // ============================================
 // Types

package/src/components/Text/index.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import styles from './Text.module.scss';
-import '../../styles/globals.scss';
 
 export interface TextProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color'> {
   children: React.ReactNode;

package/src/components/Textarea/index.tsx

@@ -1,7 +1,5 @@
 import * as React from 'react';
 import styles from './Textarea.module.scss';
-// Import globals to ensure CSS variables are defined
-import '../../styles/globals.scss';
 
 export interface TextareaProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onBlur' | 'defaultValue'> {
   /** Controlled value */

package/src/components/Theme/index.tsx

@@ -2,8 +2,6 @@
 
 import * as React from 'react';
 import styles from './ThemeToggle.module.scss';
-// Import globals to ensure CSS variables are defined
-import '../../styles/globals.scss';
 
 // ============================================
 // Types
@@ -15,6 +13,8 @@ export interface ThemeProviderProps {
   children: React.ReactNode;
   /** Default theme mode for uncontrolled usage */
   defaultMode?: ThemeMode;
+  /** Alias for defaultMode (more intuitive naming) */
+  defaultTheme?: ThemeMode;
   /** Controlled theme mode */
   mode?: ThemeMode;
   /** Callback when mode changes */
@@ -174,7 +174,8 @@ function MonitorIcon({ size = 20 }: { size?: number }) {
  */
 function ThemeProvider({
   children,
-  defaultMode = 'system',
+  defaultMode,
+  defaultTheme,
   mode: controlledMode,
   onModeChange,
   storageKey = 'fui-theme',
@@ -182,8 +183,11 @@ function ThemeProvider({
 }: ThemeProviderProps) {
   const systemPreference = useSystemPreference();
 
-  // Initialize with defaultMode, then hydrate from localStorage in useEffect
-  const [internalMode, setInternalMode] = React.useState<ThemeMode>(defaultMode);
+  // Resolve default: defaultMode takes precedence, then defaultTheme, then 'system'
+  const resolvedDefault = defaultMode ?? defaultTheme ?? 'system';
+
+  // Initialize with resolvedDefault, then hydrate from localStorage in useEffect
+  const [internalMode, setInternalMode] = React.useState<ThemeMode>(resolvedDefault);
   const [mounted, setMounted] = React.useState(false);
 
   // Determine if controlled

package/src/components/ThinkingIndicator/index.tsx

@@ -2,7 +2,6 @@
 
 import * as React from 'react';
 import styles from './ThinkingIndicator.module.scss';
-import '../../styles/globals.scss';
 import { Loading } from '../Loading';
 
 // ============================================

package/src/components/Toast/index.tsx

@@ -2,8 +2,6 @@
 
 import * as React from 'react';
 import styles from './Toast.module.scss';
-// Import globals to ensure CSS variables are defined
-import '../../styles/globals.scss';
 
 // ============================================
 // Types

package/src/components/Toggle/index.tsx

@@ -3,8 +3,6 @@
 import * as React from 'react';
 import { Switch as BaseSwitch } from '@base-ui/react/switch';
 import styles from './Toggle.module.scss';
-// Import globals to ensure CSS variables are defined
-import '../../styles/globals.scss';
 
 export interface SwitchProps {
   checked?: boolean;

package/src/components/ToggleGroup/ToggleGroup.module.scss

@@ -132,3 +132,11 @@
     font-size: var(--fui-font-size-sm, $fui-font-size-sm);
   }
 }
+
+.size-lg {
+  .item {
+    min-height: 40px;
+    padding: 0 var(--fui-space-4, $fui-space-4);
+    font-size: var(--fui-font-size-base, $fui-font-size-base);
+  }
+}

package/src/components/ToggleGroup/index.tsx

@@ -2,7 +2,6 @@
 
 import * as React from 'react';
 import styles from './ToggleGroup.module.scss';
-import '../../styles/globals.scss';
 
 // ============================================
 // Types
@@ -18,7 +17,7 @@ export interface ToggleGroupProps extends Omit<React.HTMLAttributes<HTMLDivEleme
   /** Visual variant */
   variant?: 'default' | 'pills' | 'outline';
   /** Size */
-  size?: 'sm' | 'md';
+  size?: 'sm' | 'md' | 'lg';
   /** Gap between items (for pills/outline variants) */
   gap?: 'none' | 'xs' | 'sm';
 }
@@ -40,7 +39,7 @@ interface ToggleGroupContextValue {
   value: string;
   onChange: (value: string) => void;
   variant: 'default' | 'pills' | 'outline';
-  size: 'sm' | 'md';
+  size: 'sm' | 'md' | 'lg';
   hasFocusableSelection: boolean;
   firstEnabledValue: string | null;
 }