jaci-ui 0.3.0 → 0.5.0

package/dist/styles.css

@@ -1951,6 +1951,185 @@
       max-width: 100%;
 }
 
+    .jaci-calendar__root {
+      gap: var(--jaci-spacing-3);
+      color: var(--jaci-colors-fg-default);
+      display: flex;
+      flex-direction: column;
+      min-width: 18rem;
+      width: 100%;
+}
+
+    .jaci-calendar__header {
+      gap: var(--jaci-spacing-2);
+      align-items: center;
+      display: flex;
+      justify-content: space-between;
+}
+
+    .jaci-calendar__caption {
+      flex: 1 1 0%;
+      font-size: var(--jaci-font-sizes-sm);
+      font-weight: 700;
+      text-align: center;
+      text-transform: capitalize;
+}
+
+    .jaci-calendar__navigation {
+      border: 0;
+      border-radius: var(--jaci-radii-md);
+      align-items: center;
+      background-color: var(--jaci-colors-transparent);
+      color: var(--jaci-colors-fg-default);
+      cursor: pointer;
+      display: inline-flex;
+      font-size: var(--jaci-font-sizes-lg);
+      justify-content: center;
+      height: var(--jaci-sizes-8);
+      width: var(--jaci-sizes-8);
+}
+
+    .jaci-calendar__navigation:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+      cursor: not-allowed;
+      opacity: 0.45;
+}
+
+    .jaci-calendar__navigation:is(:focus-visible, [data-focus-visible]) {
+      outline: 2px solid;
+      outline-color: var(--jaci-colors-focus);
+      outline-offset: 2px;
+}
+
+    .jaci-calendar__navigation:is(:hover, [data-hover]) {
+      background-color: var(--jaci-colors-surface-subtle);
+}
+
+    .jaci-calendar__monthSelect {
+      border-color: var(--jaci-colors-border-default);
+      border-radius: var(--jaci-radii-md);
+      border-style: solid;
+      border-width: 1px;
+      outline: var(--jaci-borders-none);
+      padding-inline: var(--jaci-spacing-2);
+      padding-block: var(--jaci-spacing-1);
+      background-color: var(--jaci-colors-surface-default);
+      color: var(--jaci-colors-fg-default);
+      font-size: var(--jaci-font-sizes-sm);
+      font-weight: 600;
+      max-width: 10rem;
+      min-width: var(--jaci-sizes-0);
+}
+
+    .jaci-calendar__monthSelect: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-calendar__yearSelect {
+      border-color: var(--jaci-colors-border-default);
+      border-radius: var(--jaci-radii-md);
+      border-style: solid;
+      border-width: 1px;
+      outline: var(--jaci-borders-none);
+      padding-inline: var(--jaci-spacing-2);
+      padding-block: var(--jaci-spacing-1);
+      background-color: var(--jaci-colors-surface-default);
+      color: var(--jaci-colors-fg-default);
+      font-size: var(--jaci-font-sizes-sm);
+      font-weight: 600;
+      max-width: 7rem;
+      min-width: var(--jaci-sizes-0);
+}
+
+    .jaci-calendar__yearSelect: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-calendar__calendar {
+      width: 100%;
+}
+
+    .jaci-calendar__weekdays {
+      display: grid;
+      grid-template-columns: repeat(7, minmax(0, 1fr));
+      margin-bottom: var(--jaci-spacing-1);
+}
+
+    .jaci-calendar__weekday {
+      color: var(--jaci-colors-fg-muted);
+      font-size: var(--jaci-font-sizes-xs);
+      font-weight: 700;
+      text-align: center;
+      text-transform: uppercase;
+      padding-bottom: var(--jaci-spacing-2);
+}
+
+    .jaci-calendar__grid {
+      gap: var(--jaci-spacing-1);
+      display: flex;
+      flex-direction: column;
+}
+
+    .jaci-calendar__row {
+      display: grid;
+      grid-template-columns: repeat(7, minmax(0, 1fr));
+}
+
+    .jaci-calendar__day {
+      border: 0;
+      border-radius: var(--jaci-radii-full);
+      outline: var(--jaci-borders-none);
+      align-items: center;
+      aspect-ratio: 1;
+      background-color: var(--jaci-colors-transparent);
+      color: var(--jaci-colors-fg-default);
+      cursor: pointer;
+      display: inline-flex;
+      font-size: var(--jaci-font-sizes-sm);
+      justify-content: center;
+      position: relative;
+      min-width: var(--jaci-sizes-8);
+      width: 100%;
+}
+
+    .jaci-calendar__day:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+      cursor: not-allowed;
+      opacity: 0.4;
+}
+
+    .jaci-calendar__day[data-outside-month] {
+      color: var(--jaci-colors-fg-muted);
+}
+
+    .jaci-calendar__day[data-selected] {
+      background-color: var(--jaci-colors-accent-default);
+      color: var(--jaci-colors-fg-on-accent);
+      font-weight: 700;
+}
+
+    .jaci-calendar__day[data-selected]:is(:hover, [data-hover]) {
+      background-color: var(--jaci-colors-accent-hover);
+}
+
+    .jaci-calendar__day[data-today] {
+      box-shadow: inset 0 0 0 1px var(--jaci-colors-accent-default);
+}
+
+    .jaci-calendar__day:is(:focus-visible, [data-focus-visible]) {
+      outline: 2px solid;
+      outline-color: var(--jaci-colors-focus);
+      outline-offset: -2px;
+}
+
+    .jaci-calendar__day:is(:hover, [data-hover]) {
+      background-color: var(--jaci-colors-surface-subtle);
+}
+
     .jaci-card__root {
       border-color: var(--jaci-colors-border-default);
       border-radius: var(--jaci-radii-2xl);
@@ -2658,7 +2837,7 @@
       padding-top: var(--jaci-spacing-2);
 }
 
-    .jaci-combobox__empty {
+    .jaci-combobox__empty,.jaci-combobox__loading {
       padding: var(--jaci-spacing-3);
       color: var(--jaci-colors-fg-muted);
       font-size: var(--jaci-font-sizes-sm);
@@ -3034,6 +3213,34 @@
       line-height: 1;
 }
 
+    .jaci-inputGroup__root {
+      align-items: stretch;
+      display: flex;
+      min-width: var(--jaci-sizes-0);
+      width: 100%;
+}
+
+    .jaci-inputGroup__root > [data-slot=input] {
+      flex: 1 1 0%;
+      min-width: var(--jaci-sizes-0);
+}
+
+    .jaci-inputGroup__addon {
+      border-color: var(--jaci-colors-border-default);
+      border-style: solid;
+      border-width: 2px;
+      overflow: hidden;
+      padding-inline: var(--jaci-spacing-3);
+      align-items: center;
+      background-color: var(--jaci-colors-surface-subtle);
+      color: var(--jaci-colors-fg-muted);
+      display: inline-flex;
+      flex-shrink: 0;
+      font-size: var(--jaci-font-sizes-sm);
+      white-space: nowrap;
+      max-width: 50%;
+}
+
     .jaci-radio-group__root {
       gap: var(--jaci-spacing-3);
       display: flex;
@@ -3241,71 +3448,228 @@
       width: 1px;
 }
 
-    .jaci-data-view__root {
-      gap: var(--jaci-spacing-4);
-      color: var(--jaci-colors-fg-default);
+    .jaci-data-toolbar__root {
+      gap: var(--jaci-spacing-2);
+      align-items: center;
       display: flex;
-      flex-direction: column;
+      flex-wrap: wrap;
       min-width: var(--jaci-sizes-0);
       width: 100%;
 }
 
-    .jaci-data-view__root[data-layout='grid'] [data-slot='data-view-content'] {
-      gap: var(--jaci-spacing-4);
-      display: grid;
-}
-
-    .jaci-data-view__root[data-layout='list'] [data-slot='data-view-content'] {
-      display: flex;
-      flex-direction: column;
-}
-
-    .jaci-data-view__root[data-layout='grid'][data-columns='1'] [data-slot='data-view-content'],.jaci-data-view__root[data-layout='grid'][data-columns='2'] [data-slot='data-view-content'],.jaci-data-view__root[data-layout='grid'][data-columns='3'] [data-slot='data-view-content'],.jaci-data-view__root[data-layout='grid'][data-columns='4'] [data-slot='data-view-content'] {
-      grid-template-columns: repeat(1, minmax(0, 1fr));
+    .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-view__root[data-layout='table'] [data-slot='data-view-content'] {
-      overflow-x: auto;
+    .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-view__toolbar {
-      gap: var(--jaci-spacing-3);
+    .jaci-data-toolbar__filters {
+      gap: var(--jaci-spacing-2);
       align-items: center;
       display: flex;
       flex-wrap: wrap;
-      justify-content: space-between;
-}
-
-    .jaci-data-view__content {
       min-width: var(--jaci-sizes-0);
-      width: 100%;
-}
-
-    .jaci-data-view__loading,.jaci-data-view__empty {
-      padding: var(--jaci-spacing-8);
-      align-items: center;
-      color: var(--jaci-colors-fg-muted);
-      display: flex;
-      justify-content: center;
-      text-align: center;
-      min-height: var(--jaci-sizes-24);
 }
 
-    .jaci-data-view__error {
-      padding: var(--jaci-spacing-4);
-      border-color: var(--jaci-colors-danger);
+    .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-danger);
+      color: var(--jaci-colors-fg-default);
+      max-width: 100%;
+      min-height: var(--jaci-sizes-10);
+      min-width: 9rem;
 }
 
-    .jaci-date-picker__root {
-      gap: var(--jaci-spacing-2);
-      display: flex;
-      flex-direction: column;
-      width: 100%;
+    .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);
+      display: flex;
+      flex-direction: column;
+      min-width: var(--jaci-sizes-0);
+      width: 100%;
+}
+
+    .jaci-data-view__root[data-layout='grid'] [data-slot='data-view-content'] {
+      gap: var(--jaci-spacing-4);
+      display: grid;
+}
+
+    .jaci-data-view__root[data-layout='list'] [data-slot='data-view-content'] {
+      display: flex;
+      flex-direction: column;
+}
+
+    .jaci-data-view__root[data-layout='grid'][data-columns='1'] [data-slot='data-view-content'],.jaci-data-view__root[data-layout='grid'][data-columns='2'] [data-slot='data-view-content'],.jaci-data-view__root[data-layout='grid'][data-columns='3'] [data-slot='data-view-content'],.jaci-data-view__root[data-layout='grid'][data-columns='4'] [data-slot='data-view-content'] {
+      grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
+    .jaci-data-view__root[data-layout='table'] [data-slot='data-view-content'] {
+      overflow-x: auto;
+}
+
+    .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;
+}
+
+    .jaci-data-view__filters {
+      gap: var(--jaci-spacing-2);
+      min-width: var(--jaci-sizes-0);
+}
+
+    .jaci-data-view__content {
+      min-width: var(--jaci-sizes-0);
+      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;
+      color: var(--jaci-colors-fg-muted);
+      display: flex;
+      justify-content: center;
+      text-align: center;
+      min-height: var(--jaci-sizes-24);
+}
+
+    .jaci-data-view__error {
+      padding: var(--jaci-spacing-4);
+      border-color: var(--jaci-colors-danger);
+      border-radius: var(--jaci-radii-lg);
+      border-style: solid;
+      border-width: 1px;
+      background-color: var(--jaci-colors-surface-raised);
+      color: var(--jaci-colors-danger);
+}
+
+    .jaci-date-picker__root {
+      gap: var(--jaci-spacing-2);
+      display: flex;
+      flex-direction: column;
+      width: 100%;
 }
 
     .jaci-date-picker__label {
@@ -3653,7 +4017,312 @@
 
     .jaci-date-picker__weekday {
       color: var(--jaci-colors-fg-muted);
-      font-family: system-ui, sans-serif;
+      font-family: system-ui, sans-serif;
+      font-size: var(--jaci-font-sizes-xs);
+      font-weight: 700;
+      text-align: center;
+      text-transform: uppercase;
+      padding-bottom: var(--jaci-spacing-2);
+}
+
+    .jaci-date-picker__grid {
+      display: grid;
+      grid-template-columns: repeat(7, minmax(0, 1fr));
+      row-gap: var(--jaci-spacing-1);
+}
+
+    .jaci-date-picker__day {
+      border: 0;
+      border-radius: var(--jaci-radii-full);
+      outline: var(--jaci-borders-none);
+      align-items: center;
+      aspect-ratio: 1;
+      background-color: var(--jaci-colors-transparent);
+      color: var(--jaci-colors-fg-default);
+      cursor: pointer;
+      display: inline-flex;
+      font-family: system-ui, sans-serif;
+      font-size: var(--jaci-font-sizes-sm);
+      justify-content: center;
+      position: relative;
+      min-width: var(--jaci-sizes-8);
+      width: 100%;
+}
+
+    .jaci-date-picker__day:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+      cursor: not-allowed;
+      opacity: 0.4;
+}
+
+    .jaci-date-picker__day[data-selected] {
+      background-color: var(--jaci-colors-accent-default);
+      color: var(--jaci-colors-fg-on-accent);
+      font-weight: 700;
+}
+
+    .jaci-date-picker__day[data-selected]:is(:hover, [data-hover]) {
+      background-color: var(--jaci-colors-accent-hover);
+}
+
+    .jaci-date-picker__day[data-outside-month] {
+      color: var(--jaci-colors-fg-muted);
+      opacity: 0.65;
+}
+
+    .jaci-date-picker__day[data-today] {
+      font-weight: 700;
+}
+
+    .jaci-date-picker__day:is(:focus-visible, [data-focus-visible]) {
+      outline: 2px solid;
+      outline-color: var(--jaci-colors-accent-default);
+      outline-offset: -2px;
+}
+
+    .jaci-date-picker__day:is(:hover, [data-hover]) {
+      background-color: var(--jaci-colors-surface-subtle);
+}
+
+    .jaci-date-range-picker__root {
+      gap: var(--jaci-spacing-2);
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+}
+
+    .jaci-date-range-picker__label {
+      color: var(--jaci-colors-fg-default);
+      font-size: var(--jaci-font-sizes-sm);
+      font-weight: 600;
+}
+
+    .jaci-date-range-picker__control {
+      gap: var(--jaci-spacing-2);
+      align-items: center;
+      display: flex;
+      width: 100%;
+}
+
+    .jaci-date-range-picker__trigger {
+      border-color: var(--jaci-colors-border-default);
+      border-radius: var(--jaci-radii-lg);
+      border-style: solid;
+      border-width: 1px;
+      overflow: hidden;
+      padding-inline: var(--jaci-spacing-3);
+      padding-block: var(--jaci-spacing-2);
+      align-items: center;
+      background-color: var(--jaci-colors-surface-raised);
+      color: var(--jaci-colors-fg-default);
+      cursor: pointer;
+      display: flex;
+      justify-content: space-between;
+      text-align: left;
+      min-height: var(--jaci-sizes-10);
+      min-width: var(--jaci-sizes-0);
+      width: 100%;
+}
+
+    .jaci-date-range-picker__trigger:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+      cursor: not-allowed;
+      opacity: 0.5;
+}
+
+    .jaci-date-range-picker__trigger:is(:focus-visible, [data-focus-visible]) {
+      outline: 2px solid;
+      outline-color: var(--jaci-colors-focus);
+      outline-offset: 2px;
+}
+
+    .jaci-date-range-picker__trigger:is(:hover, [data-hover]) {
+      border-color: var(--jaci-colors-border-strong);
+      background-color: var(--jaci-colors-surface-subtle);
+}
+
+    .jaci-date-range-picker__value {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      min-width: var(--jaci-sizes-0);
+}
+
+    .jaci-date-range-picker__clear {
+      border: 0;
+      border-radius: var(--jaci-radii-full);
+      align-items: center;
+      background-color: var(--jaci-colors-transparent);
+      color: var(--jaci-colors-fg-muted);
+      cursor: pointer;
+      display: inline-flex;
+      flex-shrink: 0;
+      justify-content: center;
+      height: var(--jaci-sizes-8);
+      width: var(--jaci-sizes-8);
+}
+
+    .jaci-date-range-picker__clear:is(:focus-visible, [data-focus-visible]) {
+      outline: 2px solid;
+      outline-color: var(--jaci-colors-focus);
+      outline-offset: 2px;
+}
+
+    .jaci-date-range-picker__clear:is(:hover, [data-hover]) {
+      background-color: var(--jaci-colors-surface-subtle);
+      color: var(--jaci-colors-fg-default);
+}
+
+    .jaci-date-range-picker__close {
+      border-color: var(--jaci-colors-accent-default);
+      border-radius: var(--jaci-radii-md);
+      border-style: solid;
+      border-width: 1px;
+      padding-inline: var(--jaci-spacing-3);
+      padding-block: var(--jaci-spacing-2);
+      align-self: flex-end;
+      background-color: var(--jaci-colors-accent-default);
+      color: var(--jaci-colors-fg-on-accent);
+      cursor: pointer;
+      white-space: nowrap;
+      min-height: var(--jaci-sizes-9);
+      min-width: 5rem;
+      max-width: 100%;
+}
+
+    .jaci-date-range-picker__close:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+      cursor: not-allowed;
+      opacity: 0.5;
+}
+
+    .jaci-date-range-picker__close:is(:focus-visible, [data-focus-visible]) {
+      outline: 2px solid;
+      outline-color: var(--jaci-colors-focus);
+      outline-offset: 2px;
+}
+
+    .jaci-date-range-picker__close:is(:hover, [data-hover]) {
+      border-color: var(--jaci-colors-accent-hover);
+      background-color: var(--jaci-colors-accent-hover);
+}
+
+    .jaci-date-range-picker__positioner {
+      outline: var(--jaci-borders-none);
+      z-index: 50;
+}
+
+    .jaci-date-range-picker__popup {
+      padding: var(--jaci-spacing-4);
+      border-color: var(--jaci-colors-border-default);
+      border-radius: var(--jaci-radii-xl);
+      border-style: solid;
+      border-width: 1px;
+      overflow: hidden;
+      --backdrop-blur: blur(var(--jaci-blurs-md));
+      backdrop-filter: var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, );
+      -webkit-backdrop-filter: var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, );
+      background-color: var(--jaci-colors-surface-overlay);
+      box-shadow: var(--jaci-shadows-xl);
+      color: var(--jaci-colors-fg-default);
+      min-width: var(--jaci-sizes-80);
+      max-width: calc(100vw - 1rem);
+}
+
+    .jaci-date-range-picker__header {
+      gap: var(--jaci-spacing-2);
+      align-items: center;
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: var(--jaci-spacing-4);
+}
+
+    .jaci-date-range-picker__caption {
+      flex: 1 1 0%;
+      font-size: var(--jaci-font-sizes-sm);
+      font-weight: 700;
+      text-align: center;
+      text-transform: capitalize;
+}
+
+    .jaci-date-range-picker__monthSelect {
+      border-color: var(--jaci-colors-border-default);
+      border-radius: var(--jaci-radii-md);
+      border-style: solid;
+      border-width: 1px;
+      padding-inline: var(--jaci-spacing-2);
+      padding-block: var(--jaci-spacing-1);
+      background-color: var(--jaci-colors-surface-default);
+      color: var(--jaci-colors-fg-default);
+      font-size: var(--jaci-font-sizes-sm);
+      max-width: 10rem;
+      min-width: var(--jaci-sizes-0);
+}
+
+    .jaci-date-range-picker__monthSelect:is(:focus-visible, [data-focus-visible]) {
+      outline: 2px solid;
+      outline-color: var(--jaci-colors-focus);
+      outline-offset: 1px;
+}
+
+    .jaci-date-range-picker__yearSelect {
+      border-color: var(--jaci-colors-border-default);
+      border-radius: var(--jaci-radii-md);
+      border-style: solid;
+      border-width: 1px;
+      padding-inline: var(--jaci-spacing-2);
+      padding-block: var(--jaci-spacing-1);
+      background-color: var(--jaci-colors-surface-default);
+      color: var(--jaci-colors-fg-default);
+      font-size: var(--jaci-font-sizes-sm);
+      max-width: 7rem;
+      min-width: var(--jaci-sizes-0);
+}
+
+    .jaci-date-range-picker__yearSelect:is(:focus-visible, [data-focus-visible]) {
+      outline: 2px solid;
+      outline-color: var(--jaci-colors-focus);
+      outline-offset: 1px;
+}
+
+    .jaci-date-range-picker__navigation {
+      border: 0;
+      border-radius: var(--jaci-radii-md);
+      align-items: center;
+      background-color: var(--jaci-colors-transparent);
+      color: var(--jaci-colors-fg-default);
+      cursor: pointer;
+      display: inline-flex;
+      font-size: var(--jaci-font-sizes-lg);
+      justify-content: center;
+      height: var(--jaci-sizes-8);
+      width: var(--jaci-sizes-8);
+}
+
+    .jaci-date-range-picker__navigation:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+      cursor: not-allowed;
+      opacity: 0.45;
+}
+
+    .jaci-date-range-picker__navigation:is(:focus-visible, [data-focus-visible]) {
+      outline: 2px solid;
+      outline-color: var(--jaci-colors-focus);
+      outline-offset: 2px;
+}
+
+    .jaci-date-range-picker__navigation:is(:hover, [data-hover]) {
+      background-color: var(--jaci-colors-surface-subtle);
+}
+
+    .jaci-date-range-picker__calendar {
+      width: 100%;
+}
+
+    .jaci-date-range-picker__weekdays {
+      display: grid;
+      grid-template-columns: repeat(7, minmax(0, 1fr));
+      margin-bottom: var(--jaci-spacing-1);
+}
+
+    .jaci-date-range-picker__weekday {
+      color: var(--jaci-colors-fg-muted);
       font-size: var(--jaci-font-sizes-xs);
       font-weight: 700;
       text-align: center;
@@ -3661,13 +4330,13 @@
       padding-bottom: var(--jaci-spacing-2);
 }
 
-    .jaci-date-picker__grid {
+    .jaci-date-range-picker__grid {
       display: grid;
       grid-template-columns: repeat(7, minmax(0, 1fr));
       row-gap: var(--jaci-spacing-1);
 }
 
-    .jaci-date-picker__day {
+    .jaci-date-range-picker__day {
       border: 0;
       border-radius: var(--jaci-radii-full);
       outline: var(--jaci-borders-none);
@@ -3677,7 +4346,6 @@
       color: var(--jaci-colors-fg-default);
       cursor: pointer;
       display: inline-flex;
-      font-family: system-ui, sans-serif;
       font-size: var(--jaci-font-sizes-sm);
       justify-content: center;
       position: relative;
@@ -3685,40 +4353,74 @@
       width: 100%;
 }
 
-    .jaci-date-picker__day:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+    .jaci-date-range-picker__day[data-in-range] {
+      border-radius: 0;
+      background-color: var(--jaci-colors-selected);
+}
+
+    .jaci-date-range-picker__day:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
       cursor: not-allowed;
       opacity: 0.4;
 }
 
-    .jaci-date-picker__day[data-selected] {
+    .jaci-date-range-picker__day[data-outside-month] {
+      color: var(--jaci-colors-fg-muted);
+      opacity: 0.65;
+}
+
+    .jaci-date-range-picker__day[data-range-start],.jaci-date-range-picker__day[data-range-end] {
       background-color: var(--jaci-colors-accent-default);
       color: var(--jaci-colors-fg-on-accent);
       font-weight: 700;
 }
 
-    .jaci-date-picker__day[data-selected]:is(:hover, [data-hover]) {
-      background-color: var(--jaci-colors-accent-hover);
-}
-
-    .jaci-date-picker__day[data-outside-month] {
-      color: var(--jaci-colors-fg-muted);
-      opacity: 0.65;
+    .jaci-date-range-picker__day[data-range-start] {
+      border-top-left-radius: var(--jaci-radii-full);
+      border-bottom-left-radius: var(--jaci-radii-full);
 }
 
-    .jaci-date-picker__day[data-today] {
-      font-weight: 700;
+    .jaci-date-range-picker__day[data-range-end] {
+      border-top-right-radius: var(--jaci-radii-full);
+      border-bottom-right-radius: var(--jaci-radii-full);
 }
 
-    .jaci-date-picker__day:is(:focus-visible, [data-focus-visible]) {
+    .jaci-date-range-picker__day:is(:focus-visible, [data-focus-visible]) {
       outline: 2px solid;
-      outline-color: var(--jaci-colors-accent-default);
+      outline-color: var(--jaci-colors-focus);
       outline-offset: -2px;
 }
 
-    .jaci-date-picker__day:is(:hover, [data-hover]) {
+    .jaci-date-range-picker__day:is(:hover, [data-hover]) {
       background-color: var(--jaci-colors-surface-subtle);
 }
 
+    .jaci-date-range-picker__preview {
+      color: var(--jaci-colors-fg-muted);
+      font-size: var(--jaci-font-sizes-sm);
+      min-height: var(--jaci-sizes-5);
+}
+
+    .jaci-date-range-picker__input {
+      border-color: var(--jaci-colors-border-default);
+      border-radius: var(--jaci-radii-md);
+      border-style: solid;
+      border-width: 1px;
+      padding-inline: var(--jaci-spacing-3);
+      background-color: var(--jaci-colors-surface-default);
+      box-sizing: border-box;
+      color: var(--jaci-colors-fg-default);
+      min-height: var(--jaci-sizes-9);
+      min-width: var(--jaci-sizes-0);
+      width: 100%;
+}
+
+    .jaci-date-range-picker__input: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-drawer__trigger {
       border-color: var(--jaci-colors-border-interactive);
       border-radius: var(--jaci-radii-lg);
@@ -4063,34 +4765,6 @@
       line-height: 1.5;
 }
 
-    .jaci-inputGroup__root {
-      align-items: stretch;
-      display: flex;
-      min-width: var(--jaci-sizes-0);
-      width: 100%;
-}
-
-    .jaci-inputGroup__root > [data-slot=input] {
-      flex: 1 1 0%;
-      min-width: var(--jaci-sizes-0);
-}
-
-    .jaci-inputGroup__addon {
-      border-color: var(--jaci-colors-border-default);
-      border-style: solid;
-      border-width: 2px;
-      overflow: hidden;
-      padding-inline: var(--jaci-spacing-3);
-      align-items: center;
-      background-color: var(--jaci-colors-surface-subtle);
-      color: var(--jaci-colors-fg-muted);
-      display: inline-flex;
-      flex-shrink: 0;
-      font-size: var(--jaci-font-sizes-sm);
-      white-space: nowrap;
-      max-width: 50%;
-}
-
     .jaci-list__root {
       margin: var(--jaci-spacing-0);
       padding: var(--jaci-spacing-0);
@@ -5054,17 +5728,92 @@
 }
 
     .jaci-pagination__ellipsis {
+      align-items: center;
       color: var(--jaci-colors-fg-muted);
+      display: inline-flex;
+      font-size: var(--jaci-font-sizes-sm);
+      font-weight: 600;
+      justify-content: center;
       min-height: var(--jaci-sizes-9);
       min-width: var(--jaci-sizes-9);
 }
 
-    .jaci-pagination__ellipsis,.jaci-popover__trigger {
-      align-items: center;
-      display: inline-flex;
+    .jaci-pinInput__root {
+      gap: var(--jaci-spacing-2);
+      display: flex;
+      flex-direction: column;
+      max-width: 100%;
+      min-width: var(--jaci-sizes-0);
+}
+
+    .jaci-pinInput__label {
+      color: var(--jaci-colors-fg-default);
       font-size: var(--jaci-font-sizes-sm);
       font-weight: 600;
-      justify-content: center;
+}
+
+    .jaci-pinInput__control {
+      display: flex;
+      max-width: 100%;
+      min-width: var(--jaci-sizes-0);
+}
+
+    .jaci-pinInput__inputs {
+      gap: var(--jaci-spacing-2);
+      display: flex;
+      flex-wrap: wrap;
+      max-width: 100%;
+}
+
+    .jaci-pinInput__input {
+      border-color: var(--jaci-colors-border-default);
+      border-radius: var(--jaci-radii-md);
+      border-style: solid;
+      border-width: 1px;
+      outline: var(--jaci-borders-none);
+      background-color: var(--jaci-colors-surface-canvas);
+      color: var(--jaci-colors-fg-default);
+      font-family: inherit;
+      font-size: var(--jaci-font-sizes-lg);
+      font-weight: 600;
+      text-align: center;
+      height: var(--jaci-sizes-12);
+      min-width: var(--jaci-sizes-0);
+      width: 3rem;
+}
+
+    .jaci-pinInput__input:is(:invalid, [data-invalid], [aria-invalid=true]) {
+      border-color: danger.default;
+}
+
+    .jaci-pinInput__input:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+      background-color: var(--jaci-colors-surface-subtle);
+      cursor: not-allowed;
+      opacity: 0.65;
+}
+
+    .jaci-pinInput__input:is(:focus-visible, [data-focus-visible]) {
+      border-color: var(--jaci-colors-accent-default);
+      box-shadow: 0 0 0 3px colors\.focus\.ring;
+}
+
+    .jaci-pinInput__description {
+      color: var(--jaci-colors-fg-muted);
+      font-size: var(--jaci-font-sizes-sm);
+}
+
+    .jaci-pinInput__error {
+      color: danger.default;
+      font-size: var(--jaci-font-sizes-sm);
+}
+
+    .jaci-pinInput__hiddenInput {
+      overflow: hidden;
+      position: absolute;
+      clip: rect(0 0 0 0);
+      white-space: nowrap;
+      width: 1px;
+      height: 1px;
 }
 
     .jaci-popover__trigger {
@@ -5075,10 +5824,15 @@
       gap: var(--jaci-spacing-2);
       padding-inline: var(--jaci-spacing-3);
       padding-block: var(--jaci-spacing-2);
+      align-items: center;
       background-color: var(--jaci-colors-transparent);
       color: var(--jaci-colors-fg-default);
       cursor: pointer;
+      display: inline-flex;
       font-family: system-ui, sans-serif;
+      font-size: var(--jaci-font-sizes-sm);
+      font-weight: 600;
+      justify-content: center;
       --transition-duration: var(--jaci-durations-slow);
       transition-duration: var(--jaci-durations-slow);
       --transition-prop: background-color, border-color, box-shadow, color, transform;
@@ -5670,6 +6424,42 @@
       width: 100%;
 }
 
+    .jaci-select__clear {
+      border: 0;
+      border-radius: var(--jaci-radii-sm);
+      align-items: center;
+      background-color: var(--jaci-colors-transparent);
+      color: var(--jaci-colors-fg-muted);
+      cursor: pointer;
+      display: inline-flex;
+      flex-shrink: 0;
+      font-size: var(--jaci-font-sizes-lg);
+      justify-content: center;
+      min-height: var(--jaci-sizes-6);
+      min-width: var(--jaci-sizes-6);
+}
+
+    .jaci-select__clear:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+      cursor: not-allowed;
+      opacity: 0.55;
+}
+
+    .jaci-select__clear:is(:focus-visible, [data-focus-visible]) {
+      outline: 2px solid;
+      outline-color: var(--jaci-colors-accent-default);
+      outline-offset: 1px;
+}
+
+    .jaci-select__empty,.jaci-select__loading {
+      padding-inline: var(--jaci-spacing-3);
+      padding-block: var(--jaci-spacing-2);
+}
+
+    .jaci-select__empty,.jaci-select__loading,.jaci-select__status {
+      color: var(--jaci-colors-fg-muted);
+      font-size: var(--jaci-font-sizes-sm);
+}
+
     .jaci-sidebar__root {
       overflow: visible;
       box-sizing: border-box;
@@ -5971,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);
 }
@@ -6012,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;
@@ -6043,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;
@@ -6966,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%;
@@ -7223,6 +8064,37 @@
       color: var(--jaci-colors-fg-default);
 }
 
+    .jaci-upload__cancel {
+      border: 1px solid;
+      border-color: var(--jaci-colors-border-default);
+      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-default);
+      cursor: pointer;
+      display: inline-flex;
+      font-size: var(--jaci-font-sizes-sm);
+      justify-content: center;
+      min-height: var(--jaci-sizes-8);
+}
+
+    .jaci-upload__cancel:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+      cursor: not-allowed;
+      opacity: 0.55;
+}
+
+    .jaci-upload__cancel:is(:focus-visible, [data-focus-visible]) {
+      outline: 2px solid;
+      outline-color: var(--jaci-colors-accent-default);
+      outline-offset: 2px;
+}
+
+    .jaci-upload__status {
+      color: var(--jaci-colors-fg-muted);
+      font-size: var(--jaci-font-sizes-sm);
+}
+
     .jaci-upload__error {
       margin: var(--jaci-spacing-0);
       color: var(--jaci-colors-danger);
@@ -7237,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;
 }
 }
 
@@ -7303,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);
@@ -7339,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;
 }
 }
 }
@@ -7565,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);
@@ -7705,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);
@@ -8080,4 +8976,8 @@
   .jaci-flex-d_horizontal {
     flex-direction: horizontal;
 }
+
+  .jaci-page_1 {
+    page: 1px;
+}
 }