xiod-ui 1.0.0

package/dist/components/pagination.d.ts

@@ -0,0 +1,25 @@
+import { Button } from "./button.js";
+import * as React$1 from "react";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/pagination.d.ts
+declare function Pagination({ className, ...props }: React$1.ComponentProps<"nav">): React$1.JSX.Element;
+declare function PaginationContent({ className, ...props }: React$1.ComponentProps<"ul">): React$1.JSX.Element;
+declare function PaginationItem({ ...props }: React$1.ComponentProps<"li">): React$1.JSX.Element;
+type PaginationLinkProps = {
+  isActive?: boolean;
+  size?: React$1.ComponentProps<typeof Button>["size"];
+} & useRender.ComponentProps<"a">;
+declare function PaginationLink({ className, isActive, size, render, ...props }: PaginationLinkProps): React$1.ReactElement;
+declare function PaginationFirst({ className, ...props }: React$1.ComponentProps<typeof PaginationLink>): React$1.JSX.Element;
+declare function PaginationPrevious({ className, ...props }: React$1.ComponentProps<typeof PaginationLink>): React$1.JSX.Element;
+declare function PaginationNext({ className, ...props }: React$1.ComponentProps<typeof PaginationLink>): React$1.JSX.Element;
+declare function PaginationLast({ className, ...props }: React$1.ComponentProps<typeof PaginationLink>): React$1.JSX.Element;
+declare function PaginationEllipsis({ className, ...props }: React$1.ComponentProps<"span">): React$1.JSX.Element;
+export interface PaginationInputProps extends Omit<React$1.ComponentProps<"input">, "value" | "onChange"> {
+  value?: number;
+  onChange?: (page: number) => void;
+  totalPages?: number;
+}
+declare function PaginationInput({ className, value, onChange, totalPages, ...props }: PaginationInputProps): React$1.JSX.Element;
+//#endregion
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationFirst, PaginationInput, PaginationItem, PaginationLast, PaginationLink, PaginationNext, PaginationPrevious };

package/dist/components/pagination.js

@@ -0,0 +1,147 @@
+"use client";
+import { buttonVariants } from "./button.js";
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React$1 from "react";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { ChevronRight } from "xiod-icons/icons/ChevronRight";
+import { MoreHorizontal } from "xiod-icons/icons/MoreHorizontal";
+import { ChevronLeft } from "xiod-icons/icons/ChevronLeft";
+import { ChevronFirst } from "xiod-icons/icons/ChevronFirst";
+import { ChevronLast } from "xiod-icons/icons/ChevronLast";
+//#region src/components/pagination.tsx
+function Pagination({ className, ...props }) {
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": "pagination",
+		className: cn("mx-auto flex w-full justify-center [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
+		"data-slot": "pagination",
+		...props
+	});
+}
+function PaginationContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("ul", {
+		className: cn("flex flex-row items-center gap-1", className),
+		"data-slot": "pagination-content",
+		...props
+	});
+}
+function PaginationItem({ ...props }) {
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "pagination-item",
+		...props
+	});
+}
+function PaginationLink({ className, isActive, size = "icon", render, ...props }) {
+	const defaultProps = {
+		"aria-current": isActive ? "page" : void 0,
+		className: render ? className : cn(buttonVariants({
+			size,
+			variant: isActive ? "outline" : "ghost"
+		}), className),
+		"data-active": isActive,
+		"data-slot": "pagination-link"
+	};
+	return useRender({
+		defaultTagName: "a",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+function PaginationFirst({ className, ...props }) {
+	return /* @__PURE__ */ jsxs(PaginationLink, {
+		"aria-label": "Go to first page",
+		className: cn("max-sm:aspect-square max-sm:p-0", className),
+		size: "default",
+		...props,
+		children: [/* @__PURE__ */ jsx(ChevronFirst, { className: "sm:-ms-1" }), /* @__PURE__ */ jsx("span", {
+			className: "max-sm:hidden",
+			children: "First"
+		})]
+	});
+}
+function PaginationPrevious({ className, ...props }) {
+	return /* @__PURE__ */ jsxs(PaginationLink, {
+		"aria-label": "Go to previous page",
+		className: cn("max-sm:aspect-square max-sm:p-0", className),
+		size: "default",
+		...props,
+		children: [/* @__PURE__ */ jsx(ChevronLeft, { className: "sm:-ms-1" }), /* @__PURE__ */ jsx("span", {
+			className: "max-sm:hidden",
+			children: "Previous"
+		})]
+	});
+}
+function PaginationNext({ className, ...props }) {
+	return /* @__PURE__ */ jsxs(PaginationLink, {
+		"aria-label": "Go to next page",
+		className: cn("max-sm:aspect-square max-sm:p-0", className),
+		size: "default",
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "max-sm:hidden",
+			children: "Next"
+		}), /* @__PURE__ */ jsx(ChevronRight, { className: "sm:-me-1" })]
+	});
+}
+function PaginationLast({ className, ...props }) {
+	return /* @__PURE__ */ jsxs(PaginationLink, {
+		"aria-label": "Go to last page",
+		className: cn("max-sm:aspect-square max-sm:p-0", className),
+		size: "default",
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "max-sm:hidden",
+			children: "Last"
+		}), /* @__PURE__ */ jsx(ChevronLast, { className: "sm:-me-1" })]
+	});
+}
+function PaginationEllipsis({ className, ...props }) {
+	return /* @__PURE__ */ jsxs("span", {
+		"aria-hidden": true,
+		className: cn("flex min-w-7 justify-center", className),
+		"data-slot": "pagination-ellipsis",
+		...props,
+		children: [/* @__PURE__ */ jsx(MoreHorizontal, { className: "size-5 sm:size-4" }), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "More pages"
+		})]
+	});
+}
+function PaginationInput({ className, value, onChange, totalPages, ...props }) {
+	const [editingValue, setEditingValue] = React$1.useState(value ? value.toString() : "");
+	React$1.useEffect(() => {
+		setEditingValue(value ? value.toString() : "");
+	}, [value]);
+	const handleCommit = (val) => {
+		let num = Number.parseInt(val, 10);
+		if (Number.isNaN(num) || num < 1) num = 1;
+		if (totalPages && num > totalPages) num = totalPages;
+		setEditingValue(num.toString());
+		if (onChange) onChange(num);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("relative inline-flex w-12 rounded-lg border border-input bg-background not-dark:bg-clip-padding text-sm text-foreground shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 has-aria-invalid:border-destructive/36 has-focus-visible:border-ring has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none has-focus-visible:ring-[3px] dark:bg-input/32 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]", className),
+		"data-slot": "pagination-input-wrapper",
+		children: /* @__PURE__ */ jsx("input", {
+			"aria-label": "Go to page",
+			type: "text",
+			inputMode: "numeric",
+			pattern: "[0-9]*",
+			className: "h-9 w-full rounded-[inherit] bg-transparent px-2 text-center text-sm outline-none sm:h-8",
+			value: editingValue,
+			onChange: (e) => setEditingValue(e.target.value),
+			onBlur: (e) => handleCommit(e.target.value),
+			onKeyDown: (e) => {
+				if (e.key === "Enter") {
+					e.preventDefault();
+					handleCommit(e.currentTarget.value);
+				}
+			},
+			"data-slot": "pagination-input",
+			...props
+		})
+	});
+}
+//#endregion
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationFirst, PaginationInput, PaginationItem, PaginationLast, PaginationLink, PaginationNext, PaginationPrevious };

package/dist/components/popover.d.ts

@@ -0,0 +1,22 @@
+import * as React$1 from "react";
+import { Popover as Popover$1 } from "@base-ui/react/popover";
+//#region src/components/popover.d.ts
+declare const PopoverCreateHandle: typeof Popover$1.createHandle;
+declare const Popover: typeof Popover$1.Root;
+declare function PopoverTrigger({ className, children, ...props }: Popover$1.Trigger.Props): React$1.JSX.Element;
+declare function PopoverPopup({ children, className, side, align, sideOffset, alignOffset, tooltipStyle, anchor, hideArrow, collisionAvoidance, ...props }: Popover$1.Popup.Props & {
+  side?: Popover$1.Positioner.Props["side"];
+  align?: Popover$1.Positioner.Props["align"];
+  sideOffset?: Popover$1.Positioner.Props["sideOffset"];
+  alignOffset?: Popover$1.Positioner.Props["alignOffset"];
+  tooltipStyle?: boolean;
+  anchor?: Popover$1.Positioner.Props["anchor"];
+  hideArrow?: boolean;
+  collisionAvoidance?: Popover$1.Positioner.Props["collisionAvoidance"];
+}): React$1.JSX.Element;
+declare function PopoverClose({ ...props }: Popover$1.Close.Props): React$1.JSX.Element;
+declare function PopoverTitle({ className, ...props }: Popover$1.Title.Props): React$1.JSX.Element;
+declare function PopoverDescription({ className, ...props }: Popover$1.Description.Props): React$1.JSX.Element;
+declare const PopoverArrow: React$1.ForwardRefExoticComponent<Omit<import("@base-ui/react").PopoverArrowProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Popover, PopoverArrow, PopoverClose, PopoverPopup as PopoverContent, PopoverPopup, PopoverCreateHandle, PopoverDescription, PopoverTitle, PopoverTrigger };

package/dist/components/popover.js

@@ -0,0 +1,79 @@
+"use client";
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Popover as Popover$1 } from "@base-ui/react/popover";
+//#region src/components/popover.tsx
+const PopoverCreateHandle = Popover$1.createHandle;
+const Popover = Popover$1.Root;
+function PopoverTrigger({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Popover$1.Trigger, {
+		className: cn(className),
+		"data-slot": "popover-trigger",
+		...props,
+		children
+	});
+}
+function PopoverPopup({ children, className, side = "bottom", align = "center", sideOffset = 8, alignOffset = 0, tooltipStyle = false, anchor, hideArrow = false, collisionAvoidance, ...props }) {
+	return /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(Popover$1.Positioner, {
+		align,
+		alignOffset,
+		anchor,
+		className: "z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom,transform] data-instant:transition-none",
+		"data-slot": "popover-positioner",
+		side,
+		sideOffset,
+		collisionAvoidance,
+		children: /* @__PURE__ */ jsxs(Popover$1.Popup, {
+			className: cn("relative flex h-(--popup-height,auto) w-(--popup-width,auto) origin-(--transform-origin) rounded-lg border bg-popover not-dark:bg-clip-padding text-popover-foreground shadow-lg/5 outline-none transition-[width,height,scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] has-data-[slot=calendar]:rounded-xl has-data-[slot=calendar]:before:rounded-[calc(var(--radius-xl)-1px)] data-starting-style:scale-98 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", tooltipStyle && "w-fit text-balance rounded-md text-xs shadow-md/5 before:rounded-[calc(var(--radius-md)-1px)]", className),
+			"data-slot": "popover-popup",
+			...props,
+			children: [!hideArrow && /* @__PURE__ */ jsx(Popover$1.Arrow, {
+				className: "z-10 flex data-[side=bottom]:-top-[9px] data-[side=bottom]:rotate-0 data-[side=left]:right-[-14px] data-[side=left]:rotate-90 data-[side=right]:left-[-14px] data-[side=right]:-rotate-90 data-[side=top]:-bottom-[9px] data-[side=top]:rotate-180",
+				children: /* @__PURE__ */ jsx(ArrowSvg, {})
+			}), /* @__PURE__ */ jsx(Popover$1.Viewport, {
+				className: cn("relative size-full max-h-(--available-height) overflow-clip px-(--viewport-inline-padding) py-4 [--viewport-inline-padding:--spacing(4)] has-data-[slot=calendar]:p-2 data-instant:transition-none **:data-current:data-ending-style:opacity-0 **:data-current:data-starting-style:opacity-0 **:data-previous:data-ending-style:opacity-0 **:data-previous:data-starting-style:opacity-0 **:data-current:w-[calc(var(--popup-width)-2*var(--viewport-inline-padding)-2px)] **:data-previous:w-[calc(var(--popup-width)-2*var(--viewport-inline-padding)-2px)] **:data-current:opacity-100 **:data-previous:opacity-100 **:data-current:transition-opacity **:data-previous:transition-opacity", tooltipStyle ? "py-1 [--viewport-inline-padding:--spacing(2)]" : "not-data-transitioning:overflow-y-auto"),
+				"data-slot": "popover-viewport",
+				children
+			})]
+		})
+	}) });
+}
+function PopoverClose({ ...props }) {
+	return /* @__PURE__ */ jsx(Popover$1.Close, {
+		"data-slot": "popover-close",
+		...props
+	});
+}
+function PopoverTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Popover$1.Title, {
+		className: cn("font-semibold text-lg leading-none", className),
+		"data-slot": "popover-title",
+		...props
+	});
+}
+function PopoverDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Popover$1.Description, {
+		className: cn("text-muted-foreground text-sm", className),
+		"data-slot": "popover-description",
+		...props
+	});
+}
+function ArrowSvg(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		width: "20",
+		height: "10",
+		viewBox: "0 0 20 10",
+		fill: "none",
+		...props,
+		children: [/* @__PURE__ */ jsx("path", {
+			d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z",
+			className: "fill-popover"
+		}), /* @__PURE__ */ jsx("path", {
+			d: "M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z",
+			className: "fill-border"
+		})]
+	});
+}
+const PopoverArrow = Popover$1.Arrow;
+//#endregion
+export { Popover, PopoverArrow, PopoverClose, PopoverPopup as PopoverContent, PopoverPopup, PopoverCreateHandle, PopoverDescription, PopoverTitle, PopoverTrigger };

package/dist/components/preview-card.d.ts

@@ -0,0 +1,16 @@
+import * as React$1 from "react";
+import { PreviewCard as PreviewCard$1 } from "@base-ui/react/preview-card";
+//#region src/components/preview-card.d.ts
+declare const PreviewCard: <Payload>(props: PreviewCard$1.Root.Props<Payload>) => React$1.JSX.Element;
+declare function PreviewCardTrigger({ className, ...props }: PreviewCard$1.Trigger.Props): React$1.JSX.Element;
+declare function PreviewCardArrow({ className, children, ...props }: PreviewCard$1.Arrow.Props): React$1.JSX.Element;
+declare function PreviewCardPopup({ className, children, align, alignOffset, hideArrow, side, sideOffset, anchor, ...props }: PreviewCard$1.Popup.Props & {
+  align?: PreviewCard$1.Positioner.Props["align"];
+  alignOffset?: PreviewCard$1.Positioner.Props["alignOffset"];
+  side?: PreviewCard$1.Positioner.Props["side"];
+  sideOffset?: PreviewCard$1.Positioner.Props["sideOffset"];
+  anchor?: PreviewCard$1.Positioner.Props["anchor"];
+  hideArrow?: boolean;
+}): React$1.JSX.Element;
+//#endregion
+export { PreviewCard as HoverCard, PreviewCard, PreviewCardArrow as HoverCardArrow, PreviewCardArrow, PreviewCardPopup as HoverCardContent, PreviewCardPopup, PreviewCardTrigger as HoverCardTrigger, PreviewCardTrigger };

package/dist/components/preview-card.js

@@ -0,0 +1,60 @@
+"use client";
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { PreviewCard as PreviewCard$1 } from "@base-ui/react/preview-card";
+//#region src/components/preview-card.tsx
+const PreviewCard = PreviewCard$1.Root;
+function PreviewCardTrigger({ className, ...props }) {
+	return /* @__PURE__ */ jsx(PreviewCard$1.Trigger, {
+		className: cn(className),
+		"data-slot": "preview-card-trigger",
+		...props
+	});
+}
+function PreviewCardArrow({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(PreviewCard$1.Arrow, {
+		className: cn("z-10 flex data-[side=bottom]:-top-[9px] data-[side=bottom]:rotate-0 data-[side=left]:right-[-14px] data-[side=left]:rotate-90 data-[side=right]:left-[-14px] data-[side=right]:-rotate-90 data-[side=top]:-bottom-[9px] data-[side=top]:rotate-180", className),
+		"data-slot": "preview-card-arrow",
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(ArrowSvg, {})
+	});
+}
+function PreviewCardPopup({ className, children, align = "center", alignOffset = 0, hideArrow = false, side = "bottom", sideOffset = 8, anchor, ...props }) {
+	return /* @__PURE__ */ jsx(PreviewCard$1.Portal, { children: /* @__PURE__ */ jsx(PreviewCard$1.Positioner, {
+		align,
+		alignOffset,
+		anchor,
+		className: "z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width)",
+		"data-slot": "preview-card-positioner",
+		side,
+		sideOffset,
+		children: /* @__PURE__ */ jsxs(PreviewCard$1.Popup, {
+			className: cn("relative flex h-(--popup-height,auto) w-(--popup-width,auto) max-w-(--available-width) origin-(--transform-origin) rounded-lg border bg-popover not-dark:bg-clip-padding text-balance text-popover-foreground text-sm shadow-lg/5 transition-[width,height,scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", className),
+			"data-slot": "preview-card-popup",
+			...props,
+			children: [!hideArrow && /* @__PURE__ */ jsx(PreviewCardArrow, {}), /* @__PURE__ */ jsx("div", {
+				className: "relative flex min-w-64 max-w-full flex-col gap-4 p-4",
+				"data-slot": "preview-card-panel",
+				children
+			})]
+		})
+	}) });
+}
+function ArrowSvg(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		width: "20",
+		height: "10",
+		viewBox: "0 0 20 10",
+		fill: "none",
+		...props,
+		children: [/* @__PURE__ */ jsx("path", {
+			d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z",
+			className: "fill-popover"
+		}), /* @__PURE__ */ jsx("path", {
+			d: "M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z",
+			className: "fill-border"
+		})]
+	});
+}
+//#endregion
+export { PreviewCard as HoverCard, PreviewCard, PreviewCardArrow as HoverCardArrow, PreviewCardArrow, PreviewCardPopup as HoverCardContent, PreviewCardPopup, PreviewCardTrigger as HoverCardTrigger, PreviewCardTrigger };

package/dist/components/progress.d.ts

@@ -0,0 +1,21 @@
+import * as React$1 from "react";
+import { Progress as Progress$1 } from "@base-ui/react/progress";
+//#region src/components/progress.d.ts
+export interface ProgressProps extends Progress$1.Root.Props {
+  variant?: "default" | "expressive";
+  size?: "sm" | "default" | "lg" | "xl" | "2xl";
+}
+declare function Progress({ className, variant, size, children, ...props }: ProgressProps): React$1.JSX.Element;
+declare function ProgressLabel({ className, ...props }: Progress$1.Label.Props): React$1.JSX.Element;
+export declare const progressTrackVariants: (props?: ({
+  variant?: "default" | "expressive" | null | undefined;
+  size?: "sm" | "lg" | "xl" | "2xl" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function ProgressTrack({ className, ...props }: Progress$1.Track.Props): React$1.JSX.Element;
+export declare const progressIndicatorVariants: (props?: ({
+  variant?: "default" | "expressive" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function ProgressIndicator({ className, ...props }: Progress$1.Indicator.Props): React$1.JSX.Element;
+declare function ProgressValue({ className, ...props }: Progress$1.Value.Props): React$1.JSX.Element;
+//#endregion
+export { Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue };

package/dist/components/progress.js

@@ -0,0 +1,139 @@
+"use client";
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import * as React$1 from "react";
+import { Progress as Progress$1 } from "@base-ui/react/progress";
+//#region src/components/progress.tsx
+const ProgressContext = React$1.createContext({
+	variant: "default",
+	size: "default"
+});
+function Progress({ className, variant = "default", size = "default", children, ...props }) {
+	const contextValue = React$1.useMemo(() => ({
+		variant,
+		size
+	}), [variant, size]);
+	return /* @__PURE__ */ jsx(Progress$1.Root, {
+		className: cn("flex w-full flex-col gap-2", className),
+		"data-slot": "progress",
+		...props,
+		children: /* @__PURE__ */ jsx(ProgressContext.Provider, {
+			value: contextValue,
+			children: children ? children : /* @__PURE__ */ jsx(ProgressTrack, { children: /* @__PURE__ */ jsx(ProgressIndicator, {}) })
+		})
+	});
+}
+function ProgressLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Progress$1.Label, {
+		className: cn("font-medium text-sm", className),
+		"data-slot": "progress-label",
+		...props
+	});
+}
+const progressTrackVariants = cva("block w-full overflow-hidden rounded-full", {
+	variants: {
+		variant: {
+			default: "bg-input inset-shadow-[0_1.5px_3px_var(--input)]",
+			expressive: "bg-input [mask-repeat:repeat-x] inset-shadow-[0_1.5px_3px_var(--input)]"
+		},
+		size: {
+			sm: "",
+			default: "",
+			lg: "",
+			xl: "",
+			"2xl": ""
+		}
+	},
+	compoundVariants: [
+		{
+			variant: "default",
+			size: "sm",
+			className: "h-1"
+		},
+		{
+			variant: "default",
+			size: "default",
+			className: "h-1.5"
+		},
+		{
+			variant: "default",
+			size: "lg",
+			className: "h-2"
+		},
+		{
+			variant: "default",
+			size: "xl",
+			className: "h-2.5"
+		},
+		{
+			variant: "default",
+			size: "2xl",
+			className: "h-3"
+		},
+		{
+			variant: "expressive",
+			size: "sm",
+			className: "h-1.5 [mask-image:url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%228%22%20height=%226%22%20viewBox=%220%200%208%206%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20d=%22M-4,3%20Q-2,6%200,3%20T4,3%20T8,3%20T12,3%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20/%3E%3C/svg%3E')] [mask-size:8px_100%]"
+		},
+		{
+			variant: "expressive",
+			size: "default",
+			className: "h-2.5 [mask-image:url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2212%22%20height=%2210%22%20viewBox=%220%200%2012%2010%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20d=%22M-6,5%20Q-3,10%200,5%20T6,5%20T12,5%20T18,5%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%223%22%20/%3E%3C/svg%3E')] [mask-size:12px_100%]"
+		},
+		{
+			variant: "expressive",
+			size: "lg",
+			className: "h-3.5 [mask-image:url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2216%22%20height=%2214%22%20viewBox=%220%200%2016%2014%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20d=%22M-8,7%20Q-4,14%200,7%20T8,7%20T16,7%20T24,7%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%224%22%20/%3E%3C/svg%3E')] [mask-size:16px_100%]"
+		},
+		{
+			variant: "expressive",
+			size: "xl",
+			className: "h-5 [mask-image:url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2224%22%20height=%2220%22%20viewBox=%220%200%2024%2020%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20d=%22M-12,10%20Q-6,20%200,10%20T12,10%20T24,10%20T36,10%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%225%22%20/%3E%3C/svg%3E')] [mask-size:24px_100%]"
+		},
+		{
+			variant: "expressive",
+			size: "2xl",
+			className: "h-6 [mask-image:url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2228%22%20height=%2224%22%20viewBox=%220%200%2028%2024%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20d=%22M-14,12%20Q-7,24%200,12%20T14,12%20T28,12%20T42,12%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%226%22%20/%3E%3C/svg%3E')] [mask-size:28px_100%]"
+		}
+	],
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+function ProgressTrack({ className, ...props }) {
+	const { variant, size } = React$1.useContext(ProgressContext);
+	return /* @__PURE__ */ jsx(Progress$1.Track, {
+		className: cn(progressTrackVariants({
+			variant,
+			size
+		}), className),
+		"data-slot": "progress-track",
+		...props
+	});
+}
+const progressIndicatorVariants = cva("bg-primary inset-shadow-[0_1px_--alpha(var(--primary-foreground)/16%)] transition-[width,transform] duration-500", {
+	variants: { variant: {
+		default: "size-full",
+		expressive: "size-full"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function ProgressIndicator({ className, ...props }) {
+	const { variant } = React$1.useContext(ProgressContext);
+	return /* @__PURE__ */ jsx(Progress$1.Indicator, {
+		className: cn(progressIndicatorVariants({ variant }), className),
+		"data-slot": "progress-indicator",
+		...props
+	});
+}
+function ProgressValue({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Progress$1.Value, {
+		className: cn("text-sm tabular-nums", className),
+		"data-slot": "progress-value",
+		...props
+	});
+}
+//#endregion
+export { Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, progressIndicatorVariants, progressTrackVariants };

package/dist/components/radio.d.ts

@@ -0,0 +1,16 @@
+import { VariantProps } from "class-variance-authority";
+import * as React$1 from "react";
+import { Radio as Radio$1 } from "@base-ui/react/radio";
+import { RadioGroup } from "@base-ui/react/radio-group";
+//#region src/components/radio.d.ts
+declare const radioItemVariants: (props?: ({
+  variant?: "default" | "diamond" | "expressive" | "sharp" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const radioIndicatorVariants: (props?: ({
+  variant?: "default" | "diamond" | "expressive" | "sharp" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Radio({ className, ...props }: RadioGroup.Props): React$1.JSX.Element;
+interface RadioItemProps extends Radio$1.Root.Props, VariantProps<typeof radioItemVariants> {}
+declare function RadioItem({ className, variant, ...props }: RadioItemProps): React$1.JSX.Element;
+//#endregion
+export { Radio, Radio as RadioGroup, RadioItem as RadioGroupItem, RadioItem, radioIndicatorVariants, radioItemVariants };

package/dist/components/radio.js

@@ -0,0 +1,68 @@
+"use client";
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { Radio as Radio$1 } from "@base-ui/react/radio";
+import { RadioGroup } from "@base-ui/react/radio-group";
+//#region src/components/radio.tsx
+const radioItemVariants = cva("relative inline-flex size-4.5 shrink-0 items-center justify-center border border-input bg-background not-dark:bg-clip-padding shadow-xs/5 outline-none ring-ring transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:shadow-[0_1px_var(--border)] not-data-checked:not-data-disabled:inset-shadow-[0_1.5px_3px_var(--input)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/48 data-disabled:pointer-events-none data-disabled:opacity-64 sm:size-4 dark:not-data-checked:bg-input/32 dark:aria-invalid:ring-destructive/24 [[data-disabled],[data-checked],[aria-invalid]]:shadow-none", {
+	variants: { variant: {
+		default: "rounded-full before:rounded-full",
+		diamond: "rotate-45 rounded-[.35rem] before:rounded-[5px]",
+		expressive: "rounded-full before:rounded-full",
+		sharp: "rounded-[.25rem] before:rounded-[3px]"
+	} },
+	defaultVariants: { variant: "default" }
+});
+const radioIndicatorVariants = cva("-inset-px absolute flex size-4.5 items-center justify-center text-primary-foreground transition-[transform,opacity] duration-205 ease-out data-unchecked:scale-50 data-unchecked:opacity-0 data-checked:scale-100 data-checked:opacity-100 data-checked:bg-primary data-checked:inset-shadow-[0_1px_--alpha(var(--primary-foreground)/16%)] data-checked:shadow-primary/24 data-checked:shadow-xs sm:size-4", {
+	variants: { variant: {
+		default: "rounded-full before:size-2 before:rounded-full before:bg-primary-foreground sm:before:size-1.5 before:transition-transform before:duration-200 before:ease-out data-unchecked:before:scale-0 data-checked:before:scale-100",
+		diamond: "rounded-[.35rem] before:size-2 before:rounded-[4px] before:bg-primary-foreground sm:before:size-1.5 before:transition-transform before:duration-200 before:ease-out data-unchecked:before:scale-0 data-checked:before:scale-100",
+		expressive: "rounded-full",
+		sharp: "rounded-[.25rem] before:size-2 before:rounded-[3px] before:bg-primary-foreground sm:before:size-1.5 before:transition-transform before:duration-200 before:ease-out data-unchecked:before:scale-0 data-checked:before:scale-100"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function Radio({ className, ...props }) {
+	return /* @__PURE__ */ jsx(RadioGroup, {
+		className: cn("flex flex-col gap-3", className),
+		"data-slot": "radio-group",
+		...props
+	});
+}
+function RadioItem({ className, variant, ...props }) {
+	return /* @__PURE__ */ jsx(Radio$1.Root, {
+		className: cn(radioItemVariants({ variant }), className),
+		"data-slot": "radio-item",
+		...props,
+		children: /* @__PURE__ */ jsx(Radio$1.Indicator, {
+			className: cn(radioIndicatorVariants({ variant })),
+			"data-slot": "radio-indicator",
+			keepMounted: true,
+			render: (indicatorProps, state) => /* @__PURE__ */ jsx("span", {
+				...indicatorProps,
+				children: variant === "expressive" && /* @__PURE__ */ jsx("svg", {
+					className: "size-3.5 sm:size-3",
+					fill: "none",
+					height: "24",
+					stroke: "currentColor",
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					strokeWidth: "3",
+					viewBox: "0 0 24 24",
+					width: "24",
+					xmlns: "http://www.w3.org/2000/svg",
+					children: /* @__PURE__ */ jsx("path", {
+						className: "transition-[stroke-dashoffset] duration-200 ease-out",
+						d: "M5.252 12.7 10.2 18.63 18.748 5.37",
+						strokeDasharray: "24",
+						strokeDashoffset: state.checked ? 0 : 24,
+						style: { transitionDelay: state.checked ? "50ms" : "0ms" }
+					})
+				})
+			})
+		})
+	});
+}
+//#endregion
+export { Radio, Radio as RadioGroup, RadioItem as RadioGroupItem, RadioItem, radioIndicatorVariants, radioItemVariants };