@dust-tt/sparkle 0.2.124 → 0.2.125-rc1

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

@@ -1,4 +1,6 @@
+/// <reference types="node" />
 import React, { ReactNode } from "react";
+import type { UrlObject } from "url";
 interface CardButtonProps {
     children: ReactNode;
     variant?: "primary" | "secondary" | "tertiary";
@@ -7,9 +9,11 @@ interface CardButtonProps {
     onClick?: () => void;
     onMouseEnter?: () => void;
     onMouseLeave?: () => void;
-    href?: string;
+    href?: string | UrlObject;
     target?: string;
     rel?: string;
+    replace?: boolean;
+    shallow?: boolean;
 }
-export declare function CardButton({ children, variant, size, className, onClick, onMouseEnter, onMouseLeave, href, target, rel, }: CardButtonProps): React.JSX.Element;
+export declare function CardButton({ children, variant, size, className, onClick, onMouseEnter, onMouseLeave, href, target, rel, replace, shallow, }: CardButtonProps): React.JSX.Element;
 export {};

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

@@ -1,13 +1,15 @@
+/// <reference types="node" />
 import React from "react";
+import type { UrlObject } from "url";
 interface TemplateItemProps {
     description: string;
+    href: string | UrlObject;
     id: string;
     name: string;
-    onClick: (id: string) => void;
     visual: {
         backgroundColor: string;
         emoji: string;
     };
 }
-export declare function TemplateItem({ description, id, name, onClick, visual, }: TemplateItemProps): React.JSX.Element;
+export declare function TemplateItem({ description, href, name, visual, }: TemplateItemProps): React.JSX.Element;
 export {};

package/dist/cjs/context.d.ts

@@ -1,11 +1,17 @@
+/// <reference types="node" />
 import React, { ComponentType, MouseEvent, ReactNode } from "react";
+import type { UrlObject } from "url";
 export type SparkleContextLinkType = ComponentType<{
-    href: string;
+    href: string | UrlObject;
     className?: string;
     children: ReactNode;
     ariaLabel?: string;
     ariaCurrent?: boolean | "time" | "false" | "true" | "page" | "step" | "location" | "date";
     onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+    replace?: boolean;
+    shallow?: boolean;
+    target?: string;
+    rel?: string;
 }>;
 export type SparkleContextType = {
     components: {

package/dist/cjs/index.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var React = require('react');
+var url = require('url');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -52,8 +53,9 @@ var css_248z = ".s-form-checkbox,.s-form-radio {\n  -webkit-appearance: none;\n
 styleInject(css_248z);
 
 var aLink = function (_a) {
-    var href = _a.href, className = _a.className, ariaCurrent = _a.ariaCurrent, ariaLabel = _a.ariaLabel, onClick = _a.onClick, children = _a.children;
-    return (React.createElement("a", { href: href, className: className, "aria-current": ariaCurrent, "aria-label": ariaLabel, onClick: onClick }, children));
+    var href = _a.href, className = _a.className, ariaCurrent = _a.ariaCurrent, ariaLabel = _a.ariaLabel, onClick = _a.onClick, children = _a.children, target = _a.target, rel = _a.rel;
+    var hrefAsString = typeof href !== "string" ? url.format(href) : href;
+    return (React.createElement("a", { href: hrefAsString, className: className, "aria-current": ariaCurrent, "aria-label": ariaLabel, onClick: onClick, target: target, rel: rel }, children));
 };
 var noHrefLink = function (_a) {
     var className = _a.className, ariaCurrent = _a.ariaCurrent, ariaLabel = _a.ariaLabel, onClick = _a.onClick, children = _a.children;
@@ -936,15 +938,12 @@ var sizeClasses$4 = {
     lg: "s-p-5 s-rounded-3xl",
 };
 function CardButton(_a) {
-    var children = _a.children, _b = _a.variant, variant = _b === void 0 ? "primary" : _b, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.className, className = _d === void 0 ? "" : _d, onClick = _a.onClick, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, href = _a.href, _e = _a.target, target = _e === void 0 ? "_blank" : _e, _f = _a.rel, rel = _f === void 0 ? "" : _f;
+    var children = _a.children, _b = _a.variant, variant = _b === void 0 ? "primary" : _b, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.className, className = _d === void 0 ? "" : _d, onClick = _a.onClick, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, href = _a.href, _e = _a.target, target = _e === void 0 ? "_blank" : _e, _f = _a.rel, rel = _f === void 0 ? "" : _f, replace = _a.replace, shallow = _a.shallow;
     var components = React.useContext(SparkleContext).components;
     var Link = href ? components.link : noHrefLink;
     var commonClasses = classNames("s-flex s-cursor-pointer s-transition s-duration-200", variantClasses$1[variant], sizeClasses$4[size], className);
     if (href) {
-        if (target) {
-            return (React.createElement("a", { href: href, target: target, rel: rel, className: commonClasses }, children));
-        }
-        return (React.createElement(Link, { href: href, className: commonClasses }, children));
+        return (React.createElement(Link, { href: href, className: commonClasses, replace: replace, shallow: shallow, target: target, rel: rel }, children));
     }
     else {
         return (React.createElement("div", { className: commonClasses, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, children));
@@ -55242,9 +55241,9 @@ function Popup(_a) {
 }
 
 function TemplateItem(_a) {
-    var description = _a.description, id = _a.id, name = _a.name, onClick = _a.onClick, visual = _a.visual;
+    var description = _a.description, href = _a.href, name = _a.name, visual = _a.visual;
     var backgroundColor = visual.backgroundColor, emoji = visual.emoji;
-    return (React.createElement(CardButton, { className: "s-flex s-max-h-32 s-max-w-lg s-flex-row s-gap-5 s-p-4", onClick: function () { return onClick(id); }, variant: "tertiary" },
+    return (React.createElement(CardButton, { className: "s-flex s-max-h-32 s-max-w-lg s-flex-row s-gap-5 s-p-4", href: href, variant: "tertiary", replace: true, shallow: true },
         React.createElement(Avatar, { emoji: emoji, size: "lg", isRounded: true, backgroundColor: backgroundColor }),
         React.createElement("div", { className: "s-flex s-flex-col s-gap-2" },
             React.createElement("span", { className: "s-text-bold s-text-lg s-font-medium s-text-element-900" }, name),