@povio/ui 2.2.0 → 2.2.2

package/dist/InputContent.js

@@ -1,94 +0,0 @@
-import { UIStyle } from "./uiStyle.context.js";
-import { Typography } from "./Typography.js";
-import { Loader } from "./Loader.js";
-import { InlineIconButton } from "./InlineIconButton.js";
-import { inputSide } from "./input.cva.js";
-import { FormFieldLabel } from "./FormFieldLabel.js";
-import { InputClear } from "./InputClear.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { clsx } from "clsx";
-import { isValidElement, useMemo } from "react";
-import useMeasure from "react-use-measure";
-const InputContent = ({ leadingIcon: LeadingIcon, trailingIcon: TrailingIcon, unit, isLoading, isDisabled, action, isClearable, value, onChange, onBlur, children, headerProps, as, size }) => {
-	const inputSideCva = UIStyle.useConfig()?.input?.sideCva ?? inputSide;
-	const [leadingContentRef, { width: leadingWidth }] = useMeasure();
-	const [trailingContentRef, { width: trailingWidth }] = useMeasure();
-	const [labelContentRef, { width: labelWidth }] = useMeasure();
-	const isLeadingIconElement = LeadingIcon && isValidElement(LeadingIcon);
-	const isTrailingIconElement = TrailingIcon && isValidElement(TrailingIcon);
-	const showClear = isClearable && value != null && value !== "";
-	const style = useMemo(() => {
-		const leftPadding = as === "filter" ? labelWidth + leadingWidth : leadingWidth;
-		return {
-			paddingLeft: `calc(var(${inputSideCva({
-				size,
-				type: "var"
-			})}) + ${leftPadding}px + ${leftPadding > 0 ? "var(--spacing-2)" : "0px"})`,
-			paddingRight: `calc(var(${inputSideCva({
-				size,
-				type: "var"
-			})}) + ${trailingWidth}px + ${trailingWidth > 0 ? "var(--spacing-2)" : "0px"})`
-		};
-	}, [
-		leadingWidth,
-		trailingWidth,
-		labelWidth,
-		as,
-		size,
-		inputSideCva
-	]);
-	return /* @__PURE__ */ jsxs("div", {
-		className: clsx("group/input-content relative", as === "inline" && "h-full"),
-		children: [
-			as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
-				ref: labelContentRef,
-				as,
-				...headerProps
-			}),
-			children(style),
-			LeadingIcon && /* @__PURE__ */ jsx("div", {
-				ref: leadingContentRef,
-				className: clsx("absolute top-1/2 -translate-y-1/2", !isLeadingIconElement && "pointer-events-none", inputSideCva({
-					size,
-					type: "left"
-				})),
-				children: isLeadingIconElement ? LeadingIcon : /* @__PURE__ */ jsx(LeadingIcon, { className: "size-6 text-interactive-text-secondary-idle" })
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				ref: trailingContentRef,
-				className: clsx("absolute top-1/2 flex -translate-y-1/2 items-center gap-2", !isTrailingIconElement && !action && !showClear && "pointer-events-none", inputSideCva({
-					size,
-					type: "right"
-				})),
-				children: [
-					showClear && !isDisabled && /* @__PURE__ */ jsx(InputClear, { onClear: () => {
-						onChange?.("");
-						onBlur?.({ target: { value: "" } });
-					} }),
-					unit && /* @__PURE__ */ jsx(Typography, {
-						as: "span",
-						size: "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: action.className
-					}),
-					!isLoading && !action && TrailingIcon && (isTrailingIconElement ? TrailingIcon : /* @__PURE__ */ jsx(TrailingIcon, { className: "size-6 text-interactive-text-secondary-idle" }))
-				]
-			})
-		]
-	});
-};
-export { InputContent };

package/dist/MenuDesktop.js

@@ -1,54 +0,0 @@
-import { MenuPopover } from "./MenuPopover.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import React, { useRef, useState } from "react";
-import { MenuTrigger } from "react-aria-components";
-import { useHover } from "react-aria";
-var CLOSE_DELAY = 100;
-const MenuDesktop = ({ trigger, items, closeDelay = CLOSE_DELAY, triggerOnHover = false, onAction,...props }) => {
-	const [isOpen, setIsOpen] = useState(false);
-	const timeoutRef = useRef(null);
-	const isHoveringTrigger = useRef(false);
-	const openMenu = () => {
-		if (timeoutRef.current) {
-			clearTimeout(timeoutRef.current);
-			timeoutRef.current = null;
-		}
-		setIsOpen(true);
-	};
-	const closeMenu = () => {
-		if (isHoveringTrigger.current) return;
-		timeoutRef.current = setTimeout(() => {
-			setIsOpen(false);
-			timeoutRef.current = null;
-		}, closeDelay);
-	};
-	const { hoverProps } = useHover({
-		isDisabled: !triggerOnHover,
-		onHoverChange: (isHovering) => {
-			if (isHovering) {
-				isHoveringTrigger.current = true;
-				openMenu();
-			} else {
-				isHoveringTrigger.current = false;
-				closeMenu();
-			}
-		}
-	});
-	let triggerComponent = trigger;
-	if (triggerOnHover) triggerComponent = React.cloneElement(trigger, hoverProps);
-	return /* @__PURE__ */ jsxs(MenuTrigger, {
-		isOpen: triggerOnHover ? isOpen : void 0,
-		onOpenChange: setIsOpen,
-		children: [triggerComponent, /* @__PURE__ */ jsx(MenuPopover, {
-			...props,
-			offset: 0,
-			items,
-			onAction,
-			isOpen: triggerOnHover ? isOpen : void 0,
-			isNonModal: triggerOnHover,
-			onMouseEnter: triggerOnHover ? openMenu : void 0,
-			onMouseLeave: triggerOnHover ? closeMenu : void 0
-		})]
-	});
-};
-export { MenuDesktop };

package/dist/PillButton.js

@@ -1,37 +0,0 @@
-import { CloseIcon } from "./Close.js";
-import { UIStyle } from "./uiStyle.context.js";
-import { ButtonContent } from "./ButtonContent.js";
-import { TooltipEllipsis } from "./TooltipEllipsis.js";
-import { pillButton, pillButtonContent, pillButtonIconSize, pillButtonTypography } from "./pillButton.cva.js";
-import { jsx } from "react/jsx-runtime";
-import { Button, ToggleButton } from "react-aria-components";
-const PillButton = ({ children, dismissable, toggle, icon, iconPosition,...props }) => {
-	const uiStyle = UIStyle.useConfig();
-	const pillButtonCva = uiStyle?.pillButton?.cva ?? pillButton;
-	const pillButtonTypographyMap = uiStyle?.pillButton?.typography ?? pillButtonTypography;
-	const Component = toggle ? ToggleButton : Button;
-	const getIconPosition = () => {
-		if (dismissable) return "right";
-		return icon ? iconPosition : "none";
-	};
-	return /* @__PURE__ */ jsx(TooltipEllipsis, {
-		text: children,
-		children: (onContentRef) => /* @__PURE__ */ jsx(Component, {
-			...props,
-			className: pillButtonCva({
-				...props,
-				className: props.className
-			}),
-			children: /* @__PURE__ */ jsx(ButtonContent, {
-				text: children,
-				ref: onContentRef,
-				icon: dismissable ? CloseIcon : icon,
-				iconPosition: dismissable ? "right" : iconPosition,
-				className: pillButtonContent({ iconPosition: getIconPosition() }),
-				iconClassName: pillButtonIconSize,
-				typography: pillButtonTypographyMap({ ...props })
-			})
-		})
-	});
-};
-export { PillButton };

package/dist/Tag.js

@@ -1,42 +0,0 @@
-import { CloseIcon } from "./Close.js";
-import { UIStyle } from "./uiStyle.context.js";
-import { Typography } from "./Typography.js";
-import { TooltipEllipsis } from "./TooltipEllipsis.js";
-import { ns } from "./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,...props }) => {
-	const tagCva = UIStyle.useConfig()?.tag?.cva ?? tag;
-	const { t } = useTranslation("ui");
-	const buttonProps = {
-		isDisabled,
-		onPress: onDismiss,
-		label: t(($) => $.ui.tag.dismiss),
-		...props
-	};
-	return /* @__PURE__ */ jsx(TooltipEllipsis, {
-		text: children,
-		children: (onContentRef) => /* @__PURE__ */ jsxs("div", {
-			className: tagCva({
-				...props,
-				className: clsx("pointer-events-none", className)
-			}),
-			children: [/* @__PURE__ */ jsx(Typography, {
-				ref: onContentRef,
-				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/TimePickerInput.js

@@ -1,105 +0,0 @@
-import { ClockIcon } from "./Clock.js";
-import { UIStyle } from "./uiStyle.context.js";
-import { Typography } from "./Typography.js";
-import { InlineIconButton } from "./InlineIconButton.js";
-import { inputSide, useInputCva } from "./input.cva.js";
-import { FormFieldLabel } from "./FormFieldLabel.js";
-import { InputClear } from "./InputClear.js";
-import { TimeField } from "./TimeField.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { clsx } from "clsx";
-import { useMemo, useState } from "react";
-import { Button } from "react-aria-components";
-import { useFocusVisible, useFocusWithin, useHover } from "react-aria";
-import useMeasure from "react-use-measure";
-const TimePickerInput = ({ ref, as, fieldProps, state, isDisabled, isDirty, isInvalid, disableDropdown, variant, size, isClearable, headerProps, disableManualEntry, placeholder, onPress,...props }) => {
-	const inputCva = useInputCva();
-	const inputSideCva = UIStyle.useConfig()?.input?.sideCva ?? inputSide;
-	const { hoverProps, isHovered } = useHover({ isDisabled });
-	const [isFocused, setIsFocused] = useState(false);
-	const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setIsFocused });
-	const { isFocusVisible } = useFocusVisible();
-	const [labelContentRef, { width: labelWidth }] = useMeasure();
-	const [trailingContentRef, { width: trailingWidth }] = useMeasure();
-	const hidePlaceholder = as === "floating" && !state.value && !isFocused;
-	const style = useMemo(() => {
-		return {
-			paddingLeft: as === "filter" ? `calc(var(${inputSideCva({
-				size,
-				type: "var"
-			})}) + ${labelWidth}px)` : "0px",
-			paddingRight: `calc(var(${inputSideCva({
-				size,
-				type: "var"
-			})}) + ${trailingWidth}px)`
-		};
-	}, [
-		labelWidth,
-		trailingWidth,
-		as,
-		size,
-		inputSideCva
-	]);
-	const canClear = state.segments.some((segment) => segment.type !== "literal" && segment.isPlaceholder === false);
-	return /* @__PURE__ */ jsxs("div", {
-		ref,
-		className: inputCva({
-			variant,
-			as,
-			size,
-			...props,
-			className: clsx("group/date-picker-content relative flex min-w-input-width-min-width items-center justify-between gap-2")
-		}),
-		"data-rac": "",
-		"data-datetime-input": "",
-		"data-hovered": isHovered || void 0,
-		"data-disabled": isDisabled || void 0,
-		"data-invalid": isInvalid || void 0,
-		"data-is-empty": state.value === null || void 0,
-		"data-focus-within": isFocused || void 0,
-		"data-focus-visible": isFocused && isFocusVisible || void 0,
-		"data-has-selection": state.value !== null || void 0,
-		"data-is-dirty": isDirty || void 0,
-		...fieldProps,
-		...focusWithinProps,
-		...hoverProps,
-		children: [/* @__PURE__ */ jsxs("div", { children: [
-			disableManualEntry && /* @__PURE__ */ jsx(Button, {
-				onPress,
-				className: "absolute inset-0 z-0"
-			}),
-			as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
-				ref: labelContentRef,
-				as,
-				...headerProps
-			}),
-			/* @__PURE__ */ jsx("div", {
-				style,
-				children: disableManualEntry && placeholder && !state.value ? /* @__PURE__ */ jsx(Typography, {
-					size: "label-1",
-					className: "text-text-default-3",
-					children: placeholder
-				}) : /* @__PURE__ */ jsx(TimeField, {
-					fieldProps,
-					state,
-					isDisabled,
-					hidePlaceholder
-				})
-			})
-		] }), /* @__PURE__ */ jsxs("div", {
-			ref: trailingContentRef,
-			className: clsx("absolute top-1/2 flex -translate-y-1/2 items-center gap-2", inputSideCva({
-				size,
-				type: "right"
-			})),
-			children: [isClearable && canClear && /* @__PURE__ */ jsx(InputClear, { onClear: () => state.setValue(null) }), (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(InlineIconButton, {
-				label: "",
-				color: "secondary",
-				onPress,
-				icon: ClockIcon,
-				isDisabled
-			})]
-		})]
-	});
-};
-export { TimePickerInput };

package/dist/buttonContent.cva.js

@@ -1,10 +0,0 @@
-import { cva } from "class-variance-authority";
-const buttonContent = cva("flex w-full items-center justify-center", {
-	variants: { iconPosition: {
-		left: "flex-row",
-		right: "flex-row-reverse",
-		none: "flex-row"
-	} },
-	defaultVariants: { iconPosition: "left" }
-});
-export { buttonContent };

package/dist/i18n.js

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

package/dist/label.cva.js

@@ -1,92 +0,0 @@
-import { compoundMapper } from "./compoundMapper.js";
-import { cva } from "class-variance-authority";
-const labelBase = cva("", {
-	variants: { as: {
-		default: ["flex items-start gap-1 text-text-default-1"],
-		filter: ["absolute top-1/2 -translate-y-1/2 text-text-default-1"],
-		inline: ["flex items-start gap-1 text-text-default-1"],
-		floating: [
-			"pointer-events-none",
-			"absolute transition-all duration-75",
-			"top-1/2 -translate-y-1/2",
-			"text-text-default-3 group-has-[input:disabled]/input-content:text-interactive-text-secondary-disabled",
-			"group-disabled/date-picker-content:text-interactive-text-secondary-disabled",
-			"group-disabled/text-editor:text-interactive-text-secondary-disabled",
-			"group-has-[input:disabled]/select-content:text-interactive-text-secondary-disabled",
-			"group-has-[textarea:disabled]/text-area:text-interactive-text-secondary-disabled",
-			"group-data-[text-area]/text-area:top-floating-label-input-height-empty group-data-[text-area]/text-area:translate-y-0",
-			"group-data-[text-editor]/text-editor:top-floating-label-input-height-empty group-data-[text-editor]/text-editor:left-input-side-default group-data-[text-editor]/text-editor:translate-y-0",
-			"group-has-[input:not(:placeholder-shown)]/input-content:top-[calc(var(--spacing-floating-label-input-height-filled)+var(--spacing-floating-label-input-offset-top))] group-has-[input:not(:placeholder-shown)]/input-content:translate-y-0",
-			"group-has-[textarea:not(:placeholder-shown)]/text-area:hidden",
-			"group-has-[textarea:placeholder-shown]/text-area:text-text-default-3",
-			"group-has-[textarea:placeholder-shown]/text-area:font-medium!",
-			"group-data-[is-filled=true]/text-editor:hidden",
-			"group-has-[data-text-editor:placeholder-shown]/text-editor:text-text-default-3",
-			"group-has-[data-text-editor:placeholder-shown]/text-editor:font-medium!",
-			"group-data-[has-selection]/date-picker-content:top-1 group-data-[has-selection]/date-picker-content:translate-y-0",
-			"group-focus-within/date-picker-content:top-1 group-focus-within/date-picker-content:translate-y-0",
-			"group-data-[has-selection]/select-content:top-1 group-data-[has-selection]/select-content:translate-y-0",
-			"group-data-[searchable-focus-within]/select-content:top-1 group-data-[searchable-focus-within]/select-content:translate-y-0",
-			"group-data-[has-search]/select-content:top-1 group-data-[has-search]/select-content:translate-y-0",
-			"group-has-[input:placeholder-shown]/input-content:text-text-default-3",
-			"group-has-[input:placeholder-shown]/input-content:font-medium!",
-			"group-has-[input:not(:placeholder-shown)]/input-content:font-semibold!",
-			"group-has-[input:not(:placeholder-shown)]/input-content:text-label-3!",
-			"group-has-[input:not(:placeholder-shown)]/input-content:text-text-default-1",
-			"group-data-[has-selection]/date-picker-content:font-semibold!",
-			"group-data-[has-selection]/date-picker-content:text-label-3!",
-			"group-data-[has-selection]/date-picker-content:text-text-default-1",
-			"group-focus-within/date-picker-content:font-semibold!",
-			"group-focus-within/date-picker-content:text-label-3!",
-			"group-focus-within/date-picker-content:text-text-default-1",
-			"group-data-[has-selection]/select-content:font-semibold!",
-			"group-data-[has-selection]/select-content:text-label-3!",
-			"group-data-[has-selection]/select-content:text-text-default-1",
-			"group-data-[searchable-focus-within]/select-content:font-semibold!",
-			"group-data-[searchable-focus-within]/select-content:text-label-3!",
-			"group-data-[searchable-focus-within]/select-content:text-text-default-1",
-			"group-data-[has-search]/select-content:font-semibold!",
-			"group-data-[has-search]/select-content:text-label-3!",
-			"group-data-[has-search]/select-content:text-text-default-1"
-		]
-	} },
-	defaultVariants: { as: "default" }
-});
-const labelTypography = compoundMapper({
-	compoundVariants: [
-		{
-			as: "default",
-			value: {
-				size: "label-2",
-				variant: "prominent-1"
-			}
-		},
-		{
-			as: "filter",
-			value: {
-				size: "label-1",
-				variant: "default"
-			}
-		},
-		{
-			as: "inline",
-			value: {
-				size: "label-2",
-				variant: "prominent-1"
-			}
-		},
-		{
-			as: "floating",
-			value: {
-				size: "label-1",
-				variant: "default"
-			}
-		}
-	],
-	default: {
-		size: "label-2",
-		variant: "prominent-1"
-	},
-	defaultVariants: { as: "default" }
-});
-export { labelBase, labelTypography };

package/dist/react.js

@@ -1,6 +0,0 @@
-import { __reExport } from "./rolldown_runtime.js";
-export * from "framer-motion";
-var react_exports = {};
-import * as import_framer_motion from "framer-motion";
-__reExport(react_exports, import_framer_motion);
-export { react_exports };

package/dist/uiStyle.context.js

@@ -1,16 +0,0 @@
-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
-		});
-	};
-	_UIStyle.useConfig = () => {
-		return use(Context);
-	};
-})(UIStyle || (UIStyle = {}));
-export { UIStyle };