@central-ui/react 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,76 @@
+/* passwordinput */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='passwordinput-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='passwordinput-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-tone='invalid'] {
+        @apply border-red-800;
+      }
+      &[data-tone='valid'] {
+        @apply border-green-700;
+      }
+    }
+
+    &:where([data-component='passwordinput-container']) {
+      @apply flex w-full flex-col gap-1.25;
+    }
+
+    &:where([data-component='passwordinput-label']) {
+      @apply text-sm text-neutral-900 data-disabled:text-neutral-500;
+    }
+
+    &:where([data-component='passwordinput-description']) {
+      @apply text-xs font-medium text-neutral-500 data-disabled:text-neutral-400;
+    }
+
+    &:where([data-component='passwordinput-error']) {
+      @apply text-xs font-medium text-red-800 data-disabled:text-red-400;
+    }
+
+    &:where([data-component='passwordinput-success']) {
+      @apply text-xs font-medium text-emerald-700 data-disabled:text-emerald-400;
+    }
+
+    &:where([data-component='passwordinput-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='passwordinput-addontext']) {
+      @apply shrink-0 whitespace-nowrap text-[0.8rem] text-neutral-600 data-disabled:text-neutral-500 data-readonly:text-neutral-600 data-disabled:text-neutral-500 data-readonly:text-neutral-600;
+    }
+
+    &:where([data-component='passwordinput-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='passwordinput-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.025)_inset,0px_-1px_1px_0_rgba(0,0,0,0.1)_inset] disabled:pointer-events-none disabled:opacity-50;
+    }
+
+    &:where([data-component='passwordinput-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='passwordinput-addonvisibilitybutton']) {
+      @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 data-readonly:pointer-events-none;
+    }
+
+    &:where([data-component='passwordinput-addonvisibleicon']) {
+      @apply h-4 w-fit shrink-0 text-inherit;
+    }
+
+    &:where([data-component='passwordinput-addonhiddenicon']) {
+      @apply h-4 w-fit shrink-0 text-inherit;
+    }
+  }
+}

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

@@ -0,0 +1,47 @@
+/* popover */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='popover-popup']) {
+      @apply data-open:animate-fade-scale-in data-closed:animate-fade-scale-out relative z-20 flex h-fit w-max max-w-80 flex-col overflow-visible rounded-xl border border-neutral-300 bg-white shadow-md outline-none;
+    }
+
+    &:where([data-component='popover-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='popover-arrow'])
+      &:where([data-component='popover-arrow-1']) {
+      @apply fill-inherit;
+    }
+
+    &:where([data-component='popover-arrow'])
+      &:where([data-component='popover-arrow-2']) {
+      @apply fill-neutral-300;
+    }
+
+    &:where([data-component='popover-arrow'])
+      &:where([data-component='popover-arrow-3']) {
+      @apply fill-inherit;
+    }
+
+    &:where([data-component='popover-header']) {
+      @apply flex h-fit w-full shrink-0 flex-col gap-1.5 p-3;
+    }
+
+    &:where([data-component='popover-body']) {
+      @apply flex min-h-0 w-full flex-col gap-5 overflow-y-auto p-3;
+    }
+
+    &:where([data-component='popover-footer']) {
+      @apply h-fit w-full shrink-0 p-3;
+    }
+
+    &:where([data-component='popover-title']) {
+      @apply text-[0.9rem] font-semibold leading-none text-neutral-900;
+    }
+
+    &:where([data-component='popover-description']) {
+      @apply text-[0.85rem] text-neutral-600;
+    }
+  }
+}

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

@@ -0,0 +1,54 @@
+/* radio */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='radio-container']) {
+      @apply flex w-full flex-col gap-3;
+    }
+
+    &:where([data-component='radio-list']) {
+      @apply flex w-full flex-col gap-2;
+    }
+
+    &:where([data-component='radio-label']) {
+      @apply text-sm text-neutral-900 data-disabled:text-neutral-500;
+    }
+
+    &:where([data-component='radio-item']) {
+      @apply flex min-w-0 flex-wrap items-start gap-x-2 gap-y-0.5;
+    }
+
+    &:where([data-component='radio-itembutton']) {
+      @apply mt-0.5 items-center justify-center flex aspect-square size-4 shrink-0 cursor-pointer rounded-full border border-neutral-500 bg-neutral-50 transition-all data-checked:border-4 data-checked:border-neutral-900 data-disabled:cursor-not-allowed data-disabled:opacity-50;
+      &[data-tone='invalid'] {
+        @apply border-red-800;
+      }
+      &[data-tone='valid'] {
+        @apply border-green-700;
+      }
+    }
+
+    &:where([data-component='radio-itemindicator']) {
+      @apply flex size-full aspect-square items-center justify-center rounded-full bg-white;
+    }
+
+    &:where([data-component='radio-itemlabel']) {
+      @apply cursor-pointer text-sm text-neutral-900 data-disabled:text-neutral-500;
+    }
+
+    &:where([data-component='radio-itemdescription']) {
+      @apply basis-full pl-6 text-[0.8rem] font-medium text-neutral-500;
+    }
+
+    &:where([data-component='radio-description']) {
+      @apply text-xs font-medium text-neutral-600;
+    }
+
+    &:where([data-component='radio-error']) {
+      @apply text-xs font-medium text-red-800;
+    }
+
+    &:where([data-component='radio-success']) {
+      @apply text-xs font-medium text-emerald-700;
+    }
+  }
+}

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

@@ -0,0 +1,42 @@
+/* ratinginput */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='ratinginput-container']) {
+      @apply flex w-full flex-col gap-1.25;
+    }
+
+    &:where([data-component='ratinginput-label']) {
+      @apply text-sm text-neutral-900 data-disabled:text-neutral-500;
+    }
+
+    &:where([data-component='ratinginput-starslist']) {
+      @apply flex w-fit items-center gap-0.5;
+    }
+
+    &:where([data-component='ratinginput-starbutton']) {
+      @apply inline-flex h-fit w-fit shrink-0 cursor-pointer items-center justify-center border-0 bg-transparent p-0 shadow-none outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-readonly:cursor-default;
+    }
+
+    &:where([data-component='ratinginput-staricon']) {
+      @apply pointer-events-none h-5 w-fit text-amber-600 data-highlighted:fill-current data-highlighted:data-half:fill-[var(--star-half-fill)] rtl:data-highlighted:data-half:fill-[var(--star-half-fill-rtl)];
+      &[data-tone='valid'] {
+        @apply text-green-700;
+      }
+      &[data-tone='invalid'] {
+        @apply text-red-800;
+      }
+    }
+
+    &:where([data-component='ratinginput-description']) {
+      @apply text-xs font-medium text-neutral-600;
+    }
+
+    &:where([data-component='ratinginput-error']) {
+      @apply text-xs font-medium text-red-800;
+    }
+
+    &:where([data-component='ratinginput-success']) {
+      @apply text-xs font-medium text-emerald-700;
+    }
+  }
+}

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

@@ -0,0 +1,118 @@
+/* select */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='select-container']) {
+      @apply flex w-full flex-col gap-1.25;
+    }
+
+    &:where([data-component='select-label']) {
+      @apply text-sm text-neutral-900 data-disabled:text-neutral-500;
+    }
+
+    &:where([data-component='select-openbuttonvalue']) {
+      @apply min-w-0 shrink-0 truncate text-left text-inherit data-placeholder:text-neutral-600 data-disabled:text-neutral-500;
+    }
+
+    &:where([data-component='select-scrollarea']) {
+      @apply flex min-h-0 w-full flex-col overflow-y-auto overscroll-contain;
+    }
+
+    &:where([data-component='select-groupslist']) {
+      @apply flex w-full shrink-0 flex-col divide-y divide-neutral-300;
+    }
+
+    &:where([data-component='select-itemslist']) {
+      @apply flex w-full flex-col gap-1;
+    }
+
+    &:where([data-component='select-group']) {
+      @apply p-1 flex w-full flex-col gap-1;
+    }
+
+    &:where([data-component='select-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='select-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='select-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='select-arrow'])
+      &:where([data-component='select-arrow-1']) {
+      @apply fill-inherit;
+    }
+
+    &:where([data-component='select-arrow'])
+      &:where([data-component='select-arrow-2']) {
+      @apply fill-neutral-300;
+    }
+
+    &:where([data-component='select-arrow'])
+      &:where([data-component='select-arrow-3']) {
+      @apply fill-inherit;
+    }
+
+    &:where([data-component='select-openbutton']) {
+      @apply flex h-7.5 w-fit shrink-0 cursor-pointer items-center justify-center gap-0 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 data-popup-open: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='select-grouplabel']) {
+      @apply shrink-0 px-2.5 py-1.5 text-[0.75rem] leading-none font-medium text-neutral-600;
+    }
+
+    &:where([data-component='select-separator']) {
+      @apply w-full border-t border-neutral-300;
+    }
+
+    &:where([data-component='select-itemtext']) {
+      @apply min-w-0 flex-1 truncate;
+    }
+
+    &:where([data-component='select-description']) {
+      @apply text-xs font-medium text-neutral-500 data-disabled:text-neutral-400;
+    }
+
+    &:where([data-component='select-error']) {
+      @apply text-xs font-medium text-red-800 data-disabled:text-red-400;
+    }
+
+    &:where([data-component='select-success']) {
+      @apply text-xs font-medium text-emerald-700 data-disabled:text-emerald-400;
+    }
+
+    &:where([data-component='select-openbuttonicon']) {
+      @apply ml-1.75 h-4 w-fit shrink-0 text-inherit;
+    }
+
+    &:where([data-component='select-itemindicator']) {
+      @apply flex h-4 w-4 shrink-0 items-center justify-center text-neutral-700;
+    }
+
+    &:where([data-component='select-itemindicator'])
+      &:where([data-component='select-itemindicator-1']) {
+      @apply h-3.5 w-fit shrink-0;
+    }
+
+    &:where([data-component='select-scrolluparrow']) {
+      @apply flex h-5 w-full shrink-0 items-center justify-center bg-white text-neutral-700;
+    }
+
+    &:where([data-component='select-scrolluparrow'])
+      &:where([data-component='select-scrolluparrow-1']) {
+      @apply h-4 w-fit;
+    }
+
+    &:where([data-component='select-scrolldownarrow']) {
+      @apply flex h-5 w-full shrink-0 items-center justify-center bg-white text-neutral-700;
+    }
+
+    &:where([data-component='select-scrolldownarrow'])
+      &:where([data-component='select-scrolldownarrow-1']) {
+      @apply h-4 w-fit;
+    }
+  }
+}

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

@@ -0,0 +1,8 @@
+/* skeleton */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='skeleton-skeleton']) {
+      @apply h-4 w-4 animate-pulse rounded-lg bg-neutral-200;
+    }
+  }
+}

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

@@ -0,0 +1,86 @@
+/* slider */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='slider-container']) {
+      @apply grid w-full grid-cols-[minmax(0,1fr)_auto] items-center gap-x-2 gap-y-1;
+    }
+
+    &:where([data-component='slider-label']) {
+      @apply col-start-1 row-start-1 text-sm text-neutral-900 data-disabled:text-neutral-500;
+    }
+
+    &:where([data-component='slider-value']) {
+      @apply col-start-2 row-start-1 justify-self-end select-none text-sm font-semibold text-neutral-900 data-disabled:text-neutral-500;
+    }
+
+    &:where([data-component='slider-trackgroup']) {
+      @apply col-span-2 relative flex w-full touch-none items-center py-2 select-none data-disabled:pointer-events-none data-disabled:opacity-30;
+      &[data-orientation='vertical'] {
+        @apply h-44 w-fit px-2 py-0;
+      }
+    }
+
+    &:where([data-component='slider-track']) {
+      @apply relative h-[0.4rem] w-full rounded-xs bg-neutral-300;
+      &[data-orientation='vertical'] {
+        @apply h-full w-[0.3rem];
+      }
+    }
+
+    &:where([data-component='slider-indicator']) {
+      @apply h-full rounded-sm bg-neutral-800;
+      &[data-orientation='vertical'] {
+        @apply h-auto w-full;
+      }
+      &[data-tone='invalid'] {
+        @apply bg-red-800;
+      }
+      &[data-tone='valid'] {
+        @apply bg-green-700;
+      }
+    }
+
+    &:where([data-component='slider-draghandle']) {
+      @apply size-4 cursor-grab rounded-md border border-neutral-400 bg-white shadow-md outline-blue-600 outline-offset-1 transition-shadow hover:shadow-lg data-dragging:cursor-grabbing data-disabled:cursor-not-allowed has-[:focus-visible]:outline-2;
+    }
+
+    &:where([data-component='slider-markslist']) {
+      @apply pointer-events-none absolute inset-0;
+    }
+
+    &:where([data-component='slider-mark']) {
+      @apply absolute top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center rtl:translate-x-1/2;
+      &[data-orientation='vertical'] {
+        @apply top-auto left-1/2 translate-y-1/2;
+      }
+    }
+
+    &:where([data-component='slider-mark'])
+      &:where([data-component='slider-mark-1']) {
+      @apply h-2 w-px bg-neutral-900;
+      &[data-orientation='vertical'] {
+        @apply h-px w-2;
+      }
+    }
+
+    &:where([data-component='slider-mark'])
+      &:where([data-component='slider-mark-2']) {
+      @apply absolute top-full pt-1 text-xs whitespace-nowrap text-neutral-600;
+      &[data-orientation='vertical'] {
+        @apply top-auto left-full pt-0 pl-1;
+      }
+    }
+
+    &:where([data-component='slider-description']) {
+      @apply col-span-2 text-xs font-medium text-neutral-600;
+    }
+
+    &:where([data-component='slider-error']) {
+      @apply col-span-2 text-xs font-medium text-red-800;
+    }
+
+    &:where([data-component='slider-success']) {
+      @apply col-span-2 text-xs font-medium text-emerald-700;
+    }
+  }
+}

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

@@ -0,0 +1,16 @@
+/* spinner */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='spinner-spinner']) {
+      @apply h-4 w-fit shrink-0 animate-spin text-neutral-500;
+    }
+    &:where([data-component='spinner-spinner'])
+      &:where([data-component='spinner-track']) {
+      @apply opacity-0;
+    }
+    &:where([data-component='spinner-spinner'])
+      &:where([data-component='spinner-indicator']) {
+      @apply [stroke-dasharray:0.75_0.25];
+    }
+  }
+}

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

@@ -0,0 +1,34 @@
+/* splitter */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='splitter-contentlist']) {
+      @apply flex h-full w-full;
+      &[data-orientation='vertical'] {
+        @apply flex-col;
+      }
+    }
+
+    &:where([data-component='splitter-content']) {
+      @apply min-h-0 min-w-0;
+    }
+
+    &:where([data-component='splitter-separator']) {
+      @apply relative flex w-px shrink-0 items-center justify-center bg-neutral-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-400 focus-visible:ring-offset-1;
+      &[data-orientation='vertical'] {
+        @apply h-px w-full;
+      }
+    }
+
+    &:where([data-component='splitter-handle']) {
+      @apply z-10 flex h-4 w-3.5 items-center justify-center rounded-sm border border-neutral-200 bg-white shadow-sm;
+      &[data-orientation='vertical'] {
+        @apply rotate-90;
+      }
+    }
+
+    &:where([data-component='splitter-handle'])
+      &:where([data-component='splitter-handle-1']) {
+      @apply h-2.5 w-fit text-neutral-400;
+    }
+  }
+}

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

@@ -0,0 +1,55 @@
+/* stepper */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='stepper-list']) {
+      @apply flex w-full flex-col gap-1.5;
+      &[data-orientation='horizontal'] {
+        @apply flex-row;
+      }
+    }
+
+    &:where([data-component='stepper-item']) {
+      @apply relative flex w-full items-stretch gap-3;
+      &[data-orientation='horizontal'] {
+        @apply flex-1;
+      }
+    }
+
+    &:where([data-component='stepper-indicator']) {
+      @apply flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-neutral-300;
+    }
+
+    &:where([data-component='stepper-indicator'])[data-completed] {
+      @apply bg-neutral-800;
+    }
+
+    &:where([data-component='stepper-indicator'])
+      &:where([data-component='stepper-indicator-1']) {
+      @apply h-3.5 w-fit shrink-0 text-white;
+    }
+
+    &:where([data-component='stepper-indicator'])
+      &:where([data-component='stepper-indicator-2']) {
+      @apply h-2 w-2 rounded-full bg-white;
+    }
+
+    &:where([data-component='stepper-separator']) {
+      @apply absolute top-7 bottom-0 left-3 w-px bg-neutral-300 data-[complete]:bg-neutral-700;
+      &[data-orientation='horizontal'] {
+        @apply top-3 right-0 bottom-auto left-7 h-px w-auto;
+      }
+    }
+
+    &:where([data-component='stepper-content']) {
+      @apply w-full p-3;
+    }
+
+    &:where([data-component='stepper-completedcontent']) {
+      @apply w-full rounded-lg bg-green-50 p-3 text-sm leading-relaxed text-green-800;
+    }
+
+    &:where([data-component='stepper-openbutton']) {
+      @apply flex w-full cursor-pointer items-start gap-3 pb-5 text-left text-[0.95rem] font-semibold text-neutral-900 outline-none disabled:pointer-events-none disabled:opacity-30;
+    }
+  }
+}

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

@@ -0,0 +1,38 @@
+/* switch */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='switch-container']) {
+      @apply grid w-full grid-cols-[auto_1fr] items-start gap-x-2 gap-y-0.5;
+    }
+
+    &:where([data-component='switch-button']) {
+      @apply col-start-1 row-start-1 inline-flex h-5 w-10 shrink-0 cursor-pointer items-center rounded-full border border-transparent bg-neutral-200 transition-all hover:brightness-95 data-checked:bg-neutral-900 data-disabled:cursor-not-allowed data-disabled:opacity-50;
+      &[data-tone='invalid'] {
+        @apply bg-red-800/30 data-checked:bg-red-800;
+      }
+      &[data-tone='valid'] {
+        @apply bg-green-700/30 data-checked:bg-green-700;
+      }
+    }
+
+    &:where([data-component='switch-indicator']) {
+      @apply pointer-events-none block size-4 translate-x-0 rounded-full bg-white shadow-md transition-transform data-checked:translate-x-[calc(100%+5px)];
+    }
+
+    &:where([data-component='switch-label']) {
+      @apply col-start-2 text-sm text-neutral-900 data-disabled:text-neutral-500;
+    }
+
+    &:where([data-component='switch-description']) {
+      @apply col-start-2 text-xs font-medium text-neutral-600;
+    }
+
+    &:where([data-component='switch-error']) {
+      @apply col-start-2 text-xs font-medium text-red-800;
+    }
+
+    &:where([data-component='switch-success']) {
+      @apply col-start-2 text-xs font-medium text-emerald-700;
+    }
+  }
+}

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

@@ -0,0 +1,72 @@
+/* table */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='table-surface']) {
+      @apply min-w-0 w-full h-fit overflow-hidden rounded-[0.85rem] border border-neutral-300/80 bg-white shadow-sm;
+    }
+
+    &:where([data-component='table-surfaceheader']) {
+      @apply flex w-full items-center border-b border-neutral-200 p-2.25;
+    }
+
+    &:where([data-component='table-surfacefooter']) {
+      @apply flex w-full items-center border-t border-neutral-200 bg-[#F7F7F7] p-2.25;
+    }
+
+    &:where([data-component='table-scrollarea']) {
+      @apply h-fit w-full bg-white;
+    }
+
+    &:where([data-component='table-table']) {
+      @apply min-w-full table-fixed border-collapse;
+    }
+
+    &:where([data-component='table-head']) {
+      @apply sticky top-0 z-20 border-b border-neutral-200;
+    }
+
+    &:where([data-component='table-body']) {
+      @apply bg-white;
+    }
+
+    &:where([data-component='table-row']) {
+      @apply border-b border-neutral-200 bg-white last:border-b-0;
+    }
+
+    &:where([data-component='table-headcell']) {
+      @apply bg-[#F7F7F7] px-3.5 py-1.5 text-left text-sm font-medium text-nowrap text-neutral-600/90 first:data-[pinning=first]:shadow-[1px_0_0_0_#e5e5e5,5px_0_8px_-4px_rgba(0,0,0,0.18)] last:data-[pinning=last]:shadow-[-1px_0_0_0_#e5e5e5,-5px_0_8px_-4px_rgba(0,0,0,0.18)];
+    }
+
+    &:where([data-component='table-cell']) {
+      @apply h-8.75 truncate bg-white px-3.5 text-sm text-neutral-900 first:data-[pinning=first]:shadow-[1px_0_0_0_#e5e5e5,5px_0_8px_-4px_rgba(0,0,0,0.18)] last:data-[pinning=last]:shadow-[-1px_0_0_0_#e5e5e5,-5px_0_8px_-4px_rgba(0,0,0,0.18)];
+    }
+
+    &:where([data-component='table-empty']) {
+      @apply w-full flex flex-col items-center justify-center p-6 h-fit min-h-70;
+    }
+
+    &:where([data-component='table-emptybody']) {
+      @apply w-full h-fit flex flex-col items-center justify-center gap-1;
+    }
+
+    &:where([data-component='table-emptytitle']) {
+      @apply text-base font-semibold text-neutral-900;
+    }
+
+    &:where([data-component='table-emptydescription']) {
+      @apply text-sm text-center text-neutral-500 font-medium;
+    }
+
+    &:where([data-component='table-emptyimage']) {
+      @apply mb-4 h-16 w-fit;
+    }
+
+    &:where([data-component='table-emptyicon']) {
+      @apply mb-2 h-8 w-fit text-neutral-900;
+    }
+
+    &:where([data-component='table-emptyactionslist']) {
+      @apply mt-3 flex w-fit items-center gap-4;
+    }
+  }
+}