@godxjp/ui 19.6.0 → 20.0.0

package/dist/styles/control.css

@@ -1777,6 +1777,86 @@
     }
   }
 
+  .ui-calendar[data-bordered="true"] .ui-calendar-day,
+  .ui-calendar[data-bordered="true"] .ui-calendar-weekday {
+    border-inline-start: 1px solid hsl(var(--border));
+    border-block-start: 1px solid hsl(var(--border));
+  }
+
+  .ui-calendar[data-bordered="true"] .ui-calendar-week,
+  .ui-calendar[data-bordered="true"] .ui-calendar-weekdays {
+    border-inline-end: 1px solid hsl(var(--border));
+  }
+
+  .ui-calendar[data-bordered="true"] .ui-calendar-weekday {
+    background-color: hsl(var(--muted));
+
+    border-radius: 0;
+  }
+
+  .ui-calendar[data-bordered="true"] .ui-calendar-grid {
+    border-block-end: 1px solid hsl(var(--border));
+  }
+
+  .ui-calendar[data-bordered="true"] .ui-calendar-day.invisible {
+    visibility: visible;
+  }
+
+  .ui-calendar[data-bordered="true"] .ui-calendar-day.invisible > * {
+    visibility: hidden;
+  }
+
+  .ui-calendar[data-bordered="true"] .ui-calendar-day-disabled {
+    opacity: 1;
+  }
+
+  .ui-calendar[data-bordered="true"] .ui-calendar-day-disabled .ui-calendar-day-button {
+    opacity: var(--disabled-opacity);
+  }
+
+  .ui-calendar[data-bordered="true"] .ui-calendar-week-number,
+  .ui-calendar[data-bordered="true"] .ui-calendar-week-number-header {
+    border-inline-start: 1px solid hsl(var(--border));
+    border-block-start: 1px solid hsl(var(--border));
+  }
+
+  .ui-calendar[data-bordered="true"] .ui-calendar-day-button {
+    --button-radius: 0;
+    inline-size: 100%;
+  }
+
+  .ui-calendar[data-bordered="true"] .ui-calendar-week {
+    margin-block-start: 0;
+  }
+
+  .ui-calendar[data-bordered="true"] .ui-calendar-grid {
+    margin-block-start: var(--calendar-grid-space-block-start);
+  }
+
+  .ui-calendar[data-width="full"] {
+    inline-size: 100%;
+  }
+
+  .ui-calendar[data-width="full"] .ui-calendar-months {
+    flex-direction: column;
+  }
+
+  .ui-calendar[data-width="full"] .ui-calendar-month {
+    inline-size: 100%;
+  }
+
+  .ui-calendar[data-width="full"] .ui-calendar-weekday,
+  .ui-calendar[data-width="full"] .ui-calendar-day {
+    inline-size: auto;
+    flex: 1 1 0;
+  }
+
+  .ui-calendar[data-width="full"] .ui-calendar-day-button {
+    inline-size: 100%;
+
+    max-inline-size: none;
+  }
+
   .ui-calendar-month {
     position: relative;
     display: flex;
@@ -1802,6 +1882,7 @@
     position: absolute;
     inset-inline: 0;
     inset-block-start: var(--calendar-nav-space-block-start);
+    block-size: var(--control-height);
     z-index: 10;
     display: flex;
     align-items: center;
@@ -1820,6 +1901,8 @@
   }
 
   .ui-calendar-chevron {
+
+    fill: none;
     inline-size: var(--calendar-chevron-size);
     block-size: var(--calendar-chevron-size);
   }
@@ -1857,6 +1940,8 @@
   }
 
   .ui-calendar .ui-calendar-day-button {
+
+    color: inherit;
     inline-size: var(--control-height);
     block-size: var(--control-height);
     padding: 0;
@@ -1868,11 +1953,67 @@
     opacity: 1;
   }
 
-  .ui-calendar-day-disabled {
+  .ui-calendar .ui-calendar-day.day-selected .ui-calendar-day-button,
+  .ui-calendar .ui-calendar-day.day-selected .ui-calendar-day-button:hover,
+  .ui-calendar .ui-calendar-day.day-selected .ui-calendar-day-button:focus {
+    background-color: hsl(var(--primary));
+    color: hsl(var(--primary-foreground));
+  }
+
+  .ui-calendar .ui-calendar-day.day-today:not(.day-selected) .ui-calendar-day-button {
+    box-shadow: inset 0 0 0 1px hsl(var(--primary));
+    color: hsl(var(--text-primary));
+    font-weight: var(--font-weight-medium);
+  }
+
+  .ui-calendar .ui-calendar-day.day-outside:not(.day-selected) .ui-calendar-day-button {
     color: hsl(var(--muted-foreground));
+  }
+
+  .ui-calendar .ui-calendar-day.day-range-middle.day-selected .ui-calendar-day-button,
+  .ui-calendar .ui-calendar-day.day-range-middle.day-selected .ui-calendar-day-button:hover,
+  .ui-calendar .ui-calendar-day.day-range-middle.day-selected .ui-calendar-day-button:focus,
+  .ui-calendar .ui-calendar-day.day-range-middle .ui-calendar-day-button {
+    background-color: hsl(var(--accent));
+    color: hsl(var(--accent-foreground));
+    border-radius: 0;
+  }
+
+  .ui-calendar .ui-calendar-day.day-range-start:not(.day-range-end) .ui-calendar-day-button {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  .ui-calendar .ui-calendar-day.day-range-end:not(.day-range-start) .ui-calendar-day-button {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+
+  .ui-calendar .ui-calendar-day.day-today:not(:has(button)) {
+    box-shadow: inset 0 0 0 1px hsl(var(--primary));
+    color: hsl(var(--text-primary));
+    font-weight: var(--font-weight-medium);
+    border-radius: var(--calendar-day-radius);
+  }
+
+  .ui-calendar .ui-calendar-day.day-outside:not(:has(button)) {
+    color: hsl(var(--muted-foreground));
+  }
+
+  .ui-calendar .ui-calendar-day.day-selected:not(:has(button)) {
+    background-color: hsl(var(--primary));
+    color: hsl(var(--primary-foreground));
+    border-radius: var(--calendar-day-radius);
+  }
+
+  .ui-calendar-day-disabled {
     opacity: var(--disabled-opacity);
   }
 
+  .ui-calendar .ui-calendar-day-disabled .ui-calendar-day-button {
+    color: hsl(var(--muted-foreground));
+  }
+
   .ui-calendar-footer {
     display: flex;
     align-items: center;

package/dist/styles/core.css

@@ -1,6 +1,9 @@
 
-@import "sonner/dist/styles.css";
-@import "react-day-picker/style.css";
+
+@layer theme, base, vendor, components, utilities;
+
+@import "sonner/dist/styles.css" layer(vendor);
+@import "react-day-picker/style.css" layer(vendor);
 @import "./base.css";
 @import "./shell-layout.css";
 @import "./motion.css";

package/dist/styles/data-display-layout.css

@@ -174,11 +174,83 @@
     );
   }
 
+  .ui-progress[data-breakdown] .ui-progress-track {
+    display: flex;
+    height: var(--progress-breakdown-block-size);
+    border-radius: var(--progress-breakdown-radius);
+  }
+
+  .ui-progress-segment {
+    height: 100%;
+  }
+
+  .ui-progress-segment[data-tone="success"] {
+    background: hsl(var(--success));
+  }
+
+  .ui-progress-segment[data-tone="warning"] {
+    background: hsl(var(--warning));
+  }
+
+  .ui-progress-segment[data-tone="destructive"] {
+    background: hsl(var(--destructive));
+  }
+
   .ui-progress-label {
     color: hsl(var(--muted-foreground));
     font-size: var(--progress-label-font-size);
   }
 
+  .ui-legend {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--legend-gap);
+    color: var(--legend-color, hsl(var(--muted-foreground)));
+    font-size: var(--legend-font-size);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .ui-legend-item {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--legend-item-gap);
+  }
+
+  .ui-legend-swatch {
+    flex: none;
+    inline-size: var(--legend-swatch-size);
+    block-size: var(--legend-swatch-size);
+    border-radius: var(--legend-swatch-radius);
+  }
+
+  .ui-legend-swatch[data-tone="default"] {
+    background: hsl(var(--primary));
+  }
+
+  .ui-legend-swatch[data-tone="success"] {
+    background: hsl(var(--success));
+  }
+
+  .ui-legend-swatch[data-tone="warning"] {
+    background: hsl(var(--warning));
+  }
+
+  .ui-legend-swatch[data-tone="destructive"] {
+    background: hsl(var(--destructive));
+  }
+
+  .ui-legend-swatch[data-tone="info"] {
+    background: hsl(var(--info));
+  }
+
+  .ui-legend-swatch[data-tone="muted"],
+  .ui-legend-swatch[data-tone="neutral"] {
+    background: hsl(var(--muted-foreground));
+  }
+
   .ui-tree-list {
     display: flex;
     flex-direction: column;

package/dist/styles/focus-ring.css

@@ -28,6 +28,8 @@
     .sb-user,
     .tb-icon-btn
   ):focus-visible,
+
+  .ui-checkbox[data-focus-visible],
   .ui-control-trigger[data-state="open"],
   .ui-tag-input:focus-within,
   .ui-control-composite-field:focus-within,
@@ -71,6 +73,8 @@
       .sb-user,
       .tb-icon-btn
     ):focus-visible,
+
+  :root[data-focus-outline="on"] .ui-checkbox[data-focus-visible],
   :root[data-focus-outline="on"] .ui-control-trigger[data-state="open"],
   :root[data-focus-outline="on"] .ui-tag-input:focus-within,
   :root[data-focus-outline="on"] .ui-control-composite-field:focus-within,

package/dist/styles/index.css

@@ -1,6 +1,9 @@
 
-@import "sonner/dist/styles.css";
-@import "react-day-picker/style.css";
+
+@layer theme, base, vendor, components, utilities;
+
+@import "sonner/dist/styles.css" layer(vendor);
+@import "react-day-picker/style.css" layer(vendor);
 @import "./base.css";
 
 @import "./fonts.css";

package/dist/styles/layout.css

@@ -115,6 +115,15 @@
     flex-wrap: wrap;
   }
 
+  .ui-flex[data-fill] {
+    flex: 1 1 0;
+    min-inline-size: 0;
+  }
+
+  .ui-flex[data-width-raw] {
+    flex: none;
+  }
+
   .ui-flex[data-align="start"] {
     align-items: flex-start;
   }
@@ -163,6 +172,50 @@
     gap: 0;
   }
 
+  .ui-flex-gap-1 {
+    gap: var(--space-1);
+  }
+  .ui-flex-gap-2 {
+    gap: var(--space-2);
+  }
+  .ui-flex-gap-3 {
+    gap: var(--space-3);
+  }
+  .ui-flex-gap-4 {
+    gap: var(--space-4);
+  }
+  .ui-flex-gap-5 {
+    gap: var(--space-5);
+  }
+  .ui-flex-gap-6 {
+    gap: var(--space-6);
+  }
+  .ui-flex-gap-8 {
+    gap: var(--space-8);
+  }
+  .ui-flex-gap-10 {
+    gap: var(--space-10);
+  }
+  .ui-flex-gap-12 {
+    gap: var(--space-12);
+  }
+
+  .ui-flex[data-direction="row"].ui-flex-gap-xs {
+    gap: var(--space-inline-xs);
+  }
+  .ui-flex[data-direction="row"].ui-flex-gap-sm {
+    gap: var(--space-inline-sm);
+  }
+  .ui-flex[data-direction="row"].ui-flex-gap-md {
+    gap: var(--space-inline-md);
+  }
+  .ui-flex[data-direction="row"].ui-flex-gap-lg {
+    gap: var(--space-inline-lg);
+  }
+  .ui-flex[data-direction="row"].ui-flex-gap-xl {
+    gap: var(--space-inline-xl);
+  }
+
   .ui-flex-gap-xs {
     gap: var(--space-stack-xs);
   }
@@ -262,6 +315,37 @@
     gap: var(--space-stack-xl);
   }
 
+  .ui-responsive-grid[data-gap="0"] {
+    gap: 0;
+  }
+  .ui-responsive-grid[data-gap="1"] {
+    gap: var(--space-1);
+  }
+  .ui-responsive-grid[data-gap="2"] {
+    gap: var(--space-2);
+  }
+  .ui-responsive-grid[data-gap="3"] {
+    gap: var(--space-3);
+  }
+  .ui-responsive-grid[data-gap="4"] {
+    gap: var(--space-4);
+  }
+  .ui-responsive-grid[data-gap="5"] {
+    gap: var(--space-5);
+  }
+  .ui-responsive-grid[data-gap="6"] {
+    gap: var(--space-6);
+  }
+  .ui-responsive-grid[data-gap="8"] {
+    gap: var(--space-8);
+  }
+  .ui-responsive-grid[data-gap="10"] {
+    gap: var(--space-10);
+  }
+  .ui-responsive-grid[data-gap="12"] {
+    gap: var(--space-12);
+  }
+
   .ui-responsive-grid > * {
     min-width: 0;
   }
@@ -390,6 +474,23 @@
     gap: 0;
   }
 
+  .ui-split-pane-scope[data-fill="true"] {
+    display: grid;
+    grid-template-rows: minmax(0, 1fr);
+    block-size: 100%;
+    min-block-size: 0;
+  }
+
+  .ui-split-pane[data-fill="true"] {
+    grid-template-rows: minmax(0, 1fr);
+    min-block-size: 0;
+  }
+
+  .ui-split-pane[data-fill="true"] > .ui-split-pane-main,
+  .ui-split-pane[data-fill="true"] > .ui-split-pane-aside {
+    min-block-size: 0;
+  }
+
   .ui-resizable-panel-group {
     display: flex;
     min-height: 0;
@@ -817,6 +918,11 @@
     padding: var(--empty-state-space-y) var(--empty-state-space-x);
   }
 
+  .ui-empty-state[data-variant="page"] {
+    min-block-size: 100%;
+    justify-content: center;
+  }
+
   .ui-empty-state-title {
     font-size: var(--font-size-base);
     font-weight: var(--font-weight-medium);

package/dist/styles/shell-layout.css

@@ -17,7 +17,7 @@
   }
 
   .app-root[data-collapsed="true"] {
-    grid-template-columns: var(--app-shell-rail-width) minmax(0, 1fr);
+    grid-template-columns: var(--app-shell-sidebar-collapsed-width) minmax(0, 1fr);
   }
 
   .app-root[data-topbar-span="full"] {
@@ -27,6 +27,31 @@
       "sidebar footer";
   }
 
+  .app-root[data-nav-rail] {
+    grid-template-areas:
+      "navrail sidebar topbar"
+      "navrail sidebar main"
+      "navrail sidebar footer";
+    grid-template-columns:
+      var(--app-shell-nav-rail-width)
+      var(--app-shell-sidebar-width)
+      minmax(0, 1fr);
+  }
+
+  .app-root[data-nav-rail][data-collapsed="true"] {
+    grid-template-columns:
+      var(--app-shell-nav-rail-width)
+      var(--app-shell-sidebar-collapsed-width)
+      minmax(0, 1fr);
+  }
+
+  .app-root[data-nav-rail][data-topbar-span="full"] {
+    grid-template-areas:
+      "topbar  topbar  topbar"
+      "navrail sidebar main"
+      "navrail sidebar footer";
+  }
+
   .app-root[data-topbar="none"] {
     grid-template-rows: auto minmax(0, 1fr) auto;
   }
@@ -53,6 +78,21 @@
     color: hsl(var(--foreground));
   }
 
+  .app-nav-rail {
+    grid-area: navrail;
+    display: flex;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+    flex-direction: column;
+    align-items: center;
+    overflow: clip;
+    overflow-clip-margin: var(--focus-ring-clip-margin);
+    border-inline-end: 1px solid hsl(var(--border));
+    background: hsl(var(--muted));
+    color: hsl(var(--foreground));
+  }
+
   .app-topbar {
     grid-area: topbar;
     display: flex;
@@ -477,11 +517,39 @@
     }
   }
 
+  .app-sidebar-logo {
+    display: flex;
+    block-size: var(--app-shell-bar-height);
+    min-inline-size: 0;
+    align-items: center;
+    border-block-end: 1px solid hsl(var(--border));
+    padding-inline: var(--space-3);
+  }
+
+  .app-root[data-collapsed="true"] .app-sidebar-logo {
+    justify-content: center;
+    padding-inline: 0;
+  }
+
+  .app-root[data-collapsed="true"] .app-sidebar-logo [data-slot="logo-wordmark"] {
+    display: none;
+  }
+
   .app-topbar-rail {
     display: flex;
     min-width: 0;
     flex: 1;
     align-items: center;
+    align-self: stretch;
+    gap: var(--space-3);
+  }
+
+  .app-topbar-custom {
+    display: flex;
+    min-width: 0;
+    flex: 1;
+    align-items: center;
+    align-self: stretch;
     gap: var(--space-3);
   }
 
@@ -490,6 +558,7 @@
     display: flex;
     min-width: 0;
     align-items: center;
+    align-self: stretch;
     gap: var(--space-2);
   }
 
@@ -524,20 +593,52 @@
     overscroll-behavior: contain;
   }
 
+  .app-mobile-nav-columns {
+    display: flex;
+    min-height: 0;
+    flex: 1;
+    gap: var(--space-2);
+  }
+
+  .app-mobile-nav-rail {
+    display: flex;
+    min-height: 0;
+    flex: 0 0 auto;
+    flex-direction: column;
+    border-inline-end: 1px solid hsl(var(--border));
+    inline-size: var(--app-shell-nav-rail-width);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+
+  .app-mobile-nav-sections {
+    display: flex;
+    min-width: 0;
+    min-height: 0;
+    flex: 1;
+    flex-direction: column;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+
   .app-topbar-spacer {
     flex: 1;
   }
 
   .app-breadcrumb {
     border-bottom: 1px solid hsl(var(--border));
-    padding: var(--space-2) var(--space-4);
+
+    padding: var(--space-2) var(--space-page-active-x);
     color: hsl(var(--muted-foreground));
     font-size: var(--font-size-base);
   }
 
   @media (width <= 56.25rem) {
     .app-root,
-    .app-root[data-collapsed="true"] {
+    .app-root[data-collapsed="true"],
+    .app-root[data-nav-rail],
+    .app-root[data-nav-rail][data-collapsed="true"],
+    .app-root[data-nav-rail][data-topbar-span="full"] {
       grid-template-areas:
         "topbar"
         "main"
@@ -545,7 +646,8 @@
       grid-template-columns: minmax(0, 1fr);
     }
 
-    .app-sidebar {
+    .app-sidebar,
+    .app-nav-rail {
       display: none;
     }
 
@@ -570,7 +672,7 @@
     }
 
     .app-root[data-responsive-navigation="docked"][data-collapsed="true"] {
-      grid-template-columns: var(--app-shell-rail-width) minmax(0, 1fr);
+      grid-template-columns: var(--app-shell-sidebar-collapsed-width) minmax(0, 1fr);
     }
 
     .app-root[data-responsive-navigation="docked"][data-topbar-span="full"] {
@@ -580,7 +682,33 @@
         "sidebar footer";
     }
 
-    .app-root[data-responsive-navigation="docked"] > .app-sidebar {
+    .app-root[data-responsive-navigation="docked"][data-nav-rail] {
+      grid-template-areas:
+        "navrail sidebar topbar"
+        "navrail sidebar main"
+        "navrail sidebar footer";
+      grid-template-columns:
+        var(--app-shell-nav-rail-width)
+        var(--app-shell-sidebar-width)
+        minmax(0, 1fr);
+    }
+
+    .app-root[data-responsive-navigation="docked"][data-nav-rail][data-collapsed="true"] {
+      grid-template-columns:
+        var(--app-shell-nav-rail-width)
+        var(--app-shell-sidebar-collapsed-width)
+        minmax(0, 1fr);
+    }
+
+    .app-root[data-responsive-navigation="docked"][data-nav-rail][data-topbar-span="full"] {
+      grid-template-areas:
+        "topbar  topbar  topbar"
+        "navrail sidebar main"
+        "navrail sidebar footer";
+    }
+
+    .app-root[data-responsive-navigation="docked"] > .app-sidebar,
+    .app-root[data-responsive-navigation="docked"] > .app-nav-rail {
       display: flex;
     }
 
@@ -685,8 +813,11 @@
   }
 
   .ui-org-switcher-popover {
-    width: min(var(--org-switcher-menu-width), calc(100vw - var(--space-4)));
-    padding: 0;
+    --popover-surface-inline-size: min(
+      var(--org-switcher-menu-width),
+      calc(100vw - var(--space-4))
+    );
+    --popover-space-inset: 0;
   }
 
   .ui-org-switcher-sheet {
@@ -1170,6 +1301,7 @@
 
   @supports not (overflow-clip-margin: 1px) {
     .app-sidebar,
+    .app-nav-rail,
     .app-topbar,
     .ui-topbar,
     .ui-topbar-start,

package/dist/styles/text-layout.css

@@ -62,21 +62,22 @@
   [data-slot="heading"][data-tone="primary"] {
     color: hsl(var(--primary));
   }
+
   [data-slot="text"][data-tone="success"],
   [data-slot="heading"][data-tone="success"] {
-    color: hsl(var(--success));
+    color: hsl(var(--text-success));
   }
   [data-slot="text"][data-tone="warning"],
   [data-slot="heading"][data-tone="warning"] {
-    color: hsl(var(--warning));
+    color: hsl(var(--text-warning));
   }
   [data-slot="text"][data-tone="destructive"],
   [data-slot="heading"][data-tone="destructive"] {
-    color: hsl(var(--destructive));
+    color: hsl(var(--text-error));
   }
   [data-slot="text"][data-tone="info"],
   [data-slot="heading"][data-tone="info"] {
-    color: hsl(var(--info));
+    color: hsl(var(--text-info));
   }
 
   [data-slot="text"][data-align="start"],