@forthtilliath/forth-ui 0.2.0

package/dist/components/repeat/repeat.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+/**
+ * Repeat a component a specified number of times.
+ *
+ * @param {RepeatProps} props - The props for the Repeat component.
+ * @param {number} props.count - The number of times to repeat the component.
+ * @param {(index: number) => React.Key} [props.keyItem] - A function to generate a unique key for each item.
+ * @param {(index: number) => React.ReactNode} props.renderItem - A function to render each item.
+ *
+ * @returns {React.ReactNode[]} An array of React components, each rendered with the renderItem function.
+ */
+export function Repeat({ count, keyItem = (i) => i, renderItem, }) {
+    return Array.from({ length: count }).map((_, i) => (_jsx(React.Fragment, { children: renderItem(i) }, keyItem(i))));
+}

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

@@ -0,0 +1,3 @@
+export type { ScrollProgressProps } from "./scroll-progress";
+export { ScrollProgress } from "./scroll-progress";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/scroll-progress/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/scroll-progress/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/components/scroll-progress/index.js

@@ -0,0 +1 @@
+export { ScrollProgress } from "./scroll-progress";

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

@@ -0,0 +1,19 @@
+import * as React from "react";
+export interface ScrollProgressProps {
+    className?: string;
+    /** Tracks this element's own scroll instead of the window's. */
+    target?: React.RefObject<HTMLElement | null>;
+}
+/**
+ * A fixed bar at the top of the page (or a scrollable container) that
+ * fills as the user scrolls through it.
+ *
+ * @see https://bundui.io/components/scroll-progress-bar
+ * @see https://motion-primitives.com/docs/scroll-progress
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export declare function ScrollProgress({ className, target }: ScrollProgressProps): React.JSX.Element;
+//# sourceMappingURL=scroll-progress.d.ts.map

package/dist/components/scroll-progress/scroll-progress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-progress.d.ts","sourceRoot":"","sources":["../../../src/components/scroll-progress/scroll-progress.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gEAAgE;IAChE,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CAC9C;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,cAAc,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,mBAAmB,qBAiCxE"}

package/dist/components/scroll-progress/scroll-progress.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
+/**
+ * A fixed bar at the top of the page (or a scrollable container) that
+ * fills as the user scrolls through it.
+ *
+ * @see https://bundui.io/components/scroll-progress-bar
+ * @see https://motion-primitives.com/docs/scroll-progress
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export function ScrollProgress({ className, target }) {
+    const [progress, setProgress] = React.useState(0);
+    React.useEffect(() => {
+        const el = target?.current;
+        function onScroll() {
+            const scrollTop = el ? el.scrollTop : window.scrollY;
+            const scrollHeight = el
+                ? el.scrollHeight - el.clientHeight
+                : document.documentElement.scrollHeight - window.innerHeight;
+            // eslint-disable-next-line @eslint-react/set-state-in-effect -- also called from a real scroll event listener, not just the effect below; this disable only covers the mount-time initial read of the current scroll position
+            setProgress(scrollHeight > 0 ? (scrollTop / scrollHeight) * 100 : 0);
+        }
+        const node = el ?? window;
+        node.addEventListener("scroll", onScroll, { passive: true });
+        onScroll();
+        return () => {
+            node.removeEventListener("scroll", onScroll);
+        };
+    }, [target]);
+    return (_jsx("div", { "data-slot": "scroll-progress", className: cn("bg-primary fixed inset-x-0 top-0 z-50 h-1 origin-left", className), style: { transform: `scaleX(${(progress / 100).toString()})` } }));
+}

package/dist/components/scroll-shadow/index.d.ts

@@ -0,0 +1,3 @@
+export type { ScrollShadowProps } from "./scroll-shadow";
+export { ScrollShadow } from "./scroll-shadow";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/scroll-shadow/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/scroll-shadow/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/components/scroll-shadow/index.js

@@ -0,0 +1 @@
+export { ScrollShadow } from "./scroll-shadow";

package/dist/components/scroll-shadow/scroll-shadow.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+export type ScrollShadowProps = React.ComponentProps<"div"> & {
+    /** Size of the fade gradient, in pixels. @default 40 */
+    shadowSize?: number;
+};
+/**
+ * A vertically-scrollable container with fade-out gradient shadows at the
+ * top/bottom edges, hidden once scrolled all the way to that edge — built
+ * as a plain native-scroll `<div>` rather than wrapping shadcn-ui's
+ * `ScrollArea`, since that component doesn't forward a ref to its inner
+ * viewport (needed here to track scroll position for the fade toggling).
+ *
+ * @see https://www.heroui.com/docs/components/scroll-shadow
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export declare function ScrollShadow({ className, shadowSize, onScroll, ...props }: ScrollShadowProps): React.JSX.Element;
+//# sourceMappingURL=scroll-shadow.d.ts.map

package/dist/components/scroll-shadow/scroll-shadow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-shadow.d.ts","sourceRoot":"","sources":["../../../src/components/scroll-shadow/scroll-shadow.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC5D,wDAAwD;IACxD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,UAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,iBAAiB,qBAyCnB"}

package/dist/components/scroll-shadow/scroll-shadow.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
+/**
+ * A vertically-scrollable container with fade-out gradient shadows at the
+ * top/bottom edges, hidden once scrolled all the way to that edge — built
+ * as a plain native-scroll `<div>` rather than wrapping shadcn-ui's
+ * `ScrollArea`, since that component doesn't forward a ref to its inner
+ * viewport (needed here to track scroll position for the fade toggling).
+ *
+ * @see https://www.heroui.com/docs/components/scroll-shadow
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export function ScrollShadow({ className, shadowSize = 40, onScroll, ...props }) {
+    const ref = React.useRef(null);
+    const [atTop, setAtTop] = React.useState(true);
+    const [atBottom, setAtBottom] = React.useState(false);
+    function updateEdges(el) {
+        // Also called from the onScroll handler below (a normal event, not an
+        // effect) — these two disables only cover the mount-time effect call,
+        // reading the element's scroll geometry that isn't known until after
+        // the first paint.
+        // eslint-disable-next-line @eslint-react/set-state-in-effect
+        setAtTop(el.scrollTop <= 0);
+        // eslint-disable-next-line @eslint-react/set-state-in-effect
+        setAtBottom(el.scrollTop + el.clientHeight >= el.scrollHeight - 1);
+    }
+    React.useEffect(() => {
+        if (ref.current !== null) {
+            updateEdges(ref.current);
+        }
+    }, []);
+    const maskFrom = atTop ? "black" : "transparent";
+    const maskTo = atBottom ? "black" : "transparent";
+    const mask = `linear-gradient(to bottom, ${maskFrom}, black ${shadowSize.toString()}px, black calc(100% - ${shadowSize.toString()}px), ${maskTo})`;
+    return (_jsx("div", { ref: ref, "data-slot": "scroll-shadow", "data-at-top": atTop, "data-at-bottom": atBottom, onScroll: (e) => {
+            updateEdges(e.currentTarget);
+            onScroll?.(e);
+        }, style: { maskImage: mask, WebkitMaskImage: mask }, className: cn("overflow-y-auto", className), ...props }));
+}

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

@@ -0,0 +1,3 @@
+export type { UseScrollspyOptions } from "./use-scrollspy";
+export { useScrollspy } from "./use-scrollspy";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/scrollspy/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/components/scrollspy/index.js

@@ -0,0 +1 @@
+export { useScrollspy } from "./use-scrollspy";

package/dist/components/scrollspy/use-scrollspy.d.ts

@@ -0,0 +1,30 @@
+import * as React from "react";
+export interface UseScrollspyOptions {
+    /** Element `id`s to track, in document order. */
+    ids: string[];
+    /**
+     * Passed to `IntersectionObserver`. The default treats a section as
+     * active once it's within the top 20% of the viewport.
+     * @default "0px 0px -80% 0px"
+     */
+    rootMargin?: string;
+    /**
+     * Tracks scroll position within this element instead of the whole page
+     * (e.g. a scrollable docs pane) — passed through as the observer's
+     * `root`.
+     */
+    root?: React.RefObject<HTMLElement | null>;
+}
+/**
+ * Tracks which of the given element `id`s is currently scrolled into
+ * view, via `IntersectionObserver` — for highlighting the active link in
+ * a table-of-contents/side nav as the page scrolls.
+ *
+ * @see https://ktui.io/docs/scrollspy
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export declare function useScrollspy({ ids, rootMargin, root, }: UseScrollspyOptions): string | null;
+//# sourceMappingURL=use-scrollspy.d.ts.map

package/dist/components/scrollspy/use-scrollspy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-scrollspy.d.ts","sourceRoot":"","sources":["../../../src/components/scrollspy/use-scrollspy.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,mBAAmB;IAClC,iDAAiD;IACjD,GAAG,EAAE,MAAM,EAAE,CAAC;IACd;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CAC5C;AAID;;;;;;;;;;GAUG;AACH,wBAAgB,YAAY,CAAC,EAC3B,GAAG,EACH,UAAgC,EAChC,IAAI,GACL,EAAE,mBAAmB,GAAG,MAAM,GAAG,IAAI,CA2BrC"}

package/dist/components/scrollspy/use-scrollspy.js

@@ -0,0 +1,35 @@
+"use client";
+import * as React from "react";
+const DEFAULT_ROOT_MARGIN = "0px 0px -80% 0px";
+/**
+ * Tracks which of the given element `id`s is currently scrolled into
+ * view, via `IntersectionObserver` — for highlighting the active link in
+ * a table-of-contents/side nav as the page scrolls.
+ *
+ * @see https://ktui.io/docs/scrollspy
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export function useScrollspy({ ids, rootMargin = DEFAULT_ROOT_MARGIN, root, }) {
+    const [activeId, setActiveId] = React.useState(null);
+    React.useEffect(() => {
+        const elements = ids
+            .map((id) => document.getElementById(id))
+            .filter((el) => el !== null);
+        const observer = new IntersectionObserver((entries) => {
+            const visible = entries.find((entry) => entry.isIntersecting);
+            if (visible !== undefined) {
+                setActiveId(visible.target.id);
+            }
+        }, { root: root?.current, rootMargin });
+        for (const el of elements) {
+            observer.observe(el);
+        }
+        return () => {
+            observer.disconnect();
+        };
+    }, [ids, rootMargin, root]);
+    return activeId;
+}

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

@@ -0,0 +1,3 @@
+export type { SeparatorProps } from "./separator";
+export { Separator } from "./separator";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/separator/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}

package/dist/components/separator/index.js

@@ -0,0 +1 @@
+export { Separator } from "./separator";

package/dist/components/separator/separator.d.ts

@@ -0,0 +1,22 @@
+import type React from "react";
+import { Separator as SeparatorPrimitive } from "@forthtilliath/shadcn-ui/components/separator";
+export type SeparatorProps = React.ComponentProps<typeof SeparatorPrimitive> & {
+    /**
+     * Centered text between two line segments (e.g. `"OR"`) — only applies
+     * when `orientation` is `"horizontal"` (the default).
+     */
+    label?: React.ReactNode;
+};
+/**
+ * Visually or semantically separates content.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://ui.shadcn.com/docs/components/separator
+ * @see https://ktui.io/docs/separator
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export declare function Separator({ label, className, orientation, ...props }: SeparatorProps): React.JSX.Element;
+//# sourceMappingURL=separator.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"separator.d.ts","sourceRoot":"","sources":["../../../src/components/separator/separator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,SAAS,IAAI,kBAAkB,EAAE,MAAM,+CAA+C,CAAC;AAGhG,MAAM,MAAM,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,GAAG;IAC7E;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB,CAAC;AAEF;;;;;;;;;;GAUG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,SAAS,EACT,WAA0B,EAC1B,GAAG,KAAK,EACT,EAAE,cAAc,qBA0BhB"}

package/dist/components/separator/separator.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Separator as SeparatorPrimitive } from "@forthtilliath/shadcn-ui/components/separator";
+import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
+/**
+ * Visually or semantically separates content.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://ui.shadcn.com/docs/components/separator
+ * @see https://ktui.io/docs/separator
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export function Separator({ label, className, orientation = "horizontal", ...props }) {
+    const hasLabel = label !== undefined && label !== null;
+    if (hasLabel && orientation === "horizontal") {
+        return (_jsxs("div", { role: "separator", "aria-orientation": "horizontal", className: cn("flex items-center gap-3", className), children: [_jsx("span", { className: "bg-border h-px flex-1" }), _jsx("span", { className: "text-muted-foreground text-xs whitespace-nowrap", children: label }), _jsx("span", { className: "bg-border h-px flex-1" })] }));
+    }
+    return (_jsx(SeparatorPrimitive, { orientation: orientation, className: className, ...props }));
+}

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

@@ -0,0 +1,3 @@
+export type { SnippetItem, SnippetProps } from "./snippet";
+export { Snippet } from "./snippet";
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/snippet/index.js

@@ -0,0 +1 @@
+export { Snippet } from "./snippet";

package/dist/components/snippet/snippet.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+export interface SnippetItem {
+    value: string;
+    label: React.ReactNode;
+    code: string;
+}
+export interface SnippetProps {
+    items: SnippetItem[];
+    /** @default items[0]?.value */
+    defaultValue?: string;
+    className?: string;
+}
+/**
+ * Displays and copies code in a tabbed interface — the "npm install /
+ * yarn add / pnpm add" pattern.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://www.kibo-ui.com/components/snippet
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export declare function Snippet({ items, defaultValue, className }: SnippetProps): React.JSX.Element;
+//# sourceMappingURL=snippet.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"snippet.d.ts","sourceRoot":"","sources":["../../../src/components/snippet/snippet.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,+BAA+B;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID;;;;;;;;;;GAUG;AACH,wBAAgB,OAAO,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,YAAY,qBAuDvE"}

package/dist/components/snippet/snippet.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { Button } from "@forthtilliath/shadcn-ui/components/button";
+import { Tabs, TabsContent, TabsList, TabsTrigger, } from "@forthtilliath/shadcn-ui/components/tabs";
+import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
+const COPY_FEEDBACK_MS = 2000;
+/**
+ * Displays and copies code in a tabbed interface — the "npm install /
+ * yarn add / pnpm add" pattern.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://www.kibo-ui.com/components/snippet
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export function Snippet({ items, defaultValue, className }) {
+    const [copiedValue, setCopiedValue] = React.useState(null);
+    function handleCopy(item) {
+        void navigator.clipboard.writeText(item.code).then(() => {
+            setCopiedValue(item.value);
+            setTimeout(() => {
+                setCopiedValue(null);
+            }, COPY_FEEDBACK_MS);
+        });
+    }
+    return (_jsxs(Tabs, { defaultValue: defaultValue ?? items[0]?.value, className: cn("border-border overflow-hidden rounded-lg border", className), children: [_jsx(TabsList, { className: "bg-muted/40 h-auto w-full justify-start rounded-none border-b p-0", children: items.map((item) => (_jsx(TabsTrigger, { value: item.value, className: "data-[state=active]:bg-background rounded-none font-mono text-xs", children: item.label }, item.value))) }), items.map((item) => (_jsxs(TabsContent, { value: item.value, className: "relative m-0", children: [_jsx("pre", { className: "overflow-x-auto p-4 pr-12 font-mono text-sm", children: _jsx("code", { children: item.code }) }), _jsx(Button, { variant: "ghost", size: "icon", onClick: () => {
+                            handleCopy(item);
+                        }, "aria-label": copiedValue === item.value ? "Copied" : "Copy", className: "absolute top-2 right-2 size-7", children: copiedValue === item.value ? _jsx(CheckIcon, {}) : _jsx(CopyIcon, {}) })] }, item.value)))] }));
+}

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

@@ -0,0 +1,3 @@
+export type { SortableProps } from "./sortable";
+export { Sortable } from "./sortable";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/sortable/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/sortable/index.js

@@ -0,0 +1 @@
+export { Sortable } from "./sortable";

package/dist/components/sortable/sortable.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+export interface SortableProps<T> {
+    items: T[];
+    onReorder: (items: T[]) => void;
+    getKey: (item: T) => string;
+    renderItem: (item: T, index: number) => React.ReactNode;
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * A drag-to-reorder list — built on the browser's native HTML5 drag
+ * events rather than a drag-and-drop library, since reordering a flat
+ * list (no cross-container drops, no sortable grids) doesn't need one.
+ *
+ * @see https://ui-x.junwen-k.dev/docs/utilities/sortable
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export declare function Sortable<T>({ items, onReorder, getKey, renderItem, disabled, className, }: SortableProps<T>): React.JSX.Element;
+//# sourceMappingURL=sortable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sortable.d.ts","sourceRoot":"","sources":["../../../src/components/sortable/sortable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,aAAa,CAAC,CAAC;IAC9B,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,SAAS,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAChC,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAC5B,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IACxD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EAAE,EAC1B,KAAK,EACL,SAAS,EACT,MAAM,EACN,UAAU,EACV,QAAgB,EAChB,SAAS,GACV,EAAE,aAAa,CAAC,CAAC,CAAC,qBAsDlB"}

package/dist/components/sortable/sortable.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
+/**
+ * A drag-to-reorder list — built on the browser's native HTML5 drag
+ * events rather than a drag-and-drop library, since reordering a flat
+ * list (no cross-container drops, no sortable grids) doesn't need one.
+ *
+ * @see https://ui-x.junwen-k.dev/docs/utilities/sortable
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export function Sortable({ items, onReorder, getKey, renderItem, disabled = false, className, }) {
+    const dragIndexRef = React.useRef(null);
+    const [overIndex, setOverIndex] = React.useState(null);
+    function handleDrop(targetIndex) {
+        const from = dragIndexRef.current;
+        if (from === null || from === targetIndex) {
+            return;
+        }
+        const next = [...items];
+        const [moved] = next.splice(from, 1);
+        if (moved !== undefined) {
+            next.splice(targetIndex, 0, moved);
+            onReorder(next);
+        }
+        dragIndexRef.current = null;
+        setOverIndex(null);
+    }
+    return (_jsx("ul", { "data-slot": "sortable", className: cn("grid gap-2", className), children: items.map((item, index) => (_jsx("li", { draggable: !disabled, "data-dragging-over": overIndex === index, onDragStart: () => {
+                dragIndexRef.current = index;
+            }, onDragOver: (e) => {
+                e.preventDefault();
+                setOverIndex(index);
+            }, onDragLeave: () => {
+                setOverIndex((prev) => (prev === index ? null : prev));
+            }, onDrop: (e) => {
+                e.preventDefault();
+                handleDrop(index);
+            }, onDragEnd: () => {
+                dragIndexRef.current = null;
+                setOverIndex(null);
+            }, className: cn("data-[dragging-over=true]:ring-primary rounded-md data-[dragging-over=true]:ring-2", !disabled && "cursor-grab active:cursor-grabbing"), children: renderItem(item, index) }, getKey(item)))) }));
+}

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

@@ -0,0 +1,3 @@
+export type { SpacerProps } from "./spacer";
+export { Spacer } from "./spacer";
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/spacer/index.js

@@ -0,0 +1 @@
+export { Spacer } from "./spacer";

package/dist/components/spacer/spacer.d.ts

@@ -0,0 +1,24 @@
+import type React from "react";
+export type SpacerProps = React.ComponentProps<"div"> & {
+    /**
+     * A fixed gap, in Tailwind's spacing scale (e.g. `4` = 1rem). Omit for a
+     * flexible spacer that grows to fill the remaining space in a flex
+     * container instead (the more common use in a flex row/column).
+     */
+    size?: number;
+};
+/**
+ * Adds space between components — a flexible filler by default (`flex-1`),
+ * or a fixed gap via `size`.
+ *
+ * The single reference source for this component (heroui.com/docs/
+ * components/spacer) 404'd — this keeps to the minimal, well-established
+ * shape of this pattern across UI kits rather than guessing at a richer
+ * API that couldn't be verified.
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export declare function Spacer({ size, className, ...props }: SpacerProps): React.JSX.Element;
+//# sourceMappingURL=spacer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spacer.d.ts","sourceRoot":"","sources":["../../../src/components/spacer/spacer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IACtD;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,wBAAgB,MAAM,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,qBAiBhE"}

package/dist/components/spacer/spacer.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
+/**
+ * Adds space between components — a flexible filler by default (`flex-1`),
+ * or a fixed gap via `size`.
+ *
+ * The single reference source for this component (heroui.com/docs/
+ * components/spacer) 404'd — this keeps to the minimal, well-established
+ * shape of this pattern across UI kits rather than guessing at a richer
+ * API that couldn't be verified.
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export function Spacer({ size, className, ...props }) {
+    return (_jsx("div", { "aria-hidden": "true", "data-slot": "spacer", className: cn(size === undefined ? "flex-1" : "shrink-0", className), style: size === undefined
+            ? undefined
+            : {
+                width: `calc(var(--spacing) * ${size.toString()})`,
+                height: `calc(var(--spacing) * ${size.toString()})`,
+            }, ...props }));
+}

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

@@ -0,0 +1,4 @@
+export type { SpinnerProps, SpinnerVariant } from "./spinner";
+export { Spinner } from "./spinner";
+export type { SpinnerSizeVariants } from "./variants";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/spinner/index.js

@@ -0,0 +1 @@
+export { Spinner } from "./spinner";

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

@@ -0,0 +1,22 @@
+import type React from "react";
+import type { SpinnerSizeVariants } from "./variants";
+export type SpinnerVariant = "default" | "ring" | "bars" | "ellipsis";
+export type SpinnerProps = React.ComponentProps<"span"> & SpinnerSizeVariants & {
+    /**
+     * @default "default"
+     */
+    variant?: SpinnerVariant;
+};
+/**
+ * An accessible loading indicator, in one of a few visual styles.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://www.kibo-ui.com/components/spinner
+ * @see https://www.shadcnui-blocks.com/components/spinner
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export declare function Spinner({ variant, size, className, ...props }: SpinnerProps): React.JSX.Element;
+//# sourceMappingURL=spinner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAGtD,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,UAAU,CAAC;AAEtE,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,GACrD,mBAAmB,GAAG;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC;CAC1B,CAAC;AAEJ;;;;;;;;;;GAUG;AACH,wBAAgB,OAAO,CAAC,EACtB,OAAmB,EACnB,IAAI,EACJ,SAAS,EACT,GAAG,KAAK,EACT,EAAE,YAAY,qBAyCd"}

package/dist/components/spinner/spinner.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Loader2Icon } from "lucide-react";
+import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
+import { spinnerSizeVariants } from "./variants";
+/**
+ * An accessible loading indicator, in one of a few visual styles.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://www.kibo-ui.com/components/spinner
+ * @see https://www.shadcnui-blocks.com/components/spinner
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export function Spinner({ variant = "default", size, className, ...props }) {
+    const sizeClass = spinnerSizeVariants({ size });
+    return (_jsxs("span", { role: "status", "aria-label": "Loading", ...props, children: [variant === "ring" && (_jsx("span", { className: cn(sizeClass, "block animate-spin rounded-full border-2 border-current border-t-transparent", className) })), variant === "bars" && (_jsx("span", { className: cn(sizeClass, "flex items-center gap-0.5", className), children: [0, 150, 300].map((delay) => (_jsx("span", { className: "h-full w-1 animate-pulse rounded-full bg-current", style: { animationDelay: `${delay.toString()}ms` } }, delay))) })), variant === "ellipsis" && (_jsx("span", { className: cn(sizeClass, "flex items-center gap-1", className), children: [0, 150, 300].map((delay) => (_jsx("span", { className: "size-1/4 animate-bounce rounded-full bg-current", style: { animationDelay: `${delay.toString()}ms` } }, delay))) })), variant === "default" && (_jsx(Loader2Icon, { className: cn(sizeClass, "animate-spin", className) }))] }));
+}

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

@@ -0,0 +1,6 @@
+import type { VariantProps } from "class-variance-authority";
+export declare const spinnerSizeVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type SpinnerSizeVariants = VariantProps<typeof spinnerSizeVariants>;
+//# sourceMappingURL=variants.d.ts.map

package/dist/components/spinner/variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/variants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAG7D,eAAO,MAAM,mBAAmB;;8EAW9B,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC"}