var Component=(()=>{var h=Object.create;var s=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var C=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var w=(r,o)=>()=>(o||r((o={exports:{}}).exports,o),o.exports),y=(r,o)=>{for(var n in o)s(r,n,{get:o[n],enumerable:!0})},d=(r,o,n,c)=>{if(o&&typeof o=="object"||typeof o=="function")for(let a of x(o))!f.call(r,a)&&a!==n&&s(r,a,{get:()=>o[a],enumerable:!(c=g(o,a))||c.enumerable});return r};var b=(r,o,n)=>(n=r!=null?h(C(r)):{},d(o||!r||!r.__esModule?s(n,"default",{value:r,enumerable:!0}):n,r)),v=r=>d(s({},"__esModule",{value:!0}),r);var m=w((F,u)=>{u.exports=_jsx_runtime});var P={};y(P,{default:()=>k,frontmatter:()=>_});var e=b(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 p(r){let o=Object.assign({h3:"h3",pre:"pre",code:"code"},r.components),{Tabs:n,Preview:c,FlexBox:a,ColorPicker:l}=o;return l||i("ColorPicker",!0),a||i("FlexBox",!0),c||i("Preview",!0),n||i("Tabs",!0),n.Item||i("Tabs.Item",!0),n.List||i("Tabs.List",!0),n.Panel||i("Tabs.Panel",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(o.h3,{children:"Example"}),` `,(0,e.jsxs)(n,{defaultTab:"default",children:[(0,e.jsxs)(n.List,{children:[(0,e.jsx)(n.Item,{tab:"default",children:"Default"}),(0,e.jsx)(n.Item,{tab:"popover",children:"Popover"}),(0,e.jsx)(n.Item,{tab:"size",children:"Sizes"}),(0,e.jsx)(n.Item,{tab:"shape",children:"Shape"})]}),(0,e.jsxs)(n.Panel,{tab:"default",children:[(0,e.jsx)(c,{children:(0,e.jsx)(a,{gap:"3",direction:"column",justify:"center",children:(0,e.jsx)(l,{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, FlexBox } from '@sugarcoat/ui'; `})})]}),(0,e.jsxs)(n.Panel,{tab:"popover",children:[(0,e.jsx)(c,{children:(0,e.jsx)(a,{gap:"3",direction:"column",justify:"center",children:(0,e.jsx)(l,{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, FlexBox } from '@sugarcoat/ui'; `})})]}),(0,e.jsxs)(n.Panel,{tab:"size",children:[(0,e.jsx)(c,{children:(0,e.jsxs)(a,{gap:"3",direction:"column",justify:"center",children:[(0,e.jsx)(l,{popover:!0,size:"xs",model:"hexa",color:"#000",onChange:t=>window.document.getElementsByClassName("sugarcoat-preview__container")[0].style.backgroundColor=t}),(0,e.jsx)(l,{popover:!0,size:"sm",model:"hexa",color:"#000",onChange:t=>window.document.getElementsByClassName("sugarcoat-preview__container")[0].style.backgroundColor=t}),(0,e.jsx)(l,{popover:!0,size:"md",model:"hexa",color:"#000",onChange:t=>window.document.getElementsByClassName("sugarcoat-preview__container")[0].style.backgroundColor=t}),(0,e.jsx)(l,{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, FlexBox } from '@sugarcoat/ui'; `})})]}),(0,e.jsxs)(n.Panel,{tab:"shape",children:[(0,e.jsx)(c,{children:(0,e.jsxs)(a,{gap:"3",direction:"column",justify:"center",children:[(0,e.jsx)(l,{popover:!0,shape:"circle",model:"hexa",color:"#000",onChange:t=>window.document.getElementsByClassName("sugarcoat-preview__container")[0].style.backgroundColor=t}),(0,e.jsx)(l,{popover:!0,shape:"rounded",model:"hexa",color:"#000",onChange:t=>window.document.getElementsByClassName("sugarcoat-preview__container")[0].style.backgroundColor=t}),(0,e.jsx)(l,{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, FlexBox } from '@sugarcoat/ui'; `})})]})]})]})}function B(r={}){let{wrapper:o}=r.components||{};return o?(0,e.jsx)(o,Object.assign({},r,{children:(0,e.jsx)(p,r)})):p(r)}var k=B;function i(r,o){throw new Error("Expected "+(o?"component":"object")+" `"+r+"` to be defined: you likely forgot to import, pass, or provide it.")}return v(P);})(); ;return Component;

Color Picker

Example

Customize The Look