jaci-ui 0.4.0 → 0.5.0

package/dist/styles.css

@@ -3448,6 +3448,142 @@
       width: 1px;
 }
 
+    .jaci-data-toolbar__root {
+      gap: var(--jaci-spacing-2);
+      align-items: center;
+      display: flex;
+      flex-wrap: wrap;
+      min-width: var(--jaci-sizes-0);
+      width: 100%;
+}
+
+    .jaci-data-toolbar__search {
+      border-color: var(--jaci-colors-border-default);
+      border-radius: var(--jaci-radii-lg);
+      border-style: solid;
+      border-width: 1px;
+      flex: 1 1 14rem;
+      outline: var(--jaci-borders-none);
+      padding-inline: var(--jaci-spacing-3);
+      padding-block: var(--jaci-spacing-2);
+      background-color: var(--jaci-colors-surface-raised);
+      box-sizing: border-box;
+      color: var(--jaci-colors-fg-default);
+      min-height: var(--jaci-sizes-10);
+      min-width: 10rem;
+}
+
+    .jaci-data-toolbar__search:is(:focus-visible, [data-focus-visible]) {
+      border-color: var(--jaci-colors-accent-default);
+      outline: 2px solid;
+      outline-color: var(--jaci-colors-focus);
+      outline-offset: 1px;
+}
+
+    .jaci-data-toolbar__filters {
+      gap: var(--jaci-spacing-2);
+      align-items: center;
+      display: flex;
+      flex-wrap: wrap;
+      min-width: var(--jaci-sizes-0);
+}
+
+    .jaci-data-toolbar__sort {
+      border-color: var(--jaci-colors-border-default);
+      border-radius: var(--jaci-radii-lg);
+      border-style: solid;
+      border-width: 1px;
+      outline: var(--jaci-borders-none);
+      padding-inline: var(--jaci-spacing-3);
+      padding-block: var(--jaci-spacing-2);
+      background-color: var(--jaci-colors-surface-raised);
+      color: var(--jaci-colors-fg-default);
+      max-width: 100%;
+      min-height: var(--jaci-sizes-10);
+      min-width: 9rem;
+}
+
+    .jaci-data-toolbar__sort:is(:focus-visible, [data-focus-visible]) {
+      border-color: var(--jaci-colors-accent-default);
+      outline: 2px solid;
+      outline-color: var(--jaci-colors-focus);
+      outline-offset: 1px;
+}
+
+    .jaci-data-toolbar__selection {
+      gap: var(--jaci-spacing-2);
+      align-items: center;
+      display: inline-flex;
+      flex-wrap: wrap;
+      min-width: var(--jaci-sizes-0);
+}
+
+    .jaci-data-toolbar__clearSelection {
+      border: 0;
+      border-radius: var(--jaci-radii-md);
+      padding-inline: var(--jaci-spacing-2);
+      align-items: center;
+      background-color: var(--jaci-colors-transparent);
+      color: var(--jaci-colors-accent-default);
+      cursor: pointer;
+      display: inline-flex;
+      font-size: var(--jaci-font-sizes-sm);
+      min-height: var(--jaci-sizes-8);
+}
+
+    .jaci-data-toolbar__clearSelection:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+      cursor: not-allowed;
+      opacity: 0.5;
+}
+
+    .jaci-data-toolbar__clearSelection:is(:focus-visible, [data-focus-visible]) {
+      outline: 2px solid;
+      outline-color: var(--jaci-colors-focus);
+      outline-offset: 1px;
+}
+
+    .jaci-data-toolbar__clearSelection:is(:hover, [data-hover]) {
+      background-color: var(--jaci-colors-surface-subtle);
+}
+
+    .jaci-data-toolbar__actions {
+      gap: var(--jaci-spacing-2);
+      align-items: center;
+      display: inline-flex;
+      flex-wrap: wrap;
+      margin-inline-start: auto;
+}
+
+    .jaci-data-toolbar__clear {
+      border: 0;
+      border-radius: var(--jaci-radii-md);
+      padding-inline: var(--jaci-spacing-2);
+      align-items: center;
+      background-color: var(--jaci-colors-transparent);
+      color: var(--jaci-colors-fg-muted);
+      cursor: pointer;
+      display: inline-flex;
+      min-height: var(--jaci-sizes-8);
+}
+
+    .jaci-data-toolbar__clear:is(:focus-visible, [data-focus-visible]) {
+      outline: 2px solid;
+      outline-color: var(--jaci-colors-focus);
+      outline-offset: 1px;
+}
+
+    .jaci-data-toolbar__clear:is(:hover, [data-hover]) {
+      background-color: var(--jaci-colors-surface-subtle);
+      color: var(--jaci-colors-fg-default);
+}
+
+    .jaci-data-toolbar__separator {
+      background-color: var(--jaci-colors-border-default);
+      flex-shrink: 0;
+      height: var(--jaci-sizes-6);
+      width: 1px;
+}
+
     .jaci-data-view__root {
       gap: var(--jaci-spacing-4);
       color: var(--jaci-colors-fg-default);
@@ -3477,10 +3613,18 @@
 
     .jaci-data-view__toolbar {
       gap: var(--jaci-spacing-3);
+      justify-content: space-between;
+}
+
+    .jaci-data-view__toolbar,.jaci-data-view__filters {
       align-items: center;
       display: flex;
       flex-wrap: wrap;
-      justify-content: space-between;
+}
+
+    .jaci-data-view__filters {
+      gap: var(--jaci-spacing-2);
+      min-width: var(--jaci-sizes-0);
 }
 
     .jaci-data-view__content {
@@ -3488,6 +3632,19 @@
       width: 100%;
 }
 
+    .jaci-data-view__footer {
+      gap: var(--jaci-spacing-3);
+      align-items: center;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+}
+
+    .jaci-data-view__pagination {
+      min-width: var(--jaci-sizes-0);
+      width: 100%;
+}
+
     .jaci-data-view__loading,.jaci-data-view__empty {
       padding: var(--jaci-spacing-8);
       align-items: center;
@@ -6604,6 +6761,12 @@
       font-weight: 600;
 }
 
+    .jaci-table__description {
+      margin-block: var(--jaci-spacing-2);
+      color: var(--jaci-colors-fg-muted);
+      font-size: var(--jaci-font-sizes-sm);
+}
+
     .jaci-table__header {
       background-color: var(--jaci-colors-surface-default);
 }
@@ -6645,6 +6808,22 @@
       white-space: nowrap;
 }
 
+    .jaci-table__head[data-align=start] {
+      text-align: left;
+}
+
+    .jaci-table__head[data-align=center] {
+      text-align: center;
+}
+
+    .jaci-table__head[data-align=end] {
+      text-align: right;
+}
+
+    .jaci-table__head[data-hide-below=sm],.jaci-table__head[data-hide-below=md],.jaci-table__head[data-hide-below=lg] {
+      display: none;
+}
+
     .jaci-table__sortButton {
       background: var(--jaci-colors-transparent);
       border: 0;
@@ -6676,6 +6855,22 @@
       vertical-align: middle;
 }
 
+    .jaci-table__cell[data-align=start] {
+      text-align: left;
+}
+
+    .jaci-table__cell[data-align=center] {
+      text-align: center;
+}
+
+    .jaci-table__cell[data-align=end] {
+      text-align: right;
+}
+
+    .jaci-table__cell[data-hide-below=sm],.jaci-table__cell[data-hide-below=md],.jaci-table__cell[data-hide-below=lg] {
+      display: none;
+}
+
     .jaci-table__selection {
       padding-inline: var(--jaci-spacing-3);
       text-align: center;
@@ -7599,6 +7794,19 @@
       min-width: var(--jaci-sizes-0);
 }
 
+    .jaci-tree-view__loading,.jaci-tree-view__empty {
+      color: var(--jaci-colors-fg-muted);
+}
+
+    .jaci-tree-view__loading,.jaci-tree-view__empty,.jaci-tree-view__error {
+      padding: var(--jaci-spacing-2);
+      font-size: var(--jaci-font-sizes-sm);
+}
+
+    .jaci-tree-view__error {
+      color: var(--jaci-colors-danger);
+}
+
     .jaci-upload__root {
       gap: var(--jaci-spacing-3);
       width: 100%;
@@ -7901,6 +8109,9 @@
 }
       .jaci-navbar__drawer {
         width: 66.666667%;
+}
+      .jaci-table__head[data-hide-below=sm],.jaci-table__cell[data-hide-below=sm] {
+        display: table-cell;
 }
 }
 
@@ -7967,6 +8178,9 @@
         font-size: var(--jaci-font-sizes-md);
         min-height: var(--jaci-sizes-10);
         min-width: var(--jaci-sizes-10);
+}
+      .jaci-table__head[data-hide-below=md],.jaci-table__cell[data-hide-below=md] {
+        display: table-cell;
 }
       .jaci-toast__viewport {
         bottom: var(--jaci-spacing-6);
@@ -8003,6 +8217,9 @@
 }
       .jaci-bottomNavigation__root {
         border-radius: var(--jaci-radii-2xl);
+}
+      .jaci-table__head[data-hide-below=lg],.jaci-table__cell[data-hide-below=lg] {
+        display: table-cell;
 }
 }
 }
@@ -8229,6 +8446,11 @@
     border-bottom: 0;
 }
 
+  .jaci-list__item--density_compact {
+    padding-block: var(--jaci-spacing-2);
+    padding-inline: var(--jaci-spacing-3);
+}
+
   .jaci-list__item--variant_divided {
     border-radius: 0;
     border-bottom-color: var(--jaci-colors-border-default);
@@ -8369,6 +8591,16 @@
     grid-template-columns: repeat(1, minmax(0, 1fr));
 }
 
+  .jaci-pagination__link--density_compact {
+    padding-inline: var(--jaci-spacing-2);
+    font-size: var(--jaci-font-sizes-sm);
+}
+
+  .jaci-pagination__link--density_compact,.jaci-pagination__ellipsis--density_compact {
+    min-height: var(--jaci-sizes-8);
+    min-width: var(--jaci-sizes-8);
+}
+
   .jaci-pagination__link--active_true {
     border-color: var(--jaci-colors-accent-default);
     background-color: var(--jaci-colors-accent-default);
@@ -8744,4 +8976,8 @@
   .jaci-flex-d_horizontal {
     flex-direction: horizontal;
 }
+
+  .jaci-page_1 {
+    page: 1px;
+}
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jaci-ui",
   "description": "Accessible, themeable React components by Jaci UI",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "license": "MIT",
   "author": {
     "name": "Richard Borges",