@redseed/redseed-ui-tailwindcss 5.3.0 → 5.3.2

package/components/list.css

@@ -0,0 +1,12 @@
+.rsui-list__items {
+    @apply mt-6;
+}
+
+.rsui-list__empty {
+    @apply mt-6;
+}
+
+.rsui-list__control-bottom {
+    @apply mt-3;
+}
+

package/components/list_control.css

@@ -0,0 +1,66 @@
+.rsui-list-control {
+    @apply flex flex-wrap justify-between gap-x-2 gap-y-3;
+}
+
+.rsui-list-control--sm .rsui-list-control__filters {
+    @apply w-full grid-cols-2;
+}
+
+.rsui-list-control--md .rsui-list-control__search {
+    @apply w-auto;
+}
+
+.rsui-list-control--md .rsui-list-control__filters {
+    @apply flex;
+}
+
+.rsui-list-control--md .rsui-list-control__filter {
+    @apply max-w-40 w-40;
+}
+
+.rsui-list-control--lg .rsui-list-control__search {
+    @apply w-auto;
+}
+
+.rsui-list-control--lg .rsui-list-control__filters {
+    @apply flex-1 grid-cols-4;
+}
+
+.rsui-list-control--xl .rsui-list-control__search,
+.rsui-list-control--2xl .rsui-list-control__search,
+.rsui-list-control--3xl .rsui-list-control__search {
+    @apply w-auto;
+}
+
+.rsui-list-control--xl .rsui-list-control__filters,
+.rsui-list-control--2xl .rsui-list-control__filters,
+.rsui-list-control--3xl .rsui-list-control__filters {
+    @apply grid-cols-4;
+}
+
+.rsui-list-control--xl .rsui-list-control__filter,
+.rsui-list-control--2xl .rsui-list-control__filter,
+.rsui-list-control--3xl .rsui-list-control__filter {
+    @apply max-w-52;
+}
+
+.rsui-list-control__search {
+    @apply w-full;
+}
+
+.rsui-list-control__filters {
+    @apply grid gap-2;
+}
+
+.rsui-list-control__sort {
+    @apply max-h-10 flex items-center;
+}
+
+.rsui-list-control__pagination {
+    @apply w-full flex items-center justify-center;
+}
+
+.rsui-list-control__pagination--inline {
+    @apply w-1/2 mx-auto;
+}
+

package/components/list_item.css

@@ -0,0 +1,72 @@
+.rsui-list-item {
+    @apply relative flex flex-col rounded-md p-3 overflow-hidden;
+}
+
+.rsui-list-item--clickable {
+    @apply cursor-pointer;
+}
+
+.rsui-list-item--avatar {
+    @apply pl-12 lg:pl-16 *:pl-2 *:lg:pl-1;
+}
+
+.rsui-list-item--wide .rsui-list-item__status {
+    @apply w-auto order-none;
+}
+
+.rsui-list-item__header {
+    @apply relative z-1 flex flex-wrap items-center gap-2 pointer-events-none;
+}
+
+.rsui-list-item__bg {
+    @apply absolute inset-0 bg-background-primary transition;
+    @apply hover:bg-border-secondary peer-hover:bg-border-secondary;
+}
+
+.rsui-list-item__bg--clickable {
+    @apply active:bg-border-secondary;
+}
+
+.rsui-list-item__body {
+    @apply relative z-1 pointer-events-none;
+}
+
+.rsui-list-item__avatar {
+    @apply absolute top-0 ml-1 -left-10 lg:-left-14;
+    @apply aspect-square overflow-hidden size-9 lg:size-12;
+}
+
+.rsui-list-item__avatar-placeholder {
+    @apply size-full rounded-full overflow-hidden bg-background-disabled;
+    @apply flex items-center justify-center;
+}
+
+.rsui-list-item__avatar-placeholder svg {
+    @apply size-5 lg:size-6 fill-border-primary;
+}
+
+.rsui-list-item__title {
+    @apply flex-1 inline-flex items-center text-base font-semibold;
+    @apply h-9 leading-5 lg:h-12 lg:leading-6;
+}
+
+.rsui-list-item__title span {
+    @apply line-clamp-2;
+}
+
+.rsui-list-item__status {
+    @apply inline-flex items-center w-full order-last;
+}
+
+.rsui-list-item__action {
+    @apply pointer-events-auto;
+}
+
+.rsui-list-item__meta {
+    @apply mt-2 flex flex-wrap gap-x-4 gap-y-2;
+}
+
+.rsui-list-item__description {
+    @apply line-clamp-2 mt-2 text-base;
+}
+

package/components/loader.css

@@ -0,0 +1,20 @@
+.rsui-loader {
+    @apply max-w-24 max-h-24 min-w-3 min-h-3 transition;
+}
+
+.rsui-loader path {
+    @apply fill-text-primary;
+}
+
+.rsui-loader--primary path {
+    @apply fill-primary-background;
+}
+
+.rsui-loader--secondary path {
+    @apply fill-text-secondary;
+}
+
+.rsui-loader--white path {
+    @apply fill-background-primary;
+}
+

package/components/logo.css

@@ -0,0 +1,4 @@
+.rsui-logo {
+    @apply align-middle;
+}
+

package/components/message_box.css

@@ -0,0 +1,40 @@
+.rsui-message-box {
+    @apply border rounded-lg overflow-hidden p-4;
+}
+
+.rsui-message-box--default {
+    @apply bg-background-primary border-border-primary text-text-primary;
+}
+
+.rsui-message-box--info {
+    @apply bg-background-info border-border-info text-text-primary;
+}
+
+.rsui-message-box--success {
+    @apply bg-background-success border-border-success text-text-primary;
+}
+
+.rsui-message-box--warning {
+    @apply bg-background-warning border-border-warning text-text-primary;
+}
+
+.rsui-message-box--error {
+    @apply bg-background-error border-border-error text-text-primary;
+}
+
+.rsui-message-box__head {
+    @apply flex justify-between items-center;
+}
+
+.rsui-message-box__close {
+    @apply size-10;
+}
+
+.rsui-message-box__close-icon {
+    @apply size-10 cursor-pointer rounded-lg flex items-center justify-center hover:bg-border-secondary transition duration-200;
+}
+
+.rsui-message-box__close-icon svg {
+    @apply size-6 text-text-disabled;
+}
+

package/components/meta_info.css

@@ -0,0 +1,27 @@
+.rsui-meta-info {
+    @apply flex flex-col space-y-1;
+}
+
+.rsui-meta-info__top {
+    @apply flex space-x-1 items-center;
+}
+
+.rsui-meta-info__label-icon {
+    @apply size-4;
+}
+
+.rsui-meta-info__label {
+    @apply font-semibold text-sm text-text-primary leading-4;
+}
+
+.rsui-meta-info__help {
+    @apply text-text-secondary size-4 cursor-pointer;
+}
+
+.rsui-meta-info__help svg {
+    @apply size-full;
+}
+
+.rsui-meta-info__value {
+    @apply text-xs text-text-secondary leading-5;
+}

package/components/metric_card.css

@@ -0,0 +1,28 @@
+.rsui-metric-card {
+    @apply w-64 sm:w-96;
+}
+
+.rsui-metric-card__header {
+    @apply flex items-center justify-between;
+}
+
+.rsui-metric-card__avatar {
+    @apply size-14 rounded-full overflow-hidden flex items-center justify-center pointer-events-auto;
+}
+
+.rsui-metric-card__icon {
+    @apply text-text-primary transition-transform pointer-events-auto cursor-pointer size-6;
+}
+
+.rsui-metric-card__content {
+    @apply flex flex-col gap-2;
+}
+
+.rsui-metric-card__title {
+    @apply text-sm font-normal text-text-secondary mt-4;
+}
+
+.rsui-metric-card__value {
+    @apply text-3xl font-semibold text-text-primary leading-9;
+}
+

package/components/modal.css

@@ -0,0 +1,75 @@
+.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-modal {
+    @apply fixed inset-0 overflow-y-auto px-4 py-6 md:px-0 z-50;
+}
+
+.rsui-modal__background-wrapper {
+    @apply fixed inset-0 transform transition-all backdrop-blur-sm bg-text-primary bg-opacity-70;
+}
+
+.rsui-modal__background {
+    @apply absolute inset-0 bg-transparent opacity-100;
+}
+
+.rsui-modal__content {
+    @apply relative max-h-full inset-0 overflow-scroll overscroll-contain transform transition-all;
+    @apply border rounded-lg shadow-full md:w-full md:mx-auto mx-4;
+    @apply bg-background-primary border-border-secondary;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+}
+
+.rsui-modal__content::-webkit-scrollbar {
+    display: none;
+}
+
+.rsui-modal__content--sm { @apply sm:max-w-sm xs:mx-4 sm:mx-auto; }
+.rsui-modal__content--md { @apply sm:max-w-lg sm:mx-auto; }
+.rsui-modal__content--lg { @apply sm:max-w-2xl; }
+.rsui-modal__content--top { @apply top-0; }
+.rsui-modal__content--center { @apply top-1/2 -translate-y-1/2; }
+.rsui-modal__content--bottom { @apply bottom-0; }
+
+.rsui-modal__header {
+    @apply sticky top-0 z-1 p-4 bg-border-secondary shrink-0 text-lg font-semibold;
+}
+
+.rsui-modal__body {
+    @apply p-4 bg-background-primary relative overflow-scroll overscroll-contain z-0;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+}
+
+.rsui-modal__body::-webkit-scrollbar {
+    display: none;
+}
+
+.rsui-modal__footer {
+    @apply sticky inset-x-0 bottom-0 z-1 p-4 bg-border-secondary shrink-0 flex justify-end items-center space-x-2;
+}
+
+.rsui-modal__footer--start { @apply justify-start; }
+

package/components/page_header.css

@@ -0,0 +1,54 @@
+.rsui-page-header {
+    @apply w-full flex justify-between space-y-4;
+    @apply lg:flex-col;
+}
+
+.rsui-page-header__top {
+    @apply w-full flex flex-col items-start space-y-2 flex-wrap;
+    @apply lg:flex-row lg:space-y-0 lg:items-center;
+}
+
+.rsui-page-header__title {
+    @apply pr-2 flex flex-row items-center space-x-6;
+}
+
+.rsui-page-header__title h1 {
+    @apply text-3xl font-semibold text-text-primary lg:mr-4;
+}
+
+.rsui-page-header__subtitle {
+    @apply text-base text-text-secondary leading-relaxed;
+}
+
+.rsui-page-header__status-actions {
+    @apply flex-1 flex space-x-2 items-center justify-between lg:pr-2;
+}
+
+.rsui-page-header__actions {
+    @apply flex-1 flex space-x-2 items-center justify-end;
+}
+
+.rsui-page-header__meta-action {
+    @apply flex lg:hidden;
+}
+
+.rsui-page-header__search {
+    @apply w-full pt-2 lg:pt-0 lg:w-auto;
+}
+
+.rsui-page-header__meta-modal {
+    @apply lg:hidden;
+}
+
+.rsui-page-header__meta-modal__body {
+    @apply flex flex-col space-y-4;
+}
+
+.rsui-page-header__meta {
+    @apply hidden lg:flex space-x-8;
+}
+
+.rsui-page-header__avatar {
+    @apply size-12 mr-3;
+}
+

package/components/pagination.css

@@ -0,0 +1,28 @@
+.rsui-pagination {
+    @apply flex flex-nowrap items-center w-fit border border-border-secondary rounded-full p-1 bg-background-primary divide-x;
+}
+
+.rsui-pagination__previous {
+    @apply size-full flex items-center pr-1;
+}
+
+.rsui-pagination__items {
+    @apply size-full flex items-center px-1;
+}
+
+.rsui-pagination__items-group {
+    @apply size-full flex items-center;
+}
+
+.rsui-pagination__next {
+    @apply size-full flex items-center pl-1;
+}
+
+.rsui-pagination-parent {
+    @apply flex flex-col items-center;
+}
+
+.rsui-pagination-parent__record-count {
+    @apply size-full flex items-center justify-center;
+}
+

package/components/pagination_item.css

@@ -0,0 +1,18 @@
+.rsui-pagination-item {
+    @apply inline-flex items-center justify-center overflow-hidden select-none;
+    @apply min-w-9 w-fit h-7 p-1 rounded-md cursor-pointer transition;
+    @apply bg-background-primary hover:bg-background-secondary text-text-secondary text-sm;
+}
+
+.rsui-pagination-item--active {
+    @apply bg-background-secondary hover:bg-background-secondary text-text-primary cursor-default;
+}
+
+.rsui-pagination-item--freeze {
+    @apply bg-background-primary hover:bg-background-primary cursor-default;
+}
+
+.rsui-pagination-item--disabled {
+    @apply bg-background-primary hover:bg-background-primary text-text-disabled cursor-default;
+}
+

package/components/pagination_item_collapsed.css

@@ -0,0 +1,4 @@
+.rsui-pagination-item-collapsed svg {
+    @apply size-4;
+}
+

package/components/pagination_item_next.css

@@ -0,0 +1,8 @@
+.rsui-pagination-item-next {
+    @apply rounded-r-3xl;
+}
+
+.rsui-pagination-item-next svg {
+    @apply size-5;
+}
+

package/components/pagination_item_previous.css

@@ -0,0 +1,8 @@
+.rsui-pagination-item-previous {
+    @apply rounded-l-3xl;
+}
+
+.rsui-pagination-item-previous svg {
+    @apply size-5;
+}
+

package/components/progress_circle.css

@@ -0,0 +1,16 @@
+.rsui-progress-circle {
+    @apply relative m-0 p-0 bg-background-primary rounded-full before:hidden after:hidden;
+}
+
+.rsui-progress-circle--sm { @apply size-16 text-xs; }
+.rsui-progress-circle--md { @apply size-20 text-sm; }
+.rsui-progress-circle--lg { @apply size-24 text-base; }
+
+.rsui-progress-circle svg { @apply w-full h-full -rotate-90 transition-all; }
+.rsui-progress-circle svg circle { stroke-linecap: round; }
+
+.rsui-progress-circle__background-circle { @apply stroke-border-primary stroke-4 fill-none transition-all; }
+.rsui-progress-circle__progress-circle { @apply stroke-primary-background stroke-4 fill-none transition-all duration-0; }
+
+.rsui-progress-circle__content { @apply absolute inset-0 w-full h-full flex items-center justify-center; }
+

package/components/progress_tracker.css

@@ -0,0 +1,4 @@
+.rsui-progress-tracker {
+    @apply grid grid-flow-col auto-cols-fr gap-8 sm:gap-16 text-xs sm:text-xl font-medium;
+}
+

package/components/progress_tracker_step.css

@@ -0,0 +1,36 @@
+.rsui-progress-tracker-step {
+    @apply relative flex flex-col items-center text-center gap-3 sm:gap-4;
+}
+
+.rsui-progress-tracker-step::after {
+    content: '';
+    @apply absolute bg-border-primary top-3.5 sm:top-6 -left-4 sm:-left-8 -translate-x-1/2;
+    @apply w-[100%] xs:w-[140%] sm:w-[140%] lg:w-[120%] 3xl:w-[107%] h-1;
+}
+
+.rsui-progress-tracker-step:first-child::after {
+    @apply hidden;
+}
+
+.rsui-progress-tracker-step--active::after,
+.rsui-progress-tracker-step--completed::after {
+    @apply bg-primary-background;
+}
+
+.rsui-progress-tracker-step--clickable {
+    @apply cursor-pointer;
+}
+
+.rsui-progress-tracker-step__indicator {
+    @apply relative z-1 size-8 sm:size-13 rounded-full border-2 overflow-hidden select-none;
+    @apply bg-border-primary border-border-primary text-text-on-color flex items-center justify-center;
+}
+
+.rsui-progress-tracker-step__indicator--completed {
+    @apply bg-primary-background border-primary-background text-primary-foreground;
+}
+
+.rsui-progress-tracker-step__indicator--active {
+    @apply bg-primary-foreground border-primary-background text-primary-background;
+}
+

package/components/radio_card.css

@@ -0,0 +1,83 @@
+.rsui-radio-card {
+    @apply max-w-80 w-80 bg-background-primary border border-border-secondary rounded-md shadow-sm outline-none select-none;
+    @apply relative cursor-pointer transition-all flex flex-col gap-3 p-4;
+    @apply focus-visible:ring-4 focus-visible:ring-border-primary;
+}
+
+.rsui-radio-card--flexible { @apply max-w-full w-full; }
+
+.rsui-radio-card--selected {
+    @apply focus-visible:ring-0 border-primary-background;
+}
+
+.rsui-radio-card--selected::after {
+    content: '';
+    @apply absolute inset-0 rounded-md opacity-10 bg-primary-background;
+}
+
+.rsui-radio-card--disabled {
+    @apply focus-visible:ring-0 border-border-secondary cursor-default;
+}
+
+.rsui-radio-card--disabled::after {
+    content: '';
+    @apply absolute inset-0 rounded-md opacity-65 bg-border-secondary;
+}
+
+.rsui-radio-card__title-row {
+    @apply relative text-base font-medium text-text-primary line-clamp-2 min-h-6 pr-8;
+}
+
+/* Radio glyph positioning and base */
+.rsui-radio-card__title-row::after {
+    content: '';
+    @apply absolute top-0 right-0 size-6 rounded-full transition-all border border-border-primary bg-background-primary;
+}
+
+/* Hover/focus state on glyph via group */
+.group\/radio-card .rsui-radio-card__title-row::after {
+    /* no-op baseline to enable group variants */
+}
+
+.group-hover\/radio-card .rsui-radio-card__title-row::after,
+.group-focus-visible\/radio-card .rsui-radio-card__title-row::after {
+    @apply border-text-secondary;
+}
+
+.rsui-radio-card__title-row--selected::after {
+    @apply border-6 border-primary-background;
+}
+
+.group-hover\/radio-card .rsui-radio-card__title-row--selected::after,
+.group-focus-visible\/radio-card .rsui-radio-card__title-row--selected::after {
+    @apply border-primary-background;
+}
+
+.rsui-radio-card__title-row--disabled::after {
+    @apply opacity-0;
+}
+
+.rsui-radio-card__title-row--selected-disabled::after {
+    @apply border-6 border-background-primary bg-border-primary;
+}
+
+.group-hover\/radio-card .rsui-radio-card__title-row--selected-disabled::after,
+.group-focus-visible\/radio-card .rsui-radio-card__title-row--selected-disabled::after {
+    @apply border-background-primary;
+}
+
+.rsui-radio-card__title {
+    @apply flex-1 text-base font-semibold text-text-primary;
+}
+
+.rsui-radio-card__content-row {
+    @apply text-sm font-normal text-text-secondary;
+}
+
+.rsui-radio-card__meta-row {
+    @apply grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-2;
+}
+
+.rsui-radio-card__action-row {
+    @apply flex flex-wrap gap-2;
+}

package/components/read_more.css

@@ -0,0 +1,8 @@
+.rsui-read-more__content {
+    @apply transition-all overflow-hidden;
+}
+
+.rsui-read-more__link {
+    @apply mt-4;
+}
+

package/components/record_count.css

@@ -0,0 +1,4 @@
+.record-count {
+    @apply my-2 text-sm text-text-secondary;
+}
+

package/components/section.css

@@ -0,0 +1,28 @@
+.rsui-section {
+    @apply border border-solid rounded-xl p-6;
+}
+
+.rsui-section--primary {
+    @apply bg-background-primary border-border-primary text-text-primary;
+}
+
+.rsui-section--secondary {
+    @apply bg-background-secondary border-border-secondary text-text-primary;
+}
+
+.rsui-section--brand {
+    @apply bg-background-brand border-border-brand text-text-primary;
+}
+
+.rsui-section--success {
+    @apply bg-background-success border-border-success text-text-primary;
+}
+
+.rsui-section--warning {
+    @apply bg-background-warning border-border-warning text-text-primary;
+}
+
+.rsui-section--error {
+    @apply bg-background-error border-border-error text-text-primary;
+}
+

package/components/section_footer.css

@@ -0,0 +1,18 @@
+.rsui-section-footer {
+    @apply flex flex-col gap-3 overflow-hidden;
+    @apply md:flex-row md:justify-between md:items-center;
+    @apply border-t border-border-primary py-5;
+}
+
+.rsui-section-footer__content-start {
+    @apply flex-1 flex flex-wrap items-center gap-3;
+}
+
+.rsui-section-footer__content-end {
+    @apply flex flex-wrap justify-end items-center gap-3;
+}
+
+.rsui-section-footer__content-end--full {
+    @apply flex-1;
+}
+