Toggle

Built on the Radix Toggle primitive (a `button` that manages `aria-pressed` and
`data-state`). Styling is a plain class map instead of a variant library: a
shared base string, a `variants` map and a `sizes` map, merged with `cn` so a
consumer `className` always wins (tailwind-merge resolves conflicts such as a
custom padding). The pressed look keys off `data-[state=on]:` with the
`accent`/`accent-foreground` tokens; `enabled:data-[state=on]:hover:` uses a
slightly translucent accent so hovering a pressed toggle does not flash to the
muted hover colour. SVG children default to `size-4` unless they set a size.
`toggleVariants` is exported so `ToggleGroupItem` renders identical buttons.
Deviations from the source: size keys are `sm/md/lg` (this library's Button
convention, not `default`), no `aria-invalid` styling, forced-colors support
added, heights aligned to Button.

**Pebble (2026-11-03).** On is the lit key shared with Button's primary: `bg-linear-to-b from-key-top to-key-bottom`, `ring-key-edge` and `shadow-[var(--key-shine),var(--elevation-sm)]`; pressing a lit key flips the gradient (`bg-linear-to-t`) and swaps to `--key-press`. `outline` is a raised card pebble that sinks (drops its shadow and highlight) while pressed. Every toggle presses with `active:scale-[0.97] active:translate-y-px` over `--motion-fast`/`ease-enter`, cancelled under reduced motion. Heights now match Button exactly (sm 32, md 36, lg 40) and type is 13 px medium; focus uses the `ring-2 ring-offset-2` token ring with `z-10` so it is not clipped inside groups. `toggleVariants` gained `lit` so `ToggleGroupItem` can draw its own on-state.

<!-- PEBBLE-LICENSE -->

registry/button/toggle/toggle.tsx

"use client";

/* PEBBLE-LICENSE
Built by Pebble. Component: toggle.

First-party license: MIT

The following first-party terms apply only to original Pebble material.

MIT License

Copyright (c) 2026 Praxys Solutions LLC (Pebble)

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

THIRD-PARTY NOTICES
These notices apply to identified upstream portions; Pebble terms do not replace or narrow their rights.

Upstream: https://raw.githubusercontent.com/shadcn-ui/ui/main/LICENSE.md
MIT License

Copyright (c) 2023 shadcn

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
END PEBBLE-LICENSE */

import * as React from "react";
import { Toggle as TogglePrimitive } from "radix-ui";

import { cn } from "@/lib/utils";

const base = [
  "relative isolate inline-flex shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-md text-[13px] font-medium whitespace-nowrap select-none",
  "transition-[background-color,color,box-shadow,filter,transform,scale,translate] duration-(--motion-fast) ease-enter motion-reduce:transition-none",
  "focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-none",
  "text-muted-foreground enabled:hover:text-foreground",
  // Press is felt: a 0.97 scale and a half-pixel drop, dropped under reduced motion.
  "active:translate-y-px active:scale-[0.97] motion-reduce:active:translate-y-0 motion-reduce:active:scale-100",
  "disabled:pointer-events-none disabled:opacity-50",
  // Forced colors drop author backgrounds: paint the pressed state with system
  // Highlight so it stays visible.
  "forced-colors:border forced-colors:border-[ButtonText] forced-colors:data-[state=on]:bg-[Highlight]! forced-colors:data-[state=on]:text-[HighlightText]!",
  "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
].join(" ");

// Pebble: "on" is the lit key (ink gradient, edge ring, top shine). Pressing a
// lit key flips the gradient and swaps the shine for an inset shade.
const lit = [
  "data-[state=on]:bg-linear-to-b data-[state=on]:from-key-top data-[state=on]:to-key-bottom data-[state=on]:text-primary-foreground",
  "data-[state=on]:ring-1 data-[state=on]:ring-key-edge data-[state=on]:shadow-[var(--key-shine),var(--elevation-sm)] data-[state=on]:inset-shadow-none",
  "enabled:data-[state=on]:hover:text-primary-foreground enabled:data-[state=on]:hover:brightness-110",
  "data-[state=on]:active:bg-linear-to-t data-[state=on]:active:shadow-[var(--key-press)]",
  // The edge ring above would otherwise replace the focus ring on a lit key.
  "focus-visible:data-[state=on]:ring-2 focus-visible:data-[state=on]:ring-ring",
].join(" ");

const variants = {
  // Flat until hovered.
  default: "bg-transparent enabled:hover:bg-muted",
  // A raised card-coloured pebble; it sinks (loses its shadow) while pressed.
  outline:
    "bg-card text-foreground ring-1 ring-hairline shadow-raised-xs inset-shadow-highlight enabled:hover:bg-muted/60 active:shadow-none active:inset-shadow-none",
} as const;

const sizes = {
  sm: "h-8 min-w-8 px-2",
  md: "h-9 min-w-9 px-2.5",
  lg: "h-10 min-w-10 px-3.5 text-sm",
} as const;

export type ToggleVariant = keyof typeof variants;
export type ToggleSize = keyof typeof sizes;

export type ToggleStyleProps = {
  variant?: ToggleVariant;
  size?: ToggleSize;
};

/**
 * Class string for a toggle with the given variant and size. Shared with
 * ToggleGroup. `lit: false` leaves out the lit-key "on" style, for groups that
 * draw their own pressed indicator.
 */
export function toggleVariants({
  variant = "default",
  size = "md",
  lit: withLit = true,
}: ToggleStyleProps & { lit?: boolean } = {}) {
  return cn(base, variants[variant], sizes[size], withLit && lit);
}

export type ToggleProps = React.ComponentProps<typeof TogglePrimitive.Root> & ToggleStyleProps;

export function Toggle({ variant = "default", size = "md", className, ...props }: ToggleProps) {
  return (
    <TogglePrimitive.Root
      data-slot="toggle"
      data-variant={variant}
      data-size={size}
      className={cn(toggleVariants({ variant, size }), className)}
      {...props}
    />
  );
}