@central-ui/react 0.0.0-stage → 0.1.0

package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-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-2xl border border-neutral-300 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/55 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-neutral-200 bg-neutral-100 p-3;
+    }
+
+    &: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-neutral-200 p-4;
+    }
+
+    &:where([data-component='dialog-title']) {
+      @apply text-[0.9rem] font-semibold text-neutral-700;
+    }
+
+    &:where([data-component='dialog-description']) {
+      @apply text-[0.85rem] text-neutral-600;
+    }
+
+    &:where([data-component='dialog-closebutton']) {
+      @apply absolute top-3 right-3 flex h-7.25 aspect-square w-7.25 shrink-0 cursor-pointer items-center justify-center rounded-lg bg-transparent p-0 text-neutral-500/80 hover:bg-neutral-200/80 hover:text-neutral-600/70 active:bg-neutral-200 active:text-neutral-600 focus-visible:outline-2 focus-visible:outline-blue-600;
+    }
+
+    &:where([data-component='dialog-closebuttonicon']) {
+      @apply h-4.75 w-fit shrink-0 text-inherit;
+    }
+  }
+}

package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-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-legacy/shopify-polaris-legacy-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-300 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/55 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.5 border-b border-neutral-200 bg-white p-3;
+    }
+
+    &: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-neutral-200 p-4;
+    }
+
+    &:where([data-component='drawer-title']) {
+      @apply text-[0.9rem] font-semibold text-neutral-700;
+    }
+
+    &:where([data-component='drawer-description']) {
+      @apply text-sm text-neutral-600;
+    }
+
+    &:where([data-component='drawer-closebutton']) {
+      @apply absolute top-3 right-3 flex h-7.25 aspect-square w-7.25 shrink-0 cursor-pointer items-center justify-center rounded-lg bg-transparent p-0 text-neutral-500/80 hover:bg-neutral-200/80 hover:text-neutral-600/70 active:bg-neutral-200 active:text-neutral-600 focus-visible:outline-2 focus-visible:outline-blue-600;
+    }
+
+    &:where([data-component='drawer-closebuttonicon']) {
+      @apply h-4.75 w-fit shrink-0 text-inherit;
+    }
+  }
+}

package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-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-base font-semibold text-neutral-900;
+    }
+
+    &:where([data-component='empty-description']) {
+      @apply text-sm font-medium 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-900;
+    }
+
+    &:where([data-component='empty-actionslist']) {
+      @apply mt-3 flex w-fit items-center gap-4;
+    }
+  }
+}

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

@@ -0,0 +1,72 @@
+/* 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-900;
+    }
+
+    &:where([data-component='fileupload-dropzone']) {
+      @apply bg-neutral-50 flex w-full cursor-pointer flex-col items-center gap-1 rounded-lg border border-dashed border-neutral-500 p-3 pt-6 shadow-xs hover:bg-neutral-50 data-[dragging]:border-neutral-400 data-[dragging]:bg-neutral-50;
+    }
+
+    &:where([data-component='fileupload-filepickeropenbutton']) {
+      @apply mt-2 flex h-7.5 w-fit cursor-pointer items-center justify-center gap-1 rounded-lg bg-white px-[0.65rem] text-[0.8rem] font-medium text-nowrap 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] data-disabled:pointer-events-none data-disabled:opacity-30;
+    }
+
+    &:where([data-component='fileupload-uploadicon']) {
+      @apply h-4.5 w-fit shrink-0 text-neutral-900;
+    }
+
+    &:where([data-component='fileupload-title']) {
+      @apply mt-2 text-base leading-snug font-medium text-neutral-900 data-disabled:text-neutral-500;
+    }
+
+    &:where([data-component='fileupload-description']) {
+      @apply text-xs leading-snug font-medium text-neutral-600 data-disabled:text-neutral-400;
+    }
+
+    &: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-300 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-800 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-300 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-900;
+    }
+
+    &: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-lg text-neutral-600 hover:bg-neutral-100 data-disabled:pointer-events-none data-disabled:opacity-30;
+    }
+
+    &:where([data-component='fileupload-fileremovebuttonicon']) {
+      @apply h-4 w-fit;
+    }
+  }
+}

package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-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-legacy/shopify-polaris-legacy-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-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='input-inputgroup']) {
+      @apply p-0 flex w-full min-w-0 items-center overflow-hidden rounded-lg border border-neutral-400 bg-white 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-readonly:cursor-not-allowed data-readonly:bg-neutral-50 data-readonly:hover:bg-neutral-50;
+      &[data-tone='invalid'] {
+        @apply border-red-800;
+      }
+      &[data-tone='valid'] {
+        @apply border-green-700;
+      }
+    }
+
+    &:where([data-component='input-container']) {
+      @apply flex flex-col gap-1.25 w-full;
+    }
+
+    &:where([data-component='input-label']) {
+      @apply text-sm text-neutral-900 data-disabled:text-neutral-500;
+    }
+
+    &:where([data-component='input-description']) {
+      @apply text-xs text-neutral-500 font-medium;
+    }
+
+    &:where([data-component='input-error']) {
+      @apply text-xs text-red-800 font-medium;
+    }
+
+    &:where([data-component='input-success']) {
+      @apply text-xs text-emerald-700 font-medium;
+    }
+
+    &:where([data-component='input-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='input-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='input-addonicon']) {
+      @apply h-4 w-fit shrink-0 text-neutral-600 data-disabled:text-neutral-500;
+    }
+
+    &:where([data-component='input-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='input-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='input-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='input-addonclearbuttonicon']) {
+      @apply h-4 w-fit shrink-0 p-0;
+    }
+  }
+}

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

@@ -0,0 +1,112 @@
+/* menu */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='menu-popup']) {
+      @apply data-open:animate-fade-scale-in data-closed:animate-fade-scale-out relative flex h-fit w-max flex-col rounded-xl border border-neutral-300 bg-white shadow-md outline-none;
+    }
+
+    &:where([data-component='menu-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='menu-arrow'])
+      &:where([data-component='menu-arrow-1']) {
+      @apply fill-inherit;
+    }
+
+    &:where([data-component='menu-arrow'])
+      &:where([data-component='menu-arrow-2']) {
+      @apply fill-neutral-300;
+    }
+
+    &:where([data-component='menu-arrow'])
+      &:where([data-component='menu-arrow-3']) {
+      @apply fill-inherit;
+    }
+
+    &:where([data-component='menu-group']) {
+      @apply flex w-full flex-col gap-1 p-1 min-h-0;
+    }
+
+    &:where([data-component='menu-grouplabel']) {
+      @apply shrink-0 px-2.5 py-1.5 text-[0.75rem] leading-none font-medium text-neutral-600;
+    }
+
+    &:where([data-component='menu-itemslist']) {
+      @apply flex min-h-0 w-full flex-col gap-1 overflow-y-auto;
+    }
+
+    &:where([data-component='menu-buttonitem']) {
+      @apply flex h-7.5 w-full cursor-pointer items-center gap-2 rounded-md px-2.5 text-[0.85rem] text-nowrap text-neutral-800 outline-none data-disabled:pointer-events-none data-disabled:opacity-30 data-highlighted:bg-neutral-100;
+      &[data-tone='danger'] {
+        @apply text-red-600 data-highlighted:bg-red-50;
+      }
+    }
+
+    &:where([data-component='menu-linkitem']) {
+      @apply flex h-7.5 w-full cursor-pointer items-center gap-2 rounded-md px-2.5 text-[0.85rem] text-nowrap text-neutral-800 outline-none data-disabled:pointer-events-none data-disabled:opacity-30 data-highlighted:bg-neutral-100;
+    }
+
+    &:where([data-component='menu-radiogroup']) {
+      @apply flex w-full flex-col gap-1 p-1;
+    }
+
+    &:where([data-component='menu-submenuopenbutton']) {
+      @apply flex h-7.5 w-full cursor-pointer items-center justify-between gap-2 rounded-md px-2.5 text-[0.85rem] text-nowrap text-neutral-800 outline-none data-disabled:pointer-events-none data-disabled:opacity-30 data-highlighted:bg-neutral-100 data-open:bg-neutral-100;
+    }
+
+    &:where([data-component='menu-separator']) {
+      @apply w-full border-t border-neutral-300/70;
+    }
+
+    &:where([data-component='menu-icon']) {
+      @apply h-3.75 w-fit shrink-0 text-inherit;
+    }
+
+    &:where([data-component='menu-submenuopenbuttonicon']) {
+      @apply h-3.75 w-fit shrink-0 text-inherit;
+    }
+
+    &:where([data-component='menu-checkboxcontainer']) {
+      @apply flex min-h-7.5 w-full items-center gap-2 rounded-md px-2.5 data-highlighted:bg-neutral-100;
+    }
+
+    &:where([data-component='menu-checkboxbuttonitem']) {
+      @apply flex size-4.25 shrink-0 cursor-pointer items-center justify-center rounded-[0.3rem] border border-neutral-500 bg-neutral-50 text-white outline-blue-600 focus-visible:outline-2 data-checked:border-neutral-800 data-checked:bg-neutral-800 data-disabled:cursor-not-allowed data-disabled:opacity-50;
+    }
+
+    &:where([data-component='menu-checkboxlabel']) {
+      @apply flex-1 cursor-pointer text-[0.85rem] text-neutral-800 data-disabled:cursor-not-allowed data-disabled:opacity-30;
+    }
+
+    &:where([data-component='menu-checkboxitemindicator']) {
+      @apply flex items-center justify-center;
+    }
+
+    &:where([data-component='menu-checkboxitemindicator'])
+      &:where([data-component='menu-checkboxitemindicator-1']) {
+      @apply h-3 w-fit;
+    }
+
+    &:where([data-component='menu-radiocontainer']) {
+      @apply flex min-h-7.5 w-full items-center gap-2 rounded-md px-2.5 data-highlighted:bg-neutral-100;
+    }
+
+    &:where([data-component='menu-radiobuttonitem']) {
+      @apply flex size-4.25 shrink-0 cursor-pointer items-center justify-center rounded-full border border-neutral-500 bg-neutral-50 text-neutral-800 outline-blue-600 focus-visible:outline-2 data-checked:border-neutral-800 data-disabled:cursor-not-allowed data-disabled:opacity-50;
+    }
+
+    &:where([data-component='menu-radiolabel']) {
+      @apply flex-1 cursor-pointer text-[0.85rem] text-neutral-800 data-disabled:cursor-not-allowed data-disabled:opacity-30;
+    }
+
+    &:where([data-component='menu-radioitemindicator']) {
+      @apply flex items-center justify-center;
+    }
+
+    &:where([data-component='menu-radioitemindicator'])
+      &:where([data-component='menu-radioitemindicator-1']) {
+      @apply size-2 rounded-full bg-current;
+    }
+  }
+}

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

@@ -0,0 +1,16 @@
+/* metric */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='metric-group']) {
+      @apply flex items-start gap-0.5 text-base;
+    }
+
+    &:where([data-component='metric-number']) {
+      @apply text-[1em] leading-none font-semibold tracking-tight text-neutral-900;
+    }
+
+    &:where([data-component='metric-unit']) {
+      @apply text-[0.65em] leading-none font-semibold tracking-tight text-neutral-900;
+    }
+  }
+}

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

@@ -0,0 +1,88 @@
+/* numberinput */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='numberinput-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='numberinput-container']) {
+      @apply flex w-full flex-col gap-1.25;
+    }
+
+    &:where([data-component='numberinput-label']) {
+      @apply text-sm text-neutral-900 data-disabled:text-neutral-500;
+    }
+
+    &:where([data-component='numberinput-description']) {
+      @apply text-xs font-medium text-neutral-500;
+    }
+
+    &:where([data-component='numberinput-error']) {
+      @apply text-xs font-medium text-red-800;
+    }
+
+    &:where([data-component='numberinput-success']) {
+      @apply text-xs font-medium text-emerald-700;
+    }
+
+    &:where([data-component='numberinput-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='numberinput-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='numberinput-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='numberinput-addonbutton']) {
+      @apply flex h-5.5 w-fit cursor-pointer items-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,0_0px_0_50px_rgba(0,0,0,0.025)_inset,0px_-1px_1px_0_rgba(0,0,0,0.1)_inset] disabled:pointer-events-none disabled:opacity-50;
+    }
+
+    &:where([data-component='numberinput-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='numberinput-inputgroup']) {
+      @apply p-0 flex w-full min-w-0 items-center overflow-hidden rounded-lg border border-neutral-400 bg-white 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-readonly:cursor-not-allowed data-readonly:bg-neutral-50 data-readonly:hover:bg-neutral-50;
+      &[data-tone='invalid'] {
+        @apply border-red-800;
+      }
+      &[data-tone='valid'] {
+        @apply border-green-700;
+      }
+    }
+
+    &:where([data-component='numberinput-buttonslist']) {
+      @apply flex w-fit shrink-0 flex-col justify-center overflow-hidden p-1 h-8;
+    }
+
+    &:where([data-component='numberinput-valuetext']) {
+      @apply text-sm text-neutral-700;
+    }
+
+    &:where([data-component='numberinput-incrementbutton']) {
+      @apply flex h-3 w-5 shrink-0 cursor-pointer items-center justify-center rounded-t-sm p-0 text-neutral-500 bg-neutral-200/80 active:bg-neutral-300 hover:bg-neutral-300 data-disabled:pointer-events-none data-disabled:opacity-50;
+    }
+
+    &:where([data-component='numberinput-incrementbuttonicon']) {
+      @apply h-3.75 w-fit shrink-0;
+    }
+
+    &:where([data-component='numberinput-decrementbutton']) {
+      @apply flex h-3 w-5 shrink-0 cursor-pointer items-center justify-center rounded-b-sm p-0 text-neutral-500 bg-neutral-200/80 active:bg-neutral-300 hover:bg-neutral-300 data-disabled:pointer-events-none data-disabled:opacity-50;
+    }
+
+    &:where([data-component='numberinput-decrementbuttonicon']) {
+      @apply h-3.75 w-fit shrink-0;
+    }
+  }
+}

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

@@ -0,0 +1,42 @@
+/* otpinput */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='otpinput-input']) {
+      @apply m-0 h-8.25 aspect-square w-8.25 rounded-lg border border-neutral-400 bg-white p-0 text-center text-base text-neutral-900 outline-blue-600 outline-offset-1 hover:bg-neutral-50 focus:outline-2 data-disabled:cursor-not-allowed data-disabled:bg-neutral-100 data-disabled:text-neutral-500;
+      &[data-tone='invalid'] {
+        @apply border-red-800;
+      }
+      &[data-tone='valid'] {
+        @apply border-green-700;
+      }
+    }
+
+    &:where([data-component='otpinput-container']) {
+      @apply flex w-full flex-col gap-1.25;
+    }
+
+    &:where([data-component='otpinput-label']) {
+      @apply text-sm text-neutral-900 data-disabled:text-neutral-500;
+    }
+
+    &:where([data-component='otpinput-description']) {
+      @apply text-xs font-medium text-neutral-600;
+    }
+
+    &:where([data-component='otpinput-error']) {
+      @apply text-xs font-medium text-red-800;
+    }
+
+    &:where([data-component='otpinput-success']) {
+      @apply text-xs font-medium text-emerald-700;
+    }
+
+    &:where([data-component='otpinput-list']) {
+      @apply flex w-fit items-center gap-1.5;
+    }
+
+    &:where([data-component='otpinput-separator']) {
+      @apply h-px w-3 shrink-0 bg-neutral-400;
+    }
+  }
+}

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

@@ -0,0 +1,69 @@
+/* page */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='page-surface']) {
+      @apply mx-auto flex h-fit w-full flex-col;
+      &[data-size='wide'] {
+        @apply max-w-[88rem];
+      }
+      &[data-size='medium'] {
+        @apply max-w-[63rem];
+      }
+      &[data-size='narrow'] {
+        @apply max-w-[31rem];
+      }
+    }
+
+    &:where([data-component='page-header']) {
+      @apply grid h-fit w-full min-w-0 grid-cols-[auto_minmax(0,max-content)_minmax(0,1fr)_auto] items-center px-6 py-3 first:pt-6 last:pb-6;
+    }
+
+    &:where([data-component='page-headermeta']) {
+      @apply col-start-3 row-start-2 flex min-w-0 items-center gap-1.5 pl-2;
+    }
+
+    &:where([data-component='page-headercontext']) {
+      @apply col-start-2 col-end-4 row-start-1 mb-2 min-w-0;
+    }
+
+    &:where([data-component='page-headeractions']) {
+      @apply col-start-4 row-start-2 row-end-4 flex flex-wrap items-center justify-end gap-2 pl-3;
+    }
+
+    &:where([data-component='page-headerbackbutton']) {
+      @apply col-start-1 row-start-2 mr-2 flex h-6 w-6 cursor-pointer items-center justify-center rounded-md text-neutral-500 hover:bg-neutral-300/70 hover:text-neutral-700 active:bg-neutral-400/50 active:text-neutral-800;
+    }
+
+    &:where([data-component='page-headerbackbuttonicon']) {
+      @apply h-4 w-fit text-inherit;
+    }
+
+    &:where([data-component='page-headertitle']) {
+      @apply col-start-2 row-start-2 min-w-0 truncate text-[1.25rem] font-semibold text-neutral-800;
+    }
+
+    &:where([data-component='page-headerdescription']) {
+      @apply col-start-2 col-end-4 row-start-3 min-w-0 pt-0.75 text-sm text-neutral-600;
+    }
+
+    &:where([data-component='page-body']) {
+      @apply flex h-fit w-full flex-col gap-5 px-6 py-3 first:pt-6 last:pb-6;
+    }
+
+    &:where([data-component='page-bodysection']) {
+      @apply flex h-fit w-full flex-col gap-4;
+    }
+
+    &:where([data-component='page-bodysectionheader']) {
+      @apply flex h-fit w-full flex-col gap-1;
+    }
+
+    &:where([data-component='page-bodysectiontitle']) {
+      @apply text-base font-semibold text-neutral-800;
+    }
+
+    &:where([data-component='page-footer']) {
+      @apply flex h-fit w-full gap-3 px-6 py-3 first:pt-6 last:pb-6;
+    }
+  }
+}