@glyphui/ui 0.4.0 → 0.5.0

package/dist/components/number-input/number-input.styles.js

@@ -0,0 +1,35 @@
+"use client";
+import { focusRing } from "../../utils/styles.js";
+import { tv } from "../../utils/tv.js";
+import { fieldControl } from "../input/input.styles.js";
+//#region src/components/number-input/number-input.styles.ts
+const numberInputStyles = /* @__PURE__ */ tv({
+	slots: {
+		root: [
+			...fieldControl,
+			"flex items-center gap-2 pl-3",
+			"focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/20",
+			"data-invalid:focus-within:ring-danger/20",
+			"has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50"
+		],
+		input: "h-full w-full min-w-0 bg-transparent tabular-nums text-foreground outline-none placeholder:text-faint-foreground disabled:cursor-not-allowed",
+		adornment: "flex shrink-0 items-center text-faint-foreground [&>svg]:size-4",
+		steppers: "flex h-full shrink-0 items-stretch border-l border-input",
+		stepper: [
+			"inline-flex w-8 cursor-pointer items-center justify-center text-muted-foreground hover:bg-muted hover:text-foreground",
+			"disabled:pointer-events-none disabled:opacity-40 [&>svg]:size-3.5 last:rounded-r-[calc(var(--radius-md)-1px)]",
+			focusRing
+		]
+	},
+	variants: { size: {
+		sm: { root: "h-(--glyph-control-sm) text-small" },
+		md: { root: "h-(--glyph-control-md) text-small" },
+		lg: {
+			root: "h-(--glyph-control-lg) text-body",
+			stepper: "w-10"
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { numberInputStyles };

package/dist/components/pagination/index.d.ts

@@ -0,0 +1,4 @@
+import { PaginationVariants, paginationStyles } from "./pagination.styles.js";
+import { Pagination, PaginationProps } from "./pagination.js";
+import { PaginationItem, paginationRange } from "./pagination-range.js";
+export { Pagination, type PaginationItem, type PaginationProps, type PaginationVariants, paginationRange, paginationStyles };

package/dist/components/pagination/pagination-range.d.ts

@@ -0,0 +1,11 @@
+//#region src/components/pagination/pagination-range.d.ts
+export type PaginationItem = number | 'ellipsis';
+/**
+ * The page numbers to show, with `'ellipsis'` for gaps. Always includes the first and
+ * last page and `siblingCount` pages on each side of the current one, and keeps the
+ * number of items constant so the control doesn't jump in width.
+ *
+ * `paginationRange(6, 20)` → `[1, 'ellipsis', 5, 6, 7, 'ellipsis', 20]`
+ */
+export declare function paginationRange(page: number, pageCount: number, siblingCount?: number): PaginationItem[];
+//#endregion

package/dist/components/pagination/pagination-range.js

@@ -0,0 +1,42 @@
+"use client";
+//#region src/components/pagination/pagination-range.ts
+/**
+* The page numbers to show, with `'ellipsis'` for gaps. Always includes the first and
+* last page and `siblingCount` pages on each side of the current one, and keeps the
+* number of items constant so the control doesn't jump in width.
+*
+* `paginationRange(6, 20)` → `[1, 'ellipsis', 5, 6, 7, 'ellipsis', 20]`
+*/
+function paginationRange(page, pageCount, siblingCount = 1) {
+	const count = Math.max(0, Math.floor(pageCount));
+	if (count === 0) return [];
+	const current = Math.min(Math.max(1, Math.floor(page)), count);
+	if (count <= siblingCount * 2 + 5) return range(1, count);
+	const left = Math.max(current - siblingCount, 1);
+	const right = Math.min(current + siblingCount, count);
+	const showLeftGap = left > 2;
+	const showRightGap = right < count - 1;
+	const edge = 3 + siblingCount * 2;
+	if (!showLeftGap && showRightGap) return [
+		...range(1, edge),
+		"ellipsis",
+		count
+	];
+	if (showLeftGap && !showRightGap) return [
+		1,
+		"ellipsis",
+		...range(count - edge + 1, count)
+	];
+	return [
+		1,
+		"ellipsis",
+		...range(left, right),
+		"ellipsis",
+		count
+	];
+}
+function range(from, to) {
+	return Array.from({ length: to - from + 1 }, (_, i) => from + i);
+}
+//#endregion
+export { paginationRange };

package/dist/components/pagination/pagination.d.ts

@@ -0,0 +1,18 @@
+import { PaginationVariants } from "./pagination.styles.js";
+import { ComponentProps } from "react";
+//#region src/components/pagination/pagination.d.ts
+export interface PaginationProps extends Omit<ComponentProps<'nav'>, 'onChange'>, PaginationVariants {
+  /** Current page, starting at 1. */
+  page: number;
+  pageCount: number;
+  onPageChange?: (page: number) => void;
+  /** Render pages as links (through the provider's linkComponent) instead of buttons. */
+  getHref?: (page: number) => string;
+  /** Pages shown on each side of the current page. Default 1. */
+  siblingCount?: number;
+  /** Show first / last page buttons. Default true. */
+  showEdges?: boolean;
+}
+/** Page navigation for long lists. Controlled: you own `page`. */
+export declare function Pagination(inProps: PaginationProps): import("react").JSX.Element;
+//#endregion

package/dist/components/pagination/pagination.js

@@ -0,0 +1,94 @@
+"use client";
+import { useLinkComponent } from "../../provider/glyph-context.js";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { ChevronLeftIcon, ChevronRightIcon } from "../../internal/icons.js";
+import { ActiveIndicator } from "../../motion/active-indicator.js";
+import { paginationStyles } from "./pagination.styles.js";
+import { paginationRange } from "./pagination-range.js";
+import { useId } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/pagination/pagination.tsx
+const ChevronsLeftIcon = () => /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ jsx("path", { d: "m11 17-5-5 5-5M18 17l-5-5 5-5" })
+});
+const ChevronsRightIcon = () => /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ jsx("path", { d: "m6 17 5-5-5-5M13 17l5-5-5-5" })
+});
+/** Page navigation for long lists. Controlled: you own `page`. */
+function Pagination(inProps) {
+	const [props, slots] = useComponentConfig("Pagination", inProps);
+	const { page, pageCount, onPageChange, getHref, siblingCount = 1, showEdges = true, size, className, ...rest } = props;
+	const Link = useLinkComponent();
+	const s = paginationStyles({ size });
+	const itemClass = s.item({ class: slots.item });
+	const current = Math.min(Math.max(1, page), Math.max(1, pageCount));
+	const indicatorId = `${useId()}-pagination-indicator`;
+	const control = (target, label, content, options = {}) => {
+		const disabled = target < 1 || target > pageCount || target === current && !options.current;
+		if (options.current) content = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ActiveIndicator, {
+			layoutId: indicatorId,
+			className: s.indicator({ class: slots.indicator })
+		}), content] });
+		const shared = {
+			"aria-label": label,
+			"aria-current": options.current ? "page" : void 0,
+			className: itemClass
+		};
+		if (getHref) {
+			if (disabled) return /* @__PURE__ */ jsx("span", {
+				"aria-disabled": "true",
+				...shared,
+				children: content
+			});
+			return /* @__PURE__ */ jsx(Link, {
+				href: getHref(target),
+				onClick: () => onPageChange?.(target),
+				...shared,
+				children: content
+			});
+		}
+		return /* @__PURE__ */ jsx("button", {
+			type: "button",
+			disabled,
+			onClick: () => onPageChange?.(target),
+			...shared,
+			children: content
+		});
+	};
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": "Pagination",
+		"data-slot": "pagination",
+		className: s.root({ class: [slots.root, className] }),
+		...rest,
+		children: /* @__PURE__ */ jsxs("ul", {
+			className: s.list({ class: slots.list }),
+			children: [
+				showEdges && /* @__PURE__ */ jsx("li", { children: control(1, "First page", /* @__PURE__ */ jsx(ChevronsLeftIcon, {})) }),
+				/* @__PURE__ */ jsx("li", { children: control(current - 1, "Previous page", /* @__PURE__ */ jsx(ChevronLeftIcon, {})) }),
+				paginationRange(current, pageCount, siblingCount).map((item, index) => item === "ellipsis" ? /* @__PURE__ */ jsx("li", {
+					className: s.ellipsis({ class: slots.ellipsis }),
+					"aria-hidden": "true",
+					children: "…"
+				}, `gap-${index}`) : /* @__PURE__ */ jsx("li", { children: control(item, `Page ${item}`, item, { current: item === current }) }, item)),
+				/* @__PURE__ */ jsx("li", { children: control(current + 1, "Next page", /* @__PURE__ */ jsx(ChevronRightIcon, {})) }),
+				showEdges && /* @__PURE__ */ jsx("li", { children: control(pageCount, "Last page", /* @__PURE__ */ jsx(ChevronsRightIcon, {})) })
+			]
+		})
+	});
+}
+//#endregion
+export { Pagination };

package/dist/components/pagination/pagination.styles.d.ts

@@ -0,0 +1,65 @@
+import { VariantProps } from "../../utils/tv.js";
+import { StylesEntry } from "../../utils/registry.js";
+//#region src/components/pagination/pagination.styles.d.ts
+export declare const paginationStyles: import("tailwind-variants").TVReturnType<{
+  size: {
+    sm: {
+      item: string;
+      ellipsis: string;
+    };
+    md: {
+      item: string;
+      ellipsis: string;
+    };
+  };
+}, {
+  root: string;
+  list: string;
+  item: string[];
+  ellipsis: string;
+  /** The current page's highlight. Slides to the new page when it changes. */
+  indicator: string;
+}, undefined, {
+  size: {
+    sm: {
+      item: string;
+      ellipsis: string;
+    };
+    md: {
+      item: string;
+      ellipsis: string;
+    };
+  };
+}, {
+  root: string;
+  list: string;
+  item: string[];
+  ellipsis: string;
+  /** The current page's highlight. Slides to the new page when it changes. */
+  indicator: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  size: {
+    sm: {
+      item: string;
+      ellipsis: string;
+    };
+    md: {
+      item: string;
+      ellipsis: string;
+    };
+  };
+}, {
+  root: string;
+  list: string;
+  item: string[];
+  ellipsis: string;
+  /** The current page's highlight. Slides to the new page when it changes. */
+  indicator: string;
+}>>;
+export type PaginationVariants = VariantProps<typeof paginationStyles>;
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Pagination: StylesEntry<typeof paginationStyles>;
+  }
+}
+//#endregion

package/dist/components/pagination/pagination.styles.js

@@ -0,0 +1,35 @@
+"use client";
+import { focusRing, transition } from "../../utils/styles.js";
+import { tv } from "../../utils/tv.js";
+//#region src/components/pagination/pagination.styles.ts
+const paginationStyles = /* @__PURE__ */ tv({
+	slots: {
+		root: "flex",
+		list: "isolate flex flex-wrap items-center gap-1",
+		item: [
+			"relative inline-flex shrink-0 cursor-pointer select-none items-center justify-center rounded-md font-medium tabular-nums text-muted-foreground",
+			transition,
+			focusRing,
+			"hover:bg-muted hover:text-foreground",
+			"aria-[current=page]:text-primary-foreground aria-[current=page]:hover:bg-transparent",
+			"disabled:pointer-events-none disabled:opacity-40 aria-disabled:pointer-events-none aria-disabled:opacity-40",
+			"[&>svg]:size-4"
+		],
+		ellipsis: "inline-flex items-center justify-center text-faint-foreground",
+		/** The current page's highlight. Slides to the new page when it changes. */
+		indicator: "pointer-events-none absolute inset-0 -z-10 rounded-[inherit] bg-primary shadow-xs"
+	},
+	variants: { size: {
+		sm: {
+			item: "h-(--glyph-control-sm) min-w-(--glyph-control-sm) px-1.5 text-small",
+			ellipsis: "h-(--glyph-control-sm) w-(--glyph-control-sm) text-small"
+		},
+		md: {
+			item: "h-(--glyph-control-md) min-w-(--glyph-control-md) px-2 text-small",
+			ellipsis: "h-(--glyph-control-md) w-(--glyph-control-md) text-small"
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { paginationStyles };

package/dist/components/password-input/index.d.ts

@@ -0,0 +1,3 @@
+import { PasswordInput, PasswordInputProps, PasswordStrength, passwordStrength } from "./password-input.js";
+import { passwordInputStyles } from "./password-input.styles.js";
+export { PasswordInput, type PasswordInputProps, type PasswordStrength, passwordInputStyles, passwordStrength };

package/dist/components/password-input/password-input.d.ts

@@ -0,0 +1,20 @@
+import { InputProps } from "../input/input.js";
+//#region src/components/password-input/password-input.d.ts
+export type PasswordStrength = 'weak' | 'fair' | 'strong';
+/**
+ * A quick strength estimate from length and character variety. A hint for users,
+ * not a security check: enforce real rules on the server.
+ */
+export declare function passwordStrength(password: string): {
+  score: number;
+  strength: PasswordStrength;
+};
+export interface PasswordInputProps extends Omit<InputProps, 'type' | 'suffix'> {
+  /** Show a strength meter under the field once the user starts typing. */
+  showStrength?: boolean;
+  /** Start with the password visible. */
+  defaultVisible?: boolean;
+}
+/** A password field with a show/hide toggle and an optional strength meter. */
+export declare function PasswordInput(inProps: PasswordInputProps): import("react").JSX.Element;
+//#endregion

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

@@ -0,0 +1,106 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { Input } from "../input/input.js";
+import { passwordInputStyles } from "./password-input.styles.js";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/password-input/password-input.tsx
+/**
+* A quick strength estimate from length and character variety. A hint for users,
+* not a security check: enforce real rules on the server.
+*/
+function passwordStrength(password) {
+	let score = 0;
+	if (password.length >= 8) score++;
+	if (password.length >= 12) score++;
+	if (/[a-z]/.test(password) && /[A-Z]/.test(password)) score++;
+	if (/\d/.test(password)) score++;
+	if (/[^A-Za-z0-9]/.test(password)) score++;
+	return {
+		score,
+		strength: score >= 4 ? "strong" : score >= 3 ? "fair" : "weak"
+	};
+}
+const filled = {
+	weak: 1,
+	fair: 2,
+	strong: 3
+};
+const barColor = {
+	weak: "bg-danger",
+	fair: "bg-warning",
+	strong: "bg-success"
+};
+const labels = {
+	weak: "Weak",
+	fair: "Fair",
+	strong: "Strong"
+};
+function EyeIcon({ off }) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: off ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("path", { d: "M10.7 5.1A10.4 10.4 0 0 1 12 5c7 0 10 7 10 7a13 13 0 0 1-1.7 2.7M6.6 6.6A13.5 13.5 0 0 0 2 12s3 7 10 7a9.7 9.7 0 0 0 5.4-1.6" }), /* @__PURE__ */ jsx("path", { d: "M9.9 9.9a3 3 0 1 0 4.2 4.2M2 2l20 20" })] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7S2 12 2 12Z" }), /* @__PURE__ */ jsx("circle", {
+			cx: "12",
+			cy: "12",
+			r: "3"
+		})] })
+	});
+}
+/** A password field with a show/hide toggle and an optional strength meter. */
+function PasswordInput(inProps) {
+	const [props, slots] = useComponentConfig("PasswordInput", inProps);
+	const { showStrength = false, defaultVisible = false, value, defaultValue, onChange, className, ...rest } = props;
+	const [visible, setVisible] = useState(defaultVisible);
+	const [typed, setTyped] = useState(String(defaultValue ?? ""));
+	const current = value !== void 0 ? String(value) : typed;
+	const { strength } = passwordStrength(current);
+	const s = passwordInputStyles({ strength });
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "password-input",
+		className: s.root({ class: [slots.root, className] }),
+		children: [/* @__PURE__ */ jsx(Input, {
+			...rest,
+			...value !== void 0 && { value },
+			...defaultValue !== void 0 && { defaultValue },
+			type: visible ? "text" : "password",
+			autoComplete: rest.autoComplete ?? "current-password",
+			spellCheck: false,
+			onChange: (event) => {
+				setTyped(event.target.value);
+				onChange?.(event);
+			},
+			suffix: /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": visible ? "Hide password" : "Show password",
+				"aria-pressed": visible,
+				disabled: rest.disabled,
+				className: s.toggle({ class: slots.toggle }),
+				onClick: () => setVisible((v) => !v),
+				children: /* @__PURE__ */ jsx(EyeIcon, { off: visible })
+			})
+		}), showStrength && current.length > 0 && /* @__PURE__ */ jsxs("div", {
+			className: s.meter({ class: slots.meter }),
+			children: [/* @__PURE__ */ jsx("div", {
+				className: s.bars({ class: slots.bars }),
+				"aria-hidden": "true",
+				children: [
+					1,
+					2,
+					3
+				].map((n) => /* @__PURE__ */ jsx("span", { className: s.bar({ class: [slots.bar, n <= filled[strength] && barColor[strength]] }) }, n))
+			}), /* @__PURE__ */ jsx("span", {
+				className: s.label({ class: slots.label }),
+				"aria-live": "polite",
+				children: labels[strength]
+			})]
+		})]
+	});
+}
+//#endregion
+export { PasswordInput, passwordStrength };

package/dist/components/password-input/password-input.styles.d.ts

@@ -0,0 +1,66 @@
+import { StylesEntry } from "../../utils/registry.js";
+//#region src/components/password-input/password-input.styles.d.ts
+export declare const passwordInputStyles: import("tailwind-variants").TVReturnType<{
+  strength: {
+    weak: {
+      label: string;
+    };
+    fair: {
+      label: string;
+    };
+    strong: {
+      label: string;
+    };
+  };
+}, {
+  root: string;
+  toggle: string[];
+  meter: string;
+  bars: string;
+  bar: string;
+  label: string;
+}, undefined, {
+  strength: {
+    weak: {
+      label: string;
+    };
+    fair: {
+      label: string;
+    };
+    strong: {
+      label: string;
+    };
+  };
+}, {
+  root: string;
+  toggle: string[];
+  meter: string;
+  bars: string;
+  bar: string;
+  label: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  strength: {
+    weak: {
+      label: string;
+    };
+    fair: {
+      label: string;
+    };
+    strong: {
+      label: string;
+    };
+  };
+}, {
+  root: string;
+  toggle: string[];
+  meter: string;
+  bars: string;
+  bar: string;
+  label: string;
+}>>;
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    PasswordInput: StylesEntry<typeof passwordInputStyles>;
+  }
+}
+//#endregion

package/dist/components/password-input/password-input.styles.js

@@ -0,0 +1,21 @@
+"use client";
+import { focusRing } from "../../utils/styles.js";
+import { tv } from "../../utils/tv.js";
+//#region src/components/password-input/password-input.styles.ts
+const passwordInputStyles = /* @__PURE__ */ tv({
+	slots: {
+		root: "grid gap-1.5",
+		toggle: ["-mr-1 inline-flex size-7 cursor-pointer items-center justify-center rounded-sm text-faint-foreground hover:bg-muted hover:text-foreground [&>svg]:size-4", focusRing],
+		meter: "flex items-center gap-2",
+		bars: "grid flex-1 grid-cols-3 gap-1",
+		bar: "h-1 rounded-pill bg-muted transition-colors duration-(--glyph-duration-base)",
+		label: "w-14 text-right text-caption text-muted-foreground"
+	},
+	variants: { strength: {
+		weak: { label: "text-danger-text" },
+		fair: { label: "text-warning-text" },
+		strong: { label: "text-success-text" }
+	} }
+});
+//#endregion
+export { passwordInputStyles };

package/dist/components/popover/index.d.ts

@@ -0,0 +1,2 @@
+import { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverContentProps, PopoverTrigger, popoverStyles } from "./popover.js";
+export { Popover, PopoverAnchor, PopoverClose, PopoverContent, type PopoverContentProps, PopoverTrigger, popoverStyles };

package/dist/components/popover/popover.d.ts

@@ -0,0 +1,52 @@
+import { StylesEntry } from "../../utils/registry.js";
+import { Popover } from "radix-ui";
+import { ComponentProps } from "react";
+//#region src/components/popover/popover.d.ts
+export declare const popoverStyles: import("tailwind-variants").TVReturnType<{
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      content?: import("tailwind-variants").ClassValue;
+      arrow?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {
+  [x: string]: {
+    [x: string]: import("tailwind-variants").ClassValue | {
+      content?: import("tailwind-variants").ClassValue;
+      arrow?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  content: string[];
+  arrow: string;
+}, undefined, {
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      content?: import("tailwind-variants").ClassValue;
+      arrow?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  content: string[];
+  arrow: string;
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+  content: string[];
+  arrow: string;
+}>>;
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Popover: StylesEntry<typeof popoverStyles>;
+  }
+}
+/** Floating content anchored to a trigger: quick settings, details, small forms. */
+declare const Popover$1: import("react").FC<Popover.PopoverProps>;
+export declare const PopoverTrigger: import("react").ForwardRefExoticComponent<Popover.PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const PopoverAnchor: import("react").ForwardRefExoticComponent<Popover.PopoverAnchorProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const PopoverClose: import("react").ForwardRefExoticComponent<Popover.PopoverCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+export interface PopoverContentProps extends ComponentProps<typeof Popover.Content> {
+  /** Render a small arrow pointing at the trigger. */
+  showArrow?: boolean;
+}
+export declare function PopoverContent(inProps: PopoverContentProps): import("react").JSX.Element;
+//#endregion
+export { Popover$1 as Popover };

package/dist/components/popover/popover.js

@@ -0,0 +1,35 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { popover } from "../../utils/styles.js";
+import { tv } from "../../utils/tv.js";
+import { Popover } from "radix-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/popover/popover.tsx
+const popoverStyles = /* @__PURE__ */ tv({ slots: {
+	content: [popover, "w-72 max-w-[calc(100vw-2rem)] overflow-visible p-4 text-small outline-none"],
+	arrow: "fill-raised"
+} });
+/** Floating content anchored to a trigger: quick settings, details, small forms. */
+const Popover$1 = Popover.Root;
+const PopoverTrigger = Popover.Trigger;
+const PopoverAnchor = Popover.Anchor;
+const PopoverClose = Popover.Close;
+function PopoverContent(inProps) {
+	const [props, slots] = useComponentConfig("Popover", inProps);
+	const { showArrow = false, sideOffset = 6, align = "center", className, children, ...rest } = props;
+	const s = popoverStyles();
+	return /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsxs(Popover.Content, {
+		"data-slot": "popover-content",
+		sideOffset,
+		align,
+		className: s.content({ class: [slots.content, className] }),
+		...rest,
+		children: [children, showArrow && /* @__PURE__ */ jsx(Popover.Arrow, {
+			width: 12,
+			height: 6,
+			className: s.arrow({ class: slots.arrow })
+		})]
+	}) });
+}
+//#endregion
+export { Popover$1 as Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, popoverStyles };

package/dist/components/progress/index.d.ts

@@ -0,0 +1,3 @@
+import { ProgressCircleVariants, ProgressVariants, progressCircleStyles, progressStyles } from "./progress.styles.js";
+import { Progress, ProgressCircle, ProgressCircleProps, ProgressProps } from "./progress.js";
+export { Progress, ProgressCircle, type ProgressCircleProps, type ProgressCircleVariants, type ProgressProps, type ProgressVariants, progressCircleStyles, progressStyles };

package/dist/components/progress/progress.d.ts

@@ -0,0 +1,29 @@
+import { ProgressCircleVariants, ProgressVariants } from "./progress.styles.js";
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/progress/progress.d.ts
+export interface ProgressProps extends Omit<ComponentProps<'div'>, 'children'>, ProgressVariants {
+  /** Current value. `null` or omitted shows an indeterminate bar. */
+  value?: number | null;
+  max?: number;
+  /** Visible label above the bar; also its accessible name. */
+  label?: ReactNode;
+  /** Show the value next to the label. */
+  showValue?: boolean;
+  formatValue?: (value: number, max: number) => string;
+  /** Accessible name when there is no visible label. */
+  'aria-label'?: string;
+}
+/** A horizontal bar showing how far a task has progressed. */
+export declare function Progress(inProps: ProgressProps): import("react").JSX.Element;
+export interface ProgressCircleProps extends Omit<ComponentProps<'div'>, 'children'>, ProgressCircleVariants {
+  value: number;
+  max?: number;
+  /** Show the percentage in the center (md and lg sizes). */
+  showValue?: boolean;
+  formatValue?: (value: number, max: number) => string;
+  /** Accessible name, e.g. "Storage used". */
+  'aria-label'?: string;
+}
+/** A compact ring for progress or a share of a total. */
+export declare function ProgressCircle(inProps: ProgressCircleProps): import("react").JSX.Element;
+//#endregion