@central-ui/react 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,179 @@
+/* Combobox */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='combobox-container']) {
+      @apply flex flex-col gap-1.5 w-full;
+    }
+
+    &:where([data-component='combobox-label']) {
+      @apply text-sm font-medium text-neutral-950 data-disabled:text-neutral-400;
+    }
+
+    &:where([data-component='combobox-input']) {
+      @apply min-w-12 flex-1 h-7 rounded-none border-0 bg-transparent px-2.5 py-0 text-sm text-neutral-950 shadow-none outline-none placeholder:text-sm placeholder:text-neutral-500 hover:bg-transparent focus:outline-none disabled:cursor-not-allowed disabled:text-neutral-400;
+    }
+
+    &: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 min-h-7;
+    }
+
+    &: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-200;
+    }
+
+    &:where([data-component='combobox-itemslist']) {
+      @apply flex w-full flex-col gap-0.5;
+    }
+
+    &:where([data-component='combobox-group']) {
+      @apply p-1 flex w-full flex-col gap-0.5;
+    }
+
+    &:where([data-component='combobox-item']) {
+      @apply flex h-8 w-full shrink-0 cursor-pointer items-center justify-between gap-2 rounded-lg px-2 text-sm font-normal text-nowrap text-neutral-950 outline-none data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-30 data-highlighted:bg-neutral-100 active:bg-neutral-200;
+    }
+
+    &:where([data-component='combobox-popup']) {
+      @apply relative z-20 flex h-fit w-max flex-col rounded-xl border border-neutral-200 bg-white shadow-lg 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-200;
+    }
+
+    &:where([data-component='combobox-arrow'])
+      &:where([data-component='combobox-arrow-3']) {
+      @apply fill-inherit;
+    }
+
+    &:where([data-component='combobox-addon']) {
+      @apply inline-flex h-7 shrink-0 items-center gap-2 empty:hidden px-2 py-1;
+      &[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 text-neutral-600 data-disabled:text-neutral-400 pointer-events-none 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-full bg-neutral-200 px-2 text-[0.75rem] font-medium text-neutral-950 hover:bg-neutral-300 active:bg-neutral-300 active:scale-97 focus-visible:outline-2 focus-visible:outline-blue-500 disabled:pointer-events-none disabled:bg-black/3 disabled:text-neutral-400;
+    }
+
+    &:where([data-component='combobox-inputgroup']) {
+      @apply p-0 flex w-full min-w-0 items-center overflow-hidden rounded-xl border border-neutral-200 bg-white text-[0.8rem] text-neutral-950 shadow-xs outline-none hover:bg-neutral-50 focus-within:border-blue-500 focus-within:ring-2 focus-within:ring-blue-500/10 focus-within:shadow-sm data-disabled:cursor-not-allowed data-disabled:border-neutral-200 data-disabled:bg-white data-disabled:text-neutral-400 data-disabled:shadow-none data-disabled:hover:bg-white data-readonly:cursor-not-allowed data-readonly:border-neutral-200 data-readonly:bg-neutral-50 data-readonly:hover:bg-neutral-50 data-readonly:shadow-none;
+      &[data-tone='invalid'] {
+        @apply border-red-500 focus-within:border-red-500 focus-within:ring-red-500/10;
+      }
+      &[data-tone='valid'] {
+        @apply border-green-600 focus-within:border-green-600 focus-within:ring-green-600/10;
+      }
+    }
+
+    &: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-950 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-500 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-full p-0 text-neutral-600 hover:text-neutral-700 active:text-neutral-800 focus-visible:outline-2 focus-visible:outline-blue-500 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-full p-0 text-neutral-600 hover:text-neutral-700 active:text-neutral-800 focus-visible:outline-2 focus-visible:outline-blue-500 disabled:pointer-events-none disabled:opacity-50;
+    }
+
+    &:where([data-component='combobox-grouplabel']) {
+      @apply shrink-0 px-2 py-1 text-xs leading-4 font-normal 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-200;
+    }
+
+    &: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-400 data-readonly:text-neutral-600;
+    }
+
+    &:where([data-component='combobox-emptytext']) {
+      @apply text-sm text-center font-normal text-neutral-600;
+    }
+
+    &:where([data-component='combobox-description']) {
+      @apply text-xs text-neutral-600 data-disabled:text-neutral-400;
+    }
+
+    &:where([data-component='combobox-error']) {
+      @apply text-xs text-red-800 data-disabled:text-red-400;
+    }
+
+    &:where([data-component='combobox-success']) {
+      @apply text-xs text-green-800 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-950;
+    }
+
+    &:where([data-component='combobox-addonloadingicon']) {
+      @apply h-4 w-fit shrink-0 pointer-events-none animate-spin text-neutral-600 data-disabled:text-neutral-400 data-readonly:text-neutral-600;
+    }
+
+    &:where([data-component='combobox-itemindicator']) {
+      @apply h-3.5 w-3.5 shrink-0 text-neutral-950;
+    }
+
+    &: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-sm text-center font-normal 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/shopify-polaris-datepicker.css

@@ -0,0 +1,183 @@
+/* datepicker */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='datepicker-container']) {
+      @apply flex flex-col gap-1.5 w-full;
+    }
+
+    &:where([data-component='datepicker-label']) {
+      @apply text-sm font-medium text-neutral-950 data-disabled:text-neutral-400;
+    }
+
+    &:where([data-component='datepicker-inputgroup']) {
+      @apply p-0 flex w-full min-w-0 items-center overflow-hidden rounded-xl border border-neutral-200 bg-white text-[0.8rem] text-neutral-950 shadow-xs outline-none hover:bg-neutral-50 data-[focus-within]:border-blue-500 data-[focus-within]:ring-2 data-[focus-within]:ring-blue-500/10 data-[focus-within]:shadow-sm data-disabled:cursor-not-allowed data-disabled:border-neutral-200 data-disabled:bg-white data-disabled:text-neutral-400 data-disabled:shadow-none data-disabled:hover:bg-white data-readonly:cursor-not-allowed data-readonly:border-neutral-200 data-readonly:bg-neutral-50 data-readonly:hover:bg-neutral-50 data-readonly:shadow-none;
+      &[data-tone='invalid'] {
+        @apply border-red-500 data-[focus-within]:border-red-500 data-[focus-within]:ring-red-500/10;
+      }
+      &[data-tone='valid'] {
+        @apply border-green-600 data-[focus-within]:border-green-600 data-[focus-within]:ring-green-600/10;
+      }
+    }
+
+    &:where([data-component='datepicker-addon']) {
+      @apply inline-flex h-7 shrink-0 items-center gap-2 empty:hidden px-2 py-1;
+      &[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 data-disabled:text-neutral-400 data-readonly:text-neutral-600;
+    }
+
+    &:where([data-component='datepicker-addonicon']) {
+      @apply h-4 w-fit shrink-0 text-neutral-600 data-disabled:text-neutral-400;
+    }
+
+    &:where([data-component='datepicker-addonloadingicon']) {
+      @apply h-4 w-fit shrink-0 pointer-events-none animate-spin text-neutral-600 data-disabled:text-neutral-400 data-readonly: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-full bg-neutral-200 px-2 text-[0.75rem] font-medium text-neutral-950 hover:bg-neutral-300 active:bg-neutral-300 active:scale-97 focus-visible:outline-2 focus-visible:outline-blue-500 disabled:pointer-events-none disabled:bg-black/3 disabled:text-neutral-400;
+    }
+
+    &: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-950;
+    }
+
+    &:where([data-component='datepicker-input']) {
+      @apply flex h-7 min-w-0 items-center bg-transparent px-2.5 py-0 text-sm text-neutral-950 data-disabled:text-neutral-400;
+    }
+
+    &: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-500;
+    }
+
+    &:where([data-component='datepicker-addonopenbutton']) {
+      @apply flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-full border-0 p-0 text-neutral-600 hover:text-neutral-950 active:text-neutral-800 data-open:bg-neutral-100 disabled:pointer-events-none disabled:opacity-50 data-readonly:pointer-events-none focus-visible:outline-2 focus-visible:outline-blue-500;
+    }
+
+    &: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-xl border border-neutral-200 bg-white px-2.5 text-sm font-normal text-neutral-950 shadow-xs outline-none hover:bg-neutral-50 focus-visible:border-blue-500 focus-visible:ring-2 focus-visible:ring-blue-500/10 focus-visible:shadow-sm disabled:pointer-events-none disabled:bg-white disabled:text-neutral-400 disabled:shadow-none aria-expanded:border-blue-500 aria-expanded:ring-2 aria-expanded:ring-blue-500/10 aria-expanded:shadow-sm;
+      &[data-tone='invalid'] {
+        @apply border-red-500 focus-visible:border-red-500 focus-visible:ring-red-500/10 aria-expanded:border-red-500 aria-expanded:ring-red-500/10;
+      }
+      &[data-tone='valid'] {
+        @apply border-green-600 focus-visible:border-green-600 focus-visible:ring-green-600/10 aria-expanded:border-green-600 aria-expanded:ring-green-600/10;
+      }
+    }
+
+    &:where([data-component='datepicker-openbuttonvalue']) {
+      @apply min-w-0 truncate text-left text-inherit data-disabled:text-neutral-400;
+    }
+
+    &: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-200 bg-white shadow-lg 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-8 w-full shrink-0 cursor-pointer items-center justify-between gap-2 rounded-lg px-2 text-sm font-normal text-nowrap text-neutral-950 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-500;
+    }
+
+    &:where([data-component='datepicker-itemtext']) {
+      @apply min-w-0 flex-1 truncate;
+    }
+
+    &:where([data-component='datepicker-itemindicator']) {
+      @apply h-3.5 w-3.5 shrink-0 text-neutral-950;
+    }
+
+    &:where([data-component='datepicker-actions']) {
+      @apply col-2 flex items-center justify-between p-2;
+    }
+
+    &:where([data-component='datepicker-viewdatevalue']) {
+      @apply min-w-0 truncate text-[0.8rem] font-medium text-neutral-950;
+    }
+
+    &:where([data-component='datepicker-previousbutton']) {
+      @apply flex h-6 aspect-square shrink-0 cursor-pointer items-center justify-center rounded-full p-0 text-neutral-600 hover:bg-neutral-100 active:bg-neutral-200 focus-visible:outline-2 focus-visible:outline-blue-500 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-full p-0 text-neutral-600 hover:bg-neutral-100 active:bg-neutral-200 focus-visible:outline-2 focus-visible:outline-blue-500 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-normal text-neutral-600;
+    }
+
+    &: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-950 outline-none not-data-outside-month:data-hovered:bg-neutral-100 data-focus-visible:outline-2 data-focus-visible:outline-blue-500 not-data-outside-month:data-selected:rounded-lg not-data-outside-month:data-selected:bg-neutral-950 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! not-data-outside-month:data-hovered:rounded-lg;
+      &[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 text-neutral-600 data-disabled:text-neutral-400;
+    }
+
+    &:where([data-component='datepicker-error']) {
+      @apply text-xs text-red-800 data-disabled:text-red-400;
+    }
+
+    &:where([data-component='datepicker-success']) {
+      @apply text-xs text-green-800 data-disabled:text-emerald-400;
+    }
+  }
+}

package/src/presets/shopify-polaris/shopify-polaris-dialog.css

@@ -0,0 +1,40 @@
+/* dialog */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='dialog-popup']) {
+      @apply flex max-h-[85vh] min-h-0 w-[95vw] max-w-160 flex-col overflow-hidden rounded-3xl border border-neutral-200 bg-white shadow-xl outline-none data-open:animate-fade-scale-in data-closed:animate-fade-scale-out;
+    }
+
+    &:where([data-component='dialog-backdrop']) {
+      @apply fixed inset-0 z-30 min-h-dvh bg-black/50 data-open:animate-fade-in data-closed:animate-fade-out;
+    }
+
+    &:where([data-component='dialog-header']) {
+      @apply relative flex w-full shrink-0 flex-col gap-1 border-b border-transparent bg-white p-4;
+    }
+
+    &:where([data-component='dialog-body']) {
+      @apply min-h-0 w-full flex-1 overflow-y-auto p-4;
+    }
+
+    &:where([data-component='dialog-footer']) {
+      @apply flex w-full shrink-0 items-center justify-end gap-2 border-t border-transparent p-4;
+    }
+
+    &:where([data-component='dialog-title']) {
+      @apply text-base font-semibold text-neutral-950;
+    }
+
+    &:where([data-component='dialog-description']) {
+      @apply text-sm text-neutral-600;
+    }
+
+    &:where([data-component='dialog-closebutton']) {
+      @apply absolute top-4 right-4 flex h-7 aspect-square w-7 shrink-0 cursor-pointer items-center justify-center rounded-full border border-neutral-200 bg-white p-0 text-neutral-950 shadow-sm hover:bg-neutral-100 hover:text-neutral-950 active:bg-neutral-200 active:text-neutral-950 focus-visible:outline-2 focus-visible:outline-blue-500;
+    }
+
+    &:where([data-component='dialog-closebuttonicon']) {
+      @apply h-4 w-fit shrink-0 text-inherit;
+    }
+  }
+}

package/src/presets/shopify-polaris/shopify-polaris-divider.css

@@ -0,0 +1,12 @@
+/* divider */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='divider-divider']) {
+      @apply w-full border-neutral-300;
+    }
+
+    &:where([data-component='divider-text']) {
+      @apply shrink-0 text-xs font-medium text-neutral-500;
+    }
+  }
+}

package/src/presets/shopify-polaris/shopify-polaris-drawer.css

@@ -0,0 +1,40 @@
+/* drawer */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='drawer-popup']) {
+      @apply pointer-events-auto fixed flex max-h-dvh min-h-0 flex-col overflow-visible border-neutral-200 bg-white shadow-xl outline-none data-[swipe-direction=right]:inset-y-0 data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:h-full data-[swipe-direction=right]:w-[95vw] data-[swipe-direction=right]:max-w-md data-[swipe-direction=right]:border-l data-[swipe-direction=left]:inset-y-0 data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:h-full data-[swipe-direction=left]:w-[95vw] data-[swipe-direction=left]:max-w-md data-[swipe-direction=left]:border-r data-[swipe-direction=down]:inset-x-0 data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:h-[95vh] data-[swipe-direction=down]:w-full data-[swipe-direction=down]:border-t data-[swipe-direction=up]:inset-x-0 data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:h-[95vh] data-[swipe-direction=up]:w-full data-[swipe-direction=up]:border-b;
+    }
+
+    &:where([data-component='drawer-backdrop']) {
+      @apply fixed inset-0 z-30 min-h-dvh bg-black/50 data-open:animate-fade-in-slow data-closed:animate-fade-out-slow;
+    }
+
+    &:where([data-component='drawer-header']) {
+      @apply relative flex w-full shrink-0 flex-col gap-1 border-b border-transparent bg-white p-4;
+    }
+
+    &:where([data-component='drawer-body']) {
+      @apply min-h-0 w-full flex-1 overflow-y-auto p-4;
+    }
+
+    &:where([data-component='drawer-footer']) {
+      @apply flex w-full shrink-0 items-center justify-end gap-2 border-t border-transparent p-4;
+    }
+
+    &:where([data-component='drawer-title']) {
+      @apply text-base font-semibold text-neutral-950;
+    }
+
+    &:where([data-component='drawer-description']) {
+      @apply text-sm text-neutral-600;
+    }
+
+    &:where([data-component='drawer-closebutton']) {
+      @apply absolute top-4 right-4 flex h-7 aspect-square w-7 shrink-0 cursor-pointer items-center justify-center rounded-full border border-neutral-200 bg-white p-0 text-neutral-950 shadow-sm hover:bg-neutral-100 hover:text-neutral-950 active:bg-neutral-200 active:text-neutral-950 focus-visible:outline-2 focus-visible:outline-blue-500;
+    }
+
+    &:where([data-component='drawer-closebuttonicon']) {
+      @apply h-4 w-fit shrink-0 text-inherit;
+    }
+  }
+}

package/src/presets/shopify-polaris/shopify-polaris-empty.css

@@ -0,0 +1,32 @@
+/* empty */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='empty-surface']) {
+      @apply flex w-full flex-col items-center justify-center p-4;
+    }
+
+    &:where([data-component='empty-body']) {
+      @apply flex h-fit w-full max-w-150 flex-col items-center justify-center gap-1;
+    }
+
+    &:where([data-component='empty-title']) {
+      @apply text-sm font-semibold text-center text-neutral-950;
+    }
+
+    &:where([data-component='empty-description']) {
+      @apply text-sm font-normal text-center text-neutral-600;
+    }
+
+    &:where([data-component='empty-image']) {
+      @apply mb-4 h-16 w-fit;
+    }
+
+    &:where([data-component='empty-icon']) {
+      @apply mb-2 h-8 w-fit text-neutral-950;
+    }
+
+    &:where([data-component='empty-actionslist']) {
+      @apply mt-3 flex w-fit items-center gap-4;
+    }
+  }
+}

package/src/presets/shopify-polaris/shopify-polaris-fileupload.css

@@ -0,0 +1,78 @@
+/* fileupload */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='fileupload-container']) {
+      @apply flex w-full flex-col gap-1.25;
+    }
+
+    &:where([data-component='fileupload-label']) {
+      @apply text-sm text-neutral-950;
+    }
+
+    &:where([data-component='fileupload-dropzone']) {
+      @apply bg-white flex w-full cursor-pointer flex-col items-center gap-1 rounded-xl border border-dashed border-neutral-300 p-8 pt-8 shadow-xs hover:bg-neutral-50 data-[dragging]:border-blue-500 data-[dragging]:bg-blue-50;
+    }
+
+    &:where([data-component='fileupload-filepickeropenbutton']) {
+      @apply mt-2 relative flex w-fit cursor-pointer items-center justify-center gap-1.5 rounded-full font-medium text-nowrap select-none outline-none focus-visible:outline-2 focus-visible:outline-blue-500 enabled:active:scale-97 transition-[background-color,box-shadow,transform] duration-400 ease-[cubic-bezier(0.2,0.8,0,1)] motion-reduce:transition-none disabled:pointer-events-none disabled:cursor-default min-h-7 px-4 py-1 text-[0.8rem] leading-4;
+      &:not(:disabled) {
+        @apply bg-neutral-200 text-neutral-950 hover:bg-neutral-300 focus-visible:bg-neutral-300 active:bg-neutral-300 aria-expanded:bg-neutral-300;
+      }
+      &:disabled {
+        @apply bg-black/3 text-neutral-400;
+      }
+    }
+
+    &:where([data-component='fileupload-uploadicon']) {
+      @apply h-4.5 w-fit shrink-0 text-neutral-950;
+    }
+
+    &:where([data-component='fileupload-title']) {
+      @apply mt-2 text-base leading-snug font-medium text-neutral-950 data-disabled:text-neutral-500 text-center;
+    }
+
+    &:where([data-component='fileupload-description']) {
+      @apply text-xs leading-snug font-medium text-neutral-600 data-disabled:text-neutral-400 text-center;
+    }
+
+    &:where([data-component='fileupload-filelist']) {
+      @apply flex w-full flex-col gap-1.5 mt-4;
+    }
+
+    &:where([data-component='fileupload-file']) {
+      @apply grid h-14 w-full grid-cols-[auto_1fr_auto] grid-rows-2 items-center gap-x-2 rounded-xl border border-neutral-200 bg-white p-2 shadow-xs data-[status=rejected]:h-auto data-[status=rejected]:min-h-14 data-[status=rejected]:grid-rows-[auto_auto_auto] data-[status=rejected]:bg-red-50;
+    }
+
+    &:where([data-component='fileupload-fileerrortext']) {
+      @apply col-start-2 row-start-3 text-xs text-red-600 font-medium;
+    }
+
+    &:where([data-component='fileupload-filepreview']) {
+      @apply col-start-1 row-span-2 flex size-9 aspect-square shrink-0 items-center justify-center overflow-hidden rounded-lg border border-neutral-200 bg-neutral-50 object-cover;
+    }
+
+    &:where([data-component='fileupload-filepreviewimage']) {
+      @apply h-full w-full object-cover;
+    }
+
+    &:where([data-component='fileupload-filethumbnailicon']) {
+      @apply h-5 w-fit shrink-0 text-neutral-400;
+    }
+
+    &:where([data-component='fileupload-filename']) {
+      @apply col-start-2 row-start-1 truncate text-sm font-medium text-neutral-950;
+    }
+
+    &:where([data-component='fileupload-filesize']) {
+      @apply col-start-2 row-start-2 text-xs text-neutral-600;
+    }
+
+    &:where([data-component='fileupload-fileremovebutton']) {
+      @apply col-start-3 row-span-2 flex h-6 aspect-square w-auto shrink-0 cursor-pointer items-center justify-center rounded-full text-neutral-600 hover:bg-neutral-100 active:bg-neutral-200 focus-visible:outline-2 focus-visible:outline-blue-500 data-disabled:pointer-events-none data-disabled:opacity-30;
+    }
+
+    &:where([data-component='fileupload-fileremovebuttonicon']) {
+      @apply h-4 w-fit;
+    }
+  }
+}

package/src/presets/shopify-polaris/shopify-polaris-form.css

@@ -0,0 +1,8 @@
+/* form */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='form-form']) {
+      @apply flex w-full flex-col gap-3;
+    }
+  }
+}

package/src/presets/shopify-polaris/shopify-polaris-input.css

@@ -0,0 +1,72 @@
+/* input */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='input-input']) {
+      @apply min-w-12 flex-1 h-7 rounded-none border-0 bg-transparent px-2.5 py-0 text-sm text-neutral-950 shadow-none outline-none placeholder:text-sm placeholder:text-neutral-500 hover:bg-transparent focus:outline-none disabled:cursor-not-allowed disabled:text-neutral-400;
+    }
+
+    &:where([data-component='input-inputgroup']) {
+      @apply p-0 flex w-full min-w-0 items-center overflow-hidden rounded-xl border border-neutral-200 bg-white text-[0.8rem] text-neutral-950 shadow-xs outline-none hover:bg-neutral-50 focus-within:border-blue-500 focus-within:ring-2 focus-within:ring-blue-500/10 focus-within:shadow-sm data-disabled:cursor-not-allowed data-disabled:border-neutral-200 data-disabled:bg-white data-disabled:text-neutral-400 data-disabled:shadow-none data-disabled:hover:bg-white data-readonly:cursor-not-allowed data-readonly:border-neutral-200 data-readonly:bg-neutral-50 data-readonly:hover:bg-neutral-50 data-readonly:shadow-none;
+      &[data-tone='invalid'] {
+        @apply border-red-500 focus-within:border-red-500 focus-within:ring-red-500/10;
+      }
+      &[data-tone='valid'] {
+        @apply border-green-600 focus-within:border-green-600 focus-within:ring-green-600/10;
+      }
+    }
+
+    &:where([data-component='input-container']) {
+      @apply flex flex-col gap-1.5 w-full;
+    }
+
+    &:where([data-component='input-label']) {
+      @apply text-sm font-medium text-neutral-950 data-disabled:text-neutral-400;
+    }
+
+    &:where([data-component='input-description']) {
+      @apply text-xs text-neutral-600;
+    }
+
+    &:where([data-component='input-error']) {
+      @apply text-xs text-red-800;
+    }
+
+    &:where([data-component='input-success']) {
+      @apply text-xs text-green-800;
+    }
+
+    &:where([data-component='input-addon']) {
+      @apply inline-flex h-7 shrink-0 items-center gap-2 empty:hidden px-2 py-1;
+      &[data-variant='emphasized'] {
+        @apply bg-neutral-200/60;
+      }
+      &[data-variant='normal'] {
+        @apply first:pr-0! last:pl-0!;
+      }
+    }
+
+    &:where([data-component='input-addontext']) {
+      @apply shrink-0 whitespace-nowrap text-[0.8rem] text-neutral-600 data-disabled:text-neutral-400 data-readonly:text-neutral-600;
+    }
+
+    &:where([data-component='input-addonicon']) {
+      @apply h-4 w-fit shrink-0 text-neutral-600 data-disabled:text-neutral-400;
+    }
+
+    &:where([data-component='input-addonbutton']) {
+      @apply flex h-5.5 w-fit cursor-pointer items-center justify-center gap-1 text-nowrap rounded-full bg-neutral-200 px-2 text-[0.75rem] font-medium text-neutral-950 hover:bg-neutral-300 active:bg-neutral-300 active:scale-97 focus-visible:outline-2 focus-visible:outline-blue-500 disabled:pointer-events-none disabled:bg-black/3 disabled:text-neutral-400;
+    }
+
+    &:where([data-component='input-addonloadingicon']) {
+      @apply h-4 w-fit shrink-0 pointer-events-none animate-spin text-neutral-600 data-disabled:text-neutral-400 data-readonly:text-neutral-600;
+    }
+
+    &:where([data-component='input-addonclearbutton']) {
+      @apply flex h-4 w-auto shrink-0 cursor-pointer items-center justify-center rounded-full p-0 text-neutral-600 hover:text-neutral-700 active:text-neutral-800 focus-visible:outline-2 focus-visible:outline-blue-500 disabled:pointer-events-none disabled:opacity-50;
+    }
+
+    &:where([data-component='input-addonclearbuttonicon']) {
+      @apply h-4 w-fit shrink-0 p-0;
+    }
+  }
+}