@fragments-sdk/ui 0.9.4 → 0.9.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fragments-sdk/ui",
-  "version": "0.9.4",
+  "version": "0.9.6",
   "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.17"
   },
   "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/CodeBlock.module.scss

@@ -1,5 +1,5 @@
-@use '../../tokens/variables' as *;
-@use '../../tokens/mixins' as *;
+@use "../../tokens/variables" as *;
+@use "../../tokens/mixins" as *;
 
 .container {
   width: 100%;
@@ -31,7 +31,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: var(--fui-padding-inline-sm) var(--fui-padding-container-md);
+  padding: 0 var(--fui-padding-container-sm);
   background-color: var(--fui-code-header-bg, $fui-code-header-bg);
   border-bottom: 1px solid var(--fui-code-border, $fui-code-border);
   min-height: var(--fui-input-height, $fui-input-height);
@@ -90,9 +90,8 @@
   .codeContainer :global(.shiki),
   .loading pre {
     padding-right: calc(
-      var(--fui-padding-container-md, #{$fui-padding-container-md})
-      + var(--fui-target-size-min, #{$fui-target-size-min})
-      + var(--fui-space-3, #{$fui-space-3})
+      var(--fui-padding-container-md, #{$fui-padding-container-md}) +
+        var(--fui-target-size-min, #{$fui-target-size-min}) + var(--fui-space-3, #{$fui-space-3})
     );
   }
 }
@@ -101,33 +100,16 @@
   flex-shrink: 0;
 }
 
-// Persistent copy — wrapper becomes flex row, button sits beside code
-.persistentCopyWrapper {
-  display: flex;
-  align-items: center;
-
-  .codeContainer,
-  .loading {
-    flex: 1;
-    min-width: 0;
-
-    :global(.shiki),
-    pre {
-      padding-right: var(--fui-space-3, $fui-space-3);
-    }
-  }
-}
-
 .persistentCopy {
-  flex-shrink: 0;
-  padding-right: var(--fui-space-2, $fui-space-2);
+  top: 50%;
+  transform: translateY(-50%);
 }
 
 .loading {
   pre {
     margin: 0;
-    padding: var(--fui-padding-container-md);
-    padding-right: var(--fui-padding-container-md);
+    padding: var(--fui-padding-container-sm);
+    padding-right: var(--fui-padding-container-sm);
     background-color: transparent !important;
     border: none !important;
     border-radius: 0 !important;
@@ -153,8 +135,8 @@
   :global(.shiki) {
     background-color: transparent !important;
     margin: 0;
-    padding: var(--fui-padding-container-md);
-    padding-right: var(--fui-padding-container-md);
+    padding: var(--fui-padding-container-sm);
+    padding-right: var(--fui-padding-container-sm);
     border: none !important;
     border-radius: 0 !important;
     font-family: var(--fui-font-mono, $fui-font-mono);
@@ -279,9 +261,8 @@
     .codeContainer :global(.shiki),
     .loading pre {
       padding-right: calc(
-        var(--fui-padding-container-sm, #{$fui-padding-container-sm})
-        + var(--fui-target-size-min, #{$fui-target-size-min})
-        + var(--fui-space-3, #{$fui-space-3})
+        var(--fui-padding-container-sm, #{$fui-padding-container-sm}) +
+          var(--fui-target-size-min, #{$fui-target-size-min}) + var(--fui-space-3, #{$fui-space-3})
       );
     }
   }
@@ -317,7 +298,7 @@
   justify-content: center;
   gap: var(--fui-space-1, $fui-space-1);
   width: 100%;
-  padding: var(--fui-padding-inline-sm);
+  padding: 0 var(--fui-padding-inline-sm);
   font-size: var(--fui-font-size-xs, $fui-font-size-xs);
   font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
   font-family: var(--fui-font-sans, $fui-font-sans);
@@ -335,7 +316,8 @@
   }
 
   &:focus-visible {
-    outline: var(--fui-focus-ring-width, $fui-focus-ring-width) solid var(--fui-focus-ring-color, $fui-focus-ring-color);
+    outline: var(--fui-focus-ring-width, $fui-focus-ring-width) solid
+      var(--fui-focus-ring-color, $fui-focus-ring-color);
     outline-offset: calc(-1 * var(--fui-focus-ring-offset, #{$fui-focus-ring-offset}));
   }
 }