@central-ui/react 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,155 @@
+/* Autocomplete */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='autocomplete-container']) {
+      @apply flex flex-col gap-1.5 w-full;
+    }
+
+    &:where([data-component='autocomplete-label']) {
+      @apply text-sm font-medium text-neutral-950 data-disabled:text-neutral-400;
+    }
+
+    &:where([data-component='autocomplete-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='autocomplete-scrollarea']) {
+      @apply flex min-h-0 w-full flex-col overflow-y-auto overscroll-contain;
+    }
+
+    &:where([data-component='autocomplete-groupslist']) {
+      @apply flex w-full shrink-0 flex-col divide-y divide-neutral-200;
+    }
+
+    &:where([data-component='autocomplete-itemslist']) {
+      @apply flex w-full flex-col gap-0.5;
+    }
+
+    &:where([data-component='autocomplete-group']) {
+      @apply p-1 flex w-full flex-col gap-0.5;
+    }
+
+    &:where([data-component='autocomplete-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='autocomplete-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='autocomplete-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='autocomplete-arrow'])
+      &:where([data-component='autocomplete-arrow-1']) {
+      @apply fill-inherit;
+    }
+
+    &:where([data-component='autocomplete-arrow'])
+      &:where([data-component='autocomplete-arrow-2']) {
+      @apply fill-neutral-200;
+    }
+
+    &:where([data-component='autocomplete-arrow'])
+      &:where([data-component='autocomplete-arrow-3']) {
+      @apply fill-inherit;
+    }
+
+    &:where([data-component='autocomplete-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='autocomplete-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='autocomplete-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='autocomplete-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='autocomplete-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='autocomplete-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='autocomplete-grouplabel']) {
+      @apply shrink-0 px-2 py-1 text-xs leading-4 font-normal text-neutral-600;
+    }
+
+    &:where([data-component='autocomplete-empty']) {
+      @apply flex w-full items-center gap-1.5 py-2 px-3.5 empty:p-0;
+    }
+
+    &:where([data-component='autocomplete-separator']) {
+      @apply w-full border-t border-neutral-200;
+    }
+
+    &:where([data-component='autocomplete-itemtext']) {
+      @apply min-w-0 flex-1 truncate;
+    }
+
+    &:where([data-component='autocomplete-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='autocomplete-emptytext']) {
+      @apply text-sm text-center font-normal text-neutral-600;
+    }
+
+    &:where([data-component='autocomplete-description']) {
+      @apply text-xs text-neutral-600 data-disabled:text-neutral-400;
+    }
+
+    &:where([data-component='autocomplete-error']) {
+      @apply text-xs text-red-800 data-disabled:text-red-400;
+    }
+
+    &:where([data-component='autocomplete-success']) {
+      @apply text-xs text-green-800 data-disabled:text-emerald-400;
+    }
+
+    &:where([data-component='autocomplete-addonopenbuttonicon']) {
+      @apply h-4 w-fit shrink-0 p-0;
+    }
+
+    &:where([data-component='autocomplete-addonclearbuttonicon']) {
+      @apply h-4 w-fit shrink-0 p-0;
+    }
+
+    &:where([data-component='autocomplete-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='autocomplete-loading']) {
+      @apply flex w-full items-center gap-1.5 py-2 px-3.5 empty:p-0;
+    }
+
+    &:where([data-component='autocomplete-loadingtext']) {
+      @apply text-sm text-center font-normal text-neutral-600;
+    }
+
+    &:where([data-component='autocomplete-loadingicon']) {
+      @apply h-4 w-fit shrink-0 animate-spin text-neutral-600;
+    }
+  }
+}

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

@@ -0,0 +1,47 @@
+/* avatar */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='avatar-list']) {
+      @apply flex items-center [&>*+*]:-ml-1 [&>*]:ring-3 [&>*]:ring-white;
+    }
+
+    &:where([data-component='avatar-image']) {
+      @apply aspect-square shrink-0 object-cover;
+      &[data-size='big'] {
+        @apply h-9 w-9 rounded-xl;
+      }
+      &[data-size='medium'] {
+        @apply h-8 w-8 rounded-xl;
+      }
+      &[data-size='small'] {
+        @apply h-5 w-5 rounded-md;
+      }
+    }
+
+    &:where([data-component='avatar-fallbacknameinitials']) {
+      @apply flex aspect-square shrink-0 items-center justify-center border border-black/3 font-semibold text-black/60;
+      &[data-size='big'] {
+        @apply h-9 w-9 rounded-xl text-sm;
+      }
+      &[data-size='medium'] {
+        @apply h-8 w-8 rounded-xl text-sm;
+      }
+      &[data-size='small'] {
+        @apply h-5 w-5 rounded-md text-xs;
+      }
+    }
+
+    &:where([data-component='avatar-fallbackimage']) {
+      @apply aspect-square shrink-0 object-cover;
+      &[data-size='big'] {
+        @apply h-9 w-9 rounded-xl;
+      }
+      &[data-size='medium'] {
+        @apply h-8 w-8 rounded-xl;
+      }
+      &[data-size='small'] {
+        @apply h-5 w-5 rounded-md;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,27 @@
+/* badge */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='badge-badge']) {
+      @apply flex h-[1.28rem] min-w-[1.425rem] w-fit shrink-0 items-center justify-center gap-1 truncate rounded-lg px-2 text-nowrap text-[0.8rem] font-semibold leading-none [&>svg]:h-3.5 [&>svg]:w-fit;
+      &[data-tone='neutral'] {
+        @apply bg-[#0000000d] text-[#4a4a4a];
+      }
+      &[data-tone='informative'] {
+        @apply bg-[#8ce1f8] text-[#01596f];
+      }
+      &[data-tone='success'] {
+        @apply bg-[#b3f782] text-[#214b03];
+      }
+      &[data-tone='danger'] {
+        @apply bg-[#ffd0cc] text-[#7e100c];
+      }
+      &[data-tone='caution'] {
+        @apply bg-[#ffe45c] text-[#574100];
+      }
+    }
+
+    &:where([data-component='badge-icon']) {
+      @apply -ml-0.75 h-3 w-fit shrink-0 text-inherit;
+    }
+  }
+}

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

@@ -0,0 +1,111 @@
+/* banner */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='banner-surface']) {
+      @apply flex h-fit w-full flex-col overflow-clip rounded-xl border border-transparent bg-neutral-100 shadow-none;
+      &[data-tone='neutral'] {
+        @apply bg-neutral-100;
+      }
+      &[data-tone='success'] {
+        @apply bg-lime-100;
+      }
+      &[data-tone='danger'] {
+        @apply bg-red-100;
+      }
+      &[data-tone='informative'] {
+        @apply bg-cyan-100;
+      }
+      &[data-tone='caution'] {
+        @apply bg-yellow-100;
+      }
+    }
+
+    &:where([data-component='banner-header']) {
+      @apply relative flex h-auto w-full items-center gap-1.75 py-3 pr-10 pl-3 not-last:pb-0 bg-transparent;
+    }
+
+    &:where([data-component='banner-icon']) {
+      @apply h-4 w-fit shrink-0;
+      &[data-tone='neutral'] {
+        @apply text-neutral-600;
+      }
+      &[data-tone='danger'] {
+        @apply text-red-600;
+      }
+      &[data-tone='success'] {
+        @apply text-lime-700;
+      }
+      &[data-tone='informative'] {
+        @apply text-cyan-600;
+      }
+      &[data-tone='caution'] {
+        @apply text-yellow-700;
+      }
+    }
+
+    &:where([data-component='banner-title']) {
+      @apply text-sm font-medium;
+      &[data-tone='neutral'] {
+        @apply text-neutral-950;
+      }
+      &[data-tone='danger'] {
+        @apply text-red-950;
+      }
+      &[data-tone='success'] {
+        @apply text-lime-950;
+      }
+      &[data-tone='informative'] {
+        @apply text-cyan-950;
+      }
+      &[data-tone='caution'] {
+        @apply text-yellow-950;
+      }
+    }
+
+    &:where([data-component='banner-closebutton']) {
+      @apply absolute top-1/2 right-2 flex h-6 w-6 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full text-nowrap outline-none hover:bg-black/10 focus-visible:outline-2 focus-visible:outline-blue-500 disabled:opacity-30;
+    }
+
+    &:where([data-component='banner-closebuttonicon']) {
+      @apply h-5 w-fit shrink-0;
+      &[data-tone='neutral'] {
+        @apply text-neutral-950;
+      }
+      &[data-tone='danger'] {
+        @apply text-red-950;
+      }
+      &[data-tone='success'] {
+        @apply text-lime-950;
+      }
+      &[data-tone='informative'] {
+        @apply text-cyan-950;
+      }
+      &[data-tone='caution'] {
+        @apply text-yellow-950;
+      }
+    }
+
+    &:where([data-component='banner-body']) {
+      @apply flex h-fit w-full flex-col gap-2 p-3 not-first:pt-0.5;
+    }
+
+    &:where([data-component='banner-description']) {
+      @apply list-inside list-disc text-sm leading-normal text-neutral-950;
+      &[data-tone='neutral'] {
+        @apply text-neutral-950;
+      }
+      &[data-tone='success'] {
+        @apply text-lime-950;
+      }
+      &[data-tone='danger'] {
+        @apply text-red-950;
+      }
+      &[data-tone='informative'] {
+        @apply text-cyan-950;
+      }
+      &[data-tone='caution'] {
+        @apply text-yellow-950;
+      }
+    }
+  }
+}

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

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

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

@@ -0,0 +1,79 @@
+/* Button: Polaris 2 appearance, adapted to the library's existing dimensions. */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='button-button']) {
+      @apply 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;
+
+      &[data-size='small'] {
+        @apply min-h-6 px-2.5 py-1 text-[0.75rem] leading-4;
+      }
+      &[data-size='medium'] {
+        @apply min-h-7 px-4 py-1 text-[0.8rem] leading-4;
+      }
+      &[data-size='large'] {
+        @apply min-h-8.5 px-4 py-0 text-base;
+      }
+      &[data-size='icon'] {
+        @apply size-7 shrink-0 p-1 text-[0.8rem];
+      }
+
+      &[data-variant='primary'] {
+        @apply [background-image:radial-gradient(50%_50%_at_50%_0%,_#ffffff33_0%,_#ffffff00_100%),_radial-gradient(49.59%_37.11%_at_50.41%_101.56%,_#ffffff26_0%,_#ffffff00_66.46%)] text-white hover:text-neutral-200 focus-visible:text-neutral-200 active:text-neutral-200 aria-expanded:text-neutral-200;
+
+        &[data-tone='neutral']:not(:disabled) {
+          @apply bg-neutral-950 hover:bg-black focus-visible:bg-black active:bg-black aria-expanded:bg-black shadow-md inset-shadow-[0rem_0rem_.25rem_.0625rem_#101010,0rem_0rem_.25rem_.125rem_#ffffff1a,0rem_0rem_.75rem_-.375rem_#ffffffbf];
+        }
+        &[data-tone='danger']:not(:disabled) {
+          @apply bg-[#d82019] hover:bg-[#ce1f18] focus-visible:bg-[#ce1f18] active:bg-[#b31a14] aria-expanded:bg-[#b31a14] hover:text-red-100 focus-visible:text-red-100 active:text-red-100 aria-expanded:text-red-100 shadow-md inset-shadow-[0rem_0rem_.25rem_.0625rem_#F50000,0rem_0rem_.25rem_.125rem_#ffffff1a,0rem_0rem_.75rem_-.375rem_#ffffffbf];
+        }
+        &:disabled {
+          @apply bg-black/13 text-white shadow-none [background-image:none];
+        }
+      }
+
+      &[data-variant='secondary'] {
+        &[data-tone='neutral']: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;
+        }
+        &[data-tone='danger']:not(:disabled) {
+          @apply bg-red-100 text-red-900 hover:bg-red-200 focus-visible:bg-red-200 active:bg-[#fcb5b1] aria-expanded:bg-[#fcb5b1];
+        }
+        &:disabled {
+          @apply bg-black/3 text-neutral-400;
+        }
+      }
+
+      &[data-variant='tertiary'] {
+        @apply bg-transparent hover:bg-black/8 focus-visible:bg-black/8 active:bg-black/13 aria-expanded:bg-black/13;
+
+        &[data-tone='neutral']:not(:disabled) {
+          @apply text-neutral-950;
+          &[data-size='icon'] {
+            @apply text-neutral-600 hover:text-neutral-700 active:text-neutral-800;
+          }
+        }
+        &[data-tone='danger']:not(:disabled) {
+          @apply text-red-900;
+        }
+        &:disabled {
+          @apply bg-transparent text-neutral-400;
+        }
+      }
+    }
+
+    &:where([data-component='button-icon']) {
+      @apply h-5 w-fit shrink-0 text-inherit;
+      &[data-size='small'] {
+        @apply h-4;
+      }
+    }
+
+    &:where([data-component='button-loadingicon']) {
+      @apply h-4 w-fit shrink-0 animate-spin;
+    }
+
+    &:where([data-component='button-list']) {
+      @apply flex items-center gap-2;
+    }
+  }
+}

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

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

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

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

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

@@ -0,0 +1,16 @@
+/* chip */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='chip-chip']) {
+      @apply flex h-6 min-w-6 w-fit shrink-0 cursor-default items-center justify-between gap-1 rounded-full bg-black/5 px-2 text-[0.8rem] leading-none font-medium text-nowrap text-neutral-600;
+    }
+
+    &:where([data-component='chip-closebutton']) {
+      @apply -mr-1.75 flex h-4.25 aspect-square w-auto cursor-pointer items-center justify-center rounded-full text-neutral-600 hover:bg-black/10 hover:text-neutral-950 active:bg-black/15 active:text-neutral-950 focus-visible:outline-2 focus-visible:outline-blue-500 disabled:pointer-events-none disabled:opacity-50;
+    }
+
+    &:where([data-component='chip-closebuttonicon']) {
+      @apply h-3.25 w-fit text-inherit;
+    }
+  }
+}