@dust-tt/sparkle 0.2.160 → 0.2.163

package/dist/cjs/components/Item.d.ts

@@ -1,8 +1,8 @@
 import React, { ComponentType, MouseEvent, ReactNode } from "react";
 type ItemProps = {
     onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
-    style: "action" | "warning" | "item";
-    spacing?: "sm" | "md";
+    style: "action" | "warning" | "item" | "link";
+    spacing?: "sm" | "md" | "lg";
     selectable?: boolean;
     selected?: boolean;
     disabled?: boolean;
@@ -20,6 +20,7 @@ export declare namespace Item {
     var Entry: (props: EntryItemProps) => React.JSX.Element;
     var Avatar: ({ description, hasAction, ...otherProps }: AvatarItemProps) => React.JSX.Element;
     var Navigation: (props: NavigationListItemProps) => React.JSX.Element;
+    var Link: ({ ...props }: LinkItemProps) => React.JSX.Element;
     var Dropdown: ({ style, ...props }: DropdownListItemProps) => React.JSX.Element;
     var SectionHeader: ({ label, variant, className, }: ItemSectionHeaderProps) => React.JSX.Element;
     var List: ({ children, className }: ListItemProps) => React.JSX.Element;
@@ -55,6 +56,15 @@ interface NavigationListItemProps {
     hasAction?: boolean | "hover";
     action?: ComponentType;
 }
+interface LinkItemProps {
+    onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+    label: string;
+    description?: string;
+    visual?: string | React.ReactNode;
+    icon?: ComponentType;
+    className?: string;
+    href?: string;
+}
 interface DropdownListItemProps {
     style?: "default" | "warning";
     onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;

package/dist/cjs/components/Spinner.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 export interface SpinnerProps {
     size?: "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
-    variant?: "color" | "light" | "dark" | "pink900";
+    variant?: "color" | "light" | "dark" | "pink900" | "purple900";
 }
 declare const Spinner: React.FC<SpinnerProps>;
 export default Spinner;

package/dist/cjs/components/Tree.d.ts

@@ -6,9 +6,9 @@ export interface TreeProps {
 }
 export declare function Tree({ children, isLoading }: TreeProps): React.JSX.Element;
 export declare namespace Tree {
-    var Item: ({ label, type, className, variant, visual, checkbox, onChevronClick, collapsed, children, actions, }: TreeItemProps) => React.JSX.Element;
+    var Item: ({ label, type, className, variant, visual, checkbox, onChevronClick, collapsed, defaultCollapsed, actions, renderTreeItems, children, }: TreeItemPropsWithChildren | TreeItemPropsWithRender) => React.JSX.Element;
 }
-export interface TreeItemProps {
+interface TreeItemProps {
     label?: string;
     type?: "node" | "item" | "leaf";
     variant?: "file" | "folder" | "database" | "channel";
@@ -16,7 +16,16 @@ export interface TreeItemProps {
     checkbox?: CheckboxProps;
     onChevronClick?: () => void;
     collapsed?: boolean;
+    defaultCollapsed?: boolean;
     className?: string;
     actions?: React.ReactNode;
+}
+export interface TreeItemPropsWithChildren extends TreeItemProps {
+    renderTreeItems?: never;
     children?: React.ReactNode;
 }
+export interface TreeItemPropsWithRender extends TreeItemProps {
+    renderTreeItems: () => React.ReactNode;
+    children?: never;
+}
+export {};

package/dist/cjs/index.js

@@ -74493,7 +74493,7 @@ var tabClasses = {
         },
     },
 };
-var iconClasses$4 = {
+var iconClasses$5 = {
     default: {
         base: "s-text-element-600",
         hover: "group-hover:s-text-action-400",
@@ -74538,8 +74538,8 @@ function Tab(_a) {
                     ? tabClasses.selected
                     : tabClasses.default;
             var iconStateClasses = tab.current
-                ? iconClasses$4.selected
-                : iconClasses$4.default;
+                ? iconClasses$5.selected
+                : iconClasses$5.default;
             var finalTabClasses = classNames("s-group s-justify-center s-flex s-text-sm s-font-semibold s-py-2.5 s-transition-all ease-out s-duration-400 s-whitespace-nowrap s-select-none", variant === "default"
                 ? tab.icon
                     ? tab.hideLabel
@@ -74586,16 +74586,25 @@ function Tab(_a) {
 var labelStyleClasses = {
     item: "s-font-normal",
     action: "s-font-semibold",
+    link: "s-font-semibold",
     warning: "s-font-semibold",
 };
 var labelColorClasses = {
     item: "s-text-element-600 dark:s-text-element-500-dark group-hover:s-text-action-500 group-active:s-text-action-700 dark:group-hover:s-text-action-600-dark dark:group-active:s-text-action-400-dark",
     action: "s-text-element-800 dark:s-text-element-800-dark group-hover:s-text-action-500 group-active:s-text-action-700 dark:group-hover:s-text-action-600-dark dark:group-active:s-text-action-400-dark",
+    link: "s-text-element-800 dark:s-text-element-800-dark group-hover:s-text-action-500 group-active:s-text-action-700 dark:group-hover:s-text-action-600-dark dark:group-active:s-text-action-400-dark",
     warning: "s-text-warning-500 dark:s-text-warning-400-dark group-hover:s-text-warning-400 group-active:s-text-warning-700 dark:group-hover:s-text-warning-600-dark dark:group-active:s-text-warning-400-dark",
 };
 var spacingClasses = {
     sm: "s-py-2 s-gap-x-2",
     md: "s-py-2.5 s-gap-x-3",
+    lg: "s-py-3 s-gap-x-3",
+};
+var iconClasses$4 = {
+    item: "s-text-element-600 group-hover:s-text-action-400 group-active:s-text-action-700 dark:group-hover:s-text-action-600-dark dark:group-active:s-text-action-400-dark",
+    action: "s-text-element-600 group-hover:s-text-action-400 group-active:s-text-action-700 dark:group-hover:s-text-action-600-dark dark:group-active:s-text-action-400-dark",
+    link: "s-text-brand group-hover:s-text-action-400 group-active:s-text-action-700 dark:group-hover:s-text-action-600-dark dark:group-active:s-text-action-400-dark",
+    warning: "s-text-warning-400 group-hover:s-text-warning-300 group-active:s-text-warning-700 dark:group-hover:s-text-warning-600-dark dark:group-active:s-text-warning-400-dark",
 };
 function Item(_a) {
     var label = _a.label, description = _a.description, visual = _a.visual, icon = _a.icon, _b = _a.style, style = _b === void 0 ? "action" : _b, _c = _a.spacing, spacing = _c === void 0 ? "sm" : _c, _d = _a.action, action = _d === void 0 ? SvgChevronRight$1 : _d, _e = _a.hasAction, hasAction = _e === void 0 ? true : _e, onClick = _a.onClick, _f = _a.selected, selected = _f === void 0 ? false : _f, _g = _a.disabled, disabled = _g === void 0 ? false : _g, _h = _a.className, className = _h === void 0 ? "" : _h, href = _a.href;
@@ -74610,9 +74619,7 @@ function Item(_a) {
                 ? "s-text-element-500 dark:s-text-element-500-dark"
                 : selected
                     ? "s-text-action-400 dark:s-text-action-600-dark"
-                    : style === "action" || style === "item"
-                        ? "s-text-element-600 group-hover:s-text-action-400 group-active:s-text-action-700 dark:group-hover:s-text-action-600-dark dark:group-active:s-text-action-400-dark"
-                        : "s-text-warning-400 group-hover:s-text-warning-300 group-active:s-text-warning-700 dark:group-hover:s-text-warning-600-dark dark:group-active:s-text-warning-400-dark") }));
+                    : iconClasses$4[style]) }));
     }
     return (React.createElement(Link, { className: classNames("s-duration-400 s-group s-box-border s-flex s-select-none s-text-sm s-transition-colors s-ease-out", spacingClasses[spacing], disabled ? "" : "s-cursor-pointer", className), onClick: selected || disabled ? undefined : onClick, "aria-label": label, href: href || "#" },
         visualElement,
@@ -74645,6 +74652,12 @@ Item.Avatar = function (_a) {
 Item.Navigation = function (props) {
     return React.createElement(Item, __assign({}, props, { style: "action", spacing: "md" }));
 };
+Item.Link = function (_a) {
+    var props = __rest(_a, []);
+    return (React.createElement(Item, __assign({}, props, { 
+        // Pass down additional props as needed
+        style: "link", hasAction: false, spacing: "lg" })));
+};
 Item.Dropdown = function (_a) {
     var style = _a.style, props = __rest(_a, ["style"]);
     return (React.createElement(Item, __assign({}, props, { 
@@ -75651,7 +75664,7 @@ function Page(_a) {
     var mainVariantClasses = variant === "normal" ? "s-h-full s-py-16" : "s-h-full s-py-4 s-px-2";
     var divVariantClassNames = variant === "normal" ? "s-gap-6 s-px-6" : "s-gap-4";
     return (React.createElement("main", { className: mainVariantClasses },
-        React.createElement("div", { className: classNames("s-mx-auto s-flex s-h-full s-max-w-4xl s-flex-col s-text-sm s-font-normal s-text-element-800", divVariantClassNames) }, children)));
+        React.createElement("div", { className: classNames("s-mx-auto s-flex s-h-full s-max-w-4xl s-flex-col s-text-sm s-font-normal s-text-element-900", divVariantClassNames) }, children)));
 }
 Page.Header = function (_a) {
     var title = _a.title, description = _a.description, icon = _a.icon;
@@ -75684,7 +75697,7 @@ Page.P = function (_a) {
     var children = _a.children, variant = _a.variant, _b = _a.size, size = _b === void 0 ? "sm" : _b;
     return (React.createElement("p", { className: classNames(PsizeClasses[size], variant === "secondary"
             ? "s-text-element-700 dark:s-text-element-600-dark"
-            : "s-text-element-800 dark:s-text-element-800-dark") }, children));
+            : "s-text-element-900 dark:s-text-element-900-dark") }, children));
 };
 Page.H = function (_a) {
     var children = _a.children, _b = _a.variant, variant = _b === void 0 ? "h3" : _b;
@@ -75695,7 +75708,7 @@ Page.H = function (_a) {
         h3: "s-text-2xl s-font-bold",
         h4: "s-text-xl s-font-semibold",
         h5: "s-text-lg s-font-semibold",
-        h6: "s-text-base s-font-bold",
+        h6: "s-text-base s-font-semibold",
     };
     return (React.createElement(Component, { className: classNames("s-text-element-900 dark:s-text-element-900-dark", hSizes[variant]) }, children));
 };
@@ -75994,10 +76007,25 @@ var visualTable = {
     channel: SvgChatBubbleBottomCenterText,
 };
 Tree.Item = function (_a) {
-    var label = _a.label, _b = _a.type, type = _b === void 0 ? "node" : _b, _c = _a.className, className = _c === void 0 ? "" : _c, _d = _a.variant, variant = _d === void 0 ? "file" : _d, visual = _a.visual, checkbox = _a.checkbox, onChevronClick = _a.onChevronClick, collapsed = _a.collapsed, children = _a.children, actions = _a.actions;
+    var label = _a.label, _b = _a.type, type = _b === void 0 ? "node" : _b, _c = _a.className, className = _c === void 0 ? "" : _c, _d = _a.variant, variant = _d === void 0 ? "file" : _d, visual = _a.visual, checkbox = _a.checkbox, onChevronClick = _a.onChevronClick, collapsed = _a.collapsed, defaultCollapsed = _a.defaultCollapsed, actions = _a.actions, renderTreeItems = _a.renderTreeItems, children = _a.children;
+    var _e = __read(React.useState(defaultCollapsed !== null && defaultCollapsed !== void 0 ? defaultCollapsed : true), 2), collapsedState = _e[0], setCollapsedState = _e[1];
+    var isControlledCollapse = collapsed !== undefined;
+    var effectiveCollapsed = isControlledCollapse ? collapsed : collapsedState;
+    var effectiveOnChevronClick = isControlledCollapse
+        ? onChevronClick
+        : function () { return setCollapsedState(!collapsedState); };
+    var getChildren = function () {
+        if (effectiveCollapsed) {
+            return [];
+        }
+        return typeof renderTreeItems === "function" ? renderTreeItems() : children;
+    };
+    var childrenToRender = getChildren();
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: classNames(className ? className : "", "s-flex s-flex-row s-items-center s-gap-4 s-py-1") },
-            type === "node" && (React.createElement(IconButton, { icon: children && !collapsed ? SvgChevronDown : SvgChevronRight, size: "sm", variant: "secondary", onClick: onChevronClick })),
+            type === "node" && (React.createElement(IconButton, { icon: childrenToRender && !effectiveCollapsed
+                    ? SvgChevronDown
+                    : SvgChevronRight, size: "sm", variant: "secondary", onClick: effectiveOnChevronClick })),
             type === "leaf" && React.createElement("div", { className: "s-w-5" }),
             checkbox && React.createElement(Checkbox, __assign({}, checkbox)),
             React.createElement("div", { className: "s-flex s-w-full s-items-center s-gap-1.5 s-text-sm s-font-medium s-text-element-900" },
@@ -76005,7 +76033,7 @@ Tree.Item = function (_a) {
                     visual ? (visual) : (React.createElement(Icon, { visual: visualTable[variant], size: "sm", className: "s-flex-shrink-0 s-text-element-700" })),
                     React.createElement("div", { className: "s-truncate" }, label),
                     actions && React.createElement("div", { className: "s-inline-block s-pl-5" }, actions)))),
-        React.Children.count(children) > 0 && (React.createElement("div", { className: "s-pl-5" }, !collapsed && children))));
+        React.Children.count(childrenToRender) > 0 && (React.createElement("div", { className: "s-pl-5" }, childrenToRender))));
 };
 
 var baseClasses = "s-transition-all s-ease-out s-duration-300 s-cursor-pointer hover:s-scale-110";