@fragments-sdk/ui 0.9.0 → 0.9.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fragments-sdk/ui",
-  "version": "0.9.0",
+  "version": "0.9.2",
   "license": "MIT",
   "description": "Customizable UI components built on Base UI headless primitives",
   "author": "Conan McNicholl",
@@ -10,25 +10,97 @@
     "url": "https://github.com/ConanMcN/fragments"
   },
   "type": "module",
-  "main": "src/index.ts",
-  "types": "src/index.ts",
+  "main": "dist/index.cjs",
+  "types": "dist/index.d.ts",
   "fragments": "fragments.json",
   "sideEffects": [
     "*.scss",
     "*.css"
   ],
   "exports": {
-    ".": "./src/index.ts",
-    "./datepicker": "./src/components/DatePicker/index.tsx",
-    "./chart": "./src/components/Chart/index.tsx",
-    "./markdown": "./src/components/Markdown/index.tsx",
-    "./codeblock": "./src/components/CodeBlock/index.tsx",
-    "./colorpicker": "./src/components/ColorPicker/index.tsx",
-    "./table": "./src/components/Table/index.tsx",
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./datepicker": {
+      "import": {
+        "types": "./dist/components/DatePicker/index.d.ts",
+        "default": "./dist/datepicker.js"
+      },
+      "require": {
+        "types": "./dist/components/DatePicker/index.d.ts",
+        "default": "./dist/datepicker.cjs"
+      }
+    },
+    "./chart": {
+      "import": {
+        "types": "./dist/components/Chart/index.d.ts",
+        "default": "./dist/chart.js"
+      },
+      "require": {
+        "types": "./dist/components/Chart/index.d.ts",
+        "default": "./dist/chart.cjs"
+      }
+    },
+    "./markdown": {
+      "import": {
+        "types": "./dist/components/Markdown/index.d.ts",
+        "default": "./dist/markdown.js"
+      },
+      "require": {
+        "types": "./dist/components/Markdown/index.d.ts",
+        "default": "./dist/markdown.cjs"
+      }
+    },
+    "./codeblock": {
+      "import": {
+        "types": "./dist/components/CodeBlock/index.d.ts",
+        "default": "./dist/codeblock.js"
+      },
+      "require": {
+        "types": "./dist/components/CodeBlock/index.d.ts",
+        "default": "./dist/codeblock.cjs"
+      }
+    },
+    "./colorpicker": {
+      "import": {
+        "types": "./dist/components/ColorPicker/index.d.ts",
+        "default": "./dist/colorpicker.js"
+      },
+      "require": {
+        "types": "./dist/components/ColorPicker/index.d.ts",
+        "default": "./dist/colorpicker.cjs"
+      }
+    },
+    "./table": {
+      "import": {
+        "types": "./dist/components/Table/index.d.ts",
+        "default": "./dist/table.js"
+      },
+      "require": {
+        "types": "./dist/components/Table/index.d.ts",
+        "default": "./dist/table.cjs"
+      }
+    },
     "./styles": "./src/styles/globals.scss",
     "./tokens": "./src/tokens/_variables.scss",
     "./mixins": "./src/tokens/_mixins.scss",
-    "./brand": "./src/brand.ts",
+    "./brand": {
+      "import": {
+        "types": "./dist/brand.d.ts",
+        "default": "./dist/brand.js"
+      },
+      "require": {
+        "types": "./dist/brand.d.ts",
+        "default": "./dist/brand.cjs"
+      }
+    },
     "./fragments.json": "./fragments.json",
     "./assets/*": "./src/assets/*",
     "./package.json": "./package.json"
@@ -50,16 +122,16 @@
     "access": "public"
   },
   "peerDependencies": {
+    "@tanstack/react-table": ">=8.0.0",
+    "date-fns": ">=3.0.0",
     "react": "^18.0.0 || ^19.0.0",
+    "react-colorful": ">=5.0.0",
+    "react-day-picker": ">=9.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "react-markdown": ">=9.0.0",
     "recharts": ">=2.0.0 || >=3.0.0",
     "remark-gfm": ">=4.0.0",
-    "react-day-picker": ">=9.0.0",
-    "date-fns": ">=3.0.0",
-    "shiki": ">=1.0.0",
-    "react-colorful": ">=5.0.0",
-    "@tanstack/react-table": ">=8.0.0"
+    "shiki": ">=1.0.0"
   },
   "peerDependenciesMeta": {
     "react-markdown": {
@@ -91,39 +163,44 @@
     "defaultOptIn": true
   },
   "dependencies": {
-    "@scarf/scarf": "^1.4.0",
     "@base-ui/react": "^1.0.0",
-    "@phosphor-icons/react": "^2.1.10"
+    "@phosphor-icons/react": "^2.1.10",
+    "@scarf/scarf": "^1.4.0"
   },
   "devDependencies": {
+    "@tanstack/react-table": "^8.21.3",
     "@testing-library/jest-dom": "^6.6.0",
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.0",
+    "@types/node": "^22.0.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "date-fns": "^4.0.0",
     "jsdom": "^25.0.0",
     "react": "^19.0.0",
+    "react-colorful": "^5.6.1",
+    "react-day-picker": "^9.0.0",
     "react-dom": "^19.0.0",
     "sass": "^1.83.0",
-    "typescript": "^5.7.0",
-    "react-day-picker": "^9.0.0",
-    "date-fns": "^4.0.0",
     "shiki": "^3.0.0",
-    "react-colorful": "^5.6.1",
-    "@tanstack/react-table": "^8.21.3",
+    "typescript": "^5.7.0",
+    "vite": "^6.0.0",
     "vitest": "^2.1.8",
     "vitest-axe": "^0.1.0",
     "@fragments-sdk/cli": "0.7.15"
   },
   "files": [
     "src",
+    "dist",
     "fragments.json"
   ],
   "scripts": {
     "dev": "node ../../packages/cli/dist/bin.js dev",
-    "build": "node ../../packages/cli/dist/bin.js build",
+    "build": "node ../../packages/cli/dist/bin.js build && vite build && tsc -p tsconfig.build.json",
     "lint": "eslint src",
     "validate": "node ../../packages/cli/dist/bin.js validate",
     "test": "vitest run"
-  }
+  },
+  "module": "dist/index.js"
 }

package/src/blocks/ActivityFeedSkeleton.block.ts

@@ -0,0 +1,29 @@
+import { defineBlock } from '@fragments-sdk/cli/core';
+
+export default defineBlock({
+  name: 'Activity Feed Skeleton',
+  description: 'Skeleton avatar circles with text rows for loading activity feeds',
+  category: 'loading',
+  components: ['Card', 'Stack', 'Skeleton'],
+  tags: ['activity', 'feed', 'skeleton', 'loading', 'placeholder'],
+  code: `
+<Card>
+  <Card.Header>
+    <Skeleton variant="heading" width={160} />
+  </Card.Header>
+  <Card.Body>
+    <Stack gap="md">
+      {Array.from({ length: 4 }).map((_, i) => (
+        <Stack key={i} direction="row" gap="md" align="center">
+          <Skeleton.Circle size="sm" />
+          <Stack gap="xs" style={{ flex: 1 }}>
+            <Skeleton variant="text" width="70%" />
+            <Skeleton variant="text" width="30%" />
+          </Stack>
+        </Stack>
+      ))}
+    </Stack>
+  </Card.Body>
+</Card>
+`.trim(),
+});

package/src/blocks/DashboardSkeleton.block.ts

@@ -0,0 +1,28 @@
+import { defineBlock } from '@fragments-sdk/cli/core';
+
+export default defineBlock({
+  name: 'Dashboard Skeleton',
+  description: 'Grid of card shells with skeleton text and headings for dashboard loading states',
+  category: 'loading',
+  components: ['Card', 'Grid', 'Skeleton'],
+  tags: ['dashboard', 'skeleton', 'loading', 'placeholder'],
+  code: `
+<Grid columns={{ base: 1, md: 2, lg: 3 }} gap="md">
+  {Array.from({ length: 6 }).map((_, i) => (
+    <Card key={i}>
+      <Card.Body>
+        <Stack gap="md">
+          <Skeleton variant="heading" width="60%" />
+          <Skeleton.Text lines={2} />
+          <Skeleton variant="rect" height={120} radius="md" />
+          <Stack direction="row" gap="sm" align="center">
+            <Skeleton variant="button" width={80} />
+            <Skeleton variant="text" width={60} />
+          </Stack>
+        </Stack>
+      </Card.Body>
+    </Card>
+  ))}
+</Grid>
+`.trim(),
+});

package/src/blocks/StatsCardSkeleton.block.ts

@@ -0,0 +1,26 @@
+import { defineBlock } from '@fragments-sdk/cli/core';
+
+export default defineBlock({
+  name: 'Stats Card Skeleton',
+  description: 'Card with skeleton metric value, label, and badge for loading stat displays',
+  category: 'loading',
+  components: ['Card', 'Stack', 'Skeleton'],
+  tags: ['stats', 'skeleton', 'loading', 'placeholder'],
+  code: `
+<Card>
+  <Card.Body>
+    <Stack direction="row" justify="between" align="start">
+      <Stack gap="sm">
+        <Skeleton variant="text" width={100} />
+        <Skeleton variant="heading" width={140} />
+        <Stack direction="row" gap="xs" align="center">
+          <Skeleton variant="button" width={60} height={22} />
+          <Skeleton variant="text" width={90} />
+        </Stack>
+      </Stack>
+      <Skeleton.Circle size="lg" />
+    </Stack>
+  </Card.Body>
+</Card>
+`.trim(),
+});

package/src/blocks/TableSkeleton.block.ts

@@ -0,0 +1,39 @@
+import { defineBlock } from '@fragments-sdk/cli/core';
+
+export default defineBlock({
+  name: 'Table Skeleton',
+  description: 'Table-shaped skeleton rows for loading data tables',
+  category: 'loading',
+  components: ['Card', 'Stack', 'Skeleton'],
+  tags: ['table', 'skeleton', 'loading', 'placeholder'],
+  code: `
+<Card>
+  <Card.Header>
+    <Stack direction="row" justify="between" align="center">
+      <Skeleton variant="heading" width={120} />
+      <Skeleton variant="input" width={200} />
+    </Stack>
+  </Card.Header>
+  <Card.Body>
+    <Stack gap="none">
+      {/* Table header row */}
+      <Stack direction="row" gap="lg" style={{ padding: 'var(--fui-space-2) 0', borderBottom: '1px solid var(--fui-border)' }}>
+        <Skeleton variant="text" width="25%" />
+        <Skeleton variant="text" width="30%" />
+        <Skeleton variant="text" width="20%" />
+        <Skeleton variant="text" width="15%" />
+      </Stack>
+      {/* Table body rows */}
+      {Array.from({ length: 5 }).map((_, i) => (
+        <Stack key={i} direction="row" gap="lg" align="center" style={{ padding: 'var(--fui-space-2) 0', borderBottom: '1px solid var(--fui-border)' }}>
+          <Skeleton variant="text" width="25%" />
+          <Skeleton variant="text" width="30%" />
+          <Skeleton variant="button" width="20%" />
+          <Skeleton variant="text" width="15%" />
+        </Stack>
+      ))}
+    </Stack>
+  </Card.Body>
+</Card>
+`.trim(),
+});

package/src/blocks/components/ActivityFeed.tsx

@@ -0,0 +1,98 @@
+'use client';
+
+import * as React from 'react';
+import { Card } from '../../components/Card';
+import { Stack } from '../../components/Stack';
+import { Text } from '../../components/Text';
+import { Avatar } from '../../components/Avatar';
+
+// ============================================
+// Types
+// ============================================
+
+export interface ActivityFeedItem {
+  /** Unique identifier for the activity */
+  id: string;
+  /** User who performed the action */
+  user: string;
+  /** Description of the action */
+  action: string;
+  /** Formatted timestamp string */
+  time: string;
+  /** Avatar image URL */
+  avatar?: string;
+  /** Fallback initials for the avatar */
+  initials?: string;
+}
+
+export interface ActivityFeedProps {
+  /** List of activity items to display */
+  items: ActivityFeedItem[];
+  /** Optional title for the card header */
+  title?: string;
+  /** Additional CSS class name */
+  className?: string;
+}
+
+// ============================================
+// Component
+// ============================================
+
+export const ActivityFeed = React.forwardRef<HTMLDivElement, ActivityFeedProps>(
+  function ActivityFeed({ items, title = 'Recent Activity', className }, ref) {
+    return (
+      <Card className={className}>
+        <Card.Header>
+          <Card.Title>{title}</Card.Title>
+        </Card.Header>
+        <Card.Body>
+          <div ref={ref}>
+            <Stack gap="sm">
+              {items.map((item, index) => (
+                <div
+                  key={item.id}
+                  style={{
+                    display: 'flex',
+                    gap: 'var(--fui-space-3)',
+                    alignItems: 'flex-start',
+                    paddingBottom:
+                      index < items.length - 1
+                        ? 'var(--fui-space-3)'
+                        : undefined,
+                    borderBottom:
+                      index < items.length - 1
+                        ? '1px solid var(--fui-border)'
+                        : undefined,
+                  }}
+                >
+                  <Avatar
+                    src={item.avatar}
+                    name={item.user}
+                    initials={item.initials}
+                    size="sm"
+                  />
+                  <Stack gap="xs" style={{ flex: 1, minWidth: 0 }}>
+                    <Text size="sm">
+                      <Text as="span" weight="medium">
+                        {item.user}
+                      </Text>{' '}
+                      {item.action}
+                    </Text>
+                    <Text size="xs" color="tertiary">
+                      {item.time}
+                    </Text>
+                  </Stack>
+                </div>
+              ))}
+              {items.length === 0 && (
+                <Text size="sm" color="tertiary">
+                  No recent activity.
+                </Text>
+              )}
+            </Stack>
+          </div>
+        </Card.Body>
+      </Card>
+    );
+  }
+);

package/src/blocks/components/DashboardLayout.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import * as React from 'react';
+
+// ============================================
+// Types
+// ============================================
+
+export interface DashboardLayoutProps {
+  /** Dashboard content (typically Card or StatsCard components) */
+  children: React.ReactNode;
+  /** Number of grid columns */
+  columns?: 1 | 2 | 3 | 4;
+  /** Gap size between grid items */
+  gap?: 'sm' | 'md' | 'lg';
+  /** Additional CSS class name */
+  className?: string;
+}
+
+// ============================================
+// Gap map
+// ============================================
+
+const gapMap = {
+  sm: 'var(--fui-space-2)',
+  md: 'var(--fui-space-4)',
+  lg: 'var(--fui-space-6)',
+} as const;
+
+// ============================================
+// Component
+// ============================================
+
+export const DashboardLayout = React.forwardRef<
+  HTMLDivElement,
+  DashboardLayoutProps
+>(function DashboardLayout(
+  { children, columns = 3, gap = 'md', className },
+  ref
+) {
+  return (
+    <div
+      ref={ref}
+      className={className}
+      style={{
+        display: 'grid',
+        gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+        gap: gapMap[gap],
+        width: '100%',
+      }}
+    >
+      {children}
+    </div>
+  );
+});

package/src/blocks/components/DataTable.tsx

@@ -0,0 +1,124 @@
+'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>
+    );
+  }
+);