@ctrl-ui/react 0.8.18 → 0.8.20

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/label.css

@@ -0,0 +1,19 @@
+@layer components {
+  :where([data-control-family="label"][data-slot="root"]) {
+    --cui-label-root-foreground: var(--foreground);
+    color: var(--cui-label-root-foreground);
+    font-size: var(--text-label);
+    font-weight: var(--font-weight-medium);
+  }
+
+  :where([data-control-family="label"][data-slot="root"]:has(:disabled, [data-disabled])) {
+    cursor: not-allowed;
+    opacity: var(--disabled-opacity);
+  }
+}
+
+@property --cui-label-root-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}

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

@@ -0,0 +1,234 @@
+@layer components {
+  :where([data-control-family="markdown-editor"][data-slot="root"]) {
+    --cui-markdown-editor-background: var(--background);
+    --cui-markdown-editor-foreground: var(--foreground);
+    --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) * 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);
+    --cui-markdown-editor-muted-foreground: var(--muted-foreground);
+    --cui-markdown-editor-code-background: var(--muted);
+    color: var(--cui-markdown-editor-foreground);
+    background: var(--cui-markdown-editor-background);
+    border: var(--cui-markdown-editor-border-width) solid var(--cui-markdown-editor-border-color);
+    border-radius: var(--cui-markdown-editor-radius);
+    overflow: clip;
+    font-size: var(--text-body);
+    line-height: var(--leading-relaxed);
+  }
+  :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"] [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"]) {
+    padding: var(--cui-markdown-editor-padding);
+  }
+  :where([data-control-family="markdown-editor"] .tiptap > * + *) {
+    margin-block-start: var(--cui-markdown-editor-gap);
+  }
+  :where([data-control-family="markdown-editor"] .tiptap:has(> p:only-child > br:only-child))::before {
+    content: attr(data-placeholder);
+    color: var(--cui-markdown-editor-muted-foreground);
+    pointer-events: none;
+    float: inline-start;
+    block-size: 0;
+  }
+  :where([data-control-family="markdown-editor"] .tiptap h1) {
+    font-size: var(--text-heading-2);
+    font-weight: var(--font-weight-semibold);
+  }
+  :where([data-control-family="markdown-editor"] .tiptap h2) {
+    font-size: var(--text-heading-3);
+    font-weight: var(--font-weight-semibold);
+  }
+  :where([data-control-family="markdown-editor"] .tiptap :is(h3, h4, h5, h6)) {
+    font-size: var(--text-heading-4);
+    font-weight: var(--font-weight-semibold);
+  }
+  :where([data-control-family="markdown-editor"] .tiptap strong) {
+    font-weight: var(--font-weight-semibold);
+  }
+  :where([data-control-family="markdown-editor"] .tiptap em) {
+    font-style: italic;
+  }
+  :where([data-control-family="markdown-editor"] .tiptap s) {
+    text-decoration: line-through;
+  }
+  :where([data-control-family="markdown-editor"] .tiptap a) {
+    text-decoration: underline;
+    color: var(--primary);
+  }
+  :where([data-control-family="markdown-editor"] .tiptap ul) {
+    list-style: disc;
+    padding-inline-start: calc(var(--spacing) * 6);
+  }
+  :where([data-control-family="markdown-editor"] .tiptap ol) {
+    list-style: decimal;
+    padding-inline-start: calc(var(--spacing) * 6);
+  }
+  :where([data-control-family="markdown-editor"] .tiptap ul[data-type="taskList"]) {
+    list-style: none;
+    padding-inline-start: 0;
+  }
+  :where([data-control-family="markdown-editor"] .tiptap li[data-type="taskItem"]) {
+    display: flex;
+    align-items: baseline;
+    gap: var(--cui-markdown-editor-gap);
+  }
+  :where([data-control-family="markdown-editor"] .tiptap li[data-type="taskItem"] > div) {
+    flex: 1;
+    min-inline-size: 0;
+  }
+  :where([data-control-family="markdown-editor"] .tiptap blockquote) {
+    border-inline-start: var(--cui-markdown-editor-border-width) solid var(--cui-markdown-editor-border-color);
+    padding-inline-start: var(--cui-markdown-editor-padding);
+    color: var(--cui-markdown-editor-muted-foreground);
+  }
+  :where([data-control-family="markdown-editor"] .tiptap :is(code, pre)) {
+    font-family: var(--font-mono);
+    background: var(--cui-markdown-editor-code-background);
+    border-radius: var(--radius-sm);
+  }
+  :where([data-control-family="markdown-editor"] .tiptap pre) {
+    padding: var(--cui-markdown-editor-padding);
+    overflow: auto;
+  }
+  :where([data-control-family="markdown-editor"] .tiptap img[src]) {
+    display: block;
+    max-inline-size: 100%;
+    block-size: auto;
+    border-radius: var(--radius-sm);
+  }
+  :where([data-control-family="markdown-editor"] .tiptap .ProseMirror-selectednode) {
+    outline: 2px solid var(--ring);
+  }
+  :where([data-control-family="markdown-editor"] .tiptap [data-image-upload]) {
+    padding: var(--cui-markdown-editor-padding);
+    border: var(--cui-markdown-editor-border-width) dashed var(--cui-markdown-editor-border-color);
+    color: var(--cui-markdown-editor-muted-foreground);
+  }
+  :where([data-control-family="markdown-editor"] .tiptap table) {
+    border-collapse: collapse;
+    inline-size: 100%;
+  }
+  :where([data-control-family="markdown-editor"] .tiptap :is(td, th)) {
+    border: var(--cui-markdown-editor-border-width) solid var(--cui-markdown-editor-border-color);
+    padding: var(--cui-markdown-editor-padding);
+  }
+}
+
+@property --cui-markdown-editor-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-markdown-editor-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-markdown-editor-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-markdown-editor-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-markdown-editor-padding {
+  syntax: "<length>";
+  inherits: true;
+  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;
+  initial-value: 0px;
+}
+
+@property --cui-markdown-editor-max-height {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-markdown-editor-gap {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-markdown-editor-muted-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-markdown-editor-code-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-markdown-editor-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}

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;
+    }
   }
 }
 

package/dist/styles/recipes/resize-handle.css

@@ -0,0 +1,126 @@
+@layer components {
+  :where([data-control-family="resize-handle"][data-slot="root"]) {
+    --cui-resize-handle-size: 10px;
+    --cui-resize-handle-hit-size: var(--target-min);
+    --cui-resize-handle-background: var(--background);
+    --cui-resize-handle-hover-background: oklch(from var(--primary) l c h / 0.1);
+    --cui-resize-handle-border-color: var(--primary);
+    --cui-resize-handle-border-width: var(--control-rim-width);
+    --cui-resize-handle-radius: 0px;
+    inline-size: var(--cui-resize-handle-hit-size);
+    block-size: var(--cui-resize-handle-hit-size);
+    translate: -50% -50%;
+    padding: 0;
+    border: 0;
+    background: transparent;
+  }
+
+  :where([data-control-family="resize-handle"][data-slot="root"])::before {
+    content: "";
+    position: absolute;
+    inset: 50% auto auto 50%;
+    inline-size: var(--cui-resize-handle-size);
+    block-size: var(--cui-resize-handle-size);
+    translate: -50% -50%;
+    border: var(--cui-resize-handle-border-width) solid var(--cui-resize-handle-border-color);
+    border-radius: var(--cui-resize-handle-radius);
+    background: var(--cui-resize-handle-background);
+    transition: background-color var(--duration-fast) var(--ease-standard);
+  }
+
+  @media (hover: hover) {
+    :where([data-control-family="resize-handle"][data-slot="root"]:hover)::before {
+      background: var(--cui-resize-handle-hover-background);
+    }
+  }
+
+  :where([data-control-family="resize-handle"][data-slot="root"][data-direction="n"]) {
+    top: 0;
+    left: 50%;
+    cursor: ns-resize;
+  }
+
+  :where([data-control-family="resize-handle"][data-slot="root"][data-direction="ne"]) {
+    top: 0;
+    left: 100%;
+    cursor: nesw-resize;
+  }
+
+  :where([data-control-family="resize-handle"][data-slot="root"][data-direction="e"]) {
+    top: 50%;
+    left: 100%;
+    cursor: ew-resize;
+  }
+
+  :where([data-control-family="resize-handle"][data-slot="root"][data-direction="se"]) {
+    top: 100%;
+    left: 100%;
+    cursor: nwse-resize;
+  }
+
+  :where([data-control-family="resize-handle"][data-slot="root"][data-direction="s"]) {
+    top: 100%;
+    left: 50%;
+    cursor: ns-resize;
+  }
+
+  :where([data-control-family="resize-handle"][data-slot="root"][data-direction="sw"]) {
+    top: 100%;
+    left: 0;
+    cursor: nesw-resize;
+  }
+
+  :where([data-control-family="resize-handle"][data-slot="root"][data-direction="w"]) {
+    top: 50%;
+    left: 0;
+    cursor: ew-resize;
+  }
+
+  :where([data-control-family="resize-handle"][data-slot="root"][data-direction="nw"]) {
+    top: 0;
+    left: 0;
+    cursor: nwse-resize;
+  }
+}
+
+@property --cui-resize-handle-size {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-resize-handle-hit-size {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-resize-handle-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-resize-handle-hover-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-resize-handle-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-resize-handle-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-resize-handle-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}