@ctrl-ui/react 0.8.11 → 0.8.12

package/dist/styles/recipes/tabs.css

@@ -1,6 +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(
@@ -11,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);
@@ -20,7 +24,7 @@
   }
 
   :where([data-control-family="tabs"][data-slot="root"][data-orientation="vertical"]) {
-    display: flex;
+    flex-direction: row;
     gap: calc(var(--spacing) * 4);
   }
 
@@ -106,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;
   }
@@ -133,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 {
@@ -146,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"]) {
@@ -179,104 +182,6 @@
     outline-style: none;
   }
 
-  @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));
-      }
-    }
-  }
-
   :where([data-control-family="tabs"][data-slot="root"][data-orientation="vertical"] > [data-slot="panel"]) {
     min-width: 0;
     flex: 1;
@@ -291,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);
@@ -320,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/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

package/dist/ui/button.js

@@ -1,14 +1,15 @@
 "use client";
-import { skinAdornment } from "../skin.js";
 import { cn } from "../lib/cn.js";
+import { skinAdornment } from "../skin.js";
 import { useSkin } from "../skin-provider.js";
 import { Children, Fragment, createContext, isValidElement, useContext } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Button as Button$1 } from "@base-ui/react/button";
 import { useRender } from "@base-ui/react/use-render";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/ui/button.tsx
 const ButtonTrackContext = createContext(false);
 const buttonShapes = ["default", "circle"];
+const buttonLayouts = ["inline", "stacked"];
 const buttonStructureClasses = "isolate inline-flex shrink-0 items-center justify-center overflow-visible whitespace-nowrap";
 const buttonTrackStructureClasses = "data-[track=hover]:relative data-[track=hover]:isolate [&_[data-track-item]]:[isolation:auto]";
 const buttonContentClasses = "relative z-[1] inline-flex min-w-0 items-center justify-center gap-[inherit]";
@@ -36,7 +37,7 @@ function ButtonBody({ layer, wrap = true, children }) {
 	const content = wrapButtonText(children);
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [layer, wrapsContent ? /* @__PURE__ */ jsx(ButtonContent, { children: content }) : content] });
 }
-function Button({ variant = "quiet", size = "sm", tone = "neutral", active = false, iconOnly = false, shape = "default", type = "button", disabled, render, nativeButton, className, children, ...props }) {
+function Button({ variant = "quiet", size = "sm", tone = "neutral", active = false, iconOnly = false, shape = "default", layout = "inline", type = "button", disabled, render, nativeButton, className, children, ...props }) {
 	const skin = useSkin();
 	const layer = skinAdornment(skin, "button", "layer", {
 		variant,
@@ -54,6 +55,7 @@ function Button({ variant = "quiet", size = "sm", tone = "neutral", active = fal
 		"data-active": active ? "true" : void 0,
 		"data-icon-only": iconOnly ? "true" : void 0,
 		"data-shape": shape,
+		"data-layout": layout,
 		"data-variant": variant,
 		"data-tone": tone,
 		"data-size": size,
@@ -68,7 +70,7 @@ function Button({ variant = "quiet", size = "sm", tone = "neutral", active = fal
 		})
 	});
 }
-function ButtonLink({ variant = "quiet", size = "sm", tone = "neutral", active = false, iconOnly = false, shape = "default", render, className, children, ...props }) {
+function ButtonLink({ variant = "quiet", size = "sm", tone = "neutral", active = false, iconOnly = false, shape = "default", layout = "inline", render, className, children, ...props }) {
 	const skin = useSkin();
 	const tracksHover = useContext(ButtonTrackContext);
 	return useRender({
@@ -84,6 +86,7 @@ function ButtonLink({ variant = "quiet", size = "sm", tone = "neutral", active =
 			"data-active": active ? "true" : void 0,
 			"data-icon-only": iconOnly ? "true" : void 0,
 			"data-shape": shape,
+			"data-layout": layout,
 			"data-variant": variant,
 			"data-tone": tone,
 			"data-size": size,
@@ -98,7 +101,7 @@ function ButtonLink({ variant = "quiet", size = "sm", tone = "neutral", active =
 		}
 	});
 }
-function ButtonLabel({ variant = "quiet", size = "sm", tone = "neutral", active = false, iconOnly = false, shape = "default", className, children, ...props }) {
+function ButtonLabel({ variant = "quiet", size = "sm", tone = "neutral", active = false, iconOnly = false, shape = "default", layout = "inline", className, children, ...props }) {
 	const skin = useSkin();
 	const tracksHover = useContext(ButtonTrackContext);
 	return /* @__PURE__ */ jsx("label", {
@@ -111,6 +114,7 @@ function ButtonLabel({ variant = "quiet", size = "sm", tone = "neutral", active
 		"data-active": active ? "true" : void 0,
 		"data-icon-only": iconOnly ? "true" : void 0,
 		"data-shape": shape,
+		"data-layout": layout,
 		"data-variant": variant,
 		"data-tone": tone,
 		"data-size": size,
@@ -125,4 +129,4 @@ function ButtonLabel({ variant = "quiet", size = "sm", tone = "neutral", active
 	});
 }
 //#endregion
-export { Button, ButtonLabel, ButtonLink, ButtonTrackContext, buttonContentClasses, buttonShapes, buttonStructureClasses, buttonTrackStructureClasses };
+export { Button, ButtonLabel, ButtonLink, ButtonTrackContext, buttonContentClasses, buttonLayouts, buttonShapes, buttonStructureClasses, buttonTrackStructureClasses };

package/dist/ui/card.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/card.tsx
 function Card({ variant = "default", className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {

package/dist/ui/code-diff.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { highlightToTokens, mergeCodeTokenLineWithEmphasis } from "../lib/code-tokens.js";
 import { ScrollArea } from "./scroll-area.js";
+import { highlightToTokens, mergeCodeTokenLineWithEmphasis } from "../lib/code-tokens.js";
 import { CodeCopy, CodeFloatingCopy, CodeTokenLine } from "./code.js";
 import { buildDiffFromFiles, buildDiffFromPatch, diffRunEnd } from "../lib/diff.js";
 import { useEffect, useMemo, useRef, useState } from "react";

package/dist/ui/code.js

@@ -1,10 +1,10 @@
 "use client";
+import { useCopyToClipboard } from "../hooks/use-copy-to-clipboard.js";
 import { cn } from "../lib/cn.js";
 import { Button } from "./button.js";
 import { LiveStatus } from "./live-status.js";
-import { useCopyToClipboard } from "../hooks/use-copy-to-clipboard.js";
-import { highlightToTokens } from "../lib/code-tokens.js";
 import { ScrollArea } from "./scroll-area.js";
+import { highlightToTokens } from "../lib/code-tokens.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
 import { Children, createContext, isValidElement, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/dist/ui/collapsible.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";
 import { Collapsible as Collapsible$1 } from "@base-ui/react/collapsible";
 //#region src/ui/collapsible.tsx
 function CollapsibleTriggerElement({ triggerProps, open, render, className, children }) {

package/dist/ui/color-picker.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 { Input } from "./input.js";

package/dist/ui/combobox.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/context-menu.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 { popupItemStructureClasses } from "../surface-variants.js";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/ui/dialog.js

@@ -1,6 +1,6 @@
 "use client";
-import { controlEffectsAttribute, skinAdornment } from "../skin.js";
 import { cn } from "../lib/cn.js";
+import { controlEffectsAttribute, skinAdornment } from "../skin.js";
 import { useSkin } from "../skin-provider.js";
 import { Button } from "./button.js";
 import { PopupCloseButton } from "../popup-parts.js";

package/dist/ui/drawer.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 { createContext, useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/ui/dropdown-menu.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 { popupItemStructureClasses } from "../surface-variants.js";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/ui/emoji-icon-picker.js

@@ -1,8 +1,8 @@
 "use client";
 import { PopoverViewport } from "./popover.js";
-import { Tabs, TabsList, TabsPanel, TabsTab } from "./tabs.js";
 import { EmojiPicker } from "./emoji-picker.js";
 import { IconPicker } from "./icon-picker.js";
+import { Tabs, TabsList, TabsPanel, TabsTab } from "./tabs.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/ui/emoji-icon-picker.tsx
 function EmojiIconPicker({ children, defaultValue = "emoji", ...props }) {

package/dist/ui/emoji-picker.js

@@ -1,10 +1,10 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { Spinner } from "./spinner.js";
+import { Toolbar } from "@base-ui/react/toolbar";
 import { createContext, useContext, useImperativeHandle, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { FlagIcon, HandIcon, HashIcon, HeartIcon, LeafIcon, LightbulbIcon, PizzaIcon, PlaneIcon, SearchIcon, SmileIcon, VolleyballIcon } from "lucide-react";
-import { Toolbar } from "@base-ui/react/toolbar";
 import { EmojiPicker as EmojiPicker$1, defaultEmojiDataResolver } from "frimousse";
 //#region src/ui/emoji-picker.tsx
 const EmojiPickerContext = createContext(null);

package/dist/ui/empty.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/empty.tsx
 function Empty({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {

package/dist/ui/hover-card.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 { jsx } from "react/jsx-runtime";
 import { PreviewCard } from "@base-ui/react/preview-card";

package/dist/ui/icon-picker.js

@@ -1,9 +1,9 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { Input } from "./input.js";
+import { Toolbar } from "@base-ui/react/toolbar";
 import { createContext, useContext, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-import { Toolbar } from "@base-ui/react/toolbar";
 import { Radio } from "@base-ui/react/radio";
 import { RadioGroup } from "@base-ui/react/radio-group";
 //#region src/ui/icon-picker.tsx

package/dist/ui/input-group.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { createContext, use } from "react";
-import { jsx } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
+import { jsx } from "react/jsx-runtime";
 //#region src/ui/input-group.tsx
 const InputGroupSurfaceContext = createContext(false);
 function useIsInsideInputGroup() {

package/dist/ui/item.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { Separator } from "./separator.js";
-import { jsx } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
+import { jsx } from "react/jsx-runtime";
 //#region src/ui/item.tsx
 const itemVariants = [
 	"default",

package/dist/ui/menubar.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 { popupItemStructureClasses } from "../surface-variants.js";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/ui/morphing-panel.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";
 import { Collapsible } from "@base-ui/react/collapsible";
 //#region src/ui/morphing-panel.tsx
 function MorphingPanelTriggerElement({ triggerProps, open, render, className, children }) {

package/dist/ui/navigation-menu.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 { jsx, jsxs } from "react/jsx-runtime";
 import { NavigationMenu as NavigationMenu$1 } from "@base-ui/react/navigation-menu";

package/dist/ui/phone-input.js

@@ -3,12 +3,12 @@ import { cn } from "../lib/cn.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
 import { InputGroup, InputGroupAddon } from "./input-group.js";
 import { Input } from "./input.js";
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "./command.js";
 import { normalizePhoneInputText, normalizePhoneInputValue } from "../lib/phone-input-format.js";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "./command.js";
 import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import flags from "react-phone-number-input/flags";
 import PhoneNumberInput, { getCountryCallingCode, parsePhoneNumber } from "react-phone-number-input/max";
+import flags from "react-phone-number-input/flags";
 //#region src/ui/phone-input.tsx
 const FLAG_COMPONENTS = flags;
 const PhoneNumberInputWithRef = PhoneNumberInput;

package/dist/ui/popover.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 { useImperativeHandle, useLayoutEffect, useRef } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/ui/rich-tooltip.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 { prefersReducedMotion } from "../lib/motion.js";
 import { PopupArrowShape } from "../popup-parts.js";

package/dist/ui/select.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 { ScrollArea } from "./scroll-area.js";

package/dist/ui/sheet.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 { jsx, jsxs } from "react/jsx-runtime";
 import { Dialog } from "@base-ui/react/dialog";

package/dist/ui/sidebar-menu.js

@@ -5,8 +5,8 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
 import { SidebarSurfaceContext, useSidebar } from "./sidebar-provider.js";
 import { TrackHighlight } from "../extensions/track-highlight.js";
 import { createContext, useContext, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/ui/sidebar-menu.tsx
 const sidebarMenuButtonVariants = ["default", "outline"];
 const sidebarMenuButtonSizes = [