@dust-tt/sparkle 0.2.183 → 0.2.184

package/src/components/PriceTable.tsx

@@ -0,0 +1,229 @@
+import React, { ReactNode } from "react";
+
+import { CheckIcon, DashIcon, XMarkIcon } from "@sparkle/icons/solid";
+import { classNames } from "@sparkle/lib/utils";
+
+import { Icon } from "./Icon";
+
+interface PriceTableProps {
+  title: string;
+  price: string;
+  priceLabel?: string;
+  color?: "pink" | "sky" | "emerald" | "amber" | "blue";
+  size?: "xs" | "sm";
+  className?: string;
+  children: ReactNode;
+  magnified?: boolean;
+}
+
+const colorTable = {
+  pink: "s-bg-gradient-to-r s-from-pink-400 s-to-red-300 dark:s-bg-pink-500",
+  amber:
+    "s-bg-gradient-to-r s-from-amber-400 s-to-yellow-300 s-bg-amber-400 dark:s-bg-amber-500",
+  sky: "s-bg-gradient-to-r s-from-sky-400 s-to-blue-400 s-bg-sky-400 dark:s-bg-sky-500",
+  blue: "s-bg-gradient-to-r s-from-blue-400 s-to-indigo-300 s-bg-blue-400 dark:s-bg-blue-500",
+  emerald:
+    "s-bg-gradient-to-r s-from-emerald-400 s-to-green-400 s-bg-emerald-400 dark:s-bg-emerald-500",
+};
+
+const textColorTable = {
+  pink: "s-text-pink-900 dark:s-text-pink-950",
+  amber: "s-text-amber-900 dark:s-text-amber-950",
+  sky: "s-text-sky-900 dark:s-text-sky-950",
+  blue: "s-text-blue-900 dark:s-text-blue-950",
+  emerald: "s-text-emerald-900 dark:s-text-emerald-950",
+};
+
+const sizeTable = {
+  sm: "s-rounded-2xl s-p-px s-shadow-2xl",
+  xs: "s-rounded-2xl s-p-px s-shadow-xl",
+};
+
+export function PriceTable({
+  title,
+  price,
+  color = "pink",
+  size = "xs",
+  priceLabel = "",
+  className = "",
+  magnified = true,
+  children, // Use children instead of tableItems
+}: PriceTableProps) {
+  // Pass size prop to all PriceTable.Item children
+  const childrenWithProps = React.Children.map(children, (child) => {
+    // Checking isValidElement is the safe way and avoids a typescript error too
+    if (React.isValidElement<PriceTableItemProps>(child)) {
+      if (
+        child.type === PriceTable.Item ||
+        child.type === PriceTable.ActionContainer
+      ) {
+        return React.cloneElement(child, { size: size });
+      }
+    }
+    return child;
+  });
+
+  return (
+    <div
+      className={classNames(
+        "s-w-full",
+        "s-flex s-cursor-default s-flex-col s-border s-border-white/30",
+        sizeTable[size],
+        magnified
+          ? "s-duration-400 s-scale-95 s-transition-all s-ease-out hover:s-scale-100"
+          : "",
+        colorTable[color],
+        className
+      )}
+    >
+      <div
+        className={classNames(
+          "s-flex s-flex-col",
+          size === "xs" ? "s-px-4 s-py-3" : "s-px-5 s-py-4"
+        )}
+      >
+        <div
+          className={classNames(
+            size === "xs" ? "s-text-2xl" : "s-text-3xl",
+            "s-w-full s-text-right s-font-semibold",
+            "s-text-structure-0"
+          )}
+        >
+          {title}
+        </div>
+        <div className="-s-mt-2 s-flex s-flex-row s-items-baseline s-gap-2">
+          <span
+            className={classNames(
+              size === "xs" ? "s-text-3xl" : "s-text-4xl",
+              textColorTable[color],
+              "s-font-bold"
+            )}
+          >
+            {price}
+          </span>
+          <span
+            className={classNames(
+              "s-font-bold s-text-white/70",
+              size === "xs" ? "s-text-base" : "s-text-lg"
+            )}
+          >
+            {priceLabel}
+          </span>
+        </div>
+      </div>
+      <div
+        style={{
+          borderBottomRightRadius: "15px",
+          borderBottomLeftRadius: "15px",
+          borderTopRightRadius: "4px",
+          borderTopLeftRadius: "4px",
+        }}
+        className={classNames(
+          "s-flex s-h-full s-flex-col s-overflow-hidden s-shadow-md",
+          "s-bg-white dark:s-bg-structure-50-dark"
+        )}
+      >
+        {childrenWithProps}
+      </div>
+    </div>
+  );
+}
+
+const iconTable = {
+  check: CheckIcon,
+  dash: DashIcon,
+  xmark: XMarkIcon,
+};
+
+const iconColorTable = {
+  check: "s-text-emerald-500",
+  dash: "s-text-amber-500",
+  xmark: "s-text-red-500",
+};
+
+interface PriceTableItemProps {
+  label: ReactNode;
+  size?: "xs" | "sm";
+  variant?: "check" | "dash" | "xmark";
+  className?: string;
+}
+
+PriceTable.Item = function ({
+  label,
+  variant = "check",
+  size = "xs",
+  className = "",
+}: PriceTableItemProps) {
+  return (
+    <div
+      className={classNames(
+        size === "xs"
+          ? "s-gap-2 s-p-2.5 s-text-sm"
+          : "s-gap-3 s-p-4 s-text-base",
+        "s-flex s-items-start s-border-b",
+        "s-border-structure-100 s-text-element-800",
+        "dark:s-border-structure-200-dark/50 dark:s-text-element-800-dark",
+        className
+      )}
+    >
+      <div className="s-pt-0.5">
+        <Icon
+          size={size}
+          visual={iconTable[variant]}
+          className={iconColorTable[variant]}
+        />
+      </div>
+      <div
+        className={classNames(
+          variant === "xmark"
+            ? "s-text-element-600 dark:s-text-element-600-dark"
+            : "",
+          "s-overflow-hidden"
+        )}
+      >
+        {label}
+      </div>
+    </div>
+  );
+};
+
+interface PriceTableActionContainerProps {
+  children: ReactNode;
+  size?: "xs" | "sm";
+  position?: "top" | "bottom";
+}
+
+PriceTable.ActionContainer = function ({
+  children,
+  size = "xs",
+  position = "bottom",
+}: PriceTableActionContainerProps) {
+  return (
+    <>
+      {position === "bottom" ? <div className="s-h-full s-w-full" /> : null}
+      <div
+        className={classNames(
+          "s-flex s-w-full s-justify-center s-px-2",
+          size === "xs" ? "s-py-2" : "s-py-4",
+          position === "top"
+            ? "s-border-b s-border-structure-100 dark:s-border-structure-200-dark/50"
+            : ""
+        )}
+      >
+        <div className="s-flex s-h-full s-flex-col s-justify-end">
+          {children}
+        </div>
+      </div>
+    </>
+  );
+};
+
+interface PriceTableContainerProps {
+  children: ReactNode;
+}
+
+PriceTable.Container = function ({ children }: PriceTableContainerProps) {
+  return (
+    <div className="s-flex s-w-full s-items-stretch s-gap-3">{children}</div>
+  );
+};

package/src/components/RadioButton.tsx

@@ -0,0 +1,83 @@
+import React from "react";
+
+import { classNames } from "@sparkle/lib/utils";
+
+export type RadioButtonProps = {
+  name: string;
+  choices: RadioButtonChoice[];
+  value: string;
+  className?: string;
+  onChange: (value: string) => void;
+};
+
+export type RadioButtonChoice = {
+  label: string;
+  value: string;
+  disabled: boolean;
+};
+
+const labelClasses = {
+  base: "s-text-sm s-text-element-800 dark:s-text-element-800-dark",
+  disabled: "s-text-sm s-text-element-600 dark:s-text-element-600-dark",
+};
+
+const inputClasses = {
+  base: "s-form-radio s-p-2 s-transition-colors s-duration-300 s-ease-out s-border-px",
+  unselected: classNames(
+    "s-cursor-pointer",
+    "s-border-structure-300 s-bg-structure-50",
+    "hover:s-bg-action-100 hover:s-border-action-300",
+    "active:s-bg-action-200 active:s-border-action-400 active:s-ring-0",
+    "dark:s-border-structure-400-dark dark:s-bg-structure-100-dark",
+    "dark:hover:s-bg-structure-200-dark dark:hover:s-border-action-600-dark"
+  ),
+  selected: classNames(
+    "s-bg-action-500 s-ring-0",
+    "checked:s-ring-0 checked:s-bg-action-500"
+  ),
+  disabled:
+    "s-cursor-default s-bg-structure-0 s-border-structure-300 dark:s-bg-structure-0-dark dark:s-border-structure-300-dark",
+};
+
+export function RadioButton({
+  name,
+  choices,
+  className,
+  value,
+  onChange,
+}: RadioButtonProps) {
+  return (
+    <div className={classNames("s-flex s-gap-3", className || "")}>
+      {choices.map((choice) => (
+        <div key={choice.value}>
+          <label
+            className={classNames(
+              "s-flex s-items-center s-gap-2",
+              choice.disabled ? labelClasses.disabled : labelClasses.base
+            )}
+          >
+            <input
+              type="radio"
+              name={name}
+              value={choice.value}
+              checked={value === choice.value}
+              disabled={choice.disabled}
+              onChange={(e) => {
+                onChange(e.target.value);
+              }}
+              className={classNames(
+                inputClasses.base,
+                choice.disabled
+                  ? inputClasses.disabled
+                  : choice.value === value
+                    ? inputClasses.selected
+                    : inputClasses.unselected
+              )}
+            />
+            <span>{choice.label}</span>
+          </label>
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/components/Searchbar.tsx

@@ -0,0 +1,105 @@
+import React, { forwardRef } from "react";
+
+import { Icon } from "@sparkle/components/Icon";
+import { classNames } from "@sparkle/lib/utils";
+
+import { MagnifyingGlassStrokeIcon, XMarkIcon } from "..";
+import { IconButton } from "./IconButton";
+
+const sizeClasses = {
+  xs: "s-text-xs s-h-[26px] s-pl-3 s-pr-6 s-pt-1.5",
+  sm: "s-text-sm s-h-[34px] s-pl-4 s-pr-8 s-pt-1.5",
+  md: "s-text-base s-h-[46px] s-pl-6 s-pr-10 s-pt-1.5",
+};
+const iconClasses = {
+  xs: "s-pr-2",
+  sm: "s-pr-3",
+  md: "s-pr-4",
+};
+
+export const Searchbar = forwardRef<
+  HTMLInputElement,
+  {
+    placeholder: string;
+    value: string | null;
+    onChange?: (value: string) => void;
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    name: string;
+    size?: "xs" | "sm" | "md";
+    disabled?: boolean;
+    className?: string;
+  }
+>(
+  (
+    {
+      placeholder,
+      value,
+      onChange,
+      onKeyDown,
+      name,
+      size = "sm",
+      disabled = false,
+      className = "",
+    },
+    ref
+  ) => {
+    const clearInputField = () => {
+      onChange?.("");
+    };
+
+    return (
+      <div className="s-relative s-m-px s-flex-grow">
+        <input
+          type="text"
+          name={name}
+          id={name}
+          ref={ref}
+          className={classNames(
+            "s-border-0 s-outline-none s-ring-1 s-ring-structure-200 focus:s-outline-none focus:s-ring-2",
+            "s-w-full s-rounded-full s-bg-structure-50 s-font-normal s-placeholder-element-600",
+            "s-ring-structure-200 focus:s-ring-action-300",
+            "dark:s-ring-structure-300-dark dark:focus:s-ring-action-300-dark",
+            "s-transition-all s-duration-300 s-ease-out",
+            sizeClasses[size],
+            className ?? "",
+            disabled
+              ? "s-cursor-default s-text-element-600"
+              : "s-text-element-900"
+          )}
+          placeholder={placeholder}
+          value={value ?? ""}
+          onChange={(e) => {
+            onChange?.(e.target.value);
+          }}
+          onKeyDown={onKeyDown}
+          disabled={disabled}
+        />
+        <div
+          className={classNames(
+            "s-absolute s-inset-y-0 s-right-0 s-flex s-items-center s-pr-3",
+            iconClasses[size]
+          )}
+        >
+          {value && onChange ? (
+            <IconButton
+              icon={XMarkIcon}
+              variant="secondary"
+              size={size}
+              onClick={clearInputField}
+            />
+          ) : (
+            <div
+              className={classNames(
+                disabled ? "s-text-element-600" : "s-text-element-900"
+              )}
+            >
+              <Icon visual={MagnifyingGlassStrokeIcon} size={size} />
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+);
+
+Searchbar.displayName = "Searchbar";

package/src/components/SliderToggle.tsx

@@ -0,0 +1,79 @@
+import React, { MouseEventHandler } from "react";
+
+import { classNames } from "@sparkle/lib/utils";
+
+type SliderToggleProps = {
+  onClick?: MouseEventHandler<HTMLElement>;
+  size?: "xs" | "sm";
+  className?: string;
+  disabled?: boolean;
+  selected?: boolean;
+};
+
+const baseClasses =
+  "s-rounded-full s-cursor-pointer s-transition-colors s-duration-300 s-ease-out s-cursor-pointer s-flex s-items-center s-flex";
+
+const sizeClasses = {
+  xs: "s-h-7 s-w-10",
+  sm: "s-h-9 s-w-14",
+};
+
+const cusrsorSizeClasses = {
+  xs: "s-h-6 s-w-6",
+  sm: "s-h-8 s-w-8",
+};
+const cusrsorTranslateSizeClasses = {
+  xs: "s-translate-x-[14px]",
+  sm: "s-translate-x-[22px]",
+};
+
+const stateClasses = {
+  idle: "s-bg-structure-200 hover:s-bg-action-400",
+  selected: "s-bg-success-300 hover:s-bg-success-200",
+  disabled:
+    "s-bg-structure-200 s-cursor-not-allowed hover:s-bg-structure-200 hover:s-cursor-not-allowed",
+  dark: {
+    idle: "dark:s-bg-structure-200-dark dark:hover:s-bg-action-400",
+    selected: "dark:s-bg-success-400-dark",
+    disabled: "dark:s-bg-structure-300-dark",
+  },
+};
+
+export function SliderToggle({
+  onClick,
+  disabled = false,
+  className = "",
+  selected = false,
+  size = "xs",
+}: SliderToggleProps) {
+  const combinedStateClasses = classNames(
+    size ? sizeClasses[size] : "",
+    selected ? stateClasses.selected : stateClasses.idle,
+    disabled ? stateClasses.disabled : "",
+    selected ? stateClasses.dark.selected : stateClasses.dark.idle,
+    disabled ? stateClasses.dark.disabled : ""
+  );
+
+  const SliderToggleContent = (
+    <div
+      onClick={(e) => {
+        if (!disabled) {
+          onClick?.(e); // Run passed onClick event
+        }
+      }}
+      className={classNames(className, baseClasses, combinedStateClasses)}
+    >
+      <div
+        id="cursor"
+        className={classNames(
+          "s-transform s-rounded-full s-drop-shadow s-transition-transform s-duration-300 s-ease-out",
+          disabled ? "s-bg-structure-100" : "s-bg-white",
+          size ? cusrsorSizeClasses[size] : "",
+          selected ? cusrsorTranslateSizeClasses[size] : "s-translate-x-[2px]"
+        )}
+      />
+    </div>
+  );
+
+  return SliderToggleContent;
+}

package/src/components/Spinner.tsx

@@ -0,0 +1,152 @@
+import Lottie from "lottie-react";
+import React from "react";
+
+import animColor from "@sparkle/lottie/spinnerColor";
+import animColorLG from "@sparkle/lottie/spinnerColorLG";
+import animColorXS from "@sparkle/lottie/spinnerColorXS";
+import animDark from "@sparkle/lottie/spinnerDark";
+import animDarkLG from "@sparkle/lottie/spinnerDarkLG";
+import animDarkXS from "@sparkle/lottie/spinnerDarkXS";
+import animLightXS from "@sparkle/lottie/spinnerLight";
+import animLightLG from "@sparkle/lottie/spinnerLightLG";
+import animSimpleLight from "@sparkle/lottie/spinnerLightXS";
+
+export interface SpinnerProps {
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+  variant?: "color" | "light" | "dark" | "pink900" | "purple900";
+}
+
+const pxSizeClasses = {
+  xs: "16",
+  sm: "20",
+  md: "24",
+  lg: "32",
+  xl: "128",
+  xxl: "192",
+};
+
+type LottieColorType = [number, number, number, number];
+
+const colors: { [key: string]: LottieColorType } = {
+  emerald900: [0.0235, 0.3059, 0.2314, 1], // #064E3B
+  amber900: [0.5725, 0.251, 0.0549, 1], // #92400E
+  slate900: [0.0588, 0.0902, 0.1647, 1], // #0F172A
+  purple900: [0.298, 0.1137, 0.5843, 1], // #4C1D95
+  sky900: [0.0471, 0.2902, 0.4314, 1], // #0C4A6E
+  pink900: [0.5137, 0.0941, 0.2627, 1], // #831843
+  red900: [0.498, 0.1137, 0.1137, 1], // #7F1D1D
+  warning900: [0.498, 0.1137, 0.1137, 1], // #7F1D1D
+  action900: [0.1176, 0.2275, 0.5412, 1], // #1E3A8A
+};
+
+const isColorArray = (arr: unknown): arr is LottieColorType => {
+  return (
+    Array.isArray(arr) &&
+    arr.length === 4 &&
+    arr.every((n) => typeof n === "number")
+  );
+};
+
+// Due to the dynamic nature of Lottie, we use 'any' for the input object.
+// This function recursively replaces color arrays within the Lottie animation object.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const replaceColors = (obj: any, newColor: LottieColorType): any => {
+  if (Array.isArray(obj)) {
+    return obj.map((item) => replaceColors(item, newColor));
+  } else if (obj !== null && typeof obj === "object") {
+    for (const key in obj) {
+      if (isColorArray(obj[key])) {
+        obj[key] = newColor;
+      } else {
+        obj[key] = replaceColors(obj[key], newColor);
+      }
+    }
+  }
+  return obj;
+};
+
+const Spinner: React.FC<SpinnerProps> = ({
+  size = "md",
+  variant = "color",
+}) => {
+  const fullSize = parseInt(pxSizeClasses[size], 10);
+
+  let anim;
+
+  switch (size) {
+    case "xs":
+      switch (variant) {
+        case "light":
+          anim = animSimpleLight;
+          break;
+
+        case "dark":
+          anim = animDarkXS;
+          break;
+
+        default:
+          anim = animColorXS;
+      }
+      break;
+
+    case "xl":
+    case "xxl":
+      switch (variant) {
+        case "light":
+          anim = animLightLG;
+          break;
+
+        case "dark":
+          anim = animDarkLG;
+          break;
+
+        default:
+          anim = animColorLG;
+      }
+      break;
+
+    default:
+      switch (variant) {
+        case "light":
+          anim = animLightXS;
+          break;
+
+        case "dark":
+          anim = animDark;
+          break;
+
+        default:
+          anim = animColor;
+      }
+  }
+
+  if (variant && variant in colors) {
+    // Clone the animation data to modify it
+    const animationData = JSON.parse(JSON.stringify(anim));
+    const newColor = colors[variant];
+
+    if (newColor) {
+      replaceColors(animationData, newColor);
+    }
+
+    return (
+      <Lottie
+        animationData={animationData}
+        style={{ width: `${fullSize}px`, height: `${fullSize}px` }}
+        loop
+        autoplay
+      />
+    );
+  }
+
+  return (
+    <Lottie
+      animationData={anim}
+      style={{ width: `${fullSize}px`, height: `${fullSize}px` }}
+      loop
+      autoplay
+    />
+  );
+};
+
+export default Spinner;