{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-color-picker-12","type":"registry:block","title":"Design inspector","description":"Fill, stroke and shadow rows that open a compact picker with vertical hue and opacity tracks.","dependencies":[],"registryDependencies":["card","@reui/color-picker"],"files":[{"path":"c-color-picker-12.tsx","type":"registry:block","content":"\"use client\"\n\nimport {\n  ColorPicker,\n  ColorPickerArea,\n  ColorPickerContent,\n  ColorPickerFields,\n  ColorPickerPanel,\n  ColorPickerSlider,\n  ColorPickerSwatch,\n  ColorPickerTrigger,\n  formatColor,\n  useColorPicker,\n} from \"@/components/reui/color-picker\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\n\nconst PROPERTIES = [\n  { id: \"inspector-fill\", label: \"Fill\", value: \"#6366f1\" },\n  { id: \"inspector-stroke\", label: \"Stroke\", value: \"#0f172a\" },\n  { id: \"inspector-shadow\", label: \"Shadow\", value: \"#0f172a40\" },\n]\n\n/* Hex and opacity apart, the way design tools print a color. */\nfunction InspectorValue() {\n  const { color } = useColorPicker()\n  if (!color) return null\n  return (\n    <>\n      <ColorPickerSwatch />\n      <span className=\"font-mono text-xs\">\n        {formatColor({ ...color, alpha: 1 }, \"hex\")\n          .slice(1)\n          .toUpperCase()}\n      </span>\n      <span className=\"text-muted-foreground ms-auto text-xs tabular-nums\">\n        {Math.round(color.alpha * 100)}%\n      </span>\n    </>\n  )\n}\n\nexport function Pattern() {\n  return (\n    <Card className=\"w-full max-w-xs\">\n      <CardHeader>\n        <CardTitle>Rectangle</CardTitle>\n        <CardDescription>Hero card, 320 by 180</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <div className=\"flex flex-col gap-2.5\">\n          {PROPERTIES.map(({ id, label, value }) => (\n            <div\n              key={id}\n              className=\"grid grid-cols-[3.5rem_1fr] items-center gap-3\"\n            >\n              <span id={id} className=\"text-muted-foreground text-sm\">\n                {label}\n              </span>\n              <ColorPicker defaultValue={value} alpha aria-labelledby={id}>\n                <ColorPickerTrigger size=\"sm\" className=\"w-full\">\n                  <InspectorValue />\n                </ColorPickerTrigger>\n                {/* Vertical hue and opacity tracks beside the area, the\n                    compact layout of a design tool's inspector. */}\n                <ColorPickerContent align=\"end\">\n                  <ColorPickerPanel>\n                    <div className=\"flex gap-3\">\n                      <ColorPickerArea className=\"h-44 w-auto min-w-0 flex-1\" />\n                      <ColorPickerSlider\n                        channel=\"hue\"\n                        orientation=\"vertical\"\n                        className=\"h-44\"\n                      />\n                      <ColorPickerSlider\n                        channel=\"alpha\"\n                        orientation=\"vertical\"\n                        className=\"h-44\"\n                      />\n                    </div>\n                    <ColorPickerFields />\n                  </ColorPickerPanel>\n                </ColorPickerContent>\n              </ColorPicker>\n            </div>\n          ))}\n        </div>\n      </CardContent>\n    </Card>\n  )\n}","target":"components/examples/c-color-picker-12.tsx"}],"meta":{"order":12,"label":"Design Inspector"}}