@povio/ui 2.2.9-rc.3 → 2.2.9-rc.31

package/dist/components/inputs/Skeleton/InputFrame.js

@@ -0,0 +1,178 @@
+import { UIStyle } from "../../../config/uiStyle.context.js";
+import { typography } from "../../text/Typography/typography.cva.js";
+import { Loader } from "../../status/Loader/Loader.js";
+import { UIConfig } from "../../../config/uiConfig.context.js";
+import { InlineIconButton } from "../../buttons/InlineIconButton/InlineIconButton.js";
+import { FormFieldLabel } from "../FormField/FormFieldLabel.js";
+import { InputClear } from "../shared/InputClear.js";
+import { inputBase, inputContentWrapper, inputSize } from "../shared/input.cva.js";
+import { FormField } from "../FormField/FormField.js";
+import { TooltipWrapper } from "../shared/TooltipWrapper.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { isValidElement } from "react";
+//#region src/components/inputs/Skeleton/InputFrame.tsx
+var InputFrame = (props) => {
+	const ui = UIConfig.useConfig();
+	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
+	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
+	const inputContentWrapperCva = UIStyle.useCva("input.contentWrapperCva", inputContentWrapper);
+	const typographyCva = UIStyle.useCva("typography.cva", typography);
+	const { ref, children, formFieldRef, labelProps, headerProps, error, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isHeaderHidden, hideLabel: hideLabelProp, headerClassName, errorClassName, className, leadingContent, leadingIcon, actionContent, trailingContent, trailingIcon, trailingAction, unit, isLoading, action, isClearable: isClearableProp, showClear, renderStatic, onStaticInteract, clearClassName, onClear, dataAttributes, typographySize, inputClassName, contentClassName, contentWrapperClassName, labelPlacement = "content-wrapper", trailingClassName, variant: variantProp, as: asProp, size: sizeProp } = props;
+	const as = asProp ?? ui.input.as;
+	const size = sizeProp ?? ui.input.size;
+	const variant = variantProp ?? ui.input.variant;
+	const hideLabel = hideLabelProp ?? ui.input.hideLabel;
+	const hasClear = !!(isClearableProp ?? ui.input.isClearable);
+	const isLeadingIconElement = leadingIcon && isValidElement(leadingIcon);
+	const isTrailingIconElement = trailingIcon && isValidElement(trailingIcon);
+	const hasTrailingContent = hasClear || !!trailingContent || !!unit || !!isLoading || !!action || !!trailingIcon || !!trailingAction;
+	const isTrailingInteractive = !!action || !!trailingAction || !!isTrailingIconElement || hasClear && !!showClear || !!trailingContent;
+	const dataAttributeProps = getInputFrameDataAttributeProps(dataAttributes);
+	const formFieldProps = {
+		error,
+		label: label ?? "",
+		tooltipText,
+		helperText,
+		isRequired,
+		rightContent,
+		isHeaderHidden: isHeaderHidden || as === "inline" || as === "filter" || as === "floating",
+		hideLabel,
+		isDisabled,
+		headerClassName,
+		errorClassName,
+		className
+	};
+	const resolvedHeaderProps = headerProps ?? {
+		label: label ?? "",
+		tooltipText,
+		helperText,
+		isRequired,
+		rightContent,
+		isHeaderHidden: hideLabel || isHeaderHidden,
+		isDisabled,
+		className: headerClassName,
+		labelProps
+	};
+	const labelContent = as && ["filter", "floating"].includes(as) ? /* @__PURE__ */ jsx(FormFieldLabel, {
+		as,
+		size,
+		...resolvedHeaderProps
+	}) : null;
+	const resolvedContentWrapperClassName = contentWrapperClassName ?? inputContentWrapperCva({ as });
+	return /* @__PURE__ */ jsx(TooltipWrapper, {
+		as,
+		error,
+		triggerTabIndex: as === "inline" ? -1 : void 0,
+		children: /* @__PURE__ */ jsx(FormField, {
+			...formFieldProps,
+			...dataAttributeProps,
+			ref: formFieldRef,
+			as,
+			labelProps,
+			tabIndex: as === "inline" ? -1 : void 0,
+			onMouseEnter: () => {
+				if (renderStatic) onStaticInteract?.(false);
+			},
+			onFocusCapture: () => {
+				if (renderStatic) onStaticInteract?.(true);
+			},
+			children: /* @__PURE__ */ jsxs("div", {
+				ref,
+				...dataAttributeProps,
+				className: clsx("relative flex cursor-text has-disabled:cursor-default", inputBaseCva({
+					variant,
+					as
+				}), inputClassName),
+				tabIndex: renderStatic ? isDisabled ? -1 : 0 : void 0,
+				onFocus: () => {
+					if (renderStatic) onStaticInteract?.(true);
+				},
+				onClick: () => {
+					if (renderStatic) onStaticInteract?.(true);
+				},
+				onPointerDown: () => {
+					if (renderStatic) onStaticInteract?.(true);
+				},
+				"data-rac": "",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: clsx("group/input-frame flex min-w-0 w-full items-center gap-input-gap-input-text-to-elements pr-0!", as === "inline" && "h-full", inputSizeCva({
+						size,
+						as
+					}), typographySize && typographyCva({ size: typographySize }), contentClassName),
+					children: [
+						leadingContent,
+						leadingIcon && /* @__PURE__ */ jsx("div", {
+							className: clsx(!isLeadingIconElement && "pointer-events-none"),
+							children: renderIconVisual(leadingIcon)
+						}),
+						labelPlacement === "content-row" && labelContent,
+						/* @__PURE__ */ jsxs("div", {
+							className: resolvedContentWrapperClassName,
+							children: [
+								labelPlacement === "content-wrapper" && labelContent,
+								actionContent,
+								typeof children === "function" ? children(dataAttributeProps) : children
+							]
+						})
+					]
+				}), hasTrailingContent && /* @__PURE__ */ jsxs("div", {
+					className: clsx("flex items-center gap-input-gap-trailing-elements py-0! pl-0!", inputSizeCva({
+						size,
+						as
+					}), !isTrailingInteractive && "pointer-events-none", trailingClassName),
+					children: [
+						hasClear && /* @__PURE__ */ jsx(InputClear, {
+							onClear: () => onClear?.(),
+							className: clearClassName,
+							show: !!showClear,
+							renderStatic
+						}),
+						trailingContent,
+						unit && /* @__PURE__ */ jsx("span", {
+							className: typographyCva({
+								size: "label-2",
+								sizeMobile: "label-2",
+								variant: "prominent-1",
+								className: "text-text-default-3"
+							}),
+							children: unit
+						}),
+						isLoading && /* @__PURE__ */ jsx("div", {
+							className: "inline-flex",
+							children: /* @__PURE__ */ jsx(Loader, {})
+						}),
+						!isLoading && action && /* @__PURE__ */ jsx(InlineIconButton, {
+							color: "secondary",
+							icon: action.icon,
+							isDisabled,
+							onPress: action.onClick,
+							excludeFromTabOrder: true,
+							label: action.altText,
+							className: clsx("border-0!", action.className)
+						}),
+						!isLoading && !action && trailingIcon && renderIconVisual(trailingIcon),
+						trailingAction
+					]
+				})]
+			})
+		})
+	});
+};
+var renderIconVisual = (icon) => {
+	if (isValidElement(icon)) return icon;
+	return /* @__PURE__ */ jsx(icon, { className: "size-6 text-interactive-text-secondary-idle" });
+};
+var getInputFrameDataAttributeProps = (dataAttributes) => ({
+	"data-is-empty": dataAttributes?.dataIsEmpty || void 0,
+	"data-is-filled": dataAttributes?.dataIsFilled || void 0,
+	"data-is-dirty": dataAttributes?.dataIsDirty || void 0,
+	"data-is-required": dataAttributes?.dataIsRequired || void 0,
+	"data-is-disabled": dataAttributes?.dataIsDisabled || void 0,
+	"data-disabled": dataAttributes?.dataDisabled || void 0,
+	"data-has-search": dataAttributes?.dataHasSearch || void 0,
+	"data-invalid": dataAttributes?.dataInvalid || void 0,
+	"data-has-selection": dataAttributes?.dataHasSelection || void 0
+});
+//#endregion
+export { InputFrame };

package/dist/components/inputs/TextEditor/TextEditor.js

@@ -106,6 +106,7 @@ var TextEditorBase = ({ ref, as = "default", placeholder, label, hideLabel, tool
 			"data-rac": "",
 			"data-hovered": isHovered || void 0,
 			"data-disabled": isDisabled || void 0,
+			"data-is-disabled": isDisabled || void 0,
 			"data-focus-within": isFocused || void 0,
 			"data-focus-visible": isFocused && isFocusVisible || void 0,
 			"data-is-filled": !editor?.isEmpty,

package/dist/components/inputs/Toggle/Toggle.js

@@ -2,7 +2,7 @@ import { UIStyle } from "../../../config/uiStyle.context.js";
 import { UIConfig } from "../../../config/uiConfig.context.js";
 import { FormFieldError } from "../FormField/FormFieldError.js";
 import { CheckContent } from "../shared/CheckContent.js";
-import { toggle, toggleTypography } from "./toggle.cva.js";
+import { toggle, toggleContentClassName, toggleTypography } from "./toggle.cva.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Switch } from "react-aria-components";
@@ -13,6 +13,7 @@ var ToggleBase = (props) => {
 	const ui = UIConfig.useConfig();
 	const toggleCva = UIStyle.useCva("toggle.cva", toggle);
 	const toggleTypographyMap = UIStyle.useMapper("toggle.typography", toggleTypography);
+	const toggleContentClassNameMap = UIStyle.useMapper("toggle.contentClassName", toggleContentClassName);
 	const { className, children, isDisabled, error, variant = ui.toggle.variant, ...rest } = props;
 	const formFieldErrorProps = {
 		error,
@@ -32,6 +33,10 @@ var ToggleBase = (props) => {
 				variant,
 				...rest
 			}),
+			contentClassName: toggleContentClassNameMap({
+				variant,
+				...rest
+			}),
 			children
 		})]
 	}), /* @__PURE__ */ jsx(FormFieldError, { ...formFieldErrorProps })] });

package/dist/components/inputs/Toggle/toggle.cva.d.ts

@@ -8,3 +8,6 @@ export interface ToggleVariantProps extends VariantProps<typeof toggle> {
 export declare const toggleTypography: (props: {
     variant?: "default" | null | undefined;
 }) => TypographyVariantProps | undefined;
+export declare const toggleContentClassName: (props: {
+    variant?: "default" | null | undefined;
+}) => string | undefined;

package/dist/components/inputs/Toggle/toggle.cva.js

@@ -26,5 +26,6 @@ var toggleTypography = compoundMapper({ default: {
 	sizeMobile: "label-1",
 	variant: "default"
 } });
+var toggleContentClassName = compoundMapper({ default: "text-text-default-2" });
 //#endregion
-export { toggle, toggleTypography };
+export { toggle, toggleContentClassName, toggleTypography };

package/dist/components/inputs/shared/CheckContent.d.ts

@@ -3,6 +3,7 @@ import { TypographyVariantProps } from '../../text/Typography/typography.cva';
 interface CheckContentProps {
     typography?: TypographyVariantProps;
     className?: string;
+    contentClassName?: string;
 }
-export declare const CheckContent: ({ children, className, ...props }: PropsWithChildren<CheckContentProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const CheckContent: ({ children, className, contentClassName, ...props }: PropsWithChildren<CheckContentProps>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/inputs/shared/CheckContent.js

@@ -3,15 +3,14 @@ import { typography } from "../../text/Typography/typography.cva.js";
 import { jsx } from "react/jsx-runtime";
 import clsx$1 from "clsx";
 //#region src/components/inputs/shared/CheckContent.tsx
-var CheckContent = ({ children, className, ...props }) => {
+var CheckContent = ({ children, className, contentClassName, ...props }) => {
 	return /* @__PURE__ */ jsx("div", {
 		className: clsx$1(UIStyle.useCva("typography.cva", typography)({
 			size: "label-1",
 			sizeMobile: "label-1",
 			variant: "default",
-			...props.typography,
-			className: "text-text-default-2"
-		}), className),
+			...props.typography
+		}), contentClassName, className),
 		children
 	});
 };

package/dist/components/inputs/shared/InputClear.d.ts

@@ -2,8 +2,9 @@ import { CSSProperties } from 'react';
 interface InputClearProps {
     onClear: () => void;
     show?: boolean;
+    renderStatic?: boolean;
     className?: string;
     style?: CSSProperties;
 }
-export declare const InputClear: ({ onClear, className, style, show }: InputClearProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InputClear: ({ onClear, className, style, show, renderStatic }: InputClearProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/inputs/shared/InputClear.js

@@ -5,7 +5,19 @@ import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useTranslation } from "react-i18next";
 //#region src/components/inputs/shared/InputClear.tsx
-var InputClear = ({ onClear, className, style, show }) => {
+var InputClear = ({ onClear, className, style, show, renderStatic }) => {
+	if (renderStatic) return /* @__PURE__ */ jsx("button", {
+		className: clsx("invisible relative z-1 flex items-center size-6 shrink-0", "group-focus-within:visible group-hover/date-picker-content:visible group-hover/select-content:visible group-hover/text-area:visible group-hover:visible", "border-0!", !show && "invisible!", className),
+		style
+	});
+	return /* @__PURE__ */ jsx(InputClearButton, {
+		onClear,
+		className,
+		style,
+		show
+	});
+};
+var InputClearButton = ({ onClear, className, style, show }) => {
 	const { t } = useTranslation("ui");
 	return /* @__PURE__ */ jsx(InlineIconButton, {
 		color: "secondary",

package/dist/components/inputs/shared/StaticInput.d.ts

@@ -0,0 +1,38 @@
+import { ReactNode } from 'react';
+import { FormFieldProps } from '../FormField/FormField';
+import { TextInputProps } from '../Input/TextInput/TextInput';
+import { InputSizeProps, InputVariantProps } from './input.cva';
+import { TypographyVariantProps } from '../../text/Typography/typography.cva';
+type StaticInputDataAttributes = {
+    dataDisabled?: boolean;
+    dataHasSearch?: boolean;
+    dataHasSelection?: boolean;
+    dataInvalid?: boolean;
+    dataIsDirty?: boolean;
+    dataIsDisabled?: boolean;
+    dataIsEmpty?: boolean;
+    dataIsFilled?: boolean;
+    dataIsRequired?: boolean;
+};
+interface StaticInputProps extends FormFieldProps {
+    onInteract: (shouldFocus: boolean) => void;
+    as?: TextInputProps["as"];
+    typographySize?: TypographyVariantProps["size"];
+    size?: InputSizeProps["size"];
+    variant?: InputVariantProps["variant"];
+    applyMinInputWidth?: boolean;
+    placeholder?: ReactNode;
+    showPlacholderIfFilled?: boolean;
+    displayValue?: ReactNode;
+    isEmpty?: boolean;
+    leadingVisual?: ReactNode;
+    leadingContent?: ReactNode;
+    leadingContentClassName?: string;
+    hasClearIcon?: boolean;
+    trailingContent?: ReactNode;
+    contentRowClassName?: string;
+    inputClassName?: string;
+    dataAttributes?: StaticInputDataAttributes;
+}
+export declare const StaticInput: ({ onInteract, as, typographySize, size, variant, applyMinInputWidth, placeholder, showPlacholderIfFilled, displayValue, isEmpty, leadingVisual, leadingContent, leadingContentClassName, hasClearIcon, trailingContent, contentRowClassName, inputClassName, dataAttributes, className, ...formFieldProps }: StaticInputProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/inputs/shared/TooltipWrapper.js

@@ -1,7 +1,10 @@
+import { UIStyle } from "../../../config/uiStyle.context.js";
 import { Tooltip } from "../../overlays/Tooltip/Tooltip.js";
+import { tooltipWrapperTrigger } from "./tooltipWrapper.cva.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/inputs/shared/TooltipWrapper.tsx
 var TooltipWrapper = (props) => {
+	const tooltipWrapperTriggerCva = UIStyle.useCva("tooltipWrapper.triggerCva", tooltipWrapperTrigger);
 	if (props.as !== "inline") return props.children;
 	return /* @__PURE__ */ jsx(Tooltip, {
 		text: props.error || void 0,
@@ -9,10 +12,11 @@ var TooltipWrapper = (props) => {
 		color: "error",
 		hidden: !props.error,
 		isNonInteractiveTrigger: true,
-		triggerClassName: props.triggerClassName,
+		triggerClassName: tooltipWrapperTriggerCva({ className: props.triggerClassName }),
 		triggerTabIndex: props.triggerTabIndex,
 		children: /* @__PURE__ */ jsx("div", {
 			tabIndex: -1,
+			className: tooltipWrapperTriggerCva({}),
 			children: props.children
 		})
 	});

package/dist/components/inputs/shared/input.cva.d.ts

@@ -12,6 +12,16 @@ export declare const inputSize: (props?: ({
 } & ClassProp) | undefined) => string;
 export interface InputSizeProps extends VariantProps<typeof inputSize> {
 }
+export declare const inputContentWrapper: (props?: ({
+    as?: "filter" | "default" | "floating" | "inline" | null | undefined;
+} & ClassProp) | undefined) => string;
+export interface InputContentWrapperProps extends VariantProps<typeof inputContentWrapper> {
+}
+export declare const inputClearClass: (props?: ({
+    as?: "filter" | "default" | "floating" | "inline" | null | undefined;
+} & ClassProp) | undefined) => string;
+export interface InputClearClassProps extends VariantProps<typeof inputClearClass> {
+}
 export declare const inputSide: (props?: ({
     size?: "small" | "default" | "extra-small" | "large" | null | undefined;
     type?: "left" | "right" | "var" | null | undefined;

package/dist/components/inputs/shared/input.cva.js

@@ -191,6 +191,24 @@ var inputSize = cva("", {
 		as: "default"
 	}
 });
+var inputContentWrapper = cva("flex w-full", {
+	variants: { as: {
+		default: "",
+		floating: "flex-col",
+		filter: "gap-input-gap-input-text-to-elements",
+		inline: ""
+	} },
+	defaultVariants: { as: "default" }
+});
+var inputClearClass = cva("", {
+	variants: { as: {
+		default: "",
+		floating: "",
+		filter: "",
+		inline: ""
+	} },
+	defaultVariants: { as: "default" }
+});
 var inputSide = cva("", {
 	variants: {
 		size: {
@@ -277,4 +295,4 @@ var useInputCva = () => {
 	};
 };
 //#endregion
-export { inputBase, inputSide, inputSize, useInputCva };
+export { inputBase, inputClearClass, inputContentWrapper, inputSide, inputSize, useInputCva };

package/dist/components/inputs/shared/tooltipWrapper.cva.d.ts

@@ -0,0 +1,4 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const tooltipWrapperTrigger: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export interface TooltipWrapperTriggerVariantProps extends VariantProps<typeof tooltipWrapperTrigger> {
+}

package/dist/components/inputs/shared/tooltipWrapper.cva.js

@@ -0,0 +1,5 @@
+import { cva } from "class-variance-authority";
+//#region src/components/inputs/shared/tooltipWrapper.cva.ts
+var tooltipWrapperTrigger = cva("inline-flex");
+//#endregion
+export { tooltipWrapperTrigger };

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

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, ReactElement } from 'react';
 import { ButtonProps } from '../components/buttons/Button/Button';
 import { CheckboxProps } from '../components/inputs/Checkbox/Checkbox';
 import { DatePickerProps } from '../components/inputs/DateTime/DatePicker/DatePicker';
@@ -19,6 +19,7 @@ export declare namespace UIConfig {
         [P in keyof T]-?: T[P] extends object ? DeepRequired<T[P]> : Exclude<T[P], null | undefined>;
     };
     export interface Options {
+        renderStaticInput: boolean;
         input: Pick<TextInputProps, "variant" | "isClearable" | "hideLabel" | "as" | "size">;
         button: Pick<ButtonProps, "variant" | "size">;
         numberInput: Pick<NumberInputProps, "formatOptions">;
@@ -33,7 +34,12 @@ export declare namespace UIConfig {
         };
         toggle: Pick<ToggleProps, "variant">;
         slider: Pick<SliderProps, "minValue" | "maxValue">;
-        dateInput: Pick<DatePickerProps, "todayIcon" | "shouldForceLeadingZeros" | "disableManualEntry">;
+        dateInput: Pick<DatePickerProps, "todayIcon" | "todayIconButtonSize" | "todayIconPlacement" | "shouldForceLeadingZeros" | "disableManualEntry" | "autoFixYear"> & {
+            calendarIcon?: ReactElement;
+            dateTimeIcon?: ReactElement;
+            timeIcon?: ReactElement;
+            setDateValueOnDateSelection?: boolean;
+        };
         actionModal: Pick<ActionModalProps, "titleTypography" | "descriptionTypography">;
         bottomSheet: Pick<BottomSheetProps, "closeDragThreshold" | "closeVelocityThreshold" | "hideThumb" | "headerTypography">;
         tableHeaderText: Pick<HeaderTextProps, "variant" | "size">;

package/dist/config/uiConfig.context.js

@@ -1,3 +1,6 @@
+import { CalendarIcon } from "../assets/icons/Calendar.js";
+import { ClockIcon } from "../assets/icons/Clock.js";
+import { DateTimeIcon } from "../assets/icons/DateTime.js";
 import { ObjectUtils } from "../utils/object.utils.js";
 import { useDeepCompareMemo } from "../hooks/useDeepCompare.js";
 import { jsx } from "react/jsx-runtime";
@@ -6,6 +9,7 @@ import { createContext, use } from "react";
 var UIConfig;
 (function(_UIConfig) {
 	const DEFAULT_CONFIG = {
+		renderStaticInput: true,
 		input: {
 			variant: "outlined",
 			as: "default",
@@ -43,8 +47,15 @@ var UIConfig;
 		},
 		dateInput: {
 			todayIcon: false,
+			todayIconButtonSize: "none",
+			todayIconPlacement: "content",
 			shouldForceLeadingZeros: false,
-			disableManualEntry: false
+			disableManualEntry: false,
+			autoFixYear: false,
+			calendarIcon: /* @__PURE__ */ jsx(CalendarIcon, { className: "size-5" }),
+			dateTimeIcon: /* @__PURE__ */ jsx(DateTimeIcon, { className: "size-5" }),
+			timeIcon: /* @__PURE__ */ jsx(ClockIcon, { className: "size-6 text-interactive-text-secondary-idle" }),
+			setDateValueOnDateSelection: false
 		},
 		actionModal: {
 			titleTypography: {

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

@@ -4,11 +4,16 @@ import { BreadcrumbChevronVariantProps, BreadcrumbIconVariantProps, BreadcrumbIt
 import { ButtonVariantProps } from '../components/buttons/Button/button.cva';
 import { PillButtonVariants } from '../components/buttons/PillButton/pillButton.cva';
 import { CheckboxIconVariantProps, CheckboxVariantProps } from '../components/inputs/Checkbox/checkbox.cva';
+import { DatePickerInputContentRowProps } from '../components/inputs/DateTime/shared/datePickerInput.cva';
 import { FormFieldErrorVariantProps } from '../components/inputs/FormField/formFieldError.cva';
+import { FormFieldHeaderVariantProps } from '../components/inputs/FormField/formFieldHeader.cva';
 import { FormFieldHelperVariantProps } from '../components/inputs/FormField/formFieldHelper.cva';
 import { RadioVariantProps } from '../components/inputs/RadioGroup/radio.cva';
-import { InputBaseProps, InputSideProps, InputSizeProps } from '../components/inputs/shared/input.cva';
+import { SelectPopoverCva } from '../components/inputs/Selection/shared/selectDesktop.cva';
+import { SelectListBoxItemCva } from '../components/inputs/Selection/shared/selectItem.cva';
+import { InputBaseProps, InputClearClassProps, InputContentWrapperProps, InputSideProps, InputSizeProps } from '../components/inputs/shared/input.cva';
 import { LabelBaseProps } from '../components/inputs/shared/label.cva';
+import { TooltipWrapperTriggerVariantProps } from '../components/inputs/shared/tooltipWrapper.cva';
 import { ToggleVariantProps } from '../components/inputs/Toggle/toggle.cva';
 import { MenuCvaVariantProps, MenuItemVariantProps, MenuPopoverVariantProps, MenuPopoverWrapperVariantProps } from '../components/Menu/menu.cva';
 import { AccordionChevronVariantProps, AccordionHeadingSubtitleVariantProps, AccordionHeadingTitleVariantProps, AccordionHeadingVariantProps, AccordionIconVariantProps, AccordionItemVariantProps, AccordionPanelContentVariantProps, AccordionPanelVariantProps, AccordionTriggerVariantProps, AccordionVariantProps } from '../components/navigation/Accordion/accordion.cva';
@@ -24,13 +29,12 @@ 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, ConfigSchema } from '../utils/compoundMapper';
-import { SelectListBoxItemCva } from '../components/inputs/Selection/shared/selectItem.cva';
 export declare namespace UIStyle {
     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 {
+    export interface Options {
         button: {
             cva?: Cva<ButtonVariantProps>;
             sizeCva?: Cva<ButtonVariantProps>;
@@ -46,10 +50,12 @@ export declare namespace UIStyle {
             cva?: Cva<CheckboxVariantProps>;
             iconCva?: Cva<CheckboxIconVariantProps>;
             typography?: CompoundMapper<TypographyVariantProps, CheckboxVariantProps>;
+            contentClassName?: CompoundMapper<string, CheckboxVariantProps>;
         };
         radio: {
             cva?: Cva<RadioVariantProps>;
             typography?: CompoundMapper<TypographyVariantProps, RadioVariantProps>;
+            contentClassName?: CompoundMapper<string, RadioVariantProps>;
         };
         status: {
             iconCva?: Cva<ToastVariantProps>;
@@ -64,9 +70,17 @@ export declare namespace UIStyle {
         };
         input: {
             baseCva?: Cva<InputBaseProps>;
+            clearClassCva?: Cva<InputClearClassProps>;
+            contentWrapperCva?: Cva<InputContentWrapperProps>;
             sizeCva?: Cva<InputSizeProps>;
             sideCva?: Cva<InputSideProps>;
         };
+        tooltipWrapper: {
+            triggerCva?: Cva<TooltipWrapperTriggerVariantProps>;
+        };
+        datePickerInput: {
+            contentRowCva?: Cva<DatePickerInputContentRowProps>;
+        };
         label: {
             cva?: Cva<LabelBaseProps>;
             typography?: CompoundMapper<TypographyVariantProps, LabelBaseProps>;
@@ -74,6 +88,7 @@ export declare namespace UIStyle {
         toggle: {
             cva?: Cva<ToggleVariantProps>;
             typography?: CompoundMapper<TypographyVariantProps, ToggleVariantProps>;
+            contentClassName?: CompoundMapper<string, ToggleVariantProps>;
         };
         typography: {
             cva?: Cva<TypographyVariantProps>;
@@ -145,11 +160,13 @@ export declare namespace UIStyle {
             cva?: Cva<PopoverVariantProps>;
         };
         formField: {
+            headerCva?: Cva<FormFieldHeaderVariantProps>;
             errorLabelCva?: Cva<FormFieldErrorVariantProps>;
             helperLabelCva?: Cva<FormFieldHelperVariantProps>;
         };
         select: {
             listBoxItemCva?: Cva<SelectListBoxItemCva>;
+            popoverCva?: Cva<SelectPopoverCva>;
         };
     }
     interface ProviderProps {

package/dist/helpers/dynamicInputs.d.ts

@@ -23,7 +23,7 @@ export type AllowedComponentType<TZodType extends z.ZodType> = ZodUtils.ZodTypeS
     boolean: "toggle" | "checkbox";
     number: "numberInput" | "slider" | "select" | "querySelect" | "autocomplete" | "queryAutocomplete" | "segment";
     enum: "select" | "querySelect" | "autocomplete" | "segment";
-    string: "textInput" | "passwordInput" | "textArea" | "select" | "querySelect" | "autocomplete" | "queryAutocomplete" | "segment";
+    string: "textInput" | "passwordInput" | "textArea" | "textEditor" | "select" | "querySelect" | "autocomplete" | "queryAutocomplete" | "segment";
     email: "textInput";
     array: "select" | "querySelect" | "autocomplete" | "queryAutocomplete" | "segment";
     object: InputComponentType;

package/dist/helpers/dynamicInputs.js

@@ -81,6 +81,7 @@ var getDefaultProps = (componentType, keyType) => {
 	].includes(componentType)) props.items = getDefaultSelectionItems(unwrappedType);
 	if ([
 		"select",
+		"querySelect",
 		"autocomplete",
 		"queryAutocomplete",
 		"segment"
@@ -146,6 +147,8 @@ var populateInputDef = (schema, schemaKey, value, options) => {
 	const inputWrapper = value.inputWrapper ?? options.globalInputWrapper;
 	if ("render" in value) return {
 		name,
+		label,
+		placeholder,
 		render: value.render
 	};
 	const schemaKeyType = schema.shape[schemaKey];

package/dist/hooks/useIntersectionObserver.d.ts

@@ -3,6 +3,6 @@ type UseIntersectionObserverProps = {
     onIntersectionChange?: (entry: IntersectionObserverEntry) => void;
 } & IntersectionObserverInit;
 export declare const useIntersectionObserver: <T extends HTMLElement>({ onIntersection, onIntersectionChange, root, rootMargin, threshold, }: UseIntersectionObserverProps) => {
-    ref: import('react').RefObject<T | null>;
+    ref: (element: T | null) => void;
 };
 export {};