@womp/kookie-ui 0.20.0 → 0.22.0

package/src/components/theme-panel.tsx

@@ -1,549 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { useCallbackRef } from 'radix-ui/internal';
-import { flushSync } from 'react-dom';
-
-import { Box } from './box.js';
-import { Button } from './button.js';
-import { Flex } from './flex.js';
-import { Grid } from './grid.js';
-import { Heading } from './heading.js';
-import { Kbd } from './kbd.js';
-import { ScrollArea } from './scroll-area.js';
-import { Text } from './text.js';
-import { Tooltip } from './tooltip.js';
-import { Theme, useThemeContext, type ThemeContextValue } from './theme.js';
-import { inert } from '../helpers/inert.js';
-import { getMatchingGrayColor } from '../helpers/get-matching-gray-color.js';
-import { themePropDefs } from './theme.props.js';
-
-import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
-import type { GetPropDefTypes } from '../props/prop-def.js';
-
-interface ThemePanelProps extends Omit<ThemePanelImplProps, keyof ThemePanelImplPrivateProps> {
-  onAppearanceChange?: (value: 'light' | 'dark') => void;
-  defaultOpen?: boolean;
-}
-
-const keyboardInputElement = `
-      [contenteditable],
-      [role="combobox"],
-      [role="listbox"],
-      [role="menu"],
-      input:not([type="radio"], [type="checkbox"]),
-      select,
-      textarea
-    `;
-
-const ThemePanel = React.forwardRef<ThemePanelImplElement, ThemePanelProps>(
-  ({ defaultOpen = true, ...props }, forwardedRef) => {
-    const [open, setOpen] = React.useState(defaultOpen);
-    const triggerRef = React.useRef<HTMLButtonElement>(null);
-    const previouslyFocusedElementRef = React.useRef<HTMLElement | null>(null);
-
-    // quickly show/hide using "T" keypress
-    React.useEffect(() => {
-      function handleKeydown(event: KeyboardEvent) {
-        const isModifierActive = event.altKey || event.ctrlKey || event.shiftKey || event.metaKey;
-        const isKeyboardInputActive = document.activeElement?.closest(keyboardInputElement);
-        const isKeyT = event.key?.toUpperCase() === 'T' && !isModifierActive;
-        if (isKeyT && !isKeyboardInputActive) {
-          let isOpen = false;
-          flushSync(() => {
-            setOpen((open) => {
-              isOpen = !open;
-              return isOpen;
-            });
-          });
-          if (isOpen) {
-            previouslyFocusedElementRef.current = document.activeElement as HTMLElement | null;
-            triggerRef.current?.focus();
-          } else {
-            previouslyFocusedElementRef.current?.focus();
-          }
-        }
-      }
-      document.addEventListener('keydown', handleKeydown);
-      return () => document.removeEventListener('keydown', handleKeydown);
-    }, []);
-
-    return (
-      <ThemePanelImpl
-        {...props}
-        ref={forwardedRef}
-        triggerRef={triggerRef}
-        open={open}
-        shortcut={
-          <Tooltip content="Press T to show/hide the Theme Panel" side="bottom" sideOffset={6}>
-            <Kbd asChild size="3" tabIndex={0} className="rt-ThemePanelShortcut">
-              <button
-                type="button"
-                onClick={() => setOpen((open) => !open)}
-                ref={triggerRef}
-                aria-label="Toggle the Theme Panel"
-              >
-                T
-              </button>
-            </Kbd>
-          </Tooltip>
-        }
-      />
-    );
-  },
-);
-ThemePanel.displayName = 'ThemePanel';
-
-type ThemePanelImplElement = React.ElementRef<'div'>;
-interface ThemePanelImplPrivateProps {
-  open: boolean;
-  shortcut: React.ReactNode;
-  triggerRef: React.RefObject<HTMLButtonElement | null>;
-}
-interface ThemePanelImplProps
-  extends ComponentPropsWithout<'div', RemovedProps>, ThemePanelImplPrivateProps {
-  onAppearanceChange?: (value: 'light' | 'dark') => void;
-}
-const ThemePanelImpl = React.forwardRef<ThemePanelImplElement, ThemePanelImplProps>(
-  (props, forwardedRef) => {
-    const { open, onAppearanceChange, shortcut, triggerRef, ...panelProps } = props;
-    const themeContext = useThemeContext();
-    return (
-      <Theme asChild radius="medium">
-        <Flex
-          direction="column"
-          position="fixed"
-          top="0"
-          right="0"
-          mr={{ initial: '3', sm: '5' }}
-          mt={{ initial: '3', sm: '5' }}
-          width={{ initial: '360px' }}
-          maxHeight={{
-            initial: 'calc(100svh - var(--space-3) - var(--space-3))',
-            sm: 'calc(100svh - var(--space-5) - var(--space-5))',
-          }}
-          maxWidth={{
-            initial: 'calc(100svw - var(--space-3) - var(--space-3))',
-            sm: 'calc(100svw - var(--space-5) - var(--space-5))',
-          }}
-          inert={open ? undefined : inert}
-          {...panelProps}
-          ref={forwardedRef}
-          style={{
-            zIndex: 999999999,
-            overflow: 'hidden',
-            borderRadius: 'var(--radius-4)',
-            backgroundColor: 'var(--color-panel-solid)',
-            transformOrigin: 'top center',
-            transform: open ? 'none' : 'translateX(105%)',
-            boxShadow: open ? 'var(--shadow-5)' : 'var(--shadow-2)',
-            ...props.style,
-          }}
-        >
-          <ScrollArea>
-            <Box flexGrow="1" p={{ initial: '5', xs: '6' }} position="relative">
-              {!!shortcut && (
-                <Box position="absolute" top="0" right="0" m="3">
-                  {shortcut}
-                </Box>
-              )}
-              <ThemePanelContent onAppearanceChange={onAppearanceChange} context={themeContext} />
-            </Box>
-          </ScrollArea>
-        </Flex>
-      </Theme>
-    );
-  },
-);
-ThemePanelImpl.displayName = 'ThemePanelImpl';
-
-type ThemePanelContentElement = React.ElementRef<typeof Flex>;
-interface ThemePanelContentProps extends ComponentPropsWithout<
-  typeof Flex,
-  RemovedProps | 'direction'
-> {
-  onAppearanceChange?: (value: 'light' | 'dark') => void;
-  context?: ThemeContextValue;
-}
-const ThemePanelContent = React.forwardRef<ThemePanelContentElement, ThemePanelContentProps>(
-  (props, forwardedRef) => {
-    const {
-      onAppearanceChange: onAppearanceChangeProp,
-      context: contextProp,
-      ...contentProps
-    } = props;
-
-    const themeContext = useThemeContext();
-
-    const {
-      appearance,
-      onAppearanceChange,
-      accentColor,
-      onAccentColorChange,
-      grayColor,
-      onGrayColorChange,
-      radius,
-      onRadiusChange,
-    } = contextProp ?? themeContext;
-
-    const [resolvedAppearance, setResolvedAppearance] = React.useState<'light' | 'dark' | null>(
-      appearance === 'inherit' ? null : appearance,
-    );
-    const hasOnAppearanceChangeProp = onAppearanceChangeProp !== undefined;
-    const handleAppearanceChangeProp = useCallbackRef(onAppearanceChangeProp);
-    const handleAppearanceChange = React.useCallback(
-      (value: 'light' | 'dark') => {
-        const cleanup = disableAnimation();
-
-        if (appearance !== 'inherit') {
-          onAppearanceChange(value);
-          return;
-        }
-
-        if (hasOnAppearanceChangeProp) {
-          handleAppearanceChangeProp(value);
-        } else {
-          setResolvedAppearance(value);
-          updateRootAppearanceClass(value);
-        }
-
-        cleanup();
-      },
-      [appearance, onAppearanceChange, hasOnAppearanceChangeProp, handleAppearanceChangeProp],
-    );
-
-    const autoMatchedGray = getMatchingGrayColor(accentColor);
-    const resolvedGrayColor = grayColor === 'auto' ? autoMatchedGray : grayColor;
-
-    const [copyState, setCopyState] = React.useState<'idle' | 'copying' | 'copied'>('idle');
-    async function handleCopyThemeConfig() {
-      const theme = {
-        appearance: appearance === themePropDefs.appearance.default ? undefined : appearance,
-        accentColor: accentColor === themePropDefs.accentColor.default ? undefined : accentColor,
-        grayColor: grayColor === themePropDefs.grayColor.default ? undefined : grayColor,
-        radius: radius === themePropDefs.radius.default ? undefined : radius,
-      } satisfies GetPropDefTypes<typeof themePropDefs>;
-
-      const props = Object.keys(theme)
-        .filter((key) => theme[key as keyof typeof theme] !== undefined)
-        .map((key) => `${key}="${theme[key as keyof typeof theme]}"`)
-        .join(' ');
-
-      const textToCopy = props ? `<Theme ${props}>` : '<Theme>';
-
-      setCopyState('copying');
-      await navigator.clipboard.writeText(textToCopy);
-      setCopyState('copied');
-      setTimeout(() => setCopyState('idle'), 2000);
-    }
-
-    // quickly toggle appearance using "D" keypress
-    React.useEffect(() => {
-      function handleKeydown(event: KeyboardEvent) {
-        const isModifierActive = event.altKey || event.ctrlKey || event.shiftKey || event.metaKey;
-        const isKeyboardInputActive = document.activeElement?.closest(keyboardInputElement);
-        const isKeyD = event.key?.toUpperCase() === 'D' && !isModifierActive;
-        if (isKeyD && !isKeyboardInputActive) {
-          handleAppearanceChange(resolvedAppearance === 'light' ? 'dark' : 'light');
-        }
-      }
-      document.addEventListener('keydown', handleKeydown);
-      return () => document.removeEventListener('keydown', handleKeydown);
-    }, [handleAppearanceChange, resolvedAppearance]);
-
-    React.useEffect(() => {
-      const root = document.documentElement;
-      const body = document.body;
-
-      function update() {
-        const hasDarkClass =
-          root.classList.contains('dark') ||
-          root.classList.contains('dark-theme') ||
-          body.classList.contains('dark') ||
-          body.classList.contains('dark-theme');
-
-        if (appearance === 'inherit') {
-          setResolvedAppearance(hasDarkClass ? 'dark' : 'light');
-        } else {
-          setResolvedAppearance(appearance);
-        }
-      }
-
-      const classNameObserver = new MutationObserver(function (mutations) {
-        mutations.forEach(function (mutation) {
-          if (mutation.attributeName === 'class') {
-            update();
-          }
-        });
-      });
-
-      update();
-
-      // Observe <html> and <body> for `class` changes only when the appearance is inherited from them
-      if (appearance === 'inherit') {
-        classNameObserver.observe(root, { attributes: true });
-        classNameObserver.observe(body, { attributes: true });
-      }
-
-      return () => classNameObserver.disconnect();
-    }, [appearance]);
-
-    return (
-      <Flex direction="column" gap="6" {...contentProps} ref={forwardedRef}>
-        <Heading size={{ initial: '3', sm: '5' }} trim="both" as="h2">
-          Theme
-        </Heading>
-        <Flex direction="column" gap="6">
-          {/* Accent color */}
-          <ThemePanelSection>
-            <ThemePanelHeading id="accent-color-title">Accent color</ThemePanelHeading>
-            <Flex wrap="wrap" gap="3" role="group" aria-labelledby="accent-color-title">
-              {themePropDefs.accentColor.values.map((color) => (
-                <Box asChild key={color}>
-                  <label
-                    className="rt-ThemePanelSwatch"
-                    aria-label={upperFirst(color)}
-                    style={{ backgroundColor: `var(--${color}-9)` }}
-                  >
-                    <Tooltip
-                      content={`${upperFirst(color)}${
-                        accentColor === 'gray' && resolvedGrayColor !== 'gray'
-                          ? ` (${upperFirst(resolvedGrayColor)})`
-                          : ''
-                      }`}
-                    >
-                      <input
-                        className="rt-ThemePanelSwatchInput"
-                        type="radio"
-                        name="accentColor"
-                        value={color}
-                        checked={accentColor === color}
-                        onChange={(event) =>
-                          onAccentColorChange(event.target.value as typeof accentColor)
-                        }
-                      />
-                    </Tooltip>
-                  </label>
-                </Box>
-              ))}
-            </Flex>
-          </ThemePanelSection>
-
-          {/* Gray color */}
-          <ThemePanelSection>
-            <ThemePanelHeading id="gray-color-title">Gray color</ThemePanelHeading>
-            <Flex wrap="wrap" gap="3" role="group" aria-labelledby="gray-color-title">
-              {themePropDefs.grayColor.values.map((gray) => (
-                <Flex key={gray} asChild align="center" justify="center">
-                  <label
-                    className="rt-ThemePanelSwatch"
-                    aria-label={upperFirst(gray)}
-                    style={{
-                      backgroundColor:
-                        gray === 'auto'
-                          ? `var(--${autoMatchedGray}-9)`
-                          : gray === 'gray'
-                            ? 'var(--gray-9)'
-                            : `var(--${gray}-9)`,
-                      // we override --gray so pure gray doesn't exist anymore
-                      // recover something as close as possible by desaturating
-                      filter: gray === 'gray' ? 'saturate(0)' : undefined,
-                    }}
-                  >
-                    <Tooltip
-                      content={`${upperFirst(gray)}${
-                        gray === 'auto' ? ` (${upperFirst(autoMatchedGray)})` : ''
-                      }`}
-                    >
-                      <input
-                        className="rt-ThemePanelSwatchInput"
-                        type="radio"
-                        name="grayColor"
-                        value={gray}
-                        checked={grayColor === gray}
-                        onChange={(event) =>
-                          onGrayColorChange(event.target.value as typeof grayColor)
-                        }
-                      />
-                    </Tooltip>
-                  </label>
-                </Flex>
-              ))}
-            </Flex>
-          </ThemePanelSection>
-
-          {/* Appearance */}
-          <ThemePanelSection>
-            <ThemePanelHeading id="appearance-title">Appearance</ThemePanelHeading>
-            <Grid columns="2" gap="3" role="group" aria-labelledby="appearance-title">
-              {(['light', 'dark'] as const).map((value) => (
-                <label key={value} className="rt-ThemePanelRadioCard">
-                  <input
-                    className="rt-ThemePanelRadioCardInput"
-                    type="radio"
-                    name="appearance"
-                    value={value}
-                    checked={resolvedAppearance === value}
-                    onChange={(event) =>
-                      handleAppearanceChange(event.target.value as 'light' | 'dark')
-                    }
-                  />
-                  <Flex align="center" justify="center" height="32px" gap="3">
-                    {value === 'light' ? (
-                      <svg
-                        width="15"
-                        height="15"
-                        viewBox="0 0 15 15"
-                        fill="none"
-                        xmlns="http://www.w3.org/2000/svg"
-                        style={{ margin: '0 -1px' }}
-                      >
-                        <path
-                          d="M7.5 0C7.77614 0 8 0.223858 8 0.5V2.5C8 2.77614 7.77614 3 7.5 3C7.22386 3 7 2.77614 7 2.5V0.5C7 0.223858 7.22386 0 7.5 0ZM2.1967 2.1967C2.39196 2.00144 2.70854 2.00144 2.90381 2.1967L4.31802 3.61091C4.51328 3.80617 4.51328 4.12276 4.31802 4.31802C4.12276 4.51328 3.80617 4.51328 3.61091 4.31802L2.1967 2.90381C2.00144 2.70854 2.00144 2.39196 2.1967 2.1967ZM0.5 7C0.223858 7 0 7.22386 0 7.5C0 7.77614 0.223858 8 0.5 8H2.5C2.77614 8 3 7.77614 3 7.5C3 7.22386 2.77614 7 2.5 7H0.5ZM2.1967 12.8033C2.00144 12.608 2.00144 12.2915 2.1967 12.0962L3.61091 10.682C3.80617 10.4867 4.12276 10.4867 4.31802 10.682C4.51328 10.8772 4.51328 11.1938 4.31802 11.3891L2.90381 12.8033C2.70854 12.9986 2.39196 12.9986 2.1967 12.8033ZM12.5 7C12.2239 7 12 7.22386 12 7.5C12 7.77614 12.2239 8 12.5 8H14.5C14.7761 8 15 7.77614 15 7.5C15 7.22386 14.7761 7 14.5 7H12.5ZM10.682 4.31802C10.4867 4.12276 10.4867 3.80617 10.682 3.61091L12.0962 2.1967C12.2915 2.00144 12.608 2.00144 12.8033 2.1967C12.9986 2.39196 12.9986 2.70854 12.8033 2.90381L11.3891 4.31802C11.1938 4.51328 10.8772 4.51328 10.682 4.31802ZM8 12.5C8 12.2239 7.77614 12 7.5 12C7.22386 12 7 12.2239 7 12.5V14.5C7 14.7761 7.22386 15 7.5 15C7.77614 15 8 14.7761 8 14.5V12.5ZM10.682 10.682C10.8772 10.4867 11.1938 10.4867 11.3891 10.682L12.8033 12.0962C12.9986 12.2915 12.9986 12.608 12.8033 12.8033C12.608 12.9986 12.2915 12.9986 12.0962 12.8033L10.682 11.3891C10.4867 11.1938 10.4867 10.8772 10.682 10.682ZM5.5 7.5C5.5 6.39543 6.39543 5.5 7.5 5.5C8.60457 5.5 9.5 6.39543 9.5 7.5C9.5 8.60457 8.60457 9.5 7.5 9.5C6.39543 9.5 5.5 8.60457 5.5 7.5ZM7.5 4.5C5.84315 4.5 4.5 5.84315 4.5 7.5C4.5 9.15685 5.84315 10.5 7.5 10.5C9.15685 10.5 10.5 9.15685 10.5 7.5C10.5 5.84315 9.15685 4.5 7.5 4.5Z"
-                          fill="currentColor"
-                          fillRule="evenodd"
-                          clipRule="evenodd"
-                        ></path>
-                      </svg>
-                    ) : (
-                      <svg
-                        width="15"
-                        height="15"
-                        viewBox="0 0 15 15"
-                        fill="none"
-                        xmlns="http://www.w3.org/2000/svg"
-                        style={{ margin: '0 -1px' }}
-                      >
-                        <path
-                          d="M2.89998 0.499976C2.89998 0.279062 2.72089 0.0999756 2.49998 0.0999756C2.27906 0.0999756 2.09998 0.279062 2.09998 0.499976V1.09998H1.49998C1.27906 1.09998 1.09998 1.27906 1.09998 1.49998C1.09998 1.72089 1.27906 1.89998 1.49998 1.89998H2.09998V2.49998C2.09998 2.72089 2.27906 2.89998 2.49998 2.89998C2.72089 2.89998 2.89998 2.72089 2.89998 2.49998V1.89998H3.49998C3.72089 1.89998 3.89998 1.72089 3.89998 1.49998C3.89998 1.27906 3.72089 1.09998 3.49998 1.09998H2.89998V0.499976ZM5.89998 3.49998C5.89998 3.27906 5.72089 3.09998 5.49998 3.09998C5.27906 3.09998 5.09998 3.27906 5.09998 3.49998V4.09998H4.49998C4.27906 4.09998 4.09998 4.27906 4.09998 4.49998C4.09998 4.72089 4.27906 4.89998 4.49998 4.89998H5.09998V5.49998C5.09998 5.72089 5.27906 5.89998 5.49998 5.89998C5.72089 5.89998 5.89998 5.72089 5.89998 5.49998V4.89998H6.49998C6.72089 4.89998 6.89998 4.72089 6.89998 4.49998C6.89998 4.27906 6.72089 4.09998 6.49998 4.09998H5.89998V3.49998ZM1.89998 6.49998C1.89998 6.27906 1.72089 6.09998 1.49998 6.09998C1.27906 6.09998 1.09998 6.27906 1.09998 6.49998V7.09998H0.499976C0.279062 7.09998 0.0999756 7.27906 0.0999756 7.49998C0.0999756 7.72089 0.279062 7.89998 0.499976 7.89998H1.09998V8.49998C1.09998 8.72089 1.27906 8.89997 1.49998 8.89997C1.72089 8.89997 1.89998 8.72089 1.89998 8.49998V7.89998H2.49998C2.72089 7.89998 2.89998 7.72089 2.89998 7.49998C2.89998 7.27906 2.72089 7.09998 2.49998 7.09998H1.89998V6.49998ZM8.54406 0.98184L8.24618 0.941586C8.03275 0.917676 7.90692 1.1655 8.02936 1.34194C8.17013 1.54479 8.29981 1.75592 8.41754 1.97445C8.91878 2.90485 9.20322 3.96932 9.20322 5.10022C9.20322 8.37201 6.82247 11.0878 3.69887 11.6097C3.45736 11.65 3.20988 11.6772 2.96008 11.6906C2.74563 11.702 2.62729 11.9535 2.77721 12.1072C2.84551 12.1773 2.91535 12.2458 2.98667 12.3128L3.05883 12.3795L3.31883 12.6045L3.50684 12.7532L3.62796 12.8433L3.81491 12.9742L3.99079 13.089C4.11175 13.1651 4.23536 13.2375 4.36157 13.3059L4.62496 13.4412L4.88553 13.5607L5.18837 13.6828L5.43169 13.7686C5.56564 13.8128 5.70149 13.8529 5.83857 13.8885C5.94262 13.9155 6.04767 13.9401 6.15405 13.9622C6.27993 13.9883 6.40713 14.0109 6.53544 14.0298L6.85241 14.0685L7.11934 14.0892C7.24637 14.0965 7.37436 14.1002 7.50322 14.1002C11.1483 14.1002 14.1032 11.1453 14.1032 7.50023C14.1032 7.25044 14.0893 7.00389 14.0623 6.76131L14.0255 6.48407C13.991 6.26083 13.9453 6.04129 13.8891 5.82642C13.8213 5.56709 13.7382 5.31398 13.6409 5.06881L13.5279 4.80132L13.4507 4.63542L13.3766 4.48666C13.2178 4.17773 13.0353 3.88295 12.8312 3.60423L12.6782 3.40352L12.4793 3.16432L12.3157 2.98361L12.1961 2.85951L12.0355 2.70246L11.8134 2.50184L11.4925 2.24191L11.2483 2.06498L10.9562 1.87446L10.6346 1.68894L10.3073 1.52378L10.1938 1.47176L9.95488 1.3706L9.67791 1.2669L9.42566 1.1846L9.10075 1.09489L8.83599 1.03486L8.54406 0.98184ZM10.4032 5.30023C10.4032 4.27588 10.2002 3.29829 9.83244 2.40604C11.7623 3.28995 13.1032 5.23862 13.1032 7.50023C13.1032 10.593 10.596 13.1002 7.50322 13.1002C6.63646 13.1002 5.81597 12.9036 5.08355 12.5522C6.5419 12.0941 7.81081 11.2082 8.74322 10.0416C8.87963 10.2284 9.10028 10.3497 9.34928 10.3497C9.76349 10.3497 10.0993 10.0139 10.0993 9.59971C10.0993 9.24256 9.84965 8.94373 9.51535 8.86816C9.57741 8.75165 9.63653 8.63334 9.6926 8.51332C9.88358 8.63163 10.1088 8.69993 10.35 8.69993C11.0403 8.69993 11.6 8.14028 11.6 7.44993C11.6 6.75976 11.0406 6.20024 10.3505 6.19993C10.3853 5.90487 10.4032 5.60464 10.4032 5.30023Z"
-                          fill="currentColor"
-                          fillRule="evenodd"
-                          clipRule="evenodd"
-                        ></path>
-                      </svg>
-                    )}
-                    <Text size="1" weight="medium">
-                      {upperFirst(value)}
-                    </Text>
-                  </Flex>
-                </label>
-              ))}
-            </Grid>
-          </ThemePanelSection>
-
-          {/* Radius */}
-          <ThemePanelSection>
-            <ThemePanelHeading id="radius-title">Radius</ThemePanelHeading>
-            <Flex gap="3" role="group" aria-labelledby="radius-title" wrap="wrap">
-              {themePropDefs.radius.values.map((value) => (
-                <Flex key={value} direction="column" align="center">
-                  <label className="rt-ThemePanelRadioCard">
-                    <input
-                      className="rt-ThemePanelRadioCardInput"
-                      type="radio"
-                      name="radius"
-                      id={`theme-panel-radius-${value}`}
-                      value={value}
-                      checked={radius === value}
-                      onChange={(event) => onRadiusChange(event.target.value as typeof radius)}
-                    />
-                    <Theme asChild radius={value}>
-                      <Box
-                        m="4"
-                        width={{ initial: '24px', sm: '32px' }}
-                        height={{ initial: '24px', sm: '32px' }}
-                        style={{
-                          borderTopLeftRadius: value === 'full' ? '80%' : 'var(--radius-5)',
-                          backgroundImage:
-                            'linear-gradient(to bottom right, var(--accent-3), var(--accent-4))',
-                          borderTop: '2px solid var(--accent-a8)',
-                          borderLeft: '2px solid var(--accent-a8)',
-                        }}
-                      />
-                    </Theme>
-                  </label>
-                  <Box asChild pt="3">
-                    <Text asChild size="1" emphasis="medium">
-                      <label htmlFor={`theme-panel-radius-${value}`}>{upperFirst(value)}</label>
-                    </Text>
-                  </Box>
-                </Flex>
-              ))}
-            </Flex>
-          </ThemePanelSection>
-        </Flex>
-        <Button style={{ width: '100%' }} onClick={handleCopyThemeConfig}>
-          {copyState === 'copied' ? 'Copied' : 'Copy Theme'}
-        </Button>
-      </Flex>
-    );
-  },
-);
-ThemePanelContent.displayName = 'ThemePanelContent';
-
-function ThemePanelSection(
-  props: Omit<React.ComponentPropsWithoutRef<typeof Flex>, 'asChild' | 'direction' | 'gap'>,
-) {
-  return (
-    <Flex direction="column" gap="4" asChild {...props}>
-      <section>{props.children}</section>
-    </Flex>
-  );
-}
-
-function ThemePanelHeading(props: React.ComponentPropsWithoutRef<typeof Heading>) {
-  return <Heading as="h3" size={{ initial: '1', sm: '2' }} {...props} />;
-}
-
-// https://github.com/pacocoursey/next-themes/blob/main/packages/next-themes/src/index.tsx#L285
-function disableAnimation() {
-  const css = document.createElement('style');
-  css.appendChild(
-    document.createTextNode(
-      `*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`,
-    ),
-  );
-  document.head.appendChild(css);
-
-  return () => {
-    // Force restyle
-    (() => window.getComputedStyle(document.body))();
-
-    // Wait for next tick before removing
-    setTimeout(() => {
-      document.head.removeChild(css);
-    }, 1);
-  };
-}
-
-function upperFirst(string: string) {
-  return string.charAt(0).toUpperCase() + string.slice(1);
-}
-
-function updateRootAppearanceClass(appearance: 'light' | 'dark') {
-  const root = document.documentElement;
-  const hasLightTheme = root.classList.contains('light-theme');
-  const hasDarkTheme = root.classList.contains('dark-theme');
-  const hasLight = root.classList.contains('light');
-  const hasDark = root.classList.contains('dark');
-
-  if (hasLightTheme || hasDarkTheme) {
-    root.classList.remove('light-theme', 'dark-theme');
-    root.style.colorScheme = appearance;
-    root.classList.add(`${appearance}-theme`);
-  }
-
-  if (hasLight || hasDark) {
-    root.classList.remove('light', 'dark');
-    root.style.colorScheme = appearance;
-    root.classList.add(appearance);
-  }
-
-  if (!hasLightTheme && !hasDarkTheme && !hasLight && !hasDark) {
-    root.style.colorScheme = appearance;
-    root.classList.add(appearance);
-  }
-}
-
-export { ThemePanel, ThemePanelContent };
-export type { ThemePanelProps, ThemePanelContentProps };

package/src/components/toggle-button.tsx

@@ -1,117 +0,0 @@
-import * as React from 'react';
-import { Toggle } from 'radix-ui';
-import { Button } from './button.js';
-import type { ButtonProps, ButtonRankProps } from './button.js';
-import { useToggleState } from '../hooks/use-toggle-state.js';
-
-/**
- * ToggleButton props that extend Button with toggle-specific functionality
- *
- * The ToggleButton component provides a button that can be pressed/unpressed
- * with proper accessibility announcements and state management.
- */
-type ToggleButtonProps = Omit<ButtonProps<'button'>, 'as' | 'variant' | 'emphasis'> &
-  ButtonRankProps & {
-  /** Controlled pressed state */
-  pressed?: boolean;
-  /** Callback when pressed state changes */
-  onPressedChange?: (pressed: boolean) => void;
-  /** Default pressed state for uncontrolled usage */
-  defaultPressed?: boolean;
-};
-
-type ToggleButtonElement = React.ElementRef<typeof Button>;
-
-/**
- * ToggleButton component for buttons that can be pressed/unpressed
- *
- * The ToggleButton component extends Button with toggle functionality using
- * Radix UI's Toggle primitive. It provides proper accessibility announcements,
- * controlled/uncontrolled state management, and seamless integration with
- * the existing Button component.
- *
- * Key features:
- * - Controlled and uncontrolled state management
- * - Live accessibility announcements for screen readers
- * - Automatic state validation and warnings
- * - Seamless integration with Button props and styling
- * - Proper ARIA attributes for toggle functionality
- *
- * @example
- * ```tsx
- * // Uncontrolled toggle button
- * <ToggleButton defaultPressed={false}>
- *   Toggle Me
- * </ToggleButton>
- *
- * // Controlled toggle button
- * const [pressed, setPressed] = React.useState(false);
- * <ToggleButton
- *   pressed={pressed}
- *   onPressedChange={setPressed}
- * >
- *   {pressed ? 'On' : 'Off'}
- * </ToggleButton>
- *
- * // Toggle button with all Button props
- * <ToggleButton
- *   variant="solid"
- *   size="3"
- *   color="blue"
- *   pressed={isActive}
- *   onPressedChange={setIsActive}
- * >
- *   {isActive ? 'Active' : 'Inactive'}
- * </ToggleButton>
- * ```
- */
-const ToggleButton = React.forwardRef<ToggleButtonElement, ToggleButtonProps>(({ pressed, onPressedChange, defaultPressed, children, ...buttonProps }, forwardedRef) => {
-  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, iconOnly } = buttonProps;
-
-  // The label behind aria-labelledby is read once per id, not on every press.
-  const cachedLabelRef = React.useRef<string | null>(null);
-  React.useEffect(() => {
-    cachedLabelRef.current = null;
-  }, [ariaLabelledBy]);
-
-  /**
-   * The name announced when the pressed state changes: aria-label, then the label
-   * aria-labelledby points at, then visible text.
-   */
-  const getAccessibleName = React.useCallback(() => {
-    if (ariaLabel) return ariaLabel;
-    if (ariaLabelledBy) {
-      if (cachedLabelRef.current === null) {
-        cachedLabelRef.current = document.getElementById(ariaLabelledBy)?.textContent || 'Toggle button';
-      }
-      return cachedLabelRef.current;
-    }
-    if (typeof children === 'string') return children;
-    if (React.isValidElement(children) && typeof (children.props as any)?.children === 'string') {
-      return (children.props as any).children;
-    }
-    return 'Toggle button';
-  }, [ariaLabel, ariaLabelledBy, children]);
-
-  // Use shared toggle state hook for accessibility announcements and warnings
-  const { handlePressedChange } = useToggleState({
-    pressed,
-    onPressedChange,
-    getAccessibleName,
-    componentName: iconOnly ? 'ToggleIconButton' : 'ToggleButton',
-  });
-
-  // Render the toggle button using Radix UI's Toggle primitive
-  // This provides proper ARIA attributes and keyboard navigation
-  return (
-    <Toggle.Root pressed={pressed} onPressedChange={handlePressedChange} defaultPressed={defaultPressed} asChild>
-      <Button {...buttonProps} ref={forwardedRef}>
-        {children}
-      </Button>
-    </Toggle.Root>
-  );
-});
-ToggleButton.displayName = 'ToggleButton';
-
-export { ToggleButton };
-export type { ToggleButtonProps };