@dust-tt/sparkle 0.2.159 → 0.2.162

package/dist/esm/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;
@@ -52,6 +53,17 @@ interface NavigationListItemProps {
     icon?: ComponentType;
     className?: string;
     href?: string;
+    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";

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

@@ -74473,7 +74473,7 @@ var tabClasses = {
         },
     },
 };
-var iconClasses$4 = {
+var iconClasses$5 = {
     default: {
         base: "s-text-element-600",
         hover: "group-hover:s-text-action-400",
@@ -74518,8 +74518,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
@@ -74566,16 +74566,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;
@@ -74590,9 +74599,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__default.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,
@@ -74625,6 +74632,12 @@ Item.Avatar = function (_a) {
 Item.Navigation = function (props) {
     return React__default.createElement(Item, __assign({}, props, { style: "action", spacing: "md" }));
 };
+Item.Link = function (_a) {
+    var props = __rest(_a, []);
+    return (React__default.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__default.createElement(Item, __assign({}, props, { 
@@ -75631,7 +75644,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__default.createElement("main", { className: mainVariantClasses },
-        React__default.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__default.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;
@@ -75664,7 +75677,7 @@ Page.P = function (_a) {
     var children = _a.children, variant = _a.variant, _b = _a.size, size = _b === void 0 ? "sm" : _b;
     return (React__default.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;
@@ -75675,7 +75688,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__default.createElement(Component, { className: classNames("s-text-element-900 dark:s-text-element-900-dark", hSizes[variant]) }, children));
 };