@forthtilliath/forth-ui 0.2.0

package/dist/components/multi-step-loader/multi-step-loader.d.ts

@@ -0,0 +1,41 @@
+import * as React from "react";
+export interface LoadingState {
+    text: string;
+}
+export interface MultiStepLoaderProps {
+    /** The sequence of messages to display, one at a time. */
+    loadingStates: LoadingState[];
+    /** Whether the overlay is shown at all. */
+    loading: boolean;
+    /**
+     * Milliseconds between each state transition.
+     * @default 2000
+     */
+    duration?: number;
+    /**
+     * Restarts from the first state after reaching the last one.
+     * @default true
+     */
+    loop?: boolean;
+    /**
+     * Controls which state is active by index, instead of advancing on a
+     * timer — pairs with real progress you're already tracking (e.g. one
+     * state per upload/step actually completing).
+     */
+    value?: number;
+    className?: string;
+}
+/**
+ * A full-screen overlay stepping through a sequence of loading messages —
+ * for operations that take long enough that a single spinner reads as
+ * stuck (multi-stage setup wizards, long uploads, batch processing).
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://ui.aceternity.com/components/multi-step-loader
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export declare function MultiStepLoader({ loadingStates, loading, duration, loop, value, className, }: MultiStepLoaderProps): React.JSX.Element | null;
+//# sourceMappingURL=multi-step-loader.d.ts.map

package/dist/components/multi-step-loader/multi-step-loader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-step-loader.d.ts","sourceRoot":"","sources":["../../../src/components/multi-step-loader/multi-step-loader.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,oBAAoB;IACnC,0DAA0D;IAC1D,aAAa,EAAE,YAAY,EAAE,CAAC;IAC9B,2CAA2C;IAC3C,OAAO,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,eAAe,CAAC,EAC9B,aAAa,EACb,OAAO,EACP,QAAe,EACf,IAAW,EACX,KAAK,EACL,SAAS,GACV,EAAE,oBAAoB,4BAuEtB"}

package/dist/components/multi-step-loader/multi-step-loader.js

@@ -0,0 +1,53 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { CheckIcon } from "lucide-react";
+import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
+import { Spinner } from "../spinner";
+/**
+ * A full-screen overlay stepping through a sequence of loading messages —
+ * for operations that take long enough that a single spinner reads as
+ * stuck (multi-stage setup wizards, long uploads, batch processing).
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://ui.aceternity.com/components/multi-step-loader
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export function MultiStepLoader({ loadingStates, loading, duration = 2000, loop = true, value, className, }) {
+    const [currentState, setCurrentState] = React.useState(0);
+    const isControlled = value !== undefined;
+    // Reset to the first state whenever `loading` flips, adjusted during
+    // render (React's documented pattern for this) rather than in an effect,
+    // which would cause an extra cascading render.
+    const [prevLoading, setPrevLoading] = React.useState(loading);
+    if (loading !== prevLoading) {
+        setPrevLoading(loading);
+        if (loading) {
+            setCurrentState(0);
+        }
+    }
+    React.useEffect(() => {
+        if (!loading || isControlled) {
+            return;
+        }
+        const interval = setInterval(() => {
+            setCurrentState((previous) => {
+                if (previous === loadingStates.length - 1) {
+                    return loop ? 0 : previous;
+                }
+                return previous + 1;
+            });
+        }, duration);
+        return () => {
+            clearInterval(interval);
+        };
+    }, [loading, isControlled, duration, loop, loadingStates.length]);
+    if (!loading) {
+        return null;
+    }
+    const activeIndex = value ?? currentState;
+    return (_jsx("div", { role: "status", "aria-live": "polite", className: cn("bg-background/80 fixed inset-0 z-50 flex items-center justify-center backdrop-blur-sm", className), children: _jsx("div", { className: "flex flex-col gap-3", children: loadingStates.map((state, index) => (_jsxs("div", { className: cn("flex items-center gap-2 text-sm", index < activeIndex && "text-muted-foreground line-through", index === activeIndex && "text-foreground font-medium", index > activeIndex && "text-muted-foreground/50"), children: [index < activeIndex ? (_jsx(CheckIcon, { className: "size-4 text-green-600" })) : index === activeIndex ? (_jsx(Spinner, { size: "sm" })) : (_jsx("span", { className: "size-4" })), state.text] }, state.text))) }) }));
+}

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

@@ -0,0 +1,5 @@
+export type { NavbarProps } from "./navbar";
+export { Navbar } from "./navbar";
+export type { NavbarMobileMenuItem, NavbarMobileMenuProps, } from "./navbar-mobile-menu";
+export { NavbarMobileMenu } from "./navbar-mobile-menu";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/navbar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/navbar/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EACV,oBAAoB,EACpB,qBAAqB,GACtB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/components/navbar/index.js

@@ -0,0 +1,2 @@
+export { Navbar } from "./navbar";
+export { NavbarMobileMenu } from "./navbar-mobile-menu";

package/dist/components/navbar/navbar-mobile-menu.d.ts

@@ -0,0 +1,24 @@
+import type * as React from "react";
+export interface NavbarMobileMenuItem {
+    label: React.ReactNode;
+    href: string;
+}
+export interface NavbarMobileMenuProps {
+    items: NavbarMobileMenuItem[];
+    /** Extra content rendered below the links (e.g. auth buttons). */
+    footer?: React.ReactNode;
+    className?: string;
+    /** Visible only below this breakpoint's prefix (Tailwind's `md` by default). @default "md" */
+    hideFrom?: "sm" | "md" | "lg";
+}
+/**
+ * A hamburger-triggered slide-down panel for a `Navbar`'s links on small
+ * screens — pairs with `Navbar`, consolidating aceternity's
+ * MobileNavToggle/MobileNavMenu pair into one component.
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export declare function NavbarMobileMenu({ items, footer, className, hideFrom, }: NavbarMobileMenuProps): React.JSX.Element;
+//# sourceMappingURL=navbar-mobile-menu.d.ts.map

package/dist/components/navbar/navbar-mobile-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navbar-mobile-menu.d.ts","sourceRoot":"","sources":["../../../src/components/navbar/navbar-mobile-menu.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAWpC,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,oBAAoB,EAAE,CAAC;IAC9B,kEAAkE;IAClE,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8FAA8F;IAC9F,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC/B;AAED;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,MAAM,EACN,SAAS,EACT,QAAe,GAChB,EAAE,qBAAqB,qBAkCvB"}

package/dist/components/navbar/navbar-mobile-menu.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MenuIcon } from "lucide-react";
+import { Button } from "@forthtilliath/shadcn-ui/components/button";
+import { Sheet, SheetContent, SheetTrigger, } from "@forthtilliath/shadcn-ui/components/sheet";
+import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
+/**
+ * A hamburger-triggered slide-down panel for a `Navbar`'s links on small
+ * screens — pairs with `Navbar`, consolidating aceternity's
+ * MobileNavToggle/MobileNavMenu pair into one component.
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export function NavbarMobileMenu({ items, footer, className, hideFrom = "md", }) {
+    return (_jsxs(Sheet, { children: [_jsx(SheetTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", "aria-label": "Toggle menu", className: cn(hideFrom === "sm" && "sm:hidden", hideFrom === "md" && "md:hidden", hideFrom === "lg" && "lg:hidden", className), children: _jsx(MenuIcon, {}) }) }), _jsxs(SheetContent, { side: "top", children: [_jsx("nav", { className: "flex flex-col gap-1 pt-8", children: items.map((item) => (_jsx("a", { href: item.href, className: "hover:bg-accent hover:text-accent-foreground rounded-md px-3 py-2 text-sm", children: item.label }, item.href))) }), footer] })] }));
+}

package/dist/components/navbar/navbar.d.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+export type NavbarProps = React.ComponentProps<"header"> & {
+    /**
+     * Scroll distance (px) past which the "scrolled" styling (border,
+     * blurred background, shrunk width) kicks in.
+     * @default 20
+     */
+    shrinkOffset?: number;
+};
+/**
+ * A fixed, floating page header that visually shrinks and gains a
+ * background/border once the page scrolls — style the `data-scrolled`
+ * attribute to customize the transition (a default is provided).
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://ui.shadcn.com/docs/components/navigation-menu
+ * @see https://ui.aceternity.com/components/resizable-navbar
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export declare function Navbar({ shrinkOffset, className, children, ...props }: NavbarProps): React.JSX.Element;
+//# sourceMappingURL=navbar.d.ts.map

package/dist/components/navbar/navbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navbar.d.ts","sourceRoot":"","sources":["../../../src/components/navbar/navbar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAAG;IACzD;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAIF;;;;;;;;;;;;GAYG;AACH,wBAAgB,MAAM,CAAC,EACrB,YAAoC,EACpC,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,WAAW,qBA6Bb"}

package/dist/components/navbar/navbar.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
+const DEFAULT_SHRINK_OFFSET = 20;
+/**
+ * A fixed, floating page header that visually shrinks and gains a
+ * background/border once the page scrolls — style the `data-scrolled`
+ * attribute to customize the transition (a default is provided).
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://ui.shadcn.com/docs/components/navigation-menu
+ * @see https://ui.aceternity.com/components/resizable-navbar
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export function Navbar({ shrinkOffset = DEFAULT_SHRINK_OFFSET, className, children, ...props }) {
+    const [scrolled, setScrolled] = React.useState(false);
+    React.useEffect(() => {
+        function onScroll() {
+            // eslint-disable-next-line @eslint-react/set-state-in-effect -- initial synchronous read of the external scroll position, unavoidable for a subscription with no server-renderable equivalent
+            setScrolled(window.scrollY > shrinkOffset);
+        }
+        onScroll();
+        window.addEventListener("scroll", onScroll, { passive: true });
+        return () => {
+            window.removeEventListener("scroll", onScroll);
+        };
+    }, [shrinkOffset]);
+    return (_jsx("header", { "data-slot": "navbar", "data-scrolled": scrolled, className: cn("fixed inset-x-0 top-4 z-50 mx-auto flex w-[calc(100%-2rem)] max-w-5xl items-center justify-between rounded-full border border-transparent px-4 py-2 transition-all duration-300", "data-[scrolled=true]:bg-background/80 data-[scrolled=true]:border-border data-[scrolled=true]:max-w-3xl data-[scrolled=true]:shadow-md data-[scrolled=true]:backdrop-blur-md", className), ...props, children: children }));
+}

package/dist/components/notification-center/index.d.ts

@@ -0,0 +1,3 @@
+export type { NotificationCenterProps, NotificationItem, } from "./notification-center";
+export { NotificationCenter } from "./notification-center";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/notification-center/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/notification-center/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,uBAAuB,EACvB,gBAAgB,GACjB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/components/notification-center/index.js

@@ -0,0 +1 @@
+export { NotificationCenter } from "./notification-center";

package/dist/components/notification-center/notification-center.d.ts

@@ -0,0 +1,28 @@
+import type React from "react";
+export interface NotificationItem {
+    id: string;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    date?: React.ReactNode;
+    read?: boolean;
+}
+export interface NotificationCenterProps {
+    notifications: NotificationItem[];
+    onNotificationClick?: (id: string) => void;
+    onMarkAllRead?: () => void;
+    emptyMessage?: string;
+    className?: string;
+}
+/**
+ * A bell-icon trigger with an unread-count badge, opening a popover list
+ * of notifications — a presentational shell only (no push/realtime
+ * transport), since that's inherently app-specific.
+ *
+ * @see https://www.rigidui.com/docs/components/notification-center
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export declare function NotificationCenter({ notifications, onNotificationClick, onMarkAllRead, emptyMessage, className, }: NotificationCenterProps): React.JSX.Element;
+//# sourceMappingURL=notification-center.d.ts.map

package/dist/components/notification-center/notification-center.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification-center.d.ts","sourceRoot":"","sources":["../../../src/components/notification-center/notification-center.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,uBAAuB;IACtC,aAAa,EAAE,gBAAgB,EAAE,CAAC;IAClC,mBAAmB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,aAAa,EACb,mBAAmB,EACnB,aAAa,EACb,YAAiC,EACjC,SAAS,GACV,EAAE,uBAAuB,qBA2EzB"}

package/dist/components/notification-center/notification-center.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BellIcon } from "lucide-react";
+import { Popover, PopoverContent, PopoverTrigger, } from "@forthtilliath/shadcn-ui/components/popover";
+import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
+import { Badge } from "../badge";
+import { Button } from "../button";
+/**
+ * A bell-icon trigger with an unread-count badge, opening a popover list
+ * of notifications — a presentational shell only (no push/realtime
+ * transport), since that's inherently app-specific.
+ *
+ * @see https://www.rigidui.com/docs/components/notification-center
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export function NotificationCenter({ notifications, onNotificationClick, onMarkAllRead, emptyMessage = "No notifications", className, }) {
+    const unreadCount = notifications.filter((notification) => notification.read !== true).length;
+    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "icon", className: "relative", "aria-label": "Notifications", children: [_jsx(BellIcon, {}), unreadCount > 0 && (_jsx(Badge, { variant: "destructive", size: "sm", className: "absolute -top-1 -right-1 size-4 justify-center rounded-full p-0", children: unreadCount > 9 ? "9+" : unreadCount }))] }) }), _jsxs(PopoverContent, { className: cn("w-80 p-0", className), align: "end", children: [_jsxs("div", { className: "flex items-center justify-between border-b p-3", children: [_jsx("p", { className: "text-sm font-medium", children: "Notifications" }), unreadCount > 0 && onMarkAllRead !== undefined && (_jsx("button", { type: "button", onClick: onMarkAllRead, className: "text-muted-foreground hover:text-foreground text-xs", children: "Mark all as read" }))] }), _jsx("div", { className: "max-h-80 overflow-y-auto", children: notifications.length === 0 ? (_jsx("p", { className: "text-muted-foreground p-6 text-center text-sm", children: emptyMessage })) : (notifications.map((notification) => (_jsxs("button", { type: "button", onClick: () => {
+                                onNotificationClick?.(notification.id);
+                            }, className: cn("hover:bg-accent flex w-full flex-col gap-0.5 border-b p-3 text-left last:border-0", notification.read !== true && "bg-accent/40"), children: [_jsx("p", { className: "text-sm font-medium", children: notification.title }), notification.description !== undefined && (_jsx("p", { className: "text-muted-foreground text-xs", children: notification.description })), notification.date !== undefined && (_jsx("p", { className: "text-muted-foreground text-xs", children: notification.date }))] }, notification.id)))) })] })] }));
+}

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

@@ -0,0 +1,3 @@
+export type { NumberInputProps } from "./number-input";
+export { NumberInput } from "./number-input";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/number-input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/number-input/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC"}

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

@@ -0,0 +1 @@
+export { NumberInput } from "./number-input";

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

@@ -0,0 +1,22 @@
+import * as React from "react";
+export type NumberInputProps = Omit<React.ComponentProps<"input">, "type" | "value" | "defaultValue" | "onChange"> & {
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+};
+/**
+ * A numeric input with increment/decrement stepper buttons, clamped to
+ * `min`/`max`.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://www.heroui.com/docs/components/number-input
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export declare function NumberInput({ className, value, defaultValue, onValueChange, min, max, step, disabled, ...props }: NumberInputProps): React.JSX.Element;
+//# sourceMappingURL=number-input.d.ts.map

package/dist/components/number-input/number-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-input.d.ts","sourceRoot":"","sources":["../../../src/components/number-input/number-input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAC7B,MAAM,GAAG,OAAO,GAAG,cAAc,GAAG,UAAU,CAC/C,GAAG;IACF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;;;;;;;;GAUG;AACH,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,KAAK,EACL,YAAgB,EAChB,aAAa,EACb,GAAe,EACf,GAAc,EACd,IAAQ,EACR,QAAgB,EAChB,GAAG,KAAK,EACT,EAAE,gBAAgB,qBA6DlB"}

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

@@ -0,0 +1,37 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { MinusIcon, PlusIcon } from "lucide-react";
+import { Input } from "@forthtilliath/shadcn-ui/components/input";
+import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
+import { Button } from "../button";
+/**
+ * A numeric input with increment/decrement stepper buttons, clamped to
+ * `min`/`max`.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://www.heroui.com/docs/components/number-input
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export function NumberInput({ className, value, defaultValue = 0, onValueChange, min = -Infinity, max = Infinity, step = 1, disabled = false, ...props }) {
+    const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
+    const current = value ?? uncontrolledValue;
+    function commit(next) {
+        const clamped = Math.min(max, Math.max(min, next));
+        setUncontrolledValue(clamped);
+        onValueChange?.(clamped);
+    }
+    return (_jsxs("div", { "data-slot": "number-input", className: cn("flex w-fit items-stretch", className), children: [_jsx(Button, { type: "button", variant: "outline", size: "icon", disabled: disabled || current <= min, onClick: () => {
+                    commit(current - step);
+                }, "aria-label": "Decrement", className: "rounded-r-none", children: _jsx(MinusIcon, {}) }), _jsx(Input, { type: "number", inputMode: "numeric", value: current, min: min === -Infinity ? undefined : min, max: max === Infinity ? undefined : max, step: step, disabled: disabled, onChange: (e) => {
+                    const parsed = Number(e.target.value);
+                    if (!Number.isNaN(parsed)) {
+                        commit(parsed);
+                    }
+                }, className: "w-16 rounded-none text-center [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none", ...props }), _jsx(Button, { type: "button", variant: "outline", size: "icon", disabled: disabled || current >= max, onClick: () => {
+                    commit(current + step);
+                }, "aria-label": "Increment", className: "rounded-l-none", children: _jsx(PlusIcon, {}) })] }));
+}

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

@@ -0,0 +1,5 @@
+export type { PaginationProps } from "./pagination";
+export { Pagination } from "./pagination";
+export type { PaginationRangeItem, PaginationRangeOptions, } from "./pagination-range";
+export { getPaginationRange } from "./pagination-range";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EACV,mBAAmB,EACnB,sBAAsB,GACvB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/pagination/index.js

@@ -0,0 +1,2 @@
+export { Pagination } from "./pagination";
+export { getPaginationRange } from "./pagination-range";

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

@@ -0,0 +1,17 @@
+export interface PaginationRangeOptions {
+    page: number;
+    totalPages: number;
+    /** Pages shown on each side of the current page. @default 1 */
+    siblingCount?: number;
+    /** Pages always shown at the start and end. @default 1 */
+    boundaryCount?: number;
+}
+export type PaginationRangeItem = number | "ellipsis-start" | "ellipsis-end";
+/**
+ * Computes which page numbers (and where ellipses go) to render for a
+ * given current page / total page count — the piece every shadcn-ui
+ * Pagination consumer ends up re-implementing by hand, since the
+ * vendored primitives are unopinionated markup only.
+ */
+export declare function getPaginationRange({ page, totalPages, siblingCount, boundaryCount, }: PaginationRangeOptions): PaginationRangeItem[];
+//# sourceMappingURL=pagination-range.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pagination-range.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/pagination-range.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,+DAA+D;IAC/D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0DAA0D;IAC1D,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,gBAAgB,GAAG,cAAc,CAAC;AAM7E;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,UAAU,EACV,YAAgB,EAChB,aAAiB,GAClB,EAAE,sBAAsB,GAAG,mBAAmB,EAAE,CAgChD"}

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

@@ -0,0 +1,30 @@
+function range(start, end) {
+    return Array.from({ length: end - start + 1 }, (_, i) => start + i);
+}
+/**
+ * Computes which page numbers (and where ellipses go) to render for a
+ * given current page / total page count — the piece every shadcn-ui
+ * Pagination consumer ends up re-implementing by hand, since the
+ * vendored primitives are unopinionated markup only.
+ */
+export function getPaginationRange({ page, totalPages, siblingCount = 1, boundaryCount = 1, }) {
+    const totalVisible = boundaryCount * 2 + siblingCount * 2 + 3;
+    if (totalPages <= totalVisible) {
+        return range(1, totalPages);
+    }
+    const leftSibling = Math.max(page - siblingCount, boundaryCount + 2);
+    const rightSibling = Math.min(page + siblingCount, totalPages - boundaryCount - 1);
+    const items = range(1, boundaryCount);
+    items.push(leftSibling > boundaryCount + 2 ? "ellipsis-start" : boundaryCount + 1);
+    items.push(...range(leftSibling, rightSibling));
+    items.push(rightSibling < totalPages - boundaryCount - 1
+        ? "ellipsis-end"
+        : totalPages - boundaryCount);
+    items.push(...range(totalPages - boundaryCount + 1, totalPages));
+    return [...new Set(items)].filter((item) => {
+        if (item === "ellipsis-start" || item === "ellipsis-end") {
+            return true;
+        }
+        return item >= 1 && item <= totalPages;
+    });
+}

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

@@ -0,0 +1,26 @@
+import type { PaginationRangeOptions } from "./pagination-range";
+export type PaginationProps = Omit<PaginationRangeOptions, "page"> & {
+    /** The current page, 1-indexed. */
+    page: number;
+    onPageChange: (page: number) => void;
+    /** Adds buttons that jump straight to the first/last page. @default false */
+    showFirstLast?: boolean;
+    disabled?: boolean;
+    className?: string;
+};
+/**
+ * Navigates between pages of a paginated set, computing the visible page
+ * numbers and ellipses itself from `page`/`totalPages` — shadcn-ui's own
+ * Pagination is unopinionated markup only and leaves that range
+ * computation to every consumer, so this wraps it with the missing piece.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://ui.shadcn.com/docs/components/pagination
+ * @see https://ktui.io/docs/pagination
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export declare function Pagination({ page, totalPages, siblingCount, boundaryCount, onPageChange, showFirstLast, disabled, className, }: PaginationProps): import("react").JSX.Element;
+//# sourceMappingURL=pagination.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/pagination.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAGjE,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,sBAAsB,EAAE,MAAM,CAAC,GAAG;IACnE,mCAAmC;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,6EAA6E;IAC7E,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,UAAU,EACV,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,aAAqB,EACrB,QAAgB,EAChB,SAAS,GACV,EAAE,eAAe,+BAyGjB"}

package/dist/components/pagination/pagination.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronsLeftIcon, ChevronsRightIcon } from "lucide-react";
+import { Pagination as PaginationPrimitive, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, } from "@forthtilliath/shadcn-ui/components/pagination";
+import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
+import { getPaginationRange } from "./pagination-range";
+/**
+ * Navigates between pages of a paginated set, computing the visible page
+ * numbers and ellipses itself from `page`/`totalPages` — shadcn-ui's own
+ * Pagination is unopinionated markup only and leaves that range
+ * computation to every consumer, so this wraps it with the missing piece.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://ui.shadcn.com/docs/components/pagination
+ * @see https://ktui.io/docs/pagination
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export function Pagination({ page, totalPages, siblingCount, boundaryCount, onPageChange, showFirstLast = false, disabled = false, className, }) {
+    const items = getPaginationRange({
+        page,
+        totalPages,
+        siblingCount,
+        boundaryCount,
+    });
+    function goTo(target) {
+        if (!disabled && target >= 1 && target <= totalPages && target !== page) {
+            onPageChange(target);
+        }
+    }
+    return (_jsx(PaginationPrimitive, { "data-slot": "pagination-root", className: cn(disabled && "pointer-events-none opacity-50", className), children: _jsxs(PaginationContent, { children: [showFirstLast && (_jsx(PaginationItem, { children: _jsx(PaginationLink, { href: "#", "aria-label": "Go to first page", size: "icon", "aria-disabled": page <= 1, className: cn(page <= 1 && "pointer-events-none opacity-50"), onClick: (e) => {
+                            e.preventDefault();
+                            goTo(1);
+                        }, children: _jsx(ChevronsLeftIcon, {}) }) })), _jsx(PaginationItem, { children: _jsx(PaginationPrevious, { href: "#", "aria-disabled": page <= 1, className: cn(page <= 1 && "pointer-events-none opacity-50"), onClick: (e) => {
+                            e.preventDefault();
+                            goTo(page - 1);
+                        } }) }), items.map((item) => item === "ellipsis-start" || item === "ellipsis-end" ? (_jsx(PaginationItem, { children: _jsx(PaginationEllipsis, {}) }, item)) : (_jsx(PaginationItem, { children: _jsx(PaginationLink, { href: "#", isActive: item === page, onClick: (e) => {
+                            e.preventDefault();
+                            goTo(item);
+                        }, children: item }) }, item))), _jsx(PaginationItem, { children: _jsx(PaginationNext, { href: "#", "aria-disabled": page >= totalPages, className: cn(page >= totalPages && "pointer-events-none opacity-50"), onClick: (e) => {
+                            e.preventDefault();
+                            goTo(page + 1);
+                        } }) }), showFirstLast && (_jsx(PaginationItem, { children: _jsx(PaginationLink, { href: "#", "aria-label": "Go to last page", size: "icon", "aria-disabled": page >= totalPages, className: cn(page >= totalPages && "pointer-events-none opacity-50"), onClick: (e) => {
+                            e.preventDefault();
+                            goTo(totalPages);
+                        }, children: _jsx(ChevronsRightIcon, {}) }) }))] }) }));
+}

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

@@ -0,0 +1,5 @@
+export type { PasswordInputProps } from "./password-input";
+export { PasswordInput } from "./password-input";
+export type { PasswordStrengthMeterProps } from "./password-strength-meter";
+export { PasswordStrengthMeter } from "./password-strength-meter";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/password-input/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,YAAY,EAAE,0BAA0B,EAAE,MAAM,2BAA2B,CAAC;AAC5E,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC"}

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

@@ -0,0 +1,2 @@
+export { PasswordInput } from "./password-input";
+export { PasswordStrengthMeter } from "./password-strength-meter";

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

@@ -0,0 +1,15 @@
+import * as React from "react";
+export type PasswordInputProps = Omit<React.ComponentProps<"input">, "type">;
+/**
+ * A password `Input` with a show/hide visibility toggle.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://ui-x.junwen-k.dev/docs/components/password-input
+ * @see https://ktui.io/docs/toggle-password
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export declare function PasswordInput({ className, ...props }: PasswordInputProps): React.JSX.Element;
+//# sourceMappingURL=password-input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"password-input.d.ts","sourceRoot":"","sources":["../../../src/components/password-input/password-input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,CAAC;AAE7E;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,qBA0BxE"}

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

@@ -0,0 +1,23 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { EyeIcon, EyeOffIcon } from "lucide-react";
+import { Input } from "@forthtilliath/shadcn-ui/components/input";
+import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
+/**
+ * A password `Input` with a show/hide visibility toggle.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://ui-x.junwen-k.dev/docs/components/password-input
+ * @see https://ktui.io/docs/toggle-password
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export function PasswordInput({ className, ...props }) {
+    const [visible, setVisible] = React.useState(false);
+    return (_jsxs("div", { className: cn("relative", className), children: [_jsx(Input, { type: visible ? "text" : "password", className: "w-full pr-9", ...props }), _jsx("button", { type: "button", onClick: () => {
+                    setVisible((prev) => !prev);
+                }, "aria-label": visible ? "Hide password" : "Show password", className: "text-muted-foreground hover:text-foreground absolute inset-y-0 right-0 flex items-center px-3", children: visible ? (_jsx(EyeOffIcon, { className: "size-4" })) : (_jsx(EyeIcon, { className: "size-4" })) })] }));
+}

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

@@ -0,0 +1,18 @@
+export interface PasswordStrengthMeterProps {
+    password: string;
+    className?: string;
+}
+/**
+ * A visual strength meter for a password, pairs with `PasswordInput` —
+ * scores against four common heuristics (length, case mix, digit, symbol)
+ * rather than a full password-strength library, since those checks are
+ * what every reference source actually surfaces to the user anyway.
+ *
+ * @see https://www.rigidui.com/docs/components/strength-meter
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export declare function PasswordStrengthMeter({ password, className, }: PasswordStrengthMeterProps): import("react").JSX.Element;
+//# sourceMappingURL=password-strength-meter.d.ts.map

package/dist/components/password-input/password-strength-meter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"password-strength-meter.d.ts","sourceRoot":"","sources":["../../../src/components/password-input/password-strength-meter.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,0BAA0B;IACzC,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAwBD;;;;;;;;;;;GAWG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,SAAS,GACV,EAAE,0BAA0B,+BA6B5B"}