@powerhousedao/design-system 6.2.3-dev.9 → 6.2.3-dev.91

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "@powerhousedao/design-system",
-  "version": "6.2.3-dev.9",
+  "version": "6.2.3-dev.91",
   "description": "Powerhouse document-engineering design system — GraphQL scalar UI components for building consistent Powerhouse editors.",
   "files": [
     "dist",
-    "theme.css"
+    "theme.css",
+    "tailwind.css",
+    "plugins.css",
+    "vendor.css"
   ],
   "type": "module",
   "repository": {
@@ -56,6 +59,9 @@
       "import": "./dist/connect/components/toast/toast.js"
     },
     "./style.css": "./dist/style.css",
+    "./tailwind.css": "./tailwind.css",
+    "./plugins.css": "./plugins.css",
+    "./vendor.css": "./vendor.css",
     "./theme.css": "./theme.css"
   },
   "author": {
@@ -70,7 +76,7 @@
     "@babel/core": "^7.29.0",
     "@babel/plugin-transform-react-pure-annotations": "^7.27.1",
     "@babel/preset-typescript": "^7.28.5",
-    "@powerhousedao/config": "6.2.3-dev.9",
+    "@powerhousedao/config": "6.2.3-dev.91",
     "@prettier/sync": "^0.5.2",
     "@rollup/plugin-babel": "^7.0.0",
     "@storybook/addon-actions": "^8.6.18",
@@ -100,25 +106,23 @@
     "@types/react-virtualized": "^9.22.3",
     "camelcase": "^8.0.0",
     "happy-dom": "^20.8.9",
-    "jsdom": "^24.0.0",
     "react": "19.2.6",
     "react-dom": "19.2.6",
     "storybook": "^8.6.18",
     "storybook-addon-pseudo-states": "^4.0.4",
-    "tailwind-scrollbar": "^4.0.1",
     "tailwindcss": "4.2.2",
-    "tsdown": "0.21.1",
-    "tsx": "4.21.0",
-    "vite": "8.0.10",
-    "vitest": "4.1.1"
+    "tsdown": "0.23.0",
+    "tsx": "4.23.13",
+    "vite": "8.3.4",
+    "vitest": "5.0.3"
   },
   "peerDependencies": {
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0"
   },
   "dependencies": {
-    "@powerhousedao/reactor-browser": "6.2.3-dev.9",
-    "@powerhousedao/shared": "6.2.3-dev.9",
+    "@powerhousedao/reactor-browser": "6.2.3-dev.91",
+    "@powerhousedao/shared": "6.2.3-dev.91",
     "@radix-ui/react-checkbox": "^1.1.2",
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.5",
@@ -144,6 +148,7 @@
     "react-virtualized": "^9.22.6",
     "remeda": "2.33.7",
     "tailwind-merge": "3.4.0",
+    "tailwind-scrollbar": "^4.0.1",
     "type-fest": "5.6.0",
     "usehooks-ts": "^3.1.1"
   },
@@ -163,7 +168,7 @@
   ],
   "scripts": {
     "tsc": "tsc",
-    "lint": "eslint",
+    "lint": "cd ../.. && oxlint packages/design-system",
     "create-icon-components": "tsx scripts/create-icon-components.ts",
     "build": "tsdown && pnpm run build:css",
     "build:css": "pnpm exec tailwindcss -i style.css -o dist/style.css",

package/plugins.css

@@ -0,0 +1,6 @@
+/* The design system's Tailwind plugins: imported by tailwind.css, and referenced
+   by packages through @powerhousedao/connect/theme.css. */
+@plugin "tailwind-scrollbar" {
+  nocompatible: true;
+  preferredstrategy: "pseudoelements";
+}

package/tailwind.css

@@ -0,0 +1,213 @@
+/* The design system for a Tailwind host: its tokens, its components' rules and
+   the classes its code uses. Third-party CSS is in vendor.css. */
+@import "./theme.css";
+@import "./plugins.css";
+@source "./dist";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+:root {
+  /* Toastify */
+  --toastify-toast-min-height: 48px;
+  --toastify-toast-bd-radius: 8px;
+  --toastify-text-color-light: var(--color-gray-800);
+
+  --toastify-color-progress-info: var(--color-gray-300);
+  --toastify-color-progress-success: var(--color-gray-300);
+  --toastify-color-progress-warning: var(--color-gray-300);
+  --toastify-color-progress-error: var(--color-gray-300);
+  --toastify-color-progress-light: var(--color-gray-300);
+  /* Toastify end */
+}
+
+html:has(dialog[open]) {
+  overflow: hidden;
+}
+
+.checkbox-container input[type="checkbox"] {
+  accent-color: var(--color-gray-900);
+}
+
+/* React Multi Select */
+.rmsc {
+  --rmsc-main: var(--color-gray-300) !important;
+  --rmsc-hover: var(--color-gray-100) !important;
+  --rmsc-selected: var(--color-gray-300) !important;
+}
+/* React Multi Select end */
+
+/* Toastify */
+.Toastify__toast-body {
+  padding: 0;
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.Toastify__toast {
+  box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.32);
+  padding: 12px 16px 12px 16px;
+}
+
+.Toastify__progress-bar--wrp {
+  height: 2px;
+}
+/* Toastify end */
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  margin: 0;
+}
+/* Remove the increment/decrement buttons in Firefox */
+input[type="number"] {
+  -moz-appearance: textfield;
+}
+
+.hover-bg-transparent:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+@layer base {
+  /* The theme's text colour, so content outside the app's root (portals) follows dark mode. */
+  body {
+    @apply text-foreground;
+  }
+
+  button {
+    @apply cursor-pointer;
+  }
+
+  .ph-default-styles h1 {
+    @apply mb-4 mt-6 font-sans text-3xl font-bold leading-tight text-foreground;
+  }
+
+  .ph-default-styles h2 {
+    @apply mb-3 mt-5 font-sans text-2xl font-bold leading-tight text-foreground;
+  }
+
+  .ph-default-styles h3 {
+    @apply mb-2 mt-4 font-sans text-xl font-bold leading-tight text-foreground;
+  }
+
+  .ph-default-styles p {
+    @apply font-sans text-base font-normal leading-tight text-foreground;
+  }
+
+  .ph-default-styles small {
+    @apply font-sans text-sm font-normal leading-none text-foreground;
+  }
+
+  /* Default styles for text input fields, selects and textareas based on Storybook */
+  .ph-default-styles input[type="text"],
+  .ph-default-styles input[type="email"],
+  .ph-default-styles input[type="password"],
+  .ph-default-styles input[type="search"],
+  .ph-default-styles input[type="tel"],
+  .ph-default-styles input[type="url"],
+  .ph-default-styles input[type="number"],
+  .ph-default-styles textarea {
+    /* Consistent with other defaults, Tailwind uses font-sans */
+    /* text-sm, font-normal, leading-5 */
+    /* text-gray-900 is #1a202c, using established default */
+    /* bg-white */
+    /* border border-gray-300 (#d1d5db), using established default */
+    /* rounded-md */
+    /* py-[7px] (textarea) / py-2 (input), px-3 */
+    /* w-full */
+    /* For some default spacing */
+    @apply mb-2.5 box-border w-full rounded-md border border-input bg-card px-3 py-1.75 font-sans text-sm font-normal leading-5 text-foreground;
+  }
+
+  .ph-default-styles textarea {
+    /* min-h-9 from textarea styles */
+    /* resize-y from textarea styles */
+    @apply min-h-9 resize-y;
+  }
+
+  .ph-default-styles input[type="text"]:is([readonly], [disabled]),
+  .ph-default-styles input[type="email"]:is([readonly], [disabled]),
+  .ph-default-styles input[type="password"]:is([readonly], [disabled]),
+  .ph-default-styles input[type="search"]:is([readonly], [disabled]),
+  .ph-default-styles input[type="tel"]:is([readonly], [disabled]),
+  .ph-default-styles input[type="url"]:is([readonly], [disabled]),
+  .ph-default-styles input[type="number"]:is([readonly], [disabled]),
+  .ph-default-styles textarea:is([readonly], [disabled]) {
+    @apply bg-background text-muted-foreground;
+  }
+
+  .ph-default-styles select {
+    @apply mb-2.5 box-border w-full rounded-md border border-input bg-card px-3 py-1.75 font-sans text-sm font-normal leading-5 text-foreground;
+  }
+
+  .ph-default-styles select:disabled {
+    @apply bg-background text-muted-foreground;
+  }
+
+  .ph-default-styles input[type="checkbox"],
+  .ph-default-styles input[type="radio"] {
+    @apply size-4 accent-primary;
+  }
+
+  /* Buttons: outlined; a utility class on one still wins, as base styles do. */
+  .ph-default-styles button {
+    @apply inline-flex items-center justify-center gap-2 rounded-md border border-input bg-card px-3 py-1.5 font-sans text-sm font-medium leading-5 text-foreground transition-colors;
+  }
+
+  .ph-default-styles button:hover:not(:disabled) {
+    @apply bg-accent text-accent-foreground;
+  }
+
+  .ph-default-styles button:focus-visible {
+    @apply outline-none ring-2 ring-ring/50 ring-offset-2;
+  }
+
+  .ph-default-styles button:disabled {
+    @apply cursor-not-allowed opacity-50;
+  }
+
+  .ph-default-styles button[type="submit"] {
+    @apply border-primary bg-primary text-primary-foreground;
+  }
+
+  .ph-default-styles button[type="submit"]:hover:not(:disabled) {
+    @apply bg-primary/90 text-primary-foreground;
+  }
+
+  /* Default styles for anchor/links */
+  .ph-default-styles a {
+    /* Example link color - match your design system */
+    @apply text-info no-underline;
+  }
+
+  .ph-default-styles a:hover {
+    /* Darker shade for hover */
+    @apply text-info brightness-50 underline;
+  }
+
+  .ph-default-styles a:focus {
+    /* Example focus ring */
+    @apply outline-none ring-2 ring-ring/50 ring-offset-2;
+  }
+
+  /* Default styles for lists */
+  .ph-default-styles ul,
+  .ph-default-styles ol {
+    @apply mb-0 mt-0 pl-0;
+  }
+
+  /* Default styles for labels */
+  .ph-default-styles label {
+    /* font-medium or similar */
+    /* Match other text colors */
+    @apply block font-sans font-medium text-foreground;
+  }
+
+  /* Default styles for horizontal rules */
+  .ph-default-styles hr {
+    /* A common light grey border color */
+    @apply my-4 h-px border-0 bg-border;
+  }
+}

package/vendor.css

@@ -0,0 +1,3 @@
+/* Third-party CSS the design system's components need; plain CSS, no Tailwind. */
+@import "react-toastify/dist/ReactToastify.css";
+@import "react-json-view-lite/dist/index.css";

package/dist/button-C8doazjv.d.ts

@@ -1,15 +0,0 @@
-import * as react from "react";
-import { VariantProps } from "class-variance-authority";
-import * as class_variance_authority_types0 from "class-variance-authority/types";
-
-//#region src/ui/components/button/button.d.ts
-declare const buttonVariants: (props?: ({
-  variant?: "default" | "outline" | "ghost" | null | undefined;
-} & class_variance_authority_types0.ClassProp) | undefined) => string;
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
-}
-declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
-//#endregion
-export { ButtonProps as n, buttonVariants as r, Button as t };
-//# sourceMappingURL=button-C8doazjv.d.ts.map

package/dist/button-C8doazjv.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"button-C8doazjv.d.ts","names":[],"sources":["../src/ui/components/button/button.tsx"],"mappings":";;;;;cAMM,cAAA,GAAc,KAAA;;IAqBnB,+BAAA,CAAA,SAAA;AAAA,UAEgB,WAAA,SAEb,KAAA,CAAM,oBAAA,CAAqB,iBAAA,GAC3B,YAAA,QAAoB,cAAA;EACtB,OAAA;AAAA;AAAA,cAGI,MAAA,EAAM,KAAA,CAAA,yBAAA,CAAA,WAAA,GAAA,KAAA,CAAA,aAAA,CAAA,iBAAA"}

package/dist/character-counter-BWoglM2P.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"character-counter-BWoglM2P.d.ts","names":[],"sources":["../src/ui/components/character-counter/character-counter.tsx"],"mappings":";UAAiB,qBAAA;EACf,SAAA;EACA,KAAA;AAAA;AAAA,cAeW,gBAAA,EAAkB,KAAA,CAAM,EAAA,CAAG,qBAAA"}

package/dist/checkbox-CGBtXQnI.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"checkbox-CGBtXQnI.d.ts","names":[],"sources":["../src/ui/components/checkbox/checkbox.tsx"],"mappings":";;;;;KAQK,iBAAA,GAAoB,IAAA,CACvB,KAAA,CAAM,oBAAA,CAAqB,iBAAA,SACrB,cAAA,CAAe,aAAA;AAAA,UAGN,aAAA,SACP,iBAAA,EAAmB,cAAA,CAAe,aAAA;EAC1C,QAAA,KAAa,OAAA,EAAS,aAAA,eAA4B,OAAA;AAAA;AAAA,cAG9C,QAAA,EAAQ,KAAA,CAAA,yBAAA,CAAA,aAAA,GAAA,KAAA,CAAA,aAAA,CAAA,iBAAA"}

package/dist/checkbox-base-CZo-4eL0.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"checkbox-base-CZo-4eL0.d.ts","names":[],"sources":["../src/ui/components/checkbox/checkbox-base.tsx"],"mappings":";;;;KAIK,aAAA;AAAA,cAQC,YAAA,EAAY,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,iBAAA,CAAA,aAAA,GAAA,OAAA,CAAA,aAAA,CAAA,iBAAA"}

package/dist/command-tFzjgzge.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"command-tFzjgzge.d.ts","names":[],"sources":["../src/ui/components/command/command.tsx"],"mappings":";;;cAKM,OAAA,EAAO,KAAA,CAAA,yBAAA,CAAA,IAAA;;;;;;;;;;;;;;;;;cAeP,YAAA,EAAY,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,IAAA,CAAA,IAAA,CAAA,IAAA,CAAA,KAAA,CAAA,iBAAA,CAAA,KAAA,CAAA,mBAAA,CAAA,gBAAA,GAAA,gBAAA,iBAAA,KAAA,CAAA,mBAAA,CAAA,gBAAA;;;;;;;;;;cAyCZ,WAAA,EAAW,KAAA,CAAA,yBAAA,CAAA,IAAA;;;;;;;;;cAoBX,cAAA,EAAc,KAAA,CAAA,yBAAA,CAAA,IAAA;;;;;;;;;;cAMd,YAAA,EAAY,KAAA,CAAA,yBAAA,CAAA,IAAA;;;;;;;cAMZ,YAAA,EAAY,KAAA,CAAA,yBAAA,CAAA,IAAA;;;;;;;;;;;cAgBZ,WAAA,EAAW,KAAA,CAAA,yBAAA,CAAA,IAAA"}

package/dist/content-BHWIqmio.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"content-BHWIqmio.d.ts","names":[],"sources":["../src/ui/components/select-field/content.tsx"],"mappings":";;;;UAaU,YAAA;EACR,UAAA;EACA,cAAA,EAAgB,KAAA,CAAM,SAAA,CAAU,cAAA;EAChC,QAAA;EACA,cAAA;EACA,aAAA;EACA,qBAAA;EACA,OAAA,EAAS,WAAA;EACT,eAAA,GAAkB,WAAA;EAClB,SAAA;EACA,YAAA,GAAe,KAAA;AAAA;AAAA,cAGJ,OAAA,EAAS,KAAA,CAAM,EAAA,CAAG,YAAA"}

package/dist/enum-field-CwZVs3Ux.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"enum-field-CwZVs3Ux.d.ts","names":[],"sources":["../src/ui/components/enum-field/enum-field.tsx"],"mappings":";;;;;KAUY,cAAA;EAEN,OAAA;AAAA,KACG,oBAAA,GAAuB,gBAAA;EAE1B,OAAA;AAAA,IACE,oBAAA;EAEF,OAAA;AAAA,IACE,gBAAA;AAAA,cAEK,SAAA,EAAS,KAAA,CAAA,yBAAA,CAAA,cAAA,GAAA,KAAA,CAAA,aAAA,CAAA,iBAAA,GAAA,cAAA"}

package/dist/form-CKRKn0TQ.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"form-CKRKn0TQ.d.ts","names":[],"sources":["../src/ui/components/form/form.tsx"],"mappings":";;;;KAcK,WAAA,GAAc,aAAA;;;AALgD;EASjE,aAAA;;;;EAKA,MAAA;AAAA;AAAA,UAEQ,SAAA;EAFF;AAAA;;;;EAQN,QAAA,EAAU,KAAA,CAAM,SAAA,KAAc,OAAA,EAAS,WAAA,KAAgB,KAAA,CAAM,SAAA;EAAN;;;;;;EAQvD,QAAA,GAAW,IAAA,iBAAqB,OAAA;EAsDrB;;;;;EA/CX,uBAAA;EAfuD;;;;;;;;EAyBvD,iBAAA;EAcA;;;;EARA,aAAA,GAAgB,MAAA;EA6Bd;;;;;;EArBF,0BAAA;EAyND;;;;;EAlNC,cAAA,GAAiB,YAAA;EA2DF;;;;;;;;;;;EA9Cf,sBAAA,IACE,KAAA,EAAO,KAAA,EACP,UAAA,eACG,MAAA;;;;;EAML,SAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAqCW,IAAA,EAAI,KAAA,CAAA,yBAAA,CAAA,SAAA,GAAA,KAAA,CAAA,aAAA,CAAA,aAAA"}

package/dist/form-description-CYkcMEzm.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"form-description-CYkcMEzm.d.ts","names":[],"sources":["../src/ui/components/form-description/form-description.tsx"],"mappings":";UAEiB,oBAAA,SAA6B,KAAA,CAAM,iBAAA;EAClD,EAAA,GAAK,KAAA,CAAM,WAAA;EACX,SAAA;AAAA;AAAA,cAGI,eAAA,EAAiB,KAAA,CAAM,EAAA,CAAG,oBAAA"}

package/dist/form-group-C8kL6pdZ.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"form-group-C8kL6pdZ.d.ts","names":[],"sources":["../src/ui/components/form-group/form-group.tsx"],"mappings":";cAAa,SAAA,EAAW,KAAA,CAAM,EAAA,CAAG,KAAA,CAAM,iBAAA"}

package/dist/form-label-b6nQi0XO.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"form-label-b6nQi0XO.d.ts","names":[],"sources":["../src/ui/components/form-label/form-label.tsx"],"mappings":";UAIiB,cAAA,SACP,KAAA,CAAM,iBAAA,EAAmB,KAAA,CAAM,mBAAA,CAAoB,gBAAA;EAC3D,QAAA;EACA,QAAA;EACA,WAAA;EACA,QAAA;EACA,MAAA;EACA,SAAA;AAAA;AAAA,cAGW,SAAA,EAAW,KAAA,CAAM,EAAA,CAAG,cAAA"}

package/dist/form-message-Dq72nBXz.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"form-message-Dq72nBXz.d.ts","names":[],"sources":["../src/ui/components/form-message/form-message.tsx"],"mappings":";KAEY,eAAA;AAAA,KAEP,mBAAA,WAA8B,KAAA,CAAM,WAAA,GAAc,KAAA,CAAM,WAAA;EAC3D,IAAA,GAAO,eAAA;EACP,EAAA,GAAK,CAAA;EACL,SAAA;AAAA;AAAA,KAGU,gBAAA,WAA2B,KAAA,CAAM,WAAA,IAC3C,mBAAA,CAAoB,CAAA,IAClB,IAAA,CAAK,KAAA,CAAM,wBAAA,CAAyB,CAAA,SAAU,mBAAA;AAAA,cAE5C,cAAA;AAAA,cAEO,WAAA,aAAwB,KAAA,CAAM,WAAA,UAAqB,cAAA,EAC9D,KAAA,EAAO,gBAAA,CAAiB,CAAA,MACrB,KAAA,CAAM,YAAA"}

package/dist/form-server-error-message-DXbaiTfF.d.ts

@@ -1,7 +0,0 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
-
-//#region src/ui/components/form-message/form-server-error-message.d.ts
-declare const FormServerErrorMessage: () => react_jsx_runtime0.JSX.Element | null;
-//#endregion
-export { FormServerErrorMessage as t };
-//# sourceMappingURL=form-server-error-message-DXbaiTfF.d.ts.map

package/dist/form-server-error-message-DXbaiTfF.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"form-server-error-message-DXbaiTfF.d.ts","names":[],"sources":["../src/ui/components/form-message/form-server-error-message.tsx"],"mappings":";;;cAGa,sBAAA,QAAsB,kBAAA,CAAA,GAAA,CAAA,OAAA"}