@povio/ui 2.2.0 → 2.2.2

package/dist/{Link2.js → components/text/Link/Link.js}

@@ -1,11 +1,11 @@
-import { UIStyle } from "./uiStyle.context.js";
-import { LinkContext } from "./link.context.js";
+import { UIStyle } from "../../../config/uiStyle.context.js";
+import { LinkContext } from "../../../config/link.context.js";
 import { link } from "./link.cva.js";
 import { jsx } from "react/jsx-runtime";
 import { Link } from "react-aria-components";
-const Link$1 = ({ variant,...props }) => {
+const Link$1 = ({ variant, ...props }) => {
 	const linkContext = LinkContext.useLinkContext();
-	const linkCva = UIStyle.useConfig()?.link?.cva ?? link;
+	const linkCva = UIStyle.useCva("link.cva", link);
 	const LinkComponent = linkContext?.LinkComponent ?? Link;
 	if (!props.to && props.href) props.to = props.href;
 	return /* @__PURE__ */ jsx(LinkComponent, {

package/dist/{link.cva.js → components/text/Link/link.cva.js}

@@ -1,4 +1,4 @@
-import { uiOutlineClass } from "./outline.clsx.js";
+import { uiOutlineClass } from "../../outline.clsx.js";
 import { cva } from "class-variance-authority";
 const link = cva(["underline", uiOutlineClass], {
 	variants: { variant: { default: ["text-interactive-text-primary-idle focus-visible:outline-interactive-text-primary-focus", "hover:text-interactive-text-primary-hover focus-visible:text-interactive-text-primary-focus active:text-interactive-text-primary-pressed"] } },

package/dist/components/text/Tag/Tag.d.ts

@@ -1,3 +1,4 @@
+import { Ref } from 'react';
 import { ButtonProps as AriaButtonProps } from 'react-aria-components';
 import { TagVariantProps } from './tag.cva';
 export interface TagProps extends TagVariantProps, AriaButtonProps {
@@ -5,6 +6,7 @@ export interface TagProps extends TagVariantProps, AriaButtonProps {
     children: string;
     dismissable?: boolean;
     isDisabled?: boolean;
+    contentRef?: Ref<HTMLElement>;
     onDismiss?: () => void;
 }
-export declare const Tag: ({ className, children, dismissable, isDisabled, onDismiss, ...props }: TagProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tag: ({ className, children, dismissable, isDisabled, onDismiss, contentRef, ...props }: TagProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/text/Tag/Tag.js

@@ -0,0 +1,38 @@
+import { CloseIcon } from "../../../assets/icons/Close.js";
+import { UIStyle } from "../../../config/uiStyle.context.js";
+import { Typography } from "../Typography/Typography.js";
+import { ns } from "../../../config/i18n.js";
+import { tag } from "./tag.cva.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Button } from "react-aria-components";
+import { useTranslation } from "react-i18next";
+const Tag = ({ className, children, dismissable, isDisabled, onDismiss, contentRef, ...props }) => {
+	const tagCva = UIStyle.useCva("tag.cva", tag);
+	const { t } = useTranslation("ui");
+	const buttonProps = {
+		isDisabled,
+		onPress: onDismiss,
+		label: t(($) => $.ui.tag.dismiss),
+		...props
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: tagCva({
+			...props,
+			className: clsx("pointer-events-none", className)
+		}),
+		children: [/* @__PURE__ */ jsx(Typography, {
+			ref: contentRef,
+			variant: "default",
+			size: "label-2",
+			as: "span",
+			className: "truncate",
+			children
+		}), dismissable && /* @__PURE__ */ jsx(Button, {
+			...buttonProps,
+			className: "pointer-events-auto shrink-0",
+			children: /* @__PURE__ */ jsx(CloseIcon, { className: "size-4" })
+		})]
+	});
+};
+export { Tag };

package/dist/{tag.cva.js → components/text/Tag/tag.cva.js}

@@ -1,4 +1,4 @@
-import { uiOutlineClass } from "./outline.clsx.js";
+import { uiOutlineClass } from "../../outline.clsx.js";
 import { cva } from "class-variance-authority";
 const tag = cva([
 	uiOutlineClass,

package/dist/components/text/Typography/Typography.d.ts

@@ -1,7 +1,7 @@
 import { HTMLAttributes, Ref } from 'react';
 import { TypographyVariantProps } from './typography.cva';
 type TypographyTag = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div";
-interface TypographyPropsCva extends Omit<TypographyVariantProps, "size">, Required<Pick<TypographyVariantProps, "size">> {
+export interface TypographyPropsCva extends Omit<TypographyVariantProps, "size">, Required<Pick<TypographyVariantProps, "size">> {
 }
 export interface TypographyProps extends TypographyPropsCva, HTMLAttributes<HTMLElement> {
     ref?: Ref<HTMLHeadingElement>;

package/dist/{Typography.js → components/text/Typography/Typography.js}

@@ -1,9 +1,9 @@
-import { UIStyle } from "./uiStyle.context.js";
+import { UIStyle } from "../../../config/uiStyle.context.js";
 import { typography } from "./typography.cva.js";
 import { jsx } from "react/jsx-runtime";
-const Typography = ({ as = "p", className,...props }) => {
+const Typography = ({ as = "p", className, ...props }) => {
 	return /* @__PURE__ */ jsx(as, {
-		className: (UIStyle.useConfig()?.typography?.cva ?? typography)({
+		className: UIStyle.useCva("typography.cva", typography)({
 			...props,
 			sizeMobile: props.sizeMobile ?? props.size,
 			className

package/dist/{confirmation.context.js → config/confirmation.context.js}

@@ -1,5 +1,5 @@
 import { ns } from "./i18n.js";
-import { ActionModal } from "./ActionModal.js";
+import { ActionModal } from "../components/overlays/ActionModal/ActionModal.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, use, useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";

package/dist/config/i18n.js

@@ -0,0 +1,8 @@
+import translation_default from "../assets/locales/en/translation.json.js";
+import translation_default$1 from "../assets/locales/sl/translation.json.js";
+const ns = "ui";
+const resources = {
+	en: { ["ui"]: translation_default },
+	sl: { ["ui"]: translation_default$1 }
+};
+export { ns, resources };

package/dist/{theme.context.js → config/theme.context.js}

@@ -1,4 +1,4 @@
-import { useLocalStorage } from "./useLocalStorage.js";
+import { useLocalStorage } from "../hooks/useLocalStorage.js";
 import { jsx } from "react/jsx-runtime";
 import { createContext, use, useCallback, useEffect, useMemo, useState } from "react";
 import { z } from "zod";

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

@@ -1,4 +1,5 @@
 import { PropsWithChildren } from 'react';
+import { ButtonProps } from '../components/buttons/Button/Button';
 import { CheckboxProps } from '../components/inputs/Checkbox/Checkbox';
 import { DatePickerProps } from '../components/inputs/DateTime/DatePicker/DatePicker';
 import { NumberInputProps } from '../components/inputs/Input/NumberInput/NumberInput';
@@ -7,12 +8,14 @@ import { RadioGroupProps } from '../components/inputs/RadioGroup/RadioGroup';
 import { SelectBaseProps } from '../components/inputs/Selection/shared/SelectBase';
 import { SliderProps } from '../components/inputs/Slider/Slider';
 import { ToggleProps } from '../components/inputs/Toggle/Toggle';
+import { ActionModalProps } from '../components/overlays/ActionModal/ActionModal';
 export declare namespace UIConfig {
     type DeepRequired<T> = {
         [P in keyof T]-?: T[P] extends object ? DeepRequired<T[P]> : Exclude<T[P], null | undefined>;
     };
     export interface Options {
         input: Pick<TextInputProps, "variant" | "isClearable" | "hideLabel" | "as" | "size">;
+        button: Pick<ButtonProps, "variant" | "size">;
         numberInput: Pick<NumberInputProps, "formatOptions">;
         radioGroup: Pick<RadioGroupProps, "variant" | "hideLabel">;
         checkbox: Pick<CheckboxProps, "variant">;
@@ -20,6 +23,7 @@ export declare namespace UIConfig {
         toggle: Pick<ToggleProps, "variant">;
         slider: Pick<SliderProps, "minValue" | "maxValue">;
         dateInput: Pick<DatePickerProps, "todayIcon" | "shouldForceLeadingZeros" | "disableManualEntry">;
+        actionModal: Pick<ActionModalProps, "titleTypography" | "descriptionTypography">;
     }
     interface ProviderProps {
         config?: Partial<Options>;

package/dist/{uiConfig.context.js → config/uiConfig.context.js}

@@ -1,5 +1,5 @@
-import { ObjectUtils } from "./object.utils.js";
-import { useDeepCompareMemo } from "./useDeepCompare.js";
+import { ObjectUtils } from "../utils/object.utils.js";
+import { useDeepCompareMemo } from "../hooks/useDeepCompare.js";
 import { jsx } from "react/jsx-runtime";
 import { createContext, use } from "react";
 let UIConfig;
@@ -12,6 +12,10 @@ let UIConfig;
 			isClearable: false,
 			hideLabel: false
 		},
+		button: {
+			variant: "contained",
+			size: "m"
+		},
 		numberInput: { formatOptions: {
 			minimumFractionDigits: 0,
 			maximumFractionDigits: 3
@@ -36,6 +40,13 @@ let UIConfig;
 			todayIcon: false,
 			shouldForceLeadingZeros: false,
 			disableManualEntry: false
+		},
+		actionModal: {
+			titleTypography: {
+				size: "title-5",
+				variant: "prominent-1"
+			},
+			descriptionTypography: { size: "body-3" }
 		}
 	};
 	const Context = createContext(DEFAULT_CONFIG);

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

@@ -20,9 +20,12 @@ import { TableDataVariantProps, TableHeadDataVariantProps, TableHeadRowVariantPr
 import { LinkVariantProps } from '../components/text/Link/link.cva';
 import { TagVariantProps } from '../components/text/Tag/tag.cva';
 import { TypographyVariantProps } from '../components/text/Typography/typography.cva';
-import { CompoundMapper } from '../utils/compoundMapper';
+import { CompoundMapper, ConfigSchema } from '../utils/compoundMapper';
 export declare namespace UIStyle {
-    export type Cva<T> = (props: T & ClassProp) => string;
+    export type Cva<T> = (props: (T & ClassProp) | ClassProp) => string;
+    type OptionKey = {
+        [K in keyof Options]: Options[K] extends object ? `${K & string}.${keyof Options[K] & string}` : never;
+    }[keyof Options];
     interface Options {
         button: {
             cva?: Cva<ButtonVariantProps>;
@@ -137,6 +140,7 @@ export declare namespace UIStyle {
         config?: Partial<Options>;
     }
     export const Provider: ({ children, config }: PropsWithChildren<ProviderProps>) => import("react/jsx-runtime").JSX.Element;
-    export const useConfig: () => Partial<Options> | null | undefined;
+    export const useCva: <T>(key: OptionKey, fallback: Cva<T>) => Cva<T>;
+    export const useMapper: <T, K extends ConfigSchema>(key: OptionKey, fallback: CompoundMapper<T, K>) => CompoundMapper<T, K>;
     export {};
 }

package/dist/config/uiStyle.context.js

@@ -0,0 +1,28 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, use } from "react";
+let UIStyle;
+(function(_UIStyle) {
+	const Context = createContext(null);
+	_UIStyle.Provider = ({ children, config }) => {
+		return /* @__PURE__ */ jsx(Context.Provider, {
+			value: config,
+			children
+		});
+	};
+	const useConfig = () => {
+		return use(Context);
+	};
+	_UIStyle.useCva = (key, fallback) => {
+		const uiStyle = useConfig();
+		if (!uiStyle) return fallback;
+		const [k1, k2] = key.split(".");
+		return uiStyle[k1]?.[k2] ?? fallback;
+	};
+	_UIStyle.useMapper = (key, fallback) => {
+		const uiStyle = useConfig();
+		if (!uiStyle) return fallback;
+		const [k1, k2] = key.split(".");
+		return uiStyle[k1]?.[k2] ?? fallback;
+	};
+})(UIStyle || (UIStyle = {}));
+export { UIStyle };

package/dist/{dynamicColumns.js → helpers/dynamicColumns.js}

@@ -1,6 +1,6 @@
-import { StringUtils } from "./string.utils.js";
-import { ZodUtils } from "./zod.utils.js";
-import { DateUtils } from "./date.utils.js";
+import { StringUtils } from "../utils/string.utils.js";
+import { ZodUtils } from "../utils/zod.utils.js";
+import { DateUtils } from "../utils/date.utils.js";
 import { z } from "zod";
 import i18next from "i18next";
 var DEFAULT_NAMESPACE = "dynamicColumns";

package/dist/{dynamicInputs.js → helpers/dynamicInputs.js}

@@ -1,5 +1,5 @@
-import { StringUtils } from "./string.utils.js";
-import { ZodUtils } from "./zod.utils.js";
+import { StringUtils } from "../utils/string.utils.js";
+import { ZodUtils } from "../utils/zod.utils.js";
 import { z } from "zod";
 import i18next from "i18next";
 var defaultComponentTypes = {

package/dist/{useAutosave.js → hooks/useAutosave.js}

@@ -1,5 +1,5 @@
-import { ObjectUtils } from "./object.utils.js";
-import { isEqual } from "./isEqual.js";
+import { ObjectUtils } from "../utils/object.utils.js";
+import { isEqual } from "../utils/isEqual.js";
 import { useEffect, useRef } from "react";
 import { useFormState, useWatch } from "react-hook-form";
 function isNilOrEqual(left, right) {

package/dist/{useDeepCompare.js → hooks/useDeepCompare.js}

@@ -1,4 +1,4 @@
-import { isEqual } from "./isEqual.js";
+import { isEqual } from "../utils/isEqual.js";
 import { useEffect, useLayoutEffect, useMemo, useRef } from "react";
 const useDeepCompareEffect = (callback, dependencies) => {
 	return useEffect(callback, useDeepCompareDeps(dependencies));

package/dist/{useFilters.js → hooks/useFilters.js}

@@ -1,4 +1,4 @@
-import { UIRouter } from "./router.context.js";
+import { UIRouter } from "../config/router.context.js";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { z } from "zod";
 function getFieldType(schema, fieldKey) {

package/dist/{useForm.js → hooks/useForm.js}

@@ -1,7 +1,7 @@
 import { useMemo } from "react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-function useForm$1({ resolver, zodSchema, defaultValues,...props }) {
+function useForm$1({ resolver, zodSchema, defaultValues, ...props }) {
 	const formResolver = useMemo(() => resolver ?? (zodSchema ? zodResolver(zodSchema) : void 0), [resolver, zodSchema]);
 	return useForm({
 		...props,

package/dist/{useFormAutosave.js → hooks/useFormAutosave.js}

@@ -1,4 +1,4 @@
-import { ObjectUtils } from "./object.utils.js";
+import { ObjectUtils } from "../utils/object.utils.js";
 import { useAutosave } from "./useAutosave.js";
 import { useForm } from "./useForm.js";
 import { useEffect, useRef } from "react";
@@ -14,7 +14,7 @@ Solutions:
 1. Ensure reset dependencies include all relevant state variables
 2. Confirm your submission handler updates state properly (check query invalidation)
 3. For slower operations, consider increasing the timeout threshold`;
-function useFormAutosave({ autosaveDelay, enableAutosave, onAutosave, getResetValues, resetDeps, resetTimeout = 5e3,...props }) {
+function useFormAutosave({ autosaveDelay, enableAutosave, onAutosave, getResetValues, resetDeps, resetTimeout = 5e3, ...props }) {
 	const form = useForm({
 		...props,
 		defaultValues: getResetValues()

package/dist/{usePagination.js → hooks/usePagination.js}

@@ -1,4 +1,4 @@
-import { UIRouter } from "./router.context.js";
+import { UIRouter } from "../config/router.context.js";
 import { useEffect, useState } from "react";
 var DEFAULT_STATE = {
 	pageIndex: 1,

package/dist/{useSorting.js → hooks/useSorting.js}

@@ -1,4 +1,4 @@
-import { UIRouter } from "./router.context.js";
+import { UIRouter } from "../config/router.context.js";
 import { useEffect, useMemo, useState } from "react";
 function useSorting(defaultSorting, prefix = "") {
 	const { pathname, replace, searchParams } = UIRouter.useUIRouter();

package/dist/{useStateAndRef.js → hooks/useStateAndRef.js}

@@ -1,4 +1,4 @@
-import { ObjectUtils } from "./object.utils.js";
+import { ObjectUtils } from "../utils/object.utils.js";
 import { useCallback, useRef, useState } from "react";
 const useStateAndRef = (initialState) => {
 	const [state, setState] = useState(initialState);

package/dist/{useTableNav.js → hooks/useTableNav.js}

@@ -1,4 +1,4 @@
-import { logger } from "./logger.js";
+import { logger } from "../utils/logger.js";
 var Keys = /* @__PURE__ */ function(Keys$1) {
 	Keys$1["Enter"] = "Enter";
 	Keys$1["Escape"] = "Escape";