@fragments-sdk/ui 0.9.4 → 0.9.6

package/src/tokens/_density.scss

@@ -7,8 +7,8 @@
 //
 // ============================================
 
-@use 'sass:math';
-@use 'sass:map';
+@use "sass:math";
+@use "sass:map";
 
 // --------------------------------------------
 // Density Definitions
@@ -21,51 +21,69 @@ $density-compact: (
   base-unit: 6px,
   base-font-size: 14px,
   // Button heights (more compact)
-  button-height-sm: 24px,   // ~4 units
-  button-height-md: 30px,   // 5 units
-  button-height-lg: 36px,   // 6 units
+  button-height-sm: 24px,
+  // ~4 units
+  button-height-md: 30px,
+  // 5 units
+  button-height-lg: 36px,
+  // 6 units
   // Input height
-  input-height: 32px,       // ~5.3 units
-  input-height-sm: 24px,    // 4 units
-  input-height-lg: 36px,    // 6 units
+  input-height: 32px,
+  // ~5.3 units
+  input-height-sm: 24px,
+  // 4 units
+  input-height-lg: 36px,
+  // 6 units
   // Touch targets (minimum for accessibility)
   touch-sm: 24px,
   touch-md: 30px,
-  touch-lg: 36px
+  touch-lg: 36px,
 );
 
 $density-default: (
   base-unit: 7px,
   base-font-size: 14px,
   // Button heights (current values)
-  button-height-sm: 28px,   // 4 units
-  button-height-md: 36px,   // ~5 units
-  button-height-lg: 44px,   // ~6 units
+  button-height-sm: 28px,
+  // 4 units
+  button-height-md: 36px,
+  // ~5 units
+  button-height-lg: 44px,
+  // ~6 units
   // Input height
-  input-height: 40px,       // ~6 units
-  input-height-sm: 28px,    // 4 units
-  input-height-lg: 44px,    // ~6 units
+  input-height: 40px,
+  // ~6 units
+  input-height-sm: 28px,
+  // 4 units
+  input-height-lg: 44px,
+  // ~6 units
   // Touch targets
   touch-sm: 24px,
   touch-md: 32px,
-  touch-lg: 44px
+  touch-lg: 44px,
 );
 
 $density-relaxed: (
   base-unit: 8px,
   base-font-size: 14px,
   // Button heights (more spacious)
-  button-height-sm: 32px,   // 4 units
-  button-height-md: 40px,   // 5 units
-  button-height-lg: 48px,   // 6 units
+  button-height-sm: 32px,
+  // 4 units
+  button-height-md: 40px,
+  // 5 units
+  button-height-lg: 48px,
+  // 6 units
   // Input height
-  input-height: 44px,       // ~5.5 units
-  input-height-sm: 32px,    // 4 units
-  input-height-lg: 48px,    // 6 units
+  input-height: 44px,
+  // ~5.5 units
+  input-height-sm: 32px,
+  // 4 units
+  input-height-lg: 48px,
+  // 6 units
   // Touch targets
   touch-sm: 32px,
   touch-md: 40px,
-  touch-lg: 48px
+  touch-lg: 48px,
 );
 
 // --------------------------------------------
@@ -74,7 +92,7 @@ $density-relaxed: (
 $densities: (
   "compact": $density-compact,
   "default": $density-default,
-  "relaxed": $density-relaxed
+  "relaxed": $density-relaxed,
 );
 
 // --------------------------------------------
@@ -119,19 +137,29 @@ $densities: (
   @return (
     // Micro spacing (pixel-precise for tiny alignments)
     px: 1px,
-    0-5: $unit-rem * 0.3,     // ~2px for 7px base
-    0-75: $unit-rem * 0.43,   // ~3px for 7px base
+    0-5: $unit-rem * 0.3,
+    // ~2px for 7px base
+    0-75: $unit-rem * 0.43,
 
+    // ~3px for 7px base
     // Standard spacing scale
-    1: $unit-rem,             // 1 unit
-    2: $unit-rem * 2,         // 2 units
-    3: $unit-rem * 3,         // 3 units
-    4: $unit-rem * 4,         // 4 units
-    5: $unit-rem * 5,         // 5 units
-    6: $unit-rem * 6,         // 6 units
-    8: $unit-rem * 8,         // 8 units
-    10: $unit-rem * 10,       // 10 units
-    12: $unit-rem * 12        // 12 units
+    1: $unit-rem,
+    // 1 unit
+    2: $unit-rem * 2,
+    // 2 units
+    3: $unit-rem * 3,
+    // 3 units
+    4: $unit-rem * 4,
+    // 4 units
+    5: $unit-rem * 5,
+    // 5 units
+    6: $unit-rem * 6,
+    // 6 units
+    8: $unit-rem * 8,
+    // 8 units
+    10: $unit-rem * 10,
+    // 10 units
+    12: $unit-rem * 12 // 12 units
   );
 }
 
@@ -145,23 +173,35 @@ $densities: (
 
   @return (
     // Container padding: Cards, Dialogs, Popovers
-    container-sm: $unit-rem * 3,   // 3 units
-    container-md: $unit-rem * 4,   // 4 units
-    container-lg: $unit-rem * 6,   // 6 units
+    container-sm: $unit-rem * 3,
+    // 3 units
+    container-md: $unit-rem * 4,
+    // 4 units
+    container-lg: $unit-rem * 6,
 
+    // 6 units
     // Inline padding: Alerts, Toasts
-    inline-sm: $unit-rem * 2,      // 2 units
-    inline-md: $unit-rem * 3,      // 3 units
-    inline-lg: $unit-rem * 4,      // 4 units
-
+    inline-xs: $unit-rem * 1,
+    // 1 unit
+    inline-sm: $unit-rem * 2,
+    // 2 units
+    inline-md: $unit-rem * 3,
+    // 3 units
+    inline-lg: $unit-rem * 4,
+
+    // 4 units
     // Container padding (extended)
-    container-xl: $unit-rem * 8,   // 8 units
+    container-xl: $unit-rem * 8,
 
+    // 8 units
     // Item padding: Accordion, Tabs, Menu items
-    item-xs: $unit-rem * 1,        // 1 unit
-    item-sm: $unit-rem * 2,        // 2 units
-    item-md: $unit-rem * 3,        // 3 units
-    item-lg: $unit-rem * 4         // 4 units
+    item-xs: $unit-rem * 1,
+    // 1 unit
+    item-sm: $unit-rem * 2,
+    // 2 units
+    item-md: $unit-rem * 3,
+    // 3 units
+    item-lg: $unit-rem * 4 // 4 units
   );
 }
 

package/src/tokens/_variables.scss

@@ -22,7 +22,7 @@
 // ============================================
 
 // Import computed values from seed system
-@use 'computed' as computed;
+@use "computed" as computed;
 
 // --------------------------------------------
 // Base Configuration
@@ -43,17 +43,27 @@ $fui-base-unit: computed.$computed-base-unit !default;
 // --------------------------------------------
 // Typography
 // --------------------------------------------
-$fui-font-sans: 'Geist Sans', 'Geist', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !default;
-$fui-font-mono: 'Geist Mono', 'SF Mono', SFMono-Regular, ui-monospace, 'Cascadia Code', Menlo, monospace !default;
+$fui-font-sans:
+  "Geist Sans",
+  "Geist",
+  Inter,
+  system-ui,
+  -apple-system,
+  BlinkMacSystemFont,
+  "Segoe UI",
+  Roboto,
+  sans-serif !default;
+$fui-font-mono:
+  "Geist Mono", "SF Mono", SFMono-Regular, ui-monospace, "Cascadia Code", Menlo, monospace !default;
 
 // Font sizes (rem based on 14px root)
-$fui-font-size-2xs: 0.714rem !default;  // 10px
-$fui-font-size-xs: 0.857rem !default;   // 12px
-$fui-font-size-sm: 1rem !default;       // 14px (base)
+$fui-font-size-2xs: 0.714rem !default; // 10px
+$fui-font-size-xs: 0.857rem !default; // 12px
+$fui-font-size-sm: 1rem !default; // 14px (base)
 $fui-font-size-base: 1.143rem !default; // 16px
-$fui-font-size-lg: 1.286rem !default;   // 18px
-$fui-font-size-xl: 1.714rem !default;   // 24px
-$fui-font-size-2xl: 2.143rem !default;  // 30px
+$fui-font-size-lg: 1.286rem !default; // 18px
+$fui-font-size-xl: 1.714rem !default; // 24px
+$fui-font-size-2xl: 2.143rem !default; // 30px
 
 $fui-font-weight-normal: 400 !default;
 $fui-font-weight-medium: 500 !default;
@@ -92,6 +102,7 @@ $fui-padding-container-lg: computed.$computed-padding-container-lg !default;
 $fui-padding-container-xl: computed.$computed-padding-container-xl !default;
 
 // Inline padding: Alerts, Toasts
+$fui-padding-inline-xs: computed.$computed-padding-inline-xs !default;
 $fui-padding-inline-sm: computed.$computed-padding-inline-sm !default;
 $fui-padding-inline-md: computed.$computed-padding-inline-md !default;
 $fui-padding-inline-lg: computed.$computed-padding-inline-lg !default;
@@ -270,37 +281,37 @@ $fui-target-size-min: 1.714rem !default; // 24px
 $fui-target-size-comfortable: $fui-touch-md !default;
 
 // Toggle/Switch
-$fui-toggle-width-sm: 2.286rem !default;   // 32px
-$fui-toggle-width-md: 2.857rem !default;   // 40px
+$fui-toggle-width-sm: 2.286rem !default; // 32px
+$fui-toggle-width-md: 2.857rem !default; // 40px
 $fui-toggle-height-sm: $fui-target-size-min !default; // 24px
-$fui-toggle-height-md: 2rem !default;      // 28px
-$fui-toggle-thumb-sm: 1rem !default;       // 14px
-$fui-toggle-thumb-md: 1.286rem !default;   // 18px
-$fui-toggle-thumb-offset: 2px !default;    // Thumb inset from track edge
+$fui-toggle-height-md: 2rem !default; // 28px
+$fui-toggle-thumb-sm: 1rem !default; // 14px
+$fui-toggle-thumb-md: 1.286rem !default; // 18px
+$fui-toggle-thumb-offset: 2px !default; // Thumb inset from track edge
 
 // Badge
 $fui-badge-dot-sm: 5px !default;
 $fui-badge-dot-md: 6px !default;
 
 // Icon sizes (standard conventions)
-$fui-icon-sm: 1rem !default;        // 14px (2 units)
-$fui-icon-md: 1.143rem !default;    // 16px (standard small icon)
-$fui-icon-lg: 1.429rem !default;    // 20px (standard medium icon)
-$fui-icon-xl: 1.714rem !default;    // 24px (standard large icon)
+$fui-icon-sm: 1rem !default; // 14px (2 units)
+$fui-icon-md: 1.143rem !default; // 16px (standard small icon)
+$fui-icon-lg: 1.429rem !default; // 20px (standard medium icon)
+$fui-icon-xl: 1.714rem !default; // 24px (standard large icon)
 
 // Animation offsets
-$fui-anim-offset-sm: 4px !default;  // Small slide animation
-$fui-anim-offset-md: 8px !default;  // Medium slide animation
+$fui-anim-offset-sm: 4px !default; // Small slide animation
+$fui-anim-offset-md: 8px !default; // Medium slide animation
 
 // Popover/Tooltip arrow
 $fui-arrow-size: 10px !default;
 
 // Sidebar-specific
-$fui-sidebar-item-height: 2.5rem !default;    // 35px (5 units)
+$fui-sidebar-item-height: 2.5rem !default; // 35px (5 units)
 $fui-sidebar-subitem-height: 2.571rem !default; // 36px
 $fui-sidebar-indicator-width: 2px !default;
 $fui-sidebar-indicator-height: 1.143rem !default; // 16px
-$fui-sidebar-rail-width: 1.143rem !default;   // 16px
+$fui-sidebar-rail-width: 1.143rem !default; // 16px
 $fui-sidebar-rail-indicator-width: 4px !default;
 $fui-sidebar-rail-indicator-height: 2.857rem !default; // 40px
 $fui-sidebar-rail-indicator-height-hover: 4rem !default; // 56px
@@ -316,9 +327,9 @@ $fui-emptystate-width-md: 320px !default;
 $fui-emptystate-width-lg: 400px !default;
 
 // EmptyState icon sizes
-$fui-emptystate-icon-sm: $fui-icon-xl !default;  // 24px
-$fui-emptystate-icon-md: 2.286rem !default;      // 32px
-$fui-emptystate-icon-lg: 2.857rem !default;      // 40px
+$fui-emptystate-icon-sm: $fui-icon-xl !default; // 24px
+$fui-emptystate-icon-md: 2.286rem !default; // 32px
+$fui-emptystate-icon-lg: 2.857rem !default; // 40px
 
 // ColorChip/ColorPicker
 $fui-colorpicker-size: 180px !default;
@@ -345,8 +356,8 @@ $fui-theme-toggle-lg-height: 34px !default;
 $fui-theme-toggle-lg-icon: 18px !default;
 
 // CodeBlock (light mode)
-$fui-code-bg: #1e1e1e !default;
-$fui-code-header-bg: $fui-code-bg !default;
+$fui-code-bg: #000000 !default;
+$fui-code-header-bg: #1c1c1f !default;
 $fui-code-text: #d4d4d4 !default;
 $fui-code-text-muted: #6b7280 !default;
 $fui-code-border: rgba(255, 255, 255, 0.1) !default;
@@ -365,13 +376,15 @@ $fui-code-scrollbar-thumb-hover: rgba(255, 255, 255, 0.25) !default;
 // Tooltip (always dark bg with light text)
 $fui-tooltip-bg: #1e293b !default;
 $fui-tooltip-text: #f8fafc !default;
-$fui-tooltip-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.15) !default;
+$fui-tooltip-shadow:
+  0 4px 6px -1px rgba(0, 0, 0, 0.2),
+  0 2px 4px -2px rgba(0, 0, 0, 0.15) !default;
 
 // Hero/Marketing gradient accent
 $fui-hero-gradient-color: rgba(120, 119, 198, 0.15) !default;
 
 // CodeBlock (dark mode) - same as light, code blocks stay dark
-$fui-dark-code-bg: var(--fui-bg-elevated) !default;
+$fui-dark-code-bg: #000000 !default;
 $fui-dark-code-header-bg: var(--fui-bg-elevated) !default;
 $fui-dark-code-text: #d4d4d4 !default;
 $fui-dark-code-text-muted: #6b7280 !default;
@@ -391,7 +404,9 @@ $fui-dark-code-scrollbar-thumb-hover: rgba(255, 255, 255, 0.25) !default;
 // Tooltip (dark mode) - same as light, tooltips stay dark
 $fui-dark-tooltip-bg: #1e293b !default;
 $fui-dark-tooltip-text: #f8fafc !default;
-$fui-dark-tooltip-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.25) !default;
+$fui-dark-tooltip-shadow:
+  0 4px 6px -1px rgba(0, 0, 0, 0.3),
+  0 2px 4px -2px rgba(0, 0, 0, 0.25) !default;
 
 // Hero/Marketing gradient accent (dark mode)
 $fui-dark-hero-gradient-color: rgba(120, 119, 198, 0.25) !default;

package/dist/blocks/components/DataTable.d.ts

@@ -1,19 +0,0 @@
-import * as React from 'react';
-export interface DataTableColumn {
-    /** Unique key matching a property in the data objects */
-    key: string;
-    /** Display text for the column header */
-    header: string;
-    /** Optional fixed width (e.g., "200px", "30%") */
-    width?: string;
-}
-export interface DataTableProps {
-    /** Column definitions */
-    columns: DataTableColumn[];
-    /** Array of row data objects; keys should match column keys */
-    data: Array<Record<string, React.ReactNode>>;
-    /** Additional CSS class name */
-    className?: string;
-}
-export declare const DataTable: React.ForwardRefExoticComponent<DataTableProps & React.RefAttributes<HTMLTableElement>>;
-//# sourceMappingURL=DataTable.d.ts.map

package/dist/blocks/components/DataTable.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/blocks/components/DataTable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,WAAW,eAAe;IAC9B,yDAAyD;IACzD,GAAG,EAAE,MAAM,CAAC;IACZ,yCAAyC;IACzC,MAAM,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,cAAc;IAC7B,yBAAyB;IACzB,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,+DAA+D;IAC/D,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;IAC7C,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD,eAAO,MAAM,SAAS,yFA6FrB,CAAC"}

package/src/blocks/components/DataTable.tsx

@@ -1,124 +0,0 @@
-'use client';
-
-import * as React from 'react';
-
-// ============================================
-// Types
-// ============================================
-
-export interface DataTableColumn {
-  /** Unique key matching a property in the data objects */
-  key: string;
-  /** Display text for the column header */
-  header: string;
-  /** Optional fixed width (e.g., "200px", "30%") */
-  width?: string;
-}
-
-export interface DataTableProps {
-  /** Column definitions */
-  columns: DataTableColumn[];
-  /** Array of row data objects; keys should match column keys */
-  data: Array<Record<string, React.ReactNode>>;
-  /** Additional CSS class name */
-  className?: string;
-}
-
-// ============================================
-// Component
-// ============================================
-
-export const DataTable = React.forwardRef<HTMLTableElement, DataTableProps>(
-  function DataTable({ columns, data, className }, ref) {
-    return (
-      <div
-        style={{
-          width: '100%',
-          overflowX: 'auto',
-          borderRadius: 'var(--fui-radius-md)',
-          border: '1px solid var(--fui-border)',
-        }}
-      >
-        <table
-          ref={ref}
-          className={className}
-          style={{
-            width: '100%',
-            borderCollapse: 'collapse',
-            fontFamily: 'var(--fui-font-sans)',
-            fontSize: 'var(--fui-font-size-sm)',
-          }}
-        >
-          <thead>
-            <tr>
-              {columns.map((col) => (
-                <th
-                  key={col.key}
-                  scope="col"
-                  style={{
-                    padding: 'var(--fui-space-2) var(--fui-space-3)',
-                    textAlign: 'left',
-                    fontWeight: 'var(--fui-font-weight-medium)' as React.CSSProperties['fontWeight'],
-                    color: 'var(--fui-text-secondary)',
-                    backgroundColor: 'var(--fui-bg-secondary)',
-                    borderBottom: '1px solid var(--fui-border)',
-                    whiteSpace: 'nowrap',
-                    width: col.width,
-                  }}
-                >
-                  {col.header}
-                </th>
-              ))}
-            </tr>
-          </thead>
-          <tbody>
-            {data.map((row, rowIndex) => (
-              <tr
-                key={rowIndex}
-                style={{
-                  borderBottom:
-                    rowIndex < data.length - 1
-                      ? '1px solid var(--fui-border)'
-                      : undefined,
-                  transition: 'background-color var(--fui-transition-fast)',
-                }}
-                onMouseEnter={(e) => {
-                  e.currentTarget.style.backgroundColor = 'var(--fui-bg-hover)';
-                }}
-                onMouseLeave={(e) => {
-                  e.currentTarget.style.backgroundColor = '';
-                }}
-              >
-                {columns.map((col) => (
-                  <td
-                    key={col.key}
-                    style={{
-                      padding: 'var(--fui-space-2) var(--fui-space-3)',
-                      color: 'var(--fui-text-primary)',
-                    }}
-                  >
-                    {row[col.key] ?? '\u2014'}
-                  </td>
-                ))}
-              </tr>
-            ))}
-            {data.length === 0 && (
-              <tr>
-                <td
-                  colSpan={columns.length}
-                  style={{
-                    padding: 'var(--fui-space-6)',
-                    textAlign: 'center',
-                    color: 'var(--fui-text-tertiary)',
-                  }}
-                >
-                  No data available
-                </td>
-              </tr>
-            )}
-          </tbody>
-        </table>
-      </div>
-    );
-  }
-);