@fuf-stack/megapixels 0.8.0 → 0.9.0

package/dist/chunk-NQHJXFFH.js

@@ -1,737 +0,0 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-
-// src/Filter/Filter.tsx
-import createDebug from "debug";
-import { tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
-import Form from "@fuf-stack/uniform/Form";
-
-// src/Filter/hooks/useFilterValidation.ts
-import { useMemo } from "react";
-import { object, string, stringToJSON, veto } from "@fuf-stack/veto";
-var useFilterValidation = (filters2, withSearch) => {
-  return useMemo(() => {
-    let filterSchema = {};
-    filters2.forEach((f) => {
-      filterSchema = __spreadProps(__spreadValues({}, filterSchema), {
-        [f.name]: f.validation(f.config)
-      });
-    });
-    const validationSchema = __spreadValues({
-      // filter validation
-      filter: stringToJSON().pipe(object(filterSchema)).or(object(filterSchema)).optional().nullable().transform((val) => {
-        return val != null ? val : void 0;
-      })
-    }, withSearch ? { search: string({ min: 0 }).nullable().optional() } : {});
-    return veto(validationSchema);
-  }, [filters2, withSearch]);
-};
-
-// src/Filter/Subcomponents/ActiveFilters.tsx
-import Label from "@fuf-stack/pixels/Label";
-
-// src/Filter/Subcomponents/FiltersContext.tsx
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo as useMemo2,
-  useRef,
-  useState
-} from "react";
-import { useFormContext } from "@fuf-stack/uniform/hooks/useFormContext";
-import { jsx } from "react/jsx-runtime";
-var FiltersContext = createContext(
-  void 0
-);
-var FiltersContextProvider = ({
-  children,
-  config: config3
-}) => {
-  const {
-    formState,
-    getFieldState,
-    setValue,
-    triggerSubmit,
-    unregister,
-    watch
-  } = useFormContext();
-  const [currentModalFilter, setCurrentModalFilter] = useState(null);
-  const filterValue = watch("filter", {});
-  const getFilterFormFieldName = useCallback((name) => {
-    return `filter.${name}`;
-  }, []);
-  const getFilterValueByName = useCallback(
-    (name) => {
-      return filterValue[name];
-    },
-    [filterValue]
-  );
-  const showFilterModal = useCallback(
-    (name) => {
-      const prev = getFilterValueByName(name);
-      setCurrentModalFilter({
-        name,
-        hadValue: typeof prev !== "undefined",
-        previousValue: prev
-      });
-    },
-    [getFilterValueByName]
-  );
-  const closeFilterModal = useCallback(() => {
-    if (currentModalFilter == null ? void 0 : currentModalFilter.name) {
-      const fieldName = getFilterFormFieldName(currentModalFilter.name);
-      if (currentModalFilter.hadValue) {
-        setValue(fieldName, currentModalFilter.previousValue);
-      } else {
-        unregister(fieldName);
-      }
-    }
-    setCurrentModalFilter(null);
-  }, [getFilterFormFieldName, currentModalFilter, setValue, unregister]);
-  const lastSubmitCountRef = useRef(0);
-  useEffect(() => {
-    if (formState.submitCount !== lastSubmitCountRef.current && formState.isSubmitSuccessful) {
-      setCurrentModalFilter(null);
-    }
-    lastSubmitCountRef.current = formState.submitCount;
-  }, [
-    formState.submitCount,
-    formState.isSubmitSuccessful,
-    setCurrentModalFilter
-  ]);
-  const activeFilters = useMemo2(() => {
-    return config3.filter((f) => {
-      return Object.hasOwn(filterValue != null ? filterValue : {}, f.name);
-    }).map((f) => {
-      return f.name;
-    });
-  }, [config3, filterValue]);
-  const unusedFilters = useMemo2(() => {
-    return config3.filter((f) => {
-      return !Object.hasOwn(filterValue != null ? filterValue : {}, f.name);
-    }).map((f) => {
-      return f.name;
-    });
-  }, [config3, filterValue]);
-  const getFilterInstanceByName = useCallback(
-    (name) => {
-      return config3.find((f) => {
-        return f.name === name;
-      });
-    },
-    [config3]
-  );
-  const addFilter = useCallback(
-    (name) => {
-      const inst = getFilterInstanceByName(name);
-      showFilterModal(name);
-      setValue(getFilterFormFieldName(name), inst.defaultValue);
-    },
-    [
-      getFilterFormFieldName,
-      getFilterInstanceByName,
-      setValue,
-      showFilterModal
-    ]
-  );
-  const removeFilter = useCallback(
-    (name) => {
-      unregister(getFilterFormFieldName(name));
-      if ((currentModalFilter == null ? void 0 : currentModalFilter.name) === name) {
-        setCurrentModalFilter(null);
-      }
-      triggerSubmit();
-    },
-    [
-      getFilterFormFieldName,
-      currentModalFilter,
-      setCurrentModalFilter,
-      triggerSubmit,
-      unregister
-    ]
-  );
-  const hasError = useCallback(
-    (name) => {
-      return getFieldState(getFilterFormFieldName(name)).invalid;
-    },
-    [getFieldState, getFilterFormFieldName]
-  );
-  const contextValue = useMemo2(() => {
-    return {
-      activeFilters,
-      addFilter,
-      closeFilterModal,
-      getFilterFormFieldName,
-      getFilterValueByName,
-      getFilterInstanceByName,
-      hasError,
-      modalFilterName: currentModalFilter == null ? void 0 : currentModalFilter.name,
-      removeFilter,
-      showFilterModal,
-      unusedFilters
-    };
-  }, [
-    activeFilters,
-    addFilter,
-    closeFilterModal,
-    getFilterFormFieldName,
-    getFilterValueByName,
-    getFilterInstanceByName,
-    hasError,
-    currentModalFilter,
-    removeFilter,
-    showFilterModal,
-    unusedFilters
-  ]);
-  return /* @__PURE__ */ jsx(FiltersContext.Provider, { value: contextValue, children });
-};
-var useFilters = () => {
-  const ctx = useContext(FiltersContext);
-  if (!ctx) {
-    throw new Error("useFilters must be used within FiltersContextProvider");
-  }
-  return ctx;
-};
-
-// src/Filter/Subcomponents/ActiveFilters.tsx
-import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
-var ActiveFilters = ({ className = void 0 }) => {
-  const {
-    activeFilters,
-    getFilterValueByName,
-    getFilterInstanceByName,
-    hasError,
-    removeFilter,
-    showFilterModal
-  } = useFilters();
-  return /* @__PURE__ */ jsx2(Fragment, { children: activeFilters.map((name) => {
-    const instance = getFilterInstanceByName(name);
-    const value = getFilterValueByName(name);
-    const DisplayComponent = instance.components.Display;
-    return /* @__PURE__ */ jsx2(
-      "button",
-      {
-        "aria-label": `Open ${name} filter`,
-        type: "button",
-        onClick: () => {
-          showFilterModal(name);
-        },
-        children: /* @__PURE__ */ jsxs(
-          Label,
-          {
-            className,
-            color: hasError(name) ? "danger" : "primary",
-            variant: "flat",
-            onClose: () => {
-              removeFilter(name);
-            },
-            children: [
-              instance.icon,
-              /* @__PURE__ */ jsx2(DisplayComponent, { config: instance.config, value })
-            ]
-          }
-        )
-      },
-      name
-    );
-  }) });
-};
-var ActiveFilters_default = ActiveFilters;
-
-// src/Filter/Subcomponents/AddFilterMenu.tsx
-import { FaSliders } from "react-icons/fa6";
-import Menu from "@fuf-stack/pixels/Menu";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var AddFilterMenu = ({ classNames = {} }) => {
-  const { unusedFilters, addFilter, getFilterInstanceByName } = useFilters();
-  const menuItems = unusedFilters.map((name) => {
-    var _a;
-    const instance = getFilterInstanceByName(name);
-    const config3 = instance.config;
-    const label = (_a = config3 == null ? void 0 : config3.text) != null ? _a : name;
-    return {
-      key: name,
-      icon: instance.icon,
-      label,
-      onClick: () => {
-        addFilter(name);
-      }
-    };
-  });
-  return /* @__PURE__ */ jsxs2(
-    Menu,
-    {
-      isDisabled: !menuItems.length,
-      items: menuItems,
-      placement: "bottom-start",
-      className: {
-        item: classNames.addFilterMenuItem,
-        trigger: classNames.addFilterMenuButton
-      },
-      triggerButtonProps: {
-        "aria-label": "Add Filter",
-        "data-testid": "add_filter_button",
-        disableRipple: true,
-        size: "sm",
-        variant: "bordered"
-      },
-      children: [
-        /* @__PURE__ */ jsx3(FaSliders, {}),
-        "Filter"
-      ]
-    }
-  );
-};
-var AddFilterMenu_default = AddFilterMenu;
-
-// src/Filter/Subcomponents/FilterModal.tsx
-import { Suspense } from "react";
-import { PiSlidersHorizontalBold } from "react-icons/pi";
-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 = ({ classNames = {} }) => {
-  var _a, _b;
-  const {
-    closeFilterModal,
-    getFilterFormFieldName,
-    getFilterInstanceByName,
-    modalFilterName,
-    removeFilter
-  } = useFilters();
-  if (!modalFilterName) {
-    return null;
-  }
-  const instance = getFilterInstanceByName(modalFilterName);
-  const config3 = instance.config;
-  const FormComponent = instance.components.Form;
-  return /* @__PURE__ */ jsx4(
-    Modal,
-    {
-      isOpen: true,
-      onClose: closeFilterModal,
-      className: {
-        body: classNames.body,
-        footer: classNames.footer,
-        header: classNames.header
-      },
-      footer: /* @__PURE__ */ jsxs3(Fragment2, { children: [
-        /* @__PURE__ */ jsx4(
-          Button,
-          {
-            ariaLabel: "Remove filter",
-            color: "danger",
-            testId: "remove_filter_button",
-            variant: "flat",
-            onClick: () => {
-              removeFilter(modalFilterName);
-            },
-            children: "Remove"
-          }
-        ),
-        /* @__PURE__ */ jsx4(SubmitButton, { ariaLabel: "Apply filter", testId: "apply_filter_button", children: "Apply Filter" })
-      ] }),
-      header: /* @__PURE__ */ jsxs3(Fragment2, { children: [
-        (_a = instance.icon) != null ? _a : /* @__PURE__ */ jsx4(PiSlidersHorizontalBold, {}),
-        /* @__PURE__ */ jsx4("div", { children: `${(_b = config3 == null ? void 0 : config3.text) != null ? _b : modalFilterName} Filter` })
-      ] }),
-      children: /* @__PURE__ */ jsx4(Suspense, { children: /* @__PURE__ */ jsx4(
-        FormComponent,
-        {
-          config: config3,
-          fieldName: getFilterFormFieldName(modalFilterName)
-        }
-      ) })
-    }
-  );
-};
-var FilterModal_default = FilterModal;
-
-// src/Filter/Subcomponents/SearchInput.tsx
-import { useState as useState2 } from "react";
-import { FaSearch } from "react-icons/fa";
-import { motion } from "@fuf-stack/pixel-motion";
-import Button2 from "@fuf-stack/pixels/Button";
-import { useFormContext as useFormContext2 } from "@fuf-stack/uniform/hooks/useFormContext";
-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 = ({ 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: classNames.searchWrapper, children: [
-    !isVisible && /* @__PURE__ */ jsx5(
-      Button2,
-      {
-        ariaLabel: "Show search input",
-        className: classNames.searchShowButton,
-        icon: /* @__PURE__ */ jsx5(FaSearch, {}),
-        size: "sm",
-        testId: "show_search_input_button",
-        variant: "bordered",
-        onClick: () => {
-          setIsVisible(true);
-        }
-      }
-    ),
-    isVisible ? /* @__PURE__ */ jsxs4(
-      motion.div,
-      {
-        animate: { opacity: 1 },
-        className: classNames.searchMotionDiv,
-        initial: !isInitiallyVisible ? { opacity: 0.5 } : false,
-        onAnimationComplete: () => {
-          if (!isInitiallyVisible) {
-            setFocus("search");
-          }
-        },
-        transition: {
-          duration: 0.3,
-          ease: "circOut"
-        },
-        children: [
-          /* @__PURE__ */ jsx5(
-            Input,
-            {
-              clearable: true,
-              debounceDelay: 0,
-              name: "search",
-              placeholder,
-              size: "sm",
-              className: {
-                input: classNames.searchInput,
-                inputWrapper: classNames.searchInputWrapper
-              },
-              onClear: () => {
-                triggerSubmit();
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx5(
-            SubmitButton2,
-            {
-              ariaLabel: "Submit search",
-              children: null,
-              className: classNames.searchSubmitButton,
-              color: "primary",
-              icon: /* @__PURE__ */ jsx5(FaSearch, {}),
-              size: "sm",
-              testId: "submit_search_button"
-            }
-          )
-        ]
-      },
-      "search-input"
-    ) : null
-  ] });
-};
-var SearchInput_default = SearchInput;
-
-// src/Filter/Filter.tsx
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
-var debug = createDebug("megapixels:Filter");
-var filterVariants = tv({
-  slots: {
-    // outer wrapper
-    base: "flex flex-auto flex-col",
-    // add filter menu trigger button
-    addFilterMenuButton: "",
-    // add filter menu item
-    addFilterMenuItem: "",
-    // active filter label
-    activeFilterLabel: "h-8 cursor-pointer rounded-md dark:text-foreground",
-    // filter modal body
-    filterModalBody: "",
-    // filter modal header
-    filterModalHeader: "flex items-center gap-3 text-default-700",
-    // 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,
-  config: config3,
-  formName = "filterComponentForm",
-  onChange,
-  values
-}) => {
-  const handleSubmit = (nextValues) => {
-    debug("handleSubmit", { nextValues });
-    onChange(nextValues);
-  };
-  const validation = useFilterValidation(
-    config3.filters,
-    Boolean(config3.search)
-  );
-  const {
-    data: valuesValidated,
-    errors,
-    success
-  } = validation.validate(values);
-  const variants = filterVariants();
-  const classNames = variantsToClassNames(variants, className, "base");
-  debug("render", {
-    props: { config: config3, values },
-    validation: { errors, success, valuesValidated }
-  });
-  return /* @__PURE__ */ jsxs5("div", { className: classNames.base, children: [
-    /* @__PURE__ */ jsxs5(
-      Form,
-      {
-        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,
-              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, { 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
-                }
-              }
-            )
-          ] })
-        ]
-      }
-    ),
-    children == null ? void 0 : children(valuesValidated != null ? valuesValidated : {})
-  ] });
-};
-var Filter_default = Filter;
-
-// src/Filter/filters/createFilter.ts
-var createFilter = (definition) => {
-  return ({ name, icon, config: config3 }) => {
-    return {
-      components: definition.components,
-      config: __spreadValues(__spreadValues({}, definition.defaults.config), config3 != null ? config3 : {}),
-      defaultValue: definition.defaults.value,
-      icon,
-      name,
-      validation: definition.validation
-    };
-  };
-};
-var createFilter_default = createFilter;
-
-// src/Filter/filters/boolean/Display.tsx
-import { Fragment as Fragment3, jsx as jsx7 } from "react/jsx-runtime";
-var Display = ({
-  value,
-  config: { text, textPrefix, textNoWord }
-}) => {
-  if (typeof value === "boolean") {
-    return /* @__PURE__ */ jsx7(Fragment3, { children: `${value ? textPrefix : `${textPrefix} ${textNoWord != null ? textNoWord : "no"}`} ${text}` });
-  }
-  return /* @__PURE__ */ jsx7(Fragment3, { children: `${text}...` });
-};
-var Display_default = Display;
-
-// src/Filter/filters/boolean/Form.tsx
-import Switch from "@fuf-stack/uniform/Switch";
-import { jsx as jsx8 } from "react/jsx-runtime";
-var Form2 = ({
-  fieldName,
-  config: { text, textPrefix }
-}) => {
-  return /* @__PURE__ */ jsx8(Switch, { label: `${textPrefix} ${text}`, name: fieldName });
-};
-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({
-  /**
-   * Human‑readable label used in the UI (e.g. in the chip and modal header).
-   * Examples: "Magical", "Haunted"
-   */
-  text: string2(),
-  /**
-   * Optional word shown before the label when building sentence‑like chips.
-   * Examples: "is" → "is Magical"
-   */
-  textPrefix: string2().optional(),
-  /**
-   * Optional negation word used when a boolean value is false.
-   * Examples: "not" → "is not Magical"
-   */
-  textNoWord: string2().optional()
-});
-var validate = (_config) => {
-  return boolean().optional();
-};
-
-// src/Filter/filters/boolean/boolean.ts
-var boolean2 = createFilter_default({
-  components: { Display: Display_default, Form: Form_default },
-  defaults: {
-    value: true,
-    config: { text: "Active", textPrefix: "is", textNoWord: "no" }
-  },
-  validation: validate
-});
-
-// src/Filter/filters/checkboxes/Display.tsx
-import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
-var Display2 = ({
-  value,
-  config: { text, options }
-}) => {
-  if (value && value.length > 0) {
-    return /* @__PURE__ */ jsxs6("span", { className: "flex items-center gap-1", children: [
-      text,
-      " is",
-      value.map((val) => {
-        var _a;
-        const option = options.find((op) => {
-          return op.value === val;
-        });
-        const label = (_a = option == null ? void 0 : option.label) != null ? _a : val;
-        const resolvedLabel = typeof label === "function" ? label("display") : label;
-        return /* @__PURE__ */ jsx9("span", { children: resolvedLabel }, val);
-      })
-    ] });
-  }
-  return `${text} is ...`;
-};
-var Display_default2 = Display2;
-
-// src/Filter/filters/checkboxes/Form.tsx
-import Checkboxes from "@fuf-stack/uniform/Checkboxes";
-import { jsx as jsx10 } from "react/jsx-runtime";
-var Form3 = ({ fieldName, config: config3 }) => {
-  const resolvedOptions = config3.options.map((option) => {
-    return __spreadProps(__spreadValues({}, option), {
-      label: typeof option.label === "function" ? option.label("form") : option.label
-    });
-  });
-  return /* @__PURE__ */ jsx10(Checkboxes, { name: fieldName, options: resolvedOptions });
-};
-var Form_default2 = Form3;
-
-// src/Filter/filters/checkboxes/schema.ts
-import { any, array, object as object3, refineArray, string as string3 } from "@fuf-stack/veto";
-var config2 = object3({
-  /**
-   * Human‑readable label used in the UI (e.g. label and modal header).
-   * Example: "Snacks", "Mood"
-   */
-  text: string3(),
-  /**
-   * Options rendered as multiple checkboxes. Each option needs a `label`
-   * (what the user sees) and a `value` (what is written into the form state).
-   * Label can be a string, React node, or a function that receives mode
-   * ('form' or 'display') and returns a React node.
-   */
-  options: array(object3({ label: any(), value: string3() }))
-});
-var validate2 = (cfg) => {
-  return refineArray(array(string3()).optional())({
-    unique: true,
-    custom: (values, ctx) => {
-      if (!cfg) {
-        return;
-      }
-      values.forEach((value) => {
-        if (!cfg.options.find((option) => {
-          return (option == null ? void 0 : option.value) === value;
-        })) {
-          ctx.addIssue({
-            code: "custom",
-            message: `Invalid value: ${value}`
-          });
-        }
-      });
-    }
-  });
-};
-
-// src/Filter/filters/checkboxes/checkboxes.ts
-var checkboxes = createFilter_default({
-  components: { Display: Display_default2, Form: Form_default2 },
-  defaults: { value: [], config: { text: "Options", options: [] } },
-  validation: validate2
-});
-
-// src/Filter/index.ts
-var filters = {
-  boolean: boolean2,
-  checkboxes
-};
-var Filter_default2 = Filter_default;
-
-export {
-  filterVariants,
-  createFilter_default,
-  filters,
-  Filter_default2 as Filter_default
-};
-//# sourceMappingURL=chunk-NQHJXFFH.js.map