@central-ui/react 0.0.0-stage → 0.1.1

package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-banner.css

@@ -0,0 +1,96 @@
+/* banner */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='banner-surface']) {
+      @apply flex h-fit w-full flex-col overflow-clip rounded-xl border border-neutral-200 bg-white shadow-[0px_2px_1px_-1px_#0000002e];
+    }
+
+    &:where([data-component='banner-header']) {
+      @apply relative flex h-10 w-full items-center gap-1.75 pr-10 pl-3;
+      &[data-tone='success'] {
+        @apply bg-green-700;
+      }
+      &[data-tone='danger'] {
+        @apply bg-red-700;
+      }
+      &[data-tone='caution'] {
+        @apply bg-amber-400;
+      }
+      &[data-tone='neutral'] {
+        @apply bg-neutral-900;
+      }
+      &[data-tone='informative'] {
+        @apply bg-blue-300/90;
+      }
+    }
+
+    &:where([data-component='banner-icon']) {
+      @apply h-4 w-fit shrink-0;
+      &[data-tone='neutral'] {
+        @apply text-white;
+      }
+      &[data-tone='danger'] {
+        @apply text-white;
+      }
+      &[data-tone='success'] {
+        @apply text-white;
+      }
+      &[data-tone='informative'] {
+        @apply text-blue-950;
+      }
+      &[data-tone='caution'] {
+        @apply text-amber-950;
+      }
+    }
+
+    &:where([data-component='banner-title']) {
+      @apply text-sm font-semibold;
+      &[data-tone='neutral'] {
+        @apply text-white;
+      }
+      &[data-tone='danger'] {
+        @apply text-white;
+      }
+      &[data-tone='success'] {
+        @apply text-white;
+      }
+      &[data-tone='informative'] {
+        @apply text-blue-950;
+      }
+      &[data-tone='caution'] {
+        @apply text-amber-950;
+      }
+    }
+
+    &:where([data-component='banner-closebutton']) {
+      @apply absolute top-1/2 right-2 flex h-6 w-6 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md text-nowrap outline-none hover:bg-black/10 disabled:opacity-30;
+    }
+
+    &:where([data-component='banner-closebuttonicon']) {
+      @apply h-5 w-fit shrink-0;
+      &[data-tone='neutral'] {
+        @apply text-white;
+      }
+      &[data-tone='danger'] {
+        @apply text-white;
+      }
+      &[data-tone='success'] {
+        @apply text-white;
+      }
+      &[data-tone='informative'] {
+        @apply text-blue-950;
+      }
+      &[data-tone='caution'] {
+        @apply text-amber-950;
+      }
+    }
+
+    &:where([data-component='banner-body']) {
+      @apply flex h-fit w-full flex-col gap-2 p-3;
+    }
+
+    &:where([data-component='banner-description']) {
+      @apply list-inside list-disc text-sm leading-normal text-neutral-900;
+    }
+  }
+}

package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-breadcrumb.css

@@ -0,0 +1,16 @@
+/* breadcrumb */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='breadcrumb-breadcrumb']) {
+      @apply flex items-center gap-0.25;
+    }
+
+    &:where([data-component='breadcrumb-item']) {
+      @apply flex w-fit items-center gap-3 text-[0.95rem] font-medium text-neutral-500 hover:underline data-active:font-semibold data-active:text-neutral-800;
+    }
+
+    &:where([data-component='breadcrumb-separator']) {
+      @apply h-3.25 w-fit text-neutral-500;
+    }
+  }
+}

package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-button.css

@@ -0,0 +1,68 @@
+/* button */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='button-button']) {
+      @apply flex w-fit cursor-pointer items-center justify-center gap-1 text-nowrap font-semibold disabled:pointer-events-none disabled:opacity-50;
+      &[data-size='small'] {
+        @apply h-6.25 px-[0.55rem] text-[0.75rem] rounded-lg;
+      }
+      &[data-size='medium'] {
+        @apply h-7.5 px-[0.7rem] text-[0.8rem] rounded-lg;
+      }
+      &[data-size='large'] {
+        @apply h-8.5 px-[1rem] text-base rounded-lg;
+      }
+      &[data-size='icon'] {
+        @apply h-7 w-7 p-0 text-[0.8rem] rounded-lg shrink-0;
+      }
+      &[data-variant='primary'] {
+        &[data-tone='neutral'] {
+          @apply [background:linear-gradient(180deg,rgba(48,48,48,0)_63.53%,rgba(255,255,255,0.15)_100%),rgba(48,48,48,1)] text-white shadow-[0_-1px_0_1px_rgba(0,0,0,0.8)_inset,0_0_0_1px_rgba(48,48,48,1)_inset,0_0.5px_0_1.5px_rgba(255,255,255,0.25)_inset] hover:brightness-85 active:pt-[0.1rem] aria-expanded:pt-[0.1rem] active:shadow-[0_0_0_1px_#000000_inset,0px_0px_0px_50px_rgba(0,0,0,0.5)_inset] aria-expanded:shadow-[0_0_0_1px_#000000_inset,0px_0px_0px_50px_rgba(0,0,0,0.5)_inset];
+        }
+        &[data-tone='danger'] {
+          @apply bg-[#C70A24] text-white shadow-[0_-1px_0_1px_rgba(0,0,0,0.3)_inset,0_0_0_1px_#C70A24_inset,0_0.5px_0_1.5px_rgba(255,255,255,0.4)_inset] hover:brightness-85 active:pt-[0.1rem] aria-expanded:pt-[0.1rem] active:shadow-[0_2px_0_0px_#000000_inset,0px_0px_0px_50px_rgba(0,0,0,0.1)_inset] aria-expanded:shadow-[0_2px_0_0px_#000000_inset,0px_0px_0px_50px_rgba(0,0,0,0.1)_inset];
+        }
+      }
+      &[data-variant='secondary'] {
+        &[data-tone='neutral'] {
+          @apply bg-white text-neutral-700 shadow-[0_-1px_0_0_#b5b5b5_inset,0_0_0_1px_rgba(0,0,0,0.1)_inset,0_0.5px_0_1.5px_#fff_inset] hover:bg-neutral-50 active:pt-[0.1rem] aria-expanded:pt-[0.1rem] active:shadow-[0px_2px_1px_0px_rgba(0,0,0,0.19)_inset,0px_0px_0px_50px_rgba(0,0,0,0.025)_inset,0px_-1px_1px_0px_rgba(0,0,0,0.1)_inset] aria-expanded:shadow-[0px_2px_1px_0px_rgba(0,0,0,0.19)_inset,0px_0px_0px_50px_rgba(0,0,0,0.025)_inset,0px_-1px_1px_0px_rgba(0,0,0,0.1)_inset];
+        }
+        &[data-tone='danger'] {
+          @apply bg-white text-red-800 shadow-[0_-1px_0_0_#b5b5b5_inset,0_0_0_1px_rgba(0,0,0,0.1)_inset,0_0.5px_0_1.5px_#fff_inset] hover:bg-neutral-50 active:pt-[0.1rem] aria-expanded:pt-[0.1rem] active:shadow-[0px_2px_1px_0px_rgba(0,0,0,0.19)_inset,0px_0px_0px_50px_rgba(0,0,0,0.025)_inset,0px_-1px_1px_0px_rgba(0,0,0,0.1)_inset] aria-expanded:shadow-[0px_2px_1px_0px_rgba(0,0,0,0.19)_inset,0px_0px_0px_50px_rgba(0,0,0,0.025)_inset,0px_-1px_1px_0px_rgba(0,0,0,0.1)_inset];
+        }
+      }
+      &[data-variant='tertiary'] {
+        &[data-tone='neutral'] {
+          @apply bg-neutral-200/80 text-neutral-700 hover:bg-neutral-300/70 active:bg-neutral-300 aria-expanded:bg-neutral-300;
+        }
+        &[data-tone='danger'] {
+          @apply bg-red-100 text-red-700 hover:bg-red-200/70 active:bg-red-200 aria-expanded:bg-red-200;
+        }
+      }
+    }
+
+    &:where([data-component='button-icon']) {
+      @apply w-fit shrink-0 text-inherit;
+      &[data-size='small'] {
+        @apply h-3;
+      }
+      &[data-size='medium'] {
+        @apply h-4;
+      }
+      &[data-size='large'] {
+        @apply h-4.5;
+      }
+      &[data-size='icon'] {
+        @apply h-4;
+      }
+    }
+
+    &:where([data-component='button-loadingicon']) {
+      @apply h-4 w-fit shrink-0 animate-spin;
+    }
+
+    &:where([data-component='button-list']) {
+      @apply flex items-center gap-2;
+    }
+  }
+}

package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-card.css

@@ -0,0 +1,28 @@
+/* card */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='card-card']) {
+      @apply flex h-fit flex-col rounded-xl border border-neutral-300/80 bg-white shadow-[0px_2px_1px_-1px_#0000002e];
+    }
+
+    &:where([data-component='card-header']) {
+      @apply flex h-fit w-full flex-col gap-0.5 px-4 py-1.75 first:pt-4 last:pb-4;
+    }
+
+    &:where([data-component='card-title']) {
+      @apply text-[0.9rem] font-semibold leading-normal text-neutral-900;
+    }
+
+    &:where([data-component='card-description']) {
+      @apply text-[0.85rem] text-neutral-600;
+    }
+
+    &:where([data-component='card-body']) {
+      @apply flex h-fit w-full flex-col gap-5 px-4 py-1.75 first:pt-4 last:pb-4;
+    }
+
+    &:where([data-component='card-footer']) {
+      @apply h-fit w-full px-4 py-1.75 first:pt-4 last:pb-4;
+    }
+  }
+}

package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-checkbox.css

@@ -0,0 +1,52 @@
+/* checkbox */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='checkbox-checkboxgroup']) {
+      @apply flex w-full flex-col gap-3;
+    }
+
+    &:where([data-component='checkbox-container']) {
+      @apply grid w-full grid-cols-[auto_1fr] items-start gap-x-2 gap-y-0.5;
+    }
+
+    &:where([data-component='checkbox-button']) {
+      @apply mt-0.5 row-start-1 flex size-4.25 shrink-0 cursor-pointer items-center justify-center rounded-[0.3rem] border border-neutral-500 bg-neutral-50 text-white transition-all duration-150 data-checked:border-neutral-800 data-checked:bg-neutral-800 data-indeterminate:border-neutral-800 data-indeterminate:bg-neutral-800 data-disabled:cursor-not-allowed data-disabled:opacity-50;
+      &[data-tone='invalid'] {
+        @apply border-red-800 bg-red-100 data-checked:bg-red-800 data-indeterminate:bg-red-800;
+      }
+      &[data-tone='valid'] {
+        @apply border-green-700 bg-green-100 data-checked:bg-green-700 data-indeterminate:bg-green-700;
+      }
+    }
+
+    &:where([data-component='checkbox-indicator']) {
+      @apply flex items-center justify-center;
+    }
+
+    &:where([data-component='checkbox-indicator'])
+      &:where([data-component='checkbox-indicator-1']) {
+      @apply h-3 w-fit;
+    }
+
+    &:where([data-component='checkbox-indicator'])
+      &:where([data-component='checkbox-indicator-2']) {
+      @apply h-3 w-fit;
+    }
+
+    &:where([data-component='checkbox-label']) {
+      @apply col-start-2 row-start-1 cursor-pointer text-sm text-neutral-900 data-disabled:cursor-not-allowed data-disabled:text-neutral-500;
+    }
+
+    &:where([data-component='checkbox-description']) {
+      @apply col-start-2 text-[0.8rem] font-medium text-neutral-500;
+    }
+
+    &:where([data-component='checkbox-error']) {
+      @apply col-start-2 text-xs font-medium text-red-800;
+    }
+
+    &:where([data-component='checkbox-success']) {
+      @apply col-start-2 text-xs font-medium text-emerald-700;
+    }
+  }
+}

package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-chip.css

@@ -0,0 +1,16 @@
+/* chip */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='chip-chip']) {
+      @apply flex h-5.25 min-w-6 w-fit shrink-0 items-center justify-between gap-1 rounded-full bg-neutral-200 px-2 text-[0.8rem] leading-none font-medium text-nowrap text-neutral-700;
+    }
+
+    &:where([data-component='chip-closebutton']) {
+      @apply -mr-1.75 flex h-4.25 aspect-square w-auto cursor-pointer items-center justify-center rounded-xl hover:bg-neutral-300 active:bg-neutral-300;
+    }
+
+    &:where([data-component='chip-closebuttonicon']) {
+      @apply h-3.25 w-fit text-neutral-700;
+    }
+  }
+}

package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-combobox.css

@@ -0,0 +1,184 @@
+/* Combobox */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='combobox-container']) {
+      @apply flex w-full flex-col gap-1.25;
+    }
+
+    &:where([data-component='combobox-label']) {
+      @apply text-sm text-neutral-900 data-disabled:text-neutral-500;
+    }
+
+    &:where([data-component='combobox-input']) {
+      @apply min-w-12 flex-1 h-8 rounded-none border-0 bg-transparent px-2.5 py-1.5 text-sm text-neutral-900 shadow-none outline-none placeholder:text-sm placeholder:text-neutral-600 hover:bg-transparent focus:outline-none disabled:cursor-not-allowed disabled:text-neutral-500;
+    }
+
+    &:where([data-component='combobox-input'])[data-in-chips] {
+      @apply h-4 px-0 py-0;
+    }
+
+    &:where([data-component='combobox-chipslist']) {
+      @apply flex min-w-0 w-full flex-wrap items-center gap-1 px-2.5 py-1.5 min-h-8;
+    }
+
+    &:where([data-component='combobox-scrollarea']) {
+      @apply flex min-h-0 w-full flex-col overflow-y-auto overscroll-contain;
+    }
+
+    &:where([data-component='combobox-groupslist']) {
+      @apply flex w-full shrink-0 flex-col divide-y divide-neutral-300;
+    }
+
+    &:where([data-component='combobox-itemslist']) {
+      @apply flex w-full flex-col gap-1;
+    }
+
+    &:where([data-component='combobox-group']) {
+      @apply p-1 flex w-full flex-col gap-1;
+    }
+
+    &:where([data-component='combobox-item']) {
+      @apply flex h-7.5 w-full shrink-0 cursor-pointer items-center justify-between gap-2 rounded-lg px-2.5 text-[0.85rem] font-medium text-nowrap text-neutral-700 outline-none data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-30 data-highlighted:bg-neutral-100;
+    }
+
+    &:where([data-component='combobox-popup']) {
+      @apply relative z-20 flex h-fit w-max flex-col rounded-xl border border-neutral-300 bg-white shadow-md data-open:animate-fade-scale-in data-closed:animate-fade-scale-out;
+    }
+
+    &:where([data-component='combobox-arrow']) {
+      @apply pointer-events-none flex fill-white data-uncentered:hidden data-[side=bottom]:-top-2 data-[side=top]:-bottom-2 data-[side=top]:rotate-180 data-[side=left]:-right-[13px] data-[side=left]:rotate-90 data-[side=right]:-left-[13px] data-[side=right]:-rotate-90 ltr:data-[side=inline-start]:-right-[13px] ltr:data-[side=inline-start]:rotate-90 rtl:data-[side=inline-start]:-left-[13px] rtl:data-[side=inline-start]:-rotate-90 ltr:data-[side=inline-end]:-left-[13px] ltr:data-[side=inline-end]:-rotate-90 rtl:data-[side=inline-end]:-right-[13px] rtl:data-[side=inline-end]:rotate-90;
+    }
+
+    &:where([data-component='combobox-arrow'])
+      &:where([data-component='combobox-arrow-1']) {
+      @apply fill-inherit;
+    }
+
+    &:where([data-component='combobox-arrow'])
+      &:where([data-component='combobox-arrow-2']) {
+      @apply fill-neutral-300;
+    }
+
+    &:where([data-component='combobox-arrow'])
+      &:where([data-component='combobox-arrow-3']) {
+      @apply fill-inherit;
+    }
+
+    &:where([data-component='combobox-addon']) {
+      @apply inline-flex h-8 shrink-0 items-center gap-2 empty:hidden px-2 py-1.5;
+      &[data-variant='emphasized'] {
+        @apply bg-neutral-200/60;
+      }
+      &[data-variant='normal'] {
+        @apply first:pr-0! last:pl-0!;
+      }
+    }
+
+    &:where([data-component='combobox-addonicon']) {
+      @apply h-4 w-fit shrink-0 pointer-events-none text-neutral-600 data-disabled:text-neutral-500 data-readonly:text-neutral-600;
+    }
+
+    &:where([data-component='combobox-addonbutton']) {
+      @apply flex h-5.5 w-fit cursor-pointer items-center justify-center gap-1 text-nowrap rounded-lg bg-white px-[0.55rem] text-[0.75rem] font-semibold text-neutral-700 not-active:shadow-[0_-1px_0_0_#b5b5b5_inset,0_0_0_1px_rgba(0,0,0,0.1)_inset,0_0.5px_0_1.5px_#fff_inset] hover:bg-neutral-50 active:pt-[0.1rem] active:shadow-[0px_2px_1px_0px_rgba(0,0,0,0.19)_inset,0px_0px_0px_50px_rgba(0,0,0,0.025)_inset,0px_-1px_1px_0px_rgba(0,0,0,0.1)_inset] disabled:pointer-events-none disabled:opacity-50;
+    }
+
+    &:where([data-component='combobox-inputgroup']) {
+      @apply flex w-full min-w-0 items-center overflow-hidden rounded-lg border border-neutral-400 bg-white p-0 text-[0.8rem] text-neutral-900 outline-blue-600 outline-offset-1! hover:bg-neutral-50 focus-within:outline-2 data-disabled:cursor-not-allowed data-disabled:bg-neutral-100 data-disabled:text-neutral-500 data-disabled:hover:bg-neutral-100;
+      &[data-tone='invalid'] {
+        @apply border-red-800;
+      }
+      &[data-tone='valid'] {
+        @apply border-green-700;
+      }
+    }
+
+    &:where([data-component='combobox-chip']) {
+      @apply flex h-5 min-w-6 w-fit shrink-0 items-center justify-between gap-1 rounded-full bg-neutral-200 px-2 text-[0.8rem] leading-none font-medium text-nowrap text-neutral-700 data-disabled:opacity-50;
+    }
+
+    &:where([data-component='combobox-chipremovebutton']) {
+      @apply -mr-1.75 flex h-4.25 aspect-square w-auto shrink-0 cursor-pointer items-center justify-center rounded-xl p-0 hover:bg-neutral-300 active:bg-neutral-300 focus-visible:outline-2 focus-visible:outline-blue-600 disabled:pointer-events-none disabled:opacity-50;
+    }
+
+    &:where([data-component='combobox-addonopenbutton']) {
+      @apply flex h-4 w-auto shrink-0 cursor-pointer items-center justify-center rounded-lg p-0 text-neutral-600 hover:text-neutral-700 active:text-neutral-800 focus-visible:outline-2 focus-visible:outline-blue-600 disabled:pointer-events-none disabled:opacity-50;
+    }
+
+    &:where([data-component='combobox-addonclearbutton']) {
+      @apply flex h-4 w-auto shrink-0 cursor-pointer items-center justify-center rounded-lg p-0 text-neutral-600 hover:text-neutral-700 active:text-neutral-800 focus-visible:outline-2 focus-visible:outline-blue-600 disabled:pointer-events-none disabled:opacity-50;
+    }
+
+    &:where([data-component='combobox-grouplabel']) {
+      @apply shrink-0 px-2.5 py-1.5 text-[0.75rem] leading-none font-medium text-neutral-600;
+    }
+
+    &:where([data-component='combobox-empty']) {
+      @apply flex w-full items-center gap-1.5 py-2 px-3.5 empty:p-0;
+    }
+
+    &:where([data-component='combobox-separator']) {
+      @apply w-full border-t border-neutral-300;
+    }
+
+    &:where([data-component='combobox-itemtext']) {
+      @apply min-w-0 flex-1 truncate;
+    }
+
+    &:where([data-component='combobox-addontext']) {
+      @apply shrink-0 whitespace-nowrap text-[0.8rem] text-neutral-600 data-disabled:text-neutral-500 data-readonly:text-neutral-600;
+    }
+
+    &:where([data-component='combobox-emptytext']) {
+      @apply text-[0.85rem] text-center font-medium text-neutral-600;
+    }
+
+    &:where([data-component='combobox-description']) {
+      @apply text-xs font-medium text-neutral-500 data-disabled:text-neutral-400;
+    }
+
+    &:where([data-component='combobox-error']) {
+      @apply text-xs font-medium text-red-800 data-disabled:text-red-400;
+    }
+
+    &:where([data-component='combobox-success']) {
+      @apply text-xs font-medium text-emerald-700 data-disabled:text-emerald-400;
+    }
+
+    &:where([data-component='combobox-addonopenbuttonicon']) {
+      @apply h-4 w-fit shrink-0 p-0;
+    }
+
+    &:where([data-component='combobox-addonclearbuttonicon']) {
+      @apply h-4 w-fit shrink-0 p-0;
+    }
+
+    &:where([data-component='combobox-chipremovebuttonicon']) {
+      @apply h-3.25 w-fit shrink-0 text-neutral-700;
+    }
+
+    &:where([data-component='combobox-addonloadingicon']) {
+      @apply h-4 w-fit shrink-0 pointer-events-none animate-spin text-neutral-600 data-disabled:text-neutral-500 data-readonly:text-neutral-600;
+    }
+
+    &:where([data-component='combobox-itemindicator']) {
+      @apply flex h-4 w-4 shrink-0 items-center justify-center text-neutral-700;
+    }
+
+    &:where([data-component='combobox-itemindicator'])
+      &:where([data-component='combobox-itemindicator-icon']) {
+      @apply h-3.5 w-fit shrink-0;
+    }
+
+    &:where([data-component='combobox-loading']) {
+      @apply flex w-full items-center gap-1.5 py-2 px-3.5 empty:p-0;
+    }
+
+    &:where([data-component='combobox-loadingtext']) {
+      @apply text-[0.85rem] text-center font-medium text-neutral-600;
+    }
+
+    &:where([data-component='combobox-loadingicon']) {
+      @apply h-4 w-fit shrink-0 animate-spin text-neutral-600;
+    }
+  }
+}

package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-datepicker.css

@@ -0,0 +1,187 @@
+/* datepicker */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='datepicker-container']) {
+      @apply flex w-full flex-col gap-1.25;
+    }
+
+    &:where([data-component='datepicker-label']) {
+      @apply text-sm text-neutral-900 data-disabled:text-neutral-500;
+    }
+
+    &:where([data-component='datepicker-inputgroup']) {
+      @apply flex w-full min-w-0 items-center overflow-hidden rounded-lg border border-neutral-400 bg-white p-0 text-[0.8rem] text-neutral-900 outline-blue-600 outline-offset-1! hover:bg-neutral-50 data-disabled:cursor-not-allowed data-disabled:bg-neutral-100 data-disabled:text-neutral-500 data-disabled:hover:bg-neutral-100 data-[focus-within]:outline-2;
+      &[data-tone='invalid'] {
+        @apply border-red-800;
+      }
+      &[data-tone='valid'] {
+        @apply border-green-700;
+      }
+    }
+
+    &:where([data-component='datepicker-addon']) {
+      @apply inline-flex h-8 shrink-0 items-center gap-2 empty:hidden px-2 py-1.5;
+      &[data-variant='emphasized'] {
+        @apply bg-neutral-200/60;
+      }
+      &[data-variant='normal'] {
+        @apply first:pr-0! last:pl-0!;
+      }
+    }
+
+    &:where([data-component='datepicker-addontext']) {
+      @apply shrink-0 whitespace-nowrap text-[0.8rem] text-neutral-600;
+    }
+
+    &:where([data-component='datepicker-addonicon']) {
+      @apply h-4 w-fit shrink-0 pointer-events-none text-neutral-600 data-disabled:text-neutral-500;
+    }
+
+    &:where([data-component='datepicker-addonloadingicon']) {
+      @apply h-4 w-fit shrink-0 animate-spin text-neutral-600;
+    }
+
+    &:where([data-component='datepicker-addonbutton']) {
+      @apply flex h-5.5 w-fit cursor-pointer items-center justify-center gap-1 text-nowrap rounded-lg bg-white px-[0.55rem] text-[0.75rem] font-semibold text-neutral-700 not-active:shadow-[0_-1px_0_0_#b5b5b5_inset,0_0_0_1px_rgba(0,0,0,0.1)_inset,0_0.5px_0_1.5px_#fff_inset] hover:bg-neutral-50 active:pt-[0.1rem] active:shadow-[0px_2px_1px_0_rgba(0,0,0,0.19)_inset,0px_0px_0px_50px_rgba(0,0,0,0.1)_inset,0px_-1px_1px_0_rgba(0,0,0,0.1)_inset] disabled:pointer-events-none disabled:opacity-50;
+    }
+
+    &:where([data-component='datepicker-inputslist']) {
+      @apply flex w-full min-w-0 items-center;
+    }
+
+    &:where([data-component='datepicker-inputslistseparator']) {
+      @apply shrink-0 text-sm text-neutral-900;
+    }
+
+    &:where([data-component='datepicker-input']) {
+      @apply flex h-8 min-w-0 items-center bg-transparent px-2.5 py-1.5 text-sm text-neutral-900;
+    }
+
+    &:where([data-component='datepicker-input'])[data-range-input] {
+      @apply w-fit shrink-0;
+    }
+
+    &:where([data-component='datepicker-input']):not([data-range-input]) {
+      @apply w-full;
+    }
+
+    &:where([data-component='datepicker-segment']) {
+      @apply rounded-sm text-inherit [font:inherit] outline-none data-focused:bg-blue-100 data-placeholder:text-neutral-600;
+    }
+
+    &:where([data-component='datepicker-addonopenbutton']) {
+      @apply flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-lg border-0 p-0 text-neutral-600 hover:text-neutral-700 active:text-neutral-800 data-open:bg-neutral-100 disabled:pointer-events-none disabled:opacity-50 data-readonly:pointer-events-none;
+    }
+
+    &:where([data-component='datepicker-addonopenbuttonicon']) {
+      @apply h-4 w-fit shrink-0;
+    }
+
+    &:where([data-component='datepicker-openbutton']) {
+      @apply flex h-7.5 w-fit shrink-0 cursor-pointer items-center justify-center gap-1.75 overflow-hidden rounded-lg bg-white px-[0.7rem] text-[0.8rem] font-semibold text-neutral-700 outline-blue-600 outline-offset-1! not-active:shadow-[0_-1px_0_0_#b5b5b5_inset,0_0_0_1px_rgba(0,0,0,0.1)_inset,0_0.5px_0_1.5px_#fff_inset] hover:bg-neutral-50 active:pt-[0.1rem] active:shadow-[0px_2px_1px_0px_rgba(0,0,0,0.19)_inset,0px_0px_0px_50px_rgba(0,0,0,0.025)_inset,0px_-1px_1px_0px_rgba(0,0,0,0.1)_inset] focus-visible:outline-2 disabled:pointer-events-none disabled:opacity-50 aria-expanded:shadow-[0px_2px_1px_0px_rgba(0,0,0,0.19)_inset,0px_0px_0px_50px_rgba(0,0,0,0.025)_inset,0px_-1px_1px_0px_rgba(0,0,0,0.1)_inset];
+    }
+
+    &:where([data-component='datepicker-openbuttonvalue']) {
+      @apply min-w-0 truncate text-left text-inherit data-disabled:text-neutral-500;
+    }
+
+    &:where([data-component='datepicker-openbuttonicon']) {
+      @apply h-4 w-fit shrink-0 text-inherit;
+    }
+
+    &:where([data-component='datepicker-popup']) {
+      @apply relative z-80 flex h-fit w-max flex-col overflow-auto rounded-xl border border-neutral-300 bg-white shadow-md data-entering:animate-fade-scale-in data-exiting:animate-fade-scale-out;
+    }
+
+    &:where([data-component='datepicker-calendar']) {
+      @apply grid grid-cols-[auto_minmax(0,1fr)] grid-rows-[auto_1fr];
+    }
+
+    &:where([data-component='datepicker-calendar']) {
+      @apply grid grid-cols-[auto_minmax(0,1fr)] grid-rows-[auto_1fr];
+    }
+
+    &:where([data-component='datepicker-presetslist']) {
+      @apply row-span-2 flex flex-col border-r border-neutral-200 p-2 outline-none;
+    }
+
+    &:where([data-component='datepicker-item']) {
+      @apply flex h-7.5 w-full shrink-0 cursor-pointer items-center justify-between gap-2 rounded-lg px-2.5 text-[0.85rem] font-medium text-nowrap text-neutral-700 outline-none data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-30 data-hovered:bg-neutral-100 data-focused:bg-neutral-100 data-selected:bg-neutral-100 data-focus-visible:outline-2 data-focus-visible:outline-blue-600;
+    }
+
+    &:where([data-component='datepicker-itemtext']) {
+      @apply min-w-0 flex-1 truncate;
+    }
+
+    &:where([data-component='datepicker-itemindicator']) {
+      @apply flex h-4 w-4 shrink-0 items-center justify-center text-neutral-700;
+    }
+
+    &:where([data-component='datepicker-itemindicator'])
+      &:where([data-component='datepicker-itemindicator-1']) {
+      @apply h-3.5 w-fit shrink-0;
+    }
+
+    &:where([data-component='datepicker-actions']) {
+      @apply col-2 flex items-center justify-between p-2;
+    }
+
+    &:where([data-component='datepicker-viewdatevalue']) {
+      @apply flex min-w-0 items-center gap-1 truncate text-[0.8rem] font-medium text-neutral-900;
+    }
+
+    &:where([data-component='datepicker-viewdatevalue'])
+      &:where([data-component='datepicker-viewdatevalue-1']) {
+      @apply whitespace-nowrap text-inherit [font:inherit];
+    }
+
+    &:where([data-component='datepicker-previousbutton']) {
+      @apply flex h-6 aspect-square shrink-0 cursor-pointer items-center justify-center rounded-lg p-0 text-neutral-600 hover:bg-neutral-100 active:bg-neutral-200 focus-visible:outline-2 focus-visible:outline-blue-600 disabled:pointer-events-none disabled:opacity-30;
+    }
+
+    &:where([data-component='datepicker-nextbutton']) {
+      @apply flex h-6 aspect-square shrink-0 cursor-pointer items-center justify-center rounded-lg p-0 text-neutral-600 hover:bg-neutral-100 active:bg-neutral-200 focus-visible:outline-2 focus-visible:outline-blue-600 disabled:pointer-events-none disabled:opacity-30;
+    }
+
+    &:where([data-component='datepicker-previousbuttonicon']) {
+      @apply h-5 w-fit shrink-0 text-inherit;
+    }
+
+    &:where([data-component='datepicker-nextbuttonicon']) {
+      @apply h-5 w-fit shrink-0 text-inherit;
+    }
+
+    &:where([data-component='datepicker-tableslist']) {
+      @apply col-2 flex items-start gap-2 p-2;
+    }
+
+    &:where([data-component='datepicker-table']) {
+      @apply w-fit border-collapse [&_td]:p-0;
+    }
+
+    &:where([data-component='datepicker-table'])
+      &:where([data-component='datepicker-table-1']) {
+      @apply h-8 w-8 p-0 text-center text-xs font-medium text-neutral-500;
+    }
+
+    &:where([data-component='datepicker-table'])
+      &:where([data-component='datepicker-table-2']) {
+      @apply flex h-8 w-8 cursor-pointer items-center justify-center rounded-none p-0 text-sm font-normal text-neutral-900 outline-none not-data-outside-month:data-hovered:bg-neutral-100 data-focus-visible:outline-2 data-focus-visible:outline-blue-600 not-data-outside-month:data-selected:rounded-lg not-data-outside-month:data-selected:bg-neutral-900 not-data-outside-month:data-selected:text-white data-disabled:pointer-events-none data-disabled:opacity-30 data-unavailable:pointer-events-none data-unavailable:opacity-30 data-outside-month:text-neutral-400 data-outside-month:opacity-100!;
+      &[data-mode='range'] {
+        @apply not-data-outside-month:data-selected:bg-neutral-100 not-data-outside-month:data-selected:text-neutral-900 not-data-outside-month:data-selected:rounded-none not-data-outside-month:data-selection-start:rounded-l-lg not-data-outside-month:data-selection-start:bg-neutral-900 not-data-outside-month:data-selection-start:text-white not-data-outside-month:data-selection-end:rounded-r-lg not-data-outside-month:data-selection-end:bg-neutral-900 not-data-outside-month:data-selection-end:text-white;
+      }
+    }
+
+    &:where([data-component='datepicker-description']) {
+      @apply text-xs font-medium text-neutral-500 data-disabled:text-neutral-400;
+    }
+
+    &:where([data-component='datepicker-error']) {
+      @apply text-xs font-medium text-red-800 data-disabled:text-red-400;
+    }
+
+    &:where([data-component='datepicker-success']) {
+      @apply text-xs font-medium text-emerald-700 data-disabled:text-emerald-400;
+    }
+  }
+}