Finish migrating components

2026-01-29 17:59:11 -07:00
parent b5735bb2ad
commit 539f6c62e3
79 changed files with 2449 additions and 1730 deletions
@@ -0,0 +1,63 @@
+import { forwardRef } from "react";
+import type { ToggleViewProps } from "./Toggle.types";
+
+export const ToggleView = forwardRef<HTMLButtonElement, ToggleViewProps>(
+  (
+    {
+      toggleId,
+      labelId,
+      checked,
+      disabled,
+      label,
+      showIcon,
+      showText,
+      icon,
+      text,
+      containerClasses,
+      labelClasses,
+      toggleClasses,
+      onClick,
+      onKeyDown,
+      onFocus,
+      onBlur,
+      ...rest
+    },
+    ref,
+  ) => {
+    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={onClick}
+            onKeyDown={onKeyDown}
+            onFocus={onFocus}
+            onBlur={onBlur}
+            className={toggleClasses}
+            {...rest}
+          >
+            {showIcon && <span className="italic">{icon}</span>}
+            {showText && <span>{text}</span>}
+          </button>
+        </div>
+      </div>
+    );
+  },
+);
+
+ToggleView.displayName = "ToggleView";