{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "action-orb",
  "title": "Action Orb",
  "description": "The filled circular arrow button that opens a tile. Five variants: ink, chalk, glass, hairline, flare.",
  "dependencies": [
    "class-variance-authority",
    "lucide-react",
    "radix-ui"
  ],
  "registryDependencies": [
    "http://localhost:5173/r/liquid-theme.json"
  ],
  "files": [
    {
      "path": "src/components/ui/action-orb.tsx",
      "content": "import * as React from \"react\"\nimport { Slot } from \"radix-ui\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { ArrowUpRight } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/**\n * The filled circular button in the top-right of every tile in the reference\n * dashboard. It is always the same shape and always means \"open this\".\n */\nconst orb = cva(\n  \"relative inline-flex shrink-0 items-center justify-center rounded-full lq-ease transition-[transform,background-color,box-shadow] duration-300 outline-none focus-visible:ring-3 focus-visible:ring-current/30 disabled:pointer-events-none disabled:opacity-40 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        /** Black on white — the default tile action. */\n        ink: \"bg-ink text-white shadow-[0_6px_16px_-6px_rgb(0_0_0/0.5)] hover:bg-ink/90\",\n        /** White on a tinted or photographic surface. */\n        chalk: \"bg-white text-ink shadow-[0_6px_16px_-6px_rgb(0_0_0/0.35)] hover:bg-white/92\",\n        /** Frosted — for orbs sitting over glass, where a solid fill would punch a hole. */\n        glass: \"lq-glass text-white\",\n        /** Hairline only. Reads as secondary next to an `ink` orb. */\n        hairline:\n          \"border border-current/25 text-current hover:border-current/45 hover:bg-current/5\",\n        /** Alert state — the vermilion accent from the Total Dept tile. */\n        flare: \"bg-flare text-white shadow-[0_6px_16px_-6px_oklch(0.665_0.222_36/0.6)] hover:brightness-105\",\n      },\n      size: {\n        sm: \"size-7 [&_svg]:size-3\",\n        md: \"size-9 [&_svg]:size-4\",\n        lg: \"size-11 [&_svg]:size-[18px]\",\n        xl: \"size-14 [&_svg]:size-6\",\n      },\n      /** Nudges the icon on hover along its own diagonal. */\n      lift: { true: \"\", false: \"\" },\n    },\n    compoundVariants: [\n      {\n        lift: true,\n        className:\n          \"[&_svg]:transition-transform [&_svg]:duration-300 hover:[&_svg]:-translate-y-px hover:[&_svg]:translate-x-px\",\n      },\n    ],\n    defaultVariants: { variant: \"ink\", size: \"md\", lift: true },\n  },\n)\n\nexport interface ActionOrbProps\n  extends React.ComponentProps<\"button\">,\n    VariantProps<typeof orb> {\n  asChild?: boolean\n  /** Defaults to the up-right arrow used throughout the reference set. */\n  icon?: React.ReactNode\n  /** Required unless children are provided — these buttons are icon-only. */\n  label?: string\n}\n\nexport function ActionOrb({\n  className,\n  variant,\n  size,\n  lift,\n  asChild,\n  icon,\n  label,\n  children,\n  ...props\n}: ActionOrbProps) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"action-orb\"\n      type={asChild ? undefined : \"button\"}\n      aria-label={label}\n      className={cn(orb({ variant, size, lift }), className)}\n      {...props}\n    >\n      {children ?? icon ?? <ArrowUpRight strokeWidth={2.25} />}\n    </Comp>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}