@mohasinac/appkit 2.1.3 → 2.2.0

package/dist/features/faq/server.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @mohasinac/appkit/features/faq/server
+ *
+ * Server-only entry point for FAQ API route handlers.
+ */
+import "server-only";
+export * from "./actions";
+export { FAQsRepository, FirebaseFAQsRepository, faqsRepository, } from "./repository/faqs.repository";
+export { GET as faqGET, GET } from "./api/route";

package/dist/features/faq/server.js

@@ -0,0 +1,9 @@
+/**
+ * @mohasinac/appkit/features/faq/server
+ *
+ * Server-only entry point for FAQ API route handlers.
+ */
+import "server-only";
+export * from "./actions";
+export { FAQsRepository, FirebaseFAQsRepository, faqsRepository, } from "./repository/faqs.repository";
+export { GET as faqGET, GET } from "./api/route";

package/dist/features/faq/types/index.d.ts

@@ -0,0 +1,52 @@
+export type FAQAnswerFormat = "plain" | "markdown" | "html";
+export type FAQCategory = "orders_payment" | "shipping_delivery" | "returns_refunds" | "product_information" | "account_security" | "technical_support" | "general";
+export interface FAQAnswer {
+    text: string;
+    format: FAQAnswerFormat;
+}
+export interface FAQStats {
+    views?: number;
+    helpful?: number;
+    notHelpful?: number;
+}
+export interface FAQ {
+    id: string;
+    question: string;
+    answer: FAQAnswer;
+    category: FAQCategory;
+    showOnHomepage?: boolean;
+    showInFooter?: boolean;
+    isPinned?: boolean;
+    order?: number;
+    priority?: number;
+    tags?: string[];
+    relatedFAQs?: string[];
+    stats?: FAQStats;
+    seo?: {
+        slug?: string;
+    };
+    isActive?: boolean;
+    createdAt?: string;
+    updatedAt?: string;
+}
+export interface FAQListResponse {
+    items: FAQ[];
+    total: number;
+    page?: number;
+    pageSize?: number;
+    totalPages?: number;
+    hasMore?: boolean;
+    categories?: readonly string[];
+}
+export interface FAQListParams {
+    category?: FAQCategory;
+    homepage?: boolean;
+    q?: string;
+    search?: string;
+    tags?: string[];
+    showOnHomepage?: boolean;
+    page?: number;
+    perPage?: number;
+    pageSize?: number;
+    sorts?: string;
+}

package/dist/features/faq/types/index.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,23 @@
+import type { FilterOption } from "./filterUtils";
+export interface FacetOption extends FilterOption {
+    count?: number;
+}
+export interface FilterFacetSectionProps {
+    title: string;
+    options: FacetOption[];
+    selected: string[];
+    onChange: (selected: string[]) => void;
+    selectionMode?: "single" | "multi";
+    defaultCollapsed?: boolean;
+    searchable?: boolean;
+    /** Controlled open state */
+    isOpen?: boolean;
+    onToggle?: () => void;
+    onClear?: () => void;
+    className?: string;
+}
+/**
+ * FilterFacetSection — collapsible checkbox/radio filter section.
+ * Supports single-select and multi-select modes.
+ */
+export declare function FilterFacetSection({ title, options, selected, onChange, selectionMode, defaultCollapsed, searchable, isOpen: controlledOpen, onToggle, onClear, className, }: FilterFacetSectionProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/filters/FilterFacetSection.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Button, Div, Input, Row, Span, Text } from "../../ui";
+import { cn } from "./filterUtils";
+/**
+ * FilterFacetSection — collapsible checkbox/radio filter section.
+ * Supports single-select and multi-select modes.
+ */
+export function FilterFacetSection({ title, options, selected, onChange, selectionMode = "multi", defaultCollapsed = true, searchable = false, isOpen: controlledOpen, onToggle, onClear, className = "", }) {
+    const isControlled = controlledOpen !== undefined;
+    const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed);
+    const [search, setSearch] = useState("");
+    const isCollapsed = isControlled ? !controlledOpen : internalCollapsed;
+    const handleToggle = () => {
+        if (onToggle)
+            onToggle();
+        else
+            setInternalCollapsed((c) => !c);
+    };
+    const filtered = search
+        ? options.filter((o) => o.label.toLowerCase().includes(search.toLowerCase()))
+        : options;
+    const toggle = (value) => {
+        if (selectionMode === "single") {
+            onChange(selected.includes(value) ? [] : [value]);
+        }
+        else {
+            onChange(selected.includes(value)
+                ? selected.filter((v) => v !== value)
+                : [...selected, value]);
+        }
+    };
+    const hasValue = selected.length > 0;
+    return (_jsxs(Div, { className: cn("p-4 border-b border-zinc-200 dark:border-slate-700 last:border-b-0", className), children: [_jsxs(Row, { gap: "xs", children: [_jsxs(Button, { type: "button", onClick: handleToggle, variant: "ghost", size: "sm", className: "flex flex-1 items-center justify-between text-sm font-semibold text-zinc-900 dark:text-zinc-50 py-1 hover:opacity-80 transition-opacity", "aria-expanded": !isCollapsed, children: [_jsxs(Row, { as: Span, gap: "xs", children: [title, hasValue && (_jsx(Span, { className: "inline-flex items-center justify-center w-5 h-5 text-xs rounded-full bg-emerald-50 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300 ring-1 ring-emerald-600/20 dark:ring-emerald-400/20", children: selected.length }))] }), _jsx("svg", { className: cn("w-4 h-4 text-zinc-500 dark:text-zinc-400 transition-transform duration-200", isCollapsed ? "" : "rotate-180"), fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) })] }), onClear && hasValue && (_jsx(Button, { type: "button", onClick: onClear, variant: "ghost", size: "sm", className: "inline-flex items-center justify-center w-5 h-5 p-0 text-zinc-500 dark:text-zinc-400 hover:text-red-600 dark:hover:text-red-400 hover:bg-zinc-100 dark:hover:bg-slate-700 transition-colors rounded-full", "aria-label": "Clear filter", children: _jsx("svg", { className: "w-3 h-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) }) }))] }), !isCollapsed && (_jsxs(Div, { className: "mt-3 space-y-1", children: [searchable && options.length > 8 && (_jsx(Input, { type: "search", placeholder: "Search\u2026", value: search, onChange: (e) => setSearch(e.target.value), className: "w-full rounded-md border border-zinc-200 dark:border-slate-700 bg-white dark:bg-slate-800/60 px-2.5 py-1.5 text-xs text-zinc-900 dark:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-primary-500/20 dark:focus:ring-secondary-400/20 mb-2" })), filtered.map((option) => {
+                        const isSelected = selected.includes(option.value);
+                        return (_jsxs(Row, { gap: "2.5", className: "py-1 cursor-pointer group", children: [selectionMode === "single" ? (_jsx("input", { type: "radio", checked: isSelected, onChange: () => toggle(option.value), className: cn("flex-shrink-0 border-zinc-300 dark:border-slate-600 cursor-pointer", "w-4 h-4 rounded-full text-primary-600 dark:text-secondary-500", "focus:ring-primary-500/30 dark:focus:ring-secondary-400/30") })) : (_jsx("input", { type: "checkbox", checked: isSelected, onChange: () => toggle(option.value), className: cn("flex-shrink-0 border-zinc-300 dark:border-slate-600 cursor-pointer", "w-4 h-4 rounded text-primary-600 dark:text-secondary-500 checked:bg-primary-600 dark:checked:bg-secondary-500", "focus:ring-primary-500/30 dark:focus:ring-secondary-400/30") })), _jsx(Span, { className: "flex-1 text-sm text-zinc-700 dark:text-zinc-300 group-hover:text-zinc-900 dark:group-hover:text-zinc-100 transition-colors truncate", children: option.label }), option.count !== undefined && (_jsx(Span, { className: "text-xs text-zinc-400 dark:text-zinc-500 tabular-nums flex-shrink-0", children: option.count }))] }, option.value));
+                    }), filtered.length === 0 && (_jsx(Text, { className: "text-xs text-zinc-400 dark:text-zinc-500 py-1", children: "No results" }))] }))] }));
+}

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

@@ -0,0 +1,61 @@
+import type { FacetOption } from "./FilterFacetSection";
+export interface UrlTable {
+    get(key: string): string;
+    set(key: string, value: string): void;
+    setMany(updates: Record<string, string>): void;
+}
+export interface FacetSingleConfig {
+    type: "facet-single";
+    key: string;
+    title: string;
+    options: FacetOption[];
+    defaultCollapsed?: boolean;
+    searchable?: boolean;
+}
+export interface FacetMultiConfig {
+    type: "facet-multi";
+    key: string;
+    title: string;
+    options: FacetOption[];
+    defaultCollapsed?: boolean;
+    searchable?: boolean;
+}
+export interface SwitchConfig {
+    type: "switch";
+    key: string;
+    title: string;
+    label: string;
+    defaultCollapsed?: boolean;
+}
+export interface RangeNumberConfig {
+    type: "range-number";
+    minKey: string;
+    maxKey: string;
+    title: string;
+    prefix?: string;
+    minLabel?: string;
+    maxLabel?: string;
+    minPlaceholder?: string;
+    maxPlaceholder?: string;
+    showSlider?: boolean;
+    minBound?: number;
+    maxBound?: number;
+    step?: number;
+    defaultCollapsed?: boolean;
+}
+export interface RangeDateConfig {
+    type: "range-date";
+    fromKey: string;
+    toKey: string;
+    title: string;
+    minPlaceholder?: string;
+    maxPlaceholder?: string;
+    defaultCollapsed?: boolean;
+}
+export type FilterConfig = FacetSingleConfig | FacetMultiConfig | SwitchConfig | RangeNumberConfig | RangeDateConfig;
+export interface FilterPanelProps {
+    config: FilterConfig[];
+    table: UrlTable;
+    className?: string;
+}
+export declare function FilterPanel({ config, table, className, }: FilterPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/filters/FilterPanel.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { Div } from "../../ui";
+import { FilterFacetSection } from "./FilterFacetSection";
+import { RangeFilter } from "./RangeFilter";
+import { SwitchFilter } from "./SwitchFilter";
+export function FilterPanel({ config, table, className = "", }) {
+    const [expandedIndex, setExpandedIndex] = useState(() => config.findIndex((c) => !c.defaultCollapsed));
+    const handleToggle = (idx) => setExpandedIndex((prev) => (prev === idx ? null : idx));
+    return (_jsx(Div, { className: className, children: config.map((item, idx) => {
+            const isOpen = expandedIndex === idx;
+            switch (item.type) {
+                case "facet-single": {
+                    const value = table.get(item.key);
+                    const selected = value ? [value] : [];
+                    return (_jsx(FilterFacetSection, { title: item.title, options: item.options, selectionMode: "single", selected: selected, defaultCollapsed: item.defaultCollapsed, searchable: item.searchable, isOpen: isOpen, onToggle: () => handleToggle(idx), onClear: () => table.set(item.key, ""), onChange: (vals) => table.set(item.key, vals[0] ?? "") }, `${item.type}-${item.key}`));
+                }
+                case "facet-multi": {
+                    const raw = table.get(item.key);
+                    const selected = raw ? raw.split(",").filter(Boolean) : [];
+                    return (_jsx(FilterFacetSection, { title: item.title, options: item.options, selectionMode: "multi", selected: selected, defaultCollapsed: item.defaultCollapsed, searchable: item.searchable, isOpen: isOpen, onToggle: () => handleToggle(idx), onClear: () => table.set(item.key, ""), onChange: (vals) => table.set(item.key, vals.join(",")) }, `${item.type}-${item.key}`));
+                }
+                case "switch": {
+                    const checked = table.get(item.key) === "true";
+                    return (_jsx(SwitchFilter, { title: item.title, label: item.label, checked: checked, onChange: (v) => table.set(item.key, v ? "true" : ""), defaultCollapsed: item.defaultCollapsed, isOpen: isOpen, onToggle: () => handleToggle(idx), onClear: () => table.set(item.key, "") }, `${item.type}-${item.key}`));
+                }
+                case "range-number": {
+                    const min = table.get(item.minKey);
+                    const max = table.get(item.maxKey);
+                    return (_jsx(RangeFilter, { title: item.title, type: "number", minValue: min, maxValue: max, onMinChange: (v) => table.set(item.minKey, v), onMaxChange: (v) => table.set(item.maxKey, v), prefix: item.prefix, minLabel: item.minLabel, maxLabel: item.maxLabel, minPlaceholder: item.minPlaceholder, maxPlaceholder: item.maxPlaceholder, showSlider: item.showSlider, minBound: item.minBound, maxBound: item.maxBound, step: item.step, defaultCollapsed: item.defaultCollapsed, isOpen: isOpen, onToggle: () => handleToggle(idx), onClear: () => table.setMany({ [item.minKey]: "", [item.maxKey]: "" }) }, `${item.type}-${item.minKey}-${item.maxKey}`));
+                }
+                case "range-date": {
+                    const from = table.get(item.fromKey);
+                    const to = table.get(item.toKey);
+                    return (_jsx(RangeFilter, { title: item.title, type: "date", minValue: from, maxValue: to, onMinChange: (v) => table.set(item.fromKey, v), onMaxChange: (v) => table.set(item.toKey, v), minPlaceholder: item.minPlaceholder, maxPlaceholder: item.maxPlaceholder, defaultCollapsed: item.defaultCollapsed, isOpen: isOpen, onToggle: () => handleToggle(idx), onClear: () => table.setMany({ [item.fromKey]: "", [item.toKey]: "" }) }, `${item.type}-${item.fromKey}-${item.toKey}`));
+                }
+            }
+        }) }));
+}

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

@@ -0,0 +1,23 @@
+export interface RangeFilterProps {
+    title: string;
+    minLabel?: string;
+    maxLabel?: string;
+    minValue: string;
+    maxValue: string;
+    onMinChange: (v: string) => void;
+    onMaxChange: (v: string) => void;
+    type?: "number" | "date";
+    prefix?: string;
+    minPlaceholder?: string;
+    maxPlaceholder?: string;
+    defaultCollapsed?: boolean;
+    showSlider?: boolean;
+    minBound?: number;
+    maxBound?: number;
+    step?: number;
+    className?: string;
+    isOpen?: boolean;
+    onToggle?: () => void;
+    onClear?: () => void;
+}
+export declare function RangeFilter({ title, minLabel, maxLabel, minValue, maxValue, onMinChange, onMaxChange, type, prefix, minPlaceholder, maxPlaceholder, defaultCollapsed, showSlider, minBound, maxBound, step, className, isOpen: controlledOpen, onToggle, onClear, }: RangeFilterProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/filters/RangeFilter.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { Button, Div, Input, Slider, Span, Stack, Text } from "../../ui";
+import { cn } from "./filterUtils";
+function DualSlider({ minValue, maxValue, onMinChange, onMaxChange, minBound, maxBound, step = 1, prefix = "", }) {
+    const minNum = Math.max(minBound, Math.min(parseFloat(minValue) || minBound, maxBound));
+    const maxNum = Math.min(maxBound, Math.max(parseFloat(maxValue) || maxBound, minBound));
+    return (_jsxs(Stack, { gap: "sm", className: "w-full", children: [_jsxs(Div, { className: "flex items-center justify-between", children: [_jsxs(Span, { className: "text-sm font-semibold tabular-nums text-primary-600 dark:text-secondary-400", children: [prefix, minNum] }), _jsx(Span, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "-" }), _jsxs(Span, { className: "text-sm font-semibold tabular-nums text-primary-600 dark:text-secondary-400", children: [prefix, maxNum] })] }), _jsxs(Stack, { gap: "xs", "aria-hidden": "true", children: [_jsx(Slider, { value: minNum, min: minBound, max: Math.max(minBound, maxNum - step), step: step, onChange: (v) => onMinChange(String(v)) }), _jsx(Slider, { value: maxNum, min: Math.min(maxBound, minNum + step), max: maxBound, step: step, onChange: (v) => onMaxChange(String(v)) })] }), _jsxs(Div, { className: "flex items-center justify-between", children: [_jsxs(Span, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: [prefix, minBound] }), _jsxs(Span, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: [prefix, maxBound] })] })] }));
+}
+export function RangeFilter({ title, minLabel, maxLabel, minValue, maxValue, onMinChange, onMaxChange, type = "number", prefix, minPlaceholder, maxPlaceholder, defaultCollapsed = true, showSlider = false, minBound, maxBound, step = 1, className = "", isOpen: controlledOpen, onToggle, onClear, }) {
+    const isControlled = controlledOpen !== undefined;
+    const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed);
+    const isCollapsed = isControlled ? !controlledOpen : internalCollapsed;
+    const handleToggle = () => {
+        if (onToggle)
+            onToggle();
+        else
+            setInternalCollapsed((c) => !c);
+    };
+    const canShowSlider = showSlider &&
+        type === "number" &&
+        minBound !== undefined &&
+        maxBound !== undefined;
+    const hasValue = !!(minValue || maxValue);
+    const inputClass = "w-full rounded-md border border-zinc-200 dark:border-slate-700 bg-white dark:bg-slate-800/60 px-2.5 py-1.5 text-xs text-zinc-900 dark:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-primary-500/20 dark:focus:ring-secondary-400/20";
+    return (_jsxs(Div, { role: "group", "aria-labelledby": `rf-${title}`, className: cn("p-4 border-b border-zinc-200 dark:border-slate-700 last:border-b-0", className), children: [_jsxs(Div, { className: "flex items-center gap-2", children: [_jsxs(Button, { type: "button", id: `rf-${title}`, onClick: handleToggle, variant: "ghost", size: "sm", className: "flex flex-1 items-center justify-between text-sm font-semibold text-zinc-900 dark:text-zinc-50 py-1 hover:opacity-80 transition-opacity", "aria-expanded": !isCollapsed, children: [_jsxs(Span, { className: "flex items-center gap-2", children: [title, hasValue && (_jsx(Span, { className: "inline-flex items-center justify-center w-5 h-5 text-xs rounded-full bg-emerald-50 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300 ring-1 ring-emerald-600/20", children: "1" }))] }), _jsx("svg", { className: cn("w-4 h-4 text-zinc-500 dark:text-zinc-400 transition-transform duration-200", isCollapsed ? "" : "rotate-180"), fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) })] }), onClear && hasValue && (_jsx(Button, { type: "button", onClick: onClear, variant: "ghost", size: "sm", className: "inline-flex items-center justify-center w-5 h-5 text-zinc-500 dark:text-zinc-400 hover:text-red-600 dark:hover:text-red-400 rounded-full transition-colors", "aria-label": "Clear", children: _jsx("svg", { className: "w-3 h-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) }) }))] }), !isCollapsed && (_jsxs(Stack, { gap: "3", className: "mt-3", children: [canShowSlider && (_jsx(DualSlider, { minValue: minValue, maxValue: maxValue, onMinChange: onMinChange, onMaxChange: onMaxChange, minBound: minBound, maxBound: maxBound, step: step, prefix: prefix })), _jsxs(Div, { className: "flex items-end gap-2", children: [_jsxs(Div, { className: "flex-1 min-w-0", children: [minLabel && (_jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400 mb-1", children: minLabel })), _jsxs(Div, { className: "relative", children: [prefix && (_jsx(Span, { className: "absolute left-2 top-1/2 -translate-y-1/2 text-xs text-zinc-400 dark:text-zinc-500 pointer-events-none", children: prefix })), _jsx(Input, { type: type, value: minValue, onChange: (e) => onMinChange(e.target.value), placeholder: minPlaceholder ?? (type === "date" ? "From" : "Min"), className: cn(inputClass, prefix ? "pl-5" : "") })] })] }), _jsx(Span, { className: "flex-shrink-0 pb-1.5 text-zinc-400 dark:text-zinc-500 text-xs", children: "-" }), _jsxs(Div, { className: "flex-1 min-w-0", children: [maxLabel && (_jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400 mb-1", children: maxLabel })), _jsxs(Div, { className: "relative", children: [prefix && (_jsx(Span, { className: "absolute left-2 top-1/2 -translate-y-1/2 text-xs text-zinc-400 dark:text-zinc-500 pointer-events-none", children: prefix })), _jsx(Input, { type: type, value: maxValue, onChange: (e) => onMaxChange(e.target.value), placeholder: maxPlaceholder ?? (type === "date" ? "To" : "Max"), className: cn(inputClass, prefix ? "pl-5" : "") })] })] })] })] }))] }));
+}

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

@@ -0,0 +1,12 @@
+export interface SwitchFilterProps {
+    title: string;
+    label: string;
+    checked: boolean;
+    onChange: (v: boolean) => void;
+    defaultCollapsed?: boolean;
+    className?: string;
+    isOpen?: boolean;
+    onToggle?: () => void;
+    onClear?: () => void;
+}
+export declare function SwitchFilter({ title, label, checked, onChange, defaultCollapsed, className, isOpen: controlledOpen, onToggle, onClear, }: SwitchFilterProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/filters/SwitchFilter.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Button, Div, Row, Span, Text } from "../../ui";
+import { cn } from "./filterUtils";
+export function SwitchFilter({ title, label, checked, onChange, defaultCollapsed = true, className = "", isOpen: controlledOpen, onToggle, onClear, }) {
+    const isControlled = controlledOpen !== undefined;
+    const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed);
+    const isCollapsed = isControlled ? !controlledOpen : internalCollapsed;
+    const handleToggle = () => {
+        if (onToggle)
+            onToggle();
+        else
+            setInternalCollapsed((c) => !c);
+    };
+    return (_jsxs(Div, { role: "group", "aria-labelledby": `sf-${title}`, className: cn("p-4 border-b border-zinc-200 dark:border-slate-700 last:border-b-0", className), children: [_jsxs(Row, { className: "gap-2", children: [_jsxs(Button, { type: "button", id: `sf-${title}`, onClick: handleToggle, variant: "ghost", size: "sm", className: "flex flex-1 items-center justify-between text-sm font-semibold text-zinc-900 dark:text-zinc-50 py-1 hover:opacity-80 transition-opacity", "aria-expanded": !isCollapsed, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-900 dark:text-zinc-50", children: title }), _jsx("svg", { className: cn("w-4 h-4 text-zinc-500 dark:text-zinc-400 transition-transform duration-200", isCollapsed ? "" : "rotate-180"), fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) })] }), checked && onClear && (_jsx(Button, { type: "button", onClick: onClear, variant: "ghost", size: "sm", className: "inline-flex items-center justify-center w-5 h-5 text-zinc-500 dark:text-zinc-400 hover:text-red-600 dark:hover:text-red-400 rounded-full transition-colors", "aria-label": "Clear", children: _jsx("svg", { className: "w-3 h-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) }) }))] }), !isCollapsed && (_jsx(Div, { className: "mt-3", children: _jsxs(Button, { type: "button", role: "switch", variant: "ghost", size: "sm", "aria-checked": checked, onClick: () => onChange(!checked), className: "flex items-center justify-between w-full group", children: [_jsx(Span, { className: "text-sm text-zinc-700 dark:text-zinc-300 group-hover:text-zinc-900 dark:group-hover:text-zinc-100 transition-colors", children: label }), _jsx(Span, { "aria-hidden": "true", className: cn("relative inline-flex h-5 w-9 flex-shrink-0 rounded-full border-2 border-transparent transition-colors duration-200", checked
+                                ? "bg-primary-600 dark:bg-secondary-500"
+                                : "bg-zinc-200 dark:bg-slate-700"), children: _jsx(Span, { className: cn("pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow ring-0 transition duration-200", checked ? "translate-x-4" : "translate-x-0") }) })] }) }))] }));
+}

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

@@ -0,0 +1,11 @@
+/**
+ * Utility helpers for filter option arrays.
+ */
+export type FilterOption = {
+    value: string;
+    label: string;
+};
+export declare function getFilterLabel(options: ReadonlyArray<FilterOption>, value: string): string | undefined;
+export declare function getFilterValue(options: ReadonlyArray<FilterOption>, label: string): string | undefined;
+/** Simple class-name concatenation. */
+export declare function cn(...classes: (string | undefined | null | false)[]): string;

package/dist/features/filters/filterUtils.js

@@ -0,0 +1,13 @@
+/**
+ * Utility helpers for filter option arrays.
+ */
+export function getFilterLabel(options, value) {
+    return options.find((o) => o.value === value)?.label;
+}
+export function getFilterValue(options, label) {
+    return options.find((o) => o.label === label)?.value;
+}
+/** Simple class-name concatenation. */
+export function cn(...classes) {
+    return classes.filter(Boolean).join(" ");
+}

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

@@ -0,0 +1,10 @@
+export { FilterFacetSection } from "./FilterFacetSection";
+export type { FilterFacetSectionProps, FacetOption, } from "./FilterFacetSection";
+export { RangeFilter } from "./RangeFilter";
+export type { RangeFilterProps } from "./RangeFilter";
+export { SwitchFilter } from "./SwitchFilter";
+export type { SwitchFilterProps } from "./SwitchFilter";
+export { FilterPanel } from "./FilterPanel";
+export type { FilterPanelProps, FilterConfig, UrlTable, FacetSingleConfig, FacetMultiConfig, SwitchConfig, RangeNumberConfig, RangeDateConfig, } from "./FilterPanel";
+export { getFilterLabel, getFilterValue, cn } from "./filterUtils";
+export type { FilterOption } from "./filterUtils";

package/dist/features/filters/index.js

@@ -0,0 +1,6 @@
+// Public API for @mohasinac/feat-filters
+export { FilterFacetSection } from "./FilterFacetSection";
+export { RangeFilter } from "./RangeFilter";
+export { SwitchFilter } from "./SwitchFilter";
+export { FilterPanel } from "./FilterPanel";
+export { getFilterLabel, getFilterValue, cn } from "./filterUtils";

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,15 @@
+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,38 @@
+"use client";
+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,19 @@
+"use client";
+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;