@central-ui/react 0.0.0-stage → 0.1.0

package/src/presets/shopify-polaris/shopify-polaris-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-2xl border border-neutral-200 bg-white shadow-lg 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-200;
+    }
+
+    &: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-0.5 p-1 min-h-0;
+    }
+
+    &:where([data-component='menu-grouplabel']) {
+      @apply shrink-0 px-2 py-1 text-xs leading-4 font-normal text-neutral-600;
+    }
+
+    &:where([data-component='menu-itemslist']) {
+      @apply flex min-h-0 w-full flex-col gap-0.5 overflow-y-auto;
+    }
+
+    &:where([data-component='menu-buttonitem']) {
+      @apply flex h-8 w-full cursor-pointer items-center gap-2 rounded-lg px-2 text-sm text-nowrap text-neutral-950 outline-none data-disabled:pointer-events-none data-disabled:opacity-30 data-highlighted:bg-neutral-100 font-normal active:bg-neutral-200;
+      &[data-tone='danger'] {
+        @apply text-red-600 data-highlighted:bg-neutral-100;
+      }
+    }
+
+    &:where([data-component='menu-linkitem']) {
+      @apply flex h-8 w-full cursor-pointer items-center gap-2 rounded-lg px-2 text-sm text-nowrap text-neutral-950 outline-none data-disabled:pointer-events-none data-disabled:opacity-30 data-highlighted:bg-neutral-100 font-normal active:bg-neutral-200;
+    }
+
+    &:where([data-component='menu-radiogroup']) {
+      @apply flex w-full flex-col gap-0.5 p-1;
+    }
+
+    &:where([data-component='menu-submenuopenbutton']) {
+      @apply flex h-8 w-full cursor-pointer items-center justify-between gap-2 rounded-lg px-2 text-sm text-nowrap text-neutral-950 outline-none data-disabled:pointer-events-none data-disabled:opacity-30 data-highlighted:bg-neutral-100 data-open:bg-neutral-100 font-normal active:bg-neutral-200;
+    }
+
+    &:where([data-component='menu-separator']) {
+      @apply w-full border-t border-neutral-200;
+    }
+
+    &:where([data-component='menu-icon']) {
+      @apply h-4 w-fit shrink-0 text-inherit;
+    }
+
+    &:where([data-component='menu-submenuopenbuttonicon']) {
+      @apply h-4 w-fit shrink-0 text-inherit;
+    }
+
+    &:where([data-component='menu-checkboxcontainer']) {
+      @apply flex min-h-8 w-full items-center gap-2 rounded-lg px-2 data-highlighted:bg-neutral-100;
+    }
+
+    &:where([data-component='menu-checkboxbuttonitem']) {
+      @apply flex size-4.25 shrink-0 cursor-pointer items-center justify-center rounded-sm border border-neutral-300 bg-white text-white shadow-xs transition-all duration-150 data-checked:border-neutral-950 data-checked:bg-neutral-950 data-indeterminate:border-neutral-950 data-indeterminate:bg-neutral-950 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 data-disabled:cursor-not-allowed data-disabled:opacity-50;
+    }
+
+    &:where([data-component='menu-checkboxlabel']) {
+      @apply flex-1 cursor-pointer text-sm text-neutral-950 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-8 w-full items-center gap-2 rounded-lg px-2 data-highlighted:bg-neutral-100;
+    }
+
+    &:where([data-component='menu-radiobuttonitem']) {
+      @apply items-center justify-center flex aspect-square size-4 shrink-0 cursor-pointer rounded-full border border-neutral-300 bg-white shadow-xs transition-all data-checked:border-4 data-checked:border-neutral-950 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 data-disabled:cursor-not-allowed data-disabled:opacity-50;
+    }
+
+    &:where([data-component='menu-radiolabel']) {
+      @apply flex-1 cursor-pointer text-sm text-neutral-950 data-disabled:cursor-not-allowed data-disabled:opacity-30;
+    }
+
+    &:where([data-component='menu-radioitemindicator']) {
+      @apply flex size-full aspect-square items-center justify-center rounded-full bg-white;
+    }
+
+    &:where([data-component='menu-radioitemindicator'])
+      &:where([data-component='menu-radioitemindicator-1']) {
+      @apply size-full rounded-full bg-white;
+    }
+  }
+}

package/src/presets/shopify-polaris/shopify-polaris-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/shopify-polaris-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-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='numberinput-container']) {
+      @apply flex flex-col gap-1.5 w-full;
+    }
+
+    &:where([data-component='numberinput-label']) {
+      @apply text-sm font-medium text-neutral-950 data-disabled:text-neutral-400;
+    }
+
+    &:where([data-component='numberinput-description']) {
+      @apply text-xs text-neutral-600;
+    }
+
+    &:where([data-component='numberinput-error']) {
+      @apply text-xs text-red-800;
+    }
+
+    &:where([data-component='numberinput-success']) {
+      @apply text-xs text-green-800;
+    }
+
+    &:where([data-component='numberinput-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='numberinput-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='numberinput-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='numberinput-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='numberinput-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='numberinput-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='numberinput-buttonslist']) {
+      @apply flex w-fit shrink-0 flex-col justify-center overflow-hidden p-0.5 h-7;
+    }
+
+    &:where([data-component='numberinput-valuetext']) {
+      @apply text-sm text-neutral-950;
+    }
+
+    &:where([data-component='numberinput-incrementbutton']) {
+      @apply flex h-2.5 w-5 shrink-0 cursor-pointer items-center justify-center rounded-t-xl p-0 text-neutral-600 bg-neutral-200 active:bg-neutral-300 hover:bg-neutral-300 data-disabled:pointer-events-none data-disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-blue-500;
+    }
+
+    &:where([data-component='numberinput-incrementbuttonicon']) {
+      @apply h-2.5 w-fit shrink-0;
+    }
+
+    &:where([data-component='numberinput-decrementbutton']) {
+      @apply flex h-2.5 w-5 shrink-0 cursor-pointer items-center justify-center rounded-b-xl p-0 text-neutral-600 bg-neutral-200 active:bg-neutral-300 hover:bg-neutral-300 data-disabled:pointer-events-none data-disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-blue-500;
+    }
+
+    &:where([data-component='numberinput-decrementbuttonicon']) {
+      @apply h-2.5 w-fit shrink-0;
+    }
+  }
+}

package/src/presets/shopify-polaris/shopify-polaris-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-xl border border-neutral-200 bg-white p-0 text-center text-base text-neutral-950 shadow-xs outline-none hover:bg-neutral-50 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/10 focus:shadow-sm data-disabled:cursor-not-allowed data-disabled:bg-white data-disabled:text-neutral-400 data-disabled:shadow-none data-disabled:hover:bg-white data-readonly:bg-neutral-50;
+      &[data-tone='invalid'] {
+        @apply border-red-500 focus:border-red-500 focus:ring-red-500/10;
+      }
+      &[data-tone='valid'] {
+        @apply border-green-600 focus:border-green-600 focus:ring-green-600/10;
+      }
+    }
+
+    &:where([data-component='otpinput-container']) {
+      @apply flex flex-col gap-1.5 w-full;
+    }
+
+    &:where([data-component='otpinput-label']) {
+      @apply text-sm font-medium text-neutral-950 data-disabled:text-neutral-400;
+    }
+
+    &:where([data-component='otpinput-description']) {
+      @apply text-xs text-neutral-600;
+    }
+
+    &:where([data-component='otpinput-error']) {
+      @apply text-xs text-red-800;
+    }
+
+    &:where([data-component='otpinput-success']) {
+      @apply text-xs text-green-800;
+    }
+
+    &: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/shopify-polaris-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-base font-medium text-neutral-950;
+    }
+
+    &: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-sm font-semibold text-neutral-950;
+    }
+
+    &:where([data-component='page-footer']) {
+      @apply flex h-fit w-full gap-3 px-6 py-3 first:pt-6 last:pb-6;
+    }
+  }
+}

package/src/presets/shopify-polaris/shopify-polaris-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-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='passwordinput-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='passwordinput-container']) {
+      @apply flex flex-col gap-1.5 w-full;
+    }
+
+    &:where([data-component='passwordinput-label']) {
+      @apply text-sm font-medium text-neutral-950 data-disabled:text-neutral-400;
+    }
+
+    &:where([data-component='passwordinput-description']) {
+      @apply text-xs text-neutral-600 data-disabled:text-neutral-400;
+    }
+
+    &:where([data-component='passwordinput-error']) {
+      @apply text-xs text-red-800 data-disabled:text-red-400;
+    }
+
+    &:where([data-component='passwordinput-success']) {
+      @apply text-xs text-green-800 data-disabled:text-emerald-400;
+    }
+
+    &:where([data-component='passwordinput-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='passwordinput-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='passwordinput-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='passwordinput-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='passwordinput-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='passwordinput-addonvisibilitybutton']) {
+      @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 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/shopify-polaris-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-2xl border border-neutral-200 bg-white shadow-lg 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-200;
+    }
+
+    &: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-sm font-medium leading-none text-neutral-950;
+    }
+
+    &:where([data-component='popover-description']) {
+      @apply text-sm text-neutral-600;
+    }
+  }
+}

package/src/presets/shopify-polaris/shopify-polaris-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-950 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-300 bg-white shadow-xs transition-all data-checked:border-4 data-checked:border-neutral-950 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 data-disabled:cursor-not-allowed data-disabled:opacity-50;
+      &[data-tone='invalid'] {
+        @apply border-red-600 data-checked:border-red-600;
+      }
+      &[data-tone='valid'] {
+        @apply border-green-700 data-checked: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-950 data-disabled:text-neutral-500;
+    }
+
+    &:where([data-component='radio-itemdescription']) {
+      @apply basis-full pl-6 text-[0.8rem] text-neutral-600;
+    }
+
+    &: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-600;
+    }
+
+    &:where([data-component='radio-success']) {
+      @apply text-xs font-medium text-emerald-700;
+    }
+  }
+}

package/src/presets/shopify-polaris/shopify-polaris-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-950 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 rounded-sm border-0 bg-transparent p-0 shadow-none outline-none focus-visible:ring-2 focus-visible:ring-blue-500 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-neutral-950 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-600;
+      }
+    }
+
+    &: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-600;
+    }
+
+    &:where([data-component='ratinginput-success']) {
+      @apply text-xs font-medium text-emerald-700;
+    }
+  }
+}

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

@@ -0,0 +1,119 @@
+/* select */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='select-container']) {
+      @apply flex flex-col gap-1.5 w-full;
+    }
+
+    &:where([data-component='select-label']) {
+      @apply text-sm font-medium text-neutral-950 data-disabled:text-neutral-400;
+    }
+
+    &:where([data-component='select-openbuttonvalue']) {
+      @apply min-w-0 shrink-0 truncate text-left text-inherit data-placeholder:text-neutral-500 data-disabled:text-neutral-400;
+    }
+
+    &: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-200;
+    }
+
+    &:where([data-component='select-itemslist']) {
+      @apply flex w-full flex-col gap-0.5;
+    }
+
+    &:where([data-component='select-group']) {
+      @apply p-1 flex w-full flex-col gap-0.5;
+    }
+
+    &:where([data-component='select-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='select-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='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-200;
+    }
+
+    &: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-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 data-popup-open:border-blue-500 data-popup-open:ring-2 data-popup-open:ring-blue-500/10 data-popup-open:shadow-sm;
+      &[data-tone='invalid'] {
+        @apply border-red-500 focus-visible:border-red-500 focus-visible:ring-red-500/10 data-popup-open:border-red-500 data-popup-open:ring-red-500/10;
+      }
+      &[data-tone='valid'] {
+        @apply border-green-600 focus-visible:border-green-600 focus-visible:ring-green-600/10 data-popup-open:border-green-600 data-popup-open:ring-green-600/10;
+      }
+    }
+
+    &:where([data-component='select-grouplabel']) {
+      @apply shrink-0 px-2 py-1 text-xs leading-4 font-normal text-neutral-600;
+    }
+
+    &:where([data-component='select-separator']) {
+      @apply w-full border-t border-neutral-200;
+    }
+
+    &:where([data-component='select-itemtext']) {
+      @apply min-w-0 flex-1 truncate;
+    }
+
+    &:where([data-component='select-description']) {
+      @apply text-xs text-neutral-600 data-disabled:text-neutral-400;
+    }
+
+    &:where([data-component='select-error']) {
+      @apply text-xs text-red-800 data-disabled:text-red-400;
+    }
+
+    &:where([data-component='select-success']) {
+      @apply text-xs text-green-800 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 h-3.5 w-3.5 shrink-0 text-neutral-950;
+    }
+
+    &: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;
+    }
+  }
+}