gg

src/components/ui/buttons/toggle.tsx

@@ -1,44 +1,57 @@
-'use client';
+"use client";
 
-import type { ButtonProps } from '@chakra-ui/react';
-import { Button, Toggle as ChakraToggle, useToggleContext } from '@chakra-ui/react';
-import * as React from 'react';
+import type { ButtonProps } from "@chakra-ui/react";
+import {
+  Button,
+  Toggle as ChakraToggle,
+  useToggleContext,
+} from "@chakra-ui/react";
+import * as React from "react";
 
 interface ToggleProps extends ChakraToggle.RootProps {
   variant?: keyof typeof variantMap;
-  size?: ButtonProps['size'];
+  size?: ButtonProps["size"];
 }
 
 const variantMap = {
-  solid: { on: 'solid', off: 'outline' },
-  surface: { on: 'surface', off: 'outline' },
-  subtle: { on: 'subtle', off: 'ghost' },
-  ghost: { on: 'subtle', off: 'ghost' },
+  solid: { on: "solid", off: "outline" },
+  surface: { on: "surface", off: "outline" },
+  subtle: { on: "subtle", off: "ghost" },
+  ghost: { on: "subtle", off: "ghost" },
 } as const;
 
-export const Toggle = React.forwardRef<HTMLButtonElement, ToggleProps>(function Toggle(props, ref) {
-  const { variant = 'subtle', size, children, ...rest } = props;
-  const variantConfig = variantMap[variant];
+export const Toggle = React.forwardRef<HTMLButtonElement, ToggleProps>(
+  function Toggle(props, ref) {
+    const { variant = "subtle", size, children, ...rest } = props;
+    const variantConfig = variantMap[variant];
 
-  return (
-    <ChakraToggle.Root asChild {...rest}>
-      <ToggleBaseButton size={size} variant={variantConfig} ref={ref}>
-        {children}
-      </ToggleBaseButton>
-    </ChakraToggle.Root>
-  );
-});
-
-interface ToggleBaseButtonProps extends Omit<ButtonProps, 'variant'> {
-  variant: Record<'on' | 'off', ButtonProps['variant']>;
-}
-
-const ToggleBaseButton = React.forwardRef<HTMLButtonElement, ToggleBaseButtonProps>(
-  function ToggleBaseButton(props, ref) {
-    const toggle = useToggleContext();
-    const { variant, ...rest } = props;
-    return <Button variant={toggle.pressed ? variant.on : variant.off} ref={ref} {...rest} />;
+    return (
+      <ChakraToggle.Root asChild {...rest}>
+        <ToggleBaseButton size={size} variant={variantConfig} ref={ref}>
+          {children}
+        </ToggleBaseButton>
+      </ChakraToggle.Root>
+    );
   },
 );
 
+interface ToggleBaseButtonProps extends Omit<ButtonProps, "variant"> {
+  variant: Record<"on" | "off", ButtonProps["variant"]>;
+}
+
+const ToggleBaseButton = React.forwardRef<
+  HTMLButtonElement,
+  ToggleBaseButtonProps
+>(function ToggleBaseButton(props, ref) {
+  const toggle = useToggleContext();
+  const { variant, ...rest } = props;
+  return (
+    <Button
+      variant={toggle.pressed ? variant.on : variant.off}
+      ref={ref}
+      {...rest}
+    />
+  );
+});
+
 export const ToggleIndicator = ChakraToggle.Indicator;