@redseed/redseed-ui-tailwindcss 5.3.0 → 5.3.2

package/components/form_field_radio_group.css

@@ -0,0 +1,44 @@
+.rsui-form-field-radio-group {
+    @apply w-full;
+}
+
+.rsui-form-field-radio-group__items {
+    @apply flex flex-wrap items-center gap-x-8 gap-y-2;
+}
+
+.rsui-form-field-radio-group__item {
+    @apply relative flex items-center gap-4 cursor-pointer;
+}
+
+.rsui-form-field-radio-group__item--disabled {
+    @apply opacity-40 cursor-not-allowed;
+}
+
+.rsui-form-field-radio-group__item-native-control {
+    @apply absolute opacity-0 pointer-events-none w-0 h-0;
+}
+
+.rsui-form-field-radio-group__control {
+    @apply shrink-0 size-6 border border-border-primary rounded-full bg-background-primary;
+}
+
+.rsui-form-field-radio-group__control--active {
+    @apply bg-primary-background border-primary-background flex items-center justify-center;
+}
+
+.rsui-form-field-radio-group__control--active div {
+    @apply size-3 bg-background-primary rounded-full;
+}
+
+.rsui-form-field-radio-group__item-label {
+    @apply font-normal cursor-pointer mb-0 text-text-primary;
+}
+
+.rsui-form-field-radio-group__item-label--disabled {
+    @apply cursor-not-allowed text-text-disabled;
+}
+
+/* Focus-visible on the native input should surface on the visual control */
+.rsui-form-field-radio-group__item:focus-within .rsui-form-field-radio-group__control {
+    @apply ring-2 ring-border-primary ring-offset-2;
+}

package/components/form_field_search.css

@@ -0,0 +1,12 @@
+.rsui-form-field-search__icon {
+    @apply size-5 text-text-secondary;
+}
+
+.rsui-form-field-search .rsui-form-field-text__prefix {
+    @apply pr-0;
+}
+
+.rsui-form-field-text__group--prefix input.rsui-form-field-search:not([type='checkbox']):not([type='radio']) {
+    @apply pl-10;
+}
+

package/components/form_field_select.css

@@ -0,0 +1,76 @@
+.enter-active-class {
+    @apply transition ease-out duration-200;
+}
+.enter-from-class {
+    @apply transform opacity-0 scale-95;
+}
+.enter-to-class {
+    @apply transform opacity-100 scale-100;
+}
+.leave-active-class {
+    @apply transition ease-in duration-75;
+}
+.leave-from-class {
+    @apply transform opacity-100 scale-100;
+}
+.leave-to-class {
+    @apply transform opacity-0 scale-95;
+}
+
+.rsui-form-field-select {
+    @apply relative;
+}
+.rsui-form-field-select__group {
+    @apply relative;
+}
+
+.rsui-form-field-select__options {
+    @apply hidden absolute top-0 w-full z-50;
+    @apply bg-background-primary p-2 mt-2 rounded-lg shadow-full-light;
+    @apply max-h-[80vh] sm:max-h-[60vh] overflow-y-auto;
+}
+.rsui-form-field-select__options--open {
+    @apply block;
+}
+
+.rsui-form-field-select__option {
+    @apply flex flex-nowrap items-center justify-between cursor-pointer px-4 py-3 rounded-lg;
+    @apply bg-background-primary hover:bg-background-secondary text-text-primary transition;
+}
+.rsui-form-field-select__option--disabled {
+    @apply opacity-50 hover:bg-background-primary cursor-auto;
+}
+.rsui-form-field-select__option-label {
+    @apply text-base truncate;
+}
+.rsui-form-field-select__option-icon {
+    @apply size-5;
+}
+.rsui-form-field-select__option svg {
+    @apply size-5;
+}
+
+.rsui-form-field-select__icon {
+    @apply absolute top-0 right-5 bottom-0 flex items-center justify-center;
+    @apply text-text-primary h-full w-8 pointer-events-none;
+}
+.rsui-form-field-select__icon--open svg {
+    @apply -rotate-180;
+}
+.rsui-form-field-select__icon svg {
+    @apply size-6 transform transition-transform;
+}
+
+.rsui-form-field-select select {
+    @apply block w-full border ring-0 bg-none cursor-pointer appearance-none transition;
+    @apply py-3 pl-5 pr-14 truncate;
+    @apply text-base rounded-lg outline-none focus:outline-none;
+    @apply bg-background-primary text-text-primary placeholder-text-secondary border-border-primary;
+    @apply focus:border-border-primary;
+    @apply invalid:border-border-error invalid:ring-0;
+    @apply disabled:text-text-disabled disabled:bg-background-disabled disabled:border-border-disabled disabled:ring-0 disabled:cursor-default;
+}
+
+.rsui-form-field-select option {
+    @apply hidden;
+}

package/components/form_field_slot.css

@@ -0,0 +1,32 @@
+.rsui-form-field-slot {
+    @apply flex flex-col gap-y-1 border-0 bg-transparent p-0;
+}
+
+.rsui-form-field-slot--compact {
+    @apply flex-row justify-between gap-x-2;
+}
+
+.rsui-form-field-slot--compact .rsui-form-field-slot__label {
+    @apply pt-3 whitespace-nowrap;
+}
+
+.rsui-form-field-slot__label--required {
+    @apply after:content-['*'] after:text-text-error after:ml-1;
+}
+
+.rsui-form-field-slot__label label {
+    @apply font-medium text-sm text-text-primary;
+}
+
+.rsui-form-field-slot__field {
+    @apply shrink-0 flex flex-col gap-y-1;
+}
+
+.rsui-form-field-slot__help {
+    @apply text-xs text-text-secondary;
+}
+
+.rsui-form-field-slot__error {
+    @apply text-sm text-text-error;
+}
+

package/components/form_field_suffix.css

@@ -0,0 +1,5 @@
+.rsui-form-field-suffix .rsui-form-field-text__suffix {
+    @apply border rounded-r-md;
+    @apply bg-background-secondary border-l-border-primary border-r-border-secondary;
+}
+

package/components/form_field_text.css

@@ -0,0 +1,37 @@
+.rsui-form-field-text {
+    @apply relative;
+}
+
+.rsui-form-field-text__group {
+    @apply relative flex flex-nowrap overflow-hidden;
+    @apply text-base transition;
+    @apply w-full border rounded-lg ring-0;
+    @apply bg-background-primary placeholder-text-secondary border-border-primary;
+    @apply has-[:focus]:border-border-primary;
+    @apply has-[:user-invalid]:border-border-error has-[:user-invalid]:ring-0;
+    @apply has-[:disabled]:text-text-disabled has-[:disabled]:bg-background-disabled has-[:disabled]:border-border-disabled has-[:disbaled]:ring-0;
+}
+
+.rsui-form-field-text__prefix,
+.rsui-form-field-text__suffix {
+    @apply flex items-center justify-center px-4 select-none bg-transparent;
+}
+
+.rsui-form-field-text input[type='date'],
+.rsui-form-field-text input[type='datetime-local'],
+.rsui-form-field-text input[type='email'],
+.rsui-form-field-text input[type='month'],
+.rsui-form-field-text input[type='number'],
+.rsui-form-field-text input[type='password'],
+.rsui-form-field-text input[type='search'],
+.rsui-form-field-text input[type='tel'],
+.rsui-form-field-text input[type='text'],
+.rsui-form-field-text input[type='time'],
+.rsui-form-field-text input[type='url'],
+.rsui-form-field-text input[type='week'] {
+    @apply flex-1;
+    @apply text-base text-text-primary transition py-3 px-4 outline-none focus:outline-none;
+    @apply bg-background-primary placeholder-text-secondary;
+    @apply disabled:text-text-disabled disabled:bg-background-disabled disabled:border-border-disabled disabled:ring-0;
+}
+

package/components/form_field_textarea.css

@@ -0,0 +1,19 @@
+.rsui-form-field-textarea {
+    @apply relative;
+}
+
+.rsui-form-field-textarea textarea {
+    @apply w-full border rounded-md ring-0 text-base transition resize-none;
+    @apply py-3 px-4 outline-none focus:outline-none;
+    @apply text-text-primary bg-background-primary placeholder-text-secondary border-border-primary;
+    @apply focus:border-border-primary;
+    @apply invalid:border-border-error invalid:ring-0;
+    @apply disabled:text-text-disabled disabled:bg-background-disabled disabled:border-border-disabled disabled:ring-0;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+}
+
+.rsui-form-field-textarea textarea::-webkit-scrollbar {
+    display: none;
+}
+

package/components/form_field_uploader.css

@@ -0,0 +1,51 @@
+.rsui-form-field-uploader__container {
+    @apply w-fit max-w-80 bg-background-secondary;
+    @apply relative select-none;
+    @apply rounded-md border border-border-primary border-dashed;
+    @apply flex flex-nowrap justify-center items-center gap-4;
+    @apply px-4 py-2.5;
+}
+
+.rsui-form-field-uploader__container--success {
+    @apply border-border-primary border-solid;
+}
+
+.rsui-form-field-uploader__content {
+    @apply relative flex flex-nowrap justify-center items-center gap-4;
+    @apply text-text-primary;
+}
+
+.rsui-form-field-uploader__state-icon {
+    @apply shrink-0 size-6;
+}
+.rsui-form-field-uploader__state-icon--success {
+    @apply text-text-secondary;
+}
+.rsui-form-field-uploader__state-icon svg {
+    @apply size-6 stroke-2;
+}
+
+.rsui-form-field-uploader__state-text {
+    @apply line-clamp-2;
+}
+
+.rsui-form-field-uploader__file-size {
+    @apply shrink-0 text-text-secondary;
+}
+
+.rsui-form-field-uploader__uploader {
+    @apply size-full absolute inset-0 z-1 cursor-pointer;
+}
+.rsui-form-field-uploader__uploader * {
+    @apply size-full cursor-pointer;
+}
+
+.rsui-form-field-uploader__action {
+    @apply shrink-0 size-6;
+}
+.rsui-form-field-uploader__action-icon {
+    @apply size-6 cursor-pointer text-text-secondary;
+}
+.rsui-form-field-uploader__action-icon svg {
+    @apply size-6 stroke-2;
+}

package/components/form_fields_login.css

@@ -0,0 +1,4 @@
+.rsui-form-login__signup {
+    @apply text-sm pt-4;
+}
+

package/components/form_fields_register.css

@@ -0,0 +1,4 @@
+.rsui-form-register__signin {
+    @apply text-sm pt-4;
+}
+

package/components/form_fieldset.css

@@ -0,0 +1,45 @@
+.rsui-form-fieldset legend {
+    @apply text-base text-text-primary font-semibold;
+}
+
+.rsui-form-fieldset__fields {
+    @apply mt-3 px-2;
+    @apply flex flex-col gap-3;
+}
+
+.rsui-form-fieldset__fields .rsui-form-field-slot label {
+    @apply font-normal;
+}
+
+.rsui-form-fieldset__fields .rsui-form-field-slot--compact label {
+    @apply text-sm;
+}
+
+.rsui-form-fieldset__fields .rsui-form-field-slot--compact .rsui-form-field-slot__label {
+    @apply pt-1.5;
+}
+
+.rsui-form-fieldset__fields .rsui-form-field-slot--compact input[type='date'],
+.rsui-form-fieldset__fields .rsui-form-field-slot--compact input[type='datetime-local'],
+.rsui-form-fieldset__fields .rsui-form-field-slot--compact input[type='email'],
+.rsui-form-fieldset__fields .rsui-form-field-slot--compact input[type='month'],
+.rsui-form-fieldset__fields .rsui-form-field-slot--compact input[type='number'],
+.rsui-form-fieldset__fields .rsui-form-field-slot--compact input[type='password'],
+.rsui-form-fieldset__fields .rsui-form-field-slot--compact input[type='search'],
+.rsui-form-fieldset__fields .rsui-form-field-slot--compact input[type='tel'],
+.rsui-form-fieldset__fields .rsui-form-field-slot--compact input[type='text'],
+.rsui-form-fieldset__fields .rsui-form-field-slot--compact input[type='time'],
+.rsui-form-fieldset__fields .rsui-form-field-slot--compact input[type='url'],
+.rsui-form-fieldset__fields .rsui-form-field-slot--compact input[type='week'] {
+    @apply py-1.5 px-2;
+}
+
+.rsui-form-fieldset__fields .rsui-form-field-slot--compact select {
+    @apply py-1.5 pl-3 pr-12 text-sm;
+}
+
+.rsui-form-fieldset__fields .rsui-form-field-select__icon { @apply right-2; }
+.rsui-form-fieldset__fields .rsui-form-field-select__icon svg { @apply size-5; }
+.rsui-form-fieldset__fields .rsui-form-field-select__option { @apply py-3 px-2; }
+.rsui-form-fieldset__fields .rsui-form-field-select__option-label { @apply text-sm; }
+

package/components/form_slot.css

@@ -0,0 +1,34 @@
+.rsui-form-slot {
+    @apply min-w-80 sm:min-w-96 sm:w-112;
+    @apply flex flex-col sm:justify-center items-center;
+    @apply text-base text-text-primary;
+}
+
+.rsui-form-slot__image {
+    @apply mb-8;
+}
+
+.rsui-form-slot__social-divider {
+    @apply w-full relative flex justify-center mb-2;
+}
+
+.rsui-form-slot__social-divider-line {
+    @apply after:content-[''] after:absolute after:top-1/2 after:left-0 after:bg-border-secondary after:h-px after:w-full;
+}
+
+.rsui-form-slot__social-divider-or {
+    @apply relative z-1 bg-background-primary px-6 text-text-primary;
+}
+
+.rsui-form-slot__content {
+    @apply w-full sm:max-w-md px-10 xs:px-12 md:px-16 py-10 bg-background-primary shadow-md overflow-hidden rounded-lg;
+}
+
+.rsui-form-slot__content > * {
+    @apply first:mt-0 mt-4;
+}
+
+.rsui-form-slot__content form > * {
+    @apply first:mt-0 mt-4;
+}
+

package/components/form_wrapper_build.css

@@ -0,0 +1,4 @@
+.rsui-form-wrapper-build__image {
+    @apply w-72 sm:w-80;
+}
+

package/components/form_wrapper_lms.css

@@ -0,0 +1,4 @@
+.rsui-form-wrapper-lms__image {
+    @apply w-72 sm:w-80;
+}
+

package/components/google_button.css

@@ -0,0 +1,91 @@
+.gsi-material-button {
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    -webkit-appearance: none;
+    @apply bg-background-primary border border-border-primary text-text-primary;
+    background-image: none;
+    -webkit-border-radius: 4px;
+    border-radius: 4px;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    cursor: pointer;
+    font-family: 'Roboto', arial, sans-serif;
+    font-size: 14px;
+    height: 40px;
+    letter-spacing: 0.25px;
+    outline: none;
+    overflow: hidden;
+    padding: 0 12px;
+    position: relative;
+    text-align: center;
+    -webkit-transition: background-color .218s, border-color .218s, box-shadow .218s;
+    transition: background-color .218s, border-color .218s, box-shadow .218s;
+    vertical-align: middle;
+    white-space: nowrap;
+    width: 100%;
+    max-width: 400px;
+    min-width: min-content;
+}
+
+.gsi-material-button .gsi-material-button-icon {
+    height: 20px;
+    margin-right: 12px;
+    min-width: 20px;
+    width: 20px;
+}
+
+.gsi-material-button .gsi-material-button-content-wrapper {
+    -webkit-align-items: center;
+    align-items: center;
+    display: flex;
+    -webkit-flex-direction: row;
+    flex-direction: row;
+    -webkit-flex-wrap: nowrap;
+    flex-wrap: nowrap;
+    height: 100%;
+    justify-content: space-between;
+    position: relative;
+    width: 100%;
+}
+
+.gsi-material-button .gsi-material-button-contents {
+    -webkit-flex-grow: 1;
+    flex-grow: 1;
+    font-family: 'Roboto', arial, sans-serif;
+    font-weight: 500;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: top;
+}
+
+.gsi-material-button .gsi-material-button-state {
+    -webkit-transition: opacity .218s;
+    transition: opacity .218s;
+    bottom: 0;
+    left: 0;
+    opacity: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+}
+
+.gsi-material-button:disabled {
+    cursor: default;
+    @apply bg-background-disabled border-border-disabled;
+}
+
+.gsi-material-button:disabled .gsi-material-button-contents { opacity: 38%; }
+.gsi-material-button:disabled .gsi-material-button-icon { opacity: 38%; }
+
+.gsi-material-button:not(:disabled):active .gsi-material-button-state,
+.gsi-material-button:not(:disabled):focus .gsi-material-button-state {
+    @apply bg-text-secondary;
+    opacity: 12%;
+}
+
+.gsi-material-button:not(:disabled):hover .gsi-material-button-state {
+    @apply bg-background-primary;
+    opacity: 8%;
+}
+

package/components/hero_section.css

@@ -0,0 +1,32 @@
+.rsui-hero-section {
+    @apply rounded-xl px-5 py-6 flex flex-col gap-4 md:gap-6 relative overflow-hidden bg-text-primary text-text-on-color;
+}
+
+.rsui-hero-section::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-size: auto;
+    background-position: right center;
+    background-repeat: no-repeat;
+    opacity: 1;
+    z-index: 0;
+}
+
+.rsui-hero-section > * {
+    position: relative;
+    z-index: 1;
+}
+
+.rsui-hero-section__cards {
+    @apply grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6;
+}
+
+.rsui-hero-section__cards--hidden {
+    @apply hidden;
+}
+
+.rsui-hero-section__content--hidden {
+    @apply hidden;
+}
+

package/components/image.css

@@ -0,0 +1,35 @@
+.rsui-image {
+    @apply w-full h-full flex items-center justify-center overflow-hidden;
+}
+
+.rsui-image--rounded {
+    @apply rounded-lg;
+}
+
+.rsui-image--error {
+    @apply bg-background-disabled;
+}
+
+.rsui-image--empty {
+    @apply bg-background-disabled;
+}
+
+.rsui-image__empty {
+    @apply flex items-center justify-center text-text-disabled;
+}
+
+.rsui-image__empty-icon {
+    @apply w-1/4;
+}
+
+.rsui-image__message {
+    @apply text-text-disabled text-sm;
+}
+
+.rsui-image picture {
+    @apply w-full h-full;
+}
+
+.rsui-image picture img {
+    @apply w-full h-full object-cover;
+}

package/components/image_16by9.css

@@ -0,0 +1,4 @@
+.rsui-image-16\/9 {
+    @apply aspect-video overflow-hidden;
+}
+

package/components/image_3by1.css

@@ -0,0 +1,4 @@
+.rsui-image-3\/1 {
+    @apply aspect-3/1 overflow-hidden;
+}
+

package/components/image_64by25.css

@@ -0,0 +1,4 @@
+.rsui-image-64\/25 {
+    @apply aspect-64/25 overflow-hidden;
+}
+

package/components/image_9by16.css

@@ -0,0 +1,4 @@
+.rsui-image-9\/16 {
+    @apply aspect-9/16 overflow-hidden;
+}
+

package/components/image_circle.css

@@ -0,0 +1,4 @@
+.rsui-image-circle {
+    @apply aspect-square rounded-full overflow-hidden;
+}
+

package/components/link_primary.css

@@ -0,0 +1,4 @@
+.rsui-link-primary {
+    @apply text-primary-background;
+}
+

package/components/link_slot.css

@@ -0,0 +1,47 @@
+.rsui-link-slot {
+    /* default shape and control */
+    @apply relative w-fit h-fit inline-flex shrink-0 items-center justify-center whitespace-nowrap will-change-transform;
+    @apply select-none outline-none cursor-pointer transition;
+
+    /* default text styles */
+    @apply font-medium text-text-primary gap-2;
+}
+
+.rsui-link-slot--disabled {
+    @apply opacity-30 cursor-default pointer-events-none;
+}
+
+.rsui-link-slot--sm {
+    @apply text-sm leading-5;
+}
+
+.rsui-link-slot--sm svg {
+    @apply size-5;
+}
+
+.rsui-link-slot--md {
+    @apply text-base leading-6;
+}
+
+.rsui-link-slot--md svg {
+    @apply size-6;
+}
+
+.rsui-link-slot--lg {
+    @apply text-lg leading-7;
+}
+
+.rsui-link-slot--lg svg {
+    @apply size-7;
+}
+
+.rsui-link-slot__label {
+    @apply relative inline-flex shrink-0 items-center justify-center whitespace-nowrap will-change-transform;
+    @apply after:content-[''] after:absolute after:inset-x-0 after:bottom-0;
+    @apply after:w-full after:h-px after:transition;
+    @apply after:bg-current after:opacity-30 hover:after:opacity-100;
+}
+
+.rsui-link-slot__label--disabled {
+    @apply after:opacity-0;
+}

package/components/linked_list.css

@@ -0,0 +1,8 @@
+.rsui-linked-list {
+    @apply list-none p-0 m-0;
+}
+
+.rsui-linked-list--active .rsui-linked-list-item--active::before {
+    @apply bg-current;
+}
+

package/components/linked_list_item.css

@@ -0,0 +1,41 @@
+.rsui-linked-list-item {
+    @apply pl-9 pr-3 pt-0 pb-2 relative text-text-disabled;
+}
+
+.rsui-linked-list-item::before {
+    @apply absolute top-1.5 left-[17px] h-full inline-block w-0.5 bg-current transition;
+    content: '';
+}
+
+.rsui-linked-list-item:last-child::before {
+    @apply hidden;
+}
+
+.rsui-linked-list-item--active {
+    @apply text-primary-background;
+}
+
+.rsui-linked-list-item--done {
+    @apply text-primary-background;
+}
+
+.rsui-linked-list-item__status {
+    @apply absolute top-1.5 left-3 size-3 border border-current bg-current rounded-full flex items-center justify-center transition;
+}
+
+.rsui-linked-list-item__active-icon svg,.rsui-linked-list-item__active-icon :is(svg) {
+    @apply size-2 text-text-on-color;
+}
+
+.rsui-linked-list-item__done-icon svg,.rsui-linked-list-item__done-icon :is(svg) {
+    @apply size-2 text-text-on-color;
+}
+
+.rsui-linked-list-item__title {
+    @apply font-semibold text-base text-text-primary leading-normal;
+}
+
+.rsui-linked-list-item__body {
+    @apply font-normal text-sm text-text-secondary leading-normal;
+}
+