{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-color-picker-10","type":"registry:block","title":"Text and highlight colors","description":"Editor toolbar buttons with preset palettes and a way back to the default color.","dependencies":[],"registryDependencies":["@reui/color-picker","@reui/frame","separator","toggle"],"files":[{"path":"c-color-picker-10.tsx","type":"registry:block","content":"\"use client\"\n\nimport { useState } from \"react\"\nimport {\n  ColorPicker,\n  ColorPickerClear,\n  ColorPickerContent,\n  ColorPickerSwatches,\n  ColorPickerTrigger,\n} from \"@/components/reui/color-picker\"\nimport { Frame, FramePanel } from \"@/components/reui/frame\"\n\nimport { Separator } from \"@/components/ui/separator\"\nimport { Toggle } from \"@/components/ui/toggle\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst TEXT_COLORS = [\n  { value: \"#6b7280\", label: \"Gray\" },\n  { value: \"#dc2626\", label: \"Red\" },\n  { value: \"#ea580c\", label: \"Orange\" },\n  { value: \"#ca8a04\", label: \"Yellow\" },\n  { value: \"#16a34a\", label: \"Green\" },\n  { value: \"#0d9488\", label: \"Teal\" },\n  { value: \"#2563eb\", label: \"Blue\" },\n  { value: \"#7c3aed\", label: \"Violet\" },\n  { value: \"#db2777\", label: \"Pink\" },\n  { value: \"#92400e\", label: \"Brown\" },\n]\n\nconst HIGHLIGHTS = [\n  { value: \"#fef08a\", label: \"Yellow\" },\n  { value: \"#bbf7d0\", label: \"Green\" },\n  { value: \"#bfdbfe\", label: \"Blue\" },\n  { value: \"#fbcfe8\", label: \"Pink\" },\n  { value: \"#fed7aa\", label: \"Orange\" },\n  { value: \"#ddd6fe\", label: \"Violet\" },\n  { value: \"#99f6e4\", label: \"Teal\" },\n  { value: \"#fecaca\", label: \"Red\" },\n  { value: \"#d9f99d\", label: \"Lime\" },\n  { value: \"#e5e7eb\", label: \"Gray\" },\n]\n\nconst SWATCH_GRID = \"grid-cols-[repeat(5,var(--color-picker-swatch-size))]\"\n\n/* A palette menu: presets, then a way back to no color at all. */\nfunction ColorMenu({\n  title,\n  colors,\n  reset,\n}: {\n  title: string\n  colors: typeof TEXT_COLORS\n  reset: string\n}) {\n  return (\n    <ColorPickerContent className=\"w-auto\">\n      <span className=\"text-muted-foreground text-xs font-medium\">{title}</span>\n      <ColorPickerSwatches\n        colors={colors}\n        aria-label={title}\n        className={SWATCH_GRID}\n      />\n      <Separator />\n      <ColorPickerClear className=\"justify-start\">{reset}</ColorPickerClear>\n    </ColorPickerContent>\n  )\n}\n\nexport function Pattern() {\n  const [bold, setBold] = useState(false)\n  /* `null` is the editor's default ink and no highlight at all. */\n  const [ink, setInk] = useState<string | null>(null)\n  const [highlight, setHighlight] = useState<string | null>(\"#fef08a\")\n  /* Each palette closes on a pick, like an editor menu, and hands focus back\n     to its toolbar button. */\n  const [menu, setMenu] = useState<\"ink\" | \"highlight\" | null>(null)\n\n  return (\n    /* Two panels: the toolbar, then the text it formats. */\n    <Frame spacing=\"sm\" className=\"w-full max-w-md\">\n      <FramePanel>\n        <div className=\"flex items-center gap-1\">\n          <Toggle\n            size=\"sm\"\n            aria-label=\"Bold\"\n            pressed={bold}\n            onPressedChange={setBold}\n          >\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              phosphor=\"TextBIcon\"\n              remixicon=\"RiBold\"\n              aria-hidden=\"true\"\n            />\n          </Toggle>\n          <Separator orientation=\"vertical\" className=\"my-auto h-4\" />\n          <ColorPicker\n            value={ink}\n            onValueChange={setInk}\n            onValueCommit={() => setMenu(null)}\n            open={menu === \"ink\"}\n            onOpenChange={(open) => setMenu(open ? \"ink\" : null)}\n            aria-label=\"Text color\"\n          >\n            {/* The bar under the glyph shows the current ink. */}\n            <ColorPickerTrigger variant=\"ghost\" size=\"icon-sm\">\n              <span className=\"relative flex\">\n                <IconPlaceholder\n                  lucide=\"TypeIcon\"\n                  tabler=\"IconTypography\"\n                  hugeicons=\"TextIcon\"\n                  phosphor=\"TextTIcon\"\n                  remixicon=\"RiFontColor\"\n                  aria-hidden=\"true\"\n                />\n                <span\n                  aria-hidden=\"true\"\n                  className=\"absolute inset-x-0 -bottom-1 h-0.5 rounded-full\"\n                  style={{ background: ink ?? \"currentColor\" }}\n                />\n              </span>\n            </ColorPickerTrigger>\n            <ColorMenu\n              title=\"Text color\"\n              colors={TEXT_COLORS}\n              reset=\"Default color\"\n            />\n          </ColorPicker>\n          <ColorPicker\n            value={highlight}\n            onValueChange={setHighlight}\n            onValueCommit={() => setMenu(null)}\n            open={menu === \"highlight\"}\n            onOpenChange={(open) => setMenu(open ? \"highlight\" : null)}\n            aria-label=\"Highlight color\"\n          >\n            <ColorPickerTrigger variant=\"ghost\" size=\"icon-sm\">\n              <span className=\"relative flex\">\n                <IconPlaceholder\n                  lucide=\"HighlighterIcon\"\n                  tabler=\"IconHighlight\"\n                  hugeicons=\"HighlighterIcon\"\n                  phosphor=\"HighlighterIcon\"\n                  remixicon=\"RiMarkPenLine\"\n                  aria-hidden=\"true\"\n                />\n                <span\n                  aria-hidden=\"true\"\n                  className=\"absolute inset-x-0 -bottom-1 h-0.5 rounded-full\"\n                  style={{ background: highlight ?? \"transparent\" }}\n                />\n              </span>\n            </ColorPickerTrigger>\n            <ColorMenu\n              title=\"Highlight\"\n              colors={HIGHLIGHTS}\n              reset=\"No highlight\"\n            />\n          </ColorPicker>\n        </div>\n      </FramePanel>\n      <FramePanel>\n        <p\n          className=\"text-sm leading-relaxed data-bold:font-semibold\"\n          data-bold={bold || undefined}\n          style={{ color: ink ?? undefined }}\n        >\n          The launch review moves to Thursday.{\" \"}\n          <mark\n            className=\"rounded-sm px-0.5 text-inherit\"\n            style={{ backgroundColor: highlight ?? \"transparent\" }}\n          >\n            Bring the final pricing and the onboarding copy\n          </mark>{\" \"}\n          so we can sign off before the press embargo lifts.\n        </p>\n      </FramePanel>\n    </Frame>\n  )\n}","target":"components/examples/c-color-picker-10.tsx"}],"meta":{"order":10,"label":"Text & Highlight"}}