var Component=(()=>{var p=Object.create;var s=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var f=(r,o)=>()=>(o||r((o={exports:{}}).exports,o),o.exports),w=(r,o)=>{for(var n in o)s(r,n,{get:o[n],enumerable:!0})},d=(r,o,n,i)=>{if(o&&typeof o=="object"||typeof o=="function")for(let l of C(o))!v.call(r,l)&&l!==n&&s(r,l,{get:()=>o[l],enumerable:!(i=h(o,l))||i.enumerable});return r};var y=(r,o,n)=>(n=r!=null?p(x(r)):{},d(o||!r||!r.__esModule?s(n,"default",{value:r,enumerable:!0}):n,r)),k=r=>d(s({},"__esModule",{value:!0}),r);var m=f((N,u)=>{u.exports=_jsx_runtime});var F={};w(F,{default:()=>j,frontmatter:()=>_});var e=y(m()),_={title:"Color Picker",description:"Paint your app with all the colors of the wind using our Color Picker. Select, mix, match and marvel at the result!"};function g(r){let o=Object.assign({h3:"h3",pre:"pre",code:"code"},r.components),{Tabs:n,Preview:i,Flex:l,ColorPicker:a}=o;return a||c("ColorPicker",!0),l||c("Flex",!0),i||c("Preview",!0),n||c("Tabs",!0),n.Content||c("Tabs.Content",!0),n.List||c("Tabs.List",!0),n.Trigger||c("Tabs.Trigger",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(o.h3,{children:"Example"}),` `,(0,e.jsxs)(n,{defaultValue:"default",children:[(0,e.jsxs)(n.List,{children:[(0,e.jsx)(n.Trigger,{value:"default",children:"Default"}),(0,e.jsx)(n.Trigger,{value:"popover",children:"Popover"}),(0,e.jsx)(n.Trigger,{value:"size",children:"Sizes"}),(0,e.jsx)(n.Trigger,{value:"shape",children:"Shape"})]}),(0,e.jsxs)(n.Content,{value:"default",children:[(0,e.jsx)(i,{children:(0,e.jsx)(l,{gap:"3",direction:"column",justify:"center",children:(0,e.jsx)(a,{model:"hexa",color:"#000",onChange:t=>window.document.getElementsByClassName("sugarcoat-preview__container")[0].style.backgroundColor=t})})}),(0,e.jsx)(o.pre,{children:(0,e.jsx)(o.code,{className:"language-tsx",children:` import { ColorPicker, Flex } from '@haktos/sugarcoat-ui'; `})})]}),(0,e.jsxs)(n.Content,{value:"popover",children:[(0,e.jsx)(i,{children:(0,e.jsx)(l,{gap:"3",direction:"column",justify:"center",children:(0,e.jsx)(a,{popover:!0,size:"md",model:"hexa",color:"#000",onChange:t=>window.document.getElementsByClassName("sugarcoat-preview__container")[0].style.backgroundColor=t})})}),(0,e.jsx)(o.pre,{children:(0,e.jsx)(o.code,{className:"language-tsx",children:` import { ColorPicker, Flex } from '@haktos/sugarcoat-ui'; `})})]}),(0,e.jsxs)(n.Content,{value:"size",children:[(0,e.jsx)(i,{children:(0,e.jsxs)(l,{gap:"3",direction:"column",justify:"center",children:[(0,e.jsx)(a,{popover:!0,size:"xs",model:"hexa",color:"#000",onChange:t=>window.document.getElementsByClassName("sugarcoat-preview__container")[0].style.backgroundColor=t}),(0,e.jsx)(a,{popover:!0,size:"sm",model:"hexa",color:"#000",onChange:t=>window.document.getElementsByClassName("sugarcoat-preview__container")[0].style.backgroundColor=t}),(0,e.jsx)(a,{popover:!0,size:"md",model:"hexa",color:"#000",onChange:t=>window.document.getElementsByClassName("sugarcoat-preview__container")[0].style.backgroundColor=t}),(0,e.jsx)(a,{popover:!0,size:"lg",model:"hexa",color:"#000",onChange:t=>window.document.getElementsByClassName("sugarcoat-preview__container")[0].style.backgroundColor=t})]})}),(0,e.jsx)(o.pre,{children:(0,e.jsx)(o.code,{className:"language-tsx",children:` import { ColorPicker, Flex } from '@haktos/sugarcoat-ui'; `})})]}),(0,e.jsxs)(n.Content,{value:"shape",children:[(0,e.jsx)(i,{children:(0,e.jsxs)(l,{gap:"3",direction:"column",justify:"center",children:[(0,e.jsx)(a,{popover:!0,shape:"circle",model:"hexa",color:"#000",onChange:t=>window.document.getElementsByClassName("sugarcoat-preview__container")[0].style.backgroundColor=t}),(0,e.jsx)(a,{popover:!0,shape:"rounded",model:"hexa",color:"#000",onChange:t=>window.document.getElementsByClassName("sugarcoat-preview__container")[0].style.backgroundColor=t}),(0,e.jsx)(a,{popover:!0,shape:"square",model:"hexa",color:"#000",onChange:t=>window.document.getElementsByClassName("sugarcoat-preview__container")[0].style.backgroundColor=t})]})}),(0,e.jsx)(o.pre,{children:(0,e.jsx)(o.code,{className:"language-tsx",children:` import { ColorPicker, Flex } from '@haktos/sugarcoat-ui'; `})})]})]})]})}function b(r={}){let{wrapper:o}=r.components||{};return o?(0,e.jsx)(o,Object.assign({},r,{children:(0,e.jsx)(g,r)})):g(r)}var j=b;function c(r,o){throw new Error("Expected "+(o?"component":"object")+" `"+r+"` to be defined: you likely forgot to import, pass, or provide it.")}return k(F);})(); ;return Component;