{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "recipes",
  "files": [
    {
      "path": "registry/lib/recipes.ts",
      "content": "// Shared class recipes composed via cn() from ../utils.\n\n/** Focus outline via --focus-ring-color / --focus-ring-width / --focus-ring-offset. */\nexport const focusRing =\n  \"outline-none focus-visible:[outline-style:solid] \" +\n  \"focus-visible:outline-[length:var(--focus-ring-width)] \" +\n  \"focus-visible:outline-[var(--focus-ring-color)] \" +\n  \"focus-visible:outline-offset-[var(--focus-ring-offset)]\";\n\n/** Compact keyboard-focus indicator for non-editable controls. */\nexport const selectionFocus =\n  \"outline-none focus-visible:outline-none focus-visible:shadow-[inset_0_-2px_0_var(--focus-ring-color)] \" +\n  \"has-focus-visible:outline-none has-focus-visible:shadow-[inset_0_-2px_0_var(--focus-ring-color)]\";\n\n/** Filled editable-control surface, hover step, and keyboard focus outline. */\nexport const fieldControl =\n  \"bg-fill-1 [&:not([data-readonly]):hover:not(:focus-within)]:bg-fill-2 \" +\n  \"[&:not([data-readonly]):focus-within]:bg-layer-1 \" +\n  \"outline-none [&:not([data-readonly])]:has-focus-visible:[outline-style:solid] \" +\n  \"[&:not([data-readonly])]:has-focus-visible:outline-[length:var(--focus-ring-width)] \" +\n  \"[&:not([data-readonly])]:has-focus-visible:outline-[var(--focus-ring-color)] \" +\n  \"[&:not([data-readonly])]:has-focus-visible:outline-offset-0 \" +\n  \"transition-[color,background-color,outline-color] duration-[var(--duration-state)] ease-[var(--ease-standard)]\";\n\n/** Static surface for selectable, non-editable field values. */\nexport const readOnlyFieldControl =\n  \"data-readonly:bg-fill-1 data-readonly:text-ink-muted \" +\n  \"data-readonly:has-focus-visible:bg-fill-2 \" +\n  \"data-readonly:has-focus-visible:[outline-style:solid] \" +\n  \"data-readonly:has-focus-visible:outline-[length:var(--focus-ring-width)] \" +\n  \"data-readonly:has-focus-visible:outline-[var(--focus-ring-color)] \" +\n  \"data-readonly:has-focus-visible:outline-offset-0\";\n\n/** Control heights + padding + icon gap + text for sm/md/lg. */\nexport const controlSize: Record<\"sm\" | \"md\" | \"lg\", string> = {\n  sm: \"h-6 px-2.5 gap-1.5 text-mini font-medium\",\n  md: \"h-8 px-3.5 gap-2 text-small font-medium\",\n  lg: \"h-10 px-4 gap-2 text-regular font-medium\",\n};\n\n/** Invisible 24px pointer floor, expanding to a preferred 44px touch area. */\nexport const coarseTarget =\n  \"relative after:absolute after:left-1/2 after:top-1/2 after:size-full \" +\n  \"after:min-h-6 after:min-w-6 after:-translate-x-1/2 after:-translate-y-1/2 \" +\n  \"pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11\";\n\n/** Interactive fill/border state ramps. */\nexport const stateStepping = {\n  /** Neutral control fill that steps from fill-1 to fill-2 during interaction. */\n  neutralFill:\n    \"bg-fill-1 hover:bg-fill-2 focus-visible:bg-fill-2 active:bg-fill-2\",\n  /** Neutral fill ramp limited to an unchecked selection control. */\n  uncheckedNeutralFill:\n    \"data-unchecked:bg-fill-1 data-unchecked:hover:bg-fill-2 data-unchecked:focus-visible:bg-fill-2 data-unchecked:active:bg-fill-2\",\n  /** Transparent at rest, adaptive overlay on hover/active. Use for\n   *  toolbar buttons, tabs, and sidebar links that sit on any surface. */\n  neutralGhostFill:\n    \"bg-transparent hover:bg-layer-hover active:bg-layer-hover\",\n  neutralBorder:\n    \"border border-hairline hover:border-hairline-strong active:border-hairline-tertiary\",\n};\n\n/** Shared disabled contract: 50% opacity, cursor-not-allowed. */\nexport const disabled =\n  \"disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none\";\n\n/** Standard color transition for hover/active fills and borders. */\nexport const colorTransition =\n  \"transition-colors duration-[var(--duration-state)] ease-[var(--ease-standard)]\";\n\n/** Shared chrome for floating panels (Menu, Combobox, Select, Popover, Command). */\nexport const popupSurface =\n  \"rounded-[var(--radius-12)] bg-layer-1 border border-hairline-soft shadow-menu outline-none focus:outline-none\";\n\nexport const overlayLayer = {\n  modal: \"z-[var(--overlay-layer-modal)]\",\n  drawer: \"z-[var(--overlay-layer-drawer)]\",\n  popup: \"z-[var(--overlay-layer-popup)]\",\n  toast: \"z-[var(--overlay-layer-toast)]\",\n} as const;\n\nexport const mobilePopupBackdrop =\n  `fixed inset-0 ${overlayLayer.drawer} bg-scrim backdrop-blur-sm ` +\n  \"transition-opacity duration-[var(--duration-overlay)] ease-[var(--ease-standard)] \" +\n  \"data-starting-style:opacity-0 data-ending-style:opacity-0\";\n\nexport const mobilePopupSurface =\n  popupSurface +\n  ` fixed left-1/2 top-1/2 ${overlayLayer.popup} flex w-[calc(100vw-1rem)] max-h-[calc(100dvh-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden ` +\n  \"transition-[opacity,translate] duration-[var(--duration-overlay)] ease-[var(--ease-standard)] \" +\n  \"data-starting-style:opacity-0 data-starting-style:translate-y-[calc(-50%+8px)] \" +\n  \"data-ending-style:opacity-0 data-ending-style:translate-y-[calc(-50%+8px)]\";\n\n/** Held state shared by triggers while their popup is open. */\nexport const popupTriggerOpen = \"data-[popup-open]:bg-fill-2\";\n\n/** Interactive row inside a popup list. */\nexport const itemRow = {\n  base:\n    \"my-0.5 first:mt-0 last:mb-0 flex items-center cursor-default select-none rounded-[var(--radius-6)] text-ink outline-none transition-colors duration-[var(--duration-state)] ease-[var(--ease-standard)] \" +\n    \"data-[active]:bg-layer-hover data-highlighted:bg-layer-hover \" +\n    \"data-[selected]:bg-layer-hover data-[checked]:bg-layer-hover aria-selected:bg-layer-hover \" +\n    \"data-highlighted:data-[selected]:bg-layer-hover data-highlighted:data-[checked]:bg-layer-hover data-highlighted:aria-selected:bg-layer-hover \" +\n    \"data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n  compact: \"min-h-7 px-2 py-1.5 text-small\",\n  comfortable: \"min-h-9 px-2.5 py-2 text-small\",\n};\n\n/** Section header inside a popup list. */\nexport const itemGroupLabel = {\n  base: \"pt-1.5 pb-1 text-micro text-ink-tertiary\",\n  compact: \"px-2\",\n  comfortable: \"px-2.5\",\n};\n\n/** Full-bleed 1px separator inside a popup list. Assumes the popup's\n *  content wrapper carries `p-1`; `-mx-1` overshoots that to reach the\n *  inner border edge to edge. */\nexport const popupDivider = \"-mx-1 my-1 h-px bg-hairline\";\n",
      "type": "registry:lib",
      "target": "lib/recipes.ts"
    }
  ],
  "type": "registry:lib"
}