@mohasinac/appkit 4.64.1 → 4.66.0

package/dist/features/events/utils/carousel-slide.d.ts

@@ -21,15 +21,6 @@ export interface BuildSlideOptions {
     /** Who the generated document records as its author. */
     createdBy: string;
 }
-/**
- * `null` when the event carries no `carouselConfig` — most events do not want
- * a slide, and that is the normal case rather than an error.
- *
- * @throws when the config is internally impossible (more cards than zones).
- *         Refusing loudly is deliberate: `HeroCarousel` silently `.slice(0, 6)`s,
- *         so a seventh card would vanish with nothing to indicate it had been
- *         authored at all.
- */
 export declare function buildSlideFromEvent(event: EventDocument, opts: BuildSlideOptions): Partial<CarouselSlideDocument> | null;
 /**
  * Build every event-owned slide, newest-ordered, and refuse an over-full rail.

package/dist/features/events/utils/carousel-slide.js

@@ -94,8 +94,30 @@ function toCard(card, eventHref, dim) {
  *         so a seventh card would vanish with nothing to indicate it had been
  *         authored at all.
  */
+/**
+ * Is this event published to the hero rail?
+ *
+ * 🛑 `showOnCarousel` is the owner; `carouselConfig.active` is a READ-ONLY
+ * legacy fallback for documents written before the flag existed. The `??` is
+ * load-bearing and is not the same as `||`: a deliberate `showOnCarousel:
+ * false` on an event whose old `carouselConfig.active` is still `true` must
+ * mean OFF, and `||` would quietly resolve it back to on — turning an explicit
+ * unpublish into a no-op.
+ *
+ * See the deprecation note on `EventCarouselBase.active` for when the fallback
+ * can be deleted.
+ */
+function isPublishedToCarousel(event) {
+    return (event.showOnCarousel ?? event.carouselConfig?.active) === true;
+}
 export function buildSlideFromEvent(event, opts) {
     const cfg = event.carouselConfig;
+    /*
+     * Both halves are required: the flag says "publish it", the config says
+     * "publish WHAT". Without a config there is no authored artwork, and a slide
+     * synthesised from the event's bare title is a grey rectangle on the first
+     * screen of the site.
+     */
     if (!cfg)
         return null;
     const dim = cfg.dimOpacity ?? DEFAULT_DIM;
@@ -104,7 +126,22 @@ export function buildSlideFromEvent(event, opts) {
         id: `slide-${event.id}`,
         title: event.title,
         order: cfg.order ?? 99,
-        active: cfg.active === true,
+        /*
+         * 🛑 `isPublishedToCarousel`, NOT `cfg.active` — and this line is the whole
+         * point of the `showOnCarousel` flag.
+         *
+         * It read `cfg.active === true`, which meant the new top-level flag was
+         * written to Firestore, round-tripped through the Zod schema and the admin
+         * form, and READ BY NOTHING. Setting it did exactly nothing; clearing it
+         * did exactly nothing. The helper that reads it sat directly above this
+         * function, defined and never called.
+         *
+         * Caught by eslint's no-unused-vars on the helper — which is the reason
+         * that rule is an `error` here and not a warning. A computed-then-discarded
+         * value gives no other signal, and three user-facing defects in this
+         * codebase have surfaced the same way.
+         */
+        active: isPublishedToCarousel(event),
         background: bg,
         settings: { autoplayDelayMs: DEFAULT_AUTOPLAY_MS, height: "medium" },
         createdBy: opts.createdBy,

package/dist/features/faq/actions/faq-actions.d.ts

@@ -27,10 +27,10 @@ export declare const faqCreateSchema: z.ZodEffects<z.ZodObject<{
     template: z.ZodOptional<z.ZodString>;
 }, "strip", z.ZodTypeAny, {
     category: string;
-    priority: number;
     isActive: boolean;
     order: number;
     showOnHomepage: boolean;
+    priority: number;
     question: string;
     answer: {
         text: string;
@@ -39,10 +39,10 @@ export declare const faqCreateSchema: z.ZodEffects<z.ZodObject<{
     showInFooter: boolean;
     isPinned: boolean;
     useSiteSettings: boolean;
-    template?: string | undefined;
     tags?: string[] | undefined;
     relatedFAQs?: string[] | undefined;
     variables?: Record<string, string> | undefined;
+    template?: string | undefined;
 }, {
     category: string;
     question: string;
@@ -50,23 +50,23 @@ export declare const faqCreateSchema: z.ZodEffects<z.ZodObject<{
         text: string;
         format?: "html" | "plain" | "markdown" | undefined;
     };
-    template?: string | undefined;
-    priority?: number | undefined;
     tags?: string[] | undefined;
     isActive?: boolean | undefined;
     order?: number | undefined;
     showOnHomepage?: boolean | undefined;
+    priority?: number | undefined;
     showInFooter?: boolean | undefined;
     isPinned?: boolean | undefined;
     relatedFAQs?: string[] | undefined;
     useSiteSettings?: boolean | undefined;
     variables?: Record<string, string> | undefined;
+    template?: string | undefined;
 }>, {
     category: string;
-    priority: number;
     isActive: boolean;
     order: number;
     showOnHomepage: boolean;
+    priority: number;
     question: string;
     answer: {
         text: string;
@@ -75,10 +75,10 @@ export declare const faqCreateSchema: z.ZodEffects<z.ZodObject<{
     showInFooter: boolean;
     isPinned: boolean;
     useSiteSettings: boolean;
-    template?: string | undefined;
     tags?: string[] | undefined;
     relatedFAQs?: string[] | undefined;
     variables?: Record<string, string> | undefined;
+    template?: string | undefined;
 }, {
     category: string;
     question: string;
@@ -86,17 +86,17 @@ export declare const faqCreateSchema: z.ZodEffects<z.ZodObject<{
         text: string;
         format?: "html" | "plain" | "markdown" | undefined;
     };
-    template?: string | undefined;
-    priority?: number | undefined;
     tags?: string[] | undefined;
     isActive?: boolean | undefined;
     order?: number | undefined;
     showOnHomepage?: boolean | undefined;
+    priority?: number | undefined;
     showInFooter?: boolean | undefined;
     isPinned?: boolean | undefined;
     relatedFAQs?: string[] | undefined;
     useSiteSettings?: boolean | undefined;
     variables?: Record<string, string> | undefined;
+    template?: string | undefined;
 }>;
 export declare const faqUpdateSchema: z.ZodObject<{
     question: z.ZodOptional<z.ZodString>;
@@ -123,13 +123,12 @@ export declare const faqUpdateSchema: z.ZodObject<{
     variables: z.ZodOptional<z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodString>>>;
     template: z.ZodOptional<z.ZodOptional<z.ZodString>>;
 }, "strip", z.ZodTypeAny, {
-    template?: string | undefined;
     category?: string | undefined;
-    priority?: number | undefined;
     tags?: string[] | undefined;
     isActive?: boolean | undefined;
     order?: number | undefined;
     showOnHomepage?: boolean | undefined;
+    priority?: number | undefined;
     question?: string | undefined;
     answer?: {
         text: string;
@@ -140,14 +139,14 @@ export declare const faqUpdateSchema: z.ZodObject<{
     relatedFAQs?: string[] | undefined;
     useSiteSettings?: boolean | undefined;
     variables?: Record<string, string> | undefined;
-}, {
     template?: string | undefined;
+}, {
     category?: string | undefined;
-    priority?: number | undefined;
     tags?: string[] | undefined;
     isActive?: boolean | undefined;
     order?: number | undefined;
     showOnHomepage?: boolean | undefined;
+    priority?: number | undefined;
     question?: string | undefined;
     answer?: {
         text: string;
@@ -158,6 +157,7 @@ export declare const faqUpdateSchema: z.ZodObject<{
     relatedFAQs?: string[] | undefined;
     useSiteSettings?: boolean | undefined;
     variables?: Record<string, string> | undefined;
+    template?: string | undefined;
 }>;
 export type FaqCreateInput = z.infer<typeof faqCreateSchema>;
 export type FaqUpdateInput = z.infer<typeof faqUpdateSchema>;

package/dist/features/faq/components/ContactCTA.js

@@ -1,5 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Card, Div, Heading, Row, Span, Text, TextLink } from "../../../ui/index.js";
+import { Card } from "../../../ui/components/Card.js";
+import { Div } from "../../../ui/components/Div.js";
+import { Heading, Span, Text } from "../../../ui/components/Typography.js";
+import { Row } from "../../../ui/components/Layout.js";
+import { TextLink } from "../../../ui/components/TextLink.js";
 const __P = {
     p8: "p-[var(--appkit-space-8)]",
 };

package/dist/features/faq/components/FAQAccordion.js

@@ -1,7 +1,12 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { Button, Div, RichText, Row, Span, Tabs, TabsList, TabsTrigger, Text } from "../../../ui/index.js";
+import { Button } from "../../../ui/components/Button.js";
+import { Div } from "../../../ui/components/Div.js";
+import { RichText } from "../../../ui/rich-text/RichText.js";
+import { Row } from "../../../ui/components/Layout.js";
+import { Span, Text } from "../../../ui/components/Typography.js";
+import { Tabs, TabsList, TabsTrigger } from "../../../ui/components/Tabs.js";
 /* Phase 9 — `publishedCopyKey`'s first reader. See the 🛑 at the render site. */
 import { resolvePublishedCopy, resolvePublishedValues, } from "../../../_internal/shared/content/published-values.js";
 import { RecordOwnerQuickActions } from "../../admin/components/RecordOwnerQuickActions.js";

package/dist/features/faq/components/FAQCategorySidebar.js

@@ -1,5 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Card, Div, Heading, Row, Span, Text, TextLink } from "../../../ui/index.js";
+import { Card } from "../../../ui/components/Card.js";
+import { Div } from "../../../ui/components/Div.js";
+import { Heading, Span, Text } from "../../../ui/components/Typography.js";
+import { Row } from "../../../ui/components/Layout.js";
+import { TextLink } from "../../../ui/components/TextLink.js";
 import { ROUTES } from "../../../next/routing/route-map.js";
 export function FAQCategorySidebar({ selectedCategory, onCategorySelect, categoryCounts, categories, allFaqsHref = String(ROUTES.PUBLIC.FAQS), categoryHref, contactHref, labels, }) {
     const totalCount = Object.values(categoryCounts).reduce((sum, count) => sum + count, 0);

package/dist/features/faq/components/FAQHelpfulButtons.js

@@ -2,7 +2,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Row } from "@mohasinac/appkit/ui";
 import { useState } from "react";
-import { Button, Div, Span, Text } from "../../../ui/index.js";
+import { Button } from "../../../ui/components/Button.js";
+import { Div } from "../../../ui/components/Div.js";
+import { Span, Text } from "../../../ui/components/Typography.js";
 import { normalizeError } from "../../../errors/normalize.js";
 const __P = {
     p6: "p-[var(--appkit-space-6)]",

package/dist/features/faq/components/FAQPageContent.js

@@ -1,6 +1,13 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Alert, Div, EmptyState, Heading, Input, Row, SlottedListingView, Text, TextLink } from "../../../ui/index.js";
+import { Alert } from "../../../ui/components/Alert.js";
+import { Div } from "../../../ui/components/Div.js";
+import { EmptyState } from "../../../ui/components/EmptyState.js";
+import { Heading, Text } from "../../../ui/components/Typography.js";
+import { Input } from "../../../ui/components/Input.js";
+import { Row } from "../../../ui/components/Layout.js";
+import { SlottedListingView } from "../../../ui/components/SlottedListingView.js";
+import { TextLink } from "../../../ui/components/TextLink.js";
 import { sortBy } from "../../../constants/sort.js";
 import { FAQCategorySidebar } from "./FAQCategorySidebar.js";
 import { FAQSortDropdown } from "./FAQSortDropdown.js";

package/dist/features/faq/components/FAQSearchableList.js

@@ -1,7 +1,8 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
-import { Div, Input } from "../../../ui/index.js";
+import { Div } from "../../../ui/components/Div.js";
+import { Input } from "../../../ui/components/Input.js";
 import { FAQAccordion } from "./FAQAccordion.js";
 const STRIP_HTML = /<[^>]+>/g;
 export function FAQSearchableList({ faqs, labels }) {

package/dist/features/faq/components/FAQSortDropdown.js

@@ -1,5 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Div, Row, Select, Span } from "../../../ui/index.js";
+import { Div } from "../../../ui/components/Div.js";
+import { Row } from "../../../ui/components/Layout.js";
+import { Select } from "../../../ui/components/Select.js";
+import { Span } from "../../../ui/components/Typography.js";
 export function FAQSortDropdown({ selectedSort, onSortChange, labels, }) {
     const sortOptions = [
         { value: "helpful", label: labels?.helpful ?? "Most Helpful" },

package/dist/features/faq/components/RelatedFAQs.js

@@ -1,5 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Card, Heading, Row, Stack, Text, TextLink } from "../../../ui/index.js";
+import { Card } from "../../../ui/components/Card.js";
+import { Heading, Text } from "../../../ui/components/Typography.js";
+import { Row, Stack } from "../../../ui/components/Layout.js";
+import { TextLink } from "../../../ui/components/TextLink.js";
 export function RelatedFAQs({ relatedFAQs, hrefForFaq, labels, }) {
     if (!relatedFAQs || relatedFAQs.length === 0) {
         return null;

package/dist/features/faq/constants/help-guides.d.ts

@@ -19,12 +19,15 @@ import type { FAQCategory } from "../types/index";
  * they get the Help Centre index instead, via `HELP_INDEX_PATH`. Writing a
  * guide to point them at later is a content decision, not a missing entry.
  *
- * 🛑 Paths, not `ROUTES`. The Help Centre pages are consumer routes under
- * `src/app/[locale]/help/`, and `ROUTES` is appkit's own map — adding them
- * there would make appkit declare pages it does not own. They are stable,
- * linked from the footer, and covered by `audit-nav-page-wiring`.
+ * 🛑 CORRECTED 2026-10-24 — this said *"Paths, not `ROUTES`. … `ROUTES` is
+ * appkit's own map — adding them there would make appkit declare pages it does
+ * not own."* The premise was already false when it was written: appkit's route
+ * map has declared `PUBLIC.HELP` and six `HELP_*` children for a long time
+ * (`route-map.ts:97-110`). So the file was hand-writing a literal to avoid
+ * adding something that was already there, and a renamed segment would have
+ * moved the real pages while leaving these guide links on the old path.
  */
-export declare const HELP_INDEX_PATH: "/help";
+export declare const HELP_INDEX_PATH: string;
 export declare const FAQ_CATEGORY_HELP_GUIDE: Record<FAQCategory, {
     path: string;
     label: string;

package/dist/features/faq/constants/help-guides.js

@@ -1,3 +1,4 @@
+import { ROUTES } from "../../../next/routing/route-map.js";
 /**
  * The Help Centre guide that answers a FAQ category at length.
  *
@@ -18,12 +19,15 @@
  * they get the Help Centre index instead, via `HELP_INDEX_PATH`. Writing a
  * guide to point them at later is a content decision, not a missing entry.
  *
- * 🛑 Paths, not `ROUTES`. The Help Centre pages are consumer routes under
- * `src/app/[locale]/help/`, and `ROUTES` is appkit's own map — adding them
- * there would make appkit declare pages it does not own. They are stable,
- * linked from the footer, and covered by `audit-nav-page-wiring`.
+ * 🛑 CORRECTED 2026-10-24 — this said *"Paths, not `ROUTES`. … `ROUTES` is
+ * appkit's own map — adding them there would make appkit declare pages it does
+ * not own."* The premise was already false when it was written: appkit's route
+ * map has declared `PUBLIC.HELP` and six `HELP_*` children for a long time
+ * (`route-map.ts:97-110`). So the file was hand-writing a literal to avoid
+ * adding something that was already there, and a renamed segment would have
+ * moved the real pages while leaving these guide links on the old path.
  */
-export const HELP_INDEX_PATH = "/help";
+export const HELP_INDEX_PATH = String(ROUTES.PUBLIC.HELP);
 /**
  * The orders guide, named once because THREE categories share it.
  *

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

@@ -89,10 +89,9 @@ export declare const faqSchema: z.ZodObject<{
         text: string;
         format: "html" | "plain" | "markdown";
     };
+    tags?: string[] | undefined;
     createdAt?: string | undefined;
     updatedAt?: string | undefined;
-    priority?: number | undefined;
-    tags?: string[] | undefined;
     isActive?: boolean | undefined;
     order?: number | undefined;
     stats?: {
@@ -101,6 +100,7 @@ export declare const faqSchema: z.ZodObject<{
         notHelpful?: number | undefined;
     } | undefined;
     showOnHomepage?: boolean | undefined;
+    priority?: number | undefined;
     showInFooter?: boolean | undefined;
     isPinned?: boolean | undefined;
     relatedFAQs?: string[] | undefined;
@@ -115,10 +115,9 @@ export declare const faqSchema: z.ZodObject<{
         text: string;
         format: "html" | "plain" | "markdown";
     };
+    tags?: string[] | undefined;
     createdAt?: string | undefined;
     updatedAt?: string | undefined;
-    priority?: number | undefined;
-    tags?: string[] | undefined;
     isActive?: boolean | undefined;
     order?: number | undefined;
     stats?: {
@@ -127,6 +126,7 @@ export declare const faqSchema: z.ZodObject<{
         notHelpful?: number | undefined;
     } | undefined;
     showOnHomepage?: boolean | undefined;
+    priority?: number | undefined;
     showInFooter?: boolean | undefined;
     isPinned?: boolean | undefined;
     relatedFAQs?: string[] | undefined;
@@ -143,17 +143,17 @@ export declare const faqListParamsSchema: z.ZodObject<{
     pageSize: z.ZodOptional<z.ZodNumber>;
     perPage: z.ZodOptional<z.ZodNumber>;
 }, "strip", z.ZodTypeAny, {
+    category?: "orders_payment" | "shipping_delivery" | "returns_refunds" | "product_information" | "account_security" | "technical_support" | "general" | undefined;
     page?: number | undefined;
     q?: string | undefined;
     pageSize?: number | undefined;
-    category?: "orders_payment" | "shipping_delivery" | "returns_refunds" | "product_information" | "account_security" | "technical_support" | "general" | undefined;
     perPage?: number | undefined;
     homepage?: boolean | undefined;
 }, {
+    category?: "orders_payment" | "shipping_delivery" | "returns_refunds" | "product_information" | "account_security" | "technical_support" | "general" | undefined;
     page?: number | undefined;
     q?: string | undefined;
     pageSize?: number | undefined;
-    category?: "orders_payment" | "shipping_delivery" | "returns_refunds" | "product_information" | "account_security" | "technical_support" | "general" | undefined;
     perPage?: number | undefined;
     homepage?: boolean | undefined;
 }>;
@@ -278,18 +278,17 @@ export declare const faqFirestoreSchema: z.ZodObject<{
     createdBy: z.ZodString;
 }, "strip", z.ZodTypeAny, {
     id: string;
+    category: "orders_payment" | "shipping_delivery" | "returns_refunds" | "product_information" | "account_security" | "technical_support" | "general";
+    tags: string[];
     createdAt: string | Date | z.objectOutputType<{
         toDate: z.ZodFunction<z.ZodTuple<[], z.ZodUnknown>, z.ZodDate>;
     }, z.ZodTypeAny, "passthrough">;
     updatedAt: string | Date | z.objectOutputType<{
         toDate: z.ZodFunction<z.ZodTuple<[], z.ZodUnknown>, z.ZodDate>;
     }, z.ZodTypeAny, "passthrough">;
-    category: "orders_payment" | "shipping_delivery" | "returns_refunds" | "product_information" | "account_security" | "technical_support" | "general";
-    createdBy: string;
-    priority: number;
-    tags: string[];
     isActive: boolean;
     order: number;
+    createdBy: string;
     stats: {
         views: number;
         helpful: number;
@@ -299,6 +298,7 @@ export declare const faqFirestoreSchema: z.ZodObject<{
         }, z.ZodTypeAny, "passthrough"> | undefined;
     };
     showOnHomepage: boolean;
+    priority: number;
     question: string;
     answer: {
         text: string;
@@ -317,18 +317,17 @@ export declare const faqFirestoreSchema: z.ZodObject<{
     variables?: Record<string, string> | undefined;
 }, {
     id: string;
+    category: "orders_payment" | "shipping_delivery" | "returns_refunds" | "product_information" | "account_security" | "technical_support" | "general";
+    tags: string[];
     createdAt: string | Date | z.objectInputType<{
         toDate: z.ZodFunction<z.ZodTuple<[], z.ZodUnknown>, z.ZodDate>;
     }, z.ZodTypeAny, "passthrough">;
     updatedAt: string | Date | z.objectInputType<{
         toDate: z.ZodFunction<z.ZodTuple<[], z.ZodUnknown>, z.ZodDate>;
     }, z.ZodTypeAny, "passthrough">;
-    category: "orders_payment" | "shipping_delivery" | "returns_refunds" | "product_information" | "account_security" | "technical_support" | "general";
-    createdBy: string;
-    priority: number;
-    tags: string[];
     isActive: boolean;
     order: number;
+    createdBy: string;
     stats: {
         views: number;
         helpful: number;
@@ -338,6 +337,7 @@ export declare const faqFirestoreSchema: z.ZodObject<{
         }, z.ZodTypeAny, "passthrough"> | undefined;
     };
     showOnHomepage: boolean;
+    priority: number;
     question: string;
     answer: {
         text: string;

package/dist/features/filters/AsyncFacetSection.js

@@ -1,8 +1,13 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { Button, Checkbox, Div, Input, Row, Span, Stack, Text } from "../../ui/index.js";
-import { cn } from "./filterUtils.js";
+import { Button } from "../../ui/components/Button.js";
+import { Checkbox } from "../../ui/components/Checkbox.js";
+import { Div } from "../../ui/components/Div.js";
+import { Input } from "../../ui/components/Input.js";
+import { Row, Stack } from "../../ui/components/Layout.js";
+import { Span, Text } from "../../ui/components/Typography.js";
+import { joinClasses } from "../../utils/classnames.js";
 const CLS_BADGE_COUNT = "inline-flex items-center justify-center w-5 h-5 rounded-full bg-success-surface dark:bg-success-surface text-success dark:text-success ring-1 ring-success/20";
 const CLS_CLEAR_ICON = "inline-flex items-center justify-center w-5 h-5 p-[var(--appkit-space-0)] text-[var(--appkit-color-text-muted)] hover:text-error dark:hover:text-error hover:bg-[var(--appkit-color-surface)] dark:hover:bg-slate-700 transition-colors rounded-full";
 /**
@@ -60,7 +65,7 @@ export function AsyncFacetSection({ title, selected, onChange, loadOptions, sele
     const selectedLabels = selected
         .map((v) => labelMap.current.get(v) ?? v)
         .slice(0, 3);
-    return (_jsxs(Div, { className: cn("p-[var(--appkit-space-4)] border-b border-[var(--appkit-color-border)] last:border-b-0", className), children: [_jsxs(Row, { gap: "xs", children: [_jsxs(Button, { type: "button", onClick: () => setCollapsed((c) => !c), variant: "ghost", size: "sm", className: "flex-1 justify-between text-[length:var(--appkit-text-sm)] font-semibold text-[var(--appkit-color-text)] py-[var(--appkit-space-1)] hover:opacity-80 transition-opacity", "aria-expanded": !collapsed, children: [_jsxs(Row, { as: Span, gap: "xs", children: [title, hasValue && (_jsx(Span, { size: "xs", className: CLS_BADGE_COUNT, children: selected.length }))] }), _jsx("svg", { className: cn("w-4 h-4 shrink-0 text-[var(--appkit-color-text-muted)] transition-transform duration-200", collapsed ? "" : "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: CLS_CLEAR_ICON, "aria-label": "Clear filter", children: _jsx("svg", { className: "w-3 h-3 shrink-0", 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" }) }) }))] }), collapsed && hasValue && (_jsxs(Row, { wrap: true, gap: "xs", className: "mt-2", children: [selectedLabels.map((label) => (_jsx(Span, { layout: "inline-flex", size: "xs", border: "default", rounded: "full", padding: "pill-xs", surface: "subtle", color: "muted", children: label }, label))), selected.length > 3 && (_jsxs(Span, { layout: "inline-flex", size: "xs", rounded: "full", padding: "pill-xs", color: "faint", children: ["+", selected.length - 3, " more"] }))] })), _jsx(Div, { className: "mt-2", children: _jsx(Input, { type: "search", placeholder: "Search\u2026", value: query, onChange: (e) => handleQueryChange(e.target.value), className: "w-full rounded-md border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface-input)] px-[var(--appkit-space-2-5)] py-[var(--appkit-space-1-5)] text-[length:var(--appkit-text-xs)] text-[var(--appkit-color-text)] focus:outline-none focus:ring-2 focus:ring-primary-500/20" }) }), !collapsed && (_jsxs(Stack, { className: "mt-3", gap: "xs", children: [options.map((opt) => {
+    return (_jsxs(Div, { className: joinClasses("p-[var(--appkit-space-4)] border-b border-[var(--appkit-color-border)] last:border-b-0", className), children: [_jsxs(Row, { gap: "xs", children: [_jsxs(Button, { type: "button", onClick: () => setCollapsed((c) => !c), variant: "ghost", size: "sm", className: "flex-1 justify-between text-[length:var(--appkit-text-sm)] font-semibold text-[var(--appkit-color-text)] py-[var(--appkit-space-1)] hover:opacity-80 transition-opacity", "aria-expanded": !collapsed, children: [_jsxs(Row, { as: Span, gap: "xs", children: [title, hasValue && (_jsx(Span, { size: "xs", className: CLS_BADGE_COUNT, children: selected.length }))] }), _jsx("svg", { className: joinClasses("w-4 h-4 shrink-0 text-[var(--appkit-color-text-muted)] transition-transform duration-200", collapsed ? "" : "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: CLS_CLEAR_ICON, "aria-label": "Clear filter", children: _jsx("svg", { className: "w-3 h-3 shrink-0", 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" }) }) }))] }), collapsed && hasValue && (_jsxs(Row, { wrap: true, gap: "xs", className: "mt-2", children: [selectedLabels.map((label) => (_jsx(Span, { layout: "inline-flex", size: "xs", border: "default", rounded: "full", padding: "pill-xs", surface: "subtle", color: "muted", children: label }, label))), selected.length > 3 && (_jsxs(Span, { layout: "inline-flex", size: "xs", rounded: "full", padding: "pill-xs", color: "faint", children: ["+", selected.length - 3, " more"] }))] })), _jsx(Div, { className: "mt-2", children: _jsx(Input, { type: "search", placeholder: "Search\u2026", value: query, onChange: (e) => handleQueryChange(e.target.value), className: "w-full rounded-md border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface-input)] px-[var(--appkit-space-2-5)] py-[var(--appkit-space-1-5)] text-[length:var(--appkit-text-xs)] text-[var(--appkit-color-text)] focus:outline-none focus:ring-2 focus:ring-primary-500/20" }) }), !collapsed && (_jsxs(Stack, { className: "mt-3", gap: "xs", children: [options.map((opt) => {
                         const isSelected = selected.includes(opt.value);
                         return (_jsxs(Row, { gap: "2.5", className: "cursor-pointer group", padding: "y-2xs", children: [_jsx(Checkbox, { bare: true, type: selectionMode === "single" ? "radio" : "checkbox", checked: isSelected, onChange: () => toggle(opt.value), "aria-label": opt.label, className: "flex-shrink-0 w-4 h-4 rounded border-[var(--appkit-color-border)] cursor-pointer text-primary-600 dark:text-secondary-500" }), _jsx(Span, { size: "sm", className: "flex-1 group-hover:text-[var(--appkit-color-text)] transition-colors truncate", color: "muted", children: opt.label }), opt.count !== undefined && (_jsx(Span, { size: "xs", className: "tabular-nums flex-shrink-0", color: "faint", children: opt.count }))] }, opt.value));
                     }), options.length === 0 && !loading && (_jsx(Text, { paddingY: "2xs", color: "faint", size: "xs", children: "No results" })), loading && (_jsx(Text, { paddingY: "2xs", className: "animate-pulse", color: "faint", size: "xs", children: "Loading\u2026" })), hasMore && !loading && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", textSize: "xs", textColor: "faint", className: "w-full text-left hover:text-[var(--appkit-color-text)] py-[0.25rem]", onClick: () => void load(query, page + 1), children: "Load more\u2026" }))] }))] }));

package/dist/features/filters/FilterFacetSection.js

@@ -1,8 +1,13 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
-import { Button, Checkbox, Div, Input, Row, Span, Stack, Text } from "../../ui/index.js";
-import { cn } from "./filterUtils.js";
+import { Button } from "../../ui/components/Button.js";
+import { Checkbox } from "../../ui/components/Checkbox.js";
+import { Div } from "../../ui/components/Div.js";
+import { Input } from "../../ui/components/Input.js";
+import { Row, Stack } from "../../ui/components/Layout.js";
+import { Span, Text } from "../../ui/components/Typography.js";
+import { joinClasses } from "../../utils/classnames.js";
 const __O = {
     yAuto: "overflow-y-auto",
 };
@@ -75,16 +80,16 @@ export function FilterFacetSection({ title, options, selected, onChange, selecti
         .slice(0, 3);
     // ── Dropdown variant ────────────────────────────────────────────────────
     if (displayAs === "dropdown") {
-        return (_jsxs(Div, { ref: dropdownRef, className: cn("relative inline-block", className), children: [_jsxs(Button, { type: "button", onClick: () => setDropdownOpen((o) => !o), variant: "ghost", className: cn("inline-flex items-center gap-[var(--appkit-space-1-5)] rounded-full border px-[var(--appkit-space-3)] py-[var(--appkit-space-1-5)] text-[length:var(--appkit-text-sm)] font-medium transition-colors", hasValue
+        return (_jsxs(Div, { ref: dropdownRef, className: joinClasses("relative inline-block", className), children: [_jsxs(Button, { type: "button", onClick: () => setDropdownOpen((o) => !o), variant: "ghost", className: joinClasses("inline-flex items-center gap-[var(--appkit-space-1-5)] rounded-full border px-[var(--appkit-space-3)] py-[var(--appkit-space-1-5)] text-[length:var(--appkit-text-sm)] font-medium transition-colors", hasValue
                         ? CLS_OPTION_SELECTED
-                        : "hover:border-zinc-400 border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] text-[var(--appkit-color-text-muted)] hover:border-[var(--appkit-color-border)]"), children: [title, hasValue && (_jsx(Span, { weight: "bold", className: CLS_OPTION_DOT, children: selected.length })), _jsx("svg", { className: cn("h-3.5 w-3.5 text-zinc-400 transition-transform", dropdownOpen ? "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" }) })] }), dropdownOpen && (_jsxs(Div, { className: "absolute left-0 top-full z-[var(--appkit-z-dropdown,50)] mt-1 min-w-[180px] max-w-[260px]", surface: "default", rounded: "xl", shadow: "lg", border: "default", children: [searchable && (_jsx(Div, { border: "subtle", className: "border-b", padding: "xs", children: _jsx(Input, { type: "search", placeholder: "Search\u2026", value: search, onChange: (e) => handleSearch(e.target.value), className: "w-full rounded-md border px-[var(--appkit-space-2)] py-[var(--appkit-space-1)] text-[length:var(--appkit-text-xs)] focus:outline-none border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface-input)] text-[var(--appkit-color-text)]" }) })), _jsxs(Div, { className: `max-h-56 ${__O.yAuto}`, padding: "y-2xs", children: [filtered.map((option) => {
+                        : "hover:border-zinc-400 border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] text-[var(--appkit-color-text-muted)] hover:border-[var(--appkit-color-border)]"), children: [title, hasValue && (_jsx(Span, { weight: "bold", className: CLS_OPTION_DOT, children: selected.length })), _jsx("svg", { className: joinClasses("h-3.5 w-3.5 text-zinc-400 transition-transform", dropdownOpen ? "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" }) })] }), dropdownOpen && (_jsxs(Div, { className: "absolute left-0 top-full z-[var(--appkit-z-dropdown,50)] mt-1 min-w-[180px] max-w-[260px]", surface: "default", rounded: "xl", shadow: "lg", border: "default", children: [searchable && (_jsx(Div, { border: "subtle", className: "border-b", padding: "xs", children: _jsx(Input, { type: "search", placeholder: "Search\u2026", value: search, onChange: (e) => handleSearch(e.target.value), className: "w-full rounded-md border px-[var(--appkit-space-2)] py-[var(--appkit-space-1)] text-[length:var(--appkit-text-xs)] focus:outline-none border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface-input)] text-[var(--appkit-color-text)]" }) })), _jsxs(Div, { className: `max-h-56 ${__O.yAuto}`, padding: "y-2xs", children: [filtered.map((option) => {
                                     const isSelected = selected.includes(option.value);
                                     return (_jsxs(Row, { gap: "xs", className: "cursor-pointer py-[0.375rem] hover:bg-[var(--appkit-color-bg)] mx-1", padding: "x-sm", rounded: "lg", onClick: () => toggle(option.value), children: [_jsx(Checkbox, { bare: true, type: selectionMode === "single" ? "radio" : "checkbox", checked: isSelected, onChange: () => toggle(option.value), "aria-label": option.label, className: "h-3.5 w-3.5 flex-shrink-0 cursor-pointer rounded text-primary-600 border-[var(--appkit-color-border)] dark:text-secondary-500" }), _jsx(Span, { size: "xs", className: "flex-1 truncate", color: "muted", children: option.label }), option.count !== undefined && (_jsx(Span, { className: "flex-shrink-0 text-[10px] tabular-nums", color: "faint", children: option.count }))] }, option.value));
                                 }), filtered.length === 0 && (_jsx(Text, { paddingY: "xs", paddingX: "x-sm", color: "faint", size: "xs", children: "No results" }))] }), hasValue && (_jsx(Div, { border: "subtle", className: "border-t p-[0.25rem]", children: _jsx(Button, { type: "button", variant: "ghost", size: "sm", className: CLS_CLEAR_BTN, onClick: () => { onChange([]); onClear?.(); setDropdownOpen(false); }, children: "Clear" }) }))] }))] }));
     }
     // ── Accordion variant (default) ─────────────────────────────────────────
-    return (_jsxs(Div, { className: cn("p-[var(--appkit-space-4)] border-b border-[var(--appkit-color-border)] last:border-b-0", className), children: [_jsxs(Row, { gap: "xs", children: [_jsxs(Button, { type: "button", onClick: handleToggle, variant: "ghost", size: "sm", justify: "between", className: "flex-1 text-[0.875rem] font-[600] text-[var(--appkit-color-text)] py-[0.25rem] hover:opacity-80 transition-opacity", "aria-expanded": !isCollapsed, children: [_jsxs(Row, { as: Span, gap: "xs", children: [title, hasValue && (_jsx(Span, { size: "xs", className: CLS_BADGE_COUNT, children: selected.length }))] }), _jsx("svg", { className: cn("w-4 h-4 shrink-0 text-[var(--appkit-color-text-muted)] 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: CLS_CLEAR_ICON, "aria-label": "Clear filter", children: _jsx("svg", { className: "w-3 h-3 shrink-0", 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 && hasValue && (_jsxs(Row, { wrap: true, gap: "xs", className: "mt-2", children: [selectedLabels.map((label) => (_jsx(Span, { layout: "inline-flex", size: "xs", className: "border border-[var(--appkit-color-border)]", rounded: "full", padding: "pill-xs", surface: "subtle", color: "muted", children: label }, label))), selected.length > 3 && (_jsxs(Span, { layout: "inline-flex", size: "xs", rounded: "full", padding: "pill-xs", color: "faint", children: ["+", selected.length - 3, " more"] }))] })), searchable && (_jsx(Div, { className: "mt-2", children: _jsx(Input, { type: "search", placeholder: "Search\u2026", value: search, onChange: (e) => handleSearch(e.target.value), className: "w-full rounded-md border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface-input)] px-[var(--appkit-space-2-5)] py-[var(--appkit-space-1-5)] text-[length:var(--appkit-text-xs)] text-[var(--appkit-color-text)] focus:outline-none focus:ring-2 focus:ring-primary-500/20 " }) })), !isCollapsed && (_jsxs(Stack, { className: "mt-3", gap: "xs", children: [filtered.map((option) => {
+    return (_jsxs(Div, { className: joinClasses("p-[var(--appkit-space-4)] border-b border-[var(--appkit-color-border)] last:border-b-0", className), children: [_jsxs(Row, { gap: "xs", children: [_jsxs(Button, { type: "button", onClick: handleToggle, variant: "ghost", size: "sm", justify: "between", className: "flex-1 text-[0.875rem] font-[600] text-[var(--appkit-color-text)] py-[0.25rem] hover:opacity-80 transition-opacity", "aria-expanded": !isCollapsed, children: [_jsxs(Row, { as: Span, gap: "xs", children: [title, hasValue && (_jsx(Span, { size: "xs", className: CLS_BADGE_COUNT, children: selected.length }))] }), _jsx("svg", { className: joinClasses("w-4 h-4 shrink-0 text-[var(--appkit-color-text-muted)] 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: CLS_CLEAR_ICON, "aria-label": "Clear filter", children: _jsx("svg", { className: "w-3 h-3 shrink-0", 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 && hasValue && (_jsxs(Row, { wrap: true, gap: "xs", className: "mt-2", children: [selectedLabels.map((label) => (_jsx(Span, { layout: "inline-flex", size: "xs", className: "border border-[var(--appkit-color-border)]", rounded: "full", padding: "pill-xs", surface: "subtle", color: "muted", children: label }, label))), selected.length > 3 && (_jsxs(Span, { layout: "inline-flex", size: "xs", rounded: "full", padding: "pill-xs", color: "faint", children: ["+", selected.length - 3, " more"] }))] })), searchable && (_jsx(Div, { className: "mt-2", children: _jsx(Input, { type: "search", placeholder: "Search\u2026", value: search, onChange: (e) => handleSearch(e.target.value), className: "w-full rounded-md border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface-input)] px-[var(--appkit-space-2-5)] py-[var(--appkit-space-1-5)] text-[length:var(--appkit-text-xs)] text-[var(--appkit-color-text)] focus:outline-none focus:ring-2 focus:ring-primary-500/20 " }) })), !isCollapsed && (_jsxs(Stack, { className: "mt-3", gap: "xs", children: [filtered.map((option) => {
                         const isSelected = selected.includes(option.value);
-                        return (_jsxs(Row, { gap: "2.5", className: "cursor-pointer group", padding: "y-2xs", children: [selectionMode === "single" ? (_jsx(Checkbox, { bare: true, type: "radio", checked: isSelected, onChange: () => toggle(option.value), "aria-label": option.label, className: cn("flex-shrink-0 border-[var(--appkit-color-border)] 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(Checkbox, { bare: true, type: "checkbox", checked: isSelected, onChange: () => toggle(option.value), "aria-label": option.label, className: cn("flex-shrink-0 border-[var(--appkit-color-border)] 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, { size: "sm", className: "flex-1 group-hover:text-[var(--appkit-color-text)] transition-colors truncate", color: "muted", children: option.label }), option.count !== undefined && (_jsx(Span, { size: "xs", className: "tabular-nums flex-shrink-0", color: "faint", children: option.count }))] }, option.value));
+                        return (_jsxs(Row, { gap: "2.5", className: "cursor-pointer group", padding: "y-2xs", children: [selectionMode === "single" ? (_jsx(Checkbox, { bare: true, type: "radio", checked: isSelected, onChange: () => toggle(option.value), "aria-label": option.label, className: joinClasses("flex-shrink-0 border-[var(--appkit-color-border)] 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(Checkbox, { bare: true, type: "checkbox", checked: isSelected, onChange: () => toggle(option.value), "aria-label": option.label, className: joinClasses("flex-shrink-0 border-[var(--appkit-color-border)] 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, { size: "sm", className: "flex-1 group-hover:text-[var(--appkit-color-text)] transition-colors truncate", color: "muted", children: option.label }), option.count !== undefined && (_jsx(Span, { size: "xs", className: "tabular-nums flex-shrink-0", color: "faint", children: option.count }))] }, option.value));
                     }), filtered.length === 0 && (_jsx(Text, { paddingY: "2xs", color: "faint", size: "xs", children: "No results" }))] }))] }));
 }

package/dist/features/filters/FilterPanel.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from "react";
-import { Div } from "../../ui/index.js";
+import { Div } from "../../ui/components/Div.js";
 import { FilterFacetSection } from "./FilterFacetSection.js";
 import { RangeFilter } from "./RangeFilter.js";
 import { SwitchFilter } from "./SwitchFilter.js";

package/dist/features/filters/RangeFilter.js

@@ -1,8 +1,13 @@
 "use client";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { useState } from "react";
-import { Button, Div, Input, Row, Slider, Span, Stack, Text } from "../../ui/index.js";
-import { cn } from "./filterUtils.js";
+import { Button } from "../../ui/components/Button.js";
+import { Div } from "../../ui/components/Div.js";
+import { Input } from "../../ui/components/Input.js";
+import { Row, Stack } from "../../ui/components/Layout.js";
+import { Slider } from "../../ui/components/Slider.js";
+import { Span, Text } from "../../ui/components/Typography.js";
+import { joinClasses } from "../../utils/classnames.js";
 const CLS_BADGE_COUNT = "inline-flex items-center justify-center w-5 h-5 rounded-full bg-success-surface dark:bg-success-surface text-success dark:text-success ring-1 ring-success/20";
 const CLS_CLEAR_BTN = "inline-flex items-center justify-center w-5 h-5 text-[var(--appkit-color-text-muted)] hover:text-error dark:hover:text-error rounded-full transition-colors";
 /**
@@ -63,5 +68,5 @@ export function RangeFilter({ title, minLabel, maxLabel, minValue, maxValue, onM
             onMaxChange("");
         });
     const inputClass = "w-full rounded-md border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface-input)] px-[var(--appkit-space-2-5)] py-[var(--appkit-space-1-5)] text-[length:var(--appkit-text-xs)] text-[var(--appkit-color-text)] focus:outline-none focus:ring-2 focus:ring-primary-500/20 ";
-    return (_jsxs(Div, { role: "group", "aria-labelledby": `rf-${title}`, className: cn("p-[var(--appkit-space-4)] border-b border-[var(--appkit-color-border)] last:border-b-0", className), children: [_jsxs(Row, { align: "center", gap: "sm", children: [_jsxs(Button, { type: "button", id: `rf-${title}`, onClick: handleToggle, variant: "ghost", size: "sm", justify: "between", className: "flex-1 text-[0.875rem] font-[600] text-[var(--appkit-color-text)] py-[0.25rem] hover:opacity-80 transition-opacity", "aria-expanded": !isCollapsed, children: [_jsxs(Span, { layout: "flex", gap: "md", children: [title, hasValue && (_jsx(Span, { size: "xs", className: CLS_BADGE_COUNT, children: "1" }))] }), _jsx("svg", { className: cn("w-4 h-4 shrink-0 text-[var(--appkit-color-text-muted)] 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" }) })] }), hasValue && (_jsx(Button, { type: "button", onClick: handleClear, variant: "ghost", size: "sm", className: CLS_CLEAR_BTN, "aria-label": "Clear", children: _jsx("svg", { className: "w-3 h-3 shrink-0", 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(Row, { align: "end", gap: "sm", children: [_jsxs(Div, { className: "flex-1 min-w-0", children: [minLabel && (_jsx(Text, { className: "mb-1", color: "muted", size: "xs", children: minLabel })), _jsxs(Div, { className: "relative", children: [prefix && (_jsx(Span, { size: "xs", className: "absolute left-2 top-1/2 -translate-y-1/2 pointer-events-none", color: "faint", 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, { size: "xs", className: "flex-shrink-0 pb-[0.375rem]", color: "faint", children: "-" }), _jsxs(Div, { className: "flex-1 min-w-0", children: [maxLabel && (_jsx(Text, { className: "mb-1", color: "muted", size: "xs", children: maxLabel })), _jsxs(Div, { className: "relative", children: [prefix && (_jsx(Span, { size: "xs", className: "absolute left-2 top-1/2 -translate-y-1/2 pointer-events-none", color: "faint", 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" : "") })] })] })] })] }))] }));
+    return (_jsxs(Div, { role: "group", "aria-labelledby": `rf-${title}`, className: joinClasses("p-[var(--appkit-space-4)] border-b border-[var(--appkit-color-border)] last:border-b-0", className), children: [_jsxs(Row, { align: "center", gap: "sm", children: [_jsxs(Button, { type: "button", id: `rf-${title}`, onClick: handleToggle, variant: "ghost", size: "sm", justify: "between", className: "flex-1 text-[0.875rem] font-[600] text-[var(--appkit-color-text)] py-[0.25rem] hover:opacity-80 transition-opacity", "aria-expanded": !isCollapsed, children: [_jsxs(Span, { layout: "flex", gap: "md", children: [title, hasValue && (_jsx(Span, { size: "xs", className: CLS_BADGE_COUNT, children: "1" }))] }), _jsx("svg", { className: joinClasses("w-4 h-4 shrink-0 text-[var(--appkit-color-text-muted)] 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" }) })] }), hasValue && (_jsx(Button, { type: "button", onClick: handleClear, variant: "ghost", size: "sm", className: CLS_CLEAR_BTN, "aria-label": "Clear", children: _jsx("svg", { className: "w-3 h-3 shrink-0", 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(Row, { align: "end", gap: "sm", children: [_jsxs(Div, { className: "flex-1 min-w-0", children: [minLabel && (_jsx(Text, { className: "mb-1", color: "muted", size: "xs", children: minLabel })), _jsxs(Div, { className: "relative", children: [prefix && (_jsx(Span, { size: "xs", className: "absolute left-2 top-1/2 -translate-y-1/2 pointer-events-none", color: "faint", children: prefix })), _jsx(Input, { type: type, value: minValue, onChange: (e) => onMinChange(e.target.value), placeholder: minPlaceholder ?? (type === "date" ? "From" : "Min"), className: joinClasses(inputClass, prefix ? "pl-5" : "") })] })] }), _jsx(Span, { size: "xs", className: "flex-shrink-0 pb-[0.375rem]", color: "faint", children: "-" }), _jsxs(Div, { className: "flex-1 min-w-0", children: [maxLabel && (_jsx(Text, { className: "mb-1", color: "muted", size: "xs", children: maxLabel })), _jsxs(Div, { className: "relative", children: [prefix && (_jsx(Span, { size: "xs", className: "absolute left-2 top-1/2 -translate-y-1/2 pointer-events-none", color: "faint", children: prefix })), _jsx(Input, { type: type, value: maxValue, onChange: (e) => onMaxChange(e.target.value), placeholder: maxPlaceholder ?? (type === "date" ? "To" : "Max"), className: joinClasses(inputClass, prefix ? "pl-5" : "") })] })] })] })] }))] }));
 }