@mohasinac/appkit 2.3.0 → 2.3.1

package/dist/features/filters/routeFilterState.d.ts

@@ -0,0 +1,58 @@
+/**
+ * Route-param filter state — parser and serializer
+ *
+ * Canonical URL pattern:
+ *   /listing/[segment-key]/[segment-value]/[segment-key]/[segment-value]/...
+ *
+ * Example:
+ *   /products/category/collectibles/sort/price-asc/page/2
+ *   → { category: "collectibles", sort: "price-asc", page: "2" }
+ *
+ * Special handling:
+ *   - Unknown trailing segments are ignored during parse.
+ *   - `page` defaults to "1" when absent.
+ *   - `sort` defaults to "relevance" when absent.
+ *   - Segments are always lowercase-URL-safe values.
+ */
+export type RouteFilterState = Record<string, string>;
+/**
+ * Parse flat path segments (key/value pairs) into a filter state map.
+ *
+ * @example
+ *   parseRouteFilterSegments(["category", "collectibles", "sort", "price-asc", "page", "2"])
+ *   // → { category: "collectibles", sort: "price-asc", page: "2" }
+ */
+export declare function parseRouteFilterSegments(segments: string[]): RouteFilterState;
+/**
+ * Serialize a filter state map back into flat path segments for use in a URL.
+ *
+ * Keys are emitted in the provided `keyOrder` first, then any remaining keys
+ * alphabetically. Keys with empty / undefined values are omitted.
+ *
+ * @example
+ *   serializeRouteFilterSegments({ category: "collectibles", sort: "price-asc", page: "2" })
+ *   // → "category/collectibles/sort/price-asc/page/2"
+ */
+export declare function serializeRouteFilterSegments(state: RouteFilterState, keyOrder?: string[]): string;
+/**
+ * Build a full listing URL by combining the base path with serialized filter
+ * state segments.
+ *
+ * @example
+ *   buildFilterUrl("/products", { category: "collectibles", sort: "price-asc", page: "2" })
+ *   // → "/products/category/collectibles/sort/price-asc/page/2"
+ */
+export declare function buildFilterUrl(basePath: string, state: RouteFilterState, keyOrder?: string[]): string;
+/**
+ * Extract filter state from a Next.js catch-all `params.segments` array or
+ * an already-split string path after the base route.
+ *
+ * Handles both string[] (Next.js catch-all) and string (split by "/").
+ */
+export declare function extractFilterStateFromParams(segments: string | string[] | undefined): RouteFilterState;
+/**
+ * Merge a partial filter update into the current state, resetting `page` to
+ * "1" when any filter key other than `page` changes (prevents stale
+ * pagination).
+ */
+export declare function mergeFilterUpdate(current: RouteFilterState, update: RouteFilterState): RouteFilterState;

package/dist/features/filters/routeFilterState.js

@@ -0,0 +1,97 @@
+/**
+ * Route-param filter state — parser and serializer
+ *
+ * Canonical URL pattern:
+ *   /listing/[segment-key]/[segment-value]/[segment-key]/[segment-value]/...
+ *
+ * Example:
+ *   /products/category/collectibles/sort/price-asc/page/2
+ *   → { category: "collectibles", sort: "price-asc", page: "2" }
+ *
+ * Special handling:
+ *   - Unknown trailing segments are ignored during parse.
+ *   - `page` defaults to "1" when absent.
+ *   - `sort` defaults to "relevance" when absent.
+ *   - Segments are always lowercase-URL-safe values.
+ */
+/**
+ * Parse flat path segments (key/value pairs) into a filter state map.
+ *
+ * @example
+ *   parseRouteFilterSegments(["category", "collectibles", "sort", "price-asc", "page", "2"])
+ *   // → { category: "collectibles", sort: "price-asc", page: "2" }
+ */
+export function parseRouteFilterSegments(segments) {
+    const state = {};
+    for (let i = 0; i < segments.length - 1; i += 2) {
+        const key = segments[i];
+        const value = segments[i + 1];
+        if (key && value !== undefined) {
+            state[key] = value;
+        }
+    }
+    return state;
+}
+/**
+ * Serialize a filter state map back into flat path segments for use in a URL.
+ *
+ * Keys are emitted in the provided `keyOrder` first, then any remaining keys
+ * alphabetically. Keys with empty / undefined values are omitted.
+ *
+ * @example
+ *   serializeRouteFilterSegments({ category: "collectibles", sort: "price-asc", page: "2" })
+ *   // → "category/collectibles/sort/price-asc/page/2"
+ */
+export function serializeRouteFilterSegments(state, keyOrder = ["category", "sort", "page"]) {
+    const orderedKeys = [
+        ...keyOrder.filter((k) => k in state),
+        ...Object.keys(state)
+            .filter((k) => !keyOrder.includes(k))
+            .sort(),
+    ];
+    return orderedKeys
+        .filter((k) => state[k] !== undefined && state[k] !== "")
+        .map((k) => `${encodeURIComponent(k)}/${encodeURIComponent(state[k])}`)
+        .join("/");
+}
+/**
+ * Build a full listing URL by combining the base path with serialized filter
+ * state segments.
+ *
+ * @example
+ *   buildFilterUrl("/products", { category: "collectibles", sort: "price-asc", page: "2" })
+ *   // → "/products/category/collectibles/sort/price-asc/page/2"
+ */
+export function buildFilterUrl(basePath, state, keyOrder) {
+    const segments = serializeRouteFilterSegments(state, keyOrder);
+    if (!segments)
+        return basePath;
+    return `${basePath.replace(/\/$/, "")}/${segments}`;
+}
+/**
+ * Extract filter state from a Next.js catch-all `params.segments` array or
+ * an already-split string path after the base route.
+ *
+ * Handles both string[] (Next.js catch-all) and string (split by "/").
+ */
+export function extractFilterStateFromParams(segments) {
+    if (!segments)
+        return {};
+    const parts = Array.isArray(segments)
+        ? segments
+        : segments.split("/").filter(Boolean);
+    return parseRouteFilterSegments(parts);
+}
+/**
+ * Merge a partial filter update into the current state, resetting `page` to
+ * "1" when any filter key other than `page` changes (prevents stale
+ * pagination).
+ */
+export function mergeFilterUpdate(current, update) {
+    const next = { ...current, ...update };
+    const changed = Object.keys(update).some((k) => k !== "page" && update[k] !== current[k]);
+    if (changed && !("page" in update)) {
+        next.page = "1";
+    }
+    return next;
+}

package/dist/features/filters/usePendingFilters.d.ts

@@ -0,0 +1,37 @@
+import type { UrlTable } from "./FilterPanel";
+/**
+ * usePendingFilters — deferred apply pattern for filter panels.
+ *
+ * Maintains a local "staging" copy of filter values. Changes write only to
+ * the staging table; nothing is committed to the URL/state until `commit()`
+ * is called (e.g. when the user clicks "Apply Filters").
+ *
+ * Usage:
+ *   const { stagingTable, pendingCount, commit, reset } = usePendingFilters({
+ *     initial: currentUrlParams,
+ *     onCommit: (values) => router.push(buildUrl(values)),
+ *   });
+ *   // Pass stagingTable to <FilterPanel table={stagingTable} />
+ *   // Pass pendingCount to filterPendingCount prop of ListingLayout
+ *   // Call commit() from onFilterApply
+ *   // Call reset() from onFilterClear
+ */
+export interface UsePendingFiltersOptions {
+    /** Current committed filter values (URL params / server state snapshot). */
+    initial: Record<string, string>;
+    /** Called with the full staged values when the user commits. */
+    onCommit: (values: Record<string, string>) => void;
+}
+export interface UsePendingFiltersResult {
+    /** UrlTable backed by staging state — pass to FilterPanel / FilterFacetSection. */
+    stagingTable: UrlTable;
+    /** Number of keys that differ between staged and committed values. */
+    pendingCount: number;
+    /** Flush staged values to committed via onCommit. */
+    commit: () => void;
+    /** Revert staged values back to the last committed snapshot. */
+    reset: () => void;
+    /** Current staged values (read-only snapshot). */
+    staged: Record<string, string>;
+}
+export declare function usePendingFilters({ initial, onCommit, }: UsePendingFiltersOptions): UsePendingFiltersResult;

package/dist/features/filters/usePendingFilters.js

@@ -0,0 +1,22 @@
+"use client";
+import { useState, useCallback, useMemo } from "react";
+export function usePendingFilters({ initial, onCommit, }) {
+    const [staged, setStaged] = useState({ ...initial });
+    const stagingTable = useMemo(() => ({
+        get: (key) => staged[key] ?? "",
+        set: (key, value) => setStaged((prev) => ({ ...prev, [key]: value })),
+        setMany: (updates) => setStaged((prev) => ({ ...prev, ...updates })),
+    }), [staged]);
+    const pendingCount = useMemo(() => {
+        const allKeys = new Set([...Object.keys(staged), ...Object.keys(initial)]);
+        let count = 0;
+        for (const key of allKeys) {
+            if ((staged[key] ?? "") !== (initial[key] ?? ""))
+                count++;
+        }
+        return count;
+    }, [staged, initial]);
+    const commit = useCallback(() => onCommit(staged), [onCommit, staged]);
+    const reset = useCallback(() => setStaged({ ...initial }), [initial]);
+    return { stagingTable, pendingCount, commit, reset, staged };
+}

package/dist/features/forms/Checkbox.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
+    label?: string;
+    suffix?: React.ReactNode;
+    error?: string;
+    indeterminate?: boolean;
+}
+export declare function Checkbox({ label, suffix, error, indeterminate, className, checked, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/forms/Checkbox.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Div, Span } from "../../ui";
+import { cn, ERROR_BASE } from "./utils";
+export function Checkbox({ label, suffix, error, indeterminate, className = "", checked, ...props }) {
+    const inputRef = React.useRef(null);
+    React.useEffect(() => {
+        if (inputRef.current) {
+            inputRef.current.indeterminate = !!indeterminate;
+        }
+    }, [indeterminate]);
+    return (_jsxs(Div, { className: "w-full", children: [_jsxs("label", { className: "flex flex-row items-center gap-3 cursor-pointer group", children: [_jsxs(Div, { className: "relative flex items-center justify-center flex-shrink-0", children: [_jsx("input", { ref: inputRef, type: "checkbox", checked: checked, className: cn("peer w-5 h-5 rounded-md border-2 cursor-pointer", "transition-all duration-200 appearance-none", error
+                                    ? "border-red-400 dark:border-red-500"
+                                    : "border-zinc-300 dark:border-slate-600", "checked:bg-primary-600 checked:border-primary-600", "dark:checked:bg-secondary-500 dark:checked:border-secondary-500", "hover:border-primary-400 dark:hover:border-secondary-400", "focus:outline-none focus:ring-2 focus:ring-primary-500/30 focus:ring-offset-1", "dark:focus:ring-secondary-400/30 dark:focus:ring-offset-slate-900", "disabled:opacity-50 disabled:cursor-not-allowed", className), ...props }), _jsx("svg", { className: "absolute w-3 h-3 text-white pointer-events-none opacity-0 peer-checked:opacity-100 transition-opacity duration-150", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: indeterminate ? (_jsx("line", { x1: "2", y1: "6", x2: "10", y2: "6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })) : (_jsx("path", { d: "M2 6L5 9L10 3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })) })] }), (label || suffix) && (_jsxs(Span, { className: "flex items-center gap-2 text-sm text-zinc-700 dark:text-zinc-300 group-hover:text-zinc-900 dark:group-hover:text-zinc-100 transition-colors", children: [label, suffix] }))] }), error && (_jsx("p", { className: cn(ERROR_BASE, "mt-1.5"), role: "alert", children: error }))] }));
+}

package/dist/features/forms/Form.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+export interface FormProps extends React.FormHTMLAttributes<HTMLFormElement> {
+    children: React.ReactNode;
+}
+export declare function Form({ children, className, ...props }: FormProps): import("react/jsx-runtime").JSX.Element;
+type GapToken = "none" | "xs" | "sm" | "md" | "lg" | "xl";
+export interface FormGroupProps {
+    children: React.ReactNode;
+    columns?: 1 | 2 | 3 | 4;
+    gap?: GapToken;
+    className?: string;
+}
+export declare function FormGroup({ children, columns, gap, className, }: FormGroupProps): import("react/jsx-runtime").JSX.Element;
+/** Wraps a child so it spans full width inside a multi-column FormGroup. */
+export declare function FormFieldSpan({ children, className, }: {
+    children: React.ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export interface FormActionsProps {
+    children: React.ReactNode;
+    align?: "left" | "center" | "right" | "between";
+    className?: string;
+}
+export declare function FormActions({ children, align, className, }: FormActionsProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/features/forms/Form.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Div } from "../../ui";
+import { cn } from "./utils";
+export function Form({ children, className = "", ...props }) {
+    return (_jsx("form", { className: cn("space-y-6 lg:space-y-8", className), ...props, children: children }));
+}
+const GAP_MAP = {
+    none: "gap-0",
+    xs: "gap-2",
+    sm: "gap-3",
+    md: "gap-4 lg:gap-6",
+    lg: "gap-6 lg:gap-8",
+    xl: "gap-8 lg:gap-10",
+};
+export function FormGroup({ children, columns = 1, gap = "md", className = "", }) {
+    const gridClasses = {
+        1: "grid-cols-1",
+        2: "grid-cols-1 sm:grid-cols-2",
+        3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-4",
+        4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
+    };
+    return (_jsx(Div, { className: cn("grid", gridClasses[columns], GAP_MAP[gap], className), children: children }));
+}
+// --- FormFieldSpan ------------------------------------------------------------
+/** Wraps a child so it spans full width inside a multi-column FormGroup. */
+export function FormFieldSpan({ children, className = "", }) {
+    return _jsx(Div, { className: cn("col-span-full", className), children: children });
+}
+const ALIGN_MAP = {
+    left: "justify-start",
+    center: "justify-center",
+    right: "justify-end",
+    between: "justify-between",
+};
+export function FormActions({ children, align = "right", className = "", }) {
+    return (_jsx(Div, { className: cn("flex items-center gap-3 pt-2", ALIGN_MAP[align], className), children: children }));
+}

package/dist/features/forms/Input.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    error?: string;
+    helperText?: string;
+    icon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    success?: boolean;
+}
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/features/forms/Input.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Div, Span } from "../../ui";
+import { cn, INPUT_BASE, INPUT_ERROR, INPUT_SUCCESS, INPUT_DISABLED, INPUT_WITH_ICON, LABEL_BASE, HELPER_BASE, ERROR_BASE, } from "./utils";
+export const Input = React.forwardRef(function Input({ label, error, helperText, icon, rightIcon, success, className = "", required, disabled, ...props }, ref) {
+    const stateClasses = error
+        ? INPUT_ERROR
+        : success
+            ? INPUT_SUCCESS
+            : disabled
+                ? INPUT_DISABLED
+                : "";
+    return (_jsxs(Div, { className: "w-full", children: [label && (_jsxs("label", { className: LABEL_BASE, children: [label, required && (_jsx(Span, { className: "text-red-500 ml-1", "aria-hidden": "true", children: "*" }))] })), _jsxs(Div, { className: "relative group", children: [icon && (_jsx(Div, { className: cn("absolute left-3 top-1/2 -translate-y-1/2 transition-colors duration-150", error
+                            ? "text-red-600 dark:text-red-400"
+                            : "text-zinc-400 dark:text-zinc-500", "group-focus-within:text-primary-500 dark:group-focus-within:text-secondary-400"), children: icon })), _jsx("input", { ref: ref, className: cn("w-full", INPUT_BASE, icon ? INPUT_WITH_ICON : "", rightIcon ? "pr-10" : "", stateClasses, className), disabled: disabled, "aria-invalid": error ? "true" : undefined, "aria-describedby": error
+                            ? `${props.id}-error`
+                            : helperText
+                                ? `${props.id}-helper`
+                                : undefined, ...props }), rightIcon && (_jsx(Div, { className: cn("absolute right-3 top-1/2 -translate-y-1/2 transition-colors duration-150", error
+                            ? "text-red-600 dark:text-red-400"
+                            : "text-zinc-400 dark:text-zinc-500"), children: rightIcon }))] }), error && (_jsx("p", { id: `${props.id}-error`, className: ERROR_BASE, role: "alert", children: error })), !error && helperText && (_jsx("p", { id: `${props.id}-helper`, className: HELPER_BASE, children: helperText }))] }));
+});
+Input.displayName = "Input";

package/dist/features/forms/Radio.d.ts

@@ -0,0 +1,17 @@
+export interface RadioOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface RadioGroupProps {
+    name: string;
+    options: RadioOption[];
+    value?: string;
+    onChange?: (value: string) => void;
+    label?: string;
+    error?: string;
+    orientation?: "vertical" | "horizontal";
+    /** Visual style: "toggle" = pill selectors, "classic" = dot-style */
+    variant?: "toggle" | "classic";
+}
+export declare function RadioGroup({ name, options, value, onChange, label, error, orientation, variant, }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/forms/Radio.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Div, Span } from "../../ui";
+import { cn, LABEL_BASE, ERROR_BASE } from "./utils";
+export function RadioGroup({ name, options, value, onChange, label, error, orientation = "vertical", variant = "toggle", }) {
+    if (variant === "classic") {
+        return (_jsxs(Div, { className: "w-full", children: [label && _jsx("p", { className: LABEL_BASE, children: label }), _jsx(Div, { className: cn("flex gap-3", orientation === "vertical" ? "flex-col" : "flex-row flex-wrap"), children: options.map((option) => {
+                        const isSelected = value === option.value;
+                        return (_jsxs("label", { className: cn("flex items-center gap-2.5 cursor-pointer", option.disabled && "opacity-50 cursor-not-allowed"), children: [_jsx("input", { type: "radio", name: name, value: option.value, checked: isSelected, disabled: option.disabled, onChange: () => !option.disabled && onChange?.(option.value), className: "w-4 h-4 text-primary-600 dark:text-secondary-500 border-zinc-300 dark:border-slate-600 focus:ring-primary-500/30 dark:focus:ring-secondary-400/30" }), _jsx(Span, { className: "text-sm text-zinc-700 dark:text-zinc-300", children: option.label })] }, option.value));
+                    }) }), error && (_jsx("p", { className: ERROR_BASE, role: "alert", children: error }))] }));
+    }
+    // Toggle variant — pill style
+    return (_jsxs(Div, { className: "w-full", children: [label && _jsx("p", { className: LABEL_BASE, children: label }), _jsx(Div, { className: cn("flex gap-2", orientation === "vertical" ? "flex-col" : "flex-row flex-wrap"), role: "radiogroup", "aria-label": label, children: options.map((option) => {
+                    const isSelected = value === option.value;
+                    return (_jsxs("label", { className: cn("flex items-center justify-center px-4 py-2.5 rounded-xl border text-sm font-medium cursor-pointer transition-all duration-200", isSelected
+                            ? "bg-primary-600 dark:bg-secondary-500 border-primary-600 dark:border-secondary-500 text-white shadow-sm"
+                            : "border-zinc-200 dark:border-slate-700 text-zinc-700 dark:text-zinc-300 hover:border-primary-400 dark:hover:border-secondary-400 hover:bg-primary-50/50 dark:hover:bg-secondary-900/20", option.disabled && "opacity-50 cursor-not-allowed"), children: [_jsx("input", { type: "radio", name: name, value: option.value, checked: isSelected, disabled: option.disabled, onChange: () => !option.disabled && onChange?.(option.value), className: "sr-only" }), option.label] }, option.value));
+                }) }), error && (_jsx("p", { className: ERROR_BASE, role: "alert", children: error }))] }));
+}

package/dist/features/forms/Select.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+export interface SelectOption {
+    value: string;
+    label: string;
+}
+export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
+    label?: string;
+    error?: string;
+    helperText?: string;
+    options: SelectOption[];
+    placeholder?: string;
+}
+export declare function Select({ label, error, helperText, options, placeholder, className, required, ...props }: SelectProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/forms/Select.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Div, Span } from "../../ui";
+import { cn, INPUT_BASE, INPUT_ERROR, LABEL_BASE, HELPER_BASE, ERROR_BASE, } from "./utils";
+export function Select({ label, error, helperText, options, placeholder, className = "", required, ...props }) {
+    return (_jsxs(Div, { className: "w-full", children: [label && (_jsxs("label", { className: LABEL_BASE, children: [label, required && (_jsx(Span, { className: "text-red-500 ml-1", "aria-hidden": "true", children: "*" }))] })), _jsxs(Div, { className: "relative group", children: [_jsxs("select", { className: cn(INPUT_BASE, "pr-10 appearance-none cursor-pointer", error ? INPUT_ERROR : "", className), "aria-invalid": error ? "true" : undefined, ...props, children: [placeholder && (_jsx("option", { value: "", disabled: true, children: placeholder })), options.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value)))] }), _jsx(Div, { className: "absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none transition-colors duration-150", children: _jsx("svg", { className: cn("w-5 h-5 transition-transform duration-200", error
+                                ? "text-red-500 dark:text-red-400"
+                                : "text-zinc-400 dark:text-zinc-500"), viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { fillRule: "evenodd", d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z", clipRule: "evenodd" }) }) })] }), error && (_jsx("p", { className: ERROR_BASE, role: "alert", children: error })), !error && helperText && _jsx("p", { className: HELPER_BASE, children: helperText })] }));
+}

package/dist/features/forms/Slider.d.ts

@@ -0,0 +1,20 @@
+export interface SliderProps {
+    value?: number;
+    defaultValue?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    onChange?: (value: number) => void;
+    label?: string;
+    error?: string;
+    disabled?: boolean;
+    showValue?: boolean;
+    /** Format the displayed value. Defaults to `String(value)`. */
+    formatValue?: (value: number) => string;
+    className?: string;
+    id?: string;
+}
+/**
+ * Slider — single-thumb range slider.
+ */
+export declare function Slider({ value: controlledValue, defaultValue, min, max, step, onChange, label, error, disabled, showValue, formatValue, className, id, }: SliderProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/forms/Slider.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Div, Row, Span } from "../../ui";
+import { cn, LABEL_BASE, ERROR_BASE } from "./utils";
+/**
+ * Slider — single-thumb range slider.
+ */
+export function Slider({ value: controlledValue, defaultValue = 0, min = 0, max = 100, step = 1, onChange, label, error, disabled = false, showValue = true, formatValue, className = "", id, }) {
+    const [internalValue, setInternalValue] = React.useState(defaultValue);
+    const value = controlledValue !== undefined ? controlledValue : internalValue;
+    const sliderId = id ?? React.useId();
+    const pct = ((value - min) / (max - min)) * 100;
+    const handleChange = (e) => {
+        const newVal = Number(e.target.value);
+        if (controlledValue === undefined)
+            setInternalValue(newVal);
+        onChange?.(newVal);
+    };
+    const displayValue = formatValue ? formatValue(value) : String(value);
+    return (_jsxs(Div, { className: cn("w-full space-y-2", className), children: [(label || showValue) && (_jsxs(Row, { justify: "between", children: [label && (_jsx("label", { htmlFor: sliderId, className: LABEL_BASE, children: label })), showValue && (_jsx(Span, { className: "text-sm font-semibold tabular-nums text-zinc-900 dark:text-zinc-100", children: displayValue }))] })), _jsxs(Row, { className: "relative h-5", children: [_jsx(Div, { className: "absolute inset-y-0 flex items-center w-full", children: _jsx(Div, { className: "w-full h-1.5 rounded-full bg-zinc-200 dark:bg-slate-700", children: _jsx(Div, { className: "h-full rounded-full bg-primary-500 dark:bg-secondary-500 transition-all", style: { width: `${pct}%` } }) }) }), _jsx("input", { type: "range", id: sliderId, min: min, max: max, step: step, value: value, disabled: disabled, onChange: handleChange, className: cn("relative w-full appearance-none bg-transparent cursor-pointer", "focus:outline-none", "[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4", "[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white", "[&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-primary-500 dark:[&::-webkit-slider-thumb]:border-secondary-500", "[&::-webkit-slider-thumb]:shadow-sm", "[&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4", "[&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-white", "[&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-primary-500 dark:[&::-moz-range-thumb]:border-secondary-500", disabled && "opacity-50 cursor-not-allowed") })] }), _jsxs(Row, { justify: "between", className: "text-xs text-zinc-400 dark:text-zinc-500", children: [_jsx(Span, { children: formatValue ? formatValue(min) : min }), _jsx(Span, { children: formatValue ? formatValue(max) : max })] }), error && (_jsx("p", { className: ERROR_BASE, role: "alert", children: error }))] }));
+}

package/dist/features/forms/Textarea.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    label?: string;
+    error?: string;
+    helperText?: string;
+    showCharCount?: boolean;
+}
+export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/features/forms/Textarea.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Div, Span } from "../../ui";
+import { cn, INPUT_BASE, INPUT_ERROR, LABEL_BASE, HELPER_BASE, ERROR_BASE, } from "./utils";
+export const Textarea = React.forwardRef(function Textarea({ label, error, helperText, showCharCount, className = "", required, maxLength, value, defaultValue, ...props }, ref) {
+    const charCount = typeof value === "string"
+        ? value.length
+        : typeof defaultValue === "string"
+            ? defaultValue.length
+            : 0;
+    return (_jsxs(Div, { className: "w-full", children: [label && (_jsxs("label", { className: LABEL_BASE, children: [label, required && (_jsx(Span, { className: "text-red-500 ml-1", "aria-hidden": "true", children: "*" }))] })), _jsx("textarea", { ref: ref, className: cn(INPUT_BASE, "resize-y min-h-[80px]", error ? INPUT_ERROR : "", className), "aria-invalid": error ? "true" : undefined, maxLength: maxLength, value: value, defaultValue: defaultValue, ...props }), _jsxs(Div, { className: "flex items-center justify-between mt-1.5", children: [_jsxs(Div, { className: "flex-1", children: [error && (_jsx("p", { className: ERROR_BASE, role: "alert", children: error })), !error && helperText && (_jsx("p", { className: HELPER_BASE, children: helperText }))] }), showCharCount && maxLength && (_jsxs("p", { className: cn("text-xs tabular-nums ml-2 flex-shrink-0", charCount >= maxLength
+                            ? "text-red-500 dark:text-red-400"
+                            : "text-zinc-400 dark:text-zinc-500"), children: [charCount, " / ", maxLength] }))] })] }));
+});
+Textarea.displayName = "Textarea";

package/dist/features/forms/Toggle.d.ts

@@ -0,0 +1,15 @@
+export interface ToggleProps {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    label?: string;
+    size?: "sm" | "md" | "lg";
+    className?: string;
+    id?: string;
+}
+/**
+ * Toggle — switch control for boolean input with smooth animation.
+ * Supports controlled and uncontrolled modes.
+ */
+export declare function Toggle({ checked: controlledChecked, defaultChecked, onChange, disabled, label, size, className, id, }: ToggleProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/forms/Toggle.js

@@ -0,0 +1,48 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Button, Row, Span } from "../../ui";
+import { cn } from "./utils";
+const SIZE_CONFIG = {
+    sm: {
+        track: "w-8 h-[18px]",
+        thumb: "w-3.5 h-3.5",
+        translateOn: "translate-x-[14px]",
+        translateOff: "translate-x-0.5",
+    },
+    md: {
+        track: "w-11 h-6",
+        thumb: "w-5 h-5",
+        translateOn: "translate-x-5",
+        translateOff: "translate-x-0.5",
+    },
+    lg: {
+        track: "w-14 h-7",
+        thumb: "w-6 h-6",
+        translateOn: "translate-x-7",
+        translateOff: "translate-x-0.5",
+    },
+};
+/**
+ * Toggle — switch control for boolean input with smooth animation.
+ * Supports controlled and uncontrolled modes.
+ */
+export function Toggle({ checked: controlledChecked, defaultChecked = false, onChange, disabled = false, label, size = "md", className = "", id, }) {
+    const [internalChecked, setInternalChecked] = React.useState(defaultChecked);
+    const checked = controlledChecked !== undefined ? controlledChecked : internalChecked;
+    const handleChange = () => {
+        if (disabled)
+            return;
+        const newChecked = !checked;
+        if (controlledChecked === undefined)
+            setInternalChecked(newChecked);
+        onChange?.(newChecked);
+    };
+    const toggleId = id ?? React.useId();
+    const cfg = SIZE_CONFIG[size];
+    return (_jsxs(Row, { className: cn("gap-3", className), children: [_jsx(Button, { type: "button", role: "switch", id: toggleId, "aria-checked": checked, disabled: disabled, onClick: handleChange, className: cn("relative inline-flex items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary-500/30 dark:focus:ring-secondary-400/30 focus:ring-offset-2 dark:focus:ring-offset-slate-900", cfg.track, checked
+                    ? "bg-primary-600 dark:bg-secondary-500"
+                    : "bg-zinc-200 dark:bg-slate-700", disabled && "opacity-50 cursor-not-allowed"), children: _jsx(Span, { className: cn("inline-block rounded-full bg-white shadow-sm transition-transform duration-200", cfg.thumb, checked ? cfg.translateOn : cfg.translateOff) }) }), label && (_jsx("label", { htmlFor: toggleId, className: cn("text-sm font-medium cursor-pointer select-none", checked
+                    ? "text-zinc-900 dark:text-zinc-100"
+                    : "text-zinc-600 dark:text-zinc-400", disabled && "opacity-50 cursor-not-allowed"), children: label }))] }));
+}

package/dist/features/forms/index.d.ts

@@ -0,0 +1,17 @@
+export { Input } from "./Input";
+export type { InputProps } from "./Input";
+export { Textarea } from "./Textarea";
+export type { TextareaProps } from "./Textarea";
+export { Select } from "./Select";
+export type { SelectProps, SelectOption } from "./Select";
+export { Checkbox } from "./Checkbox";
+export type { CheckboxProps } from "./Checkbox";
+export { RadioGroup } from "./Radio";
+export type { RadioGroupProps, RadioOption } from "./Radio";
+export { Toggle } from "./Toggle";
+export type { ToggleProps } from "./Toggle";
+export { Slider } from "./Slider";
+export type { SliderProps } from "./Slider";
+export { Form, FormGroup, FormFieldSpan, FormActions } from "./Form";
+export type { FormProps, FormGroupProps, FormActionsProps } from "./Form";
+export { cn, INPUT_BASE, INPUT_ERROR, INPUT_SUCCESS, INPUT_DISABLED, } from "./utils";

package/dist/features/forms/index.js

@@ -0,0 +1,11 @@
+// @mohasinac/feat-forms
+// Generic form shell components for any React project.
+export { Input } from "./Input";
+export { Textarea } from "./Textarea";
+export { Select } from "./Select";
+export { Checkbox } from "./Checkbox";
+export { RadioGroup } from "./Radio";
+export { Toggle } from "./Toggle";
+export { Slider } from "./Slider";
+export { Form, FormGroup, FormFieldSpan, FormActions } from "./Form";
+export { cn, INPUT_BASE, INPUT_ERROR, INPUT_SUCCESS, INPUT_DISABLED, } from "./utils";

package/dist/features/forms/utils.d.ts

@@ -0,0 +1,10 @@
+/** Simple class-name concatenation utility. */
+export declare function cn(...classes: (string | undefined | null | false)[]): string;
+export declare const INPUT_BASE = "rounded-lg border border-zinc-200 dark:border-slate-700 bg-white dark:bg-slate-800/60 px-3.5 py-2.5 text-sm text-zinc-900 dark:text-zinc-100 focus:ring-2 focus:ring-primary-500/20 dark:focus:ring-secondary-400/20 focus:border-primary-500 dark:focus:border-secondary-400 focus:outline-none transition-colors duration-150 placeholder:text-zinc-400 dark:placeholder:text-zinc-500";
+export declare const INPUT_ERROR = "border-red-400 dark:border-red-500 focus:ring-red-500/20 focus:border-red-500 bg-red-50/30 dark:bg-red-950/10";
+export declare const INPUT_SUCCESS = "border-emerald-400 dark:border-emerald-500 focus:ring-emerald-500/20 focus:border-emerald-500";
+export declare const INPUT_DISABLED = "bg-zinc-50 dark:bg-slate-800/30 text-zinc-400 dark:text-zinc-500 cursor-not-allowed opacity-60";
+export declare const INPUT_WITH_ICON = "pl-10";
+export declare const LABEL_BASE = "block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1.5";
+export declare const HELPER_BASE = "text-xs text-zinc-500 dark:text-zinc-400 mt-1";
+export declare const ERROR_BASE = "text-xs text-red-600 dark:text-red-400 mt-1";

package/dist/features/forms/utils.js

@@ -0,0 +1,13 @@
+/** Simple class-name concatenation utility. */
+export function cn(...classes) {
+    return classes.filter(Boolean).join(" ");
+}
+// --- Shared style constants ---------------------------------------------------
+export const INPUT_BASE = "rounded-lg border border-zinc-200 dark:border-slate-700 bg-white dark:bg-slate-800/60 px-3.5 py-2.5 text-sm text-zinc-900 dark:text-zinc-100 focus:ring-2 focus:ring-primary-500/20 dark:focus:ring-secondary-400/20 focus:border-primary-500 dark:focus:border-secondary-400 focus:outline-none transition-colors duration-150 placeholder:text-zinc-400 dark:placeholder:text-zinc-500";
+export const INPUT_ERROR = "border-red-400 dark:border-red-500 focus:ring-red-500/20 focus:border-red-500 bg-red-50/30 dark:bg-red-950/10";
+export const INPUT_SUCCESS = "border-emerald-400 dark:border-emerald-500 focus:ring-emerald-500/20 focus:border-emerald-500";
+export const INPUT_DISABLED = "bg-zinc-50 dark:bg-slate-800/30 text-zinc-400 dark:text-zinc-500 cursor-not-allowed opacity-60";
+export const INPUT_WITH_ICON = "pl-10";
+export const LABEL_BASE = "block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1.5";
+export const HELPER_BASE = "text-xs text-zinc-500 dark:text-zinc-400 mt-1";
+export const ERROR_BASE = "text-xs text-red-600 dark:text-red-400 mt-1";