@dust-tt/sparkle 0.2.469 → 0.2.471

package/dist/esm/stories/Playground.stories.js

@@ -1,11 +1,18 @@
 import React from "react";
-import { Button, FlexSplitButton } from "../components";
+import { Avatar, Button, FlexSplitButton, Icon } from "../components";
 import { ArrowUpIcon, ChevronDownIcon } from "../icons/app";
+import { cn } from "../lib";
 export default {
     title: "Playground/Demo",
 };
 export var Demo = function () {
-    return (React.createElement("div", { className: "s-flex s-h-full s-w-full s-flex-col s-gap-2" },
+    return (React.createElement("div", { className: "s-flex s-h-full s-w-full s-cursor-pointer s-flex-col s-gap-2" },
+        React.createElement("div", { className: "s-group s-flex s-max-w-[200px] s-items-center s-gap-2 s-bg-muted-background s-p-4" },
+            React.createElement(Avatar, { size: "sm", visual: "https://lh3.googleusercontent.com/a/ACg8ocItxZ3wFv94own6Sh86W9zOFy4RA_L9A0NtNz2sM0uftazvbhU=s96-c", clickable: true }),
+            React.createElement("div", { className: "s-flex s-flex-col s-items-start" },
+                React.createElement("span", { className: cn("s-heading-sm s-transition-colors s-duration-200", "s-text-foreground group-hover:s-text-primary-600 group-active:s-text-primary-950 dark:s-text-foreground-night dark:group-hover:s-text-muted-foreground-night dark:group-active:s-text-primary-950-night") }, "Edouard"),
+                React.createElement("span", { className: "-s-mt-1 s-text-sm s-text-muted-foreground dark:s-text-muted-foreground-night" }, "Dust")),
+            React.createElement(Icon, { visual: ChevronDownIcon, className: "s-text-muted-foreground group-hover:s-text-primary-400 group-active:s-text-primary-950 dark:s-text-foreground-night dark:group-hover:s-text-muted-foreground-night dark:group-active:s-text-primary-950-night" })),
         React.createElement("div", { className: "s-flex s-gap-3" },
             React.createElement(FlexSplitButton, { label: "Send", variant: "highlight", icon: ArrowUpIcon, splitAction: React.createElement(Button, { size: "mini", variant: "highlight", icon: ChevronDownIcon }) }),
             React.createElement(FlexSplitButton, { label: "Send", variant: "primary", icon: ArrowUpIcon, splitAction: React.createElement(Button, { size: "mini", variant: "primary", icon: ChevronDownIcon }) }),

package/dist/esm/stories/Playground.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Playground.stories.js","sourceRoot":"","sources":["../../../src/stories/Playground.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAElE,eAAe;IACb,KAAK,EAAE,iBAAiB;CACzB,CAAC;AAEF,MAAM,CAAC,IAAM,IAAI,GAAG;IAClB,OAAO,CACL,6BAAK,SAAS,EAAC,6CAA6C;QAC1D,6BAAK,SAAS,EAAC,gBAAgB;YAC7B,oBAAC,eAAe,IACd,KAAK,EAAC,MAAM,EACZ,OAAO,EAAE,WAAW,EACpB,IAAI,EAAE,WAAW,EACjB,WAAW,EACT,oBAAC,MAAM,IAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,eAAe,GAAI,GAErE;YACF,oBAAC,eAAe,IACd,KAAK,EAAC,MAAM,EACZ,OAAO,EAAE,SAAS,EAClB,IAAI,EAAE,WAAW,EACjB,WAAW,EACT,oBAAC,MAAM,IAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,eAAe,GAAI,GAEnE;YACF,oBAAC,eAAe,IACd,KAAK,EAAC,MAAM,EACZ,OAAO,EAAE,SAAS,EAClB,IAAI,EAAE,WAAW,EACjB,WAAW,EACT,oBAAC,MAAM,IAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,eAAe,GAAI,GAEnE;YACF,oBAAC,eAAe,IACd,KAAK,EAAC,MAAM,EACZ,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,WAAW,EACjB,WAAW,EACT,oBAAC,MAAM,IAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,eAAe,GAAI,GAEjE,CACE,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"Playground.stories.js","sourceRoot":"","sources":["../../../src/stories/Playground.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,eAAe,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC5E,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAClE,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAElC,eAAe;IACb,KAAK,EAAE,iBAAiB;CACzB,CAAC;AAEF,MAAM,CAAC,IAAM,IAAI,GAAG;IAClB,OAAO,CACL,6BAAK,SAAS,EAAC,8DAA8D;QAC3E,6BAAK,SAAS,EAAC,mFAAmF;YAChG,oBAAC,MAAM,IACL,IAAI,EAAC,IAAI,EACT,MAAM,EAAC,mGAAmG,EAC1G,SAAS,SACT;YACF,6BAAK,SAAS,EAAC,iCAAiC;gBAC9C,8BACE,SAAS,EAAE,EAAE,CACX,iDAAiD,EACjD,yMAAyM,CAC1M,cAGI;gBACP,8BAAM,SAAS,EAAC,8EAA8E,WAEvF,CACH;YACN,oBAAC,IAAI,IACH,MAAM,EAAE,eAAe,EACvB,SAAS,EAAC,+MAA+M,GACzN,CACE;QACN,6BAAK,SAAS,EAAC,gBAAgB;YAC7B,oBAAC,eAAe,IACd,KAAK,EAAC,MAAM,EACZ,OAAO,EAAE,WAAW,EACpB,IAAI,EAAE,WAAW,EACjB,WAAW,EACT,oBAAC,MAAM,IAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,eAAe,GAAI,GAErE;YACF,oBAAC,eAAe,IACd,KAAK,EAAC,MAAM,EACZ,OAAO,EAAE,SAAS,EAClB,IAAI,EAAE,WAAW,EACjB,WAAW,EACT,oBAAC,MAAM,IAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,eAAe,GAAI,GAEnE;YACF,oBAAC,eAAe,IACd,KAAK,EAAC,MAAM,EACZ,OAAO,EAAE,SAAS,EAClB,IAAI,EAAE,WAAW,EACjB,WAAW,EACT,oBAAC,MAAM,IAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,eAAe,GAAI,GAEnE;YACF,oBAAC,eAAe,IACd,KAAK,EAAC,MAAM,EACZ,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,WAAW,EACjB,WAAW,EACT,oBAAC,MAAM,IAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,eAAe,GAAI,GAEjE,CACE,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/sparkle.css

@@ -609,8 +609,15 @@ select {
   font-weight: 600;
 }
 
-.s-heading-sm {
+.s-heading-xs {
   font-size: 12px;
+  line-height: 16px;
+  letter-spacing: normal;
+  font-weight: 600;
+}
+
+.s-heading-sm {
+  font-size: 14px;
   line-height: 20px;
   letter-spacing: -0.28px;
   font-weight: 600;
@@ -1719,6 +1726,10 @@ select {
   max-width: 56rem;
 }
 
+.s-max-w-\[200px\] {
+  max-width: 200px;
+}
+
 .s-max-w-\[380px\] {
   max-width: 380px;
 }
@@ -2374,6 +2385,10 @@ select {
   border-color: rgb(255 195 223 / 0.3);
 }
 
+.s-border-border-warning\/40 {
+  border-color: rgb(255 195 223 / 0.4);
+}
+
 .s-border-border\/0 {
   border-color: rgb(238 238 239 / 0);
 }
@@ -2581,11 +2596,6 @@ select {
   border-color: rgb(238 238 239 / var(--tw-border-opacity));
 }
 
-.s-border-sky-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(159 219 255 / var(--tw-border-opacity));
-}
-
 .s-border-success-100 {
   --tw-border-opacity: 1;
   border-color: rgb(240 251 189 / var(--tw-border-opacity));
@@ -3484,11 +3494,6 @@ select {
   background-color: rgb(238 238 239 / var(--tw-bg-opacity));
 }
 
-.s-bg-sky-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(202 235 255 / var(--tw-bg-opacity));
-}
-
 .s-bg-success-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(240 251 189 / var(--tw-bg-opacity));
@@ -4740,11 +4745,6 @@ select {
   color: rgb(8 80 146 / var(--tw-text-opacity));
 }
 
-.s-text-sky-900 {
-  --tw-text-opacity: 1;
-  color: rgb(7 53 95 / var(--tw-text-opacity));
-}
-
 .s-text-success-500 {
   --tw-text-opacity: 1;
   color: rgb(106 166 104 / var(--tw-text-opacity));
@@ -4896,6 +4896,10 @@ select {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
+.s-ring-inset {
+  --tw-ring-inset: inset;
+}
+
 .s-ring-highlight-300 {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(122 198 255 / var(--tw-ring-opacity));
@@ -5176,6 +5180,14 @@ select {
   color: rgb(17 20 24 / var(--tw-text-opacity));
 }
 
+.placeholder\:s-italic::-moz-placeholder {
+  font-style: italic;
+}
+
+.placeholder\:s-italic::placeholder {
+  font-style: italic;
+}
+
 .placeholder\:s-text-muted-foreground::-moz-placeholder {
   --tw-text-opacity: 1;
   color: rgb(84 93 108 / var(--tw-text-opacity));
@@ -5359,21 +5371,46 @@ select {
   padding-left: 0.5rem;
 }
 
+.hover\:s-text-blue-700:hover {
+  --tw-text-opacity: 1;
+  color: rgb(10 108 198 / var(--tw-text-opacity));
+}
+
 .hover\:s-text-foreground:hover {
   --tw-text-opacity: 1;
   color: rgb(17 20 24 / var(--tw-text-opacity));
 }
 
+.hover\:s-text-golden-700:hover {
+  --tw-text-opacity: 1;
+  color: rgb(226 119 22 / var(--tw-text-opacity));
+}
+
+.hover\:s-text-green-700:hover {
+  --tw-text-opacity: 1;
+  color: rgb(39 118 68 / var(--tw-text-opacity));
+}
+
 .hover\:s-text-highlight-400:hover {
   --tw-text-opacity: 1;
   color: rgb(75 171 255 / var(--tw-text-opacity));
 }
 
+.hover\:s-text-highlight-700:hover {
+  --tw-text-opacity: 1;
+  color: rgb(10 108 198 / var(--tw-text-opacity));
+}
+
 .hover\:s-text-highlight-light:hover {
   --tw-text-opacity: 1;
   color: rgb(75 171 255 / var(--tw-text-opacity));
 }
 
+.hover\:s-text-info-700:hover {
+  --tw-text-opacity: 1;
+  color: rgb(226 119 22 / var(--tw-text-opacity));
+}
+
 .hover\:s-text-primary:hover {
   --tw-text-opacity: 1;
   color: rgb(42 50 65 / var(--tw-text-opacity));
@@ -5399,11 +5436,26 @@ select {
   color: rgb(28 34 45 / var(--tw-text-opacity));
 }
 
+.hover\:s-text-rose-700:hover {
+  --tw-text-opacity: 1;
+  color: rgb(178 46 19 / var(--tw-text-opacity));
+}
+
+.hover\:s-text-success-700:hover {
+  --tw-text-opacity: 1;
+  color: rgb(39 118 68 / var(--tw-text-opacity));
+}
+
 .hover\:s-text-warning-400:hover {
   --tw-text-opacity: 1;
   color: rgb(237 117 108 / var(--tw-text-opacity));
 }
 
+.hover\:s-text-warning-700:hover {
+  --tw-text-opacity: 1;
+  color: rgb(178 46 19 / var(--tw-text-opacity));
+}
+
 .hover\:s-underline:hover {
   text-decoration-line: underline;
 }
@@ -5498,6 +5550,10 @@ select {
   --tw-ring-color: rgb(225 67 34 / 0.1);
 }
 
+.focus-visible\:s-ring-offset-0:focus-visible {
+  --tw-ring-offset-width: 0px;
+}
+
 .focus-visible\:s-ring-offset-1:focus-visible {
   --tw-ring-offset-width: 1px;
 }
@@ -5541,6 +5597,21 @@ select {
   background-color: rgb(201 57 19 / var(--tw-bg-opacity));
 }
 
+.active\:s-text-blue-950:active {
+  --tw-text-opacity: 1;
+  color: rgb(4 23 40 / var(--tw-text-opacity));
+}
+
+.active\:s-text-golden-950:active {
+  --tw-text-opacity: 1;
+  color: rgb(51 22 6 / var(--tw-text-opacity));
+}
+
+.active\:s-text-green-950:active {
+  --tw-text-opacity: 1;
+  color: rgb(4 20 10 / var(--tw-text-opacity));
+}
+
 .active\:s-text-highlight-600:active {
   --tw-text-opacity: 1;
   color: rgb(19 127 227 / var(--tw-text-opacity));
@@ -5551,21 +5622,51 @@ select {
   color: rgb(10 108 198 / var(--tw-text-opacity));
 }
 
+.active\:s-text-highlight-950:active {
+  --tw-text-opacity: 1;
+  color: rgb(4 23 40 / var(--tw-text-opacity));
+}
+
 .active\:s-text-highlight-dark:active {
   --tw-text-opacity: 1;
   color: rgb(19 127 227 / var(--tw-text-opacity));
 }
 
+.active\:s-text-info-950:active {
+  --tw-text-opacity: 1;
+  color: rgb(51 22 6 / var(--tw-text-opacity));
+}
+
 .active\:s-text-primary-200:active {
   --tw-text-opacity: 1;
   color: rgb(211 213 217 / var(--tw-text-opacity));
 }
 
+.active\:s-text-primary-950:active {
+  --tw-text-opacity: 1;
+  color: rgb(17 20 24 / var(--tw-text-opacity));
+}
+
+.active\:s-text-rose-950:active {
+  --tw-text-opacity: 1;
+  color: rgb(34 10 4 / var(--tw-text-opacity));
+}
+
+.active\:s-text-success-950:active {
+  --tw-text-opacity: 1;
+  color: rgb(4 20 10 / var(--tw-text-opacity));
+}
+
 .active\:s-text-warning-600:active {
   --tw-text-opacity: 1;
   color: rgb(201 57 19 / var(--tw-text-opacity));
 }
 
+.active\:s-text-warning-950:active {
+  --tw-text-opacity: 1;
+  color: rgb(34 10 4 / var(--tw-text-opacity));
+}
+
 .active\:s-brightness-90:active {
   --tw-brightness: brightness(.9);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -5656,6 +5757,16 @@ select {
   color: rgb(28 145 255 / var(--tw-text-opacity));
 }
 
+.s-group:hover .group-hover\:s-text-primary-400 {
+  --tw-text-opacity: 1;
+  color: rgb(150 156 165 / var(--tw-text-opacity));
+}
+
+.s-group:hover .group-hover\:s-text-primary-600 {
+  --tw-text-opacity: 1;
+  color: rgb(84 93 108 / var(--tw-text-opacity));
+}
+
 .s-group\/card:hover .group-hover\/card\:s-opacity-100 {
   opacity: 1;
 }
@@ -5687,6 +5798,11 @@ select {
   background-color: rgb(238 238 239 / 0.6);
 }
 
+.s-group:active .group-active\:s-text-primary-950 {
+  --tw-text-opacity: 1;
+  color: rgb(17 20 24 / var(--tw-text-opacity));
+}
+
 .s-group:active .group-active\:s-brightness-90 {
   --tw-brightness: brightness(.9);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -6328,11 +6444,6 @@ select {
   border-color: rgb(42 50 65 / var(--tw-border-opacity));
 }
 
-:is(.s-dark .dark\:s-border-sky-200-night) {
-  --tw-border-opacity: 1;
-  border-color: rgb(8 80 146 / var(--tw-border-opacity));
-}
-
 :is(.s-dark .dark\:s-border-success-100-night) {
   --tw-border-opacity: 1;
   border-color: rgb(10 54 26 / var(--tw-border-opacity));
@@ -7181,11 +7292,6 @@ select {
   background-color: rgb(42 50 65 / var(--tw-bg-opacity));
 }
 
-:is(.s-dark .dark\:s-bg-sky-100-night) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(7 53 95 / var(--tw-bg-opacity));
-}
-
 :is(.s-dark .dark\:s-bg-success-100-night) {
   --tw-bg-opacity: 1;
   background-color: rgb(10 54 26 / var(--tw-bg-opacity));
@@ -7897,11 +8003,6 @@ select {
   color: rgb(159 219 255 / var(--tw-text-opacity));
 }
 
-:is(.s-dark .dark\:s-text-sky-900-night) {
-  --tw-text-opacity: 1;
-  color: rgb(202 235 255 / var(--tw-text-opacity));
-}
-
 :is(.s-dark .dark\:s-text-success-400-night) {
   --tw-text-opacity: 1;
   color: rgb(65 139 92 / var(--tw-text-opacity));
@@ -8055,11 +8156,26 @@ select {
   background-color: rgb(34 10 4 / var(--tw-bg-opacity));
 }
 
+:is(.s-dark .dark\:hover\:s-text-blue-700-night:hover) {
+  --tw-text-opacity: 1;
+  color: rgb(122 198 255 / var(--tw-text-opacity));
+}
+
 :is(.s-dark .dark\:hover\:s-text-foreground-night:hover) {
   --tw-text-opacity: 1;
   color: rgb(247 247 247 / var(--tw-text-opacity));
 }
 
+:is(.s-dark .dark\:hover\:s-text-golden-700-night:hover) {
+  --tw-text-opacity: 1;
+  color: rgb(255 208 70 / var(--tw-text-opacity));
+}
+
+:is(.s-dark .dark\:hover\:s-text-green-700-night:hover) {
+  --tw-text-opacity: 1;
+  color: rgb(188 222 129 / var(--tw-text-opacity));
+}
+
 :is(.s-dark .dark\:hover\:s-text-highlight-400-night:hover) {
   --tw-text-opacity: 1;
   color: rgb(19 127 227 / var(--tw-text-opacity));
@@ -8070,11 +8186,21 @@ select {
   color: rgb(28 145 255 / var(--tw-text-opacity));
 }
 
+:is(.s-dark .dark\:hover\:s-text-highlight-700-night:hover) {
+  --tw-text-opacity: 1;
+  color: rgb(122 198 255 / var(--tw-text-opacity));
+}
+
 :is(.s-dark .dark\:hover\:s-text-highlight-light-night:hover) {
   --tw-text-opacity: 1;
   color: rgb(19 127 227 / var(--tw-text-opacity));
 }
 
+:is(.s-dark .dark\:hover\:s-text-info-700-night:hover) {
+  --tw-text-opacity: 1;
+  color: rgb(255 208 70 / var(--tw-text-opacity));
+}
+
 :is(.s-dark .dark\:hover\:s-text-primary-100-night:hover) {
   --tw-text-opacity: 1;
   color: rgb(28 34 45 / var(--tw-text-opacity));
@@ -8085,6 +8211,11 @@ select {
   color: rgb(84 93 108 / var(--tw-text-opacity));
 }
 
+:is(.s-dark .dark\:hover\:s-text-primary-500-night:hover) {
+  --tw-text-opacity: 1;
+  color: rgb(123 129 141 / var(--tw-text-opacity));
+}
+
 :is(.s-dark .dark\:hover\:s-text-primary-900-night:hover) {
   --tw-text-opacity: 1;
   color: rgb(238 238 239 / var(--tw-text-opacity));
@@ -8095,11 +8226,26 @@ select {
   color: rgb(211 213 217 / var(--tw-text-opacity));
 }
 
+:is(.s-dark .dark\:hover\:s-text-rose-700-night:hover) {
+  --tw-text-opacity: 1;
+  color: rgb(248 166 180 / var(--tw-text-opacity));
+}
+
+:is(.s-dark .dark\:hover\:s-text-success-700-night:hover) {
+  --tw-text-opacity: 1;
+  color: rgb(188 222 129 / var(--tw-text-opacity));
+}
+
 :is(.s-dark .dark\:hover\:s-text-warning-500-night:hover) {
   --tw-text-opacity: 1;
   color: rgb(225 67 34 / var(--tw-text-opacity));
 }
 
+:is(.s-dark .dark\:hover\:s-text-warning-700-night:hover) {
+  --tw-text-opacity: 1;
+  color: rgb(248 166 180 / var(--tw-text-opacity));
+}
+
 :is(.s-dark .dark\:hover\:s-text-white:hover) {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -8183,6 +8329,21 @@ select {
   background-color: rgb(87 22 9 / var(--tw-bg-opacity));
 }
 
+:is(.s-dark .dark\:active\:s-text-blue-950-night:active) {
+  --tw-text-opacity: 1;
+  color: rgb(233 247 255 / var(--tw-text-opacity));
+}
+
+:is(.s-dark .dark\:active\:s-text-golden-950-night:active) {
+  --tw-text-opacity: 1;
+  color: rgb(255 250 224 / var(--tw-text-opacity));
+}
+
+:is(.s-dark .dark\:active\:s-text-green-950-night:active) {
+  --tw-text-opacity: 1;
+  color: rgb(254 255 240 / var(--tw-text-opacity));
+}
+
 :is(.s-dark .dark\:active\:s-text-highlight-600-night:active) {
   --tw-text-opacity: 1;
   color: rgb(75 171 255 / var(--tw-text-opacity));
@@ -8193,21 +8354,51 @@ select {
   color: rgb(122 198 255 / var(--tw-text-opacity));
 }
 
+:is(.s-dark .dark\:active\:s-text-highlight-950-night:active) {
+  --tw-text-opacity: 1;
+  color: rgb(233 247 255 / var(--tw-text-opacity));
+}
+
 :is(.s-dark .dark\:active\:s-text-highlight-dark-night:active) {
   --tw-text-opacity: 1;
   color: rgb(75 171 255 / var(--tw-text-opacity));
 }
 
+:is(.s-dark .dark\:active\:s-text-info-950-night:active) {
+  --tw-text-opacity: 1;
+  color: rgb(255 250 224 / var(--tw-text-opacity));
+}
+
 :is(.s-dark .dark\:active\:s-text-primary-200-night:active) {
   --tw-text-opacity: 1;
   color: rgb(42 50 65 / var(--tw-text-opacity));
 }
 
+:is(.s-dark .dark\:active\:s-text-primary-950-night:active) {
+  --tw-text-opacity: 1;
+  color: rgb(238 238 239 / var(--tw-text-opacity));
+}
+
+:is(.s-dark .dark\:active\:s-text-rose-950-night:active) {
+  --tw-text-opacity: 1;
+  color: rgb(255 241 247 / var(--tw-text-opacity));
+}
+
+:is(.s-dark .dark\:active\:s-text-success-950-night:active) {
+  --tw-text-opacity: 1;
+  color: rgb(254 255 240 / var(--tw-text-opacity));
+}
+
 :is(.s-dark .dark\:active\:s-text-warning-600-night:active) {
   --tw-text-opacity: 1;
   color: rgb(237 117 108 / var(--tw-text-opacity));
 }
 
+:is(.s-dark .dark\:active\:s-text-warning-950-night:active) {
+  --tw-text-opacity: 1;
+  color: rgb(255 241 247 / var(--tw-text-opacity));
+}
+
 :is(.s-dark .dark\:disabled\:s-border-border-night:disabled) {
   --tw-border-opacity: 1;
   border-color: rgb(42 50 65 / var(--tw-border-opacity));
@@ -8257,10 +8448,20 @@ select {
   color: rgb(28 145 255 / var(--tw-text-opacity));
 }
 
+:is(.s-dark .s-group:hover .dark\:group-hover\:s-text-muted-foreground-night) {
+  --tw-text-opacity: 1;
+  color: rgb(150 156 165 / var(--tw-text-opacity));
+}
+
 :is(.s-dark .s-group:active .dark\:group-active\:s-bg-primary-100-night\/60) {
   background-color: rgb(28 34 45 / 0.6);
 }
 
+:is(.s-dark .s-group:active .dark\:group-active\:s-text-primary-950-night) {
+  --tw-text-opacity: 1;
+  color: rgb(238 238 239 / var(--tw-text-opacity));
+}
+
 :is(.s-dark .dark\:data-\[state\=checked\]\:s-bg-primary-night[data-state=checked]) {
   --tw-bg-opacity: 1;
   background-color: rgb(211 213 217 / var(--tw-bg-opacity));
@@ -8294,6 +8495,10 @@ select {
     max-width: 36rem;
   }
 
+  .sm\:s-grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
   .sm\:s-flex-row {
     flex-direction: row;
   }
@@ -8309,6 +8514,12 @@ select {
   }
 }
 
+@media (min-width: 1024px) {
+  .lg\:s-grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
 .\[\&\[data-panel-group-direction\=vertical\]\>div\]\:s-rotate-90[data-panel-group-direction=vertical]>div {
   --tw-rotate: 90deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.469",
+  "version": "0.2.471",
   "scripts": {
     "build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs",
     "tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css",

package/src/components/Button.tsx

@@ -35,8 +35,8 @@ export type ButtonSizeType = (typeof BUTTON_SIZES)[number];
 // Define button styling with cva
 const buttonVariants = cva(
   cn(
-    "s-inline-flex s-items-center s-justify-center s-whitespace-nowrap s-ring-offset-background s-transition-colors",
-    "focus-visible:s-outline-none focus-visible:s-ring-2 focus-visible:s-ring-ring focus-visible:s-ring-offset-2",
+    "s-inline-flex s-items-center s-justify-center s-whitespace-nowrap s-ring-offset-background s-transition-colors s-ring-inset",
+    "focus-visible:s-outline-none focus-visible:s-ring-2 focus-visible:s-ring-ring focus-visible:s-ring-offset-0",
     "dark:focus-visible:s-ring-0 dark:focus-visible:s-ring-offset-1"
   ),
   {

package/src/components/Chip.tsx

@@ -30,8 +30,8 @@ export const CHIP_COLORS = [
 type ChipColorType = (typeof CHIP_COLORS)[number];
 
 const sizeVariants: Record<ChipSizeType, string> = {
-  xs: "s-rounded-lg s-min-h-7 s-text-xs s-font-medium s-px-3 s-gap-1",
-  sm: "s-rounded-xl s-min-h-9 s-text-sm s-font-medium s-px-3 s-gap-1.5",
+  xs: "s-rounded-lg s-min-h-7 s-heading-xs s-px-3 s-gap-1",
+  sm: "s-rounded-xl s-min-h-9 s-heading-sm s-px-4 s-gap-1.5",
 };
 
 const backgroundVariants: Record<ChipColorType, string> = {
@@ -60,8 +60,8 @@ const backgroundVariants: Record<ChipColorType, string> = {
     "dark:s-bg-green-100-night dark:s-border-green-200-night"
   ),
   blue: cn(
-    "s-bg-sky-100 s-border-sky-200",
-    "dark:s-bg-sky-100-night dark:s-border-sky-200-night"
+    "s-bg-blue-100 s-border-blue-200",
+    "dark:s-bg-blue-100-night dark:s-border-blue-200-night"
   ),
   rose: cn(
     "s-bg-rose-100 s-border-rose-200",
@@ -80,11 +80,50 @@ const textVariants: Record<ChipColorType, string> = {
   warning: "s-text-warning-900 dark:s-text-warning-900-night",
   info: "s-text-info-900 dark:s-text-info-900-night",
   green: "s-text-green-900 dark:s-text-green-900-night",
-  blue: "s-text-sky-900 dark:s-text-sky-900-night",
+  blue: "s-text-blue-900 dark:s-text-blue-900-night",
   rose: "s-text-rose-900 dark:s-text-rose-900-night",
   golden: "s-text-golden-900 dark:s-text-golden-900-night",
 };
 
+const closeIconVariants: Record<ChipColorType, string> = {
+  primary: cn(
+    "s-text-primary-700 hover:s-text-primary-500 active:s-text-primary-950",
+    "dark:s-text-primary-700-night dark:hover:s-text-primary-500-night dark:active:s-text-primary-950-night"
+  ),
+  highlight: cn(
+    "s-text-highlight-900 hover:s-text-highlight-700 active:s-text-highlight-950",
+    "dark:s-text-highlight-900-night dark:hover:s-text-highlight-700-night dark:active:s-text-highlight-950-night"
+  ),
+  success: cn(
+    "s-text-success-900 hover:s-text-success-700 active:s-text-success-950",
+    "dark:s-text-success-900-night dark:hover:s-text-success-700-night dark:active:s-text-success-950-night"
+  ),
+  warning: cn(
+    "s-text-warning-900 hover:s-text-warning-700 active:s-text-warning-950",
+    "dark:s-text-warning-900-night dark:hover:s-text-warning-700-night dark:active:s-text-warning-950-night"
+  ),
+  info: cn(
+    "s-text-info-900 hover:s-text-info-700 active:s-text-info-950",
+    "dark:s-text-info-900-night dark:hover:s-text-info-700-night dark:active:s-text-info-950-night"
+  ),
+  green: cn(
+    "s-text-green-900 hover:s-text-green-700 active:s-text-green-950",
+    "dark:s-text-green-900-night dark:hover:s-text-green-700-night dark:active:s-text-green-950-night"
+  ),
+  blue: cn(
+    "s-text-blue-900 hover:s-text-blue-700 active:s-text-blue-950",
+    "dark:s-text-blue-900-night dark:hover:s-text-blue-700-night dark:active:s-text-blue-950-night"
+  ),
+  rose: cn(
+    "s-text-rose-900 hover:s-text-rose-700 active:s-text-rose-950",
+    "dark:s-text-rose-900-night dark:hover:s-text-rose-700-night dark:active:s-text-rose-950-night"
+  ),
+  golden: cn(
+    "s-text-golden-900 hover:s-text-golden-700 active:s-text-golden-950",
+    "dark:s-text-golden-900-night dark:hover:s-text-golden-700-night dark:active:s-text-golden-950-night"
+  ),
+};
+
 const chipVariants = cva("s-inline-flex s-box-border s-items-center", {
   variants: {
     size: sizeVariants,
@@ -171,7 +210,10 @@ const Chip = React.forwardRef<HTMLDivElement, ChipProps>(
             <Icon
               visual={XMarkIcon}
               size={size}
-              className="s-text-primary-700 hover:s-text-primary-500"
+              className={cn(
+                "s-transition-color -s-mr-1 s-duration-200",
+                closeIconVariants[color || "primary"]
+              )}
             />
           </div>
         )}