@tetherto/dev-websites-core 0.2.0 → 0.3.0

package/dist/ui/components/Button/Button.mjs

@@ -0,0 +1,48 @@
+"use client";
+import { cn } from "../../utils/cn.mjs";
+import { focusRingClassName } from "../../a11y/focus.mjs";
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+//#region src/ui/components/Button/Button.tsx
+const buttonVariants = cva(cn("inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap font-semibold transition-colors outline-none select-none disabled:pointer-events-none disabled:opacity-50", focusRingClassName), {
+	variants: {
+		variant: {
+			"solid": "rounded-btn bg-accent text-accent-foreground hover:opacity-90",
+			"outline": "rounded-btn border border-accent bg-transparent text-foreground hover:bg-foreground/5",
+			"ghost": "rounded-btn bg-transparent text-accent hover:bg-foreground/5",
+			"secondary": "rounded-btn border border-foreground/20 bg-foreground/5 text-foreground hover:bg-foreground/10",
+			"social": "rounded-btn border border-foreground/10 bg-card-elevated text-secondary hover:border-foreground/20 hover:text-foreground",
+			"action": "rounded-btn border-0 bg-foreground text-background hover:opacity-90 no-underline",
+			"elevated-outline": "rounded-btn border border-foreground bg-surface-elevated text-foreground hover:bg-surface-elevated/80",
+			"link": "bg-transparent p-0 text-accent underline-offset-4 hover:underline"
+		},
+		size: {
+			default: "h-btn px-btn text-sm",
+			sm: "h-btn-sm px-btn-sm text-xs",
+			cta: "h-auto rounded-control px-4 py-3 text-sm font-medium",
+			icon: "size-9 rounded-btn p-0",
+			social: "h-[42px] gap-2 px-btn"
+		}
+	},
+	defaultVariants: {
+		variant: "solid",
+		size: "default"
+	}
+});
+function Button({ className, variant = "solid", size = "default", asChild = false, ...props }) {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "button", {
+		"data-slot": "button",
+		"data-variant": variant,
+		"data-size": size,
+		className: cn(buttonVariants({
+			variant,
+			size
+		}), className),
+		...props
+	});
+}
+//#endregion
+export { Button, buttonVariants };
+
+//# sourceMappingURL=Button.mjs.map

package/dist/ui/components/Button/Button.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.mjs","names":[],"sources":["../../../../src/ui/components/Button/Button.tsx"],"sourcesContent":["'use client'\n\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nimport { focusRingClassName } from '../../a11y/focus.js'\nimport { cn } from '../../utils/cn.js'\n\nimport type { ComponentProps } from 'react'\n\nconst buttonVariants = cva(\n  cn(\n    'inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap font-semibold transition-colors outline-none select-none disabled:pointer-events-none disabled:opacity-50',\n    focusRingClassName\n  ),\n  {\n    variants: {\n      variant: {\n        'solid': 'rounded-btn bg-accent text-accent-foreground hover:opacity-90',\n        'outline':\n          'rounded-btn border border-accent bg-transparent text-foreground hover:bg-foreground/5',\n        'ghost': 'rounded-btn bg-transparent text-accent hover:bg-foreground/5',\n        'secondary':\n          'rounded-btn border border-foreground/20 bg-foreground/5 text-foreground hover:bg-foreground/10',\n        'social':\n          'rounded-btn border border-foreground/10 bg-card-elevated text-secondary hover:border-foreground/20 hover:text-foreground',\n        'action':\n          'rounded-btn border-0 bg-foreground text-background hover:opacity-90 no-underline',\n        'elevated-outline':\n          'rounded-btn border border-foreground bg-surface-elevated text-foreground hover:bg-surface-elevated/80',\n        'link': 'bg-transparent p-0 text-accent underline-offset-4 hover:underline',\n      },\n      size: {\n        default: 'h-btn px-btn text-sm',\n        sm: 'h-btn-sm px-btn-sm text-xs',\n        cta: 'h-auto rounded-control px-4 py-3 text-sm font-medium',\n        icon: 'size-9 rounded-btn p-0',\n        social: 'h-[42px] gap-2 px-btn',\n      },\n    },\n    defaultVariants: {\n      variant: 'solid',\n      size: 'default',\n    },\n  }\n)\n\nexport type ButtonProps = ComponentProps<'button'> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean\n  }\n\nfunction Button({\n  className,\n  variant = 'solid',\n  size = 'default',\n  asChild = false,\n  ...props\n}: ButtonProps) {\n  const Comp = asChild ? Slot : 'button'\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(buttonVariants({ variant, size }), className)}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n"],"mappings":";;;;;;;AAUA,MAAM,iBAAiB,IACrB,GACE,4LACA,kBACF,GACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,WACE;GACF,SAAS;GACT,aACE;GACF,UACE;GACF,UACE;GACF,oBACE;GACF,QAAQ;EACV;EACA,MAAM;GACJ,SAAS;GACT,IAAI;GACJ,KAAK;GACL,MAAM;GACN,QAAQ;EACV;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CACF;AAOA,SAAS,OAAO,EACd,WACA,UAAU,SACV,OAAO,WACP,UAAU,OACV,GAAG,SACW;CAGd,OACE,oBAHW,UAAU,OAAO,UAG5B;EACE,aAAU;EACV,gBAAc;EACd,aAAW;EACX,WAAW,GAAG,eAAe;GAAE;GAAS;EAAK,CAAC,GAAG,SAAS;EAC1D,GAAI;CACL,CAAA;AAEL"}

package/dist/ui/components/Button/index.d.mts

@@ -0,0 +1,2 @@
+import { Button, ButtonProps, buttonVariants } from "./Button.mjs";
+export { Button, type ButtonProps, buttonVariants };

package/dist/ui/components/Button/index.mjs

@@ -0,0 +1,2 @@
+import { Button, buttonVariants } from "./Button.mjs";
+export { Button, buttonVariants };

package/dist/ui/components/Card/Card.d.mts

@@ -0,0 +1,14 @@
+import { HTMLAttributes } from "react";
+import { VariantProps } from "class-variance-authority";
+//#region src/ui/components/Card/Card.d.ts
+declare const cardVariants: (props?: ({
+  variant?: "surface" | "card" | "elevated" | null | undefined;
+  padding?: "sm" | "none" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type CardProps = HTMLAttributes<HTMLDivElement> & VariantProps<typeof cardVariants> & {
+  asChild?: boolean;
+};
+declare function Card({ className, variant, padding, asChild, ...props }: CardProps): import("react").JSX.Element;
+//#endregion
+export { Card, CardProps, cardVariants };
+//# sourceMappingURL=Card.d.mts.map

package/dist/ui/components/Card/Card.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.mts","names":[],"sources":["../../../../src/ui/components/Card/Card.tsx"],"mappings":";;;cASM,eAAY;;;6CAkBhB;KAEU,YAAY,eAAe,kBACrC,oBAAoB;EAClB;;iBAGK,OAAO,WAAW,SAAS,SAAS,YAAoB,SAAS,4BAAS,IAAA"}

package/dist/ui/components/Card/Card.mjs

@@ -0,0 +1,40 @@
+"use client";
+import { cn } from "../../utils/cn.mjs";
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+//#region src/ui/components/Card/Card.tsx
+const cardVariants = cva("rounded-card border", {
+	variants: {
+		variant: {
+			surface: "border-border bg-surface",
+			card: "border-border-subtle bg-card",
+			elevated: "border-border bg-card-elevated"
+		},
+		padding: {
+			none: "",
+			sm: "p-5",
+			md: "p-6",
+			lg: "p-6 sm:p-8"
+		}
+	},
+	defaultVariants: {
+		variant: "surface",
+		padding: "md"
+	}
+});
+function Card({ className, variant, padding, asChild = false, ...props }) {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "div", {
+		"data-slot": "card",
+		"data-variant": variant,
+		className: cn(cardVariants({
+			variant,
+			padding
+		}), className),
+		...props
+	});
+}
+//#endregion
+export { Card, cardVariants };
+
+//# sourceMappingURL=Card.mjs.map

package/dist/ui/components/Card/Card.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.mjs","names":[],"sources":["../../../../src/ui/components/Card/Card.tsx"],"sourcesContent":["'use client'\n\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nimport { cn } from '../../utils/cn.js'\n\nimport type { HTMLAttributes } from 'react'\n\nconst cardVariants = cva('rounded-card border', {\n  variants: {\n    variant: {\n      surface: 'border-border bg-surface',\n      card: 'border-border-subtle bg-card',\n      elevated: 'border-border bg-card-elevated',\n    },\n    padding: {\n      none: '',\n      sm: 'p-5',\n      md: 'p-6',\n      lg: 'p-6 sm:p-8',\n    },\n  },\n  defaultVariants: {\n    variant: 'surface',\n    padding: 'md',\n  },\n})\n\nexport type CardProps = HTMLAttributes<HTMLDivElement> &\n  VariantProps<typeof cardVariants> & {\n    asChild?: boolean\n  }\n\nfunction Card({ className, variant, padding, asChild = false, ...props }: CardProps) {\n  const Comp = asChild ? Slot : 'div'\n  return (\n    <Comp\n      data-slot=\"card\"\n      data-variant={variant}\n      className={cn(cardVariants({ variant, padding }), className)}\n      {...props}\n    />\n  )\n}\n\nexport { Card, cardVariants }\n"],"mappings":";;;;;;AASA,MAAM,eAAe,IAAI,uBAAuB;CAC9C,UAAU;EACR,SAAS;GACP,SAAS;GACT,MAAM;GACN,UAAU;EACZ;EACA,SAAS;GACP,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;CACF;CACA,iBAAiB;EACf,SAAS;EACT,SAAS;CACX;AACF,CAAC;AAOD,SAAS,KAAK,EAAE,WAAW,SAAS,SAAS,UAAU,OAAO,GAAG,SAAoB;CAEnF,OACE,oBAFW,UAAU,OAAO,OAE5B;EACE,aAAU;EACV,gBAAc;EACd,WAAW,GAAG,aAAa;GAAE;GAAS;EAAQ,CAAC,GAAG,SAAS;EAC3D,GAAI;CACL,CAAA;AAEL"}

package/dist/ui/components/Card/index.d.mts

@@ -0,0 +1,2 @@
+import { Card, CardProps, cardVariants } from "./Card.mjs";
+export { Card, type CardProps, cardVariants };

package/dist/ui/components/Card/index.mjs

@@ -0,0 +1,2 @@
+import { Card, cardVariants } from "./Card.mjs";
+export { Card, cardVariants };

package/dist/ui/components/Carousel/Carousel.d.mts

@@ -0,0 +1,42 @@
+import { HTMLAttributes, ReactNode } from "react";
+import { UseEmblaCarouselType } from "embla-carousel-react";
+import { EmblaOptionsType } from "embla-carousel";
+//#region src/ui/components/Carousel/Carousel.d.ts
+type EmblaCarouselType = UseEmblaCarouselType[1];
+type CarouselApi = {
+  selectedIndex: number;
+  scrollSnaps: number[];
+  canScrollPrev: boolean;
+  canScrollNext: boolean;
+  scrollTo: (index: number) => void;
+  scrollPrev: () => void;
+  scrollNext: () => void;
+  viewportRef: (node: HTMLElement | null) => void;
+  emblaApi: EmblaCarouselType | undefined;
+};
+declare function useCarousel(): CarouselApi;
+type CarouselProps = HTMLAttributes<HTMLDivElement> & {
+  options?: EmblaOptionsType;
+  /** Accessible name for the carousel region. Apps own i18n. */
+  label: string;
+  children: ReactNode;
+};
+declare function Carousel({ options, label, className, children, ...props }: CarouselProps): import("react").JSX.Element;
+declare function CarouselViewport({ className, children, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+declare function CarouselContainer({ className, children, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+declare function CarouselSlide({ className, children, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+type CarouselControlsProps = {
+  className?: string;
+  prevLabel: string;
+  nextLabel: string;
+};
+declare function CarouselControls({ className, prevLabel, nextLabel }: CarouselControlsProps): import("react").JSX.Element;
+type CarouselPaginationProps = {
+  className?: string;
+  paginationLabel: string;
+  slideLabel: (slide: number) => string;
+};
+declare function CarouselPagination({ className, paginationLabel, slideLabel }: CarouselPaginationProps): import("react").JSX.Element | null;
+//#endregion
+export { Carousel, CarouselApi, CarouselContainer, CarouselControls, CarouselControlsProps, CarouselPagination, CarouselPaginationProps, CarouselProps, CarouselSlide, CarouselViewport, useCarousel };
+//# sourceMappingURL=Carousel.d.mts.map

package/dist/ui/components/Carousel/Carousel.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Carousel.d.mts","names":[],"sources":["../../../../src/ui/components/Carousel/Carousel.tsx"],"mappings":";;;;KAkBK,oBAAoB;KAEb;EACV;EACA;EACA;EACA;EACA,WAAW;EACX;EACA;EACA,cAAc,MAAM;EACpB,UAAU;;iBAKI,eAAW;KAQf,gBAAgB,eAAe;EACzC,UAAU;;EAEV;EACA,UAAU;;iBAGH,WAAW,SAAS,OAAO,WAAW,aAAa,SAAS,gCAAa,IAAA;iBAkDzE,mBAAmB,WAAW,aAAa,SAAS,eAAe,kCAAe,IAAA;iBASlF,oBAAoB,WAAW,aAAa,SAAS,eAAe,kCAAe,IAAA;iBAQnF,gBAAgB,WAAW,aAAa,SAAS,eAAe,kCAAe,IAAA;KAa5E;EACV;EACA;EACA;;iBA+BO,mBAAmB,WAAW,WAAW,aAAa,wCAAqB,IAAA;KA6BxE;EACV;EACA;EACA,aAAa;;iBAGN,qBAAqB,WAAW,iBAAiB,cAAc,0CAAuB,IAAA"}

package/dist/ui/components/Carousel/Carousel.mjs

@@ -0,0 +1,164 @@
+"use client";
+import { cn } from "../../utils/cn.mjs";
+import { focusRingClassName } from "../../a11y/focus.mjs";
+import { Button } from "../Button/Button.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useState } from "react";
+import useEmblaCarousel from "embla-carousel-react";
+//#region src/ui/components/Carousel/Carousel.tsx
+const CarouselContext = createContext(null);
+function useCarousel() {
+	const context = useContext(CarouselContext);
+	if (!context) throw new Error("Carousel components must be used within <Carousel>");
+	return context;
+}
+function Carousel({ options, label, className, children, ...props }) {
+	const [viewportRef, emblaApi] = useEmblaCarousel(options);
+	const [selectedIndex, setSelectedIndex] = useState(0);
+	const [scrollSnaps, setScrollSnaps] = useState([]);
+	const [canScrollPrev, setCanScrollPrev] = useState(false);
+	const [canScrollNext, setCanScrollNext] = useState(false);
+	useEffect(() => {
+		if (!emblaApi) return;
+		function onSelect(api) {
+			setSelectedIndex(api.selectedScrollSnap());
+			setCanScrollPrev(api.canScrollPrev());
+			setCanScrollNext(api.canScrollNext());
+		}
+		setScrollSnaps(emblaApi.scrollSnapList());
+		onSelect(emblaApi);
+		emblaApi.on("reInit", onSelect);
+		emblaApi.on("select", onSelect);
+		return () => {
+			emblaApi.off("reInit", onSelect);
+			emblaApi.off("select", onSelect);
+		};
+	}, [emblaApi]);
+	const value = {
+		viewportRef,
+		emblaApi,
+		selectedIndex,
+		scrollSnaps,
+		canScrollPrev,
+		canScrollNext,
+		scrollTo: (index) => emblaApi?.scrollTo(index),
+		scrollPrev: () => emblaApi?.scrollPrev(),
+		scrollNext: () => emblaApi?.scrollNext()
+	};
+	return /* @__PURE__ */ jsx(CarouselContext.Provider, {
+		value,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("flex flex-col", className),
+			...props,
+			children: /* @__PURE__ */ jsx("div", {
+				"aria-label": label,
+				"aria-roledescription": "carousel",
+				children
+			})
+		})
+	});
+}
+function CarouselViewport({ className, children, ...props }) {
+	const { viewportRef } = useCarousel();
+	return /* @__PURE__ */ jsx("div", {
+		ref: viewportRef,
+		className: cn("overflow-hidden", className),
+		...props,
+		children
+	});
+}
+function CarouselContainer({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex", className),
+		...props,
+		children
+	});
+}
+function CarouselSlide({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"aria-roledescription": "slide",
+		className: cn("min-w-0 shrink-0 grow-0 basis-full", className),
+		...props,
+		children
+	});
+}
+function ChevronLeft() {
+	return /* @__PURE__ */ jsx("svg", {
+		"aria-hidden": "true",
+		viewBox: "0 0 20 20",
+		width: "20",
+		height: "20",
+		fill: "none",
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M12.5 4.5 7 10l5.5 5.5",
+			stroke: "currentColor",
+			strokeWidth: "1.5",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	});
+}
+function ChevronRight() {
+	return /* @__PURE__ */ jsx("svg", {
+		"aria-hidden": "true",
+		viewBox: "0 0 20 20",
+		width: "20",
+		height: "20",
+		fill: "none",
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M7.5 4.5 13 10l-5.5 5.5",
+			stroke: "currentColor",
+			strokeWidth: "1.5",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	});
+}
+function CarouselControls({ className, prevLabel, nextLabel }) {
+	const { canScrollPrev, canScrollNext, scrollPrev, scrollNext } = useCarousel();
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center gap-2", className),
+		children: [/* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "secondary",
+			size: "icon",
+			"aria-label": prevLabel,
+			disabled: !canScrollPrev,
+			onClick: scrollPrev,
+			children: /* @__PURE__ */ jsx(ChevronLeft, {})
+		}), /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "secondary",
+			size: "icon",
+			"aria-label": nextLabel,
+			disabled: !canScrollNext,
+			onClick: scrollNext,
+			children: /* @__PURE__ */ jsx(ChevronRight, {})
+		})]
+	});
+}
+function CarouselPagination({ className, paginationLabel, slideLabel }) {
+	const { scrollSnaps, selectedIndex, scrollTo } = useCarousel();
+	if (scrollSnaps.length <= 1) return null;
+	return /* @__PURE__ */ jsx("div", {
+		role: "tablist",
+		"aria-label": paginationLabel,
+		className: cn("flex items-center justify-center gap-2", className),
+		children: scrollSnaps.map((_, index) => {
+			const isActive = index === selectedIndex;
+			return /* @__PURE__ */ jsx("button", {
+				type: "button",
+				role: "tab",
+				"aria-label": slideLabel(index + 1),
+				"aria-selected": isActive,
+				onClick: () => scrollTo(index),
+				className: cn("size-2 cursor-pointer rounded-full transition-colors", focusRingClassName, isActive ? "bg-accent" : "bg-foreground/25 hover:bg-foreground/40")
+			}, index);
+		})
+	});
+}
+//#endregion
+export { Carousel, CarouselContainer, CarouselControls, CarouselPagination, CarouselSlide, CarouselViewport, useCarousel };
+
+//# sourceMappingURL=Carousel.mjs.map

package/dist/ui/components/Carousel/Carousel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Carousel.mjs","names":[],"sources":["../../../../src/ui/components/Carousel/Carousel.tsx"],"sourcesContent":["'use client'\n\nimport useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react'\nimport {\n  createContext,\n  useContext,\n  useEffect,\n  useState,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react'\n\nimport { Button } from '../Button/Button.js'\nimport { focusRingClassName } from '../../a11y/focus.js'\nimport { cn } from '../../utils/cn.js'\n\nimport type { EmblaOptionsType } from 'embla-carousel'\n\ntype EmblaCarouselType = UseEmblaCarouselType[1]\n\nexport type CarouselApi = {\n  selectedIndex: number\n  scrollSnaps: number[]\n  canScrollPrev: boolean\n  canScrollNext: boolean\n  scrollTo: (index: number) => void\n  scrollPrev: () => void\n  scrollNext: () => void\n  viewportRef: (node: HTMLElement | null) => void\n  emblaApi: EmblaCarouselType | undefined\n}\n\nconst CarouselContext = createContext<CarouselApi | null>(null)\n\nexport function useCarousel() {\n  const context = useContext(CarouselContext)\n  if (!context) {\n    throw new Error('Carousel components must be used within <Carousel>')\n  }\n  return context\n}\n\nexport type CarouselProps = HTMLAttributes<HTMLDivElement> & {\n  options?: EmblaOptionsType\n  /** Accessible name for the carousel region. Apps own i18n. */\n  label: string\n  children: ReactNode\n}\n\nfunction Carousel({ options, label, className, children, ...props }: CarouselProps) {\n  const [viewportRef, emblaApi] = useEmblaCarousel(options)\n  const [selectedIndex, setSelectedIndex] = useState(0)\n  const [scrollSnaps, setScrollSnaps] = useState<number[]>([])\n  const [canScrollPrev, setCanScrollPrev] = useState(false)\n  const [canScrollNext, setCanScrollNext] = useState(false)\n\n  useEffect(() => {\n    if (!emblaApi) return\n\n    function onSelect(api: NonNullable<typeof emblaApi>) {\n      setSelectedIndex(api.selectedScrollSnap())\n      setCanScrollPrev(api.canScrollPrev())\n      setCanScrollNext(api.canScrollNext())\n    }\n\n    setScrollSnaps(emblaApi.scrollSnapList())\n    onSelect(emblaApi)\n    emblaApi.on('reInit', onSelect)\n    emblaApi.on('select', onSelect)\n\n    return () => {\n      emblaApi.off('reInit', onSelect)\n      emblaApi.off('select', onSelect)\n    }\n  }, [emblaApi])\n\n  const value: CarouselApi = {\n    viewportRef,\n    emblaApi,\n    selectedIndex,\n    scrollSnaps,\n    canScrollPrev,\n    canScrollNext,\n    scrollTo: (index) => emblaApi?.scrollTo(index),\n    scrollPrev: () => emblaApi?.scrollPrev(),\n    scrollNext: () => emblaApi?.scrollNext(),\n  }\n\n  return (\n    <CarouselContext.Provider value={value}>\n      <div className={cn('flex flex-col', className)} {...props}>\n        <div aria-label={label} aria-roledescription=\"carousel\">\n          {children}\n        </div>\n      </div>\n    </CarouselContext.Provider>\n  )\n}\n\nfunction CarouselViewport({ className, children, ...props }: HTMLAttributes<HTMLDivElement>) {\n  const { viewportRef } = useCarousel()\n  return (\n    <div ref={viewportRef} className={cn('overflow-hidden', className)} {...props}>\n      {children}\n    </div>\n  )\n}\n\nfunction CarouselContainer({ className, children, ...props }: HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div className={cn('flex', className)} {...props}>\n      {children}\n    </div>\n  )\n}\n\nfunction CarouselSlide({ className, children, ...props }: HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      className={cn('min-w-0 shrink-0 grow-0 basis-full', className)}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport type CarouselControlsProps = {\n  className?: string\n  prevLabel: string\n  nextLabel: string\n}\n\nfunction ChevronLeft() {\n  return (\n    <svg aria-hidden=\"true\" viewBox=\"0 0 20 20\" width=\"20\" height=\"20\" fill=\"none\">\n      <path\n        d=\"M12.5 4.5 7 10l5.5 5.5\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  )\n}\n\nfunction ChevronRight() {\n  return (\n    <svg aria-hidden=\"true\" viewBox=\"0 0 20 20\" width=\"20\" height=\"20\" fill=\"none\">\n      <path\n        d=\"M7.5 4.5 13 10l-5.5 5.5\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  )\n}\n\nfunction CarouselControls({ className, prevLabel, nextLabel }: CarouselControlsProps) {\n  const { canScrollPrev, canScrollNext, scrollPrev, scrollNext } = useCarousel()\n\n  return (\n    <div className={cn('flex items-center gap-2', className)}>\n      <Button\n        type=\"button\"\n        variant=\"secondary\"\n        size=\"icon\"\n        aria-label={prevLabel}\n        disabled={!canScrollPrev}\n        onClick={scrollPrev}\n      >\n        <ChevronLeft />\n      </Button>\n      <Button\n        type=\"button\"\n        variant=\"secondary\"\n        size=\"icon\"\n        aria-label={nextLabel}\n        disabled={!canScrollNext}\n        onClick={scrollNext}\n      >\n        <ChevronRight />\n      </Button>\n    </div>\n  )\n}\n\nexport type CarouselPaginationProps = {\n  className?: string\n  paginationLabel: string\n  slideLabel: (slide: number) => string\n}\n\nfunction CarouselPagination({ className, paginationLabel, slideLabel }: CarouselPaginationProps) {\n  const { scrollSnaps, selectedIndex, scrollTo } = useCarousel()\n\n  if (scrollSnaps.length <= 1) return null\n\n  return (\n    <div\n      role=\"tablist\"\n      aria-label={paginationLabel}\n      className={cn('flex items-center justify-center gap-2', className)}\n    >\n      {scrollSnaps.map((_, index) => {\n        const isActive = index === selectedIndex\n        return (\n          <button\n            key={index}\n            type=\"button\"\n            role=\"tab\"\n            aria-label={slideLabel(index + 1)}\n            aria-selected={isActive}\n            onClick={() => scrollTo(index)}\n            className={cn(\n              'size-2 cursor-pointer rounded-full transition-colors',\n              focusRingClassName,\n              isActive ? 'bg-accent' : 'bg-foreground/25 hover:bg-foreground/40'\n            )}\n          />\n        )\n      })}\n    </div>\n  )\n}\n\nexport {\n  Carousel,\n  CarouselViewport,\n  CarouselContainer,\n  CarouselSlide,\n  CarouselControls,\n  CarouselPagination,\n}\n"],"mappings":"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"}

package/dist/ui/components/Carousel/index.d.mts

@@ -0,0 +1,2 @@
+import { Carousel, CarouselApi, CarouselContainer, CarouselControls, CarouselControlsProps, CarouselPagination, CarouselPaginationProps, CarouselProps, CarouselSlide, CarouselViewport, useCarousel } from "./Carousel.mjs";
+export { Carousel, type CarouselApi, CarouselContainer, CarouselControls, type CarouselControlsProps, CarouselPagination, type CarouselPaginationProps, type CarouselProps, CarouselSlide, CarouselViewport, useCarousel };

package/dist/ui/components/Carousel/index.mjs

@@ -0,0 +1,2 @@
+import { Carousel, CarouselContainer, CarouselControls, CarouselPagination, CarouselSlide, CarouselViewport, useCarousel } from "./Carousel.mjs";
+export { Carousel, CarouselContainer, CarouselControls, CarouselPagination, CarouselSlide, CarouselViewport, useCarousel };

package/dist/ui/components/Checkbox/Checkbox.d.mts

@@ -0,0 +1,8 @@
+import { ComponentProps } from "react";
+import { Primitive } from "@radix-ui/react-primitive";
+//#region src/ui/components/Checkbox/Checkbox.d.ts
+type CheckboxProps = Omit<ComponentProps<typeof Primitive.input>, 'type'>;
+declare function Checkbox({ className, ref, ...props }: CheckboxProps): import("react").JSX.Element;
+//#endregion
+export { Checkbox, CheckboxProps };
+//# sourceMappingURL=Checkbox.d.mts.map

package/dist/ui/components/Checkbox/Checkbox.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.mts","names":[],"sources":["../../../../src/ui/components/Checkbox/Checkbox.tsx"],"mappings":";;;KASY,gBAAgB,KAAK,sBAAsB,UAAU;iBAuBxD,WAAW,WAAW,QAAQ,SAAS,gCAAa,IAAA"}

package/dist/ui/components/Checkbox/Checkbox.mjs

@@ -0,0 +1,39 @@
+"use client";
+import { cn } from "../../utils/cn.mjs";
+import { focusRingClassName } from "../../a11y/focus.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Primitive } from "@radix-ui/react-primitive";
+//#region src/ui/components/Checkbox/Checkbox.tsx
+function CheckIcon({ className }) {
+	return /* @__PURE__ */ jsx("svg", {
+		"aria-hidden": "true",
+		viewBox: "0 0 14 14",
+		width: "14",
+		height: "14",
+		fill: "none",
+		className,
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M2.5 7.2 5.4 10l6.1-6.5",
+			stroke: "currentColor",
+			strokeWidth: "1.75",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	});
+}
+function Checkbox({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "relative inline-flex shrink-0 items-center justify-center",
+		children: [/* @__PURE__ */ jsx(Primitive.input, {
+			type: "checkbox",
+			ref,
+			"data-slot": "checkbox",
+			className: cn("peer size-5 shrink-0 appearance-none rounded-sm border border-border bg-surface", "cursor-pointer transition-colors", "hover:border-accent", "checked:border-accent checked:bg-accent", "disabled:cursor-not-allowed disabled:opacity-50", focusRingClassName, className),
+			...props
+		}), /* @__PURE__ */ jsx(CheckIcon, { className: "pointer-events-none absolute text-accent-foreground opacity-0 transition-opacity peer-checked:opacity-100" })]
+	});
+}
+//#endregion
+export { Checkbox };
+
+//# sourceMappingURL=Checkbox.mjs.map

package/dist/ui/components/Checkbox/Checkbox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.mjs","names":[],"sources":["../../../../src/ui/components/Checkbox/Checkbox.tsx"],"sourcesContent":["'use client'\n\nimport { Primitive } from '@radix-ui/react-primitive'\n\nimport { focusRingClassName } from '../../a11y/focus.js'\nimport { cn } from '../../utils/cn.js'\n\nimport type { ComponentProps } from 'react'\n\nexport type CheckboxProps = Omit<ComponentProps<typeof Primitive.input>, 'type'>\n\nfunction CheckIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      viewBox=\"0 0 14 14\"\n      width=\"14\"\n      height=\"14\"\n      fill=\"none\"\n      className={className}\n    >\n      <path\n        d=\"M2.5 7.2 5.4 10l6.1-6.5\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.75\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  )\n}\n\nfunction Checkbox({ className, ref, ...props }: CheckboxProps) {\n  return (\n    <span className=\"relative inline-flex shrink-0 items-center justify-center\">\n      <Primitive.input\n        type=\"checkbox\"\n        ref={ref}\n        data-slot=\"checkbox\"\n        className={cn(\n          'peer size-5 shrink-0 appearance-none rounded-sm border border-border bg-surface',\n          'cursor-pointer transition-colors',\n          'hover:border-accent',\n          'checked:border-accent checked:bg-accent',\n          'disabled:cursor-not-allowed disabled:opacity-50',\n          focusRingClassName,\n          className\n        )}\n        {...props}\n      />\n      <CheckIcon className=\"pointer-events-none absolute text-accent-foreground opacity-0 transition-opacity peer-checked:opacity-100\" />\n    </span>\n  )\n}\n\nexport { Checkbox }\n"],"mappings":";;;;;;AAWA,SAAS,UAAU,EAAE,aAAqC;CACxD,OACE,oBAAC,OAAD;EACE,eAAY;EACZ,SAAQ;EACR,OAAM;EACN,QAAO;EACP,MAAK;EACM;EAEX,UAAA,oBAAC,QAAD;GACE,GAAE;GACF,QAAO;GACP,aAAY;GACZ,eAAc;GACd,gBAAe;EAChB,CAAA;CACE,CAAA;AAET;AAEA,SAAS,SAAS,EAAE,WAAW,KAAK,GAAG,SAAwB;CAC7D,OACE,qBAAC,QAAD;EAAM,WAAU;EAAhB,UAAA,CACE,oBAAC,UAAU,OAAX;GACE,MAAK;GACA;GACL,aAAU;GACV,WAAW,GACT,mFACA,oCACA,uBACA,2CACA,mDACA,oBACA,SACF;GACA,GAAI;EACL,CAAA,GACD,oBAAC,WAAD,EAAW,WAAU,4GAA6G,CAAA,CAC9H;;AAEV"}

package/dist/ui/components/Checkbox/index.d.mts

@@ -0,0 +1,2 @@
+import { Checkbox, CheckboxProps } from "./Checkbox.mjs";
+export { Checkbox, type CheckboxProps };

package/dist/ui/components/Checkbox/index.mjs

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

package/dist/ui/components/CodeBlock/CodeBlock.d.mts

@@ -0,0 +1,22 @@
+//#region src/ui/components/CodeBlock/CodeBlock.d.ts
+type CodeBlockTheme = 'light' | 'dark';
+type CodeBlockProps = {
+  code: string;
+  /** Pre-highlighted HTML (e.g. from shiki). When omitted, `code` is plain text. */
+  html?: string;
+  filename?: string | null;
+  theme?: CodeBlockTheme;
+  copyable?: boolean;
+  collapsible?: boolean;
+  className?: string;
+  /** Apps own i18n — pass translated aria labels. */
+  copyLabel: string;
+  copiedLabel: string;
+  expandLabel?: string;
+  collapseLabel?: string;
+  onCopied?: () => void;
+};
+declare function CodeBlock({ code, html, filename, theme, copyable, collapsible, className, copyLabel, copiedLabel, expandLabel, collapseLabel, onCopied }: CodeBlockProps): import("react").JSX.Element;
+//#endregion
+export { CodeBlock, CodeBlockProps, CodeBlockTheme };
+//# sourceMappingURL=CodeBlock.d.mts.map

package/dist/ui/components/CodeBlock/CodeBlock.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeBlock.d.mts","names":[],"sources":["../../../../src/ui/components/CodeBlock/CodeBlock.tsx"],"mappings":";KAOY;KAEA;EACV;;EAEA;EACA;EACA,QAAQ;EACR;EACA;EACA;;EAEA;EACA;EACA;EACA;EACA;;iBAqBO,YACP,MACA,MACA,UACA,OACA,UACA,aACA,WACA,WACA,aACA,aACA,eACA,YACC,iCAAc,IAAA"}

package/dist/ui/components/CodeBlock/CodeBlock.mjs

@@ -0,0 +1,66 @@
+"use client";
+import { cn } from "../../utils/cn.mjs";
+import { CopyButton } from "../CopyButton/CopyButton.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+//#region src/ui/components/CodeBlock/CodeBlock.tsx
+const CONTAINER_CLASS = {
+	light: "border-border bg-foreground/5 text-foreground",
+	dark: "border-border bg-card text-secondary"
+};
+const COPY_BUTTON_CLASS = {
+	light: "border-border bg-foreground/5 hover:bg-foreground/10",
+	dark: "border-border bg-card-elevated hover:bg-card-elevated/80"
+};
+const GRADIENT_CLASS = {
+	light: "from-transparent to-background",
+	dark: "from-transparent to-card"
+};
+const COLLAPSED_MAX_HEIGHT = "max-h-40";
+const PRE_STYLE = "m-0 whitespace-pre-wrap break-words font-mono text-sm leading-relaxed";
+function CodeBlock({ code, html, filename, theme = "dark", copyable = true, collapsible = false, className, copyLabel, copiedLabel, expandLabel = "Show more", collapseLabel = "Show less", onCopied }) {
+	const [expanded, setExpanded] = useState(false);
+	const isCollapsed = collapsible && !expanded;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("my-3 overflow-hidden rounded-card border", CONTAINER_CLASS[theme], className),
+		children: [filename ? /* @__PURE__ */ jsx("div", {
+			className: "border-b border-border-subtle px-4 py-2 font-mono text-sm text-secondary sm:px-5",
+			children: filename
+		}) : null, /* @__PURE__ */ jsxs("div", {
+			className: "relative",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: cn("p-5 sm:p-6", isCollapsed && COLLAPSED_MAX_HEIGHT, isCollapsed && "overflow-hidden", collapsible && "pb-16"),
+					children: html !== void 0 ? /* @__PURE__ */ jsx("div", {
+						className: PRE_STYLE,
+						dangerouslySetInnerHTML: { __html: html }
+					}) : /* @__PURE__ */ jsx("pre", {
+						className: PRE_STYLE,
+						children: /* @__PURE__ */ jsx("code", { children: code })
+					})
+				}),
+				isCollapsed ? /* @__PURE__ */ jsx("div", {
+					"aria-hidden": true,
+					className: cn("pointer-events-none absolute inset-x-0 bottom-12 h-16 bg-gradient-to-b", GRADIENT_CLASS[theme])
+				}) : null,
+				copyable ? /* @__PURE__ */ jsx(CopyButton, {
+					text: code,
+					"aria-label": copyLabel,
+					copiedAriaLabel: copiedLabel,
+					onCopied,
+					className: cn("absolute top-3 right-3 border", COPY_BUTTON_CLASS[theme])
+				}) : null,
+				collapsible ? /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "absolute bottom-3 left-1/2 -translate-x-1/2 cursor-pointer rounded-btn border border-border bg-surface px-3 py-1.5 text-xs font-semibold text-foreground",
+					onClick: () => setExpanded((v) => !v),
+					children: expanded ? collapseLabel : expandLabel
+				}) : null
+			]
+		})]
+	});
+}
+//#endregion
+export { CodeBlock };
+
+//# sourceMappingURL=CodeBlock.mjs.map

package/dist/ui/components/CodeBlock/CodeBlock.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeBlock.mjs","names":[],"sources":["../../../../src/ui/components/CodeBlock/CodeBlock.tsx"],"sourcesContent":["'use client'\n\nimport { useState } from 'react'\n\nimport { CopyButton } from '../CopyButton/CopyButton.js'\nimport { cn } from '../../utils/cn.js'\n\nexport type CodeBlockTheme = 'light' | 'dark'\n\nexport type CodeBlockProps = {\n  code: string\n  /** Pre-highlighted HTML (e.g. from shiki). When omitted, `code` is plain text. */\n  html?: string\n  filename?: string | null\n  theme?: CodeBlockTheme\n  copyable?: boolean\n  collapsible?: boolean\n  className?: string\n  /** Apps own i18n — pass translated aria labels. */\n  copyLabel: string\n  copiedLabel: string\n  expandLabel?: string\n  collapseLabel?: string\n  onCopied?: () => void\n}\n\nconst CONTAINER_CLASS: Record<CodeBlockTheme, string> = {\n  light: 'border-border bg-foreground/5 text-foreground',\n  dark: 'border-border bg-card text-secondary',\n}\n\nconst COPY_BUTTON_CLASS: Record<CodeBlockTheme, string> = {\n  light: 'border-border bg-foreground/5 hover:bg-foreground/10',\n  dark: 'border-border bg-card-elevated hover:bg-card-elevated/80',\n}\n\nconst GRADIENT_CLASS: Record<CodeBlockTheme, string> = {\n  light: 'from-transparent to-background',\n  dark: 'from-transparent to-card',\n}\n\nconst COLLAPSED_MAX_HEIGHT = 'max-h-40'\nconst PRE_STYLE = 'm-0 whitespace-pre-wrap break-words font-mono text-sm leading-relaxed'\n\nfunction CodeBlock({\n  code,\n  html,\n  filename,\n  theme = 'dark',\n  copyable = true,\n  collapsible = false,\n  className,\n  copyLabel,\n  copiedLabel,\n  expandLabel = 'Show more',\n  collapseLabel = 'Show less',\n  onCopied,\n}: CodeBlockProps) {\n  const [expanded, setExpanded] = useState(false)\n  const isCollapsed = collapsible && !expanded\n\n  return (\n    <div\n      className={cn('my-3 overflow-hidden rounded-card border', CONTAINER_CLASS[theme], className)}\n    >\n      {filename ? (\n        <div className=\"border-b border-border-subtle px-4 py-2 font-mono text-sm text-secondary sm:px-5\">\n          {filename}\n        </div>\n      ) : null}\n      <div className=\"relative\">\n        <div\n          className={cn(\n            'p-5 sm:p-6',\n            isCollapsed && COLLAPSED_MAX_HEIGHT,\n            isCollapsed && 'overflow-hidden',\n            collapsible && 'pb-16'\n          )}\n        >\n          {html !== undefined ? (\n            <div className={PRE_STYLE} dangerouslySetInnerHTML={{ __html: html }} />\n          ) : (\n            <pre className={PRE_STYLE}>\n              <code>{code}</code>\n            </pre>\n          )}\n        </div>\n\n        {isCollapsed ? (\n          <div\n            aria-hidden\n            className={cn(\n              'pointer-events-none absolute inset-x-0 bottom-12 h-16 bg-gradient-to-b',\n              GRADIENT_CLASS[theme]\n            )}\n          />\n        ) : null}\n\n        {copyable ? (\n          <CopyButton\n            text={code}\n            aria-label={copyLabel}\n            copiedAriaLabel={copiedLabel}\n            onCopied={onCopied}\n            className={cn('absolute top-3 right-3 border', COPY_BUTTON_CLASS[theme])}\n          />\n        ) : null}\n\n        {collapsible ? (\n          <button\n            type=\"button\"\n            className=\"absolute bottom-3 left-1/2 -translate-x-1/2 cursor-pointer rounded-btn border border-border bg-surface px-3 py-1.5 text-xs font-semibold text-foreground\"\n            onClick={() => setExpanded((v) => !v)}\n          >\n            {expanded ? collapseLabel : expandLabel}\n          </button>\n        ) : null}\n      </div>\n    </div>\n  )\n}\n\nexport { CodeBlock }\n"],"mappings":";;;;;;AA0BA,MAAM,kBAAkD;CACtD,OAAO;CACP,MAAM;AACR;AAEA,MAAM,oBAAoD;CACxD,OAAO;CACP,MAAM;AACR;AAEA,MAAM,iBAAiD;CACrD,OAAO;CACP,MAAM;AACR;AAEA,MAAM,uBAAuB;AAC7B,MAAM,YAAY;AAElB,SAAS,UAAU,EACjB,MACA,MACA,UACA,QAAQ,QACR,WAAW,MACX,cAAc,OACd,WACA,WACA,aACA,cAAc,aACd,gBAAgB,aAChB,YACiB;CACjB,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAC9C,MAAM,cAAc,eAAe,CAAC;CAEpC,OACE,qBAAC,OAAD;EACE,WAAW,GAAG,4CAA4C,gBAAgB,QAAQ,SAAS;EAD7F,UAAA,CAGG,WACC,oBAAC,OAAD;GAAK,WAAU;GACZ,UAAA;EACE,CAAA,IACH,MACJ,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACE,oBAAC,OAAD;KACE,WAAW,GACT,cACA,eAAe,sBACf,eAAe,mBACf,eAAe,OACjB;KAEC,UAAA,SAAS,SACR,oBAAC,OAAD;MAAK,WAAW;MAAW,yBAAyB,EAAE,QAAQ,KAAK;KAAI,CAAA,IAEvE,oBAAC,OAAD;MAAK,WAAW;MACd,UAAA,oBAAC,QAAD,EAAA,UAAO,KAAW,CAAA;KACf,CAAA;IAEJ,CAAA;IAEJ,cACC,oBAAC,OAAD;KACE,eAAA;KACA,WAAW,GACT,0EACA,eAAe,MACjB;IACD,CAAA,IACC;IAEH,WACC,oBAAC,YAAD;KACE,MAAM;KACN,cAAY;KACZ,iBAAiB;KACP;KACV,WAAW,GAAG,iCAAiC,kBAAkB,MAAM;IACxE,CAAA,IACC;IAEH,cACC,oBAAC,UAAD;KACE,MAAK;KACL,WAAU;KACV,eAAe,aAAa,MAAM,CAAC,CAAC;KAEnC,UAAA,WAAW,gBAAgB;IACtB,CAAA,IACN;GACD;EACF,CAAA,CAAA;;AAET"}

package/dist/ui/components/CodeBlock/index.d.mts

@@ -0,0 +1,2 @@
+import { CodeBlock, CodeBlockProps, CodeBlockTheme } from "./CodeBlock.mjs";
+export { CodeBlock, type CodeBlockProps, type CodeBlockTheme };

package/dist/ui/components/CodeBlock/index.mjs

@@ -0,0 +1,2 @@
+import { CodeBlock } from "./CodeBlock.mjs";
+export { CodeBlock };

package/dist/ui/components/CodeBlockTabs/CodeBlockTabs.d.mts

@@ -0,0 +1,19 @@
+//#region src/ui/components/CodeBlockTabs/CodeBlockTabs.d.ts
+type CodeBlockTabsTheme = 'light' | 'dark';
+type CodeBlockTab = {
+  id: string;
+  label: string;
+  /** Pre-highlighted HTML (e.g. from shiki). */
+  html: string;
+};
+type CodeBlockTabsProps = {
+  tabs: CodeBlockTab[];
+  className?: string;
+  theme?: CodeBlockTabsTheme;
+  /** Apps own i18n — aria-label for the tablist. */
+  tabsAriaLabel: string;
+};
+declare function CodeBlockTabs({ tabs, className, theme, tabsAriaLabel }: CodeBlockTabsProps): import("react").JSX.Element | null;
+//#endregion
+export { CodeBlockTab, CodeBlockTabs, CodeBlockTabsProps, CodeBlockTabsTheme };
+//# sourceMappingURL=CodeBlockTabs.d.mts.map

package/dist/ui/components/CodeBlockTabs/CodeBlockTabs.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeBlockTabs.d.mts","names":[],"sources":["../../../../src/ui/components/CodeBlockTabs/CodeBlockTabs.tsx"],"mappings":";KAMY;KAEA;EACV;EACA;;EAEA;;KAGU;EACV,MAAM;EACN;EACA,QAAQ;;EAER;;iBAgBO,gBAAgB,MAAM,WAAW,OAAiB,iBAAiB,qCAAkB,IAAA"}