Start organizational migration

2026-02-05 18:21:56 -07:00
parent 69074b23f3
commit db3c0274f6
161 changed files with 145 additions and 145 deletions
@@ -0,0 +1,147 @@
+"use client";
+
+import { memo, useCallback, useId, forwardRef } from "react";
+import { ToggleGroupView } from "./ToggleGroup.view";
+import type { ToggleGroupProps } from "./ToggleGroup.types";
+import { normalizeToggleState, normalizeToggleGroupPosition } from "../../../../lib/propNormalization";
+
+const ToggleGroupContainer = memo(
+  forwardRef<HTMLButtonElement, ToggleGroupProps>((props, _ref) => {
+    const {
+      children,
+      className = "",
+      position: positionProp = "left",
+      state: stateProp = "default",
+      showText = true,
+      ariaLabel,
+      onChange,
+      onFocus,
+      onBlur,
+      ...rest
+    } = props;
+    
+    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
+    const position = normalizeToggleGroupPosition(positionProp);
+    const state = normalizeToggleState(stateProp);
+
+    const groupId = useId();
+
+    // Position-based styling for border radius
+    const getPositionStyles = useCallback((pos: string): string => {
+      switch (pos) {
+        case "left":
+          return "rounded-l-[var(--measures-radius-medium)] rounded-r-none";
+        case "middle":
+          return "rounded-none";
+        case "right":
+          return "rounded-r-[var(--measures-radius-medium)] rounded-l-none";
+        default:
+          return "rounded-[var(--measures-radius-medium)]";
+      }
+    }, []);
+
+    // State-based styling
+    const getStateStyles = useCallback((state: string): string => {
+      switch (state) {
+        case "hover":
+          return "bg-[var(--color-magenta-magenta100)] text-[var(--color-content-default-primary)]";
+        case "focus":
+          return "bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] shadow-[0_0_5px_1px_#3281F8]";
+        case "selected":
+          return "bg-[var(--color-magenta-magenta100)] text-[var(--color-content-default-primary)] shadow-[inset_0_0_0_1px_var(--color-border-default-secondary)]";
+        case "default":
+        default:
+          return "bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)]";
+      }
+    }, []);
+
+    const positionStyles = getPositionStyles(position);
+    const stateStyles = getStateStyles(state);
+
+    const handleClick = useCallback(
+      (e: React.MouseEvent<HTMLButtonElement>) => {
+        if (onChange) {
+          onChange(e);
+        }
+      },
+      [onChange],
+    );
+
+    const handleFocus = useCallback(
+      (e: React.FocusEvent<HTMLButtonElement>) => {
+        if (onFocus) {
+          onFocus(e);
+        }
+      },
+      [onFocus],
+    );
+
+    const handleBlur = useCallback(
+      (e: React.FocusEvent<HTMLButtonElement>) => {
+        if (onBlur) {
+          onBlur(e);
+        }
+      },
+      [onBlur],
+    );
+
+    const handleKeyDown = useCallback(
+      (e: React.KeyboardEvent<HTMLButtonElement>) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          if (onChange) {
+            onChange(e);
+          }
+        }
+      },
+      [onChange],
+    );
+
+    const toggleClasses = `
+      ${positionStyles}
+      ${stateStyles}
+      py-[var(--measures-spacing-008)]
+      px-[var(--measures-spacing-008)]
+      gap-[var(--measures-spacing-008)]
+      font-inter
+      font-medium
+      text-[12px]
+      leading-[12px]
+      cursor-pointer
+      transition-all
+      duration-200
+      focus:outline-none
+      focus-visible:shadow-[0_0_5px_1px_#3281F8]
+      hover:bg-[var(--color-magenta-magenta100)]
+      flex
+      items-center
+      justify-center
+      ${className}
+    `
+      .trim()
+      .replace(/\s+/g, " ");
+
+    return (
+      <ToggleGroupView
+        groupId={groupId}
+        className={className}
+        position={position}
+        state={state}
+        showText={showText}
+        ariaLabel={ariaLabel}
+        toggleClasses={toggleClasses}
+        onClick={handleClick}
+        onKeyDown={handleKeyDown}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        {...rest}
+      >
+        {children}
+      </ToggleGroupView>
+    );
+  }),
+);
+
+ToggleGroupContainer.displayName = "ToggleGroup";
+
+export default ToggleGroupContainer;
@@ -0,0 +1,45 @@
+import type { StateValue } from "../../../../lib/propNormalization";
+
+export type ToggleGroupPositionValue = "left" | "middle" | "right" | "Left" | "Middle" | "Right";
+
+export interface ToggleGroupProps extends Omit<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  "onChange"
+> {
+  children?: React.ReactNode;
+  className?: string;
+  /**
+   * Toggle group position. Accepts both lowercase and PascalCase (case-insensitive).
+   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   */
+  position?: ToggleGroupPositionValue;
+  /**
+   * Visual state. Accepts "default"/"Default", "hover"/"Hover", "focus"/"Focus", "selected"/"Selected" (case-insensitive).
+   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   */
+  state?: StateValue | "selected" | "Selected";
+  showText?: boolean;
+  ariaLabel?: string;
+  onChange?: (
+    _e:
+      | React.MouseEvent<HTMLButtonElement>
+      | React.KeyboardEvent<HTMLButtonElement>,
+  ) => void;
+  onFocus?: (_e: React.FocusEvent<HTMLButtonElement>) => void;
+  onBlur?: (_e: React.FocusEvent<HTMLButtonElement>) => void;
+}
+
+export interface ToggleGroupViewProps {
+  groupId: string;
+  children?: React.ReactNode;
+  className: string;
+  position: "left" | "middle" | "right";
+  state: "default" | "hover" | "focus" | "selected";
+  showText: boolean;
+  ariaLabel?: string;
+  toggleClasses: string;
+  onClick: (_e: React.MouseEvent<HTMLButtonElement>) => void;
+  onKeyDown: (_e: React.KeyboardEvent<HTMLButtonElement>) => void;
+  onFocus: (_e: React.FocusEvent<HTMLButtonElement>) => void;
+  onBlur: (_e: React.FocusEvent<HTMLButtonElement>) => void;
+}
@@ -0,0 +1,34 @@
+import type { ToggleGroupViewProps } from "./ToggleGroup.types";
+
+export function ToggleGroupView({
+  groupId,
+  children,
+  className: _className,
+  position: _position,
+  state: _state,
+  showText,
+  ariaLabel,
+  toggleClasses,
+  onClick,
+  onKeyDown,
+  onFocus,
+  onBlur,
+  ...rest
+}: ToggleGroupViewProps) {
+  return (
+    <button
+      id={groupId}
+      type="button"
+      role="button"
+      aria-label={ariaLabel || (showText ? undefined : "Toggle option")}
+      onClick={onClick}
+      onKeyDown={onKeyDown}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      className={toggleClasses}
+      {...rest}
+    >
+      {showText ? children : children || "☰"}
+    </button>
+  );
+}
@@ -0,0 +1,2 @@
+export { default } from "./ToggleGroup.container";
+export type { ToggleGroupProps } from "./ToggleGroup.types";