ajo-ui-playa 0.1.0

package/LICENSE

@@ -0,0 +1,15 @@
+ISC License
+
+Copyright (c) 2022-2026, Cristian Falcone
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE
+OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.

package/README.md

@@ -0,0 +1,90 @@
+# ajo-ui-playa
+
+Themed Ajo component library and UnoCSS preset.
+
+## Install
+
+```bash
+pnpm add ajo ajo-ui-playa
+pnpm add -D unocss@66.7.2
+```
+
+`ajo-ui-playa` requires `ajo ^0.1.35` and `unocss 66.7.2`.
+
+## UnoCSS Setup
+
+Add `playa()` to the application's UnoCSS config:
+
+```ts
+// uno.config.ts
+import { playa } from 'ajo-ui-playa'
+import { defineConfig } from 'unocss'
+
+export default defineConfig({
+  presets: [playa()],
+})
+```
+
+Add the UnoCSS plugin to the application's Vite config:
+
+```ts
+// vite.config.ts
+import { defineConfig } from 'vite'
+import unocss from 'unocss/vite'
+
+export default defineConfig({
+  plugins: [unocss()],
+})
+```
+
+Load the generated stylesheet from the application entry:
+
+```ts
+import 'virtual:uno.css'
+```
+
+### With ajo-kit
+
+`ajo-kit` can load the stylesheet before hydration:
+
+```ts
+import { kit, jsx } from 'ajo-kit/vite'
+import { defineConfig } from 'vite'
+import unocss from 'unocss/vite'
+
+export default defineConfig({
+  plugins: [...kit({ css: ['virtual:uno.css'] }), unocss()],
+  esbuild: jsx,
+})
+```
+
+## Usage
+
+Import `playa()` from the package root. Import components from family subpaths:
+
+```tsx
+import Button, { buttonVariants } from 'ajo-ui-playa/button'
+import { Card, CardContent } from 'ajo-ui-playa/card'
+import { DataTable, type DataTableColumn } from 'ajo-ui-playa/data-table'
+```
+
+Family subpath imports are side-effect-free and tree-shakeable.
+
+## Components
+
+| Group | Family subpaths |
+|---|---|
+| Actions and status | `alert`, `alert-dialog`, `button`, `button-group`, `chip`, `marker`, `spinner` |
+| Content and layout | `aspect-ratio`, `attachment`, `breadcrumb`, `bubble`, `card`, `empty`, `item`, `kbd`, `label`, `pagination`, `scroll-area`, `separator`, `skeleton`, `table`, `typography` |
+| Inputs and selection | `checkbox`, `checkbox-group`, `field`, `input`, `input-date`, `input-group`, `input-otp`, `radio-group`, `select`, `slider`, `switch`, `textarea`, `toggle`, `toggle-group` |
+| Navigation and overlays | `accordion`, `collapsible`, `command`, `context-menu`, `dialog`, `direction`, `drawer`, `menu`, `menubar`, `navigation-menu`, `popover`, `sidebar`, `tabs`, `toast`, `toolbar`, `tooltip` |
+| Data and media | `avatar`, `calendar`, `carousel`, `chart`, `data-table`, `message`, `message-scroller`, `progress`, `resizable`, `virtual-list` |
+
+## UnoCSS Preset
+
+`playa()` configures Wind4, Lucide icons, Playa design tokens, preflights,
+variants, rules, and component shortcuts.
+
+UnoCSS discovers classes from imported component families. Define application
+shortcuts in `uno.config.ts` and add dynamically generated icon names to the
+application safelist.

package/dist/accordion.js

@@ -0,0 +1,41 @@
+// @unocss-include
+import { c as disclosureContent } from "./chunks/recipes-CXxPSYdV.js";
+import clsx from "clsx";
+import { Accordion as Accordion$1, AccordionContent as AccordionContent$1, AccordionItem as AccordionItem$1, AccordionTrigger as AccordionTrigger$1 } from "ajo-ui/accordion";
+import { jsx, jsxs } from "ajo/jsx-runtime";
+//#region packages/ajo-ui-playa/src/accordion.tsx
+var itemBase = clsx("border-b last:border-b-0", disclosureContent);
+var triggerBase = "flex flex-1 cursor-pointer list-none items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none focus-visible:ring-3 focus-visible:ring-ring/50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&::-webkit-details-marker]:hidden [&[data-state=open]>[data-accordion-chevron]]:rotate-180";
+/** Root provider for accordion state. */
+var Accordion = ({ class: classes, ...attrs }) => /* @__PURE__ */ jsx(Accordion$1, {
+	...attrs,
+	class: classes
+});
+/** Accordion section rendered as a native details element. */
+var AccordionItem = ({ children, class: classes, disabled, open: _open, value, ...attrs }) => /* @__PURE__ */ jsx(AccordionItem$1, {
+	...attrs,
+	class: clsx(itemBase, classes),
+	disabled,
+	value,
+	children
+});
+/** Accordion heading trigger rendered as a native summary element. */
+var AccordionTrigger = ({ children, class: classes, "set:onclick": onClick, ...attrs }) => /* @__PURE__ */ jsxs(AccordionTrigger$1, {
+	...attrs,
+	class: clsx(triggerBase, classes),
+	"set:onclick": onClick,
+	children: [children, /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		"data-accordion-chevron": true,
+		class: "i-lucide-chevron-down pointer-events-none size-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-200"
+	})]
+});
+/** Accordion panel content. */
+var AccordionContent = ({ children, class: classes, ...attrs }) => /* @__PURE__ */ jsx(AccordionContent$1, {
+	...attrs,
+	class: "overflow-hidden text-sm",
+	innerClass: clsx("pb-4 pt-0", classes),
+	children
+});
+//#endregion
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/dist/alert-dialog.js

@@ -0,0 +1,88 @@
+// @unocss-include
+import { buttonVariants } from "./button.js";
+import { DialogContent as DialogContent$1, DialogDescription as DialogDescription$1 } from "./dialog.js";
+import clsx from "clsx";
+import { jsx } from "ajo/jsx-runtime";
+import { Dialog, DialogClose, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "ajo-ui/dialog";
+//#region packages/ajo-ui-playa/src/alert-dialog.tsx
+var contentBase = "data-[size=sm]:max-w-xs sm:data-[size=default]:max-w-lg";
+var headerBase = "grid grid-rows-[auto_1fr] place-items-center text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:[[data-slot=alert-dialog-content][data-size=default]_&]:place-items-start sm:[[data-slot=alert-dialog-content][data-size=default]_&]:text-left sm:[[data-slot=alert-dialog-content][data-size=default]_&:has([data-slot=alert-dialog-media])]:grid-rows-[auto_1fr]";
+var footerBase = "flex flex-col-reverse gap-2 [[data-slot=alert-dialog-content][data-size=sm]_&]:grid [[data-slot=alert-dialog-content][data-size=sm]_&]:grid-cols-2 sm:flex-row sm:justify-end";
+var titleBase = "text-lg font-semibold sm:[[data-slot=alert-dialog-content][data-size=default]:has([data-slot=alert-dialog-media])_&]:col-start-2";
+var mediaBase = "mb-2 inline-flex size-16 items-center justify-center rounded-md bg-muted sm:[[data-slot=alert-dialog-content][data-size=default]_&]:row-span-2 [&>svg:not([class*=size-])]:size-8";
+/** Root provider for a modal alert dialog that requires a user response. */
+var AlertDialog = (attrs) => /* @__PURE__ */ jsx(Dialog, {
+	...attrs,
+	modal: true,
+	"data-slot": "alert-dialog"
+});
+/** Button that opens the nearest AlertDialog. */
+var AlertDialogTrigger = (attrs) => /* @__PURE__ */ jsx(DialogTrigger, {
+	...attrs,
+	"data-slot": "alert-dialog-trigger"
+});
+/** Native modal alert dialog panel. */
+var AlertDialogContent = ({ class: classes, size = "default", ...attrs }) => /* @__PURE__ */ jsx(DialogContent$1, {
+	...attrs,
+	class: clsx(contentBase, classes),
+	"data-size": size,
+	"data-slot": "alert-dialog-content",
+	onPointerDownOutside: (event) => event.preventDefault(),
+	role: "alertdialog",
+	showCloseButton: false,
+	unstyled: false
+});
+/** Header area for alert dialog title, description, and optional media. */
+var AlertDialogHeader = ({ class: classes, ...attrs }) => /* @__PURE__ */ jsx(DialogHeader, {
+	...attrs,
+	class: clsx(headerBase, classes),
+	"data-slot": "alert-dialog-header"
+});
+/** Footer area for alert dialog cancel and action buttons. */
+var AlertDialogFooter = ({ class: classes, ...attrs }) => /* @__PURE__ */ jsx(DialogFooter, {
+	...attrs,
+	class: clsx(footerBase, classes),
+	"data-slot": "alert-dialog-footer"
+});
+/** Accessible title for AlertDialogContent. */
+var AlertDialogTitle = ({ class: classes, ...attrs }) => /* @__PURE__ */ jsx(DialogTitle, {
+	...attrs,
+	class: clsx(titleBase, classes),
+	"data-slot": "alert-dialog-title"
+});
+/** Accessible description for AlertDialogContent. */
+var AlertDialogDescription = (attrs) => /* @__PURE__ */ jsx(DialogDescription$1, {
+	...attrs,
+	"data-slot": "alert-dialog-description"
+});
+/** Optional media block for an icon or image in the alert dialog header. */
+var AlertDialogMedia = ({ children, class: classes, ...attrs }) => /* @__PURE__ */ jsx("div", {
+	...attrs,
+	class: clsx(mediaBase, classes),
+	"data-slot": "alert-dialog-media",
+	children
+});
+/** Primary alert dialog action button. Closes unless its click handler prevents default. */
+var AlertDialogAction = ({ children, class: classes, size = "default", variant = "default", ...attrs }) => /* @__PURE__ */ jsx(DialogClose, {
+	...attrs,
+	class: buttonVariants({
+		class: classes,
+		size,
+		variant
+	}),
+	"data-slot": "alert-dialog-action",
+	children
+});
+/** Cancel button. Closes unless its click handler prevents default. */
+var AlertDialogCancel = ({ children, class: classes, size = "default", variant = "outline", ...attrs }) => /* @__PURE__ */ jsx(DialogClose, {
+	...attrs,
+	class: buttonVariants({
+		class: classes,
+		size,
+		variant
+	}),
+	"data-slot": "alert-dialog-cancel",
+	children
+});
+//#endregion
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogTitle, AlertDialogTrigger };

package/dist/alert.js

@@ -0,0 +1,49 @@
+// @unocss-include
+import clsx from "clsx";
+import { jsx } from "ajo/jsx-runtime";
+//#region packages/ajo-ui-playa/src/alert.tsx
+var base = "relative grid w-full grid-cols-[0_1fr_auto] items-start gap-y-0.5 rounded-lg edge px-4 py-3 text-sm has-[>svg]:grid-cols-[1rem_1fr_auto] has-[>svg]:gap-x-3 has-[>[data-slot=alert-icon]]:grid-cols-[1rem_1fr_auto] has-[>[data-slot=alert-icon]]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current [&>[data-slot=alert-icon]]:size-4 [&>[data-slot=alert-icon]]:translate-y-0.5 [&>[data-slot=alert-icon]]:text-current";
+var variants = {
+	default: "bg-card/80 text-card-foreground shadow-xs",
+	danger: "bg-danger/10 text-danger inset-ring-danger/25 [&_[data-slot=alert-description]]:text-danger/85",
+	success: "bg-success/10 text-success inset-ring-success/25 [&_[data-slot=alert-description]]:text-success/85",
+	warning: "bg-warning/10 text-warning inset-ring-warning/25 [&_[data-slot=alert-description]]:text-warning/85",
+	info: "bg-info/10 text-info inset-ring-info/25 [&_[data-slot=alert-description]]:text-info/85"
+};
+/** Returns the UnoCSS class list for an alert variant. */
+var alertVariants = ({ class: classes, variant = "default" } = {}) => clsx(base, variants[variant], classes);
+/** Callout for important user attention. */
+var Alert = ({ class: classes, children, role = "alert", variant = "default", ...attrs }) => /* @__PURE__ */ jsx("div", {
+	...attrs,
+	class: alertVariants({
+		class: classes,
+		variant
+	}),
+	"data-slot": "alert",
+	"data-variant": variant,
+	role,
+	children
+});
+/** Title slot for `Alert`. */
+var AlertTitle = ({ class: classes, children, ...attrs }) => /* @__PURE__ */ jsx("div", {
+	...attrs,
+	class: clsx("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", classes),
+	"data-slot": "alert-title",
+	children
+});
+/** Description/content slot for `Alert`. */
+var AlertDescription = ({ class: classes, children, ...attrs }) => /* @__PURE__ */ jsx("div", {
+	...attrs,
+	class: clsx("col-start-2 grid justify-items-start gap-1 text-sm text-muted-foreground [&_p]:leading-relaxed", classes),
+	"data-slot": "alert-description",
+	children
+});
+/** Action slot for `Alert`, aligned to the end on wider screens. */
+var AlertAction = ({ class: classes, children, ...attrs }) => /* @__PURE__ */ jsx("div", {
+	...attrs,
+	class: clsx("col-start-2 mt-3 flex flex-wrap gap-2 sm:col-start-3 sm:row-span-2 sm:row-start-1 sm:mt-0 sm:justify-self-end sm:ps-3", classes),
+	"data-slot": "alert-action",
+	children
+});
+//#endregion
+export { Alert, Alert as default, AlertAction, AlertDescription, AlertTitle, alertVariants };

package/dist/aspect-ratio.js

@@ -0,0 +1,21 @@
+// @unocss-include
+import clsx from "clsx";
+import { jsx } from "ajo/jsx-runtime";
+import { stlx } from "ajo-ui/utils";
+//#region packages/ajo-ui-playa/src/aspect-ratio.tsx
+var base = "relative w-full";
+var ratioValue = (ratio) => Number.isFinite(ratio) && ratio > 0 ? String(ratio) : "1";
+/** Responsive box that preserves a width-to-height ratio. */
+var AspectRatio = ({ class: classes, children, ratio, style, ...attrs }) => {
+	const value = ratioValue(ratio);
+	return /* @__PURE__ */ jsx("div", {
+		...attrs,
+		class: clsx(base, classes),
+		"data-ratio": value,
+		"data-slot": "aspect-ratio",
+		style: stlx(style, { aspectRatio: value }),
+		children
+	});
+};
+//#endregion
+export { AspectRatio, AspectRatio as default };

package/dist/attachment.js

@@ -0,0 +1,126 @@
+// @unocss-include
+import { buttonVariants } from "./button.js";
+import clsx from "clsx";
+import { jsx } from "ajo/jsx-runtime";
+//#region packages/ajo-ui-playa/src/attachment.tsx
+var rootBase = [
+	"group/attachment relative flex w-fit max-w-full min-w-0 shrink-0 flex-wrap rounded-xl glass edge shadow-xs transition-colors",
+	"focus-within:ring-1 focus-within:ring-ring/50 has-[>a,>button]:hover:bg-muted/50",
+	"data-[state=error]:inset-ring-danger/25 data-[state=idle]:inset-ring-transparent data-[state=idle]:border data-[state=idle]:border-dashed"
+].join(" ");
+var rootSizes = {
+	default: "gap-2 text-sm has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2 has-data-[slot=attachment-media]:p-2",
+	sm: "gap-2 text-xs has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5 has-data-[slot=attachment-media]:p-1.5",
+	xs: "gap-1.5 rounded-lg text-xs has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1 has-data-[slot=attachment-media]:p-1"
+};
+var rootOrientations = {
+	horizontal: "min-w-40 items-center",
+	vertical: "w-24 flex-col has-data-[slot=attachment-content]:w-30"
+};
+var mediaBase = [
+	"relative flex aspect-square w-10 shrink-0 items-center justify-center overflow-hidden rounded-md bg-muted text-foreground",
+	"group-data-[orientation=vertical]/attachment:w-full group-data-[size=sm]/attachment:w-8 group-data-[size=sm]/attachment:rounded-sm group-data-[size=xs]/attachment:w-7 group-data-[size=xs]/attachment:rounded-sm",
+	"group-data-[state=error]/attachment:bg-danger/10 group-data-[state=error]/attachment:text-danger",
+	"[&_svg]:pointer-events-none [&_svg:not([class*=size-])]:size-4",
+	"group-data-[orientation=vertical]/attachment:[&_svg:not([class*=size-])]:size-6 group-data-[size=xs]/attachment:[&_svg:not([class*=size-])]:size-3.5"
+].join(" ");
+var mediaVariants = {
+	icon: "",
+	image: "opacity-60 group-data-[state=done]/attachment:opacity-100 group-data-[state=idle]/attachment:opacity-100 [&>img]:aspect-square [&>img]:size-full [&>img]:object-cover"
+};
+var contentBase = "max-w-full min-w-0 flex-1 leading-tight group-data-[orientation=vertical]/attachment:px-1";
+var titleBase = "block max-w-full min-w-0 truncate font-medium";
+var descriptionBase = "mt-0.5 block max-w-full min-w-0 truncate text-xs text-muted-foreground group-data-[state=error]/attachment:text-danger/80";
+var actionsBase = "relative z-20 flex shrink-0 items-center group-data-[orientation=vertical]/attachment:absolute group-data-[orientation=vertical]/attachment:right-3 group-data-[orientation=vertical]/attachment:top-3 group-data-[orientation=vertical]/attachment:gap-1";
+var triggerBase = "absolute inset-0 z-10 outline-none focus-visible:ring-3 focus-visible:ring-ring/50";
+var groupBase = "flex min-w-0 items-start scroll-fade-x snap-x snap-mandatory scroll-px-4 scrollbar-none gap-3 overflow-x-auto overscroll-x-contain px-4 py-1 [&>[data-slot=attachment]]:flex-none [&>[data-slot=attachment]]:snap-start";
+/** Root attachment container for files, images, upload rows, and chat attachments. */
+var Attachment = ({ children, class: classes, orientation = "horizontal", size = "default", state = "done", ...attrs }) => /* @__PURE__ */ jsx("div", {
+	...attrs,
+	class: clsx(rootBase, rootSizes[size], rootOrientations[orientation], classes),
+	"data-orientation": orientation,
+	"data-size": size,
+	"data-slot": "attachment",
+	"data-state": state,
+	children
+});
+/** Media slot for icons, thumbnails, or image previews. */
+var AttachmentMedia = ({ children, class: classes, variant = "icon", ...attrs }) => /* @__PURE__ */ jsx("div", {
+	...attrs,
+	class: clsx(mediaBase, mediaVariants[variant], classes),
+	"data-slot": "attachment-media",
+	"data-variant": variant,
+	children
+});
+/** Content slot wrapping title and description. */
+var AttachmentContent = ({ children, class: classes, ...attrs }) => /* @__PURE__ */ jsx("div", {
+	...attrs,
+	class: clsx(contentBase, classes),
+	"data-slot": "attachment-content",
+	children
+});
+/** Attachment display name. */
+var AttachmentTitle = ({ children, class: classes, ...attrs }) => /* @__PURE__ */ jsx("span", {
+	...attrs,
+	class: clsx(titleBase, classes),
+	"data-slot": "attachment-title",
+	children
+});
+/** Secondary metadata such as type, size, upload status, or error reason. */
+var AttachmentDescription = ({ children, class: classes, ...attrs }) => /* @__PURE__ */ jsx("span", {
+	...attrs,
+	class: clsx(descriptionBase, classes),
+	"data-slot": "attachment-description",
+	children
+});
+/** Action container aligned to the edge of the attachment. */
+var AttachmentActions = ({ children, class: classes, ...attrs }) => /* @__PURE__ */ jsx("div", {
+	...attrs,
+	class: clsx(actionsBase, classes),
+	"data-slot": "attachment-actions",
+	children
+});
+/** Icon-sized action button for attachment operations. */
+var AttachmentAction = ({ children, class: classes, size = "icon-xs", type = "button", variant = "ghost", ...attrs }) => /* @__PURE__ */ jsx("button", {
+	...attrs,
+	class: buttonVariants({
+		class: classes,
+		size,
+		variant
+	}),
+	"data-size": size,
+	"data-slot": "attachment-action",
+	"data-variant": variant,
+	type,
+	children
+});
+/** Full-card trigger layered behind actions. */
+var AttachmentTrigger = ({ as = "button", children, class: classes, type = "button", ...attrs }) => {
+	const styles = clsx(triggerBase, classes);
+	if (as === "a") {
+		const anchor = attrs;
+		return /* @__PURE__ */ jsx("a", {
+			...anchor,
+			class: styles,
+			"data-slot": "attachment-trigger",
+			href: String(anchor.href),
+			children
+		});
+	}
+	return /* @__PURE__ */ jsx("button", {
+		...attrs,
+		class: styles,
+		"data-slot": "attachment-trigger",
+		type,
+		children
+	});
+};
+/** Horizontally scrollable attachment row with snap points and edge fade. */
+var AttachmentGroup = ({ children, class: classes, ...attrs }) => /* @__PURE__ */ jsx("div", {
+	...attrs,
+	class: clsx(groupBase, classes),
+	"data-slot": "attachment-group",
+	children
+});
+//#endregion
+export { Attachment, AttachmentAction, AttachmentActions, AttachmentContent, AttachmentDescription, AttachmentGroup, AttachmentMedia, AttachmentTitle, AttachmentTrigger };

package/dist/avatar.js

@@ -0,0 +1,54 @@
+// @unocss-include
+import clsx from "clsx";
+import { jsx } from "ajo/jsx-runtime";
+import { Avatar as Avatar$1, AvatarBadge as AvatarBadge$1, AvatarFallback as AvatarFallback$1, AvatarGroup as AvatarGroup$1, AvatarGroupCount as AvatarGroupCount$1, AvatarImage as AvatarImage$1 } from "ajo-ui/avatar";
+//#region packages/ajo-ui-playa/src/avatar.tsx
+var avatarBase = "group/avatar relative flex size-8 shrink-0 rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6";
+var imageBase = "absolute inset-0 aspect-square size-full rounded-full object-cover";
+var fallbackBase = "flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs group-data-[size=lg]/avatar:text-base";
+var badgeBase = [
+	"absolute bottom-0 right-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground ring-2 ring-background select-none",
+	"[&:not(:has(>*))]:size-2.5 group-data-[size=sm]/avatar:[&:not(:has(>*))]:size-2 group-data-[size=lg]/avatar:[&:not(:has(>*))]:size-3",
+	"[&:has(>*)]:size-4 group-data-[size=lg]/avatar:[&:has(>*)]:size-5 group-data-[size=sm]/avatar:[&:has(>*)]:hidden",
+	"[&>*]:size-2.5 group-data-[size=lg]/avatar:[&>*]:size-3"
+].join(" ");
+var groupBase = "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background";
+var groupCountBase = "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background [[data-slot=avatar-group]:has([data-size=lg])_&]:size-10 [[data-slot=avatar-group]:has([data-size=sm])_&]:size-6 [&>svg]:size-4 [[data-slot=avatar-group]:has([data-size=lg])_&>svg]:size-5 [[data-slot=avatar-group]:has([data-size=sm])_&>svg]:size-3";
+/** Avatar root that wraps image, fallback, and optional badge. */
+var Avatar = ({ children, class: classes, size = "default", ...attrs }) => /* @__PURE__ */ jsx(Avatar$1, {
+	...attrs,
+	class: clsx(avatarBase, classes),
+	size,
+	children
+});
+/** Avatar image. It hides itself after load errors so the fallback remains visible. */
+var AvatarImage = ({ class: classes, ...attrs }) => /* @__PURE__ */ jsx(AvatarImage$1, {
+	...attrs,
+	class: clsx(imageBase, classes)
+});
+/** Avatar fallback content shown behind the image and after image errors. */
+var AvatarFallback = ({ children, class: classes, ...attrs }) => /* @__PURE__ */ jsx(AvatarFallback$1, {
+	...attrs,
+	class: clsx(fallbackBase, classes),
+	children
+});
+/** Small status badge positioned at the bottom-right of an avatar. */
+var AvatarBadge = ({ children, class: classes, ...attrs }) => /* @__PURE__ */ jsx(AvatarBadge$1, {
+	...attrs,
+	class: clsx(badgeBase, classes),
+	children
+});
+/** Overlapping avatar group. */
+var AvatarGroup = ({ children, class: classes, ...attrs }) => /* @__PURE__ */ jsx(AvatarGroup$1, {
+	...attrs,
+	class: clsx(groupBase, classes),
+	children
+});
+/** Count avatar for extra members in an avatar group. */
+var AvatarGroupCount = ({ children, class: classes, ...attrs }) => /* @__PURE__ */ jsx(AvatarGroupCount$1, {
+	...attrs,
+	class: clsx(groupCountBase, classes),
+	children
+});
+//#endregion
+export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage };

package/dist/breadcrumb.js

@@ -0,0 +1,73 @@
+// @unocss-include
+import clsx from "clsx";
+import { jsx, jsxs } from "ajo/jsx-runtime";
+import { emptyChildren } from "ajo-ui/utils";
+//#region packages/ajo-ui-playa/src/breadcrumb.tsx
+/** Landmark wrapper for breadcrumb navigation. */
+var Breadcrumb = ({ children, "aria-label": ariaLabel = "breadcrumb", class: classes, ...attrs }) => /* @__PURE__ */ jsx("nav", {
+	...attrs,
+	"aria-label": ariaLabel,
+	class: classes,
+	"data-slot": "breadcrumb",
+	children
+});
+/** Ordered breadcrumb item list. */
+var BreadcrumbList = ({ children, class: classes, ...attrs }) => /* @__PURE__ */ jsx("ol", {
+	...attrs,
+	class: clsx("flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5", classes),
+	"data-slot": "breadcrumb-list",
+	children
+});
+/** Single breadcrumb list item. */
+var BreadcrumbItem = ({ children, class: classes, ...attrs }) => /* @__PURE__ */ jsx("li", {
+	...attrs,
+	class: clsx("inline-flex items-center gap-1.5", classes),
+	"data-slot": "breadcrumb-item",
+	children
+});
+/** Clickable breadcrumb link. */
+var BreadcrumbLink = ({ children, class: classes, ...attrs }) => /* @__PURE__ */ jsx("a", {
+	...attrs,
+	class: clsx("transition-colors hover:text-foreground", classes),
+	"data-slot": "breadcrumb-link",
+	children
+});
+/** Current page marker inside a breadcrumb. */
+var BreadcrumbPage = ({ children, class: classes, ...attrs }) => /* @__PURE__ */ jsx("span", {
+	...attrs,
+	"aria-current": "page",
+	"aria-disabled": "true",
+	class: clsx("font-normal text-foreground", classes),
+	"data-slot": "breadcrumb-page",
+	role: "link",
+	children
+});
+/** Decorative separator between breadcrumb items. */
+var BreadcrumbSeparator = ({ children, class: classes, ...attrs }) => /* @__PURE__ */ jsx("li", {
+	...attrs,
+	"aria-hidden": "true",
+	class: clsx("inline-flex items-center justify-center [&>svg]:size-3.5", classes),
+	"data-slot": "breadcrumb-separator",
+	role: "presentation",
+	children: emptyChildren(children) ? /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		class: "i-lucide-chevron-right block size-3.5 shrink-0 text-muted-foreground"
+	}) : children
+});
+/** Collapsed breadcrumb range indicator. */
+var BreadcrumbEllipsis = ({ class: classes, ...attrs }) => /* @__PURE__ */ jsxs("span", {
+	...attrs,
+	"aria-hidden": "true",
+	class: clsx("flex size-9 items-center justify-center", classes),
+	"data-slot": "breadcrumb-ellipsis",
+	role: "presentation",
+	children: [/* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		class: "i-lucide-ellipsis size-4"
+	}), /* @__PURE__ */ jsx("span", {
+		class: "sr-only",
+		children: "More"
+	})]
+});
+//#endregion
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };

package/dist/bubble.js

@@ -0,0 +1,91 @@
+// @unocss-include
+import clsx from "clsx";
+import { jsx } from "ajo/jsx-runtime";
+//#region packages/ajo-ui-playa/src/bubble.tsx
+var groupBase = [
+	"flex min-w-0 flex-col gap-1",
+	"[&>[data-slot=bubble]:not(:last-child)>[data-slot=bubble-content]]:rounded-bl-2xl",
+	"[&>[data-slot=bubble]:not(:last-child)>[data-slot=bubble-content]]:rounded-br-2xl"
+].join(" ");
+var rootBase = ["group/bubble relative flex w-fit max-w-[80%] min-w-0 flex-col gap-1", "group-data-[align=end]/message:self-end data-[align=end]:self-end data-[variant=ghost]:max-w-full"].join(" ");
+var rootVariants = {
+	default: "*:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary/90",
+	secondary: "*:data-[slot=bubble-content]:bg-secondary *:data-[slot=bubble-content]:text-secondary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-secondary/80",
+	muted: "*:data-[slot=bubble-content]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted/80",
+	tinted: "*:data-[slot=bubble-content]:bg-primary/10 *:data-[slot=bubble-content]:text-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary/15",
+	outline: "*:data-[slot=bubble-content]:bg-card/80 *:data-[slot=bubble-content]:text-card-foreground *:data-[slot=bubble-content]:inset-ring *:data-[slot=bubble-content]:inset-ring-border [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground",
+	ghost: "*:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-accent [&>[data-slot=bubble-content]:is(button,a):hover]:text-accent-foreground",
+	danger: "*:data-[slot=bubble-content]:bg-danger/10 *:data-[slot=bubble-content]:text-danger *:data-[slot=bubble-content]:inset-ring *:data-[slot=bubble-content]:inset-ring-danger/25 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-danger/20"
+};
+var contentBase = [
+	"w-fit max-w-full min-w-0 overflow-hidden px-3.5 py-2 text-sm leading-relaxed [overflow-wrap:anywhere]",
+	"rounded-2xl rounded-bl-md",
+	"[[data-slot=bubble][data-align=end]_&]:rounded-bl-2xl [[data-slot=bubble][data-align=end]_&]:rounded-br-md",
+	"[[data-slot=message][data-align=end]_&]:rounded-bl-2xl [[data-slot=message][data-align=end]_&]:rounded-br-md",
+	"[[data-slot=bubble][data-variant=ghost]_&]:rounded-none",
+	"group-data-[align=end]/bubble:self-end",
+	"[&:is(button)]:text-left [&:is(button,a)]:transition-colors [&:is(button,a)]:outline-none [&:is(button,a)]:focus-visible:ring-3 [&:is(button,a)]:focus-visible:ring-ring/50"
+].join(" ");
+var reactionsBase = "absolute z-10 flex w-fit shrink-0 items-center justify-center gap-1 rounded-full bg-popover text-popover-foreground edge px-1.5 py-0.5 text-sm has-[button]:p-0";
+var reactionSides = {
+	bottom: "bottom-0 translate-y-3/4",
+	top: "top-0 -translate-y-3/4"
+};
+var reactionAligns = {
+	end: "right-3",
+	start: "left-3"
+};
+/** Groups consecutive bubbles from one speaker. */
+var BubbleGroup = ({ children, class: classes, ...attrs }) => /* @__PURE__ */ jsx("div", {
+	...attrs,
+	class: clsx(groupBase, classes),
+	"data-slot": "bubble-group",
+	children
+});
+/** Presentational chat bubble wrapper. Keep message-level semantics outside this component. */
+var Bubble = ({ align = "start", children, class: classes, variant = "default", ...attrs }) => /* @__PURE__ */ jsx("div", {
+	...attrs,
+	class: clsx(rootBase, rootVariants[variant], classes),
+	"data-align": align,
+	"data-slot": "bubble",
+	"data-variant": variant,
+	children
+});
+/** Bubble content surface. Use `as="button"` or `as="a"` for interactive bubbles. */
+var BubbleContent = ({ as = "div", children, class: classes, type = "button", ...attrs }) => {
+	const styles = clsx(contentBase, classes);
+	if (as === "a") {
+		const anchor = attrs;
+		return /* @__PURE__ */ jsx("a", {
+			...anchor,
+			class: styles,
+			"data-slot": "bubble-content",
+			href: String(anchor.href),
+			children
+		});
+	}
+	if (as === "button") return /* @__PURE__ */ jsx("button", {
+		...attrs,
+		class: styles,
+		"data-slot": "bubble-content",
+		type,
+		children
+	});
+	return /* @__PURE__ */ jsx("div", {
+		...attrs,
+		class: styles,
+		"data-slot": "bubble-content",
+		children
+	});
+};
+/** Reaction row anchored to a bubble edge. */
+var BubbleReactions = ({ align = "end", children, class: classes, side = "bottom", ...attrs }) => /* @__PURE__ */ jsx("div", {
+	...attrs,
+	class: clsx(reactionsBase, reactionSides[side], reactionAligns[align], classes),
+	"data-align": align,
+	"data-side": side,
+	"data-slot": "bubble-reactions",
+	children
+});
+//#endregion
+export { Bubble, BubbleContent, BubbleGroup, BubbleReactions };