themelia-react-ui 2.0.6 → 3.0.0

package/dist/components/ui/popover.d.ts

@@ -1,14 +1,10 @@
 import { type ThemePortalContainer } from '../../lib/theme-scope';
 import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
 import * as React from "react";
+import { useRender } from "@base-ui/react/use-render";
 declare function Popover({ ...props }: PopoverPrimitive.Root.Props): React.JSX.Element;
-declare function PopoverTrigger({ asChild, nativeButton, render, children, ...props }: PopoverPrimitive.Trigger.Props & {
-    asChild?: boolean;
-    nativeButton?: boolean;
-}): React.JSX.Element;
-declare function PopoverAnchor({ asChild, ...props }: React.ComponentPropsWithoutRef<"span"> & {
-    asChild?: boolean;
-}): React.JSX.Element;
+declare function PopoverTrigger({ nativeButton, render, children, ...props }: PopoverPrimitive.Trigger.Props): React.JSX.Element;
+declare function PopoverAnchor({ render, ...props }: useRender.ComponentProps<"span">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 declare function PopoverContent({ className, container, anchor, align, alignOffset, side, sideOffset, disablePortal, positionMethod, onOpenAutoFocus, onInteractOutside, onFocusCapture, ...props }: PopoverPrimitive.Popup.Props & Pick<PopoverPrimitive.Positioner.Props, "anchor" | "align" | "alignOffset" | "side" | "sideOffset" | "positionMethod"> & {
     disablePortal?: boolean;
     onOpenAutoFocus?: (event: Event) => void;

package/dist/components/ui/sheet.d.ts

@@ -2,12 +2,8 @@ import { type ThemePortalContainer } from '../../lib/theme-scope';
 import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
 import * as React from "react";
 declare function Sheet({ ...props }: SheetPrimitive.Root.Props): React.JSX.Element;
-declare function SheetTrigger({ asChild, ...props }: SheetPrimitive.Trigger.Props & {
-    asChild?: boolean;
-}): React.JSX.Element;
-declare function SheetClose({ asChild, ...props }: SheetPrimitive.Close.Props & {
-    asChild?: boolean;
-}): React.JSX.Element;
+declare function SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props): React.JSX.Element;
+declare function SheetClose({ ...props }: SheetPrimitive.Close.Props): React.JSX.Element;
 declare function SheetContent({ className, container, children, side, showCloseButton, forceRenderBackdrop, backdropClassName, onFocusCapture, finalFocus: finalFocusProp, ...props }: SheetPrimitive.Popup.Props & {
     side?: "top" | "right" | "bottom" | "left";
     showCloseButton?: boolean;
@@ -20,10 +16,6 @@ declare function SheetContent({ className, container, children, side, showCloseB
 }): React.JSX.Element;
 declare function SheetHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function SheetFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-declare function SheetTitle({ className, asChild, ...props }: SheetPrimitive.Title.Props & {
-    asChild?: boolean;
-}): React.JSX.Element;
-declare function SheetDescription({ className, asChild, ...props }: SheetPrimitive.Description.Props & {
-    asChild?: boolean;
-}): React.JSX.Element;
+declare function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props): React.JSX.Element;
+declare function SheetDescription({ className, ...props }: SheetPrimitive.Description.Props): React.JSX.Element;
 export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, };

package/dist/components/ui/sidebar-state.d.ts

@@ -26,6 +26,11 @@ export interface SidebarStateProps {
     navigationPanel?: 'primary' | 'secondary';
     /** Ctrl/Command key for navigationPanel; false disables it. Editable fields and overlays retain their shortcuts. @default 'b' */
     keyboardShortcut?: string | false;
+    /**
+     * Cookie name that records the primary panel's open state (`true` or `false`, one week, path `/`),
+     * so a server can render the same `defaultOpen`. Omitted by default: nothing is written.
+     */
+    stateCookie?: string;
 }
 type RegionRegistration = {
     dockAt: number;
@@ -78,5 +83,5 @@ export declare function useSidebar(panelId?: SidebarPanelId): {
     mobilePanel: SidebarPanelId | null;
     setMobilePanel: (value: SidebarPanelId | null) => void;
 };
-export declare function SidebarProvider({ defaultOpen, adaptTo, open, onOpenChange, openPanels, defaultOpenPanels, onOpenPanelsChange, mobilePanel: controlledMobilePanel, onMobilePanelChange, navigationPanel, keyboardShortcut, ref: forwardedRef, className, style, children, ...props }: React.ComponentProps<'div'> & SidebarStateProps): React.JSX.Element;
+export declare function SidebarProvider({ defaultOpen, adaptTo, open, onOpenChange, openPanels, defaultOpenPanels, onOpenPanelsChange, mobilePanel: controlledMobilePanel, onMobilePanelChange, navigationPanel, keyboardShortcut, stateCookie, ref: forwardedRef, className, style, children, ...props }: React.ComponentProps<'div'> & SidebarStateProps): React.JSX.Element;
 export {};

package/dist/components/ui/sidebar.d.ts

@@ -1,5 +1,5 @@
 import { useRender } from "@base-ui/react/use-render";
-import { type VariantProps } from "class-variance-authority";
+import type { StrictVariantProps } from "../../lib/variant-props";
 import * as React from "react";
 import { Button } from "./button";
 import { Input } from "./input";
@@ -12,10 +12,13 @@ declare function Sidebar({ side, variant, collapsible, className, children, dir,
     variant?: "sidebar" | "floating" | "inset";
     collapsible?: "offcanvas" | "icon" | "none";
 }): React.JSX.Element;
-declare function SidebarTrigger({ className, onClick, panelId, children, ...props }: React.ComponentProps<typeof Button> & {
+declare function SidebarTrigger({ className, onClick, panelId, toggleLabel, children, ...props }: React.ComponentProps<typeof Button> & {
     panelId?: SidebarPanelId;
+    toggleLabel?: string;
+}): React.JSX.Element;
+declare function SidebarRail({ className, toggleLabel, ...props }: React.ComponentProps<"button"> & {
+    toggleLabel?: string;
 }): React.JSX.Element;
-declare function SidebarRail({ className, ...props }: React.ComponentProps<"button">): React.JSX.Element;
 declare function SidebarInset({ className, ...props }: React.ComponentProps<"main">): React.JSX.Element;
 declare function SidebarInput({ className, ...props }: React.ComponentProps<typeof Input>): React.JSX.Element;
 declare function SidebarHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
@@ -35,7 +38,7 @@ declare const sidebarMenuButtonVariants: (props?: ({
 declare function SidebarMenuButton({ render, disabled, isActive, variant, size, tooltip, className, ...props }: useRender.ComponentProps<"button"> & React.ComponentProps<"button"> & {
     isActive?: boolean;
     tooltip?: string | React.ComponentProps<typeof TooltipContent>;
-} & VariantProps<typeof sidebarMenuButtonVariants>): React.JSX.Element;
+} & StrictVariantProps<typeof sidebarMenuButtonVariants>): React.JSX.Element;
 declare function SidebarMenuAction({ className, render, showOnHover, ...props }: useRender.ComponentProps<"button"> & React.ComponentProps<"button"> & {
     showOnHover?: boolean;
 }): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;

package/dist/components/ui/tabs.d.ts

@@ -1,10 +1,10 @@
 import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
-import { type VariantProps } from "class-variance-authority";
+import type { StrictVariantProps } from "../../lib/variant-props";
 declare function Tabs({ className, orientation, ...props }: TabsPrimitive.Root.Props): import("react").JSX.Element;
 declare const tabsListVariants: (props?: ({
     variant?: "default" | "line" | "chips" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare function TabsList({ className, variant, ...props }: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>): import("react").JSX.Element;
+declare function TabsList({ className, variant, ...props }: TabsPrimitive.List.Props & StrictVariantProps<typeof tabsListVariants>): import("react").JSX.Element;
 declare function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props): import("react").JSX.Element;
 declare function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props): import("react").JSX.Element;
 export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };

package/dist/components/ui/toggle-group.d.ts

@@ -1,12 +1,12 @@
 import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
 import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group";
-import { type VariantProps } from "class-variance-authority";
+import type { StrictVariantProps } from "../../lib/variant-props";
 import * as React from "react";
 import { toggleVariants } from "./toggle";
-export type ToggleGroupProps = ToggleGroupPrimitive.Props & VariantProps<typeof toggleVariants> & {
+export type ToggleGroupProps = ToggleGroupPrimitive.Props & StrictVariantProps<typeof toggleVariants> & {
     spacing?: number;
     orientation?: "horizontal" | "vertical";
 };
 declare function ToggleGroup({ className, variant, size, spacing, orientation, children, ...props }: ToggleGroupProps): React.JSX.Element;
-declare function ToggleGroupItem({ className, children, variant, size, ...props }: TogglePrimitive.Props & VariantProps<typeof toggleVariants>): React.JSX.Element;
+declare function ToggleGroupItem({ className, children, variant, size, ...props }: TogglePrimitive.Props & StrictVariantProps<typeof toggleVariants>): React.JSX.Element;
 export { ToggleGroup, ToggleGroupItem };

package/dist/components/ui/toggle.d.ts

@@ -1,8 +1,8 @@
 import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
-import { type VariantProps } from "class-variance-authority";
+import type { StrictVariantProps } from "../../lib/variant-props";
 declare const toggleVariants: (props?: ({
     variant?: "default" | "outline" | null | undefined;
     size?: "sm" | "lg" | "default" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare function Toggle({ className, variant, size, ...props }: TogglePrimitive.Props & VariantProps<typeof toggleVariants>): import("react").JSX.Element;
+declare function Toggle({ className, variant, size, ...props }: TogglePrimitive.Props & StrictVariantProps<typeof toggleVariants>): import("react").JSX.Element;
 export { Toggle, toggleVariants };

package/dist/components/ui/tooltip.d.ts

@@ -4,9 +4,7 @@ declare function TooltipProvider({ delay, delayDuration, ...props }: TooltipPrim
     delayDuration?: number;
 }): import("react").JSX.Element;
 declare function Tooltip({ ...props }: TooltipPrimitive.Root.Props): import("react").JSX.Element;
-declare function TooltipTrigger({ asChild, render, children, ...props }: TooltipPrimitive.Trigger.Props & {
-    asChild?: boolean;
-}): import("react").JSX.Element;
+declare function TooltipTrigger({ render, children, ...props }: TooltipPrimitive.Trigger.Props): import("react").JSX.Element;
 declare function TooltipContent({ className, container, side, sideOffset, align, alignOffset, positionMethod, children, ...props }: TooltipPrimitive.Popup.Props & Pick<TooltipPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset" | "positionMethod"> & {
     container?: ThemePortalContainer;
 }): import("react").JSX.Element;

package/dist/{containers-CSdc32h9.js → containers-BdfLTP4w.js}

@@ -1,15 +1,16 @@
 "use client";
-import { t as e } from "./utils-DhuoqFy4.js";
-import { t } from "./focus-recipes-B653VaLq.js";
+import { t as e } from "./utils-BVbAG2J6.js";
+import { t } from "./focus-recipes-DSkiUvUp.js";
 import { o as n } from "./structure.recipes-BB4-n58V.js";
 import { n as r, t as i } from "./composition.recipes-COdiFhxB.js";
 import { t as a } from "./container.recipes-D9t8MHR3.js";
-import { forwardRef as o } from "react";
-import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
-import { useRender as u } from "@base-ui/react/use-render";
+import { n as o, t as s } from "./main-landmark-context-BAsyqp2I.js";
+import { forwardRef as c, isValidElement as l } from "react";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+import { useRender as p } from "@base-ui/react/use-render";
 //#region src/components/layout/containers/content-container.tsx
-var d = o(function({ className: t, maxWidth: n, gutter: r, render: i, ...o }, s) {
-	return u({
+var m = c(function({ className: t, maxWidth: n, gutter: r, render: i, ...o }, s) {
+	return p({
 		defaultTagName: "div",
 		ref: s,
 		render: i,
@@ -23,13 +24,13 @@ var d = o(function({ className: t, maxWidth: n, gutter: r, render: i, ...o }, s)
 		state: {}
 	});
 });
-d.displayName = "Container";
+m.displayName = "Container";
 //#endregion
 //#region src/components/layout/containers/page-viewport.tsx
-var f = o(function({ className: n, render: r, tabIndex: i = 0, ...a }, o) {
-	return u({
+var h = c(function({ className: n, render: r, tabIndex: i = 0, ...a }, c) {
+	let u = o(), f = l(r) && r.type === "main", m = p({
 		defaultTagName: "div",
-		ref: o,
+		ref: c,
 		render: r,
 		props: {
 			...a,
@@ -38,12 +39,16 @@ var f = o(function({ className: n, render: r, tabIndex: i = 0, ...a }, o) {
 		},
 		state: {}
 	});
+	return /* @__PURE__ */ d(s.Provider, {
+		value: u || f,
+		children: m
+	});
 });
-f.displayName = "PageViewport";
+h.displayName = "PageViewport";
 //#endregion
 //#region src/components/layout/containers/section.tsx
-var p = o(function({ className: t, gap: i, render: a, ...o }, s) {
-	return u({
+var g = c(function({ className: t, gap: i, render: a, ...o }, s) {
+	return p({
 		defaultTagName: "section",
 		ref: s,
 		render: a,
@@ -54,47 +59,47 @@ var p = o(function({ className: t, gap: i, render: a, ...o }, s) {
 		state: {}
 	});
 });
-p.displayName = "Section";
+g.displayName = "Section";
 //#endregion
 //#region src/components/layout/containers/two-column-layout.tsx
-var m = {
+var _ = {
 	default: "@3xl:grid-cols-[minmax(0,2fr)_minmax(18rem,1fr)]",
 	"7/5": "@3xl:grid-cols-[minmax(0,7fr)_minmax(0,5fr)]",
 	"8/4": "@3xl:grid-cols-[minmax(0,8fr)_minmax(0,4fr)]"
-}, h = {
+}, v = {
 	default: "lg:grid-cols-[minmax(0,2fr)_minmax(18rem,1fr)]",
 	"7/5": "lg:grid-cols-[minmax(0,7fr)_minmax(0,5fr)]",
 	"8/4": "lg:grid-cols-[minmax(0,8fr)_minmax(0,4fr)]"
-}, g = o(function({ header: t, main: n, aside: r, footer: a, stickyAside: o = !1, adaptTo: d = "viewport", ratio: f, slotProps: p, className: g, render: _, ...v }, y) {
-	let { className: b, ...x } = p?.header ?? {}, { className: S, ...C } = p?.main ?? {}, { className: w, ...T } = p?.aside ?? {}, { className: E, ...D } = p?.footer ?? {};
-	return u({
+}, y = c(function({ header: t, main: n, aside: r, footer: a, stickyAside: o = !1, adaptTo: s = "viewport", ratio: c, slotProps: l, className: m, render: h, ...g }, y) {
+	let { className: b, ...x } = l?.header ?? {}, { className: S, ...C } = l?.main ?? {}, { className: w, ...T } = l?.aside ?? {}, { className: E, ...D } = l?.footer ?? {};
+	return p({
 		defaultTagName: "div",
 		ref: y,
-		render: _,
+		render: h,
 		props: {
-			...v,
+			...g,
 			"data-slot": "two-column-layout",
-			className: e("two-column-layout--component grid min-w-0 grid-cols-1", i.subjects, d === "container" ? m[f ?? "default"] : h[f ?? "default"], g),
-			children: /* @__PURE__ */ l(s, { children: [
-				t == null ? null : /* @__PURE__ */ c("div", {
+			className: e("two-column-layout--component grid min-w-0 grid-cols-1", i.subjects, s === "container" ? _[c ?? "default"] : v[c ?? "default"], m),
+			children: /* @__PURE__ */ f(u, { children: [
+				t == null ? null : /* @__PURE__ */ d("div", {
 					...x,
 					"data-slot": "two-column-layout-header",
 					className: e("two-column-layout--header col-span-full min-w-0", b),
 					children: t
 				}),
-				/* @__PURE__ */ c("div", {
+				/* @__PURE__ */ d("div", {
 					...C,
 					"data-slot": "two-column-layout-main",
 					className: e("two-column-layout--main flex min-h-0 min-w-0 flex-col", i.subjects, S),
 					children: n
 				}),
-				/* @__PURE__ */ c("aside", {
+				/* @__PURE__ */ d("aside", {
 					...T,
 					"data-slot": "two-column-layout-aside",
-					className: e("two-column-layout--aside flex min-h-0 min-w-0 flex-col", i.subjects, o && (d === "container" ? "@3xl:sticky @3xl:top-space-2xl @3xl:self-start" : "lg:sticky lg:top-space-2xl lg:self-start"), w),
+					className: e("two-column-layout--aside flex min-h-0 min-w-0 flex-col", i.subjects, o && (s === "container" ? "@3xl:sticky @3xl:top-space-2xl @3xl:self-start" : "lg:sticky lg:top-space-2xl lg:self-start"), w),
 					children: r
 				}),
-				a == null ? null : /* @__PURE__ */ c("div", {
+				a == null ? null : /* @__PURE__ */ d("div", {
 					...D,
 					"data-slot": "two-column-layout-footer",
 					className: e("two-column-layout--footer col-span-full min-w-0", E),
@@ -105,8 +110,8 @@ var m = {
 		state: {}
 	});
 });
-g.displayName = "TwoColumnLayout";
+y.displayName = "TwoColumnLayout";
 //#endregion
-export { d as i, p as n, f as r, g as t };
+export { m as i, g as n, h as r, y as t };
 
-//# sourceMappingURL=containers-CSdc32h9.js.map
+//# sourceMappingURL=containers-BdfLTP4w.js.map

package/dist/containers-BdfLTP4w.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"containers-BdfLTP4w.js","names":["_Fragment","cn","stackRecipe","compositionRhythm","compositionClasses","containerRecipe","useInsideMainLandmark","MainLandmarkContext","Fragment$1","Container","forwardRef","props","useRender","className","PageViewport","insideMain","isMain","isValidElement","render","viewport","focusRecipes","Section","gap","containerColumnRecipes","viewportColumnRecipes","TwoColumnLayout","headerClassName","headerProps","slotProps","mainClassName","mainProps","asideClassName","asideProps","footerClassName","footerProps","adaptTo","ratio","header","main","stickyAside","aside","footer"],"sources":["../src/components/layout/containers/content-container.tsx","../src/components/layout/containers/page-viewport.tsx","../src/components/layout/containers/section.tsx","../src/components/layout/containers/two-column-layout.tsx"],"sourcesContent":["import { useRender } from '@base-ui/react/use-render';\nimport { forwardRef } from 'react';\n\nimport { cn } from '../../../lib/utils';\n\nimport { containerRecipe } from './container.recipes';\nimport type { ContainerProps } from './containers.types';\n\n/** Container — one centered content-width and inline-gutter owner. */\nexport const Container = forwardRef<HTMLDivElement, ContainerProps>(function Container(\n\t{ className, maxWidth, gutter, render, ...props },\n\tref,\n) {\n\treturn useRender({\n\t\tdefaultTagName: 'div',\n\t\tref,\n\t\trender,\n\t\tprops: {\n\t\t\t...props,\n\t\t\tclassName: cn('container--component @container/content', containerRecipe({ maxWidth, gutter }), className),\n\t\t},\n\t\tstate: {},\n\t});\n});\n\nContainer.displayName = 'Container';\n","import { useRender } from '@base-ui/react/use-render';\nimport { forwardRef, isValidElement } from 'react';\n\nimport { cn } from '../../../lib/utils';\n\nimport type { PageViewportProps } from './containers.types';\nimport { focusRecipes } from '../../../lib/focus-recipes';\nimport { MainLandmarkContext, useInsideMainLandmark } from './main-landmark-context';\n\n/** PageViewport — the single page-scroll and page-container-query owner. */\nexport const PageViewport = forwardRef<HTMLDivElement, PageViewportProps>(function PageViewport(\n\t{ className, render, tabIndex = 0, ...props },\n\tref,\n) {\n\t// Tell nested layout owners when this viewport is the page's main landmark.\n\tconst insideMain = useInsideMainLandmark();\n\tconst isMain = isValidElement(render) && render.type === 'main';\n\tconst viewport = useRender({\n\t\tdefaultTagName: 'div',\n\t\tref,\n\t\trender,\n\t\tprops: {\n\t\t\t...props,\n\t\t\ttabIndex,\n\t\t\tclassName: cn(\n\t\t\t\t`page-viewport--component min-h-0 min-w-0 flex-1 overflow-auto overscroll-contain [scrollbar-gutter:stable] @container/page focus-visible:outline-none ${focusRecipes.inset}`,\n\t\t\t\tclassName,\n\t\t\t),\n\t\t},\n\t\tstate: {},\n\t});\n\treturn <MainLandmarkContext.Provider value={insideMain || isMain}>{viewport}</MainLandmarkContext.Provider>;\n});\n\nPageViewport.displayName = 'PageViewport';\n","import { useRender } from '@base-ui/react/use-render';\nimport { forwardRef } from 'react';\n\nimport { stackRecipe } from '../../base/structure/structure.recipes';\nimport {compositionRhythm} from '../../base/structure/composition.recipes';\nimport { cn } from '../../../lib/utils';\n\nimport type { SectionProps } from './containers.types';\n\n/** Section — a semantic vertical-rhythm owner for page content groups. */\nexport const Section = forwardRef<HTMLElement, SectionProps>(function Section(\n\t{ className, gap, render, ...props },\n\tref,\n) {\n\treturn useRender({\n\t\tdefaultTagName: 'section',\n\t\tref,\n\t\trender,\n\t\tprops: {\n\t\t\t...props,\n\t\t\tclassName: cn('section--component', stackRecipe({ gap: gap ?? compositionRhythm.related }), className),\n\t\t},\n\t\tstate: {},\n\t});\n});\n\nSection.displayName = 'Section';\n","import { useRender } from '@base-ui/react/use-render';\nimport { forwardRef } from 'react';\nimport type { ReactNode } from 'react';\n\nimport { cn } from '../../../lib/utils';\nimport {compositionClasses} from '../../base/structure/composition.recipes';\nimport type { LayoutSlotAttributes } from '../layout.types';\n\nexport interface TwoColumnLayoutSlotProps {\n\theader?: LayoutSlotAttributes<HTMLDivElement>;\n\tmain?: LayoutSlotAttributes<HTMLDivElement>;\n\taside?: LayoutSlotAttributes<HTMLElement>;\n\tfooter?: LayoutSlotAttributes<HTMLDivElement>;\n}\n\nexport interface TwoColumnLayoutProps extends useRender.ComponentProps<'div'> {\n\t/** Optional content spanning both columns before the work regions. */\n\theader?: ReactNode;\n\t/** Primary detail, form, or index content. */\n\tmain: ReactNode;\n\t/** Secondary summary, support, or action rail. */\n\taside: ReactNode;\n\t/** Optional content spanning both columns after the work regions. */\n\tfooter?: ReactNode;\n\t/** Keep the aside visible while the nearest page viewport scrolls. */\n\tstickyAside?: boolean;\n\t/** Preserve viewport breakpoints by default, or adapt inside Container/PageViewport. */\n\tadaptTo?: 'viewport' | 'container';\n\t/** Optional main/aside proportions; omission preserves the established flexible 2/1 split. */\n\tratio?: '7/5' | '8/4';\n\t/** Native attributes for each stable region. */\n\tslotProps?: TwoColumnLayoutSlotProps;\n}\n\nconst containerColumnRecipes = {\n\tdefault: '@3xl:grid-cols-[minmax(0,2fr)_minmax(18rem,1fr)]',\n\t'7/5': '@3xl:grid-cols-[minmax(0,7fr)_minmax(0,5fr)]',\n\t'8/4': '@3xl:grid-cols-[minmax(0,8fr)_minmax(0,4fr)]',\n} as const;\nconst viewportColumnRecipes = {\n\tdefault: 'lg:grid-cols-[minmax(0,2fr)_minmax(18rem,1fr)]',\n\t'7/5': 'lg:grid-cols-[minmax(0,7fr)_minmax(0,5fr)]',\n\t'8/4': 'lg:grid-cols-[minmax(0,8fr)_minmax(0,4fr)]',\n} as const;\n\n/** TwoColumnLayout — one truthful, stable-order main/aside grid. */\nexport const TwoColumnLayout = forwardRef<HTMLDivElement, TwoColumnLayoutProps>(\n\tfunction TwoColumnLayout(\n\t\t{\n\t\t\theader,\n\t\t\tmain,\n\t\t\taside,\n\t\t\tfooter,\n\t\t\tstickyAside = false,\n\t\t\tadaptTo = 'viewport',\n\t\t\tratio,\n\t\t\tslotProps,\n\t\t\tclassName,\n\t\t\trender,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) {\n\t\tconst { className: headerClassName, ...headerProps } = slotProps?.header ?? {};\n\t\tconst { className: mainClassName, ...mainProps } = slotProps?.main ?? {};\n\t\tconst { className: asideClassName, ...asideProps } = slotProps?.aside ?? {};\n\t\tconst { className: footerClassName, ...footerProps } = slotProps?.footer ?? {};\n\n\t\treturn useRender({\n\t\t\tdefaultTagName: 'div',\n\t\t\tref,\n\t\t\trender,\n\t\t\tprops: {\n\t\t\t\t...props,\n\t\t\t\t'data-slot': 'two-column-layout',\n\t\t\t\tclassName: cn(\n\t\t\t\t\t'two-column-layout--component grid min-w-0 grid-cols-1', compositionClasses.subjects,\n\t\t\t\t\tadaptTo === 'container' ? containerColumnRecipes[ratio ?? 'default'] : viewportColumnRecipes[ratio ?? 'default'],\n\t\t\t\t\tclassName,\n\t\t\t\t),\n\t\t\t\tchildren: (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{header !== undefined && header !== null ? (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t{...headerProps}\n\t\t\t\t\t\t\t\tdata-slot=\"two-column-layout-header\"\n\t\t\t\t\t\t\t\tclassName={cn('two-column-layout--header col-span-full min-w-0', headerClassName)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{header}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t{...mainProps}\n\t\t\t\t\t\t\tdata-slot=\"two-column-layout-main\"\n\t\t\t\t\t\t\tclassName={cn('two-column-layout--main flex min-h-0 min-w-0 flex-col', compositionClasses.subjects, mainClassName)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{main}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<aside\n\t\t\t\t\t\t\t{...asideProps}\n\t\t\t\t\t\t\tdata-slot=\"two-column-layout-aside\"\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t'two-column-layout--aside flex min-h-0 min-w-0 flex-col', compositionClasses.subjects,\n\t\t\t\t\t\t\t\tstickyAside && (adaptTo === 'container' ? '@3xl:sticky @3xl:top-space-2xl @3xl:self-start' : 'lg:sticky lg:top-space-2xl lg:self-start'),\n\t\t\t\t\t\t\t\tasideClassName,\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{aside}\n\t\t\t\t\t\t</aside>\n\t\t\t\t\t\t{footer !== undefined && footer !== null ? (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t{...footerProps}\n\t\t\t\t\t\t\t\tdata-slot=\"two-column-layout-footer\"\n\t\t\t\t\t\t\t\tclassName={cn('two-column-layout--footer col-span-full min-w-0', footerClassName)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{footer}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) : null}\n\t\t\t\t\t</>\n\t\t\t\t),\n\t\t\t},\n\t\t\tstate: {},\n\t\t});\n\t},\n);\n\nTwoColumnLayout.displayName = 'TwoColumnLayout';\n"],"mappings":"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"}

package/dist/content-block-hooks-Z3iKjqd1.js

@@ -0,0 +1,17 @@
+import { t as e } from "./utils-BVbAG2J6.js";
+//#region src/components/blocks/content-block-hooks.ts
+function t(t, n = {}, r) {
+	return {
+		"data-component": "content-block",
+		"data-slot": "content-block",
+		"data-padding": r,
+		className: e("content-block--component", t),
+		headerClassName: e("content-block--header", n.header),
+		contentClassName: e("content-block--content", n.content),
+		footerClassName: e("content-block--footer", n.footer)
+	};
+}
+//#endregion
+export { t };
+
+//# sourceMappingURL=content-block-hooks-Z3iKjqd1.js.map

package/dist/content-block-hooks-Z3iKjqd1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"content-block-hooks-Z3iKjqd1.js","names":["cn","contentBlockHooks","padding","className","regions"],"sources":["../src/components/blocks/content-block-hooks.ts"],"sourcesContent":["import { cn } from '../../lib/utils';\n\n/**\n * Blocks that used to render through the deprecated `ContentBlock` adapter now\n * compose `Card` directly. They keep the DOM hooks that adapter painted on the\n * root and its regions, so consumer selectors written against them still\n * match. Spread the result last on the `Card`: like the adapter, it owns\n * `data-component` and `data-slot`.\n */\nexport function contentBlockHooks(\n\tclassName?: string,\n\tregions: { header?: string; content?: string; footer?: string } = {},\n\t/** The explicitly requested inset, mirrored on `data-padding` as the adapter did. */\n\tpadding?: string,\n) {\n\treturn {\n\t\t'data-component': 'content-block',\n\t\t'data-slot': 'content-block',\n\t\t'data-padding': padding,\n\t\tclassName: cn('content-block--component', className),\n\t\theaderClassName: cn('content-block--header', regions.header),\n\t\tcontentClassName: cn('content-block--content', regions.content),\n\t\tfooterClassName: cn('content-block--footer', regions.footer),\n\t} as const;\n}\n"],"mappings":";;AASA,SAAgBC,EACf,GACA,IAAkE,CAAC,GAEnE,GACC;CACD,OAAO;EACN,kBAAkB;EAClB,aAAa;EACb,gBAAgBC;EAChB,WAAWF,EAAG,4BAA4BG,CAAS;EACnD,iBAAiBH,EAAG,yBAAyBI,EAAQ,MAAM;EAC3D,kBAAkBJ,EAAG,0BAA0BI,EAAQ,OAAO;EAC9D,iBAAiBJ,EAAG,yBAAyBI,EAAQ,MAAM;CAC5D;AACD"}

package/dist/{copyable-3fdHfMR3.js → copyable-Bmr14W0d.js}

@@ -1,8 +1,8 @@
 "use client";
 import { useStrings as e } from "./lib/strings.js";
-import { t } from "./utils-DhuoqFy4.js";
-import { n } from "./buttons-DeW0bQeK.js";
-import { c as r } from "./typography-C7-YMW1S.js";
+import { t } from "./utils-BVbAG2J6.js";
+import { c as n } from "./typography-C0dELqYV.js";
+import { n as r } from "./buttons-pZVgPTZn.js";
 import { forwardRef as i, useEffect as a, useState as o } from "react";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
 import { Check as l, Copy as u } from "lucide-react";
@@ -33,12 +33,12 @@ var f = {
 		...S,
 		children: [/* @__PURE__ */ s("span", {
 			className: "copyable--content min-w-0",
-			children: O ? p : /* @__PURE__ */ s(r, {
+			children: O ? p : /* @__PURE__ */ s(n, {
 				tag: "span",
 				className: t(m && "font-mono", h && "block truncate", _),
 				children: p ?? i
 			})
-		}), /* @__PURE__ */ s(n, {
+		}), /* @__PURE__ */ s(r, {
 			...j,
 			type: "button",
 			size: "sm",
@@ -62,4 +62,4 @@ p.displayName = "Copyable";
 //#endregion
 export { f as n, p as t };
 
-//# sourceMappingURL=copyable-3fdHfMR3.js.map
+//# sourceMappingURL=copyable-Bmr14W0d.js.map

package/dist/{copyable-3fdHfMR3.js.map → copyable-Bmr14W0d.js.map}

@@ -1 +1 @@
-{"version":3,"file":"copyable-3fdHfMR3.js","names":["Text","defaultCopyableStrings","Copyable","forwardRef","stringsProp","props","strings","useStrings","copied","setCopied","useState","timeout","handleCopy","value","toast","onCopy","error","onError","hasRichDisplayValue","displayValue","buttonClassName","buttonAriaLabel","copyButtonProps","buttonProps","cn","truncate","className","mono","contentClassName","Button","Check","Copy"],"sources":["../src/components/base/copyable/copyable.tsx"],"sourcesContent":["import { Check, Copy } from 'lucide-react';\nimport {\n\tforwardRef,\n\tuseEffect,\n\tuseState,\n\ttype ComponentPropsWithoutRef,\n\ttype ReactNode,\n} from 'react';\n\nimport { toast } from 'sonner';\n\nimport { Button, type ButtonActionProps } from '../buttons';\nimport { Text } from '../../typography';\nimport { useStrings, type StringsProp } from '../../../lib/strings';\nimport { cn } from '../../../lib/utils';\n\nexport interface CopyableStrings {\n\tcopyLabel: string;\n\tcopiedLabel: string;\n\tsuccess: string;\n\terror: string;\n}\n\nexport const defaultCopyableStrings: CopyableStrings = {\n\tcopyLabel: 'Copy value',\n\tcopiedLabel: 'Copied',\n\tsuccess: 'Copied to clipboard',\n\terror: 'Failed to copy',\n};\n\nexport interface CopyableProps extends Omit<\n\tComponentPropsWithoutRef<'span'>,\n\t'children' | 'onCopy' | 'onError'\n> {\n\t/** Value written to the clipboard. */\n\tvalue: string;\n\t/** Optional display content when it differs from the copied value. */\n\tdisplayValue?: ReactNode;\n\t/** Use monospace typography for scalar display content. */\n\tmono?: boolean;\n\t/** Truncate scalar display content with an ellipsis at the width the caller allots. */\n\ttruncate?: boolean;\n\t/** Classes for the scalar display-content wrapper. */\n\tcontentClassName?: string;\n\t/** Classes and native action props for the dedicated copy button. */\n\tbuttonProps?: Omit<ButtonActionProps, 'children' | 'onClick' | 'type'>;\n\t/** Localizable copy affordance and toast copy. */\n\tstrings?: StringsProp<CopyableStrings>;\n\t/** Called after the Clipboard API successfully writes the value. */\n\tonCopy?: (value: string) => void;\n\t/** Called when the Clipboard API rejects the write. */\n\tonError?: (error: unknown) => void;\n}\n\n/**\n * Copyable keeps display content passive and renders a sibling copy button.\n * This permits rich display nodes such as Email or Url without nesting one\n * interactive element inside another.\n */\nexport const Copyable = forwardRef<HTMLSpanElement, CopyableProps>(function Copyable({\n\tvalue,\n\tdisplayValue,\n\tmono = false,\n\ttruncate = false,\n\tclassName,\n\tcontentClassName,\n\tbuttonProps,\n\tstrings: stringsProp,\n\tonCopy,\n\tonError,\n\t...props\n}, ref) {\n\tconst strings = useStrings(defaultCopyableStrings, stringsProp);\n\tconst [copied, setCopied] = useState(false);\n\n\tuseEffect(() => {\n\t\tif (!copied) return;\n\t\tconst timeout = window.setTimeout(() => setCopied(false), 2000);\n\t\treturn () => window.clearTimeout(timeout);\n\t}, [copied]);\n\n\tconst handleCopy = async () => {\n\t\ttry {\n\t\t\tawait navigator.clipboard.writeText(value);\n\t\t\tsetCopied(true);\n\t\t\ttoast.success(strings.success);\n\t\t\tonCopy?.(value);\n\t\t} catch (error) {\n\t\t\ttoast.error(strings.error);\n\t\t\tonError?.(error);\n\t\t}\n\t};\n\n\tconst isSimpleText =\n\t\ttypeof displayValue === 'string' ||\n\t\ttypeof displayValue === 'number' ||\n\t\ttypeof displayValue === 'bigint';\n\tconst hasRichDisplayValue = displayValue !== undefined && !isSimpleText;\n\tconst {\n\t\tclassName: buttonClassName,\n\t\t'aria-label': buttonAriaLabel,\n\t\t...copyButtonProps\n\t} = buttonProps ?? {};\n\n\treturn (\n\t\t<span\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t'copyable--component group inline-flex min-w-0 items-center gap-space-sm',\n\t\t\t\t// An inline-flex root sizes to its content, so without this it grew\n\t\t\t\t// past the width the caller allotted and took the copy button out of\n\t\t\t\t// view with it. Capping the root is what gives the content something\n\t\t\t\t// to truncate against; `block` on the value below is the other half.\n\t\t\t\ttruncate && 'max-w-full',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{/* A copyable value is not a link: it keeps the surrounding ink, and rich\n\t\t\t    display nodes such as Email or Url keep their own link styling. */}\n\t\t\t<span className=\"copyable--content min-w-0\">\n\t\t\t\t{hasRichDisplayValue ? (\n\t\t\t\t\tdisplayValue\n\t\t\t\t) : (\n\t\t\t\t\t<Text\n\t\t\t\t\t\ttag=\"span\"\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\tmono && 'font-mono',\n\t\t\t\t\t\t\t// `block` is load-bearing: Text renders a <span>, and overflow\n\t\t\t\t\t\t\t// and max-width do not apply to a non-replaced inline box, so\n\t\t\t\t\t\t\t// `truncate` alone set only white-space and the value ran past\n\t\t\t\t\t\t\t// its container with no ellipsis. Truncating against the width\n\t\t\t\t\t\t\t// the caller allots also retires a hardcoded max-w-[300px],\n\t\t\t\t\t\t\t// which no consumer token could reach.\n\t\t\t\t\t\t\ttruncate && 'block truncate',\n\t\t\t\t\t\t\tcontentClassName,\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{displayValue ?? value}\n\t\t\t\t\t</Text>\n\t\t\t\t)}\n\t\t\t</span>\n\t\t\t<Button\n\t\t\t\t{...copyButtonProps}\n\t\t\t\ttype=\"button\"\n\t\t\t\tsize=\"sm\" iconOnly\n\t\t\t\ttone=\"secondary\"\n\t\t\t\tbuttonStyle=\"ghost\"\n\t\t\t\taria-label={buttonAriaLabel ?? (copied ? strings.copiedLabel : strings.copyLabel)}\n\t\t\t\tonClick={() => void handleCopy()}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t// The copy glyph is a quiet affordance in the secondary ink until hovered.\n\t\t\t\t\t'copyable--trigger shrink-0 text-muted-foreground hover:text-foreground focus-visible:text-foreground',\n\t\t\t\t\tbuttonClassName,\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{copied ? (\n\t\t\t\t\t<Check className=\"size-icon-sm text-success\" aria-hidden=\"true\" />\n\t\t\t\t) : (\n\t\t\t\t\t<Copy className=\"size-icon-sm\" aria-hidden=\"true\" />\n\t\t\t\t)}\n\t\t\t</Button>\n\t\t</span>\n\t);\n});\n\nCopyable.displayName = 'Copyable';\n"],"mappings":";;;;;;;;;;AAuBA,IAAaC,IAA0C;CACtD,WAAW;CACX,aAAa;CACb,SAAS;CACT,OAAO;AACR,GA+BaC,IAAWC,EAA2C,SAAkB,EACpF,UACA,iBACA,UAAO,IACP,cAAW,IACX,cACA,qBACA,gBACA,SAASC,GACT,WACA,YACA,GAAGC,KACD,GAAK;CACP,IAAMC,IAAUC,EAAWN,GAAwBG,CAAW,GACxD,CAACI,GAAQC,KAAaC,EAAS,EAAK;CAE1C,QAAgB;EACf,IAAI,CAACF,GAAQ;EACb,IAAMG,IAAU,OAAO,iBAAiBF,EAAU,EAAK,GAAG,GAAI;EAC9D,aAAa,OAAO,aAAaE,CAAO;CACzC,GAAG,CAACH,CAAM,CAAC;CAEX,IAAMI,IAAa,YAAY;EAC9B,IAAI;GAIH,AAHA,MAAM,UAAU,UAAU,UAAUC,CAAK,GACzCJ,EAAU,EAAI,GACdK,EAAM,QAAQR,EAAQ,OAAO,GAC7BS,IAASF,CAAK;EACf,SAASG,GAAO;GAEf,AADAF,EAAM,MAAMR,EAAQ,KAAK,GACzBW,IAAUD,CAAK;EAChB;CACD,GAMME,IAAsBC,MAAiB,KAAA,KAH5C,OAAOA,KAAiB,YACxB,OAAOA,KAAiB,YACxB,OAAOA,KAAiB,UAEnB,EACL,WAAWC,GACX,cAAcC,GACd,GAAGC,MACAC,KAAe,CAAC;CAEpB,OACC,kBAAC,QAAD;EACM;EACL,WAAWC,EACV,2EAKAC,KAAY,cACZC,CACD;EACA,GAAIrB;EAXL,UAAA,CAeC,kBAAC,QAAD;GAAM,WAAU;GACd,UAAAa,IACAC,IAEA,kBAACnB,GAAD;IACC,KAAI;IACJ,WAAWwB,EACVG,KAAQ,aAORF,KAAY,kBACZG,CACD;IAEC,UAAAT,KAAgBN;GACZ,CAAA;EAEF,CAAA,GACN,kBAACgB,GAAD;GACC,GAAIP;GACJ,MAAK;GACL,MAAK;GAAK,UAAA;GACV,MAAK;GACL,aAAY;GACZ,cAAYD,MAAoBb,IAASF,EAAQ,cAAcA,EAAQ;GACvE,eAAe,KAAKM,EAAW;GAC/B,WAAWY,EAEV,wGACAJ,CACD;GAEC,UAAAZ,IACA,kBAACsB,GAAD;IAAO,WAAU;IAA4B,eAAY;GAAQ,CAAA,IAEjE,kBAACC,GAAD;IAAM,WAAU;IAAe,eAAY;GAAQ,CAAA;EAE7C,CAAA,CACH;;AAER,CAAC;AAED,EAAS,cAAc"}
+{"version":3,"file":"copyable-Bmr14W0d.js","names":["Text","Button","defaultCopyableStrings","Copyable","forwardRef","stringsProp","props","strings","useStrings","copied","setCopied","useState","timeout","handleCopy","value","toast","onCopy","error","onError","hasRichDisplayValue","displayValue","buttonClassName","buttonAriaLabel","copyButtonProps","buttonProps","cn","truncate","className","mono","contentClassName","Check","Copy"],"sources":["../src/components/base/copyable/copyable.tsx"],"sourcesContent":["import { Check, Copy } from 'lucide-react';\nimport {\n\tforwardRef,\n\tuseEffect,\n\tuseState,\n\ttype ComponentPropsWithoutRef,\n\ttype ReactNode,\n} from 'react';\n\nimport { toast } from 'sonner';\n\nimport { Button, type ButtonActionProps } from '../buttons';\nimport { Text } from '../../typography';\nimport { useStrings, type StringsProp } from '../../../lib/strings';\nimport { cn } from '../../../lib/utils';\n\nexport interface CopyableStrings {\n\tcopyLabel: string;\n\tcopiedLabel: string;\n\tsuccess: string;\n\terror: string;\n}\n\nexport const defaultCopyableStrings: CopyableStrings = {\n\tcopyLabel: 'Copy value',\n\tcopiedLabel: 'Copied',\n\tsuccess: 'Copied to clipboard',\n\terror: 'Failed to copy',\n};\n\nexport interface CopyableProps extends Omit<\n\tComponentPropsWithoutRef<'span'>,\n\t'children' | 'onCopy' | 'onError'\n> {\n\t/** Value written to the clipboard. */\n\tvalue: string;\n\t/** Optional display content when it differs from the copied value. */\n\tdisplayValue?: ReactNode;\n\t/** Use monospace typography for scalar display content. */\n\tmono?: boolean;\n\t/** Truncate scalar display content with an ellipsis at the width the caller allots. */\n\ttruncate?: boolean;\n\t/** Classes for the scalar display-content wrapper. */\n\tcontentClassName?: string;\n\t/** Classes and native action props for the dedicated copy button. */\n\tbuttonProps?: Omit<ButtonActionProps, 'children' | 'onClick' | 'type'>;\n\t/** Localizable copy affordance and toast copy. */\n\tstrings?: StringsProp<CopyableStrings>;\n\t/** Called after the Clipboard API successfully writes the value. */\n\tonCopy?: (value: string) => void;\n\t/** Called when the Clipboard API rejects the write. */\n\tonError?: (error: unknown) => void;\n}\n\n/**\n * Copyable keeps display content passive and renders a sibling copy button.\n * This permits rich display nodes such as Email or Url without nesting one\n * interactive element inside another.\n */\nexport const Copyable = forwardRef<HTMLSpanElement, CopyableProps>(function Copyable({\n\tvalue,\n\tdisplayValue,\n\tmono = false,\n\ttruncate = false,\n\tclassName,\n\tcontentClassName,\n\tbuttonProps,\n\tstrings: stringsProp,\n\tonCopy,\n\tonError,\n\t...props\n}, ref) {\n\tconst strings = useStrings(defaultCopyableStrings, stringsProp);\n\tconst [copied, setCopied] = useState(false);\n\n\tuseEffect(() => {\n\t\tif (!copied) return;\n\t\tconst timeout = window.setTimeout(() => setCopied(false), 2000);\n\t\treturn () => window.clearTimeout(timeout);\n\t}, [copied]);\n\n\tconst handleCopy = async () => {\n\t\ttry {\n\t\t\tawait navigator.clipboard.writeText(value);\n\t\t\tsetCopied(true);\n\t\t\ttoast.success(strings.success);\n\t\t\tonCopy?.(value);\n\t\t} catch (error) {\n\t\t\ttoast.error(strings.error);\n\t\t\tonError?.(error);\n\t\t}\n\t};\n\n\tconst isSimpleText =\n\t\ttypeof displayValue === 'string' ||\n\t\ttypeof displayValue === 'number' ||\n\t\ttypeof displayValue === 'bigint';\n\tconst hasRichDisplayValue = displayValue !== undefined && !isSimpleText;\n\tconst {\n\t\tclassName: buttonClassName,\n\t\t'aria-label': buttonAriaLabel,\n\t\t...copyButtonProps\n\t} = buttonProps ?? {};\n\n\treturn (\n\t\t<span\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t'copyable--component group inline-flex min-w-0 items-center gap-space-sm',\n\t\t\t\t// An inline-flex root sizes to its content, so without this it grew\n\t\t\t\t// past the width the caller allotted and took the copy button out of\n\t\t\t\t// view with it. Capping the root is what gives the content something\n\t\t\t\t// to truncate against; `block` on the value below is the other half.\n\t\t\t\ttruncate && 'max-w-full',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{/* A copyable value is not a link: it keeps the surrounding ink, and rich\n\t\t\t    display nodes such as Email or Url keep their own link styling. */}\n\t\t\t<span className=\"copyable--content min-w-0\">\n\t\t\t\t{hasRichDisplayValue ? (\n\t\t\t\t\tdisplayValue\n\t\t\t\t) : (\n\t\t\t\t\t<Text\n\t\t\t\t\t\ttag=\"span\"\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\tmono && 'font-mono',\n\t\t\t\t\t\t\t// `block` is load-bearing: Text renders a <span>, and overflow\n\t\t\t\t\t\t\t// and max-width do not apply to a non-replaced inline box, so\n\t\t\t\t\t\t\t// `truncate` alone set only white-space and the value ran past\n\t\t\t\t\t\t\t// its container with no ellipsis. Truncating against the width\n\t\t\t\t\t\t\t// the caller allots also retires a hardcoded max-w-[300px],\n\t\t\t\t\t\t\t// which no consumer token could reach.\n\t\t\t\t\t\t\ttruncate && 'block truncate',\n\t\t\t\t\t\t\tcontentClassName,\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{displayValue ?? value}\n\t\t\t\t\t</Text>\n\t\t\t\t)}\n\t\t\t</span>\n\t\t\t<Button\n\t\t\t\t{...copyButtonProps}\n\t\t\t\ttype=\"button\"\n\t\t\t\tsize=\"sm\" iconOnly\n\t\t\t\ttone=\"secondary\"\n\t\t\t\tbuttonStyle=\"ghost\"\n\t\t\t\taria-label={buttonAriaLabel ?? (copied ? strings.copiedLabel : strings.copyLabel)}\n\t\t\t\tonClick={() => void handleCopy()}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t// The copy glyph is a quiet affordance in the secondary ink until hovered.\n\t\t\t\t\t'copyable--trigger shrink-0 text-muted-foreground hover:text-foreground focus-visible:text-foreground',\n\t\t\t\t\tbuttonClassName,\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{copied ? (\n\t\t\t\t\t<Check className=\"size-icon-sm text-success\" aria-hidden=\"true\" />\n\t\t\t\t) : (\n\t\t\t\t\t<Copy className=\"size-icon-sm\" aria-hidden=\"true\" />\n\t\t\t\t)}\n\t\t\t</Button>\n\t\t</span>\n\t);\n});\n\nCopyable.displayName = 'Copyable';\n"],"mappings":";;;;;;;;;;AAuBA,IAAaE,IAA0C;CACtD,WAAW;CACX,aAAa;CACb,SAAS;CACT,OAAO;AACR,GA+BaC,IAAWC,EAA2C,SAAkB,EACpF,UACA,iBACA,UAAO,IACP,cAAW,IACX,cACA,qBACA,gBACA,SAASC,GACT,WACA,YACA,GAAGC,KACD,GAAK;CACP,IAAMC,IAAUC,EAAWN,GAAwBG,CAAW,GACxD,CAACI,GAAQC,KAAaC,EAAS,EAAK;CAE1C,QAAgB;EACf,IAAI,CAACF,GAAQ;EACb,IAAMG,IAAU,OAAO,iBAAiBF,EAAU,EAAK,GAAG,GAAI;EAC9D,aAAa,OAAO,aAAaE,CAAO;CACzC,GAAG,CAACH,CAAM,CAAC;CAEX,IAAMI,IAAa,YAAY;EAC9B,IAAI;GAIH,AAHA,MAAM,UAAU,UAAU,UAAUC,CAAK,GACzCJ,EAAU,EAAI,GACdK,EAAM,QAAQR,EAAQ,OAAO,GAC7BS,IAASF,CAAK;EACf,SAASG,GAAO;GAEf,AADAF,EAAM,MAAMR,EAAQ,KAAK,GACzBW,IAAUD,CAAK;EAChB;CACD,GAMME,IAAsBC,MAAiB,KAAA,KAH5C,OAAOA,KAAiB,YACxB,OAAOA,KAAiB,YACxB,OAAOA,KAAiB,UAEnB,EACL,WAAWC,GACX,cAAcC,GACd,GAAGC,MACAC,KAAe,CAAC;CAEpB,OACC,kBAAC,QAAD;EACM;EACL,WAAWC,EACV,2EAKAC,KAAY,cACZC,CACD;EACA,GAAIrB;EAXL,UAAA,CAeC,kBAAC,QAAD;GAAM,WAAU;GACd,UAAAa,IACAC,IAEA,kBAACpB,GAAD;IACC,KAAI;IACJ,WAAWyB,EACVG,KAAQ,aAORF,KAAY,kBACZG,CACD;IAEC,UAAAT,KAAgBN;GACZ,CAAA;EAEF,CAAA,GACN,kBAACb,GAAD;GACC,GAAIsB;GACJ,MAAK;GACL,MAAK;GAAK,UAAA;GACV,MAAK;GACL,aAAY;GACZ,cAAYD,MAAoBb,IAASF,EAAQ,cAAcA,EAAQ;GACvE,eAAe,KAAKM,EAAW;GAC/B,WAAWY,EAEV,wGACAJ,CACD;GAEC,UAAAZ,IACA,kBAACqB,GAAD;IAAO,WAAU;IAA4B,eAAY;GAAQ,CAAA,IAEjE,kBAACC,GAAD;IAAM,WAAU;IAAe,eAAY;GAAQ,CAAA;EAE7C,CAAA,CACH;;AAER,CAAC;AAED,EAAS,cAAc"}