@redseed/redseed-ui-tailwindcss 5.3.0 → 5.3.2

package/components/section_header.css

@@ -0,0 +1,41 @@
+.rsui-section-header {
+    @apply flex flex-col gap-x-3 gap-y-5 transition-all;
+    @apply md:flex-row md:justify-between md:items-center;
+}
+
+.rsui-section-header__header {
+    @apply flex-1 flex justify-between items-start gap-x-3;
+}
+
+.rsui-section-header__icon {
+    @apply size-10;
+}
+
+.rsui-section-header__text {
+    @apply flex-1 flex flex-col gap-y-0.5 pt-2 md:pt-1.5;
+}
+
+.rsui-section-header__title {
+    @apply text-lg leading-7 font-semibold line-clamp-2 md:line-clamp-1 text-text-primary;
+}
+
+.rsui-section-header__subtitle {
+    @apply text-sm leading-5 line-clamp-3 md:line-clamp-1 text-text-secondary;
+}
+
+.rsui-section-header__toolbar {
+    @apply flex gap-3 md:items-center justify-end;
+}
+
+.rsui-section-header__actions-desktop {
+    @apply flex gap-3 items-center;
+}
+
+.rsui-section-header__actions-mobile {
+    @apply flex flex-wrap gap-3 items-center justify-end;
+}
+
+.rsui-section-header__more-actions-icon {
+    @apply size-5 text-text-secondary;
+}
+

package/components/single_column_layout.css

@@ -0,0 +1,4 @@
+.rsui-single-column-layout {
+    @apply w-full max-w-3xl;
+}
+

package/components/sorting.css

@@ -0,0 +1,17 @@
+.rsui-sorting {
+    @apply flex items-center justify-between;
+    @apply w-fit text-text-primary;
+}
+
+.rsui-sorting--primary {
+    @apply text-primary-foreground;
+}
+
+.rsui-sorting__icon {
+    @apply size-4 transition;
+}
+
+.rsui-sorting__icon--desc {
+    @apply transform rotate-180;
+}
+

package/components/switcher.css

@@ -0,0 +1,17 @@
+.rsui-switcher {
+    @apply w-fit flex flex-col sm:flex-row sm:items-center overflow-hidden;
+    @apply bg-background-disabled p-1 rounded-lg;
+}
+
+.rsui-switcher--full {
+    @apply w-full;
+}
+
+.rsui-switcher--full .rsui-switcher-item {
+    @apply flex-1;
+}
+
+.rsui-switcher .rsui-switcher-item {
+    @apply w-full sm:w-fit;
+}
+

package/components/switcher_item.css

@@ -0,0 +1,14 @@
+.rsui-switcher-item {
+    @apply h-fit inline-flex shrink-0 items-center justify-center select-none outline-none whitespace-nowrap will-change-transform cursor-pointer;
+    @apply font-semibold gap-2 rounded-md border border-transparent transition;
+    @apply text-base px-3 py-2;
+}
+
+.rsui-switcher-item--active {
+    @apply bg-background-primary text-text-primary border-border-secondary;
+}
+
+.rsui-switcher-item svg {
+    @apply size-6;
+}
+

package/components/table.css

@@ -0,0 +1,32 @@
+.rsui-table {
+    @apply w-full;
+}
+
+.rsui-table--auto table {
+    @apply table-auto;
+}
+
+.rsui-table--fixed table {
+    @apply table-fixed;
+}
+
+.rsui-table table {
+    @apply w-full border-collapse;
+}
+
+.rsui-table table thead tr:last-child {
+    @apply border-b-border-primary;
+}
+
+.rsui-table table thead th {
+    @apply bg-background-disabled font-semibold text-xs leading-6 text-text-secondary hover:text-text-primary;
+}
+
+.rsui-table__container {
+    @apply w-full overflow-x-scroll;
+}
+
+.rsui-table__footer {
+    @apply w-full border-t border-border-primary overflow-hidden py-3 px-6;
+}
+

package/components/td.css

@@ -0,0 +1,21 @@
+.rsui-td {
+    @apply text-left;
+    @apply py-3 px-5 text-sm leading-6 text-text-secondary;
+}
+
+.rsui-td--center {
+    @apply text-center;
+}
+
+.rsui-td--right {
+    @apply text-right;
+}
+
+.rsui-td--auto {
+    @apply whitespace-nowrap;
+}
+
+.rsui-td--fixed {
+    @apply whitespace-normal overflow-scroll overscroll-contain;
+}
+

package/components/td_user.css

@@ -0,0 +1,21 @@
+.rsui-td-user {
+    @apply flex items-center gap-3;
+}
+
+.rsui-td-user__avatar {
+    @apply flex items-center justify-center size-10 rounded-full overflow-hidden shrink-0;
+    @apply text-text-secondary border border-border-secondary bg-background-disabled;
+}
+
+.rsui-td-user__avatar-icon {
+    @apply size-6;
+}
+
+.rsui-td-user__content {
+    @apply flex flex-col text-text-primary;
+}
+
+.rsui-td-user__supporting-text {
+    @apply text-text-secondary;
+}
+

package/components/th.css

@@ -0,0 +1,68 @@
+.rsui-th {
+    @apply text-left;
+    @apply py-3 px-5 text-sm leading-6 text-text-secondary;
+}
+
+.rsui-th--center {
+    @apply text-center;
+}
+
+.rsui-th--right {
+    @apply text-right;
+}
+
+.rsui-th--auto {
+    @apply whitespace-nowrap;
+}
+
+.rsui-th--fixed {
+    @apply whitespace-normal break-words;
+}
+
+.rsui-th--2xs {
+    @apply w-28;
+}
+
+.rsui-th--xs {
+    @apply w-32;
+}
+
+.rsui-th--sm {
+    @apply w-40;
+}
+
+.rsui-th--md {
+    @apply w-52;
+}
+
+.rsui-th--lg {
+    @apply w-64;
+}
+
+.rsui-th--xl {
+    @apply w-80;
+}
+
+.rsui-th--2xl {
+    @apply w-96;
+}
+
+.rsui-th--sortable {
+    @apply cursor-pointer;
+}
+
+.rsui-th__content {
+    @apply inline-flex gap-1 items-center;
+}
+
+.rsui-th__sort {
+    @apply shrink-0;
+}
+
+.rsui-th__sort-icon {
+    @apply size-3.5 transition-all;
+}
+
+.rsui-th__sort-icon--desc {
+    @apply rotate-180;
+}

package/components/toggle.css

@@ -0,0 +1,36 @@
+.rsui-toggle {
+    @apply flex flex-col space-y-2 border-0 bg-transparent p-0;
+}
+
+.rsui-toggle--disabled label {
+    @apply text-text-disabled;
+}
+
+.rsui-toggle--disabled input {
+    @apply cursor-not-allowed;
+}
+
+.rsui-toggle__control {
+    @apply justify-between flex items-center space-x-8;
+}
+
+.rsui-toggle label {
+    @apply whitespace-nowrap select-none cursor-pointer;
+}
+
+.rsui-toggle input {
+    @apply appearance-none shrink-0 w-[2.6rem] h-6 px-1 bg-text-secondary border-transparent text-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 ring-0 flex items-center;
+    @apply focus:ring-0 focus:ring-transparent focus:checked:border-primary-background;
+    @apply checked:bg-none checked:bg-primary-background checked:text-primary-foreground checked:border-primary-background checked:before:bg-primary-foreground checked:before:translate-x-full;
+    @apply disabled:opacity-20 disabled:pointer-events-none;
+    @apply before:inline-block before:size-4 before:bg-background-primary before:translate-x-0 before:rounded-full before:shadow before:transform before:ring-0 before:transition before:ease-in-out before:duration-200;
+}
+
+.rsui-toggle__help {
+    @apply w-full text-xs;
+}
+
+.rsui-toggle__error {
+    @apply text-sm text-text-error;
+}
+

package/components/tr.css

@@ -0,0 +1,10 @@
+.rsui-tr {
+    @apply transition-all;
+    @apply border-b border-border-primary rounded-lg;
+    @apply last:border-b-transparent;
+}
+
+.rsui-tr--clickable {
+    @apply cursor-pointer hover:bg-background-disabled;
+}
+

package/components/two_column_layout.css

@@ -0,0 +1,16 @@
+.rsui-two-column-layout {
+    @apply flex flex-col sm:flex-row gap-6 sm:gap-8;
+}
+
+.rsui-two-column-layout--left-aside {
+    @apply flex-col-reverse lg:flex-row-reverse;
+}
+
+.rsui-two-column-layout__main {
+    @apply flex-1 min-w-0 overflow-x-auto;
+}
+
+.rsui-two-column-layout__aside {
+    @apply shrink-0 lg:w-72 xl:w-100;
+}
+

package/index.css

@@ -4,3 +4,84 @@
 @import './components/button_primary.css';
 @import './components/button_secondary.css';
 @import './components/button_tertiary.css';
+@import './components/avatar_text.css';
+@import './components/button_card.css';
+@import './components/badge.css';
+@import './components/badge_group.css';
+@import './components/breadcrumbs.css';
+@import './components/card.css';
+@import './components/card_header.css';
+@import './components/card_group.css';
+@import './components/disclosure.css';
+@import './components/form_field_checkbox.css';
+@import './components/form_field_password.css';
+@import './components/form_field_radio_group.css';
+@import './components/form_field_search.css';
+@import './components/form_field_select.css';
+@import './components/form_fieldset.css';
+@import './components/form_field_slot.css';
+@import './components/form_field_suffix.css';
+@import './components/form_field_text.css';
+@import './components/form_field_textarea.css';
+@import './components/form_field_uploader.css';
+@import './components/form_field_combobox.css';
+@import './components/form_fields_login.css';
+@import './components/form_fields_register.css';
+@import './components/form_slot.css';
+@import './components/form_wrapper_build.css';
+@import './components/form_wrapper_lms.css';
+@import './components/button_group.css';
+@import './components/button_group_item.css';
+@import './components/body_text.css';
+@import './components/dropdown_menu.css';
+@import './components/dropdown_option.css';
+@import './components/empty.css';
+@import './components/link_primary.css';
+@import './components/link_slot.css';
+@import './components/google_button.css';
+@import './components/logo.css';
+@import './components/image.css';
+@import './components/image_16by9.css';
+@import './components/image_3by1.css';
+@import './components/image_64by25.css';
+@import './components/image_9by16.css';
+@import './components/image_circle.css';
+@import './components/hero_section.css';
+@import './components/list_control.css';
+@import './components/list.css';
+@import './components/list_item.css';
+@import './components/loader.css';
+@import './components/metric_card.css';
+@import './components/meta_info.css';
+@import './components/message_box.css';
+@import './components/activity_feed.css';
+@import './components/feed_item.css';
+@import './components/linked_list.css';
+@import './components/linked_list_item.css';
+@import './components/modal.css';
+@import './components/pagination.css';
+@import './components/page_header.css';
+@import './components/radio_card.css';
+@import './components/pagination_item.css';
+@import './components/pagination_item_collapsed.css';
+@import './components/pagination_item_next.css';
+@import './components/pagination_item_previous.css';
+@import './components/read_more.css';
+@import './components/record_count.css';
+@import './components/progress_tracker.css';
+@import './components/progress_tracker_step.css';
+@import './components/progress_circle.css';
+@import './components/section_footer.css';
+@import './components/section_header.css';
+@import './components/section.css';
+@import './components/switcher.css';
+@import './components/switcher_item.css';
+@import './components/toggle.css';
+@import './components/sorting.css';
+@import './components/td.css';
+@import './components/td_user.css';
+@import './components/th.css';
+@import './components/single_column_layout.css';
+@import './components/two_column_layout.css';
+@import './components/tr.css';
+@import './components/table.css';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redseed/redseed-ui-tailwindcss",
-  "version": "5.3.0",
+  "version": "5.3.2",
   "description": "RedSeed UI Tailwindcss",
   "main": "index.js",
   "repository": "https://github.com/redseedtraining/redseed-ui",