@ctrl-ui/react 0.8.19 → 0.8.20

package/dist/styles/recipes/flow.css

@@ -0,0 +1,304 @@
+@layer components {
+  :where([data-control-family="flow"][data-slot="root"]) {
+    --cui-flow-background: var(--canvas);
+    --cui-flow-grid-dot-color: var(--canvas-grid-dot);
+    --cui-flow-edge-stroke: oklch(from var(--muted-foreground) l c h / 0.6);
+    --cui-flow-selected-edge-stroke: var(--primary);
+    --cui-flow-edge-size: 1.5px;
+    --cui-flow-node-background: var(--card);
+    --cui-flow-node-foreground: var(--card-foreground);
+    --cui-flow-node-border-color: var(--border);
+    --cui-flow-node-hover-border-color: oklch(from var(--foreground) l c h / 0.2);
+    --cui-flow-node-selected-border-color: var(--primary);
+    --cui-flow-node-border-width: var(--control-rim-width);
+    --cui-flow-node-radius: var(--radius-lg);
+    --cui-flow-node-shadow: var(--shadow-sm);
+    --cui-flow-handle-size: calc(var(--spacing) * 2);
+    --cui-flow-handle-background: var(--background);
+    --cui-flow-handle-border-color: var(--muted-foreground);
+    --cui-flow-handle-border-width: var(--control-rim-width);
+    --cui-flow-edge-label-background: var(--background);
+    --cui-flow-edge-label-foreground: var(--muted-foreground);
+    --cui-flow-edge-label-border-color: var(--border);
+    --cui-flow-edge-label-border-width: var(--control-rim-width);
+    --cui-flow-controls-item-radius: min(var(--radius-sm), calc(var(--control-h-sm) / 2));
+    --cui-flow-controls-padding: calc(var(--spacing) * 1);
+    --cui-flow-controls-radius: calc(
+      var(--cui-flow-controls-item-radius) +
+      clamp(0px, calc(var(--cui-flow-controls-item-radius) * 1000), var(--cui-flow-controls-padding))
+    );
+    --cui-flow-controls-background: var(--card);
+    --cui-flow-controls-border-color: var(--border);
+    --cui-flow-controls-shadow: var(--shadow-sm);
+    --xy-edge-stroke: var(--cui-flow-edge-stroke);
+    --xy-connectionline-stroke: var(--cui-flow-edge-stroke);
+    --xy-connectionline-stroke-width: var(--cui-flow-edge-size);
+    --xy-selection-background-color: oklch(from var(--primary) l c h / 0.08);
+    --xy-selection-border: var(--control-rim-width) solid oklch(from var(--primary) l c h / 0.4);
+    --xy-attribution-background-color: oklch(from var(--background) l c h / 0.5);
+    background-color: var(--cui-flow-background);
+    color: var(--foreground);
+  }
+
+  :where([data-control-family="flow"][data-slot="root"] .react-flow__background-pattern) {
+    fill: var(--cui-flow-grid-dot-color);
+  }
+
+  :where([data-control-family="flow"][data-slot="root"] .react-flow__attribution a) {
+    color: var(--muted-foreground);
+  }
+
+  :where([data-control-family="flow"][data-slot="panel"]),
+  :where([data-control-family="flow"][data-slot="controls"]) {
+    margin: calc(var(--spacing) * 3);
+  }
+
+  :where([data-control-family="flow"][data-slot="controls"]) {
+    --nest-radius: var(--cui-flow-controls-item-radius);
+    gap: calc(var(--spacing) * 0.5);
+    padding: var(--cui-flow-controls-padding);
+    border-radius: var(--cui-flow-controls-radius);
+    background-color: var(--cui-flow-controls-background);
+    box-shadow:
+      var(--cui-flow-controls-shadow),
+      0 0 0 var(--control-rim-width) var(--cui-flow-controls-border-color);
+  }
+
+  :where([data-control-family="flow"][data-slot="node"]) {
+    overflow: hidden;
+    border: var(--cui-flow-node-border-width) solid var(--cui-flow-node-border-color);
+    border-radius: var(--cui-flow-node-radius);
+    background-color: var(--cui-flow-node-background);
+    color: var(--cui-flow-node-foreground);
+    box-shadow: var(--cui-flow-node-shadow);
+    transition-property: border-color, box-shadow;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--ease-standard);
+  }
+
+  @media (hover: hover) {
+    :where([data-control-family="flow"][data-slot="node"]:hover) {
+      border-color: var(--cui-flow-node-hover-border-color);
+    }
+  }
+
+  :where([data-control-family="flow"][data-slot="node"][data-selected]) {
+    border-color: var(--cui-flow-node-selected-border-color);
+    box-shadow:
+      var(--cui-flow-node-shadow),
+      0 0 0 calc(var(--control-rim-width) * 3) oklch(from var(--cui-flow-node-selected-border-color) l c h / 0.15);
+  }
+
+  :where([data-control-family="flow"][data-slot="node-header"]) {
+    gap: calc(var(--spacing) * 2);
+    min-block-size: calc(var(--spacing) * 10);
+    padding-block: calc(var(--spacing) * 1.5);
+    padding-inline: calc(var(--spacing) * 3) calc(var(--spacing) * 1.5);
+    font-size: var(--text-body);
+    font-weight: var(--font-weight-medium);
+  }
+
+  :where([data-control-family="flow"][data-slot="node-body"]) {
+    gap: calc(var(--spacing) * 1.5);
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block-end: calc(var(--spacing) * 3);
+    font-size: var(--text-caption);
+  }
+
+  :where([data-control-family="flow"][data-slot="handle"]) {
+    inline-size: var(--cui-flow-handle-size);
+    block-size: var(--cui-flow-handle-size);
+    border: var(--cui-flow-handle-border-width) solid var(--cui-flow-handle-border-color);
+    border-radius: 9999px;
+    background-color: var(--cui-flow-handle-background);
+  }
+
+  :where([data-control-family="flow"][data-slot="edge"]) {
+    stroke: var(--cui-flow-edge-stroke);
+    stroke-width: var(--cui-flow-edge-size);
+    transition: stroke var(--duration-fast) var(--ease-standard);
+  }
+
+  :where([data-control-family="flow"][data-slot="edge"][data-dashed]) {
+    stroke-dasharray: 5 5;
+  }
+
+  :where(.react-flow__edge.selected [data-control-family="flow"][data-slot="edge"]) {
+    stroke: var(--cui-flow-selected-edge-stroke);
+  }
+
+  :where([data-control-family="flow"][data-slot="edge-label"]) {
+    gap: calc(var(--spacing) * 1);
+  }
+
+  :where([data-control-family="flow"][data-slot="edge-label-chip"]) {
+    padding-block: calc(var(--spacing) * 0.5);
+    padding-inline: calc(var(--spacing) * 2);
+    border: var(--cui-flow-edge-label-border-width) solid var(--cui-flow-edge-label-border-color);
+    border-radius: 9999px;
+    background-color: var(--cui-flow-edge-label-background);
+    color: var(--cui-flow-edge-label-foreground);
+    font-size: var(--text-caption);
+    font-weight: var(--font-weight-medium);
+  }
+}
+
+@property --cui-flow-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-flow-grid-dot-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-flow-edge-stroke {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-flow-selected-edge-stroke {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-flow-edge-size {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-flow-node-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-flow-node-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-flow-node-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-flow-node-hover-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-flow-node-selected-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-flow-node-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-flow-node-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-flow-node-shadow {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --cui-flow-handle-size {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-flow-handle-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-flow-handle-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-flow-handle-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-flow-edge-label-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-flow-edge-label-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-flow-edge-label-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-flow-edge-label-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-flow-controls-item-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-flow-controls-padding {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-flow-controls-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-flow-controls-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-flow-controls-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-flow-controls-shadow {
+  syntax: "*";
+  inherits: true;
+}

package/dist/styles/recipes/infinite-canvas.css

@@ -1,7 +1,7 @@
 @layer components {
   :where([data-control-family="infinite-canvas"][data-slot="root"]) {
     --cui-infinite-canvas-background: var(--canvas);
-    --cui-infinite-canvas-grid-dot-color: oklch(from var(--foreground) l c h / 0.16);
+    --cui-infinite-canvas-grid-dot-color: var(--canvas-grid-dot);
     --cui-infinite-canvas-border-color: var(--border);
     --cui-infinite-canvas-controls-item-radius: min(var(--radius-sm), calc(var(--control-h-sm) / 2));
     --cui-infinite-canvas-controls-padding: calc(var(--spacing) * 1);

package/dist/styles/recipes/item.css

@@ -5,6 +5,9 @@
     --cui-item-hover-border-color: var(--_item-border-color);
     --cui-item-border-width: 0px;
     --cui-item-active-scale: 0.99;
+    --cui-item-gap: calc(var(--spacing) * 3);
+    --cui-item-padding-block: calc(var(--spacing) * 3);
+    --cui-item-padding-inline: calc(var(--spacing) * 3);
     --_item-background: transparent;
     --_item-border-color: transparent;
     outline: var(--cui-item-border-width) solid var(--_item-border-color);
@@ -16,8 +19,9 @@
     transition-property: scale;
     transition-duration: var(--duration-fast);
     transition-timing-function: var(--ease-standard);
-    gap: calc(var(--spacing) * 3);
-    padding: calc(var(--spacing) * 3);
+    gap: var(--cui-item-gap);
+    padding-block: var(--cui-item-padding-block);
+    padding-inline: var(--cui-item-padding-inline);
   }
 
   :where([data-control-family="item"][data-slot="content"]) {
@@ -28,6 +32,21 @@
     gap: calc(var(--spacing) * 1.5);
   }
 
+  @media (hover: hover) and (pointer: fine) {
+    :where([data-control-family="item"][data-slot="actions"][data-show-on-hover]) {
+      opacity: 0;
+      transition: opacity var(--duration-fast) var(--ease-standard);
+    }
+
+    :where(
+        [data-control-family="item"][data-slot="root"]:is(:hover, :focus-within)
+          [data-control-family="item"][data-slot="actions"][data-show-on-hover]
+      ),
+    :where([data-control-family="item"][data-slot="actions"][data-show-on-hover]:has([data-popup-open])) {
+      opacity: 1;
+    }
+  }
+
   :where([data-control-family="item"][data-slot="header"]),
   :where([data-control-family="item"][data-slot="footer"]) {
     gap: calc(var(--spacing) * 2);
@@ -121,3 +140,21 @@
   inherits: true;
   initial-value: 1;
 }
+
+@property --cui-item-gap {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-item-padding-block {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-item-padding-inline {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}

package/dist/styles/recipes/markdown-editor.css

@@ -5,7 +5,8 @@
     --cui-markdown-editor-border-width: var(--control-rim-width);
     --cui-markdown-editor-border-color: var(--border);
     --cui-markdown-editor-radius: var(--radius-panel);
-    --cui-markdown-editor-padding: calc(var(--spacing) * 3);
+    --cui-markdown-editor-padding: calc(var(--spacing) * 4);
+    --cui-markdown-editor-gutter-size: var(--control-h-xs);
     --cui-markdown-editor-min-height: calc(var(--spacing) * 32);
     --cui-markdown-editor-max-height: 60dvh;
     --cui-markdown-editor-gap: calc(var(--spacing) * 3);
@@ -19,17 +20,48 @@
     font-size: var(--text-body);
     line-height: var(--leading-relaxed);
   }
-  :where([data-control-family="markdown-editor"][data-slot="content"] .tiptap) {
-    min-block-size: var(--cui-markdown-editor-min-height);
+  :where([data-control-family="markdown-editor"][data-slot="content"]) {
+    position: relative;
     max-block-size: var(--cui-markdown-editor-max-height);
     overflow: auto;
+  }
+  :where([data-control-family="markdown-editor"][data-slot="content"] .tiptap) {
+    min-block-size: var(--cui-markdown-editor-min-height);
     padding: var(--cui-markdown-editor-padding);
+    padding-inline-start: calc(var(--cui-markdown-editor-padding) + var(--cui-markdown-editor-gutter-size));
     overflow-wrap: anywhere;
     white-space: pre-wrap;
+    outline: none;
+  }
+  :where([data-control-family="markdown-editor"][data-slot="root"]:has(.tiptap:focus-visible, textarea:focus-visible)) {
+    outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring);
+    outline-offset: var(--focus-ring-offset);
+  }
+  :where([data-control-family="markdown-editor"] > [data-control-family="toolbar"]) {
+    padding-inline: var(--cui-markdown-editor-padding);
+    border-block-end: var(--cui-markdown-editor-border-width) solid var(--cui-markdown-editor-border-color);
+  }
+  :where([data-control-family="markdown-editor"] [data-markdown-drag-handle]) {
+    position: absolute;
+    inset-inline-start: calc(var(--cui-markdown-editor-padding) / 2);
+    top: var(--cui-markdown-editor-padding);
+    cursor: grab;
+    opacity: 0;
+    pointer-events: none;
   }
-  :where([data-control-family="markdown-editor"] .tiptap:focus-visible) {
-    outline: 2px solid var(--ring);
-    outline-offset: -2px;
+  :where([data-control-family="markdown-editor"] [data-markdown-drag-handle]:is([data-visible], :focus-visible)) {
+    opacity: 1;
+    pointer-events: auto;
+  }
+  :where([data-control-family="markdown-editor"] [data-markdown-drag-handle]:active) {
+    cursor: grabbing;
+  }
+  :where([data-control-family="markdown-editor"][data-slot="source"] textarea) {
+    --focus-ring-width: 0px;
+    min-block-size: var(--cui-markdown-editor-min-height);
+    max-block-size: var(--cui-markdown-editor-max-height);
+    padding: 0;
+    font-family: var(--font-mono);
   }
   :where([data-control-family="markdown-editor"][data-slot="source"]),
   :where([data-control-family="markdown-editor"][data-slot="uploads"]) {
@@ -159,6 +191,12 @@
   initial-value: 0px;
 }
 
+@property --cui-markdown-editor-gutter-size {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
 @property --cui-markdown-editor-min-height {
   syntax: "<length>";
   inherits: true;

package/dist/styles/recipes/morphing-panel.css

@@ -1,23 +1,54 @@
 @layer components {
+  :where([data-control-family="morphing-panel"][data-slot="positioner"]) {
+    place-items: center;
+    pointer-events: none;
+  }
+
+  :where([data-control-family="morphing-panel"][data-slot="positioner"] > [data-slot="root"]) {
+    pointer-events: auto;
+  }
+
+  :where([data-control-family="morphing-panel"][data-slot="positioner"][data-anchor="top-start"]) {
+    place-items: start;
+  }
+
+  :where([data-control-family="morphing-panel"][data-slot="positioner"][data-anchor="top-end"]) {
+    place-items: start end;
+  }
+
+  :where([data-control-family="morphing-panel"][data-slot="positioner"][data-anchor="bottom-start"]) {
+    place-items: end start;
+  }
+
+  :where([data-control-family="morphing-panel"][data-slot="positioner"][data-anchor="bottom-end"]) {
+    place-items: end;
+  }
+
   :where([data-control-family="morphing-panel"][data-slot="root"]) {
     --cui-morphing-panel-radius: var(--radius-control);
     --cui-morphing-panel-background: var(--card);
     --cui-morphing-panel-foreground: var(--card-foreground);
+    --cui-morphing-panel-border-width: var(--control-rim-width);
     --cui-morphing-panel-border-color: oklch(from var(--border) l c h / 0.8);
     --cui-morphing-panel-shadow: var(--shadow-md);
     --cui-morphing-panel-trigger-hover-background: oklch(from var(--foreground) l c h / 0.06);
+    --_morphing-panel-close-size: calc(var(--spacing) * 9);
+    width: min(var(--_morphing-panel-collapsed-width), 100%);
+    height: var(--_morphing-panel-collapsed-height);
     border-radius: var(--cui-morphing-panel-radius);
     background-color: var(--cui-morphing-panel-background);
     color: var(--cui-morphing-panel-foreground);
     box-shadow:
       var(--cui-morphing-panel-shadow),
-      0 0 0 1px var(--cui-morphing-panel-border-color);
+      0 0 0 var(--cui-morphing-panel-border-width) var(--cui-morphing-panel-border-color);
     transition-property: width, height, border-radius, box-shadow;
     transition-duration: var(--duration-slow);
     transition-timing-function: var(--ease-emphasized);
   }
 
   :where([data-control-family="morphing-panel"][data-slot="root"][data-state="open"]) {
+    width: min(var(--_morphing-panel-expanded-width), 100%);
+    height: var(--_morphing-panel-expanded-height);
     --cui-morphing-panel-radius: var(--radius-panel);
     --cui-morphing-panel-shadow: var(--shadow-pop);
   }
@@ -38,16 +69,15 @@
   }
 
   :where([data-control-family="morphing-panel"][data-slot="trigger"][data-state="open"]) {
-    inline-size: calc(var(--spacing) * 9);
-    block-size: calc(var(--spacing) * 9);
+    inline-size: var(--_morphing-panel-close-size);
+    block-size: var(--_morphing-panel-close-size);
     padding: 0;
     border-radius: var(--radius-control);
   }
 
   @media (pointer: coarse) {
-    :where([data-control-family="morphing-panel"][data-slot="trigger"][data-state="open"]) {
-      inline-size: calc(var(--spacing) * 11);
-      block-size: calc(var(--spacing) * 11);
+    :where([data-control-family="morphing-panel"][data-slot="root"]) {
+      --_morphing-panel-close-size: calc(var(--spacing) * 11);
     }
   }
 
@@ -57,14 +87,19 @@
     }
   }
 
-  :where([data-control-family="morphing-panel"][data-slot="trigger"] > svg) {
-    transition-property: rotate;
-    transition-duration: var(--duration-base);
-    transition-timing-function: var(--ease-emphasized);
+  :where([data-control-family="morphing-panel"][data-slot="header"]) {
+    min-height: calc(var(--_morphing-panel-close-size) + var(--spacing) * 4);
+    padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
+    padding-inline-end: calc(var(--_morphing-panel-close-size) + var(--spacing) * 6);
+  }
+
+  :where([data-control-family="morphing-panel"][data-slot="body"]) {
+    padding: calc(var(--spacing) * 4);
   }
 
-  :where([data-control-family="morphing-panel"][data-slot="trigger"][data-state="open"] > svg) {
-    rotate: 45deg;
+  :where([data-control-family="morphing-panel"][data-slot="footer"]) {
+    padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
+    border-top: var(--cui-morphing-panel-border-width) solid var(--cui-morphing-panel-border-color);
   }
 
   :where([data-control-family="morphing-panel"][data-slot="content"]) {
@@ -121,3 +156,9 @@
   inherits: true;
   initial-value: transparent;
 }
+
+@property --cui-morphing-panel-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}

package/dist/styles/recipes/page-layout.css

@@ -14,6 +14,7 @@
     --cui-page-layout-sticky-header-background: oklch(from var(--cui-page-layout-background) l c h / 0.85);
     --cui-page-layout-sticky-header-backdrop-filter: blur(12px);
     background: var(--cui-page-layout-background);
+    container: page-layout / inline-size;
 
     /* Header and body both read this, so they stop at the same right edge. */
     --cui-page-layout-size: calc(var(--cui-page-layout-article-size) + var(--cui-page-layout-padding-inline) * 2);
@@ -143,7 +144,12 @@
     padding-inline: 0;
   }
 
-  @media (width >= 80rem) {
+  :where([data-control-family="page-layout"][data-slot="aside"]) {
+    display: none;
+  }
+
+  /* 55rem = default prose article + column gap + aside + inline padding; container queries cannot read var(). */
+  @container page-layout (width >= 55rem) {
     :where([data-control-family="page-layout"][data-slot="body"][data-aside]),
     :where(
         [data-control-family="page-layout"][data-slot="header"]:has(+ [data-control-family="page-layout"][data-slot="body"][data-aside])
@@ -160,6 +166,10 @@
     :where([data-control-family="page-layout"][data-slot="body"][data-aside]) {
       grid-template-columns: minmax(0, var(--cui-page-layout-article-size)) var(--cui-page-layout-aside-size);
     }
+
+    :where([data-control-family="page-layout"][data-slot="aside"]) {
+      display: block;
+    }
   }
 }