jaci-ui 0.1.1 → 0.2.0

package/dist/styles.css

@@ -2175,7 +2175,10 @@
       border-style: solid;
       border-width: 1px;
       gap: var(--jaci-spacing-3);
-      background-color: var(--jaci-colors-surface-raised);
+      --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-lg);
       box-sizing: border-box;
       display: flex;
@@ -2202,6 +2205,22 @@
       outline-offset: 2px;
 }
 
+    .jaci-color-picker__paletteIndicator {
+      border-color: var(--jaci-colors-white);
+      border-radius: var(--jaci-radii-full);
+      border-style: solid;
+      border-width: 2px;
+      background-color: var(--jaci-colors-transparent);
+      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.65);
+      pointer-events: none;
+      position: absolute;
+      transform: translate(-50%, -50%);
+      height: var(--jaci-sizes-5);
+      left: var(--jaci-color-palette-saturation);
+      top: var(--jaci-color-palette-lightness);
+      width: var(--jaci-sizes-5);
+}
+
     .jaci-color-picker__hue,.jaci-color-picker__alpha {
       accent-color: var(--jaci-colors-accent-default);
       box-sizing: border-box;
@@ -3274,6 +3293,46 @@
       color: var(--jaci-colors-fg-default);
 }
 
+    .jaci-date-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-items: center;
+      align-self: flex-end;
+      background-color: var(--jaci-colors-accent-default);
+      color: var(--jaci-colors-fg-on-accent);
+      cursor: pointer;
+      display: inline-flex;
+      font-family: system-ui, sans-serif;
+      font-size: var(--jaci-font-sizes-sm);
+      font-weight: 600;
+      justify-content: center;
+      white-space: nowrap;
+      margin-top: var(--jaci-spacing-2);
+      min-height: var(--jaci-sizes-9);
+      min-width: 5rem;
+      max-width: 100%;
+}
+
+    .jaci-date-picker__close:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+      cursor: not-allowed;
+      opacity: 0.5;
+}
+
+    .jaci-date-picker__close:is(:focus-visible, [data-focus-visible]) {
+      outline: 2px solid;
+      outline-color: var(--jaci-colors-accent-default);
+      outline-offset: 2px;
+}
+
+    .jaci-date-picker__close:is(:hover, [data-hover]) {
+      border-color: var(--jaci-colors-accent-hover);
+      background-color: var(--jaci-colors-accent-hover);
+}
+
     .jaci-date-picker__positioner {
       outline: var(--jaci-borders-none);
       z-index: 50;
@@ -3285,7 +3344,10 @@
       border-radius: var(--jaci-radii-xl);
       border-style: solid;
       border-width: 1px;
-      background-color: var(--jaci-colors-surface-raised);
+      --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);
       --transition-duration: var(--jaci-durations-normal);
@@ -3312,13 +3374,89 @@
 
     .jaci-date-picker__caption {
       flex: 1 1 0%;
-      font-family: system-ui, sans-serif;
-      font-size: var(--jaci-font-sizes-sm);
       font-weight: 700;
       text-align: center;
       text-transform: capitalize;
 }
 
+    .jaci-date-picker__caption,.jaci-date-picker__monthSelect {
+      font-family: system-ui, sans-serif;
+      font-size: var(--jaci-font-sizes-sm);
+}
+
+    .jaci-date-picker__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-weight: 600;
+      max-width: 10rem;
+      min-width: var(--jaci-sizes-0);
+}
+
+    .jaci-date-picker__monthSelect:is(:focus-visible, [data-focus-visible]) {
+      border-color: var(--jaci-colors-accent-default);
+      outline: 2px solid;
+      outline-color: var(--jaci-colors-accent-default);
+      outline-offset: 1px;
+}
+
+    .jaci-date-picker__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-family: system-ui, sans-serif;
+      font-size: var(--jaci-font-sizes-sm);
+      font-weight: 600;
+      max-width: 7rem;
+      min-width: var(--jaci-sizes-0);
+}
+
+    .jaci-date-picker__yearSelect:is(:focus-visible, [data-focus-visible]) {
+      border-color: var(--jaci-colors-accent-default);
+      outline: 2px solid;
+      outline-color: var(--jaci-colors-accent-default);
+      outline-offset: 1px;
+}
+
+    .jaci-date-picker__timeField {
+      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-3);
+      background-color: var(--jaci-colors-surface-default);
+      box-sizing: border-box;
+      color: var(--jaci-colors-fg-default);
+      font-family: system-ui, sans-serif;
+      font-size: var(--jaci-font-sizes-sm);
+      min-height: var(--jaci-sizes-9);
+      width: 100%;
+}
+
+    .jaci-date-picker__timeField:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+      cursor: not-allowed;
+      opacity: 0.5;
+}
+
+    .jaci-date-picker__timeField:is(:focus, [data-focus]) {
+      border-color: var(--jaci-colors-accent-default);
+      outline: 2px solid;
+      outline-color: var(--jaci-colors-accent-default);
+}
+
     .jaci-date-picker__navigation {
       border: 0;
       border-radius: var(--jaci-radii-md);
@@ -3352,6 +3490,54 @@
       width: 100%;
 }
 
+    .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));

package/package.json

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