@dust-tt/sparkle 0.2.260 → 0.2.261

package/dist/sparkle.css

@@ -809,6 +809,10 @@ select {
   left: 0px;
 }
 
+.s-left-2 {
+  left: 0.5rem;
+}
+
 .s-right-0 {
   right: 0px;
 }
@@ -837,6 +841,10 @@ select {
   z-index: 50;
 }
 
+.s-col-span-2 {
+  grid-column: span 2 / span 2;
+}
+
 .s-m-0 {
   margin: 0px;
 }
@@ -849,6 +857,11 @@ select {
   margin: 1px;
 }
 
+.-s-mx-1 {
+  margin-left: -0.25rem;
+  margin-right: -0.25rem;
+}
+
 .s-mx-2 {
   margin-left: 0.5rem;
   margin-right: 0.5rem;
@@ -859,6 +872,11 @@ select {
   margin-right: auto;
 }
 
+.s-my-1 {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
 .s-my-2 {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
@@ -1015,6 +1033,10 @@ select {
   height: 0.75rem;
 }
 
+.s-h-3\.5 {
+  height: 0.875rem;
+}
+
 .s-h-36 {
   height: 9rem;
 }
@@ -1051,6 +1073,10 @@ select {
   height: 2rem;
 }
 
+.s-h-80 {
+  height: 20rem;
+}
+
 .s-h-9 {
   height: 2.25rem;
 }
@@ -1083,6 +1109,10 @@ select {
   height: 100%;
 }
 
+.s-h-px {
+  height: 1px;
+}
+
 .s-max-h-\[344px\] {
   max-height: 344px;
 }
@@ -1139,6 +1169,14 @@ select {
   width: 5rem;
 }
 
+.s-w-3 {
+  width: 0.75rem;
+}
+
+.s-w-3\.5 {
+  width: 0.875rem;
+}
+
 .s-w-32 {
   width: 8rem;
 }
@@ -1167,6 +1205,10 @@ select {
   width: 1.25rem;
 }
 
+.s-w-56 {
+  width: 14rem;
+}
+
 .s-w-6 {
   width: 1.5rem;
 }
@@ -1179,6 +1221,10 @@ select {
   width: 16rem;
 }
 
+.s-w-72 {
+  width: 18rem;
+}
+
 .s-w-8 {
   width: 2rem;
 }
@@ -1212,6 +1258,10 @@ select {
   min-width: 0px;
 }
 
+.s-min-w-\[8rem\] {
+  min-width: 8rem;
+}
+
 .s-max-w-4xl {
   max-width: 56rem;
 }
@@ -1429,6 +1479,10 @@ select {
   grid-template-columns: repeat(8, minmax(0, 1fr));
 }
 
+.s-grid-cols-\[auto\,1fr\] {
+  grid-template-columns: auto 1fr;
+}
+
 .s-grid-rows-2 {
   grid-template-rows: repeat(2, minmax(0, 1fr));
 }
@@ -1628,6 +1682,12 @@ select {
   margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
 }
 
+.s-space-y-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
+}
+
 .s-space-y-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1756,11 +1816,21 @@ select {
   border-top-width: 1px;
 }
 
+.s-border-action-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(219 234 254 / var(--tw-border-opacity));
+}
+
 .s-border-action-200 {
   --tw-border-opacity: 1;
   border-color: rgb(191 219 254 / var(--tw-border-opacity));
 }
 
+.s-border-action-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(147 197 253 / var(--tw-border-opacity));
+}
+
 .s-border-action-500 {
   --tw-border-opacity: 1;
   border-color: rgb(59 130 246 / var(--tw-border-opacity));
@@ -1771,61 +1841,166 @@ select {
   border-color: rgb(37 99 235 / var(--tw-border-opacity));
 }
 
+.s-border-amber-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(254 243 199 / var(--tw-border-opacity));
+}
+
 .s-border-amber-200 {
   --tw-border-opacity: 1;
   border-color: rgb(253 230 138 / var(--tw-border-opacity));
 }
 
+.s-border-amber-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(252 211 77 / var(--tw-border-opacity));
+}
+
+.s-border-blue-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(219 234 254 / var(--tw-border-opacity));
+}
+
 .s-border-blue-200 {
   --tw-border-opacity: 1;
   border-color: rgb(191 219 254 / var(--tw-border-opacity));
 }
 
+.s-border-blue-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(147 197 253 / var(--tw-border-opacity));
+}
+
+.s-border-border {
+  --tw-border-opacity: 1;
+  border-color: rgb(241 245 249 / var(--tw-border-opacity));
+}
+
+.s-border-cyan-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(207 250 254 / var(--tw-border-opacity));
+}
+
 .s-border-cyan-200 {
   --tw-border-opacity: 1;
   border-color: rgb(165 243 252 / var(--tw-border-opacity));
 }
 
+.s-border-cyan-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(103 232 249 / var(--tw-border-opacity));
+}
+
 .s-border-element-600 {
   --tw-border-opacity: 1;
   border-color: rgb(148 163 184 / var(--tw-border-opacity));
 }
 
+.s-border-emerald-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(209 250 229 / var(--tw-border-opacity));
+}
+
 .s-border-emerald-200 {
   --tw-border-opacity: 1;
   border-color: rgb(167 243 208 / var(--tw-border-opacity));
 }
 
+.s-border-emerald-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(110 231 183 / var(--tw-border-opacity));
+}
+
+.s-border-fuchsia-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(250 232 255 / var(--tw-border-opacity));
+}
+
 .s-border-fuchsia-200 {
   --tw-border-opacity: 1;
   border-color: rgb(245 208 254 / var(--tw-border-opacity));
 }
 
+.s-border-fuchsia-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(240 171 252 / var(--tw-border-opacity));
+}
+
+.s-border-gray-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(243 244 246 / var(--tw-border-opacity));
+}
+
 .s-border-gray-200 {
   --tw-border-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-border-opacity));
 }
 
+.s-border-gray-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity));
+}
+
+.s-border-green-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(220 252 231 / var(--tw-border-opacity));
+}
+
 .s-border-green-200 {
   --tw-border-opacity: 1;
   border-color: rgb(187 247 208 / var(--tw-border-opacity));
 }
 
+.s-border-green-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(134 239 172 / var(--tw-border-opacity));
+}
+
+.s-border-indigo-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(224 231 255 / var(--tw-border-opacity));
+}
+
 .s-border-indigo-200 {
   --tw-border-opacity: 1;
   border-color: rgb(199 210 254 / var(--tw-border-opacity));
 }
 
+.s-border-indigo-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(165 180 252 / var(--tw-border-opacity));
+}
+
+.s-border-lime-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(236 252 203 / var(--tw-border-opacity));
+}
+
 .s-border-lime-200 {
   --tw-border-opacity: 1;
   border-color: rgb(217 249 157 / var(--tw-border-opacity));
 }
 
+.s-border-lime-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(190 242 100 / var(--tw-border-opacity));
+}
+
+.s-border-orange-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 237 213 / var(--tw-border-opacity));
+}
+
 .s-border-orange-200 {
   --tw-border-opacity: 1;
   border-color: rgb(254 215 170 / var(--tw-border-opacity));
 }
 
+.s-border-orange-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(253 186 116 / var(--tw-border-opacity));
+}
+
 .s-border-pink-100 {
   --tw-border-opacity: 1;
   border-color: rgb(252 231 243 / var(--tw-border-opacity));
@@ -1836,45 +2011,110 @@ select {
   border-color: rgb(251 207 232 / var(--tw-border-opacity));
 }
 
+.s-border-pink-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(249 168 212 / var(--tw-border-opacity));
+}
+
+.s-border-purple-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(243 232 255 / var(--tw-border-opacity));
+}
+
 .s-border-purple-200 {
   --tw-border-opacity: 1;
   border-color: rgb(233 213 255 / var(--tw-border-opacity));
 }
 
+.s-border-purple-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(216 180 254 / var(--tw-border-opacity));
+}
+
+.s-border-red-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(254 226 226 / var(--tw-border-opacity));
+}
+
 .s-border-red-200 {
   --tw-border-opacity: 1;
   border-color: rgb(254 202 202 / var(--tw-border-opacity));
 }
 
+.s-border-red-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(252 165 165 / var(--tw-border-opacity));
+}
+
 .s-border-red-500 {
   --tw-border-opacity: 1;
   border-color: rgb(239 68 68 / var(--tw-border-opacity));
 }
 
+.s-border-rose-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 228 230 / var(--tw-border-opacity));
+}
+
 .s-border-rose-200 {
   --tw-border-opacity: 1;
   border-color: rgb(254 205 211 / var(--tw-border-opacity));
 }
 
+.s-border-rose-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(253 164 175 / var(--tw-border-opacity));
+}
+
+.s-border-sky-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(224 242 254 / var(--tw-border-opacity));
+}
+
 .s-border-sky-200 {
   --tw-border-opacity: 1;
   border-color: rgb(186 230 253 / var(--tw-border-opacity));
 }
 
+.s-border-sky-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(125 211 252 / var(--tw-border-opacity));
+}
+
+.s-border-slate-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(241 245 249 / var(--tw-border-opacity));
+}
+
 .s-border-slate-200 {
   --tw-border-opacity: 1;
   border-color: rgb(226 232 240 / var(--tw-border-opacity));
 }
 
+.s-border-slate-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(203 213 225 / var(--tw-border-opacity));
+}
+
 .s-border-slate-950\/10 {
   border-color: rgb(2 6 23 / 0.1);
 }
 
+.s-border-stone-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(245 245 244 / var(--tw-border-opacity));
+}
+
 .s-border-stone-200 {
   --tw-border-opacity: 1;
   border-color: rgb(231 229 228 / var(--tw-border-opacity));
 }
 
+.s-border-stone-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(214 211 209 / var(--tw-border-opacity));
+}
+
 .s-border-structure-0 {
   --tw-border-opacity: 1;
   border-color: rgb(255 255 255 / var(--tw-border-opacity));
@@ -1912,25 +2152,55 @@ select {
   border-color: rgb(248 250 252 / var(--tw-border-opacity));
 }
 
+.s-border-teal-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(204 251 241 / var(--tw-border-opacity));
+}
+
 .s-border-teal-200 {
   --tw-border-opacity: 1;
   border-color: rgb(153 246 228 / var(--tw-border-opacity));
 }
 
+.s-border-teal-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(94 234 212 / var(--tw-border-opacity));
+}
+
 .s-border-transparent {
   border-color: transparent;
 }
 
+.s-border-violet-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(237 233 254 / var(--tw-border-opacity));
+}
+
 .s-border-violet-200 {
   --tw-border-opacity: 1;
   border-color: rgb(221 214 254 / var(--tw-border-opacity));
 }
 
+.s-border-violet-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(196 181 253 / var(--tw-border-opacity));
+}
+
+.s-border-warning-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(254 226 226 / var(--tw-border-opacity));
+}
+
 .s-border-warning-200 {
   --tw-border-opacity: 1;
   border-color: rgb(254 202 202 / var(--tw-border-opacity));
 }
 
+.s-border-warning-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(252 165 165 / var(--tw-border-opacity));
+}
+
 .s-border-warning-600 {
   --tw-border-opacity: 1;
   border-color: rgb(220 38 38 / var(--tw-border-opacity));
@@ -1940,11 +2210,21 @@ select {
   border-color: rgb(255 255 255 / 0.3);
 }
 
+.s-border-yellow-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(254 249 195 / var(--tw-border-opacity));
+}
+
 .s-border-yellow-200 {
   --tw-border-opacity: 1;
   border-color: rgb(254 240 138 / var(--tw-border-opacity));
 }
 
+.s-border-yellow-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(253 224 71 / var(--tw-border-opacity));
+}
+
 .s-bg-action-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(219 234 254 / var(--tw-bg-opacity));
@@ -2025,6 +2305,11 @@ select {
   background-color: rgb(146 64 14 / var(--tw-bg-opacity));
 }
 
+.s-bg-background {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
 .s-bg-black\/70 {
   background-color: rgb(0 0 0 / 0.7);
 }
@@ -2449,6 +2734,11 @@ select {
   background-color: rgb(157 23 77 / var(--tw-bg-opacity));
 }
 
+.s-bg-primary-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(248 250 252 / var(--tw-bg-opacity));
+}
+
 .s-bg-purple-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(243 232 255 / var(--tw-bg-opacity));
@@ -3190,6 +3480,10 @@ select {
   padding-left: 1.75rem;
 }
 
+.s-pl-8 {
+  padding-left: 2rem;
+}
+
 .s-pr-10 {
   padding-right: 2.5rem;
 }
@@ -3348,6 +3642,10 @@ select {
   line-height: 1;
 }
 
+.s-tracking-widest {
+  letter-spacing: 0.1em;
+}
+
 .s-text-action-300 {
   --tw-text-opacity: 1;
   color: rgb(147 197 253 / var(--tw-text-opacity));
@@ -3478,6 +3776,11 @@ select {
   color: rgb(15 23 42 / var(--tw-text-opacity));
 }
 
+.s-text-element-950 {
+  --tw-text-opacity: 1;
+  color: rgb(2 6 23 / var(--tw-text-opacity));
+}
+
 .s-text-emerald-500 {
   --tw-text-opacity: 1;
   color: rgb(16 185 129 / var(--tw-text-opacity));
@@ -3603,6 +3906,11 @@ select {
   color: rgb(26 46 5 / var(--tw-text-opacity));
 }
 
+.s-text-muted-foreground {
+  --tw-text-opacity: 1;
+  color: rgb(100 116 139 / var(--tw-text-opacity));
+}
+
 .s-text-orange-700 {
   --tw-text-opacity: 1;
   color: rgb(194 65 12 / var(--tw-text-opacity));
@@ -3638,6 +3946,21 @@ select {
   color: rgb(80 7 36 / var(--tw-text-opacity));
 }
 
+.s-text-primary-400 {
+  --tw-text-opacity: 1;
+  color: rgb(148 163 184 / var(--tw-text-opacity));
+}
+
+.s-text-primary-700 {
+  --tw-text-opacity: 1;
+  color: rgb(51 65 85 / var(--tw-text-opacity));
+}
+
+.s-text-primary-950 {
+  --tw-text-opacity: 1;
+  color: rgb(2 6 23 / var(--tw-text-opacity));
+}
+
 .s-text-purple-700 {
   --tw-text-opacity: 1;
   color: rgb(126 34 206 / var(--tw-text-opacity));
@@ -4366,6 +4689,16 @@ select {
   border-color: rgb(239 68 68 / var(--tw-border-opacity));
 }
 
+.focus\:s-bg-primary-100:focus {
+  --tw-bg-opacity: 1;
+  background-color: rgb(241 245 249 / var(--tw-bg-opacity));
+}
+
+.focus\:s-text-primary-950:focus {
+  --tw-text-opacity: 1;
+  color: rgb(2 6 23 / var(--tw-text-opacity));
+}
+
 .focus\:s-outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -4597,6 +4930,25 @@ select {
   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);
 }
 
+.data-\[disabled\]\:s-pointer-events-none[data-disabled] {
+  pointer-events: none;
+}
+
+.data-\[disabled\]\:s-text-primary-400[data-disabled] {
+  --tw-text-opacity: 1;
+  color: rgb(148 163 184 / var(--tw-text-opacity));
+}
+
+.data-\[state\=open\]\:s-animate-in[data-state=open] {
+  animation-name: enter;
+  animation-duration: 150ms;
+  --tw-enter-opacity: initial;
+  --tw-enter-scale: initial;
+  --tw-enter-rotate: initial;
+  --tw-enter-translate-x: initial;
+  --tw-enter-translate-y: initial;
+}
+
 .data-\[state\=closed\]\:s-animate-out[data-state=closed] {
   animation-name: exit;
   animation-duration: 150ms;
@@ -4611,10 +4963,18 @@ select {
   --tw-exit-opacity: 0;
 }
 
+.data-\[state\=open\]\:s-fade-in-0[data-state=open] {
+  --tw-enter-opacity: 0;
+}
+
 .data-\[state\=closed\]\:s-zoom-out-95[data-state=closed] {
   --tw-exit-scale: .95;
 }
 
+.data-\[state\=open\]\:s-zoom-in-95[data-state=open] {
+  --tw-enter-scale: .95;
+}
+
 .data-\[side\=bottom\]\:s-slide-in-from-top-2[data-side=bottom] {
   --tw-enter-translate-y: -0.5rem;
 }
@@ -4810,7 +5170,7 @@ select {
 
 :is(.s-dark .dark\:s-text-element-900-dark) {
   --tw-text-opacity: 1;
-  color: rgb(248 250 252 / var(--tw-text-opacity));
+  color: rgb(241 245 249 / var(--tw-text-opacity));
 }
 
 :is(.s-dark .dark\:s-text-emerald-950) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.260",
+  "version": "0.2.261",
   "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",
@@ -94,15 +94,20 @@
     "@emoji-mart/data": "^1.1.2",
     "@emoji-mart/react": "^1.1.1",
     "@headlessui/react": "^1.7.19",
+    "@radix-ui/react-dropdown-menu": "^2.1.2",
+    "@radix-ui/react-popover": "^1.1.2",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.3",
     "@tanstack/react-table": "^8.13.0",
+    "clsx": "^2.1.1",
     "emoji-mart": "^5.5.2",
     "lottie-react": "^2.4.0",
     "lottie-web": "^5.12.2",
     "react-confetti": "^6.1.0",
+    "react-dropdown-menu": "^0.0.2",
     "react-markdown": "^9.0.1",
+    "tailwind-merge": "^2.5.3",
     "tailwind-scrollbar-hide": "^1.1.7"
   },
   "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"