@q9labsai/chalk-ui 4.1.11 → 4.1.13

package/dist/logos/chalk-logo-on-dark.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 280 80" fill="none">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 80" fill="none">
   <defs>
     <linearGradient id="grn" x1="0%" y1="0%" x2="100%" y2="0%">
       <stop offset="0%" stop-color="#C5E5C0"/><stop offset="100%" stop-color="#80B879"/>

package/dist/logos/chalk-logo.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 280 80" fill="none">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 80" fill="none">
   <defs>
     <linearGradient id="grn" x1="0%" y1="0%" x2="100%" y2="0%">
       <stop offset="0%" stop-color="#C5E5C0"/><stop offset="100%" stop-color="#80B879"/>

package/dist/styles.css

@@ -175,6 +175,8 @@
   --chalk-app-control-group: #f0efeb;
   --chalk-app-control-primary: #202329;
   --chalk-app-control-primary-hover: #343840;
+  --chalk-entrance-primary: #202329;
+  --chalk-entrance-primary-hover: #343840;
   --chalk-app-control-active: #dff2f7;
   --chalk-app-control-active-line: #9dcfe1;
   --chalk-app-control-active-text: #202329;
@@ -1726,6 +1728,199 @@ main[data-chalk][data-chalk-skin="chalk"][data-chalk-palette="cosmic-chalk"] > *
   animation: chalk-search-highlight 2s ease-in-out infinite;
 }
 
+/* Canonical logo motion: the chalk sticks move while the wordmark stays fixed. */
+.chalk-logo {
+  display: block;
+  overflow: visible;
+}
+
+.chalk-logo__stick {
+  transform-box: fill-box;
+  transform-origin: center;
+}
+
+@keyframes chalk-logo-orbit-green {
+  0%,
+  100% {
+    transform: translate(0, 0) rotate(0deg);
+  }
+
+  50% {
+    transform: translate(-4px, 3px) rotate(-5deg);
+  }
+}
+
+@keyframes chalk-logo-orbit-yellow {
+  0%,
+  100% {
+    transform: translate(0, 0) rotate(0deg);
+  }
+
+  50% {
+    transform: translate(3px, -4px) rotate(4deg);
+  }
+}
+
+@keyframes chalk-logo-orbit-blue {
+  0%,
+  100% {
+    transform: translate(0, 0) rotate(0deg);
+  }
+
+  50% {
+    transform: translate(5px, 2px) rotate(5deg);
+  }
+}
+
+@keyframes chalk-logo-orbit-pink {
+  0%,
+  100% {
+    transform: translate(0, 0) rotate(0deg);
+  }
+
+  50% {
+    transform: translate(-3px, -3px) rotate(-4deg);
+  }
+}
+
+@keyframes chalk-logo-burst-green {
+  0%,
+  100% {
+    transform: translate(0, 0) scale(1) rotate(0deg);
+  }
+
+  24% {
+    transform: translate(-14px, -9px) scale(1.14) rotate(-8deg);
+  }
+
+  54% {
+    transform: translate(-2px, 2px) scale(0.98) rotate(2deg);
+  }
+}
+
+@keyframes chalk-logo-burst-yellow {
+  0%,
+  100% {
+    transform: translate(0, 0) scale(1) rotate(0deg);
+  }
+
+  24% {
+    transform: translate(-4px, -14px) scale(1.14) rotate(-4deg);
+  }
+
+  54% {
+    transform: translate(1px, 1px) scale(0.98) rotate(1deg);
+  }
+}
+
+@keyframes chalk-logo-burst-blue {
+  0%,
+  100% {
+    transform: translate(0, 0) scale(1) rotate(0deg);
+  }
+
+  24% {
+    transform: translate(14px, -6px) scale(1.16) rotate(8deg);
+  }
+
+  54% {
+    transform: translate(2px, 1px) scale(0.98) rotate(-2deg);
+  }
+}
+
+@keyframes chalk-logo-burst-pink {
+  0%,
+  100% {
+    transform: translate(0, 0) scale(1) rotate(0deg);
+  }
+
+  24% {
+    transform: translate(11px, 12px) scale(1.13) rotate(7deg);
+  }
+
+  54% {
+    transform: translate(1px, -1px) scale(0.98) rotate(-1deg);
+  }
+}
+
+[data-chalk-logo-motion="orbit-burst"] .chalk-logo__stick {
+  animation-duration: 4.8s;
+  animation-iteration-count: infinite;
+  animation-timing-function: ease-in-out;
+  will-change: transform;
+}
+
+[data-chalk-logo-motion="orbit-burst"] .chalk-logo__stick--green {
+  animation-name: chalk-logo-orbit-green;
+  animation-delay: -120ms;
+}
+
+[data-chalk-logo-motion="orbit-burst"] .chalk-logo__stick--yellow {
+  animation-name: chalk-logo-orbit-yellow;
+  animation-delay: -760ms;
+}
+
+[data-chalk-logo-motion="orbit-burst"] .chalk-logo__stick--blue {
+  animation-name: chalk-logo-orbit-blue;
+  animation-delay: -1.35s;
+}
+
+[data-chalk-logo-motion="orbit-burst"] .chalk-logo__stick--pink {
+  animation-name: chalk-logo-orbit-pink;
+  animation-delay: -2.05s;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  [data-chalk-logo-motion="orbit-burst"]:hover .chalk-logo__stick {
+    animation-duration: 1.1s;
+    animation-delay: 0ms;
+    animation-timing-function: var(--chalk-ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
+  }
+
+  [data-chalk-logo-motion="orbit-burst"]:hover .chalk-logo__stick--green {
+    animation-name: chalk-logo-burst-green;
+  }
+
+  [data-chalk-logo-motion="orbit-burst"]:hover .chalk-logo__stick--yellow {
+    animation-name: chalk-logo-burst-yellow;
+  }
+
+  [data-chalk-logo-motion="orbit-burst"]:hover .chalk-logo__stick--blue {
+    animation-name: chalk-logo-burst-blue;
+  }
+
+  [data-chalk-logo-motion="orbit-burst"]:hover .chalk-logo__stick--pink {
+    animation-name: chalk-logo-burst-pink;
+  }
+}
+
+:where(a, button):focus-visible [data-chalk-logo-motion="orbit-burst"] .chalk-logo__stick,
+[data-chalk-logo-motion="orbit-burst"]:focus-visible .chalk-logo__stick {
+  animation-duration: 1.1s;
+  animation-delay: 0ms;
+  animation-timing-function: var(--chalk-ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
+}
+
+:where(a, button):focus-visible [data-chalk-logo-motion="orbit-burst"] .chalk-logo__stick--green,
+[data-chalk-logo-motion="orbit-burst"]:focus-visible .chalk-logo__stick--green {
+  animation-name: chalk-logo-burst-green;
+}
+
+:where(a, button):focus-visible [data-chalk-logo-motion="orbit-burst"] .chalk-logo__stick--yellow,
+[data-chalk-logo-motion="orbit-burst"]:focus-visible .chalk-logo__stick--yellow {
+  animation-name: chalk-logo-burst-yellow;
+}
+
+:where(a, button):focus-visible [data-chalk-logo-motion="orbit-burst"] .chalk-logo__stick--blue,
+[data-chalk-logo-motion="orbit-burst"]:focus-visible .chalk-logo__stick--blue {
+  animation-name: chalk-logo-burst-blue;
+}
+
+:where(a, button):focus-visible [data-chalk-logo-motion="orbit-burst"] .chalk-logo__stick--pink,
+[data-chalk-logo-motion="orbit-burst"]:focus-visible .chalk-logo__stick--pink {
+  animation-name: chalk-logo-burst-pink;
+}
+
 /* Low confidence text styling */
 .chalk-low-confidence {
   text-decoration: underline;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@q9labsai/chalk-ui",
-  "version": "4.1.11",
+  "version": "4.1.13",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -179,18 +179,16 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.0.0",
-    "@q9labsai/chalk-assets": "^4.1.11",
+    "@q9labsai/chalk-assets": "^4.1.13",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "tailwind-merge": "^3.6.0"
   },
   "devDependencies": {
     "@tailwindcss/cli": "^4.1.18",
-    "@testing-library/react": "^16.3.1",
     "@types/node": "^24.10.1",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.2.3",
-    "happy-dom": "^20.11.2",
     "react-dom": "19.2.7",
     "tailwindcss": "^4.1.18",
     "tw-animate-css": "^1.3.0",
@@ -205,7 +203,6 @@
     "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/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",
     "clean": "rm -rf dist"

package/dist/test-utils.d.ts

@@ -1,3 +0,0 @@
-import type * as React from "react";
-export declare function renderForwardRef(component: unknown, props?: Record<string, unknown>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
-//# sourceMappingURL=test-utils.d.ts.map

package/dist/test-utils.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"test-utils.d.ts","sourceRoot":"","sources":["../src/test-utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAMpC,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,OAAO,EAAE,KAAK,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,0EAEvF"}