@uxf/ui 1.0.1 → 10.0.0-beta.11

package/css/checkbox.css

@@ -0,0 +1,120 @@
+.uxf-checkbox {
+    @apply relative shrink-0 flex items-center justify-center rounded transition outline-none border
+        focus-visible:before:border-2 focus-visible:before:absolute
+        focus-visible:before:inset-[-5px] focus-visible:before:rounded-lg;
+
+    &__inner {
+        @apply hidden;
+    }
+
+    &--size-default {
+        @apply h-4 w-4;
+
+        .uxf-checkbox__inner {
+            @apply w-2.5 h-2.5;
+        }
+    }
+
+    &--size-lg {
+        @apply h-6 w-6;
+
+        .uxf-checkbox__inner {
+            @apply w-4 h-4;
+        }
+    }
+
+    &.is-selected {
+        .uxf-checkbox__inner {
+            @apply block;
+        }
+    }
+
+    &.is-disabled,
+    &.is-readonly {
+        @apply pointer-events-none;
+    }
+
+    :root .light & {
+        @apply bg-white border-gray-400 focus-visible:before:border-primary;
+
+        &.is-selected {
+            @apply bg-primary border-transparent is-hoverable:bg-primary-700;
+
+            .uxf-checkbox__inner {
+                @apply text-white;
+            }
+        }
+
+        &.is-disabled {
+            @apply border-gray-200;
+
+            &.is-selected {
+                @apply bg-gray-200;
+            }
+
+            .uxf-checkbox__inner {
+                @apply text-gray-400;
+            }
+        }
+
+        &.is-readonly {
+            &.is-selected {
+                @apply bg-primary/60;
+            }
+        }
+
+        &.is-invalid {
+            @apply border-error;
+
+            &.is-selected {
+                @apply bg-error;
+            }
+
+            .uxf-checkbox__inner {
+                @apply text-white;
+            }
+        }
+    }
+
+    :root .dark & {
+        @apply bg-gray-900 border-gray-400 focus-visible:before:border-primary;
+
+        &.is-selected {
+            @apply bg-primary border-transparent is-hoverable:bg-primary-300;
+
+            .uxf-checkbox__inner {
+                @apply text-white;
+            }
+        }
+
+        &.is-disabled {
+            @apply border-gray-600;
+
+            &.is-selected {
+                @apply bg-gray-600;
+            }
+
+            .uxf-checkbox__inner {
+                @apply text-gray-800;
+            }
+        }
+
+        &.is-readonly {
+            &.is-selected {
+                @apply bg-primary/60;
+            }
+        }
+
+        &.is-invalid {
+            @apply border-error;
+
+            &.is-selected {
+                @apply bg-error;
+            }
+
+            .uxf-checkbox__inner {
+                @apply text-white;
+            }
+        }
+    }
+}

package/css/chip.css

@@ -0,0 +1,490 @@
+.uxf-chip {
+    --button-bg-color-hover: transparent;
+    --spacing-y:  calc((var(--h) - var(--button-size)) / 2);
+    --spacing-x: theme("spacing.2");
+
+    align-items: center;
+    background-color: var(--bg-color);
+    border-radius: theme("borderRadius.lg");
+    color: var(--color);
+    display: inline-flex;
+    height: var(--h);
+    max-width: 100%;
+    padding: 0 var(--spacing-x);
+
+    &.has-button {
+        padding-right: var(--spacing-y);
+    }
+
+    &--size-default {
+        --button-border-radius: var(--spacing-y);
+        --button-size: 16px;
+        --h: 24px;
+
+        @apply text-sm;
+    }
+
+    &--size-small {
+        --button-border-radius: 999px;
+        --button-size: 16px;
+        --h: 20px;
+
+        @apply text-xs;
+    }
+
+    &--size-large {
+        --button-border-radius: var(--spacing-y);
+        --button-size: 20px;
+        --h: 28px;
+
+        @apply text-base;
+    }
+
+    &__text {
+        @apply truncate;
+
+        letter-spacing: -0.02em;
+    }
+
+    &__button {
+        align-items: center;
+        border-radius: var(--button-border-radius);
+        display: inline-flex;
+        flex-shrink: 0;
+        height: var(--button-size);
+        justify-content: center;
+        margin-left: calc(var(--spacing-y) / 2);
+        text-align: center;
+        width: var(--button-size);
+
+        &-label {
+            @apply sr-only;
+        }
+
+        &-icon {
+            height: 8px;
+            width: 8px;
+        }
+
+        &:hover {
+            background-color: var(--button-bg-color-hover);
+            color: var(--button-color-hover);
+        }
+    }
+
+    &--variant-default {
+        --button-color-hover: var(--color);
+
+        &.uxf-chip--color-orange {
+            :root .light & {
+                --bg-color: theme("colors.orange.500");
+                --button-bg-color-hover: theme("colors.orange.700");
+                --color: theme("colors.white");
+            }
+
+            :root .dark & {
+                --bg-color: theme("colors.orange.700");
+                --button-bg-color-hover: theme("colors.orange.900");
+                --color: theme("colors.orange.100");
+            }
+        }
+
+        &.uxf-chip--color-red {
+            :root .light & {
+                --bg-color: theme("colors.red.500");
+                --button-bg-color-hover: theme("colors.red.700");
+                --color: theme("colors.white");
+            }
+
+            :root .dark & {
+                --bg-color: theme("colors.red.700");
+                --button-bg-color-hover: theme("colors.red.900");
+                --color: theme("colors.red.100");
+            }
+        }
+
+        &.uxf-chip--color-yellow {
+            :root .light & {
+                --bg-color: theme("colors.yellow.500");
+                --button-bg-color-hover: theme("colors.yellow.700");
+                --color: theme("colors.white");
+            }
+
+            :root .dark & {
+                --bg-color: theme("colors.yellow.700");
+                --button-bg-color-hover: theme("colors.yellow.900");
+                --color: theme("colors.yellow.100");
+            }
+        }
+
+        &.uxf-chip--color-pink {
+            :root .light & {
+                --bg-color: theme("colors.pink.500");
+                --button-bg-color-hover: theme("colors.pink.700");
+                --color: theme("colors.white");
+            }
+
+            :root .dark & {
+                --bg-color: theme("colors.pink.700");
+                --button-bg-color-hover: theme("colors.pink.900");
+                --color: theme("colors.pink.100");
+            }
+        }
+
+        &.uxf-chip--color-purple {
+            :root .light & {
+                --bg-color: theme("colors.purple.500");
+                --button-bg-color-hover: theme("colors.purple.700");
+                --color: theme("colors.white");
+            }
+
+            :root .dark & {
+                --bg-color: theme("colors.purple.700");
+                --button-bg-color-hover: theme("colors.purple.900");
+                --color: theme("colors.purple.100");
+            }
+        }
+
+        &.uxf-chip--color-indigo {
+            :root .light & {
+                --bg-color: theme("colors.indigo.500");
+                --button-bg-color-hover: theme("colors.indigo.700");
+                --color: theme("colors.white");
+            }
+
+            :root .dark & {
+                --bg-color: theme("colors.indigo.700");
+                --button-bg-color-hover: theme("colors.indigo.900");
+                --color: theme("colors.indigo.100");
+            }
+        }
+
+        &.uxf-chip--color-green {
+            :root .light & {
+                --bg-color: theme("colors.green.500");
+                --button-bg-color-hover: theme("colors.green.700");
+                --color: theme("colors.white");
+            }
+
+            :root .dark & {
+                --bg-color: theme("colors.green.700");
+                --button-bg-color-hover: theme("colors.green.900");
+                --color: theme("colors.green.100");
+            }
+        }
+
+        &.uxf-chip--color-blue {
+            :root .light & {
+                --bg-color: theme("colors.blue.500");
+                --button-bg-color-hover: theme("colors.blue.700");
+                --color: theme("colors.white");
+            }
+
+            :root .dark & {
+                --bg-color: theme("colors.blue.700");
+                --button-bg-color-hover: theme("colors.blue.900");
+                --color: theme("colors.blue.100");
+            }
+        }
+
+        &.uxf-chip--color-default {
+            :root .light & {
+                --bg-color: theme("colors.gray.500");
+                --button-bg-color-hover: theme("colors.gray.700");
+                --color: theme("colors.white");
+            }
+
+            :root .dark & {
+                --bg-color: theme("colors.gray.700");
+                --button-bg-color-hover: theme("colors.gray.900");
+                --color: theme("colors.gray.100");
+            }
+        }
+
+        &.uxf-chip--color-primary {
+            :root .light & {
+                --bg-color: theme("colors.primary.500");
+                --button-bg-color-hover: theme("colors.primary.700");
+                --color: theme("colors.white");
+            }
+
+            :root .dark & {
+                --bg-color: theme("colors.primary.700");
+                --button-bg-color-hover: theme("colors.primary.900");
+                --color: theme("colors.primary.100");
+            }
+        }
+    }
+
+    &--variant-medium {
+        --button-color-hover: var(--color);
+
+        &.uxf-chip--color-orange {
+            :root .light & {
+                --bg-color: theme("colors.orange.100");
+                --button-bg-color-hover: theme("colors.orange.300");
+                --color: theme("colors.orange.700");
+            }
+
+            :root .dark & {
+                --bg-color: theme("colors.orange.400");
+                --button-bg-color-hover: theme("colors.orange.500");
+                --color: theme("colors.lightHigh");
+            }
+        }
+
+        &.uxf-chip--color-red {
+            :root .light & {
+                --bg-color: theme("colors.red.100");
+                --button-bg-color-hover: theme("colors.red.300");
+                --color: theme("colors.red.700");
+            }
+
+            :root .dark & {
+                --bg-color: theme("colors.red.400");
+                --button-bg-color-hover: theme("colors.red.500");
+                --color: theme("colors.lightHigh");
+            }
+        }
+
+        &.uxf-chip--color-yellow {
+            :root .light & {
+                --bg-color: theme("colors.yellow.100");
+                --button-bg-color-hover: theme("colors.yellow.300");
+                --color: theme("colors.yellow.700");
+            }
+
+            :root .dark & {
+                --bg-color: theme("colors.yellow.400");
+                --button-bg-color-hover: theme("colors.yellow.500");
+                --color: theme("colors.lightHigh");
+            }
+        }
+
+        &.uxf-chip--color-pink {
+            :root .light & {
+                --bg-color: theme("colors.pink.100");
+                --button-bg-color-hover: theme("colors.pink.300");
+                --color: theme("colors.pink.700");
+            }
+
+            :root .dark & {
+                --bg-color: theme("colors.pink.400");
+                --button-bg-color-hover: theme("colors.pink.500");
+                --color: theme("colors.lightHigh");
+            }
+        }
+
+        &.uxf-chip--color-purple {
+            :root .light & {
+                --bg-color: theme("colors.purple.100");
+                --button-bg-color-hover: theme("colors.purple.300");
+                --color: theme("colors.purple.700");
+            }
+
+            :root .dark & {
+                --bg-color: theme("colors.purple.400");
+                --button-bg-color-hover: theme("colors.purple.500");
+                --color: theme("colors.lightHigh");
+            }
+        }
+
+        &.uxf-chip--color-indigo {
+            :root .light & {
+                --bg-color: theme("colors.indigo.100");
+                --button-bg-color-hover: theme("colors.indigo.300");
+                --color: theme("colors.indigo.700");
+            }
+
+            :root .dark & {
+                --bg-color: theme("colors.indigo.400");
+                --button-bg-color-hover: theme("colors.indigo.500");
+                --color: theme("colors.lightHigh");
+            }
+        }
+
+        &.uxf-chip--color-green {
+            :root .light & {
+                --bg-color: theme("colors.green.100");
+                --button-bg-color-hover: theme("colors.green.300");
+                --color: theme("colors.green.700");
+            }
+
+            :root .dark & {
+                --bg-color: theme("colors.green.400");
+                --button-bg-color-hover: theme("colors.green.500");
+                --color: theme("colors.lightHigh");
+            }
+        }
+
+        &.uxf-chip--color-blue {
+            :root .light & {
+                --bg-color: theme("colors.blue.100");
+                --button-bg-color-hover: theme("colors.blue.300");
+                --color: theme("colors.blue.700");
+            }
+
+            :root .dark & {
+                --bg-color: theme("colors.blue.400");
+                --button-bg-color-hover: theme("colors.blue.500");
+                --color: theme("colors.lightHigh");
+            }
+        }
+
+        &.uxf-chip--color-default {
+            :root .light & {
+                --bg-color: theme("colors.gray.100");
+                --button-bg-color-hover: theme("colors.gray.300");
+                --color: theme("colors.gray.700");
+            }
+
+            :root .dark & {
+                --bg-color: theme("colors.gray.400");
+                --button-bg-color-hover: theme("colors.gray.500");
+                --color: theme("colors.lightHigh");
+            }
+        }
+
+        &.uxf-chip--color-primary {
+            :root .light & {
+                --bg-color: theme("colors.primary.100");
+                --button-bg-color-hover: theme("colors.primary.200");
+                --color: theme("colors.primary.700");
+            }
+
+            :root .dark & {
+                --bg-color: theme("colors.primary.400");
+                --button-bg-color-hover: theme("colors.primary.500");
+                --color: theme("colors.lightHigh");
+            }
+        }
+    }
+
+    &--variant-low {
+        --bg-color: transparent;
+        --button-color-hover: var(--color);
+        --spacing-x: calc(theme("spacing.2") - 1px);
+
+        border: 1px solid var(--color);
+
+        &.uxf-chip--color-orange {
+            :root .light & {
+                --button-bg-color-hover: theme("colors.orange.200");
+                --color: theme("colors.orange.500");
+            }
+
+            :root .dark & {
+                --button-bg-color-hover: theme("colors.orange.900");
+                --color: theme("colors.orange.400");
+            }
+        }
+
+        &.uxf-chip--color-red {
+            :root .light & {
+                --button-bg-color-hover: theme("colors.red.200");
+                --color: theme("colors.red.500");
+            }
+
+            :root .dark & {
+                --button-bg-color-hover: theme("colors.red.900");
+                --color: theme("colors.red.400");
+            }
+        }
+
+        &.uxf-chip--color-yellow {
+            :root .light & {
+                --button-bg-color-hover: theme("colors.yellow.200");
+                --color: theme("colors.yellow.500");
+            }
+
+            :root .dark & {
+                --button-bg-color-hover: theme("colors.yellow.900");
+                --color: theme("colors.yellow.400");
+            }
+        }
+
+        &.uxf-chip--color-pink {
+            :root .light & {
+                --button-bg-color-hover: theme("colors.pink.200");
+                --color: theme("colors.pink.500");
+            }
+
+            :root .dark & {
+                --button-bg-color-hover: theme("colors.pink.900");
+                --color: theme("colors.pink.400");
+            }
+        }
+
+        &.uxf-chip--color-purple {
+            :root .light & {
+                --button-bg-color-hover: theme("colors.purple.200");
+                --color: theme("colors.purple.500");
+            }
+
+            :root .dark & {
+                --button-bg-color-hover: theme("colors.purple.900");
+                --color: theme("colors.purple.400");
+            }
+        }
+
+        &.uxf-chip--color-indigo {
+            :root .light & {
+                --button-bg-color-hover: theme("colors.indigo.200");
+                --color: theme("colors.indigo.500");
+            }
+
+            :root .dark & {
+                --button-bg-color-hover: theme("colors.indigo.900");
+                --color: theme("colors.indigo.400");
+            }
+        }
+
+        &.uxf-chip--color-green {
+            :root .light & {
+                --button-bg-color-hover: theme("colors.green.200");
+                --color: theme("colors.green.500");
+            }
+
+            :root .dark & {
+                --button-bg-color-hover: theme("colors.green.900");
+                --color: theme("colors.green.400");
+            }
+        }
+
+        &.uxf-chip--color-blue {
+            :root .light & {
+                --button-bg-color-hover: theme("colors.blue.200");
+                --color: theme("colors.blue.500");
+            }
+
+            :root .dark & {
+                --button-bg-color-hover: theme("colors.blue.900");
+                --color: theme("colors.blue.400");
+            }
+        }
+
+        &.uxf-chip--color-default {
+            :root .light & {
+                --button-bg-color-hover: theme("colors.gray.200");
+                --color: theme("colors.gray.500");
+            }
+
+            :root .dark & {
+                --button-bg-color-hover: theme("colors.gray.900");
+                --color: theme("colors.gray.400");
+            }
+        }
+
+        &.uxf-chip--color-primary {
+            :root .light & {
+                --button-bg-color-hover: theme("colors.primary.200");
+                --color: theme("colors.primary.500");
+            }
+
+            :root .dark & {
+                --button-bg-color-hover: theme("colors.primary.900");
+                --color: theme("colors.primary.400");
+            }
+        }
+    }
+}

package/css/color-radio-group.css

@@ -0,0 +1,21 @@
+.uxf-color-radio-group {
+    &__option {
+        @apply rounded-full outline-none focus-visible:ring-offset-2 focus-visible:ring-2 is-disabled:pointer-events-none;
+
+        :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;
+    }
+
+    &__options-wrapper {
+        @apply flex flex-wrap gap-3.5;
+    }
+}

package/css/color-radio.css

@@ -0,0 +1,33 @@
+.uxf-color-radio {
+    @apply relative shrink-0 inline-flex items-center justify-center rounded-full h-7 w-7 bg-[color:var(--bg-color)];
+
+    &__color-label {
+        @apply sr-only;
+    }
+
+    &__inner {
+        @apply w-4 h-4 text-white opacity-0 transition-opacity;
+    }
+
+    &__inner--dark {
+        @apply text-gray-900;
+    }
+
+    &.is-selected {
+        .uxf-color-radio__inner {
+            @apply opacity-100;
+        }
+    }
+
+    &.is-disabled {
+        @apply after:absolute after:inset-0 after:rounded-inherit pointer-events-none;
+
+        :root .light & {
+            @apply after:bg-white/50;
+        }
+
+        :root .dark & {
+            @apply after:bg-black/50;
+        }
+    }
+}

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;
+        }
+    }
+}