@q9labsai/chalk-ui 4.0.1 → 4.1.1

package/dist/styles.css

@@ -33,6 +33,14 @@
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
@@ -70,6 +78,19 @@
   --ring: #0f1115;
   --radius: 0.5rem;
 
+  /* Sidebar: a chalkboard slate that anchors the paper canvas beside it. */
+  --sidebar: #171a18;
+  --sidebar-foreground: #b9c0ba;
+  --sidebar-primary: #f7f6f2;
+  --sidebar-primary-foreground: #121512;
+  --sidebar-accent: #2b302c;
+  --sidebar-accent-foreground: #ffffff;
+  --sidebar-border: #2c312d;
+  --sidebar-ring: #8fbf87;
+  --sidebar-width: 16rem;
+  --sidebar-width-icon: 3.25rem;
+  --sidebar-width-mobile: 18rem;
+
   --chalk-paper: #ffffff;
   --chalk-ink: #0f1115;
   --chalk-ink-2: #4b5563;
@@ -394,6 +415,14 @@
   --border: #313a3f;
   --input: #3d484e;
   --ring: #ffffff;
+  --sidebar: #121719;
+  --sidebar-foreground: #a4b0b5;
+  --sidebar-primary: #dde3e6;
+  --sidebar-primary-foreground: #0f1115;
+  --sidebar-accent: #232a2e;
+  --sidebar-accent-foreground: #ffffff;
+  --sidebar-border: #232a2e;
+  --sidebar-ring: #8fbf87;
   --chalk-paper: #1b2023;
   --chalk-ink: #dde3e6;
   --chalk-ink-2: #8b979d;
@@ -634,6 +663,36 @@
   --chalk-app-shadow-control: 0 6px 18px rgba(0, 0, 0, 0.7);
 }
 
+[data-chalk][data-chalk-palette="cosmic-chalk"] {
+  --chalk-app-canvas: #080f20;
+  --chalk-app-chrome: #10182b;
+  --chalk-app-stage: #0b1427;
+  --chalk-app-panel: #10182b;
+  --chalk-app-tile-base: #10182b;
+  --chalk-app-tile-color-strength: 18%;
+  --chalk-app-text: #f4ecd7;
+  --chalk-app-text-muted: #aeb8c9;
+  --chalk-app-line: #2c3d59;
+  --chalk-app-line-strong: #415571;
+  --chalk-app-control: #121e34;
+  --chalk-app-control-hover: #192944;
+  --chalk-app-control-group: #0c162a;
+  --chalk-app-control-primary: #1b3953;
+  --chalk-app-control-primary-hover: #244b68;
+  --chalk-app-control-active: #172b45;
+  --chalk-app-control-active-line: #8fdcff;
+  --chalk-app-control-active-text: #f4ecd7;
+  --chalk-app-message-remote: #17243c;
+  --chalk-app-message-local: #1b3953;
+  --chalk-app-message-local-text: #f4ecd7;
+  --chalk-app-input: #0c1629;
+  --chalk-app-danger: #ff9ba8;
+  --chalk-app-danger-hover: #ffb4be;
+  --chalk-app-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.32);
+  --chalk-app-shadow-sm: 0 12px 36px rgba(0, 0, 0, 0.34);
+  --chalk-app-shadow-control: 0 7px 22px rgba(0, 0, 0, 0.42);
+}
+
 [data-chalk][data-chalk-palette] {
   --background: var(--chalk-app-canvas);
   --foreground: var(--chalk-app-text);
@@ -687,67 +746,111 @@
   background-color: color-mix(in srgb, var(--chalk-participant-color) var(--chalk-app-tile-color-strength), var(--chalk-app-tile-base));
 }
 
-/* =============================================================================
-   Base Styles & Scoped Reset
-   ============================================================================= */
-
-:where([data-chalk], .chalk-root) {
-  font-family: var(--chalk-font-family);
-  color: var(--foreground);
-  background: var(--background);
-  line-height: 1.5;
-  font-size: 16px;
-  text-align: left;
-  text-transform: none;
-  letter-spacing: normal;
-  text-size-adjust: 100%;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  isolation: isolate;
+[data-chalk][data-chalk-skin="chalk"][data-chalk-palette="cosmic-chalk"] :where(button, a, input, select, textarea, [tabindex]):focus-visible {
+  outline: 2px dashed var(--chalk-focus, #8fdcff);
+  outline-offset: 2px;
 }
 
-:where([data-chalk], .chalk-root),
-:where([data-chalk], .chalk-root) *,
-:where([data-chalk], .chalk-root) *::before,
-:where([data-chalk], .chalk-root) *::after {
-  box-sizing: border-box;
+main[data-chalk][data-chalk-skin="chalk"][data-chalk-palette="cosmic-chalk"]::before,
+main[data-chalk][data-chalk-skin="chalk"][data-chalk-palette="cosmic-chalk"]::after {
+  content: "";
+  position: absolute;
+  pointer-events: none;
+  z-index: 0;
 }
 
-:where([data-chalk], .chalk-root) :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) {
-  margin: 0;
+main[data-chalk][data-chalk-skin="chalk"][data-chalk-palette="cosmic-chalk"]::before {
+  inset: 0;
+  opacity: 0.28;
+  background: radial-gradient(circle at 12% 18%, #8fdcff 0 1px, transparent 1.7px), radial-gradient(circle at 76% 13%, #f5d88c 0 1px, transparent 1.7px), radial-gradient(circle at 88% 72%, #8fdcff 0 1px, transparent 1.7px), radial-gradient(circle at 22% 84%, #f4ecd7 0 1px, transparent 1.7px);
 }
 
-:where([data-chalk], .chalk-root) :where(ul, ol) {
-  margin: 0;
-  padding: 0;
-  list-style: none;
+main[data-chalk][data-chalk-skin="chalk"][data-chalk-palette="cosmic-chalk"]::after {
+  inset: 9% 7%;
+  opacity: 0.14;
+  background: linear-gradient(24deg, transparent 0 49.4%, #8fdcff 49.6% 49.9%, transparent 50.1%), linear-gradient(156deg, transparent 0 49.6%, #f5d88c 49.8% 50%, transparent 50.2%);
 }
 
-:where([data-chalk], .chalk-root) :where(button, input, optgroup, select, textarea) {
-  font: inherit;
-  color: inherit;
-  letter-spacing: inherit;
-  text-transform: none;
-  margin: 0;
+main[data-chalk][data-chalk-skin="chalk"][data-chalk-palette="cosmic-chalk"] > * {
+  position: relative;
+  z-index: 1;
 }
 
-:where([data-chalk], .chalk-root) :where(button, [type="button"], [type="reset"], [type="submit"]) {
-  appearance: none;
-  -webkit-appearance: none;
+@media (prefers-reduced-motion: reduce) {
+  main[data-chalk][data-chalk-skin="chalk"][data-chalk-palette="cosmic-chalk"]::before,
+  main[data-chalk][data-chalk-skin="chalk"][data-chalk-palette="cosmic-chalk"]::after {
+    opacity: 0.18;
+  }
 }
 
-:where([data-chalk], .chalk-root) :where(img, svg, video, canvas, audio, iframe, embed, object) {
-  display: block;
-  vertical-align: middle;
-}
+/* =============================================================================
+   Base Styles & Scoped Reset
 
-:where([data-chalk], .chalk-root) :where(img) {
-  max-width: 100%;
-  height: auto;
-}
+   Lives in the `base` layer so that utilities keep beating it. Unlayered, a
+   zero-specificity `:where([data-chalk])` reset still outranks every utility,
+   which silently strips `bg-*` and `text-*` from any element that opens a
+   chalk scope.
+   ============================================================================= */
+
+@layer base {
+  :where([data-chalk], .chalk-root) {
+    font-family: var(--chalk-font-family);
+    color: var(--foreground);
+    background: var(--background);
+    line-height: 1.5;
+    font-size: 16px;
+    text-align: left;
+    text-transform: none;
+    letter-spacing: normal;
+    text-size-adjust: 100%;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    isolation: isolate;
+  }
+
+  :where([data-chalk], .chalk-root),
+  :where([data-chalk], .chalk-root) *,
+  :where([data-chalk], .chalk-root) *::before,
+  :where([data-chalk], .chalk-root) *::after {
+    box-sizing: border-box;
+  }
+
+  :where([data-chalk], .chalk-root) :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) {
+    margin: 0;
+  }
+
+  :where([data-chalk], .chalk-root) :where(ul, ol) {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  :where([data-chalk], .chalk-root) :where(button, input, optgroup, select, textarea) {
+    font: inherit;
+    color: inherit;
+    letter-spacing: inherit;
+    text-transform: none;
+    margin: 0;
+  }
+
+  :where([data-chalk], .chalk-root) :where(button, [type="button"], [type="reset"], [type="submit"]) {
+    appearance: none;
+    -webkit-appearance: none;
+  }
+
+  :where([data-chalk], .chalk-root) :where(img, svg, video, canvas, audio, iframe, embed, object) {
+    display: block;
+    vertical-align: middle;
+  }
+
+  :where([data-chalk], .chalk-root) :where(img) {
+    max-width: 100%;
+    height: auto;
+  }
 
-:where([data-chalk], .chalk-root) :where(video) {
-  max-width: 100%;
+  :where([data-chalk], .chalk-root) :where(video) {
+    max-width: 100%;
+  }
 }
 
 /* =============================================================================

package/dist/toast.js

@@ -4,6 +4,9 @@
 import * as React from "react";
 import { Toast as ToastPrimitive } from "@base-ui/react/toast";
 
+// src/lib/use-portal-theme.ts
+import { useSyncExternalStore } from "react";
+
 // src/lib/theme.ts
 var THEME_ATTRIBUTE_NAMES = ["data-chalk-theme", "data-theme"];
 var THEME_CLASS_NAMES = ["dark", "light"];
@@ -43,6 +46,28 @@ var resolvePortalThemeFromDocument = ({ defaultTheme = "light", allowSystem = tr
   return resolveThemeFromDocument({ defaultTheme, allowSystem });
 };
 
+// src/lib/use-portal-theme.ts
+var SYSTEM_DARK_QUERY2 = "(prefers-color-scheme: dark)";
+var WATCHED_ATTRIBUTES = ["class", "data-chalk-theme", "data-theme"];
+function subscribe(onChange) {
+  if (typeof document === "undefined") return () => {
+  };
+  const observer = new MutationObserver(onChange);
+  const options = { attributes: true, attributeFilter: [...WATCHED_ATTRIBUTES] };
+  observer.observe(document.documentElement, options);
+  if (document.body) observer.observe(document.body, options);
+  const media = typeof window.matchMedia === "function" ? window.matchMedia(SYSTEM_DARK_QUERY2) : null;
+  media?.addEventListener("change", onChange);
+  return () => {
+    observer.disconnect();
+    media?.removeEventListener("change", onChange);
+  };
+}
+function usePortalTheme(defaultTheme = "light") {
+  const read = () => resolvePortalThemeFromDocument({ defaultTheme });
+  return useSyncExternalStore(subscribe, read, () => defaultTheme);
+}
+
 // src/lib/utils.ts
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
@@ -85,7 +110,7 @@ var ToastAction = React.forwardRef(function ToastAction2({ className, ...props }
 });
 function ToastViewport({ className, children, ...props }) {
   const { toasts } = ToastPrimitive.useToastManager();
-  const portalTheme = resolvePortalThemeFromDocument();
+  const portalTheme = usePortalTheme();
   return /* @__PURE__ */ jsxs(ToastPrimitive.Viewport, { "data-chalk": true, "data-chalk-theme": portalTheme, "data-slot": "toast-viewport", className: cn("chalk-ui-root chalk-ui-toast-viewport", className), ...props, children: [
     children,
     toasts.map((toastObject) => {

package/dist/tooltip.js

@@ -11,6 +11,9 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 
+// src/lib/use-portal-theme.ts
+import { useSyncExternalStore } from "react";
+
 // src/lib/theme.ts
 var THEME_ATTRIBUTE_NAMES = ["data-chalk-theme", "data-theme"];
 var THEME_CLASS_NAMES = ["dark", "light"];
@@ -50,6 +53,28 @@ var resolvePortalThemeFromDocument = ({ defaultTheme = "light", allowSystem = tr
   return resolveThemeFromDocument({ defaultTheme, allowSystem });
 };
 
+// src/lib/use-portal-theme.ts
+var SYSTEM_DARK_QUERY2 = "(prefers-color-scheme: dark)";
+var WATCHED_ATTRIBUTES = ["class", "data-chalk-theme", "data-theme"];
+function subscribe(onChange) {
+  if (typeof document === "undefined") return () => {
+  };
+  const observer = new MutationObserver(onChange);
+  const options = { attributes: true, attributeFilter: [...WATCHED_ATTRIBUTES] };
+  observer.observe(document.documentElement, options);
+  if (document.body) observer.observe(document.body, options);
+  const media = typeof window.matchMedia === "function" ? window.matchMedia(SYSTEM_DARK_QUERY2) : null;
+  media?.addEventListener("change", onChange);
+  return () => {
+    observer.disconnect();
+    media?.removeEventListener("change", onChange);
+  };
+}
+function usePortalTheme(defaultTheme = "light") {
+  const read = () => resolvePortalThemeFromDocument({ defaultTheme });
+  return useSyncExternalStore(subscribe, read, () => defaultTheme);
+}
+
 // src/tooltip.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 function TooltipProvider({ delay = 0, ...props }) {
@@ -73,7 +98,7 @@ function TooltipTrigger({ ...props }) {
   return /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
 }
 function TooltipContent({ className, side = "top", sideOffset = 4, align = "center", alignOffset = 0, children, ...props }) {
-  const portalTheme = resolvePortalThemeFromDocument();
+  const portalTheme = usePortalTheme();
   return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Positioner, { align, alignOffset, side, sideOffset, className: "z-[9999]", children: /* @__PURE__ */ jsxs(
     TooltipPrimitive.Popup,
     {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@q9labsai/chalk-ui",
-  "version": "4.0.1",
+  "version": "4.1.1",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -35,9 +35,15 @@
       "input": [
         "./dist/input.d.ts"
       ],
+      "menu": [
+        "./dist/menu.d.ts"
+      ],
       "select": [
         "./dist/select.d.ts"
       ],
+      "sidebar": [
+        "./dist/sidebar.d.ts"
+      ],
       "textarea": [
         "./dist/textarea.d.ts"
       ],
@@ -104,10 +110,18 @@
       "types": "./dist/input.d.ts",
       "import": "./dist/input.js"
     },
+    "./menu": {
+      "types": "./dist/menu.d.ts",
+      "import": "./dist/menu.js"
+    },
     "./select": {
       "types": "./dist/select.d.ts",
       "import": "./dist/select.js"
     },
+    "./sidebar": {
+      "types": "./dist/sidebar.d.ts",
+      "import": "./dist/sidebar.js"
+    },
     "./textarea": {
       "types": "./dist/textarea.d.ts",
       "import": "./dist/textarea.js"
@@ -165,7 +179,7 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.0.0",
-    "@q9labsai/chalk-assets": "^4.0.1",
+    "@q9labsai/chalk-assets": "^4.1.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "tailwind-merge": "^3.6.0"
@@ -176,7 +190,7 @@
     "@types/node": "^24.10.1",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.2.3",
-    "happy-dom": "^20.0.11",
+    "happy-dom": "^20.11.2",
     "react-dom": "19.2.7",
     "tailwindcss": "^4.1.18",
     "tw-animate-css": "^1.3.0",
@@ -186,11 +200,11 @@
     "react": "^18.0.0 || ^19.0.0"
   },
   "scripts": {
-    "build": "rm -rf ./dist && tsup ./src/index.ts ./src/assets.ts ./src/badge.tsx ./src/button.tsx ./src/card.tsx ./src/input.tsx ./src/select.tsx ./src/textarea.tsx ./src/spinner.tsx ./src/skeleton.tsx ./src/icon-button.tsx ./src/progress-bar.tsx ./src/lib/utils.ts ./src/reactions.ts ./src/status-badge.tsx ./src/toast.tsx ./src/toggle.tsx ./src/toggle-group.tsx ./src/tooltip.tsx --format esm --out-dir ./dist --platform node --no-splitting --external react --external @base-ui/react --external @q9labsai/chalk-assets --external class-variance-authority --external clsx --external tailwind-merge && pnpm run build:types && pnpm run build:css && pnpm run build:logos",
+    "build": "rm -rf ./dist && tsup ./src/index.ts ./src/assets.ts ./src/badge.tsx ./src/button.tsx ./src/card.tsx ./src/input.tsx ./src/menu.tsx ./src/select.tsx ./src/sidebar.tsx ./src/textarea.tsx ./src/spinner.tsx ./src/skeleton.tsx ./src/icon-button.tsx ./src/progress-bar.tsx ./src/lib/utils.ts ./src/reactions.ts ./src/status-badge.tsx ./src/toast.tsx ./src/toggle.tsx ./src/toggle-group.tsx ./src/tooltip.tsx --format esm --out-dir ./dist --platform node --no-splitting --external react --external @base-ui/react --external @q9labsai/chalk-assets --external class-variance-authority --external clsx --external tailwind-merge && pnpm run build:types && pnpm run build:css && pnpm run build:logos",
     "build:types": "rm -f tsconfig.tsbuildinfo && tsc --emitDeclarationOnly --declaration --outDir dist",
     "build:css": "mkdir -p ./dist && cp ./src/styles/index.css ./dist/styles.css",
     "build:logos": "mkdir -p ./dist && cp -R ../assets/src/logos ./dist/",
-    "dev": "pnpm run build:css && pnpm run build:logos && tsup ./src/index.ts ./src/assets.ts ./src/badge.tsx ./src/button.tsx ./src/card.tsx ./src/input.tsx ./src/select.tsx ./src/textarea.tsx ./src/spinner.tsx ./src/skeleton.tsx ./src/icon-button.tsx ./src/progress-bar.tsx ./src/lib/utils.ts ./src/reactions.ts ./src/status-badge.tsx ./src/toast.tsx ./src/toggle.tsx ./src/toggle-group.tsx ./src/tooltip.tsx --format esm --out-dir ./dist --platform node --no-splitting --external react --external @base-ui/react --external @q9labsai/chalk-assets --external class-variance-authority --external clsx --external tailwind-merge --watch",
+    "dev": "pnpm run build:css && pnpm run build:logos && tsup ./src/index.ts ./src/assets.ts ./src/badge.tsx ./src/button.tsx ./src/card.tsx ./src/input.tsx ./src/menu.tsx ./src/select.tsx ./src/sidebar.tsx ./src/textarea.tsx ./src/spinner.tsx ./src/skeleton.tsx ./src/icon-button.tsx ./src/progress-bar.tsx ./src/lib/utils.ts ./src/reactions.ts ./src/status-badge.tsx ./src/toast.tsx ./src/toggle.tsx ./src/toggle-group.tsx ./src/tooltip.tsx --format esm --out-dir ./dist --platform node --no-splitting --external react --external @base-ui/react --external @q9labsai/chalk-assets --external class-variance-authority --external clsx --external tailwind-merge --watch",
     "test": "pnpm exec vitest run --config ./vitest.config.ts",
     "check-types": "tsc --project tsconfig.check-types.json --noEmit",
     "lint": "pnpm exec oxfmt --check . && tsc --project tsconfig.check-types.json --noEmit",