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

primefaces · Oct 10, 2024 · 0eac19c · 0eac19c
2 parents 44f7c34 + f337995
commit 0eac19c
Showing 1 changed file with 2 additions and 0 deletions.
diff --git a/doc/common/presetdoc/index.json b/doc/common/presetdoc/index.json
@@ -1,4 +1,5 @@
 {
+  "accordion": ".p-accordionpanel {\n    @apply flex flex-col border-b border-surface-200 dark:border-surface-700\n}\n\n.p-accordionheader {\n    @apply cursor-pointer disabled:cursor-auto flex items-center justify-between p-[1.125rem] font-semibold\n        bg-surface-0 dark:bg-surface-900\n        text-surface-500 dark:text-surface-400\n        transition-colors duration-200\n}\n\n.p-accordionpanel:first-child > .p-accordionheader {\n    @apply rounded-t-md\n}\n\n.p-accordionpanel:last-child > .p-accordionheader {\n    @apply rounded-b-md\n}\n\n.p-accordionpanel:last-child.p-accordionpanel-active > .p-accordionheader {\n    @apply rounded-b-md\n}\n\n.p-accordionheader-toggle-icon {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-accordionpanel:not(.p-disabled) .p-accordionheader:focus-visible {\n    @apply outline outline-1 outline-offset-[-1px] outline-primary\n}\n\n.p-accordionpanel:not(.p-accordionpanel-active):not(.p-disabled) > .p-accordionheader:hover {\n    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0\n}\n\n.p-accordionpanel:not(.p-accordionpanel-active):not(.p-disabled) .p-accordionheader:hover .p-accordionheader-toggle-icon {\n    @apply text-surface-700 dark:text-surface-0\n}\n\n.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader {\n    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0\n}\n\n.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader .p-accordionheader-toggle-icon {\n    @apply text-surface-700 dark:text-surface-0;\n}\n\n.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader:hover  {\n    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0\n}\n\n.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader:hover  .p-accordionheader-toggle-icon {\n    @apply text-surface-700 dark:text-surface-0;\n}\n\n.p-accordioncontent-content {\n    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0 pt-0 px-[1.125rem] pb-[1.125rem]\n}",
   "autocomplete": ".p-autocomplete {\n    @apply inline-flex\n}\n\n.p-autocomplete.p-disabled {\n    @apply opacity-100\n}\n\n.p-autocomplete-loader {\n    @apply absolute top-1/2 -mt-2 right-3\n}\n\n.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-loader {\n    @apply right-[3.25rem]\n}\n\n.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input {\n    @apply flex-auto w-[1%]\n}\n\n.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input,\n.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input-multiple {\n    @apply rounded-r-none\n}\n\n.p-autocomplete-dropdown {\n    @apply cursor-pointer inline-flex items-center justify-center select-none overflow-hidden relative w-10 rounded-r-md\n        bg-surface-100 enabled:hover:bg-surface-200 enabled:active:bg-surface-300\n        text-surface-600 enabled:hover:text-surface-700 enabled:hover:active:text-surface-800\n        dark:bg-surface-800 dark:enabled:hover:bg-surface-700 dark:enabled:active:bg-surface-600\n        dark:text-surface-300 dark:enabled:hover:text-surface-200 dark:enabled:active:text-surface-100\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-autocomplete .p-autocomplete-overlay {\n    @apply min-w-full\n}\n\n.p-autocomplete-overlay {\n    @apply absolute top-0 left-0 rounded-md\n        bg-surface-0 dark:bg-surface-900\n        border border-surface-200 dark:border-surface-700\n        text-surface-700 dark:text-surface-0\n        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]\n}\n\n.p-autocomplete-list-container {\n    @apply overflow-auto\n}\n\n.p-autocomplete-list {\n    @apply m-0 p-1 list-none flex flex-col gap-[2px]\n}\n\n.p-autocomplete-option {\n    @apply cursor-pointer whitespace-nowrap relative overflow-hidden flex items-center px-3 py-2 rounded-sm\n        text-surface-700 dark:text-surface-0 bg-transparent border-none\n        transition-colors duration-200\n}\n\n.p-autocomplete-option:not(.p-autocomplete-option-selected):not(.p-disabled).p-focus {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-0\n}\n\n.p-autocomplete-option-selected {\n    @apply bg-highlight\n}\n\n.p-autocomplete-option-selected.p-focus {\n    @apply bg-highlight-emphasis\n}\n\n.p-autocomplete-option-group {\n    @apply m-0 px-3 py-2 text-surface-500 dark:text-surface-400 font-semibold bg-transparent\n}\n\n.p-autocomplete-input-multiple {\n    @apply m-0 list-none cursor-text overflow-hidden flex items-center flex-wrap\n        px-3 py-1 gap-1 text-surface-700 dark:text-surface-0 bg-surface-0 dark:bg-surface-950\n        border border-surface-300 dark:border-surface-700 rounded-md w-full\n        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]\n        transition-colors duration-200 outline-none\n}\n\n.p-autocomplete:not(.p-disabled):hover .p-autocomplete-input-multiple {\n    @apply border-surface-400 dark:border-surface-600\n}\n\n.p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-input-multiple {\n    @apply border-primary\n}\n\n.p-autocomplete.p-invalid .p-autocomplete-input-multiple {\n    @apply border-red-400 dark:border-red-300\n}\n\n.p-variant-filled.p-autocomplete-input-multiple {\n    @apply bg-surface-50 dark:bg-surface-800\n}\n\n.p-autocomplete.p-disabled .p-autocomplete-input-multiple {\n    @apply opacity-100 cursor-default bg-surface-200 text-surface-500 dark:bg-surface-700 dark:text-surface-400\n}\n\n.p-autocomplete-chip.p-chip {\n    @apply py-1 rounded-sm\n}\n\n.p-autocomplete-input-multiple:has(.p-autocomplete-chip) {\n    @apply px-1\n}\n\n.p-autocomplete-chip-item.p-focus .p-autocomplete-chip {\n    @apply bg-surface-200 text-surface-800 dark:bg-surface-700 dark:text-surface-0\n}\n\n.p-autocomplete-input-chip {\n    @apply flex-auto inline-flex py-1\n}\n\n.p-autocomplete-input-chip input {\n    @apply border-none outline-none bg-transparent m-0 p-0 shadow-none rounded-none w-full text-inherit\n}\n\n.p-autocomplete-input-chip input::placeholder {\n    @apply text-surface-500 dark:text-surface-400\n}\n\n.p-autocomplete-empty-message {\n    @apply px-3 py-2\n}\n\n.p-autocomplete-fluid {\n    @apply flex\n}\n\n.p-autocomplete-fluid:has(.p-autocomplete-dropdown) .p-autocomplete-input {\n    @apply w-[1%]\n}",
   "avatar": ".p-avatar {\n    @apply inline-flex items-center justify-center\n        w-8 h-8 text-base rounded-md\n        bg-surface-200 dark:bg-surface-700 \n}\n\n.p-avatar-image {\n    @apply bg-transparent\n}\n\n.p-avatar-circle,\n.p-avatar-circle img {\n    @apply rounded-full\n}\n\n.p-avatar-icon {\n    @apply text-base\n}\n\n.p-avatar img {\n    @apply w-full h-full\n}\n\n.p-avatar-lg {\n    @apply w-12 h-12 text-2xl\n}\n\n.p-avatar-lg .p-avatar-icon {\n    @apply text-2xl\n}\n\n.p-avatar-xl {\n    @apply w-16 h-16 text-[2rem]\n}\n\n.p-avatar-xl .p-avatar-icon {\n    @apply text-[2rem]\n}\n\n.p-avatar-group {\n    @apply flex items-center\n}\n\n.p-avatar-group .p-avatar + .p-avatar {\n    @apply -ml-4\n}\n\n.p-avatar-group .p-avatar {\n    @apply border-2 border-surface-200 dark:border-surface-700\n}",
   "badge": ".p-badge {\n    @apply inline-flex items-center justify-center rounded-md\n        py-0 px-2 text-xs font-bold min-w-6 h-6\n        bg-primary text-primary-contrast\n}\n\n.p-badge-dot {\n    @apply min-w-2 h-2 rounded-full p-0\n}\n\n.p-badge-circle {\n    @apply p-0 rounded-full\n}\n\n.p-badge-secondary {\n    @apply bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-300\n}\n\n.p-badge-success {\n    @apply bg-green-500 dark:bg-green-400 text-white dark:text-green-950\n}\n\n.p-badge-info {\n    @apply bg-sky-500 dark:bg-sky-400 text-white dark:text-sky-950\n}\n\n.p-badge-warn {\n    @apply bg-orange-500 dark:bg-orange-400 text-white dark:text-orange-950\n}\n\n.p-badge-danger {\n    @apply bg-red-500 dark:bg-red-400 text-white dark:text-red-950\n}\n\n.p-badge-contrast {\n    @apply bg-surface-950 dark:bg-white text-white dark:text-surface-950\n}\n\n.p-badge-sm {\n    @apply text-[0.625rem] min-w-5 h-5\n}\n\n.p-badge-lg {\n    @apply text-sm min-w-7 h-7\n}\n\n.p-badge-xl {\n    @apply text-base min-w-8 h-8\n}",
@@ -41,6 +42,7 @@
   "speeddial": ".p-speeddial {\n    @apply static flex gap-2\n}\n\n.p-speeddial-button {\n    @apply z-10\n}\n\n.p-speeddial-button.p-speeddial-rotate {\n    @apply [transition:transform_250ms_cubic-bezier(0.4,0,0.2,1)_0ms,background_200ms,color_200ms,border-color_200ms] will-change-transform \n}\n\n.p-speeddial-list {\n    @apply m-0 p-0 list-none flex items-center justify-center pointer-events-none outline-none z-20 gap-2\n        transition-[top] ease-linear duration-200 \n}\n\n.p-speeddial-item {\n    @apply scale-0 opacity-0 [transition:transform_200ms_cubic-bezier(0.4,0,0.2,1)_0ms,opacity_0.8s] will-change-transform\n}\n\n.p-speeddial-circle .p-speeddial-item,\n.p-speeddial-semi-circle .p-speeddial-item,\n.p-speeddial-quarter-circle .p-speeddial-item {\n    @apply absolute\n}\n\n.p-speeddial-mask {\n    @apply absolute left-0 top-0 w-full h-full opacity-0 bg-white/40 dark:bg-white/60 rounded-md transition-opacity duration-150\n}\n\n.p-speeddial-mask-visible {\n    @apply pointer-events-none opacity-100 transition-opacity duration-150\n}\n\n.p-speeddial-open .p-speeddial-list {\n    @apply pointer-events-auto\n}\n\n.p-speeddial-open .p-speeddial-item {\n    @apply scale-100 opacity-100\n}\n\n.p-speeddial-open .p-speeddial-rotate {\n    @apply rotate-45\n}",
   "splitbutton": ".p-splitbutton {\n    @apply inline-flex relative rounded-md\n}\n\n.p-splitbutton-button {\n    @apply rounded-r-none border-r-0 enabled:hover:border-r-0 enabled:active:border-r-0 focus-visible:z-10\n}\n\n.p-splitbutton-dropdown {\n    @apply rounded-l-none focus-visible:z-10\n}\n\n.p-splitbutton .p-menu {\n    @apply min-w-full\n}\n\n.p-splitbutton-fluid {\n    @apply w-full\n}\n\n.p-splitbutton-rounded .p-splitbutton-dropdown {\n    @apply rounded-r-[2rem]\n}\n\n.p-splitbutton-rounded .p-splitbutton-button {\n    @apply rounded-l-[2rem]\n}\n\n.p-splitbutton-raised {\n    @apply shadow-[0_3px_1px_-2px_rgba(0,0,0,0.2),0_2px_2px_0_rgba(0,0,0,0.14),0_1px_5px_0_rgba(0,0,0,0.12)]\n}",
   "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}",
+  "stepper": ".p-steplist {\n    @apply relative flex justify-between items-center m-0 p-0 list-none overflow-x-auto\n}\n\n.p-step {\n    @apply relative flex flex-auto items-center gap-4 p-2 last-of-type:flex-initial\n}\n\n.p-step-header {\n    @apply border-none inline-flex items-center no-underline cursor-pointer\n        transition-colors duration-200 rounded-md bg-transparent p-0 gap-2\n        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary\n}\n\n.p-stepper.p-stepper-readonly .p-step {\n    @apply cursor-auto\n}\n\n.p-step-title {\n    @apply block whitespace-nowrap overflow-hidden text-ellipsis max-w-full\n        text-surface-500 dark:text-surface-400 font-medium transition-colors duration-200\n}\n\n.p-step-number {\n    @apply flex items-center justify-center text-surface-500 dark:text-surface-400\n        bg-surface-0 dark:bg-surface-900 border-2 border-surface-200 dark:border-surface-700\n        min-w-8 h-8 leading-8 text-lg font-medium rounded-full z-10 relative\n        after:absolute after:w-full after:h-full after:rounded-full after:shadow-[0px_0.5px_0px_0px_rgba(0,0,0,0.06),0px_1px_1px_0px_rgba(0,0,0,0.12)]\n}\n\n.p-step-active .p-step-header {\n    @apply cursor-default\n}\n\n.p-step-active .p-step-number {\n    @apply bg-surface-0 dark:bg-surface-900 text-primary border-surface-200 dark:border-surface-700\n}\n\n.p-step-active .p-step-title {\n    @apply text-primary\n}\n\n.p-step:not(.p-disabled):focus-visible {\n    @apply outline outline-1 outline-offset-2 outline-primary\n}\n\n.p-step:has(~ .p-step-active) .p-stepper-separator {\n    @apply bg-primary\n}\n\n.p-stepper-separator {\n    @apply flex-1 bg-surface-200 dark:bg-surface-700 w-full h-[2px] transition-colors duration-200\n}\n\n.p-steppanels {\n    @apply pt-[0.875rem] pb-[1.125rem] px-2\n}\n\n.p-steppanel {\n    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0\n}\n\n.p-stepper:has(.p-stepitem) {\n    @apply flex flex-col\n}\n\n.p-stepitem {\n    @apply flex flex-col flex-initial\n}\n\n.p-stepitem.p-stepitem-active {\n    @apply flex-auto\n}\n\n.p-stepitem .p-step {\n    @apply flex-initial\n}\n\n.p-stepitem .p-steppanel-content {\n    @apply w-full pl-4\n}\n\n.p-stepitem .p-steppanel {\n    @apply flex flex-auto\n}\n\n.p-stepitem .p-stepper-separator {\n    @apply flex-grow-0 flex-shrink-0 basis-auto w-[2px] h-auto ml-[1.625rem] relative left-[-2.5px]\n}\n\n.p-stepitem:has(~ .p-stepitem-active) .p-stepper-separator {\n    @apply bg-primary\n}\n\n.p-stepitem:last-of-type .p-steppanel {\n    @apply ps-8\n}",
   "tabs": ".p-tabs {\n    @apply flex flex-col\n}\n\n.p-tablist {\n    @apply flex relative\n}\n\n.p-tabs-scrollable > .p-tablist {\n    @apply overflow-hidden\n}\n\n.p-tablist-viewport {\n    @apply overflow-x-auto overflow-y-hidden overscroll-y-contain overscroll-x-auto\n}\n\n.p-tablist-viewport::-webkit-scrollbar {\n    @apply hidden\n}\n\n.p-tablist-tab-list {\n    @apply relative flex bg-surface-0 dark:bg-surface-900 border-b border-surface-200 dark:border-surface-700\n}\n\n.p-tablist-content {\n    @apply flex-grow\n}\n\n.p-tablist-nav-button {\n    @apply absolute flex-shrink-0 top-0 z-20 h-full flex items-center justify-center cursor-pointer\n        bg-surface-0 dark:bg-surface-900 text-surface-500 dark:text-surface-400 hover:text-surface-700 dark:hover:text-surface-0 w-10\n        shadow-[0px_0px_10px_50px_rgba(255,255,255,0.6)] dark:shadow-[0px_0px_10px_50px] dark:shadow-surface-900/50\n        focus-visible:z-10 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-[-1px] focus-visible:outline-primary\n        transition-colors duration-200 \n}\n\n.p-tablist-prev-button {\n    @apply left-0\n}\n\n.p-tablist-next-button {\n    @apply right-0\n}\n\n.p-tab {\n    @apply flex-shrink-0 cursor-pointer select-none relative whitespace-nowrap py-4 px-[1.125rem]\n        border-b border-surface-200 dark:border-surface-700 font-semibold\n        text-surface-500 dark:text-surface-400\n        transition-colors duration-200 -mb-px\n}\n\n.p-tab.p-disabled {\n    @apply cursor-default\n}\n\n.p-tab:not(.p-disabled):focus-visible {\n    @apply z-10 outline outline-1 outline-offset-[-1px] outline-primary\n}\n\n.p-tab:not(.p-tab-active):not(.p-disabled):hover {\n    @apply text-surface-700 dark:text-surface-0\n}\n\n.p-tab-active {\n    @apply border-primary text-primary\n}\n\n.p-tabpanels {\n    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0\n        pt-[0.875rem] pb-[1.125rem] px-[1.125rem] outline-none\n}\n\n.p-tablist-active-bar {\n    @apply z-10 block absolute -bottom-px h-px bg-primary transition-[left] duration-200 ease-[cubic-bezier(0.35,0,0.25,1)]\n}\n\n.p-tablist-viewport {\n    scroll-behavior: smooth;\n    scrollbar-width: 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}",