@alneas/appkit-react 0.2.0 → 0.3.1

package/dist/ui/components/ui/mobile-form.js

@@ -7,36 +7,40 @@ import { Loader2 as o } from "lucide-react";
 import { Button as s } from "@base-ui/react/button";
 import { Input as c } from "@base-ui/react/input";
 //#region src/ui/components/ui/mobile-form.tsx
-var l = a.forwardRef(({ className: t, testId: n, ...i }, a) => /* @__PURE__ */ r("form", {
-	ref: a,
-	"data-slot": "mobile-form",
-	"data-testid": n,
-	className: e("space-y-4 px-4 pb-safe", t),
-	...i
-}));
+function l({ ref: t, className: n, testId: i, ...a }) {
+	return /* @__PURE__ */ r("form", {
+		ref: t,
+		"data-slot": "mobile-form",
+		"data-testid": i,
+		className: e("space-y-4 px-4 pb-safe", n),
+		...a
+	});
+}
 l.displayName = "MobileForm";
-var u = a.forwardRef(({ title: t, description: n, className: a, children: o, ...s }, c) => /* @__PURE__ */ i("div", {
-	ref: c,
-	"data-slot": "mobile-form-section",
-	className: e("space-y-3", a),
-	...s,
-	children: [(t || n) && /* @__PURE__ */ i("div", {
-		className: "space-y-1",
-		children: [t && /* @__PURE__ */ r("h3", {
-			className: "text-sm font-medium text-foreground",
-			children: t
-		}), n && /* @__PURE__ */ r("p", {
-			className: "text-xs text-muted-foreground",
-			children: n
+function u({ ref: t, title: n, description: a, className: o, children: s, ...c }) {
+	return /* @__PURE__ */ i("div", {
+		ref: t,
+		"data-slot": "mobile-form-section",
+		className: e("space-y-3", o),
+		...c,
+		children: [(n || a) && /* @__PURE__ */ i("div", {
+			className: "space-y-1",
+			children: [n && /* @__PURE__ */ r("h3", {
+				className: "text-sm font-medium text-foreground",
+				children: n
+			}), a && /* @__PURE__ */ r("p", {
+				className: "text-xs text-muted-foreground",
+				children: a
+			})]
+		}), /* @__PURE__ */ r("div", {
+			className: "space-y-3",
+			children: s
 		})]
-	}), /* @__PURE__ */ r("div", {
-		className: "space-y-3",
-		children: o
-	})]
-}));
+	});
+}
 u.displayName = "MobileFormSection";
-var d = a.forwardRef(({ label: t, error: n, helperText: o, icon: s, className: l, testId: u, ...d }, f) => {
-	let p = a.useId(), m = d.id ?? p, h = m + "-description", { children: g, ..._ } = d;
+function d({ ref: t, label: n, error: o, helperText: s, icon: l, className: u, testId: d, ...f }) {
+	let p = a.useId(), m = f.id ?? p, h = m + "-description", { children: g, ..._ } = f;
 	return /* @__PURE__ */ i("div", {
 		className: "space-y-1.5",
 		"data-slot": "mobile-input-wrapper",
@@ -44,40 +48,40 @@ var d = a.forwardRef(({ label: t, error: n, helperText: o, icon: s, className: l
 			/* @__PURE__ */ r("label", {
 				htmlFor: m,
 				className: "text-sm font-medium text-foreground",
-				children: t
+				children: n
 			}),
 			/* @__PURE__ */ i("div", {
 				className: "relative",
-				children: [s && /* @__PURE__ */ r("div", {
+				children: [l && /* @__PURE__ */ r("div", {
 					className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground",
-					children: s
+					children: l
 				}), /* @__PURE__ */ r(c, {
-					ref: f,
+					ref: t,
 					"data-slot": "mobile-input",
-					"data-testid": u,
-					"aria-invalid": !!n,
-					className: e("w-full h-12 px-4 text-base rounded-lg border bg-background", "transition-colors outline-none", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40", "aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 aria-invalid:ring-[3px]", "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", "placeholder:text-muted-foreground", s && "pl-10", l),
+					"data-testid": d,
+					"aria-invalid": !!o,
+					className: e("w-full h-12 px-4 text-base rounded-lg border bg-background", "transition-colors outline-none", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40", "aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 aria-invalid:ring-[3px]", "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", "placeholder:text-muted-foreground", l && "pl-10", u),
 					..._,
 					id: m,
-					"aria-describedby": [d["aria-describedby"], (n || o) && h].filter(Boolean).join(" ") || void 0
+					"aria-describedby": [f["aria-describedby"], (o || s) && h].filter(Boolean).join(" ") || void 0
 				})]
 			}),
-			n && /* @__PURE__ */ r("p", {
+			o && /* @__PURE__ */ r("p", {
 				id: h,
 				className: "text-xs text-destructive",
-				children: n
+				children: o
 			}),
-			o && !n && /* @__PURE__ */ r("p", {
+			s && !o && /* @__PURE__ */ r("p", {
 				id: h,
 				className: "text-xs text-muted-foreground",
-				children: o
+				children: s
 			})
 		]
 	});
-});
+}
 d.displayName = "MobileInput";
-var f = a.forwardRef(({ label: t, options: n, error: o, placeholder: s, className: c, testId: l, ...u }, d) => {
-	let f = a.useId(), p = u.id ?? f, m = p + "-description";
+function f({ ref: t, label: n, options: o, error: s, placeholder: c, className: l, testId: u, ...d }) {
+	let f = a.useId(), p = d.id ?? f, m = p + "-description";
 	return /* @__PURE__ */ i("div", {
 		className: "space-y-1.5",
 		"data-slot": "mobile-select-wrapper",
@@ -85,75 +89,79 @@ var f = a.forwardRef(({ label: t, options: n, error: o, placeholder: s, classNam
 			/* @__PURE__ */ r("label", {
 				htmlFor: p,
 				className: "text-sm font-medium text-foreground",
-				children: t
+				children: n
 			}),
 			/* @__PURE__ */ i("select", {
-				ref: d,
+				ref: t,
 				"data-slot": "mobile-select",
-				"data-testid": l,
-				"aria-invalid": !!o,
-				className: e("w-full h-12 px-4 text-base rounded-lg border bg-background appearance-none", "transition-colors outline-none", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40", "aria-invalid:border-destructive aria-invalid:ring-[3px]", "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", c),
-				...u,
+				"data-testid": u,
+				"aria-invalid": !!s,
+				className: e("w-full h-12 px-4 text-base rounded-lg border bg-background appearance-none", "transition-colors outline-none", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40", "aria-invalid:border-destructive aria-invalid:ring-[3px]", "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", l),
+				...d,
 				id: p,
-				"aria-describedby": [u["aria-describedby"], o && m].filter(Boolean).join(" ") || void 0,
-				children: [s && /* @__PURE__ */ r("option", {
+				"aria-describedby": [d["aria-describedby"], s && m].filter(Boolean).join(" ") || void 0,
+				children: [c && /* @__PURE__ */ r("option", {
 					value: "",
 					disabled: !0,
-					children: s
-				}), n.map((e) => /* @__PURE__ */ r("option", {
+					children: c
+				}), o.map((e) => /* @__PURE__ */ r("option", {
 					value: e.value,
 					children: e.label
 				}, e.value))]
 			}),
-			o && /* @__PURE__ */ r("p", {
+			s && /* @__PURE__ */ r("p", {
 				id: m,
 				className: "text-xs text-destructive",
-				children: o
+				children: s
 			})
 		]
 	});
-});
+}
 f.displayName = "MobileSelect";
-var p = a.forwardRef(({ className: t, variant: a, size: c, loading: l, icon: u, disabled: d, children: f, testId: p, ...m }, h) => /* @__PURE__ */ i(s, {
-	ref: h,
-	"data-slot": "mobile-button",
-	"data-testid": p,
-	"data-loading": l || void 0,
-	"aria-busy": l || void 0,
-	disabled: d || l,
-	className: typeof t == "function" ? (r) => e(n({
-		variant: a,
-		size: c
-	}), t(r)) : e(n({
-		variant: a,
-		size: c,
-		className: t
-	})),
-	...m,
-	children: [l ? /* @__PURE__ */ r(o, {
-		className: "animate-spin",
-		"aria-hidden": "true"
-	}) : u, f]
-}));
+function p({ ref: t, className: a, variant: c, size: l, loading: u, icon: d, disabled: f, children: p, testId: m, ...h }) {
+	return /* @__PURE__ */ i(s, {
+		ref: t,
+		"data-slot": "mobile-button",
+		"data-testid": m,
+		"data-loading": u || void 0,
+		"aria-busy": u || void 0,
+		disabled: f || u,
+		className: typeof a == "function" ? (t) => e(n({
+			variant: c,
+			size: l
+		}), a(t)) : e(n({
+			variant: c,
+			size: l,
+			className: a
+		})),
+		...h,
+		children: [u ? /* @__PURE__ */ r(o, {
+			className: "animate-spin",
+			"aria-hidden": "true"
+		}) : d, p]
+	});
+}
 p.displayName = "MobileButton";
-var m = a.forwardRef(({ icon: n, label: a, position: o, extended: c, className: l, testId: u, ...d }, f) => /* @__PURE__ */ i(s, {
-	ref: f,
-	"data-slot": "fab",
-	"data-testid": u,
-	className: typeof l == "function" ? (n) => e(t({
-		position: o,
-		extended: c || !!a
-	}), l(n)) : e(t({
-		position: o,
-		extended: c || !!a,
-		className: l
-	})),
-	...d,
-	children: [n, (c || a) && a && /* @__PURE__ */ r("span", {
-		className: "font-medium",
-		children: a
-	})]
-}));
+function m({ ref: n, icon: a, label: o, position: c, extended: l, className: u, testId: d, ...f }) {
+	return /* @__PURE__ */ i(s, {
+		ref: n,
+		"data-slot": "fab",
+		"data-testid": d,
+		className: typeof u == "function" ? (n) => e(t({
+			position: c,
+			extended: l || !!o
+		}), u(n)) : e(t({
+			position: c,
+			extended: l || !!o,
+			className: u
+		})),
+		...f,
+		children: [a, (l || o) && o && /* @__PURE__ */ r("span", {
+			className: "font-medium",
+			children: o
+		})]
+	});
+}
 m.displayName = "FAB";
 //#endregion
 export { m as FAB, p as MobileButton, l as MobileForm, u as MobileFormSection, d as MobileInput, f as MobileSelect };

package/dist/ui/components/ui/mobile-form.js.map

@@ -1 +1 @@
-{"version":3,"file":"mobile-form.js","names":["React","InputPrimitive","ButtonPrimitive","React$1","MobileForm","props","testId","cn","className","MobileFormSection","title","description","MobileInput","generatedId","controlId","descriptionId","_children","restProps","label","icon","Input","error","helperText","MobileSelect","placeholder","options","opt","MobileButton","Button","loading","disabled","mobileButtonVariants","state","Loader2","children","FAB","fabVariants","extended"],"sources":["../../../../src/ui/components/ui/mobile-form.tsx"],"sourcesContent":["/** Mobile-sized native and Base UI form controls with linked labels and Appkit variants. */\n\nimport * as React from 'react';\nimport { Input as InputPrimitive } from '@base-ui/react/input';\nimport { Button as ButtonPrimitive } from '@base-ui/react/button';\nimport { type VariantProps } from 'class-variance-authority';\nimport { Loader2 } from 'lucide-react';\n\nimport { cn } from '../../lib/utils';\nimport { mobileButtonVariants, fabVariants } from './mobile-form-variants';\n\n// ============================================================================\n// Mobile Form Container\n// ============================================================================\n\n/**\n * Native form attributes and a stable selector for MobileForm.\n * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.\n * @see MobileForm\n */\nexport interface MobileFormProps extends React.FormHTMLAttributes<HTMLFormElement> {\n  /**\n   * Stable data-testid assigned to the rendered control/container; omitted means no selector.\n   */\n  testId?: string;\n}\n\n/**\n * Renders a mobile-spaced native form without adding a form-state provider.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered MobileForm composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns submit effects and values. Input/Select use the caller id or React useId and append -description for help/errors; error text takes precedence over helperText. testId targets the control/form/button. MobileInput uses Base UI Input directly, not Appkit Input numeric normalization. MobileButton loading disables it and replaces icon with a spinner. FAB label forces extended styling even if extended=false; an icon-only FAB needs an accessible name. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { MobileForm, MobileFormSection, MobileInput, MobileSelect, MobileButton, FAB } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<><MobileForm onSubmit={event => event.preventDefault()}><MobileFormSection title=\"Contact\"><MobileInput label=\"Name\" /><MobileSelect label=\"Method\" defaultValue=\"email\" options={[{ value: \"email\", label: \"Email\" }]} /><MobileButton type=\"submit\">Save</MobileButton></MobileFormSection></MobileForm><FAB icon={<span>+</span>} label=\"Create\" /></>);\n * }\n * ```\n */\nconst MobileForm = React.forwardRef<HTMLFormElement, MobileFormProps>(\n  ({ className, testId, ...props }, ref) => (\n    <form\n      ref={ref}\n      data-slot='mobile-form'\n      data-testid={testId}\n      className={cn('space-y-4 px-4 pb-safe', className)}\n      {...props}\n    />\n  ),\n);\nMobileForm.displayName = 'MobileForm';\n\n// ============================================================================\n// Mobile Form Section\n// ============================================================================\n\n/**\n * Native div attributes and optional section heading/description.\n * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.\n * @see MobileFormSection\n */\nexport interface MobileFormSectionProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Optional section heading rendered before its content.\n   */\n  title?: string;\n  /**\n   * Supporting text displayed by the owning component.\n   */\n  description?: string;\n}\n\n/**\n * Groups mobile form controls under an optional title and description.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered MobileFormSection composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns submit effects and values. Input/Select use the caller id or React useId and append -description for help/errors; error text takes precedence over helperText. testId targets the control/form/button. MobileInput uses Base UI Input directly, not Appkit Input numeric normalization. MobileButton loading disables it and replaces icon with a spinner. FAB label forces extended styling even if extended=false; an icon-only FAB needs an accessible name. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { MobileForm, MobileFormSection, MobileInput, MobileSelect, MobileButton, FAB } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<><MobileForm onSubmit={event => event.preventDefault()}><MobileFormSection title=\"Contact\"><MobileInput label=\"Name\" /><MobileSelect label=\"Method\" defaultValue=\"email\" options={[{ value: \"email\", label: \"Email\" }]} /><MobileButton type=\"submit\">Save</MobileButton></MobileFormSection></MobileForm><FAB icon={<span>+</span>} label=\"Create\" /></>);\n * }\n * ```\n */\nconst MobileFormSection = React.forwardRef<HTMLDivElement, MobileFormSectionProps>(\n  ({ title, description, className, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot='mobile-form-section'\n      className={cn('space-y-3', className)}\n      {...props}\n    >\n      {(title || description) && (\n        <div className='space-y-1'>\n          {title && <h3 className='text-sm font-medium text-foreground'>{title}</h3>}\n          {description && <p className='text-xs text-muted-foreground'>{description}</p>}\n        </div>\n      )}\n      <div className='space-y-3'>{children}</div>\n    </div>\n  ),\n);\nMobileFormSection.displayName = 'MobileFormSection';\n\n// ============================================================================\n// Mobile Input (uses @base-ui/react Input)\n// ============================================================================\n\n/**\n * Base UI input attributes with required visible label and linked helper/error content.\n * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.\n * @see MobileInput\n */\nexport interface MobileInputProps extends React.ComponentProps<typeof InputPrimitive> {\n  /**\n   * Visible control/option text or content; does not perform persistence or validation.\n   */\n  label: string;\n  /**\n   * Error text displayed and used to mark the control invalid; the host supplies validation results.\n   */\n  error?: string;\n  /**\n   * Supporting text linked through aria-describedby when no error is present.\n   */\n  helperText?: string;\n  /**\n   * Leading visual content; provide an accessible name separately when it is the only button content.\n   */\n  icon?: React.ReactNode;\n  /**\n   * Stable data-testid assigned to the rendered control/container; omitted means no selector.\n   */\n  testId?: string;\n}\n\n/**\n * Renders a labeled large-touch input with generated IDs and linked helper/error text.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered MobileInput composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns submit effects and values. Input/Select use the caller id or React useId and append -description for help/errors; error text takes precedence over helperText. testId targets the control/form/button. MobileInput uses Base UI Input directly, not Appkit Input numeric normalization. MobileButton loading disables it and replaces icon with a spinner. FAB label forces extended styling even if extended=false; an icon-only FAB needs an accessible name. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { MobileForm, MobileFormSection, MobileInput, MobileSelect, MobileButton, FAB } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<><MobileForm onSubmit={event => event.preventDefault()}><MobileFormSection title=\"Contact\"><MobileInput label=\"Name\" /><MobileSelect label=\"Method\" defaultValue=\"email\" options={[{ value: \"email\", label: \"Email\" }]} /><MobileButton type=\"submit\">Save</MobileButton></MobileFormSection></MobileForm><FAB icon={<span>+</span>} label=\"Create\" /></>);\n * }\n * ```\n */\nconst MobileInput = React.forwardRef<HTMLInputElement, MobileInputProps>(\n  ({ label, error, helperText, icon, className, testId, ...props }, ref) => {\n    const generatedId = React.useId();\n    const controlId = props.id ?? generatedId;\n    const descriptionId = controlId + '-description';\n    // Exclude children from the void element\n    const {\n      children: _children,\n      ...restProps\n    } = props as MobileInputProps & {\n      children?: React.ReactNode;\n      };\n\n    return (\n      <div className='space-y-1.5' data-slot='mobile-input-wrapper'>\n        <label htmlFor={controlId} className='text-sm font-medium text-foreground'>{label}</label>\n        <div className='relative'>\n          {icon && (\n            <div className='absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground'>\n              {icon}\n            </div>\n          )}\n          <InputPrimitive\n            ref={ref}\n            data-slot='mobile-input'\n            data-testid={testId}\n            aria-invalid={!!error}\n            className={cn(\n              // Base styles\n              'w-full h-12 px-4 text-base rounded-lg border bg-background',\n              'transition-colors outline-none',\n              // Focus\n              'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',\n              // Error\n              'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',\n              'aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 aria-invalid:ring-[3px]',\n              // Disabled\n              'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n              // Placeholder\n              'placeholder:text-muted-foreground',\n              // Icon padding\n              icon && 'pl-10',\n              className,\n            )}\n            {...restProps}\n            id={controlId}\n            aria-describedby={[props['aria-describedby'], (error || helperText) && descriptionId].filter(Boolean).join(' ') || undefined}\n          />\n        </div>\n        {error && <p id={descriptionId} className='text-xs text-destructive'>{error}</p>}\n        {helperText && !error && <p id={descriptionId} className='text-xs text-muted-foreground'>{helperText}</p>}\n      </div>\n    );\n  },\n);\nMobileInput.displayName = 'MobileInput';\n\n// ============================================================================\n// Mobile Select\n// ============================================================================\n\n/**\n * Native select attributes with required label and option data.\n * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.\n * @see MobileSelect\n */\nexport interface MobileSelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {\n  /**\n   * Visible control/option text or content; does not perform persistence or validation.\n   */\n  label: string;\n  /**\n   * Native option entries in display order; each value must be a stable unique string and label is its visible text.\n   */\n  options: Array<{ /**\n * Identity for this choice within the surrounding group; provide a distinct stable string.\n */\n  /**\n   * Identity for this choice within the surrounding group; provide a distinct stable string.\n   */\n  value: string; /**\n * Visible control/option text or content; does not perform persistence or validation.\n */\n  /**\n   * Visible control/option text or content; does not perform persistence or validation.\n   */\n  label: string }>;\n  /**\n   * Error text displayed and used to mark the control invalid; the host supplies validation results.\n   */\n  error?: string;\n  /**\n   * Text displayed while no value is selected/entered; omitted means no placeholder.\n   */\n  placeholder?: string;\n  /**\n   * Stable data-testid assigned to the rendered control/container; omitted means no selector.\n   */\n  testId?: string;\n}\n\n/**\n * Renders a labeled native select with generated IDs and linked error text.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered MobileSelect composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns submit effects and values. Input/Select use the caller id or React useId and append -description for help/errors; error text takes precedence over helperText. testId targets the control/form/button. MobileInput uses Base UI Input directly, not Appkit Input numeric normalization. MobileButton loading disables it and replaces icon with a spinner. FAB label forces extended styling even if extended=false; an icon-only FAB needs an accessible name. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { MobileForm, MobileFormSection, MobileInput, MobileSelect, MobileButton, FAB } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<><MobileForm onSubmit={event => event.preventDefault()}><MobileFormSection title=\"Contact\"><MobileInput label=\"Name\" /><MobileSelect label=\"Method\" defaultValue=\"email\" options={[{ value: \"email\", label: \"Email\" }]} /><MobileButton type=\"submit\">Save</MobileButton></MobileFormSection></MobileForm><FAB icon={<span>+</span>} label=\"Create\" /></>);\n * }\n * ```\n */\nconst MobileSelect = React.forwardRef<HTMLSelectElement, MobileSelectProps>(\n  ({ label, options, error, placeholder, className, testId, ...props }, ref) => {\n    const generatedId = React.useId();\n    const controlId = props.id ?? generatedId;\n    const descriptionId = controlId + '-description';\n    return (\n    <div className='space-y-1.5' data-slot='mobile-select-wrapper'>\n      <label htmlFor={controlId} className='text-sm font-medium text-foreground'>{label}</label>\n      <select\n        ref={ref}\n        data-slot='mobile-select'\n        data-testid={testId}\n        aria-invalid={!!error}\n        className={cn(\n          // Base\n          'w-full h-12 px-4 text-base rounded-lg border bg-background appearance-none',\n          'transition-colors outline-none',\n          // Focus\n          'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',\n          // Error\n          'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',\n          'aria-invalid:border-destructive aria-invalid:ring-[3px]',\n          // Disabled\n          'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n          className,\n        )}\n        {...props}\n        id={controlId}\n        aria-describedby={[props['aria-describedby'], error && descriptionId].filter(Boolean).join(' ') || undefined}\n      >\n        {placeholder && (\n          <option value='' disabled>\n            {placeholder}\n          </option>\n        )}\n        {options.map((opt) => (\n          <option key={opt.value} value={opt.value}>\n            {opt.label}\n          </option>\n        ))}\n      </select>\n      {error && <p id={descriptionId} className='text-xs text-destructive'>{error}</p>}\n    </div>\n  );\n  },\n);\nMobileSelect.displayName = 'MobileSelect';\n\n// ============================================================================\n// Mobile Button (CVA variants + @base-ui/react Button)\n// ============================================================================\n\n/**\n * Base UI button attributes with mobile variants, loading state and optional icon.\n * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.\n * @see MobileButton\n */\nexport interface MobileButtonProps\n  extends ButtonPrimitive.Props, VariantProps<typeof mobileButtonVariants> {\n  /**\n   * Shows the loading spinner and disables activation when true; omitted means not loading. This does not manage an asynchronous task.\n   */\n  loading?: boolean;\n  /**\n   * Leading visual content; provide an accessible name separately when it is the only button content.\n   */\n  icon?: React.ReactNode;\n  /**\n   * Stable data-testid assigned to the rendered control/container; omitted means no selector.\n   */\n  testId?: string;\n}\n\n/**\n * Renders a large-touch Base UI button with optional loading spinner or leading icon.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered MobileButton composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns submit effects and values. Input/Select use the caller id or React useId and append -description for help/errors; error text takes precedence over helperText. testId targets the control/form/button. MobileInput uses Base UI Input directly, not Appkit Input numeric normalization. MobileButton loading disables it and replaces icon with a spinner. FAB label forces extended styling even if extended=false; an icon-only FAB needs an accessible name. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { MobileForm, MobileFormSection, MobileInput, MobileSelect, MobileButton, FAB } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<><MobileForm onSubmit={event => event.preventDefault()}><MobileFormSection title=\"Contact\"><MobileInput label=\"Name\" /><MobileSelect label=\"Method\" defaultValue=\"email\" options={[{ value: \"email\", label: \"Email\" }]} /><MobileButton type=\"submit\">Save</MobileButton></MobileFormSection></MobileForm><FAB icon={<span>+</span>} label=\"Create\" /></>);\n * }\n * ```\n */\nconst MobileButton = React.forwardRef<HTMLElement, MobileButtonProps>(\n  ({ className, variant, size, loading, icon, disabled, children, testId, ...props }, ref) => {\n    const isDisabled = disabled || loading;\n\n    return (\n      <ButtonPrimitive\n        ref={ref}\n        data-slot='mobile-button'\n        data-testid={testId}\n        data-loading={loading || undefined}\n        aria-busy={loading || undefined}\n        disabled={isDisabled}\n        className={typeof className === 'function' ? state => cn(mobileButtonVariants({ variant, size }), className(state)) : cn(mobileButtonVariants({ variant, size, className }))}\n        {...props}\n      >\n        {loading ? <Loader2 className='animate-spin' aria-hidden='true' /> : icon}\n        {children}\n      </ButtonPrimitive>\n    );\n  },\n);\nMobileButton.displayName = 'MobileButton';\n\n// ============================================================================\n// Floating Action Button (FAB)\n// ============================================================================\n\n/**\n * Base UI button attributes and fixed-position floating-action styling.\n * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.\n * @see FAB\n */\nexport interface FABProps extends ButtonPrimitive.Props, VariantProps<typeof fabVariants> {\n  /**\n   * Required visual content in the floating action button; provide aria-label for icon-only use.\n   */\n  icon: React.ReactNode;\n  /**\n   * Optional visible text; a truthy label forces extended styling even when extended=false.\n   */\n  label?: string;\n  /**\n   * Stable data-testid assigned to the rendered control/container; omitted means no selector.\n   */\n  testId?: string;\n}\n\n/**\n * Renders a fixed floating action button that expands when label content is supplied.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered FAB composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns submit effects and values. Input/Select use the caller id or React useId and append -description for help/errors; error text takes precedence over helperText. testId targets the control/form/button. MobileInput uses Base UI Input directly, not Appkit Input numeric normalization. MobileButton loading disables it and replaces icon with a spinner. FAB label forces extended styling even if extended=false; an icon-only FAB needs an accessible name. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { MobileForm, MobileFormSection, MobileInput, MobileSelect, MobileButton, FAB } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<><MobileForm onSubmit={event => event.preventDefault()}><MobileFormSection title=\"Contact\"><MobileInput label=\"Name\" /><MobileSelect label=\"Method\" defaultValue=\"email\" options={[{ value: \"email\", label: \"Email\" }]} /><MobileButton type=\"submit\">Save</MobileButton></MobileFormSection></MobileForm><FAB icon={<span>+</span>} label=\"Create\" /></>);\n * }\n * ```\n */\nconst FAB = React.forwardRef<HTMLElement, FABProps>(\n  ({ icon, label, position, extended, className, testId, ...props }, ref) => (\n    <ButtonPrimitive\n      ref={ref}\n      data-slot='fab'\n      data-testid={testId}\n      className={typeof className === 'function' ? state => cn(fabVariants({ position, extended: extended || !!label }), className(state)) : cn(fabVariants({ position, extended: extended || !!label, className }))}\n      {...props}\n    >\n      {icon}\n      {(extended || label) && label && <span className='font-medium'>{label}</span>}\n    </ButtonPrimitive>\n  ),\n);\nFAB.displayName = 'FAB';\n\n// ============================================================================\n// Exports\n// ============================================================================\n\nexport { MobileForm, MobileFormSection, MobileInput, MobileSelect, MobileButton, FAB };\n"],"mappings":"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"}
+{"version":3,"file":"mobile-form.js","names":["React","InputPrimitive","ButtonPrimitive","React$1","MobileForm","props","testId","cn","className","MobileFormSection","title","description","MobileInput","generatedId","controlId","descriptionId","_children","restProps","label","icon","Input","error","helperText","MobileSelect","placeholder","options","opt","MobileButton","Button","loading","disabled","mobileButtonVariants","state","Loader2","children","FAB","fabVariants","extended"],"sources":["../../../../src/ui/components/ui/mobile-form.tsx"],"sourcesContent":["/** Mobile-sized native and Base UI form controls with linked labels and Appkit variants. */\n\nimport * as React from 'react';\nimport { Input as InputPrimitive } from '@base-ui/react/input';\nimport { Button as ButtonPrimitive } from '@base-ui/react/button';\nimport { type VariantProps } from 'class-variance-authority';\nimport { Loader2 } from 'lucide-react';\n\nimport { cn } from '../../lib/utils';\nimport { mobileButtonVariants, fabVariants } from './mobile-form-variants';\n\n// ============================================================================\n// Mobile Form Container\n// ============================================================================\n\n/**\n * Native form attributes and a stable selector for MobileForm.\n * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.\n * @see MobileForm\n */\nexport interface MobileFormProps extends React.FormHTMLAttributes<HTMLFormElement> {\n  /**\n   * Stable data-testid assigned to the rendered control/container; omitted means no selector.\n   */\n  testId?: string;\n}\n\n/**\n * Renders a mobile-spaced native form without adding a form-state provider.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered MobileForm composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns submit effects and values. Input/Select use the caller id or React useId and append -description for help/errors; error text takes precedence over helperText. testId targets the control/form/button. MobileInput uses Base UI Input directly, not Appkit Input numeric normalization. MobileButton loading disables it and replaces icon with a spinner. FAB label forces extended styling even if extended=false; an icon-only FAB needs an accessible name. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { MobileForm, MobileFormSection, MobileInput, MobileSelect, MobileButton, FAB } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<><MobileForm onSubmit={event => event.preventDefault()}><MobileFormSection title=\"Contact\"><MobileInput label=\"Name\" /><MobileSelect label=\"Method\" defaultValue=\"email\" options={[{ value: \"email\", label: \"Email\" }]} /><MobileButton type=\"submit\">Save</MobileButton></MobileFormSection></MobileForm><FAB icon={<span>+</span>} label=\"Create\" /></>);\n * }\n * ```\n */\nfunction MobileForm({\n  ref,\n  className,\n  testId,\n  ...props\n}: React.PropsWithoutRef<MobileFormProps> & React.RefAttributes<HTMLFormElement>) {\n  return (\n    <form\n      ref={ref}\n      data-slot='mobile-form'\n      data-testid={testId}\n      className={cn('space-y-4 px-4 pb-safe', className)}\n      {...props}\n    />\n  );\n}\nMobileForm.displayName = 'MobileForm';\n\n// ============================================================================\n// Mobile Form Section\n// ============================================================================\n\n/**\n * Native div attributes and optional section heading/description.\n * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.\n * @see MobileFormSection\n */\nexport interface MobileFormSectionProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Optional section heading rendered before its content.\n   */\n  title?: string;\n  /**\n   * Supporting text displayed by the owning component.\n   */\n  description?: string;\n}\n\n/**\n * Groups mobile form controls under an optional title and description.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered MobileFormSection composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns submit effects and values. Input/Select use the caller id or React useId and append -description for help/errors; error text takes precedence over helperText. testId targets the control/form/button. MobileInput uses Base UI Input directly, not Appkit Input numeric normalization. MobileButton loading disables it and replaces icon with a spinner. FAB label forces extended styling even if extended=false; an icon-only FAB needs an accessible name. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { MobileForm, MobileFormSection, MobileInput, MobileSelect, MobileButton, FAB } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<><MobileForm onSubmit={event => event.preventDefault()}><MobileFormSection title=\"Contact\"><MobileInput label=\"Name\" /><MobileSelect label=\"Method\" defaultValue=\"email\" options={[{ value: \"email\", label: \"Email\" }]} /><MobileButton type=\"submit\">Save</MobileButton></MobileFormSection></MobileForm><FAB icon={<span>+</span>} label=\"Create\" /></>);\n * }\n * ```\n */\nfunction MobileFormSection({\n  ref,\n  title,\n  description,\n  className,\n  children,\n  ...props\n}: React.PropsWithoutRef<MobileFormSectionProps> & React.RefAttributes<HTMLDivElement>) {\n  return (\n    <div\n      ref={ref}\n      data-slot='mobile-form-section'\n      className={cn('space-y-3', className)}\n      {...props}\n    >\n      {(title || description) && (\n        <div className='space-y-1'>\n          {title && <h3 className='text-sm font-medium text-foreground'>{title}</h3>}\n          {description && <p className='text-xs text-muted-foreground'>{description}</p>}\n        </div>\n      )}\n      <div className='space-y-3'>{children}</div>\n    </div>\n  );\n}\nMobileFormSection.displayName = 'MobileFormSection';\n\n// ============================================================================\n// Mobile Input (uses @base-ui/react Input)\n// ============================================================================\n\n/**\n * Base UI input attributes with required visible label and linked helper/error content.\n * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.\n * @see MobileInput\n */\nexport interface MobileInputProps extends React.ComponentProps<typeof InputPrimitive> {\n  /**\n   * Visible control/option text or content; does not perform persistence or validation.\n   */\n  label: string;\n  /**\n   * Error text displayed and used to mark the control invalid; the host supplies validation results.\n   */\n  error?: string;\n  /**\n   * Supporting text linked through aria-describedby when no error is present.\n   */\n  helperText?: string;\n  /**\n   * Leading visual content; provide an accessible name separately when it is the only button content.\n   */\n  icon?: React.ReactNode;\n  /**\n   * Stable data-testid assigned to the rendered control/container; omitted means no selector.\n   */\n  testId?: string;\n}\n\n/**\n * Renders a labeled large-touch input with generated IDs and linked helper/error text.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered MobileInput composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns submit effects and values. Input/Select use the caller id or React useId and append -description for help/errors; error text takes precedence over helperText. testId targets the control/form/button. MobileInput uses Base UI Input directly, not Appkit Input numeric normalization. MobileButton loading disables it and replaces icon with a spinner. FAB label forces extended styling even if extended=false; an icon-only FAB needs an accessible name. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { MobileForm, MobileFormSection, MobileInput, MobileSelect, MobileButton, FAB } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<><MobileForm onSubmit={event => event.preventDefault()}><MobileFormSection title=\"Contact\"><MobileInput label=\"Name\" /><MobileSelect label=\"Method\" defaultValue=\"email\" options={[{ value: \"email\", label: \"Email\" }]} /><MobileButton type=\"submit\">Save</MobileButton></MobileFormSection></MobileForm><FAB icon={<span>+</span>} label=\"Create\" /></>);\n * }\n * ```\n */\nfunction MobileInput({\n  ref,\n  label,\n  error,\n  helperText,\n  icon,\n  className,\n  testId,\n  ...props\n}: React.PropsWithoutRef<MobileInputProps> & React.RefAttributes<HTMLInputElement>) {\n  const generatedId = React.useId();\n  const controlId = props.id ?? generatedId;\n  const descriptionId = controlId + '-description';\n  // Exclude children from the void element\n  const { children: _children, ...restProps } = props as MobileInputProps & {\n    children?: React.ReactNode;\n  };\n\n  return (\n    <div className='space-y-1.5' data-slot='mobile-input-wrapper'>\n      <label htmlFor={controlId} className='text-sm font-medium text-foreground'>\n        {label}\n      </label>\n      <div className='relative'>\n        {icon && (\n          <div className='absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground'>\n            {icon}\n          </div>\n        )}\n        <InputPrimitive\n          ref={ref}\n          data-slot='mobile-input'\n          data-testid={testId}\n          aria-invalid={!!error}\n          className={cn(\n            // Base styles\n            'w-full h-12 px-4 text-base rounded-lg border bg-background',\n            'transition-colors outline-none',\n            // Focus\n            'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',\n            // Error\n            'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',\n            'aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 aria-invalid:ring-[3px]',\n            // Disabled\n            'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n            // Placeholder\n            'placeholder:text-muted-foreground',\n            // Icon padding\n            icon && 'pl-10',\n            className,\n          )}\n          {...restProps}\n          id={controlId}\n          aria-describedby={\n            [props['aria-describedby'], (error || helperText) && descriptionId]\n              .filter(Boolean)\n              .join(' ') || undefined\n          }\n        />\n      </div>\n      {error && (\n        <p id={descriptionId} className='text-xs text-destructive'>\n          {error}\n        </p>\n      )}\n      {helperText && !error && (\n        <p id={descriptionId} className='text-xs text-muted-foreground'>\n          {helperText}\n        </p>\n      )}\n    </div>\n  );\n}\nMobileInput.displayName = 'MobileInput';\n\n// ============================================================================\n// Mobile Select\n// ============================================================================\n\n/**\n * Native select attributes with required label and option data.\n * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.\n * @see MobileSelect\n */\nexport interface MobileSelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {\n  /**\n   * Visible control/option text or content; does not perform persistence or validation.\n   */\n  label: string;\n  /**\n   * Native option entries in display order; each value must be a stable unique string and label is its visible text.\n   */\n  options: Array<{ /**\n * Identity for this choice within the surrounding group; provide a distinct stable string.\n */\n  /**\n   * Identity for this choice within the surrounding group; provide a distinct stable string.\n   */\n  value: string; /**\n * Visible control/option text or content; does not perform persistence or validation.\n */\n  /**\n   * Visible control/option text or content; does not perform persistence or validation.\n   */\n  label: string }>;\n  /**\n   * Error text displayed and used to mark the control invalid; the host supplies validation results.\n   */\n  error?: string;\n  /**\n   * Text displayed while no value is selected/entered; omitted means no placeholder.\n   */\n  placeholder?: string;\n  /**\n   * Stable data-testid assigned to the rendered control/container; omitted means no selector.\n   */\n  testId?: string;\n}\n\n/**\n * Renders a labeled native select with generated IDs and linked error text.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered MobileSelect composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns submit effects and values. Input/Select use the caller id or React useId and append -description for help/errors; error text takes precedence over helperText. testId targets the control/form/button. MobileInput uses Base UI Input directly, not Appkit Input numeric normalization. MobileButton loading disables it and replaces icon with a spinner. FAB label forces extended styling even if extended=false; an icon-only FAB needs an accessible name. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { MobileForm, MobileFormSection, MobileInput, MobileSelect, MobileButton, FAB } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<><MobileForm onSubmit={event => event.preventDefault()}><MobileFormSection title=\"Contact\"><MobileInput label=\"Name\" /><MobileSelect label=\"Method\" defaultValue=\"email\" options={[{ value: \"email\", label: \"Email\" }]} /><MobileButton type=\"submit\">Save</MobileButton></MobileFormSection></MobileForm><FAB icon={<span>+</span>} label=\"Create\" /></>);\n * }\n * ```\n */\nfunction MobileSelect({\n  ref,\n  label,\n  options,\n  error,\n  placeholder,\n  className,\n  testId,\n  ...props\n}: React.PropsWithoutRef<MobileSelectProps> & React.RefAttributes<HTMLSelectElement>) {\n  const generatedId = React.useId();\n  const controlId = props.id ?? generatedId;\n  const descriptionId = controlId + '-description';\n  return (\n    <div className='space-y-1.5' data-slot='mobile-select-wrapper'>\n      <label htmlFor={controlId} className='text-sm font-medium text-foreground'>\n        {label}\n      </label>\n      <select\n        ref={ref}\n        data-slot='mobile-select'\n        data-testid={testId}\n        aria-invalid={!!error}\n        className={cn(\n          // Base\n          'w-full h-12 px-4 text-base rounded-lg border bg-background appearance-none',\n          'transition-colors outline-none',\n          // Focus\n          'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',\n          // Error\n          'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',\n          'aria-invalid:border-destructive aria-invalid:ring-[3px]',\n          // Disabled\n          'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n          className,\n        )}\n        {...props}\n        id={controlId}\n        aria-describedby={\n          [props['aria-describedby'], error && descriptionId].filter(Boolean).join(' ') || undefined\n        }\n      >\n        {placeholder && (\n          <option value='' disabled>\n            {placeholder}\n          </option>\n        )}\n        {options.map((opt) => (\n          <option key={opt.value} value={opt.value}>\n            {opt.label}\n          </option>\n        ))}\n      </select>\n      {error && (\n        <p id={descriptionId} className='text-xs text-destructive'>\n          {error}\n        </p>\n      )}\n    </div>\n  );\n}\nMobileSelect.displayName = 'MobileSelect';\n\n// ============================================================================\n// Mobile Button (CVA variants + @base-ui/react Button)\n// ============================================================================\n\n/**\n * Base UI button attributes with mobile variants, loading state and optional icon.\n * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.\n * @see MobileButton\n */\nexport interface MobileButtonProps\n  extends ButtonPrimitive.Props, VariantProps<typeof mobileButtonVariants> {\n  /**\n   * Shows the loading spinner and disables activation when true; omitted means not loading. This does not manage an asynchronous task.\n   */\n  loading?: boolean;\n  /**\n   * Leading visual content; provide an accessible name separately when it is the only button content.\n   */\n  icon?: React.ReactNode;\n  /**\n   * Stable data-testid assigned to the rendered control/container; omitted means no selector.\n   */\n  testId?: string;\n}\n\n/**\n * Renders a large-touch Base UI button with optional loading spinner or leading icon.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered MobileButton composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns submit effects and values. Input/Select use the caller id or React useId and append -description for help/errors; error text takes precedence over helperText. testId targets the control/form/button. MobileInput uses Base UI Input directly, not Appkit Input numeric normalization. MobileButton loading disables it and replaces icon with a spinner. FAB label forces extended styling even if extended=false; an icon-only FAB needs an accessible name. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { MobileForm, MobileFormSection, MobileInput, MobileSelect, MobileButton, FAB } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<><MobileForm onSubmit={event => event.preventDefault()}><MobileFormSection title=\"Contact\"><MobileInput label=\"Name\" /><MobileSelect label=\"Method\" defaultValue=\"email\" options={[{ value: \"email\", label: \"Email\" }]} /><MobileButton type=\"submit\">Save</MobileButton></MobileFormSection></MobileForm><FAB icon={<span>+</span>} label=\"Create\" /></>);\n * }\n * ```\n */\nfunction MobileButton({\n  ref,\n  className,\n  variant,\n  size,\n  loading,\n  icon,\n  disabled,\n  children,\n  testId,\n  ...props\n}: React.PropsWithoutRef<MobileButtonProps> & React.RefAttributes<HTMLElement>) {\n  const isDisabled = disabled || loading;\n\n  return (\n    <ButtonPrimitive\n      ref={ref}\n      data-slot='mobile-button'\n      data-testid={testId}\n      data-loading={loading || undefined}\n      aria-busy={loading || undefined}\n      disabled={isDisabled}\n      className={\n        typeof className === 'function'\n          ? (state) => cn(mobileButtonVariants({ variant, size }), className(state))\n          : cn(mobileButtonVariants({ variant, size, className }))\n      }\n      {...props}\n    >\n      {loading ? <Loader2 className='animate-spin' aria-hidden='true' /> : icon}\n      {children}\n    </ButtonPrimitive>\n  );\n}\nMobileButton.displayName = 'MobileButton';\n\n// ============================================================================\n// Floating Action Button (FAB)\n// ============================================================================\n\n/**\n * Base UI button attributes and fixed-position floating-action styling.\n * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.\n * @see FAB\n */\nexport interface FABProps extends ButtonPrimitive.Props, VariantProps<typeof fabVariants> {\n  /**\n   * Required visual content in the floating action button; provide aria-label for icon-only use.\n   */\n  icon: React.ReactNode;\n  /**\n   * Optional visible text; a truthy label forces extended styling even when extended=false.\n   */\n  label?: string;\n  /**\n   * Stable data-testid assigned to the rendered control/container; omitted means no selector.\n   */\n  testId?: string;\n}\n\n/**\n * Renders a fixed floating action button that expands when label content is supplied.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered FAB composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns submit effects and values. Input/Select use the caller id or React useId and append -description for help/errors; error text takes precedence over helperText. testId targets the control/form/button. MobileInput uses Base UI Input directly, not Appkit Input numeric normalization. MobileButton loading disables it and replaces icon with a spinner. FAB label forces extended styling even if extended=false; an icon-only FAB needs an accessible name. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { MobileForm, MobileFormSection, MobileInput, MobileSelect, MobileButton, FAB } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<><MobileForm onSubmit={event => event.preventDefault()}><MobileFormSection title=\"Contact\"><MobileInput label=\"Name\" /><MobileSelect label=\"Method\" defaultValue=\"email\" options={[{ value: \"email\", label: \"Email\" }]} /><MobileButton type=\"submit\">Save</MobileButton></MobileFormSection></MobileForm><FAB icon={<span>+</span>} label=\"Create\" /></>);\n * }\n * ```\n */\nfunction FAB({\n  ref,\n  icon,\n  label,\n  position,\n  extended,\n  className,\n  testId,\n  ...props\n}: React.PropsWithoutRef<FABProps> & React.RefAttributes<HTMLElement>) {\n  return (\n    <ButtonPrimitive\n      ref={ref}\n      data-slot='fab'\n      data-testid={testId}\n      className={\n        typeof className === 'function'\n          ? (state) =>\n              cn(fabVariants({ position, extended: extended || !!label }), className(state))\n          : cn(fabVariants({ position, extended: extended || !!label, className }))\n      }\n      {...props}\n    >\n      {icon}\n      {(extended || label) && label && <span className='font-medium'>{label}</span>}\n    </ButtonPrimitive>\n  );\n}\nFAB.displayName = 'FAB';\n\n// ============================================================================\n// Exports\n// ============================================================================\n\nexport { MobileForm, MobileFormSection, MobileInput, MobileSelect, MobileButton, FAB };\n"],"mappings":"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"}

package/dist/ui/components/ui/pagination.cjs

@@ -1,2 +1,2 @@
-"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../lib/utils.cjs"),t=require("./button-components.cjs");let n=require("react/jsx-runtime"),r=require("react"),i=require("lucide-react");var a=(0,r.forwardRef)(({className:t,...r},i)=>(0,n.jsx)(`nav`,{ref:i,role:`navigation`,"aria-label":`pagination`,className:e.cn(`mx-auto flex w-full justify-center`,t),...r}));a.displayName=`Pagination`;var o=(0,r.forwardRef)(({className:t,...r},i)=>(0,n.jsx)(`ul`,{ref:i,className:e.cn(`flex flex-row items-center gap-1`,t),...r}));o.displayName=`PaginationContent`;var s=(0,r.forwardRef)(({className:t,...r},i)=>(0,n.jsx)(`li`,{ref:i,className:e.cn(``,t),...r}));s.displayName=`PaginationItem`;var c=({className:t,isActive:r,...i})=>(0,n.jsx)(`a`,{"aria-current":r?`page`:void 0,className:e.cn(`inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50`,r||`hover:bg-accent hover:text-accent-foreground`,r&&`bg-accent text-accent-foreground`,t),...i});c.displayName=`PaginationLink`;var l=(0,r.forwardRef)(({className:r,...a},o)=>(0,n.jsxs)(t.Button,{ref:o,"aria-label":`Go to previous page`,size:`default`,variant:`ghost`,className:e.cn(`gap-1 pl-2.5`,r),...a,children:[(0,n.jsx)(i.ChevronLeft,{className:`h-4 w-4`}),(0,n.jsx)(`span`,{children:`Previous`})]}));l.displayName=`PaginationPrevious`;var u=(0,r.forwardRef)(({className:r,...a},o)=>(0,n.jsxs)(t.Button,{ref:o,"aria-label":`Go to next page`,size:`default`,variant:`ghost`,className:e.cn(`gap-1 pr-2.5`,r),...a,children:[(0,n.jsx)(`span`,{children:`Next`}),(0,n.jsx)(i.ChevronRight,{className:`h-4 w-4`})]}));u.displayName=`PaginationNext`;var d=({className:t,...r})=>(0,n.jsxs)(`span`,{"aria-hidden":!0,className:e.cn(`flex h-9 w-9 items-center justify-center`,t),...r,children:[(0,n.jsx)(i.MoreHorizontal,{className:`h-4 w-4`}),(0,n.jsx)(`span`,{className:`sr-only`,children:`More pages`})]});d.displayName=`PaginationEllipsis`,exports.Pagination=a,exports.PaginationContent=o,exports.PaginationEllipsis=d,exports.PaginationItem=s,exports.PaginationLink=c,exports.PaginationNext=u,exports.PaginationPrevious=l;
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../lib/utils.cjs"),t=require("./button-components.cjs");let n=require("react/jsx-runtime"),r=require("lucide-react");function i({ref:t,className:r,...i}){return(0,n.jsx)(`nav`,{ref:t,role:`navigation`,"aria-label":`pagination`,className:e.cn(`mx-auto flex w-full justify-center`,r),...i})}i.displayName=`Pagination`;function a({ref:t,className:r,...i}){return(0,n.jsx)(`ul`,{ref:t,className:e.cn(`flex flex-row items-center gap-1`,r),...i})}a.displayName=`PaginationContent`;function o({ref:t,className:r,...i}){return(0,n.jsx)(`li`,{ref:t,className:e.cn(``,r),...i})}o.displayName=`PaginationItem`;var s=({className:t,isActive:r,...i})=>(0,n.jsx)(`a`,{"aria-current":r?`page`:void 0,className:e.cn(`inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50`,r||`hover:bg-accent hover:text-accent-foreground`,r&&`bg-accent text-accent-foreground`,t),...i});s.displayName=`PaginationLink`;function c({ref:i,className:a,...o}){return(0,n.jsxs)(t.Button,{ref:i,"aria-label":`Go to previous page`,size:`default`,variant:`ghost`,className:e.cn(`gap-1 pl-2.5`,a),...o,children:[(0,n.jsx)(r.ChevronLeft,{className:`h-4 w-4`}),(0,n.jsx)(`span`,{children:`Previous`})]})}c.displayName=`PaginationPrevious`;function l({ref:i,className:a,...o}){return(0,n.jsxs)(t.Button,{ref:i,"aria-label":`Go to next page`,size:`default`,variant:`ghost`,className:e.cn(`gap-1 pr-2.5`,a),...o,children:[(0,n.jsx)(`span`,{children:`Next`}),(0,n.jsx)(r.ChevronRight,{className:`h-4 w-4`})]})}l.displayName=`PaginationNext`;var u=({className:t,...i})=>(0,n.jsxs)(`span`,{"aria-hidden":!0,className:e.cn(`flex h-9 w-9 items-center justify-center`,t),...i,children:[(0,n.jsx)(r.MoreHorizontal,{className:`h-4 w-4`}),(0,n.jsx)(`span`,{className:`sr-only`,children:`More pages`})]});u.displayName=`PaginationEllipsis`,exports.Pagination=i,exports.PaginationContent=a,exports.PaginationEllipsis=u,exports.PaginationItem=o,exports.PaginationLink=s,exports.PaginationNext=l,exports.PaginationPrevious=c;
 //# sourceMappingURL=pagination.cjs.map

package/dist/ui/components/ui/pagination.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.cjs","names":["forwardRef","cn","Button","ChevronLeft","ChevronRight","MoreHorizontal","require_ui_lib_utils","require_ui_components_ui_button_components","react_jsx_runtime","react","lucide_react","Pagination","props","className","PaginationContent","PaginationItem","PaginationLink","isActive","PaginationPrevious","PaginationNext","PaginationEllipsis"],"sources":["../../../../src/ui/components/ui/pagination.tsx"],"sourcesContent":["import { forwardRef, type ComponentPropsWithoutRef, type ComponentRef } from 'react';\nimport { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';\n\nimport { cn } from '../../lib/utils';\nimport { Button } from './button';\n\n/**\n * Renders the navigation landmark containing host-managed page controls.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered Pagination composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns page state, destinations, loading and boundary disabling. Previous/Next are Buttons rather than anchors; use onClick or Base UI render composition. isActive defaults to false/absent and only adds aria-current and styling. Ellipsis is hidden from assistive technology. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Pagination><PaginationContent><PaginationItem><PaginationPrevious onClick={() => console.log(\"Previous requested\")} /></PaginationItem><PaginationItem><PaginationLink href=\"?page=1\" isActive>1</PaginationLink></PaginationItem><PaginationItem><PaginationEllipsis /></PaginationItem><PaginationItem><PaginationNext onClick={() => console.log(\"Next requested\")} /></PaginationItem></PaginationContent></Pagination>);\n * }\n * ```\n */\nconst Pagination = forwardRef<ComponentRef<'nav'>, ComponentPropsWithoutRef<'nav'>>(\n  ({ className, ...props }, ref) => (\n    <nav\n      ref={ref}\n      role='navigation'\n      aria-label='pagination'\n      className={cn('mx-auto flex w-full justify-center', className)}\n      {...props}\n    />\n  ),\n);\nPagination.displayName = 'Pagination';\n\n/**\n * Lays out pagination items in a horizontal unordered list.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered PaginationContent composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns page state, destinations, loading and boundary disabling. Previous/Next are Buttons rather than anchors; use onClick or Base UI render composition. isActive defaults to false/absent and only adds aria-current and styling. Ellipsis is hidden from assistive technology. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Pagination><PaginationContent><PaginationItem><PaginationPrevious onClick={() => console.log(\"Previous requested\")} /></PaginationItem><PaginationItem><PaginationLink href=\"?page=1\" isActive>1</PaginationLink></PaginationItem><PaginationItem><PaginationEllipsis /></PaginationItem><PaginationItem><PaginationNext onClick={() => console.log(\"Next requested\")} /></PaginationItem></PaginationContent></Pagination>);\n * }\n * ```\n */\nconst PaginationContent = forwardRef<ComponentRef<'ul'>, ComponentPropsWithoutRef<'ul'>>(\n  ({ className, ...props }, ref) => (\n    <ul ref={ref} className={cn('flex flex-row items-center gap-1', className)} {...props} />\n  ),\n);\nPaginationContent.displayName = 'PaginationContent';\n\n/**\n * Renders one pagination list item.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered PaginationItem composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns page state, destinations, loading and boundary disabling. Previous/Next are Buttons rather than anchors; use onClick or Base UI render composition. isActive defaults to false/absent and only adds aria-current and styling. Ellipsis is hidden from assistive technology. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Pagination><PaginationContent><PaginationItem><PaginationPrevious onClick={() => console.log(\"Previous requested\")} /></PaginationItem><PaginationItem><PaginationLink href=\"?page=1\" isActive>1</PaginationLink></PaginationItem><PaginationItem><PaginationEllipsis /></PaginationItem><PaginationItem><PaginationNext onClick={() => console.log(\"Next requested\")} /></PaginationItem></PaginationContent></Pagination>);\n * }\n * ```\n */\nconst PaginationItem = forwardRef<ComponentRef<'li'>, ComponentPropsWithoutRef<'li'>>(\n  ({ className, ...props }, ref) => <li ref={ref} className={cn('', className)} {...props} />,\n);\nPaginationItem.displayName = 'PaginationItem';\n\n/**\n * Native anchor attributes and current-page styling for PaginationLink.\n * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.\n * @see PaginationLink\n */\ntype PaginationLinkProps = ComponentPropsWithoutRef<'a'> & {\n  /**\n   * Adds current-page styling and aria-current=page when true; absent means inactive.\n   */\n  isActive?: boolean;\n};\n\n/**\n * Renders a page anchor with optional current-page styling and aria-current.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered PaginationLink composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns page state, destinations, loading and boundary disabling. Previous/Next are Buttons rather than anchors; use onClick or Base UI render composition. isActive defaults to false/absent and only adds aria-current and styling. Ellipsis is hidden from assistive technology.\n * @example\n * ```tsx\n * import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Pagination><PaginationContent><PaginationItem><PaginationPrevious onClick={() => console.log(\"Previous requested\")} /></PaginationItem><PaginationItem><PaginationLink href=\"?page=1\" isActive>1</PaginationLink></PaginationItem><PaginationItem><PaginationEllipsis /></PaginationItem><PaginationItem><PaginationNext onClick={() => console.log(\"Next requested\")} /></PaginationItem></PaginationContent></Pagination>);\n * }\n * ```\n */\nconst PaginationLink = ({ className, isActive, ...props }: PaginationLinkProps) => (\n  <a\n    aria-current={isActive ? 'page' : undefined}\n    className={cn(\n      'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n      isActive || 'hover:bg-accent hover:text-accent-foreground',\n      isActive && 'bg-accent text-accent-foreground',\n      className,\n    )}\n    {...props}\n  />\n);\nPaginationLink.displayName = 'PaginationLink';\n\n/**\n * Renders a previous-page Button with a chevron and fixed English text.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered PaginationPrevious composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns page state, destinations, loading and boundary disabling. Previous/Next are Buttons rather than anchors; use onClick or Base UI render composition. isActive defaults to false/absent and only adds aria-current and styling. Ellipsis is hidden from assistive technology. The ref prop forwards to the rendered control or container declared by the component ref type.  children are replaced by the fixed icon and English Previous/Next label.\n * @example\n * ```tsx\n * import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Pagination><PaginationContent><PaginationItem><PaginationPrevious onClick={() => console.log(\"Previous requested\")} /></PaginationItem><PaginationItem><PaginationLink href=\"?page=1\" isActive>1</PaginationLink></PaginationItem><PaginationItem><PaginationEllipsis /></PaginationItem><PaginationItem><PaginationNext onClick={() => console.log(\"Next requested\")} /></PaginationItem></PaginationContent></Pagination>);\n * }\n * ```\n */\nconst PaginationPrevious = forwardRef<\n  ComponentRef<typeof Button>,\n  ComponentPropsWithoutRef<typeof Button>\n>(({ className, ...props }, ref) => (\n  <Button\n    ref={ref}\n    aria-label='Go to previous page'\n    size='default'\n    variant='ghost'\n    className={cn('gap-1 pl-2.5', className)}\n    {...props}\n  >\n    <ChevronLeft className='h-4 w-4' />\n    <span>Previous</span>\n  </Button>\n));\nPaginationPrevious.displayName = 'PaginationPrevious';\n\n/**\n * Renders a next-page Button with a chevron and fixed English text.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered PaginationNext composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns page state, destinations, loading and boundary disabling. Previous/Next are Buttons rather than anchors; use onClick or Base UI render composition. isActive defaults to false/absent and only adds aria-current and styling. Ellipsis is hidden from assistive technology. The ref prop forwards to the rendered control or container declared by the component ref type.  children are replaced by the fixed icon and English Previous/Next label.\n * @example\n * ```tsx\n * import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Pagination><PaginationContent><PaginationItem><PaginationPrevious onClick={() => console.log(\"Previous requested\")} /></PaginationItem><PaginationItem><PaginationLink href=\"?page=1\" isActive>1</PaginationLink></PaginationItem><PaginationItem><PaginationEllipsis /></PaginationItem><PaginationItem><PaginationNext onClick={() => console.log(\"Next requested\")} /></PaginationItem></PaginationContent></Pagination>);\n * }\n * ```\n */\nconst PaginationNext = forwardRef<\n  ComponentRef<typeof Button>,\n  ComponentPropsWithoutRef<typeof Button>\n>(({ className, ...props }, ref) => (\n  <Button\n    ref={ref}\n    aria-label='Go to next page'\n    size='default'\n    variant='ghost'\n    className={cn('gap-1 pr-2.5', className)}\n    {...props}\n  >\n    <span>Next</span>\n    <ChevronRight className='h-4 w-4' />\n  </Button>\n));\nPaginationNext.displayName = 'PaginationNext';\n\n/**\n * Renders a decorative omitted-pages marker.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered PaginationEllipsis composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns page state, destinations, loading and boundary disabling. Previous/Next are Buttons rather than anchors; use onClick or Base UI render composition. isActive defaults to false/absent and only adds aria-current and styling. Ellipsis is hidden from assistive technology.\n * @example\n * ```tsx\n * import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Pagination><PaginationContent><PaginationItem><PaginationPrevious onClick={() => console.log(\"Previous requested\")} /></PaginationItem><PaginationItem><PaginationLink href=\"?page=1\" isActive>1</PaginationLink></PaginationItem><PaginationItem><PaginationEllipsis /></PaginationItem><PaginationItem><PaginationNext onClick={() => console.log(\"Next requested\")} /></PaginationItem></PaginationContent></Pagination>);\n * }\n * ```\n */\nconst PaginationEllipsis = ({ className, ...props }: ComponentPropsWithoutRef<'span'>) => (\n  <span\n    aria-hidden\n    className={cn('flex h-9 w-9 items-center justify-center', className)}\n    {...props}\n  >\n    <MoreHorizontal className='h-4 w-4' />\n    <span className='sr-only'>More pages</span>\n  </span>\n);\nPaginationEllipsis.displayName = 'PaginationEllipsis';\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n};\n"],"mappings":"A,4OAqBA,IAAMW,GAAA,EAAaX,EAAAA,WAAAA,EAChB,CAAE,YAAW,GAAGY,GAAS,KACxB,EAAAJ,EAAA,IAAA,CAAC,MAAD,CACO,MACL,KAAK,aACL,aAAW,aACX,UAAWP,EAAAA,GAAG,qCAAsCY,CAAS,EAC7D,GAAID,CACL,CAAA,CAEL,EACA,EAAW,YAAc,aAiBzB,IAAME,GAAA,EAAoBd,EAAAA,WAAAA,EACvB,CAAE,YAAW,GAAGY,GAAS,KACxB,EAAAJ,EAAA,IAAA,CAAC,KAAD,CAAS,MAAK,UAAWP,EAAAA,GAAG,mCAAoCY,CAAS,EAAG,GAAID,CAAQ,CAAA,CAE5F,EACA,EAAkB,YAAc,oBAiBhC,IAAMG,GAAA,EAAiBf,EAAAA,WAAAA,EACpB,CAAE,YAAW,GAAGY,GAAS,KAAQ,EAAAJ,EAAA,IAAA,CAAC,KAAD,CAAS,MAAK,UAAWP,EAAAA,GAAG,GAAIY,CAAS,EAAG,GAAID,CAAQ,CAAA,CAC5F,EACA,EAAe,YAAc,iBA6B7B,IAAMI,GAAkB,CAAE,YAAW,WAAU,GAAGJ,MAChD,EAAAJ,EAAA,IAAA,CAAC,IAAD,CACE,eAAcS,EAAW,OAAS,IAAA,GAClC,UAAWhB,EAAAA,GACT,yRACAgB,GAAY,+CACZA,GAAY,mCACZJ,CACF,EACA,GAAID,CACL,CAAA,EAEH,EAAe,YAAc,iBAiB7B,IAAMM,GAAA,EAAqBlB,EAAAA,WAAAA,EAGxB,CAAE,YAAW,GAAGY,GAAS,KAC1B,EAAAJ,EAAA,KAAA,CAACN,EAAAA,OAAD,CACO,MACL,aAAW,sBACX,KAAK,UACL,QAAQ,QACR,UAAWD,EAAAA,GAAG,eAAgBY,CAAS,EACvC,GAAID,EANN,SAAA,EAQE,EAAAJ,EAAA,IAAA,CAACL,EAAAA,YAAD,CAAa,UAAU,SAAW,CAAA,GAClC,EAAAK,EAAA,IAAA,CAAC,OAAD,CAAA,SAAM,UAAc,CAAA,CACd,CACT,CAAA,CAAA,EACD,EAAmB,YAAc,qBAiBjC,IAAMW,GAAA,EAAiBnB,EAAAA,WAAAA,EAGpB,CAAE,YAAW,GAAGY,GAAS,KAC1B,EAAAJ,EAAA,KAAA,CAACN,EAAAA,OAAD,CACO,MACL,aAAW,kBACX,KAAK,UACL,QAAQ,QACR,UAAWD,EAAAA,GAAG,eAAgBY,CAAS,EACvC,GAAID,EANN,SAAA,EAQE,EAAAJ,EAAA,IAAA,CAAC,OAAD,CAAA,SAAM,MAAU,CAAA,GAChB,EAAAA,EAAA,IAAA,CAACJ,EAAAA,aAAD,CAAc,UAAU,SAAW,CAAA,CAC7B,CACT,CAAA,CAAA,EACD,EAAe,YAAc,iBAiB7B,IAAMgB,GAAsB,CAAE,YAAW,GAAGR,MAC1C,EAAAJ,EAAA,KAAA,CAAC,OAAD,CACE,cAAA,GACA,UAAWP,EAAAA,GAAG,2CAA4CY,CAAS,EACnE,GAAID,EAHN,SAAA,EAKE,EAAAJ,EAAA,IAAA,CAACH,EAAAA,eAAD,CAAgB,UAAU,SAAW,CAAA,GACrC,EAAAG,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,UAAU,SAAA,YAAgB,CAAA,CACtC,C,GAER,EAAmB,YAAc,qB"}
+{"version":3,"file":"pagination.cjs","names":["cn","Button","ChevronLeft","ChevronRight","MoreHorizontal","require_ui_lib_utils","require_ui_components_ui_button_components","react_jsx_runtime","lucide_react","Pagination","props","className","PaginationContent","PaginationItem","PaginationLink","isActive","PaginationPrevious","PaginationNext","PaginationEllipsis"],"sources":["../../../../src/ui/components/ui/pagination.tsx"],"sourcesContent":["import { type PropsWithoutRef, type RefAttributes, type ComponentPropsWithoutRef, type ComponentRef } from 'react';\nimport { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';\n\nimport { cn } from '../../lib/utils';\nimport { Button } from './button';\n\n/**\n * Renders the navigation landmark containing host-managed page controls.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered Pagination composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns page state, destinations, loading and boundary disabling. Previous/Next are Buttons rather than anchors; use onClick or Base UI render composition. isActive defaults to false/absent and only adds aria-current and styling. Ellipsis is hidden from assistive technology. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Pagination><PaginationContent><PaginationItem><PaginationPrevious onClick={() => console.log(\"Previous requested\")} /></PaginationItem><PaginationItem><PaginationLink href=\"?page=1\" isActive>1</PaginationLink></PaginationItem><PaginationItem><PaginationEllipsis /></PaginationItem><PaginationItem><PaginationNext onClick={() => console.log(\"Next requested\")} /></PaginationItem></PaginationContent></Pagination>);\n * }\n * ```\n */\nfunction Pagination({\n  ref,\n  className,\n  ...props\n}: PropsWithoutRef<ComponentPropsWithoutRef<'nav'>> & RefAttributes<ComponentRef<'nav'>>) {\n  return (\n    <nav\n      ref={ref}\n      role='navigation'\n      aria-label='pagination'\n      className={cn('mx-auto flex w-full justify-center', className)}\n      {...props}\n    />\n  );\n}\nPagination.displayName = 'Pagination';\n\n/**\n * Lays out pagination items in a horizontal unordered list.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered PaginationContent composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns page state, destinations, loading and boundary disabling. Previous/Next are Buttons rather than anchors; use onClick or Base UI render composition. isActive defaults to false/absent and only adds aria-current and styling. Ellipsis is hidden from assistive technology. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Pagination><PaginationContent><PaginationItem><PaginationPrevious onClick={() => console.log(\"Previous requested\")} /></PaginationItem><PaginationItem><PaginationLink href=\"?page=1\" isActive>1</PaginationLink></PaginationItem><PaginationItem><PaginationEllipsis /></PaginationItem><PaginationItem><PaginationNext onClick={() => console.log(\"Next requested\")} /></PaginationItem></PaginationContent></Pagination>);\n * }\n * ```\n */\nfunction PaginationContent({\n  ref,\n  className,\n  ...props\n}: PropsWithoutRef<ComponentPropsWithoutRef<'ul'>> & RefAttributes<ComponentRef<'ul'>>) {\n  return <ul ref={ref} className={cn('flex flex-row items-center gap-1', className)} {...props} />;\n}\nPaginationContent.displayName = 'PaginationContent';\n\n/**\n * Renders one pagination list item.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered PaginationItem composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns page state, destinations, loading and boundary disabling. Previous/Next are Buttons rather than anchors; use onClick or Base UI render composition. isActive defaults to false/absent and only adds aria-current and styling. Ellipsis is hidden from assistive technology. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Pagination><PaginationContent><PaginationItem><PaginationPrevious onClick={() => console.log(\"Previous requested\")} /></PaginationItem><PaginationItem><PaginationLink href=\"?page=1\" isActive>1</PaginationLink></PaginationItem><PaginationItem><PaginationEllipsis /></PaginationItem><PaginationItem><PaginationNext onClick={() => console.log(\"Next requested\")} /></PaginationItem></PaginationContent></Pagination>);\n * }\n * ```\n */\nfunction PaginationItem({\n  ref,\n  className,\n  ...props\n}: PropsWithoutRef<ComponentPropsWithoutRef<'li'>> & RefAttributes<ComponentRef<'li'>>) {\n  return <li ref={ref} className={cn('', className)} {...props} />;\n}\nPaginationItem.displayName = 'PaginationItem';\n\n/**\n * Native anchor attributes and current-page styling for PaginationLink.\n * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.\n * @see PaginationLink\n */\ntype PaginationLinkProps = ComponentPropsWithoutRef<'a'> & {\n  /**\n   * Adds current-page styling and aria-current=page when true; absent means inactive.\n   */\n  isActive?: boolean;\n};\n\n/**\n * Renders a page anchor with optional current-page styling and aria-current.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered PaginationLink composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns page state, destinations, loading and boundary disabling. Previous/Next are Buttons rather than anchors; use onClick or Base UI render composition. isActive defaults to false/absent and only adds aria-current and styling. Ellipsis is hidden from assistive technology.\n * @example\n * ```tsx\n * import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Pagination><PaginationContent><PaginationItem><PaginationPrevious onClick={() => console.log(\"Previous requested\")} /></PaginationItem><PaginationItem><PaginationLink href=\"?page=1\" isActive>1</PaginationLink></PaginationItem><PaginationItem><PaginationEllipsis /></PaginationItem><PaginationItem><PaginationNext onClick={() => console.log(\"Next requested\")} /></PaginationItem></PaginationContent></Pagination>);\n * }\n * ```\n */\nconst PaginationLink = ({ className, isActive, ...props }: PaginationLinkProps) => (\n  <a\n    aria-current={isActive ? 'page' : undefined}\n    className={cn(\n      'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n      isActive || 'hover:bg-accent hover:text-accent-foreground',\n      isActive && 'bg-accent text-accent-foreground',\n      className,\n    )}\n    {...props}\n  />\n);\nPaginationLink.displayName = 'PaginationLink';\n\n/**\n * Renders a previous-page Button with a chevron and fixed English text.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered PaginationPrevious composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns page state, destinations, loading and boundary disabling. Previous/Next are Buttons rather than anchors; use onClick or Base UI render composition. isActive defaults to false/absent and only adds aria-current and styling. Ellipsis is hidden from assistive technology. The ref prop forwards to the rendered control or container declared by the component ref type.  children are replaced by the fixed icon and English Previous/Next label.\n * @example\n * ```tsx\n * import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Pagination><PaginationContent><PaginationItem><PaginationPrevious onClick={() => console.log(\"Previous requested\")} /></PaginationItem><PaginationItem><PaginationLink href=\"?page=1\" isActive>1</PaginationLink></PaginationItem><PaginationItem><PaginationEllipsis /></PaginationItem><PaginationItem><PaginationNext onClick={() => console.log(\"Next requested\")} /></PaginationItem></PaginationContent></Pagination>);\n * }\n * ```\n */\nfunction PaginationPrevious({\n  ref,\n  className,\n  ...props\n}: PropsWithoutRef<ComponentPropsWithoutRef<typeof Button>> &\n  RefAttributes<ComponentRef<typeof Button>>) {\n  return (\n    <Button\n      ref={ref}\n      aria-label='Go to previous page'\n      size='default'\n      variant='ghost'\n      className={cn('gap-1 pl-2.5', className)}\n      {...props}\n    >\n      <ChevronLeft className='h-4 w-4' />\n      <span>Previous</span>\n    </Button>\n  );\n}\nPaginationPrevious.displayName = 'PaginationPrevious';\n\n/**\n * Renders a next-page Button with a chevron and fixed English text.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered PaginationNext composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns page state, destinations, loading and boundary disabling. Previous/Next are Buttons rather than anchors; use onClick or Base UI render composition. isActive defaults to false/absent and only adds aria-current and styling. Ellipsis is hidden from assistive technology. The ref prop forwards to the rendered control or container declared by the component ref type.  children are replaced by the fixed icon and English Previous/Next label.\n * @example\n * ```tsx\n * import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Pagination><PaginationContent><PaginationItem><PaginationPrevious onClick={() => console.log(\"Previous requested\")} /></PaginationItem><PaginationItem><PaginationLink href=\"?page=1\" isActive>1</PaginationLink></PaginationItem><PaginationItem><PaginationEllipsis /></PaginationItem><PaginationItem><PaginationNext onClick={() => console.log(\"Next requested\")} /></PaginationItem></PaginationContent></Pagination>);\n * }\n * ```\n */\nfunction PaginationNext({\n  ref,\n  className,\n  ...props\n}: PropsWithoutRef<ComponentPropsWithoutRef<typeof Button>> &\n  RefAttributes<ComponentRef<typeof Button>>) {\n  return (\n    <Button\n      ref={ref}\n      aria-label='Go to next page'\n      size='default'\n      variant='ghost'\n      className={cn('gap-1 pr-2.5', className)}\n      {...props}\n    >\n      <span>Next</span>\n      <ChevronRight className='h-4 w-4' />\n    </Button>\n  );\n}\nPaginationNext.displayName = 'PaginationNext';\n\n/**\n * Renders a decorative omitted-pages marker.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered PaginationEllipsis composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns page state, destinations, loading and boundary disabling. Previous/Next are Buttons rather than anchors; use onClick or Base UI render composition. isActive defaults to false/absent and only adds aria-current and styling. Ellipsis is hidden from assistive technology.\n * @example\n * ```tsx\n * import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Pagination><PaginationContent><PaginationItem><PaginationPrevious onClick={() => console.log(\"Previous requested\")} /></PaginationItem><PaginationItem><PaginationLink href=\"?page=1\" isActive>1</PaginationLink></PaginationItem><PaginationItem><PaginationEllipsis /></PaginationItem><PaginationItem><PaginationNext onClick={() => console.log(\"Next requested\")} /></PaginationItem></PaginationContent></Pagination>);\n * }\n * ```\n */\nconst PaginationEllipsis = ({ className, ...props }: ComponentPropsWithoutRef<'span'>) => (\n  <span\n    aria-hidden\n    className={cn('flex h-9 w-9 items-center justify-center', className)}\n    {...props}\n  >\n    <MoreHorizontal className='h-4 w-4' />\n    <span className='sr-only'>More pages</span>\n  </span>\n);\nPaginationEllipsis.displayName = 'PaginationEllipsis';\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n};\n"],"mappings":"A,yNAqBA,SAASS,EAAW,CAClB,MACA,YACA,GAAGC,GACqF,CACxF,OACE,EAAAH,EAAA,IAAA,CAAC,MAAD,CACO,MACL,KAAK,aACL,aAAW,aACX,UAAWP,EAAAA,GAAG,qCAAsCW,CAAS,EAC7D,GAAID,CACL,CAAA,CAEL,CACA,EAAW,YAAc,aAiBzB,SAASE,EAAkB,CACzB,MACA,YACA,GAAGF,GACmF,CACtF,OAAO,EAAAH,EAAA,IAAA,CAAC,KAAD,CAAS,MAAK,UAAWP,EAAAA,GAAG,mCAAoCW,CAAS,EAAG,GAAID,CAAQ,CAAA,CACjG,CACA,EAAkB,YAAc,oBAiBhC,SAASG,EAAe,CACtB,MACA,YACA,GAAGH,GACmF,CACtF,OAAO,EAAAH,EAAA,IAAA,CAAC,KAAD,CAAS,MAAK,UAAWP,EAAAA,GAAG,GAAIW,CAAS,EAAG,GAAID,CAAQ,CAAA,CACjE,CACA,EAAe,YAAc,iBA6B7B,IAAMI,GAAkB,CAAE,YAAW,WAAU,GAAGJ,MAChD,EAAAH,EAAA,IAAA,CAAC,IAAD,CACE,eAAcQ,EAAW,OAAS,IAAA,GAClC,UAAWf,EAAAA,GACT,yRACAe,GAAY,+CACZA,GAAY,mCACZJ,CACF,EACA,GAAID,CACL,CAAA,EAEH,EAAe,YAAc,iBAiB7B,SAASM,EAAmB,CAC1B,MACA,YACA,GAAGN,GAEyC,CAC5C,OACE,EAAAH,EAAA,KAAA,CAACN,EAAAA,OAAD,CACO,MACL,aAAW,sBACX,KAAK,UACL,QAAQ,QACR,UAAWD,EAAAA,GAAG,eAAgBW,CAAS,EACvC,GAAID,EANN,SAAA,EAQE,EAAAH,EAAA,IAAA,CAACL,EAAAA,YAAD,CAAa,UAAU,SAAW,CAAA,GAClC,EAAAK,EAAA,IAAA,CAAC,OAAD,CAAA,SAAM,UAAc,CAAA,CACd,C,EAEZ,CACA,EAAmB,YAAc,qBAiBjC,SAASU,EAAe,CACtB,MACA,YACA,GAAGP,GAEyC,CAC5C,OACE,EAAAH,EAAA,KAAA,CAACN,EAAAA,OAAD,CACO,MACL,aAAW,kBACX,KAAK,UACL,QAAQ,QACR,UAAWD,EAAAA,GAAG,eAAgBW,CAAS,EACvC,GAAID,EANN,SAAA,EAQE,EAAAH,EAAA,IAAA,CAAC,OAAD,CAAA,SAAM,MAAU,CAAA,GAChB,EAAAA,EAAA,IAAA,CAACJ,EAAAA,aAAD,CAAc,UAAU,SAAW,CAAA,CAC7B,C,EAEZ,CACA,EAAe,YAAc,iBAiB7B,IAAMe,GAAsB,CAAE,YAAW,GAAGR,MAC1C,EAAAH,EAAA,KAAA,CAAC,OAAD,CACE,cAAA,GACA,UAAWP,EAAAA,GAAG,2CAA4CW,CAAS,EACnE,GAAID,EAHN,SAAA,EAKE,EAAAH,EAAA,IAAA,CAACH,EAAAA,eAAD,CAAgB,UAAU,SAAW,CAAA,GACrC,EAAAG,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,UAAU,SAAA,YAAgB,CAAA,CACtC,C,GAER,EAAmB,YAAc,qB"}

package/dist/ui/components/ui/pagination.d.cts

@@ -1,4 +1,5 @@
-import { ComponentPropsWithoutRef } from 'react';
+import { PropsWithoutRef, RefAttributes, ComponentPropsWithoutRef, ComponentRef } from 'react';
+import { Button } from './button.cjs';
 /**
  * Renders the navigation landmark containing host-managed page controls.
  * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.
@@ -14,7 +15,10 @@ import { ComponentPropsWithoutRef } from 'react';
  * }
  * ```
  */
-declare const Pagination: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import('react').RefAttributes<HTMLElement>>;
+declare function Pagination({ ref, className, ...props }: PropsWithoutRef<ComponentPropsWithoutRef<'nav'>> & RefAttributes<ComponentRef<'nav'>>): import('react').JSX.Element;
+declare namespace Pagination {
+    var displayName: string;
+}
 /**
  * Lays out pagination items in a horizontal unordered list.
  * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.
@@ -30,7 +34,10 @@ declare const Pagination: import('react').ForwardRefExoticComponent<Omit<import(
  * }
  * ```
  */
-declare const PaginationContent: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & import('react').RefAttributes<HTMLUListElement>>;
+declare function PaginationContent({ ref, className, ...props }: PropsWithoutRef<ComponentPropsWithoutRef<'ul'>> & RefAttributes<ComponentRef<'ul'>>): import('react').JSX.Element;
+declare namespace PaginationContent {
+    var displayName: string;
+}
 /**
  * Renders one pagination list item.
  * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.
@@ -46,7 +53,10 @@ declare const PaginationContent: import('react').ForwardRefExoticComponent<Omit<
  * }
  * ```
  */
-declare const PaginationItem: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & import('react').RefAttributes<HTMLLIElement>>;
+declare function PaginationItem({ ref, className, ...props }: PropsWithoutRef<ComponentPropsWithoutRef<'li'>> & RefAttributes<ComponentRef<'li'>>): import('react').JSX.Element;
+declare namespace PaginationItem {
+    var displayName: string;
+}
 /**
  * Native anchor attributes and current-page styling for PaginationLink.
  * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.
@@ -92,7 +102,10 @@ declare const PaginationLink: {
  * }
  * ```
  */
-declare const PaginationPrevious: import('react').ForwardRefExoticComponent<Omit<Omit<import('./button-components.cjs').ButtonProps, "ref"> & import('react').RefAttributes<HTMLElement>, "ref"> & import('react').RefAttributes<HTMLElement>>;
+declare function PaginationPrevious({ ref, className, ...props }: PropsWithoutRef<ComponentPropsWithoutRef<typeof Button>> & RefAttributes<ComponentRef<typeof Button>>): import('react').JSX.Element;
+declare namespace PaginationPrevious {
+    var displayName: string;
+}
 /**
  * Renders a next-page Button with a chevron and fixed English text.
  * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.
@@ -108,7 +121,10 @@ declare const PaginationPrevious: import('react').ForwardRefExoticComponent<Omit
  * }
  * ```
  */
-declare const PaginationNext: import('react').ForwardRefExoticComponent<Omit<Omit<import('./button-components.cjs').ButtonProps, "ref"> & import('react').RefAttributes<HTMLElement>, "ref"> & import('react').RefAttributes<HTMLElement>>;
+declare function PaginationNext({ ref, className, ...props }: PropsWithoutRef<ComponentPropsWithoutRef<typeof Button>> & RefAttributes<ComponentRef<typeof Button>>): import('react').JSX.Element;
+declare namespace PaginationNext {
+    var displayName: string;
+}
 /**
  * Renders a decorative omitted-pages marker.
  * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.