first

src/components/ui/buttons/toggle.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+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'];
+}
+
+const variantMap = {
+  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];
+
+  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;