@fragments-sdk/ui 0.8.5 → 0.8.7

package/src/components/Select/index.tsx

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

package/src/components/Separator/Separator.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { Separator } from '.';
 
 export default defineFragment({

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { Sidebar, SidebarProvider, useSidebar } from '.';
 import { Button } from '../Button';
 
@@ -81,7 +81,7 @@ const mainContentStyle: React.CSSProperties = {
 };
 
 const demoContainerStyle: React.CSSProperties = {
-  height: '400px',
+  minHeight: '100vh',
   display: 'flex',
   width: '100%',
 };

package/src/components/Sidebar/index.tsx

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

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { Skeleton } from '.';
 
 export default defineFragment({

package/src/components/Slider/Slider.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { Slider } from '.';
 
 export default defineFragment({

package/src/components/Slider/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { Field } from '@base-ui/react/field';
 import { Slider as BaseSlider } from '@base-ui/react/slider';

package/src/components/Stack/Stack.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { Stack } from '.';
 import { Button } from '../Button';
 import { Badge } from '../Badge';

package/src/components/Table/Table.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { Table, createColumns } from '.';
 import { Badge } from '../Badge';
 

package/src/components/Table/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 // Import globals to ensure CSS variables are defined
 import '../../styles/globals.scss';

package/src/components/TableOfContents/TableOfContents.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { TableOfContents } from '.';
 
 export default defineFragment({

package/src/components/Tabs/Tabs.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { Tabs } from '.';
 
 export default defineFragment({

package/src/components/Text/Text.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { Text } from '.';
 
 export default defineFragment({

package/src/components/Textarea/Textarea.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { Textarea } from '.';
 
 export default defineFragment({

package/src/components/Theme/Theme.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { ThemeProvider, ThemeToggle, useTheme } from '.';
 
 // Demo component to show hook usage

package/src/components/ThinkingIndicator/ThinkingIndicator.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { ThinkingIndicator } from '.';
 
 export default defineFragment({

package/src/components/Toast/Toast.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { Toast, ToastProvider, useToast } from '.';
 
 // Demo component that triggers toasts

package/src/components/Toast/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import styles from './Toast.module.scss';
 // Import globals to ensure CSS variables are defined

package/src/components/Toggle/Toggle.fragment.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { Switch } from '.';
 
 // Stateful wrapper for interactive demos

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { ToggleGroup } from '.';
 
 function DefaultExample() {

package/src/components/Tooltip/Tooltip.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { Tooltip } from '.';
 import { Button } from '../Button';
 

package/src/components/VisuallyHidden/VisuallyHidden.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments/core';
+import { defineFragment } from '@fragments-sdk/cli/core';
 import { VisuallyHidden } from '.';
 
 export default defineFragment({

package/src/styles/globals.scss

@@ -1,14 +1,14 @@
 // ============================================
-// @fragments/ui Global Styles
+// @fragments-sdk/ui Global Styles
 // ============================================
 // Import this file once in your app to set up CSS custom properties
-// for theming. This enables automatic dark mode support.
+// for theming, plus base element resets for consistent rendering.
 //
 // Usage in your app:
-//   import '@fragments/ui/styles/globals.scss';
+//   import '@fragments-sdk/ui/styles/globals.scss';
 //
 // Or in SCSS:
-//   @use '@fragments/ui/styles/globals';
+//   @use '@fragments-sdk/ui/styles/globals';
 // ============================================
 
 @use '../tokens/variables' as *;
@@ -16,11 +16,70 @@
 // Output all CSS custom properties
 @include fui-css-variables;
 
+// ============================================
+// Box-Sizing Reset
+// ============================================
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+// ============================================
+// Base Element Resets
+// ============================================
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  margin: 0;
+  font-family: var(--fui-font-sans, Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+  background-color: var(--fui-bg-primary, #ffffff);
+  color: var(--fui-text-primary, #171717);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-feature-settings: "rlig" 1, "calt" 1;
+}
+
+*::selection {
+  background-color: var(--fui-color-success-bg, rgba(16, 163, 127, 0.1));
+  color: var(--fui-text-primary, #171717);
+}
+
+// ============================================
+// Scrollbar Styles
+// ============================================
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--fui-text-tertiary, #8a8a8a);
+  border-radius: 9999px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: var(--fui-text-secondary, #525252);
+}
+
+// Firefox scrollbar
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--fui-text-tertiary, #8a8a8a) transparent;
+}
+
 // ============================================
 // Accessibility: Reduced Motion
 // ============================================
-// Respects user's system preference for reduced motion.
-// Disables animations and transitions globally when enabled.
 
 @media (prefers-reduced-motion: reduce) {
   *,
@@ -36,7 +95,6 @@
 // ============================================
 // Accessibility: Focus Visible
 // ============================================
-// Ensures focus indicators are only shown for keyboard navigation
 
 :focus:not(:focus-visible) {
   outline: none;

package/src/tokens/_computed.scss

@@ -1,5 +1,5 @@
 // ============================================
-// @fragments/ui Computed Tokens
+// @fragments-sdk/ui Computed Tokens
 // ============================================
 //
 // This module imports seed values and derivation functions,

package/src/tokens/_density.scss

@@ -1,5 +1,5 @@
 // ============================================
-// @fragments/ui Density Scales
+// @fragments-sdk/ui Density Scales
 // ============================================
 //
 // Defines 3 density presets that control spacing and sizing.

package/src/tokens/_derive.scss

@@ -1,5 +1,5 @@
 // ============================================
-// @fragments/ui Token Derivation Functions
+// @fragments-sdk/ui Token Derivation Functions
 // ============================================
 //
 // Functions that derive complete token sets from seed values.

package/src/tokens/_index.scss

@@ -1,5 +1,5 @@
 // ============================================
-// @fragments/ui Design Tokens Index
+// @fragments-sdk/ui Design Tokens Index
 // ============================================
 //
 // This module exports the complete token system.

package/src/tokens/_mixins.scss

@@ -1,5 +1,5 @@
 // ============================================
-// @fragments/ui Shared Mixins
+// @fragments-sdk/ui Shared Mixins
 // ============================================
 
 @use 'variables' as *;

package/src/tokens/_palettes.scss

@@ -1,5 +1,5 @@
 // ============================================
-// @fragments/ui Elemental Palettes
+// @fragments-sdk/ui Elemental Palettes
 // ============================================
 //
 // Defines 5 elemental palettes with 11 shades (50-950).

package/src/tokens/_radius.scss

@@ -1,5 +1,5 @@
 // ============================================
-// @fragments/ui Radius Styles
+// @fragments-sdk/ui Radius Styles
 // ============================================
 //
 // Defines 5 radius style presets that control corner rounding.

package/src/tokens/_seeds.scss

@@ -1,5 +1,5 @@
 // ============================================
-// @fragments/ui Design Token Seeds
+// @fragments-sdk/ui Design Token Seeds
 // ============================================
 //
 // User-configurable seed tokens for the design system.

package/src/tokens/_variables.scss

@@ -1,5 +1,5 @@
 // ============================================
-// @fragments/ui Design Tokens
+// @fragments-sdk/ui Design Tokens
 // ============================================
 //
 // SEED-BASED DESIGN SYSTEM
@@ -21,7 +21,7 @@
 //
 //    Example:
 //      $fui-color-accent: #0066ff;
-//      @use '@fragments/ui/tokens';
+//      @use '@fragments-sdk/ui/tokens';
 //
 // Or use CSS custom properties for runtime theming.
 // ============================================

package/src/utils/a11y.tsx

@@ -143,11 +143,7 @@ export function useAnnounce(): {
  * ```
  */
 export function usePrefersReducedMotion(): boolean {
-  const [prefersReducedMotion, setPrefersReducedMotion] = React.useState(() => {
-    // SSR-safe default
-    if (typeof window === 'undefined') return false;
-    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-  });
+  const [prefersReducedMotion, setPrefersReducedMotion] = React.useState(false);
 
   React.useEffect(() => {
     const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
@@ -184,11 +180,7 @@ export function usePrefersReducedMotion(): boolean {
  * ```
  */
 export function usePrefersContrast(): boolean {
-  const [prefersContrast, setPrefersContrast] = React.useState(() => {
-    // SSR-safe default
-    if (typeof window === 'undefined') return false;
-    return window.matchMedia('(prefers-contrast: more)').matches;
-  });
+  const [prefersContrast, setPrefersContrast] = React.useState(false);
 
   React.useEffect(() => {
     const mediaQuery = window.matchMedia('(prefers-contrast: more)');