ajo-ui-playa 0.1.0

package/dist/button-group.js

@@ -0,0 +1,58 @@
+// @unocss-include
+import clsx from "clsx";
+import { jsx } from "ajo/jsx-runtime";
+//#region packages/ajo-ui-playa/src/button-group.tsx
+var groupBase = "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*=w-])]:w-fit [&>input]:flex-1";
+var groupOrientations = {
+	horizontal: "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:last-child)]:rounded-r-none [&>*:not(:first-child)]:[--un-inset-ring-shadow:inset_0_1px_0_var(--un-inset-ring-color,currentColor),inset_0_-1px_0_var(--un-inset-ring-color,currentColor),inset_-1px_0_0_var(--un-inset-ring-color,currentColor)]",
+	vertical: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:last-child)]:rounded-b-none [&>*:not(:first-child)]:[--un-inset-ring-shadow:inset_1px_0_0_var(--un-inset-ring-color,currentColor),inset_-1px_0_0_var(--un-inset-ring-color,currentColor),inset_0_-1px_0_var(--un-inset-ring-color,currentColor)]"
+};
+var textBase = "flex items-center gap-2 rounded-md edge bg-muted px-4 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*=size-])]:size-4";
+var separatorBase = "relative m-0 self-stretch bg-input data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-auto data-[orientation=vertical]:h-auto data-[orientation=vertical]:w-px";
+/** Returns the UnoCSS class list for a ButtonGroup root. */
+var buttonGroupVariants = ({ class: classes, orientation = "horizontal" } = {}) => clsx(groupBase, groupOrientations[orientation], classes);
+/** Group related action buttons or mixed controls. */
+var ButtonGroup = ({ children, class: classes, orientation = "horizontal", ...attrs }) => /* @__PURE__ */ jsx("div", {
+	...attrs,
+	class: buttonGroupVariants({
+		class: classes,
+		orientation
+	}),
+	"data-orientation": orientation,
+	"data-slot": "button-group",
+	role: attrs.role ?? "group",
+	children
+});
+/** Visual divider for ButtonGroup contents. */
+var ButtonGroupSeparator = ({ class: classes, orientation = "vertical", ...attrs }) => /* @__PURE__ */ jsx("div", {
+	...attrs,
+	"aria-hidden": "true",
+	class: clsx(separatorBase, classes),
+	"data-orientation": orientation,
+	"data-slot": "button-group-separator",
+	role: attrs.role ?? "none"
+});
+/** Text or label segment for mixed button/input groups. */
+var ButtonGroupText = ({ as = "div", children, class: classes, ...attrs }) => {
+	const styles = clsx(textBase, classes);
+	if (as === "label") return /* @__PURE__ */ jsx("label", {
+		...attrs,
+		class: styles,
+		"data-slot": "button-group-text",
+		children
+	});
+	if (as === "span") return /* @__PURE__ */ jsx("span", {
+		...attrs,
+		class: styles,
+		"data-slot": "button-group-text",
+		children
+	});
+	return /* @__PURE__ */ jsx("div", {
+		...attrs,
+		class: styles,
+		"data-slot": "button-group-text",
+		children
+	});
+};
+//#endregion
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };

package/dist/button.js

@@ -0,0 +1,72 @@
+// @unocss-include
+import clsx from "clsx";
+import { jsx } from "ajo/jsx-runtime";
+//#region packages/ajo-ui-playa/src/button.tsx
+var base = "inline-flex shrink-0 items-center justify-center text-sm font-medium whitespace-nowrap outline-none focus-visible:ring-3 active:scale-[0.98] motion-reduce:active:scale-100 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-invalid:inset-ring aria-invalid:inset-ring-danger aria-invalid:ring-danger/25 [&_svg]:pointer-events-none [&_svg]:shrink-0";
+var variants = {
+	default: "bg-primary text-primary-foreground hover:bg-primary/90",
+	danger: "bg-danger text-danger-foreground hover:bg-danger/90",
+	"danger-ghost": "text-danger hover:bg-danger/10 hover:text-danger",
+	outline: "edge bg-transparent text-foreground hover:bg-accent hover:edge-on-accent hover:text-accent-foreground",
+	secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+	ghost: "text-foreground hover:bg-accent hover:text-accent-foreground",
+	link: "text-primary underline-offset-4 hover:underline",
+	"muted-ghost": "text-muted-foreground hover:bg-accent hover:text-foreground"
+};
+var focusRings = {
+	default: "focus-visible:ring-ring/50",
+	danger: "focus-visible:ring-danger/40",
+	"danger-ghost": "focus-visible:ring-danger/40",
+	ghost: "focus-visible:ring-ring/50",
+	link: "focus-visible:ring-ring/50",
+	"muted-ghost": "focus-visible:ring-ring/50",
+	outline: "focus-visible:ring-ring/50",
+	secondary: "focus-visible:ring-ring/50"
+};
+var sizes = {
+	default: "h-9 gap-2 rounded-md px-4 py-2 has-[>svg]:px-3 [&_svg:not([class*=size-])]:size-4",
+	xs: "h-6 gap-1 rounded-sm px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*=size-])]:size-3",
+	sm: "h-8 gap-2 rounded-md px-3 has-[>svg]:px-2.5 [&_svg:not([class*=size-])]:size-4",
+	lg: "h-10 gap-2 rounded-md px-6 has-[>svg]:px-4 [&_svg:not([class*=size-])]:size-4",
+	icon: "size-9 gap-2 rounded-md [&_svg:not([class*=size-])]:size-4",
+	"icon-xs": "size-6 gap-2 rounded-sm [&_svg:not([class*=size-])]:size-3",
+	"icon-sm": "size-8 gap-2 rounded-md [&_svg:not([class*=size-])]:size-4",
+	"icon-lg": "size-10 gap-2 rounded-md [&_svg:not([class*=size-])]:size-4",
+	none: ""
+};
+/** Returns the UnoCSS class list for a button variant. */
+var buttonVariants = ({ class: classes, size = "default", transition = true, variant = "default" } = {}) => clsx(base, transition && "transition-all", variants[variant], focusRings[variant], sizes[size], classes);
+/** Interactive action surface for buttons, links, and icon controls. */
+var Button = ({ as = "button", class: classes, children, "data-slot": slot = "button", disabled, size = "default", variant = "default", ...attrs }) => {
+	const styles = buttonVariants({
+		class: classes,
+		size,
+		variant
+	});
+	if (as === "a") {
+		const anchor = attrs;
+		const blocked = Boolean(disabled);
+		return /* @__PURE__ */ jsx("a", {
+			...anchor,
+			"aria-disabled": blocked ? "true" : void 0,
+			class: styles,
+			"data-size": size,
+			"data-slot": slot,
+			"data-variant": variant,
+			href: blocked ? void 0 : String(anchor.href),
+			tabIndex: blocked ? -1 : anchor.tabIndex,
+			children
+		});
+	}
+	return /* @__PURE__ */ jsx("button", {
+		...attrs,
+		class: styles,
+		"data-size": size,
+		"data-slot": slot,
+		"data-variant": variant,
+		disabled,
+		children
+	});
+};
+//#endregion
+export { buttonVariants, Button as default };

package/dist/calendar.js

@@ -0,0 +1,109 @@
+// @unocss-include
+import { buttonVariants } from "./button.js";
+import { Select, SelectContent, SelectItem, SelectList, SelectTrigger, SelectValue } from "./select.js";
+import clsx from "clsx";
+import { jsx, jsxs } from "ajo/jsx-runtime";
+import { Calendar as Calendar$1, CalendarDayButton as CalendarDayButton$1 } from "ajo-ui/calendar";
+//#region packages/ajo-ui-playa/src/calendar.tsx
+var rootBase = "group/calendar bg-background p-3 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent";
+var monthsBase = "flex flex-col gap-4 md:flex-row";
+var monthBase = "flex w-full flex-col gap-4";
+var navButtonBase = "size-[var(--cell-size)] rounded-md p-0 select-none aria-disabled:opacity-50";
+var captionBase = "flex h-[var(--cell-size)] w-full items-center gap-1";
+var dropdownsBase = "flex h-[var(--cell-size)] min-w-0 flex-1 items-center justify-center gap-1.5 text-sm font-medium";
+var gridBase = "grid w-full gap-1";
+var weekdaysBase = "grid w-full gap-0";
+var weekdayBase = "flex h-6 items-center justify-center rounded-md text-xs font-normal text-muted-foreground select-none";
+var weekBase = "grid w-full gap-0";
+var weekNumberBase = "flex size-[var(--cell-size)] items-center justify-center text-xs tabular-nums text-muted-foreground select-none";
+var dayCellBase = "group/day relative flex h-[var(--cell-size)] w-full min-w-[var(--cell-size)] items-center justify-center p-0 text-center select-none";
+var dayButtonBase = "flex h-[var(--cell-size)] w-full min-w-[var(--cell-size)] flex-col items-center justify-center gap-1 rounded-md leading-none font-normal outline-none transition-[color,box-shadow,background-color] focus-visible:ring-3 focus-visible:ring-ring/50 data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[selected-single=true]:hover:bg-primary data-[selected-single=true]:hover:text-primary-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-start=true]:hover:bg-primary data-[range-start=true]:hover:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-end=true]:hover:bg-primary data-[range-end=true]:hover:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-transparent data-[range-middle=true]:text-accent-foreground data-[outside=true]:text-muted-foreground data-[today=true]:font-medium data-[unavailable=true]:line-through data-[unavailable=true]:decoration-danger/70 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&>span]:text-xs [&>span]:opacity-70";
+var labelBase = "select-none text-sm font-medium";
+var viewBase = "grid w-full gap-1 py-1";
+var viewCellBase = clsx(buttonVariants({
+	size: "none",
+	transition: false,
+	variant: "ghost"
+}), "h-10 w-full rounded-md px-2 text-sm font-normal outline-none focus-visible:ring-3 focus-visible:ring-ring/50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[today=true]:font-medium data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50");
+var viewTriggerBase = "data-[slot=calendar-view-trigger]:rounded-md data-[slot=calendar-view-trigger]:px-2 data-[slot=calendar-view-trigger]:outline-none data-[slot=calendar-view-trigger]:hover:bg-accent data-[slot=calendar-view-trigger]:focus-visible:ring-3 data-[slot=calendar-view-trigger]:focus-visible:ring-ring/50 data-[slot=calendar-view-trigger]:disabled:pointer-events-none data-[slot=calendar-view-trigger]:disabled:opacity-50";
+var calendarClassNames = (classNames) => ({
+	caption: clsx(captionBase, classNames?.caption),
+	day: classNames?.day,
+	day_button: clsx(buttonVariants({
+		size: "none",
+		transition: false,
+		variant: "ghost"
+	}), dayButtonBase, classNames?.day_button),
+	dropdowns: clsx(dropdownsBase, classNames?.dropdowns),
+	grid: clsx(gridBase, classNames?.grid),
+	head: clsx(weekdaysBase, classNames?.head),
+	month: clsx(monthBase, classNames?.month),
+	month_cell: clsx(viewCellBase, classNames?.month_cell),
+	month_view: clsx(viewBase, classNames?.month_view),
+	months: clsx(monthsBase, classNames?.months),
+	week: clsx(weekBase, classNames?.week),
+	week_number: clsx(weekNumberBase, classNames?.week_number),
+	weekday: clsx(weekdayBase, classNames?.weekday),
+	year_cell: clsx(viewCellBase, classNames?.year_cell),
+	year_view: clsx(viewBase, classNames?.year_view)
+});
+var dayClassName = (classNames, modifiersClassNames) => ({ modifierNames, modifiers, range }) => {
+	const modifierClass = modifierNames.map((name) => modifiersClassNames?.[name]).filter(Boolean).join(" ");
+	return clsx(dayCellBase, range && modifiers.range_start && "rounded-s-md bg-accent", range && modifiers.range_middle && "bg-accent", range && modifiers.range_end && "rounded-e-md bg-accent", modifiers.today && !range && !modifiers.outside && "rounded-md bg-accent", modifiers.selected && classNames?.selected, modifiers.outside && classNames?.outside, modifiers.today && classNames?.today, modifiers.range_start && classNames?.range_start, modifiers.range_middle && classNames?.range_middle, modifiers.range_end && classNames?.range_end, modifierClass, classNames?.day);
+};
+var CalendarDropdown = ({ label, onValueChange, options, triggerClass, value }) => /* @__PURE__ */ jsxs(Select, {
+	value,
+	onValueChange: (next, event) => next == null || onValueChange(String(next), event),
+	children: [/* @__PURE__ */ jsx(SelectTrigger, {
+		"aria-label": label,
+		class: triggerClass,
+		size: "sm",
+		children: /* @__PURE__ */ jsx(SelectValue, {})
+	}), /* @__PURE__ */ jsx(SelectContent, { children: /* @__PURE__ */ jsx(SelectList, { children: options.map((option) => /* @__PURE__ */ jsx(SelectItem, {
+		value: option.value,
+		children: option.label
+	}, option.value)) }) })]
+});
+var CalendarMonthDropdown = (attrs) => /* @__PURE__ */ jsx(CalendarDropdown, {
+	...attrs,
+	triggerClass: "h-8 w-[6.75rem]"
+});
+var CalendarYearDropdown = (attrs) => /* @__PURE__ */ jsx(CalendarDropdown, {
+	...attrs,
+	triggerClass: "h-8 w-[5.5rem]"
+});
+/** Ajo-native calendar with single, multiple, and range selection. */
+var Calendar = ({ buttonVariant = "ghost", class: classes, classNames, modifiersClassNames, ...attrs }) => {
+	const styles = calendarClassNames(classNames);
+	return /* @__PURE__ */ jsx(Calendar$1, {
+		...attrs,
+		captionLabelClass: clsx(labelBase, viewTriggerBase, "min-w-0 flex-1 text-center"),
+		class: clsx(rootBase, classes),
+		classNames: styles,
+		dayButtonClass: styles.day_button,
+		dayClassName: dayClassName(classNames, modifiersClassNames),
+		hiddenDayClass: "invisible",
+		monthDropdown: CalendarMonthDropdown,
+		monthLabelClass: labelBase,
+		navButtonClass: clsx(buttonVariants({
+			size: "none",
+			variant: buttonVariant
+		}), navButtonBase),
+		navSpacerClass: "size-[var(--cell-size)] shrink-0",
+		nextIconClass: "i-lucide-chevron-right block size-4 rtl:rotate-180",
+		previousIconClass: "i-lucide-chevron-left block size-4 rtl:rotate-180",
+		yearDropdown: CalendarYearDropdown,
+		yearLabelClass: labelBase
+	});
+};
+/** Day button used by Calendar. Exported for advanced composition and testing. */
+var CalendarDayButton = ({ class: classes, ...attrs }) => /* @__PURE__ */ jsx(CalendarDayButton$1, {
+	...attrs,
+	class: clsx(buttonVariants({
+		size: "none",
+		transition: false,
+		variant: "ghost"
+	}), dayButtonBase, classes)
+});
+//#endregion
+export { Calendar, CalendarDayButton };

package/dist/card.js

@@ -0,0 +1,98 @@
+// @unocss-include
+import clsx from "clsx";
+import { jsx } from "ajo/jsx-runtime";
+//#region packages/ajo-ui-playa/src/card.tsx
+var base = "group/card flex flex-col gap-[var(--card-spacing)] overflow-hidden rounded-xl glass edge py-[var(--card-spacing)] shadow-xs has-[>img:first-child]:pt-0 [&>img:first-child]:rounded-t-xl [&>img:last-child]:rounded-b-xl [&_[data-slot=table-container]]:rounded-[0px] [&_[data-slot=table-container]]:outline-none";
+var sizes = {
+	default: "[--card-spacing:1.5rem]",
+	sm: "[--card-spacing:1rem] text-sm"
+};
+/** Returns the UnoCSS class list for a card root. */
+var cardVariants = ({ class: classes, size = "default" } = {}) => clsx(base, sizes[size], classes);
+/** Structured content container with header, body, and footer slots. */
+var Card = ({ as = "div", class: classes, children, "data-slot": slot = "card", size = "default", ...attrs }) => {
+	const styles = cardVariants({
+		class: classes,
+		size
+	});
+	if (as === "a") return /* @__PURE__ */ jsx("a", {
+		...attrs,
+		class: styles,
+		"data-size": size,
+		"data-slot": slot,
+		href: String(attrs.href),
+		children
+	});
+	if (as === "article") return /* @__PURE__ */ jsx("article", {
+		...attrs,
+		class: styles,
+		"data-size": size,
+		"data-slot": slot,
+		children
+	});
+	if (as === "form") return /* @__PURE__ */ jsx("form", {
+		...attrs,
+		class: styles,
+		"data-size": size,
+		"data-slot": slot,
+		children
+	});
+	if (as === "section") return /* @__PURE__ */ jsx("section", {
+		...attrs,
+		class: styles,
+		"data-size": size,
+		"data-slot": slot,
+		children
+	});
+	return /* @__PURE__ */ jsx("div", {
+		...attrs,
+		class: styles,
+		"data-size": size,
+		"data-slot": slot,
+		children
+	});
+};
+/** Header slot for card titles, descriptions, and actions. */
+var CardHeader = ({ class: classes, children, "data-slot": slot = "card-header", ...attrs }) => /* @__PURE__ */ jsx("div", {
+	...attrs,
+	class: clsx("@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-[var(--card-spacing)] has-[>[data-slot=card-action]]:grid-cols-[1fr_auto] [&.border-b]:pb-[var(--card-spacing)]", classes),
+	"data-slot": slot,
+	children
+});
+/** Title slot for `CardHeader`. */
+var CardTitle = ({ class: classes, children, "data-slot": slot = "card-title", ...attrs }) => /* @__PURE__ */ jsx("div", {
+	...attrs,
+	class: clsx("font-semibold leading-none", classes),
+	"data-slot": slot,
+	children
+});
+/** Helper text slot for `CardHeader`. */
+var CardDescription = ({ class: classes, children, "data-slot": slot = "card-description", ...attrs }) => /* @__PURE__ */ jsx("div", {
+	...attrs,
+	class: clsx("text-sm text-muted-foreground", classes),
+	"data-slot": slot,
+	children
+});
+/** Header action slot, aligned to the top-right. */
+var CardAction = ({ class: classes, children, "data-slot": slot = "card-action", ...attrs }) => /* @__PURE__ */ jsx("div", {
+	...attrs,
+	class: clsx("col-start-2 row-span-2 row-start-1 self-start justify-self-end", classes),
+	"data-slot": slot,
+	children
+});
+/** Main body slot for card content. */
+var CardContent = ({ class: classes, children, "data-slot": slot = "card-content", ...attrs }) => /* @__PURE__ */ jsx("div", {
+	...attrs,
+	class: clsx("px-[var(--card-spacing)]", classes),
+	"data-slot": slot,
+	children
+});
+/** Footer slot for actions and secondary content. */
+var CardFooter = ({ class: classes, children, "data-slot": slot = "card-footer", ...attrs }) => /* @__PURE__ */ jsx("div", {
+	...attrs,
+	class: clsx("flex items-center px-[var(--card-spacing)] [&.border-t]:pt-[var(--card-spacing)]", classes),
+	"data-slot": slot,
+	children
+});
+//#endregion
+export { Card, Card as default, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, cardVariants };

package/dist/carousel.js

@@ -0,0 +1,86 @@
+// @unocss-include
+import { buttonVariants } from "./button.js";
+import clsx from "clsx";
+import { jsx, jsxs } from "ajo/jsx-runtime";
+import { Carousel as Carousel$1, CarouselContent as CarouselContent$1, CarouselContext, CarouselItem as CarouselItem$1, CarouselNext as CarouselNext$1, CarouselPrevious as CarouselPrevious$1 } from "ajo-ui/carousel";
+//#region packages/ajo-ui-playa/src/carousel.tsx
+var carousel = () => {
+	const value = CarouselContext();
+	if (!value) throw new Error("Carousel parts must be used within a <Carousel />");
+	return value;
+};
+/** Native scroll-snap carousel root. */
+var Carousel = ({ children, class: classes, dir, opts, orientation, role = "region", setApi, ...attrs }) => /* @__PURE__ */ jsx(Carousel$1, {
+	...attrs,
+	class: clsx("relative", classes),
+	dir,
+	opts,
+	orientation,
+	role,
+	setApi,
+	children
+});
+/** Scroll viewport and track for carousel slides. */
+var CarouselContent = ({ children, class: classes, ...attrs }) => {
+	const horizontal = carousel().orientation === "horizontal";
+	return /* @__PURE__ */ jsx(CarouselContent$1, {
+		...attrs,
+		class: clsx("flex scroll-smooth overscroll-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", horizontal ? "-ml-4 overflow-x-auto snap-x snap-mandatory" : "-mt-4 max-h-full flex-col overflow-y-auto snap-y snap-mandatory", classes),
+		viewportClass: "overflow-hidden",
+		children
+	});
+};
+/** Carousel slide item. */
+var CarouselItem = ({ children, class: classes, role = "group", ...attrs }) => {
+	const { orientation } = carousel();
+	return /* @__PURE__ */ jsx(CarouselItem$1, {
+		...attrs,
+		class: clsx("min-w-0 shrink-0 grow-0 basis-full snap-start", orientation === "horizontal" ? "pl-4" : "pt-4", classes),
+		role,
+		children
+	});
+};
+/** Previous slide button. */
+var CarouselPrevious = ({ "aria-label": label = "Previous slide", class: classes, disabled, type = "button", variant = "outline", ...attrs }) => {
+	const { orientation } = carousel();
+	return /* @__PURE__ */ jsxs(CarouselPrevious$1, {
+		...attrs,
+		"aria-label": label,
+		class: clsx(buttonVariants({
+			size: "none",
+			variant
+		}), "absolute size-8 rounded-full", orientation === "horizontal" ? "top-1/2 -left-12 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90", classes),
+		disabled,
+		type,
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			class: "i-lucide-arrow-left size-4"
+		}), /* @__PURE__ */ jsx("span", {
+			class: "sr-only",
+			children: label
+		})]
+	});
+};
+/** Next slide button. */
+var CarouselNext = ({ "aria-label": label = "Next slide", class: classes, disabled, type = "button", variant = "outline", ...attrs }) => {
+	const { orientation } = carousel();
+	return /* @__PURE__ */ jsxs(CarouselNext$1, {
+		...attrs,
+		"aria-label": label,
+		class: clsx(buttonVariants({
+			size: "none",
+			variant
+		}), "absolute size-8 rounded-full", orientation === "horizontal" ? "top-1/2 -right-12 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", classes),
+		disabled,
+		type,
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			class: "i-lucide-arrow-right size-4"
+		}), /* @__PURE__ */ jsx("span", {
+			class: "sr-only",
+			children: label
+		})]
+	});
+};
+//#endregion
+export { Carousel, CarouselContent, CarouselContext, CarouselItem, CarouselNext, CarouselPrevious };

package/dist/chart.js

@@ -0,0 +1,125 @@
+// @unocss-include
+import clsx from "clsx";
+import { Fragment, jsx, jsxs } from "ajo/jsx-runtime";
+import { ChartArea as ChartArea$1, ChartBar as ChartBar$1, ChartContainer as ChartContainer$1, ChartIdContext, ChartLegend as ChartLegend$1, ChartLegendContent as ChartLegendContent$1, ChartLine as ChartLine$1, ChartPie as ChartPie$1, ChartTooltip as ChartTooltip$1, ChartTooltipContent as ChartTooltipContent$1 } from "ajo-ui/chart";
+//#region packages/ajo-ui-playa/src/chart.tsx
+var THEMES = {
+	dark: ".dark",
+	light: ""
+};
+var palette = [
+	"var(--chart-1)",
+	"var(--chart-2)",
+	"var(--chart-3)",
+	"var(--chart-4)",
+	"var(--chart-5)"
+];
+var rootBase = "relative flex aspect-video min-h-[200px] w-full flex-col justify-center text-xs text-muted-foreground";
+var svgBase = "h-full min-h-[180px] w-full overflow-visible";
+var tooltipBase = "pointer-events-none absolute z-20 min-w-[8rem] rounded-lg glass-overlay edge px-2.5 py-1.5 text-xs shadow-lg";
+var legendBase = "flex flex-wrap items-center justify-center gap-4 text-xs text-muted-foreground";
+var plotAttrs = (classes) => ({
+	axisStroke: "var(--muted-foreground)",
+	axisStrokeOpacity: "0.5",
+	barClass: "outline-none transition-opacity focus-visible:opacity-80",
+	class: clsx(svgBase, classes),
+	gridStroke: "var(--border)",
+	pointClass: "outline-none",
+	pointFill: "var(--background)"
+});
+/** Root provider for chart config, data, tooltip, and legend state. */
+var ChartContainer = ({ children, class: classes, config, id, type = "bar", ...attrs }) => {
+	return /* @__PURE__ */ jsxs(ChartContainer$1, {
+		...attrs,
+		class: clsx(rootBase, classes),
+		config,
+		id,
+		palette,
+		type,
+		children: [/* @__PURE__ */ jsx(ChartStyle, { config }), children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+			type === "pie" ? /* @__PURE__ */ jsx(ChartPie, {}) : type === "line" ? /* @__PURE__ */ jsx(ChartLine, {}) : type === "area" ? /* @__PURE__ */ jsx(ChartArea, {}) : /* @__PURE__ */ jsx(ChartBar, {}),
+			/* @__PURE__ */ jsx(ChartTooltip, {}),
+			/* @__PURE__ */ jsx(ChartLegend, {})
+		] })]
+	});
+};
+/** CSS variable injector matching chart config color behavior. */
+var ChartStyle = ({ config }) => {
+	const id = ChartIdContext();
+	if (!id) return null;
+	const entries = Object.entries(config).filter(([, item]) => item.color || item.theme);
+	if (!entries.length) return null;
+	const scope = `[data-slot="chart"]:has(>style[data-chart-style="${id}"])`;
+	return /* @__PURE__ */ jsx("style", {
+		"data-chart-style": id,
+		children: Object.entries(THEMES).map(([theme, selector]) => {
+			const vars = entries.map(([key, item]) => {
+				const color = item.theme?.[theme] ?? item.color;
+				return color ? `  --color-${key}: ${color};` : "";
+			}).filter(Boolean).join("\n");
+			return `${selector ? `${selector} ` : ""}${scope} {\n${vars}\n}`;
+		}).join("\n")
+	});
+};
+/** Native SVG bar chart primitive for use inside ChartContainer. */
+var ChartBar = ({ class: classes, ...attrs }) => /* @__PURE__ */ jsx(ChartBar$1, {
+	...attrs,
+	...plotAttrs(classes)
+});
+/** Native SVG line chart primitive for use inside ChartContainer. */
+var ChartLine = ({ class: classes, ...attrs }) => /* @__PURE__ */ jsx(ChartLine$1, {
+	...attrs,
+	...plotAttrs(classes)
+});
+/** Native SVG area chart primitive for use inside ChartContainer. */
+var ChartArea = ({ class: classes, ...attrs }) => /* @__PURE__ */ jsx(ChartArea$1, {
+	...attrs,
+	...plotAttrs(classes)
+});
+/** Native SVG pie/donut chart primitive for use inside ChartContainer. */
+var ChartPie = ({ class: classes, ...attrs }) => /* @__PURE__ */ jsx(ChartPie$1, {
+	...attrs,
+	...plotAttrs(clsx("mx-auto max-w-[320px]", classes)),
+	centerLabelClass: "text-sm font-medium text-foreground",
+	centerLabelFill: "currentColor",
+	sliceStroke: "var(--background)"
+});
+/** Absolute tooltip layer for native chart primitives. */
+var ChartTooltip = ({ children, class: classes, content, ...attrs }) => /* @__PURE__ */ jsx(ChartTooltip$1, {
+	...attrs,
+	class: clsx(tooltipBase, classes),
+	content: content ?? children ?? /* @__PURE__ */ jsx(ChartTooltipContent, {})
+});
+/** Tooltip body matching tooltip-content behavior for native chart payloads. */
+var ChartTooltipContent = ({ class: classes, labelClass, ...attrs }) => /* @__PURE__ */ jsx(ChartTooltipContent$1, {
+	...attrs,
+	class: clsx("grid gap-1.5", classes),
+	formattedValueClass: "font-mono font-medium text-foreground tabular-nums",
+	iconClass: "size-3 text-muted-foreground",
+	iconWrapperClass: "[&>svg]:size-3",
+	indicatorClass: ({ indicator, nestLabel }) => clsx("shrink-0 rounded-[2px] border-[--chart-indicator] bg-[--chart-indicator]", indicator === "dot" && "size-2.5", indicator === "line" && "w-1", indicator === "dashed" && "w-0 border-[1.5px] border-dashed bg-transparent", nestLabel && indicator === "dashed" && "my-0.5"),
+	itemClass: ({ indicator }) => clsx("flex w-full items-stretch gap-2", indicator === "dot" && "items-center"),
+	itemLabelClass: "text-muted-foreground",
+	itemsClass: "grid gap-1.5",
+	labelClass: clsx("font-medium", labelClass),
+	nestedLabelClass: clsx("font-medium text-foreground", labelClass),
+	valueLabelGroupClass: "grid gap-1.5",
+	valueRowClass: ({ nestLabel }) => clsx("flex flex-1 justify-between gap-4 leading-none", nestLabel ? "items-end" : "items-center")
+});
+/** Legend layer for native chart primitives. */
+var ChartLegend = ({ children, class: classes, content, ...attrs }) => /* @__PURE__ */ jsx(ChartLegend$1, {
+	...attrs,
+	class: classes,
+	content: content ?? children ?? /* @__PURE__ */ jsx(ChartLegendContent, {})
+});
+/** Legend content matching legend-content behavior. */
+var ChartLegendContent = ({ class: classes, verticalAlign = "bottom", ...attrs }) => /* @__PURE__ */ jsx(ChartLegendContent$1, {
+	...attrs,
+	class: clsx(legendBase, verticalAlign === "top" ? "pb-3" : "pt-3", classes),
+	iconClass: "size-3 text-muted-foreground",
+	iconWrapperClass: "[&>svg]:size-3",
+	itemClass: "flex items-center gap-1.5",
+	swatchClass: "size-2 shrink-0 rounded-[2px]"
+});
+//#endregion
+export { ChartArea, ChartBar, ChartContainer, ChartLegend, ChartLegendContent, ChartLine, ChartPie, ChartTooltip, ChartTooltipContent };

package/dist/checkbox-group.js

@@ -0,0 +1,30 @@
+// @unocss-include
+import { a as checkboxState, i as checkboxInvalidState, n as checkboxCheckedIndicator, o as choiceGroupOrientation, r as checkboxIndeterminateIndicator, s as choiceInput, t as checkboxBox } from "./chunks/recipes-CXxPSYdV.js";
+import clsx from "clsx";
+import { jsx } from "ajo/jsx-runtime";
+import { bool } from "ajo-ui/utils";
+import { FieldContext } from "ajo-ui/field";
+import { CheckboxGroup as CheckboxGroup$1, CheckboxGroupItem as CheckboxGroupItem$1 } from "ajo-ui/checkbox-group";
+//#region packages/ajo-ui-playa/src/checkbox-group.tsx
+/** Checkbox input group matching composition while preserving native forms. */
+var CheckboxGroup = ({ class: classes, orientation = "vertical", ...attrs }) => {
+	return /* @__PURE__ */ jsx(CheckboxGroup$1, {
+		...FieldContext()?.groupAttrs ?? {},
+		...attrs,
+		class: clsx(choiceGroupOrientation[orientation], classes),
+		"data-orientation": orientation
+	});
+};
+/** Native checkbox item styled as a custom control. */
+var CheckboxGroupItem = ({ class: classes, type: _type, ...attrs }) => {
+	const invalid = bool(attrs["aria-invalid"]);
+	return /* @__PURE__ */ jsx(CheckboxGroupItem$1, {
+		...attrs,
+		checkedIndicatorClass: checkboxCheckedIndicator,
+		class: clsx(checkboxBox, invalid ? checkboxInvalidState : checkboxState, classes),
+		indeterminateIndicatorClass: checkboxIndeterminateIndicator,
+		inputClass: choiceInput
+	});
+};
+//#endregion
+export { CheckboxGroup, CheckboxGroupItem };

package/dist/checkbox.js

@@ -0,0 +1,25 @@
+// @unocss-include
+import { a as checkboxState, i as checkboxInvalidState, n as checkboxCheckedIndicator, r as checkboxIndeterminateIndicator, s as choiceInput, t as checkboxBox } from "./chunks/recipes-CXxPSYdV.js";
+import clsx from "clsx";
+import { jsx } from "ajo/jsx-runtime";
+import { bool } from "ajo-ui/utils";
+import { FieldContext } from "ajo-ui/field";
+import { Checkbox as Checkbox$1 } from "ajo-ui/checkbox";
+//#region packages/ajo-ui-playa/src/checkbox.tsx
+/** Native checkbox control styled as a custom control while preserving form behavior. */
+var Checkbox = ({ class: classes, type: _type, ...attrs }) => {
+	const inputAttrs = {
+		...FieldContext()?.controlAttrs ?? {},
+		...attrs
+	};
+	const invalid = bool(inputAttrs["aria-invalid"]);
+	return /* @__PURE__ */ jsx(Checkbox$1, {
+		...inputAttrs,
+		checkedIndicatorClass: checkboxCheckedIndicator,
+		class: clsx(checkboxBox, invalid ? checkboxInvalidState : checkboxState, classes),
+		indeterminateIndicatorClass: checkboxIndeterminateIndicator,
+		inputClass: choiceInput
+	});
+};
+//#endregion
+export { Checkbox, Checkbox as default };