@dust-tt/sparkle 0.5.8 → 0.5.9

package/dist/esm/components/AttachmentChip.d.ts

@@ -1,9 +1,17 @@
 import React from "react";
+import { CHIP_COLORS, CHIP_SIZES } from "./Chip";
+import { DoubleIconProps, IconProps } from "./Icon";
 import { LinkWrapperProps } from "./LinkWrapper";
+type AttachmentChipIconProps = IconProps | DoubleIconProps;
 interface AttachmentChipBaseProps {
     label: string;
-    icon?: React.ComponentType;
+    icon?: AttachmentChipIconProps;
+    size?: (typeof CHIP_SIZES)[number];
+    color?: (typeof CHIP_COLORS)[number];
     className?: string;
+    isBusy?: boolean;
+    onRemove?: () => void;
+    onClick?: () => void;
 }
 type AttachmentChipButtonProps = AttachmentChipBaseProps & {
     href?: never;
@@ -12,6 +20,6 @@ type AttachmentChipButtonProps = AttachmentChipBaseProps & {
 };
 type AttachmentChipLinkProps = AttachmentChipBaseProps & Omit<LinkWrapperProps, "children">;
 type AttachmentChipProps = AttachmentChipButtonProps | AttachmentChipLinkProps;
-export declare function AttachmentChip({ label, icon, className, ...props }: AttachmentChipProps): React.JSX.Element;
+export declare function AttachmentChip({ icon, className, label, size, color, isBusy, onRemove, onClick, ...linkProps }: AttachmentChipProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=AttachmentChip.d.ts.map

package/dist/esm/components/AttachmentChip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AttachmentChip.d.ts","sourceRoot":"","sources":["../../../src/components/AttachmentChip.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAe,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAY9D,UAAU,uBAAuB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,KAAK,yBAAyB,GAAG,uBAAuB,GAAG;IACzD,IAAI,CAAC,EAAE,KAAK,CAAC;CACd,GAAG;KACD,CAAC,IAAI,MAAM,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK;CACxD,CAAC;AAEF,KAAK,uBAAuB,GAAG,uBAAuB,GACpD,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC;AAErC,KAAK,mBAAmB,GAAG,yBAAyB,GAAG,uBAAuB,CAAC;AAE/E,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,IAAI,EACJ,SAAS,EACT,GAAG,KAAK,EACT,EAAE,mBAAmB,qBAarB"}
+{"version":3,"file":"AttachmentChip.d.ts","sourceRoot":"","sources":["../../../src/components/AttachmentChip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAQ,WAAW,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AACvD,OAAO,EAAc,eAAe,EAAQ,SAAS,EAAE,MAAM,QAAQ,CAAC;AACtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAQjD,KAAK,uBAAuB,GAAG,SAAS,GAAG,eAAe,CAAC;AAQ3D,UAAU,uBAAuB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,uBAAuB,CAAC;IAC/B,IAAI,CAAC,EAAE,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,KAAK,yBAAyB,GAAG,uBAAuB,GAAG;IACzD,IAAI,CAAC,EAAE,KAAK,CAAC;CACd,GAAG;KACD,CAAC,IAAI,MAAM,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK;CACxD,CAAC;AAEF,KAAK,uBAAuB,GAAG,uBAAuB,GACpD,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC;AAErC,KAAK,mBAAmB,GAAG,yBAAyB,GAAG,uBAAuB,CAAC;AAE/E,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,SAAS,EACT,KAAK,EACL,IAAI,EACJ,KAAK,EACL,MAAM,EACN,QAAQ,EACR,OAAO,EACP,GAAG,SAAS,EACb,EAAE,mBAAmB,qBAsCrB"}

package/dist/esm/components/AttachmentChip.js

@@ -1,15 +1,19 @@
 import { __rest } from "tslib";
-import { cva } from "class-variance-authority";
 import React from "react";
 import { cn } from "../lib/utils";
-import { Icon } from "./Icon";
-import { LinkWrapper } from "./LinkWrapper";
-const attachmentChipVariants = cva(cn("s-box-border s-inline-flex s-items-center s-gap-1.5 s-rounded-lg s-px-2 s-py-1 s-heading-sm", "s-border-border s-bg-background", "dark:s-border-border-night dark:s-bg-background-night", "s-text-foreground dark:s-text-foreground-night", "s-max-w-44"));
+import { Chip } from "./Chip";
+import { DoubleIcon, Icon } from "./Icon";
+const attachmentChipOverrides = cn("s-rounded-lg s-px-2 s-py-1 s-heading-sm s-gap-1.5", "s-bg-background s-text-foreground s-max-w-44", "dark:s-bg-background-night dark:s-text-foreground-night");
+function isDoubleIconProps(props) {
+    return "mainIcon" in props;
+}
 export function AttachmentChip(_a) {
-    var { label, icon, className } = _a, props = __rest(_a, ["label", "icon", "className"]);
-    const chipContent = (React.createElement("div", { className: cn(attachmentChipVariants({}), className) },
-        React.createElement(Icon, { visual: icon, size: "xs", className: "s-shrink-0" }),
-        React.createElement("span", { className: "s-pointer s-grow s-truncate" }, label)));
-    return "href" in props && props.href ? (React.createElement(LinkWrapper, Object.assign({}, props), chipContent)) : (chipContent);
+    var { icon, className, label, size, color, isBusy, onRemove, onClick } = _a, linkProps = __rest(_a, ["icon", "className", "label", "size", "color", "isBusy", "onRemove", "onClick"]);
+    const iconElement = icon && (React.createElement("div", { className: "s-shrink-0" }, isDoubleIconProps(icon) ? React.createElement(DoubleIcon, Object.assign({}, icon)) : React.createElement(Icon, Object.assign({}, icon))));
+    const chipClassName = cn(attachmentChipOverrides, className);
+    if ("href" in linkProps && linkProps.href) {
+        return (React.createElement(Chip, Object.assign({ className: chipClassName, label: label, size: size, color: color, isBusy: isBusy, onRemove: onRemove }, linkProps), iconElement));
+    }
+    return (React.createElement(Chip, { className: chipClassName, label: label, size: size, color: color, isBusy: isBusy, onRemove: onRemove, onClick: onClick }, iconElement));
 }
 //# sourceMappingURL=AttachmentChip.js.map

package/dist/esm/components/AttachmentChip.js.map

@@ -1 +1 @@
-{"version":3,"file":"AttachmentChip.js","sourceRoot":"","sources":["../../../src/components/AttachmentChip.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAC/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAC;AAExC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,WAAW,EAAoB,MAAM,eAAe,CAAC;AAE9D,MAAM,sBAAsB,GAAG,GAAG,CAChC,EAAE,CACA,6FAA6F,EAC7F,iCAAiC,EACjC,uDAAuD,EACvD,gDAAgD,EAChD,YAAY,CACb,CACF,CAAC;AAmBF,MAAM,UAAU,cAAc,CAAC,EAKT,EAAE;QALO,EAC7B,KAAK,EACL,IAAI,EACJ,SAAS,OAEW,EADjB,KAAK,cAJqB,8BAK9B,CADS;IAER,MAAM,WAAW,GAAG,CAClB,6BAAK,SAAS,EAAE,EAAE,CAAC,sBAAsB,CAAC,EAAE,CAAC,EAAE,SAAS,CAAC;QACvD,oBAAC,IAAI,IAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,YAAY,GAAG;QACvD,8BAAM,SAAS,EAAC,6BAA6B,IAAE,KAAK,CAAQ,CACxD,CACP,CAAC;IAEF,OAAO,MAAM,IAAI,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CACrC,oBAAC,WAAW,oBAAK,KAAK,GAAG,WAAW,CAAe,CACpD,CAAC,CAAC,CAAC,CACF,WAAW,CACZ,CAAC;AAAA,CACH"}
+{"version":3,"file":"AttachmentChip.js","sourceRoot":"","sources":["../../../src/components/AttachmentChip.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAC;AAExC,OAAO,EAAE,IAAI,EAA2B,MAAM,QAAQ,CAAC;AACvD,OAAO,EAAE,UAAU,EAAmB,IAAI,EAAa,MAAM,QAAQ,CAAC;AAGtE,MAAM,uBAAuB,GAAG,EAAE,CAChC,mDAAmD,EACnD,8CAA8C,EAC9C,yDAAyD,CAC1D,CAAC;AAIF,SAAS,iBAAiB,CACxB,KAA8B,EACJ;IAC1B,OAAO,UAAU,IAAI,KAAK,CAAC;AAAA,CAC5B;AAwBD,MAAM,UAAU,cAAc,CAAC,EAUT,EAAE;QAVO,EAC7B,IAAI,EACJ,SAAS,EACT,KAAK,EACL,IAAI,EACJ,KAAK,EACL,MAAM,EACN,QAAQ,EACR,OAAO,OAEa,EADjB,SAAS,cATiB,gFAU9B,CADa;IAEZ,MAAM,WAAW,GAAG,IAAI,IAAI,CAC1B,6BAAK,SAAS,EAAC,YAAY,IACxB,iBAAiB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,oBAAC,UAAU,oBAAK,IAAI,EAAI,CAAC,CAAC,CAAC,oBAAC,IAAI,oBAAK,IAAI,EAAI,CACpE,CACP,CAAC;IAEF,MAAM,aAAa,GAAG,EAAE,CAAC,uBAAuB,EAAE,SAAS,CAAC,CAAC;IAE7D,IAAI,MAAM,IAAI,SAAS,IAAI,SAAS,CAAC,IAAI,EAAE,CAAC;QAC1C,OAAO,CACL,oBAAC,IAAI,kBACH,SAAS,EAAE,aAAa,EACxB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,IACd,SAAS,GAEZ,WAAW,CACP,CACR,CAAC;IACJ,CAAC;IAED,OAAO,CACL,oBAAC,IAAI,IACH,SAAS,EAAE,aAAa,EACxB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,IAEf,WAAW,CACP,CACR,CAAC;AAAA,CACH"}

package/dist/esm/components/Card.js

@@ -56,7 +56,7 @@ export const Card = React.forwardRef((_a, ref) => {
 Card.displayName = "Card";
 const CardActions = React.forwardRef((_a, ref) => {
     var { children } = _a, props = __rest(_a, ["children"]);
-    return (React.createElement("div", Object.assign({ ref: ref, className: cn("s-absolute s-right-2 s-top-2 sm:s-opacity-0 s-transition-opacity", "group-focus-within/card:s-opacity-100 group-hover/card:s-opacity-100") }, props), children));
+    return (React.createElement("div", Object.assign({ ref: ref, className: cn("s-absolute s-right-2 s-top-2 s-transition-opacity sm:s-opacity-0", "group-focus-within/card:s-opacity-100 group-hover/card:s-opacity-100") }, props), children));
 });
 CardActions.displayName = "CardActions";
 export const CardActionButton = React.forwardRef((_a, ref) => {

package/dist/esm/components/Chip.d.ts

@@ -22,7 +22,7 @@ type ChipButtonProps = ChipBaseProps & {
 type ChipLinkProps = ChipBaseProps & Omit<LinkWrapperProps, "children"> & {
     onClick?: never;
 };
-type ChipProps = ChipLinkProps | ChipButtonProps;
+export type ChipProps = ChipLinkProps | ChipButtonProps;
 declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLDivElement>>;
 export { Chip };
 //# sourceMappingURL=Chip.d.ts.map

package/dist/esm/components/Chip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../src/components/Chip.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAExD,OAAO,EAGL,gBAAgB,EACjB,MAAM,sBAAsB,CAAC;AAM9B,eAAO,MAAM,UAAU,+BAAgC,CAAC;AAExD,KAAK,YAAY,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;AAEhD,eAAO,MAAM,WAAW,oGAUd,CAAC;AAEX,KAAK,aAAa,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AA+GlD,KAAK,aAAa,GAAG;IACnB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,KAAK,eAAe,GAAG,aAAa,GAAG;IACrC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,GAAG;KACD,CAAC,IAAI,MAAM,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK;CACxD,CAAC;AAEF,KAAK,aAAa,GAAG,aAAa,GAChC,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,GAAG;IACnC,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB,CAAC;AAEJ,KAAK,SAAS,GAAG,aAAa,GAAG,eAAe,CAAC;AAOjD,QAAA,MAAM,IAAI,kFAoFT,CAAC;AAIF,OAAO,EAAE,IAAI,EAAE,CAAC"}
+{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../src/components/Chip.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAExD,OAAO,EAGL,gBAAgB,EACjB,MAAM,sBAAsB,CAAC;AAM9B,eAAO,MAAM,UAAU,+BAAgC,CAAC;AAExD,KAAK,YAAY,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;AAEhD,eAAO,MAAM,WAAW,oGAUd,CAAC;AAEX,KAAK,aAAa,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AA+GlD,KAAK,aAAa,GAAG;IACnB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,KAAK,eAAe,GAAG,aAAa,GAAG;IACrC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,GAAG;KACD,CAAC,IAAI,MAAM,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK;CACxD,CAAC;AAEF,KAAK,aAAa,GAAG,aAAa,GAChC,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,GAAG;IACnC,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB,CAAC;AAEJ,MAAM,MAAM,SAAS,GAAG,aAAa,GAAG,eAAe,CAAC;AAOxD,QAAA,MAAM,IAAI,kFAoFT,CAAC;AAIF,OAAO,EAAE,IAAI,EAAE,CAAC"}

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

@@ -14,4 +14,7 @@ export declare const Document: Story;
 export declare const Image: Story;
 export declare const Text: Story;
 export declare const LongLabel: Story;
+export declare const WithDoubleIcon: Story;
+export declare const WithDoubleIconAndLink: Story;
+export declare const WithChipColor: Story;
 //# sourceMappingURL=AttachmentChip.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AttachmentChip.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/AttachmentChip.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAIrD,QAAA,MAAM,IAAI;;;;;;;CAO6B,CAAC;AAExC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAWnC,eAAO,MAAM,QAAQ,EAAE,KAYtB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAYnB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAYlB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAYvB,CAAC"}
+{"version":3,"file":"AttachmentChip.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/AttachmentChip.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAIrD,QAAA,MAAM,IAAI;;;;;;;CAO6B,CAAC;AAExC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAWnC,eAAO,MAAM,QAAQ,EAAE,KAYtB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAYnB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAYlB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAYvB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAY5B,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAcnC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAa3B,CAAC"}

package/dist/esm/stories/AttachmentChip.stories.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { AttachmentChip } from "../components";
-import { DocumentIcon, DocumentTextIcon } from "../icons/app";
-import { NotionLogo } from "../logo";
+import { DocumentIcon, DocumentTextIcon, FolderIcon } from "../icons/app";
+import { DriveLogo, NotionLogo } from "../logo";
 const meta = {
     title: "Components/AttachmentChip",
     component: AttachmentChip,
@@ -20,7 +20,7 @@ const ParagraphWrapper = ({ children }) => (React.createElement("div", { classNa
 export const Document = {
     args: {
         label: "document.pdf",
-        icon: NotionLogo,
+        icon: { visual: NotionLogo },
     },
     decorators: [
         (Story) => (React.createElement(ParagraphWrapper, null,
@@ -30,7 +30,7 @@ export const Document = {
 export const Image = {
     args: {
         label: "image.jpg",
-        icon: NotionLogo,
+        icon: { visual: NotionLogo },
     },
     decorators: [
         (Story) => (React.createElement(ParagraphWrapper, null,
@@ -40,7 +40,7 @@ export const Image = {
 export const Text = {
     args: {
         label: "text.txt",
-        icon: DocumentTextIcon,
+        icon: { visual: DocumentTextIcon },
     },
     decorators: [
         (Story) => (React.createElement(ParagraphWrapper, null,
@@ -50,7 +50,40 @@ export const Text = {
 export const LongLabel = {
     args: {
         label: "very_long_document_name_that_will_be_truncated.pdf",
-        icon: DocumentIcon,
+        icon: { visual: DocumentIcon },
+    },
+    decorators: [
+        (Story) => (React.createElement(ParagraphWrapper, null,
+            React.createElement(Story, null))),
+    ],
+};
+export const WithDoubleIcon = {
+    args: {
+        label: "My Drive Folder",
+        icon: { mainIcon: FolderIcon, secondaryIcon: DriveLogo, size: "sm" },
+    },
+    decorators: [
+        (Story) => (React.createElement(ParagraphWrapper, null,
+            React.createElement(Story, null))),
+    ],
+};
+export const WithDoubleIconAndLink = {
+    args: {
+        label: "Notion Document",
+        icon: { mainIcon: DocumentIcon, secondaryIcon: NotionLogo, size: "sm" },
+        href: "https://notion.so",
+        target: "_blank",
+    },
+    decorators: [
+        (Story) => (React.createElement(ParagraphWrapper, null,
+            React.createElement(Story, null))),
+    ],
+};
+export const WithChipColor = {
+    args: {
+        label: "Success chip",
+        icon: { visual: DocumentIcon },
+        color: "success",
     },
     decorators: [
         (Story) => (React.createElement(ParagraphWrapper, null,

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

@@ -1 +1 @@
-{"version":3,"file":"AttachmentChip.stories.js","sourceRoot":"","sources":["../../../src/stories/AttachmentChip.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,2BAA2B;IAClC,SAAS,EAAE,cAAc;IACzB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;IACD,IAAI,EAAE,CAAC,UAAU,CAAC;CACmB,CAAC;AAExC,eAAe,IAAI,CAAC;AAGpB,MAAM,gBAAgB,GAAG,CAAC,EAAE,QAAQ,EAAiC,EAAE,EAAE,CAAC,CACxE,6BAAK,SAAS,EAAC,gDAAgD;IAC7D,2BAAG,SAAS,EAAC,6CAA6C;QACxD,8BAAM,SAAS,EAAC,kCAAkC,aAAc;;QACjD,QAAQ;oBACrB,CACA,CACP,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE;QACJ,KAAK,EAAE,cAAc;QACrB,IAAI,EAAE,UAAU;KACjB;IACD,UAAU,EAAE;QACV,CAAC,KAAK,EAAE,EAAE,CAAC,CACT,oBAAC,gBAAgB;YACf,oBAAC,KAAK,OAAG,CACQ,CACpB;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,IAAI,EAAE;QACJ,KAAK,EAAE,WAAW;QAClB,IAAI,EAAE,UAAU;KACjB;IACD,UAAU,EAAE;QACV,CAAC,KAAK,EAAE,EAAE,CAAC,CACT,oBAAC,gBAAgB;YACf,oBAAC,KAAK,OAAG,CACQ,CACpB;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAU;IACzB,IAAI,EAAE;QACJ,KAAK,EAAE,UAAU;QACjB,IAAI,EAAE,gBAAgB;KACvB;IACD,UAAU,EAAE;QACV,CAAC,KAAK,EAAE,EAAE,CAAC,CACT,oBAAC,gBAAgB;YACf,oBAAC,KAAK,OAAG,CACQ,CACpB;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,KAAK,EAAE,oDAAoD;QAC3D,IAAI,EAAE,YAAY;KACnB;IACD,UAAU,EAAE;QACV,CAAC,KAAK,EAAE,EAAE,CAAC,CACT,oBAAC,gBAAgB;YACf,oBAAC,KAAK,OAAG,CACQ,CACpB;KACF;CACF,CAAC"}
+{"version":3,"file":"AttachmentChip.stories.js","sourceRoot":"","sources":["../../../src/stories/AttachmentChip.stories.tsx"],"names":[],"mappings":"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"}

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

@@ -2,36 +2,7 @@ import type { StoryObj } from "@storybook/react";
 import React from "react";
 declare const meta: {
     title: string;
-    component: React.ForwardRefExoticComponent<(({
-        size?: "mini" | "sm" | "xs" | undefined;
-        color?: "blue" | "golden" | "green" | "highlight" | "info" | "primary" | "rose" | "success" | "warning" | undefined;
-        label?: string | undefined;
-        children?: React.ReactNode;
-        className?: string | undefined;
-        isBusy?: boolean | undefined;
-        icon?: React.ComponentType | undefined;
-        onRemove?: (() => void) | undefined;
-    } & {
-        onClick?: (() => void) | undefined;
-    } & {
-        href?: undefined;
-        rel?: undefined;
-        replace?: undefined;
-        shallow?: undefined;
-        target?: undefined;
-        prefetch?: undefined;
-    }) | ({
-        size?: "mini" | "sm" | "xs" | undefined;
-        color?: "blue" | "golden" | "green" | "highlight" | "info" | "primary" | "rose" | "success" | "warning" | undefined;
-        label?: string | undefined;
-        children?: React.ReactNode;
-        className?: string | undefined;
-        isBusy?: boolean | undefined;
-        icon?: React.ComponentType | undefined;
-        onRemove?: (() => void) | undefined;
-    } & Omit<import("../components").LinkWrapperProps, "children"> & {
-        onClick?: undefined;
-    })) & React.RefAttributes<HTMLDivElement>>;
+    component: React.ForwardRefExoticComponent<import("../components/Chip").ChipProps & React.RefAttributes<HTMLDivElement>>;
     tags: string[];
     parameters: {
         layout: string;

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

@@ -1 +1 @@
-{"version":3,"file":"Chip.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/Chip.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqCmB,CAAC;AAE9B,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAGnC,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAS1B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAuB3B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAsFvB,CAAC"}
+{"version":3,"file":"Chip.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/Chip.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqCmB,CAAC;AAE9B,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAGnC,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAS1B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAuB3B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAsFvB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.5.8",
+  "version": "0.5.9",
   "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/AttachmentChip.tsx

@@ -1,25 +1,34 @@
-import { cva } from "class-variance-authority";
 import React from "react";
 
 import { cn } from "@sparkle/lib/utils";
 
-import { Icon } from "./Icon";
-import { LinkWrapper, LinkWrapperProps } from "./LinkWrapper";
-
-const attachmentChipVariants = cva(
-  cn(
-    "s-box-border s-inline-flex s-items-center s-gap-1.5 s-rounded-lg s-px-2 s-py-1 s-heading-sm",
-    "s-border-border s-bg-background",
-    "dark:s-border-border-night dark:s-bg-background-night",
-    "s-text-foreground dark:s-text-foreground-night",
-    "s-max-w-44"
-  )
+import { Chip, CHIP_COLORS, CHIP_SIZES } from "./Chip";
+import { DoubleIcon, DoubleIconProps, Icon, IconProps } from "./Icon";
+import { LinkWrapperProps } from "./LinkWrapper";
+
+const attachmentChipOverrides = cn(
+  "s-rounded-lg s-px-2 s-py-1 s-heading-sm s-gap-1.5",
+  "s-bg-background s-text-foreground s-max-w-44",
+  "dark:s-bg-background-night dark:s-text-foreground-night"
 );
 
+type AttachmentChipIconProps = IconProps | DoubleIconProps;
+
+function isDoubleIconProps(
+  props: AttachmentChipIconProps
+): props is DoubleIconProps {
+  return "mainIcon" in props;
+}
+
 interface AttachmentChipBaseProps {
   label: string;
-  icon?: React.ComponentType;
+  icon?: AttachmentChipIconProps;
+  size?: (typeof CHIP_SIZES)[number];
+  color?: (typeof CHIP_COLORS)[number];
   className?: string;
+  isBusy?: boolean;
+  onRemove?: () => void;
+  onClick?: () => void;
 }
 
 type AttachmentChipButtonProps = AttachmentChipBaseProps & {
@@ -34,21 +43,51 @@ type AttachmentChipLinkProps = AttachmentChipBaseProps &
 type AttachmentChipProps = AttachmentChipButtonProps | AttachmentChipLinkProps;
 
 export function AttachmentChip({
-  label,
   icon,
   className,
-  ...props
+  label,
+  size,
+  color,
+  isBusy,
+  onRemove,
+  onClick,
+  ...linkProps
 }: AttachmentChipProps) {
-  const chipContent = (
-    <div className={cn(attachmentChipVariants({}), className)}>
-      <Icon visual={icon} size="xs" className="s-shrink-0" />
-      <span className="s-pointer s-grow s-truncate">{label}</span>
+  const iconElement = icon && (
+    <div className="s-shrink-0">
+      {isDoubleIconProps(icon) ? <DoubleIcon {...icon} /> : <Icon {...icon} />}
     </div>
   );
 
-  return "href" in props && props.href ? (
-    <LinkWrapper {...props}>{chipContent}</LinkWrapper>
-  ) : (
-    chipContent
+  const chipClassName = cn(attachmentChipOverrides, className);
+
+  if ("href" in linkProps && linkProps.href) {
+    return (
+      <Chip
+        className={chipClassName}
+        label={label}
+        size={size}
+        color={color}
+        isBusy={isBusy}
+        onRemove={onRemove}
+        {...linkProps}
+      >
+        {iconElement}
+      </Chip>
+    );
+  }
+
+  return (
+    <Chip
+      className={chipClassName}
+      label={label}
+      size={size}
+      color={color}
+      isBusy={isBusy}
+      onRemove={onRemove}
+      onClick={onClick}
+    >
+      {iconElement}
+    </Chip>
   );
 }

package/src/components/Card.tsx

@@ -212,7 +212,7 @@ const CardActions = React.forwardRef<
     <div
       ref={ref}
       className={cn(
-        "s-absolute s-right-2 s-top-2 sm:s-opacity-0 s-transition-opacity",
+        "s-absolute s-right-2 s-top-2 s-transition-opacity sm:s-opacity-0",
         "group-focus-within/card:s-opacity-100 group-hover/card:s-opacity-100"
       )}
       {...props}

package/src/components/Chip.tsx

@@ -160,7 +160,7 @@ type ChipLinkProps = ChipBaseProps &
     onClick?: never;
   };
 
-type ChipProps = ChipLinkProps | ChipButtonProps;
+export type ChipProps = ChipLinkProps | ChipButtonProps;
 
 // TODO(yuka: 1606): we should update this component so that you cannot have both
 // onClick and onRemove at the same time. We should use div when there is no onClick,

package/src/stories/AttachmentChip.stories.tsx

@@ -2,8 +2,8 @@ import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 
 import { AttachmentChip } from "@sparkle/components";
-import { DocumentIcon, DocumentTextIcon } from "@sparkle/icons/app";
-import { NotionLogo } from "@sparkle/logo";
+import { DocumentIcon, DocumentTextIcon, FolderIcon } from "@sparkle/icons/app";
+import { DriveLogo, NotionLogo } from "@sparkle/logo";
 
 const meta = {
   title: "Components/AttachmentChip",
@@ -29,7 +29,7 @@ const ParagraphWrapper = ({ children }: { children: React.ReactNode }) => (
 export const Document: Story = {
   args: {
     label: "document.pdf",
-    icon: NotionLogo,
+    icon: { visual: NotionLogo },
   },
   decorators: [
     (Story) => (
@@ -43,7 +43,7 @@ export const Document: Story = {
 export const Image: Story = {
   args: {
     label: "image.jpg",
-    icon: NotionLogo,
+    icon: { visual: NotionLogo },
   },
   decorators: [
     (Story) => (
@@ -57,7 +57,7 @@ export const Image: Story = {
 export const Text: Story = {
   args: {
     label: "text.txt",
-    icon: DocumentTextIcon,
+    icon: { visual: DocumentTextIcon },
   },
   decorators: [
     (Story) => (
@@ -71,7 +71,52 @@ export const Text: Story = {
 export const LongLabel: Story = {
   args: {
     label: "very_long_document_name_that_will_be_truncated.pdf",
-    icon: DocumentIcon,
+    icon: { visual: DocumentIcon },
+  },
+  decorators: [
+    (Story) => (
+      <ParagraphWrapper>
+        <Story />
+      </ParagraphWrapper>
+    ),
+  ],
+};
+
+export const WithDoubleIcon: Story = {
+  args: {
+    label: "My Drive Folder",
+    icon: { mainIcon: FolderIcon, secondaryIcon: DriveLogo, size: "sm" },
+  },
+  decorators: [
+    (Story) => (
+      <ParagraphWrapper>
+        <Story />
+      </ParagraphWrapper>
+    ),
+  ],
+};
+
+export const WithDoubleIconAndLink: Story = {
+  args: {
+    label: "Notion Document",
+    icon: { mainIcon: DocumentIcon, secondaryIcon: NotionLogo, size: "sm" },
+    href: "https://notion.so",
+    target: "_blank",
+  },
+  decorators: [
+    (Story) => (
+      <ParagraphWrapper>
+        <Story />
+      </ParagraphWrapper>
+    ),
+  ],
+};
+
+export const WithChipColor: Story = {
+  args: {
+    label: "Success chip",
+    icon: { visual: DocumentIcon },
+    color: "success",
   },
   decorators: [
     (Story) => (