@kanso-labs/kanso-ui 0.11.21 → 0.12.0

package/dist/styles.css

@@ -23,6 +23,10 @@
 }
 
 @layer priority3 {
+  .xrh88j3 {
+    border-color: color-mix(in srgb,var(--xn0syi6) calc(var(--x1cq03z9) * 100%),transparent);
+  }
+
   .x9r1u3d {
     border-color: #0000;
   }
@@ -55,6 +59,10 @@
     border-radius: var(--x1kmbna2);
   }
 
+  .x62ce2h {
+    border-radius: var(--x1m0y4ip);
+  }
+
   .x1tfhd1 {
     border-radius: var(--x1qkrqlv);
   }
@@ -195,13 +203,13 @@
     text-decoration: none;
   }
 
-  .xtecew7:active:not(:disabled) {
-    border-radius: var(--x1m0y4ip);
-  }
-
   .xd8uu4e:disabled {
     border-color: color-mix(in srgb,var(--xn0syi6) calc(var(--x1cq03z9) * 100%),transparent);
   }
+
+  .xtt5grq:active {
+    border-radius: var(--x1m0y4ip);
+  }
 }
 
 @layer priority4 {
@@ -237,6 +245,10 @@
     animation-duration: var(--x1neymab);
   }
 
+  .xvhm28k {
+    animation-duration: var(--xaryv6b);
+  }
+
   .xu2fq7p {
     animation-name: x17cjob-B;
   }
@@ -245,6 +257,10 @@
     animation-name: x18re5ia-B;
   }
 
+  .x97zbip {
+    animation-name: x1k48ry3-B;
+  }
+
   .x1yujl0p {
     animation-timing-function: var(--x77wm8g);
   }
@@ -361,6 +377,10 @@
     box-shadow: none;
   }
 
+  .x1os83gw {
+    box-shadow: var(--x14ermby);
+  }
+
   .x19efjv6 {
     box-shadow: var(--xt04dnm);
   }
@@ -947,10 +967,26 @@
     text-underline-offset: .2em;
   }
 
+  .x18ouj0k {
+    transform-origin: bottom;
+  }
+
   .x1g0ag68 {
     transform-origin: center;
   }
 
+  .x1nf803f {
+    transform-origin: 0;
+  }
+
+  .xyibjs4 {
+    transform-origin: 100%;
+  }
+
+  .x1dp6rp6 {
+    transform-origin: top;
+  }
+
   .xjl7l83 {
     transition-duration: .105s;
   }
@@ -1044,38 +1080,14 @@
     background-color: color-mix(in srgb,var(--x1cjupv7) calc(var(--x124j18r) * 100%),transparent);
   }
 
-  .x1pi8zt8:hover:not(:disabled) {
-    background-color: color-mix(in srgb,var(--x1cjupv7) calc(var(--x8z5t6h) * 100%),transparent);
-  }
-
-  .x117izkb:active:not(:disabled) {
-    background-color: color-mix(in srgb,var(--x1cjupv7) calc(var(--xhaltwz) * 100%),transparent);
-  }
-
   .x16z974x:focus-visible {
     background-color: color-mix(in srgb,var(--x1f7qwsz) calc(var(--x124j18r) * 100%),var(--x1cjupv7));
   }
 
-  .x197hsbc:hover:not(:disabled) {
-    background-color: color-mix(in srgb,var(--x1f7qwsz) calc(var(--x8z5t6h) * 100%),var(--x1cjupv7));
-  }
-
-  .xm7dzmu:active:not(:disabled) {
-    background-color: color-mix(in srgb,var(--x1f7qwsz) calc(var(--xhaltwz) * 100%),var(--x1cjupv7));
-  }
-
   .x1uyy5zb:focus-visible {
     background-color: color-mix(in srgb,var(--x1p425jc) calc(var(--x124j18r) * 100%),var(--x17f4f9w));
   }
 
-  .xwypj8i:hover:not(:disabled) {
-    background-color: color-mix(in srgb,var(--x1p425jc) calc(var(--x8z5t6h) * 100%),var(--x17f4f9w));
-  }
-
-  .x1c3n7wt:active:not(:disabled) {
-    background-color: color-mix(in srgb,var(--x1p425jc) calc(var(--xhaltwz) * 100%),var(--x17f4f9w));
-  }
-
   .x6gcojk:hover:not(:disabled) {
     background-color: color-mix(in srgb,var(--xn0syi6) calc(var(--x8z5t6h) * 100%),transparent);
   }
@@ -1092,14 +1104,6 @@
     box-shadow: inset 0 -2px 0 0 var(--x1cjupv7);
   }
 
-  .xfj5659:active:not(:disabled) {
-    box-shadow: none;
-  }
-
-  .xv7jn9b:hover:not(:disabled) {
-    box-shadow: var(--xt04dnm);
-  }
-
   .x9v5kkp:focus-visible {
     outline-style: solid;
   }
@@ -1116,6 +1120,14 @@
     cursor: not-allowed;
   }
 
+  .x14dcer4:hover {
+    background-color: color-mix(in srgb,var(--x1cjupv7) calc(var(--x8z5t6h) * 100%),transparent);
+  }
+
+  .xyf7a0q:hover {
+    background-color: color-mix(in srgb,var(--x1f7qwsz) calc(var(--x8z5t6h) * 100%),var(--x1cjupv7));
+  }
+
   .x1hei0q8:hover {
     background-color: color-mix(in srgb,var(--x1p425jc) calc(var(--x8z5t6h) * 100%),var(--x17f4f9w));
   }
@@ -1140,6 +1152,10 @@
     box-shadow: var(--x14ermby);
   }
 
+  .x1955hzl:hover {
+    box-shadow: var(--xt04dnm);
+  }
+
   .x1aetzt3:hover {
     color: var(--x1cjupv7);
   }
@@ -1153,6 +1169,18 @@
     text-decoration-line: underline;
   }
 
+  .x12vej0r:active {
+    background-color: color-mix(in srgb,var(--x1cjupv7) calc(var(--xhaltwz) * 100%),transparent);
+  }
+
+  .xpky1to:active {
+    background-color: color-mix(in srgb,var(--x1f7qwsz) calc(var(--xhaltwz) * 100%),var(--x1cjupv7));
+  }
+
+  .xxwd9aw:active {
+    background-color: color-mix(in srgb,var(--x1p425jc) calc(var(--xhaltwz) * 100%),var(--x17f4f9w));
+  }
+
   .x83qkoq:active {
     background-color: color-mix(in srgb,var(--xn0syi6) calc(var(--xhaltwz) * 100%),transparent);
   }
@@ -1169,6 +1197,10 @@
     background-color: color-mix(in srgb,var(--xn0syi6) calc(var(--xhaltwz) * 100%),var(--xi1exwt));
   }
 
+  .xpk4wdd:active {
+    box-shadow: none;
+  }
+
   .x1g60mc1:active {
     box-shadow: var(--xt04dnm);
   }
@@ -1253,6 +1285,14 @@
     max-height: none;
   }
 
+  .xjjheoa {
+    max-width: min(240px, 100vw);
+  }
+
+  .x10u2fgw {
+    max-width: min(320px, 100vw);
+  }
+
   .x13i5qev {
     max-width: var(--x-maxInlineSize);
   }
@@ -1422,6 +1462,18 @@
   }
 }
 
+@keyframes x1k48ry3-B {
+  from {
+    opacity: 0;
+    transform: scale(.95);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
 @keyframes x17cjob-B {
   from {
     opacity: 0;

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@kanso-labs/kanso-ui",
-  "version": "0.11.21",
-  "description": "A React component library built on Base UI primitives and styled with StyleX, with design tokens sourced from a single W3C DTCG file and compiled via Style Dictionary",
+  "version": "0.12.0",
+  "description": "A React component library built on React Aria Components primitives and styled with StyleX, with design tokens sourced from a single W3C DTCG file and compiled via Style Dictionary",
   "keywords": [
     "react",
     "component-library",
     "design-system",
-    "base-ui",
+    "react-aria",
     "stylex",
     "design-tokens",
     "style-dictionary",
@@ -58,7 +58,7 @@
     "tokens:build": "node scripts/build-tokens.mjs"
   },
   "dependencies": {
-    "@base-ui/react": "1.7.0"
+    "react-aria-components": "1.21.0"
   },
   "devDependencies": {
     "@babel/core": "8.0.1",

package/dist/render/nativeButton.js

@@ -1,26 +0,0 @@
-//#region src/render/nativeButton.ts
-/**
-* Whether the element a `render` prop produces is a real `<button>`.
-*
-* Base UI needs this: a `<button>` already announces its role, activates on
-* Space and Enter, and takes `disabled`, while an `<a>` or a `<div>` has to be
-* given all three by hand. It cannot see through `render` to find out, so it
-* assumes a native button and logs an error when the DOM turns out to
-* disagree — which is what `<Button render={<a href="…" />}>` used to produce
-* unless the call site knew to pass `nativeButton={false}`.
-*
-* Only a plain element with a host tag is decided here. A `render` that is a
-* function, or an element whose type is a component, could still return a
-* `<button>`, and treating one as a non-button would hand a real button the
-* role, tab index and keyboard handling it already has. Those keep Base UI's
-* own default, which is where its error message — and an explicit
-* `nativeButton` at the call site — remain the answer.
-*/
-function rendersNativeButton(render) {
-	if (render !== void 0 && typeof render !== "function" && typeof render.type === "string") return render.type === "button";
-	return true;
-}
-//#endregion
-export { rendersNativeButton };
-
-//# sourceMappingURL=nativeButton.js.map

package/dist/render/nativeButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"nativeButton.js","names":[],"sources":["../../src/render/nativeButton.ts"],"sourcesContent":["import type { ReactElement } from 'react'\n\n/**\n * Whether the element a `render` prop produces is a real `<button>`.\n *\n * Base UI needs this: a `<button>` already announces its role, activates on\n * Space and Enter, and takes `disabled`, while an `<a>` or a `<div>` has to be\n * given all three by hand. It cannot see through `render` to find out, so it\n * assumes a native button and logs an error when the DOM turns out to\n * disagree — which is what `<Button render={<a href=\"…\" />}>` used to produce\n * unless the call site knew to pass `nativeButton={false}`.\n *\n * Only a plain element with a host tag is decided here. A `render` that is a\n * function, or an element whose type is a component, could still return a\n * `<button>`, and treating one as a non-button would hand a real button the\n * role, tab index and keyboard handling it already has. Those keep Base UI's\n * own default, which is where its error message — and an explicit\n * `nativeButton` at the call site — remain the answer.\n */\nfunction rendersNativeButton(\n  render: ((...args: never) => unknown) | ReactElement | undefined,\n) {\n  if (\n    render !== undefined &&\n    typeof render !== 'function' &&\n    typeof render.type === 'string'\n  ) {\n    return render.type === 'button'\n  }\n  return true\n}\n\nexport { rendersNativeButton }\n"],"mappings":";;;;;;;;;;;;;;;;;;AAmBA,SAAS,oBACP,QACA;CACA,IACE,WAAW,KAAA,KACX,OAAO,WAAW,cAClB,OAAO,OAAO,SAAS,UAEvB,OAAO,OAAO,SAAS;CAEzB,OAAO;AACT"}