@dust-tt/sparkle 0.2.183 → 0.2.184

package/src/components/Hover3D.tsx

@@ -0,0 +1,159 @@
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+
+// Context to share hover state
+const Hover3DContext = createContext<{
+  isHovered: boolean;
+  setHovered?: (state: boolean) => void;
+}>({ isHovered: false });
+
+// Custom hook to use the context
+export const useHover3D = () => useContext(Hover3DContext);
+
+interface Hover3DProps {
+  children: React.ReactNode;
+  xOffset?: number;
+  yOffset?: number;
+  attack?: number;
+  release?: number;
+  perspective?: number;
+  className?: string;
+  depth?: number;
+  range?: number;
+  fullscreenSensible?: boolean;
+  reference?: "screen" | "object";
+}
+
+function Hover3D({
+  children,
+  xOffset = 10,
+  yOffset = 10,
+  attack = 0.1,
+  release = 0.5,
+  perspective = 500,
+  depth = -10,
+  className = "",
+  range = 3,
+  fullscreenSensible = false,
+  reference = "object",
+}: Hover3DProps) {
+  const elementRef = useRef<HTMLDivElement>(null);
+  const [isHovered, setHovered] = useState(fullscreenSensible);
+  const [transform, setTransform] = useState(
+    `perspective(${perspective}px) translateZ(${
+      fullscreenSensible ? depth : 0
+    }px)`
+  );
+  const [transition, setTransition] = useState("");
+  const clamp = (value: number, min: number, max: number) => {
+    return Math.min(Math.max(value, min), max);
+  };
+  const map = (
+    value: number,
+    istart: number,
+    istop: number,
+    ostart: number,
+    ostop: number
+  ) => {
+    return ostart + (ostop - ostart) * ((value - istart) / (istop - istart));
+  };
+
+  useEffect(() => {
+    const element = elementRef.current;
+
+    const handleMouseEnter = () => {
+      setTransition(`transform ${attack}s`);
+      setHovered(true);
+    };
+
+    const handleMouseMove = (e: MouseEvent) => {
+      if (element) {
+        const rect =
+          reference === "object"
+            ? element.getBoundingClientRect()
+            : document.body.getBoundingClientRect();
+        const dx = e.clientX - rect.left;
+        const dy = e.clientY - rect.top;
+
+        const xRot = clamp(
+          map(dx, 0, rect.width, -xOffset, xOffset),
+          -xOffset,
+          xOffset
+        );
+        const yRot = clamp(
+          map(dy, 0, rect.height, yOffset, -yOffset),
+          -range * yOffset,
+          range * yOffset
+        );
+
+        setTransform(
+          `perspective(${perspective}px) rotateX(${yRot}deg) rotateY(${xRot}deg) translateZ(${depth}px)`
+        );
+      }
+    };
+    if (fullscreenSensible) {
+      window.addEventListener("mousemove", handleMouseMove);
+    } else {
+      const handleMouseLeave = () => {
+        setTransition(`transform ${release}s`);
+        setTransform(
+          `perspective(${perspective}px) rotateX(0deg) rotateY(0deg)`
+        );
+        setHovered(false);
+      };
+
+      element?.addEventListener("mouseenter", handleMouseEnter);
+      element?.addEventListener("mousemove", handleMouseMove);
+      element?.addEventListener("mouseleave", handleMouseLeave);
+
+      return () => {
+        element?.removeEventListener("mouseenter", handleMouseEnter);
+        element?.removeEventListener("mousemove", handleMouseMove);
+        element?.removeEventListener("mouseleave", handleMouseLeave);
+      };
+    }
+  }, [attack, release, perspective, xOffset, yOffset]);
+
+  return (
+    <Hover3DContext.Provider value={{ isHovered, setHovered }}>
+      <div
+        ref={elementRef}
+        style={{
+          transform: transform,
+          transition: transition,
+          transformStyle: "preserve-3d",
+        }}
+        className={className}
+      >
+        {children}
+      </div>
+    </Hover3DContext.Provider>
+  );
+}
+
+interface divProps {
+  depth: number;
+  children: React.ReactNode;
+  className?: string;
+}
+
+const Div3D = ({ depth, children, className = "" }: divProps) => {
+  const { isHovered } = useHover3D();
+  const style = {
+    transform: `translateZ(${isHovered ? depth : 0}px)`,
+    transition: "transform 0.5s",
+  };
+
+  return (
+    <div style={style} className={className}>
+      {children}
+    </div>
+  );
+};
+
+export { Div3D, Hover3D };

package/src/components/Hoverable.tsx

@@ -0,0 +1,28 @@
+import React, { SyntheticEvent } from "react";
+import { ReactNode } from "react";
+
+import { classNames } from "@sparkle/lib/utils";
+
+interface HoverableProps {
+  children: ReactNode;
+  className?: string;
+  onClick: (e: SyntheticEvent) => void;
+}
+
+export function Hoverable({
+  children,
+  className = "",
+  onClick,
+}: HoverableProps) {
+  return (
+    <span
+      className={classNames(
+        "s-cursor-pointer s-duration-300 hover:s-text-action-500 active:s-text-action-600",
+        className
+      )}
+      onClick={onClick}
+    >
+      {children}
+    </span>
+  );
+}

package/src/components/Icon.tsx

@@ -0,0 +1,30 @@
+import React, { ComponentType } from "react";
+
+import { classNames } from "@sparkle/lib/utils";
+
+export interface IconProps {
+  visual?: ComponentType<{ className?: string }>;
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+  className?: string;
+}
+
+const IconSizes = {
+  xs: "s-h-4 s-w-4",
+  sm: "s-h-5 s-w-5",
+  md: "s-h-6 s-w-6",
+  lg: "s-h-8 s-w-8",
+  xl: "s-h-12 s-w-12",
+  "2xl": "s-h-20 s-w-20",
+};
+
+export function Icon({
+  visual: IconComponent,
+  size = "sm",
+  className = "",
+}: IconProps) {
+  return IconComponent ? (
+    <IconComponent
+      className={classNames(className, "s-shrink-0", IconSizes[size])}
+    />
+  ) : null;
+}

package/src/components/IconButton.tsx

@@ -0,0 +1,126 @@
+import React, { ComponentType, MouseEventHandler } from "react";
+
+import { classNames } from "@sparkle/lib/utils";
+
+import { Icon, IconProps } from "./Icon";
+import { Tooltip, TooltipProps } from "./Tooltip";
+
+type IconButtonProps = {
+  variant?: "primary" | "warning" | "secondary" | "tertiary" | "white";
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  size?: "xs" | "sm" | "md";
+  tooltip?: string;
+  tooltipPosition?: TooltipProps["position"];
+  icon?: ComponentType;
+  className?: string;
+  disabled?: boolean;
+};
+
+const baseClasses =
+  "s-transition-all s-ease-out s-duration-300 s-cursor-pointer hover:s-scale-110";
+
+const iconClasses = {
+  primary: {
+    base: "s-text-action-500",
+    hover: "hover:s-text-action-400",
+    active: "active:s-text-action-600",
+    disabled: "s-text-element-500",
+    dark: {
+      base: "dark:s-text-action-500-dark",
+      hover: "dark:hover:s-text-action-500-dark",
+      active: "dark:active:s-text-action-600-dark",
+      disabled: "dark:s-text-element-500-dark",
+    },
+  },
+  warning: {
+    base: "s-text-warning-500",
+    hover: "hover:s-text-warning-400",
+    active: "active:s-text-warning-600",
+    disabled: "s-text-element-500",
+    dark: {
+      base: "dark:s-text-warning-500-dark",
+      hover: "dark:hover:s-text-warning-500-dark",
+      active: "dark:active:s-text-warning-600-dark",
+      disabled: "dark:s-text-element-500-dark",
+    },
+  },
+  secondary: {
+    base: "s-text-element-900",
+    hover: "hover:s-text-action-400",
+    active: "active:s-text-action-600",
+    disabled: "s-text-element-500",
+    dark: {
+      base: "dark:s-text-element-900-dark",
+      hover: "dark:hover:s-text-action-500-dark",
+      active: "dark:active:s-text-action-600-dark",
+      disabled: "dark:s-text-element-500-dark",
+    },
+  },
+  tertiary: {
+    base: "s-text-element-700",
+    hover: "hover:s-text-action-400",
+    active: "active:s-text-action-600",
+    disabled: "s-text-element-500",
+    dark: {
+      base: "dark:s-text-element-700-dark",
+      hover: "dark:hover:s-text-action-500-dark",
+      active: "dark:active:s-text-action-600-dark",
+      disabled: "dark:s-text-element-500-dark",
+    },
+  },
+  white: {
+    base: "s-text-white",
+    hover: "hover:s-text-slate-100",
+    active: "active:s-text-slate-200",
+    disabled: "s-text-white/50",
+    dark: {
+      base: "s-text-white",
+      hover: "hover:s-text-slate-100",
+      active: "active:s-text-slate-200",
+      disabled: "s-text-white/50",
+    },
+  },
+};
+
+export function IconButton({
+  variant = "tertiary",
+  onClick,
+  disabled = false,
+  tooltip,
+  tooltipPosition = "above",
+  icon,
+  className = "",
+  size = "sm",
+}: IconButtonProps) {
+  // Choose the correct group of classes based on 'type'
+  const iconGroup = iconClasses[variant];
+
+  const finalIconClasses = classNames(
+    className,
+    baseClasses,
+    iconGroup.base,
+    disabled ? iconGroup.disabled : iconGroup.hover,
+    disabled ? "" : iconGroup.active,
+    iconGroup.dark.base,
+    disabled ? iconGroup.dark.disabled : iconGroup.dark.hover,
+    disabled ? "" : iconGroup.dark.active
+  );
+
+  const IconButtonContent = (
+    <button
+      className={finalIconClasses}
+      onClick={disabled ? undefined : onClick}
+      disabled={disabled}
+    >
+      {icon && <Icon visual={icon} size={size as IconProps["size"]} />}
+    </button>
+  );
+
+  return tooltip ? (
+    <Tooltip label={tooltip} position={tooltipPosition}>
+      {IconButtonContent}
+    </Tooltip>
+  ) : (
+    IconButtonContent
+  );
+}

package/src/components/IconToggleButton.tsx

@@ -0,0 +1,114 @@
+import React, { ComponentType, MouseEventHandler } from "react";
+
+import { classNames } from "@sparkle/lib/utils";
+
+import { Icon, IconProps } from "./Icon";
+import { Tooltip, TooltipProps } from "./Tooltip";
+
+type IconToggleButtonProps = {
+  variant?: "secondary" | "tertiary";
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  size?: "xs" | "sm" | "md";
+  tooltip?: string;
+  tooltipPosition?: TooltipProps["position"];
+  icon: ComponentType;
+  iconSelected?: ComponentType;
+  className?: string;
+  disabled?: boolean;
+  selected?: boolean;
+};
+
+const baseClasses =
+  "s-transition-all s-ease-out s-duration-300 s-cursor-pointer hover:s-scale-110";
+
+const iconClasses = {
+  secondary: {
+    idle: "s-text-element-900",
+    selected: "s-text-action-500",
+    hover: "hover:s-text-action-400",
+    active: "active:s-text-action-600",
+    disabled: "s-text-element-500",
+    dark: {
+      idle: "dark:s-text-element-900-dark",
+      selected: "dark:s-text-action-500-dark",
+      hover: "dark:hover:s-text-action-500-dark",
+      active: "dark:active:s-text-action-600-dark",
+      disabled: "dark:s-text-element-500-dark",
+    },
+  },
+  tertiary: {
+    idle: "s-text-element-600",
+    selected: "s-text-action-500",
+    hover: "hover:s-text-action-400",
+    active: "active:s-text-action-600",
+    disabled: "s-text-element-500",
+    dark: {
+      idle: "dark:s-text-element-600-dark",
+      selected: "dark:s-text-action-500-dark",
+      hover: "dark:hover:s-text-action-500-dark",
+      active: "dark:active:s-text-action-600-dark",
+      disabled: "dark:s-text-element-500-dark",
+    },
+  },
+};
+
+export function IconToggleButton({
+  variant = "tertiary",
+  onClick,
+  disabled = false,
+  tooltip,
+  tooltipPosition = "above",
+  icon,
+  iconSelected,
+  className = "",
+  selected = false,
+  size = "sm",
+}: IconToggleButtonProps) {
+  const iconGroup = iconClasses[variant];
+  const finalIconClasses = classNames(
+    className,
+    baseClasses,
+    disabled
+      ? iconGroup.disabled
+      : selected
+        ? iconGroup.selected
+        : iconGroup.idle,
+    disabled ? "" : selected ? "" : iconGroup.hover,
+    disabled ? "" : iconGroup.active,
+    iconGroup.dark.idle,
+    disabled
+      ? iconGroup.dark.disabled
+      : selected
+        ? iconGroup.dark.selected
+        : "",
+    disabled ? "" : selected ? "" : iconGroup.dark.hover,
+    disabled ? "" : iconGroup.dark.active
+  );
+
+  const IconButtonToggleContent = (
+    <button
+      className={finalIconClasses}
+      onClick={(e) => {
+        if (!disabled) {
+          onClick?.(e); // Run passed onClick event
+        }
+      }}
+      disabled={disabled}
+    >
+      {icon && (
+        <Icon
+          visual={selected && iconSelected ? iconSelected : icon}
+          size={size as IconProps["size"]}
+        />
+      )}
+    </button>
+  );
+
+  return tooltip ? (
+    <Tooltip label={tooltip} position={tooltipPosition}>
+      {IconButtonToggleContent}
+    </Tooltip>
+  ) : (
+    IconButtonToggleContent
+  );
+}

package/src/components/Input.tsx

@@ -0,0 +1,81 @@
+import React from "react";
+
+import { classNames } from "@sparkle/lib/utils";
+
+type InputProps = {
+  placeholder: string;
+  size?: "sm" | "md";
+  value: string | null;
+  onChange?: (value: string) => void;
+  error?: string | null;
+  showErrorLabel?: boolean;
+  name: string;
+  isPassword?: boolean;
+  disabled?: boolean;
+  className?: string;
+  label?: string;
+};
+
+const sizeInputClasses = {
+  sm: "s-text-base s-rounded-md s-py-1.5 s-pl-4 s-pr-8",
+  md: "s-text-lg s-rounded-lg s-py-2 s-pl-4 s-pr-10",
+};
+
+export function Input({
+  placeholder,
+  value,
+  size = "sm",
+  onChange,
+  error,
+  showErrorLabel = false,
+  name,
+  isPassword = false,
+  disabled = false,
+  className = "",
+  label,
+}: InputProps) {
+  return (
+    <div className="s-flex s-flex-col s-gap-1 s-p-px">
+      {label && (
+        <label
+          htmlFor={name}
+          className="s-pb-1 s-text-sm s-font-medium s-text-element-700 dark:s-text-element-700-dark"
+        >
+          {label}
+        </label>
+      )}
+      <input
+        type={isPassword ? "password" : "text"}
+        name={name}
+        id={name}
+        className={classNames(
+          "s-w-full s-border-0 s-outline-none s-ring-1 focus:s-outline-none focus:s-ring-2",
+          "s-bg-structure-50 s-text-element-900 s-placeholder-element-600",
+          "dark:s-bg-structure-50-dark dark:s-text-element-800-dark dark:s-placeholder-element-600-dark",
+          sizeInputClasses[size],
+          "s-transition-all s-duration-300 s-ease-out",
+          className ?? "",
+          !error
+            ? classNames(
+                "s-ring-structure-200 focus:s-ring-action-300",
+                "dark:s-ring-structure-300-dark dark:focus:s-ring-action-300-dark"
+              )
+            : classNames(
+                "s-ring-warning-200 focus:s-ring-warning-300",
+                "dark:s-ring-warning-200-dark dark:focus:s-ring-warning-300-dark"
+              )
+        )}
+        placeholder={placeholder}
+        value={value ?? ""}
+        onChange={(e) => {
+          onChange?.(e.target.value);
+        }}
+        data-1p-ignore={!isPassword}
+        disabled={disabled}
+      />
+      <div className="s-ml-2 s-text-sm s-text-warning-500">
+        {showErrorLabel && error ? error : null}
+      </div>
+    </div>
+  );
+}