@uxf/ui 1.0.0-beta.57 → 1.0.0-beta.59

package/config/icons.d.ts

@@ -0,0 +1,47 @@
+export declare const ICONS: {
+    readonly camera: {
+        readonly w: 512;
+        readonly h: 512;
+    };
+    readonly caretDown: {
+        readonly w: 320;
+        readonly h: 512;
+    };
+    readonly check: {
+        readonly w: 512;
+        readonly h: 512;
+    };
+    readonly chevronDown: {
+        readonly w: 512;
+        readonly h: 512;
+    };
+    readonly chevronLeft: {
+        readonly w: 384;
+        readonly h: 512;
+    };
+    readonly chevronRight: {
+        readonly w: 384;
+        readonly h: 512;
+    };
+    readonly chevronUp: {
+        readonly w: 512;
+        readonly h: 512;
+    };
+    readonly xmarkLarge: {
+        readonly w: 448;
+        readonly h: 512;
+    };
+};
+export declare type IconsType = keyof typeof ICONS;
+declare module "@uxf/ui/icon/theme" {
+    interface IconsSet {
+        camera: true;
+        caretDown: true;
+        check: true;
+        chevronDown: true;
+        chevronLeft: true;
+        chevronRight: true;
+        chevronUp: true;
+        xmarkLarge: true;
+    }
+}

package/config/icons.js

@@ -0,0 +1,14 @@
+"use strict";
+// this file is generated automatically, do not change anything manually in the contents of this file
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ICONS = void 0;
+exports.ICONS = {
+    camera: { w: 512, h: 512 },
+    caretDown: { w: 320, h: 512 },
+    check: { w: 512, h: 512 },
+    chevronDown: { w: 512, h: 512 },
+    chevronLeft: { w: 384, h: 512 },
+    chevronRight: { w: 384, h: 512 },
+    chevronUp: { w: 512, h: 512 },
+    xmarkLarge: { w: 448, h: 512 },
+};

package/css/button.css

@@ -1,108 +1,203 @@
 @keyframes spinner {
-  to {transform: rotate(360deg);}
+    to {
+        transform: rotate(360deg);
+    }
 }
 
 .uxf-button {
-  @apply inline-flex items-center rounded font-medium shadow-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 relative cursor-pointer;
-
-  &__text {
-    @apply truncate;
-  }
-
-  &--full-width {
-    @apply w-full flex flex-row justify-center;
-  }
-
-  &.is-disabled {
-    @apply opacity-50 pointer-events-none shadow-none;
-  }
-
-  &.is-loading:after {
-      content: '';
-      width: 20px;
-      height: 20px;
-      border-radius: 50%;
-      border-top: 2px solid;
-      border-right: 2px solid transparent;
-      animation: spinner .8s linear infinite;
-      margin-left: 8px;
-  }
-
-  &--size-xs {
-    @apply px-2.5 py-1.5 text-xs;
+    @apply inline-flex items-center rounded-lg before:rounded-lg font-medium
+    focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 relative cursor-pointer transition before:transition;
 
-    &.is-loading:after {
-      width: 14px;
-      height: 14px;
+    &__text {
+        @apply truncate;
     }
-  }
 
-  &--size-sm {
-    @apply px-3 py-2 text-sm leading-4;
-
-    &.is-loading:after {
-      width: 16px;
-      height: 16px;
+    &--full-width {
+        @apply w-full flex flex-row justify-center;
     }
-  }
 
-  &--size-default {
-    @apply px-4 py-2 text-sm;
-  }
+    &.is-disabled {
+        @apply pointer-events-none;
+    }
 
-  &--size-lg {
-    @apply px-4 py-2 text-base;
-  }
+    &.is-loading {
+        @apply pointer-events-none;
+    }
 
-  &--size-xl {
-    @apply border px-6 py-3 text-base;
-  }
+    &.is-loading:after {
+        content: '';
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        border-top: 2px solid;
+        border-right: 2px solid transparent;
+        animation: spinner .8s linear infinite;
+        margin-left: 8px;
+    }
 
-  &--variant-outlined {
-    @apply border bg-white;
+    &--size-xs {
+        @apply px-2.5 py-1.5 text-xs;
 
-    &.uxf-button--color-default {
-      @apply border-primary-500 text-primary-700 hover:bg-primary-50 focus:ring-primary-500;
+        &.is-loading:after {
+            width: 14px;
+            height: 14px;
+        }
     }
 
-    &.uxf-button--color-white {
-      @apply border-gray-300 text-gray-700 hover:bg-gray-50 focus:ring-gray-500;
+    &--size-sm {
+        @apply px-3 py-2 text-sm leading-4;
+
+        &.is-loading:after {
+            width: 16px;
+            height: 16px;
+        }
     }
 
-    &.uxf-button--color-success {
-      @apply border-success-500 text-success-700 hover:bg-success-50 focus:ring-success-500;
+    &--size-default {
+        @apply px-4 py-3 text-base;
     }
 
-    &.uxf-button--color-warning {
-      @apply border-warning-500 text-warning-700 hover:bg-warning-50 focus:ring-warning-500;
+    &--size-lg {
+        @apply px-8 py-5 text-base;
     }
 
-    &.uxf-button--color-error {
-      @apply border-error-500 text-error-700 hover:bg-error-50 focus:ring-error-500;
+    &--size-xl {
+        @apply px-10 py-6 text-base;
     }
-  }
 
-  &--variant-default {
-    @apply border-transparent text-white;
+    &--variant-outlined {
+        @apply before:absolute before:pointer-events-none before:inset-0 before:border hover:before:border-2 bg-transparent;
 
-    &.uxf-button--color-default {
-      @apply bg-primary-500 hover:bg-primary-600 focus:ring-primary-400;
-    }
+        :root .light & {
+            @apply before:border-gray-300 hover:bg-primary-100 hover:before:border-primary-400 focus-visible:ring-primary-500 focus-visible:ring-offset-white;
 
-    &.uxf-button--color-white {
-      @apply bg-gray-50 text-gray-700 shadow-none hover:bg-gray-100 focus:ring-gray-500;
-    }
+            &.is-disabled {
+                @apply before:border-gray-100 text-gray-400;
+            }
+        }
+
+        :root .dark & {
+            @apply before:border-gray-300 hover:bg-gray-700 hover:before:border-gray-300 focus-visible:ring-primary-500 focus-visible:ring-offset-gray-900;
 
-    &.uxf-button--color-success {
-      @apply bg-success-500 hover:bg-success-600 focus:ring-success-400;
+            &.is-disabled {
+                @apply before:border-gray-700 text-gray-600;
+            }
+        }
     }
 
-    &.uxf-button--color-warning {
-      @apply bg-warning-500 hover:bg-warning-600 focus:ring-warning-400;
+    &--variant-default {
+        @apply text-white;
+
+        &.uxf-button--color-default {
+            :root .light & {
+                @apply text-white bg-primary-500 hover:bg-primary-400 focus-visible:ring-primary-500;
+
+                &.is-disabled {
+                    @apply bg-gray-100 text-gray-400;
+                }
+            }
+
+            :root .dark & {
+                @apply text-white bg-primary-500 hover:bg-primary-400 focus-visible:ring-primary-500 focus-visible:ring-offset-gray-900;
+
+                &.is-disabled {
+                    @apply bg-gray-700 text-gray-400;
+                }
+            }
+        }
+
+        &.uxf-button--color-white {
+            :root .light & {
+                @apply bg-white hover:bg-gray-200 focus-visible:ring-gray-200;
+
+                &.is-disabled {
+                    @apply bg-gray-100 text-gray-400;
+                }
+            }
+
+            :root .dark & {
+                @apply bg-white hover:bg-gray-200 focus-visible:ring-gray-200;
+
+                &.is-disabled {
+                    @apply bg-gray-100 text-gray-400;
+                }
+            }
+
+            @apply bg-gray-50 text-gray-700 hover:bg-gray-100 focus-visible:ring-gray-500;
+        }
+
+        &.uxf-button--color-success {
+            :root .light & {
+                @apply text-white bg-success-500 hover:bg-success-400 focus-visible:ring-success-500;
+
+                &.is-disabled {
+                    @apply bg-gray-100 text-gray-400;
+                }
+            }
+
+            :root .dark & {
+                @apply text-white bg-success-500 hover:bg-success-400 focus-visible:ring-success-500 focus-visible:ring-offset-gray-900;
+
+                &.is-disabled {
+                    @apply bg-gray-700 text-gray-400;
+                }
+            }
+        }
+
+        &.uxf-button--color-warning {
+            :root .light & {
+                @apply text-white bg-warning-500 hover:bg-warning-400 focus-visible:ring-warning-500;
+
+                &.is-disabled {
+                    @apply bg-gray-100 text-gray-400;
+                }
+            }
+
+            :root .dark & {
+                @apply text-white bg-warning-500 hover:bg-warning-400 focus-visible:ring-warning-500 focus-visible:ring-offset-gray-900;
+
+                &.is-disabled {
+                    @apply bg-gray-700 text-gray-400;
+                }
+            }
+        }
+
+        &.uxf-button--color-error {
+            :root .light & {
+                @apply text-white bg-error-500 hover:bg-error-400 focus-visible:ring-error-500;
+
+                &.is-disabled {
+                    @apply bg-gray-100 text-gray-400;
+                }
+            }
+
+            :root .dark & {
+                @apply text-white bg-error-500 hover:bg-error-400 focus-visible:ring-error-500 focus-visible:ring-offset-gray-900;
+
+                &.is-disabled {
+                    @apply bg-gray-700 text-gray-400;
+                }
+            }
+        }
     }
 
-    &.uxf-button--color-error {
-      @apply bg-error-500 hover:bg-error-600 focus:ring-error-400;
+    &--variant-text {
+        @apply before:border-transparent;
+
+        :root .light & {
+            @apply hover:bg-black/10 focus-visible:ring-primary-500 focus-visible:ring-offset-white;
+
+            &.is-disabled {
+                @apply text-gray-400;
+            }
+        }
+
+        :root .dark & {
+            @apply hover:bg-white/10 focus-visible:ring-primary-500 focus-visible:ring-offset-gray-900;
+
+            &.is-disabled {
+                @apply text-gray-600;
+            }
+        }
     }
-  }
 }

package/css/chip.css

@@ -0,0 +1,37 @@
+.uxf-chip {
+    @apply inline-block rounded-lg py-1 px-2 text-xs;
+
+    &__text {
+        @apply truncate;
+    }
+
+    &--color-success {
+        :root .light & {
+            @apply text-success-600 bg-success-100;
+        }
+
+        :root .dark & {
+            @apply text-white bg-success-700;
+        }
+    }
+
+    &--color-warning {
+        :root .light & {
+            @apply text-warning-600 bg-warning-100;
+        }
+
+        :root .dark & {
+            @apply text-white bg-warning-700;
+        }
+    }
+
+    &--color-error {
+        :root .light & {
+            @apply text-error-600 bg-error-100;
+        }
+
+        :root .dark & {
+            @apply text-white bg-error-700;
+        }
+    }
+}

package/css/color-radio-group.css

@@ -0,0 +1,26 @@
+.uxf-color-radio-group {
+    &__option {
+        @apply rounded-full outline-none focus-visible:ring-offset-2 focus-visible:ring-2;
+
+        :root .light & {
+            @apply focus-visible:ring-[color:var(--option-color)] focus-visible:ring-offset-white;
+        }
+
+        :root .dark & {
+            @apply focus-visible:ring-[color:var(--option-color)] focus-visible:ring-offset-gray-900;
+        }
+    }
+
+    &__label {
+        @apply mb-2;
+    }
+
+    &__label--hidden {
+        @apply sr-only;
+    }
+
+    &__options-wrapper {
+        @apply flex flex-wrap gap-3.5;
+    }
+}
+

package/css/color-radio.css

@@ -0,0 +1,21 @@
+.uxf-color-radio {
+    @apply shrink-0 inline-flex items-center justify-center rounded-full h-7 w-7 bg-[color:var(--bg-color)];
+
+    &__label {
+        @apply sr-only;
+    }
+
+    &__icon {
+        @apply w-4 h-4 text-white opacity-0 transition-opacity;
+    }
+
+    &__icon--dark {
+        @apply text-gray-900;
+    }
+
+    &.is-selected {
+        .uxf-color-radio__icon {
+            @apply opacity-100;
+        }
+    }
+}

package/css/input.css

@@ -1,98 +1,153 @@
 .uxf-input {
-  @apply rounded-md shadow-sm sm:text-sm;
+    @apply rounded-lg text-base;
 
-  &__left-element,
-  &__right-element {
-    @apply text-gray-400;
-  }
+    :root .light & {
+        @apply bg-gray-100 text-gray-900;
+    }
 
-  &__left-element {
-    @apply mr-2;
-  }
-  &__right-element {
-    @apply ml-2;
-  }
+    :root .dark & {
+        @apply bg-gray-800 text-gray-300;
+    }
 
-  &__left-addon,
-  &__right-addon {
-    @apply border border-gray-300 bg-gray-50 px-2 text-gray-500;
-  }
+    &__element {
+        :root .light & {
+            @apply placeholder:text-gray-400;
+        }
 
-  &__left-addon {
-    @apply rounded-l-md border-r-0;
-  }
+        :root .dark & {
+            @apply placeholder:text-gray-400;
+        }
+    }
+
+    &__left-element {
+        @apply mr-2;
+    }
 
-  &__right-addon {
-    @apply rounded-r-md border-l-0;
-  }
+    &__right-element {
+        @apply ml-2;
+    }
 
-  &__wrapper {
-    @apply h-10 rounded-md border border-gray-300 px-3;
-  }
+    &__left-addon,
+    &__right-addon {
+        @apply border px-2;
 
-  &__element {
-    @apply bg-transparent outline-none;
-  }
+        :root .light & {
+            @apply border-gray-200;
+        }
 
-  &--has-right-addon {
-    .uxf-input__wrapper {
-      @apply rounded-r-none;
+        :root .dark & {
+            @apply border-gray-700;
+        }
     }
-  }
 
-  &--has-left-addon {
-    .uxf-input__wrapper {
-      @apply rounded-l-none;
+    &__left-addon {
+        @apply rounded-l-lg border-r-0;
     }
-  }
 
-  &.is-focused {
-    .uxf-input__wrapper {
-      @apply border-primary-500 ring-1 ring-inset ring-primary-500 ring-offset-0;
+    &__right-addon {
+        @apply rounded-r-lg border-l-0;
     }
-  }
 
-  &.is-disabled {
-    @apply cursor-not-allowed;
+    &__wrapper {
+        @apply h-12 rounded-lg border px-4;
 
-    .uxf-input__element {
-      @apply cursor-not-allowed text-gray-500;
-    }
-    .uxf-input__wrapper {
-      @apply bg-gray-50;
+        :root .light & {
+            @apply border-gray-200;
+        }
+
+        :root .dark & {
+            @apply border-gray-700;
+        }
     }
-  }
 
-  &.is-readonly {
-    @apply cursor-not-allowed;
+    &__element {
+        @apply bg-transparent outline-none;
+    }
 
-    .uxf-input__element {
-      @apply cursor-not-allowed;
+    &--has-right-addon {
+        .uxf-input__wrapper {
+            @apply rounded-r-none;
+        }
     }
 
-    .uxf-input__wrapper {
-      @apply ring-0 border-gray-300;
+    &--has-left-addon {
+        .uxf-input__wrapper {
+            @apply rounded-l-none;
+        }
     }
-  }
 
-  &.is-invalid {
     &.is-focused {
-      .uxf-input__wrapper {
-        @apply ring-1 ring-inset ring-error-500 border-error-500 ring-offset-0;
-      }
+        .uxf-input__wrapper {
+            @apply ring-2 ring-inset ring-offset-0;
+
+            :root .light & {
+                @apply ring-primary-500;
+            }
+
+            :root .dark & {
+                @apply ring-primary-500;
+            }
+        }
+    }
+
+    &.is-disabled {
+        @apply cursor-not-allowed;
+
+        :root .light & {
+            @apply bg-gray-300;
+        }
+
+        :root .dark & {
+            @apply bg-gray-600;
+        }
+
+        .uxf-input__element {
+            @apply cursor-not-allowed;
+        }
     }
 
-    .uxf-input__wrapper {
-      @apply border-error-500 placeholder-error-300;
+    &.is-readonly {
+        @apply cursor-text;
+
+        .uxf-input__element {
+            @apply cursor-text;
+        }
+
+        .uxf-input__wrapper {
+            @apply ring-0;
+        }
 
-      .uxf-input__left-element,
-      .uxf-input__right-element {
-        @apply text-error-500;
-      }
+        .uxf-input__wrapper,
+        .uxf-input__left-addon,
+        .uxf-input__right-addon {
+            :root .light & {
+                @apply border-gray-300;
+            }
+
+            :root .dark & {
+                @apply border-gray-500;
+            }
+        }
+    }
 
-      .uxf-input__element {
-        @apply text-error-900 placeholder-error-300;
-      }
+    &.is-invalid {
+        &.is-focused {
+            .uxf-input__wrapper {
+                @apply ring-1 ring-inset ring-error-500 border-error-500 ring-offset-0;
+            }
+        }
+
+        .uxf-input__wrapper {
+            @apply border-error-500 placeholder-error-300;
+
+            .uxf-input__left-element,
+            .uxf-input__right-element {
+                @apply text-error-500;
+            }
+
+            .uxf-input__element {
+                @apply text-error-900 placeholder-error-300;
+            }
+        }
     }
-  }
 }

package/css/label.css

@@ -1,6 +1,13 @@
 .uxf-label {
     @apply mb-1 block text-sm font-medium text-gray-700;
 
+    :root .light & {
+        @apply text-gray-900;
+    }
+    :root .dark & {
+        @apply text-white;
+    }
+
     &.is-required::after {
         content: " *";
     }