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

package/dist/cjs/_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/cjs/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/cjs/index.js

@@ -514,7 +514,11 @@ function PageHeader(_a) {
         React.createElement("div", { className: descriptionClasses }, description)));
 }
 
-var SvgLogo = function (props) { return (React__namespace.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__namespace.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 96 24" }, props),
+    React__namespace.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__namespace.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__namespace.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 64 16" }, props),
     React__namespace.createElement("path", { fill: "#FCD34D", d: "M56 8h-8v8h8V8Z" }),
     React__namespace.createElement("path", { fill: "#6EE7B7", d: "M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16Z" }),
     React__namespace.createElement("path", { fill: "#F9A8D4", d: "M24 16a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z" }),
@@ -523,6 +527,39 @@ var SvgLogo = function (props) { return (React__namespace.createElement("svg", _
     React__namespace.createElement("path", { fill: "#3B82F6", fillRule: "evenodd", d: "M40 8a4 4 0 0 1 0-8h24v8H40Z", clipRule: "evenodd" }),
     React__namespace.createElement("path", { fill: "#7DD3FC", fillRule: "evenodd", d: "M32 16V8h8a4 4 0 0 1 0 8h-8Z", clipRule: "evenodd" }))); };
 
+var SvgLogoSquareColoredGrey = function (props) { return (React__namespace.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 48 48" }, props),
+    React__namespace.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__namespace.createElement("path", { fill: "#334155", fillRule: "evenodd", d: "M12 0H0v24h12a6 6 0 0 0 0 12h36V24H12V0Zm12 0h24v12H24V0Z", clipRule: "evenodd" }))); };
+
+var SvgLogoSquareFullColor = function (props) { return (React__namespace.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 48 48" }, props),
+    React__namespace.createElement("path", { fill: "#FCD34D", d: "M36 36H24v12h12V36Z" }),
+    React__namespace.createElement("path", { fill: "#3B82F6", fillRule: "evenodd", d: "M12 36a6 6 0 0 1 0-12h36v12H12Z", clipRule: "evenodd" }),
+    React__namespace.createElement("path", { fill: "#7DD3FC", fillRule: "evenodd", d: "M0 48V36h12a6 6 0 0 1 0 12H0Z", clipRule: "evenodd" }),
+    React__namespace.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__namespace.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__namespace.createElement("path", { fill: "#10B981", d: "M12 0H0v24h12V0Z" }),
+    React__namespace.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.createElement(SvgLogoSquareColoredGrey, { className: className });
+        }
+        else {
+            return React.createElement(SvgLogoSquareFullColor, { className: className });
+        }
+    }
+    else {
+        if (type === "colored-grey") {
+            return React.createElement(SvgLogoColoredGrey, { className: className });
+        }
+        else {
+            return React.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 = {
@@ -628,8 +665,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(React.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
@@ -642,7 +678,6 @@ function IconToggleButton(_a) {
             : "", disabled ? "" : selected ? "" : iconGroup.dark.hover, disabled ? "" : iconGroup.dark.active);
     var IconButtonToggleContent = (React.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.createElement(Icon, { IconComponent: icon, className: "s-h-5 s-w-5" })));
@@ -924,7 +959,7 @@ exports.Item = Item;
 exports.KeyIcon = SvgKey$2;
 exports.KeySolidIcon = SvgKey;
 exports.KeyStrokeIcon = SvgKey$1;
-exports.Logo = SvgLogo;
+exports.Logo = Logo;
 exports.MagnifyingGlassIcon = SvgMagnifyingGlass$2;
 exports.MagnifyingGlassSolidIcon = SvgMagnifyingGlass;
 exports.MagnifyingGlassStrokeIcon = SvgMagnifyingGlass$1;