jaci-ui 0.3.0 → 0.4.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;
@@ -3597,63 +3804,368 @@
       width: 100%;
 }
 
-    .jaci-date-picker__monthGrid {
-      gap: var(--jaci-spacing-2);
-      display: grid;
-      grid-template-columns: repeat(3, minmax(0, 1fr));
+    .jaci-date-picker__monthGrid {
+      gap: var(--jaci-spacing-2);
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+    .jaci-date-picker__month {
+      border: 0;
+      border-radius: var(--jaci-radii-lg);
+      outline: var(--jaci-borders-none);
+      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-family: system-ui, sans-serif;
+      font-size: var(--jaci-font-sizes-sm);
+      justify-content: center;
+      text-transform: capitalize;
+      min-height: var(--jaci-sizes-10);
+}
+
+    .jaci-date-picker__month:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+      cursor: not-allowed;
+      opacity: 0.4;
+}
+
+    .jaci-date-picker__month[data-selected] {
+      background-color: var(--jaci-colors-accent-default);
+      color: var(--jaci-colors-fg-on-accent);
+      font-weight: 700;
+}
+
+    .jaci-date-picker__month[data-selected]:is(:hover, [data-hover]) {
+      background-color: var(--jaci-colors-accent-hover);
+}
+
+    .jaci-date-picker__month:is(:focus-visible, [data-focus-visible]) {
+      outline: 2px solid;
+      outline-color: var(--jaci-colors-accent-default);
+      outline-offset: -2px;
+}
+
+    .jaci-date-picker__month:is(:hover, [data-hover]) {
+      background-color: var(--jaci-colors-surface-subtle);
+}
+
+    .jaci-date-picker__weekdays {
+      display: grid;
+      grid-template-columns: repeat(7, minmax(0, 1fr));
+      margin-bottom: var(--jaci-spacing-1);
+}
+
+    .jaci-date-picker__weekday {
+      color: var(--jaci-colors-fg-muted);
+      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-picker__month {
+    .jaci-date-range-picker__navigation {
       border: 0;
-      border-radius: var(--jaci-radii-lg);
-      outline: var(--jaci-borders-none);
-      padding-inline: var(--jaci-spacing-2);
+      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-family: system-ui, sans-serif;
-      font-size: var(--jaci-font-sizes-sm);
+      font-size: var(--jaci-font-sizes-lg);
       justify-content: center;
-      text-transform: capitalize;
-      min-height: var(--jaci-sizes-10);
+      height: var(--jaci-sizes-8);
+      width: var(--jaci-sizes-8);
 }
 
-    .jaci-date-picker__month:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+    .jaci-date-range-picker__navigation:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
       cursor: not-allowed;
-      opacity: 0.4;
-}
-
-    .jaci-date-picker__month[data-selected] {
-      background-color: var(--jaci-colors-accent-default);
-      color: var(--jaci-colors-fg-on-accent);
-      font-weight: 700;
-}
-
-    .jaci-date-picker__month[data-selected]:is(:hover, [data-hover]) {
-      background-color: var(--jaci-colors-accent-hover);
+      opacity: 0.45;
 }
 
-    .jaci-date-picker__month:is(:focus-visible, [data-focus-visible]) {
+    .jaci-date-range-picker__navigation:is(:focus-visible, [data-focus-visible]) {
       outline: 2px solid;
-      outline-color: var(--jaci-colors-accent-default);
-      outline-offset: -2px;
+      outline-color: var(--jaci-colors-focus);
+      outline-offset: 2px;
 }
 
-    .jaci-date-picker__month:is(:hover, [data-hover]) {
+    .jaci-date-range-picker__navigation:is(:hover, [data-hover]) {
       background-color: var(--jaci-colors-surface-subtle);
 }
 
-    .jaci-date-picker__weekdays {
+    .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-picker__weekday {
+    .jaci-date-range-picker__weekday {
       color: var(--jaci-colors-fg-muted);
-      font-family: system-ui, sans-serif;
       font-size: var(--jaci-font-sizes-xs);
       font-weight: 700;
       text-align: center;
@@ -3661,13 +4173,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 +4189,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 +4196,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 +4608,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 +5571,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 +5667,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 +6267,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;
@@ -7223,6 +7856,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);