@central-ui/react 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,380 @@
+@import './shopify-polaris-button.css';
+@import './shopify-polaris-input.css';
+@import './shopify-polaris-numberinput.css';
+@import './shopify-polaris-textarea.css';
+@import './shopify-polaris-passwordinput.css';
+@import './shopify-polaris-otpinput.css';
+@import './shopify-polaris-autocomplete.css';
+@import './shopify-polaris-combobox.css';
+@import './shopify-polaris-select.css';
+@import './shopify-polaris-menu.css';
+@import './shopify-polaris-datepicker.css';
+@import './shopify-polaris-checkbox.css';
+@import './shopify-polaris-radio.css';
+@import './shopify-polaris-ratinginput.css';
+@import './shopify-polaris-slider.css';
+@import './shopify-polaris-switch.css';
+@import './shopify-polaris-toggle.css';
+@import './shopify-polaris-fileupload.css';
+@import './shopify-polaris-stepper.css';
+@import './shopify-polaris-splitter.css';
+@import './shopify-polaris-tabs.css';
+@import './shopify-polaris-accordion.css';
+@import './shopify-polaris-tooltip.css';
+@import './shopify-polaris-dialog.css';
+@import './shopify-polaris-drawer.css';
+@import './shopify-polaris-banner.css';
+@import './shopify-polaris-page.css';
+@import './shopify-polaris-badge.css';
+@import './shopify-polaris-chip.css';
+@import './shopify-polaris-textlink.css';
+@import './shopify-polaris-empty.css';
+@import './shopify-polaris-spinner.css';
+@import './shopify-polaris-popover.css';
+@import './shopify-polaris-table.css';
+@import './shopify-polaris-card.css';
+@import './shopify-polaris-skeleton.css';
+@import './shopify-polaris-avatar.css';
+@import './shopify-polaris-metric.css';
+@import './shopify-polaris-divider.css';
+@import './shopify-polaris-breadcrumb.css';
+@import './shopify-polaris-form.css';
+
+/* Global foundation and animations shared by the Polaris preset. */
+@custom-variant screen-mobile (@media (max-width: 400px));
+@custom-variant screen-tablet (@media (max-width: 768px));
+@custom-variant screen-laptop (@media (max-width: 1024px));
+@custom-variant screen-desktop (@media (max-width: 1280px));
+
+* {
+  font-family: 'Inter';
+  outline-offset: 0px !important;
+}
+
+/* Custom scrollbar styles */
+::-webkit-scrollbar {
+  height: 5px;
+  width: 5px;
+}
+
+::-webkit-scrollbar-track {
+  background: white;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #aaaaaa;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #7c8591;
+}
+/* Presence keeps closing elements mounted until their exit animations finish. */
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@utility animate-fade-in {
+  animation: fade-in 150ms ease-out both;
+  @media (prefers-reduced-motion: reduce) {
+    animation-duration: 0.01ms;
+    transition-duration: 0.01ms;
+  }
+}
+
+@utility animate-fade-out {
+  animation: fade-out 150ms ease-in both;
+  @media (prefers-reduced-motion: reduce) {
+    animation-duration: 0.01ms;
+    transition-duration: 0.01ms;
+  }
+}
+
+@utility animate-fade-in-slow {
+  animation: fade-in 200ms ease-out both;
+  @media (prefers-reduced-motion: reduce) {
+    animation-duration: 0.01ms;
+    transition-duration: 0.01ms;
+  }
+}
+
+@utility animate-fade-out-slow {
+  animation: fade-out 200ms ease-in both;
+  @media (prefers-reduced-motion: reduce) {
+    animation-duration: 0.01ms;
+    transition-duration: 0.01ms;
+  }
+}
+
+@keyframes slide-in-from-right {
+  from {
+    translate: 100% 0;
+  }
+  to {
+    translate: 0 0;
+  }
+}
+
+@keyframes slide-out-to-right {
+  from {
+    translate: 0 0;
+  }
+  to {
+    translate: 100% 0;
+  }
+}
+
+@utility animate-slide-in-from-right {
+  animation: slide-in-from-right 200ms ease-out both;
+  transition: transform 200ms ease-out;
+  @media (prefers-reduced-motion: reduce) {
+    animation-duration: 0.01ms;
+    transition-duration: 0.01ms;
+  }
+}
+
+@utility animate-slide-out-to-right {
+  animation: slide-out-to-right 200ms ease-in both;
+  transition: transform 200ms ease-out;
+  @media (prefers-reduced-motion: reduce) {
+    animation-duration: 0.01ms;
+    transition-duration: 0.01ms;
+  }
+}
+
+@keyframes slide-in-from-left {
+  from {
+    translate: -100% 0;
+  }
+  to {
+    translate: 0 0;
+  }
+}
+
+@keyframes slide-out-to-left {
+  from {
+    translate: 0 0;
+  }
+  to {
+    translate: -100% 0;
+  }
+}
+
+@utility animate-slide-in-from-left {
+  animation: slide-in-from-left 200ms ease-out both;
+  transition: transform 200ms ease-out;
+  @media (prefers-reduced-motion: reduce) {
+    animation-duration: 0.01ms;
+    transition-duration: 0.01ms;
+  }
+}
+
+@utility animate-slide-out-to-left {
+  animation: slide-out-to-left 200ms ease-in both;
+  transition: transform 200ms ease-out;
+  @media (prefers-reduced-motion: reduce) {
+    animation-duration: 0.01ms;
+    transition-duration: 0.01ms;
+  }
+}
+
+@keyframes slide-in-from-bottom {
+  from {
+    translate: 0 100%;
+  }
+  to {
+    translate: 0 0;
+  }
+}
+
+@keyframes slide-out-to-bottom {
+  from {
+    translate: 0 0;
+  }
+  to {
+    translate: 0 100%;
+  }
+}
+
+@utility animate-slide-in-from-bottom {
+  animation: slide-in-from-bottom 200ms ease-out both;
+  transition: transform 200ms ease-out;
+  @media (prefers-reduced-motion: reduce) {
+    animation-duration: 0.01ms;
+    transition-duration: 0.01ms;
+  }
+}
+
+@utility animate-slide-out-to-bottom {
+  animation: slide-out-to-bottom 200ms ease-in both;
+  transition: transform 200ms ease-out;
+  @media (prefers-reduced-motion: reduce) {
+    animation-duration: 0.01ms;
+    transition-duration: 0.01ms;
+  }
+}
+
+@keyframes slide-in-from-top {
+  from {
+    translate: 0 -100%;
+  }
+  to {
+    translate: 0 0;
+  }
+}
+
+@keyframes slide-out-to-top {
+  from {
+    translate: 0 0;
+  }
+  to {
+    translate: 0 -100%;
+  }
+}
+
+@utility animate-slide-in-from-top {
+  animation: slide-in-from-top 200ms ease-out both;
+  transition: transform 200ms ease-out;
+  @media (prefers-reduced-motion: reduce) {
+    animation-duration: 0.01ms;
+    transition-duration: 0.01ms;
+  }
+}
+
+@utility animate-slide-out-to-top {
+  animation: slide-out-to-top 200ms ease-in both;
+  transition: transform 200ms ease-out;
+  @media (prefers-reduced-motion: reduce) {
+    animation-duration: 0.01ms;
+    transition-duration: 0.01ms;
+  }
+}
+
+@keyframes fade-scale-in {
+  from {
+    opacity: 0;
+    scale: 0.95;
+  }
+  to {
+    opacity: 1;
+    scale: 1;
+  }
+}
+
+@keyframes fade-scale-out {
+  from {
+    opacity: 1;
+    scale: 1;
+  }
+  to {
+    opacity: 0;
+    scale: 0.95;
+  }
+}
+
+@utility animate-fade-scale-in {
+  transform-origin: var(--transform-origin, center);
+  animation: fade-scale-in 150ms ease-out both;
+  @media (prefers-reduced-motion: reduce) {
+    animation-duration: 0.01ms;
+    transition-duration: 0.01ms;
+  }
+}
+
+@utility animate-fade-scale-out {
+  transform-origin: var(--transform-origin, center);
+  animation: fade-scale-out 150ms ease-in both;
+  @media (prefers-reduced-motion: reduce) {
+    animation-duration: 0.01ms;
+    transition-duration: 0.01ms;
+  }
+}
+
+@keyframes expand-height {
+  from {
+    opacity: 0.01;
+    height: 0;
+  }
+  to {
+    opacity: 1;
+    height: var(--height);
+  }
+}
+
+@keyframes collapse-height {
+  from {
+    opacity: 1;
+    height: var(--height);
+  }
+  to {
+    opacity: 0.01;
+    height: 0;
+  }
+}
+
+@keyframes expand-width {
+  from {
+    opacity: 0.01;
+    width: 0;
+  }
+  to {
+    opacity: 1;
+    width: var(--width);
+  }
+}
+
+@keyframes collapse-width {
+  from {
+    opacity: 1;
+    width: var(--width);
+  }
+  to {
+    opacity: 0.01;
+    width: 0;
+  }
+}
+
+@utility animate-expand-height {
+  animation: expand-height 250ms ease-in-out both;
+  @media (prefers-reduced-motion: reduce) {
+    animation-duration: 0.01ms;
+    transition-duration: 0.01ms;
+  }
+}
+
+@utility animate-collapse-height {
+  animation: collapse-height 200ms ease-in-out both;
+  @media (prefers-reduced-motion: reduce) {
+    animation-duration: 0.01ms;
+    transition-duration: 0.01ms;
+  }
+}
+
+@utility animate-expand-width {
+  animation: expand-width 250ms ease-in-out both;
+  @media (prefers-reduced-motion: reduce) {
+    animation-duration: 0.01ms;
+    transition-duration: 0.01ms;
+  }
+}
+
+@utility animate-collapse-width {
+  animation: collapse-width 200ms ease-in-out both;
+  @media (prefers-reduced-motion: reduce) {
+    animation-duration: 0.01ms;
+    transition-duration: 0.01ms;
+  }
+}

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

@@ -0,0 +1,28 @@
+/* accordion */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='accordion-list']) {
+      @apply flex w-full flex-col overflow-hidden rounded-xl border border-neutral-300 bg-white;
+    }
+
+    &:where([data-component='accordion-item']) {
+      @apply w-full border-b border-neutral-300 last:border-b-0;
+    }
+
+    &:where([data-component='accordion-openbutton']) {
+      @apply flex min-h-10 w-full cursor-pointer items-center justify-between gap-4 bg-white px-3 py-2 text-left text-sm font-semibold text-neutral-900 outline-none hover:bg-neutral-50 focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-600 disabled:pointer-events-none disabled:bg-neutral-100 disabled:text-neutral-500 disabled:opacity-50;
+    }
+
+    &:where([data-component='accordion-openertitle']) {
+      @apply min-w-0 flex-1;
+    }
+
+    &:where([data-component='accordion-openerindicator']) {
+      @apply h-4 w-fit shrink-0 text-inherit transition-transform data-panel-open:rotate-180;
+    }
+
+    &:where([data-component='accordion-content']) {
+      @apply h-(--accordion-panel-height) overflow-hidden text-sm text-neutral-700 transition-[height] duration-200 data-starting-style:h-0 data-ending-style:h-0;
+    }
+  }
+}

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

@@ -0,0 +1,155 @@
+/* Autocomplete */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='autocomplete-container']) {
+      @apply flex w-full flex-col gap-1.25;
+    }
+
+    &:where([data-component='autocomplete-label']) {
+      @apply text-sm text-neutral-900 data-disabled:text-neutral-500;
+    }
+
+    &:where([data-component='autocomplete-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='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-300;
+    }
+
+    &:where([data-component='autocomplete-itemslist']) {
+      @apply flex w-full flex-col gap-1;
+    }
+
+    &:where([data-component='autocomplete-group']) {
+      @apply p-1 flex w-full flex-col gap-1;
+    }
+
+    &:where([data-component='autocomplete-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='autocomplete-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='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-300;
+    }
+
+    &:where([data-component='autocomplete-arrow'])
+      &:where([data-component='autocomplete-arrow-3']) {
+      @apply fill-inherit;
+    }
+
+    &:where([data-component='autocomplete-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='autocomplete-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='autocomplete-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='autocomplete-inputgroup']) {
+      @apply flex w-full min-w-0 items-center overflow-hidden rounded-lg border border-neutral-400 bg-white p-0 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='autocomplete-addonopenbutton']) {
+      @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='autocomplete-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='autocomplete-grouplabel']) {
+      @apply shrink-0 px-2.5 py-1.5 text-[0.75rem] leading-none font-medium 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-300;
+    }
+
+    &: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-500 data-readonly:text-neutral-600;
+    }
+
+    &:where([data-component='autocomplete-emptytext']) {
+      @apply text-[0.85rem] text-center font-medium text-neutral-600;
+    }
+
+    &:where([data-component='autocomplete-description']) {
+      @apply text-xs font-medium text-neutral-500 data-disabled:text-neutral-400;
+    }
+
+    &:where([data-component='autocomplete-error']) {
+      @apply text-xs font-medium text-red-800 data-disabled:text-red-400;
+    }
+
+    &:where([data-component='autocomplete-success']) {
+      @apply text-xs font-medium text-emerald-700 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-500 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-[0.85rem] text-center font-medium 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-legacy/shopify-polaris-legacy-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-legacy/shopify-polaris-legacy-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-neutral-200 text-neutral-600;
+      }
+      &[data-tone='informative'] {
+        @apply bg-blue-200/60 text-blue-900;
+      }
+      &[data-tone='success'] {
+        @apply bg-green-300/60 text-green-900;
+      }
+      &[data-tone='danger'] {
+        @apply bg-red-100 text-red-800;
+      }
+      &[data-tone='caution'] {
+        @apply bg-amber-200 text-yellow-800;
+      }
+    }
+
+    &:where([data-component='badge-icon']) {
+      @apply -ml-0.75 h-3 w-fit shrink-0 text-inherit;
+    }
+  }
+}