@ponti-studios/ui 2.0.2 → 3.0.0

package/README.md

@@ -22,6 +22,38 @@ The base package remains usable by web consumers that do not install React Nativ
 import { NativeButton, NativeThemeProvider } from "@ponti-studios/ui/native";
 ```
 
+## Localization
+
+Built-in accessibility labels can be localized once with `UiTextProvider`.
+Component props such as `loadingLabel`, `emptyLabel`, and visible labels remain
+available and take precedence over provider defaults. Feature-specific copy stays
+owned by the consuming application.
+
+```tsx
+import { UiTextProvider } from "@ponti-studios/ui";
+
+<UiTextProvider messages={{
+  "button.loading": "Chargement",
+  "pagination.previous": "Page précédente",
+  "pagination.next": "Page suivante",
+}}>
+  <App />
+</UiTextProvider>
+```
+
+## API client
+
+`useApiClient` uses same-origin requests by default. Pass `baseUrl` for an API
+origin and set `credentials` explicitly when cross-origin cookies are required;
+it does not read build-tool environment variables.
+
+## Component registry
+
+The shadcn-compatible registry is a curated set of independently installable
+components plus the compiled Ponti theme. It is generated from source and
+validated during `pnpm run check`; use the npm package for the complete,
+maintained component library.
+
 ## Development
 
 Common development workflows are available through the `Makefile`:
@@ -101,6 +133,7 @@ components' built-in styles. Tailwind is only needed if the app itself wants to
 write Tailwind utility classes. The `/native` entry remains platform-specific
 and does not load the web stylesheet.
 
-The TypeScript entry points remain source exports for consumer bundlers to
-transpile. The package additionally publishes a precompiled web stylesheet at
-`@ponti-studios/ui/styles.css` for apps that prefer an explicit CSS import.
+The package publishes compiled ESM and TypeScript declarations, so consumer
+bundlers do not need to transpile the library source. The root import loads the
+precompiled stylesheet; explicit CSS consumers can use
+`@ponti-studios/ui/styles.css`.

package/dist/auth/index.d.ts

@@ -0,0 +1,3 @@
+export { PasskeyManagement } from "../components/forms/passkey-management";
+export type { PasskeyManagementProps, PasskeyRecord } from "../components/forms/passkey-management";
+export { normalizeOtp, OTP_LENGTH } from "../lib/auth";

package/dist/auth/index.js

@@ -0,0 +1,3 @@
+import { OTP_LENGTH as e, normalizeOtp as t } from "../lib/auth.js";
+import { PasskeyManagement as n } from "../components/forms/passkey-management.js";
+export { e as OTP_LENGTH, n as PasskeyManagement, t as normalizeOtp };

package/dist/components/data-display/accordion.d.ts

@@ -0,0 +1,10 @@
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
+import * as React from "react";
+declare function Accordion({ type, collapsible, className, onValueChange, ...props }: React.ComponentProps<typeof AccordionPrimitive.Root> & {
+    type?: "single" | "multiple";
+    collapsible?: boolean;
+}): React.JSX.Element;
+declare function AccordionItem({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>): React.JSX.Element;
+declare function AccordionTrigger({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Trigger>): React.JSX.Element;
+declare function AccordionContent({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Panel>): React.JSX.Element;
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/dist/components/data-display/accordion.js

@@ -0,0 +1,53 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { ChevronDown as r } from "lucide-react";
+import { Accordion as i } from "@base-ui/react/accordion";
+//#region src/components/data-display/accordion.tsx
+function a({ type: n, collapsible: r = !0, className: a, onValueChange: o, ...s }) {
+	return /* @__PURE__ */ t(i.Root, {
+		"data-slot": "accordion",
+		multiple: n === "multiple",
+		onValueChange: (e, t) => {
+			if (n !== "multiple" && !r && e.length === 0) {
+				t.cancel();
+				return;
+			}
+			o?.(e, t);
+		},
+		...s,
+		className: e("w-full", a)
+	});
+}
+function o({ className: n, ...r }) {
+	return /* @__PURE__ */ t(i.Item, {
+		"data-slot": "accordion-item",
+		className: e("mb-2 overflow-hidden rounded-md border last:mb-0", n),
+		...r
+	});
+}
+function s({ className: a, children: o, ...s }) {
+	return /* @__PURE__ */ t(i.Header, {
+		className: "flex",
+		children: /* @__PURE__ */ n(i.Trigger, {
+			"data-slot": "accordion-trigger",
+			className: e("text-muted-foreground flex w-full flex-1 items-center justify-between gap-4 px-4 py-3 text-left text-sm font-semibold disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180", a),
+			...s,
+			children: [o, /* @__PURE__ */ t(r, { className: "pointer-events-none size-4 shrink-0 transition-transform duration-200" })]
+		})
+	});
+}
+function c({ className: n, children: r, ...a }) {
+	return /* @__PURE__ */ t(i.Panel, {
+		"data-slot": "accordion-content",
+		className: "animate-accordion-down overflow-hidden text-sm",
+		...a,
+		children: /* @__PURE__ */ t("div", {
+			className: e("px-4 pt-2 pb-3", n),
+			children: r
+		})
+	});
+}
+//#endregion
+export { a as Accordion, c as AccordionContent, o as AccordionItem, s as AccordionTrigger };

package/{src/components/data-display/index.ts → dist/components/data-display/index.d.ts}

@@ -8,13 +8,4 @@ export { SortControls } from "./sort-controls";
 export type { SortControlsProps } from "./sort-controls";
 export { SortRow } from "./sort-row";
 export type { SortRowProps } from "./sort-row";
-export {
-  Table,
-  TableBody,
-  TableCaption,
-  TableCell,
-  TableFooter,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "./table";
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from "./table";

package/dist/components/data-display/index.js

@@ -0,0 +1,8 @@
+import { FilterChip as e } from "../filters/filter-chip.js";
+import { ActiveFiltersBar as t } from "../filters/active-filters-bar.js";
+import { Accordion as n, AccordionContent as r, AccordionItem as i, AccordionTrigger as a } from "./accordion.js";
+import { MetricCard as o } from "./metric-card.js";
+import { SortRow as s } from "./sort-row.js";
+import { SortControls as c } from "./sort-controls.js";
+import { Table as l, TableBody as u, TableCaption as d, TableCell as f, TableFooter as p, TableHead as m, TableHeader as h, TableRow as g } from "./table.js";
+export { n as Accordion, r as AccordionContent, i as AccordionItem, a as AccordionTrigger, t as ActiveFiltersBar, e as FilterChip, o as MetricCard, c as SortControls, s as SortRow, l as Table, u as TableBody, d as TableCaption, f as TableCell, p as TableFooter, m as TableHead, h as TableHeader, g as TableRow };

package/dist/components/data-display/metric-card.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentProps, ReactNode } from "react";
+interface MetricCardProps extends ComponentProps<"div"> {
+    label: string;
+    value: ReactNode;
+    change?: ReactNode;
+}
+/** Label/value/change stat tile. */
+export declare function MetricCard({ label, value, change, className, ...props }: MetricCardProps): import("react").JSX.Element;
+export {};

package/dist/components/data-display/metric-card.js

@@ -0,0 +1,25 @@
+import { cn as e } from "../../lib/utils.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/data-display/metric-card.tsx
+function r({ label: r, value: i, change: a, className: o, ...s }) {
+	return /* @__PURE__ */ n("div", {
+		className: e("ui-flat-card", o),
+		...s,
+		children: [
+			/* @__PURE__ */ t("p", {
+				className: "ui-data-label mb-2",
+				children: r
+			}),
+			/* @__PURE__ */ t("p", {
+				className: "ui-data-value",
+				children: i ?? "—"
+			}),
+			a == null ? null : /* @__PURE__ */ t("p", {
+				className: "text-muted-foreground mt-1.5 text-xs",
+				children: a
+			})
+		]
+	});
+}
+//#endregion
+export { r as MetricCard };

package/dist/components/data-display/sort-controls.d.ts

@@ -0,0 +1,13 @@
+import type { SortField, SortOption } from "../../hooks/sort.types";
+export interface SortControlsProps {
+    sortOptions: SortOption[];
+    sortableFields: SortField[];
+    addSortOption: (option: SortOption) => void;
+    updateSortOption: (index: number, option: SortOption) => void;
+    removeSortOption: (index: number) => void;
+    open?: boolean | undefined;
+    onOpenChange?: ((open: boolean) => void) | undefined;
+    focusedSortIndex?: (number | null) | undefined;
+}
+/** Multi-field sort builder, driven by the `SortOption`/`SortField` shared types. */
+export declare function SortControls({ sortOptions, sortableFields, addSortOption, updateSortOption, removeSortOption, open, onOpenChange, focusedSortIndex, }: SortControlsProps): import("react").JSX.Element;

package/dist/components/data-display/sort-controls.js

@@ -0,0 +1,57 @@
+"use client";
+import { Button as e } from "../primitives/button.js";
+import { DropdownMenu as t, DropdownMenuContent as n, DropdownMenuGroup as r, DropdownMenuLabel as i, DropdownMenuSeparator as a, DropdownMenuTrigger as o } from "../overlays/dropdown-menu.js";
+import { SortRow as s } from "./sort-row.js";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+import { ListOrdered as d, PlusCircle as f } from "lucide-react";
+//#region src/components/data-display/sort-controls.tsx
+function p({ sortOptions: p, sortableFields: m, addSortOption: h, updateSortOption: g, removeSortOption: _, open: v, onOpenChange: y, focusedSortIndex: b }) {
+	let x = m.filter((e) => !p.some((t) => t.field === e));
+	return /* @__PURE__ */ u(t, {
+		...v !== void 0 && { open: v },
+		...y && { onOpenChange: y },
+		children: [/* @__PURE__ */ l(o, {
+			asChild: !0,
+			children: /* @__PURE__ */ u(e, {
+				variant: "outline",
+				children: [/* @__PURE__ */ l(d, { className: "mr-2 size-4" }), "Sort"]
+			})
+		}), /* @__PURE__ */ u(n, {
+			className: "w-80 space-y-2 p-2",
+			children: [/* @__PURE__ */ u(r, {
+				className: "space-y-1",
+				children: [
+					/* @__PURE__ */ l(i, { children: "Define Sort Order" }),
+					/* @__PURE__ */ l(a, {}),
+					p.map((e, t) => {
+						let n = p.filter((e, n) => n !== t).map((e) => e.field);
+						return /* @__PURE__ */ l("div", {
+							className: `rounded-sm ${t === b ? "bg-muted" : ""}`,
+							children: /* @__PURE__ */ l(s, {
+								sortOption: e,
+								index: t,
+								sortableFields: m,
+								usedFields: n,
+								updateSortOption: g,
+								removeSortOption: _
+							})
+						}, e.field);
+					})
+				]
+			}), x.length > 0 && /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l(a, {}), /* @__PURE__ */ u("button", {
+				type: "button",
+				onClick: () => {
+					let e = x[0];
+					e && h({
+						field: e,
+						direction: "desc"
+					});
+				},
+				className: "hover:bg-muted focus-visible:ring-ring mt-1 flex w-full cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none focus-visible:ring-2 focus-visible:ring-offset-2",
+				children: [/* @__PURE__ */ l(f, { className: "mr-2 size-4" }), "Add Sort Criterion"]
+			})] })]
+		})]
+	});
+}
+//#endregion
+export { p as SortControls };

package/dist/components/data-display/sort-row.d.ts

@@ -0,0 +1,10 @@
+import type { SortField, SortOption } from "../../hooks/sort.types";
+export interface SortRowProps {
+    sortOption: SortOption;
+    index: number;
+    sortableFields: SortField[];
+    usedFields: SortField[];
+    updateSortOption: (index: number, option: SortOption) => void;
+    removeSortOption: (index: number) => void;
+}
+export declare function SortRow({ sortOption, index, sortableFields, usedFields, updateSortOption, removeSortOption, }: SortRowProps): import("react").JSX.Element;

package/dist/components/data-display/sort-row.js

@@ -0,0 +1,52 @@
+"use client";
+import { Button as e } from "../primitives/button.js";
+import { DropdownMenu as t, DropdownMenuContent as n, DropdownMenuItem as r, DropdownMenuTrigger as i } from "../overlays/dropdown-menu.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { ArrowDownWideNarrow as s, ArrowUpWideNarrow as c, X as l } from "lucide-react";
+//#region src/components/data-display/sort-row.tsx
+function u(e) {
+	return e.charAt(0).toUpperCase() + e.slice(1);
+}
+function d({ sortOption: d, index: f, sortableFields: p, usedFields: m, updateSortOption: h, removeSortOption: g }) {
+	let _ = p.filter((e) => !m.includes(e) || e === d.field);
+	return /* @__PURE__ */ o("div", {
+		className: "flex w-full items-center gap-1",
+		children: [
+			/* @__PURE__ */ o(t, { children: [/* @__PURE__ */ a(i, {
+				asChild: !0,
+				children: /* @__PURE__ */ a("button", {
+					type: "button",
+					className: "hover:bg-muted focus-visible:ring-ring flex-1 rounded-md px-2 py-1.5 text-left text-sm outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+					children: u(d.field)
+				})
+			}), /* @__PURE__ */ a(n, { children: _.map((e) => /* @__PURE__ */ a(r, {
+				onClick: () => h(f, {
+					...d,
+					field: e
+				}),
+				children: u(e)
+			}, e)) })] }),
+			/* @__PURE__ */ a(e, {
+				variant: "ghost",
+				size: "sm",
+				className: "size-8 p-0",
+				"aria-label": d.direction === "asc" ? "Sorted ascending" : "Sorted descending",
+				onClick: () => h(f, {
+					...d,
+					direction: d.direction === "asc" ? "desc" : "asc"
+				}),
+				children: d.direction === "asc" ? /* @__PURE__ */ a(c, { className: "size-4" }) : /* @__PURE__ */ a(s, { className: "size-4" })
+			}),
+			/* @__PURE__ */ a(e, {
+				variant: "ghost",
+				size: "sm",
+				onClick: () => g(f),
+				className: "size-8 p-0",
+				"aria-label": "Remove sort criterion",
+				children: /* @__PURE__ */ a(l, { className: "text-muted-foreground size-4" })
+			})
+		]
+	});
+}
+//#endregion
+export { d as SortRow };

package/dist/components/data-display/table.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
+declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
+declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

package/dist/components/data-display/table.js

@@ -0,0 +1,57 @@
+import { cn as e } from "../../lib/utils.js";
+import * as t from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/data-display/table.tsx
+var r = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n("div", {
+	className: "w-full overflow-auto",
+	children: /* @__PURE__ */ n("table", {
+		ref: i,
+		className: e("w-full caption-bottom text-sm", t),
+		...r
+	})
+}));
+r.displayName = "Table";
+var i = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n("thead", {
+	ref: i,
+	className: e("[&_tr]:border-b", t),
+	...r
+}));
+i.displayName = "TableHeader";
+var a = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n("tbody", {
+	ref: i,
+	className: e("[&_tr:last-child]:border-0", t),
+	...r
+}));
+a.displayName = "TableBody";
+var o = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n("tfoot", {
+	ref: i,
+	className: e("bg-muted font-medium", t),
+	...r
+}));
+o.displayName = "TableFooter";
+var s = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n("tr", {
+	ref: i,
+	className: e("data-[state=selected]:bg-muted border-b", t),
+	...r
+}));
+s.displayName = "TableRow";
+var c = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n("th", {
+	ref: i,
+	className: e("text-muted-foreground h-9 px-3 text-left align-middle text-xs font-medium [&:has([role=checkbox])]:pr-0", t),
+	...r
+}));
+c.displayName = "TableHead";
+var l = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n("td", {
+	ref: i,
+	className: e("px-3 py-2.5 align-middle [&:has([role=checkbox])]:pr-0", t),
+	...r
+}));
+l.displayName = "TableCell";
+var u = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n("caption", {
+	ref: i,
+	className: e("text-muted-foreground mt-4 text-sm", t),
+	...r
+}));
+u.displayName = "TableCaption";
+//#endregion
+export { r as Table, a as TableBody, u as TableCaption, l as TableCell, o as TableFooter, c as TableHead, i as TableHeader, s as TableRow };

package/dist/components/feedback/alert.d.ts

@@ -0,0 +1,9 @@
+import { type VariantProps } from "class-variance-authority";
+import * as React from "react";
+declare const alertVariants: (props?: ({
+    variant?: "default" | "destructive" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Alert({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>): React.JSX.Element;
+declare function AlertTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AlertDescription({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { Alert, AlertTitle, AlertDescription };

package/dist/components/feedback/alert.js

@@ -0,0 +1,38 @@
+import { cn as e } from "../../lib/utils.js";
+import "react";
+import { jsx as t } from "react/jsx-runtime";
+import { cva as n } from "class-variance-authority";
+//#region src/components/feedback/alert.tsx
+var r = n("relative w-full rounded-md border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current", {
+	variants: { variant: {
+		default: "bg-card text-card-foreground",
+		destructive: "border-destructive text-destructive-text bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive-text"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function i({ className: n, variant: i, ...a }) {
+	return /* @__PURE__ */ t("div", {
+		"data-slot": "alert",
+		role: "alert",
+		className: e(r({ variant: i }), n),
+		...a
+	});
+}
+function a({ className: n, ...r }) {
+	return /* @__PURE__ */ t("h2", {
+		"data-slot": "alert-title",
+		className: e("col-start-2 line-clamp-1 min-h-4 text-sm font-medium", n),
+		...r,
+		children: r.children
+	});
+}
+function o({ className: n, ...r }) {
+	return /* @__PURE__ */ t("div", {
+		"data-slot": "alert-description",
+		className: e("text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed", n),
+		...r,
+		children: r.children
+	});
+}
+//#endregion
+export { i as Alert, o as AlertDescription, a as AlertTitle };

package/dist/components/feedback/empty-state.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+export interface EmptyStateProps {
+    icon?: ReactNode;
+    title: ReactNode;
+    description?: ReactNode;
+    action?: ReactNode;
+    children?: ReactNode;
+    className?: string;
+    layout?: "centered" | "inline";
+    size?: "md" | "lg";
+    variant?: "default" | "dashed" | "quiet" | "search";
+}
+/**
+ * EmptyState communicates an absence of content and gives the host application
+ * room for an optional next action. Domain copy and recovery behavior stay with
+ * the calling feature.
+ */
+export declare function EmptyState({ icon, title, description, action, children, className, layout, size, variant, }: EmptyStateProps): import("react").JSX.Element;

package/dist/components/feedback/empty-state.js

@@ -0,0 +1,36 @@
+import { cn as e } from "../../lib/utils.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/feedback/empty-state.tsx
+function r({ icon: r, title: i, description: a, action: o, children: s, className: c, layout: l = "centered", size: u = "md", variant: d = "default" }) {
+	let f = l === "centered", p = u === "lg";
+	return /* @__PURE__ */ n("section", {
+		className: e("rounded-lg px-5 py-8", d === "default" && "bg-card border", d === "dashed" && "bg-card border border-dashed", d === "search" && "bg-muted border border-dashed", d === "quiet" && "bg-card", f ? e("flex flex-col items-center justify-center text-center", p ? "min-h-80 px-6 py-10" : "min-h-64") : "flex flex-col gap-3", c),
+		children: [
+			r ? /* @__PURE__ */ t("div", {
+				className: "text-muted-foreground mb-3 flex size-11 items-center justify-center",
+				"aria-hidden": !0,
+				children: r
+			}) : null,
+			/* @__PURE__ */ n("div", {
+				className: e("space-y-2", f && "max-w-[34ch]"),
+				children: [/* @__PURE__ */ t("h2", {
+					className: e("text-foreground font-semibold tracking-tight", p ? "text-lg" : "text-base"),
+					children: i
+				}), a ? /* @__PURE__ */ t("p", {
+					className: "text-muted-foreground text-sm",
+					children: a
+				}) : null]
+			}),
+			s ? /* @__PURE__ */ t("div", {
+				className: "mt-3",
+				children: s
+			}) : null,
+			o ? /* @__PURE__ */ t("div", {
+				className: "mt-4",
+				children: o
+			}) : null
+		]
+	});
+}
+//#endregion
+export { r as EmptyState };

package/{src/components/feedback/index.ts → dist/components/feedback/index.d.ts}

@@ -5,5 +5,7 @@ export { Progress } from "./progress";
 export { Skeleton } from "./skeleton";
 export { Spinner } from "./spinner";
 export type { SpinnerProps } from "./spinner";
+/** @deprecated Import from `@ponti-studios/ui/integrations/service-worker` instead. */
 export { UpdateGuard } from "./update-guard";
+/** @deprecated Import from `@ponti-studios/ui/integrations/service-worker` instead. */
 export type { UpdateGuardCopy, UpdateGuardProps } from "./update-guard";

package/dist/components/feedback/index.js

@@ -0,0 +1,7 @@
+import { Spinner as e } from "./spinner.js";
+import { Progress as t } from "./progress.js";
+import { Alert as n, AlertDescription as r, AlertTitle as i } from "./alert.js";
+import { EmptyState as a } from "./empty-state.js";
+import { Skeleton as o } from "./skeleton.js";
+import { UpdateGuard as s } from "./update-guard.js";
+export { n as Alert, r as AlertDescription, i as AlertTitle, a as EmptyState, t as Progress, o as Skeleton, e as Spinner, s as UpdateGuard };

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

@@ -0,0 +1,6 @@
+import { Progress as ProgressPrimitive } from "@base-ui/react/progress";
+import * as React from "react";
+declare function Progress({ className, value, indicatorClassName, ...props }: React.ComponentProps<typeof ProgressPrimitive.Root> & {
+    indicatorClassName?: string;
+}): React.JSX.Element;
+export { Progress };

package/dist/components/feedback/progress.js

@@ -0,0 +1,25 @@
+import { cn as e } from "../../lib/utils.js";
+import "react";
+import { jsx as t } from "react/jsx-runtime";
+import { Progress as n } from "@base-ui/react/progress";
+//#region src/components/feedback/progress.tsx
+function r({ className: r, value: i, indicatorClassName: a, ...o }) {
+	let s = typeof i == "number" && i > 0 && i < 100;
+	return /* @__PURE__ */ t(n.Root, {
+		"data-slot": "progress",
+		className: e("bg-muted relative h-2 w-full overflow-hidden rounded-full", r),
+		value: i,
+		...o,
+		children: /* @__PURE__ */ t(n.Indicator, {
+			"data-slot": "progress-indicator",
+			className: e("bg-primary relative h-full w-full flex-1 overflow-hidden transition-transform duration-300 ease-out", a),
+			style: { transform: `translateX(-${100 - (i ?? 0)}%)` },
+			children: s && /* @__PURE__ */ t("span", {
+				"aria-hidden": !0,
+				className: "animate-progress-shimmer absolute inset-0 bg-[linear-gradient(90deg,transparent_35%,rgba(255,255,255,0.75)_50%,transparent_65%)]"
+			})
+		})
+	});
+}
+//#endregion
+export { r as Progress };

package/dist/components/feedback/skeleton.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentProps } from "react";
+export declare function Skeleton({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;

package/dist/components/feedback/skeleton.js

@@ -0,0 +1,11 @@
+import { cn as e } from "../../lib/utils.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/feedback/skeleton.tsx
+function n({ className: n, ...r }) {
+	return /* @__PURE__ */ t("div", {
+		className: e("bg-muted animate-pulse rounded-md", n),
+		...r
+	});
+}
+//#endregion
+export { n as Skeleton };

package/dist/components/feedback/spinner.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+declare const sizeClasses: {
+    readonly sm: "size-4";
+    readonly md: "size-5";
+    readonly lg: "size-8";
+    readonly xl: "size-12";
+};
+export interface SpinnerProps extends React.ComponentProps<"output"> {
+    label?: string | false;
+    presentation?: "inline" | "centered";
+    size?: keyof typeof sizeClasses;
+}
+export declare function Spinner({ label, presentation, size, className, ...props }: SpinnerProps): React.JSX.Element;
+export {};

package/dist/components/feedback/spinner.js

@@ -0,0 +1,27 @@
+import { cn as e } from "../../lib/utils.js";
+import "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/feedback/spinner.tsx
+var r = {
+	sm: "size-4",
+	md: "size-5",
+	lg: "size-8",
+	xl: "size-12"
+};
+function i({ label: i = !1, presentation: a = "inline", size: o = "md", className: s, ...c }) {
+	let l = typeof i == "string" ? i : "Loading";
+	return /* @__PURE__ */ n("output", {
+		className: e("inline-flex items-center justify-center gap-2", a === "centered" && "flex w-full py-12", s),
+		"aria-label": l,
+		...c,
+		children: [/* @__PURE__ */ t("span", {
+			className: e("border-border border-t-primary rounded-full border-2 motion-safe:animate-spin", r[o]),
+			"aria-hidden": "true"
+		}), i && /* @__PURE__ */ t("span", {
+			className: "text-muted-foreground text-xs",
+			children: i
+		})]
+	});
+}
+//#endregion
+export { i as Spinner };

package/dist/components/feedback/update-guard.d.ts

@@ -0,0 +1,13 @@
+export interface UpdateGuardCopy {
+    newContentAvailable?: string;
+    refreshButton?: string;
+    closeButton?: string;
+}
+export interface UpdateGuardProps {
+    needRefresh: boolean;
+    onRefresh: () => void;
+    onDismiss?: () => void;
+    copyText?: string;
+    refreshText?: string;
+}
+export declare function UpdateGuard({ needRefresh, onRefresh, onDismiss, copyText, refreshText, }: UpdateGuardProps): import("react").JSX.Element | null;