@dust-tt/sparkle 0.1.25 → 0.1.27-alpha.0

package/dist/cjs/logo/Logo.d.ts

@@ -1,4 +1,8 @@
-import type { SVGProps } from "react";
-import * as React from "react";
-declare const SvgLogo: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
-export default SvgLogo;
+import React from "react";
+interface LogoProps {
+    type?: "full-color" | "colored-grey";
+    shape?: "square" | "full";
+    className?: string;
+}
+export declare function Logo({ type, shape, className, }: LogoProps): React.JSX.Element;
+export {};

package/dist/cjs/logo/LogoColoredGrey.d.ts

@@ -0,0 +1,4 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+declare const SvgLogoColoredGrey: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
+export default SvgLogoColoredGrey;

package/dist/cjs/logo/LogoFullColor.d.ts

@@ -0,0 +1,4 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+declare const SvgLogoFullColor: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
+export default SvgLogoFullColor;

package/dist/cjs/logo/LogoSquareColoredGrey.d.ts

@@ -0,0 +1,4 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+declare const SvgLogoSquareColoredGrey: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
+export default SvgLogoSquareColoredGrey;

package/dist/cjs/logo/LogoSquareFullColor.d.ts

@@ -0,0 +1,4 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+declare const SvgLogoSquareFullColor: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
+export default SvgLogoSquareFullColor;

package/dist/cjs/stories/Logo.stories.d.ts

@@ -1,9 +1,12 @@
-/// <reference types="react" />
 import type { StoryObj } from "@storybook/react";
+import { Logo } from "../index_with_tw_base";
 declare const meta: {
     title: string;
-    component: (props: import("react").SVGProps<SVGSVGElement>) => import("react").JSX.Element;
+    component: typeof Logo;
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const BasicLogo: Story;
+export declare const LogoFullColor: Story;
+export declare const LogoColoredGrey: Story;
+export declare const LogoSquareFullColor: Story;
+export declare const LogoSquareColoredGrey: Story;

package/dist/esm/_index.d.ts

@@ -10,7 +10,7 @@ import { PageHeader } from "./components/PageHeader";
 export { PageHeader };
 import { Icon } from "./components/Icon";
 export { Icon };
-import { Logo } from "./logo";
+import { Logo } from "./logo/Logo";
 export { Logo };
 import { Checkbox } from "./components/Checkbox";
 export { Checkbox };

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

@@ -8,5 +8,5 @@ type IconToggleButtonProps = {
     disabled?: boolean;
     selected?: boolean;
 };
-export declare function IconToggleButton({ type, onClick, disabled, tooltip, icon, className, selected: isSelected, }: IconToggleButtonProps): React.JSX.Element;
+export declare function IconToggleButton({ type, onClick, disabled, tooltip, icon, className, selected, }: IconToggleButtonProps): React.JSX.Element;
 export {};

package/dist/esm/index.js

@@ -494,7 +494,11 @@ function PageHeader(_a) {
         React__default.createElement("div", { className: descriptionClasses }, description)));
 }
 
-var SvgLogo = function (props) { return (React.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 64 16" }, props),
+var SvgLogoColoredGrey = function (props) { return (React.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 96 24" }, props),
+    React.createElement("path", { fill: "#64748B", fillRule: "evenodd", d: "M12 24c6.627 0 12-5.373 12-12 0 6.627 5.373 12 12 12s12-5.373 12-12v12h12a6 6 0 0 0 0-12H48c0-6.627-5.373-12-12-12S24 5.373 24 12c0-6.627-5.373-12-12-12S0 5.373 0 12s5.373 12 12 12Zm72-12H72v12h12V12Z", clipRule: "evenodd" }),
+    React.createElement("path", { fill: "#334155", fillRule: "evenodd", d: "M0 0h12v24H0V0Zm24 0h24v12H24V0Zm36 12h36V0H60a6 6 0 0 0 0 12Z", clipRule: "evenodd" }))); };
+
+var SvgLogoFullColor = function (props) { return (React.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 64 16" }, props),
     React.createElement("path", { fill: "#FCD34D", d: "M56 8h-8v8h8V8Z" }),
     React.createElement("path", { fill: "#6EE7B7", d: "M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16Z" }),
     React.createElement("path", { fill: "#F9A8D4", d: "M24 16a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z" }),
@@ -503,6 +507,39 @@ var SvgLogo = function (props) { return (React.createElement("svg", __assign({ x
     React.createElement("path", { fill: "#3B82F6", fillRule: "evenodd", d: "M40 8a4 4 0 0 1 0-8h24v8H40Z", clipRule: "evenodd" }),
     React.createElement("path", { fill: "#7DD3FC", fillRule: "evenodd", d: "M32 16V8h8a4 4 0 0 1 0 8h-8Z", clipRule: "evenodd" }))); };
 
+var SvgLogoSquareColoredGrey = function (props) { return (React.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 48 48" }, props),
+    React.createElement("path", { fill: "#64748B", fillRule: "evenodd", d: "M12 24c6.627 0 12-5.373 12-12 0 6.627 5.373 12 12 12s12-5.373 12-12S42.627 0 36 0 24 5.373 24 12c0-6.627-5.373-12-12-12S0 5.373 0 12s5.373 12 12 12Zm24 12H24v12h12V36ZM12 48a6 6 0 0 0 0-12H0v12h12Z", clipRule: "evenodd" }),
+    React.createElement("path", { fill: "#334155", fillRule: "evenodd", d: "M12 0H0v24h12a6 6 0 0 0 0 12h36V24H12V0Zm12 0h24v12H24V0Z", clipRule: "evenodd" }))); };
+
+var SvgLogoSquareFullColor = function (props) { return (React.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 48 48" }, props),
+    React.createElement("path", { fill: "#FCD34D", d: "M36 36H24v12h12V36Z" }),
+    React.createElement("path", { fill: "#3B82F6", fillRule: "evenodd", d: "M12 36a6 6 0 0 1 0-12h36v12H12Z", clipRule: "evenodd" }),
+    React.createElement("path", { fill: "#7DD3FC", fillRule: "evenodd", d: "M0 48V36h12a6 6 0 0 1 0 12H0Z", clipRule: "evenodd" }),
+    React.createElement("path", { fill: "#6EE7B7", d: "M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12Z" }),
+    React.createElement("path", { fill: "#F9A8D4", d: "M36 24c6.627 0 12-5.373 12-12S42.627 0 36 0 24 5.373 24 12s5.373 12 12 12Z" }),
+    React.createElement("path", { fill: "#10B981", d: "M12 0H0v24h12V0Z" }),
+    React.createElement("path", { fill: "#F87171", d: "M48 0H24v12h24V0Z" }))); };
+
+function Logo(_a) {
+    var _b = _a.type, type = _b === void 0 ? "full-color" : _b, _c = _a.shape, shape = _c === void 0 ? "full" : _c, _d = _a.className, className = _d === void 0 ? "" : _d;
+    if (shape === "square") {
+        if (type === "colored-grey") {
+            return React__default.createElement(SvgLogoSquareColoredGrey, { className: className });
+        }
+        else {
+            return React__default.createElement(SvgLogoSquareFullColor, { className: className });
+        }
+    }
+    else {
+        if (type === "colored-grey") {
+            return React__default.createElement(SvgLogoColoredGrey, { className: className });
+        }
+        else {
+            return React__default.createElement(SvgLogoFullColor, { className: className });
+        }
+    }
+}
+
 function Checkbox(_a) {
     var checked = _a.checked, onChange = _a.onChange, _b = _a.className, className = _b === void 0 ? "" : _b, disabled = _a.disabled;
     var baseStyleClasses = {
@@ -608,8 +645,7 @@ var iconClasses = {
     },
 };
 function IconToggleButton(_a) {
-    var _b = _a.type, type = _b === void 0 ? "tertiary" : _b, onClick = _a.onClick, _c = _a.disabled, disabled = _c === void 0 ? false : _c, tooltip = _a.tooltip, icon = _a.icon, _d = _a.className, className = _d === void 0 ? "" : _d, _e = _a.selected, isSelected = _e === void 0 ? false : _e;
-    var _f = __read(useState(isSelected), 2), selected = _f[0], setSelected = _f[1];
+    var _b = _a.type, type = _b === void 0 ? "tertiary" : _b, onClick = _a.onClick, _c = _a.disabled, disabled = _c === void 0 ? false : _c, tooltip = _a.tooltip, icon = _a.icon, _d = _a.className, className = _d === void 0 ? "" : _d, _e = _a.selected, selected = _e === void 0 ? false : _e;
     var iconGroup = iconClasses[type];
     var finalIconClasses = classNames(className, baseClasses, disabled
         ? iconGroup.disabled
@@ -622,7 +658,6 @@ function IconToggleButton(_a) {
             : "", disabled ? "" : selected ? "" : iconGroup.dark.hover, disabled ? "" : iconGroup.dark.active);
     var IconButtonToggleContent = (React__default.createElement("button", { className: finalIconClasses, onClick: function (e) {
             if (!disabled) {
-                setSelected(!selected); // Toggle selected state
                 onClick === null || onClick === void 0 ? void 0 : onClick(e); // Run passed onClick event
             }
         }, disabled: disabled }, icon && React__default.createElement(Icon, { IconComponent: icon, className: "s-h-5 s-w-5" })));
@@ -829,5 +864,5 @@ var SvgXCircle = function (props) { return (React.createElement("svg", __assign(
 var SvgXMark = function (props) { return (React.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24" }, props),
     React.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z", clipRule: "evenodd" }))); };
 
-export { SvgArrowUpOnSquare$2 as ArrowUpOnSquareIcon, SvgArrowUpOnSquare as ArrowUpOnSquareSolidIcon, SvgArrowUpOnSquare$1 as ArrowUpOnSquareStrokeIcon, SvgBeaker$2 as BeakerIcon, SvgBeakerPlus$2 as BeakerPlusIcon, SvgBeakerPlus as BeakerPlusSolidIcon, SvgBeakerPlus$1 as BeakerPlusStrokeIcon, SvgBeaker as BeakerSolidIcon, SvgBeaker$1 as BeakerStrokeIcon, Button, SvgChatBubbleBottomCenterPlus$2 as ChatBubbleBottomCenterPlusIcon, SvgChatBubbleBottomCenterPlus as ChatBubbleBottomCenterPlusSolidIcon, SvgChatBubbleBottomCenterPlus$1 as ChatBubbleBottomCenterPlusStrokeIcon, SvgChatBubbleBottomCenterText$2 as ChatBubbleBottomCenterTextIcon, SvgChatBubbleBottomCenterText as ChatBubbleBottomCenterTextSolidIcon, SvgChatBubbleBottomCenterText$1 as ChatBubbleBottomCenterTextStrokeIcon, SvgChatBubbleLeftRight$2 as ChatBubbleLeftRightIcon, SvgChatBubbleLeftRight as ChatBubbleLeftRightSolidIcon, SvgChatBubbleLeftRight$1 as ChatBubbleLeftRightStrokeIcon, SvgCheckCircle$2 as CheckCircleIcon, SvgCheckCircle as CheckCircleSolidIcon, SvgCheckCircle$1 as CheckCircleStrokeIcon, Checkbox, SvgChevronDown$2 as ChevronDownIcon, SvgChevronDown as ChevronDownSolidIcon, SvgChevronDown$1 as ChevronDownStrokeIcon, SvgChevronLeft$2 as ChevronLeftIcon, SvgChevronLeft as ChevronLeftSolidIcon, SvgChevronLeft$1 as ChevronLeftStrokeIcon, SvgChevronRight$2 as ChevronRightIcon, SvgChevronRight as ChevronRightSolidIcon, SvgChevronRight$1 as ChevronRightStrokeIcon, SvgChevronUp$2 as ChevronUpIcon, SvgChevronUp as ChevronUpSolidIcon, SvgChevronUp$1 as ChevronUpStrokeIcon, SvgClipboard$2 as ClipboardIcon, SvgClipboard as ClipboardSolidIcon, SvgClipboard$1 as ClipboardStrokeIcon, SvgCloudArrowDown$2 as CloudArrowDownIcon, SvgCloudArrowDown as CloudArrowDownSolidIcon, SvgCloudArrowDown$1 as CloudArrowDownStrokeIcon, SvgCog6Tooth$2 as Cog6ToothIcon, SvgCog6Tooth as Cog6ToothSolidIcon, SvgCog6Tooth$1 as Cog6ToothStrokeIcon, SvgCommandLine$2 as CommandLineIcon, SvgCommandLine as CommandLineSolidIcon, SvgCommandLine$1 as CommandLineStrokeIcon, SvgDocumentPlus$2 as DocumentPlusIcon, SvgDocumentPlus as DocumentPlusSolidIcon, SvgDocumentPlus$1 as DocumentPlusStrokeIcon, SvgDocumentText$2 as DocumentTextIcon, SvgDocumentText as DocumentTextSolidIcon, SvgDocumentText$1 as DocumentTextStrokeIcon, SvgExclamationCircle$2 as ExclamationCircleIcon, SvgExclamationCircle as ExclamationCircleSolidIcon, SvgExclamationCircle$1 as ExclamationCircleStrokeIcon, SvgFolderOpen$2 as FolderOpenIcon, SvgFolderOpen as FolderOpenSolidIcon, SvgFolderOpen$1 as FolderOpenStrokeIcon, SvgHandThumbDown$2 as HandThumbDownIcon, SvgHandThumbDown as HandThumbDownSolidIcon, SvgHandThumbDown$1 as HandThumbDownStrokeIcon, SvgHandThumbUp$2 as HandThumbUpIcon, SvgHandThumbUp as HandThumbUpSolidIcon, SvgHandThumbUp$1 as HandThumbUpStrokeIcon, Icon, IconButton, IconToggleButton, SvgInformationCircle$2 as InformationCircleIcon, SvgInformationCircle as InformationCircleSolidIcon, SvgInformationCircle$1 as InformationCircleStrokeIcon, Item, SvgKey$2 as KeyIcon, SvgKey as KeySolidIcon, SvgKey$1 as KeyStrokeIcon, SvgLogo as Logo, SvgMagnifyingGlass$2 as MagnifyingGlassIcon, SvgMagnifyingGlass as MagnifyingGlassSolidIcon, SvgMagnifyingGlass$1 as MagnifyingGlassStrokeIcon, PageHeader, SvgPaperAirplane$2 as PaperAirplaneIcon, SvgPaperAirplane as PaperAirplaneSolidIcon, SvgPaperAirplane$1 as PaperAirplaneStrokeIcon, SvgPencilSquare$2 as PencilSquareIcon, SvgPencilSquare as PencilSquareSolidIcon, SvgPencilSquare$1 as PencilSquareStrokeIcon, SvgPlus$2 as PlusIcon, SvgPlus as PlusSolidIcon, SvgPlus$1 as PlusStrokeIcon, SvgQuestionMarkCircle$2 as QuestionMarkCircleIcon, SvgQuestionMarkCircle as QuestionMarkCircleSolidIcon, SvgQuestionMarkCircle$1 as QuestionMarkCircleStrokeIcon, SvgServer$2 as ServerIcon, SvgServer as ServerSolidIcon, SvgServer$1 as ServerStrokeIcon, SparkleContext, SvgSquare3Stack3D$2 as Square3Stack3DIcon, SvgSquare3Stack3D as Square3Stack3DSolidIcon, SvgSquare3Stack3D$1 as Square3Stack3DStrokeIcon, Tab, Tooltip, SvgXCircle$2 as XCircleIcon, SvgXCircle as XCircleSolidIcon, SvgXCircle$1 as XCircleStrokeIcon, SvgXMark$2 as XMarkIcon, SvgXMark as XMarkSolidIcon, SvgXMark$1 as XMarkStrokeIcon };
+export { SvgArrowUpOnSquare$2 as ArrowUpOnSquareIcon, SvgArrowUpOnSquare as ArrowUpOnSquareSolidIcon, SvgArrowUpOnSquare$1 as ArrowUpOnSquareStrokeIcon, SvgBeaker$2 as BeakerIcon, SvgBeakerPlus$2 as BeakerPlusIcon, SvgBeakerPlus as BeakerPlusSolidIcon, SvgBeakerPlus$1 as BeakerPlusStrokeIcon, SvgBeaker as BeakerSolidIcon, SvgBeaker$1 as BeakerStrokeIcon, Button, SvgChatBubbleBottomCenterPlus$2 as ChatBubbleBottomCenterPlusIcon, SvgChatBubbleBottomCenterPlus as ChatBubbleBottomCenterPlusSolidIcon, SvgChatBubbleBottomCenterPlus$1 as ChatBubbleBottomCenterPlusStrokeIcon, SvgChatBubbleBottomCenterText$2 as ChatBubbleBottomCenterTextIcon, SvgChatBubbleBottomCenterText as ChatBubbleBottomCenterTextSolidIcon, SvgChatBubbleBottomCenterText$1 as ChatBubbleBottomCenterTextStrokeIcon, SvgChatBubbleLeftRight$2 as ChatBubbleLeftRightIcon, SvgChatBubbleLeftRight as ChatBubbleLeftRightSolidIcon, SvgChatBubbleLeftRight$1 as ChatBubbleLeftRightStrokeIcon, SvgCheckCircle$2 as CheckCircleIcon, SvgCheckCircle as CheckCircleSolidIcon, SvgCheckCircle$1 as CheckCircleStrokeIcon, Checkbox, SvgChevronDown$2 as ChevronDownIcon, SvgChevronDown as ChevronDownSolidIcon, SvgChevronDown$1 as ChevronDownStrokeIcon, SvgChevronLeft$2 as ChevronLeftIcon, SvgChevronLeft as ChevronLeftSolidIcon, SvgChevronLeft$1 as ChevronLeftStrokeIcon, SvgChevronRight$2 as ChevronRightIcon, SvgChevronRight as ChevronRightSolidIcon, SvgChevronRight$1 as ChevronRightStrokeIcon, SvgChevronUp$2 as ChevronUpIcon, SvgChevronUp as ChevronUpSolidIcon, SvgChevronUp$1 as ChevronUpStrokeIcon, SvgClipboard$2 as ClipboardIcon, SvgClipboard as ClipboardSolidIcon, SvgClipboard$1 as ClipboardStrokeIcon, SvgCloudArrowDown$2 as CloudArrowDownIcon, SvgCloudArrowDown as CloudArrowDownSolidIcon, SvgCloudArrowDown$1 as CloudArrowDownStrokeIcon, SvgCog6Tooth$2 as Cog6ToothIcon, SvgCog6Tooth as Cog6ToothSolidIcon, SvgCog6Tooth$1 as Cog6ToothStrokeIcon, SvgCommandLine$2 as CommandLineIcon, SvgCommandLine as CommandLineSolidIcon, SvgCommandLine$1 as CommandLineStrokeIcon, SvgDocumentPlus$2 as DocumentPlusIcon, SvgDocumentPlus as DocumentPlusSolidIcon, SvgDocumentPlus$1 as DocumentPlusStrokeIcon, SvgDocumentText$2 as DocumentTextIcon, SvgDocumentText as DocumentTextSolidIcon, SvgDocumentText$1 as DocumentTextStrokeIcon, SvgExclamationCircle$2 as ExclamationCircleIcon, SvgExclamationCircle as ExclamationCircleSolidIcon, SvgExclamationCircle$1 as ExclamationCircleStrokeIcon, SvgFolderOpen$2 as FolderOpenIcon, SvgFolderOpen as FolderOpenSolidIcon, SvgFolderOpen$1 as FolderOpenStrokeIcon, SvgHandThumbDown$2 as HandThumbDownIcon, SvgHandThumbDown as HandThumbDownSolidIcon, SvgHandThumbDown$1 as HandThumbDownStrokeIcon, SvgHandThumbUp$2 as HandThumbUpIcon, SvgHandThumbUp as HandThumbUpSolidIcon, SvgHandThumbUp$1 as HandThumbUpStrokeIcon, Icon, IconButton, IconToggleButton, SvgInformationCircle$2 as InformationCircleIcon, SvgInformationCircle as InformationCircleSolidIcon, SvgInformationCircle$1 as InformationCircleStrokeIcon, Item, SvgKey$2 as KeyIcon, SvgKey as KeySolidIcon, SvgKey$1 as KeyStrokeIcon, Logo, SvgMagnifyingGlass$2 as MagnifyingGlassIcon, SvgMagnifyingGlass as MagnifyingGlassSolidIcon, SvgMagnifyingGlass$1 as MagnifyingGlassStrokeIcon, PageHeader, SvgPaperAirplane$2 as PaperAirplaneIcon, SvgPaperAirplane as PaperAirplaneSolidIcon, SvgPaperAirplane$1 as PaperAirplaneStrokeIcon, SvgPencilSquare$2 as PencilSquareIcon, SvgPencilSquare as PencilSquareSolidIcon, SvgPencilSquare$1 as PencilSquareStrokeIcon, SvgPlus$2 as PlusIcon, SvgPlus as PlusSolidIcon, SvgPlus$1 as PlusStrokeIcon, SvgQuestionMarkCircle$2 as QuestionMarkCircleIcon, SvgQuestionMarkCircle as QuestionMarkCircleSolidIcon, SvgQuestionMarkCircle$1 as QuestionMarkCircleStrokeIcon, SvgServer$2 as ServerIcon, SvgServer as ServerSolidIcon, SvgServer$1 as ServerStrokeIcon, SparkleContext, SvgSquare3Stack3D$2 as Square3Stack3DIcon, SvgSquare3Stack3D as Square3Stack3DSolidIcon, SvgSquare3Stack3D$1 as Square3Stack3DStrokeIcon, Tab, Tooltip, SvgXCircle$2 as XCircleIcon, SvgXCircle as XCircleSolidIcon, SvgXCircle$1 as XCircleStrokeIcon, SvgXMark$2 as XMarkIcon, SvgXMark as XMarkSolidIcon, SvgXMark$1 as XMarkStrokeIcon };
 //# sourceMappingURL=index.js.map