@fragments-sdk/ui 0.9.2 → 0.9.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fragments-sdk/ui",
-  "version": "0.9.2",
+  "version": "0.9.4",
   "license": "MIT",
   "description": "Customizable UI components built on Base UI headless primitives",
   "author": "Conan McNicholl",
@@ -10,97 +10,25 @@
     "url": "https://github.com/ConanMcN/fragments"
   },
   "type": "module",
-  "main": "dist/index.cjs",
-  "types": "dist/index.d.ts",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
   "fragments": "fragments.json",
   "sideEffects": [
-    "*.scss",
-    "*.css"
+    "**/*.scss",
+    "**/*.css"
   ],
   "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"
-      }
-    },
+    ".": "./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",
     "./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"
-      }
-    },
+    "./brand": "./src/brand.ts",
     "./fragments.json": "./fragments.json",
     "./assets/*": "./src/assets/*",
     "./package.json": "./package.json"
@@ -119,7 +47,108 @@
     "react-components"
   ],
   "publishConfig": {
-    "access": "public"
+    "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"
   },
   "peerDependencies": {
     "@tanstack/react-table": ">=8.0.0",
@@ -168,6 +197,7 @@
     "@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",
@@ -187,20 +217,11 @@
     "typescript": "^5.7.0",
     "vite": "^6.0.0",
     "vitest": "^2.1.8",
-    "vitest-axe": "^0.1.0",
-    "@fragments-sdk/cli": "0.7.15"
+    "vitest-axe": "^0.1.0"
   },
   "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/dist/assets/components/Accordion/Accordion.module.css

@@ -1,107 +0,0 @@
-._accordion_1p05d_1 {
-  font-family: var(--fui-font-sans, "Geist Sans", "Geist", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
-  width: 100%;
-}
-._accordion_1p05d_1 > * {
-  border-bottom: 1px solid var(--fui-border, rgba(0, 0, 0, 0.08));
-}
-._accordion_1p05d_1 > *:last-child {
-  border-bottom: none;
-}
-
-._item_1p05d_12[data-disabled] {
-  opacity: 0.5;
-  pointer-events: none;
-}
-
-._heading_1p05d_17 {
-  margin: 0;
-  font-size: inherit;
-  font-weight: inherit;
-}
-
-._trigger_1p05d_23 {
-  appearance: none;
-  background: transparent;
-  border: none;
-  padding: 0;
-  margin: 0;
-  font: inherit;
-  color: inherit;
-  cursor: pointer;
-}
-._trigger_1p05d_23:disabled {
-  cursor: not-allowed;
-}
-._trigger_1p05d_23 {
-  transition: background-color var(--fui-transition-fast, 150ms ease), border-color var(--fui-transition-fast, 150ms ease), box-shadow var(--fui-transition-fast, 150ms ease), opacity var(--fui-transition-fast, 150ms ease);
-}
-._trigger_1p05d_23:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 var(--fui-focus-ring-offset, 2px) var(--fui-bg-primary, #ffffff), 0 0 0 calc(var(--fui-focus-ring-offset, 2px) + var(--fui-focus-ring-width, 2px)) var(--fui-focus-ring-color, #18181b);
-}
-._trigger_1p05d_23:disabled, ._trigger_1p05d_23[data-disabled] {
-  opacity: 0.5;
-  pointer-events: none;
-}
-._trigger_1p05d_23 {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  padding: var(--fui-padding-item-sm, 1rem) 0;
-  font-size: var(--fui-font-size-sm, 1rem);
-  font-weight: var(--fui-font-weight-medium, 500);
-  color: var(--fui-text-primary, #18181b);
-  text-align: left;
-}
-._trigger_1p05d_23:hover:not(:disabled) {
-  text-decoration: underline;
-}
-._trigger_1p05d_23:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 var(--fui-focus-ring-offset, 2px) var(--fui-bg-primary, #ffffff), 0 0 0 calc(var(--fui-focus-ring-offset, 2px) + var(--fui-focus-ring-width, 2px)) var(--fui-focus-ring-color, #18181b);
-  border-radius: var(--fui-radius-sm, 0.25rem);
-}
-
-._triggerContent_1p05d_67 {
-  flex: 1;
-}
-
-._chevron_1p05d_71 {
-  flex-shrink: 0;
-  color: var(--fui-text-secondary, #52525b);
-  transition: transform var(--fui-transition-normal, 200ms ease);
-}
-[data-state=open] ._chevron_1p05d_71 {
-  transform: rotate(180deg);
-}
-
-._content_1p05d_80 {
-  overflow: hidden;
-}
-._content_1p05d_80[data-state=closed] {
-  height: 0;
-}
-._content_1p05d_80[data-state=open] {
-  height: auto;
-}
-._content_1p05d_80[data-starting-style], ._content_1p05d_80[data-ending-style] {
-  transition: height var(--fui-transition-normal, 200ms ease), padding var(--fui-transition-normal, 200ms ease);
-}
-
-._contentInner_1p05d_93 {
-  padding-bottom: var(--fui-padding-item-xs, 0.5rem);
-  font-size: var(--fui-font-size-sm, 1rem);
-  color: var(--fui-text-secondary, #52525b);
-  line-height: var(--fui-line-height-normal, 1.5);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  ._chevron_1p05d_71 {
-    transition: none;
-  }
-  ._content_1p05d_80[data-starting-style], ._content_1p05d_80[data-ending-style] {
-    transition: none;
-  }
-}

package/dist/assets/components/Alert/Alert.module.css

@@ -1,158 +0,0 @@
-._alert_1d3ko_1 {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--fui-space-3, 1.5rem);
-  padding: var(--fui-padding-inline-sm, 1rem) var(--fui-padding-inline-md, 1.5rem);
-  border-radius: var(--fui-radius-lg, 0.571rem);
-  font-family: var(--fui-font-sans, "Geist Sans", "Geist", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
-  font-size: var(--fui-font-size-sm, 1rem);
-  line-height: var(--fui-line-height-normal, 1.5);
-}
-
-._info_1d3ko_12 {
-  background-color: var(--fui-color-info-bg, rgba(59, 130, 246, 0.1));
-  border: 1px solid var(--fui-color-info, #3b82f6);
-  color: var(--fui-color-info-text, rgb(9.807804878, 87.1804878049, 213.592195122));
-}
-
-._success_1d3ko_18 {
-  background-color: var(--fui-color-success-bg, rgba(34, 197, 94, 0.1));
-  border: 1px solid var(--fui-color-success, #22c55e);
-  color: var(--fui-color-success-text, rgb(18.987012987, 110.012987013, 52.4935064935));
-}
-
-._warning_1d3ko_24 {
-  background-color: var(--fui-color-warning-bg, rgba(245, 158, 11, 0.1));
-  border: 1px solid var(--fui-color-warning, #f59e0b);
-  color: var(--fui-color-warning-text, rgb(128.3401574803, 82.5795275591, 5.2598425197));
-}
-
-._error_1d3ko_30 {
-  background-color: var(--fui-color-danger-bg, rgba(239, 68, 68, 0.1));
-  border: 1px solid var(--fui-color-danger, #ef4444);
-  color: var(--fui-color-danger-text, rgb(198.2384236453, 16.9615763547, 16.9615763547));
-}
-
-._icon_1d3ko_36 {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.429rem;
-  height: 1.429rem;
-  border-radius: 50%;
-  font-size: var(--fui-font-size-xs, 0.857rem);
-  font-weight: var(--fui-font-weight-semibold, 600);
-  flex-shrink: 0;
-  margin-top: var(--fui-space-px, 1px);
-  color: var(--fui-text-inverse, #f4f4f5);
-}
-
-._info_1d3ko_12 ._icon_1d3ko_36 {
-  background-color: var(--fui-color-info, #3b82f6);
-}
-
-._success_1d3ko_18 ._icon_1d3ko_36 {
-  background-color: var(--fui-color-success, #22c55e);
-}
-
-._warning_1d3ko_24 ._icon_1d3ko_36 {
-  background-color: var(--fui-color-warning, #f59e0b);
-}
-
-._error_1d3ko_30 ._icon_1d3ko_36 {
-  background-color: var(--fui-color-danger, #ef4444);
-}
-
-._body_1d3ko_66 {
-  flex: 1;
-  min-width: 0;
-}
-
-._title_1d3ko_71 {
-  font-weight: var(--fui-font-weight-semibold, 600);
-  margin-bottom: var(--fui-space-0-5, 0.15rem);
-}
-
-._content_1d3ko_76 {
-  opacity: 0.9;
-}
-
-._actions_1d3ko_80 {
-  display: flex;
-  align-items: center;
-  gap: var(--fui-space-3, 1.5rem);
-}
-
-._close_1d3ko_86 {
-  appearance: none;
-  background: transparent;
-  border: none;
-  padding: 0;
-  margin: 0;
-  font: inherit;
-  color: inherit;
-  cursor: pointer;
-}
-._close_1d3ko_86:disabled {
-  cursor: not-allowed;
-}
-._close_1d3ko_86 {
-  transition: background-color var(--fui-transition-fast, 150ms ease), border-color var(--fui-transition-fast, 150ms ease), box-shadow var(--fui-transition-fast, 150ms ease), opacity var(--fui-transition-fast, 150ms ease);
-}
-._close_1d3ko_86:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 var(--fui-focus-ring-offset, 2px) var(--fui-bg-primary, #ffffff), 0 0 0 calc(var(--fui-focus-ring-offset, 2px) + var(--fui-focus-ring-width, 2px)) var(--fui-focus-ring-color, #18181b);
-}
-._close_1d3ko_86:disabled, ._close_1d3ko_86[data-disabled] {
-  opacity: 0.5;
-  pointer-events: none;
-}
-._close_1d3ko_86 {
-  min-width: var(--fui-target-size-min, 1.714rem);
-  min-height: var(--fui-target-size-min, 1.714rem);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 var(--fui-space-1, 0.5rem);
-  font-size: var(--fui-font-size-lg, 1.286rem);
-  color: inherit;
-  opacity: 0.6;
-  line-height: 1;
-  border-radius: var(--fui-radius-sm, 0.25rem);
-  margin-left: auto;
-  flex-shrink: 0;
-}
-._close_1d3ko_86:hover {
-  opacity: 1;
-}
-
-._action_1d3ko_80 {
-  appearance: none;
-  background: transparent;
-  border: none;
-  padding: 0;
-  margin: 0;
-  font: inherit;
-  color: inherit;
-  cursor: pointer;
-}
-._action_1d3ko_80:disabled {
-  cursor: not-allowed;
-}
-._action_1d3ko_80 {
-  min-width: var(--fui-target-size-min, 1.714rem);
-  min-height: var(--fui-target-size-min, 1.714rem);
-  display: inline-flex;
-  align-items: center;
-  font-weight: var(--fui-font-weight-semibold, 600);
-  font-size: var(--fui-font-size-xs, 0.857rem);
-  color: inherit;
-  text-decoration: underline;
-}
-._action_1d3ko_80:hover {
-  opacity: 0.8;
-}
-._action_1d3ko_80:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 var(--fui-focus-ring-offset, 2px) var(--fui-bg-primary, #ffffff), 0 0 0 calc(var(--fui-focus-ring-offset, 2px) + var(--fui-focus-ring-width, 2px)) var(--fui-focus-ring-color, #18181b);
-}

package/dist/assets/components/AppShell/AppShell.module.css

@@ -1,156 +0,0 @@
-._root_wyoe3_1 {
-  display: grid;
-  min-height: 100vh;
-  min-height: 100dvh;
-  background-color: var(--fui-bg-primary, #ffffff);
-  grid-template-areas: "header header header" "sidebar main aside";
-  grid-template-columns: var(--appshell-sidebar-width, 240px) 1fr var(--appshell-aside-width, 0px);
-  grid-template-rows: var(--appshell-header-height, 56px) 1fr;
-  transition: grid-template-columns var(--fui-transition-normal, 200ms) ease;
-}
-@media (max-width: 767px) {
-  ._root_wyoe3_1 {
-    grid-template-areas: "header" "main" "aside";
-    grid-template-columns: 1fr;
-    grid-template-rows: var(--appshell-header-height, 56px) 1fr auto;
-    transition: none;
-  }
-}
-
-._sidebarLayout_wyoe3_20 {
-  grid-template-areas: "sidebar header header" "sidebar main aside";
-}
-@media (max-width: 767px) {
-  ._sidebarLayout_wyoe3_20 {
-    grid-template-areas: "header" "main" "aside";
-    grid-template-columns: 1fr;
-  }
-}
-
-._sidebarFloatingLayout_wyoe3_30 {
-  background-color: var(--fui-bg-primary, #ffffff);
-}
-
-._header_wyoe3_34 {
-  grid-area: header;
-  position: sticky;
-  top: 0;
-  height: var(--appshell-header-height, 56px);
-  z-index: var(--fui-header-z-index, 40);
-  background-color: var(--fui-bg-primary, #ffffff);
-}
-
-._headerFloating_wyoe3_43 {
-  background-color: var(--fui-bg-primary, #ffffff);
-}
-
-._sidebar_wyoe3_20 {
-  grid-area: sidebar;
-  position: sticky;
-  top: var(--appshell-header-height, 56px);
-  height: calc(100vh - var(--appshell-header-height, 56px));
-  height: calc(100dvh - var(--appshell-header-height, 56px));
-  z-index: 30;
-  overflow: hidden;
-}
-@media (max-width: 767px) {
-  ._sidebar_wyoe3_20 {
-    position: fixed;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    width: 0;
-    height: 100vh;
-    height: 100dvh;
-    z-index: 51;
-  }
-  ._sidebar_wyoe3_20 > .root {
-    width: var(--appshell-sidebar-expanded-width, 240px);
-  }
-}
-._sidebar_wyoe3_20 .root {
-  height: 100%;
-}
-@media (max-width: 767px) {
-  ._sidebar_wyoe3_20 .root {
-    height: 100vh;
-    height: 100dvh;
-  }
-}
-
-._sidebarFullHeight_wyoe3_81 {
-  top: 0;
-  height: 100vh;
-  height: 100dvh;
-  z-index: var(--fui-header-z-index, 40);
-}
-._sidebarFullHeight_wyoe3_81 .root {
-  height: 100%;
-}
-
-._sidebarFloating_wyoe3_30 .root {
-  background-color: var(--fui-bg-primary, #ffffff);
-}
-
-._main_wyoe3_95 {
-  grid-area: main;
-  min-height: 0;
-  min-width: 0;
-  background-color: var(--fui-bg-primary, #ffffff);
-  overflow-x: hidden;
-}
-
-._mainFloating_wyoe3_103 {
-  border-radius: var(--fui-radius-xl, 0.857rem);
-  background-color: var(--fui-bg-secondary, #f4f4f5);
-  overflow: hidden;
-}
-@media (max-width: 767px) {
-  ._mainFloating_wyoe3_103 {
-    border-radius: var(--fui-radius-lg, 0.571rem);
-    width: 100%;
-  }
-}
-
-._paddingSm_wyoe3_115 {
-  padding: var(--fui-padding-container-sm);
-}
-
-._paddingMd_wyoe3_119 {
-  padding: var(--fui-padding-container-md);
-}
-@media (min-width: 768px) {
-  ._paddingMd_wyoe3_119 {
-    padding: var(--fui-padding-container-lg);
-  }
-}
-
-._paddingLg_wyoe3_128 {
-  padding: var(--fui-padding-container-lg);
-}
-@media (min-width: 768px) {
-  ._paddingLg_wyoe3_128 {
-    padding: var(--fui-padding-container-xl);
-  }
-}
-
-._aside_wyoe3_137 {
-  grid-area: aside;
-  position: sticky;
-  top: var(--appshell-header-height, 56px);
-  height: calc(100vh - var(--appshell-header-height, 56px));
-  height: calc(100dvh - var(--appshell-header-height, 56px));
-  width: var(--aside-width, 280px);
-  min-height: 0;
-  z-index: 30;
-  background-color: var(--fui-bg-primary, #ffffff);
-  overflow: hidden;
-}
-@media (max-width: 767px) {
-  ._aside_wyoe3_137 {
-    position: static;
-    width: 100%;
-    height: auto;
-    border-top: 1px solid var(--fui-border, rgba(0, 0, 0, 0.08));
-  }
-}