@fragments-sdk/ui 0.9.4 → 0.9.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fragments-sdk/ui",
-  "version": "0.9.4",
+  "version": "0.9.5",
   "license": "MIT",
   "description": "Customizable UI components built on Base UI headless primitives",
   "author": "Conan McNicholl",
@@ -10,25 +10,110 @@
     "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",
-    "./styles": "./src/styles/globals.scss",
+    ".": {
+      "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"
+      }
+    },
+    "./data-table": {
+      "import": {
+        "types": "./dist/components/DataTable/index.d.ts",
+        "default": "./dist/data-table.js"
+      },
+      "require": {
+        "types": "./dist/components/DataTable/index.d.ts",
+        "default": "./dist/data-table.cjs"
+      }
+    },
+    "./styles": {
+      "sass": "./src/styles/globals.scss",
+      "default": "./dist/assets/ui.css"
+    },
     "./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"
@@ -47,108 +132,7 @@
     "react-components"
   ],
   "publishConfig": {
-    "access": "public",
-    "main": "dist/index.cjs",
-    "module": "dist/index.js",
-    "types": "dist/index.d.ts",
-    "exports": {
-      ".": {
-        "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": {
-        "sass": "./src/styles/globals.scss",
-        "default": "./dist/assets/ui.css"
-      },
-      "./tokens": "./src/tokens/_variables.scss",
-      "./mixins": "./src/tokens/_mixins.scss",
-      "./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"
-    }
-  },
-  "scripts": {
-    "dev": "node ../../packages/cli/dist/bin.js dev",
-    "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"
+    "access": "public"
   },
   "peerDependencies": {
     "@tanstack/react-table": ">=8.0.0",
@@ -197,7 +181,6 @@
     "@scarf/scarf": "^1.4.0"
   },
   "devDependencies": {
-    "@fragments-sdk/cli": "workspace:*",
     "@tanstack/react-table": "^8.21.3",
     "@testing-library/jest-dom": "^6.6.0",
     "@testing-library/react": "^16.1.0",
@@ -217,11 +200,20 @@
     "typescript": "^5.7.0",
     "vite": "^6.0.0",
     "vitest": "^2.1.8",
-    "vitest-axe": "^0.1.0"
+    "vitest-axe": "^0.1.0",
+    "@fragments-sdk/cli": "0.7.16"
   },
   "files": [
     "src",
     "dist",
     "fragments.json"
-  ]
-}
+  ],
+  "scripts": {
+    "dev": "node ../../packages/cli/dist/bin.js dev",
+    "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/components/index.ts

@@ -9,6 +9,3 @@ export type { ActivityFeedProps, ActivityFeedItem } from './ActivityFeed';
 
 export { DashboardLayout } from './DashboardLayout';
 export type { DashboardLayoutProps } from './DashboardLayout';
-
-export { DataTable } from './DataTable';
-export type { DataTableProps, DataTableColumn } from './DataTable';

package/src/components/CodeBlock/index.tsx

@@ -117,6 +117,8 @@ export interface CodeBlockProps extends React.HTMLAttributes<HTMLDivElement> {
   persistentCopy?: boolean;
   /** Placement of copy button when not using persistent copy */
   copyPlacement?: CodeBlockCopyPlacement;
+  /** Callback fired when the copy button is clicked and copy succeeds */
+  onCopy?: () => void;
 }
 
 function CopyIcon({ className }: { className?: string }) {
@@ -541,6 +543,7 @@ const CodeBlockBase = React.forwardRef<HTMLDivElement, CodeBlockProps>(
       compact = false,
       persistentCopy = false,
       copyPlacement = 'auto',
+      onCopy,
       className,
       ...htmlProps
     },
@@ -635,12 +638,13 @@ const CodeBlockBase = React.forwardRef<HTMLDivElement, CodeBlockProps>(
         await navigator.clipboard.writeText(trimmedCode);
         setCopied(true);
         setTimeout(() => setCopied(false), 2000);
+        onCopy?.();
       } catch (err) {
         if (process.env.NODE_ENV !== 'production') {
           console.error('Failed to copy:', err);
         }
       }
-    }, [trimmedCode]);
+    }, [trimmedCode, onCopy]);
 
     const toggleCollapsed = useCallback(() => {
       setIsCollapsed((prev) => !prev);
@@ -783,6 +787,8 @@ export interface TabbedCodeBlockProps {
   maxHeight?: number;
   /** Additional class name */
   className?: string;
+  /** Callback fired when a tab's copy button is clicked. Receives the tab label. */
+  onCopy?: (tabLabel: string) => void;
 }
 
 function TabbedCodeBlock({
@@ -796,6 +802,7 @@ function TabbedCodeBlock({
   wordWrap,
   maxHeight,
   className,
+  onCopy,
 }: TabbedCodeBlockProps) {
   const defaultValue = defaultTab || tabs[0]?.label || '';
 
@@ -820,6 +827,7 @@ function TabbedCodeBlock({
               showLineNumbers={showLineNumbers}
               wordWrap={wordWrap}
               maxHeight={maxHeight}
+              onCopy={onCopy ? () => onCopy(tab.label) : undefined}
             />
           </TabsPanel>
         ))}