@fuf-stack/megapixels 0.1.0 → 0.2.1

package/dist/Filter/index.cjs

@@ -2,10 +2,12 @@
 
 
 
-var _chunkXMMMIB2Ccjs = require('../chunk-XMMMIB2C.cjs');
 
+var _chunkWDZ45MOJcjs = require('../chunk-WDZ45MOJ.cjs');
 
 
 
-exports.createFilter = _chunkXMMMIB2Ccjs.createFilter_default; exports.default = _chunkXMMMIB2Ccjs.Filter_default; exports.filters = _chunkXMMMIB2Ccjs.filters;
+
+
+exports.createFilter = _chunkWDZ45MOJcjs.createFilter_default; exports.default = _chunkWDZ45MOJcjs.Filter_default; exports.filterVariants = _chunkWDZ45MOJcjs.filterVariants; exports.filters = _chunkWDZ45MOJcjs.filters;
 //# sourceMappingURL=index.cjs.map

package/dist/Filter/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/megapixels/dist/Filter/index.cjs"],"names":[],"mappings":"AAAA;AACE;AACA;AACA;AACF,yDAA8B;AAC9B;AACE;AACA;AACA;AACF,+JAAC","file":"/home/runner/work/pixels/pixels/packages/megapixels/dist/Filter/index.cjs"}
+{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/megapixels/dist/Filter/index.cjs"],"names":[],"mappings":"AAAA;AACE;AACA;AACA;AACA;AACF,yDAA8B;AAC9B;AACE;AACA;AACA;AACA;AACF,0NAAC","file":"/home/runner/work/pixels/pixels/packages/megapixels/dist/Filter/index.cjs"}

package/dist/Filter/index.d.cts

@@ -1,4 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as tailwind_variants from 'tailwind-variants';
+import { TVClassName } from '@fuf-stack/pixel-utils';
 import { ReactNode } from 'react';
 
 /**
@@ -131,6 +133,110 @@ type SearchConfiguration = boolean | {
     placeholder?: string;
 };
 
+declare const filterVariants: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            base?: tailwind_variants.ClassValue;
+            form?: tailwind_variants.ClassValue;
+            searchWrapper?: tailwind_variants.ClassValue;
+            searchShowButton?: tailwind_variants.ClassValue;
+            searchMotionDiv?: tailwind_variants.ClassValue;
+            searchInput?: tailwind_variants.ClassValue;
+            searchInputWrapper?: tailwind_variants.ClassValue;
+            searchSubmitButton?: tailwind_variants.ClassValue;
+            addFilterMenuItem?: tailwind_variants.ClassValue;
+            addFilterMenuButton?: tailwind_variants.ClassValue;
+            activeFilterLabel?: tailwind_variants.ClassValue;
+            filterModalBody?: tailwind_variants.ClassValue;
+            filterModalHeader?: tailwind_variants.ClassValue;
+            filterModalFooter?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            base?: tailwind_variants.ClassValue;
+            form?: tailwind_variants.ClassValue;
+            searchWrapper?: tailwind_variants.ClassValue;
+            searchShowButton?: tailwind_variants.ClassValue;
+            searchMotionDiv?: tailwind_variants.ClassValue;
+            searchInput?: tailwind_variants.ClassValue;
+            searchInputWrapper?: tailwind_variants.ClassValue;
+            searchSubmitButton?: tailwind_variants.ClassValue;
+            addFilterMenuItem?: tailwind_variants.ClassValue;
+            addFilterMenuButton?: tailwind_variants.ClassValue;
+            activeFilterLabel?: tailwind_variants.ClassValue;
+            filterModalBody?: tailwind_variants.ClassValue;
+            filterModalHeader?: tailwind_variants.ClassValue;
+            filterModalFooter?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    base: string;
+    addFilterMenuButton: string;
+    addFilterMenuItem: string;
+    activeFilterLabel: string;
+    filterModalBody: string;
+    filterModalHeader: string;
+    filterModalFooter: string;
+    form: string;
+    searchInput: string;
+    searchInputWrapper: string;
+    searchMotionDiv: string;
+    searchShowButton: string;
+    searchSubmitButton: string;
+    searchWrapper: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            base?: tailwind_variants.ClassValue;
+            form?: tailwind_variants.ClassValue;
+            searchWrapper?: tailwind_variants.ClassValue;
+            searchShowButton?: tailwind_variants.ClassValue;
+            searchMotionDiv?: tailwind_variants.ClassValue;
+            searchInput?: tailwind_variants.ClassValue;
+            searchInputWrapper?: tailwind_variants.ClassValue;
+            searchSubmitButton?: tailwind_variants.ClassValue;
+            addFilterMenuItem?: tailwind_variants.ClassValue;
+            addFilterMenuButton?: tailwind_variants.ClassValue;
+            activeFilterLabel?: tailwind_variants.ClassValue;
+            filterModalBody?: tailwind_variants.ClassValue;
+            filterModalHeader?: tailwind_variants.ClassValue;
+            filterModalFooter?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    base: string;
+    addFilterMenuButton: string;
+    addFilterMenuItem: string;
+    activeFilterLabel: string;
+    filterModalBody: string;
+    filterModalHeader: string;
+    filterModalFooter: string;
+    form: string;
+    searchInput: string;
+    searchInputWrapper: string;
+    searchMotionDiv: string;
+    searchShowButton: string;
+    searchSubmitButton: string;
+    searchWrapper: string;
+}, tailwind_variants.TVReturnType<unknown, {
+    base: string;
+    addFilterMenuButton: string;
+    addFilterMenuItem: string;
+    activeFilterLabel: string;
+    filterModalBody: string;
+    filterModalHeader: string;
+    filterModalFooter: string;
+    form: string;
+    searchInput: string;
+    searchInputWrapper: string;
+    searchMotionDiv: string;
+    searchShowButton: string;
+    searchSubmitButton: string;
+    searchWrapper: string;
+}, undefined, unknown, unknown, undefined>>;
+type ClassName = TVClassName<typeof filterVariants>;
 interface FilterValues {
     search?: string;
     filter?: string | Record<string, unknown>;
@@ -157,7 +263,7 @@ interface FilterProps {
     /** Optional render-prop that receives the resolved, controlled values */
     children?: FilterChildRenderFn;
     /** CSS class name */
-    className?: string;
+    className?: ClassName;
     /** Configuration of the filter */
     config: {
         /**
@@ -216,4 +322,4 @@ declare const filters: {
     }, string[]>;
 };
 
-export { type FilterDefinition, type FilterDisplayProps, type FilterFactory, type FilterFormProps, type FilterInstance, type FiltersConfiguration, createFilter, Filter as default, filters };
+export { type FilterChildRenderFn, type FilterDefinition, type FilterDisplayProps, type FilterFactory, type FilterFormProps, type FilterInstance, type FilterProps, type FilterValues, type FiltersConfiguration, createFilter, Filter as default, filterVariants, filters };

package/dist/Filter/index.d.ts

@@ -1,4 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as tailwind_variants from 'tailwind-variants';
+import { TVClassName } from '@fuf-stack/pixel-utils';
 import { ReactNode } from 'react';
 
 /**
@@ -131,6 +133,110 @@ type SearchConfiguration = boolean | {
     placeholder?: string;
 };
 
+declare const filterVariants: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            base?: tailwind_variants.ClassValue;
+            form?: tailwind_variants.ClassValue;
+            searchWrapper?: tailwind_variants.ClassValue;
+            searchShowButton?: tailwind_variants.ClassValue;
+            searchMotionDiv?: tailwind_variants.ClassValue;
+            searchInput?: tailwind_variants.ClassValue;
+            searchInputWrapper?: tailwind_variants.ClassValue;
+            searchSubmitButton?: tailwind_variants.ClassValue;
+            addFilterMenuItem?: tailwind_variants.ClassValue;
+            addFilterMenuButton?: tailwind_variants.ClassValue;
+            activeFilterLabel?: tailwind_variants.ClassValue;
+            filterModalBody?: tailwind_variants.ClassValue;
+            filterModalHeader?: tailwind_variants.ClassValue;
+            filterModalFooter?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            base?: tailwind_variants.ClassValue;
+            form?: tailwind_variants.ClassValue;
+            searchWrapper?: tailwind_variants.ClassValue;
+            searchShowButton?: tailwind_variants.ClassValue;
+            searchMotionDiv?: tailwind_variants.ClassValue;
+            searchInput?: tailwind_variants.ClassValue;
+            searchInputWrapper?: tailwind_variants.ClassValue;
+            searchSubmitButton?: tailwind_variants.ClassValue;
+            addFilterMenuItem?: tailwind_variants.ClassValue;
+            addFilterMenuButton?: tailwind_variants.ClassValue;
+            activeFilterLabel?: tailwind_variants.ClassValue;
+            filterModalBody?: tailwind_variants.ClassValue;
+            filterModalHeader?: tailwind_variants.ClassValue;
+            filterModalFooter?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    base: string;
+    addFilterMenuButton: string;
+    addFilterMenuItem: string;
+    activeFilterLabel: string;
+    filterModalBody: string;
+    filterModalHeader: string;
+    filterModalFooter: string;
+    form: string;
+    searchInput: string;
+    searchInputWrapper: string;
+    searchMotionDiv: string;
+    searchShowButton: string;
+    searchSubmitButton: string;
+    searchWrapper: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            base?: tailwind_variants.ClassValue;
+            form?: tailwind_variants.ClassValue;
+            searchWrapper?: tailwind_variants.ClassValue;
+            searchShowButton?: tailwind_variants.ClassValue;
+            searchMotionDiv?: tailwind_variants.ClassValue;
+            searchInput?: tailwind_variants.ClassValue;
+            searchInputWrapper?: tailwind_variants.ClassValue;
+            searchSubmitButton?: tailwind_variants.ClassValue;
+            addFilterMenuItem?: tailwind_variants.ClassValue;
+            addFilterMenuButton?: tailwind_variants.ClassValue;
+            activeFilterLabel?: tailwind_variants.ClassValue;
+            filterModalBody?: tailwind_variants.ClassValue;
+            filterModalHeader?: tailwind_variants.ClassValue;
+            filterModalFooter?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    base: string;
+    addFilterMenuButton: string;
+    addFilterMenuItem: string;
+    activeFilterLabel: string;
+    filterModalBody: string;
+    filterModalHeader: string;
+    filterModalFooter: string;
+    form: string;
+    searchInput: string;
+    searchInputWrapper: string;
+    searchMotionDiv: string;
+    searchShowButton: string;
+    searchSubmitButton: string;
+    searchWrapper: string;
+}, tailwind_variants.TVReturnType<unknown, {
+    base: string;
+    addFilterMenuButton: string;
+    addFilterMenuItem: string;
+    activeFilterLabel: string;
+    filterModalBody: string;
+    filterModalHeader: string;
+    filterModalFooter: string;
+    form: string;
+    searchInput: string;
+    searchInputWrapper: string;
+    searchMotionDiv: string;
+    searchShowButton: string;
+    searchSubmitButton: string;
+    searchWrapper: string;
+}, undefined, unknown, unknown, undefined>>;
+type ClassName = TVClassName<typeof filterVariants>;
 interface FilterValues {
     search?: string;
     filter?: string | Record<string, unknown>;
@@ -157,7 +263,7 @@ interface FilterProps {
     /** Optional render-prop that receives the resolved, controlled values */
     children?: FilterChildRenderFn;
     /** CSS class name */
-    className?: string;
+    className?: ClassName;
     /** Configuration of the filter */
     config: {
         /**
@@ -216,4 +322,4 @@ declare const filters: {
     }, string[]>;
 };
 
-export { type FilterDefinition, type FilterDisplayProps, type FilterFactory, type FilterFormProps, type FilterInstance, type FiltersConfiguration, createFilter, Filter as default, filters };
+export { type FilterChildRenderFn, type FilterDefinition, type FilterDisplayProps, type FilterFactory, type FilterFormProps, type FilterInstance, type FilterProps, type FilterValues, type FiltersConfiguration, createFilter, Filter as default, filterVariants, filters };

package/dist/Filter/index.js

@@ -1,11 +1,13 @@
 import {
   Filter_default,
   createFilter_default,
+  filterVariants,
   filters
-} from "../chunk-X574WZ6N.js";
+} from "../chunk-6CU7PF7O.js";
 export {
   createFilter_default as createFilter,
   Filter_default as default,
+  filterVariants,
   filters
 };
 //# sourceMappingURL=index.js.map

package/dist/{chunk-X574WZ6N.js → chunk-6CU7PF7O.js}

@@ -19,7 +19,7 @@ var __spreadValues = (a, b) => {
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 
 // src/Filter/Filter.tsx
-import { cn as cn3 } from "@fuf-stack/pixel-utils";
+import { tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
 import Form from "@fuf-stack/uniform/Form";
 
 // src/Filter/hooks/useFilterValidation.ts
@@ -117,7 +117,7 @@ var FiltersContextProvider = ({
   ]);
   const activeFilters = useMemo2(() => {
     return config3.filter((f) => {
-      return Object.hasOwn(filterValue || {}, f.name);
+      return Object.hasOwn(filterValue != null ? filterValue : {}, f.name);
     }).map((f) => {
       return f.name;
     });
@@ -211,7 +211,7 @@ var useFilters = () => {
 
 // src/Filter/Subcomponents/ActiveFilters.tsx
 import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
-var ActiveFilters = () => {
+var ActiveFilters = ({ className = void 0 }) => {
   const {
     activeFilters,
     getFilterValueByName,
@@ -230,12 +230,12 @@ var ActiveFilters = () => {
         "aria-label": `Open ${name} filter`,
         type: "button",
         onClick: () => {
-          return void showFilterModal(name);
+          showFilterModal(name);
         },
         children: /* @__PURE__ */ jsxs(
           Label,
           {
-            className: "dark:text-foreground h-8 cursor-pointer",
+            className,
             color: hasError(name) ? "danger" : "primary",
             variant: "flat",
             onClose: () => {
@@ -243,7 +243,7 @@ var ActiveFilters = () => {
             },
             children: [
               instance.icon,
-              DisplayComponent ? /* @__PURE__ */ jsx2(DisplayComponent, { config: instance.config, value }) : null
+              /* @__PURE__ */ jsx2(DisplayComponent, { config: instance.config, value })
             ]
           }
         )
@@ -256,10 +256,9 @@ var ActiveFilters_default = ActiveFilters;
 
 // src/Filter/Subcomponents/AddFilterMenu.tsx
 import { FaSliders } from "react-icons/fa6";
-import { cn } from "@fuf-stack/pixel-utils";
 import Menu from "@fuf-stack/pixels/Menu";
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var AddFilterMenu = ({ className = void 0 }) => {
+var AddFilterMenu = ({ classNames = {} }) => {
   const { unusedFilters, addFilter, getFilterInstanceByName } = useFilters();
   const menuItems = unusedFilters.map((name) => {
     var _a;
@@ -278,12 +277,16 @@ var AddFilterMenu = ({ className = void 0 }) => {
   return /* @__PURE__ */ jsxs2(
     Menu,
     {
-      className: cn(className),
       isDisabled: !menuItems.length,
       items: menuItems,
       placement: "bottom-start",
+      className: {
+        item: classNames.addFilterMenuItem,
+        trigger: classNames.addFilterMenuButton
+      },
       triggerButtonProps: {
         "aria-label": "Add Filter",
+        disableRipple: true,
         size: "sm",
         variant: "bordered"
       },
@@ -303,7 +306,7 @@ import Button from "@fuf-stack/pixels/Button";
 import Modal from "@fuf-stack/pixels/Modal";
 import SubmitButton from "@fuf-stack/uniform/SubmitButton";
 import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var FilterModal = () => {
+var FilterModal = ({ classNames = {} }) => {
   var _a, _b;
   const {
     closeFilterModal,
@@ -324,8 +327,9 @@ var FilterModal = () => {
       isOpen: true,
       onClose: closeFilterModal,
       className: {
-        footer: "justify-between",
-        header: "text-default-700 flex items-center gap-3"
+        body: classNames.body,
+        footer: classNames.footer,
+        header: classNames.header
       },
       footer: /* @__PURE__ */ jsxs3(Fragment2, { children: [
         /* @__PURE__ */ jsx4(
@@ -361,23 +365,23 @@ var FilterModal_default = FilterModal;
 import { useState as useState2 } from "react";
 import { FaSearch } from "react-icons/fa";
 import { motion } from "@fuf-stack/pixel-motion";
-import { cn as cn2 } from "@fuf-stack/pixel-utils";
 import Button2 from "@fuf-stack/pixels/Button";
 import { useFormContext as useFormContext2 } from "@fuf-stack/uniform/hooks";
 import Input from "@fuf-stack/uniform/Input";
 import SubmitButton2 from "@fuf-stack/uniform/SubmitButton";
 import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
-var SearchInput = ({ className = void 0, config: config3 }) => {
+var SearchInput = ({ classNames = {}, config: config3 }) => {
   var _a;
   const { formState, setFocus, triggerSubmit } = useFormContext2();
   const isInitiallyVisible = !!((_a = formState == null ? void 0 : formState.defaultValues) == null ? void 0 : _a.search);
   const [isVisible, setIsVisible] = useState2(isInitiallyVisible);
   const placeholder = typeof config3 === "object" ? config3.placeholder : void 0;
-  return /* @__PURE__ */ jsxs4("div", { className: cn2("flex items-center", className), children: [
+  return /* @__PURE__ */ jsxs4("div", { className: classNames.searchWrapper, children: [
     !isVisible && /* @__PURE__ */ jsx5(
       Button2,
       {
-        "aria-label": "Show search input",
+        ariaLabel: "Show search input",
+        className: classNames.searchShowButton,
         icon: /* @__PURE__ */ jsx5(FaSearch, {}),
         size: "sm",
         variant: "bordered",
@@ -390,7 +394,7 @@ var SearchInput = ({ className = void 0, config: config3 }) => {
       motion.div,
       {
         animate: { opacity: 1 },
-        className: "flex w-72 gap-2",
+        className: classNames.searchMotionDiv,
         initial: { opacity: 0.5 },
         onAnimationComplete: () => {
           if (!isInitiallyVisible) {
@@ -411,6 +415,10 @@ var SearchInput = ({ className = void 0, config: config3 }) => {
               name: "search",
               placeholder,
               size: "sm",
+              className: {
+                input: classNames.searchInput,
+                inputWrapper: classNames.searchInputWrapper
+              },
               onClear: () => {
                 triggerSubmit();
               }
@@ -419,7 +427,9 @@ var SearchInput = ({ className = void 0, config: config3 }) => {
           /* @__PURE__ */ jsx5(
             SubmitButton2,
             {
+              ariaLabel: "Trigger search",
               children: null,
+              className: classNames.searchSubmitButton,
               color: "primary",
               icon: /* @__PURE__ */ jsx5(FaSearch, {}),
               size: "sm"
@@ -434,7 +444,39 @@ var SearchInput = ({ className = void 0, config: config3 }) => {
 var SearchInput_default = SearchInput;
 
 // src/Filter/Filter.tsx
-import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var filterVariants = tv({
+  slots: {
+    // outer wrapper
+    base: "",
+    // add filter menu trigger button
+    addFilterMenuButton: "",
+    // add filter menu item
+    addFilterMenuItem: "",
+    // active filter label
+    activeFilterLabel: "dark:text-foreground h-8 cursor-pointer rounded-md",
+    // filter modal body
+    filterModalBody: "",
+    // filter modal header
+    filterModalHeader: "text-default-700 flex items-center gap-3",
+    // filter modal footer
+    filterModalFooter: "justify-between",
+    // form element
+    form: "mb-3 flex flex-wrap gap-3",
+    // search input field
+    searchInput: "",
+    // search input wrapper (inner control)
+    searchInputWrapper: "",
+    // search motion container
+    searchMotionDiv: "flex w-72 gap-2",
+    // search show button
+    searchShowButton: "",
+    // search submit button
+    searchSubmitButton: "",
+    // search wrapper
+    searchWrapper: "flex items-center"
+  }
+});
 var Filter = ({
   children = void 0,
   className = void 0,
@@ -451,22 +493,54 @@ var Filter = ({
     Boolean(config3.search)
   );
   const { data: valuesValidated } = validation.validate(values);
-  return /* @__PURE__ */ jsxs5(Fragment3, { children: [
+  const variants = filterVariants();
+  const classNames = variantsToClassNames(variants, className, "base");
+  return /* @__PURE__ */ jsxs5("div", { className: classNames.base, children: [
     /* @__PURE__ */ jsxs5(
       Form,
       {
-        className: cn3("mb-3 flex flex-wrap gap-3", className),
+        className: classNames.form,
         debug: { disable: true },
         initialValues: valuesValidated != null ? valuesValidated : {},
         name: formName,
         onSubmit: handleSubmit,
         validation,
         children: [
-          config3.search ? /* @__PURE__ */ jsx6(SearchInput_default, { config: config3.search }) : null,
+          config3.search ? /* @__PURE__ */ jsx6(
+            SearchInput_default,
+            {
+              config: config3.search,
+              classNames: {
+                searchInput: classNames.searchInput,
+                searchInputWrapper: classNames.searchInputWrapper,
+                searchMotionDiv: classNames.searchMotionDiv,
+                searchShowButton: classNames.searchShowButton,
+                searchSubmitButton: classNames.searchSubmitButton,
+                searchWrapper: classNames.searchWrapper
+              }
+            }
+          ) : null,
           /* @__PURE__ */ jsxs5(FiltersContextProvider, { config: config3.filters, children: [
-            /* @__PURE__ */ jsx6(ActiveFilters_default, {}),
-            /* @__PURE__ */ jsx6(AddFilterMenu_default, {}),
-            /* @__PURE__ */ jsx6(FilterModal_default, {})
+            /* @__PURE__ */ jsx6(ActiveFilters_default, { className: classNames.activeFilterLabel }),
+            /* @__PURE__ */ jsx6(
+              AddFilterMenu_default,
+              {
+                classNames: {
+                  addFilterMenuButton: classNames.addFilterMenuButton,
+                  addFilterMenuItem: classNames.addFilterMenuItem
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx6(
+              FilterModal_default,
+              {
+                classNames: {
+                  body: classNames.filterModalBody,
+                  footer: classNames.filterModalFooter,
+                  header: classNames.filterModalHeader
+                }
+              }
+            )
           ] })
         ]
       }
@@ -492,19 +566,19 @@ var createFilter = (definition) => {
 var createFilter_default = createFilter;
 
 // src/Filter/filters/boolean/Display.tsx
-import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var Display = ({
   value,
   config: { text, textPrefix, textNoWord }
 }) => {
   if (typeof value === "boolean") {
-    return /* @__PURE__ */ jsxs6(Fragment4, { children: [
+    return /* @__PURE__ */ jsxs6(Fragment3, { children: [
       value ? textPrefix : `${textPrefix} ${textNoWord != null ? textNoWord : "no"}`,
       " ",
       text
     ] });
   }
-  return /* @__PURE__ */ jsx7(Fragment4, { children: `${text}...` });
+  return /* @__PURE__ */ jsx7(Fragment3, { children: `${text}...` });
 };
 var Display_default = Display;
 
@@ -522,11 +596,20 @@ var Form_default = Form2;
 // src/Filter/filters/boolean/schema.ts
 import { boolean, object as object2, string as string2 } from "@fuf-stack/veto";
 var config = object2({
-  /** TODO... */
+  /**
+   * Human‑readable label used in the UI (e.g. in the chip and modal header).
+   * Examples: "Magical", "Haunted"
+   */
   text: string2(),
-  /** TODO... */
+  /**
+   * Optional word shown before the label when building sentence‑like chips.
+   * Examples: "is" → "is Magical"
+   */
   textPrefix: string2().optional(),
-  /** TODO... */
+  /**
+   * Optional negation word used when a boolean value is false.
+   * Examples: "not" → "is not Magical"
+   */
   textNoWord: string2().optional()
 });
 var validate = (_config) => {
@@ -554,7 +637,7 @@ var Display2 = ({
       return (_b = (_a = options.find((op) => {
         return op.value === val;
       })) == null ? void 0 : _a.label) != null ? _b : val;
-    }).join(", ");
+    }).join(" ");
     return `${text} is ${labels}`;
   }
   return `${text} is ...`;
@@ -572,9 +655,15 @@ var Form_default2 = Form3;
 // src/Filter/filters/checkboxgroup/schema.ts
 import { array, object as object3, refineArray, string as string3 } from "@fuf-stack/veto";
 var config2 = object3({
-  /** TODO... */
+  /**
+   * Human‑readable label used in the UI (e.g. label and modal header).
+   * Example: "Snacks", "Mood"
+   */
   text: string3(),
-  /** options... */
+  /**
+   * Options rendered as multiple checkboxes. Each option needs a `label`
+   * (what the user sees) and a `value` (what is written into the form state).
+   */
   options: array(object3({ label: string3(), value: string3() }))
 });
 var validate2 = (cfg) => {
@@ -613,8 +702,9 @@ var filters = {
 var Filter_default2 = Filter_default;
 
 export {
+  filterVariants,
   createFilter_default,
   filters,
   Filter_default2 as Filter_default
 };
-//# sourceMappingURL=chunk-X574WZ6N.js.map
+//# sourceMappingURL=chunk-6CU7PF7O.js.map