@dust-tt/sparkle 0.6.0 → 0.7.1

package/dist/esm/stories/ConversationListItem.stories.js

@@ -0,0 +1,60 @@
+import React from "react";
+import { ConversationListItem, ListGroup, ReplySection, } from "../index_with_tw_base";
+const meta = {
+    title: "Components/ConversationListItem",
+    component: ConversationListItem,
+    tags: ["autodocs"],
+};
+export default meta;
+const mockConversation = {
+    id: "conv-1",
+    title: "Project planning discussion",
+    description: "Let's discuss the roadmap for Q1 and align on priorities for the upcoming sprint.",
+    updatedAt: new Date(),
+};
+export const OneOnOneWithReply = {
+    args: {
+        conversation: mockConversation,
+        time: "14:30",
+    },
+    render: () => (React.createElement(ListGroup, null,
+        React.createElement(ConversationListItem, { conversation: mockConversation, avatar: {
+                name: "Alice",
+                visual: "https://i.pravatar.cc/150?img=1",
+                isRounded: true,
+            }, time: "14:30", replySection: React.createElement(ReplySection, { totalMessages: 3, newMessages: 1, avatars: [
+                    {
+                        name: "Alice",
+                        visual: "https://i.pravatar.cc/150?img=1",
+                        isRounded: true,
+                    },
+                ], lastMessageBy: "Alice" }), onClick: () => console.log("Clicked") }))),
+};
+export const GroupConversationWithReply = {
+    args: {
+        conversation: mockConversation,
+        time: "14:30",
+    },
+    render: () => (React.createElement(ListGroup, null,
+        React.createElement(ConversationListItem, { conversation: mockConversation, creator: {
+                fullName: "Bob",
+                portrait: "https://i.pravatar.cc/150?img=2",
+            }, time: "14:30", replySection: React.createElement(ReplySection, { totalMessages: 5, newMessages: 0, avatars: [
+                    {
+                        name: "Alice",
+                        visual: "https://i.pravatar.cc/150?img=1",
+                        isRounded: true,
+                    },
+                    {
+                        name: "Charlie",
+                        visual: "https://i.pravatar.cc/150?img=3",
+                        isRounded: true,
+                    },
+                    {
+                        name: "Diana",
+                        visual: "https://i.pravatar.cc/150?img=4",
+                        isRounded: true,
+                    },
+                ], lastMessageBy: "seb" }), onClick: () => console.log("Clicked") }))),
+};
+//# sourceMappingURL=ConversationListItem.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ConversationListItem.stories.js","sourceRoot":"","sources":["../../../src/stories/ConversationListItem.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EACL,oBAAoB,EACpB,SAAS,EACT,YAAY,GACb,MAAM,uBAAuB,CAAC;AAE/B,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,iCAAiC;IACxC,SAAS,EAAE,oBAAoB;IAC/B,IAAI,EAAE,CAAC,UAAU,CAAC;CACyB,CAAC;AAE9C,eAAe,IAAI,CAAC;AAGpB,MAAM,gBAAgB,GAAG;IACvB,EAAE,EAAE,QAAQ;IACZ,KAAK,EAAE,6BAA6B;IACpC,WAAW,EACT,mFAAmF;IACrF,SAAS,EAAE,IAAI,IAAI,EAAE;CACtB,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAU;IACtC,IAAI,EAAE;QACJ,YAAY,EAAE,gBAAgB;QAC9B,IAAI,EAAE,OAAO;KACd;IACD,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,oBAAC,SAAS;QACR,oBAAC,oBAAoB,IACnB,YAAY,EAAE,gBAAgB,EAC9B,MAAM,EAAE;gBACN,IAAI,EAAE,OAAO;gBACb,MAAM,EAAE,iCAAiC;gBACzC,SAAS,EAAE,IAAI;aAChB,EACD,IAAI,EAAC,OAAO,EACZ,YAAY,EACV,oBAAC,YAAY,IACX,aAAa,EAAE,CAAC,EAChB,WAAW,EAAE,CAAC,EACd,OAAO,EAAE;oBACP;wBACE,IAAI,EAAE,OAAO;wBACb,MAAM,EAAE,iCAAiC;wBACzC,SAAS,EAAE,IAAI;qBAChB;iBACF,EACD,aAAa,EAAC,OAAO,GACrB,EAEJ,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,GACrC,CACQ,CACb;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,0BAA0B,GAAU;IAC/C,IAAI,EAAE;QACJ,YAAY,EAAE,gBAAgB;QAC9B,IAAI,EAAE,OAAO;KACd;IACD,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,oBAAC,SAAS;QACR,oBAAC,oBAAoB,IACnB,YAAY,EAAE,gBAAgB,EAC9B,OAAO,EAAE;gBACP,QAAQ,EAAE,KAAK;gBACf,QAAQ,EAAE,iCAAiC;aAC5C,EACD,IAAI,EAAC,OAAO,EACZ,YAAY,EACV,oBAAC,YAAY,IACX,aAAa,EAAE,CAAC,EAChB,WAAW,EAAE,CAAC,EACd,OAAO,EAAE;oBACP;wBACE,IAAI,EAAE,OAAO;wBACb,MAAM,EAAE,iCAAiC;wBACzC,SAAS,EAAE,IAAI;qBAChB;oBACD;wBACE,IAAI,EAAE,SAAS;wBACf,MAAM,EAAE,iCAAiC;wBACzC,SAAS,EAAE,IAAI;qBAChB;oBACD;wBACE,IAAI,EAAE,OAAO;wBACb,MAAM,EAAE,iCAAiC;wBACzC,SAAS,EAAE,IAAI;qBAChB;iBACF,EACD,aAAa,EAAC,KAAK,GACnB,EAEJ,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,GACrC,CACQ,CACb;CACF,CAAC"}

package/dist/esm/stories/ImagePreview.stories.d.ts

@@ -0,0 +1,47 @@
+import type { StoryObj } from "@storybook/react";
+import React from "react";
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("../components").ImagePreviewProps & React.RefAttributes<HTMLDivElement>>;
+    tags: string[];
+    argTypes: {
+        variant: {
+            description: string;
+            options: readonly ["absolute", "square"];
+            control: {
+                type: "select";
+            };
+        };
+        titlePosition: {
+            description: string;
+            options: readonly ["bottom", "center"];
+            control: {
+                type: "select";
+            };
+        };
+        isLoading: {
+            description: string;
+            control: "boolean";
+        };
+        manageZoomDialog: {
+            description: string;
+            control: "boolean";
+        };
+        title: {
+            description: string;
+            control: "text";
+        };
+        alt: {
+            description: string;
+            control: "text";
+        };
+    };
+    render: (args: import("../components").ImagePreviewProps & React.RefAttributes<HTMLDivElement>) => React.JSX.Element;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const ExampleImagePreview: Story;
+export declare const WithClose: Story;
+export declare const WithDownload: Story;
+export declare const Gallery: Story;
+//# sourceMappingURL=ImagePreview.stories.d.ts.map

package/dist/esm/stories/ImagePreview.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImagePreview.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/ImagePreview.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8C2B,CAAC;AAEtC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,mBAAmB,EAAE,KAUjC,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAYvB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAa1B,CAAC;AAqFF,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC"}

package/dist/esm/stories/ImagePreview.stories.js

@@ -0,0 +1,107 @@
+import React from "react";
+import { IMAGE_PREVIEW_TITLE_POSITIONS, IMAGE_PREVIEW_VARIANTS, } from "../components/ImagePreview";
+import { ImagePreview, Separator } from "../index_with_tw_base";
+const SAMPLE_IMAGE = "https://dust.tt/static/droidavatar/Droid_Lime_3.jpg";
+const meta = {
+    title: "Components/ImagePreview",
+    component: ImagePreview,
+    tags: ["autodocs"],
+    argTypes: {
+        variant: {
+            description: "Layout variant of the image preview",
+            options: IMAGE_PREVIEW_VARIANTS,
+            control: { type: "select" },
+        },
+        titlePosition: {
+            description: "Position of the title overlay on hover",
+            options: IMAGE_PREVIEW_TITLE_POSITIONS,
+            control: { type: "select" },
+        },
+        isLoading: {
+            description: "Whether the image is in a loading state",
+            control: "boolean",
+        },
+        manageZoomDialog: {
+            description: "Whether clicking opens a zoom dialog",
+            control: "boolean",
+        },
+        title: {
+            description: "Title displayed on hover",
+            control: "text",
+        },
+        alt: {
+            description: "Alt text for the image",
+            control: "text",
+        },
+    },
+    render: (args) => {
+        if (args.variant === "absolute") {
+            return (React.createElement("div", { className: "s-relative s-h-48 s-w-48" },
+                React.createElement(ImagePreview, Object.assign({}, args))));
+        }
+        return (React.createElement("div", { className: "s-w-48" },
+            React.createElement(ImagePreview, Object.assign({}, args))));
+    },
+};
+export default meta;
+export const ExampleImagePreview = {
+    args: {
+        imgSrc: SAMPLE_IMAGE,
+        title: "Sample Image",
+        alt: "A sample droid avatar",
+        variant: "square",
+        titlePosition: "bottom",
+        isLoading: false,
+        manageZoomDialog: true,
+    },
+};
+export const WithClose = {
+    args: {
+        imgSrc: SAMPLE_IMAGE,
+        title: "Closeable Image",
+        variant: "square",
+        titlePosition: "bottom",
+    },
+    render: (args) => (React.createElement("div", { className: "s-w-48" },
+        React.createElement(ImagePreview, Object.assign({}, args, { onClose: () => alert("Close clicked") })))),
+};
+export const WithDownload = {
+    args: {
+        imgSrc: SAMPLE_IMAGE,
+        title: "Downloadable Image",
+        downloadUrl: SAMPLE_IMAGE,
+        variant: "square",
+        titlePosition: "bottom",
+    },
+    render: (args) => (React.createElement("div", { className: "s-w-48" },
+        React.createElement(ImagePreview, Object.assign({}, args)))),
+};
+const ImagePreviewByVariant = ({ variant, }) => (React.createElement(React.Fragment, null,
+    React.createElement(Separator, null),
+    React.createElement("h3", { className: "s-text-primary dark:s-text-primary-50" }, variant === null || variant === void 0 ? void 0 : variant.toUpperCase()),
+    React.createElement("div", { className: "s-flex s-flex-col s-gap-4" }, IMAGE_PREVIEW_TITLE_POSITIONS.map((titlePosition) => (React.createElement("div", { key: titlePosition, className: "s-flex s-flex-col s-gap-2" },
+        React.createElement("div", { className: "s-text-sm s-font-medium s-text-primary dark:s-text-primary-night" },
+            "titlePosition: ",
+            titlePosition),
+        React.createElement("div", { className: "s-flex s-items-center s-gap-4" }, variant === "absolute" ? (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: "s-relative s-h-32 s-w-32" },
+                React.createElement(ImagePreview, { imgSrc: SAMPLE_IMAGE, title: "Normal", variant: variant, titlePosition: titlePosition })),
+            React.createElement("div", { className: "s-relative s-h-32 s-w-32" },
+                React.createElement(ImagePreview, { imgSrc: SAMPLE_IMAGE, title: "Loading", variant: variant, titlePosition: titlePosition, isLoading: true })),
+            React.createElement("div", { className: "s-relative s-h-32 s-w-32" },
+                React.createElement(ImagePreview, { imgSrc: SAMPLE_IMAGE, title: "With Close", variant: variant, titlePosition: titlePosition, onClose: () => { } })))) : (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: "s-w-32" },
+                React.createElement(ImagePreview, { imgSrc: SAMPLE_IMAGE, title: "Normal", variant: variant, titlePosition: titlePosition })),
+            React.createElement("div", { className: "s-w-32" },
+                React.createElement(ImagePreview, { imgSrc: SAMPLE_IMAGE, title: "Loading", variant: variant, titlePosition: titlePosition, isLoading: true })),
+            React.createElement("div", { className: "s-w-32" },
+                React.createElement(ImagePreview, { imgSrc: SAMPLE_IMAGE, title: "With Close", variant: variant, titlePosition: titlePosition, onClose: () => { } })))))))))));
+export const Gallery = {
+    args: {
+        imgSrc: SAMPLE_IMAGE,
+    },
+    render: () => (React.createElement("div", { className: "s-flex s-flex-col s-gap-4" },
+        React.createElement(ImagePreviewByVariant, { variant: "square" }),
+        React.createElement(ImagePreviewByVariant, { variant: "absolute" }))),
+};
+//# sourceMappingURL=ImagePreview.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImagePreview.stories.js","sourceRoot":"","sources":["../../../src/stories/ImagePreview.stories.tsx"],"names":[],"mappings":"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"}

package/dist/esm/styles/allotment.css

@@ -17,37 +17,28 @@
   width: 100%;
 }
 
-.allotment-module_splitView__L-yRc
-  > .allotment-module_sashContainer__fzwJF
-  > .allotment-module_sash__QA-2t {
+.allotment-module_splitView__L-yRc > .allotment-module_sashContainer__fzwJF > .allotment-module_sash__QA-2t {
   pointer-events: auto;
 }
 
-.allotment-module_splitView__L-yRc
-  > .allotment-module_splitViewContainer__rQnVa {
+.allotment-module_splitView__L-yRc > .allotment-module_splitViewContainer__rQnVa {
   height: 100%;
   position: relative;
   white-space: nowrap;
   width: 100%;
 }
 
-.allotment-module_splitView__L-yRc
-  > .allotment-module_splitViewContainer__rQnVa
-  > .allotment-module_splitViewView__MGZ6O {
+.allotment-module_splitView__L-yRc > .allotment-module_splitViewContainer__rQnVa > .allotment-module_splitViewView__MGZ6O {
   overflow: hidden;
   position: absolute;
   white-space: initial;
 }
 
-.allotment-module_splitView__L-yRc.allotment-module_vertical__WSwwa
-  > .allotment-module_splitViewContainer__rQnVa
-  > .allotment-module_splitViewView__MGZ6O {
+.allotment-module_splitView__L-yRc.allotment-module_vertical__WSwwa > .allotment-module_splitViewContainer__rQnVa > .allotment-module_splitViewView__MGZ6O {
   width: 100%;
 }
 
-.allotment-module_splitView__L-yRc.allotment-module_horizontal__7doS8
-  > .allotment-module_splitViewContainer__rQnVa
-  > .allotment-module_splitViewView__MGZ6O {
+.allotment-module_splitView__L-yRc.allotment-module_horizontal__7doS8 > .allotment-module_splitViewContainer__rQnVa > .allotment-module_splitViewView__MGZ6O {
   height: 100%;
 }
 
@@ -138,8 +129,7 @@
   height: var(--sash-size);
 }
 
-.sash-module_sash__K-9lB:not(.sash-module_disabled__Hm-wx)
-  > .sash-module_orthogonal-drag-handle__Yii2- {
+.sash-module_sash__K-9lB:not(.sash-module_disabled__Hm-wx) > .sash-module_orthogonal-drag-handle__Yii2- {
   content: " ";
   height: calc(var(--sash-size) * 2);
   width: calc(var(--sash-size) * 2);
@@ -149,48 +139,36 @@
   position: absolute;
 }
 
-.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw.sash-module_orthogonal-edge-north__f7Noe:not(
-    .sash-module_disabled__Hm-wx
-  )
+.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw.sash-module_orthogonal-edge-north__f7Noe:not(.sash-module_disabled__Hm-wx)
   > .sash-module_orthogonal-drag-handle__Yii2-.sash-module_start__uZEDk,
-.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw.sash-module_orthogonal-edge-south__6ZrFC:not(
-    .sash-module_disabled__Hm-wx
-  )
+.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw.sash-module_orthogonal-edge-south__6ZrFC:not(.sash-module_disabled__Hm-wx)
   > .sash-module_orthogonal-drag-handle__Yii2-.sash-module_end__0TP-R {
   cursor: nwse-resize;
 }
 
-.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw.sash-module_orthogonal-edge-north__f7Noe:not(
-    .sash-module_disabled__Hm-wx
-  )
+.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw.sash-module_orthogonal-edge-north__f7Noe:not(.sash-module_disabled__Hm-wx)
   > .sash-module_orthogonal-drag-handle__Yii2-.sash-module_end__0TP-R,
-.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw.sash-module_orthogonal-edge-south__6ZrFC:not(
-    .sash-module_disabled__Hm-wx
-  )
+.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw.sash-module_orthogonal-edge-south__6ZrFC:not(.sash-module_disabled__Hm-wx)
   > .sash-module_orthogonal-drag-handle__Yii2-.sash-module_start__uZEDk {
   cursor: nesw-resize;
 }
 
-.sash-module_sash__K-9lB.sash-module_vertical__pB-rs
-  > .sash-module_orthogonal-drag-handle__Yii2-.sash-module_start__uZEDk {
+.sash-module_sash__K-9lB.sash-module_vertical__pB-rs > .sash-module_orthogonal-drag-handle__Yii2-.sash-module_start__uZEDk {
   left: calc(var(--sash-size) * -0.5);
   top: calc(var(--sash-size) * -1);
 }
 
-.sash-module_sash__K-9lB.sash-module_vertical__pB-rs
-  > .sash-module_orthogonal-drag-handle__Yii2-.sash-module_end__0TP-R {
+.sash-module_sash__K-9lB.sash-module_vertical__pB-rs > .sash-module_orthogonal-drag-handle__Yii2-.sash-module_end__0TP-R {
   left: calc(var(--sash-size) * -0.5);
   bottom: calc(var(--sash-size) * -1);
 }
 
-.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw
-  > .sash-module_orthogonal-drag-handle__Yii2-.sash-module_start__uZEDk {
+.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw > .sash-module_orthogonal-drag-handle__Yii2-.sash-module_start__uZEDk {
   top: calc(var(--sash-size) * -0.5);
   left: calc(var(--sash-size) * -1);
 }
 
-.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw
-  > .sash-module_orthogonal-drag-handle__Yii2-.sash-module_end__0TP-R {
+.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw > .sash-module_orthogonal-drag-handle__Yii2-.sash-module_end__0TP-R {
   top: calc(var(--sash-size) * -0.5);
   right: calc(var(--sash-size) * -1);
 }

package/dist/sparkle.css

@@ -1085,6 +1085,10 @@ select {
   top: 0.75rem;
 }
 
+.s-top-4 {
+  top: 1rem;
+}
+
 .s-top-\[50\%\] {
   top: 50%;
 }
@@ -1402,6 +1406,10 @@ select {
   height: 0.875rem;
 }
 
+.s-h-32 {
+  height: 8rem;
+}
+
 .s-h-36 {
   height: 9rem;
 }
@@ -1889,10 +1897,6 @@ select {
   max-width: 42rem;
 }
 
-.s-max-w-3xl {
-  max-width: 48rem;
-}
-
 .s-max-w-44 {
   max-width: 11rem;
 }
@@ -2614,6 +2618,10 @@ select {
   border-width: 1px;
 }
 
+.s-border-0 {
+  border-width: 0px;
+}
+
 .s-border-2 {
   border-width: 2px;
 }
@@ -3623,6 +3631,10 @@ select {
   background-color: rgb(238 238 239 / 0);
 }
 
+.s-bg-primary-100\/60 {
+  background-color: rgb(238 238 239 / 0.6);
+}
+
 .s-bg-primary-100\/80 {
   background-color: rgb(238 238 239 / 0.8);
 }
@@ -4436,6 +4448,10 @@ select {
   padding-bottom: 1rem;
 }
 
+.s-pb-7 {
+  padding-bottom: 1.75rem;
+}
+
 .s-pb-8 {
   padding-bottom: 2rem;
 }
@@ -4544,10 +4560,6 @@ select {
   padding-top: 1rem;
 }
 
-.s-pt-6 {
-  padding-top: 1.5rem;
-}
-
 .s-pt-7 {
   padding-top: 1.75rem;
 }
@@ -4710,10 +4722,6 @@ select {
   line-height: 1.25;
 }
 
-.s-tracking-wide {
-  letter-spacing: 0.025em;
-}
-
 .s-tracking-widest {
   letter-spacing: 0.1em;
 }
@@ -5558,11 +5566,6 @@ select {
   filter: blur(calc(2rem));
 }
 
-.\[mask-image\:radial-gradient\(white\2c black\)\] {
-  -webkit-mask-image: radial-gradient(white,black);
-          mask-image: radial-gradient(white,black);
-}
-
 @keyframes bgblink {
   0%,
   100% {
@@ -6266,6 +6269,14 @@ select {
   }
 }
 
+.s-group\/menu-item:focus-within .group-focus-within\/menu-item\:s-hidden {
+  display: none;
+}
+
+.s-group\/menu-item:focus-within .group-focus-within\/menu-item\:s-pr-8 {
+  padding-right: 2rem;
+}
+
 .s-group\/card:focus-within .group-focus-within\/card\:s-opacity-100 {
   opacity: 1;
 }
@@ -6283,10 +6294,6 @@ select {
     display: none;
   }
 
-  .s-group:hover .group-hover\:s-bg-primary-200\/70 {
-    background-color: rgb(211 213 217 / 0.7);
-  }
-
   .s-group\/menu-item:hover .group-hover\/menu-item\:s-pr-8 {
     padding-right: 2rem;
   }
@@ -6304,11 +6311,11 @@ select {
     opacity: 1;
   }
 
-  .s-group\/menu-item:hover .group-hover\/menu-item\:s-opacity-100 {
+  .s-group\/grid-image:hover .group-hover\/grid-image\:s-opacity-100 {
     opacity: 1;
   }
 
-  .s-group\/preview:hover .group-hover\/preview\:s-opacity-100 {
+  .s-group\/menu-item:hover .group-hover\/menu-item\:s-opacity-100 {
     opacity: 1;
   }
 
@@ -6320,6 +6327,11 @@ select {
     opacity: 1;
   }
 
+  .s-group\/grid-image:hover .group-hover\/grid-image\:s-blur-sm {
+    --tw-blur: blur(4px);
+    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);
+  }
+
   .s-group:hover .group-hover\:s-brightness-110 {
     --tw-brightness: brightness(1.1);
     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,15 +6340,6 @@ select {
   .s-group:hover .group-hover\:s-filter {
     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);
   }
-
-  .s-group:hover .group-hover\:s-backdrop-blur-none {
-    --tw-backdrop-blur:  ;
-    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-  }
-}
-
-.s-group:active .group-active\:s-bg-primary-100\/60 {
-  background-color: rgb(238 238 239 / 0.6);
 }
 
 .s-group:active .group-active\:s-brightness-90 {
@@ -6622,10 +6625,6 @@ select {
   padding-right: 2rem;
 }
 
-.s-group\/menu-item[data-selected="true"] .group-data-\[selected\=true\]\/menu-item\:s-opacity-100 {
-  opacity: 1;
-}
-
 @container (min-width: 24rem) {
   .\@xxs\:s-grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -7501,6 +7500,10 @@ select {
   background-color: rgb(28 34 45 / var(--tw-bg-opacity, 1));
 }
 
+.dark\:s-bg-muted-background-night\/50:is(.s-dark *) {
+  background-color: rgb(28 34 45 / 0.5);
+}
+
 .dark\:s-bg-muted-background-night\/75:is(.s-dark *) {
   background-color: rgb(28 34 45 / 0.75);
 }
@@ -7649,6 +7652,10 @@ select {
   background-color: rgb(28 34 45 / 0);
 }
 
+.dark\:s-bg-primary-100-night\/60:is(.s-dark *) {
+  background-color: rgb(28 34 45 / 0.6);
+}
+
 .dark\:s-bg-primary-100-night\/80:is(.s-dark *) {
   background-color: rgb(28 34 45 / 0.8);
 }
@@ -8751,6 +8758,11 @@ select {
     background-color: rgb(8 80 146 / var(--tw-bg-opacity, 1));
   }
 
+  .hover\:dark\:s-bg-primary-100-night:is(.s-dark *):hover {
+    --tw-bg-opacity: 1;
+    background-color: rgb(28 34 45 / var(--tw-bg-opacity, 1));
+  }
+
   .dark\:hover\:s-text-blue-700-night:hover:is(.s-dark *) {
     --tw-text-opacity: 1;
     color: rgb(122 198 255 / var(--tw-text-opacity, 1));
@@ -8900,6 +8912,11 @@ select {
   --tw-ring-offset-width: 1px;
 }
 
+.active\:dark\:s-bg-primary-150-night:is(.s-dark *):active {
+  --tw-bg-opacity: 1;
+  background-color: rgb(28 34 45 / var(--tw-bg-opacity, 1));
+}
+
 .dark\:active\:s-bg-primary-100-night:active:is(.s-dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(28 34 45 / var(--tw-bg-opacity, 1));
@@ -9079,20 +9096,12 @@ select {
     color: rgb(123 129 141 / var(--tw-text-opacity, 1));
   }
 
-  .s-group:hover .dark\:group-hover\:s-bg-primary-200-night\/70:is(.s-dark *) {
-    background-color: rgb(42 50 65 / 0.7);
-  }
-
   .s-group\/col:hover .dark\:group-hover\/col\:s-text-highlight-500-night:is(.s-dark *) {
     --tw-text-opacity: 1;
     color: rgb(28 145 255 / var(--tw-text-opacity, 1));
   }
 }
 
-.s-group:active .dark\:group-active\:s-bg-primary-100-night\/60:is(.s-dark *) {
-  background-color: rgb(28 34 45 / 0.6);
-}
-
 .dark\:data-\[state\=checked\]\:s-bg-primary-night[data-state="checked"]:is(.s-dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(211 213 217 / var(--tw-bg-opacity, 1));

package/package.json

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