@central-ui/react 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,33 @@
+/* tabs */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='tabs-list']) {
+      @apply relative flex w-full border-b border-neutral-200;
+      &[data-orientation='vertical'] {
+        @apply w-fit shrink-0 flex-col border-r border-b-0;
+      }
+    }
+
+    &:where([data-component='tabs-tab']) {
+      @apply flex h-8.5 w-fit cursor-pointer items-center justify-center gap-1 rounded-t-md px-2.5 pb-1.5 text-[0.85rem] font-medium text-nowrap text-neutral-500 outline-none hover:text-neutral-700 data-active:bg-neutral-200/60 data-active:font-semibold data-active:text-neutral-900 data-disabled:pointer-events-none data-disabled:opacity-30;
+      &[data-orientation='vertical'] {
+        @apply w-full justify-start rounded-l-md rounded-tr-none pb-0;
+      }
+    }
+
+    &:where([data-component='tabs-icon']) {
+      @apply h-3.5 w-fit shrink-0 text-inherit;
+    }
+
+    &:where([data-component='tabs-indicator']) {
+      @apply absolute bottom-0 left-(--active-tab-left) h-0.75 w-(--active-tab-width) bg-neutral-900 transition-all;
+      &[data-orientation='vertical'] {
+        @apply top-(--active-tab-top) right-0 bottom-auto left-auto h-(--active-tab-height) w-0.75;
+      }
+    }
+
+    &:where([data-component='tabs-content']) {
+      @apply w-full text-sm text-neutral-900 outline-none;
+    }
+  }
+}

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

@@ -0,0 +1,61 @@
+/* textarea */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='textarea-textarea']) {
+      @apply min-h-36 w-full min-w-0 flex-1 self-stretch resize-none rounded-none border-0 bg-transparent px-2.5 py-2 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='textarea-textareagroup']) {
+      @apply p-0 flex w-full min-w-0 flex-col items-stretch overflow-hidden rounded-lg border border-neutral-400 bg-white text-[0.8rem] text-neutral-900 outline-blue-600 outline-offset-1! hover:bg-neutral-50 focus-within:outline-2 data-disabled:cursor-not-allowed data-disabled:bg-neutral-100 data-disabled:text-neutral-500 data-disabled:hover:bg-neutral-100 data-readonly:cursor-not-allowed data-readonly:bg-neutral-50 data-readonly:hover:bg-neutral-50;
+      &[data-tone='invalid'] {
+        @apply border-red-800;
+      }
+      &[data-tone='valid'] {
+        @apply border-green-700;
+      }
+    }
+
+    &:where([data-component='textarea-container']) {
+      @apply flex flex-col gap-1.25 w-full;
+    }
+
+    &:where([data-component='textarea-label']) {
+      @apply text-sm text-neutral-900 data-disabled:text-neutral-500;
+    }
+
+    &:where([data-component='textarea-description']) {
+      @apply text-xs text-neutral-500 font-medium;
+    }
+
+    &:where([data-component='textarea-error']) {
+      @apply text-xs text-red-800 font-medium;
+    }
+
+    &:where([data-component='textarea-success']) {
+      @apply text-xs text-emerald-700 font-medium;
+    }
+
+    &:where([data-component='textarea-addon']) {
+      @apply inline-flex w-full shrink-0 items-center gap-2.5 empty:hidden px-2.5 py-1.5;
+      &[data-variant='emphasized'] {
+        @apply bg-neutral-200/60;
+      }
+    }
+
+    &:where([data-component='textarea-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='textarea-addonicon']) {
+      @apply h-4 w-fit shrink-0 text-neutral-600 data-disabled:text-neutral-500;
+    }
+
+    &:where([data-component='textarea-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='textarea-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;
+    }
+  }
+}

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

@@ -0,0 +1,8 @@
+/* textlink */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='textlink-textlink']) {
+      @apply w-fit cursor-pointer text-sm font-medium text-blue-700/80 hover:text-blue-800 hover:underline;
+    }
+  }
+}

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

@@ -0,0 +1,43 @@
+/* toast */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='toast-toast']) {
+      @apply absolute bottom-0 left-0 w-full rounded-lg bg-neutral-800 px-3.5 py-3.25 text-white shadow-lg;
+      &[data-tone='error'] {
+        @apply bg-red-600;
+      }
+    }
+
+    &:where([data-component='toast-toast'])
+      &:where([data-component='toast-toast-1']) {
+      @apply grid w-full grid-cols-[auto_minmax(0,1fr)_auto_auto] items-center gap-x-2 transition-opacity duration-250 data-behind:opacity-0 data-expanded:opacity-100;
+    }
+
+    &:where([data-component='toast-icon']) {
+      @apply col-start-1 row-start-1 h-5 w-fit shrink-0 text-white;
+      &[data-tone='success'] {
+        @apply text-green-400;
+      }
+    }
+
+    &:where([data-component='toast-title']) {
+      @apply text-sm font-semibold leading-normal text-white;
+    }
+
+    &:where([data-component='toast-description']) {
+      @apply min-w-0 text-sm leading-normal text-white;
+    }
+
+    &:where([data-component='toast-closebutton']) {
+      @apply col-start-4 row-start-1 flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-lg text-white outline-none hover:bg-white/15 active:bg-white/25 focus-visible:outline-2 focus-visible:outline-white disabled:pointer-events-none disabled:opacity-30;
+    }
+
+    &:where([data-component='toast-actionbutton']) {
+      @apply col-start-3 row-start-1 flex h-7.5 w-fit cursor-pointer items-center justify-center gap-1 rounded-lg bg-white px-[0.7rem] text-[0.8rem] font-semibold text-nowrap text-neutral-700 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='toast-closebuttonicon']) {
+      @apply h-4 w-fit shrink-0;
+    }
+  }
+}

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

@@ -0,0 +1,52 @@
+/* toggle */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='toggle-root']) {
+      @apply flex p-0 aspect-square w-auto cursor-pointer items-center justify-center rounded-lg bg-transparent text-neutral-500 outline-blue-600 outline-offset-1 hover:bg-neutral-100 hover:text-neutral-700 focus-visible:outline-2 data-pressed:bg-neutral-200 data-pressed:text-neutral-800 data-disabled:pointer-events-none data-disabled:opacity-30;
+      &[data-size='small'] {
+        @apply h-6.25;
+      }
+      &[data-size='medium'] {
+        @apply h-7.5;
+      }
+      &[data-size='large'] {
+        @apply h-8.5;
+      }
+      &[data-size='icon'] {
+        @apply h-7;
+      }
+    }
+
+    &:where([data-component='toggle-activeicon']) {
+      @apply w-fit shrink-0 text-inherit;
+      &[data-size='small'] {
+        @apply h-3;
+      }
+      &[data-size='medium'] {
+        @apply h-4;
+      }
+      &[data-size='large'] {
+        @apply h-4.5;
+      }
+      &[data-size='icon'] {
+        @apply h-4;
+      }
+    }
+
+    &:where([data-component='toggle-inactiveicon']) {
+      @apply w-fit shrink-0 text-inherit;
+      &[data-size='small'] {
+        @apply h-3;
+      }
+      &[data-size='medium'] {
+        @apply h-4;
+      }
+      &[data-size='large'] {
+        @apply h-4.5;
+      }
+      &[data-size='icon'] {
+        @apply h-4;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,31 @@
+/* tooltip */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='tooltip-popup']) {
+      @apply relative flex h-fit w-fit max-w-96 flex-col items-start rounded-[0.6rem] border border-neutral-300 bg-white px-2.25 py-1 shadow-md outline-none data-closed:opacity-0;
+    }
+
+    &:where([data-component='tooltip-popuptext']) {
+      @apply text-[0.8rem] font-normal text-wrap text-neutral-900;
+    }
+
+    &:where([data-component='tooltip-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='tooltip-arrow'])
+      &:where([data-component='tooltip-arrow-1']) {
+      @apply fill-inherit;
+    }
+
+    &:where([data-component='tooltip-arrow'])
+      &:where([data-component='tooltip-arrow-2']) {
+      @apply fill-neutral-300;
+    }
+
+    &:where([data-component='tooltip-arrow'])
+      &:where([data-component='tooltip-arrow-3']) {
+      @apply fill-inherit;
+    }
+  }
+}

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

@@ -0,0 +1,381 @@
+@import './shopify-polaris-legacy-accordion.css';
+@import './shopify-polaris-legacy-banner.css';
+@import './shopify-polaris-legacy-autocomplete.css';
+@import './shopify-polaris-legacy-avatar.css';
+@import './shopify-polaris-legacy-badge.css';
+@import './shopify-polaris-legacy-breadcrumb.css';
+@import './shopify-polaris-legacy-button.css';
+@import './shopify-polaris-legacy-card.css';
+@import './shopify-polaris-legacy-checkbox.css';
+@import './shopify-polaris-legacy-combobox.css';
+@import './shopify-polaris-legacy-datepicker.css';
+@import './shopify-polaris-legacy-dialog.css';
+@import './shopify-polaris-legacy-divider.css';
+@import './shopify-polaris-legacy-drawer.css';
+@import './shopify-polaris-legacy-empty.css';
+@import './shopify-polaris-legacy-fileupload.css';
+@import './shopify-polaris-legacy-form.css';
+@import './shopify-polaris-legacy-input.css';
+@import './shopify-polaris-legacy-menu.css';
+@import './shopify-polaris-legacy-metric.css';
+@import './shopify-polaris-legacy-numberinput.css';
+@import './shopify-polaris-legacy-otpinput.css';
+@import './shopify-polaris-legacy-page.css';
+@import './shopify-polaris-legacy-passwordinput.css';
+@import './shopify-polaris-legacy-popover.css';
+@import './shopify-polaris-legacy-radio.css';
+@import './shopify-polaris-legacy-ratinginput.css';
+@import './shopify-polaris-legacy-select.css';
+@import './shopify-polaris-legacy-skeleton.css';
+@import './shopify-polaris-legacy-slider.css';
+@import './shopify-polaris-legacy-spinner.css';
+@import './shopify-polaris-legacy-splitter.css';
+@import './shopify-polaris-legacy-stepper.css';
+@import './shopify-polaris-legacy-switch.css';
+@import './shopify-polaris-legacy-table.css';
+@import './shopify-polaris-legacy-tabs.css';
+@import './shopify-polaris-legacy-chip.css';
+@import './shopify-polaris-legacy-textarea.css';
+@import './shopify-polaris-legacy-textlink.css';
+@import './shopify-polaris-legacy-toast.css';
+@import './shopify-polaris-legacy-toggle.css';
+@import './shopify-polaris-legacy-tooltip.css';
+
+/* Global foundation and animations shared by the Polaris-legacy 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;
+  }
+}