@povio/ui 2.1.0 → 2.1.2

package/dist/auth.d.ts

@@ -0,0 +1,6 @@
+export { createAclGuard } from './utils/vendor/acl/AclGuard';
+export { AbilityContext } from './utils/vendor/acl/ability.context';
+export type { AppAbilities, AppAbility } from './utils/vendor/acl/appAbility.types';
+export { Can } from './utils/vendor/acl/Can';
+export { AuthGuard } from './utils/vendor/auth/AuthGuard';
+export { AuthContext } from './utils/vendor/auth/auth.context';

package/dist/auth.js

@@ -0,0 +1,12 @@
+import { createAclGuard } from "./utils/vendor/acl/AclGuard.js";
+import { AbilityContext } from "./utils/vendor/acl/ability.context.js";
+import { Can } from "./utils/vendor/acl/Can.js";
+import { AuthGuard } from "./utils/vendor/auth/AuthGuard.js";
+import { AuthContext } from "./utils/vendor/auth/auth.context.js";
+export {
+  AbilityContext,
+  AuthContext,
+  AuthGuard,
+  Can,
+  createAclGuard
+};

package/dist/components/inputs/Inputs/InputItem.d.ts

@@ -28,7 +28,6 @@ declare const componentRegistry: {
     readonly dateTimePicker: <TFieldValues extends import('react-hook-form').FieldValues>({ fullIso, ...props }: import('../DateTime/DateTimePicker/DateTimePicker').ControlledDateTimePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
     readonly timePicker: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('../DateTime/TimePicker/TimePicker').ControlledTimePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
     readonly dateRangePicker: <TFieldValues extends import('react-hook-form').FieldValues>({ fullIso, minValue, maxValue, ...props }: import('../DateTime/DateRangePicker/DateRangePicker').ControlledDateRangePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
-    readonly textEditor: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('../TextEditor/TextEditor').ControlledTextEditorProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
     readonly unknown: null;
 };
 export type InputComponentRegistry = typeof componentRegistry;

package/dist/components/inputs/Inputs/InputItem.js

@@ -12,7 +12,6 @@ import { Autocomplete } from "../Selection/Autocomplete/Autocomplete.js";
 import { QueryAutocomplete } from "../Selection/Autocomplete/QueryAutocomplete.js";
 import { Select } from "../Selection/Select/Select.js";
 import { Slider } from "../Slider/Slider.js";
-import { TextEditor } from "../TextEditor/TextEditor.js";
 import { Toggle } from "../Toggle/Toggle.js";
 import { Segment } from "../../segment/Segment.js";
 const componentRegistry = {
@@ -31,7 +30,6 @@ const componentRegistry = {
   dateTimePicker: DateTimePicker,
   timePicker: TimePicker,
   dateRangePicker: DateRangePicker,
-  textEditor: TextEditor,
   unknown: null
 };
 function InputItem({ form, inputDef }) {

package/dist/components/inputs/Selection/shared/SelectListBoxItem.js

@@ -33,7 +33,7 @@ const SelectListBoxItem = ({
       isDisabled,
       className: clsx(
         selectListBoxItemClass,
-        !isMultiple && "selected:bg-interactive-contained-primary-idle selected:text-interactive-text-secondary-idle-inverted",
+        !isMultiple && "selected:bg-interactive-contained-primary-idle selected:text-interactive-contained-primary-on-idle",
         isNewItem ? "text-interactive-text-primary-idle" : "text-interactive-text-secondary-idle"
       ),
       children: [
@@ -41,7 +41,7 @@ const SelectListBoxItem = ({
           CheckboxCheckmark,
           {
             variant: "default",
-            className: "group-focus-visible:!outline-none"
+            className: "group-focus-visible:outline-none!"
           }
         ),
         isMultiple && isSearchable && /* @__PURE__ */ jsx(
@@ -54,7 +54,7 @@ const SelectListBoxItem = ({
               CheckboxCheckmark,
               {
                 variant: "default",
-                className: "group-focus-visible:!outline-none"
+                className: "group-focus-visible:outline-none!"
               }
             )
           }

package/dist/config/router.context.d.ts

@@ -1,20 +1,15 @@
 import { PropsWithChildren } from 'react';
-import { UrlObject } from 'url';
 interface UIRouterProviderProps {
-    push: (url: UrlObject | string) => Promise<boolean>;
-    replace: (url: UrlObject | string) => Promise<boolean>;
-    query: NodeJS.Dict<string | string[]>;
+    push: (url: string) => Promise<boolean>;
+    replace: (url: string) => Promise<boolean>;
     pathname: string;
+    searchString: string;
 }
-interface UIRouterContextValue {
-    push: (url: UrlObject | string) => Promise<boolean>;
-    replace: (url: UrlObject | string) => Promise<boolean>;
-    pathname: string;
-    query: NodeJS.Dict<string | string[]>;
+interface UIRouterContextValue extends UIRouterProviderProps {
     searchParams: URLSearchParams;
 }
 export declare namespace UIRouter {
-    const UIRouterProvider: ({ children, pathname, push, query, replace, }: PropsWithChildren<UIRouterProviderProps>) => import("react/jsx-runtime").JSX.Element;
+    const UIRouterProvider: ({ children, pathname, push, replace, searchString, }: PropsWithChildren<UIRouterProviderProps>) => import("react/jsx-runtime").JSX.Element;
     const useUIRouter: () => UIRouterContextValue;
 }
 export {};

package/dist/config/router.context.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { createContext, use } from "react";
+import { createContext, useMemo, use } from "react";
 import { RouterProvider } from "react-aria";
 var UIRouter;
 ((UIRouter2) => {
@@ -8,27 +8,23 @@ var UIRouter;
     children,
     pathname,
     push,
-    query,
-    replace
+    replace,
+    searchString
   }) => {
-    const searchParams = new URLSearchParams();
-    for (const [k, v] of Object.entries(query)) {
-      if (Array.isArray(v)) {
-        for (const item of v) {
-          searchParams.append(k, item);
-        }
-      } else {
-        searchParams.set(k, v);
-      }
-    }
-    const value = {
-      searchParams,
-      pathname,
-      push,
-      query,
-      replace
-    };
-    return /* @__PURE__ */ jsx(UIRouterContext, { value, children: /* @__PURE__ */ jsx(RouterProvider, { navigate: (href) => push(href), children }) });
+    const searchParams = useMemo(() => {
+      return new URLSearchParams(searchString);
+    }, [searchString]);
+    const value = useMemo(
+      () => ({
+        searchParams,
+        pathname,
+        push,
+        searchString,
+        replace
+      }),
+      [searchParams, pathname, push, searchString, replace]
+    );
+    return /* @__PURE__ */ jsx(UIRouterContext, { value, children: /* @__PURE__ */ jsx(RouterProvider, { navigate: push, children }) });
   };
   UIRouter2.useUIRouter = () => {
     const context = use(UIRouterContext);

package/dist/config/theme.context.d.ts

@@ -0,0 +1,17 @@
+import { PropsWithChildren } from 'react';
+import { z } from 'zod';
+export declare namespace ThemeContext {
+    const ThemeSchema: z.ZodLiteral<"dark" | "light" | "system">;
+    export type Theme = z.infer<typeof ThemeSchema>;
+    interface ThemeContextValue {
+        theme: Theme;
+        systemTheme?: Exclude<Theme, "system">;
+        updateTheme: (theme: Theme) => void;
+    }
+    interface ThemeContextProviderProps {
+        storageKey?: string;
+    }
+    export const ThemeContextProvider: ({ children, storageKey, }: PropsWithChildren<ThemeContextProviderProps>) => import("react/jsx-runtime").JSX.Element;
+    export const useTheme: () => ThemeContextValue;
+    export {};
+}

package/dist/config/theme.context.js

@@ -0,0 +1,69 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useState, useCallback, useEffect, useMemo, use } from "react";
+import { z } from "zod";
+import { useLocalStorage } from "../hooks/useLocalStorage.js";
+var ThemeContext;
+((_ThemeContext) => {
+  const DEFAULT_STORAGE_KEY = "theme";
+  const ThemeSchema = z.literal(["light", "dark", "system"]);
+  const ThemeContext2 = createContext(null);
+  _ThemeContext.ThemeContextProvider = ({
+    children,
+    storageKey = DEFAULT_STORAGE_KEY
+  }) => {
+    const [systemTheme, setSystemTheme] = useState(() => {
+      if (typeof window === "undefined") {
+        return void 0;
+      }
+      const media = window.matchMedia("(prefers-color-scheme: dark)");
+      return media.matches ? "dark" : "light";
+    });
+    const { value: theme, set } = useLocalStorage({
+      key: storageKey,
+      schema: ThemeSchema
+    });
+    const updateTheme = useCallback(
+      (theme2) => {
+        set(theme2);
+      },
+      [set]
+    );
+    useEffect(() => {
+      if (typeof window === "undefined") {
+        return;
+      }
+      const onChange = (event) => {
+        setSystemTheme(event.matches ? "dark" : "light");
+      };
+      const media = window.matchMedia("(prefers-color-scheme: dark)");
+      media.addEventListener("change", onChange);
+      return () => {
+        media.removeEventListener("change", onChange);
+      };
+    }, []);
+    useEffect(() => {
+      document.documentElement.classList.remove("dark");
+      if ((!theme || theme === "system") && systemTheme === "dark" || theme === "dark") {
+        document.documentElement.classList.add("dark");
+      } else if (theme === "light") {
+        document.documentElement.classList.add("light");
+      }
+    }, [theme, systemTheme]);
+    const contextValue = useMemo(
+      () => ({
+        theme: theme ?? "system",
+        systemTheme,
+        updateTheme
+      }),
+      [theme, systemTheme, updateTheme]
+    );
+    return /* @__PURE__ */ jsx(ThemeContext2.Provider, { value: contextValue, children });
+  };
+  _ThemeContext.useTheme = () => {
+    const context = use(ThemeContext2);
+    return context;
+  };
+})(ThemeContext || (ThemeContext = {}));
+export {
+  ThemeContext
+};

package/dist/helpers/dynamicInputs.d.ts

@@ -6,7 +6,6 @@ import { ZodUtils } from '../utils/zod.utils';
 declare const defaultComponentTypes: {
     readonly datetime: "datePicker";
     readonly dateRange: "dateRangePicker";
-    readonly textEditor: "textEditor";
     readonly boolean: "toggle";
     readonly number: "numberInput";
     readonly enum: "select";
@@ -21,7 +20,6 @@ export type DefaultComponentType<TZodType extends z.ZodType> = ZodUtils.ZodTypeS
 export type AllowedComponentType<TZodType extends z.ZodType> = ZodUtils.ZodTypeSwitch<TZodType, {
     datetime: "datePicker" | "dateTimePicker" | "timePicker";
     dateRange: "dateRangePicker";
-    textEditor: "textEditor";
     boolean: "toggle" | "checkbox";
     number: "numberInput" | "slider" | "select" | "autocomplete" | "queryAutocomplete" | "segment";
     enum: "select" | "autocomplete" | "segment";

package/dist/helpers/dynamicInputs.js

@@ -5,7 +5,6 @@ import { ZodUtils } from "../utils/zod.utils.js";
 const defaultComponentTypes = {
   datetime: "datePicker",
   dateRange: "dateRangePicker",
-  textEditor: "textEditor",
   boolean: "toggle",
   number: "numberInput",
   enum: "select",
@@ -70,9 +69,6 @@ const getDefaultInputComponentType = (schemaType) => {
   if (ZodUtils.isDateRange(schemaType)) {
     return defaultComponentTypes.dateRange;
   }
-  if (ZodUtils.isTextEditor(schemaType)) {
-    return defaultComponentTypes.textEditor;
-  }
   const unwrappedType = ZodUtils.unwrapZodType(schemaType);
   const componentType = ZOD_TYPE_COMPONENT_TYPE.find(([zodType]) => unwrappedType instanceof zodType)?.[1];
   if (componentType) {

package/dist/hooks/useBreakpoint.js

@@ -1,17 +1,22 @@
 import { useMemo } from "react";
 import { useMediaQuery } from "react-responsive";
+let breakpoints = null;
 function getBreakpoints() {
+  if (breakpoints) {
+    return breakpoints;
+  }
   const cs = getComputedStyle(document.documentElement);
   const entries = ["sm", "md", "lg", "xl", "2xl"].map((k) => [k, cs.getPropertyValue(`--breakpoint-${k}`).trim()]).filter(([, v]) => !!v);
-  return Object.fromEntries(entries);
+  breakpoints = Object.fromEntries(entries);
+  return breakpoints;
 }
 function useBreakpoint(breakpointKey) {
-  const breakpoints = useMemo(() => getBreakpoints(), []);
-  if (!breakpoints) {
+  const breakpoints2 = useMemo(() => getBreakpoints(), []);
+  if (!breakpoints2) {
     throw new Error("Tailwind config is missing theme.screens");
   }
   const bool = useMediaQuery({
-    query: `(min-width: ${breakpoints[breakpointKey]})`
+    query: `(min-width: ${breakpoints2[breakpointKey]})`
   });
   return bool;
 }

package/dist/hooks/useFilters.d.ts

@@ -1,11 +1,8 @@
 import { z } from 'zod';
-type FilterValue = string | string[] | boolean | number;
 export interface FilterStore<TFilterData> {
     filterData: TFilterData;
     setFilterValue: (data: Partial<TFilterData>) => void;
     getFilterValue: (keys: (keyof TFilterData)[]) => Partial<TFilterData>;
     clearAllFilters: () => void;
 }
-export declare function parseFilterFromQuery(query: Record<string, any>, schema?: z.ZodObject<any>): Record<string, FilterValue>;
-export declare function useFilters<TFilterData>(defaultFilterValues?: TFilterData, prefix?: string, schema?: z.ZodObject<any>): FilterStore<TFilterData>;
-export {};
+export declare const useFilters: <TFilterData>(defaultFilterValues?: TFilterData, prefix?: string, schema?: z.ZodObject<any>) => FilterStore<TFilterData>;

package/dist/hooks/useFilters.js

@@ -1,8 +1,10 @@
-import { useNavigate, useLocation } from "@tanstack/react-router";
-import { useMemo, useRef, useState, useEffect } from "react";
+import { useState, useEffect, useCallback, useMemo } from "react";
 import { z } from "zod";
+import { UIRouter } from "../config/router.context.js";
 function getFieldType(schema, fieldKey) {
-  if (!schema || !schema.shape) return "unknown";
+  if (!schema || !schema.shape) {
+    return "unknown";
+  }
   let fieldSchema = schema.shape[fieldKey];
   while (fieldSchema) {
     if (fieldSchema instanceof z.ZodOptional || fieldSchema instanceof z.ZodNullable) {
@@ -11,164 +13,148 @@ function getFieldType(schema, fieldKey) {
       break;
     }
   }
-  if (!fieldSchema) return "unknown";
-  if (fieldSchema instanceof z.ZodNumber) return "number";
-  if (fieldSchema instanceof z.ZodBoolean) return "boolean";
-  if (fieldSchema instanceof z.ZodString) return "string";
+  if (!fieldSchema) {
+    return "unknown";
+  }
+  if (fieldSchema instanceof z.ZodNumber) {
+    return "number";
+  }
+  if (fieldSchema instanceof z.ZodBoolean) {
+    return "boolean";
+  }
+  if (fieldSchema instanceof z.ZodString) {
+    return "string";
+  }
   return "unknown";
 }
-function serializeFiltersToQuery(filterData, prefix) {
+const serializeFiltersToQuery = (filterData, prefix) => {
   const query = {};
   for (const [key, value] of Object.entries(filterData)) {
     if (value === null || value === void 0) {
       continue;
     }
+    const filterKey = `filter[${prefix && `${prefix}-`}${key}]`;
     if (Array.isArray(value) || typeof value === "object") {
-      query[`filter[${prefix && `${prefix}-`}${key}]`] = JSON.stringify(value);
+      query[filterKey] = JSON.stringify(value);
     } else if (typeof value === "boolean") {
-      query[`filter[${prefix && `${prefix}-`}${key}]`] = value ? "true" : "false";
-    } else if (typeof value === "number") {
-      query[`filter[${prefix && `${prefix}-`}${key}]`] = value.toString();
+      query[filterKey] = value ? "true" : "false";
     } else {
-      query[`filter[${prefix && `${prefix}-`}${key}]`] = value;
+      query[filterKey] = value.toString();
     }
   }
   return query;
-}
-function parseFilterFromQuery(query, schema) {
+};
+const parseFilterFromQuery = (searchParams, schema) => {
   const filter = {};
-  for (const [key, value] of Object.entries(query)) {
-    const match = key.match(/^filter\[(.+?)\]$/);
-    if (match) {
-      const filterKey = match[1];
-      const baseKey = filterKey.includes("-") ? filterKey.split("-").pop() || filterKey : filterKey;
-      if (value.startsWith("[") && value.endsWith("]") || value.startsWith("{") && value.endsWith("}")) {
-        filter[filterKey] = JSON.parse(value);
-      } else if (["true", "false"].includes(value)) {
+  for (const [key, value] of searchParams.entries()) {
+    const match = /^filter\[(.+?)\]$/.exec(key);
+    if (!match) {
+      continue;
+    }
+    const filterKey = match[1];
+    const isArray = value.startsWith("[") && value.endsWith("]");
+    const isObject = value.startsWith("{") && value.endsWith("}");
+    const isNumber = !Number.isNaN(Number(value)) && value !== "";
+    const isBoolean = ["true", "false"].includes(value);
+    if (isArray || isObject || isNumber) {
+      filter[filterKey] = JSON.parse(value);
+    } else if (isBoolean) {
+      filter[filterKey] = value === "true";
+    } else {
+      const expectedType = getFieldType(schema, filterKey);
+      if (expectedType === "number" && !Number.isNaN(Number(value)) && value !== "" && value !== null) {
+        filter[filterKey] = Number(value);
+      } else if (expectedType === "boolean" && ["true", "false"].includes(value)) {
         filter[filterKey] = value === "true";
       } else {
-        const expectedType = getFieldType(schema, baseKey);
-        if (expectedType === "number" && !Number.isNaN(Number(value)) && value !== "" && value !== null) {
-          filter[filterKey] = Number(value);
-        } else if (expectedType === "boolean" && ["true", "false"].includes(value)) {
-          filter[filterKey] = value === "true";
-        } else {
-          filter[filterKey] = value;
-        }
+        filter[filterKey] = value;
       }
     }
   }
   return filter;
-}
-function useFilters(defaultFilterValues, prefix = "", schema) {
-  const navigate = useNavigate();
-  const location = useLocation();
-  const queryObject = useMemo(
-    () => Object.fromEntries(new URLSearchParams(location.searchStr || "").entries()),
-    [location.searchStr]
+};
+const useFilters = (defaultFilterValues, prefix = "", schema) => {
+  const { searchParams, pathname, replace } = UIRouter.useUIRouter();
+  const [filterData, setFilterData] = useState(
+    () => parseFilterFromQuery(searchParams, schema)
   );
-  const hasAppliedDefaultsRef = useRef(false);
-  const lastPathnameRef = useRef(location.pathname);
-  const queryFilters = parseFilterFromQuery(queryObject, schema);
-  const [filterData, setFilterData] = useState(queryFilters);
   useEffect(() => {
-    if (lastPathnameRef.current !== location.pathname) {
-      hasAppliedDefaultsRef.current = false;
-      lastPathnameRef.current = location.pathname;
+    const setUrlToDefaultFilters = () => {
+      const flatFilterQuery = serializeFiltersToQuery(defaultFilterValues, prefix);
+      const url = `${pathname}?${new URLSearchParams({
+        ...Object.fromEntries(searchParams.entries()),
+        ...flatFilterQuery
+      }).toString()}`;
+      replace(url);
+    };
+    const currentFilters = parseFilterFromQuery(searchParams, schema);
+    const hasFiltersSet = Object.keys(currentFilters).length > 0;
+    if (defaultFilterValues && !hasFiltersSet) {
+      setUrlToDefaultFilters();
     }
-  }, [location.pathname]);
+  }, [defaultFilterValues, prefix, schema]);
   useEffect(() => {
-    const currentQueryObject = Object.fromEntries(new URLSearchParams(location.searchStr || "").entries());
-    const currentFilters = parseFilterFromQuery(currentQueryObject, schema);
-    const shouldApplyDefaults = defaultFilterValues && Object.keys(currentFilters).length === 0 && !hasAppliedDefaultsRef.current;
-    if (shouldApplyDefaults) {
-      const flatFilterQuery = serializeFiltersToQuery(defaultFilterValues, prefix);
-      const sp = new URLSearchParams(location.searchStr || "");
-      let needsNavigation = false;
-      Object.entries(flatFilterQuery).forEach(([k, v]) => {
-        const currentValue = sp.get(k);
-        if (Array.isArray(v)) {
-          const currentValues = sp.getAll(k);
-          if (JSON.stringify(currentValues.sort()) !== JSON.stringify(v.sort())) {
-            needsNavigation = true;
-          }
-        } else {
-          if (currentValue !== v) {
-            needsNavigation = true;
-          }
-        }
-      });
-      if (needsNavigation) {
-        Object.entries(flatFilterQuery).forEach(([k, v]) => {
-          sp.delete(k);
-          if (Array.isArray(v)) {
-            v.forEach((val) => sp.append(k, val));
+    const newQueryFilters = parseFilterFromQuery(searchParams, schema);
+    setFilterData(newQueryFilters);
+  }, [searchParams, schema]);
+  const setFilterValue = useCallback(
+    (data2) => {
+      let newFilters = { ...filterData };
+      const isReset = Object.keys(data2).length === 0;
+      const isResetToDefault = data2 === defaultFilterValues;
+      if (isResetToDefault) {
+        newFilters = {
+          ...defaultFilterValues
+        };
+      } else if (isReset) {
+        newFilters = {};
+      } else {
+        Object.entries(data2).forEach(([key, value]) => {
+          if (value === void 0) {
+            delete newFilters[key];
           } else {
-            sp.set(k, v);
+            newFilters[key] = value;
           }
         });
-        const to = `${location.pathname}${sp.toString() ? `?${sp.toString()}` : ""}`;
-        navigate({ to, replace: true });
       }
-      hasAppliedDefaultsRef.current = true;
-    }
-  }, [defaultFilterValues, prefix, location.pathname, location.searchStr]);
-  useEffect(() => {
-    const newQueryFilters = parseFilterFromQuery(queryObject, schema);
-    setFilterData(newQueryFilters);
-  }, [queryObject, schema]);
-  const setFilterValue = (data) => {
-    const next = { ...filterData };
-    const isReset = Object.keys(data).length === 0;
-    const isResetToDefault = data === defaultFilterValues;
-    if (isResetToDefault) {
-      Object.keys(next).forEach((key) => delete next[key]);
-      Object.entries(defaultFilterValues ?? {}).forEach(([key, value]) => {
-        next[key] = value;
-      });
-    } else if (!isReset) {
-      Object.entries(data).forEach(([key, value]) => {
-        if (value === void 0) {
-          delete next[key];
-        } else {
-          next[key] = value;
-        }
+      const prefixPart = prefix ? `${prefix}-` : "";
+      const cleanedQuery = searchParams.keys().reduce(
+        (acc, k) => {
+          if (!k.startsWith(`filter[${prefixPart}`)) {
+            acc[k] = searchParams.get(k) ?? "";
+          }
+          return acc;
+        },
+        {}
+      );
+      const flatFilterQuery = serializeFiltersToQuery(newFilters, prefix);
+      const url = `${pathname}?${new URLSearchParams({
+        ...cleanedQuery,
+        ...flatFilterQuery
+      }).toString()}`;
+      replace(url);
+      setFilterData(newFilters);
+    },
+    [filterData, prefix, pathname, replace, defaultFilterValues, searchParams]
+  );
+  const getFilterValue = useCallback(
+    (keys) => {
+      const result = {};
+      keys.forEach((key) => {
+        result[key] = filterData[key];
       });
-    } else {
-      Object.keys(next).forEach((key) => delete next[key]);
-    }
-    const sp = new URLSearchParams(location.searchStr || "");
-    Array.from(sp.keys()).forEach((key) => {
-      if (key.startsWith(`filter[${prefix && `${prefix}-`}`)) {
-        sp.delete(key);
-      }
-    });
-    const flatFilterQuery = serializeFiltersToQuery(next, prefix);
-    Object.entries(flatFilterQuery).forEach(([k, v]) => {
-      sp.delete(k);
-      if (Array.isArray(v)) {
-        v.forEach((val) => sp.append(k, val));
-      } else {
-        sp.set(k, v);
-      }
-    });
-    const to = `${location.pathname}${sp.toString() ? `?${sp.toString()}` : ""}`;
-    navigate({ to, replace: true });
-    setFilterData(next);
-  };
-  const getFilterValue = (keys) => {
-    const result = {};
-    keys.forEach((key) => {
-      result[key] = filterData[key];
-    });
-    return result;
-  };
-  const clearAllFilters = () => {
+      return result;
+    },
+    [filterData]
+  );
+  const clearAllFilters = useCallback(() => {
     setFilterValue(defaultFilterValues ?? {});
-  };
-  return { filterData, setFilterValue, getFilterValue, clearAllFilters };
-}
+  }, [defaultFilterValues, setFilterValue]);
+  const data = useMemo(() => {
+    return { filterData, setFilterValue, getFilterValue, clearAllFilters };
+  }, [filterData, setFilterValue, getFilterValue, clearAllFilters]);
+  return data;
+};
 export {
-  parseFilterFromQuery,
   useFilters
 };

package/dist/hooks/useLocalStorage.d.ts

@@ -7,7 +7,5 @@ export declare const useLocalStorage: <ZOutput, ZInput>({ key, schema }: IProps<
     value: ZOutput | null;
     set: (newValue: ZInput) => void;
     remove: () => void;
-    error: Error | null;
-    isInitialLoading: boolean;
 };
 export {};

package/dist/hooks/useLocalStorage.js

@@ -1,36 +1,27 @@
-import { useState, useEffect, useCallback } from "react";
+import { useState, useCallback } from "react";
+const getValue = (key, schema) => {
+  if (!localStorage) {
+    return null;
+  }
+  const lsValue = localStorage.getItem(key);
+  if (!lsValue) {
+    return null;
+  }
+  let jsonOrString;
+  try {
+    jsonOrString = JSON.parse(lsValue);
+  } catch {
+    jsonOrString = lsValue;
+  }
+  const parsedValue = schema.safeParse(jsonOrString);
+  if (parsedValue.success) {
+    return parsedValue.data;
+  } else {
+    return null;
+  }
+};
 const useLocalStorage = ({ key, schema }) => {
-  const [value, setValue] = useState(null);
-  const [isInitialLoading, setIsInitialLoading] = useState(true);
-  const [error, setError] = useState(null);
-  useEffect(() => {
-    if (!localStorage) {
-      setValue(null);
-      return;
-    }
-    try {
-      const lsValue = localStorage.getItem(key);
-      if (!lsValue) {
-        setValue(null);
-        return;
-      }
-      let jsonOrString;
-      try {
-        jsonOrString = JSON.parse(lsValue);
-      } catch {
-        jsonOrString = lsValue;
-      }
-      const parsedValue = schema.safeParse(jsonOrString);
-      if (parsedValue.success) {
-        setValue(parsedValue.data);
-      } else {
-        setError(parsedValue.error);
-        setValue(null);
-      }
-    } finally {
-      setIsInitialLoading(false);
-    }
-  }, [key, schema]);
+  const [value, setValue] = useState(() => getValue(key, schema));
   const set = useCallback(
     (newValue) => {
       if (!localStorage) {
@@ -56,7 +47,7 @@ const useLocalStorage = ({ key, schema }) => {
     localStorage.removeItem(key);
     setValue(null);
   }, [key]);
-  return { value, set, remove, error, isInitialLoading };
+  return { value, set, remove };
 };
 export {
   useLocalStorage

package/dist/hooks/usePagination.js

@@ -5,7 +5,7 @@ const DEFAULT_STATE = {
   pageSize: 20
 };
 function usePagination(defaultPagination) {
-  const { pathname, query, replace, searchParams } = UIRouter.useUIRouter();
+  const { pathname, replace, searchParams } = UIRouter.useUIRouter();
   const [pagination, setPagination] = useState(
     defaultPagination ?? {
       pageIndex: searchParams.has("page") ? Number.parseInt(searchParams.get("page") ?? "", 10) : DEFAULT_STATE.pageIndex,
@@ -13,15 +13,15 @@ function usePagination(defaultPagination) {
     }
   );
   useEffect(() => {
-    const { page: _page, size: _size, ...queryParms } = query;
-    replace({
-      pathname,
-      query: {
-        ...queryParms,
-        ...pagination.pageSize !== DEFAULT_STATE.pageSize ? { size: pagination.pageSize } : {},
-        ...pagination.pageIndex !== DEFAULT_STATE.pageIndex ? { page: pagination.pageIndex } : {}
-      }
-    });
+    const params = new URLSearchParams(searchParams);
+    if (pagination.pageSize !== DEFAULT_STATE.pageSize) {
+      params.append("size", pagination.pageSize.toString());
+    }
+    if (pagination.pageIndex !== DEFAULT_STATE.pageIndex) {
+      params.append("page", pagination.pageIndex.toString());
+    }
+    const url = `${pathname}${params.size > 0 ? `?${params.toString()}` : ""}`;
+    replace(url);
   }, [pagination]);
   return {
     pagination,

package/dist/hooks/useSorting.js

@@ -1,7 +1,7 @@
 import { useState, useMemo, useEffect } from "react";
 import { UIRouter } from "../config/router.context.js";
 function useSorting(defaultSorting, prefix = "") {
-  const { pathname, replace, searchParams, query } = UIRouter.useUIRouter();
+  const { pathname, replace, searchParams } = UIRouter.useUIRouter();
   const [sorting, setSorting] = useState(
     defaultSorting ?? searchParams.get(`order${prefix && `-${prefix}`}`)?.split(",").map((item) => {
       if (item.startsWith("-")) {
@@ -17,11 +17,13 @@ function useSorting(defaultSorting, prefix = "") {
     return sorting.map((field) => `${field.desc ? "-" : "+"}${field.id}`).join(",");
   }, [sorting]);
   useEffect(() => {
-    const { sort: _sort, ...queryParms } = query;
-    replace({
-      pathname,
-      query: { ...queryParms, ...order ? { [`order${prefix && `-${prefix}`}`]: order } : {} }
-    });
+    const params = new URLSearchParams(searchParams);
+    params.delete("order");
+    if (order) {
+      params.append(`order${prefix && `-${prefix}`}`, order);
+    }
+    const url = `${pathname}${params.size > 0 ? `?${params.toString()}` : ""}`;
+    replace(url);
   }, [order]);
   return { sorting, setSorting, order };
 }

package/dist/index.d.ts

@@ -95,8 +95,6 @@ export { Select } from './components/inputs/Selection/Select/Select';
 export type { ControlledSliderProps, SliderProps } from './components/inputs/Slider/Slider';
 export { Slider } from './components/inputs/Slider/Slider';
 export type { InputVariantProps } from './components/inputs/shared/input.cva';
-export type { ControlledTextEditorProps, TextEditorProps, TextEditorValue, } from './components/inputs/TextEditor/TextEditor';
-export { TextEditor } from './components/inputs/TextEditor/TextEditor';
 export type { ControlledToggleProps, ToggleProps } from './components/inputs/Toggle/Toggle';
 export { Toggle } from './components/inputs/Toggle/Toggle';
 export type { MenuProps } from './components/Menu/Menu';
@@ -157,6 +155,7 @@ export { Confirmation } from './config/confirmation.context';
 export { ns, resources } from './config/i18n';
 export { LinkContext } from './config/link.context';
 export { UIRouter } from './config/router.context';
+export { ThemeContext } from './config/theme.context';
 export { UIConfig } from './config/uiConfig.context';
 export { UIStyle } from './config/uiStyle.context';
 export type { DynamicColumnsOptions } from './helpers/dynamicColumns';
@@ -198,12 +197,6 @@ export { QueriesUtils } from './utils/queries.utils';
 export { RestUtils } from './utils/rest.utils';
 export { RoutingUtils } from './utils/routing.utils';
 export { StringUtils } from './utils/string.utils';
-export { createAclGuard } from './utils/vendor/acl/AclGuard';
-export { AbilityContext } from './utils/vendor/acl/ability.context';
-export type { AppAbilities, AppAbility } from './utils/vendor/acl/appAbility.types';
-export { Can } from './utils/vendor/acl/Can';
-export { AuthGuard } from './utils/vendor/auth/AuthGuard';
-export { AuthContext } from './utils/vendor/auth/auth.context';
 export type { GeneralErrorCodes } from './utils/vendor/error-handling';
 export { ApplicationException, ErrorHandler, SharedErrorHandler } from './utils/vendor/error-handling';
 export type { RequestConfig, RequestInfo, Response, RestClient as IRestClient, } from './utils/vendor/rest-client.types';

package/dist/index.js

@@ -64,7 +64,6 @@ import { Autocomplete } from "./components/inputs/Selection/Autocomplete/Autocom
 import { QueryAutocomplete } from "./components/inputs/Selection/Autocomplete/QueryAutocomplete.js";
 import { Select } from "./components/inputs/Selection/Select/Select.js";
 import { Slider } from "./components/inputs/Slider/Slider.js";
-import { TextEditor } from "./components/inputs/TextEditor/TextEditor.js";
 import { Toggle } from "./components/inputs/Toggle/Toggle.js";
 import { Menu } from "./components/Menu/Menu.js";
 import { MenuPopover } from "./components/Menu/MenuPopover.js";
@@ -96,6 +95,7 @@ import { Confirmation } from "./config/confirmation.context.js";
 import { ns, resources } from "./config/i18n.js";
 import { LinkContext } from "./config/link.context.js";
 import { UIRouter } from "./config/router.context.js";
+import { ThemeContext } from "./config/theme.context.js";
 import { UIConfig } from "./config/uiConfig.context.js";
 import { UIStyle } from "./config/uiStyle.context.js";
 import { dynamicColumns } from "./helpers/dynamicColumns.js";
@@ -130,15 +130,9 @@ import { QueriesUtils } from "./utils/queries.utils.js";
 import { RestUtils } from "./utils/rest.utils.js";
 import { RoutingUtils } from "./utils/routing.utils.js";
 import { StringUtils } from "./utils/string.utils.js";
-import { createAclGuard } from "./utils/vendor/acl/AclGuard.js";
-import { AbilityContext } from "./utils/vendor/acl/ability.context.js";
-import { Can } from "./utils/vendor/acl/Can.js";
-import { AuthGuard } from "./utils/vendor/auth/AuthGuard.js";
-import { AuthContext } from "./utils/vendor/auth/auth.context.js";
 import { ApplicationException, ErrorHandler, SharedErrorHandler } from "./utils/vendor/error-handling.js";
 import { RestInterceptor } from "./utils/vendor/rest-interceptor.js";
 export {
-  AbilityContext,
   ActionModal,
   Alert,
   AlignCenterIcon,
@@ -151,15 +145,12 @@ export {
   ArrowDropUpIcon,
   ArrowLeftIcon,
   ArrowRightIcon,
-  AuthContext,
-  AuthGuard,
   Autocomplete,
   BoldIcon,
   BottomSheet,
   BulletedListIcon,
   Button,
   CalendarIcon,
-  Can,
   CellText,
   CheckIcon,
   Checkbox,
@@ -238,8 +229,8 @@ export {
   TextArea,
   TextButton,
   TextColorIcon,
-  TextEditor,
   TextInput,
+  ThemeContext,
   TimePicker,
   Toast,
   ToastContainer,
@@ -255,7 +246,6 @@ export {
   ViewIcon,
   ViewOffIcon,
   compoundMapper,
-  createAclGuard,
   dynamicColumns,
   dynamicInputs,
   isEqual,

package/dist/text-editor.d.ts

@@ -0,0 +1,2 @@
+export type { ControlledTextEditorProps, TextEditorProps, TextEditorValue, } from './components/inputs/TextEditor/TextEditor';
+export { TextEditor } from './components/inputs/TextEditor/TextEditor';

package/dist/text-editor.js

@@ -0,0 +1,4 @@
+import { TextEditor } from "./components/inputs/TextEditor/TextEditor.js";
+export {
+  TextEditor
+};

package/dist/utils/zod.utils.d.ts

@@ -9,12 +9,10 @@ export declare namespace ZodUtils {
     type IsZodString<T> = IsZodType<T, z.ZodString>;
     type IsZodEmail<T> = IsZodType<T, z.ZodEmail>;
     type IsZodDateRange<T> = UnwrapZod<T> extends z.ZodObject ? UnwrapZod<UnwrapZod<T>["shape"]["start"]> extends z.ZodISODateTime ? UnwrapZod<UnwrapZod<T>["shape"]["end"]> extends z.ZodISODateTime ? true : false : false : false;
-    type IsZodTextEditor<T> = UnwrapZod<T> extends z.ZodObject ? UnwrapZod<UnwrapZod<T>["shape"]["html"]> extends z.ZodString ? UnwrapZod<UnwrapZod<T>["shape"]["json"]> extends z.ZodObject<any> ? true : false : false : false;
     type IsZodObject<T> = IsZodType<T, z.ZodObject<any>>;
     type IsZodArray<T> = IsZodType<T, z.ZodArray<any>>;
-    type ZodType<T> = IsZodType<T, z.ZodBoolean> extends true ? "boolean" : IsZodNumber<T> extends true ? "number" : IsZodEnum<T> extends true ? "enum" : IsZodDateTime<T> extends true ? "datetime" : IsZodUUID<T> extends true ? "uuid" : IsZodString<T> extends true ? "string" : IsZodEmail<T> extends true ? "email" : IsZodDateRange<T> extends true ? "dateRange" : IsZodTextEditor<T> extends true ? "textEditor" : IsZodObject<T> extends true ? "object" : IsZodArray<T> extends true ? "array" : never;
+    type ZodType<T> = IsZodType<T, z.ZodBoolean> extends true ? "boolean" : IsZodNumber<T> extends true ? "number" : IsZodEnum<T> extends true ? "enum" : IsZodDateTime<T> extends true ? "datetime" : IsZodUUID<T> extends true ? "uuid" : IsZodString<T> extends true ? "string" : IsZodEmail<T> extends true ? "email" : IsZodDateRange<T> extends true ? "dateRange" : IsZodObject<T> extends true ? "object" : IsZodArray<T> extends true ? "array" : never;
     type ZodTypeSwitch<TZodType extends z.ZodType, T extends Record<ZodType<TZodType> | "unknown", unknown>> = ZodType<TZodType> extends never ? never : T[ZodType<TZodType>];
     const unwrapZodType: (schemaType: z.core.$ZodType) => z.core.$ZodType<unknown, unknown, z.core.$ZodTypeInternals<unknown, unknown>>;
     const isDateRange: (schemaType: z.core.$ZodType) => boolean;
-    const isTextEditor: (schemaType: z.core.$ZodType) => boolean;
 }

package/dist/utils/zod.utils.js

@@ -15,10 +15,6 @@ var ZodUtils;
     const unwrappedType = (0, ZodUtils2.unwrapZodType)(schemaType);
     return unwrappedType instanceof z.ZodObject && hasZodObjectProperty(unwrappedType, "start", z.ZodISODateTime) && hasZodObjectProperty(unwrappedType, "end", z.ZodISODateTime);
   };
-  ZodUtils2.isTextEditor = (schemaType) => {
-    const unwrappedType = (0, ZodUtils2.unwrapZodType)(schemaType);
-    return unwrappedType instanceof z.ZodObject && hasZodObjectProperty(unwrappedType, "html", z.ZodString) && hasZodObjectProperty(unwrappedType, "json", z.ZodObject);
-  };
 })(ZodUtils || (ZodUtils = {}));
 export {
   ZodUtils

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "@povio/ui",
-  "version": "2.1.0",
+  "version": "2.1.2",
   "type": "module",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
     ".": "./dist/index.js",
-    "./styles": "./dist/styles/index.css"
+    "./auth": "./dist/auth.js",
+    "./text-editor": "./dist/text-editor.js",
+    "./text-editor/styles": "./dist/styles/editor.css"
   },
   "files": [
     "dist"
@@ -14,6 +16,20 @@
   "homepage": "https://povio.com",
   "license": "UNLICENSED",
   "peerDependencies": {
+    "@casl/ability": "^6.7.3",
+    "@casl/react": "^5.0.0",
+    "@tiptap/core": "^2.26.3",
+    "@tiptap/extension-color": "^2.26.3",
+    "@tiptap/extension-heading": "^2.26.3",
+    "@tiptap/extension-highlight": "^2.26.3",
+    "@tiptap/extension-link": "^2.26.3",
+    "@tiptap/extension-placeholder": "^2.26.3",
+    "@tiptap/extension-text-align": "^2.26.3",
+    "@tiptap/extension-text-style": "^2.26.3",
+    "@tiptap/extension-underline": "^2.26.3",
+    "@tiptap/pm": "^2.26.3",
+    "@tiptap/react": "^2.26.3",
+    "@tiptap/starter-kit": "^2.26.3",
     "react": "^19.1.0",
     "react-dom": "^19.1.0"
   },
@@ -34,18 +50,6 @@
     "@react-types/shared": "^3.32.1",
     "@tanstack/react-query": "~5.85.9",
     "@tanstack/react-table": "^8.21.3",
-    "@tiptap/core": "^2.26.3",
-    "@tiptap/extension-color": "^2.26.3",
-    "@tiptap/extension-heading": "^2.26.3",
-    "@tiptap/extension-highlight": "^2.26.3",
-    "@tiptap/extension-link": "^2.26.3",
-    "@tiptap/extension-placeholder": "^2.26.3",
-    "@tiptap/extension-text-align": "^2.26.3",
-    "@tiptap/extension-text-style": "^2.26.3",
-    "@tiptap/extension-underline": "^2.26.3",
-    "@tiptap/pm": "^2.26.3",
-    "@tiptap/react": "^2.26.3",
-    "@tiptap/starter-kit": "^2.26.3",
     "axios": "^1.13.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

package/dist/styles/index.css

@@ -1 +0,0 @@
-@import "./editor.css";