@uxf/ui 1.0.0-beta.51 → 1.0.0-beta.55

package/css/avatar-file-input.css

@@ -0,0 +1,9 @@
+
+.uxf-avatar-file-input {
+    @apply overflow-hidden relative mx-auto h-24 w-24 rounded-full bg-gray-300 text-gray-300 transition
+    before:absolute before:inset-0 before:border before:border-dashed before:border-current before:rounded-full
+    hover:before:border-2 is-focused:text-gray-800 is-focused:bg-white
+    is-disabled:opacity-50 is-disabled:pointer-events-none is-readonly:pointer-events-none
+    is-invalid:text-red-600 is-invalid:is-focused:ring-red-300;
+}
+

package/css/button.css

@@ -0,0 +1,108 @@
+@keyframes spinner {
+  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;
+
+    &.is-loading:after {
+      width: 14px;
+      height: 14px;
+    }
+  }
+
+  &--size-sm {
+    @apply px-3 py-2 text-sm leading-4;
+
+    &.is-loading:after {
+      width: 16px;
+      height: 16px;
+    }
+  }
+
+  &--size-default {
+    @apply px-4 py-2 text-sm;
+  }
+
+  &--size-lg {
+    @apply px-4 py-2 text-base;
+  }
+
+  &--size-xl {
+    @apply border px-6 py-3 text-base;
+  }
+
+  &--variant-outlined {
+    @apply border bg-white;
+
+    &.uxf-button--color-default {
+      @apply border-primary-500 text-primary-700 hover:bg-primary-50 focus:ring-primary-500;
+    }
+
+    &.uxf-button--color-white {
+      @apply border-gray-300 text-gray-700 hover:bg-gray-50 focus:ring-gray-500;
+    }
+
+    &.uxf-button--color-success {
+      @apply border-success-500 text-success-700 hover:bg-success-50 focus:ring-success-500;
+    }
+
+    &.uxf-button--color-warning {
+      @apply border-warning-500 text-warning-700 hover:bg-warning-50 focus:ring-warning-500;
+    }
+
+    &.uxf-button--color-error {
+      @apply border-error-500 text-error-700 hover:bg-error-50 focus:ring-error-500;
+    }
+  }
+
+  &--variant-default {
+    @apply border-transparent text-white;
+
+    &.uxf-button--color-default {
+      @apply bg-primary-500 hover:bg-primary-600 focus:ring-primary-400;
+    }
+
+    &.uxf-button--color-white {
+      @apply bg-gray-50 text-gray-700 shadow-none hover:bg-gray-100 focus:ring-gray-500;
+    }
+
+    &.uxf-button--color-success {
+      @apply bg-success-500 hover:bg-success-600 focus:ring-success-400;
+    }
+
+    &.uxf-button--color-warning {
+      @apply bg-warning-500 hover:bg-warning-600 focus:ring-warning-400;
+    }
+
+    &.uxf-button--color-error {
+      @apply bg-error-500 hover:bg-error-600 focus:ring-error-400;
+    }
+  }
+}

package/css/checkbox-input.css

@@ -0,0 +1,4 @@
+.uxf-checkbox-input {
+    @apply bg-red-300;
+}
+

package/css/checkbox.css

@@ -0,0 +1,19 @@
+.uxf-checkbox {
+    @apply shrink-0 inline-flex items-center justify-center relative rounded-lg text-gray-300 h-6 w-6
+    bg-white transition outline-none
+    before:border before:absolute before:inset-0 before:rounded-lg before:border-current
+    is-selected:text-indigo-600 is-selected:before:border-transparent is-selected:bg-current
+    is-disabled:text-gray-300 is-selected:before:border-transparent
+    is-invalid:text-red-600 is-invalid:before:border-transparent
+    focus-visible:before:border-2 focus-visible:text-gray-800
+    is-selected:hover:text-indigo-900 is-selected:is-invalid:hover:text-red-800
+    is-selected:focus-visible:text-indigo-900
+    is-selected:focus-visible:ring-indigo-600 is-selected:focus-visible:ring-2
+    is-selected:is-invalid:focus-visible:text-red-800 is-selected:is-invalid:focus-visible:ring-red-600
+    is-selected:is-invalid:focus-visible:ring-2;
+
+    &__label {
+        @apply sr-only;
+    }
+}
+

package/css/combobox.css

@@ -0,0 +1,23 @@
+.uxf-combobox {
+    @apply relative;
+
+    &__button {
+        @apply items-center flex flex-row relative w-full cursor-default rounded-md border border-gray-300 bg-white
+        py-2 px-3 text-left shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1
+        focus:ring-indigo-500 sm:text-sm;
+
+        &.is-invalid {
+            @apply border-error-500 ring-error-500;
+        }
+    }
+
+    &__input {
+        @apply flex-grow focus:ring-0 focus:border-0 focus:outline-none;
+    }
+
+    &__button-icon {
+        &.is-open {
+            @apply rotate-180;
+        }
+    }
+}

package/css/component-structure-analyzer.css

@@ -0,0 +1,31 @@
+.uxf-component-structure-analyzer {
+  padding-bottom: 32px;
+
+  * {
+    padding: 32px !important;
+    border: 2px solid black !important;
+    position: relative !important;
+    color: lightgray !important;
+    background-color: white !important;
+    border-radius: initial !important;
+    margin: 4px !important;
+    font-family: monospace;
+    font-size: 12px;
+    min-width: 200px;
+    height: auto !important;
+    top: initial !important;
+    left: initial !important;
+    right: initial !important;
+
+    &::before {
+      position: absolute;
+      left: 4px;
+      top: 2px;
+      content: attr(class);
+      font-size: 12px;
+      line-height: 14px;
+      color: black;
+      font-weight: 500;
+    }
+  }
+}

package/css/dropdown.css

@@ -0,0 +1,11 @@
+.uxf-dropdown {
+    @apply absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm;
+
+    &__item {
+        @apply relative cursor-default select-none py-2 px-4;
+
+        &.is-active {
+            @apply bg-primary-500 text-white;
+        }
+    }
+}

package/css/error-message.css

@@ -0,0 +1,3 @@
+.uxf-error-message {
+    @apply block text-error-600 mt-1 text-right
+}

package/css/form-control.css

@@ -0,0 +1,7 @@
+.uxf-helper-text {
+    @apply mt-1 text-xs text-gray-500;
+
+    &.is-invalid {
+        @apply text-error-600;
+    }
+}

package/css/icon.css

@@ -0,0 +1,8 @@
+.uxf-icon {
+    @apply shrink-0 h-[length:var(--i-h)] w-[length:var(--i-w)];
+
+    & > use {
+        @apply pointer-events-none;
+    }
+}
+

package/css/input-basic.css

@@ -0,0 +1,18 @@
+.uxf-input {
+  @apply flex flex-row;
+}
+
+.uxf-input__wrapper {
+  @apply flex w-full flex-row;
+}
+
+.uxf-input__element {
+  @apply w-full;
+}
+
+.uxf-input__left-element,
+.uxf-input__right-element,
+.uxf-input__left-addon,
+.uxf-input__right-addon {
+  @apply flex flex-row items-center whitespace-nowrap;
+}

package/css/input.css

@@ -0,0 +1,98 @@
+.uxf-input {
+  @apply rounded-md shadow-sm sm:text-sm;
+
+  &__left-element,
+  &__right-element {
+    @apply text-gray-400;
+  }
+
+  &__left-element {
+    @apply mr-2;
+  }
+  &__right-element {
+    @apply ml-2;
+  }
+
+  &__left-addon,
+  &__right-addon {
+    @apply border border-gray-300 bg-gray-50 px-2 text-gray-500;
+  }
+
+  &__left-addon {
+    @apply rounded-l-md border-r-0;
+  }
+
+  &__right-addon {
+    @apply rounded-r-md border-l-0;
+  }
+
+  &__wrapper {
+    @apply h-10 rounded-md border border-gray-300 px-3;
+  }
+
+  &__element {
+    @apply bg-transparent outline-none;
+  }
+
+  &--has-right-addon {
+    .uxf-input__wrapper {
+      @apply rounded-r-none;
+    }
+  }
+
+  &--has-left-addon {
+    .uxf-input__wrapper {
+      @apply rounded-l-none;
+    }
+  }
+
+  &.is-focused {
+    .uxf-input__wrapper {
+      @apply border-primary-500 ring-1 ring-inset ring-primary-500 ring-offset-0;
+    }
+  }
+
+  &.is-disabled {
+    @apply cursor-not-allowed;
+
+    .uxf-input__element {
+      @apply cursor-not-allowed text-gray-500;
+    }
+    .uxf-input__wrapper {
+      @apply bg-gray-50;
+    }
+  }
+
+  &.is-readonly {
+    @apply cursor-not-allowed;
+
+    .uxf-input__element {
+      @apply cursor-not-allowed;
+    }
+
+    .uxf-input__wrapper {
+      @apply ring-0 border-gray-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

@@ -0,0 +1,7 @@
+.uxf-label {
+    @apply mb-1 block text-sm font-medium text-gray-700;
+
+    &.is-required::after {
+        content: " *";
+    }
+}

package/css/radio-group.css

@@ -0,0 +1,8 @@
+.uxf-radio-group {
+    @apply bg-red-300;
+
+    &__label {
+        @apply mb-2;
+    }
+}
+

package/css/radio.css

@@ -0,0 +1,20 @@
+.uxf-radio {
+    @apply h-4 w-4 border rounded-full border-gray-300 text-indigo-600;
+
+    &.is-selected,.is-readonly {
+        @apply border-primary-500 border-4;
+    }
+
+    &.is-invalid {
+        @apply border-error-500;
+    }
+
+    &.is-disabled {
+        @apply border-gray-200
+    }
+
+    &__inner {
+        @apply bg-current rounded-full h-3.5 w-3.5 opacity-0 is-selected:opacity-100;
+    }
+}
+

package/css/raster-image.css

@@ -0,0 +1,16 @@
+.uxf-raster-image {
+     @apply block w-full;
+
+    &__img {
+        @apply block w-full h-auto;
+
+        &--contain {
+            @apply absolute inset-0 h-full object-contain;
+        }
+
+        &--cover {
+            @apply absolute inset-0 h-full object-cover;
+        }
+    }
+}
+

package/css/select.css

@@ -0,0 +1,21 @@
+.uxf-select {
+    @apply relative;
+
+    &__button {
+        @apply h-10 items-center flex flex-row relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 px-3 text-left shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm;
+
+        &.is-invalid {
+            @apply border-error-500 ring-error-500;
+        }
+    }
+
+    &__button-text {
+        @apply flex-grow;
+    }
+
+    &__button-icon {
+        &.is-open {
+            @apply rotate-180;
+        }
+    }
+}

package/css/textarea.css

@@ -0,0 +1,56 @@
+.uxf-textarea {
+    &__wrapper {
+        @apply rounded-md shadow-sm sm:text-sm
+        border border-gray-300 p-2;
+    }
+
+    &__element {
+        @apply bg-transparent outline-none resize-none;
+    }
+
+    &.is-focused {
+        .uxf-textarea__wrapper {
+            @apply border-primary-500 ring-1 ring-inset ring-primary-500 ring-offset-0;
+        }
+    }
+
+    &.is-disabled {
+        @apply cursor-not-allowed;
+        .uxf-textarea__wrapper {
+            @apply bg-gray-50;
+        }
+
+        .uxf-textarea__element {
+            @apply cursor-not-allowed text-gray-500;
+        }
+    }
+
+    &.is-readonly {
+        @apply cursor-not-allowed;
+
+        .uxf-textarea__wrapper {
+            @apply ring-0 border-gray-300;
+        }
+
+        .uxf-textarea__element {
+            @apply cursor-not-allowed;
+        }
+    }
+
+    &.is-invalid {
+        &.is-focused {
+            .uxf-textarea__wrapper {
+                @apply ring-1 ring-inset ring-error-500 border-error-500 ring-offset-0;
+            }
+        }
+
+        .uxf-textarea__wrapper {
+            @apply border-error-500 placeholder-error-300;
+
+            .uxf-textarea__element {
+                @apply text-error-900 placeholder-error-300;
+            }
+        }
+    }
+}
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "1.0.0-beta.51",
+  "version": "1.0.0-beta.55",
   "description": "",
   "publishConfig": {
     "access": "public"