@glyphui/ui 0.4.0 → 0.5.0

package/dist/components/carousel/carousel.js

@@ -0,0 +1,190 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { IconButton } from "../button/button.js";
+import { cn } from "../../utils/cn.js";
+import { carouselStyles } from "./carousel.styles.js";
+import { Children, createContext, useCallback, useContext, useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import useEmblaCarousel from "embla-carousel-react";
+//#region src/components/carousel/carousel.tsx
+const CarouselContext = createContext(null);
+function useCarousel() {
+	const value = useContext(CarouselContext);
+	if (!value) throw new Error("Carousel parts must be used inside <Carousel>.");
+	return value;
+}
+/**
+* Swipeable, keyboard-accessible slides. Compose with CarouselContent, CarouselItem,
+* CarouselPrevious, CarouselNext and CarouselDots.
+*/
+function Carousel(inProps) {
+	const [props, slots] = useComponentConfig("Carousel", inProps);
+	const { opts, plugins, loop, setApi, orientation = "horizontal", className, children, ...rest } = props;
+	const [viewportRef, api] = useEmblaCarousel({
+		...opts,
+		...loop !== void 0 && { loop },
+		axis: orientation === "horizontal" ? "x" : "y"
+	}, plugins);
+	const [state, setState] = useState({
+		selectedIndex: 0,
+		snapCount: 0,
+		canScrollPrev: false,
+		canScrollNext: false
+	});
+	const sync = useCallback((embla) => {
+		setState({
+			selectedIndex: embla.selectedScrollSnap(),
+			snapCount: embla.scrollSnapList().length,
+			canScrollPrev: embla.canScrollPrev(),
+			canScrollNext: embla.canScrollNext()
+		});
+	}, []);
+	useEffect(() => {
+		if (!api) return;
+		setApi?.(api);
+		sync(api);
+		api.on("select", sync).on("reInit", sync);
+		return () => {
+			api.off("select", sync).off("reInit", sync);
+		};
+	}, [
+		api,
+		setApi,
+		sync
+	]);
+	const scrollPrev = useCallback(() => api?.scrollPrev(), [api]);
+	const scrollNext = useCallback(() => api?.scrollNext(), [api]);
+	const scrollTo = useCallback((index) => api?.scrollTo(index), [api]);
+	const onKeyDownCapture = (event) => {
+		const prevKey = orientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
+		const nextKey = orientation === "horizontal" ? "ArrowRight" : "ArrowDown";
+		if (event.key === prevKey) {
+			event.preventDefault();
+			scrollPrev();
+		} else if (event.key === nextKey) {
+			event.preventDefault();
+			scrollNext();
+		}
+	};
+	const s = carouselStyles({ orientation });
+	return /* @__PURE__ */ jsx(CarouselContext.Provider, {
+		value: {
+			viewportRef,
+			api,
+			orientation,
+			...state,
+			scrollPrev,
+			scrollNext,
+			scrollTo,
+			s,
+			slots
+		},
+		children: /* @__PURE__ */ jsx("section", {
+			"data-slot": "carousel",
+			"aria-roledescription": "carousel",
+			onKeyDownCapture,
+			className: s.root({ class: [slots.root, className] }),
+			...rest,
+			children
+		})
+	});
+}
+const SlideContext = createContext(null);
+function CarouselContent({ className, children, ...props }) {
+	const { viewportRef, s, slots } = useCarousel();
+	const items = Children.toArray(children);
+	return /* @__PURE__ */ jsx("div", {
+		ref: viewportRef,
+		"data-slot": "carousel-viewport",
+		className: s.viewport({ class: slots.viewport }),
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "carousel-content",
+			className: s.container({ class: [slots.container, className] }),
+			...props,
+			children: items.map((child, index) => /* @__PURE__ */ jsx(SlideContext.Provider, {
+				value: {
+					index,
+					total: items.length
+				},
+				children: child
+			}, index))
+		})
+	});
+}
+function CarouselItem({ className, ...props }) {
+	const { s, slots } = useCarousel();
+	const slide = useContext(SlideContext);
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"aria-roledescription": "slide",
+		"aria-label": slide ? `${slide.index + 1} of ${slide.total}` : void 0,
+		"data-slot": "carousel-item",
+		className: s.item({ class: [slots.item, className] }),
+		...props
+	});
+}
+function Chevron({ direction }) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: direction === "left" ? "m15 18-6-6 6-6" : "m9 18 6-6-6-6" })
+	});
+}
+function CarouselPrevious({ className, icon, ...props }) {
+	const { scrollPrev, canScrollPrev, orientation, s, slots } = useCarousel();
+	return /* @__PURE__ */ jsx(IconButton, {
+		variant: "outline",
+		size: "sm",
+		"aria-label": "Previous slide",
+		icon: icon ?? /* @__PURE__ */ jsx(Chevron, { direction: "left" }),
+		disabled: !canScrollPrev,
+		onClick: scrollPrev,
+		className: s.control({ class: [
+			slots.control,
+			orientation === "horizontal" ? "left-3" : "top-3",
+			className
+		] }),
+		...props
+	});
+}
+function CarouselNext({ className, icon, ...props }) {
+	const { scrollNext, canScrollNext, orientation, s, slots } = useCarousel();
+	return /* @__PURE__ */ jsx(IconButton, {
+		variant: "outline",
+		size: "sm",
+		"aria-label": "Next slide",
+		icon: icon ?? /* @__PURE__ */ jsx(Chevron, { direction: "right" }),
+		disabled: !canScrollNext,
+		onClick: scrollNext,
+		className: s.control({ class: [
+			slots.control,
+			orientation === "horizontal" ? "right-3" : "bottom-3",
+			className
+		] }),
+		...props
+	});
+}
+/** One button per snap point; the current one is highlighted. */
+function CarouselDots({ className, ...props }) {
+	const { snapCount, selectedIndex, scrollTo, s, slots } = useCarousel();
+	if (snapCount < 2) return null;
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "carousel-dots",
+		className: s.dots({ class: [slots.dots, className] }),
+		...props,
+		children: Array.from({ length: snapCount }, (_, index) => /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-label": `Go to slide ${index + 1}`,
+			"aria-current": index === selectedIndex,
+			onClick: () => scrollTo(index),
+			className: cn(s.dot({ class: slots.dot }))
+		}, index))
+	});
+}
+//#endregion
+export { Carousel, CarouselContent, CarouselDots, CarouselItem, CarouselNext, CarouselPrevious };

package/dist/components/carousel/carousel.styles.d.ts

@@ -0,0 +1,74 @@
+import { VariantProps } from "../../utils/tv.js";
+import { StylesEntry } from "../../utils/registry.js";
+//#region src/components/carousel/carousel.styles.d.ts
+export declare const carouselStyles: import("tailwind-variants").TVReturnType<{
+  orientation: {
+    horizontal: {
+      container: string;
+      item: string;
+      control: string;
+    };
+    vertical: {
+      container: string;
+      item: string;
+      control: string;
+    };
+  };
+}, {
+  root: string;
+  viewport: string;
+  container: string;
+  item: string;
+  control: string;
+  dots: string;
+  dot: string[];
+}, undefined, {
+  orientation: {
+    horizontal: {
+      container: string;
+      item: string;
+      control: string;
+    };
+    vertical: {
+      container: string;
+      item: string;
+      control: string;
+    };
+  };
+}, {
+  root: string;
+  viewport: string;
+  container: string;
+  item: string;
+  control: string;
+  dots: string;
+  dot: string[];
+}, import("tailwind-variants").TVReturnTypeLike<{
+  orientation: {
+    horizontal: {
+      container: string;
+      item: string;
+      control: string;
+    };
+    vertical: {
+      container: string;
+      item: string;
+      control: string;
+    };
+  };
+}, {
+  root: string;
+  viewport: string;
+  container: string;
+  item: string;
+  control: string;
+  dots: string;
+  dot: string[];
+}>>;
+export type CarouselVariants = VariantProps<typeof carouselStyles>;
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Carousel: StylesEntry<typeof carouselStyles>;
+  }
+}
+//#endregion

package/dist/components/carousel/carousel.styles.js

@@ -0,0 +1,35 @@
+"use client";
+import { focusRing, transition } from "../../utils/styles.js";
+import { tv } from "../../utils/tv.js";
+//#region src/components/carousel/carousel.styles.ts
+const carouselStyles = /* @__PURE__ */ tv({
+	slots: {
+		root: "relative",
+		viewport: "overflow-hidden rounded-lg",
+		container: "flex",
+		item: "min-w-0 shrink-0 grow-0 basis-full",
+		control: "absolute z-10 border-border bg-surface/85 shadow-sm backdrop-blur disabled:opacity-0",
+		dots: "mt-3 flex items-center justify-center gap-1.5",
+		dot: [
+			"h-2 w-2 cursor-pointer rounded-pill bg-border-strong",
+			transition,
+			focusRing,
+			"hover:bg-muted-foreground aria-[current=true]:w-5 aria-[current=true]:bg-primary"
+		]
+	},
+	variants: { orientation: {
+		horizontal: {
+			container: "-ml-4",
+			item: "pl-4",
+			control: "top-1/2 -translate-y-1/2"
+		},
+		vertical: {
+			container: "-mt-4 h-full flex-col",
+			item: "pt-4",
+			control: "left-1/2 -translate-x-1/2 [&_svg]:rotate-90"
+		}
+	} },
+	defaultVariants: { orientation: "horizontal" }
+});
+//#endregion
+export { carouselStyles };

package/dist/components/carousel/index.d.ts

@@ -0,0 +1,3 @@
+import { CarouselVariants, carouselStyles } from "./carousel.styles.js";
+import { Carousel, CarouselApi, CarouselContent, CarouselDots, CarouselItem, CarouselNext, CarouselOptions, CarouselPlugin, CarouselPrevious, CarouselProps } from "./carousel.js";
+export { Carousel, type CarouselApi, CarouselContent, CarouselDots, CarouselItem, CarouselNext, type CarouselOptions, type CarouselPlugin, CarouselPrevious, type CarouselProps, type CarouselVariants, carouselStyles };

package/dist/components/checkbox/checkbox.d.ts

@@ -0,0 +1,37 @@
+import { Checkbox } from "radix-ui";
+import { ComponentProps } from "react";
+//#region src/components/checkbox/checkbox.d.ts
+export declare const checkboxStyles: import("tailwind-variants").TVReturnType<{
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      root?: import("tailwind-variants").ClassValue;
+      indicator?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {
+  [x: string]: {
+    [x: string]: import("tailwind-variants").ClassValue | {
+      root?: import("tailwind-variants").ClassValue;
+      indicator?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  root: string[];
+  indicator: string[];
+}, undefined, {
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      root?: import("tailwind-variants").ClassValue;
+      indicator?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  root: string[];
+  indicator: string[];
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+  root: string[];
+  indicator: string[];
+}>>;
+declare function Checkbox$1(inProps: ComponentProps<typeof Checkbox.Root>): import("react").JSX.Element;
+//#endregion
+export { Checkbox$1 as Checkbox };

package/dist/components/checkbox/checkbox.js

@@ -0,0 +1,44 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { CheckIcon, MinusIcon } from "../../internal/icons.js";
+import { focusRing, themedBorder, transition } from "../../utils/styles.js";
+import { tv } from "../../utils/tv.js";
+import { useFieldControl } from "../field/field-context.js";
+import { Checkbox } from "radix-ui";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/checkbox/checkbox.tsx
+const checkboxStyles = /* @__PURE__ */ tv({ slots: {
+	root: [
+		"peer mt-0.5 inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-xs border-input bg-surface text-primary-foreground shadow-xs",
+		themedBorder,
+		transition,
+		focusRing,
+		"hover:border-border-strong aria-invalid:border-danger",
+		"data-[state=checked]:border-primary data-[state=checked]:bg-primary",
+		"data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary",
+		"disabled:cursor-not-allowed disabled:opacity-50"
+	],
+	indicator: ["flex items-center justify-center [&>svg]:size-3.5 [&>svg]:stroke-[3]", "[--glyph-draw-length:24] data-[animate]:[&_path]:animate-draw"]
+} });
+function Checkbox$1(inProps) {
+	const [{ className, onCheckedChange, ...rest }, slots] = useComponentConfig("Checkbox", useFieldControl(inProps));
+	const s = checkboxStyles();
+	const [changed, setChanged] = useState(false);
+	return /* @__PURE__ */ jsx(Checkbox.Root, {
+		"data-slot": "checkbox",
+		className: s.root({ class: [slots.root, className] }),
+		onCheckedChange: (checked) => {
+			setChanged(true);
+			onCheckedChange?.(checked);
+		},
+		...rest,
+		children: /* @__PURE__ */ jsx(Checkbox.Indicator, {
+			"data-animate": changed || void 0,
+			className: s.indicator({ class: slots.indicator }),
+			children: rest.checked === "indeterminate" ? /* @__PURE__ */ jsx(MinusIcon, {}) : /* @__PURE__ */ jsx(CheckIcon, {})
+		})
+	});
+}
+//#endregion
+export { Checkbox$1 as Checkbox, checkboxStyles };

package/dist/components/checkbox/index.d.ts

@@ -0,0 +1,2 @@
+import { Checkbox, checkboxStyles } from "./checkbox.js";
+export { Checkbox, checkboxStyles };

package/dist/components/code/code.d.ts

@@ -0,0 +1,18 @@
+import { CodeBlockVariants } from "./code.styles.js";
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/code/code.d.ts
+/** Inline code within running text. */
+export declare function Code(inProps: ComponentProps<'code'>): import("react").JSX.Element;
+export interface CodeBlockProps extends Omit<ComponentProps<'figure'>, 'children' | 'title'>, CodeBlockVariants {
+  /** The code to show and copy. */
+  code: string;
+  /** File name or caption shown in the header. */
+  title?: ReactNode;
+  /** Shown in the header when there is no title, e.g. "tsx". */
+  language?: string;
+  /** Show a copy button. Default true. */
+  copyable?: boolean;
+}
+/** A block of code with an optional file name and a copy button. No syntax highlighting is applied. */
+export declare function CodeBlock(inProps: CodeBlockProps): import("react").JSX.Element;
+//#endregion

package/dist/components/code/code.js

@@ -0,0 +1,75 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { CheckIcon } from "../../internal/icons.js";
+import { IconButton } from "../button/button.js";
+import { codeBlockStyles, codeStyles } from "./code.styles.js";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/code/code.tsx
+/** Inline code within running text. */
+function Code(inProps) {
+	const [{ className, ...rest }, slots] = useComponentConfig("Code", inProps);
+	return /* @__PURE__ */ jsx("code", {
+		"data-slot": "code",
+		className: codeStyles().base({ class: [slots.base, className] }),
+		...rest
+	});
+}
+const CopyIcon = () => /* @__PURE__ */ jsxs("svg", {
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	children: [/* @__PURE__ */ jsx("rect", {
+		width: "14",
+		height: "14",
+		x: "8",
+		y: "8",
+		rx: "2"
+	}), /* @__PURE__ */ jsx("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })]
+});
+/** A block of code with an optional file name and a copy button. No syntax highlighting is applied. */
+function CodeBlock(inProps) {
+	const [props, slots] = useComponentConfig("CodeBlock", inProps);
+	const { code, title, language, copyable = true, wrap, className, ...rest } = props;
+	const [copied, setCopied] = useState(false);
+	const timer = useRef(void 0);
+	const s = codeBlockStyles({ wrap });
+	const heading = title ?? language;
+	useEffect(() => () => clearTimeout(timer.current), []);
+	const copy = async () => {
+		try {
+			await navigator.clipboard.writeText(code);
+			setCopied(true);
+			clearTimeout(timer.current);
+			timer.current = setTimeout(() => setCopied(false), 1600);
+		} catch {}
+	};
+	const copyButton = copyable ? /* @__PURE__ */ jsx(IconButton, {
+		size: "sm",
+		icon: copied ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(CopyIcon, {}),
+		"aria-label": copied ? "Copied" : "Copy code",
+		onClick: copy,
+		className: heading ? s.copy({ class: slots.copy }) : s.floatingCopy({ class: slots.floatingCopy })
+	}) : null;
+	return /* @__PURE__ */ jsxs("figure", {
+		"data-slot": "code-block",
+		className: s.root({ class: [slots.root, className] }),
+		...rest,
+		children: [heading ? /* @__PURE__ */ jsxs("figcaption", {
+			className: s.header({ class: slots.header }),
+			children: [/* @__PURE__ */ jsx("span", {
+				className: s.title({ class: slots.title }),
+				children: heading
+			}), copyButton]
+		}) : copyButton, /* @__PURE__ */ jsx("pre", {
+			className: s.pre({ class: slots.pre }),
+			children: /* @__PURE__ */ jsx("code", { children: code })
+		})]
+	});
+}
+//#endregion
+export { Code, CodeBlock };

package/dist/components/code/code.styles.d.ts

@@ -0,0 +1,76 @@
+import { VariantProps } from "../../utils/tv.js";
+import { StylesEntry } from "../../utils/registry.js";
+//#region src/components/code/code.styles.d.ts
+export declare const codeStyles: import("tailwind-variants").TVReturnType<{
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      base?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {
+  [x: string]: {
+    [x: string]: import("tailwind-variants").ClassValue | {
+      base?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  base: string;
+}, undefined, {
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      base?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  base: string;
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+  base: string;
+}>>;
+export declare const codeBlockStyles: import("tailwind-variants").TVReturnType<{
+  wrap: {
+    true: {
+      pre: string;
+    };
+  };
+}, {
+  root: string[];
+  header: string;
+  title: string;
+  copy: string;
+  floatingCopy: string;
+  pre: string;
+}, undefined, {
+  wrap: {
+    true: {
+      pre: string;
+    };
+  };
+}, {
+  root: string[];
+  header: string;
+  title: string;
+  copy: string;
+  floatingCopy: string;
+  pre: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  wrap: {
+    true: {
+      pre: string;
+    };
+  };
+}, {
+  root: string[];
+  header: string;
+  title: string;
+  copy: string;
+  floatingCopy: string;
+  pre: string;
+}>>;
+export type CodeBlockVariants = VariantProps<typeof codeBlockStyles>;
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Code: StylesEntry<typeof codeStyles>;
+    CodeBlock: StylesEntry<typeof codeBlockStyles>;
+  }
+}
+//#endregion

package/dist/components/code/code.styles.js

@@ -0,0 +1,18 @@
+"use client";
+import { themedBorder } from "../../utils/styles.js";
+import { tv } from "../../utils/tv.js";
+//#region src/components/code/code.styles.ts
+const codeStyles = /* @__PURE__ */ tv({ slots: { base: "rounded-xs bg-muted px-[0.3em] py-[0.15em] font-mono text-[0.875em] text-foreground" } });
+const codeBlockStyles = /* @__PURE__ */ tv({
+	slots: {
+		root: ["relative min-w-0 overflow-hidden rounded-lg border-border bg-subtle", themedBorder],
+		header: "flex min-h-10 items-center justify-between gap-2 border-b border-border py-1 pr-1.5 pl-4",
+		title: "truncate font-mono text-caption text-faint-foreground",
+		copy: "shrink-0",
+		floatingCopy: "absolute top-2 right-2",
+		pre: "overflow-x-auto p-4 font-mono text-small leading-relaxed text-foreground"
+	},
+	variants: { wrap: { true: { pre: "whitespace-pre-wrap break-words" } } }
+});
+//#endregion
+export { codeBlockStyles, codeStyles };

package/dist/components/code/index.d.ts

@@ -0,0 +1,3 @@
+import { CodeBlockVariants, codeBlockStyles, codeStyles } from "./code.styles.js";
+import { Code, CodeBlock, CodeBlockProps } from "./code.js";
+export { Code, CodeBlock, type CodeBlockProps, type CodeBlockVariants, codeBlockStyles, codeStyles };

package/dist/components/collapsible/collapsible.d.ts

@@ -0,0 +1,56 @@
+import { StylesEntry } from "../../utils/registry.js";
+import { Collapsible } from "radix-ui";
+import { ComponentProps } from "react";
+//#region src/components/collapsible/collapsible.d.ts
+export declare const collapsibleStyles: import("tailwind-variants").TVReturnType<{
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      root?: import("tailwind-variants").ClassValue;
+      trigger?: import("tailwind-variants").ClassValue;
+      content?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {
+  [x: string]: {
+    [x: string]: import("tailwind-variants").ClassValue | {
+      root?: import("tailwind-variants").ClassValue;
+      trigger?: import("tailwind-variants").ClassValue;
+      content?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  root: string;
+  trigger: string;
+  content: string;
+}, undefined, {
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      root?: import("tailwind-variants").ClassValue;
+      trigger?: import("tailwind-variants").ClassValue;
+      content?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  root: string;
+  trigger: string;
+  content: string;
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+  root: string;
+  trigger: string;
+  content: string;
+}>>;
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Collapsible: StylesEntry<typeof collapsibleStyles>;
+  }
+}
+/**
+ * Shows and hides one region, e.g. "Show advanced options". For a list of expandable
+ * sections use Accordion.
+ */
+declare function Collapsible$1(inProps: ComponentProps<typeof Collapsible.Root>): import("react").JSX.Element;
+export declare function CollapsibleTrigger({ className, ...props }: ComponentProps<typeof Collapsible.Trigger>): import("react").JSX.Element;
+/** Animates its height open and closed; stays mounted until the closing animation ends. */
+export declare function CollapsibleContent({ className, ...props }: ComponentProps<typeof Collapsible.Content>): import("react").JSX.Element;
+//#endregion
+export { Collapsible$1 as Collapsible };