@redseed/redseed-ui-tailwindcss 5.3.1 → 5.3.2

package/components/activity_feed.css

@@ -0,0 +1,8 @@
+.rsui-activity-feed {
+    @apply flex flex-col gap-8;
+}
+
+.rsui-activity-feed--line > *:not(:last-child) {
+    @apply after:absolute after:inset-x-0 after:-bottom-4 after:border-t after:border-border-primary;
+}
+

package/components/avatar_text.css

@@ -0,0 +1,3 @@
+.rsui-avatar-circle {
+    @apply w-full h-full rounded-full bg-background-secondary flex items-center justify-center text-text-secondary border border-border-primary font-semibold;
+}

package/components/badge.css

@@ -0,0 +1,33 @@
+.rsui-badge {
+    @apply inline-flex items-center justify-center gap-x-1;
+    @apply w-fit h-fit rounded-full;
+    @apply text-sm font-medium leading-4;
+}
+
+.rsui-badge--sm {
+    @apply px-2 py-1;
+}
+
+.rsui-badge--md {
+    @apply px-2 py-2;
+}
+
+.rsui-badge--secondary {
+    @apply text-text-secondary bg-background-secondary border border-border-secondary;
+}
+
+.rsui-badge--success {
+    @apply text-text-success bg-background-success border border-border-success;
+}
+
+.rsui-badge--warning {
+    @apply text-text-warning bg-background-warning border border-border-warning;
+}
+
+.rsui-badge--error {
+    @apply text-text-error bg-background-error border border-border-error;
+}
+
+.rsui-badge svg {
+    @apply size-4;
+}

package/components/badge_group.css

@@ -0,0 +1,19 @@
+.badge-group {
+    @apply pl-1 pr-3 gap-x-3;
+}
+
+.badge-group--badge-end {
+    @apply pl-3 pr-1;
+}
+
+.badge-group--no-text {
+    @apply px-1;
+}
+
+.badge-group--no-badge {
+    @apply px-2;
+}
+
+.badge-group--badge-end .badge-group__badge {
+    @apply order-last;
+}

package/components/body_text.css

@@ -0,0 +1,5 @@
+.rsui-body-text {
+    @apply text-base text-text-primary;
+    @apply *:text-base *:text-text-primary;
+}
+

package/components/breadcrumbs.css

@@ -0,0 +1,14 @@
+.rsui-breadcrumbs {
+    @apply flex flex-wrap items-center gap-x-2 gap-y-2;
+}
+
+.rsui-breadcrumbs__item {
+    @apply relative select-none pr-4 last:pr-0 last:after:hidden;
+    @apply text-sm text-text-disabled leading-6;
+    @apply after:absolute after:right-0.5 after:content-['\007C'];
+    @apply after:w-0.5 after:h-full after:text-text-disabled;
+}
+
+.rsui-breadcrumbs__item--action {
+    @apply cursor-pointer hover:text-text-primary transition-colors duration-200;
+}

package/components/button_card.css

@@ -0,0 +1,50 @@
+.rsui-button-card {
+    @apply hover:shadow-none hover:border-text-primary;
+}
+
+.rsui-button-card--disabled {
+    @apply hover:border-border-primary;
+    @apply focus-visible:ring-0;
+}
+
+.rsui-button-card__content {
+    @apply flex items-center p-2 gap-4;
+}
+
+.rsui-button-card__icon {
+    @apply size-12 flex shrink-0 items-center justify-center rounded-lg transition duration-200;
+    @apply border border-text-secondary text-text-secondary;
+}
+
+.rsui-button-card__icon svg {
+    @apply size-5;
+}
+
+.rsui-button-card__icon svg path {
+    @apply stroke-current;
+}
+
+.rsui-button-card__content-text {
+    @apply flex flex-col;
+}
+
+.rsui-button-card__title {
+    @apply text-text-primary font-semibold line-clamp-1;
+    @apply group-hover/button-card:text-text-primary;
+}
+
+.rsui-button-card__title--disabled {
+    @apply text-text-disabled;
+    @apply group-hover/button-card:text-text-disabled;
+}
+
+.rsui-button-card__supporting-text {
+    @apply text-sm text-text-secondary line-clamp-1;
+    @apply group-hover/button-card:text-text-primary;
+}
+
+.rsui-button-card__supporting-text--disabled {
+    @apply text-text-disabled;
+    @apply group-hover/button-card:text-text-disabled;
+}
+

package/components/button_group.css

@@ -0,0 +1,3 @@
+.rsui-button-group {
+    @apply whitespace-nowrap;
+}

package/components/button_group_item.css

@@ -0,0 +1,43 @@
+.rsui-button-group-item {
+    /* default control */
+    @apply inline-flex justify-center items-center select-none outline-none p-2 font-semibold text-sm transition;
+
+    /* default shape */
+    @apply first:rounded-l-md last:rounded-r-md first:border-l border-r border-y ring-0;
+
+    /* default colors */
+    @apply text-button-secondary bg-background-primary border-button-secondary;
+
+    /* default hover state */
+    @apply hover:text-button-secondary-hover hover:bg-background-primary hover:border-button-secondary-hover;
+
+    /* default focus state */
+    @apply focus-visible:ring-button-secondary focus-visible:border-button-secondary;
+
+    /* default active state */
+    @apply active:bg-background-primary active:border-button-secondary-active;
+
+    /* default disabled state */
+    @apply disabled:bg-button-disabled disabled:border-button-disabled disabled:text-text-primary;
+    @apply disabled:active:bg-button-disabled disabled:active:border-button-disabled;
+}
+
+.rsui-button-group-item--selected {
+    @apply bg-background-primary active:bg-background-primary cursor-default;
+}
+
+.rsui-button-group-item__label {
+    @apply gap-x-2 px-1 inline-flex items-center;
+}
+
+.rsui-button-group-item svg {
+    @apply size-5;
+}
+
+.rsui-button-group--sm .rsui-button-group-item {
+    @apply text-xs;
+}
+
+.rsui-button-group--sm .rsui-button-group-item svg {
+    @apply size-4;
+}

package/components/card.css

@@ -0,0 +1,62 @@
+.rsui-card {
+    @apply relative flex flex-col;
+    @apply transition duration-200;
+    @apply rounded-xl bg-background-primary border border-border-primary;
+}
+
+.rsui-card--hoverable {
+    @apply hover:shadow-md;
+}
+
+.rsui-card--clickable {
+    @apply cursor-pointer;
+}
+
+.rsui-card--clickable .rsui-card__image {
+    @apply pointer-events-none;
+}
+
+.rsui-card--clickable .rsui-card__content {
+    @apply pointer-events-none;
+}
+
+.rsui-card__action-layer {
+    @apply absolute inset-0 size-full bg-transparent rounded-xl transition;
+}
+
+.rsui-card__image {
+    @apply rounded-t-xl overflow-hidden;
+}
+
+.rsui-card__content {
+    @apply flex-1 flex flex-col relative gap-y-3;
+}
+
+.rsui-card__content--padded {
+    @apply py-5 px-4 sm:px-6 min-h-16;
+}
+
+.rsui-card__meta {
+    @apply max-w-full overflow-x-auto grid grid-cols-1 gap-x-6 gap-y-2;
+}
+
+.rsui-card--2xs .rsui-card__meta {
+    @apply grid-cols-2;
+}
+
+.rsui-card--xs .rsui-card__meta {
+    @apply grid-cols-2;
+}
+
+.rsui-card--sm .rsui-card__meta {
+    @apply grid-cols-2;
+}
+
+.rsui-card--md .rsui-card__meta {
+    @apply grid-cols-3;
+}
+
+.rsui-card--lg .rsui-card__meta {
+    @apply flex space-x-8;
+}
+

package/components/card_group.css

@@ -0,0 +1,46 @@
+.rsui-card-group__cards {
+    @apply grid gap-4 grid-cols-1;
+}
+
+.rsui-card-group--sm .rsui-card-group__cards {
+    @apply gap-4 grid-cols-2;
+}
+
+.rsui-card-group--md .rsui-card-group__cards,
+.rsui-card-group--lg .rsui-card-group__cards,
+.rsui-card-group--xl .rsui-card-group__cards {
+    @apply gap-4 grid-cols-3;
+}
+
+.rsui-card-group--2xl .rsui-card-group__cards,
+.rsui-card-group--3xl .rsui-card-group__cards {
+    @apply gap-4 grid-cols-5;
+}
+
+.rsui-card-group--compact .rsui-card-group__cards {
+    @apply gap-4 grid-cols-1;
+}
+
+.rsui-card-group--compact.rsui-card-group--xs .rsui-card-group__cards {
+    @apply gap-4 grid-cols-2;
+}
+
+.rsui-card-group--compact.rsui-card-group--sm .rsui-card-group__cards {
+    @apply gap-4 grid-cols-3;
+}
+
+.rsui-card-group--compact.rsui-card-group--md .rsui-card-group__cards,
+.rsui-card-group--compact.rsui-card-group--lg .rsui-card-group__cards,
+.rsui-card-group--compact.rsui-card-group--xl .rsui-card-group__cards {
+    @apply gap-4 grid-cols-4;
+}
+
+.rsui-card-group--compact.rsui-card-group--2xl .rsui-card-group__cards,
+.rsui-card-group--compact.rsui-card-group--3xl .rsui-card-group__cards {
+    @apply gap-4 grid-cols-6;
+}
+
+.rsui-card-group__pagination {
+    @apply w-full flex items-center justify-center mb-4;
+}
+

package/components/card_header.css

@@ -0,0 +1,64 @@
+.rsui-card-header {
+    @apply flex flex-col gap-x-3 gap-y-5 transition-all;
+    @apply md:flex-row md:justify-between md:items-center;
+    @apply py-4 px-4 sm:px-6;
+    @apply border-b border-transparent;
+}
+
+.rsui-card-header--divider {
+    @apply border-border-primary;
+}
+
+.rsui-card-header__header {
+    @apply flex-1 flex justify-between items-start gap-x-3;
+}
+
+.rsui-card-header__header--single-line {
+    @apply md:items-center;
+}
+
+.rsui-card-header__avatar {
+    @apply size-14 rounded-full overflow-hidden flex items-center justify-center bg-background-secondary;
+    @apply mt-2.5 md:mt-0;
+}
+
+.rsui-card-header__text {
+    @apply flex-1 flex flex-col gap-y-0.5 pt-2 md:pt-0;
+}
+
+.rsui-card-header__title-container {
+    @apply flex flex-wrap items-center gap-y-1 gap-x-2;
+}
+
+.rsui-card-header__title {
+    @apply text-lg leading-7 font-semibold text-text-primary;
+}
+
+.rsui-card-header__title--single-line {
+    @apply line-clamp-2 md:line-clamp-1;
+}
+
+.rsui-card-header__subtitle {
+    @apply text-sm leading-5 text-text-secondary;
+}
+
+.rsui-card-header__subtitle--single-line {
+    @apply line-clamp-3 md:line-clamp-1;
+}
+
+.rsui-card-header__toolbar {
+    @apply flex gap-3 md:items-center justify-end;
+}
+
+.rsui-card-header__actions-desktop {
+    @apply flex gap-3 items-center;
+}
+
+.rsui-card-header__actions-mobile {
+    @apply flex flex-wrap gap-3 items-center;
+}
+
+.rsui-card-header__more-actions-icon {
+    @apply size-5 text-text-secondary;
+}
+

package/components/disclosure.css

@@ -0,0 +1,16 @@
+.rsui-disclosure__trigger-icon {
+    @apply transition-all;
+}
+
+.rsui-disclosure__trigger-icon--open {
+    @apply -rotate-180;
+}
+
+.rsui-disclosure__content {
+    @apply transition-all min-h-0 h-0 overflow-hidden opacity-0;
+}
+
+.rsui-disclosure__content--open {
+    @apply overflow-visible opacity-100 h-auto;
+}
+

package/components/dropdown_menu.css

@@ -0,0 +1,42 @@
+.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-dropdown-menu {
+    @apply w-fit relative;
+}
+
+.rsui-dropdown-menu__overlay {
+    @apply fixed inset-0 z-40;
+}
+
+.rsui-dropdown-menu__container {
+    @apply hidden absolute z-50 mt-2 p-2 w-76 origin-top;
+    @apply rounded-md shadow-full-light bg-background-primary;
+    @apply flex flex-col space-y-2;
+}
+
+.rsui-dropdown-menu__container--open { @apply block; }
+.rsui-dropdown-menu__container--left { @apply origin-top-left left-0; }
+.rsui-dropdown-menu__container--right { @apply origin-top-right right-0; }
+

package/components/dropdown_option.css

@@ -0,0 +1,10 @@
+.rsui-dropdown-option {
+    @apply cursor-pointer p-4 bg-background-primary rounded-md text-base text-text-primary transition;
+    @apply w-full inline-flex items-center whitespace-nowrap will-change-transform gap-1.5;
+    @apply hover:bg-background-secondary;
+}
+
+.rsui-dropdown-option svg {
+    @apply size-6;
+}
+

package/components/empty.css

@@ -0,0 +1,28 @@
+.rsui-empty {
+    @apply w-full flex flex-col items-center justify-center gap-5;
+    @apply px-3 py-4 rounded-md text-text-primary;
+}
+
+.rsui-empty--wide .rsui-empty__image svg {
+    @apply size-14;
+}
+
+.rsui-empty__image {
+    @apply w-full flex items-center justify-center;
+}
+
+.rsui-empty__image svg {
+    @apply size-11;
+}
+
+.rsui-empty__title {
+    @apply text-lg font-semibold text-center;
+}
+
+.rsui-empty__description {
+    @apply text-sm text-center *:mb-2;
+}
+
+.rsui-empty__action {
+    @apply w-full flex flex-col items-center justify-center gap-4;
+}

package/components/feed_item.css

@@ -0,0 +1,39 @@
+.rsui-feed-item {
+    @apply relative flex flex-nowrap gap-3 border border-transparent rounded-lg;
+}
+
+.rsui-feed-item--clickable {
+    @apply cursor-pointer;
+}
+
+.rsui-feed-item--padded {
+    @apply p-2;
+}
+
+.rsui-feed-item__avatar {
+    @apply relative shrink-0 size-12 rounded-full flex items-center justify-center bg-background-disabled border border-border-secondary;
+}
+
+.rsui-feed-item__avatar > svg {
+    @apply size-7 text-text-secondary;
+}
+
+.rsui-feed-item__avatar-indicator {
+    @apply absolute -bottom-0.5 -right-0.5 flex items-center justify-center size-4;
+}
+
+.rsui-feed-item__avatar-indicator-dot {
+    @apply size-4 rounded-full bg-border-primary border-2 border-background-primary;
+}
+
+.rsui-feed-item__avatar-indicator-dot--online { @apply bg-text-success; }
+.rsui-feed-item__avatar-indicator-dot--busy { @apply bg-text-error; }
+
+.rsui-feed-item__body { @apply flex-1 flex flex-col gap-3; }
+.rsui-feed-item__header { @apply flex flex-col; }
+.rsui-feed-item__heading { @apply flex flex-wrap items-center gap-x-2; }
+.rsui-feed-item__heading-text { @apply shrink-0 text-sm font-medium text-text-primary; }
+.rsui-feed-item__heading-subtext { @apply text-xs text-text-secondary; }
+.rsui-feed-item__supporting-text { @apply text-sm font-medium text-text-secondary; }
+.rsui-feed-item__dot { @apply relative shrink-0; }
+

package/components/form_field_checkbox.css

@@ -0,0 +1,33 @@
+.rsui-form-field-checkbox__checkbox {
+    @apply flex;
+}
+
+.rsui-form-field-checkbox__label {
+    @apply ml-2 font-normal;
+}
+
+.rsui-form-field-checkbox__label--required {
+    @apply after:content-['*'] after:text-text-error;
+}
+
+.rsui-form-field-checkbox__check {
+    @apply size-6 shrink-0 relative bg-background-primary rounded-md cursor-pointer;
+    @apply has-[:disabled]:text-text-disabled has-[:disabled]:cursor-default;
+}
+
+.rsui-form-field-checkbox__check input[type="checkbox"] {
+    @apply appearance-none absolute inset-0 z-0 rounded-md transition focus:outline-none cursor-pointer;
+    @apply w-full h-full text-text-primary border border-border-secondary text-transparent bg-none;
+    @apply focus:ring focus:ring-border-primary focus:border-border-primary;
+    @apply invalid:border-border-error invalid:ring-0;
+    @apply disabled:text-text-disabled disabled:bg-background-disabled disabled:cursor-default;
+}
+
+.rsui-form-field-checkbox__check svg {
+    @apply size-full relative z-1;
+}
+
+.rsui-form-field-checkbox .rsui-form-field-slot__label::after {
+    @apply hidden;
+}
+

package/components/form_field_combobox.css

@@ -0,0 +1,98 @@
+.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-combobox {
+    @apply relative;
+}
+
+.rsui-form-field-combobox__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-[:disabled]:ring-0;
+}
+
+.rsui-form-field-combobox__prefix,
+.rsui-form-field-combobox__suffix {
+    @apply flex items-center justify-center px-4 select-none bg-transparent;
+}
+
+.rsui-form-field-combobox__placeholder {
+    @apply absolute inset-0 flex items-center px-4 pr-12 pointer-events-none;
+    @apply text-text-secondary select-none;
+}
+
+.rsui-form-field-combobox__icon {
+    @apply absolute top-0 right-3 bottom-0 flex items-center justify-center;
+    @apply text-text-primary h-full w-8 cursor-pointer;
+    @apply hover:text-text-secondary transition-colors;
+}
+
+.rsui-form-field-combobox__icon--open svg {
+    @apply -rotate-180;
+}
+.rsui-form-field-combobox__icon svg {
+    @apply size-5 transform transition-transform;
+}
+
+.rsui-form-field-combobox__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-combobox__options--open {
+    @apply block;
+}
+
+.rsui-form-field-combobox__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-combobox__option--disabled {
+    @apply opacity-50 hover:bg-background-primary cursor-auto;
+}
+.rsui-form-field-combobox__option--error {
+    @apply text-text-error;
+}
+.rsui-form-field-combobox__option--hint {
+    @apply text-text-secondary italic;
+}
+.rsui-form-field-combobox__option-label {
+    @apply text-base truncate;
+}
+.rsui-form-field-combobox__option-icon {
+    @apply size-5;
+}
+.rsui-form-field-combobox__option svg {
+    @apply size-5;
+}
+
+.rsui-form-field-combobox__spinner {
+    @apply size-4 border-2 border-border-primary border-t-text-secondary rounded-full animate-spin;
+}
+
+.rsui-form-field-combobox input[type='text'] {
+    @apply flex-1;
+    @apply text-base text-text-primary transition py-3 px-4 pr-12 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_password.css

@@ -0,0 +1,4 @@
+.rsui-form-field-password__icon {
+    @apply size-5 text-text-secondary;
+}
+

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