@dust-tt/sparkle 0.5.8-rc-1 → 0.5.9-rc-1

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-rc-1",
+  "version": "0.5.9-rc-1",
   "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/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/components/Dialog.tsx

@@ -182,7 +182,7 @@ const DialogContainer = ({
   );
 
   const scrollableContent = (
-    <ScrollArea className="s-min-h-0 s-w-full s-flex-grow">
+    <ScrollArea className="s-w-full s-flex-grow">
       <div
         className={cn(
           contentStyles,
@@ -197,7 +197,7 @@ const DialogContainer = ({
 
   if (fixedContent) {
     return (
-      <div className="s-flex s-min-h-0 s-flex-grow s-flex-col s-overflow-hidden">
+      <div className="s-flex s-flex-grow s-flex-col s-overflow-hidden">
         <div className={cn(contentStyles, "s-flex-none")}>{fixedContent}</div>
         <Separator />
         {scrollableContent}

package/src/components/NavigationList.tsx

@@ -48,6 +48,7 @@ const NavigationListItemStyles = cva(
 interface NavigationListProps {
   viewportRef?: React.RefObject<HTMLDivElement>;
 }
+
 const NavigationList = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> &
@@ -220,7 +221,7 @@ const variantStyles = cva("", {
 });
 
 const labelStyles = cva(
-  "s-flex s-items-center s-justify-between s-gap-2 s-pt-4 s-pb-2 s-heading-xs s-whitespace-nowrap s-overflow-hidden s-text-ellipsis"
+  "s-flex s-items-center s-justify-between s-gap-2 s-pt-4 s-pb-2 s-pr-2 s-heading-xs s-whitespace-nowrap s-overflow-hidden s-text-ellipsis"
 );
 
 interface NavigationListLabelButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -291,7 +292,7 @@ const NavigationListLabel = React.forwardRef<
       className={cn(
         labelStyles(),
         variantStyles({ variant, isSticky }),
-        isCollapsible ? "s-pl-1.5" : "s-pl-3",
+        isCollapsible ? "s-pl-1" : "s-pl-3",
         className
       )}
       {...props}

package/src/logo/platforms/Productboard.tsx

@@ -0,0 +1,20 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgProductboard = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 -44 256 256"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <path fill="#FF2638" d="m85.327 83.997 85.327 83.996H0z" />
+    <path fill="#FFC600" d="m0 0 85.327 83.997L170.654 0z" />
+    <path
+      fill="#0079F2"
+      d="m85.34 83.997 85.328 83.996 85.327-83.996L170.668 0z"
+    />
+  </svg>
+);
+export default SvgProductboard;

package/src/logo/platforms/index.ts

@@ -51,6 +51,7 @@ export { default as NotionLogo } from "./Notion";
 export { default as OfficeLogo } from "./Office";
 export { default as OpenaiLogo } from "./Openai";
 export { default as OutlookLogo } from "./Outlook";
+export { default as ProductboardLogo } from "./Productboard";
 export { default as ReplicateLogo } from "./Replicate";
 export { default as SalesforceLogo } from "./Salesforce";
 export { default as SlackLogo } from "./Slack";

package/src/logo/src/platforms/Productboard.svg

@@ -0,0 +1,10 @@
+<svg viewBox="0 -44 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g>
+        <polygon fill="#FF2638" points="85.326959 83.9967251 170.653918 167.99345 0 167.99345"/>
+        <polygon fill="#FFC600" points="0 0 85.326959 83.9967251 170.653918 0"/>
+        <polygon fill="#0079F2" points="85.3406727 83.9967251 170.667632 167.99345 255.994591 83.9967251 170.667632 0"/>
+    </g>
+</svg>
+
+
+

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) => (