Merge branch 'main' of https://github.com/primefaces/primevue-tailwind

doc/common/presetdoc/index.json

@@ -8,6 +8,7 @@
   "divider": ".p-divider-horizontal {\n    @apply flex w-full relative items-center my-4 mx-0 py-0 px-4\n}\n\n.p-divider-horizontal:before {\n    @apply absolute block top-1/2 left-0 w-full content-[''] border-t border-surface-200 dark:border-surface-700\n}\n\n.p-divider-horizontal .p-divider-content {\n    @apply py-0 px-2\n}\n\n.p-divider-vertical {\n    @apply min-h-full flex relative justify-center my-0 mx-4 py-2 px-0\n}\n\n.p-divider-vertical:before {\n    @apply absolute block top-0 left-1/2 h-full content-[''] border-l border-surface-200 dark:border-surface-700\n}\n\n.p-divider.p-divider-vertical .p-divider-content {\n    @apply py-2 px-0\n}\n\n.p-divider-content {\n    @apply z-10 bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0\n}\n\n.p-divider-solid.p-divider-horizontal:before {\n    @apply border-solid\n}\n\n.p-divider-solid.p-divider-vertical:before {\n    @apply border-solid\n}\n\n.p-divider-dashed.p-divider-horizontal:before {\n    @apply border-dashed\n}\n\n.p-divider-dashed.p-divider-vertical:before {\n    @apply border-dashed\n}\n\n.p-divider-dotted.p-divider-horizontal:before {\n    @apply border-dotted\n}\n\n.p-divider-dotted.p-divider-vertical:before {\n    @apply border-dotted\n}",
   "fieldset": ".p-fieldset {\n    @apply border border-surface-200 dark:border-surface-700 rounded-md\n        bg-surface-0 dark:bg-surface-900\n        text-surface-700 dark:text-surface-0\n        px-[1.125rem] pt-0 pb-[1.125rem]\n}\n\n.p-fieldset-legend {\n    @apply border border-transparent rounded-md px-3 py-2\n        transition-colors duration-200\n}\n\n.p-fieldset-toggleable > .p-fieldset-legend {\n    @apply p-0\n}\n\n.p-fieldset-toggle-button {\n    @apply select-none overflow-hidden relative\n        flex items-center justify-center gap-2\n        px-3 py-2\n        border-none rounded-md\n        bg-surface-0 dark:bg-surface-900\n        hover:bg-surface-100 dark:hover:bg-surface-800\n        text-surface-700 dark:text-surface-0\n        hover:text-surface-800 dark:hover:text-surface-0\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n        transition-colors duration-200\n}\n\n.p-fieldset-legend-label {\n    @apply font-semibold;\n}\n\n.p-fieldset-toggle-icon {\n    @apply text-surface-500 dark:text-surface-400\n        transition-colors duration-200\n}\n\n.p-fieldset-toggle-button:hover .p-fieldset-toggle-icon {\n    @apply text-surface-600 dark:text-surface-300\n}\n\n.p-fieldset .p-fieldset-content {\n    @apply p-0\n}",
   "global": ".p-disabled {\n    @apply opacity-60\n}\n\n.p-overlay-mask {\n    @apply bg-black/50 text-surface-200 transition-colors duration-150\n        fixed top-0 left-0 w-full h-full\n}\n\n.p-overlay-mask-enter {\n    animation: p-overlay-mask-enter-animation 150ms forwards;\n}\n\n.p-overlay-mask-leave {\n    animation: p-overlay-mask-leave-animation 150ms forwards;\n}\n\n@keyframes p-overlay-mask-enter-animation {\n    from {\n        background: transparent;\n    }\n    to {\n        background: rgba(0,0,0,0.5);\n    }\n}\n\n@keyframes p-overlay-mask-leave-animation {\n    from {\n        background: rgba(0,0,0,0.5);\n    }\n    to {\n        background: transparent;\n    }\n}",
+  "iconfield": ".p-iconfield {\n    @apply relative\n}\n\n.p-inputicon {\n    @apply absolute top-1/2 -mt-2 text-surface-500 dark:text-surface-400 leading-none\n}\n\n.p-iconfield .p-inputicon:first-child {\n    @apply left-3\n}\n\n.p-iconfield .p-inputicon:last-child {\n    @apply right-3\n}\n\n.p-iconfield .p-inputtext:not(:first-child) {\n    @apply pl-10\n}\n\n.p-iconfield .p-inputtext:not(:last-child) {\n    @apply pr-10\n}",
   "inputotp": ".p-inputotp {\n    @apply flex items-center gap-2\n}\n\n.p-inputotp-input {\n    @apply text-center w-10\n}",
   "inputtext": ".p-inputtext {\n    @apply appearance-none rounded-md\n        border border-surface-300 dark:border-surface-700 \n        enabled:hover:border-surface-400 dark:enabled:hover:border-surface-600\n        enabled:focus:border-primary\n        bg-surface-0 dark:bg-surface-950\n        text-surface-700 dark:text-surface-0\n        disabled:bg-surface-200 disabled:text-surface-500 dark:disabled:bg-surface-700 dark:disabled:text-surface-400\n        placeholder:text-surface-500 dark:placeholder:text-surface-400\n        px-3 py-2\n        transition-colors duration-200\n        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]\n        outline-none\n}\n\n.p-inputtext.p-invalid {\n    @apply border-red-400 dark:border-red-300\n}\n\n.p-inputtext.p-variant-filled {\n    @apply bg-surface-50 dark:bg-surface-800\n}\n\n.p-inputtext-sm {\n    @apply text-sm px-[0.625rem] py-[0.375rem]\n}\n\n.p-inputtext-lg {\n    @apply text-lg px-[0.875rem] py-[0.625rem]\n}\n\n.p-inputtext-fluid {\n    @apply w-full\n}",
   "knob": ".p-knob-range {\n    @apply fill-none transition-[stroke] duration-100 ease-in\n}\n\n.p-knob-text {\n    @apply text-xl text-center\n}\n\n.p-knob svg {\n    @apply rounded-full\n        transition-colors duration-200\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n}\n\n.p-knob svg path:first-child {\n    @apply stroke-surface-200 dark:stroke-surface-700\n}\n\n.p-knob svg path + path {\n    @apply stroke-primary\n}\n\n.p-knob svg text {\n    @apply fill-surface-500 dark:fill-surface-400\n}\n\n.p-knob-value {\n    animation-name: p-knob-dash-frame;\n    animation-fill-mode: forwards;\n    fill: none;\n}\n\n@keyframes p-knob-dash-frame {\n    100% {\n        stroke-dashoffset: 0;\n    }\n}",
@@ -21,6 +22,7 @@
   "splitter": ".p-splitter {\n    @apply flex flex-wrap\n        border border-surface-200 dark:border-surface-700 rounded-md\n        bg-surface-0 dark:bg-surface-900\n        text-surface-700 dark:text-surface-0\n}\n\n.p-splitter-vertical {\n    @apply flex-col\n}\n\n.p-splitter-gutter {\n    @apply flex-grow-0 flex-shrink-0 flex items-center justify-center z-10 bg-surface-200 dark:bg-surface-700\n}\n\n.p-splitter-gutter-handle {\n    @apply rounded-md bg-transparent \n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n        transition-colors duration-200\n}\n\n.p-splitter-horizontal.p-splitter-resizing {\n    @apply cursor-col-resize select-none\n}\n\n.p-splitter-vertical.p-splitter-resizing {\n    @apply cursor-row-resize select-none\n}\n\n.p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle {\n    @apply h-[24px] w-full\n}\n\n.p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle {\n    @apply w-[24px] h-full\n}\n\n.p-splitter-horizontal > .p-splitter-gutter {\n    @apply cursor-col-resize\n}\n\n.p-splitter-vertical > .p-splitter-gutter {\n    @apply cursor-row-resize\n}\n\n.p-splitterpanel {\n    @apply flex-grow overflow-hidden\n}\n\n.p-splitterpanel-nested {\n    @apply flex\n}\n\n.p-splitterpanel .p-splitter {\n    @apply flex-grow border-none\n}",
   "tag": ".p-tag {\n    @apply inline-flex items-center justify-center\n        bg-primary-100 dark:bg-primary-500/15\n        text-primary-700 dark:text-primary-300\n        text-sm font-bold py-1 px-2 rounded-md gap-1\n}\n\n.p-tag-icon {\n    @apply text-xs w-3 h-3\n}\n\n.p-tag-rounded {\n    @apply rounded-2xl\n}\n\n.p-tag-success {\n    @apply bg-green-100 dark:bg-green-500/15 text-green-700 dark:text-green-300\n}\n\n.p-tag-info {\n    @apply bg-sky-100 dark:bg-sky-500/15 text-sky-700 dark:text-sky-300\n}\n\n.p-tag-warn {\n    @apply bg-orange-100 dark:bg-orange-500/15 text-orange-700 dark:text-orange-300\n}\n\n.p-tag-danger {\n    @apply bg-red-100 dark:bg-red-500/15 text-red-700 dark:text-red-300\n}\n\n.p-tag-secondary {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-300\n}\n\n.p-tag-contrast {\n    @apply bg-surface-950 dark:bg-surface-0 text-surface-0 dark:text-surface-950\n}",
   "terminal": ".p-terminal {\n    @apply h-72 overflow-auto px-3 py-2 rounded-md\n        border border-surface-300 dark:border-surface-700 \n        bg-surface-0 dark:bg-surface-950\n        text-surface-700 dark:text-surface-0\n}\n\n.p-terminal-prompt {\n    @apply flex items-center\n}\n\n.p-terminal-prompt-value {\n    @apply flex-auto border-none bg-transparent text-inherit p-0 outline-none text-base\n}\n\n.p-terminal-prompt-label {\n    @apply mr-1\n}\n\n.p-terminal-input::-ms-clear {\n    @apply hidden\n}",
+  "textarea": ".p-textarea {\n    @apply appearance-none rounded-md\n        border border-surface-300 dark:border-surface-700 \n        enabled:hover:border-surface-400 dark:enabled:hover:border-surface-600\n        enabled:focus:border-primary\n        bg-surface-0 dark:bg-surface-950\n        text-surface-700 dark:text-surface-0\n        disabled:bg-surface-200 disabled:text-surface-500 dark:disabled:bg-surface-700 dark:disabled:text-surface-400\n        placeholder:text-surface-500 dark:placeholder:text-surface-400\n        px-3 py-2\n        transition-colors duration-200\n        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]\n        outline-none\n}\n\n.p-textarea.p-invalid {\n    @apply border-red-400 dark:border-red-300\n}\n\n.p-textarea.p-variant-filled {\n    @apply bg-surface-50 dark:bg-surface-800\n}\n\n.p-textarea-fluid {\n    @apply w-full\n}\n\n.p-textarea-resizable {\n    @apply overflow-hidden resize-none\n}",
   "togglebutton": ".p-togglebutton {\n    @apply inline-flex items-center justify-center overflow-hidden relative cursor-pointer select-none\n        border border-surface-100 dark:border-surface-950 rounded-md\n        bg-surface-100 dark:bg-surface-950\n        text-surface-500 dark:text-surface-400 text-base font-medium\n        px-4 py-2\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n        disabled:opacity-100 disabled:cursor-default \n        disabled:bg-surface-200 disabled:border-surface-200 disabled:text-surface-500\n        disabled:dark:bg-surface-700 disabled:dark:border-surface-700 disabled:dark:text-surface-400\n        transition-colors duration-300\n        before:bg-transparent before:absolute before:left-1 before:top-1 before:rounded-md before:w-[calc(100%-0.5rem)] before:h-[calc(100%-0.5rem)]\n        before:transition-colors before:duration-200\n}\n\n.p-togglebutton-content {\n    @apply relative inline-flex items-center justify-center gap-2\n}\n\n.p-togglebutton-label,\n.p-togglebutton-icon {\n    @apply relative transition-none\n}\n\n.p-togglebutton.p-togglebutton-checked::before {\n    @apply bg-surface-0 dark:bg-surface-800 shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02),0px_1px_2px_0px_rgba(0,0,0,0.04)]\n}\n\n.p-togglebutton:not(:disabled):not(.p-togglebutton-checked):hover {\n    @apply bg-surface-100 dark:bg-surface-950 text-surface-700 dark:text-surface-300\n}\n\n.p-togglebutton.p-togglebutton-checked {\n    @apply bg-surface-100 dark:bg-surface-950 border-surface-100 dark:border-surface-950 text-surface-900 dark:text-surface-0\n}\n\n.p-togglebutton.p-invalid {\n    @apply border-red-400 dark:border-red-300\n}\n\n.p-togglebutton-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-togglebutton:not(:disabled):not(.p-togglebutton-checked):hover .p-togglebutton-icon {\n    @apply text-surface-700 dark:text-surface-300\n}\n\n.p-togglebutton.p-togglebutton-checked .p-togglebutton-icon {\n    @apply text-surface-900 dark:text-surface-0\n}\n\n.p-togglebutton:disabled .p-togglebutton-icon {\n    @apply text-surface-500 dark:text-surface-400\n}",
   "toggleswitch": ".p-toggleswitch {\n    @apply inline-block w-10 h-6\n}\n\n.p-toggleswitch-input {\n    @apply cursor-pointer disabled:cursor-default appearance-none absolute top-0 left-0 w-full h-full m-0 p-0 opacity-0 z-10 rounded-[30px]\n}\n\n.p-toggleswitch-slider {\n    @apply inline-block w-full h-full rounded-[30px] shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]\n        bg-surface-300 dark:bg-surface-700\n        border border-transparent\n        transition-colors duration-200\n}\n\n.p-toggleswitch-handle {\n    @apply absolute top-1/2 flex justify-center items-center\n        bg-surface-0 dark:bg-surface-400\n        text-surface-500 dark:text-surface-900\n        w-4 h-4 left-1 -mt-2 rounded-full\n        transition-[background,color,left] duration-200\n}\n\n.p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider {\n    @apply bg-primary\n}\n\n.p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-handle {\n    @apply bg-surface-0 dark:bg-surface-900 text-primary left-5\n}\n\n.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover) .p-toggleswitch-slider {\n    @apply bg-surface-400 dark:bg-surface-600\n}\n\n.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover) .p-toggleswitch-handle {\n    @apply bg-surface-0 dark:bg-surface-300 text-surface-700 dark:text-surface-800\n}\n\n.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover).p-toggleswitch-checked .p-toggleswitch-slider {\n    @apply bg-primary-emphasis\n}\n\n.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover).p-toggleswitch-checked .p-toggleswitch-handle {\n    @apply bg-surface-0 dark:bg-surface-900 text-primary-emphasis\n}\n\n.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:focus-visible) .p-toggleswitch-slider {\n    @apply outline outline-1 outline-offset-2 outline-primary\n}\n\n.p-toggleswitch.p-invalid > .p-toggleswitch-slider {\n    @apply border-red-400 dark:border-red-300\n}\n\n.p-toggleswitch.p-disabled {\n    @apply opacity-100\n}\n\n.p-toggleswitch.p-disabled .p-toggleswitch-slider {\n    @apply bg-surface-200 dark:bg-surface-800\n}\n\n.p-toggleswitch.p-disabled .p-toggleswitch-handle {\n    @apply bg-surface-700 dark:bg-surface-500\n}",
   "toolbar": ".p-toolbar {\n    @apply flex items-center justify-between flex-wrap p-3 gap-2\n        bg-surface-0 dark:bg-surface-900\n        text-surface-700 dark:text-surface-0\n        border border-surface-200 dark:border-surface-700 rounded-md\n}\n\n.p-toolbar-start,\n.p-toolbar-center,\n.p-toolbar-end {\n    @apply flex items-center\n}"