{"name":"color-picker","title":"Color Picker","description":"Pick a color from a saturation area, channel sliders, channel inputs, the screen eyedropper or a preset swatch.","installCommand":"bunx marko-ui add color-picker -y","usageTags":"<ColorPicker>","importSnippet":"import ColorPicker from \"@/components/ui/color-picker/color-picker.marko\";","usageSnippet":"<ColorPicker defaultValue=\"#8b5cf6\">\n  <@label>Brand color</@label>\n</ColorPicker>","tags":["ColorPicker"],"parts":[{"name":"label","description":"Visible label rendered above the control."}],"props":[{"name":"closeOnSelect","type":"boolean | undefined","required":false,"default":"false","description":"Whether to close the color picker when a swatch is selected"},{"name":"defaultFormat","type":"ColorFormat | undefined","required":false,"default":"rgba","description":"The initial color format when rendered.\nUse when you don't need to control the color format of the color picker."},{"name":"defaultOpen","type":"boolean | undefined","required":false,"description":"The initial open state of the color picker when rendered.\nUse when you don't need to control the open state of the color picker."},{"name":"defaultValue","type":"string | colorPickerMachine.Color","required":false,"description":"Initial color value — a CSS color string or a Zag `Color` object."},{"name":"dir","type":"'ltr' | 'rtl' | undefined","required":false,"default":"ltr","description":"The document's text/writing direction."},{"name":"disabled","type":"boolean | undefined","required":false,"description":"Whether the color picker is disabled"},{"name":"format","type":"ColorFormat | undefined","required":false,"description":"The controlled color format to use"},{"name":"getRootNode","type":"(() => ShadowRoot | Document | Node) | undefined","required":false,"description":"A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."},{"name":"hideEyeDropper","type":"boolean","required":false,"description":"Hide the eyedropper button even where the browser supports it."},{"name":"hideFormatSelect","type":"boolean","required":false,"description":"Hide the format select shown next to the channel inputs."},{"name":"ids","type":"ElementIds | undefined","required":false,"description":"The ids of the elements in the color picker. Useful for composition."},{"name":"initialFocusEl","type":"(() => HTMLElement | null) | undefined","required":false,"description":"The initial focus element when the color picker is opened."},{"name":"inline","type":"boolean | undefined","required":false,"description":"Whether to render the color picker inline"},{"name":"invalid","type":"boolean | undefined","required":false,"description":"Whether the color picker is invalid"},{"name":"name","type":"string | undefined","required":false,"description":"The name for the form input"},{"name":"open","type":"boolean | undefined","required":false,"description":"The controlled open state of the color picker"},{"name":"openAutoFocus","type":"boolean | undefined","required":false,"default":"true","description":"Whether to auto focus the color picker when it is opened"},{"name":"positioning","type":"PositioningOptions | undefined","required":false,"description":"The positioning options for the color picker"},{"name":"readOnly","type":"boolean | undefined","required":false,"description":"Whether the color picker is read-only"},{"name":"required","type":"boolean | undefined","required":false,"description":"Whether the color picker is required"},{"name":"swatches","type":"string[]","required":false,"description":"Preset swatch colors rendered under the channel inputs."},{"name":"value","type":"string | colorPickerMachine.Color","required":false,"description":"Color value — a CSS color string or a Zag `Color` object."},{"name":"valueChangeEnd","type":"(valueAsString: string) => void","required":false,"description":"Sugar for onValueChangeEnd — fires when the user stops dragging."}],"events":[{"name":"formatChange","arg":"colorPickerMachine.ColorFormat","description":"Sugar for onFormatChange — receives the plain format."},{"name":"onFocusOutside","arg":"FocusOutsideEvent","description":"Function called when the focus is moved outside the component"},{"name":"onFormatChange","arg":"FormatChangeDetails","description":"Function called when the color format changes"},{"name":"onInteractOutside","arg":"InteractOutsideEvent","description":"Function called when an interaction happens outside the component"},{"name":"onOpenChange","arg":"OpenChangeDetails","description":"Handler that is called when the user opens or closes the color picker."},{"name":"onPointerDownOutside","arg":"PointerDownOutsideEvent","description":"Function called when the pointer is pressed down outside the component"},{"name":"onValueChange","arg":"ValueChangeDetails","description":"Handler that is called when the value changes, as the user drags."},{"name":"onValueChangeEnd","arg":"ValueChangeDetails","description":"Handler that is called when the user stops dragging."},{"name":"openChange","arg":"boolean","description":"Sugar for onOpenChange — receives the plain boolean, enables `open:=state`."},{"name":"valueChange","arg":"string","description":"Sugar for onValueChange — receives the color as a string, enables `value:=state`."}],"keyboard":[],"accessibilityNotes":[],"examples":[{"id":"color-picker-demo","title":"Basic","source":"import ColorPicker from \"@marko-ui/shadcn/ui/color-picker/color-picker.marko\";\n\n<ColorPicker defaultValue=\"#8b5cf6\">\n  <@label>Brand color</@label>\n</ColorPicker>","description":"A color picker with a trigger swatch and popover controls."},{"id":"color-picker-swatches","title":"With swatch presets","source":"import ColorPicker from \"@marko-ui/shadcn/ui/color-picker/color-picker.marko\";\n\nstatic const PRESETS = [\n  \"#ef4444\",\n  \"#f97316\",\n  \"#eab308\",\n  \"#22c55e\",\n  \"#06b6d4\",\n  \"#3b82f6\",\n  \"#8b5cf6\",\n  \"#ec4899\",\n  \"#000000\",\n  \"#ffffff\",\n];\n\n<ColorPicker defaultValue=\"#22c55e\" swatches=PRESETS>\n  <@label>Accent</@label>\n</ColorPicker>","description":"Pass `swatches` to render a row of preset colors below the channel inputs."},{"id":"color-picker-hsl","title":"HSL format, no eyedropper","source":"import ColorPicker from \"@marko-ui/shadcn/ui/color-picker/color-picker.marko\";\n\n<ColorPicker defaultValue=\"hsl(200, 90%, 50%)\" defaultFormat=\"hsla\" hideEyeDropper>\n  <@label>Background</@label>\n</ColorPicker>","description":"Set `defaultFormat` to start in a different color space, and `hideEyeDropper` to drop the screen eyedropper button."},{"id":"color-picker-controlled","title":"Controlled","source":"import ColorPicker from \"@marko-ui/shadcn/ui/color-picker/color-picker.marko\";\n\nstatic const PRESETS = [\n  \"#ef4444\",\n  \"#f97316\",\n  \"#eab308\",\n  \"#22c55e\",\n  \"#06b6d4\",\n  \"#3b82f6\",\n  \"#8b5cf6\",\n  \"#ec4899\",\n  \"#000000\",\n  \"#ffffff\",\n];\n\n<let/controlledValue=\"#3b82f6\"/>\n\n<div class=\"flex flex-col gap-3\">\n  <ColorPicker value:=controlledValue swatches=PRESETS>\n    <@label>Controlled color</@label>\n  </ColorPicker>\n  <span class=\"text-muted-foreground text-sm\">\n    value: ${controlledValue}\n  </span>\n</div>","description":"Zag machines are controlled: a `value` prop without a change handler never moves. Pair it with `valueChange`, or use Marko's bind shorthand `value:=state`."},{"id":"color-picker-disabled","title":"Disabled","source":"import ColorPicker from \"@marko-ui/shadcn/ui/color-picker/color-picker.marko\";\n\n<ColorPicker defaultValue=\"#64748b\" disabled>\n  <@label>Disabled</@label>\n</ColorPicker>","description":"A disabled color picker is skipped by the tab order and ignores pointer input."}],"importInstallCommand":"bun add @marko-ui/shadcn marko-zag","nativeAttributes":"div"}