@forthtilliath/forth-ui 0.2.0

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

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
+const CHECKS = [
+    { test: (password) => password.length >= 8, label: "At least 8 characters" },
+    {
+        test: (password) => /[a-z]/.test(password) && /[A-Z]/.test(password),
+        label: "Upper & lowercase letters",
+    },
+    { test: (password) => /\d/.test(password), label: "At least one number" },
+    {
+        test: (password) => /[^a-zA-Z0-9]/.test(password),
+        label: "At least one symbol",
+    },
+];
+const LABELS = ["Very weak", "Weak", "Fair", "Good", "Strong"];
+const COLORS = [
+    "bg-destructive",
+    "bg-destructive",
+    "bg-amber-500 dark:bg-amber-400",
+    "bg-amber-500 dark:bg-amber-400",
+    "bg-green-600 dark:bg-green-400",
+];
+/**
+ * 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 function PasswordStrengthMeter({ password, className, }) {
+    const score = CHECKS.filter((check) => check.test(password)).length;
+    const failedChecks = CHECKS.filter((check) => !check.test(password));
+    return (_jsxs("div", { "data-slot": "password-strength-meter", className: cn("grid gap-1.5", className), children: [_jsx("div", { className: "flex gap-1", children: CHECKS.map((check, index) => (_jsx("div", { className: cn("h-1.5 flex-1 rounded-full transition-colors", index < score ? COLORS[score] : "bg-muted") }, check.label))) }), password.length > 0 && (_jsxs("p", { className: "text-muted-foreground text-xs", children: [LABELS[score], failedChecks.length > 0 &&
+                        ` — missing: ${failedChecks.map((check) => check.label).join(", ")}`] }))] }));
+}

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

@@ -0,0 +1,4 @@
+export type { ProgressProps } from "./progress";
+export { Progress } from "./progress";
+export type { ProgressVariants } from "./variants";
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/progress/index.js

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

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

@@ -0,0 +1,25 @@
+import type React from "react";
+import { Progress as ProgressPrimitive } from "@forthtilliath/shadcn-ui/components/progress";
+import type { ProgressVariants } from "./variants";
+export type ProgressProps = React.ComponentProps<typeof ProgressPrimitive> & ProgressVariants & {
+    /** A label rendered above the bar, on the left. */
+    label?: React.ReactNode;
+    /**
+     * Shows the numeric `value` (rounded, with a `%` suffix) above the bar,
+     * on the right.
+     */
+    showValue?: boolean;
+};
+/**
+ * Displays an indicator showing the completion progress of a task.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://ui.shadcn.com/docs/components/progress
+ * @see https://ktui.io/docs/progress
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export declare function Progress({ className, variant, size, label, showValue, value, ...props }: ProgressProps): React.JSX.Element;
+//# sourceMappingURL=progress.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../../src/components/progress/progress.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAC;AAG7F,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAGnD,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,iBAAiB,CAAC,GACxE,gBAAgB,GAAG;IACjB,mDAAmD;IACnD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEJ;;;;;;;;;;GAUG;AACH,wBAAgB,QAAQ,CAAC,EACvB,SAAS,EACT,OAAO,EACP,IAAI,EACJ,KAAK,EACL,SAAiB,EACjB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,aAAa,qBA8Bf"}

package/dist/components/progress/progress.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Progress as ProgressPrimitive } from "@forthtilliath/shadcn-ui/components/progress";
+import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
+import { progressVariants } from "./variants";
+/**
+ * Displays an indicator showing the completion progress of a task.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://ui.shadcn.com/docs/components/progress
+ * @see https://ktui.io/docs/progress
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export function Progress({ className, variant, size, label, showValue = false, value, ...props }) {
+    const bar = (_jsx(ProgressPrimitive, { className: cn(progressVariants({ variant, size }), className), value: value, ...props }));
+    const hasLabel = label !== undefined && label !== null;
+    if (!hasLabel && !showValue) {
+        return bar;
+    }
+    return (_jsxs("div", { className: "w-full space-y-1.5", children: [(hasLabel || showValue) && (_jsxs("div", { className: "flex items-center justify-between text-sm", children: [hasLabel && _jsx("span", { children: label }), showValue && (_jsxs("span", { className: "text-muted-foreground tabular-nums", children: [Math.round(value ?? 0), "%"] }))] })), bar] }));
+}

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

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

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

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

package/dist/components/progress/variants.js

@@ -0,0 +1,25 @@
+import { cva } from "class-variance-authority";
+// shadcn-ui's own Progress hardcodes the indicator's color with no prop to
+// override it — targeted here via its `data-slot="progress-indicator"`
+// attribute from the outer className instead of forking the primitive.
+export const progressVariants = cva("", {
+    variants: {
+        variant: {
+            default: "",
+            primary: "bg-primary/20 [&>[data-slot=progress-indicator]]:bg-primary",
+            success: "bg-green-600/20 [&>[data-slot=progress-indicator]]:bg-green-600",
+            warning: "bg-amber-500/20 [&>[data-slot=progress-indicator]]:bg-amber-500",
+            info: "bg-sky-600/20 [&>[data-slot=progress-indicator]]:bg-sky-600",
+            destructive: "bg-destructive/20 [&>[data-slot=progress-indicator]]:bg-destructive",
+        },
+        size: {
+            sm: "h-1.5",
+            default: "h-2",
+            lg: "h-3",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+    },
+});

package/dist/components/qr-code/index.d.ts

@@ -0,0 +1,3 @@
+export type { QrCodeProps } from "./qr-code";
+export { QrCode } from "./qr-code";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/qr-code/index.d.ts.map

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

package/dist/components/qr-code/index.js

@@ -0,0 +1 @@
+export { QrCode } from "./qr-code";

package/dist/components/qr-code/qr-code.d.ts

@@ -0,0 +1,28 @@
+import type React from "react";
+export interface QrCodeProps extends Omit<React.SVGProps<SVGSVGElement>, "viewBox"> {
+    /** The data to encode. */
+    value: string;
+    /**
+     * Error correction level — higher values tolerate more damage/occlusion
+     * at the cost of a denser code.
+     * @default "M"
+     */
+    robustness?: "L" | "M" | "Q" | "H";
+    /** @default "currentColor" */
+    foreground?: string;
+    /** @default "transparent" */
+    background?: string;
+}
+/**
+ * Generates a QR code from a string, rendered as SVG (no canvas — works in
+ * Server Components too).
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://www.kibo-ui.com/components/qr-code
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export declare function QrCode({ value, robustness, foreground, background, className, ...props }: QrCodeProps): React.JSX.Element;
+//# sourceMappingURL=qr-code.d.ts.map

package/dist/components/qr-code/qr-code.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"qr-code.d.ts","sourceRoot":"","sources":["../../../src/components/qr-code/qr-code.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,WAAY,SAAQ,IAAI,CACvC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,EAC7B,SAAS,CACV;IACC,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,UAAU,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACnC,8BAA8B;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,6BAA6B;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,UAAgB,EAChB,UAA2B,EAC3B,UAA0B,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,WAAW,qBAiCb"}

package/dist/components/qr-code/qr-code.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { create } from "qrcode";
+import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
+/**
+ * Generates a QR code from a string, rendered as SVG (no canvas — works in
+ * Server Components too).
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://www.kibo-ui.com/components/qr-code
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export function QrCode({ value, robustness = "M", foreground = "currentColor", background = "transparent", className, ...props }) {
+    const { modules } = create(value, { errorCorrectionLevel: robustness });
+    const size = modules.size;
+    const cells = [];
+    for (let row = 0; row < size; row++) {
+        for (let col = 0; col < size; col++) {
+            if (modules.get(row, col)) {
+                cells.push(_jsx("rect", { x: col, y: row, width: 1, height: 1 }, `${row.toString()}-${col.toString()}`));
+            }
+        }
+    }
+    return (_jsxs("svg", { viewBox: `0 0 ${size.toString()} ${size.toString()}`, role: "img", "aria-label": `QR code encoding: ${value}`, className: cn("size-32", className), ...props, children: [_jsx("rect", { width: size, height: size, fill: background }), _jsx("g", { fill: foreground, children: cells })] }));
+}

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

@@ -0,0 +1,3 @@
+export type { RadioCardProps } from "./radio-card";
+export { RadioCard } from "./radio-card";
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/radio/index.js

@@ -0,0 +1 @@
+export { RadioCard } from "./radio-card";

package/dist/components/radio/radio-card.d.ts

@@ -0,0 +1,25 @@
+import type * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+export type RadioCardProps = React.ComponentProps<typeof RadioGroupPrimitive.Item> & {
+    label: React.ReactNode;
+    description?: React.ReactNode;
+    icon?: React.ReactNode;
+};
+/**
+ * A card-style `RadioGroup` item — the whole card is the clickable target,
+ * showing label/description/an optional icon plus a checkmark once
+ * selected. shadcn-ui's own `RadioGroupItem` only renders the small circle
+ * (its `children` prop is discarded in favor of a hardcoded indicator), so
+ * this is built directly on the Radix primitive instead. Use it in place
+ * of `RadioGroupItem` inside the same shadcn-ui `RadioGroup`.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://ui.shadcn.com/docs/components/radio-group
+ * @see https://www.kibo-ui.com/components/choicebox
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export declare function RadioCard({ label, description, icon, className, ...props }: RadioCardProps): React.JSX.Element;
+//# sourceMappingURL=radio-card.d.ts.map

package/dist/components/radio/radio-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-card.d.ts","sourceRoot":"","sources":["../../../src/components/radio/radio-card.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAC;AAKnE,MAAM,MAAM,cAAc,GAAG,KAAK,CAAC,cAAc,CAC/C,OAAO,mBAAmB,CAAC,IAAI,CAChC,GAAG;IACF,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,WAAW,EACX,IAAI,EACJ,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,qBAsBhB"}

package/dist/components/radio/radio-card.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { CheckIcon } from "lucide-react";
+import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
+/**
+ * A card-style `RadioGroup` item — the whole card is the clickable target,
+ * showing label/description/an optional icon plus a checkmark once
+ * selected. shadcn-ui's own `RadioGroupItem` only renders the small circle
+ * (its `children` prop is discarded in favor of a hardcoded indicator), so
+ * this is built directly on the Radix primitive instead. Use it in place
+ * of `RadioGroupItem` inside the same shadcn-ui `RadioGroup`.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://ui.shadcn.com/docs/components/radio-group
+ * @see https://www.kibo-ui.com/components/choicebox
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export function RadioCard({ label, description, icon, className, ...props }) {
+    return (_jsxs(RadioGroupPrimitive.Item, { "data-slot": "radio-card", className: cn("border-input hover:bg-accent/50 focus-visible:ring-ring/50 data-[state=checked]:border-primary data-[state=checked]:ring-primary/20 relative flex items-start gap-3 rounded-lg border p-4 text-left shadow-xs transition-colors outline-none focus-visible:ring-[3px] data-[state=checked]:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", className), ...props, children: [icon, _jsxs("div", { className: "grid gap-1", children: [_jsx("span", { className: "text-sm leading-none font-medium", children: label }), description !== undefined && (_jsx("span", { className: "text-muted-foreground text-sm", children: description }))] }), _jsx(RadioGroupPrimitive.Indicator, { className: "absolute top-3 right-3", children: _jsx(CheckIcon, { className: "text-primary size-4" }) })] }));
+}

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

@@ -0,0 +1,3 @@
+export type { RatingProps } from "./rating";
+export { Rating } from "./rating";
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/rating/index.js

@@ -0,0 +1 @@
+export { Rating } from "./rating";

package/dist/components/rating/rating.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+export interface RatingProps {
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    max?: number;
+    disabled?: boolean;
+    readOnly?: boolean;
+    size?: "sm" | "default" | "lg";
+    className?: string;
+}
+/**
+ * A star rating control with keyboard navigation (each star is a `radio`
+ * in a `radiogroup`) and hover preview.
+ *
+ * @see https://www.kibo-ui.com/components/rating
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export declare function Rating({ value, defaultValue, onValueChange, max, disabled, readOnly, size, className, }: RatingProps): React.JSX.Element;
+//# sourceMappingURL=rating.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rating.d.ts","sourceRoot":"","sources":["../../../src/components/rating/rating.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,WAAW;IAC1B,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,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,GAAG,IAAI,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAQD;;;;;;;;;GASG;AACH,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,YAAgB,EAChB,aAAa,EACb,GAAO,EACP,QAAgB,EAChB,QAAgB,EAChB,IAAgB,EAChB,SAAS,GACV,EAAE,WAAW,qBA0Db"}

package/dist/components/rating/rating.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { StarIcon } from "lucide-react";
+import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
+const SIZE_CLASSES = {
+    sm: "size-4",
+    default: "size-5",
+    lg: "size-6",
+};
+/**
+ * A star rating control with keyboard navigation (each star is a `radio`
+ * in a `radiogroup`) and hover preview.
+ *
+ * @see https://www.kibo-ui.com/components/rating
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export function Rating({ value, defaultValue = 0, onValueChange, max = 5, disabled = false, readOnly = false, size = "default", className, }) {
+    const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
+    const [hoverValue, setHoverValue] = React.useState(null);
+    const current = value ?? uncontrolledValue;
+    const displayValue = hoverValue ?? current;
+    function commit(next) {
+        setUncontrolledValue(next);
+        onValueChange?.(next);
+    }
+    return (_jsx("div", { role: "radiogroup", "aria-disabled": disabled, "data-slot": "rating", className: cn("inline-flex items-center gap-0.5", (disabled || readOnly) && "pointer-events-none", className), onMouseLeave: () => {
+            setHoverValue(null);
+        }, children: Array.from({ length: max }, (_, i) => i + 1).map((starValue) => (_jsx("button", { type: "button", role: "radio", "aria-checked": current === starValue, "aria-label": `${starValue.toString()} star${starValue > 1 ? "s" : ""}`, disabled: disabled, tabIndex: readOnly ? -1 : 0, onMouseEnter: () => {
+                setHoverValue(starValue);
+            }, onClick: () => {
+                if (!readOnly) {
+                    commit(starValue);
+                }
+            }, className: "disabled:cursor-not-allowed disabled:opacity-50", children: _jsx(StarIcon, { className: cn(SIZE_CLASSES[size], "transition-colors", starValue <= displayValue
+                    ? "fill-amber-400 text-amber-400"
+                    : "fill-none text-muted-foreground") }) }, starValue))) }));
+}

package/dist/components/relative-time/index.d.ts

@@ -0,0 +1,3 @@
+export type { RelativeTimeProps } from "./relative-time";
+export { RelativeTime } from "./relative-time";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/relative-time/index.d.ts.map

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

package/dist/components/relative-time/index.js

@@ -0,0 +1 @@
+export { RelativeTime } from "./relative-time";

package/dist/components/relative-time/relative-time.d.ts

@@ -0,0 +1,32 @@
+import * as React from "react";
+export interface RelativeTimeProps {
+    /**
+     * Controlled time. Omit for an auto-updating live clock (ticks every
+     * second).
+     */
+    date?: Date;
+    /**
+     * IANA timezone (e.g. `"America/New_York"`). Defaults to the viewer's
+     * local timezone.
+     */
+    timeZone?: string;
+    /** A label shown above the time, e.g. `"EST"`. */
+    label?: React.ReactNode;
+    /** Passed through to `Intl.DateTimeFormat`. */
+    formatOptions?: Intl.DateTimeFormatOptions;
+    className?: string;
+}
+/**
+ * Displays a time — live-updating and defaulting to the local timezone
+ * unless given a fixed `date`/`timeZone`, e.g. for showing several
+ * teammates' local times side by side.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://www.kibo-ui.com/components/relative-time
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export declare function RelativeTime({ date, timeZone, label, formatOptions, className, }: RelativeTimeProps): React.JSX.Element;
+//# sourceMappingURL=relative-time.d.ts.map

package/dist/components/relative-time/relative-time.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"relative-time.d.ts","sourceRoot":"","sources":["../../../src/components/relative-time/relative-time.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kDAAkD;IAClD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,+CAA+C;IAC/C,aAAa,CAAC,EAAE,IAAI,CAAC,qBAAqB,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAQD;;;;;;;;;;;GAWG;AACH,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,aAAa,EACb,SAAS,GACV,EAAE,iBAAiB,qBAsDnB"}

package/dist/components/relative-time/relative-time.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
+const TICK_MS = 1000;
+const DEFAULT_FORMAT = {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+};
+/**
+ * Displays a time — live-updating and defaulting to the local timezone
+ * unless given a fixed `date`/`timeZone`, e.g. for showing several
+ * teammates' local times side by side.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://www.kibo-ui.com/components/relative-time
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export function RelativeTime({ date, timeZone, label, formatOptions, className, }) {
+    // `liveNow` starts `undefined` (not computed from `new Date()`) on
+    // purpose: this component is server-rendered by Next.js like any "use
+    // client" component, and the server's clock read would almost certainly
+    // disagree with the client's first tick, causing a hydration mismatch.
+    // `now` is derived from it rather than synced into its own state — the
+    // effect below only ever subscribes to the external timer, it never
+    // mirrors the `date` prop.
+    const [liveNow, setLiveNow] = React.useState(undefined);
+    const now = date ?? liveNow;
+    const hasLabel = label !== undefined && label !== null;
+    React.useEffect(() => {
+        if (date) {
+            return;
+        }
+        // The first tick has to happen synchronously here, not just future
+        // ones — there's no way to read "now" during render without
+        // reintroducing the hydration mismatch this state is starting
+        // `undefined` to avoid.
+        // eslint-disable-next-line @eslint-react/set-state-in-effect, react-hooks/set-state-in-effect
+        setLiveNow(new Date());
+        const interval = setInterval(() => {
+            setLiveNow(new Date());
+        }, TICK_MS);
+        return () => {
+            clearInterval(interval);
+        };
+    }, [date]);
+    const formatted = React.useMemo(() => {
+        if (!now) {
+            return null;
+        }
+        return new Intl.DateTimeFormat(undefined, {
+            ...DEFAULT_FORMAT,
+            ...formatOptions,
+            timeZone,
+        }).format(now);
+    }, [now, timeZone, formatOptions]);
+    return (_jsxs("div", { className: cn("flex flex-col items-center gap-0.5", className), suppressHydrationWarning: true, children: [hasLabel && (_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: label })), _jsx("span", { className: "font-mono text-sm tabular-nums", children: formatted })] }));
+}

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

@@ -0,0 +1,3 @@
+export type { ReparentProps, ReparentTarget } from "./reparent";
+export { Reparent } from "./reparent";
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/reparent/index.js

@@ -0,0 +1 @@
+export { Reparent } from "./reparent";

package/dist/components/reparent/reparent.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+export interface ReparentTarget {
+    /**
+     * A CSS media query (e.g. `"(min-width: 640px)"`). Checked in array
+     * order — the first match wins. Omit on one entry (typically the last)
+     * to use it as the fallback when nothing else matches.
+     */
+    query?: string;
+    /** Where `children` gets portaled into when this entry is active. */
+    container: React.RefObject<HTMLElement | null>;
+}
+export interface ReparentProps {
+    children: React.ReactNode;
+    targets: ReparentTarget[];
+}
+/**
+ * Moves `children` between different container elements at different
+ * screen sizes — e.g. a search box that lives in a mobile menu on small
+ * screens and in the header on larger ones — without unmounting it (so its
+ * internal state survives the move), via a `createPortal` whose target
+ * swaps based on `matchMedia`.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://ktui.io/docs/reparent
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export declare function Reparent({ children, targets }: ReparentProps): React.ReactPortal | null;
+//# sourceMappingURL=reparent.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"reparent.d.ts","sourceRoot":"","sources":["../../../src/components/reparent/reparent.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,cAAc;IAC7B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qEAAqE;IACrE,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CAChD;AAED,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,EAAE,cAAc,EAAE,CAAC;CAC3B;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,aAAa,4BAyC5D"}

package/dist/components/reparent/reparent.js

@@ -0,0 +1,51 @@
+"use client";
+import * as React from "react";
+import { createPortal } from "react-dom";
+/**
+ * Moves `children` between different container elements at different
+ * screen sizes — e.g. a search box that lives in a mobile menu on small
+ * screens and in the header on larger ones — without unmounting it (so its
+ * internal state survives the move), via a `createPortal` whose target
+ * swaps based on `matchMedia`.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://ktui.io/docs/reparent
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export function Reparent({ children, targets }) {
+    const [activeIndex, setActiveIndex] = React.useState(null);
+    React.useEffect(() => {
+        const queries = targets
+            .map((target) => (target.query ? window.matchMedia(target.query) : null))
+            .filter((mql) => mql !== null);
+        function evaluate() {
+            const index = targets.findIndex((target) => !target.query || window.matchMedia(target.query).matches);
+            // Determines which target is active right now — there's no way to
+            // know this from render alone (matchMedia is a browser-only API), so
+            // the first evaluation has to happen synchronously here, not just on
+            // subsequent "change" events.
+            // eslint-disable-next-line @eslint-react/set-state-in-effect
+            setActiveIndex(index === -1 ? null : index);
+        }
+        evaluate();
+        queries.forEach((mql) => {
+            mql.addEventListener("change", evaluate);
+        });
+        return () => {
+            queries.forEach((mql) => {
+                mql.removeEventListener("change", evaluate);
+            });
+        };
+    }, [targets]);
+    if (activeIndex === null) {
+        return null;
+    }
+    const container = targets[activeIndex]?.container.current;
+    if (!container) {
+        return null;
+    }
+    return createPortal(children, container);
+}

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

@@ -0,0 +1,2 @@
+export * from "./repeat";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/repeat/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}

package/dist/components/repeat/index.js

@@ -0,0 +1 @@
+export * from "./repeat";

package/dist/components/repeat/repeat.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+export interface RepeatProps {
+    /**
+     * Number of times to repeat the content
+     */
+    count: number;
+    /**
+     * Function to generate a unique key for each item
+     */
+    keyItem?: (index: number) => React.Key;
+    /**
+     * Function to render each item
+     */
+    renderItem: (index: number) => React.ReactNode;
+}
+/**
+ * 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 declare function Repeat({ count, keyItem, renderItem, }: RepeatProps): React.ReactNode[];
+//# sourceMappingURL=repeat.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"repeat.d.ts","sourceRoot":"","sources":["../../../src/components/repeat/repeat.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,GAAG,CAAC;IACvC;;OAEG;IACH,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;CAChD;AAED;;;;;;;;;GASG;AACH,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,OAAkB,EAClB,UAAU,GACX,EAAE,WAAW,GAAG,KAAK,CAAC,SAAS,EAAE,CAIjC"}