@dust-tt/sparkle 0.2.183 → 0.2.184

package/src/components/BarHeader.tsx

@@ -0,0 +1,152 @@
+import React from "react";
+
+import {
+  ArrowUpOnSquareIcon,
+  ChevronLeftIcon,
+  TrashIcon,
+  XMarkIcon,
+} from "@sparkle/icons/solid";
+import { classNames } from "@sparkle/lib/utils";
+
+import { Button } from "./Button";
+
+interface BarHeaderProps {
+  title: string;
+  leftActions?: React.ReactNode;
+  rightActions?: React.ReactNode;
+  className?: string;
+}
+
+export function BarHeader({
+  title,
+  leftActions,
+  rightActions,
+  className = "",
+}: BarHeaderProps) {
+  const titleClasses = classNames(
+    "s-text-element-800 dark:s-text-element-800-dark",
+    "s-text-base s-font-bold s-truncate s-grow"
+  );
+  const buttonBarClasses = "s-flex s-gap-1";
+
+  return (
+    <div
+      className={classNames(
+        "s-fixed s-left-0 s-right-0 s-top-0 s-z-30 s-flex s-h-16 s-flex-row s-items-center s-gap-3 s-border-b s-px-4 s-backdrop-blur",
+        "s-border-structure-300/30 s-bg-white/80",
+        "dark:s-border-structure-300-dark/30 dark:s-bg-structure-50-dark/80",
+        className
+      )}
+    >
+      {leftActions && <div className={buttonBarClasses}>{leftActions}</div>}
+      <div className={titleClasses}>{title}</div>
+      {rightActions && <div className={buttonBarClasses}>{rightActions}</div>}
+    </div>
+  );
+}
+
+type BarHeaderButtonBarCloseProps = {
+  variant: "close";
+  onClose?: () => void;
+};
+
+type BarHeaderButtonBarBackProps = {
+  variant: "back";
+  onBack?: () => void;
+};
+
+type BarHeaderButtonBarValidateProps = {
+  variant: "validate";
+  onCancel?: () => void;
+  onSave?: () => void;
+  saveLabel?: string;
+  isSaving?: boolean;
+  savingLabel?: string;
+};
+
+type BarHeaderButtonBarConversationProps = {
+  variant: "conversation";
+  onDelete?: () => void;
+  onShare?: () => void;
+};
+
+export type BarHeaderButtonBarProps =
+  | BarHeaderButtonBarCloseProps
+  | BarHeaderButtonBarBackProps
+  | BarHeaderButtonBarValidateProps
+  | BarHeaderButtonBarConversationProps;
+
+BarHeader.ButtonBar = function (props: BarHeaderButtonBarProps) {
+  switch (props.variant) {
+    case "back":
+      return (
+        <Button
+          size="sm"
+          icon={ChevronLeftIcon}
+          variant="tertiary"
+          label="Back"
+          tooltipPosition="below"
+          labelVisible={false}
+          onClick={props.onBack}
+        />
+      );
+    case "close":
+      return (
+        <Button
+          size="sm"
+          icon={XMarkIcon}
+          variant="tertiary"
+          label="Close"
+          tooltipPosition="below"
+          labelVisible={false}
+          onClick={props.onClose}
+        />
+      );
+    case "validate":
+      return (
+        <>
+          <Button
+            size="sm"
+            label="Cancel"
+            variant="tertiary"
+            onClick={props.onCancel}
+            disabled={!props.onCancel || props.isSaving}
+          />
+          <Button
+            size="sm"
+            label={
+              props.isSaving
+                ? props.savingLabel || "Processing..."
+                : props.saveLabel || "Save"
+            }
+            variant="primary"
+            onClick={props.onSave}
+            disabled={!props.onSave || props.isSaving}
+          />
+        </>
+      );
+    case "conversation":
+      return (
+        <>
+          <Button
+            size="sm"
+            label="Delete"
+            icon={TrashIcon}
+            variant="tertiary"
+            labelVisible={false}
+            tooltipPosition="below"
+            onClick={props.onDelete}
+          />
+          <Button
+            size="sm"
+            label="Share"
+            icon={ArrowUpOnSquareIcon}
+            variant="tertiary"
+            onClick={props.onShare}
+          />
+        </>
+      );
+    default:
+      return null;
+  }
+};

package/src/components/Button.tsx

@@ -0,0 +1,283 @@
+import React, {
+  Children,
+  cloneElement,
+  ComponentType,
+  MouseEvent,
+  ReactNode,
+} from "react";
+
+import { ChevronDownIcon, ChevronUpDownIcon } from "@sparkle/icons/solid";
+import { classNames } from "@sparkle/lib/utils";
+
+import { Avatar } from "./Avatar";
+import { Icon, IconProps } from "./Icon";
+import { Tooltip, TooltipProps } from "./Tooltip";
+
+export type ButtonProps = {
+  variant?:
+    | "primary"
+    | "primaryWarning"
+    | "secondary"
+    | "secondaryWarning"
+    | "tertiary"
+    | "avatar";
+
+  type?: "button" | "menu" | "select";
+  size?: "xs" | "sm" | "md" | "lg";
+  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+  disabled?: boolean;
+  hasMagnifying?: boolean;
+  label: string;
+  labelVisible?: boolean;
+  icon?: ComponentType;
+  avatar?: string;
+  className?: string;
+  tooltipPosition?: TooltipProps["position"];
+  disabledTooltip?: boolean;
+};
+
+const textClasses = {
+  xs: "s-text-xs s-font-semibold",
+  sm: "s-text-sm s-font-semibold",
+  md: "s-text-base s-font-bold",
+  lg: "s-text-lg s-font-bold",
+};
+
+const sizeClasses = {
+  xs: "s-gap-x-1 s-px-3 s-h-7",
+  sm: "s-gap-x-1 s-px-4 s-h-9",
+  md: "s-gap-x-1.5 s-px-5 s-h-12",
+  lg: "s-gap-x-3 s-px-6 s-h-16",
+};
+
+const sizeAvatarClasses = {
+  xs: "s-gap-x-1 s-pl-0.5 s-pr-3 s-py-0.5",
+  sm: "s-gap-x-1 s-pl-0.5 s-pr-4 s-py-0.5",
+  md: "s-gap-x-1.5 s-pl-1 s-pr-5 s-py-1",
+  lg: "s-gap-x-2 s-pl-0 s-pr-6 s-py-0",
+};
+
+const containerClasses = {
+  xs: "s-px-0.5",
+  sm: "s-px-1",
+  md: "s-px-1",
+  lg: "s-px-1",
+};
+
+const variantClasses = {
+  primary: {
+    base: "s-text-white s-bg-action-500 s-border-action-600",
+    hover: "hover:s-bg-action-400 hover:s-border-action-500",
+    active: "active:s-bg-action-600 active:s-border-action-700",
+    disabled: "s-text-white s-bg-action-200 s-border-action-200",
+    dark: {
+      base: "",
+      hover: "",
+      active: "",
+      disabled:
+        "dark:s-text-action-700-dark dark:s-bg-action-100-dark dark:s-border-action-200-dark dark:s-saturate-50",
+    },
+  },
+  primaryWarning: {
+    base: "s-text-white s-bg-warning-500 s-border-warning-600",
+    hover: "hover:s-bg-warning-400 hover:s-border-warning-500",
+    active: "active:s-bg-warning-600 active:s-border-warning-700",
+    disabled: "s-text-white s-bg-warning-200 s-border-warning-200",
+    dark: {
+      base: "",
+      hover: "",
+      active: "",
+      disabled:
+        "dark:s-text-warning-700-dark dark:s-bg-warning-100-dark dark:s-border-warning-200-dark dark:s-saturate-50",
+    },
+  },
+  secondary: {
+    base: "s-text-action-500 s-border-structure-200 s-bg-structure-0",
+    hover: "hover:s-bg-action-50 hover:s-border-action-200",
+    active: "active:s-bg-action-100 active:s-border-action-500",
+    disabled: "s-text-action-300 s-border-structure-200 s-bg-structure-0",
+    dark: {
+      base: "dark:s-text-action-600-dark dark:s-border-structure-200-dark dark:s-bg-structure-100-dark",
+      hover:
+        "dark:hover:s-text-action-700-dark dark:hover:s-bg-action-50-dark dark:hover:s-border-action-300-dark",
+      active:
+        "dark:active:s-bg-action-100-dark dark:active:s-border-action-500-dark",
+      disabled:
+        "dark:s-text-element-600-dark dark:s-border-structure-100-dark dark:s-bg-structure-200-dark",
+    },
+  },
+  secondaryWarning: {
+    base: "s-text-warning-500 s-border-structure-200 s-bg-structure-0",
+    hover: "hover:s-bg-warning-50 hover:s-border-warning-200",
+    active: "active:s-bg-warning-100 active:s-border-warning-500",
+    disabled: "s-text-warning-300 s-border-structure-200 s-bg-structure-0",
+    dark: {
+      base: "dark:s-text-warning-600-dark dark:s-border-structure-300-dark dark:s-bg-structure-100-dark",
+      hover:
+        "dark:hover:s-bg-warning-50-dark dark:hover:s-border-warning-300-dark",
+      active:
+        "dark:active:s-bg-warning-100-dark dark:active:s-border-warning-500-dark",
+      disabled:
+        "dark:s-text-element-600-dark dark:s-border-structure-100-dark dark:s-bg-structure-200-dark",
+    },
+  },
+  tertiary: {
+    base: "s-text-element-800 s-border-structure-200 s-bg-structure-0",
+    hover:
+      "hover:s-bg-action-50 hover:s-text-action-500 hover:s-border-action-200",
+    active:
+      "active:s-bg-action-100 active:s-text-action-600 active:s-border-action-500",
+    disabled: "s-text-element-500 s-border-structure-200 s-bg-structure-0",
+    dark: {
+      base: "dark:s-text-element-800-dark dark:s-border-structure-300-dark dark:s-bg-structure-100-dark",
+      hover:
+        "dark:hover:s-text-action-300 dark:hover:s-bg-action-50-dark dark:hover:s-border-action-300-dark",
+      active:
+        "dark:active:s-bg-action-100-dark dark:active:s-border-action-500-dark",
+      disabled:
+        "dark:s-text-element-600-dark dark:s-border-structure-100-dark dark:s-bg-structure-200-dark",
+    },
+  },
+  avatar: {
+    base: "s-text-element-800 s-border-structure-200 s-bg-structure-0",
+    hover:
+      "hover:s-bg-action-50 hover:s-text-action-500 hover:s-border-action-200",
+    active:
+      "active:s-bg-action-100 active:s-text-action-600 active:s-border-action-500",
+    disabled: "s-text-element-500 s-border-structure-200 s-bg-structure-0",
+    dark: {
+      base: "dark:s-text-element-700-dark dark:s-border-structure-300-dark dark:s-bg-structure-100-dark",
+      hover:
+        "dark:hover:s-bg-action-50-dark dark:hover:s-border-action-300-dark",
+      active:
+        "dark:active:s-bg-action-100-dark dark:active:s-border-action-500-dark",
+      disabled:
+        "dark:s-text-element-600-dark dark:s-border-structure-100-dark dark:s-bg-structure-200-dark",
+    },
+  },
+};
+
+const transitionClasses =
+  "s-transition-all s-ease-out s-duration-200 s-cursor-pointer";
+
+const magnifyingClasses =
+  "hover:s-scale-105 hover:s-drop-shadow-md active:s-scale-100 active:s-drop-shadow-none";
+
+export function Button({
+  variant = "primary",
+  type = "button",
+  size = "sm",
+  onClick,
+  disabled = false,
+  labelVisible = true,
+  label,
+  icon,
+  className = "",
+  tooltipPosition = "above",
+  hasMagnifying = true,
+  disabledTooltip = false,
+  avatar,
+}: ButtonProps) {
+  let buttonClasses = classNames(
+    "s-inline-flex s-items-center s-border s-scale-100 s-box-border s-whitespace-nowrap s-rounded-full",
+    !avatar ? sizeClasses[size] : sizeAvatarClasses[size],
+    textClasses[size],
+    className
+  );
+  if (disabled) {
+    buttonClasses = classNames(
+      buttonClasses,
+      variantClasses[variant]?.disabled,
+      variantClasses[variant]?.dark.disabled,
+      disabled ? "s-cursor-default" : ""
+    );
+  } else {
+    buttonClasses = classNames(
+      buttonClasses,
+      transitionClasses,
+      hasMagnifying ? magnifyingClasses : "",
+      variantClasses[variant]?.base,
+      variantClasses[variant]?.hover,
+      variantClasses[variant]?.active,
+      variantClasses[variant]?.dark?.base,
+      variantClasses[variant]?.dark?.hover,
+      variantClasses[variant]?.dark?.active
+    );
+  }
+
+  const finalContainerClasses = classNames(containerClasses[size]);
+
+  const buttonBase = (
+    <button
+      type="button"
+      className={buttonClasses}
+      onClick={onClick}
+      disabled={disabled}
+      aria-label={label}
+    >
+      {icon && <Icon visual={icon} size={size as IconProps["size"]} />}
+      {avatar && <Avatar size={size} visual={avatar} isRounded />}
+      {labelVisible ? (
+        <div className={classNames("s-truncate", finalContainerClasses)}>
+          {label}
+        </div>
+      ) : null}
+      {type === "menu" && (
+        <Icon
+          className="s-opacity-50"
+          visual={ChevronDownIcon}
+          size={size as IconProps["size"]}
+        />
+      )}
+      {type === "select" && (
+        <Icon
+          className="s-opacity-60"
+          visual={ChevronUpDownIcon}
+          size={size as IconProps["size"]}
+        />
+      )}
+    </button>
+  );
+
+  return labelVisible || disabledTooltip ? (
+    buttonBase
+  ) : (
+    <Tooltip label={label} position={tooltipPosition}>
+      {buttonBase}
+    </Tooltip>
+  );
+}
+
+interface ButtonListProps {
+  children: ReactNode;
+  isWrapping?: boolean;
+  className?: string;
+}
+
+Button.List = function ({
+  children,
+  isWrapping = false,
+  className,
+}: ButtonListProps) {
+  const modifiedChildren = Children.map(children, (child) => {
+    // Check if this child is a Button
+    if (React.isValidElement<ButtonProps>(child) && child.type === Button) {
+      // Clone the element with hasMagnifying set to false
+      return cloneElement(child, { hasMagnifying: false });
+    }
+    return child;
+  });
+
+  return (
+    <div className={classNames(className ? className : "", "s-flex")}>
+      <div
+        className={classNames(
+          "s-flex s-flex-row s-gap-2",
+          isWrapping ? "s-flex-wrap" : "s-flex-nowrap"
+        )}
+      >
+        {modifiedChildren}
+      </div>
+    </div>
+  );
+};

package/src/components/CardButton.tsx

@@ -0,0 +1,90 @@
+import React, { ReactNode } from "react";
+import type { UrlObject } from "url";
+
+import {
+  noHrefLink,
+  SparkleContext,
+  SparkleContextLinkType,
+} from "@sparkle/context";
+import { classNames } from "@sparkle/lib/utils";
+
+interface CardButtonProps {
+  children: ReactNode;
+  variant?: "primary" | "secondary" | "tertiary";
+  size?: "sm" | "md" | "lg";
+  className?: string;
+  onClick?: () => void;
+  onMouseEnter?: () => void;
+  onMouseLeave?: () => void;
+  href?: string | UrlObject;
+  target?: string;
+  rel?: string;
+  replace?: boolean;
+  shallow?: boolean;
+}
+
+const variantClasses = {
+  primary:
+    "s-bg-structure-50 s-border s-border-structure-200 hover:s-bg-white hover:s-border-structure-100 active:s-bg-structure-100 active:s-border-structure-200",
+  secondary:
+    "s-bg-structure-0 s-border s-border-structure-100 hover:s-bg-structure-50 hover:s-border-structure-200 active:s-bg-structure-100 active:s-border-structure-300",
+  tertiary:
+    "s-border-structure-100/0 s-border s-border-structure-0 hover:s-bg-structure-50 hover:s-border-structure-100 active:s-bg-structure-100 active:s-border-structure-200",
+};
+
+const sizeClasses = {
+  sm: "s-p-3 s-rounded-xl",
+  md: "s-p-4 s-rounded-2xl",
+  lg: "s-p-5 s-rounded-3xl",
+};
+
+export function CardButton({
+  children,
+  variant = "primary",
+  size = "md",
+  className = "",
+  onClick,
+  onMouseEnter,
+  onMouseLeave,
+  href,
+  target = "_blank",
+  rel = "",
+  replace,
+  shallow,
+}: CardButtonProps) {
+  const { components } = React.useContext(SparkleContext);
+
+  const Link: SparkleContextLinkType = href ? components.link : noHrefLink;
+
+  const commonClasses = classNames(
+    "s-flex s-group s-cursor-pointer s-transition s-duration-200 s-overflow-hidden",
+    variantClasses[variant],
+    sizeClasses[size],
+    className
+  );
+  if (href) {
+    return (
+      <Link
+        href={href}
+        className={commonClasses}
+        replace={replace}
+        shallow={shallow}
+        target={target}
+        rel={rel}
+      >
+        {children}
+      </Link>
+    );
+  } else {
+    return (
+      <div
+        className={commonClasses}
+        onClick={onClick}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+      >
+        {children}
+      </div>
+    );
+  }
+}

package/src/components/Checkbox.tsx

@@ -0,0 +1,90 @@
+import React from "react";
+
+import { CheckIcon, DashIcon } from "@sparkle/icons/solid";
+import { classNames } from "@sparkle/lib/utils";
+
+import { Icon } from "./Icon";
+
+export interface CheckboxProps {
+  variant?: "selectable" | "checkable";
+  checked: boolean;
+  disabled?: boolean;
+  partialChecked?: boolean;
+  onChange: (checked: boolean) => void;
+  className?: string;
+}
+
+export function Checkbox({
+  variant = "selectable",
+  checked,
+  onChange,
+  className = "",
+  disabled,
+  partialChecked,
+}: CheckboxProps) {
+  const baseStyleClasses = {
+    base: "s-border s-justify-center s-w-5 s-h-5 s-rounded-md s-flex s-items-center s-transition-colors s-duration-300 s-ease-out",
+    idle: "s-bg-structure-50 s-border-element-600 s-cursor-pointer",
+    hover: "hover:s-border-action-500 hover:s-bg-action-200",
+    disabled: "s-bg-structure-0 s-border-structure-300 s-cursor-default",
+    dark: {
+      base: "dark:s-bg-structure-50-dark dark:s-border-element-500-dark",
+      hover:
+        "dark:hover:s-border-action-500-dark dark:hover:s-bg-action-200-dark",
+      disabled:
+        "dark:s-bg-structure-0-dark dark:s-border-structure-300-dark s-cursor-default",
+    },
+  };
+
+  const checkedIndicatorClasses = {
+    base: "s-transition s-duration-300 s-ease-in-out",
+    selected: "s-opacity-100 s-bg-action-500 dark:s-bg-action-500-dark",
+    unselected: "s-opacity-0",
+    partialChecked: "s-opacity-100 s-bg-element-700 dark:s-bg-element-700-dark",
+    disabled: "s-opacity-100 s-bg-element-500 dark:s-bg-element-500-dark",
+  };
+
+  const combinedBaseClasses = classNames(
+    baseStyleClasses.base,
+    disabled ? baseStyleClasses.disabled : baseStyleClasses.idle,
+    !disabled ? baseStyleClasses.hover : "",
+    disabled ? baseStyleClasses.dark.disabled : baseStyleClasses.dark.base,
+    !disabled ? baseStyleClasses.dark.hover : "",
+    className
+  );
+
+  const combinedCheckedIndicatorClasses = classNames(
+    checkedIndicatorClasses.base,
+    disabled ? checkedIndicatorClasses.disabled : "",
+    checked && !partialChecked && !disabled
+      ? checkedIndicatorClasses.selected
+      : "",
+    partialChecked && !disabled ? checkedIndicatorClasses.partialChecked : "",
+    !checked && !disabled ? checkedIndicatorClasses.unselected : ""
+  );
+
+  return (
+    <label>
+      <input
+        type="checkbox"
+        checked={checked}
+        onChange={(e) => onChange && onChange(e.target.checked)}
+        className="s-hidden"
+        disabled={disabled}
+      />
+      <div
+        className={classNames(combinedBaseClasses, "s-relative s-text-white")}
+      >
+        <div
+          className={combinedCheckedIndicatorClasses}
+          style={{ width: "14px", height: "14px", borderRadius: "3px" }}
+        ></div>
+        {variant === "checkable" && (
+          <div className="s-absolute">
+            <Icon visual={partialChecked ? DashIcon : CheckIcon} size="xs" />
+          </div>
+        )}
+      </div>
+    </label>
+  );
+}

package/src/components/Chip.tsx

@@ -0,0 +1,97 @@
+import React, { ComponentType, ReactNode } from "react";
+
+import { classNames } from "@sparkle/lib/utils";
+
+import { Icon, IconProps } from "./Icon";
+
+type ChipProps = {
+  size?: "xs" | "sm";
+  color?:
+    | "emerald"
+    | "amber"
+    | "slate"
+    | "purple"
+    | "warning"
+    | "sky"
+    | "pink"
+    | "action"
+    | "red";
+  label?: string;
+  children?: ReactNode;
+  className?: string;
+  isBusy?: boolean;
+  icon?: ComponentType;
+};
+
+const sizeClasses = {
+  xs: "s-h-7 s-text-xs s-font-medium s-px-3 s-gap-2",
+  sm: "s-h-9 s-text-sm s-font-semibold s-px-3 s-gap-2.5",
+};
+
+const baseClasses =
+  "s-rounded-lg s-inline-flex s-box-border s-border s-items-center";
+
+export function Chip({
+  size = "xs",
+  color = "slate",
+  label,
+  children,
+  className = "",
+  isBusy = false,
+  icon,
+}: ChipProps) {
+  const backgroundColor = `s-bg-${color}-100 s-border-${color}-200`;
+  const textColor = `s-text-${color}-900`;
+
+  const ChipClasses = classNames(
+    baseClasses,
+    sizeClasses[size],
+    backgroundColor,
+    textColor,
+    className
+  );
+
+  return (
+    <div
+      className={classNames(
+        ChipClasses,
+        isBusy ? "s-animate-breathing-scale s-cursor-default" : ""
+      )}
+      aria-label={label}
+    >
+      {icon && <Icon visual={icon} size={size as IconProps["size"]} />}
+      {label && (
+        <span
+          className={classNames(
+            textColor,
+            "s-pointer s-grow s-cursor-default s-truncate"
+          )}
+        >
+          {label}
+        </span>
+      )}
+      {children}
+    </div>
+  );
+}
+
+interface ListChipProps {
+  children: ReactNode;
+  className?: string;
+  isWrapping?: boolean;
+}
+
+Chip.List = function ({ children, className, isWrapping }: ListChipProps) {
+  return (
+    <div className={classNames(className ? className : "", "s-flex")}>
+      <div
+        className={classNames(
+          "s-flex s-flex-row s-gap-2",
+          isWrapping ? "s-flex-wrap" : ""
+        )}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};