@godxjp/ui 19.6.0 → 20.1.0

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;
@@ -200,12 +272,8 @@
     background: var(--tree-item-active-background, hsl(var(--primary) / 0.05));
   }
 
-  .ui-tree-item[data-depth="1"] {
-    margin-inline-start: 1.375rem;
-  }
-
-  .ui-tree-item[data-depth="2"] {
-    margin-inline-start: 2.75rem;
+  .ui-tree-item {
+    margin-inline-start: calc(var(--tree-item-depth, 0) * var(--tree-item-indent-width));
   }
 
   .ui-tree-item > svg {
@@ -551,6 +619,14 @@
   [data-slot="list-row"]:not(:last-child) {
     border-block-end: var(--list-row-border, 1px solid hsl(var(--border)));
   }
+
+  [data-slot="list-row-item"] {
+    display: block;
+    list-style: none;
+  }
+  [data-slot="list-row-item"]:not(:last-child) {
+    border-block-end: var(--list-row-border, 1px solid hsl(var(--border)));
+  }
   [data-slot="list-row-indicator"] {
     position: relative;
     display: block;
@@ -1086,3 +1162,234 @@
     box-shadow: inset calc(-1 * var(--space-1)) 0 0 hsl(var(--primary));
   }
 }
+
+@layer components {
+  .ui-range-timeline {
+    overflow: auto;
+    border: 1px solid hsl(var(--range-timeline-border-color));
+    border-radius: var(--radius-md);
+  }
+  .ui-range-timeline-canvas {
+    min-inline-size: calc(
+      var(--range-timeline-label-width) + var(--range-timeline-columns, 1) *
+        var(--range-timeline-unit-width)
+    );
+  }
+  .ui-range-timeline-header,
+  .ui-range-timeline-row {
+    display: grid;
+    grid-template-columns: var(--range-timeline-label-width) minmax(0, 1fr);
+    min-block-size: var(--range-timeline-row-height);
+  }
+  .ui-range-timeline-header {
+    background: hsl(var(--muted));
+  }
+  .ui-range-timeline-label {
+    position: sticky;
+    inset-inline-start: 0;
+    z-index: 1;
+    background: hsl(var(--card));
+    padding: var(--space-2);
+    border-inline-end: 1px solid hsl(var(--range-timeline-border-color));
+  }
+  .ui-range-timeline-columns {
+    display: flex;
+  }
+  .ui-range-timeline-column {
+    min-inline-size: 0;
+    overflow: hidden;
+    padding: var(--space-2);
+    border-inline-end: 1px solid hsl(var(--range-timeline-border-color));
+  }
+  .ui-range-timeline-track {
+    position: relative;
+    min-inline-size: 0;
+  }
+  .ui-range-timeline-bar {
+    position: absolute;
+    inset-block-start: 50%;
+    transform: translateY(-50%);
+    block-size: var(--range-timeline-bar-height);
+    border-radius: var(--radius-sm);
+    background: hsl(var(--primary));
+    color: hsl(var(--primary-foreground));
+  }
+  .ui-range-timeline-handle {
+    position: absolute;
+    inset-block: 0;
+    min-inline-size: 0;
+    inline-size: var(--control-height-sm);
+    block-size: 100%;
+    padding: 0;
+    color: inherit;
+    touch-action: none;
+    cursor: ew-resize;
+  }
+  .ui-range-timeline-handle[data-edge="start"] {
+    inset-inline-start: 0;
+  }
+  .ui-range-timeline-handle[data-edge="end"] {
+    inset-inline-end: 0;
+  }
+  .ui-range-timeline-today {
+    position: absolute;
+    inset-block: 0;
+    border-inline-start: 1px solid hsl(var(--primary));
+  }
+}
+
+@layer components {
+
+  [data-slot="descriptions"][data-columns-responsive] {
+    --descriptions-column-count: var(--descriptions-column-count-base, 1);
+    grid-template-columns: repeat(var(--descriptions-column-count), minmax(0, 1fr));
+  }
+
+  [data-slot="descriptions-item"][data-span-responsive] {
+    --descriptions-item-span: var(--descriptions-item-span-base, 1);
+    grid-column: span var(--descriptions-item-span) / span var(--descriptions-item-span);
+  }
+
+  [data-slot="descriptions-item"][data-span="filled"] {
+    grid-column: 1 / -1;
+  }
+
+  [data-slot="descriptions"]:not([data-bordered]) [data-slot="descriptions-item"] {
+    border-block-end: var(--descriptions-row-border);
+    min-block-size: var(--descriptions-row-min-height);
+
+    align-content: center;
+  }
+
+  [data-slot="descriptions"][data-bordered] {
+    gap: 0;
+    border-inline-end: var(--descriptions-border-width) solid hsl(var(--border));
+    border-block-end: var(--descriptions-border-width) solid hsl(var(--border));
+    border-radius: var(--descriptions-border-radius);
+    overflow: hidden;
+  }
+
+  [data-slot="descriptions"][data-bordered] [data-slot="descriptions-item"] {
+    gap: 0;
+    border-block-start: var(--descriptions-border-width) solid hsl(var(--border));
+    border-inline-start: var(--descriptions-border-width) solid hsl(var(--border));
+  }
+
+  [data-slot="descriptions"][data-bordered]
+    :is([data-slot="descriptions-label"], [data-slot="descriptions-value"]) {
+    padding: var(--descriptions-cell-padding-y) var(--descriptions-cell-padding-x);
+  }
+
+  [data-slot="descriptions"][data-bordered] [data-slot="descriptions-label"] {
+    background-color: var(--descriptions-label-background, hsl(var(--muted)));
+  }
+
+  [data-slot="descriptions"][data-bordered]
+    [data-slot="descriptions-item"][data-layout="horizontal"]
+    [data-slot="descriptions-label"] {
+    border-inline-end: var(--descriptions-border-width) solid hsl(var(--border));
+  }
+}
+
+@layer godxjp-ui-responsive {
+
+  @media (min-width: 640px) {
+    [data-slot="descriptions"][data-columns-responsive] {
+      --descriptions-column-count: var(
+        --descriptions-column-count-sm,
+        var(--descriptions-column-count-base, 1)
+      );
+    }
+
+    [data-slot="descriptions-item"][data-span-responsive] {
+      --descriptions-item-span: var(
+        --descriptions-item-span-sm,
+        var(--descriptions-item-span-base, 1)
+      );
+    }
+  }
+
+  @media (min-width: 768px) {
+    [data-slot="descriptions"][data-columns-responsive] {
+      --descriptions-column-count: var(
+        --descriptions-column-count-md,
+        var(--descriptions-column-count-sm, var(--descriptions-column-count-base, 1))
+      );
+    }
+
+    [data-slot="descriptions-item"][data-span-responsive] {
+      --descriptions-item-span: var(
+        --descriptions-item-span-md,
+        var(--descriptions-item-span-sm, var(--descriptions-item-span-base, 1))
+      );
+    }
+  }
+
+  @media (min-width: 1024px) {
+    [data-slot="descriptions"][data-columns-responsive] {
+      --descriptions-column-count: var(
+        --descriptions-column-count-lg,
+        var(
+          --descriptions-column-count-md,
+          var(--descriptions-column-count-sm, var(--descriptions-column-count-base, 1))
+        )
+      );
+    }
+
+    [data-slot="descriptions-item"][data-span-responsive] {
+      --descriptions-item-span: var(
+        --descriptions-item-span-lg,
+        var(
+          --descriptions-item-span-md,
+          var(--descriptions-item-span-sm, var(--descriptions-item-span-base, 1))
+        )
+      );
+    }
+  }
+
+  @media (min-width: 1280px) {
+    [data-slot="descriptions"][data-columns-responsive] {
+      --descriptions-column-count: var(
+        --descriptions-column-count-xl,
+        var(
+          --descriptions-column-count-lg,
+          var(
+            --descriptions-column-count-md,
+            var(--descriptions-column-count-sm, var(--descriptions-column-count-base, 1))
+          )
+        )
+      );
+    }
+
+    [data-slot="descriptions-item"][data-span-responsive] {
+      --descriptions-item-span: var(
+        --descriptions-item-span-xl,
+        var(
+          --descriptions-item-span-lg,
+          var(
+            --descriptions-item-span-md,
+            var(--descriptions-item-span-sm, var(--descriptions-item-span-base, 1))
+          )
+        )
+      );
+    }
+  }
+}
+
+@layer components {
+  .ui-text[data-decoration="line-through"] {
+    text-decoration: line-through;
+  }
+  .ui-text[data-decoration="underline"] {
+    text-decoration: underline;
+  }
+  .ui-text[data-decoration="none"] {
+    text-decoration: none;
+  }
+  .ui-text[data-chip] {
+    background: hsl(var(--muted));
+    border-radius: var(--prose-code-radius);
+    padding-inline: var(--prose-code-space-inline);
+    font-size: var(--prose-code-font-size);
+  }
+}

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

@@ -186,6 +186,19 @@
     gap: var(--upload-tile-space-gap);
   }
 
+  .ui-upload-list-thumb {
+    inline-size: var(--control-height-lg);
+    block-size: var(--control-height-lg);
+    object-fit: cover;
+    border-radius: var(--radius);
+    flex-shrink: 0;
+  }
+
+  .ui-upload-picture-item {
+    inline-size: var(--upload-tile-size);
+    overflow-wrap: anywhere;
+  }
+
   .ui-upload-tile {
     position: relative;
     inline-size: var(--upload-tile-size);

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";