1d:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsPage"] 1e:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsTitle"] 1f:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsDescription"] 20:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsBody"] 21:I[26731,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"ComponentPreview"] 22:I[25325,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"CodeTabs"] 23:Tb96,"use client"; import type { ComponentProps, ReactNode } from "react"; import * as CheckboxPrimitive from "@radix-ui/react-checkbox"; import { cn } from "@/registry/tier-2-primitives/lib/cn"; import { CheckGlyph, MinusGlyph } from "@/registry/tier-2-primitives/glyphs"; /** * Checkbox. * * Radix Checkbox under a drawn box. Radix renders a real button with * `role="checkbox"` and mirrors the value into a hidden native input when a * `name` is set, so a plain form still submits it and space still toggles it. * * What moving off `peer` bought: the indeterminate state. A native input can * only be made indeterminate by reaching for the DOM node after render, so the * old version drew a dash that `aria-checked` never knew about — a tri-state * control that only looked tri-state. `checked="indeterminate"` here is one * value that drives both the glyph and the announcement. */ export type CheckboxProps = Omit< ComponentProps, "children" | "asChild" > & { label?: ReactNode; /** A second line under the label. */ description?: ReactNode; labelClassName?: string; }; export function Checkbox({ label, description, className, labelClassName, id, disabled, ...props }: CheckboxProps) { const control = ( {props.checked === "indeterminate" ? ( ) : ( )} ); if (!label) return control; return ( {control} {label} {description && ( {description} )} ); } 24:T5543,

"use client";

import type { ComponentProps, ReactNode } from "react";
import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
import { cn } from "@/registry/tier-2-primitives/lib/cn";
import { CheckGlyph, MinusGlyph } from "@/registry/tier-2-primitives/glyphs";

/**
 * Checkbox.
 *
 * Radix Checkbox under a drawn box. Radix renders a real button with
 * `role="checkbox"` and mirrors the value into a hidden native input when a
 * `name` is set, so a plain form still submits it and space still toggles it.
 *
 * What moving off `peer` bought: the indeterminate state. A native input can
 * only be made indeterminate by reaching for the DOM node after render, so the
 * old version drew a dash that `aria-checked` never knew about — a tri-state
 * control that only looked tri-state. `checked="indeterminate"` here is one
 * value that drives both the glyph and the announcement.
 */
export type CheckboxProps = Omit<
  ComponentProps<typeof CheckboxPrimitive.Root>,
  "children" | "asChild"
> & {
  label?: ReactNode;
  /** A second line under the label. */
  description?: ReactNode;
  labelClassName?: string;
};

export function Checkbox({
  label,
  description,
  className,
  labelClassName,
  id,
  disabled,
  ...props
}: CheckboxProps) {
  const control = (
    <CheckboxPrimitive.Root
      data-slot="checkbox"
      id={id}
      disabled={disabled}
      className={cn(
        "grid size-[19px] flex-none place-items-center rounded-xs border-[1.5px]",
        "border-border-strong bg-surface-raised text-text-on-accent",
        "transition-[background-color,border-color] motion-instant",
        "data-[state=checked]:border-surface-accent data-[state=checked]:bg-surface-accent",
        "data-[state=indeterminate]:border-surface-accent data-[state=indeterminate]:bg-surface-accent",
        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--focus-ring)]",
        "disabled:cursor-not-allowed disabled:opacity-45",
        className,
      )}
      {...props}
    >
      <CheckboxPrimitive.Indicator className="grid place-items-center">
        {props.checked === "indeterminate" ? (
          <MinusGlyph size={12} strokeWidth={3} />
        ) : (
          <CheckGlyph size={12} strokeWidth={3} />
        )}
      </CheckboxPrimitive.Indicator>
    </CheckboxPrimitive.Root>
  );

  if (!label) return control;

  return (
    <label
      htmlFor={id}
      className={cn(
        "flex gap-3 font-ui",
        description ? "items-start" : "items-center",
        disabled ? "cursor-not-allowed opacity-45" : "cursor-pointer",
        labelClassName,
      )}
    >
      <span className={description ? "mt-px" : undefined}>{control}</span>
      <span>
        <span className="block text-body text-text-primary">{label}</span>
        {description && (
          <span className="mt-0.5 block text-caption text-text-muted">{description}</span>
        )}
      </span>
    </label>
  );
}

13:["$","$L1d",null,{"children":[["$","p",null,{"className":"text-text-accent text-caption font-bold tracking-wide uppercase","children":"Components"}],["$","$L1e",null,{"children":"Checkbox"}],["$","$L1f",null,{"children":"Including a real indeterminate state that announces as mixed."}],["$","$L20",null,{"children":[["$","$L21",null,{"slug":"checkbox"}],["$","div",null,{"className":"mt-6","children":["$","$L22",null,{"command":"bunx --bun shadcn@latest add @woohl/checkbox","source":"$23","highlighted":"$24","npm":["@radix-ui/react-checkbox"],"registry":["@woohl/glyphs","@woohl/tokens","@woohl/utils"],"props":"$undefined"}]}]]}]]}]