@formkit/themes
Version:
FormKit base themes
1 lines • 34.6 kB
Source Map (JSON)
{"version":3,"sources":["../../../src/tailwindcss/genesis/index.ts"],"names":[],"mappings":"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","sourcesContent":["export default {\n // Global styles apply to _all_ inputs with matching section keys\n global: {\n fieldset: 'max-w-md border border-gray-400 rounded px-2 pb-1',\n help: 'text-xs text-gray-500',\n inner:\n 'formkit-disabled:bg-gray-200 formkit-disabled:cursor-not-allowed formkit-disabled:pointer-events-none',\n input:\n 'appearance-none bg-transparent focus:outline-none focus:ring-0 focus:shadow-none',\n label: 'block mb-1 font-bold text-sm',\n legend: 'font-bold text-sm',\n loaderIcon: 'inline-flex items-center w-4 text-gray-600 animate-spin',\n message: 'text-red-500 mb-1 text-xs',\n messages: 'list-none p-0 mt-1 mb-0',\n outer: 'mb-4 formkit-disabled:opacity-50',\n prefixIcon:\n 'w-10 flex self-stretch grow-0 shrink-0 rounded-tl rounded-bl border-r border-gray-400 bg-white bg-gradient-to-b from-transparent to-gray-200 [&>svg]:w-full [&>svg]:max-w-[1em] [&>svg]:max-h-[1em] [&>svg]:m-auto',\n suffixIcon:\n 'w-7 pr-3 p-3 flex self-stretch grow-0 shrink-0 [&>svg]:w-full [&>svg]:max-w-[1em] [&>svg]:max-h-[1em] [&>svg]:m-auto',\n },\n\n // Family styles apply to all inputs that share a common family\n 'family:box': {\n decorator:\n 'block relative h-5 w-5 mr-2 rounded bg-white bg-gradient-to-b from-transparent to-gray-200 ring-1 ring-gray-400 peer-checked:ring-blue-500 text-transparent peer-checked:text-blue-500',\n decoratorIcon:\n 'flex p-[3px] w-full h-full absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2',\n help: 'mb-2 mt-1.5',\n input:\n 'absolute w-0 h-0 overflow-hidden opacity-0 pointer-events-none peer',\n inner: '$remove:formkit-disabled:bg-gray-200',\n label: '$reset text-sm text-gray-700 mt-1 select-none',\n wrapper: 'flex items-center mb-1',\n },\n 'family:button': {\n input:\n '$reset inline-flex items-center bg-blue-600 text-white text-sm font-normal py-3 px-6 rounded focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 formkit-disabled:bg-gray-400 formkit-loading:before:w-4 formkit-loading:before:h-4 formkit-loading:before:mr-2 formkit-loading:before:border formkit-loading:before:border-2 formkit-loading:before:border-r-transparent formkit-loading:before:rounded-3xl formkit-loading:before:border-white formkit-loading:before:animate-spin',\n wrapper: 'mb-1',\n prefixIcon: '$reset block w-4 mr-2 stretch',\n suffixIcon: '$reset block w-4 ml-2 stretch',\n },\n 'family:dropdown': {\n dropdownWrapper:\n 'my-2 w-full shadow-lg rounded [&::-webkit-scrollbar]:hidden',\n emptyMessageInner:\n 'flex items-center justify-center text-sm p-2 text-center w-full text-gray-500 [&>span]:mr-3 [&>span]:ml-0',\n inner:\n 'max-w-md relative flex ring-1 ring-gray-400 focus-within:ring-blue-500 focus-within:ring-2 rounded mb-2 formkit-disabled:focus-within:ring-gray-400 formkit-disabled:focus-within:ring-1 [&>span:first-child]:focus-within:text-blue-500',\n input: 'w-full px-3 py-2',\n listbox: 'bg-white shadow-lg rounded overflow-hidden',\n listboxButton: 'flex w-12 self-stretch justify-center mx-auto',\n listitem:\n 'pl-7 relative hover:bg-gray-300 data-[is-active=\"true\"]:bg-gray-300 aria-selected:bg-blue-600 aria-selected:text-white data-[is-active=\"true\"]:aria-selected:bg-blue-600 data-[is-active=\"true\"]:aria-selected:bg-blue-700',\n loaderIcon: 'ml-auto',\n loadMoreInner:\n 'flex items-center justify-center text-sm p-2 text-center w-full text-blue-500 formkit-loading:text-gray-500 cursor-pointer [&>span]:mr-3 [&>span]:ml-0',\n option: 'p-2.5',\n optionLoading: 'pl-2.5 text-gray-400',\n placeholder: 'p-2.5 text-gray-400',\n selector:\n 'flex w-full justify-between items-center min-h-[2.625em] [&u] cursor-default',\n selection: 'flex w-full',\n selectedIcon: 'block absolute top-1/2 left-2 w-3 -translate-y-1/2',\n selectIcon:\n 'flex box-content w-4 px-2 self-stretch grow-0 shrink-0 [&>svg]:w-[1em] cursor-pointer',\n },\n 'family:text': {\n inner:\n 'flex items-center max-w-md ring-1 ring-gray-400 focus-within:ring-blue-500 focus-within:ring-2 [&>label:first-child]:focus-within:text-blue-500 rounded mb-1',\n input:\n 'w-full px-3 py-2 border-none text-base text-gray-700 placeholder-gray-400',\n },\n 'family:date': {\n inner:\n 'flex items-center max-w-md ring-1 ring-gray-400 focus-within:ring-blue-500 focus-within:ring-2 [&>label:first-child]:focus-within:text-blue-500 rounded mb-1',\n input: 'w-full px-3 py-2 border-none text-gray-700 placeholder-gray-400',\n },\n\n // Specific styles apply only to a given input type\n color: {\n inner:\n 'flex max-w-[5.5em] w-full formkit-prefix-icon:max-w-[7.5em] formkit-suffix-icon:formkit-prefix-icon:max-w-[10em]',\n input:\n '$reset appearance-none w-full cursor-pointer border-none rounded p-0 m-0 bg-transparent [&::-webkit-color-swatch-wrapper]:p-0 [&::-webkit-color-swatch]:border-none',\n suffixIcon: 'min-w-[2.5em] pr-0 pl-0 m-auto',\n },\n file: {\n fileItem: 'flex items-center text-gray-800 mb-1 last:mb-0',\n fileItemIcon: 'w-4 mr-2 shrink-0',\n fileList:\n 'shrink grow peer px-3 py-2 formkit-multiple:data-[has-multiple=\"true\"]:mb-6',\n fileName: 'break-all grow text-ellipsis',\n fileRemove:\n 'relative z-[2] ml-auto text-[0px] hover:text-red-500 pl-2 peer-data-[has-multiple=true]:text-sm peer-data-[has-multiple=true]:text-blue-500 peer-data-[has-multiple=true]:ml-3 peer-data-[has-multiple=true]:mb-2 formkit-multiple:bottom-[0.15em] formkit-multiple:pl-0 formkit-multiple:ml-0 formkit-multiple:left-[1em] formkit-multiple:formkit-prefix-icon:left-[3.75em]',\n fileRemoveIcon: 'block text-base w-3 relative z-[2]',\n inner:\n 'relative max-w-md cursor-pointer formkit-multiple:[&>button]:absolute',\n input:\n 'cursor-pointer text-transparent absolute top-0 right-0 left-0 bottom-0 opacity-0 z-[2]',\n noFiles: 'flex w-full items-center px-3 py-2 text-gray-400',\n noFilesIcon: 'w-4 mr-2',\n },\n radio: {\n decorator: 'rounded-full',\n decoratorIcon: 'w-5 p-[5px]',\n },\n range: {\n inner: '$reset flex items-center max-w-md',\n input: '$reset w-full mb-1 h-2 p-0 rounded-full',\n prefixIcon:\n '$reset w-4 mr-1 flex self-stretch grow-0 shrink-0 [&>svg]:max-w-[1em] [&>svg]:max-h-[1em] [&>svg]:m-auto',\n suffixIcon:\n '$reset w-4 ml-1 flex self-stretch grow-0 shrink-0 [&>svg]:max-w-[1em] [&>svg]:max-h-[1em] [&>svg]:m-auto',\n },\n select: {\n inner:\n 'flex relative max-w-md items-center rounded mb-1 ring-1 ring-gray-400 focus-within:ring-blue-500 focus-within:ring-2 [&>span:first-child]:focus-within:text-blue-500',\n input:\n 'w-full pl-3 pr-8 py-2 border-none text-base text-gray-700 placeholder-gray-400 formkit-multiple:p-0 data-[placeholder=\"true\"]:text-gray-400 formkit-multiple:data-[placeholder=\"true\"]:text-inherit',\n selectIcon:\n 'flex p-[3px] shrink-0 w-5 mr-2 -ml-[1.5em] h-full pointer-events-none [&>svg]:w-[1em]',\n option: 'formkit-multiple:p-3 formkit-multiple:text-sm text-gray-700',\n },\n textarea: {\n inner:\n 'flex max-w-md rounded mb-1 ring-1 ring-gray-400 focus-within:ring-blue-500 [&>label:first-child]:focus-within:text-blue-500',\n input:\n 'block w-full h-32 px-3 py-3 border-none text-base text-gray-700 placeholder-gray-400 focus:shadow-outline',\n },\n\n // PRO input styles\n autocomplete: {\n closeIcon: 'block grow-0 shrink-0 w-3 mr-3.5',\n inner: 'relative',\n option: 'grow text-ellipsis',\n selectionWrapper: `\n absolute left-0 top-0 right-0 bottom-0 flex rounded bg-gray-100\n formkit-multiple:static formkit-multiple:mt-0 formkit-multiple:mb-2 formkit-multiple:max-w-md\n `,\n },\n colorpicker: {\n outer: `\n group\n formkit-disabled:cursor-not-allowed\n `,\n help: `\n group-[[data-inline]]:-mt-1 \n group-[[data-inline]]:mb-2\n `,\n inner: `\n relative\n inline-flex\n group-[[data-inline]]:shadow-none\n group-[[data-inline]]:!ring-1\n group-[[data-inline]]:!ring-gray-400\n `,\n swatchPreview: `\n w-full\n flex\n justify-start\n items-center\n p-3\n rounded-md\n text-sm\n cursor-pointer\n outline-none\n `,\n canvasSwatchPreviewWrapper: `\n relative\n before:content-['']\n before:absolute\n before:top-0\n before:left-0\n before:w-full\n before:h-full\n before:rounded-sm\n before:shadow-[inset_0_0_0_1px_rgba(0,0,0,0.2)]\n before:z-[2]\n `,\n canvasSwatchPreview: `\n rounded\n aspect-[2/1]\n w-10\n `,\n valueString: `\n inline-block\n ml-2\n mr-1\n `,\n panel: `\n flex\n flex-col\n max-w-[300px]\n p-2\n rounded\n bg-white\n touch-manipulation\n absolute\n w-[100vw]\n top-full\n left-0\n border\n shadow-xl\n z-10\n group-[[data-inline]]:static\n group-[[data-inline]]:w-auto\n group-[[data-inline]]:shadow-none\n group-[[data-inline]]:z-auto\n [@media(max-width:431px)_and_(hover:none)]:group-[&:not([data-inline])]:!fixed\n [@media(max-width:431px)_and_(hover:none)]:group-[&:not([data-inline])]:top-auto\n [@media(max-width:431px)_and_(hover:none)]:group-[&:not([data-inline])]:max-w-none\n [@media(max-width:431px)_and_(hover:none)]:group-[&:not([data-inline])]:bottom-0\n [@media(max-width:431px)_and_(hover:none)]:group-[&:not([data-inline])]:left-0\n [@media(max-width:431px)_and_(hover:none)]:group-[&:not([data-inline])]:rounded-none\n `,\n panelClose: `\n flex\n justify-end\n items-center\n mb-1\n -mt-1\n border-none\n bg-none\n border-b\n w-[calc(100%+1rem)]\n -ml-2\n pt-0\n pr-2\n pb-1\n pl-2\n `,\n closeIcon: `\n w-[2rem]\n aspect-square\n p-1\n rounded-full\n border\n [&>svg]:w-full\n [&>svg]:aspect-square\n [&>svg]:max-w-none\n [&>svg]:max-h-none\n `,\n controlGroup: `\n grid\n [grid-template-areas:'a_a_a'_'b_c_e'_'b_d_e']\n mb-2\n `,\n canvas: `\n block\n w-full\n `,\n canvasLS: `\n aspect-[2/1]\n cursor-pointer\n rounded-sm\n `,\n LS: `\n [grid-area:a]\n relative\n mb-2\n `,\n preview: `\n [grid-area:b]\n w-8\n inline-flex\n relative\n rounded\n overflow-hidden\n aspect-square\n rounded-sm\n after:content-['']\n after:absolute\n after:top-0\n after:left-0\n after:w-full\n after:h-full\n after:rounded-sm\n after:shadow-[inset_0_0_0_1px_rgba(0,0,0,0.2)]\n `,\n hue: `\n [grid-area:c]\n relative\n inline-flex\n h-3/4\n ml-2\n `,\n alpha: `\n [grid-area:d]\n relative\n inline-flex\n h-3/4\n ml-2\n `,\n eyeDropper: `\n [grid-area:e]\n p-1.5\n ml-2\n inline-flex\n self-center\n justify-self-center\n aspect-square\n rounded-sm\n border\n cursor-pointer\n content-center\n items-center\n `,\n eyeDropperIcon: `\n w-auto\n [&>svg]:w-5\n `,\n control: `\n absolute\n bg-white\n shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_3px_rgba(0,0,0,0.2)]\n -translate-x-1/2\n -translate-y-1/2\n pointer-events-none\n data-[prevent-focus-style]:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_3px_rgba(0,0,0,0.2)]\n focus-visible:outline-none\n focus-visible:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_3px_rgba(0,0,0,0.2),0_0_0_4px_rgba(59,130,246,1),0_0_0_5px_rgba(0,0,0,1)]\n `,\n controlLS: `\n w-[10px]\n h-[10px]\n rounded-full\n `,\n controlHue: `\n w-[4px]\n h-[calc(100%-2px)]\n top-1/2\n rounded-[1px]\n `,\n controlAlpha: `\n w-[4px]\n h-[calc(100%-2px)]\n top-1/2\n rounded-[1px]\n `,\n formatField: `\n flex\n items-center\n justify-center\n grow\n `,\n colorInputGroup: `\n flex\n items-center\n justify-center\n grow\n `,\n fieldGroup: `\n flex\n flex-col\n items-center\n justify-center\n w-full\n mr-1\n [&>input]:p-1\n [&>input]:text-sm\n [&>input]:m-0\n [&>input]:grow\n [&>input]:shrink\n [&>input]:w-full\n [&>input]:border\n [&>input]:rounded-sm\n [&>input]:text-center\n [&>input]:appearance-none\n [&>input::-webkit-outer-spin-button]:appearance-none \n [&>input::-webkit-inner-spin-button]:appearance-none\n [&>input::-webkit-inner-spin-button]:m-0\n [&>input:focus]:outline-none\n [&>input:focus]:ring\n [&>input:focus]:ring-blue-500\n max-[431px]:[&>input]:text-base\n `,\n fieldLabel: `\n text-xs\n mt-1\n opacity-50\n `,\n formatSwitcher: `\n flex\n justify-end\n self-start\n mt-1\n uppercase\n shrink-0\n p-1\n rounded-sm\n select-none\n `,\n switchIcon: `\n [&>svg]:w-3\n `,\n swatches: `\n flex\n flex-wrap\n w[calc(100%+0.5rem)]\n -ml-1\n pt-2\n pb-2\n mt-2\n -mb-2\n border-t\n overflow-auto\n max-h-[200px]\n select-none\n first:-mt-2\n first:border-t-0\n `,\n swatchGroup: `\n flex\n flex-wrap\n w-full\n mb-2\n last:mb-0\n `,\n swatchGroupLabel: `\n block\n w-full\n text-sm\n opacity-50\n `,\n swatch: `\n relative\n w-full\n max-w-[calc((100%/10)-0.5rem)]\n aspect-square\n m-1\n cursor-pointer\n before:content-['']\n before:absolute\n before:top-0\n before:left-0\n before:w-full\n before:h-full\n before:rounded-sm\n before:shadow-[inset_0_0_0_1px_rgba(0,0,0,0.2)]\n before:pointer-events-none\n before:z-[2]\n data-[active='true']:after:content-['']\n data-[active='true']:after:block\n data-[active='true']:after:absolute\n data-[active='true']:after:w-1.5\n data-[active='true']:after:h-1.5\n data-[active='true']:after:top-1/2\n data-[active='true']:after:left-1/2\n data-[active='true']:after:pointer-events-none\n data-[active='true']:after:rounded-full\n data-[active='true']:after:-translate-x-1/2\n data-[active='true']:after:-translate-y-1/2\n data-[active='true']:after:bg-white\n data-[active='true']:after:z-[2]\n data-[active='true']:after:ring-1\n data-[active='true']:after:ring-[rgba(0,0,0,0.33)]\n [&>canvas]:block\n [&>canvas]:w-full\n [&>canvas]:aspect-square\n [&>canvas]:rounded-sm\n [&>canvas:focus-visible]:outline-none\n [&>canvas:focus-visible]:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(59,130,246,1)]\n `,\n },\n datepicker: {\n inner: 'relative',\n panelWrapper:\n 'absolute top-[calc(100%_+_0.5em)] shadow-[0_0_1.25em_rgba(0,0,0,.25)] rounded-md p-5 bg-white z-10',\n panelHeader:\n 'grid grid-cols-[2.5em_1fr_2.5em] justify-center items-center border-b-2 mb-4 pb-4',\n input: 'selection:bg-blue-400',\n monthsHeader: 'flex items-center justify-center col-start-2 col-end-2',\n timeHeader: 'flex items-center justify-center col-start-2 col-end-2',\n overlayPlaceholder: 'text-gray-400',\n months: 'flex flex-wrap',\n month: `\n flex items-center justify-center\n w-[calc(33%_-_1em)] m-2 p-2 rounded-md\n bg-gray-200\n aria-selected:bg-blue-500 aria-selected:text-white\n focus:outline focus:outline-2 focus:outline-blue-500 focus:outline-offset-2 focus:bg-white focus:text-black\n data-[is-extra=true]:opacity-25\n formkit-disabled:opacity-50 formkit-disabled:cursor-default formkit-disabled:pointer-events-none\n `,\n yearsHeader: 'flex items-center justify-center col-start-2 col-end-2',\n years: 'flex flex-wrap max-w-[35em]',\n year: `\n flex items-center justify-center\n w-[calc(20%_-_1em)] m-2 p-2 rounded-md\n bg-gray-200\n aria-selected:bg-blue-500 aria-selected:text-white\n focus:outline focus:outline-2 focus:outline-blue-500 focus:outline-offset-2 focus:bg-white focus:text-black\n data-[is-extra=true]:opacity-25\n formkit-disabled:opacity-50 formkit-disabled:cursor-default formkit-disabled:pointer-events-none\n `,\n weekDays: 'flex',\n weekDay:\n 'flex w-[2.25em] h-[1em] m-1 items-center justify-center rounded-md font-medium lowercase',\n week: 'flex formkit-disabled:opacity-50 formkit-disabled:cursor-default formkit-disabled:pointer-events-none',\n dayCell: `\n flex items-center justify-center\n w-[2.25em] h-[2.25em] m-1 p-2 rounded-md\n bg-gray-200\n aria-selected:bg-blue-500 aria-selected:text-white\n focus:outline focus:outline-2 focus:outline-blue-500 focus:outline-offset-2 focus:bg-white focus:text-black\n data-[is-extra=true]:opacity-25\n formkit-disabled:opacity-50 formkit-disabled:cursor-default formkit-disabled:pointer-events-none\n `,\n timeInput:\n 'w-full border-2 border-gray-300 rounded-md p-2 my-[2em] focus-visible:outline-blue-500',\n daysHeader: 'flex items-center justify-center',\n prev: 'mr-auto px-3 py-1 hover:bg-gray-100 hover:rounded-lg col-start-1 col-end-1',\n prevLabel: 'hidden',\n prevIcon: 'flex w-3 select-none [&>svg]:w-full',\n dayButton:\n 'appearance-none cursor-pointer px-3 py-1 border-2 rounded-lg mx-1 hover:border-blue-500',\n monthButton:\n 'appearance-none cursor-pointer px-3 py-1 border-2 rounded-lg mx-1 hover:border-blue-500',\n yearButton:\n 'appearance-none cursor-pointer px-3 py-1 border-2 rounded-lg mx-1 hover:border-blue-500',\n next: 'ml-auto px-3 py-1 hover:bg-gray-100 hover:rounded col-start-3 col-end-3',\n nextLabel: 'hidden',\n nextIcon: 'flex w-3 select-none [&>svg]:w-full',\n openButton: `\n appearance-none border-0 bg-transparent flex p-0 self-stretch cursor-pointer\n focus-visible:outline-none focus-visible:text-white focus-visible:bg-blue-500\n `,\n calendarIcon:\n 'flex w-8 grow-0 shrink-0 self-stretch select-none [&>svg]:w-full [&>svg]:m-auto [&>svg]:max-h-[1em] [&>svg]:max-w-[1em]',\n },\n dropdown: {\n tagsWrapper: 'max-w-[calc(100%_-_35px)]',\n tags: 'flex items-center flex-wrap gap-1 mx-2 my-1.5',\n tag: 'flex items-center rounded-full bg-gray-200 text-xs text-black py-1 px-2.5 cursor-default',\n tagLabel: 'px-1',\n selectionsWrapper: 'flex w-[calc(100%_-_35px)] overflow-hidden',\n selections: 'inline-flex items-center px-2.5',\n selectionsItem: 'whitespace-nowrap mr-1 last:mr-0',\n truncationCount:\n 'flex items-center whitespace-nowrap justify-center rounded text-white bg-gray-500 font-bold text-xs px-1 py-0.5',\n removeSelection: 'block w-2.5 my-1 cursor-pointer',\n },\n rating: {\n inner: 'relative flex items-center w-[8em] formkit-disabled:bg-transparent',\n itemsWrapper: 'w-full',\n onItems: 'text-yellow-400',\n onItemWrapper:\n '[&>*]:w-full [&>svg]:h-auto [&>svg]:max-w-none [&>svg]:max-h-none',\n offItems: 'text-gray-500',\n offItemWrapper:\n '[&>*]:w-full [&>svg]:h-auto [&>svg]:max-w-none [&>svg]:max-h-none',\n },\n repeater: {\n content: 'grow p-3 flex flex-col align-center',\n controlLabel: 'absolute opacity-0 pointer-events-none',\n controls: 'flex flex-col items-center justify-center bg-gray-100 p-3',\n downControl:\n 'hover:text-blue-500 disabled:hover:text-inherit disabled:opacity-25',\n fieldset: 'py-4 px-5',\n help: 'mb-2 mt-1.5',\n item: 'flex w-full mb-1 rounded border border-gray-200',\n moveDownIcon: 'block w-3 my-1',\n moveUpIcon: 'block w-3 my-1',\n removeControl:\n 'hover:text-blue-500 disabled:hover:text-inherit disabled:opacity-25',\n removeIcon: 'block w-5 my-1',\n upControl:\n 'hover:text-blue-500 disabled:hover:text-inherit disabled:opacity-25',\n },\n slider: {\n outer: 'max-w-md',\n help: 'mt-0 mb-1',\n sliderInner:\n 'flex items-center py-1 [&>.formkit-max-value]:mb-0 [&>.formkit-max-value]:ml-8 [&>.formkit-max-value]:shrink [&>.formkit-max-value]:grow-0 [&>.formkit-icon]:bg-none [&>.formkit-icon]:border-none [&>.formkit-icon]:p-0 [&>.formkit-icon]:w-4 [&>.formkit-prefix-icon]:mr-2 [&>.formkit-suffix-icon]:ml-2 [&[data-has-mark-labels=\"true\"]_.formkit-track]:mb-4',\n track: 'grow relative z-[3] py-1 user-select-none',\n trackWrapper: 'px-[2px] rounded-full bg-gray-200',\n trackInner: 'h-[6px] mx-[2px] relative',\n fill: 'h-full rounded-full absolute top-0 mx-[-4px] bg-blue-500',\n marks: 'absolute pointer-events-none left-0 right-0 top-0 bottom-0',\n mark: 'absolute top-1/2 w-[3px] h-[3px] rounded-full -translate-x-1/2 -translate-y-1/2 bg-gray-400 data-[active=\"true\"]:bg-white',\n markLabel:\n 'absolute top-[calc(100%+0.5em)] left-1/2 text-gray-400 text-[0.66em] -translate-x-1/2',\n handles: 'm-0 p-0 list-none',\n handle:\n 'group w-4 h-4 rounded-full bg-white absolute top-1/2 left-0 z-[2] -translate-x-1/2 -translate-y-1/2 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.1),0_1px_2px_0_rgba(0,0,0,0.8)] focus-visible:outline-0 focus-visible:ring-2 ring-blue-500 data-[is-target=\"true\"]:z-[3]',\n tooltip:\n 'absolute bottom-full left-1/2 -translate-x-1/2 -translate-y-[4px] bg-blue-500 text-white py-1 px-2 text-xs leading-none whitespace-nowrap rounded-sm opacity-0 pointer-events-none transition-opacity after:content-[\"\"] after:absolute after:top-full after:left-1/2 after:-translate-x-1/2 after:-translate-y-[1px] after:border-4 after:border-transparent after:border-t-blue-500 group-hover:opacity-100 group-focus-visible:opacity-100 group-data-[show-tooltip=\"true\"]:opacity-100',\n linkedValues: 'flex items-start justify-between',\n minValue:\n 'grow max-w-[45%] mb-0 relative [&_.formkit-inner::after]:content-[\"\"] [&_.formkit-inner::after]:absolute [&_.formkit-inner::after]:left-[105%] [&_.formkit-inner::after]:-translate-y-1/2 [&_.formkit-inner::after]:w-[10%] [&_.formkit-inner::after]:h-[1px] [&_.formkit-inner::after]:bg-gray-500',\n maxValue: 'grow max-w-[45%] mb-0 relative',\n chart:\n 'relative z-[2] mb-2 flex justify-between items-center w-full aspect-[3/1]',\n chartBar:\n 'absolute bottom-0 h-full bg-gray-400 opacity-[.66] data-[active=\"false\"]:opacity-[.25]',\n },\n taglist: {\n input: 'px-1 py-1 w-[0%] grow',\n removeSelection: 'w-2.5 mx-1 self-center text-black leading-none',\n tag: 'flex items-center my-1 p-1 bg-gray-200 text-xs rounded-full',\n tagWrapper:\n 'mr-1 focus:outline-none focus:text-white [&>div]:focus:bg-blue-500 [&>div>button]:focus:text-white',\n tagLabel: 'pl-2 pr-1',\n tags: 'flex items-center flex-wrap w-full py-1.5 px-2',\n },\n toggle: {\n altLabel: 'block w-full mb-1 font-bold text-sm',\n inner: '$reset inline-block mr-2',\n input: 'peer absolute opacity-0 pointer-events-none',\n innerLabel:\n 'text-[10px] font-bold absolute left-full top-1/2 -translate-x-full -translate-y-1/2 px-1',\n thumb:\n 'relative left-0 aspect-square rounded-full transition-all w-5 bg-gray-100',\n track:\n 'p-0.5 min-w-[3em] relative rounded-full transition-all bg-gray-400 peer-checked:bg-blue-500 peer-checked:[&>div:last-child]:left-full peer-checked:[&>div:last-child]:-translate-x-full peer-checked:[&>div:first-child:not(:last-child)]:left-0 peer-checked:[&>div:first-child:not(:last-child)]:translate-x-0',\n valueLabel: 'font-bold text-sm',\n wrapper: 'flex flex-wrap items-center mb-1',\n },\n togglebuttons: {\n input: `\n !text-black !bg-white\n relative flex ring-1 ring-gray-400 text-center align-center justify-center transition-colors\n group-data-[vertical=\"true\"]/options:w-full\n group-data-[vertical=\"true\"]/options:rounded-none\n group-data-[vertical=\"false\"]/options:rounded-none\n focus-visible:z-10\n disabled:filter-grayscale\n disabled:!bg-gray-200\n disabled:!text-gray-700\n disabled:opacity-50\n disabled:cursor-not-allowed\n formkit-disabled:opacity-100\n aria-pressed:!bg-blue-600\n aria-pressed:!text-white\n `,\n options: `\n group/options\n inline-flex\n data-[vertical=\"true\"]:flex-col\n `,\n option: `\n group/option\n group-data-[vertical=\"true\"]/options:[&>*]:first:rounded-tl\n group-data-[vertical=\"true\"]/options:[&>*]:first:rounded-tr\n group-data-[vertical=\"true\"]/options:[&>*]:last:rounded-bl\n group-data-[vertical=\"true\"]/options:[&>*]:last:rounded-br\n group-data-[vertical=\"false\"]/options:[&>*]:first:rounded-tl\n group-data-[vertical=\"false\"]/options:[&>*]:first:rounded-bl\n group-data-[vertical=\"false\"]/options:[&>*]:last:rounded-tr\n group-data-[vertical=\"false\"]/options:[&>*]:last:rounded-br\n `,\n },\n transferlist: {\n outer: `\n [&_.dnd-placeholder]:bg-blue-500 [&_.dnd-placeholder]:text-white\n [&_.dnd-placeholder_svg]:text-white\n [&_.dnd-children-hidden]:w-full [&_.dnd-children-hidden]:p-0 [&_.dnd-children-hidden]:flex [&_.dnd-children-hidden]:flex-col [&_.dnd-children-hidden]:border-none\n [&_.dnd-children-hidden_span]:hidden\n [&_.dnd-children-hidden_.formkit-transferlist-option]:hidden\n [&_.dnd-multiple-selections_span]:inline-block\n [&_.dnd-multiple-selections_.formkit-transferlist-option]:inline-block\n `,\n fieldset: '$reset max-w-2xl',\n wrapper:\n 'flex max-h-[350px] flex-col sm:flex-row justify-between w-full max-w-none',\n help: 'pb-2',\n transferlist:\n 'sm:w-3/5 shadow-md flex flex-col min-h-[350px] max-h-[350px] border rounded overflow-hidden select-none bg-gray-50',\n transferlistHeader:\n 'flex bg-gray-100 justify-between items-center border-b p-3',\n transferlistHeaderItemCount: 'ml-auto text-sm',\n transferlistListItems:\n 'list-none bg-gray-50 h-full sm:max-w-xs overflow-x-hidden overflow-y-auto',\n transferlistListItem:\n 'pl-8 relative aria-selected:bg-blue-600 aria-selected:data-[is-active=true]:bg-blue-600 aria-selected:text-white aria-selected:data-[is-active=true]:text-white first:-mt-px first:border-t py-2 px-3 flex relative border-b bg-white data-[is-active=true]:text-blue-500 data-[is-active=true]:bg-gray-100 cursor-pointer group-data-[is-max=true]:cursor-not-allowed items-center',\n transferlistOption: 'text-sm',\n transferControls:\n 'flex sm:flex-col justify-center mx-auto my-2 sm:mx-2 sm:my-auto border rounded',\n transferlistButton:\n 'text-sm disabled:cursor-not-allowed disabled:bg-gray-200 disabled:opacity-50 first:rounded-l last:rounded-r sm:first:rounded-t sm:last:rounded-b appearance-none p-2 m-0 cursor-pointer h-10 border-none rounded-none bg-gray-50 hover:outline disabled:hover:outline-none hover:outline-1 hover:outline-black hover:text-blue-500 disabled:hover:text-current hover:z-10',\n sourceEmptyMessage:\n 'appearance-none border-none w-full p-0 m-0 text-center text-gray-500 italic',\n sourceListItems: 'group-data-[is-max=true]:opacity-50',\n targetEmptyMessage:\n 'appearance-none border-none w-full p-0 m-0 text-center text-gray-500 italic',\n emptyMessageInner: 'flex items-center justify-center p-2 text-sm',\n transferlistControls: 'bg-white px-3 py-2 border-b',\n transferlistSearch: 'flex border rounded items-center',\n transferlistSearchInput:\n 'border-none p-1 w-full bg-transparent outline-none text-sm',\n controlLabel: 'hidden',\n selectedIcon: 'w-3 absolute left-3 select-none',\n fastForwardIcon:\n 'w-10 flex select-none [&>svg]:m-auto [&>svg]:w-full [&>svg]:max-w-[1rem] [&>svg]:max-h-[1rem] rotate-90 sm:rotate-0',\n moveRightIcon:\n 'w-10 flex select-none [&>svg]:m-auto [&>svg]:w-full [&>svg]:max-w-[1rem] [&>svg]:max-h-[1rem] rotate-90 sm:rotate-0',\n moveLeftIcon:\n 'w-10 flex select-none [&>svg]:m-auto [&>svg]:w-full [&>svg]:max-w-[1rem] [&>svg]:max-h-[1rem] rotate-90 sm:rotate-0',\n rewindIcon:\n 'w-10 flex select-none [&>svg]:m-auto [&>svg]:w-full [&>svg]:max-w-[1rem] [&>svg]:max-h-[1rem] rotate-90 sm:rotate-0',\n },\n}\n"]}