{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "toggle",
  "title": "Toggle",
  "description": "A button that stays on or off.",
  "registryDependencies": [
    "https://creance.pages.dev/r/creance-base.json"
  ],
  "files": [
    {
      "path": "toggle/Toggle.css",
      "content": "/* Shared by Toggle and ToggleGroup items. */\n.cr-toggle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  min-width: var(--cr-control-height-sm);\n  min-height: var(--cr-control-height-sm);\n  padding: 0 var(--cr-space-3);\n  border: 1px solid var(--cr-color-glass-edge);\n  border-radius: 10px;\n  background: var(--cr-color-glass-control);\n  color: var(--cr-color-text-secondary);\n  font: inherit;\n  font-family: var(--cr-font-family-sans);\n  font-size: var(--cr-font-size-sm);\n  font-weight: var(--cr-font-weight-semibold);\n  cursor: pointer;\n  transition: background-color var(--cr-motion-duration-fast) var(--cr-motion-easing-standard),\n    color var(--cr-motion-duration-fast) var(--cr-motion-easing-standard);\n}\n\n.cr-toggle[data-size='md'] {\n  min-height: var(--cr-control-height-md);\n  padding: 0 var(--cr-space-4);\n  font-size: var(--cr-font-size-md);\n}\n\n.cr-toggle:hover:not(:disabled) {\n  color: var(--cr-color-text-default);\n}\n\n.cr-toggle[aria-pressed='true'] {\n  border-color: transparent;\n  background: var(--cr-color-ink-bg);\n  color: var(--cr-color-ink-fg);\n}\n\n.cr-toggle:focus-visible {\n  outline: var(--cr-focus-width) solid var(--cr-color-focus);\n  outline-offset: var(--cr-focus-offset);\n}\n\n.cr-toggle:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n",
      "type": "registry:file",
      "target": "@components/creance/toggle/Toggle.css"
    },
    {
      "path": "toggle/Toggle.tsx",
      "content": "'use client';\n\nimport { forwardRef, useState, type ButtonHTMLAttributes } from 'react';\nimport { cx } from '@/lib/creance/cx';\nimport './Toggle.css';\n\nexport interface ToggleProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {\n  pressed?: boolean;\n  defaultPressed?: boolean;\n  onPressedChange?: (pressed: boolean) => void;\n  size?: 'sm' | 'md';\n}\n\n/** A button that stays on or off, such as Wrap lines. Ink when on; announced as pressed. */\nexport const Toggle = forwardRef<HTMLButtonElement, ToggleProps>(function Toggle(\n  { pressed, defaultPressed = false, onPressedChange, size = 'md', className, onClick, ...props },\n  ref,\n) {\n  const [own, setOwn] = useState(defaultPressed);\n  const on = pressed ?? own;\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      aria-pressed={on}\n      className={cx('cr-toggle', className)}\n      data-size={size}\n      onClick={(e) => {\n        onClick?.(e);\n        if (e.defaultPrevented) return;\n        if (pressed === undefined) setOwn(!on);\n        onPressedChange?.(!on);\n      }}\n      {...props}\n    />\n  );\n});\n",
      "type": "registry:ui",
      "target": "@components/creance/toggle/Toggle.tsx"
    }
  ],
  "categories": [
    "atom",
    "actions"
  ],
  "type": "registry:ui"
}