@fragments-sdk/ui 0.7.0 → 0.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fragments-sdk/ui",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "description": "Customizable UI components built on Base UI headless primitives",
   "type": "module",
   "main": "src/index.ts",

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

@@ -111,6 +111,16 @@ export default defineSegment({
       values: ['sm', 'md'],
       default: 'md',
     },
+    striped: {
+      type: 'boolean',
+      description: 'Show alternating row backgrounds',
+      default: 'false',
+    },
+    bordered: {
+      type: 'boolean',
+      description: 'Wrap table in a bordered container',
+      default: 'false',
+    },
   },
 
   relations: [
@@ -125,6 +135,8 @@ export default defineSegment({
       'sortable: boolean - enable sorting',
       'selectable: boolean - enable row selection',
       'size: sm|md - table density',
+      'striped: boolean - alternating row backgrounds',
+      'bordered: boolean - bordered container',
     ],
     scenarioTags: [
       'data.table',
@@ -185,6 +197,28 @@ export default defineSegment({
         />
       ),
     },
+    {
+      name: 'Striped',
+      description: 'Table with alternating row backgrounds',
+      render: () => (
+        <Table
+          columns={columns}
+          data={sampleUsers}
+          striped
+        />
+      ),
+    },
+    {
+      name: 'Bordered',
+      description: 'Table with bordered container',
+      render: () => (
+        <Table
+          columns={columns}
+          data={sampleUsers}
+          bordered
+        />
+      ),
+    },
     {
       name: 'Empty State',
       description: 'Table with no data',

package/src/components/Table/Table.module.scss

@@ -33,7 +33,7 @@
 .sm {
   .th,
   .td {
-    padding: var(--fui-space-2, $fui-space-2) var(--fui-space-3, $fui-space-3);
+    padding: var(--fui-space-1, $fui-space-1) var(--fui-space-3, $fui-space-3);
     font-size: var(--fui-font-size-xs, $fui-font-size-xs);
   }
 }
@@ -41,7 +41,7 @@
 .md {
   .th,
   .td {
-    padding: var(--fui-space-3, $fui-space-3) var(--fui-space-4, $fui-space-4);
+    padding: var(--fui-space-2, $fui-space-2) var(--fui-space-3, $fui-space-3);
     font-size: var(--fui-font-size-sm, $fui-font-size-sm);
   }
 }
@@ -51,7 +51,7 @@
   position: sticky;
   top: 0;
   z-index: 1;
-  background-color: var(--fui-bg-secondary, $fui-bg-secondary);
+  background-color: var(--fui-bg-tertiary, $fui-bg-tertiary);
 }
 
 .headerRow {
@@ -138,7 +138,6 @@
 }
 
 .selected {
-  background-color: var(--fui-color-accent, $fui-color-accent);
   background-color: rgba($fui-color-accent, 0.08);
 
   &:hover {
@@ -152,6 +151,37 @@
   line-height: var(--fui-line-height-normal, $fui-line-height-normal);
 }
 
+// Striped rows
+.striped {
+  .row:nth-child(even) {
+    background-color: var(--fui-bg-subtle, $fui-bg-subtle);
+  }
+
+  // Hover and selected override stripe
+  .clickable:hover {
+    background-color: var(--fui-bg-hover, $fui-bg-hover);
+  }
+
+  .clickable:active {
+    background-color: var(--fui-bg-active, $fui-bg-active);
+  }
+
+  .selected {
+    background-color: rgba($fui-color-accent, 0.08);
+
+    &:hover {
+      background-color: rgba($fui-color-accent, 0.12);
+    }
+  }
+}
+
+// Bordered
+.bordered {
+  border: 1px solid var(--fui-border, $fui-border);
+  border-radius: var(--fui-radius-md, $fui-radius-md);
+  overflow: hidden;
+}
+
 // Empty state
 .emptyState {
   display: flex;
@@ -167,7 +197,7 @@
 }
 
 // Responsive: allow horizontal scroll on small screens
-@media (max-width: 640px) {
+@include below-sm {
   .wrapper {
     margin-left: calc(-1 * var(--fui-space-4, $fui-space-4));
     margin-right: calc(-1 * var(--fui-space-4, $fui-space-4));

package/src/components/Table/index.tsx

@@ -45,6 +45,10 @@ export interface TableProps<T> extends Omit<React.HTMLAttributes<HTMLTableElemen
   caption?: string;
   /** Hide the caption visually but keep it for screen readers */
   captionHidden?: boolean;
+  /** Show alternating row backgrounds */
+  striped?: boolean;
+  /** Wrap table in a bordered container */
+  bordered?: boolean;
 }
 
 export function Table<T>({
@@ -63,6 +67,8 @@ export function Table<T>({
   className,
   caption,
   captionHidden = false,
+  striped = false,
+  bordered = false,
   'aria-label': ariaLabel,
   'aria-describedby': ariaDescribedBy,
   ...htmlProps
@@ -95,7 +101,7 @@ export function Table<T>({
 
   const isEmpty = data.length === 0;
 
-  const rootClasses = [styles.table, styles[size], className]
+  const rootClasses = [styles.table, styles[size], striped && styles.striped, className]
     .filter(Boolean)
     .join(' ');
 
@@ -119,7 +125,7 @@ export function Table<T>({
   };
 
   return (
-    <div className={styles.wrapper}>
+    <div className={[styles.wrapper, bordered && styles.bordered].filter(Boolean).join(' ')}>
       <table
         {...htmlProps}
         className={rootClasses}