Convert from JSX to TSX

2025-12-10 22:14:17 -07:00
parent 1ad6bc85b4
commit f6a0673082
68 changed files with 1527 additions and 635 deletions
@@ -0,0 +1,221 @@
+import React, { memo, useCallback, useId, forwardRef } from "react";
+
+interface ToggleProps
+  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
+  label?: string;
+  checked?: boolean;
+  onChange?: (
+    e:
+      | React.MouseEvent<HTMLButtonElement>
+      | React.KeyboardEvent<HTMLButtonElement>
+  ) => void;
+  onFocus?: (e: React.FocusEvent<HTMLButtonElement>) => void;
+  onBlur?: (e: React.FocusEvent<HTMLButtonElement>) => void;
+  disabled?: boolean;
+  state?: "default" | "hover" | "focus";
+  showIcon?: boolean;
+  showText?: boolean;
+  icon?: string;
+  text?: string;
+  className?: string;
+}
+
+const Toggle = forwardRef<HTMLButtonElement, ToggleProps>(
+  (
+    {
+      label,
+      checked = false,
+      onChange,
+      onFocus,
+      onBlur,
+      disabled = false,
+      state = "default",
+      showIcon = false,
+      showText = false,
+      icon = "I",
+      text = "Toggle",
+      className = "",
+      ...props
+    },
+    ref
+  ) => {
+    const toggleId = useId();
+    const labelId = useId();
+
+    // Size styles - single size with specific dimensions
+    const sizeStyles = {
+      toggle: "h-[var(--measures-sizing-032)] px-[16px] py-[8px] gap-[4px]",
+      label: "text-[12px] leading-[16px]",
+    };
+
+    // State styles
+    const getStateStyles = (): {
+      toggle: string;
+      label: string;
+    } => {
+      if (disabled) {
+        return {
+          toggle:
+            "bg-[var(--color-surface-default-tertiary)] text-[var(--color-content-default-tertiary)] cursor-not-allowed",
+          label: "text-[var(--color-content-default-secondary)]",
+        };
+      }
+
+      if (checked) {
+        switch (state) {
+          case "hover":
+            return {
+              toggle:
+                "bg-[var(--color-surface-default-secondary)] text-[var(--color-content-default-primary)]",
+              label: "text-[var(--color-content-default-secondary)]",
+            };
+          case "focus":
+            return {
+              toggle:
+                "bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] shadow-[0_0_5px_1px_#3281F8]",
+              label: "text-[var(--color-content-default-secondary)]",
+            };
+          default:
+            return {
+              toggle:
+                "bg-[var(--color-magenta-magenta100)] text-[var(--color-content-default-primary)] shadow-[0_0_0_1px_var(--color-border-default-brand-primary)]",
+              label: "text-[var(--color-content-default-secondary)]",
+            };
+        }
+      } else {
+        switch (state) {
+          case "hover":
+            return {
+              toggle:
+                "bg-[var(--color-surface-default-secondary)] text-[var(--color-content-default-primary)]",
+              label: "text-[var(--color-content-default-secondary)]",
+            };
+          case "focus":
+            return {
+              toggle:
+                "bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] shadow-[0_0_5px_1px_#3281F8]",
+              label: "text-[var(--color-content-default-secondary)]",
+            };
+          default:
+            return {
+              toggle:
+                "bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)]",
+              label: "text-[var(--color-content-default-secondary)]",
+            };
+        }
+      }
+    };
+
+    const stateStyles = getStateStyles();
+    const currentSize = sizeStyles;
+
+    // Container classes
+    const containerClasses = "flex flex-col gap-[4px]";
+
+    const labelClasses = `${currentSize.label} font-inter font-medium`;
+
+    const toggleClasses = `
+      ${currentSize.toggle}
+      ${stateStyles.toggle}
+      rounded-full
+      font-inter
+      font-normal
+      text-[12px]
+      leading-[16px]
+      cursor-pointer
+      transition-all
+      duration-200
+      focus:outline-none
+      focus-visible:shadow-[0_0_5px_1px_#3281F8]
+      ${!checked ? "hover:!bg-[var(--color-surface-default-secondary)]" : ""}
+      flex
+      items-center
+      justify-center
+      gap-[4px]
+      ${className}
+    `
+      .trim()
+      .replace(/\s+/g, " ");
+
+    const handleChange = useCallback(
+      (
+        e:
+          | React.MouseEvent<HTMLButtonElement>
+          | React.KeyboardEvent<HTMLButtonElement>
+      ) => {
+        if (!disabled && onChange) {
+          onChange(e);
+        }
+      },
+      [disabled, onChange]
+    );
+
+    const handleFocus = useCallback(
+      (e: React.FocusEvent<HTMLButtonElement>) => {
+        if (!disabled && onFocus) {
+          onFocus(e);
+        }
+      },
+      [disabled, onFocus]
+    );
+
+    const handleBlur = useCallback(
+      (e: React.FocusEvent<HTMLButtonElement>) => {
+        if (!disabled && onBlur) {
+          onBlur(e);
+        }
+      },
+      [disabled, onBlur]
+    );
+
+    const handleKeyDown = useCallback(
+      (e: React.KeyboardEvent<HTMLButtonElement>) => {
+        if (!disabled && (e.key === "Enter" || e.key === " ")) {
+          e.preventDefault();
+          if (onChange) {
+            onChange(e);
+          }
+        }
+      },
+      [disabled, onChange]
+    );
+
+    return (
+      <div className={containerClasses}>
+        {label && (
+          <label
+            id={labelId}
+            htmlFor={toggleId}
+            className={`${labelClasses} text-[var(--color-content-default-secondary)]`}
+          >
+            {label}
+          </label>
+        )}
+        <div className={disabled ? "opacity-40" : ""}>
+          <button
+            ref={ref}
+            id={toggleId}
+            type="button"
+            role="switch"
+            aria-checked={checked}
+            aria-labelledby={label ? labelId : undefined}
+            disabled={disabled}
+            onClick={handleChange}
+            onKeyDown={handleKeyDown}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            className={toggleClasses}
+            {...props}
+          >
+            {showIcon && <span className="italic">{icon}</span>}
+            {showText && <span>{text}</span>}
+          </button>
+        </div>
+      </div>
+    );
+  }
+);
+
+Toggle.displayName = "Toggle";
+
+export default memo(Toggle);