opin-ui 0.0.1

package/dist/components/toc/default.d.ts

@@ -0,0 +1,23 @@
+import { ComponentProps } from "react";
+import * as Primitive from "fumadocs-core/toc";
+
+//#region src/components/toc/default.d.ts
+interface TOCItemsProps extends ComponentProps<'div'> {
+  thumbBox?: boolean;
+}
+declare function TOCItems({
+  ref,
+  className,
+  thumbBox,
+  children,
+  ...props
+}: TOCItemsProps): import("react").JSX.Element;
+declare function TOCEmpty(): import("react").JSX.Element;
+declare function TOCItem({
+  item,
+  ...props
+}: Primitive.TOCItemProps & {
+  item: Primitive.TOCItemType;
+}): import("react").JSX.Element;
+//#endregion
+export { TOCEmpty, TOCItem, TOCItems, TOCItemsProps };

package/dist/components/toc/default.js

@@ -0,0 +1,259 @@
+"use client";
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../utils/cn.js";
+import { mergeRefs } from "../../utils/merge-refs.js";
+import { useTOCItems } from "./index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useTranslations } from "@fuma-translate/react";
+import * as Primitive from "fumadocs-core/toc";
+//#region src/components/toc/default.tsx
+var default_exports = /* @__PURE__ */ __exportAll({
+	TOCEmpty: () => TOCEmpty,
+	TOCItem: () => TOCItem,
+	TOCItems: () => TOCItems
+});
+function TOCItems({ ref, className, thumbBox = true, children, ...props }) {
+	const containerRef = useRef(null);
+	const items = useTOCItems();
+	const [svg, setSvg] = useState(null);
+	const onPrint = useCallback(() => {
+		const container = containerRef.current;
+		if (!container || container.clientHeight === 0) return;
+		if (items.length === 0) {
+			setSvg(null);
+			return;
+		}
+		let w = 0;
+		let h = 0;
+		let d = "";
+		const positions = [];
+		const output = [];
+		for (let i = 0; i < items.length; i++) {
+			const item = items[i];
+			const element = container.querySelector(`a[href="${item.url}"]`);
+			if (!element) continue;
+			const styles = getComputedStyle(element);
+			const x = getLineOffset(item.depth) + .5;
+			const top = element.offsetTop + parseFloat(styles.paddingTop);
+			const bottom = element.offsetTop + element.clientHeight - parseFloat(styles.paddingBottom);
+			w = Math.max(x + 8, w);
+			h = Math.max(h, bottom);
+			if (i === 0) d += ` M${x} ${top} L${x} ${bottom}`;
+			else {
+				const [, upperBottom, upperX] = i > 0 ? positions[i - 1] : [
+					0,
+					0,
+					0
+				];
+				d += ` C ${upperX} ${top - 4} ${x} ${upperBottom + 4} ${x} ${top} L${x} ${bottom}`;
+			}
+			if (item._step !== void 0) output.push(/* @__PURE__ */ jsxs("g", {
+				transform: `translate(${x}, ${(top + bottom) / 2})`,
+				children: [/* @__PURE__ */ jsx("circle", {
+					cx: "0",
+					cy: "0",
+					r: "8",
+					className: "fill-fd-primary"
+				}), /* @__PURE__ */ jsx("text", {
+					cx: "0",
+					cy: "0",
+					textAnchor: "middle",
+					alignmentBaseline: "central",
+					dominantBaseline: "middle",
+					className: "fill-fd-primary-foreground font-medium text-xs leading-none font-mono rtl:-scale-x-100",
+					children: item._step
+				})]
+			}, i));
+			positions.push([
+				top,
+				bottom,
+				x
+			]);
+		}
+		output.unshift(/* @__PURE__ */ jsx("path", {
+			d,
+			className: "stroke-fd-primary",
+			strokeWidth: "1",
+			fill: "none"
+		}, "path"));
+		const itemLineLengths = [];
+		if (thumbBox) {
+			const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+			path.setAttribute("d", d);
+			const n = path.getTotalLength();
+			for (let i = 0; i < positions.length; i++) {
+				const [top, bottom] = positions[i];
+				let l = i > 0 ? itemLineLengths[i - 1][1] + (top - positions[i - 1][1]) : top;
+				while (l < n && path.getPointAtLength(l).y < top) l++;
+				itemLineLengths.push([l, l + bottom - top]);
+			}
+		}
+		setSvg({
+			content: output,
+			width: w,
+			height: h,
+			d,
+			itemLineLengths,
+			positions
+		});
+	}, [items, thumbBox]);
+	useEffect(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		const observer = new ResizeObserver(onPrint);
+		observer.observe(container);
+		onPrint();
+		return () => {
+			observer.unobserve(container);
+		};
+	}, [onPrint]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: mergeRefs(containerRef, ref),
+		className: cn("relative flex flex-col", className),
+		...props,
+		children: [svg && /* @__PURE__ */ jsx(ThumbTrack, {
+			computed: svg,
+			thumbBox
+		}), children]
+	});
+}
+function TOCEmpty() {
+	return /* @__PURE__ */ jsx("div", {
+		className: "rounded-3xl bg-fd-card p-3 text-xs text-fd-muted-foreground",
+		children: useTranslations({ note: "table of contents" })("No Headings")
+	});
+}
+function ThumbTrack({ computed, thumbBox }) {
+	const ref = useRef(null);
+	const previousRef = useRef(null);
+	const tocInfo = Primitive.useTOC();
+	function calculate(items) {
+		const out = {};
+		const startIdx = items.findIndex((item) => item.active);
+		if (startIdx === -1) return out;
+		const endIdx = items.findLastIndex((item) => item.active);
+		out["--track-top"] = `${computed.positions[startIdx][0]}px`;
+		out["--track-bottom"] = `${computed.positions[endIdx][1]}px`;
+		if (thumbBox) {
+			let isUp = false;
+			if (previousRef.current) {
+				const prev = previousRef.current;
+				isUp = prev.startIdx > startIdx || prev.endIdx > endIdx || prev.startIdx === startIdx && prev.endIdx === endIdx && prev.isUp;
+			}
+			previousRef.current = {
+				startIdx,
+				endIdx,
+				isUp
+			};
+			out["--offset-distance"] = isUp ? `${computed.itemLineLengths[startIdx][0]}px` : `${computed.itemLineLengths[endIdx][1]}px`;
+			out["--opacity"] = items[isUp ? startIdx : endIdx].original._step !== void 0 ? "0" : "1";
+		}
+		return out;
+	}
+	Primitive.useTOCListener((items) => {
+		const element = ref.current;
+		if (!element) return;
+		for (const [k, v] of Object.entries(calculate(items))) element.style.setProperty(k, v);
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: "absolute top-0 inset-s-0 origin-center rtl:-scale-x-100",
+		style: {
+			width: computed.width,
+			height: computed.height,
+			...calculate(tocInfo.get())
+		},
+		children: [/* @__PURE__ */ jsx("svg", {
+			xmlns: "http://www.w3.org/2000/svg",
+			viewBox: `0 0 ${computed.width} ${computed.height}`,
+			className: "absolute transition-[clip-path]",
+			style: {
+				width: computed.width,
+				height: computed.height,
+				clipPath: `polygon(0 var(--track-top,0), 100% var(--track-top,0), 100% var(--track-bottom,0), 0 var(--track-bottom,0))`
+			},
+			children: computed.content
+		}), thumbBox && /* @__PURE__ */ jsx("div", {
+			className: "absolute left-0 size-1 bg-fd-primary rounded-full [offset-distance:var(--offset-distance,0)] opacity-(--opacity,0) transition-[opacity,offset-distance]",
+			style: { offsetPath: `path("${computed.d}")` }
+		})]
+	});
+}
+const BASE = 8;
+function getItemOffset(depth) {
+	if (depth <= 2) return 20;
+	if (depth === 3) return 32;
+	return 44;
+}
+function getLineOffset(depth) {
+	if (depth <= 2) return BASE;
+	if (depth === 3) return 16;
+	return 24;
+}
+function TOCItem({ item, ...props }) {
+	const items = useTOCItems();
+	const { isFirst, isLast, svg } = useMemo(() => {
+		const index = items.indexOf(item);
+		const isFirst = index === 0;
+		const isLast = index === items.length - 1;
+		const l1 = getLineOffset(item.depth);
+		const l0 = isFirst ? l1 : getLineOffset(items[index - 1].depth);
+		const l2 = isLast ? l1 : getLineOffset(items[index + 1].depth);
+		return {
+			isFirst,
+			isLast,
+			svg: /* @__PURE__ */ jsxs("svg", {
+				xmlns: "http://www.w3.org/2000/svg",
+				className: cn("absolute -top-1.5 inset-s-0 bottom-0 h-[calc(100%+--spacing(1.5))] -z-1 rtl:-scale-x-100", l1 !== l2 && "h-full bottom-1.5"),
+				style: { width: Math.max(l0, l1) + 9 },
+				children: [
+					l0 !== l1 && /* @__PURE__ */ jsx("path", {
+						d: `M ${l0 + .5} 0 C ${l0 + .5} 8 ${l1 + .5} 4 ${l1 + .5} 12`,
+						stroke: "black",
+						strokeWidth: "1",
+						fill: "none",
+						className: "stroke-fd-foreground/10"
+					}),
+					/* @__PURE__ */ jsx("line", {
+						x1: l1 + .5,
+						y1: l0 === l1 ? "6" : "12",
+						x2: l1 + .5,
+						y2: "100%",
+						strokeWidth: "1",
+						className: "stroke-fd-foreground/10"
+					}),
+					item._step !== void 0 && /* @__PURE__ */ jsxs("g", {
+						transform: `translate(${l1 + .5}, ${l1 === l2 ? "3" : "6"})`,
+						children: [/* @__PURE__ */ jsx("circle", {
+							cx: "0",
+							cy: "50%",
+							r: "8",
+							className: "fill-fd-muted"
+						}), /* @__PURE__ */ jsx("text", {
+							x: "0",
+							y: "50%",
+							textAnchor: "middle",
+							alignmentBaseline: "central",
+							dominantBaseline: "middle",
+							className: "fill-fd-muted-foreground font-medium text-xs leading-none font-mono rtl:-scale-x-100",
+							children: item._step
+						})]
+					})
+				]
+			})
+		};
+	}, [items, item]);
+	return /* @__PURE__ */ jsxs(Primitive.TOCItem, {
+		href: item.url,
+		...props,
+		className: cn("prose relative py-1.5 text-sm scroll-m-4 text-fd-muted-foreground hover:text-fd-accent-foreground transition-colors wrap-anywhere data-[active=true]:text-fd-primary", isFirst && "pt-0", isLast && "pb-0", props.className),
+		style: {
+			paddingInlineStart: getItemOffset(item.depth),
+			...props.style
+		},
+		children: [svg, item.title]
+	});
+}
+//#endregion
+export { TOCEmpty, TOCItem, TOCItems, default_exports };

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

@@ -0,0 +1,19 @@
+import { ComponentProps } from "react";
+import * as Primitive from "fumadocs-core/toc";
+
+//#region src/components/toc/index.d.ts
+declare function useTOCItems(): Primitive.TOCItemType[];
+type TOCProviderProps = Primitive.AnchorProviderProps;
+declare const useActiveAnchor: typeof Primitive.useActiveAnchor, useActiveAnchors: typeof Primitive.useActiveAnchors, useItems: typeof Primitive.useItems;
+declare function TOCProvider({
+  toc,
+  children,
+  ...props
+}: TOCProviderProps): import("react").JSX.Element;
+declare function TOCScrollArea({
+  ref,
+  className,
+  ...props
+}: ComponentProps<'div'>): import("react").JSX.Element;
+//#endregion
+export { TOCProvider, TOCProviderProps, TOCScrollArea, useActiveAnchor, useActiveAnchors, useItems, useTOCItems };

package/dist/components/toc/index.js

@@ -0,0 +1,45 @@
+"use client";
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../utils/cn.js";
+import { mergeRefs } from "../../utils/merge-refs.js";
+import { jsx } from "react/jsx-runtime";
+import { createContext, use, useRef } from "react";
+import * as Primitive from "fumadocs-core/toc";
+//#region src/components/toc/index.tsx
+var toc_exports = /* @__PURE__ */ __exportAll({
+	TOCProvider: () => TOCProvider,
+	TOCScrollArea: () => TOCScrollArea,
+	useActiveAnchor: () => useActiveAnchor,
+	useActiveAnchors: () => useActiveAnchors,
+	useItems: () => useItems,
+	useTOCItems: () => useTOCItems
+});
+const TOCContext = createContext([]);
+function useTOCItems() {
+	return use(TOCContext);
+}
+const { useActiveAnchor, useActiveAnchors, useItems } = Primitive;
+function TOCProvider({ toc, children, ...props }) {
+	return /* @__PURE__ */ jsx(TOCContext, {
+		value: toc,
+		children: /* @__PURE__ */ jsx(Primitive.AnchorProvider, {
+			toc,
+			...props,
+			children
+		})
+	});
+}
+function TOCScrollArea({ ref, className, ...props }) {
+	const viewRef = useRef(null);
+	return /* @__PURE__ */ jsx("div", {
+		ref: mergeRefs(viewRef, ref),
+		className: cn("relative min-h-0 text-sm ms-px overflow-auto [scrollbar-width:none] mask-[linear-gradient(to_bottom,transparent,white_16px,white_calc(100%-16px),transparent)] py-3", className),
+		...props,
+		children: /* @__PURE__ */ jsx(Primitive.ScrollProvider, {
+			containerRef: viewRef,
+			children: props.children
+		})
+	});
+}
+//#endregion
+export { TOCProvider, TOCScrollArea, toc_exports, useActiveAnchor, useActiveAnchors, useItems, useTOCItems };

package/dist/components/type-table.d.ts

@@ -0,0 +1,43 @@
+import { ComponentProps, ReactNode } from "react";
+
+//#region src/components/type-table.d.ts
+interface ParameterNode {
+  name: string;
+  description: ReactNode;
+}
+interface TypeNode {
+  /**
+   * Additional description of the field
+   */
+  description?: ReactNode;
+  /**
+   * type signature (short)
+   */
+  type: ReactNode;
+  /**
+   * type signature (full)
+   */
+  typeDescription?: ReactNode;
+  /**
+   * Optional `href` for the type
+   */
+  typeDescriptionLink?: string;
+  default?: ReactNode;
+  required?: boolean;
+  deprecated?: boolean;
+  /**
+   * a list of parameters info if the type is a function.
+   */
+  parameters?: ParameterNode[];
+  returns?: ReactNode;
+}
+declare function TypeTable({
+  id,
+  type,
+  className,
+  ...props
+}: {
+  type: Record<string, TypeNode>;
+} & ComponentProps<'div'>): import("react").JSX.Element;
+//#endregion
+export { ParameterNode, TypeNode, TypeTable };

package/dist/components/type-table.js

@@ -0,0 +1,117 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./ui/collapsible.js";
+import Link from "fumadocs-core/link";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown } from "lucide-react";
+import { cva } from "class-variance-authority";
+import { useEffect, useState } from "react";
+import { useTranslations } from "@fuma-translate/react";
+//#region src/components/type-table.tsx
+const fieldVariants = cva("text-fd-muted-foreground not-prose pe-2");
+function TypeTable({ id, type, className, ...props }) {
+	const t = useTranslations({ note: "type table" });
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		className: cn("@container flex flex-col p-2 bg-fd-card text-fd-card-foreground rounded-3xl my-6 text-sm overflow-hidden", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex font-medium items-center px-3 py-1 not-prose text-fd-muted-foreground",
+			children: [/* @__PURE__ */ jsx("p", {
+				className: "w-1/4",
+				children: t("Prop")
+			}), /* @__PURE__ */ jsx("p", {
+				className: "@max-xl:hidden",
+				children: t("Type")
+			})]
+		}), Object.entries(type).map(([key, value]) => /* @__PURE__ */ jsx(Item, {
+			parentId: id,
+			name: key,
+			item: value
+		}, key))]
+	});
+}
+function Item({ parentId, name, item: { parameters = [], description, required = false, deprecated, typeDescription, default: defaultValue, type, typeDescriptionLink, returns } }) {
+	const t = useTranslations({ note: "type table" });
+	const [open, setOpen] = useState(false);
+	const id = parentId ? `${parentId}-${name}` : void 0;
+	useEffect(() => {
+		const hash = window.location.hash;
+		if (!id || !hash) return;
+		if (`#${id}` === hash) setOpen(true);
+	}, [id]);
+	return /* @__PURE__ */ jsxs(Collapsible, {
+		id,
+		open,
+		onOpenChange: (v) => {
+			if (v && id) window.history.replaceState(null, "", `#${id}`);
+			setOpen(v);
+		},
+		className: cn("rounded-2xl overflow-hidden scroll-m-20 transition-all", open ? "bg-fd-background not-last:mb-2" : ""),
+		children: [/* @__PURE__ */ jsxs(CollapsibleTrigger, {
+			className: "relative flex flex-row items-center w-full group text-start px-3 py-2 not-prose hover:bg-fd-accent rounded-2xl focus-visible:outline-none focus-visible:bg-fd-accent",
+			children: [
+				/* @__PURE__ */ jsxs("code", {
+					className: cn("text-fd-primary min-w-fit w-1/4 font-mono font-medium pe-2", deprecated && "line-through text-fd-primary/50"),
+					children: [name, !required && "?"]
+				}),
+				typeDescriptionLink ? /* @__PURE__ */ jsx(Link, {
+					href: typeDescriptionLink,
+					className: "underline @max-xl:hidden",
+					children: type
+				}) : /* @__PURE__ */ jsx("span", {
+					className: "@max-xl:hidden",
+					children: type
+				}),
+				/* @__PURE__ */ jsx(ChevronDown, { className: "absolute end-2 size-4 text-fd-muted-foreground transition-transform group-data-[state=open]:rotate-180" })
+			]
+		}), /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsxs("div", {
+			className: "grid grid-cols-[1fr_3fr] gap-y-4 text-sm p-2 overflow-auto fd-scroll-container bg-fd-muted/40",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "text-sm prose col-span-full prose-no-margin empty:hidden",
+					children: description
+				}),
+				typeDescription && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("p", {
+					className: cn(fieldVariants()),
+					children: t("Type")
+				}), /* @__PURE__ */ jsx("p", {
+					className: "my-auto not-prose",
+					children: typeDescription
+				})] }),
+				defaultValue && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("p", {
+					className: cn(fieldVariants()),
+					children: t("Default")
+				}), /* @__PURE__ */ jsx("p", {
+					className: "my-auto not-prose",
+					children: defaultValue
+				})] }),
+				parameters.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("p", {
+					className: cn(fieldVariants()),
+					children: t("Parameters")
+				}), /* @__PURE__ */ jsx("div", {
+					className: "flex flex-col gap-2",
+					children: parameters.map((param) => /* @__PURE__ */ jsxs("div", {
+						className: "inline-flex items-center flex-wrap gap-1",
+						children: [/* @__PURE__ */ jsxs("p", {
+							className: "font-medium not-prose text-nowrap",
+							children: [param.name, " -"]
+						}), /* @__PURE__ */ jsx("div", {
+							className: "text-sm prose prose-no-margin",
+							children: param.description
+						})]
+					}, param.name))
+				})] }),
+				returns && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("p", {
+					className: cn(fieldVariants()),
+					children: t("Returns")
+				}), /* @__PURE__ */ jsx("div", {
+					className: "my-auto text-sm prose prose-no-margin",
+					children: returns
+				})] })
+			]
+		}) })]
+	});
+}
+//#endregion
+export { TypeTable };

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

@@ -0,0 +1,30 @@
+import { ComponentProps } from "react";
+import * as Primitive from "@radix-ui/react-accordion";
+
+//#region src/components/ui/accordion.d.ts
+declare function Accordion({
+  className,
+  ...props
+}: ComponentProps<typeof Primitive.Root>): import("react").JSX.Element;
+declare function AccordionItem({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof Primitive.Item>): import("react").JSX.Element;
+declare function AccordionHeader({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof Primitive.Header>): import("react").JSX.Element;
+declare function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof Primitive.Trigger>): import("react").JSX.Element;
+declare function AccordionContent({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof Primitive.Content>): import("react").JSX.Element;
+//#endregion
+export { Accordion, AccordionContent, AccordionHeader, AccordionItem, AccordionTrigger };

package/dist/components/ui/accordion.js

@@ -0,0 +1,42 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRight } from "lucide-react";
+import * as Primitive from "@radix-ui/react-accordion";
+//#region src/components/ui/accordion.tsx
+function Accordion({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Primitive.Root, {
+		className: cn("flex flex-col gap-2 overflow-hidden rounded-3xl bg-fd-muted p-2", className),
+		...props
+	});
+}
+function AccordionItem({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Primitive.Item, {
+		className: cn("scroll-m-24 overflow-hidden rounded-2xl bg-fd-card", className),
+		...props,
+		children
+	});
+}
+function AccordionHeader({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Primitive.Header, {
+		className: cn("not-prose flex flex-row items-center text-fd-card-foreground font-medium transition-colors has-focus-visible:bg-fd-accent/50", className),
+		...props,
+		children
+	});
+}
+function AccordionTrigger({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Primitive.Trigger, {
+		className: cn("group flex flex-1 items-center gap-2 px-3 py-2.5 text-start focus-visible:outline-none", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(ChevronRight, { className: "size-4 shrink-0 text-fd-muted-foreground transition-transform duration-200 group-data-[state=open]:rotate-90" }), children]
+	});
+}
+function AccordionContent({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Primitive.Content, {
+		className: cn("overflow-hidden data-[state=closed]:animate-fd-accordion-up data-[state=open]:animate-fd-accordion-down", className),
+		...props,
+		children
+	});
+}
+//#endregion
+export { Accordion, AccordionContent, AccordionHeader, AccordionItem, AccordionTrigger };

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

@@ -0,0 +1,11 @@
+import { VariantProps } from "class-variance-authority";
+
+//#region src/components/ui/button.d.ts
+declare const buttonVariants: (props?: ({
+  variant?: "primary" | "outline" | "ghost" | "secondary" | null | undefined;
+  color?: "primary" | "outline" | "ghost" | "secondary" | null | undefined;
+  size?: "icon" | "sm" | "icon-sm" | "icon-xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type ButtonProps = VariantProps<typeof buttonVariants>;
+//#endregion
+export { ButtonProps, buttonVariants };

package/dist/components/ui/button.js

@@ -0,0 +1,20 @@
+import { cva } from "class-variance-authority";
+//#region src/components/ui/button.tsx
+const variants = {
+	primary: "bg-fd-primary text-fd-primary-foreground hover:bg-fd-primary/80 disabled:bg-fd-secondary disabled:text-fd-secondary-foreground",
+	outline: "hover:bg-fd-accent hover:text-fd-accent-foreground",
+	ghost: "hover:bg-fd-accent hover:text-fd-accent-foreground",
+	secondary: "bg-fd-secondary text-fd-secondary-foreground hover:bg-fd-accent hover:text-fd-accent-foreground"
+};
+const buttonVariants = cva("inline-flex items-center justify-center rounded-md p-2 text-sm font-medium transition-colors duration-100 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:bg-fd-accent", { variants: {
+	variant: variants,
+	color: variants,
+	size: {
+		sm: "gap-1 px-2 py-1.5 text-xs",
+		icon: "p-1.5 [&_svg]:size-5",
+		"icon-sm": "p-1.5 [&_svg]:size-4.5",
+		"icon-xs": "p-1 [&_svg]:size-4"
+	}
+} });
+//#endregion
+export { buttonVariants };

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

@@ -0,0 +1,15 @@
+import * as React$1 from "react";
+import * as Primitive from "@radix-ui/react-collapsible";
+
+//#region src/components/ui/collapsible.d.ts
+declare const Collapsible: React$1.ForwardRefExoticComponent<Primitive.CollapsibleProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const CollapsibleTrigger: React$1.ForwardRefExoticComponent<Primitive.CollapsibleTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare function CollapsibleContent({
+  children,
+  ...props
+}: React$1.ComponentPropsWithRef<typeof Primitive.CollapsibleContent>): React$1.JSX.Element;
+type CollapsibleProps = Primitive.CollapsibleProps;
+type CollapsibleContentProps = Primitive.CollapsibleContentProps;
+type CollapsibleTriggerProps = Primitive.CollapsibleTriggerProps;
+//#endregion
+export { Collapsible, CollapsibleContent, CollapsibleContentProps, CollapsibleProps, CollapsibleTrigger, CollapsibleTriggerProps };

package/dist/components/ui/collapsible.js

@@ -0,0 +1,21 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import * as Primitive from "@radix-ui/react-collapsible";
+//#region src/components/ui/collapsible.tsx
+const Collapsible = Primitive.Root;
+const CollapsibleTrigger = Primitive.CollapsibleTrigger;
+function CollapsibleContent({ children, ...props }) {
+	const [mounted, setMounted] = useState(false);
+	useEffect(() => {
+		setMounted(true);
+	}, []);
+	return /* @__PURE__ */ jsx(Primitive.CollapsibleContent, {
+		...props,
+		className: cn("overflow-hidden", mounted && "data-[state=closed]:animate-fd-collapsible-up data-[state=open]:animate-fd-collapsible-down", props.className),
+		children
+	});
+}
+//#endregion
+export { Collapsible, CollapsibleContent, CollapsibleTrigger };