@askrjs/themes 0.0.9 → 0.0.11

package/dist/components/catalog.js

@@ -0,0 +1,723 @@
+import { classes } from "./_internal/classes.js";
+import { mergeProps } from "./_internal/merge-props.js";
+import { Block } from "./block/block.js";
+import { DialogContent } from "@askrjs/ui";
+import { jsx } from "@askrjs/askr/jsx-runtime";
+import { Slot } from "@askrjs/askr/foundations";
+//#region src/components/catalog.tsx
+function catalogPart(props, defaults) {
+	const { as, asChild, children, class: className, ref, ...rest } = props;
+	const Element = as ?? defaults.element ?? "div";
+	const finalProps = mergeProps(rest, {
+		ref,
+		class: classes(defaults.className, className),
+		"data-slot": defaults.slot,
+		role: defaults.role
+	});
+	if (asChild) return /* @__PURE__ */ jsx(Slot, {
+		asChild: true,
+		...finalProps,
+		children
+	});
+	return /* @__PURE__ */ jsx(Element, {
+		...finalProps,
+		children
+	});
+}
+function buttonPart(props, slot, className) {
+	const { children, ref, class: classProp, type = "button", ...rest } = props;
+	return /* @__PURE__ */ jsx("button", {
+		type,
+		...mergeProps(rest, {
+			ref,
+			class: classes(className, classProp),
+			"data-slot": slot
+		}),
+		children
+	});
+}
+function normalizeLegacySpace(value) {
+	if (value === "none") return "0";
+	if (value === "1") return "xs";
+	if (value === "2") return "xs";
+	if (value === "3") return "sm";
+	if (value === "4") return "md";
+	if (value === "5") return "lg";
+	if (value === "6") return "xl";
+	if (value === "8") return "2xl";
+	return value;
+}
+function layoutAlias(props, defaults) {
+	const { gap, p, padding, style, wrap, ...rest } = props;
+	const BlockComponent = Block;
+	const wrapStyle = wrap ? {
+		...style,
+		flexWrap: "wrap"
+	} : style;
+	return /* @__PURE__ */ jsx(BlockComponent, {
+		...defaults,
+		...rest,
+		gap: normalizeLegacySpace(gap),
+		padding: padding ?? normalizeLegacySpace(p),
+		style: wrapStyle
+	});
+}
+function Box(props) {
+	return layoutAlias(props, {});
+}
+function Stack(props) {
+	return layoutAlias(props, { direction: "column" });
+}
+function Inline(props) {
+	return layoutAlias(props, { direction: "row" });
+}
+function Shell(props) {
+	const { variant: _variant, ...rest } = props;
+	return layoutAlias(rest, {});
+}
+function ShellNav(props) {
+	return layoutAlias(props, {});
+}
+function ShellMain(props) {
+	return layoutAlias(props, {
+		as: "main",
+		grow: true
+	});
+}
+function AlertTitle(props) {
+	return catalogPart(props, {
+		slot: "alert-title",
+		element: "h3",
+		className: "alert-title"
+	});
+}
+function AlertDescription(props) {
+	return catalogPart(props, {
+		slot: "alert-description",
+		element: "p",
+		className: "alert-description"
+	});
+}
+function Breadcrumb(props) {
+	return catalogPart(props, {
+		slot: "breadcrumb",
+		element: "nav",
+		role: "navigation"
+	});
+}
+function BreadcrumbList(props) {
+	return catalogPart(props, {
+		slot: "breadcrumb-list",
+		element: "ol"
+	});
+}
+function BreadcrumbItem(props) {
+	return catalogPart(props, {
+		slot: "breadcrumb-item",
+		element: "li"
+	});
+}
+function BreadcrumbLink(props) {
+	return catalogPart(props, {
+		slot: "breadcrumb-link",
+		element: "a"
+	});
+}
+function BreadcrumbPage(props) {
+	return catalogPart({
+		"aria-current": "page",
+		...props
+	}, {
+		slot: "breadcrumb-page",
+		element: "span"
+	});
+}
+function BreadcrumbSeparator(props) {
+	const { children = "/", ...rest } = props;
+	return catalogPart({
+		"aria-hidden": "true",
+		children,
+		...rest
+	}, {
+		slot: "breadcrumb-separator",
+		element: "li"
+	});
+}
+function BreadcrumbEllipsis(props) {
+	const { children = "...", ...rest } = props;
+	return catalogPart({
+		"aria-hidden": "true",
+		children,
+		...rest
+	}, {
+		slot: "breadcrumb-ellipsis",
+		element: "span"
+	});
+}
+function Calendar(props) {
+	return catalogPart(props, { slot: "calendar" });
+}
+function CalendarHeader(props) {
+	return catalogPart(props, { slot: "calendar-header" });
+}
+function CalendarCaption(props) {
+	return catalogPart(props, { slot: "calendar-caption" });
+}
+function CalendarNav(props) {
+	return catalogPart(props, { slot: "calendar-nav" });
+}
+function CalendarPreviousButton(props) {
+	const { children = "Previous month", ...rest } = props;
+	return buttonPart({
+		"aria-label": "Previous month",
+		children,
+		...rest
+	}, "calendar-previous", "btn btn-icon btn-ghost");
+}
+function CalendarNextButton(props) {
+	const { children = "Next month", ...rest } = props;
+	return buttonPart({
+		"aria-label": "Next month",
+		children,
+		...rest
+	}, "calendar-next", "btn btn-icon btn-ghost");
+}
+function CalendarGrid(props) {
+	return catalogPart(props, {
+		slot: "calendar-grid",
+		role: "grid"
+	});
+}
+function CalendarHead(props) {
+	return catalogPart(props, {
+		slot: "calendar-head",
+		role: "row"
+	});
+}
+function CalendarBody(props) {
+	return catalogPart(props, { slot: "calendar-body" });
+}
+function CalendarRow(props) {
+	return catalogPart(props, {
+		slot: "calendar-row",
+		role: "row"
+	});
+}
+function CalendarCell(props) {
+	return catalogPart(props, {
+		slot: "calendar-cell",
+		role: "gridcell"
+	});
+}
+function CalendarDay(props) {
+	const { disabled, outside, rangeEnd, rangeMiddle, rangeStart, selected, today, ...rest } = props;
+	return buttonPart({
+		"aria-disabled": disabled ? "true" : void 0,
+		"aria-selected": selected ? "true" : void 0,
+		"data-disabled": disabled ? "" : void 0,
+		"data-outside": outside ? "true" : void 0,
+		"data-range-end": rangeEnd ? "true" : void 0,
+		"data-range-middle": rangeMiddle ? "true" : void 0,
+		"data-range-start": rangeStart ? "true" : void 0,
+		"data-selected": selected ? "true" : void 0,
+		"data-today": today ? "true" : void 0,
+		...rest
+	}, "calendar-day");
+}
+function Carousel(props) {
+	return catalogPart(props, { slot: "carousel" });
+}
+function CarouselContent(props) {
+	return catalogPart(props, { slot: "carousel-content" });
+}
+function CarouselItem(props) {
+	return catalogPart(props, { slot: "carousel-item" });
+}
+function CarouselPrevious(props) {
+	const { children = "Previous", ...rest } = props;
+	return buttonPart({
+		children,
+		...rest
+	}, "carousel-previous", "btn btn-icon");
+}
+function CarouselNext(props) {
+	const { children = "Next", ...rest } = props;
+	return buttonPart({
+		children,
+		...rest
+	}, "carousel-next", "btn btn-icon");
+}
+function Combobox(props) {
+	return catalogPart(props, { slot: "combobox" });
+}
+function ComboboxInput(props) {
+	const { ref, class: className, ...rest } = props;
+	return /* @__PURE__ */ jsx("input", { ...mergeProps(rest, {
+		ref,
+		class: classes("input", className),
+		"data-slot": "combobox-input",
+		role: "combobox"
+	}) });
+}
+function ComboboxList(props) {
+	return catalogPart(props, {
+		slot: "combobox-list",
+		role: "listbox"
+	});
+}
+function ComboboxOption(props) {
+	return catalogPart(props, {
+		slot: "combobox-option",
+		role: "option"
+	});
+}
+function Command(props) {
+	return catalogPart(props, { slot: "command" });
+}
+function CommandDialog(props) {
+	return catalogPart(props, { slot: "command-dialog" });
+}
+function CommandInput(props) {
+	const { ref, class: className, ...rest } = props;
+	return /* @__PURE__ */ jsx("input", { ...mergeProps(rest, {
+		ref,
+		class: classes("input", className),
+		"data-slot": "command-input"
+	}) });
+}
+function CommandHeader(props) {
+	return catalogPart(props, { slot: "command-header" });
+}
+function CommandList(props) {
+	return catalogPart(props, {
+		slot: "command-list",
+		role: "listbox"
+	});
+}
+function CommandEmpty(props) {
+	return catalogPart(props, { slot: "command-empty" });
+}
+function CommandGroup(props) {
+	return catalogPart(props, {
+		slot: "command-group",
+		role: "group"
+	});
+}
+function CommandGroupHeading(props) {
+	return catalogPart(props, {
+		slot: "command-group-heading",
+		element: "div"
+	});
+}
+function CommandItem(props) {
+	const { active, disabled, selected, ...rest } = props;
+	return catalogPart({
+		"aria-disabled": disabled ? "true" : void 0,
+		"aria-selected": selected || active ? "true" : void 0,
+		"data-disabled": disabled ? "" : void 0,
+		"data-selected": selected || active ? "true" : void 0,
+		...rest
+	}, {
+		slot: "command-item",
+		role: "option"
+	});
+}
+function CommandSeparator(props) {
+	return catalogPart(props, {
+		slot: "command-separator",
+		element: "div",
+		role: "separator"
+	});
+}
+function CommandShortcut(props) {
+	return catalogPart(props, {
+		slot: "command-shortcut",
+		element: "span"
+	});
+}
+function DataTable(props) {
+	return catalogPart(props, { slot: "data-table" });
+}
+function DatePicker(props) {
+	return catalogPart(props, { slot: "date-picker" });
+}
+function DatePickerInput(props) {
+	const { ref, class: className, type = "date", ...rest } = props;
+	return /* @__PURE__ */ jsx("input", {
+		type,
+		...mergeProps(rest, {
+			ref,
+			class: classes("input", className),
+			"data-slot": "date-picker-input"
+		})
+	});
+}
+function Direction(props) {
+	const { dir = "ltr", ...rest } = props;
+	return catalogPart({
+		dir,
+		...rest
+	}, { slot: "direction" });
+}
+function Empty(props) {
+	return catalogPart(props, { slot: "empty" });
+}
+function EmptyHeader(props) {
+	return catalogPart(props, { slot: "empty-header" });
+}
+function EmptyTitle(props) {
+	return catalogPart(props, {
+		slot: "empty-title",
+		element: "h3"
+	});
+}
+function EmptyDescription(props) {
+	return catalogPart(props, {
+		slot: "empty-description",
+		element: "p"
+	});
+}
+function EmptyContent(props) {
+	return catalogPart(props, { slot: "empty-content" });
+}
+function EmptyMedia(props) {
+	return catalogPart(props, { slot: "empty-media" });
+}
+function FieldGroup(props) {
+	return catalogPart(props, { slot: "field-group" });
+}
+function FieldSet(props) {
+	return catalogPart(props, {
+		slot: "field-set",
+		element: "fieldset"
+	});
+}
+function FieldLegend(props) {
+	return catalogPart(props, {
+		slot: "field-legend",
+		element: "legend"
+	});
+}
+function FieldLabel(props) {
+	return catalogPart(props, {
+		slot: "field-label",
+		element: "label",
+		className: "label"
+	});
+}
+function FieldDescription(props) {
+	return catalogPart(props, {
+		slot: "field-description",
+		element: "p",
+		className: "field-hint"
+	});
+}
+function FieldContent(props) {
+	return catalogPart(props, { slot: "field-content" });
+}
+function FieldTitle(props) {
+	return catalogPart(props, {
+		slot: "field-title",
+		element: "div"
+	});
+}
+function FieldSeparator(props) {
+	return catalogPart(props, {
+		slot: "field-separator",
+		role: "separator"
+	});
+}
+function InputOTP(props) {
+	return catalogPart(props, {
+		slot: "input-otp",
+		role: "group"
+	});
+}
+function InputOTPGroup(props) {
+	return catalogPart(props, {
+		slot: "input-otp-group",
+		role: "group"
+	});
+}
+function InputOTPSlot(props) {
+	return catalogPart(props, {
+		slot: "input-otp-slot",
+		element: "span"
+	});
+}
+function InputOTPSeparator(props) {
+	const { children = "-", ...rest } = props;
+	return catalogPart({
+		"aria-hidden": "true",
+		children,
+		...rest
+	}, {
+		slot: "input-otp-separator",
+		element: "span"
+	});
+}
+function Item(props) {
+	const { active, size, variant, ...rest } = props;
+	return catalogPart({
+		"data-active": active ? "true" : void 0,
+		"data-size": size && size !== "default" ? size : void 0,
+		"data-variant": variant && variant !== "default" ? variant : void 0,
+		...rest
+	}, { slot: "item" });
+}
+function ItemGroup(props) {
+	return catalogPart(props, { slot: "item-group" });
+}
+function ItemHeader(props) {
+	return catalogPart(props, { slot: "item-header" });
+}
+function ItemMedia(props) {
+	return catalogPart(props, { slot: "item-media" });
+}
+function ItemContent(props) {
+	return catalogPart(props, { slot: "item-content" });
+}
+function ItemTitle(props) {
+	return catalogPart(props, { slot: "item-title" });
+}
+function ItemDescription(props) {
+	return catalogPart(props, { slot: "item-description" });
+}
+function ItemActions(props) {
+	return catalogPart(props, { slot: "item-actions" });
+}
+function ItemFooter(props) {
+	return catalogPart(props, { slot: "item-footer" });
+}
+function Kbd(props) {
+	return catalogPart(props, {
+		slot: "kbd",
+		element: "kbd"
+	});
+}
+function NativeSelect(props) {
+	const { children, ref, class: className, ...rest } = props;
+	return /* @__PURE__ */ jsx("select", {
+		...mergeProps(rest, {
+			ref,
+			class: classes("input", className),
+			"data-slot": "native-select"
+		}),
+		children
+	});
+}
+function NavigationMenu(props) {
+	return catalogPart(props, {
+		slot: "navigation-menu",
+		element: "nav"
+	});
+}
+function NavigationMenuList(props) {
+	return catalogPart(props, {
+		slot: "navigation-menu-list",
+		element: "ul"
+	});
+}
+function NavigationMenuItem(props) {
+	return catalogPart(props, {
+		slot: "navigation-menu-item",
+		element: "li"
+	});
+}
+function NavigationMenuTrigger(props) {
+	return buttonPart(props, "navigation-menu-trigger", "nav-item");
+}
+function NavigationMenuContent(props) {
+	return catalogPart(props, { slot: "navigation-menu-content" });
+}
+function NavigationMenuLink(props) {
+	return catalogPart(props, {
+		slot: "navigation-menu-link",
+		element: "a"
+	});
+}
+function NavigationMenuViewport(props) {
+	return catalogPart(props, { slot: "navigation-menu-viewport" });
+}
+function NavigationMenuIndicator(props) {
+	return catalogPart(props, { slot: "navigation-menu-indicator" });
+}
+function Pagination(props) {
+	return catalogPart(props, {
+		slot: "pagination",
+		element: "nav",
+		role: "navigation"
+	});
+}
+function PaginationContent(props) {
+	return catalogPart(props, {
+		slot: "pagination-content",
+		element: "ul"
+	});
+}
+function PaginationItem(props) {
+	return catalogPart(props, {
+		slot: "pagination-item",
+		element: "li"
+	});
+}
+function PaginationLink(props) {
+	const { active, ...rest } = props;
+	return catalogPart({
+		"aria-current": active ? "page" : void 0,
+		"data-active": active ? "true" : void 0,
+		...rest
+	}, {
+		slot: "pagination-link",
+		element: "a"
+	});
+}
+function PaginationPrevious(props) {
+	const { children = "Previous", ...rest } = props;
+	return catalogPart({
+		children,
+		...rest
+	}, {
+		slot: "pagination-previous",
+		element: "a"
+	});
+}
+function PaginationNext(props) {
+	const { children = "Next", ...rest } = props;
+	return catalogPart({
+		children,
+		...rest
+	}, {
+		slot: "pagination-next",
+		element: "a"
+	});
+}
+function PaginationEllipsis(props) {
+	const { children = "...", ...rest } = props;
+	return catalogPart({
+		"aria-hidden": "true",
+		children,
+		...rest
+	}, {
+		slot: "pagination-ellipsis",
+		element: "span"
+	});
+}
+function ResizablePanelGroup(props) {
+	return catalogPart(props, { slot: "resizable-panel-group" });
+}
+function ResizablePanel(props) {
+	return catalogPart(props, { slot: "resizable-panel" });
+}
+function ResizableHandle(props) {
+	return catalogPart(props, {
+		slot: "resizable-handle",
+		role: "separator"
+	});
+}
+function TabsList(props) {
+	return catalogPart(props, {
+		slot: "tabs-list",
+		role: "tablist"
+	});
+}
+function TabsTrigger(props) {
+	return buttonPart(props, "tabs-trigger", "tab");
+}
+function TabsContent(props) {
+	return catalogPart(props, {
+		slot: "tabs-content",
+		role: "tabpanel"
+	});
+}
+function SheetContent(props) {
+	const { side = "right", ...rest } = props;
+	return /* @__PURE__ */ jsx(DialogContent, {
+		...rest,
+		"data-side": side,
+		"data-slot": "sheet-content"
+	});
+}
+function SheetHeader(props) {
+	return catalogPart(props, { slot: "sheet-header" });
+}
+function SheetFooter(props) {
+	return catalogPart(props, { slot: "sheet-footer" });
+}
+function SheetTitle(props) {
+	return catalogPart(props, {
+		slot: "sheet-title",
+		element: "h2"
+	});
+}
+function SheetDescription(props) {
+	return catalogPart(props, {
+		slot: "sheet-description",
+		element: "p"
+	});
+}
+function Toaster(props) {
+	return catalogPart(props, { slot: "sonner" });
+}
+const Sonner = Toaster;
+function Typography(props) {
+	return catalogPart(props, { slot: "typography" });
+}
+function TypographyH1(props) {
+	return catalogPart(props, {
+		slot: "typography-h1",
+		element: "h1"
+	});
+}
+function TypographyH2(props) {
+	return catalogPart(props, {
+		slot: "typography-h2",
+		element: "h2"
+	});
+}
+function TypographyH3(props) {
+	return catalogPart(props, {
+		slot: "typography-h3",
+		element: "h3"
+	});
+}
+function TypographyH4(props) {
+	return catalogPart(props, {
+		slot: "typography-h4",
+		element: "h4"
+	});
+}
+function TypographyP(props) {
+	return catalogPart(props, {
+		slot: "typography-p",
+		element: "p"
+	});
+}
+function TypographyBlockquote(props) {
+	return catalogPart(props, {
+		slot: "typography-blockquote",
+		element: "blockquote"
+	});
+}
+function TypographyList(props) {
+	return catalogPart(props, {
+		slot: "typography-list",
+		element: "ul"
+	});
+}
+function TypographyLead(props) {
+	return catalogPart(props, {
+		slot: "typography-lead",
+		element: "p"
+	});
+}
+function TypographyMuted(props) {
+	return catalogPart(props, {
+		slot: "typography-muted",
+		element: "p"
+	});
+}
+//#endregion
+export { AlertDescription, AlertTitle, Box, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Calendar, CalendarBody, CalendarCaption, CalendarCell, CalendarDay, CalendarGrid, CalendarHead, CalendarHeader, CalendarNav, CalendarNextButton, CalendarPreviousButton, CalendarRow, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Combobox, ComboboxInput, ComboboxList, ComboboxOption, Command, CommandDialog, CommandEmpty, CommandGroup, CommandGroupHeading, CommandHeader, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, DataTable, DatePicker, DatePickerInput, Direction, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, FieldContent, FieldDescription, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Inline, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemTitle, Kbd, NativeSelect, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, ResizableHandle, ResizablePanel, ResizablePanelGroup, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, Shell, ShellMain, ShellNav, Sonner, Stack, TabsContent, TabsList, TabsTrigger, Toaster, Typography, TypographyBlockquote, TypographyH1, TypographyH2, TypographyH3, TypographyH4, TypographyLead, TypographyList, TypographyMuted, TypographyP };
+
+//# sourceMappingURL=catalog.js.map