ajo-ui 0.1.0

package/dist/drawer.js

@@ -0,0 +1,139 @@
+import { clx, withSlot } from "./utils.js";
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./dialog.js";
+import { callRef, move, statefulRootAttrs } from "ajo-cloves";
+import { context } from "ajo/context";
+import { jsx, jsxs } from "ajo/jsx-runtime";
+//#region packages/ajo-ui/src/drawer.tsx
+var DrawerContext = context({
+	drag: {
+		start: () => false,
+		get active() {
+			return false;
+		}
+	},
+	side: "right",
+	setPanel: () => {}
+});
+var DrawerRoot = function* () {
+	let side = "right";
+	let offset = 0;
+	let panel = null;
+	const reset = () => {
+		if (!panel) return;
+		panel.style.transform = "";
+		panel.style.transition = "";
+		panel.style.willChange = "";
+	};
+	const movePanel = (next) => {
+		if (!panel) return;
+		panel.style.transition = "none";
+		panel.style.transform = transform(next, side);
+		panel.style.willChange = "transform";
+	};
+	const drag = move(this, {
+		onStart: () => {
+			offset = 0;
+		},
+		onMove: (data) => {
+			const delta = side === "left" || side === "right" ? data.dx : data.dy;
+			offset = Math.max(0, side === "left" || side === "top" ? -delta : delta);
+			movePanel(offset);
+		},
+		onEnd: (data) => {
+			reset();
+			if (!data.canceled && offset > 72 && panel?.open) panel.close();
+		}
+	});
+	for (const args of this) {
+		side = args.side ?? "right";
+		DrawerContext({
+			drag,
+			side,
+			setPanel: (element) => panel = element
+		});
+		yield /* @__PURE__ */ jsx(Dialog, {
+			"data-slot": "drawer-dialog",
+			defaultOpen: args.defaultOpen,
+			modal: args.modal,
+			onOpenChange: args.onOpenChange,
+			open: args.open,
+			children: args.children
+		});
+	}
+};
+/** Unstyled edge panel provider built on native Dialog behavior. */
+var Drawer = ({ children, class: classes, defaultOpen, modal, onOpenChange, open, side, ...attrs }) => /* @__PURE__ */ jsx(DrawerRoot, {
+	...statefulRootAttrs(attrs),
+	defaultOpen,
+	modal,
+	onOpenChange,
+	open,
+	side,
+	"attr:class": classes,
+	"attr:data-slot": "drawer",
+	children
+});
+/** Unstyled button that opens the nearest Drawer. */
+var DrawerTrigger = withSlot(DialogTrigger, "drawer-trigger");
+/** Unstyled button that closes the nearest Drawer. */
+var DrawerClose = withSlot(DialogClose, "drawer-close");
+var transform = (offset, side) => {
+	if (side === "left") return `translateX(${-offset}px)`;
+	if (side === "right") return `translateX(${offset}px)`;
+	if (side === "top") return `translateY(${-offset}px)`;
+	return `translateY(${offset}px)`;
+};
+/** Unstyled native Drawer panel with optional drag and close controls. */
+var DrawerContent = ({ children, class: classes, closeClass, closeIconClass, closeLabel = "Close", handle = false, handleClass, handleLabel = "Drag to close", ref, showCloseButton = true, sideClass, ...attrs }) => {
+	const drawer = DrawerContext();
+	const { side } = drawer;
+	let panel = null;
+	const reference = (element) => {
+		panel = element;
+		drawer.setPanel(element);
+		callRef(ref, element);
+	};
+	return /* @__PURE__ */ jsxs(DialogContent, {
+		...attrs,
+		class: clx(sideClass?.[side], classes),
+		"data-side": side,
+		"data-slot": "drawer-content",
+		ref: reference,
+		children: [
+			handle ? /* @__PURE__ */ jsx("div", {
+				"aria-label": handleLabel,
+				class: handleClass,
+				"data-slot": "drawer-handle",
+				role: "button",
+				tabIndex: 0,
+				"set:onkeydown": (event) => {
+					if ((event.key === "Enter" || event.key === " ") && panel?.open) {
+						event.preventDefault();
+						panel.close();
+					}
+				},
+				"set:onpointerdown": (event) => drawer.drag.start(event)
+			}) : null,
+			children,
+			showCloseButton ? /* @__PURE__ */ jsx(DrawerClose, {
+				"aria-label": closeLabel,
+				class: closeClass,
+				children: /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					class: closeIconClass,
+					"data-slot": "drawer-close-icon"
+				})
+			}) : null
+		]
+	});
+};
+/** Unstyled header area for Drawer title and description. */
+var DrawerHeader = withSlot(DialogHeader, "drawer-header");
+/** Unstyled footer area for Drawer actions. */
+var DrawerFooter = withSlot(DialogFooter, "drawer-footer");
+/** Accessible heading for DrawerContent. */
+var DrawerTitle = withSlot(DialogTitle, "drawer-title");
+/** Accessible description for DrawerContent. */
+var DrawerDescription = withSlot(DialogDescription, "drawer-description");
+//#endregion
+export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger };

package/dist/field.js

@@ -0,0 +1,26 @@
+import { label, statefulRootAttrs } from "ajo-cloves";
+import { context } from "ajo/context";
+import { Fragment, jsx } from "ajo/jsx-runtime";
+//#region packages/ajo-ui/src/field.tsx
+/** Field context carrying label clove wiring to composed field parts. */
+var FieldContext = context(null);
+/** Unstyled behavior root for one field's label, description, and error wiring. */
+var FieldRoot = function* (args) {
+	const view = label(this, { prefix: () => args.name });
+	for (const next of this) {
+		view.reset();
+		view.sync(Boolean(next.invalid));
+		FieldContext(view);
+		yield /* @__PURE__ */ jsx(Fragment, { children: next.children });
+	}
+};
+/** Unstyled field host with label, description, and error wiring. */
+var Field = ({ children, invalid, name, ...attrs }) => /* @__PURE__ */ jsx(FieldRoot, {
+	...statefulRootAttrs(attrs),
+	invalid,
+	name,
+	"attr:data-slot": "field",
+	children
+});
+//#endregion
+export { Field, FieldContext };

package/dist/index.js

@@ -0,0 +1,38 @@
+import { Collapsible, CollapsibleContent, CollapsibleContext, CollapsibleTrigger } from "./collapsible.js";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./accordion.js";
+import { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage } from "./avatar.js";
+import { n as CalendarDayButton, t as Calendar } from "./chunks/calendar-q8jZ8Cxr.js";
+import { DirectionContext, DirectionProvider } from "./direction.js";
+import { Carousel, CarouselContent, CarouselContext, CarouselItem, CarouselNext, CarouselPrevious } from "./carousel.js";
+import { ChartArea, ChartBar, ChartContainer, ChartIdContext, ChartLegend, ChartLegendContent, ChartLine, ChartPie, ChartTooltip, ChartTooltipContent } from "./chart.js";
+import { Checkbox } from "./checkbox.js";
+import { CheckboxGroup, CheckboxGroupItem } from "./checkbox-group.js";
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./dialog.js";
+import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from "./command.js";
+import { a as MenuItem, c as MenuRadioItem, d as MenuSub, f as MenuSubContent, i as MenuGroup, l as MenuSeparator, m as MenuTrigger, n as MenuCheckboxItem, o as MenuLabel, p as MenuSubTrigger, r as MenuContent, s as MenuRadioGroup, t as Menu, u as MenuShortcut } from "./chunks/menu-B45IyHHC.js";
+import { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger } from "./context-menu.js";
+import { t as DataTable } from "./chunks/data-table-DpkWv4y4.js";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea } from "./input-group.js";
+import { Select, SelectChip, SelectChips, SelectChipsInput, SelectClear, SelectContent, SelectCreate, SelectEmpty, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectList, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectStatus, SelectTrigger, SelectValue } from "./select.js";
+import { Toolbar, ToolbarSeparator } from "./toolbar.js";
+import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from "./drawer.js";
+import { Field, FieldContext } from "./field.js";
+import { InputDate, InputDateCalendar, InputDateClear, InputDateContent, InputDateField, InputDatePresets, InputDateTime, InputDateTimeField, InputDateTrigger, InputTime } from "./input-date.js";
+import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from "./input-otp.js";
+import { Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger } from "./menubar.js";
+import { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerContext, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport } from "./message-scroller.js";
+import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger } from "./navigation-menu.js";
+import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "./popover.js";
+import { Progress } from "./progress.js";
+import { RadioGroup, RadioGroupItem } from "./radio-group.js";
+import { ResizableContext, ResizableHandle, ResizablePanel, ResizablePanelGroup } from "./resizable.js";
+import { Sidebar, SidebarContent, SidebarContext, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger } from "./sidebar.js";
+import { Slider } from "./slider.js";
+import { Switch } from "./switch.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs.js";
+import { Toggle } from "./toggle.js";
+import { ToggleGroup, ToggleGroupContext, ToggleGroupItem } from "./toggle-group.js";
+import { Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster, clearToasts, dismissToast, toast, updateToast } from "./toast.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip.js";
+import { t as VirtualList } from "./chunks/virtual-list-B7hjGkjk.js";
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Calendar, CalendarDayButton, Carousel, CarouselContent, CarouselContext, CarouselItem, CarouselNext, CarouselPrevious, ChartArea, ChartBar, ChartContainer, ChartIdContext, ChartLegend, ChartLegendContent, ChartLine, ChartPie, ChartTooltip, ChartTooltipContent, Checkbox, CheckboxGroup, CheckboxGroupItem, Collapsible, CollapsibleContent, CollapsibleContext, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataTable, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DirectionContext, DirectionProvider, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, Field, FieldContext, InputDate, InputDateCalendar, InputDateClear, InputDateContent, InputDateField, InputDatePresets, InputDateTime, InputDateTimeField, InputDateTrigger, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, InputTime, Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuItem, MenuLabel, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuShortcut, MenuSub, MenuSubContent, MenuSubTrigger, MenuTrigger, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerContext, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS, RadioGroup, RadioGroupItem, ResizableContext, ResizableHandle, ResizablePanel, ResizablePanelGroup, Select, SelectChip, SelectChips, SelectChipsInput, SelectClear, SelectContent, SelectCreate, SelectEmpty, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectList, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectStatus, SelectTrigger, SelectValue, Sidebar, SidebarContent, SidebarContext, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Slider, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster, Toggle, ToggleGroup, ToggleGroupContext, ToggleGroupItem, Toolbar, ToolbarSeparator, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, VirtualList, clearToasts, dismissToast, toast, updateToast };