@almanaclabs/blaze-ui 0.3.1 → 0.4.0

package/dist/components/input-group/input-group.js

@@ -0,0 +1,77 @@
+import { cn as e } from "../../lib/utils.js";
+import { Button as t } from "../button/button.js";
+import { Input as n } from "../input/input.js";
+import { Textarea as r } from "../textarea/textarea.js";
+import { cva as i } from "class-variance-authority";
+import { jsx as a } from "react/jsx-runtime";
+import "react";
+//#region src/components/input-group/input-group.tsx
+function o({ className: t, ...n }) {
+	return /* @__PURE__ */ a("div", {
+		"data-slot": "input-group",
+		role: "group",
+		className: e("group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5", t),
+		...n
+	});
+}
+var s = i("flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4", {
+	variants: { align: {
+		"inline-start": "order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]",
+		"inline-end": "order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]",
+		"block-start": "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
+		"block-end": "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2"
+	} },
+	defaultVariants: { align: "inline-start" }
+});
+function c({ className: t, align: n = "inline-start", ...r }) {
+	return /* @__PURE__ */ a("div", {
+		role: "group",
+		"data-slot": "input-group-addon",
+		"data-align": n,
+		className: e(s({ align: n }), t),
+		onClick: (e) => {
+			e.target.closest("button") || e.currentTarget.parentElement?.querySelector("input")?.focus();
+		},
+		...r
+	});
+}
+var l = i("flex items-center gap-2 text-sm shadow-none", {
+	variants: { size: {
+		xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+		sm: "",
+		"icon-xs": "size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
+		"icon-sm": "size-8 p-0 has-[>svg]:p-0"
+	} },
+	defaultVariants: { size: "xs" }
+});
+function u({ className: n, type: r = "button", variant: i = "ghost", size: o = "xs", ...s }) {
+	return /* @__PURE__ */ a(t, {
+		type: r,
+		"data-size": o,
+		variant: i,
+		className: e(l({ size: o }), n),
+		...s
+	});
+}
+function d({ className: t, ...n }) {
+	return /* @__PURE__ */ a("span", {
+		className: e("flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", t),
+		...n
+	});
+}
+function f({ className: t, ...r }) {
+	return /* @__PURE__ */ a(n, {
+		"data-slot": "input-group-control",
+		className: e("flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent", t),
+		...r
+	});
+}
+function p({ className: t, ...n }) {
+	return /* @__PURE__ */ a(r, {
+		"data-slot": "input-group-control",
+		className: e("flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent", t),
+		...n
+	});
+}
+//#endregion
+export { o as InputGroup, c as InputGroupAddon, u as InputGroupButton, f as InputGroupInput, d as InputGroupText, p as InputGroupTextarea };

package/dist/components/item/item.js

@@ -0,0 +1,121 @@
+import { cn as e } from "../../lib/utils.js";
+import { Separator as t } from "../separator/separator.js";
+import { cva as n } from "class-variance-authority";
+import { jsx as r } from "react/jsx-runtime";
+import "react";
+import { mergeProps as i } from "@base-ui/react/merge-props";
+import { useRender as a } from "@base-ui/react/use-render";
+//#region src/components/item/item.tsx
+function o({ className: t, ...n }) {
+	return /* @__PURE__ */ r("div", {
+		role: "list",
+		"data-slot": "item-group",
+		className: e("group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2", t),
+		...n
+	});
+}
+function s({ className: n, ...i }) {
+	return /* @__PURE__ */ r(t, {
+		"data-slot": "item-separator",
+		orientation: "horizontal",
+		className: e("my-2", n),
+		...i
+	});
+}
+var c = n("group/item flex w-full flex-wrap items-center rounded-lg border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted", {
+	variants: {
+		variant: {
+			default: "border-transparent",
+			outline: "border-border",
+			muted: "border-transparent bg-muted/50"
+		},
+		size: {
+			default: "gap-2.5 px-3 py-2.5",
+			sm: "gap-2.5 px-3 py-2.5",
+			xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+function l({ className: t, variant: n = "default", size: r = "default", render: o, ...s }) {
+	return a({
+		defaultTagName: "div",
+		props: i({ className: e(c({
+			variant: n,
+			size: r,
+			className: t
+		})) }, s),
+		render: o,
+		state: {
+			slot: "item",
+			variant: n,
+			size: r
+		}
+	});
+}
+var u = n("flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none", {
+	variants: { variant: {
+		default: "bg-transparent",
+		icon: "[&_svg:not([class*='size-'])]:size-4",
+		image: "size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function d({ className: t, variant: n = "default", ...i }) {
+	return /* @__PURE__ */ r("div", {
+		"data-slot": "item-media",
+		"data-variant": n,
+		className: e(u({
+			variant: n,
+			className: t
+		})),
+		...i
+	});
+}
+function f({ className: t, ...n }) {
+	return /* @__PURE__ */ r("div", {
+		"data-slot": "item-content",
+		className: e("flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none", t),
+		...n
+	});
+}
+function p({ className: t, ...n }) {
+	return /* @__PURE__ */ r("div", {
+		"data-slot": "item-title",
+		className: e("line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4", t),
+		...n
+	});
+}
+function m({ className: t, ...n }) {
+	return /* @__PURE__ */ r("p", {
+		"data-slot": "item-description",
+		className: e("line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", t),
+		...n
+	});
+}
+function h({ className: t, ...n }) {
+	return /* @__PURE__ */ r("div", {
+		"data-slot": "item-actions",
+		className: e("flex items-center gap-2", t),
+		...n
+	});
+}
+function g({ className: t, ...n }) {
+	return /* @__PURE__ */ r("div", {
+		"data-slot": "item-header",
+		className: e("flex basis-full items-center justify-between gap-2", t),
+		...n
+	});
+}
+function _({ className: t, ...n }) {
+	return /* @__PURE__ */ r("div", {
+		"data-slot": "item-footer",
+		className: e("flex basis-full items-center justify-between gap-2", t),
+		...n
+	});
+}
+//#endregion
+export { l as Item, h as ItemActions, f as ItemContent, m as ItemDescription, _ as ItemFooter, o as ItemGroup, g as ItemHeader, d as ItemMedia, s as ItemSeparator, p as ItemTitle };

package/dist/components/label/label.js

@@ -0,0 +1,13 @@
+import { cn as e } from "../../lib/utils.js";
+import { jsx as t } from "react/jsx-runtime";
+import "react";
+//#region src/components/label/label.tsx
+function n({ className: n, ...r }) {
+	return /* @__PURE__ */ t("label", {
+		"data-slot": "label",
+		className: e("flex items-center gap-2 text-sm leading-none font-medium select-none group-data-disabled:pointer-events-none group-data-disabled:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", n),
+		...r
+	});
+}
+//#endregion
+export { n as Label };

package/dist/components/marker/marker.js

@@ -0,0 +1,43 @@
+import { cn as e } from "../../lib/utils.js";
+import { cva as t } from "class-variance-authority";
+import { jsx as n } from "react/jsx-runtime";
+import "react";
+import { mergeProps as r } from "@base-ui/react/merge-props";
+import { useRender as i } from "@base-ui/react/use-render";
+//#region src/components/marker/marker.tsx
+var a = t("group/marker relative flex min-h-4 w-full items-center gap-2 text-left text-sm text-muted-foreground [&_svg:not([class*='size-'])]:size-4 [a]:underline [a]:underline-offset-3 [a]:hover:text-foreground", { variants: { variant: {
+	default: "",
+	separator: "before:mr-1 before:h-px before:min-w-0 before:flex-1 before:bg-border after:ml-1 after:h-px after:min-w-0 after:flex-1 after:bg-border",
+	border: "border-b border-border pb-2"
+} } });
+function o({ className: t, variant: n = "default", render: o, ...s }) {
+	return i({
+		defaultTagName: "div",
+		props: r({ className: e(a({
+			variant: n,
+			className: t
+		})) }, s),
+		render: o,
+		state: {
+			slot: "marker",
+			variant: n
+		}
+	});
+}
+function s({ className: t, ...r }) {
+	return /* @__PURE__ */ n("span", {
+		"data-slot": "marker-icon",
+		"aria-hidden": "true",
+		className: e("size-4 shrink-0 [&_svg:not([class*='size-'])]:size-4", t),
+		...r
+	});
+}
+function c({ className: t, ...r }) {
+	return /* @__PURE__ */ n("span", {
+		"data-slot": "marker-content",
+		className: e("min-w-0 wrap-break-word group-data-[variant=separator]/marker:flex-none group-data-[variant=separator]/marker:text-center *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground", t),
+		...r
+	});
+}
+//#endregion
+export { o as Marker, c as MarkerContent, s as MarkerIcon, a as markerVariants };

package/dist/components/message/message.js

@@ -0,0 +1,49 @@
+import { cn as e } from "../../lib/utils.js";
+import { jsx as t } from "react/jsx-runtime";
+import "react";
+//#region src/components/message/message.tsx
+function n({ className: n, ...r }) {
+	return /* @__PURE__ */ t("div", {
+		"data-slot": "message-group",
+		className: e("flex min-w-0 flex-col gap-2", n),
+		...r
+	});
+}
+function r({ className: n, align: r = "start", ...i }) {
+	return /* @__PURE__ */ t("div", {
+		"data-slot": "message",
+		"data-align": r,
+		className: e("group/message relative flex w-full min-w-0 gap-2 text-sm data-[align=end]:flex-row-reverse", n),
+		...i
+	});
+}
+function i({ className: n, ...r }) {
+	return /* @__PURE__ */ t("div", {
+		"data-slot": "message-avatar",
+		className: e("flex w-fit min-w-8 shrink-0 items-center justify-center self-end overflow-hidden rounded-full bg-muted group-has-data-[slot=message-footer]/message:-translate-y-8", n),
+		...r
+	});
+}
+function a({ className: n, ...r }) {
+	return /* @__PURE__ */ t("div", {
+		"data-slot": "message-content",
+		className: e("flex w-full min-w-0 flex-col gap-2.5 wrap-break-word group-data-[align=end]/message:*:data-slot:self-end", n),
+		...r
+	});
+}
+function o({ className: n, ...r }) {
+	return /* @__PURE__ */ t("div", {
+		"data-slot": "message-header",
+		className: e("flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0", n),
+		...r
+	});
+}
+function s({ className: n, ...r }) {
+	return /* @__PURE__ */ t("div", {
+		"data-slot": "message-footer",
+		className: e("flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0 group-data-[align=end]/message:justify-end", n),
+		...r
+	});
+}
+//#endregion
+export { r as Message, i as MessageAvatar, a as MessageContent, s as MessageFooter, n as MessageGroup, o as MessageHeader };

package/dist/components/native-select/native-select.js

@@ -0,0 +1,39 @@
+import { cn as e } from "../../lib/utils.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import "react";
+import { IconChevronDown as r } from "@tabler/icons-react";
+//#region src/components/native-select/native-select.tsx
+function i({ className: i, size: a = "default", "aria-label": o = "Select an option", ...s }) {
+	return /* @__PURE__ */ n("div", {
+		className: e("group/native-select relative w-fit has-[select:disabled]:opacity-50", i),
+		"data-slot": "native-select-wrapper",
+		"data-size": a,
+		children: [/* @__PURE__ */ t("select", {
+			"aria-label": o,
+			"data-slot": "native-select",
+			"data-size": a,
+			className: "h-8 w-full min-w-0 appearance-none rounded-lg border border-input bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+			...s
+		}), /* @__PURE__ */ t(r, {
+			className: "pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none",
+			"aria-hidden": "true",
+			"data-slot": "native-select-icon"
+		})]
+	});
+}
+function a({ className: n, ...r }) {
+	return /* @__PURE__ */ t("option", {
+		"data-slot": "native-select-option",
+		className: e("bg-[Canvas] text-[CanvasText]", n),
+		...r
+	});
+}
+function o({ className: n, ...r }) {
+	return /* @__PURE__ */ t("optgroup", {
+		"data-slot": "native-select-optgroup",
+		className: e("bg-[Canvas] text-[CanvasText]", n),
+		...r
+	});
+}
+//#endregion
+export { i as NativeSelect, o as NativeSelectOptGroup, a as NativeSelectOption };

package/dist/components/pagination/pagination.js

@@ -0,0 +1,80 @@
+import { cn as e } from "../../lib/utils.js";
+import { Button as t } from "../button/button.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import "react";
+import { IconChevronLeft as i, IconChevronRight as a, IconDots as o } from "@tabler/icons-react";
+//#region src/components/pagination/pagination.tsx
+function s({ className: t, ...r }) {
+	return /* @__PURE__ */ n("nav", {
+		role: "navigation",
+		"aria-label": "pagination",
+		"data-slot": "pagination",
+		className: e("mx-auto flex w-full justify-center", t),
+		...r
+	});
+}
+function c({ className: t, ...r }) {
+	return /* @__PURE__ */ n("ul", {
+		"data-slot": "pagination-content",
+		className: e("flex items-center gap-0.5", t),
+		...r
+	});
+}
+function l({ ...e }) {
+	return /* @__PURE__ */ n("li", {
+		"data-slot": "pagination-item",
+		...e
+	});
+}
+function u({ className: r, isActive: i, size: a = "icon", ...o }) {
+	return /* @__PURE__ */ n(t, {
+		variant: i ? "outline" : "ghost",
+		size: a,
+		className: e(r),
+		nativeButton: !1,
+		render: /* @__PURE__ */ n("a", {
+			"aria-current": i ? "page" : void 0,
+			"data-slot": "pagination-link",
+			"data-active": i,
+			...o
+		})
+	});
+}
+function d({ className: t, text: a = "Previous", ...o }) {
+	return /* @__PURE__ */ r(u, {
+		"aria-label": "Go to previous page",
+		size: "default",
+		className: e("pl-1.5!", t),
+		...o,
+		children: [/* @__PURE__ */ n(i, { "data-icon": "inline-start" }), /* @__PURE__ */ n("span", {
+			className: "hidden sm:block",
+			children: a
+		})]
+	});
+}
+function f({ className: t, text: i = "Next", ...o }) {
+	return /* @__PURE__ */ r(u, {
+		"aria-label": "Go to next page",
+		size: "default",
+		className: e("pr-1.5!", t),
+		...o,
+		children: [/* @__PURE__ */ n("span", {
+			className: "hidden sm:block",
+			children: i
+		}), /* @__PURE__ */ n(a, { "data-icon": "inline-end" })]
+	});
+}
+function p({ className: t, ...i }) {
+	return /* @__PURE__ */ r("span", {
+		"aria-hidden": !0,
+		"data-slot": "pagination-ellipsis",
+		className: e("flex size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4", t),
+		...i,
+		children: [/* @__PURE__ */ n(o, {}), /* @__PURE__ */ n("span", {
+			className: "sr-only",
+			children: "More pages"
+		})]
+	});
+}
+//#endregion
+export { s as Pagination, c as PaginationContent, p as PaginationEllipsis, l as PaginationItem, u as PaginationLink, f as PaginationNext, d as PaginationPrevious };

package/dist/components/popover/popover.js

@@ -0,0 +1,54 @@
+import { cn as e } from "../../lib/utils.js";
+import { jsx as t } from "react/jsx-runtime";
+import "react";
+import { Popover as n } from "@base-ui/react/popover";
+//#region src/components/popover/popover.tsx
+function r({ ...e }) {
+	return /* @__PURE__ */ t(n.Root, {
+		"data-slot": "popover",
+		...e
+	});
+}
+function i({ ...e }) {
+	return /* @__PURE__ */ t(n.Trigger, {
+		"data-slot": "popover-trigger",
+		...e
+	});
+}
+function a({ className: r, align: i = "center", alignOffset: a = 0, side: o = "bottom", sideOffset: s = 4, ...c }) {
+	return /* @__PURE__ */ t(n.Portal, { children: /* @__PURE__ */ t(n.Positioner, {
+		align: i,
+		alignOffset: a,
+		side: o,
+		sideOffset: s,
+		className: "isolate z-50",
+		children: /* @__PURE__ */ t(n.Popup, {
+			"data-slot": "popover-content",
+			className: e("z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", r),
+			...c
+		})
+	}) });
+}
+function o({ className: n, ...r }) {
+	return /* @__PURE__ */ t("div", {
+		"data-slot": "popover-header",
+		className: e("flex flex-col gap-0.5 text-sm", n),
+		...r
+	});
+}
+function s({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Title, {
+		"data-slot": "popover-title",
+		className: e("font-medium", r),
+		...i
+	});
+}
+function c({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Description, {
+		"data-slot": "popover-description",
+		className: e("text-muted-foreground", r),
+		...i
+	});
+}
+//#endregion
+export { r as Popover, a as PopoverContent, c as PopoverDescription, o as PopoverHeader, s as PopoverTitle, i as PopoverTrigger };

package/dist/components/progress/progress.js

@@ -0,0 +1,45 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { Progress as r } from "@base-ui/react/progress";
+//#region src/components/progress/progress.tsx
+function i({ className: i, children: s, value: c, "aria-label": l = "Progress", ...u }) {
+	return /* @__PURE__ */ n(r.Root, {
+		value: c,
+		"aria-label": l,
+		"data-slot": "progress",
+		className: e("flex flex-wrap gap-3", i),
+		...u,
+		children: [s, /* @__PURE__ */ t(a, { children: /* @__PURE__ */ t(o, {}) })]
+	});
+}
+function a({ className: n, ...i }) {
+	return /* @__PURE__ */ t(r.Track, {
+		className: e("relative flex h-1 w-full items-center overflow-x-hidden rounded-full bg-muted", n),
+		"data-slot": "progress-track",
+		...i
+	});
+}
+function o({ className: n, ...i }) {
+	return /* @__PURE__ */ t(r.Indicator, {
+		"data-slot": "progress-indicator",
+		className: e("h-full bg-primary transition-all", n),
+		...i
+	});
+}
+function s({ className: n, ...i }) {
+	return /* @__PURE__ */ t(r.Label, {
+		className: e("text-sm font-medium", n),
+		"data-slot": "progress-label",
+		...i
+	});
+}
+function c({ className: n, ...i }) {
+	return /* @__PURE__ */ t(r.Value, {
+		className: e("ml-auto text-sm text-muted-foreground tabular-nums", n),
+		"data-slot": "progress-value",
+		...i
+	});
+}
+//#endregion
+export { i as Progress, o as ProgressIndicator, s as ProgressLabel, a as ProgressTrack, c as ProgressValue };