Switch

'use client'

import { createContext, use, type ComponentPropsWithRef } from 'react'

import { Slot } from './slot'
import { useControllableState } from './sui-use-controllable-state'

type State = 'checked' | 'unchecked'
const SwitchContext = createContext<State>('unchecked')

export interface SwitchProps
  extends Omit<ComponentPropsWithRef<'button'>, 'value' | 'defaultValue'> {
  checked?: boolean
  defaultChecked?: boolean
  onCheckedChange?: (checked: boolean) => void
  asChild?: boolean
}

/**
 * An on/off switch (APG Switch). A button with role="switch", so Space and
 * Enter toggle it and a <label htmlFor> names it. Style it with
 * `[data-state="checked"]` and put a <SwitchThumb /> inside.
 */
export function Switch({
  checked,
  defaultChecked = false,
  onCheckedChange,
  asChild,
  disabled,
  onClick,
  children,
  ...props
}: SwitchProps) {
  const [on, setOn] = useControllableState({
    prop: checked,
    defaultProp: defaultChecked,
    onChange: onCheckedChange
  })
  const state: State = on ? 'checked' : 'unchecked'
  const Comp = asChild ? Slot : 'button'

  return (
    <SwitchContext value={state}>
      <Comp
        type={asChild ? undefined : 'button'}
        {...props}
        role="switch"
        aria-checked={on}
        disabled={disabled}
        data-scope="switch"
        data-part="root"
        data-state={state}
        data-disabled={disabled ? '' : undefined}
        onClick={event => {
          onClick?.(event)
          if (!event.defaultPrevented) setOn(!on)
        }}
      >
        {children}
      </Comp>
    </SwitchContext>
  )
}

export function SwitchThumb(props: ComponentPropsWithRef<'span'>) {
  const state = use(SwitchContext)
  return (
    <span
      aria-hidden="true"
      {...props}
      data-scope="switch"
      data-part="thumb"
      data-state={state}
    />
  )
}

import {
  Children,
  cloneElement,
  isValidElement,
  type CSSProperties,
  type ReactElement,
  type ReactNode,
  type Ref
} from 'react'

import { composeRefs } from './sui-refs'

type AnyProps = Record<string, unknown>

/**
 * Renders its only child with the slot's props merged in, so any component
 * can take over the element (`asChild`). Event handlers run child first,
 * then the slot's, unless the child's handler called preventDefault.
 * Class names join, styles merge, refs compose. No hooks, so it works in
 * server components too.
 */
export function Slot({
  children,
  ...slotProps
}: AnyProps & { children?: ReactNode; ref?: Ref<unknown> }) {
  const child = Children.only(children)
  if (!isValidElement(child)) return null
  const element = child as ReactElement<AnyProps>
  const childProps = element.props

  const merged: AnyProps = { ...slotProps, ...childProps }

  for (const key of Object.keys(slotProps)) {
    const slotValue = slotProps[key]
    const childValue = childProps[key]
    if (/^on[A-Z]/.test(key) && typeof slotValue === 'function') {
      merged[key] =
        typeof childValue === 'function'
          ? (...args: unknown[]) => {
              childValue(...args)
              const event = args[0] as { defaultPrevented?: boolean } | undefined
              if (!event?.defaultPrevented) slotValue(...args)
            }
          : slotValue
    } else if (key === 'className') {
      merged.className = [slotValue, childValue].filter(Boolean).join(' ')
    } else if (key === 'style') {
      merged.style = {
        ...(slotValue as CSSProperties),
        ...(childValue as CSSProperties)
      }
    }
  }

  /* Only touch the ref when there is one: a server component rendering
     <Slot><Link /></Slot> must not hand a function ref to a client child. */
  const slotRef = slotProps.ref as Ref<unknown> | undefined
  const childRef = childProps.ref as Ref<unknown> | undefined
  if (slotRef && childRef) merged.ref = composeRefs(slotRef, childRef)
  else if (slotRef || childRef) merged.ref = slotRef ?? childRef
  else delete merged.ref

  return cloneElement(element, merged)
}

import { useCallback, type Ref, type RefCallback } from 'react'

const setRef = <T,>(ref: Ref<T> | undefined, value: T | null) => {
  if (typeof ref === 'function') ref(value)
  else if (ref) ref.current = value
}

/** One callback ref that feeds several refs. */
export const composeRefs =
  <T,>(...refs: (Ref<T> | undefined)[]): RefCallback<T> =>
  node => {
    for (const ref of refs) setRef(ref, node)
  }

/** A user's ref and a component's own ref, as one stable callback ref. */
export const useComposedRefs = <T,>(
  outer: Ref<T> | undefined,
  inner: Ref<T> | undefined
) => useCallback((node: T | null) => composeRefs(outer, inner)(node), [outer, inner])

import { useCallback, useState } from 'react'

/**
 * Controlled when `prop` is defined, uncontrolled otherwise. `onChange`
 * fires for every change either way.
 */
export function useControllableState<T>({
  prop,
  defaultProp,
  onChange
}: {
  prop: T | undefined
  defaultProp: T
  onChange?: (value: T) => void
}) {
  const [uncontrolled, setUncontrolled] = useState(defaultProp)
  const controlled = prop !== undefined
  const value = controlled ? prop : uncontrolled

  const setValue = useCallback(
    (next: T) => {
      if (!controlled) setUncontrolled(next)
      if (!Object.is(next, value)) onChange?.(next)
    },
    [controlled, onChange, value]
  )

  return [value, setValue] as const
}