[{"data":1,"prerenderedAt":1522},["ShallowReactive",2],{"docs-navigation":3,"page:\u002Fcomponents\u002Fcolor-area":571,"surround:\u002Fcomponents\u002Fcolor-area":1514,"code:v-0-0-79-2-8-0":1518,"code:v-0-0-79-2-12-0":1519,"code:v-0-0-79-2-15-0":1520,"code:v-0-0-79-2-4-0-0":1521},[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":187,"body":573,"description":192,"extension":1508,"links":36,"meta":1509,"navigation":1510,"path":188,"seo":1512,"stem":189,"__hash__":1513},"docs\u002F3.components\u002Fcolor-area.md",{"type":574,"value":575,"toc":1485},"minimark",[576,581,607,610,616,629,633,638,642,648,659,663,670,676,680,683,689,692,714,718,741,754,762,777,781,784,787,791,795,1069,1073,1143,1147,1161,1165,1239,1243,1353,1381,1393,1408,1412,1473,1477],[577,578,580],"h2",{"id":579},"anatomy","Anatomy",[582,583,584],"ul",{},[585,586,587,594,595,598,599,602,603,606],"li",{},[588,589,590],"strong",{},[591,592,593],"code",{},"#thumb",": Custom visual thumb content. Receives ",[591,596,597],{},"value",", ",[591,600,601],{},"x",", and ",[591,604,605],{},"y",". It is decorative; native range inputs retain keyboard semantics.",[577,608,29],{"id":609},"usage",[611,612,613],"component-preview",{},[614,615],"examples-color-area-demo",{},[617,618,619],"component-code",{},[620,621,627],"pre",{"className":622,"code":624,"language":625,"meta":626},[623],"language-vue","\u003Cscript setup lang=\"ts\">\nimport { ColorArea, ColorPicker, ColorSlider } from \"akaza-ui\";\nimport { ref } from \"vue\";\nconst color = ref(\"#56d799\");\nconst areaUi = {\n  root: \"aspect-square w-full rounded-lg data-[akaza-focused]:ring-2 data-[akaza-focused]:ring-ring\",\n  area: \"rounded-lg\",\n  thumb: \"size-5 rounded-full border-2 border-neutral-400 bg-white shadow-sm\",\n};\nconst sliderUi = {\n  root: \"h-6 w-full rounded-md data-[akaza-disabled]:opacity-50\",\n  axis: \"peer outline-none\",\n  track: \"h-3 w-full rounded-full bg-muted\",\n  thumb:\n    \"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\",\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"grid gap-4\">\n    \u003Coutput class=\"text-sm text-muted-foreground\">Current: {{ color }}\u003C\u002Foutput>\n    \u003CColorPicker\n      v-model=\"color\"\n      :ui=\"{ root: 'grid w-full max-w-64 gap-3' }\"\n      aria-label=\"Brand color controls\"\n    >\n      \u003CColorArea\n        color-space=\"hsl\"\n        x-channel=\"hue\"\n        y-channel=\"saturation\"\n        :ui=\"areaUi\"\n        aria-label=\"Brand area\"\n      \u002F>\n      \u003Clabel class=\"grid gap-1 text-xs text-muted-foreground\">\n        Lightness\n        \u003CColorSlider\n          channel=\"lightness\"\n          color-space=\"hsl\"\n          :ui=\"sliderUi\"\n          aria-label=\"Lightness\"\n        \u002F>\n      \u003C\u002Flabel>\n      \u003Clabel class=\"grid gap-1 text-xs text-muted-foreground\">\n        Opacity\n        \u003CColorSlider\n          channel=\"alpha\"\n          color-space=\"hsl\"\n          :ui=\"sliderUi\"\n          aria-label=\"Opacity\"\n        \u002F>\n      \u003C\u002Flabel>\n    \u003C\u002FColorPicker>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","vue","",[591,628,624],{"__ignoreMap":626},[577,630,632],{"id":631},"examples","Examples",[634,635,637],"h3",{"id":636},"hue-and-saturation","Hue and saturation",[639,640,641],"p",{},"Drag left or right to change hue, and up or down to change saturation. Use Lightness for black (0%) or white (100%), and Opacity for transparency. This example uses HSL; the default area uses HSB saturation and brightness.",[620,643,646],{"className":644,"code":645,"language":625,"meta":626},[623],"\u003Ctemplate>\n  \u003Coutput class=\"text-sm text-muted-foreground\">Current: {{ color }}\u003C\u002Foutput>\n  \u003CColorPicker\n    v-model=\"color\"\n    :ui=\"{ root: 'grid w-full max-w-64 gap-3' }\"\n    aria-label=\"Brand color controls\"\n  >\n    \u003CColorArea\n      color-space=\"hsl\"\n      x-channel=\"hue\"\n      y-channel=\"saturation\"\n      :ui=\"hueAreaUi\"\n      aria-label=\"Brand area\"\n    \u002F>\n    \u003Clabel>\n      Lightness\n      \u003CColorSlider\n        channel=\"lightness\"\n        color-space=\"hsl\"\n        :ui=\"sliderUi\"\n        aria-label=\"Lightness\"\n      \u002F>\n    \u003C\u002Flabel>\n    \u003Clabel>\n      Opacity\n      \u003CColorSlider\n        channel=\"alpha\"\n        color-space=\"hsl\"\n        :ui=\"sliderUi\"\n        aria-label=\"Opacity\"\n      \u002F>\n    \u003C\u002Flabel>\n  \u003C\u002FColorPicker>\n\u003C\u002Ftemplate>\n",[591,647,645],{"__ignoreMap":626},[639,649,650,651,654,655,658],{},"Put ",[591,652,653],{},"v-model"," and ",[591,656,657],{},"format"," on ColorPicker to share one color between the area and sliders. Leave the child controls without their own models. This keeps hue and saturation when you pass through black, white, or transparent. You can also use ColorArea on its own.",[634,660,662],{"id":661},"output-format","Output format",[639,664,665,666,669],{},"Choose the format for the returned value. Selecting OKLCH returns an ",[591,667,668],{},"oklch(...)"," string. The area still edits HSL hue and saturation.",[620,671,674],{"className":672,"code":673,"language":625,"meta":626},[623],"\u003Cscript setup lang=\"ts\">\nimport type { ColorFormat } from \"akaza-ui\";\nimport { COLOR_FORMATS, ColorArea, ColorPicker, ColorSlider } from \"akaza-ui\";\nimport { ref } from \"vue\";\n\nconst formattedColor = ref(\"#56d799\");\nconst format = ref\u003CColorFormat>(\"hex\");\nconst ui = {\n  root: \"aspect-square w-64 max-w-full rounded-lg data-[akaza-focused]:ring-2 data-[akaza-focused]:ring-ring\",\n  area: \"rounded-lg\",\n  thumb: \"size-5 rounded-full border-2 border-neutral-400 bg-white shadow-sm\",\n};\nconst sliderUi = {\n  root: \"h-6 w-full rounded-md data-[akaza-disabled]:opacity-50\",\n  axis: \"peer outline-none\",\n  track: \"h-3 w-full rounded-full bg-muted\",\n  thumb:\n    \"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\",\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"grid gap-3\">\n    \u003Clabel class=\"grid w-full max-w-64 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=\"formattedColor\"\n      :format=\"format\"\n      :ui=\"{ root: 'grid w-full max-w-64 gap-3' }\"\n      aria-label=\"Formatted color controls\"\n    >\n      \u003CColorArea\n        color-space=\"hsl\"\n        x-channel=\"hue\"\n        y-channel=\"saturation\"\n        :ui=\"ui\"\n        aria-label=\"Formatted color area\"\n      \u002F>\n      \u003Clabel>\n        Lightness\n        \u003CColorSlider\n          channel=\"lightness\"\n          color-space=\"hsl\"\n          :ui=\"sliderUi\"\n          aria-label=\"Lightness\"\n        \u002F>\n      \u003C\u002Flabel>\n      \u003Clabel>\n        Opacity\n        \u003CColorSlider\n          channel=\"alpha\"\n          color-space=\"hsl\"\n          :ui=\"sliderUi\"\n          aria-label=\"Opacity\"\n        \u002F>\n      \u003C\u002Flabel>\n    \u003C\u002FColorPicker>\n    \u003Coutput\n      class=\"block break-all font-mono text-xs\"\n      aria-live=\"polite\"\n    >\n      {{ formattedColor }}\n    \u003C\u002Foutput>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[591,675,673],{"__ignoreMap":626},[634,677,679],{"id":678},"rtl-and-disabled","RTL and disabled",[639,681,682],{},"RTL reverses the horizontal hue axis. The disabled example shows the area and both sliders but prevents editing.",[620,684,687],{"className":685,"code":686,"language":625,"meta":626},[623],"\u003Ctemplate>\n  \u003CColorPicker\n    v-model=\"rtlColor\"\n    dir=\"rtl\"\n    :ui=\"{ root: 'grid w-full max-w-64 gap-3' }\"\n    aria-label=\"RTL color controls\"\n  >\n    \u003CColorArea\n      color-space=\"hsl\"\n      x-channel=\"hue\"\n      y-channel=\"saturation\"\n      dir=\"rtl\"\n      :ui=\"hueAreaUi\"\n      aria-label=\"RTL color area\"\n    \u002F>\n    \u003Clabel>\n      Lightness\n      \u003CColorSlider\n        channel=\"lightness\"\n        color-space=\"hsl\"\n        dir=\"rtl\"\n        :ui=\"sliderUi\"\n        aria-label=\"Lightness\"\n      \u002F>\n    \u003C\u002Flabel>\n    \u003Clabel>\n      Opacity\n      \u003CColorSlider\n        channel=\"alpha\"\n        color-space=\"hsl\"\n        dir=\"rtl\"\n        :ui=\"sliderUi\"\n        aria-label=\"Opacity\"\n      \u002F>\n    \u003C\u002Flabel>\n  \u003C\u002FColorPicker>\n  \u003CColorPicker\n    model-value=\"#56d799\"\n    disabled\n    :ui=\"{ root: 'grid w-full max-w-64 gap-3' }\"\n    aria-label=\"Disabled color controls\"\n  >\n    \u003CColorArea\n      color-space=\"hsl\"\n      x-channel=\"hue\"\n      y-channel=\"saturation\"\n      disabled\n      :ui=\"hueAreaUi\"\n      aria-label=\"Disabled color area\"\n    \u002F>\n    \u003Clabel>\n      Lightness\n      \u003CColorSlider\n        channel=\"lightness\"\n        color-space=\"hsl\"\n        disabled\n        :ui=\"sliderUi\"\n        aria-label=\"Lightness\"\n      \u002F>\n    \u003C\u002Flabel>\n    \u003Clabel>\n      Opacity\n      \u003CColorSlider\n        channel=\"alpha\"\n        color-space=\"hsl\"\n        disabled\n        :ui=\"sliderUi\"\n        aria-label=\"Opacity\"\n      \u002F>\n    \u003C\u002Flabel>\n  \u003C\u002FColorPicker>\n\u003C\u002Ftemplate>\n",[591,688,686],{"__ignoreMap":626},[639,690,691],{},"See the live demo's code for the state and style objects used in these examples.",[639,693,694,695,698,699,702,703,654,706,709,710,713],{},"Pass ",[591,696,697],{},"disabled"," to custom slot controls as shown above. To show keyboard focus on slider handles, use ",[591,700,701],{},"peer outline-none"," on ",[591,704,705],{},"ui.axis",[591,707,708],{},"peer-data-[akaza-focus-visible]"," classes on ",[591,711,712],{},"ui.thumb",".",[577,715,717],{"id":716},"formats","Formats",[639,719,720,721,723,724,729,730,733,734,736,737,740],{},"Set ",[591,722,657],{}," to choose the returned color string. It does not change which colors you can enter or which channels you edit. See ",[725,726,728],"a",{"href":727},"\u002Fcomposables\u002Fuse-color#formats","supported formats",". Changing the format keeps opacity and emits ",[591,731,732],{},"value-change"," with reason ",[591,735,657],{},". HEX uses eight digits for transparent colors; ",[591,738,739],{},"hexa"," uses eight digits for all colors.",[639,742,743,744,598,747,602,750,753],{},"Use ",[591,745,746],{},"colorSpace",[591,748,749],{},"xChannel",[591,751,752],{},"yChannel"," to change what the area edits. You do not need to change these props to choose a different output format.",[639,755,756,757,761],{},"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 ",[725,758,760],{"href":759},"\u002Fcomposables\u002Fuse-color#precision-and-gamut","precision and gamut"," for details.",[639,763,764,765,768,769,772,773,776],{},"Use a color value such as ",[591,766,767],{},"#56d799"," or ",[591,770,771],{},"oklch(0.65 0.2 250)",". CSS variables, ",[591,774,775],{},"currentColor",", and relative color expressions are not supported.",[577,778,780],{"id":779},"behavior","Behavior",[639,782,783],{},"The area has two native range inputs, one per axis, and one visible thumb. Drag to change both channels. Press Tab to focus each channel and use the keyboard to edit it. Disabled and read-only controls prevent changes.",[639,785,786],{},"Choose two different channels from the same color space, such as RGB red\u002Fgreen or OKLCH chroma\u002Flightness. Unsupported or repeated channels disable the area. The preview uses sRGB, but the value can contain colors outside sRGB. Opacity stays unchanged unless you choose alpha as an axis.",[577,788,790],{"id":789},"api-reference","API Reference",[634,792,794],{"id":793},"props","Props",[796,797,798,817],"table",{},[799,800,801],"thead",{},[802,803,804,808,811,814],"tr",{},[805,806,807],"th",{},"Prop",[805,809,810],{},"Type",[805,812,813],{},"Default",[805,815,816],{},"Purpose",[818,819,820,843,862,882,910,933,949,968,992,1012,1031,1049],"tbody",{},[802,821,822,828,833,838],{},[823,824,825],"td",{},[591,826,827],{},"modelValue",[823,829,830],{},[591,831,832],{},"string",[823,834,835],{},[591,836,837],{},"\"#ff0000\"",[823,839,840,841,713],{},"Selected CSS color. Bind with ",[591,842,653],{},[802,844,845,849,854,859],{},[823,846,847],{},[591,848,657],{},[823,850,851],{},[591,852,853],{},"ColorFormat",[823,855,856],{},[591,857,858],{},"\"hex\"",[823,860,861],{},"Format for the returned and submitted color string.",[802,863,864,872,876,879],{},[823,865,866,598,869],{},[591,867,868],{},"id",[591,870,871],{},"name",[823,873,874],{},[591,875,832],{},[823,877,878],{},"From Field",[823,880,881],{},"Input ID and form field name.",[802,883,884,897,902,907],{},[823,885,886,598,889,598,891,598,894],{},[591,887,888],{},"required",[591,890,697],{},[591,892,893],{},"readOnly",[591,895,896],{},"invalid",[823,898,899],{},[591,900,901],{},"boolean",[823,903,904],{},[591,905,906],{},"false",[823,908,909],{},"Native validation and interaction states; disabled\u002Frequired also inherit from Field.",[802,911,912,923,927,930],{},[823,913,914,598,917,598,920],{},[591,915,916],{},"ariaLabel",[591,918,919],{},"ariaLabelledby",[591,921,922],{},"ariaDescribedby",[823,924,925],{},[591,926,832],{},[823,928,929],{},"From Field where applicable",[823,931,932],{},"Accessible naming and description.",[802,934,935,940,943,946],{},[823,936,937],{},[591,938,939],{},"ui",[823,941,942],{},"Component UI object",[823,944,945],{},"-",[823,947,948],{},"Classes for the named parts below.",[802,950,951,955,960,965],{},[823,952,953],{},[591,954,746],{},[823,956,957],{},[591,958,959],{},"ColorSpace",[823,961,962],{},[591,963,964],{},"\"hsb\"",[823,966,967],{},"Editing space.",[802,969,970,976,981,989],{},[823,971,972,598,974],{},[591,973,749],{},[591,975,752],{},[823,977,978],{},[591,979,980],{},"ColorChannel",[823,982,983,598,986],{},[591,984,985],{},"\"saturation\"",[591,987,988],{},"\"brightness\"",[823,990,991],{},"Distinct channels supported by the editing space.",[802,993,994,1002,1006,1009],{},[823,995,996,598,999],{},[591,997,998],{},"xLabel",[591,1000,1001],{},"yLabel",[823,1003,1004],{},[591,1005,832],{},[823,1007,1008],{},"Generated from channel names",[823,1010,1011],{},"Names for the two accessible sliders.",[802,1013,1014,1022,1026,1028],{},[823,1015,1016,598,1019],{},[591,1017,1018],{},"xName",[591,1020,1021],{},"yName",[823,1023,1024],{},[591,1025,832],{},[823,1027,945],{},[823,1029,1030],{},"Optional separate numeric channel form values.",[802,1032,1033,1038,1043,1046],{},[823,1034,1035],{},[591,1036,1037],{},"step",[823,1039,1040],{},[591,1041,1042],{},"number",[823,1044,1045],{},"Channel default",[823,1047,1048],{},"Keyboard increment.",[802,1050,1051,1056,1061,1066],{},[823,1052,1053],{},[591,1054,1055],{},"dir",[823,1057,1058],{},[591,1059,1060],{},"\"ltr\" | \"rtl\"",[823,1062,1063],{},[591,1064,1065],{},"\"ltr\"",[823,1067,1068],{},"Reverse horizontal geometry and arrow direction.",[634,1070,1072],{"id":1071},"emits","Emits",[796,1074,1075,1088],{},[799,1076,1077],{},[802,1078,1079,1082,1085],{},[805,1080,1081],{},"Event",[805,1083,1084],{},"Payload",[805,1086,1087],{},"Meaning",[818,1089,1090,1103,1129],{},[802,1091,1092,1097,1100],{},[823,1093,1094],{},[591,1095,1096],{},"update:modelValue",[823,1098,1099],{},"Selected color",[823,1101,1102],{},"Vue model update.",[802,1104,1105,1109,1114],{},[823,1106,1107],{},[591,1108,732],{},[823,1110,1111],{},[591,1112,1113],{},"(value, details)",[823,1115,1116,1117,1120,1121,1124,1125,1128],{},"Runs before a change. Use ",[591,1118,1119],{},"details.cancel()"," to stop it. Includes ",[591,1122,1123],{},"reason"," and the native ",[591,1126,1127],{},"event"," when available.",[802,1130,1131,1136,1140],{},[823,1132,1133],{},[591,1134,1135],{},"value-commit",[823,1137,1138],{},[591,1139,1113],{},[823,1141,1142],{},"Runs when an interaction ends. Canceling it does not undo the value change.",[634,1144,1146],{"id":1145},"slots","Slots",[582,1148,1149],{},[585,1150,1151,594,1155,598,1157,602,1159,606],{},[588,1152,1153],{},[591,1154,593],{},[591,1156,597],{},[591,1158,601],{},[591,1160,605],{},[634,1162,1164],{"id":1163},"ui-options","UI Options",[796,1166,1167,1177],{},[799,1168,1169],{},[802,1170,1171,1174],{},[805,1172,1173],{},"Key",[805,1175,1176],{},"Element",[818,1178,1179,1189,1199,1209,1219,1229],{},[802,1180,1181,1186],{},[823,1182,1183],{},[591,1184,1185],{},"root",[823,1187,1188],{},"Group and pointer surface",[802,1190,1191,1196],{},[823,1192,1193],{},[591,1194,1195],{},"area",[823,1197,1198],{},"Canvas plane",[802,1200,1201,1206],{},[823,1202,1203],{},[591,1204,1205],{},"thumb",[823,1207,1208],{},"Visual thumb",[802,1210,1211,1216],{},[823,1212,1213],{},[591,1214,1215],{},"xInput",[823,1217,1218],{},"Horizontal keyboard control",[802,1220,1221,1226],{},[823,1222,1223],{},[591,1224,1225],{},"yInput",[823,1227,1228],{},"Vertical keyboard control",[802,1230,1231,1236],{},[823,1232,1233],{},[591,1234,1235],{},"input",[823,1237,1238],{},"Form input for the full color value",[634,1240,1242],{"id":1241},"styling-hooks","Styling Hooks",[796,1244,1245,1258],{},[799,1246,1247],{},[802,1248,1249,1252,1255],{},[805,1250,1251],{},"UI key",[805,1253,1254],{},"CSS class",[805,1256,1257],{},"Data attributes \u002F semantics",[818,1259,1260,1280,1296,1311,1325,1339],{},[802,1261,1262,1266,1271],{},[823,1263,1264],{},[591,1265,1185],{},[823,1267,1268],{},[591,1269,1270],{},"akaza-color-area",[823,1272,1273,1274,598,1277],{},"Shared form flags; ",[591,1275,1276],{},"data-akaza-dragging",[591,1278,1279],{},"data-akaza-color-space",[802,1281,1282,1286,1291],{},[823,1283,1284],{},[591,1285,1195],{},[823,1287,1288],{},[591,1289,1290],{},"akaza-color-area-area",[823,1292,1293],{},[591,1294,1295],{},"aria-hidden",[802,1297,1298,1302,1307],{},[823,1299,1300],{},[591,1301,1205],{},[823,1303,1304],{},[591,1305,1306],{},"akaza-color-area-thumb",[823,1308,1309],{},[591,1310,1295],{},[802,1312,1313,1317,1322],{},[823,1314,1315],{},[591,1316,1215],{},[823,1318,1319],{},[591,1320,1321],{},"akaza-color-area-x-input",[823,1323,1324],{},"Native slider ARIA",[802,1326,1327,1331,1336],{},[823,1328,1329],{},[591,1330,1225],{},[823,1332,1333],{},[591,1334,1335],{},"akaza-color-area-y-input",[823,1337,1338],{},"Native slider ARIA; vertical orientation",[802,1340,1341,1345,1350],{},[823,1342,1343],{},[591,1344,1235],{},[823,1346,1347],{},[591,1348,1349],{},"akaza-color-area-input",[823,1351,1352],{},"Native validation attributes",[639,1354,1355,1356,598,1359,598,1362,598,1365,598,1368,598,1371,598,1374,602,1377,1380],{},"Form state attributes: ",[591,1357,1358],{},"data-akaza-disabled",[591,1360,1361],{},"data-akaza-readonly",[591,1363,1364],{},"data-akaza-invalid",[591,1366,1367],{},"data-akaza-focused",[591,1369,1370],{},"data-akaza-touched",[591,1372,1373],{},"data-akaza-dirty",[591,1375,1376],{},"data-akaza-filled",[591,1378,1379],{},"data-akaza-out-of-gamut",". Each appears only when true.",[639,1382,743,1383,768,1386,1389,1390,1392],{},[591,1384,1385],{},"class",[591,1387,1388],{},"ui.root"," to style the root. Use the other ",[591,1391,939],{}," keys for inner parts. Set sizes, borders, and colors in your own styles.",[639,1394,1395,1396,1399,1400,1403,1404,1407],{},"The thumb exposes ",[591,1397,1398],{},"--akaza-color"," but does not force a background. Use ",[591,1401,1402],{},"ui.thumb: 'bg-white'"," for a white handle, or ",[591,1405,1406],{},"bg-[var(--akaza-color)]"," for a color-filled handle.",[634,1409,1411],{"id":1410},"keyboard","Keyboard",[796,1413,1414,1422],{},[799,1415,1416],{},[802,1417,1418,1420],{},[805,1419,1173],{},[805,1421,780],{},[818,1423,1424,1438,1446,1460],{},[802,1425,1426,1435],{},[823,1427,1428,1431,1432],{},[591,1429,1430],{},"Tab"," \u002F ",[591,1433,1434],{},"Shift+Tab",[823,1436,1437],{},"Focus each of the area's two named sliders. The composed examples then continue to Lightness and Opacity.",[802,1439,1440,1443],{},[823,1441,1442],{},"Arrow keys",[823,1444,1445],{},"Adjust the focused channel; horizontal arrows reverse for the horizontal axis in RTL.",[802,1447,1448,1457],{},[823,1449,1450,1431,1453,1456],{},[591,1451,1452],{},"PageUp",[591,1454,1455],{},"PageDown",", Shift+Arrow",[823,1458,1459],{},"Adjust by ten steps.",[802,1461,1462,1470],{},[823,1463,1464,1431,1467],{},[591,1465,1466],{},"Home",[591,1468,1469],{},"End",[823,1471,1472],{},"Set the focused channel to its editor minimum\u002Fmaximum.",[577,1474,1476],{"id":1475},"parity-notes","Parity Notes",[639,1478,1479,1480,654,1482,1484],{},"ColorArea combines Reka's root, area, and thumb parts in one component. Use ",[591,1481,939],{},[591,1483,593],{}," to customize them. The supplied Base UI reference has no color area component.",{"title":626,"searchDepth":1486,"depth":1487,"links":1488},1,2,[1489,1490,1491,1497,1498,1499,1507],{"id":579,"depth":1487,"text":580},{"id":609,"depth":1487,"text":29},{"id":631,"depth":1487,"text":632,"children":1492},[1493,1495,1496],{"id":636,"depth":1494,"text":637},3,{"id":661,"depth":1494,"text":662},{"id":678,"depth":1494,"text":679},{"id":716,"depth":1487,"text":717},{"id":779,"depth":1487,"text":780},{"id":789,"depth":1487,"text":790,"children":1500},[1501,1502,1503,1504,1505,1506],{"id":793,"depth":1494,"text":794},{"id":1071,"depth":1494,"text":1072},{"id":1145,"depth":1494,"text":1146},{"id":1163,"depth":1494,"text":1164},{"id":1241,"depth":1494,"text":1242},{"id":1410,"depth":1494,"text":1411},{"id":1475,"depth":1487,"text":1476},"md",{},{"icon":53,"badge":1511},{"label":69,"color":70},{"title":187,"description":192},"Zyu4NqaiX69QqXXirk7ArKldBX6Bz5itrpkYQWGjn38",[1515,1516],{"title":180,"path":181,"stem":182,"icon":184,"children":-1},{"title":195,"path":196,"stem":197,"icon":53,"badge":1517,"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-tag\"><template\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>\n  \u003Cspan class=\"shj-syn-tag\"><Avatar\u003C\u002Fspan>\n    \u003Cspan class=\"shj-syn-attr\">src\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"\u002Favatar.jpg\"\u003C\u002Fspan>\n    \u003Cspan class=\"shj-syn-attr\">alt\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"Jane Doe\"\u003C\u002Fspan>\n    \u003Cspan class=\"shj-syn-attr\">text\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"JD\"\u003C\u002Fspan>\n    \u003Cspan class=\"shj-syn-attr\">:delay-ms\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"300\"\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\"><Button\u003C\u002Fspan>\n  \u003Cspan class=\"shj-syn-attr\">:ui\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"{\n    root: 'rounded-md bg-black px-3 py-2 text-white',\n    spinner: 'size-4 animate-spin',\n  }\"\u003C\u002Fspan>\n\u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>\n  Save\n\u003Cspan class=\"shj-syn-tag\"><\u002FButton\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",1793603913353]