[{"data":1,"prerenderedAt":1604},["ShallowReactive",2],{"docs-navigation":3,"page:\u002Fcomponents\u002Fcolor-picker":571,"surround:\u002Fcomponents\u002Fcolor-picker":1595,"code:v-0-0-79-2-8-0":1600,"code:v-0-0-79-2-11-0":1601,"code:v-0-0-79-2-14-0":1602,"code:v-0-0-79-2-4-0-0":1603},[4,38,112,555],{"title":5,"path":6,"stem":7,"children":8,"navigation":35,"description":36,"icon":37},"Getting Started","\u002Fgetting-started","1.getting-started\u002F1.index",[9,14,21,28],{"title":10,"path":6,"stem":7,"navigation":11,"description":13,"icon":12},"Introduction",{"icon":12},"i-lucide-house","Unstyled Vue UI primitives with a Vue-native slots API.",{"title":15,"path":16,"stem":17,"navigation":18,"description":20,"icon":19},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation",{"icon":19},"i-lucide-download","Add Akaza UI to your Vue or Nuxt project in minutes.",{"title":22,"path":23,"stem":24,"navigation":25,"description":27,"icon":26},"Styling","\u002Fgetting-started\u002Fstyling","1.getting-started\u002F3.styling",{"icon":26},"i-lucide-paintbrush","Style Akaza UI with the ui prop, CSS classes, and data attributes.",{"title":29,"path":30,"stem":31,"navigation":32,"description":34,"icon":33},"Usage","\u002Fgetting-started\u002Fusage","1.getting-started\u002F4.usage",{"icon":33},"i-lucide-sliders","Learn the core patterns for using Akaza UI components.",true,null,false,{"title":39,"path":40,"stem":41,"children":42,"navigation":35,"description":36,"icon":37},"Composables","\u002Fcomposables","2.composables\u002F1.index",[43,48,55,62,73,82,89,96,103],{"title":44,"path":40,"stem":41,"navigation":45,"description":47,"icon":46},"All Composables",{"icon":46},"i-lucide-braces","Public Vue composables for programmatic control and shared state.",{"title":49,"path":50,"stem":51,"navigation":52,"description":54,"icon":53},"useColor","\u002Fcomposables\u002Fuse-color","2.composables\u002Fuse-color",{"icon":53},"i-lucide-palette","Convert color strings and edit color channels.",{"title":56,"path":57,"stem":58,"navigation":59,"description":61,"icon":60},"useDataTable","\u002Fcomposables\u002Fuse-data-table","2.composables\u002Fuse-data-table",{"icon":60},"i-lucide-table-2","Reactive table data, selection, sorting, filtering, pagination, and column state.",{"title":63,"path":64,"stem":65,"navigation":66,"description":71,"icon":67,"badge":72},"useDisclosure","\u002Fcomposables\u002Fuse-disclosure","2.composables\u002Fuse-disclosure",{"icon":67,"badge":68},"i-lucide-panel-top-open",{"label":69,"color":70},"NEW","success","Share boolean open state between controls.",{"label":69,"color":70},{"title":74,"path":75,"stem":76,"navigation":77,"description":80,"icon":78,"badge":81},"useFormReset","\u002Fcomposables\u002Fuse-form-reset","2.composables\u002Fuse-form-reset",{"icon":78,"badge":79},"i-lucide-rotate-ccw",{"label":69,"color":70},"Reset custom control state when its native form resets.",{"label":69,"color":70},{"title":83,"path":84,"stem":85,"navigation":86,"description":88,"icon":87},"useOverlay","\u002Fcomposables\u002Fuse-overlay","2.composables\u002Fuse-overlay",{"icon":87},"i-lucide-panels-top-left","Open dialogs, drawers, and custom overlays from Vue code.",{"title":90,"path":91,"stem":92,"navigation":93,"description":95,"icon":94},"useSidebar","\u002Fcomposables\u002Fuse-sidebar","2.composables\u002Fuse-sidebar",{"icon":94},"i-lucide-panel-left","Control one Sidebar instance or share responsive sidebar state.",{"title":97,"path":98,"stem":99,"navigation":100,"description":102,"icon":101},"useToast","\u002Fcomposables\u002Fuse-toast","2.composables\u002Fuse-toast",{"icon":101},"i-lucide-bell","Manage notification queues, actions, timers, and promise results.",{"title":104,"path":105,"stem":106,"navigation":107,"description":110,"icon":108,"badge":111},"useTypeahead","\u002Fcomposables\u002Fuse-typeahead","2.composables\u002Fuse-typeahead",{"icon":108,"badge":109},"i-lucide-keyboard",{"label":69,"color":70},"Buffer typed text for keyboard navigation.",{"label":69,"color":70},{"title":113,"path":114,"stem":115,"children":116,"navigation":35,"description":36,"icon":120},"Components","\u002Fcomponents","3.components\u002F1.index",[117,122,129,136,144,151,158,165,172,179,186,194,202,210,218,226,234,241,248,254,261,268,275,282,289,296,303,310,317,324,330,336,343,350,357,363,369,376,383,389,396,403,410,417,424,431,438,445,455,462,469,476,482,489,496,503,509,516,522,529,536,543,549],{"title":118,"path":114,"stem":115,"navigation":119,"description":121,"icon":120},"All Components",{"icon":120},"i-lucide-component","All available Akaza UI headless components.",{"title":123,"path":124,"stem":125,"navigation":126,"description":128,"icon":127},"Accordion","\u002Fcomponents\u002Faccordion","3.components\u002Faccordion",{"icon":127},"i-lucide-layout-panel-top","A set of collapsible sections with headings.",{"title":130,"path":131,"stem":132,"navigation":133,"description":135,"icon":134},"Alert Dialog","\u002Fcomponents\u002Falert-dialog","3.components\u002Falert-dialog",{"icon":134},"i-lucide-triangle-alert","A modal dialog that interrupts the user and requires a response.",{"title":137,"path":138,"stem":139,"navigation":140,"description":142,"icon":87,"badge":143},"App Layout","\u002Fcomponents\u002Fapp-layout","3.components\u002Fapp-layout",{"icon":87,"badge":141},{"label":69,"color":70},"Header, content, sidebars, and footer in one application shell.",{"label":69,"color":70},{"title":145,"path":146,"stem":147,"navigation":148,"description":150,"icon":149},"Avatar","\u002Fcomponents\u002Favatar","3.components\u002Favatar",{"icon":149},"i-lucide-circle-user","An image element with a fallback for when the image fails to load.",{"title":152,"path":153,"stem":154,"navigation":155,"description":157,"icon":156},"Button","\u002Fcomponents\u002Fbutton","3.components\u002Fbutton",{"icon":156},"i-lucide-mouse-pointer-click","A button that can show a loading state during async operations.",{"title":159,"path":160,"stem":161,"navigation":162,"description":164,"icon":163},"Calendar","\u002Fcomponents\u002Fcalendar","3.components\u002Fcalendar",{"icon":163},"i-lucide-calendar-days","Locale-aware date grid with keyboard navigation, constraints, and single, multiple, or range selection.",{"title":166,"path":167,"stem":168,"navigation":169,"description":171,"icon":170},"Checkbox","\u002Fcomponents\u002Fcheckbox","3.components\u002Fcheckbox",{"icon":170},"i-lucide-square-check","A control that allows the user to toggle between checked and unchecked states.",{"title":173,"path":174,"stem":175,"navigation":176,"description":178,"icon":177},"Checkbox Group","\u002Fcomponents\u002Fcheckbox-group","3.components\u002Fcheckbox-group",{"icon":177},"i-lucide-list-checks","Items-based multi-select built on Checkbox.",{"title":180,"path":181,"stem":182,"navigation":183,"description":185,"icon":184},"Collapsible","\u002Fcomponents\u002Fcollapsible","3.components\u002Fcollapsible",{"icon":184},"i-lucide-chevrons-down-up","A single section that can be expanded or collapsed.",{"title":187,"path":188,"stem":189,"navigation":190,"description":192,"icon":53,"badge":193},"Color Area","\u002Fcomponents\u002Fcolor-area","3.components\u002Fcolor-area",{"icon":53,"badge":191},{"label":69,"color":70},"A two-dimensional color selector.",{"label":69,"color":70},{"title":195,"path":196,"stem":197,"navigation":198,"description":200,"icon":53,"badge":201},"Color Field","\u002Fcomponents\u002Fcolor-field","3.components\u002Fcolor-field",{"icon":53,"badge":199},{"label":69,"color":70},"An input for CSS colors or a single color channel.",{"label":69,"color":70},{"title":203,"path":204,"stem":205,"navigation":206,"description":208,"icon":53,"badge":209},"Color Picker","\u002Fcomponents\u002Fcolor-picker","3.components\u002Fcolor-picker",{"icon":53,"badge":207},{"label":69,"color":70},"A color editor with an area, sliders, and text input.",{"label":69,"color":70},{"title":211,"path":212,"stem":213,"navigation":214,"description":216,"icon":53,"badge":217},"Color Slider","\u002Fcomponents\u002Fcolor-slider","3.components\u002Fcolor-slider",{"icon":53,"badge":215},{"label":69,"color":70},"A slider for hue, opacity, or another color channel.",{"label":69,"color":70},{"title":219,"path":220,"stem":221,"navigation":222,"description":224,"icon":53,"badge":225},"Color Swatch","\u002Fcomponents\u002Fcolor-swatch","3.components\u002Fcolor-swatch",{"icon":53,"badge":223},{"label":69,"color":70},"A read-only color preview.",{"label":69,"color":70},{"title":227,"path":228,"stem":229,"navigation":230,"description":232,"icon":53,"badge":233},"Color Swatch Picker","\u002Fcomponents\u002Fcolor-swatch-picker","3.components\u002Fcolor-swatch-picker",{"icon":53,"badge":231},{"label":69,"color":70},"Choose one or more colors from a list.",{"label":69,"color":70},{"title":235,"path":236,"stem":237,"navigation":238,"description":240,"icon":239},"Combobox","\u002Fcomponents\u002Fcombobox","3.components\u002Fcombobox",{"icon":239},"i-lucide-search","Input plus listbox selection with filtering and active-descendant navigation.",{"title":242,"path":243,"stem":244,"navigation":245,"description":247,"icon":246},"Context Menu","\u002Fcomponents\u002Fcontext-menu","3.components\u002Fcontext-menu",{"icon":246},"i-lucide-mouse-pointer-2","Right-click triggered menu positioned at the pointer.",{"title":249,"path":250,"stem":251,"navigation":252,"description":253,"icon":60},"Data Table","\u002Fcomponents\u002Fdata-table","3.components\u002Fdata-table",{"icon":60},"Semantic tables with sorting, filtering, selection, pagination, expansion, and resizing.",{"title":255,"path":256,"stem":257,"navigation":258,"description":260,"icon":259},"Date Field","\u002Fcomponents\u002Fdate-field","3.components\u002Fdate-field",{"icon":259},"i-lucide-calendar-clock","Locale-ordered segmented date input with keyboard editing, optional Calendar, validation, paste, and native forms.",{"title":262,"path":263,"stem":264,"navigation":265,"description":267,"icon":266},"Date Range Field","\u002Fcomponents\u002Fdate-range-field","3.components\u002Fdate-range-field",{"icon":266},"i-lucide-calendar-range","Locale-ordered segmented start and end dates with aggregate validation, fixed endpoints, and native forms.",{"title":269,"path":270,"stem":271,"navigation":272,"description":274,"icon":273},"Date Range Picker","\u002Fcomponents\u002Fdate-range-picker","3.components\u002Fdate-range-picker",{"icon":273},"i-lucide-calendar-search","Segmented date-range entry and an accessible range Calendar in one collision-aware popup.",{"title":276,"path":277,"stem":278,"navigation":279,"description":281,"icon":280},"Dialog","\u002Fcomponents\u002Fdialog","3.components\u002Fdialog",{"icon":280},"i-lucide-square","A modal dialog that appears over the page and traps focus.",{"title":283,"path":284,"stem":285,"navigation":286,"description":288,"icon":287},"Drawer","\u002Fcomponents\u002Fdrawer","3.components\u002Fdrawer",{"icon":287},"i-lucide-panel-right","A panel that slides in from the edge of the viewport.",{"title":290,"path":291,"stem":292,"navigation":293,"description":295,"icon":294},"Editable","\u002Fcomponents\u002Feditable","3.components\u002Feditable",{"icon":294},"i-lucide-square-pen","Inline text editing with preview, draft, submit, cancel, and native form behavior.",{"title":297,"path":298,"stem":299,"navigation":300,"description":302,"icon":301},"Field","\u002Fcomponents\u002Ffield","3.components\u002Ffield",{"icon":301},"i-lucide-text-cursor-input","Label, description, and error wiring for form controls.",{"title":304,"path":305,"stem":306,"navigation":307,"description":309,"icon":308},"Fieldset","\u002Fcomponents\u002Ffieldset","3.components\u002Ffieldset",{"icon":308},"i-lucide-group","Native fieldset and legend wrapper for related controls.",{"title":311,"path":312,"stem":313,"navigation":314,"description":316,"icon":315},"Form","\u002Fcomponents\u002Fform","3.components\u002Fform",{"icon":315},"i-lucide-clipboard-check","Submit wrapper that exposes FormData and native validity state.",{"title":318,"path":319,"stem":320,"navigation":321,"description":323,"icon":322},"Hover Preview Card","\u002Fcomponents\u002Fhover-preview-card","3.components\u002Fhover-preview-card",{"icon":322},"i-lucide-id-card","Hover-triggered rich content preview for links, users, and entities.",{"title":325,"path":326,"stem":327,"navigation":328,"description":329,"icon":301},"Input","\u002Fcomponents\u002Finput","3.components\u002Finput",{"icon":301},"Native text input with Field integration and invalid state attributes.",{"title":331,"path":332,"stem":333,"navigation":334,"description":335,"icon":177},"Listbox","\u002Fcomponents\u002Flistbox","3.components\u002Flistbox",{"icon":177},"Standalone selectable list with single, multiple, filtered, and virtualized modes.",{"title":337,"path":338,"stem":339,"navigation":340,"description":342,"icon":341},"Menu","\u002Fcomponents\u002Fmenu","3.components\u002Fmenu",{"icon":341},"i-lucide-list","A floating menu of actions, anchored to a trigger element.",{"title":344,"path":345,"stem":346,"navigation":347,"description":349,"icon":348},"Menubar","\u002Fcomponents\u002Fmenubar","3.components\u002Fmenubar",{"icon":348},"i-lucide-panel-top","Horizontal menu strip with arrow-key navigation across menus.",{"title":351,"path":352,"stem":353,"navigation":354,"description":356,"icon":355},"Meter","\u002Fcomponents\u002Fmeter","3.components\u002Fmeter",{"icon":355},"i-lucide-gauge","Read-only gauge for displaying a bounded numeric value.",{"title":358,"path":359,"stem":360,"navigation":361,"description":362,"icon":266},"Month Picker","\u002Fcomponents\u002Fmonth-picker","3.components\u002Fmonth-picker",{"icon":266},"Accessible month grid with locale labels, paging, constraints, and single or multiple selection.",{"title":364,"path":365,"stem":366,"navigation":367,"description":368,"icon":266},"Month Range Picker","\u002Fcomponents\u002Fmonth-range-picker","3.components\u002Fmonth-range-picker",{"icon":266},"Accessible month-level range selection with preview, limits, fixed endpoints, and constraints.",{"title":370,"path":371,"stem":372,"navigation":373,"description":375,"icon":374},"Navigation Menu","\u002Fcomponents\u002Fnavigation-menu","3.components\u002Fnavigation-menu",{"icon":374},"i-lucide-navigation","Horizontal flyout and vertical application navigation from one items API.",{"title":377,"path":378,"stem":379,"navigation":380,"description":382,"icon":381},"Number Field","\u002Fcomponents\u002Fnumber-field","3.components\u002Fnumber-field",{"icon":381},"i-lucide-badge-plus","Spinbutton number input with increment and decrement controls.",{"title":384,"path":385,"stem":386,"navigation":387,"description":388,"icon":87},"Overlay Provider","\u002Fcomponents\u002Foverlay","3.components\u002Foverlay",{"icon":87},"Programmatic overlay mounting with useOverlay.",{"title":390,"path":391,"stem":392,"navigation":393,"description":395,"icon":394},"Pagination","\u002Fcomponents\u002Fpagination","3.components\u002Fpagination",{"icon":394},"i-lucide-ellipsis","Accessible page navigation with ranges, ellipses, boundary controls, and optional links.",{"title":397,"path":398,"stem":399,"navigation":400,"description":402,"icon":401},"Pin \u002F OTP Input","\u002Fcomponents\u002Fpin-input","3.components\u002Fpin-input",{"icon":401},"i-lucide-binary","Multi-cell input for verification codes, PINs, and fixed-length tokens.",{"title":404,"path":405,"stem":406,"navigation":407,"description":409,"icon":408},"Popover","\u002Fcomponents\u002Fpopover","3.components\u002Fpopover",{"icon":408},"i-lucide-message-square","A floating panel anchored to a trigger element.",{"title":411,"path":412,"stem":413,"navigation":414,"description":416,"icon":415},"Progress","\u002Fcomponents\u002Fprogress","3.components\u002Fprogress",{"icon":415},"i-lucide-loader","Displays a value indicating completion of a task.",{"title":418,"path":419,"stem":420,"navigation":421,"description":423,"icon":422},"Radio Group","\u002Fcomponents\u002Fradio-group","3.components\u002Fradio-group",{"icon":422},"i-lucide-circle-dot","A group of radio buttons where only one can be selected at a time.",{"title":425,"path":426,"stem":427,"navigation":428,"description":430,"icon":429},"Rating","\u002Fcomponents\u002Frating","3.components\u002Frating",{"icon":429},"i-lucide-star","Accessible rating input with fractional values, hover preview, keyboard navigation, and forms.",{"title":432,"path":433,"stem":434,"navigation":435,"description":437,"icon":436},"Select","\u002Fcomponents\u002Fselect","3.components\u002Fselect",{"icon":436},"i-lucide-list-filter","Single or multiple listbox select with keyboard navigation, typeahead, and form submission.",{"title":439,"path":440,"stem":441,"navigation":442,"description":444,"icon":443},"Separator","\u002Fcomponents\u002Fseparator","3.components\u002Fseparator",{"icon":443},"i-lucide-minus","A visual or semantic divider between content sections.",{"title":446,"path":447,"stem":448,"navigation":449,"description":453,"icon":94,"badge":454},"Sidebar","\u002Fcomponents\u002Fsidebar","3.components\u002Fsidebar",{"icon":94,"badge":450},{"label":451,"color":452},"UPDATED","warning","Responsive application sidebar with desktop collapse, resizing, and mobile dialog behavior.",{"label":451,"color":452},{"title":456,"path":457,"stem":458,"navigation":459,"description":461,"icon":460},"Slider","\u002Fcomponents\u002Fslider","3.components\u002Fslider",{"icon":460},"i-lucide-sliders-horizontal","Single-value or range slider with pointer drag, keyboard step, and ARIA metadata.",{"title":463,"path":464,"stem":465,"navigation":466,"description":468,"icon":467},"Stepper","\u002Fcomponents\u002Fstepper","3.components\u002Fstepper",{"icon":467},"i-lucide-list-ordered","Multi-step progress and navigation with linear rules, roving focus, and associated panels.",{"title":470,"path":471,"stem":472,"navigation":473,"description":475,"icon":474},"Switch","\u002Fcomponents\u002Fswitch","3.components\u002Fswitch",{"icon":474},"i-lucide-toggle-left","A toggle control for binary or custom on\u002Foff values.",{"title":477,"path":478,"stem":479,"navigation":480,"description":481,"icon":127},"Tabs","\u002Fcomponents\u002Ftabs","3.components\u002Ftabs",{"icon":127},"A set of layered sections of content, one visible at a time.",{"title":483,"path":484,"stem":485,"navigation":486,"description":488,"icon":487},"Tags Input","\u002Fcomponents\u002Ftags-input","3.components\u002Ftags-input",{"icon":487},"i-lucide-tags","Tokenized text input with keyboard editing, paste handling, validation, and form submission.",{"title":490,"path":491,"stem":492,"navigation":493,"description":495,"icon":494},"Time Field","\u002Fcomponents\u002Ftime-field","3.components\u002Ftime-field",{"icon":494},"i-lucide-clock-3","Locale-aware segmented time input with keyboard editing, constraints, granularity, and native forms.",{"title":497,"path":498,"stem":499,"navigation":500,"description":502,"icon":501},"Time Range Field","\u002Fcomponents\u002Ftime-range-field","3.components\u002Ftime-range-field",{"icon":501},"i-lucide-clock-arrow-up","Coordinated segmented start and end times with aggregate validation and native form values.",{"title":504,"path":505,"stem":506,"navigation":507,"description":508,"icon":408},"Toast","\u002Fcomponents\u002Ftoast","3.components\u002Ftoast",{"icon":408},"Queued status and alert notifications with stacking, actions, updates, promise state, and swipe dismissal.",{"title":510,"path":511,"stem":512,"navigation":513,"description":515,"icon":514},"Toggle","\u002Fcomponents\u002Ftoggle","3.components\u002Ftoggle",{"icon":514},"i-lucide-toggle-right","A two-state button that can be on or off.",{"title":517,"path":518,"stem":519,"navigation":520,"description":521,"icon":177},"Toggle Group","\u002Fcomponents\u002Ftoggle-group","3.components\u002Ftoggle-group",{"icon":177},"Single or multiple pressed values with roving keyboard focus.",{"title":523,"path":524,"stem":525,"navigation":526,"description":528,"icon":527},"Toolbar","\u002Fcomponents\u002Ftoolbar","3.components\u002Ftoolbar",{"icon":527},"i-lucide-wrench","Command strip with roving focus across buttons, links, inputs, groups, and separators.",{"title":530,"path":531,"stem":532,"navigation":533,"description":535,"icon":534},"Tooltip","\u002Fcomponents\u002Ftooltip","3.components\u002Ftooltip",{"icon":534},"i-lucide-info","A floating label that appears when the user hovers or focuses an element.",{"title":537,"path":538,"stem":539,"navigation":540,"description":542,"icon":541},"Tree","\u002Fcomponents\u002Ftree","3.components\u002Ftree",{"icon":541},"i-lucide-folder-tree","Accessible hierarchical navigation and selection with lazy loading, propagation, typeahead, and virtualization.",{"title":544,"path":545,"stem":546,"navigation":547,"description":548,"icon":163},"Year Picker","\u002Fcomponents\u002Fyear-picker","3.components\u002Fyear-picker",{"icon":163},"Accessible paged year grid with constraints and single or multiple selection.",{"title":550,"path":551,"stem":552,"navigation":553,"description":554,"icon":266},"Year Range Picker","\u002Fcomponents\u002Fyear-range-picker","3.components\u002Fyear-range-picker",{"icon":266},"Accessible year-level range selection with preview, limits, fixed endpoints, and paging.",{"title":556,"path":557,"stem":558,"children":559,"navigation":35,"description":36,"icon":37},"Builders","\u002Fbuilders","4.builders\u002F1.index",[560,564],{"title":561,"path":557,"stem":558,"navigation":562,"description":563,"icon":87},"All Builders",{"icon":87},"Configure component combinations and get their Vue markup.",{"title":565,"path":566,"stem":567,"navigation":568,"description":570,"icon":569},"Layout Builder","\u002Fbuilders\u002Flayout-builder","4.builders\u002Flayout-builder",{"icon":569},"i-lucide-layout-dashboard","Arrange an application shell and generate its Vue structure.",{"id":572,"title":203,"body":573,"description":208,"extension":1589,"links":36,"meta":1590,"navigation":1591,"path":204,"seo":1593,"stem":205,"__hash__":1594},"docs\u002F3.components\u002Fcolor-picker.md",{"type":574,"value":575,"toc":1566},"minimark",[576,581,643,646,652,665,669,674,682,688,692,703,709,713,716,722,725,729,753,761,776,780,783,796,826,830,834,1074,1078,1147,1151,1195,1199,1326,1330,1469,1497,1510,1514,1559,1563],[577,578,580],"h2",{"id":579},"anatomy","Anatomy",[582,583,584,595,603,611,619,627,635],"ul",{},[585,586,587,594],"li",{},[588,589,590],"strong",{},[591,592,593],"code",{},"#default",": Replace the inner controls. The group and hidden form input remain.",[585,596,597,602],{},[588,598,599],{},[591,600,601],{},"#area",": Replace the two-axis area.",[585,604,605,610],{},[588,606,607],{},[591,608,609],{},"#hue",": Replace the hue slider.",[585,612,613,618],{},[588,614,615],{},[591,616,617],{},"#alpha",": Replace the opacity slider.",[585,620,621,626],{},[588,622,623],{},[591,624,625],{},"#field",": Replace the color text input.",[585,628,629,634],{},[588,630,631],{},[591,632,633],{},"#preview",": Replace the selected-color preview.",[585,636,637,642],{},[588,638,639],{},[591,640,641],{},"#swatches",": Replace the optional preset palette.",[577,644,29],{"id":645},"usage",[647,648,649],"component-preview",{},[650,651],"examples-color-picker-demo",{},[653,654,655],"component-code",{},[656,657,663],"pre",{"className":658,"code":660,"language":661,"meta":662},[659],"language-vue","\u003Cscript setup lang=\"ts\">\nimport { ColorPicker } from \"akaza-ui\";\nimport { ref } from \"vue\";\nconst color = ref(\"#3b82f6\");\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CColorPicker\n    v-model=\"color\"\n    format=\"oklch\"\n    aria-label=\"Brand color\"\n    :ui=\"{\n      root: 'grid max-w-sm gap-3',\n      area: { root: 'h-44', thumb: 'size-4 rounded-full border-2 border-white' },\n      hue: {\n        root: 'h-6',\n        track: 'h-3',\n        thumb: 'size-4 rounded-full border-2 border-white',\n      },\n      alpha: {\n        root: 'h-6',\n        track: 'h-3',\n        thumb: 'size-4 rounded-full border-2 border-white',\n      },\n      field: { input: 'h-9 w-full border px-3' },\n      preview: { root: 'block size-9 border' },\n      fields: 'flex items-center gap-2',\n    }\"\n  \u002F>\n\u003C\u002Ftemplate>\n","vue","",[591,664,660],{"__ignoreMap":662},[577,666,668],{"id":667},"examples","Examples",[670,671,673],"h3",{"id":672},"output-format","Output format",[675,676,677,678,681],"p",{},"Choose the format for ",[591,679,680],{},"v-model",". You can still change hue when the selected color is gray or black.",[656,683,686],{"className":684,"code":685,"language":661,"meta":662},[659],"\u003Ctemplate>\n  \u003Clabel class=\"grid max-w-sm gap-1 text-xs text-muted-foreground\">\n    Output format\n    \u003Cselect\n      v-model=\"format\"\n      class=\"h-9 rounded-md border border-input bg-background px-2 text-sm text-foreground\"\n    >\n      \u003Coption\n        v-for=\"item in COLOR_FORMATS\"\n        :key=\"item\"\n        :value=\"item\"\n      >\n        {{ item }}\n      \u003C\u002Foption>\n    \u003C\u002Fselect>\n  \u003C\u002Flabel>\n  \u003CColorPicker\n    v-model=\"color\"\n    :format=\"format\"\n    :items=\"palette\"\n    :ui=\"pickerUi\"\n    aria-label=\"Brand color\"\n    @value-commit=\"committed = $event\"\n  \u002F>\n  \u003Coutput class=\"block break-all font-mono text-xs text-muted-foreground\">\n    {{ color }}\n  \u003C\u002Foutput>\n  \u003Cp class=\"break-all text-xs text-muted-foreground\">\n    Committed: {{ committed || \"No interaction yet\" }}\n  \u003C\u002Fp>\n\u003C\u002Ftemplate>\n",[591,687,685],{"__ignoreMap":662},[670,689,691],{"id":690},"popover-composition","Popover composition",[675,693,694,695,698,699,702],{},"Put the picker in Popover's ",[591,696,697],{},"#content"," slot and its button in ",[591,700,701],{},"#trigger",". Use separate models for the popup's open state and the color.",[656,704,707],{"className":705,"code":706,"language":661,"meta":662},[659],"\u003Ctemplate>\n  \u003CPopover\n    v-model=\"open\"\n    teleport=\"body\"\n    :ui=\"{\n      content:\n        'max-h-[calc(100dvh-1rem)] w-[min(90vw,22rem)] overflow-y-auto rounded-md border border-border bg-popover p-4 shadow-lg',\n    }\"\n  >\n    \u003Ctemplate #trigger=\"{ toggle, triggerProps }\">\n      \u003Cbutton\n        type=\"button\"\n        class=\"inline-flex items-center gap-2 rounded-md border border-input px-3 py-2 text-sm\"\n        v-bind=\"triggerProps\"\n        @click=\"toggle\"\n      >\n        \u003CColorSwatch\n          :color=\"color\"\n          decorative\n          :ui=\"swatchUi\"\n        \u002F>\n        Choose color\n      \u003C\u002Fbutton>\n    \u003C\u002Ftemplate>\n    \u003Ctemplate #content>\n      \u003CColorPicker\n        v-model=\"color\"\n        :format=\"format\"\n        :ui=\"pickerUi\"\n        aria-label=\"Popup color\"\n      \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FPopover>\n\u003C\u002Ftemplate>\n",[591,708,706],{"__ignoreMap":662},[670,710,712],{"id":711},"read-only-and-disabled","Read-only and disabled",[675,714,715],{},"These states retain the chosen value and prevent edits.",[656,717,720],{"className":718,"code":719,"language":661,"meta":662},[659],"\u003Ctemplate>\n  \u003CColorPicker\n    :model-value=\"color\"\n    read-only\n    :ui=\"pickerUi\"\n    aria-label=\"Read-only color\"\n  \u002F>\n  \u003CColorPicker\n    :model-value=\"color\"\n    disabled\n    :show-alpha=\"false\"\n    :ui=\"pickerUi\"\n    aria-label=\"Disabled color\"\n  \u002F>\n\u003C\u002Ftemplate>\n",[591,721,719],{"__ignoreMap":662},[675,723,724],{},"See the live demo's code for the state and style objects used in these examples.",[577,726,728],{"id":727},"formats","Formats",[675,730,731,732,735,736,741,742,745,746,748,749,752],{},"Set ",[591,733,734],{},"format"," to choose the returned color string. It does not change which colors you can enter or which channels you edit. See ",[737,738,740],"a",{"href":739},"\u002Fcomposables\u002Fuse-color#formats","supported formats",". Changing the format keeps opacity and emits ",[591,743,744],{},"value-change"," with reason ",[591,747,734],{},". HEX uses eight digits for transparent colors; ",[591,750,751],{},"hexa"," uses eight digits for all colors.",[675,754,755,756,760],{},"HEX and RGB can lose colors outside sRGB. The control keeps the original color until you replace the model or enter a new value. Area and slider previews use sRGB. See ",[737,757,759],{"href":758},"\u002Fcomposables\u002Fuse-color#precision-and-gamut","precision and gamut"," for details.",[675,762,763,764,767,768,771,772,775],{},"Use a color value such as ",[591,765,766],{},"#56d799"," or ",[591,769,770],{},"oklch(0.65 0.2 250)",". CSS variables, ",[591,773,774],{},"currentColor",", and relative color expressions are not supported.",[577,777,779],{"id":778},"behavior","Behavior",[675,781,782],{},"The picker renders inline. Use Popover to show it in a popup. Its controls share one color, including hue changes while the value is black or gray.",[675,784,785,786,788,789,791,792,795],{},"ColorArea, ColorSlider, and ColorField in a picker slot share its color and format when you omit their ",[591,787,680],{},". Adding a child model gives that control a separate color. Listen to the picker's ",[591,790,744],{}," and ",[591,793,794],{},"value-commit"," events for shared changes. The picker submits one named form value; its default children do not submit extra values.",[675,797,798,799,802,803,802,806,802,808,802,811,802,814,817,818,821,822,825],{},"The default slot provides ",[591,800,801],{},"value",", ",[591,804,805],{},"cssColor",[591,807,734],{},[591,809,810],{},"isOutOfGamut",[591,812,813],{},"setValue(value)",[591,815,816],{},"setChannels(space, changes)",", and ",[591,819,820],{},"getChannel(space, channel)",". Pass arguments when calling actions, for example ",[591,823,824],{},"@click=\"setValue('#ff0000')\"",".",[577,827,829],{"id":828},"api-reference","API Reference",[670,831,833],{"id":832},"props","Props",[835,836,837,856],"table",{},[838,839,840],"thead",{},[841,842,843,847,850,853],"tr",{},[844,845,846],"th",{},"Prop",[844,848,849],{},"Type",[844,851,852],{},"Default",[844,854,855],{},"Purpose",[857,858,859,882,901,921,950,973,989,1009,1034,1054],"tbody",{},[841,860,861,867,872,877],{},[862,863,864],"td",{},[591,865,866],{},"modelValue",[862,868,869],{},[591,870,871],{},"string",[862,873,874],{},[591,875,876],{},"\"#ff0000\"",[862,878,879,880,825],{},"Selected CSS color. Bind with ",[591,881,680],{},[841,883,884,888,893,898],{},[862,885,886],{},[591,887,734],{},[862,889,890],{},[591,891,892],{},"ColorFormat",[862,894,895],{},[591,896,897],{},"\"hex\"",[862,899,900],{},"Format for the returned and submitted color string.",[841,902,903,911,915,918],{},[862,904,905,802,908],{},[591,906,907],{},"id",[591,909,910],{},"name",[862,912,913],{},[591,914,871],{},[862,916,917],{},"From Field",[862,919,920],{},"Input ID and form field name.",[841,922,923,937,942,947],{},[862,924,925,802,928,802,931,802,934],{},[591,926,927],{},"required",[591,929,930],{},"disabled",[591,932,933],{},"readOnly",[591,935,936],{},"invalid",[862,938,939],{},[591,940,941],{},"boolean",[862,943,944],{},[591,945,946],{},"false",[862,948,949],{},"Native validation and interaction states; disabled\u002Frequired also inherit from Field.",[841,951,952,963,967,970],{},[862,953,954,802,957,802,960],{},[591,955,956],{},"ariaLabel",[591,958,959],{},"ariaLabelledby",[591,961,962],{},"ariaDescribedby",[862,964,965],{},[591,966,871],{},[862,968,969],{},"From Field where applicable",[862,971,972],{},"Accessible naming and description.",[841,974,975,980,983,986],{},[862,976,977],{},[591,978,979],{},"ui",[862,981,982],{},"Component UI object",[862,984,985],{},"-",[862,987,988],{},"Classes for the named parts below.",[841,990,991,996,1001,1006],{},[862,992,993],{},[591,994,995],{},"colorSpace",[862,997,998],{},[591,999,1000],{},"\"hsb\" | \"hsl\" | \"lch\" | \"oklch\"",[862,1002,1003],{},[591,1004,1005],{},"\"hsb\"",[862,1007,1008],{},"Editing space; independent of output format.",[841,1010,1011,1022,1026,1031],{},[862,1012,1013,802,1016,802,1019],{},[591,1014,1015],{},"showAlpha",[591,1017,1018],{},"showField",[591,1020,1021],{},"showPreview",[862,1023,1024],{},[591,1025,941],{},[862,1027,1028],{},[591,1029,1030],{},"true",[862,1032,1033],{},"Show or hide the default controls. Hiding alpha does not discard existing transparency.",[841,1035,1036,1041,1046,1051],{},[862,1037,1038],{},[591,1039,1040],{},"items",[862,1042,1043],{},[591,1044,1045],{},"Array\u003Cstring | ColorSwatchOption>",[862,1047,1048],{},[591,1049,1050],{},"[]",[862,1052,1053],{},"Optional presets.",[841,1055,1056,1061,1066,1071],{},[862,1057,1058],{},[591,1059,1060],{},"dir",[862,1062,1063],{},[591,1064,1065],{},"\"ltr\" | \"rtl\"",[862,1067,1068],{},[591,1069,1070],{},"\"ltr\"",[862,1072,1073],{},"Horizontal direction.",[670,1075,1077],{"id":1076},"emits","Emits",[835,1079,1080,1093],{},[838,1081,1082],{},[841,1083,1084,1087,1090],{},[844,1085,1086],{},"Event",[844,1088,1089],{},"Payload",[844,1091,1092],{},"Meaning",[857,1094,1095,1108,1134],{},[841,1096,1097,1102,1105],{},[862,1098,1099],{},[591,1100,1101],{},"update:modelValue",[862,1103,1104],{},"Selected color",[862,1106,1107],{},"Vue model update.",[841,1109,1110,1114,1119],{},[862,1111,1112],{},[591,1113,744],{},[862,1115,1116],{},[591,1117,1118],{},"(value, details)",[862,1120,1121,1122,1125,1126,1129,1130,1133],{},"Runs before a change. Use ",[591,1123,1124],{},"details.cancel()"," to stop it. Includes ",[591,1127,1128],{},"reason"," and the native ",[591,1131,1132],{},"event"," when available.",[841,1135,1136,1140,1144],{},[862,1137,1138],{},[591,1139,794],{},[862,1141,1142],{},[591,1143,1118],{},[862,1145,1146],{},"Runs when an interaction ends. Canceling it does not undo the value change.",[670,1148,1150],{"id":1149},"slots","Slots",[582,1152,1153,1159,1165,1171,1177,1183,1189],{},[585,1154,1155,594],{},[588,1156,1157],{},[591,1158,593],{},[585,1160,1161,602],{},[588,1162,1163],{},[591,1164,601],{},[585,1166,1167,610],{},[588,1168,1169],{},[591,1170,609],{},[585,1172,1173,618],{},[588,1174,1175],{},[591,1176,617],{},[585,1178,1179,626],{},[588,1180,1181],{},[591,1182,625],{},[585,1184,1185,634],{},[588,1186,1187],{},[591,1188,633],{},[585,1190,1191,642],{},[588,1192,1193],{},[591,1194,641],{},[670,1196,1198],{"id":1197},"ui-options","UI Options",[835,1200,1201,1211],{},[838,1202,1203],{},[841,1204,1205,1208],{},[844,1206,1207],{},"Key",[844,1209,1210],{},"Element",[857,1212,1213,1223,1233,1243,1253,1267,1280,1292,1304,1316],{},[841,1214,1215,1220],{},[862,1216,1217],{},[591,1218,1219],{},"root",[862,1221,1222],{},"Outer group",[841,1224,1225,1230],{},[862,1226,1227],{},[591,1228,1229],{},"controls",[862,1231,1232],{},"Slider container",[841,1234,1235,1240],{},[862,1236,1237],{},[591,1238,1239],{},"fields",[862,1241,1242],{},"Preview and field row",[841,1244,1245,1250],{},[862,1246,1247],{},[591,1248,1249],{},"input",[862,1251,1252],{},"Visually hidden input for form submission and validation",[841,1254,1255,1260],{},[862,1256,1257],{},[591,1258,1259],{},"area",[862,1261,1262,1263,1266],{},"Nested ",[591,1264,1265],{},"ColorAreaUi"," object",[841,1268,1269,1274],{},[862,1270,1271],{},[591,1272,1273],{},"hue",[862,1275,1262,1276,1279],{},[591,1277,1278],{},"ColorSliderUi"," for hue",[841,1281,1282,1287],{},[862,1283,1284],{},[591,1285,1286],{},"alpha",[862,1288,1262,1289,1291],{},[591,1290,1278],{}," for opacity",[841,1293,1294,1299],{},[862,1295,1296],{},[591,1297,1298],{},"field",[862,1300,1262,1301,1266],{},[591,1302,1303],{},"ColorFieldUi",[841,1305,1306,1311],{},[862,1307,1308],{},[591,1309,1310],{},"preview",[862,1312,1262,1313,1266],{},[591,1314,1315],{},"ColorSwatchUi",[841,1317,1318,1323],{},[862,1319,1320],{},[591,1321,1322],{},"swatches",[862,1324,1325],{},"Nested palette UI object",[670,1327,1329],{"id":1328},"styling-hooks","Styling Hooks",[835,1331,1332,1345],{},[838,1333,1334],{},[841,1335,1336,1339,1342],{},[844,1337,1338],{},"UI key",[844,1340,1341],{},"CSS class",[844,1343,1344],{},"Data attributes \u002F semantics",[857,1346,1347,1364,1377,1390,1404,1415,1426,1436,1447,1458],{},[841,1348,1349,1353,1358],{},[862,1350,1351],{},[591,1352,1219],{},[862,1354,1355],{},[591,1356,1357],{},"akaza-color-picker",[862,1359,1360,1361],{},"Shared form flags; ",[591,1362,1363],{},"data-akaza-format",[841,1365,1366,1370,1375],{},[862,1367,1368],{},[591,1369,1229],{},[862,1371,1372],{},[591,1373,1374],{},"akaza-color-picker-controls",[862,1376,985],{},[841,1378,1379,1383,1388],{},[862,1380,1381],{},[591,1382,1239],{},[862,1384,1385],{},[591,1386,1387],{},"akaza-color-picker-fields",[862,1389,985],{},[841,1391,1392,1396,1401],{},[862,1393,1394],{},[591,1395,1249],{},[862,1397,1398],{},[591,1399,1400],{},"akaza-color-picker-input",[862,1402,1403],{},"Native input attributes",[841,1405,1406,1410,1413],{},[862,1407,1408],{},[591,1409,1259],{},[862,1411,1412],{},"See Color Area",[862,1414,1412],{},[841,1416,1417,1421,1424],{},[862,1418,1419],{},[591,1420,1273],{},[862,1422,1423],{},"See Color Slider",[862,1425,1423],{},[841,1427,1428,1432,1434],{},[862,1429,1430],{},[591,1431,1286],{},[862,1433,1423],{},[862,1435,1423],{},[841,1437,1438,1442,1445],{},[862,1439,1440],{},[591,1441,1298],{},[862,1443,1444],{},"See Color Field",[862,1446,1444],{},[841,1448,1449,1453,1456],{},[862,1450,1451],{},[591,1452,1310],{},[862,1454,1455],{},"See Color Swatch",[862,1457,1455],{},[841,1459,1460,1464,1467],{},[862,1461,1462],{},[591,1463,1322],{},[862,1465,1466],{},"See Color Swatch Picker",[862,1468,1466],{},[675,1470,1471,1472,802,1475,802,1478,802,1481,802,1484,802,1487,802,1490,817,1493,1496],{},"Form state attributes: ",[591,1473,1474],{},"data-akaza-disabled",[591,1476,1477],{},"data-akaza-readonly",[591,1479,1480],{},"data-akaza-invalid",[591,1482,1483],{},"data-akaza-focused",[591,1485,1486],{},"data-akaza-touched",[591,1488,1489],{},"data-akaza-dirty",[591,1491,1492],{},"data-akaza-filled",[591,1494,1495],{},"data-akaza-out-of-gamut",". Each appears only when true.",[675,1498,1499,1500,767,1503,1506,1507,1509],{},"Use ",[591,1501,1502],{},"class",[591,1504,1505],{},"ui.root"," to style the root. Use the other ",[591,1508,979],{}," keys for inner parts. Set sizes, borders, and colors in your own styles.",[670,1511,1513],{"id":1512},"keyboard","Keyboard",[835,1515,1516,1524],{},[838,1517,1518],{},[841,1519,1520,1522],{},[844,1521,1207],{},[844,1523,779],{},[857,1525,1526,1540,1548],{},[841,1527,1528,1537],{},[862,1529,1530,1533,1534],{},[591,1531,1532],{},"Tab"," \u002F ",[591,1535,1536],{},"Shift+Tab",[862,1538,1539],{},"Move between area axes, sliders, field, and optional palette.",[841,1541,1542,1545],{},[862,1543,1544],{},"Arrow, Page, Home\u002FEnd keys",[862,1546,1547],{},"Follow the keyboard rules of the focused child control.",[841,1549,1550,1556],{},[862,1551,1552,1555],{},[591,1553,1554],{},"Escape"," in the text field",[862,1557,1558],{},"Restore a pending draft first. When no draft needs restoring, Escape can dismiss the surrounding Popover.",[577,1560,1562],{"id":1561},"parity-notes","Parity Notes",[675,1564,1565],{},"ColorPicker combines the color controls in one component. Reka shows a picker built from separate color primitives. The supplied Base UI reference has no color picker component.",{"title":662,"searchDepth":1567,"depth":1568,"links":1569},1,2,[1570,1571,1572,1578,1579,1580,1588],{"id":579,"depth":1568,"text":580},{"id":645,"depth":1568,"text":29},{"id":667,"depth":1568,"text":668,"children":1573},[1574,1576,1577],{"id":672,"depth":1575,"text":673},3,{"id":690,"depth":1575,"text":691},{"id":711,"depth":1575,"text":712},{"id":727,"depth":1568,"text":728},{"id":778,"depth":1568,"text":779},{"id":828,"depth":1568,"text":829,"children":1581},[1582,1583,1584,1585,1586,1587],{"id":832,"depth":1575,"text":833},{"id":1076,"depth":1575,"text":1077},{"id":1149,"depth":1575,"text":1150},{"id":1197,"depth":1575,"text":1198},{"id":1328,"depth":1575,"text":1329},{"id":1512,"depth":1575,"text":1513},{"id":1561,"depth":1568,"text":1562},"md",{},{"icon":53,"badge":1592},{"label":69,"color":70},{"title":203,"description":208},"PvdlfsubtZc6NY4ZRJPAQVWmg3flc6IGC3TkN83pM9k",[1596,1598],{"title":195,"path":196,"stem":197,"icon":53,"badge":1597,"children":-1},{"label":69,"color":70},{"title":211,"path":212,"stem":213,"icon":53,"badge":1599,"children":-1},{"label":69,"color":70},"\u003Cspan class=\"shj-syn-tag\"><Dialog\u003C\u002Fspan>\n  \u003Cspan class=\"shj-syn-attr\">:ui\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"{\n    overlay: 'fixed inset-0 bg-black\u002F50 backdrop-blur-sm',\n    content: 'bg-white rounded-xl shadow-xl w-full max-w-md',\n    header: 'flex items-center justify-between p-6 border-b',\n    body: 'p-6',\n    footer: 'flex justify-end gap-2 p-6 border-t',\n  }\"\u003C\u002Fspan>\n\u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>\n","\u003Cspan class=\"shj-syn-control\">import\u003C\u002Fspan> \u003Cspan class=\"shj-syn-str\">'.\u002Fmain.css'\u003C\u002Fspan>\n","\u003Cspan class=\"shj-syn-tag\"><template\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>\n  \u003Cspan class=\"shj-syn-tag\"><Accordion\u003C\u002Fspan>\n    \u003Cspan class=\"shj-syn-attr\">:items\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"items\"\u003C\u002Fspan>\n    \u003Cspan class=\"shj-syn-attr\">type\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"multiple\"\u003C\u002Fspan>\n  \u003Cspan class=\"shj-syn-oper\">\u002F\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>\n\u003Cspan class=\"shj-syn-tag\"><\u002Ftemplate\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>\n","\u003Cspan class=\"shj-syn-tag\"><script\u003C\u002Fspan> setup \u003Cspan class=\"shj-syn-attr\">lang\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"ts\"\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>\n\u003Cspan class=\"shj-syn-control\">import\u003C\u002Fspan> { \u003Cspan class=\"shj-syn-attr\">ColorArea\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">,\u003C\u002Fspan> \u003Cspan class=\"shj-syn-attr\">ColorPicker\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">,\u003C\u002Fspan> \u003Cspan class=\"shj-syn-attr\">ColorSlider\u003C\u002Fspan> } \u003Cspan class=\"shj-syn-control\">from\u003C\u002Fspan> \u003Cspan class=\"shj-syn-str\">\"akaza-ui\"\u003C\u002Fspan>;\n\u003Cspan class=\"shj-syn-control\">import\u003C\u002Fspan> { ref } \u003Cspan class=\"shj-syn-control\">from\u003C\u002Fspan> \u003Cspan class=\"shj-syn-str\">\"vue\"\u003C\u002Fspan>;\n\u003Cspan class=\"shj-syn-kwd\">const\u003C\u002Fspan> color \u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan> \u003Cspan class=\"shj-syn-func\">ref\u003C\u002Fspan>(\u003Cspan class=\"shj-syn-str\">\"#56d799\"\u003C\u002Fspan>);\n\u003Cspan class=\"shj-syn-kwd\">const\u003C\u002Fspan> areaUi \u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan> {\n  root\u003Cspan class=\"shj-syn-oper\">:\u003C\u002Fspan> \u003Cspan class=\"shj-syn-str\">\"aspect-square w-full rounded-lg data-[akaza-focused]:ring-2 data-[akaza-focused]:ring-ring\"\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">,\u003C\u002Fspan>\n  area\u003Cspan class=\"shj-syn-oper\">:\u003C\u002Fspan> \u003Cspan class=\"shj-syn-str\">\"rounded-lg\"\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">,\u003C\u002Fspan>\n  thumb\u003Cspan class=\"shj-syn-oper\">:\u003C\u002Fspan> \u003Cspan class=\"shj-syn-str\">\"size-5 rounded-full border-2 border-neutral-400 bg-white shadow-sm\"\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">,\u003C\u002Fspan>\n};\n\u003Cspan class=\"shj-syn-kwd\">const\u003C\u002Fspan> sliderUi \u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan> {\n  root\u003Cspan class=\"shj-syn-oper\">:\u003C\u002Fspan> \u003Cspan class=\"shj-syn-str\">\"h-6 w-full rounded-md data-[akaza-disabled]:opacity-50\"\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">,\u003C\u002Fspan>\n  axis\u003Cspan class=\"shj-syn-oper\">:\u003C\u002Fspan> \u003Cspan class=\"shj-syn-str\">\"peer outline-none\"\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">,\u003C\u002Fspan>\n  track\u003Cspan class=\"shj-syn-oper\">:\u003C\u002Fspan> \u003Cspan class=\"shj-syn-str\">\"h-3 w-full rounded-full bg-muted\"\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">,\u003C\u002Fspan>\n  thumb\u003Cspan class=\"shj-syn-oper\">:\u003C\u002Fspan>\n    \u003Cspan class=\"shj-syn-str\">\"size-6 rounded-full border-2 border-neutral-400 bg-white shadow-sm peer-data-[akaza-focus-visible]:ring-2 peer-data-[akaza-focus-visible]:ring-ring peer-data-[akaza-focus-visible]:ring-offset-2 peer-data-[akaza-focus-visible]:ring-offset-background\"\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">,\u003C\u002Fspan>\n};\n\u003Cspan class=\"shj-syn-tag\"><\u002Fscript\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>\n\n\u003Cspan class=\"shj-syn-tag\"><template\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>\n  \u003Cspan class=\"shj-syn-tag\"><div\u003C\u002Fspan> \u003Cspan class=\"shj-syn-attr\">class\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"grid gap-4\"\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>\n    \u003Cspan class=\"shj-syn-tag\"><output\u003C\u002Fspan> \u003Cspan class=\"shj-syn-attr\">class\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"text-sm text-muted-foreground\"\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>Current: {{ color }}\u003Cspan class=\"shj-syn-tag\"><\u002Foutput\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>\n    \u003Cspan class=\"shj-syn-tag\"><ColorPicker\u003C\u002Fspan>\n      \u003Cspan class=\"shj-syn-attr\">v-model\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"color\"\u003C\u002Fspan>\n      \u003Cspan class=\"shj-syn-attr\">:ui\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"{ root: 'grid w-full max-w-64 gap-3' }\"\u003C\u002Fspan>\n      \u003Cspan class=\"shj-syn-attr\">aria-label\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"Brand color controls\"\u003C\u002Fspan>\n    \u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>\n      \u003Cspan class=\"shj-syn-tag\"><ColorArea\u003C\u002Fspan>\n        \u003Cspan class=\"shj-syn-attr\">color-space\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"hsl\"\u003C\u002Fspan>\n        \u003Cspan class=\"shj-syn-attr\">x-channel\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"hue\"\u003C\u002Fspan>\n        \u003Cspan class=\"shj-syn-attr\">y-channel\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"saturation\"\u003C\u002Fspan>\n        \u003Cspan class=\"shj-syn-attr\">:ui\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"areaUi\"\u003C\u002Fspan>\n        \u003Cspan class=\"shj-syn-attr\">aria-label\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"Brand area\"\u003C\u002Fspan>\n      \u003Cspan class=\"shj-syn-oper\">\u002F\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>\n      \u003Cspan class=\"shj-syn-tag\"><label\u003C\u002Fspan> \u003Cspan class=\"shj-syn-attr\">class\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"grid gap-1 text-xs text-muted-foreground\"\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>\n        Lightness\n        \u003Cspan class=\"shj-syn-tag\"><ColorSlider\u003C\u002Fspan>\n          \u003Cspan class=\"shj-syn-attr\">channel\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"lightness\"\u003C\u002Fspan>\n          \u003Cspan class=\"shj-syn-attr\">color-space\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"hsl\"\u003C\u002Fspan>\n          \u003Cspan class=\"shj-syn-attr\">:ui\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"sliderUi\"\u003C\u002Fspan>\n          \u003Cspan class=\"shj-syn-attr\">aria-label\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"Lightness\"\u003C\u002Fspan>\n        \u003Cspan class=\"shj-syn-oper\">\u002F\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>\n      \u003Cspan class=\"shj-syn-tag\"><\u002Flabel\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>\n      \u003Cspan class=\"shj-syn-tag\"><label\u003C\u002Fspan> \u003Cspan class=\"shj-syn-attr\">class\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"grid gap-1 text-xs text-muted-foreground\"\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>\n        Opacity\n        \u003Cspan class=\"shj-syn-tag\"><ColorSlider\u003C\u002Fspan>\n          \u003Cspan class=\"shj-syn-attr\">channel\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"alpha\"\u003C\u002Fspan>\n          \u003Cspan class=\"shj-syn-attr\">color-space\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"hsl\"\u003C\u002Fspan>\n          \u003Cspan class=\"shj-syn-attr\">:ui\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"sliderUi\"\u003C\u002Fspan>\n          \u003Cspan class=\"shj-syn-attr\">aria-label\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"Opacity\"\u003C\u002Fspan>\n        \u003Cspan class=\"shj-syn-oper\">\u002F\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>\n      \u003Cspan class=\"shj-syn-tag\"><\u002Flabel\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>\n    \u003Cspan class=\"shj-syn-tag\"><\u002FColorPicker\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>\n  \u003Cspan class=\"shj-syn-tag\"><\u002Fdiv\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>\n\u003Cspan class=\"shj-syn-tag\"><\u002Ftemplate\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>\n",1793603913429]