@fragments-sdk/ui 0.8.6 → 0.8.7

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/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.
 // ============================================