@ctrl-ui/react 0.8.10 → 0.8.12

package/dist/styles/recipes/icon-picker.css

@@ -0,0 +1,101 @@
+@layer components {
+  :where([data-control-family="icon-picker"][data-slot="root"]) {
+    --cui-icon-picker-cell-size: calc(var(--spacing) * 10);
+    --cui-icon-picker-cell-radius: var(--radius-control);
+    --cui-icon-picker-foreground: var(--foreground);
+    --cui-icon-picker-active-background: var(--accent);
+    inline-size: calc(var(--_icon-picker-columns) * var(--cui-icon-picker-cell-size) + var(--spacing) * 4);
+    max-inline-size: 100%;
+    color: var(--cui-icon-picker-foreground);
+  }
+  :where([data-control-family="icon-picker"][data-slot="content"]) {
+    padding: calc(var(--spacing) * 2);
+    max-block-size: 16rem;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scrollbar-width: thin;
+  }
+  :where([data-control-family="icon-picker"][data-slot="grid"]) {
+    display: grid;
+    grid-template-columns: repeat(var(--_icon-picker-columns), minmax(0, 1fr));
+  }
+  :where([data-control-family="icon-picker"][data-slot="icon"]) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    block-size: var(--cui-icon-picker-cell-size);
+    min-inline-size: 0;
+    border-radius: var(--cui-icon-picker-cell-radius);
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+    transition: background-color var(--duration-fast) var(--ease-standard);
+  }
+  :where([data-control-family="icon-picker"][data-slot="icon"]:is(:hover, [aria-pressed="true"])) {
+    background: var(--cui-icon-picker-active-background);
+  }
+  :where([data-control-family="icon-picker"][data-slot="icon"] svg) {
+    inline-size: calc(var(--spacing) * 5);
+    block-size: calc(var(--spacing) * 5);
+  }
+  :where([data-control-family="icon-picker"][data-slot="colors"]) {
+    display: flex;
+    gap: calc(var(--spacing) * 1);
+    padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2) 0;
+    overflow-x: auto;
+  }
+  :where([data-control-family="icon-picker"][data-slot="color"]) {
+    display: grid;
+    place-items: center;
+    flex: 1 0 calc(var(--spacing) * 9);
+    block-size: calc(var(--spacing) * 10);
+    border-radius: var(--cui-icon-picker-cell-radius, var(--radius-control));
+    cursor: pointer;
+  }
+  :where([data-control-family="icon-picker"][data-slot="color"] > span) {
+    inline-size: calc(var(--spacing) * 6);
+    block-size: calc(var(--spacing) * 6);
+    border-radius: 50%;
+    background: currentColor;
+  }
+  :where([data-control-family="icon-picker"][data-slot="color"][data-checked] > span) {
+    outline: 2px solid var(--foreground);
+    outline-offset: 3px;
+  }
+  :where([data-control-family="icon-picker"][data-slot="empty"]) {
+    display: grid;
+    place-items: center;
+    min-block-size: calc(var(--spacing) * 20);
+    color: var(--muted-foreground);
+    font-size: var(--text-label);
+  }
+  @media (pointer: coarse) {
+    :where([data-control-family="icon-picker"][data-slot="root"]) {
+      --cui-icon-picker-cell-size: 44px;
+    }
+    :where([data-control-family="icon-picker"][data-slot="color"]) {
+      min-inline-size: 44px;
+      block-size: 44px;
+    }
+  }
+}
+@property --cui-icon-picker-cell-size {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+@property --cui-icon-picker-cell-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+@property --cui-icon-picker-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+@property --cui-icon-picker-active-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}

package/dist/styles/recipes/markdown.css

@@ -12,6 +12,8 @@
     --cui-markdown-table-header-background: var(--muted);
     --cui-markdown-font-size: var(--text-body);
     --cui-markdown-line-height: var(--leading-relaxed);
+    --cui-markdown-flow-gap: calc(var(--spacing) * 4);
+    --cui-markdown-heading-gap: calc(var(--spacing) * 6);
     color: var(--cui-markdown-foreground);
     font-size: var(--cui-markdown-font-size);
     overflow-wrap: break-word;
@@ -180,6 +182,58 @@
     margin-block: calc(var(--spacing) * 4);
   }
 
+  :where([data-control-family="markdown"][data-slot="flow"] > .cui-markdown-streamdown) {
+    display: contents;
+  }
+
+  :where([data-control-family="markdown"][data-slot="flow"]) {
+    display: grid;
+    min-width: 0;
+    row-gap: var(--cui-markdown-flow-gap);
+  }
+
+  :where(
+    :is([data-control-family="markdown"][data-slot="flow"], .cui-markdown-streamdown)
+      > [data-control-family="markdown"]:is(
+        [data-slot="paragraph"],
+        [data-slot="unordered-list"],
+        [data-slot="ordered-list"],
+        [data-slot="blockquote"],
+        [data-slot="separator"],
+        [data-slot="table-scroll"]
+      )
+  ) {
+    margin-block: 0;
+  }
+
+  :where(
+    :is([data-control-family="markdown"][data-slot="flow"], .cui-markdown-streamdown)
+      > [data-control-family="markdown"]:is(
+        [data-slot="h1"],
+        [data-slot="h2"],
+        [data-slot="h3"],
+        [data-slot="h4"],
+        [data-slot="h5"],
+        [data-slot="h6"]
+      )
+  ) {
+    margin-block: max(0px, calc(var(--cui-markdown-heading-gap) - var(--cui-markdown-flow-gap))) 0;
+  }
+
+  :where(
+    :is([data-control-family="markdown"][data-slot="flow"], .cui-markdown-streamdown)
+      > [data-control-family="markdown"]:is(
+        [data-slot="h1"],
+        [data-slot="h2"],
+        [data-slot="h3"],
+        [data-slot="h4"],
+        [data-slot="h5"],
+        [data-slot="h6"]
+      ):first-child
+  ) {
+    margin-block-start: 0;
+  }
+
   :where([data-control-family="markdown"][data-slot="inline-code"]) {
     padding-inline: calc(var(--spacing) * 1);
     padding-block: calc(var(--spacing) * 0.5);
@@ -263,3 +317,15 @@
   inherits: true;
   initial-value: 1.5;
 }
+
+@property --cui-markdown-flow-gap {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-markdown-heading-gap {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}

package/dist/styles/recipes/popup-motion.css

@@ -1,4 +1,14 @@
 @layer components {
+  :where([data-control-family="popup"][data-popup-kind="popover"][data-slot="viewport"]) {
+    block-size: var(--_popover-viewport-height, auto);
+    overflow: clip;
+    transition: block-size var(--duration-base) var(--ease-emphasized);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="popover"][data-slot="viewport-content"]) {
+    display: flow-root;
+  }
+
   :where([data-control-family="popup"][data-popup-kind="sheet"][data-popup-part="surface"]) {
     transition-property: translate;
     transition-duration: var(--duration-base);

package/dist/styles/recipes/scroll-area.css

@@ -5,6 +5,50 @@
     --cui-scroll-area-corner-background: transparent;
   }
 
+  :where([data-control-family="scroll-area"][data-slot="root"][data-scrollbar-gutter="stable"]) {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-rows: minmax(0, 1fr) auto;
+  }
+
+  :where([data-control-family="scroll-area"][data-slot="root"][data-scrollbar-gutter="stable"] > [data-scroll-area-viewport]),
+  :where([data-control-family="scroll-area"][data-slot="root"][data-scrollbar-gutter="stable"] > [data-control-family="progressive-blur"]) {
+    grid-area: 1 / 1;
+    min-inline-size: 0;
+    min-block-size: 0;
+  }
+
+  :where(
+    [data-control-family="scroll-area"][data-slot="root"][data-scrollbar-gutter="stable"]
+      > [data-slot="scrollbar"][data-orientation="vertical"]
+  ) {
+    grid-area: 1 / 2;
+  }
+
+  :where(
+    [data-control-family="scroll-area"][data-slot="root"][data-scrollbar-gutter="stable"]
+      > [data-slot="scrollbar"][data-orientation="horizontal"]
+  ) {
+    grid-area: 2 / 1;
+  }
+
+  :where([data-control-family="scroll-area"][data-slot="root"][data-scrollbar-gutter="stable"] > [data-slot="corner"]) {
+    grid-area: 2 / 2;
+  }
+
+  :where(
+    [data-control-family="scroll-area"][data-slot="root"][data-scrollbar-gutter="stable"]
+      > [data-slot="scrollbar"][data-orientation="vertical"]:not([data-has-overflow-y])
+      > [data-slot="thumb"]
+  ),
+  :where(
+    [data-control-family="scroll-area"][data-slot="root"][data-scrollbar-gutter="stable"]
+      > [data-slot="scrollbar"][data-orientation="horizontal"]:not([data-has-overflow-x])
+      > [data-slot="thumb"]
+  ) {
+    display: none;
+  }
+
   @supports (corner-shape: squircle) {
     @container not style(--corner-shape: round) {
       :where([data-control-family="scroll-area"][data-slot="root"] > [data-control-family="progressive-blur"]) {
@@ -18,11 +62,6 @@
     z-index: 0;
     border-radius: inherit;
     outline: none;
-    transition:
-      --_scroll-area-fade-top var(--duration-fast) var(--ease-standard),
-      --_scroll-area-fade-bottom var(--duration-fast) var(--ease-standard),
-      --_scroll-area-fade-left var(--duration-fast) var(--ease-standard),
-      --_scroll-area-fade-right var(--duration-fast) var(--ease-standard);
   }
 
   :where(
@@ -53,39 +92,26 @@
   }
 
   :where(
-    [data-control-family="scroll-area"][data-slot="root"][data-overflow-y-start]:not([data-lock-axis="y"], [data-lock-axis="both"])
-      > [data-scroll-area-viewport]
-  ) {
-    --_scroll-area-fade-top: var(--scroll-fade-size);
-  }
-
-  :where(
-    [data-control-family="scroll-area"][data-slot="root"][data-overflow-y-end]:not([data-lock-axis="y"], [data-lock-axis="both"])
-      > [data-scroll-area-viewport]
+    [data-control-family="scroll-area"][data-slot="root"]:not([data-lock-axis="y"], [data-lock-axis="both"]) > [data-scroll-area-viewport]
   ) {
-    --_scroll-area-fade-bottom: var(--scroll-fade-size);
+    --_scroll-area-fade-top: min(var(--scroll-fade-size), var(--scroll-area-overflow-y-start, 0px));
+    --_scroll-area-fade-bottom: min(var(--scroll-fade-size), var(--scroll-area-overflow-y-end, 0px));
   }
 
   :where(
-    [data-control-family="scroll-area"][data-slot="root"][data-overflow-x-start]:not([data-lock-axis="x"], [data-lock-axis="both"]):dir(ltr)
-      > [data-scroll-area-viewport]
-  ),
-  :where(
-    [data-control-family="scroll-area"][data-slot="root"][data-overflow-x-end]:not([data-lock-axis="x"], [data-lock-axis="both"]):dir(rtl)
+    [data-control-family="scroll-area"][data-slot="root"]:not([data-lock-axis="x"], [data-lock-axis="both"]):dir(ltr)
       > [data-scroll-area-viewport]
   ) {
-    --_scroll-area-fade-left: var(--scroll-fade-size);
+    --_scroll-area-fade-left: min(var(--scroll-fade-size), var(--scroll-area-overflow-x-start, 0px));
+    --_scroll-area-fade-right: min(var(--scroll-fade-size), var(--scroll-area-overflow-x-end, 0px));
   }
 
   :where(
-    [data-control-family="scroll-area"][data-slot="root"][data-overflow-x-end]:not([data-lock-axis="x"], [data-lock-axis="both"]):dir(ltr)
-      > [data-scroll-area-viewport]
-  ),
-  :where(
-    [data-control-family="scroll-area"][data-slot="root"][data-overflow-x-start]:not([data-lock-axis="x"], [data-lock-axis="both"]):dir(rtl)
+    [data-control-family="scroll-area"][data-slot="root"]:not([data-lock-axis="x"], [data-lock-axis="both"]):dir(rtl)
       > [data-scroll-area-viewport]
   ) {
-    --_scroll-area-fade-right: var(--scroll-fade-size);
+    --_scroll-area-fade-left: min(var(--scroll-fade-size), var(--scroll-area-overflow-x-end, 0px));
+    --_scroll-area-fade-right: min(var(--scroll-fade-size), var(--scroll-area-overflow-x-start, 0px));
   }
 
   :where(

package/dist/styles/recipes/tabs-motion.css

@@ -0,0 +1,99 @@
+@layer components {
+  @supports ((anchor-name: --aui-slide-panel) and (anchor-scope: --aui-slide-panel)) {
+    :where([data-control-family="tabs"][data-slot="panel"][data-slide="panel"][inert][data-slide-exiting][data-ending-style]) {
+      display: block;
+      position: absolute;
+      top: var(--_tabs-panel-top);
+      left: var(--_tabs-panel-left);
+      right: auto;
+      bottom: auto;
+      width: var(--_tabs-panel-width);
+      height: var(--_tabs-panel-height);
+      margin: 0;
+      overflow: clip;
+      animation: aui-slide-exit-hold var(--duration-slow) var(--ease-emphasized) both;
+    }
+
+    @supports (height: anchor-size(height)) {
+      :where([data-control-family="tabs"][data-slot="panel"][data-slide="panel"][inert][data-slide-exiting][data-ending-style]) {
+        height: anchor-size(height);
+      }
+    }
+
+    :where(
+        [data-control-family="tabs"][data-slot="panel"][data-slide="panel"][inert][data-ending-style][data-activation-direction="right"]
+      ) {
+      translate: -100% 0;
+    }
+
+    :where(
+        [data-control-family="tabs"][data-slot="panel"][data-slide="panel"][inert][data-ending-style][data-activation-direction="left"]
+      ) {
+      translate: 100% 0;
+    }
+
+    :where(
+        [data-control-family="tabs"][data-slot="panel"][data-slide="panel"][inert][data-ending-style][data-activation-direction="down"]
+      ) {
+      translate: 0 -100%;
+    }
+
+    :where([data-control-family="tabs"][data-slot="panel"][data-slide="panel"][inert][data-ending-style][data-activation-direction="up"]) {
+      translate: 0 100%;
+    }
+
+    :where(
+        [data-control-family="tabs"][data-slot="root"]:has(> [data-slot="panel"][data-starting-style])
+          > [data-slot="panel"][inert][data-ending-style]
+      ) {
+      translate: 0 0;
+      transition: none;
+    }
+
+    :where([data-control-family="tabs"][data-slot="panel"][data-slide="panel"][data-starting-style]) {
+      transition: none;
+    }
+
+    :where([data-control-family="tabs"][data-slot="root"][data-slide-starting] > [data-slot="panel"][data-slide="panel"]) {
+      transition: none;
+    }
+
+    :where([data-control-family="tabs"][data-slot="root"][data-slide-starting] > [data-slot="panel"][inert]) {
+      translate: 0 0;
+    }
+
+    :where(
+        [data-control-family="tabs"][data-slot="root"][data-slide-starting]
+          > [data-slot="panel"]:not([inert])[data-activation-direction="right"]
+      ) {
+      translate: 100% 0;
+    }
+
+    :where(
+        [data-control-family="tabs"][data-slot="root"][data-slide-starting]
+          > [data-slot="panel"]:not([inert])[data-activation-direction="left"]
+      ) {
+      translate: -100% 0;
+    }
+
+    :where(
+        [data-control-family="tabs"][data-slot="root"][data-slide-starting]
+          > [data-slot="panel"]:not([inert])[data-activation-direction="down"]
+      ) {
+      translate: 0 100%;
+    }
+
+    :where(
+        [data-control-family="tabs"][data-slot="root"][data-slide-starting]
+          > [data-slot="panel"]:not([inert])[data-activation-direction="up"]
+      ) {
+      translate: 0 -100%;
+    }
+
+    @supports (height: calc-size(auto, size)) {
+      :where([data-control-family="tabs"][data-slot="root"][data-slide-starting] > [data-slot="panel"][data-slide="panel"]:not([inert])) {
+        height: var(--aui-slide-prev-height, calc-size(auto, size));
+      }
+    }
+  }
+}

package/dist/styles/recipes/tabs.css

@@ -1,5 +1,8 @@
 @layer components {
   :where([data-control-family="tabs"][data-slot="root"]) {
+    position: relative;
+    display: flex;
+    flex-direction: column;
     --cui-tabs-trigger-radius: var(--radius-control);
     --cui-tabs-list-padding: calc(var(--spacing) * 1);
     --cui-tabs-list-radius: calc(
@@ -10,6 +13,8 @@
     --cui-tabs-list-shadow: inset 0 0 0 var(--control-rim-width) var(--control-rim), var(--shadow-inset);
     --cui-tabs-list-backdrop-filter: none;
     --cui-tabs-indicator-background: var(--background);
+    --cui-tabs-surface-background: var(--background);
+    --cui-tabs-surface-radius: var(--radius-panel);
     --cui-tabs-foreground: var(--muted-foreground);
     --cui-tabs-active-foreground: var(--foreground);
     --cui-tabs-hover-foreground: var(--foreground);
@@ -19,7 +24,7 @@
   }
 
   :where([data-control-family="tabs"][data-slot="root"][data-orientation="vertical"]) {
-    display: flex;
+    flex-direction: row;
     gap: calc(var(--spacing) * 4);
   }
 
@@ -105,15 +110,14 @@
 
   :where([data-control-family="tabs"][data-slot="list"][data-variant="browser"]) {
     --_tabs-browser-corner-double: calc(var(--_tabs-trigger-radius-fit) + var(--_tabs-trigger-radius-fit));
-    --_tabs-browser-inset: calc(var(--_tabs-trigger-radius-fit) + var(--radius-panel));
+    --_tabs-browser-inset: calc(var(--_tabs-trigger-radius-fit) + var(--cui-tabs-surface-radius));
     min-height: calc(var(--_tabs-trigger-h) + var(--cui-tabs-list-padding));
     width: auto;
     align-items: flex-end;
     isolation: isolate;
     z-index: 1;
     --cui-tabs-list-background: transparent;
-    --cui-tabs-list-shadow: inset 0 -1px 0 var(--cui-tabs-border-color);
-    --cui-tabs-indicator-background: var(--background);
+    --cui-tabs-list-shadow: inset 0 calc(-1 * var(--cui-tabs-border-width)) 0 var(--cui-tabs-border-color);
     --cui-tabs-active-foreground: var(--foreground);
     border-radius: var(--cui-tabs-list-radius) var(--cui-tabs-list-radius) 0 0;
   }
@@ -132,7 +136,7 @@
     border: var(--cui-tabs-border-width) solid var(--cui-tabs-border-color);
     border-bottom: none;
     border-radius: var(--_tabs-trigger-radius-fit) var(--_tabs-trigger-radius-fit) 0 0;
-    background: var(--cui-tabs-indicator-background);
+    background: var(--cui-tabs-surface-background);
   }
 
   :where([data-control-family="tabs"][data-slot="list"][data-variant="browser"] [data-slot="indicator"])::after {
@@ -145,17 +149,17 @@
         circle at 0 -1px,
         transparent calc(var(--_tabs-trigger-radius-fit) - 0.5px),
         var(--cui-tabs-border-color) var(--_tabs-trigger-radius-fit) calc(var(--_tabs-trigger-radius-fit) + 0.5px),
-        var(--cui-tabs-indicator-background) calc(var(--_tabs-trigger-radius-fit) + 1px)
+        var(--cui-tabs-surface-background) calc(var(--_tabs-trigger-radius-fit) + 1px)
       )
       left / calc(var(--_tabs-trigger-radius-fit) + 1px) 100% no-repeat,
       radial-gradient(
         circle at 100% -1px,
         transparent calc(var(--_tabs-trigger-radius-fit) - 0.5px),
         var(--cui-tabs-border-color) var(--_tabs-trigger-radius-fit) calc(var(--_tabs-trigger-radius-fit) + 0.5px),
-        var(--cui-tabs-indicator-background) calc(var(--_tabs-trigger-radius-fit) + 1px)
+        var(--cui-tabs-surface-background) calc(var(--_tabs-trigger-radius-fit) + 1px)
       )
       right / calc(var(--_tabs-trigger-radius-fit) + 1px) 100% no-repeat,
-      linear-gradient(var(--cui-tabs-indicator-background) 0 0) center / calc(100% - var(--_tabs-browser-corner-double)) 100% no-repeat;
+      linear-gradient(var(--cui-tabs-surface-background) 0 0) center / calc(100% - var(--_tabs-browser-corner-double)) 100% no-repeat;
   }
 
   :where([data-control-family="tabs"][data-slot="list"][data-single="true"]) {
@@ -178,6 +182,11 @@
     outline-style: none;
   }
 
+  :where([data-control-family="tabs"][data-slot="root"][data-orientation="vertical"] > [data-slot="panel"]) {
+    min-width: 0;
+    flex: 1;
+  }
+
   :where(
     [data-control-family="tabs"][data-slot="list"][data-orientation="horizontal"]:not([data-variant="browser"]) ~ [data-slot="panel"]
   ) {
@@ -187,11 +196,18 @@
   :where([data-control-family="tabs"][data-slot="list"][data-variant="browser"] ~ [data-slot="panel"]) {
     border: var(--cui-tabs-border-width) solid var(--cui-tabs-border-color);
     border-top: none;
-    border-radius: 0 0 var(--radius-panel) var(--radius-panel);
-    background: var(--cui-tabs-indicator-background);
+    border-radius: 0 0 var(--cui-tabs-surface-radius) var(--cui-tabs-surface-radius);
+    background: var(--cui-tabs-surface-background);
     padding: calc(var(--spacing) * 4);
   }
 
+  :where([data-control-family="tabs"][data-slot="surface"]) {
+    min-width: 0;
+    border: var(--cui-tabs-border-width) solid var(--cui-tabs-border-color);
+    border-radius: var(--cui-tabs-surface-radius);
+    background: var(--cui-tabs-surface-background);
+  }
+
   :where([data-control-family="tabs"][data-slot="list"][data-variant="browser"] [data-control-family="tabs"][data-slot="tab"]) {
     border-top-left-radius: var(--_tabs-trigger-radius-fit);
     border-top-right-radius: var(--_tabs-trigger-radius-fit);
@@ -216,6 +232,18 @@
   }
 }
 
+@property --cui-tabs-surface-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-tabs-surface-radius {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
 @property --cui-tabs-trigger-radius {
   syntax: "<length-percentage>";
   inherits: true;

package/dist/styles/recipes/tree.css

@@ -93,7 +93,6 @@
 
   :where([data-control-family="tree"][data-slot="item-content"]) {
     height: var(--collapsible-panel-height);
-    overflow: hidden;
     opacity: 1;
     transition-property: height, opacity;
     transition-duration: var(--duration-base);
@@ -102,9 +101,22 @@
 
   :where([data-control-family="tree"][data-slot="item-content"]:is([data-starting-style], [data-ending-style])) {
     height: 0;
+    overflow: clip;
     opacity: 0;
   }
 
+  @supports (transition-behavior: allow-discrete) {
+    :where([data-control-family="tree"][data-slot="item-content"]) {
+      transition-property: height, opacity, overflow;
+      transition-timing-function: var(--ease-emphasized), var(--ease-emphasized), step-end;
+      transition-behavior: normal, normal, allow-discrete;
+    }
+
+    :where([data-control-family="tree"][data-slot="item-content"][data-ending-style]) {
+      transition-timing-function: var(--ease-emphasized), var(--ease-emphasized), step-start;
+    }
+  }
+
   :where([data-control-family="tree"][data-slot="item-group"]) {
     translate: 0 0;
     transition: translate var(--duration-base) var(--ease-emphasized);

package/dist/ui/alert-dialog.js

@@ -1,6 +1,6 @@
 "use client";
-import { controlEffectsAttribute } from "../skin.js";
 import { cn } from "../lib/cn.js";
+import { controlEffectsAttribute } from "../skin.js";
 import { useSkin } from "../skin-provider.js";
 import { Button } from "./button.js";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/ui/alert.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { jsx } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
+import { jsx } from "react/jsx-runtime";
 //#region src/ui/alert.tsx
 const alertVariants = ["default", "destructive"];
 function Alert({ variant = "default", className, ...props }) {

package/dist/ui/autocomplete.js

@@ -1,6 +1,6 @@
 "use client";
-import { controlEffectsAttribute } from "../skin.js";
 import { cn } from "../lib/cn.js";
+import { controlEffectsAttribute } from "../skin.js";
 import { useSkin } from "../skin-provider.js";
 import { ScrollArea } from "./scroll-area.js";
 import { popupItemStructureClasses } from "../surface-variants.js";

package/dist/ui/breadcrumb.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { useRender } from "@base-ui/react/use-render";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronRight, MoreHorizontal } from "lucide-react";
-import { useRender } from "@base-ui/react/use-render";
 //#region src/ui/breadcrumb.tsx
 function Breadcrumb({ className, ...props }) {
 	return /* @__PURE__ */ jsx("nav", {

package/dist/ui/button.d.ts

@@ -9,6 +9,8 @@ export type ButtonTone = ControlTone;
 export declare const ButtonTrackContext: import("react").Context<boolean>;
 export declare const buttonShapes: readonly ["default", "circle"];
 export type ButtonShape = (typeof buttonShapes)[number];
+export declare const buttonLayouts: readonly ["inline", "stacked"];
+export type ButtonLayout = (typeof buttonLayouts)[number];
 export type ButtonAppearanceProps = {
   variant?: ButtonVariant;
   size?: ButtonSize;
@@ -16,6 +18,7 @@ export type ButtonAppearanceProps = {
   active?: boolean;
   iconOnly?: boolean;
   shape?: ButtonShape;
+  layout?: ButtonLayout;
   style?: CSSProperties & ButtonKnobStyle;
 };
 export type ButtonProps = ComponentProps<"button"> & ButtonAppearanceProps & {
@@ -32,7 +35,7 @@ export type ButtonLabelProps = ComponentProps<"label"> & ButtonAppearanceProps;
 export declare const buttonStructureClasses = "isolate inline-flex shrink-0 items-center justify-center overflow-visible whitespace-nowrap";
 export declare const buttonTrackStructureClasses = "data-[track=hover]:relative data-[track=hover]:isolate [&_[data-track-item]]:[isolation:auto]";
 export declare const buttonContentClasses = "relative z-[1] inline-flex min-w-0 items-center justify-center gap-[inherit]";
-export declare function Button({ variant, size, tone, active, iconOnly, shape, type, disabled, render, nativeButton, className, children, ...props }: ButtonProps): import("react").JSX.Element;
-export declare function ButtonLink({ variant, size, tone, active, iconOnly, shape, render, className, children, ...props }: ButtonLinkProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-export declare function ButtonLabel({ variant, size, tone, active, iconOnly, shape, className, children, ...props }: ButtonLabelProps): import("react").JSX.Element;
+export declare function Button({ variant, size, tone, active, iconOnly, shape, layout, type, disabled, render, nativeButton, className, children, ...props }: ButtonProps): import("react").JSX.Element;
+export declare function ButtonLink({ variant, size, tone, active, iconOnly, shape, layout, render, className, children, ...props }: ButtonLinkProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function ButtonLabel({ variant, size, tone, active, iconOnly, shape, layout, className, children, ...props }: ButtonLabelProps): import("react").JSX.Element;
 //#endregion