jaci-ui 0.2.0 → 0.4.0

package/dist/styles.css

@@ -475,6 +475,9 @@
     --jaci-easings-out: cubic-bezier(0, 0, 0.2, 1);
     --jaci-easings-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --jaci-easings-standard: cubic-bezier(0.2, 0, 0, 1);
+    --jaci-transitions-colors: background-color, border-color, box-shadow, color;
+    --jaci-transitions-transform: transform;
+    --jaci-transitions-standard: background-color, border-color, box-shadow, color, transform;
     --jaci-animations-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
     --jaci-animations-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     --jaci-animations-bounce: bounce 1s infinite;
@@ -500,6 +503,10 @@
     --jaci-colors-success: var(--jaci-colors-green-700);
     --jaci-colors-warning: var(--jaci-colors-amber-700);
     --jaci-colors-danger: var(--jaci-colors-red-600);
+    --jaci-colors-info: var(--jaci-colors-blue-600);
+    --jaci-colors-focus: var(--jaci-colors-blue-600);
+    --jaci-colors-disabled: var(--jaci-colors-neutral-400);
+    --jaci-colors-selected: var(--jaci-colors-blue-50);
     --jaci-colors-link-default: var(--jaci-colors-neutral-600);
     --jaci-colors-link-hover: var(--jaci-colors-neutral-900);
 }
@@ -515,6 +522,8 @@
     --jaci-colors-border-default: var(--jaci-colors-neutral-700);
     --jaci-colors-border-strong: var(--jaci-colors-neutral-500);
     --jaci-colors-border-interactive: var(--jaci-colors-neutral-200);
+    --jaci-colors-disabled: var(--jaci-colors-neutral-600);
+    --jaci-colors-selected: var(--jaci-colors-blue-950);
     --jaci-colors-link-default: var(--jaci-colors-neutral-400);
     --jaci-colors-link-hover: var(--jaci-colors-neutral-200)
 }
@@ -732,11 +741,44 @@
 
     .jaci-form {
       gap: var(--jaci-spacing-6);
+      display: flex;
       flex-direction: column;
       width: 100%;
 }
 
-    .jaci-form,.jaci-stack {
+    .jaci-iconButton {
+      border-color: var(--jaci-colors-border-interactive);
+      border-radius: var(--jaci-radii-lg);
+      border-style: solid;
+      border-width: 1px;
+      overflow: hidden;
+      align-items: center;
+      box-sizing: border-box;
+      cursor: pointer;
+      display: inline-flex;
+      flex-shrink: 0;
+      justify-content: center;
+      --transition-duration: var(--jaci-durations-fast);
+      transition-duration: var(--jaci-durations-fast);
+      --transition-prop: background-color, border-color, box-shadow, color, transform;
+      transition-property: background-color, border-color, box-shadow, color, transform;
+      --transition-easing: var(--jaci-easings-standard);
+      transition-timing-function: var(--jaci-easings-standard);
+      max-width: 100%;
+}
+
+    .jaci-iconButton:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+      cursor: not-allowed;
+      opacity: 0.5;
+}
+
+    .jaci-iconButton:is(:focus-visible, [data-focus-visible]) {
+      outline: 2px solid;
+      outline-color: var(--jaci-colors-focus);
+      outline-offset: 2px;
+}
+
+    .jaci-stack {
       display: flex;
 }
 
@@ -1039,6 +1081,65 @@
     color: var(--jaci-colors-fg-on-accent);
 }
 
+  .jaci-iconButton--variant_outline {
+    background-color: var(--jaci-colors-transparent);
+    color: var(--jaci-colors-fg-default);
+}
+
+  .jaci-iconButton--variant_outline:is(:hover, [data-hover]) {
+    border-color: var(--jaci-colors-border-strong);
+    background-color: var(--jaci-colors-surface-subtle);
+}
+
+  .jaci-iconButton--size_md {
+    font-size: var(--jaci-font-sizes-md);
+    height: var(--jaci-sizes-10);
+    width: var(--jaci-sizes-10);
+}
+
+  .jaci-iconButton--variant_solid {
+    border-color: var(--jaci-colors-accent-default);
+    background-color: var(--jaci-colors-accent-default);
+    color: var(--jaci-colors-fg-on-accent);
+}
+
+  .jaci-iconButton--variant_solid:is(:hover, [data-hover]) {
+    border-color: var(--jaci-colors-accent-hover);
+    background-color: var(--jaci-colors-accent-hover);
+}
+
+  .jaci-iconButton--variant_ghost {
+    border-color: var(--jaci-colors-transparent);
+    background-color: var(--jaci-colors-transparent);
+    color: var(--jaci-colors-fg-default);
+}
+
+  .jaci-iconButton--variant_ghost:is(:hover, [data-hover]) {
+    background-color: var(--jaci-colors-surface-subtle);
+}
+
+  .jaci-iconButton--variant_danger {
+    border-color: var(--jaci-colors-danger);
+    background-color: var(--jaci-colors-danger);
+    color: var(--jaci-colors-fg-on-accent);
+}
+
+  .jaci-iconButton--variant_danger:is(:hover, [data-hover]) {
+    opacity: 0.9;
+}
+
+  .jaci-iconButton--size_sm {
+    font-size: var(--jaci-font-sizes-sm);
+    height: var(--jaci-sizes-9);
+    width: var(--jaci-sizes-9);
+}
+
+  .jaci-iconButton--size_lg {
+    font-size: var(--jaci-font-sizes-lg);
+    height: var(--jaci-sizes-12);
+    width: var(--jaci-sizes-12);
+}
+
   .jaci-stack--direction_vertical {
     flex-direction: column;
 }
@@ -1844,6 +1945,191 @@
       user-select: none;
 }
 
+    .jaci-buttonGroup__root {
+      align-items: center;
+      display: inline-flex;
+      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);
@@ -2551,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);
@@ -2927,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;
@@ -3506,47 +3820,352 @@
       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-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-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;
-      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;
@@ -3554,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);
@@ -3570,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;
@@ -3578,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);
@@ -3884,6 +4536,50 @@
       transform: translateY(0);
 }
 
+    .jaci-emptyState__root {
+      padding: var(--jaci-spacing-8);
+      border-color: var(--jaci-colors-border-default);
+      border-radius: var(--jaci-radii-2xl);
+      border-style: dashed;
+      border-width: 1px;
+      gap: var(--jaci-spacing-3);
+      align-items: center;
+      background-color: var(--jaci-colors-surface-default);
+      box-sizing: border-box;
+      color: var(--jaci-colors-fg-default);
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      text-align: center;
+      max-width: 100%;
+      min-height: var(--jaci-sizes-32);
+}
+
+    .jaci-emptyState__icon {
+      color: var(--jaci-colors-fg-muted);
+      font-size: var(--jaci-font-sizes-2xl);
+      line-height: 1;
+}
+
+    .jaci-emptyState__title {
+      font-size: var(--jaci-font-sizes-lg);
+      font-weight: 700;
+}
+
+    .jaci-emptyState__description {
+      color: var(--jaci-colors-fg-muted);
+      font-size: var(--jaci-font-sizes-sm);
+      max-width: var(--jaci-sizes-prose);
+}
+
+    .jaci-emptyState__action {
+      gap: var(--jaci-spacing-2);
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      max-width: 100%;
+}
+
     .jaci-fieldset__root {
       border: 0;
       margin: var(--jaci-spacing-0);
@@ -4875,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 {
@@ -4896,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;
@@ -5491,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;
@@ -7044,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);
@@ -7263,6 +8106,18 @@
     border-radius: var(--jaci-radii-xl);
 }
 
+  .jaci-buttonGroup__root--orientation_horizontal {
+    gap: var(--jaci-spacing-2);
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+  .jaci-buttonGroup__root--orientation_vertical {
+    gap: var(--jaci-spacing-2);
+    flex-direction: column;
+    align-items: stretch;
+}
+
   .jaci-card__root--variant_elevated {
     box-shadow: var(--jaci-shadows-md);
 }