@povio/ui 2.1.14 → 2.1.15

package/README.md

@@ -0,0 +1,74 @@
+# @povio/ui
+
+UI Components that match Povio's Atlas Design System.
+
+## Installation
+
+`yarn add @povio/ui`
+
+## Versioning
+
+Major and minor version will correspond to the Atlas version (v2.1.0 corresponds Atlas 2.1) and patch versions are fixes/updates within that Atlas version.
+
+## Requirements
+
+### Tailwind 4
+
+`@povio/ui` is using Tailwind 4 for styling so your project should also use Tailwind version 4. This is especially noticable with modifier classes (important modifier or child selectors) which changed between version 3 and 4.
+
+Tailwind version 4 also defaults to `cursor: default` for buttons which differs from version 3. In order to alleviate that add the following snippet to your base styles:
+
+```css
+@layer base {
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    cursor: pointer;
+  }
+}
+```
+
+This is required for buttons to behave as expected. It is based on [Tailwind Upgrade Guide](https://tailwindcss.com/docs/upgrade-guide#buttons-use-the-default-cursor).
+
+### React Aria
+
+We are using `react-aria-components` for our UI components including their plugin for Tailwind that makes classes for modifiers a bit shorter. As such, make sure to install and setup [`tailwindcss-react-aria-components`](https://www.npmjs.com/package/tailwindcss-react-aria-components)
+
+### Translations
+
+We're using `i18next` for translations. Make sure the package versions match in your project. Out of sync major version might cause issues.
+
+#### Overriding translations
+
+To override the translations, add a partial `ui-translation.json` file for the locale (same structure as the translation.json in @povio/ui package) and merge it into the UI namespace.
+
+```json
+// src/config/locales/en/ui-translation.json
+{
+  "ui": {
+    "fileUpload": {
+      "emptyText": "Upload file"
+    }
+  }
+}
+```
+
+```ts
+// src/config/i18n.ts
+import { resources as uiDefaultResources, ns as uiNs } from "@povio/ui";
+import deepMerge from "deepmerge";
+
+import uiTranslationEN from "./locales/en/ui-translation.json";
+
+const uiResources = deepMerge(uiDefaultResources, { en: { [uiNs]: uiTranslationEN } });
+export const resources = deepMerge(defaultResources, uiResources);
+```
+
+### Misc
+
+We're using a helper class for flex, so make sure to add this into your base css as well:
+
+```css
+.flex-fill {
+  flex: 1 0 0;
+}
+```

package/dist/AclGuard.js

@@ -0,0 +1,12 @@
+import { UIRouter } from "./router.context.js";
+import { AbilityContext } from "./ability.context.js";
+const createAclGuard = () => ({ canUse, redirectTo = "/", children }) => {
+	const ability = AbilityContext.useAbility();
+	const { replace } = UIRouter.useUIRouter();
+	if (!ability.can(canUse[0], canUse[1])) {
+		replace(redirectTo);
+		return null;
+	}
+	return children;
+};
+export { createAclGuard };

package/dist/ActionModal.js

@@ -0,0 +1,51 @@
+import { Typography } from "./Typography.js";
+import { Button } from "./Button.js";
+import { Modal } from "./Modal.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+var textAlignClassMap = {
+	left: "text-left",
+	center: "text-center",
+	right: "text-right"
+};
+const ActionModal = ({ heading, description, primaryAction, secondaryAction, buttonSize = "m", textAlign = "left", modalClassName,...modalProps }) => {
+	const textAlignClass = textAlignClassMap[textAlign];
+	return /* @__PURE__ */ jsxs(Modal, {
+		modalClassName: clsx("w-modal", modalClassName),
+		...modalProps,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-modal-gap-text",
+			children: [/* @__PURE__ */ jsx(Typography, {
+				size: "title-5",
+				variant: "prominent-1",
+				as: "h2",
+				className: clsx("text-text-default-1", textAlignClass),
+				children: heading
+			}), /* @__PURE__ */ jsx(Typography, {
+				size: "body-3",
+				className: clsx("text-text-default-1", textAlignClass),
+				children: description
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex w-full flex-wrap gap-modal-gap-buttons pt-1",
+			children: [secondaryAction && /* @__PURE__ */ jsx(Button, {
+				variant: secondaryAction?.variant ?? "contained",
+				size: buttonSize,
+				color: secondaryAction?.color ?? "secondary",
+				width: "fill",
+				onPress: secondaryAction?.onPress,
+				className: clsx("min-w-40 flex-1 shrink-0", secondaryAction?.className),
+				children: secondaryAction?.label
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: primaryAction?.variant ?? "contained",
+				size: buttonSize,
+				color: primaryAction?.color ?? "primary",
+				width: "fill",
+				onPress: primaryAction.onPress,
+				className: clsx("min-w-40 flex-1 shrink-0", primaryAction?.className),
+				children: primaryAction.label
+			})]
+		})]
+	});
+};
+export { ActionModal };

package/dist/Alert.js

@@ -0,0 +1,46 @@
+import { Loader } from "./Loader.js";
+import { UIStyle } from "./uiStyle.context.js";
+import { Typography } from "./Typography.js";
+import { alert } from "./alert.cva.js";
+import { statusIcon, statusSeparator } from "./status.cva.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+const Alert = ({ variant, color, text, isLoading = false, rightContent, hasSeparator, icon: Icon, className }) => {
+	const uiStyle = UIStyle.useConfig();
+	const alertCva = uiStyle?.alert?.cva ?? alert;
+	const iconCva = uiStyle?.status?.iconCva ?? statusIcon;
+	const separatorCva = uiStyle?.status?.separatorCva ?? statusSeparator;
+	return /* @__PURE__ */ jsx("div", {
+		className: alertCva({
+			variant,
+			color,
+			className
+		}),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex w-auto flex-col items-center md:flex-row",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex w-full items-start gap-alert-gap-icon-to-text px-alert-side-default py-alert-height-content",
+				children: [
+					isLoading && /* @__PURE__ */ jsx(Loader, {
+						size: "default",
+						className: "shrink-0"
+					}),
+					!isLoading && Icon && /* @__PURE__ */ jsx(Icon, { className: iconCva({
+						variant,
+						color
+					}) }),
+					/* @__PURE__ */ jsx(Typography, {
+						size: "label-2",
+						children: text
+					})
+				]
+			}), !!rightContent && /* @__PURE__ */ jsxs(Fragment, { children: [hasSeparator && /* @__PURE__ */ jsx("div", { className: separatorCva({
+				variant,
+				color
+			}) }), /* @__PURE__ */ jsx("div", {
+				className: "flex w-full shrink-0 flex-wrap items-center justify-end gap-alert-gap-action px-alert-side-default py-alert-height-actions-mobile md:w-auto md:justify-center md:py-alert-height-actions-desktop",
+				children: rightContent
+			})] })]
+		})
+	});
+};
+export { Alert };

package/dist/AlignCenter.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+const AlignCenterIcon = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	fill: "none",
+	viewBox: "0 0 25 24",
+	className: "fill-current",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		fill: "currentColor",
+		d: "M4.586 20.5a.73.73 0 0 1-.534-.216.73.73 0 0 1-.216-.534q0-.32.216-.535A.73.73 0 0 1 4.586 19h15.5q.318 0 .534.216a.73.73 0 0 1 .216.534q0 .32-.216.535a.73.73 0 0 1-.534.215zm4-3.875a.73.73 0 0 1-.534-.216.73.73 0 0 1-.216-.534q0-.32.216-.534a.73.73 0 0 1 .534-.216h7.5q.318 0 .534.216a.73.73 0 0 1 .216.534q0 .32-.216.535a.73.73 0 0 1-.534.215zm-4-3.875a.73.73 0 0 1-.534-.216.73.73 0 0 1-.216-.534q0-.32.216-.534a.73.73 0 0 1 .534-.216h15.5q.318 0 .534.216a.73.73 0 0 1 .216.534q0 .32-.216.534a.73.73 0 0 1-.534.216zm4-3.875a.73.73 0 0 1-.534-.216.73.73 0 0 1-.216-.534q0-.32.216-.535a.73.73 0 0 1 .534-.215h7.5q.318 0 .534.216a.73.73 0 0 1 .216.534q0 .32-.216.534a.73.73 0 0 1-.534.216zM4.586 5a.73.73 0 0 1-.534-.216.73.73 0 0 1-.216-.534q0-.32.216-.534a.73.73 0 0 1 .534-.216h15.5q.318 0 .534.216a.73.73 0 0 1 .216.534q0 .32-.216.535a.73.73 0 0 1-.534.215z"
+	})
+});
+export { AlignCenterIcon };

package/dist/AlignLeft.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+const AlignLeftIcon = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	fill: "none",
+	viewBox: "0 0 25 24",
+	className: "fill-current",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		fill: "currentColor",
+		d: "M4.586 20.5a.73.73 0 0 1-.534-.216.73.73 0 0 1-.216-.534q0-.32.216-.535A.73.73 0 0 1 4.586 19h15.5q.318 0 .534.216a.73.73 0 0 1 .216.534q0 .32-.216.535a.73.73 0 0 1-.534.215zm0-3.875a.73.73 0 0 1-.534-.216.73.73 0 0 1-.216-.534q0-.32.216-.534a.73.73 0 0 1 .534-.216h9.5q.318 0 .534.216a.73.73 0 0 1 .216.534q0 .32-.216.535a.73.73 0 0 1-.534.215zm0-3.875a.73.73 0 0 1-.534-.216.73.73 0 0 1-.216-.534q0-.32.216-.534a.73.73 0 0 1 .534-.216h15.5q.318 0 .534.216a.73.73 0 0 1 .216.534q0 .32-.216.534a.73.73 0 0 1-.534.216zm0-3.875a.73.73 0 0 1-.534-.216.73.73 0 0 1-.216-.534q0-.32.216-.535a.73.73 0 0 1 .534-.215h9.5q.318 0 .534.216a.73.73 0 0 1 .216.534q0 .32-.216.534a.73.73 0 0 1-.534.216zm0-3.875a.73.73 0 0 1-.534-.216.73.73 0 0 1-.216-.534q0-.32.216-.534a.73.73 0 0 1 .534-.216h15.5q.318 0 .534.216a.73.73 0 0 1 .216.534q0 .32-.216.535a.73.73 0 0 1-.534.215z"
+	})
+});
+export { AlignLeftIcon };

package/dist/AlignLeftRight.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+const AlignLeftRightIcon = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	fill: "none",
+	viewBox: "0 0 25 24",
+	className: "fill-current",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		fill: "currentColor",
+		d: "M4.586 20.5a.73.73 0 0 1-.534-.216.73.73 0 0 1-.216-.534q0-.32.216-.535A.73.73 0 0 1 4.586 19h15.5q.318 0 .534.216a.73.73 0 0 1 .216.534q0 .32-.216.535a.73.73 0 0 1-.534.215zm0-3.875a.73.73 0 0 1-.534-.216.73.73 0 0 1-.216-.534q0-.32.216-.534a.73.73 0 0 1 .534-.216h15.5q.318 0 .534.216a.73.73 0 0 1 .216.534q0 .32-.216.535a.73.73 0 0 1-.534.215zm0-3.875a.73.73 0 0 1-.534-.216.73.73 0 0 1-.216-.534q0-.32.216-.534a.73.73 0 0 1 .534-.216h15.5q.318 0 .534.216a.73.73 0 0 1 .216.534q0 .32-.216.534a.73.73 0 0 1-.534.216zm0-3.875a.73.73 0 0 1-.534-.216.73.73 0 0 1-.216-.534q0-.32.216-.535a.73.73 0 0 1 .534-.215h15.5q.318 0 .534.216a.73.73 0 0 1 .216.534q0 .32-.216.534a.73.73 0 0 1-.534.216zm0-3.875a.73.73 0 0 1-.534-.216.73.73 0 0 1-.216-.534q0-.32.216-.534a.73.73 0 0 1 .534-.216h15.5q.318 0 .534.216a.73.73 0 0 1 .216.534q0 .32-.216.535a.73.73 0 0 1-.534.215z"
+	})
+});
+export { AlignLeftRightIcon };

package/dist/AlignRight.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+const AlignRightIcon = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	fill: "none",
+	viewBox: "0 0 25 24",
+	className: "fill-current",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		fill: "currentColor",
+		d: "M4.586 5a.73.73 0 0 1-.534-.216.73.73 0 0 1-.216-.534q0-.32.216-.534a.73.73 0 0 1 .534-.216h15.5q.318 0 .534.216a.73.73 0 0 1 .216.534q0 .32-.216.535a.73.73 0 0 1-.534.215zm6 3.875a.73.73 0 0 1-.534-.216.73.73 0 0 1-.216-.534q0-.32.216-.535a.73.73 0 0 1 .534-.215h9.5q.318 0 .534.216a.73.73 0 0 1 .216.534q0 .32-.216.534a.73.73 0 0 1-.534.216zm-6 3.875a.73.73 0 0 1-.534-.216.73.73 0 0 1-.216-.534q0-.32.216-.534a.73.73 0 0 1 .534-.216h15.5q.318 0 .534.216a.73.73 0 0 1 .216.534q0 .32-.216.534a.73.73 0 0 1-.534.216zm6 3.875a.73.73 0 0 1-.534-.216.73.73 0 0 1-.216-.534q0-.32.216-.534a.73.73 0 0 1 .534-.216h9.5q.318 0 .534.216a.73.73 0 0 1 .216.534q0 .32-.216.535a.73.73 0 0 1-.534.215zm-6 3.875a.73.73 0 0 1-.534-.216.73.73 0 0 1-.216-.534q0-.32.216-.535A.73.73 0 0 1 4.586 19h15.5q.318 0 .534.216a.73.73 0 0 1 .216.534q0 .32-.216.535a.73.73 0 0 1-.534.215z"
+	})
+});
+export { AlignRightIcon };

package/dist/ArrowDropDown.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+const ArrowDropDownIcon = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	fill: "none",
+	viewBox: "0 0 24 24",
+	className: "fill-current",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		fill: "currentColor",
+		d: "m12 15-5-5h10z"
+	})
+});
+export { ArrowDropDownIcon };

package/dist/ArrowDropUp.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+const ArrowDropUpIcon = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	fill: "none",
+	viewBox: "0 0 24 24",
+	className: "fill-current",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		fill: "currentColor",
+		d: "m7 14 5-5 5 5z"
+	})
+});
+export { ArrowDropUpIcon };

package/dist/ArrowLeft.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+const ArrowLeftIcon = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	fill: "none",
+	viewBox: "0 0 24 24",
+	className: "fill-current",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		fill: "currentColor",
+		d: "m14 17-5-5 5-5z"
+	})
+});
+export { ArrowLeftIcon };

package/dist/ArrowRight.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+const ArrowRightIcon = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	fill: "none",
+	viewBox: "0 0 24 24",
+	className: "fill-current",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		fill: "currentColor",
+		d: "M10 17V7l5 5z"
+	})
+});
+export { ArrowRightIcon };

package/dist/AuthGuard.js

@@ -0,0 +1,22 @@
+import { UIRouter } from "./router.context.js";
+import { AuthContext } from "./auth.context.js";
+import { useEffect, useState } from "react";
+const AuthGuard = ({ type, redirectTo, children }) => {
+	const { isAuthenticated, routes, loadingState } = AuthContext.useAuth();
+	const { replace } = UIRouter.useUIRouter();
+	const [hasMounted, setHasMounted] = useState(false);
+	useEffect(() => {
+		setHasMounted(true);
+	}, []);
+	if (!hasMounted) return loadingState;
+	if (type === "private" && !isAuthenticated) {
+		replace(redirectTo || routes?.unauthenticated || "/");
+		return null;
+	}
+	if (type === "public-only" && isAuthenticated) {
+		replace(redirectTo || routes?.authenticated || "/");
+		return null;
+	}
+	return children;
+};
+export { AuthGuard };

package/dist/Autocomplete.js

@@ -0,0 +1,28 @@
+import { SelectBase } from "./SelectBase.js";
+import { jsx } from "react/jsx-runtime";
+import { mergeRefs } from "@react-aria/utils";
+import { Controller } from "react-hook-form";
+const Autocomplete = (props) => {
+	if ("formControl" in props && props.formControl) {
+		const { formControl, ref,...innerProps } = props;
+		return /* @__PURE__ */ jsx(Controller, {
+			control: formControl.control,
+			name: formControl.name,
+			render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx(SelectBase, {
+				...innerProps,
+				ref: mergeRefs(ref, field.ref),
+				value: field.value,
+				onChange: field.onChange,
+				onBlur: field.onBlur,
+				isDisabled: field.disabled || props.isDisabled,
+				error: props.error ?? error?.message,
+				isSearchable: true
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx(SelectBase, {
+		...props,
+		isSearchable: true
+	});
+};
+export { Autocomplete };

package/dist/Bold.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+const BoldIcon = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	fill: "none",
+	viewBox: "0 0 25 24",
+	className: "fill-current",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		fill: "currentColor",
+		d: "M9.016 19q-.669 0-1.137-.468a1.55 1.55 0 0 1-.469-1.137V6.605q0-.667.469-1.137A1.55 1.55 0 0 1 9.016 5h3.531q1.615 0 2.921 1.006 1.305 1.005 1.305 2.708 0 1.185-.572 1.932-.571.746-1.232 1.084.813.28 1.553 1.108t.74 2.23q0 2.026-1.494 2.979-1.495.953-3.01.953zm.666-2.105h2.991q1.248 0 1.764-.693t.516-1.329-.516-1.329-1.813-.693H9.682zm0-6.084h2.741q.963 0 1.527-.55t.564-1.32q0-.816-.596-1.334-.597-.518-1.462-.518H9.682z"
+	})
+});
+export { BoldIcon };

package/dist/BottomSheet.js

@@ -0,0 +1,191 @@
+import { react_exports } from "./react.js";
+import { DomUtils } from "./dom.utils.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Dialog, DialogTrigger, Modal, ModalOverlay } from "react-aria-components";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useResizeObserver, useViewportSize } from "@react-aria/utils";
+var MotionModal = react_exports.motion.create(Modal);
+var MotionModalOverlay = react_exports.motion.create(ModalOverlay);
+var inertiaTransition = {
+	type: "inertia",
+	bounceStiffness: 300,
+	bounceDamping: 40,
+	timeConstant: 300
+};
+var staticTransition = {
+	duration: .5,
+	ease: [
+		.32,
+		.72,
+		0,
+		1
+	]
+};
+var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = false, isScrollable = true, height = "full", label, portalContainerRef, children, footer, sheetMarginTop = 96, sheetMarginBottom = 128 }) => {
+	const viewport = useViewportSize();
+	const { sheetHeight, windowHeight } = useMemo(() => {
+		return {
+			sheetHeight: viewport.height - sheetMarginTop,
+			windowHeight: Math.max(window.innerHeight, viewport.height) - sheetMarginTop
+		};
+	}, [viewport.height, sheetMarginTop]);
+	const y = (0, react_exports.useMotionValue)(sheetHeight);
+	const closeVelocityRef = useRef(true);
+	const overlayRef = useRef(null);
+	const containerRef = useRef(null);
+	const dialogRef = useRef(null);
+	const footerRef = useRef(null);
+	const focusTrapRef = useRef(null);
+	const [footerHeight, setFooterHeight] = useState(0);
+	useResizeObserver({
+		ref: footerRef,
+		onResize: () => {
+			setFooterHeight(footerRef.current?.offsetHeight || 0);
+		}
+	});
+	const oldHeightRef = useRef(0);
+	useResizeObserver({
+		ref: dialogRef,
+		onResize: () => {
+			const rect = dialogRef.current?.getBoundingClientRect();
+			if (!rect || oldHeightRef.current === rect.height) return;
+			oldHeightRef.current = rect.height;
+			if (rect.bottom < viewport.height) {
+				y.stop();
+				(0, react_exports.animate)(y, -(rect.height - viewport.height + sheetMarginTop));
+			}
+		}
+	});
+	return /* @__PURE__ */ jsx(react_exports.AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxs(MotionModalOverlay, {
+		isOpen: true,
+		UNSTABLE_portalContainer: portalContainerRef?.current,
+		className: "fixed top-0 left-0 z-10 w-screen",
+		onOpenChange,
+		isDismissable,
+		style: { height: viewport.height },
+		ref: overlayRef,
+		children: [/* @__PURE__ */ jsx(react_exports.motion.div, {
+			className: "pointer-events-none absolute inset-0 bg-support-overlay",
+			animate: { opacity: 1 },
+			initial: { opacity: 0 },
+			exit: { opacity: 0 }
+		}), /* @__PURE__ */ jsx(MotionModal, {
+			isDismissable: true,
+			className: clsx("pointer-events-none flex w-full flex-col items-stretch justify-end outline-none will-change-transform", isScrollable ? "h-auto" : "h-full"),
+			animate: {
+				y: 0,
+				opacity: 1
+			},
+			initial: {
+				y: windowHeight,
+				opacity: 1
+			},
+			exit: {
+				y: windowHeight,
+				opacity: 1
+			},
+			onAnimationComplete: (data) => {
+				onStateChange?.(data.y === 0 ? "opened" : "closed");
+			},
+			onAnimationStart: (data) => {
+				onStateChange?.(data.y === 0 ? "opening" : "closing");
+			},
+			transition: staticTransition,
+			style: {
+				y,
+				minHeight: "100%"
+			},
+			drag: "y",
+			dragElastic: 1,
+			dragConstraints: overlayRef,
+			onUpdate: (latest) => {
+				if (!latest || !footerRef.current) return;
+				footerRef.current?.style.setProperty("--scroll-position", `${(latest.y || 0).toFixed(0)}px`);
+			},
+			onDragStart: () => {
+				if (document.activeElement && DomUtils.isKeyboardInput(document.activeElement)) focusTrapRef.current?.focus();
+				y.animation?.stop();
+				closeVelocityRef.current = isScrollable ? y.get() >= -10 : true;
+				containerRef.current?.style.setProperty("pointer-events", "none");
+			},
+			onDragEnd: (e, { velocity }) => {
+				containerRef.current?.style.removeProperty("pointer-events");
+				if (y.get() > 0) if (closeVelocityRef.current && velocity.y > 10 || y.get() > 200) onOpenChange?.(false);
+				else (0, react_exports.animate)(y, 0, {
+					...inertiaTransition,
+					min: 0,
+					max: 0
+				});
+			},
+			children: /* @__PURE__ */ jsx(Dialog, {
+				className: "relative flex min-h-0 flex-1 flex-col items-stretch outline-none",
+				ref: dialogRef,
+				"aria-label": label,
+				children: ({ close }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsx("div", {
+						style: { minHeight: `${sheetMarginTop}px` },
+						className: clsx("shrink-0", height === "auto" && "grow")
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: clsx("pointer-events-auto relative flex min-h-0 flex-col items-stretch rounded-t-xl bg-elevation-fill-default-1", height === "full" && "flex-1"),
+						children: [
+							/* @__PURE__ */ jsx("div", {
+								className: clsx("absolute bottom-full left-0 w-full outline-none", isDismissable ? "h-0" : "h-screen"),
+								ref: focusTrapRef,
+								tabIndex: -1
+							}),
+							/* @__PURE__ */ jsx("div", {
+								className: clsx("flex min-h-0 grow flex-col items-stretch", isScrollable ? "shrink-0" : "shrink"),
+								ref: containerRef,
+								children: typeof children === "function" ? children(close) : children
+							}),
+							/* @__PURE__ */ jsx("div", {
+								className: "shrink-0",
+								style: { height: `${footerHeight + sheetMarginBottom}px` }
+							}),
+							/* @__PURE__ */ jsx("div", { className: "absolute top-full h-screen w-full bg-elevation-fill-default-1" })
+						]
+					}),
+					footer && /* @__PURE__ */ jsx(react_exports.motion.div, {
+						ref: footerRef,
+						className: clsx("pointer-events-auto absolute z-50 w-full bg-elevation-fill-default-2", "top-(--visual-viewport-height) left-0 translate-y-[calc(-100%-var(--scroll-position,0px))]"),
+						children: footer
+					})
+				] })
+			})
+		})]
+	}) });
+};
+const BottomSheet = ({ isOpen, portalContainerRef, onOpenChange, trigger, children,...rest }) => {
+	const [isSheetOpen, setIsSheetOpen] = useState(!!isOpen);
+	const hasTrigger = !!trigger;
+	useEffect(() => {
+		if (hasTrigger) setIsSheetOpen(!!isOpen);
+	}, [isOpen, hasTrigger]);
+	if (trigger) {
+		const handleOpenChange = (open) => {
+			setIsSheetOpen(open);
+			onOpenChange?.(open);
+		};
+		return /* @__PURE__ */ jsxs(DialogTrigger, {
+			isOpen: isSheetOpen,
+			onOpenChange: handleOpenChange,
+			children: [trigger, /* @__PURE__ */ jsx(BottomSheetBase, {
+				isOpen: isSheetOpen,
+				onOpenChange: handleOpenChange,
+				portalContainerRef,
+				...rest,
+				children
+			})]
+		});
+	}
+	return /* @__PURE__ */ jsx(BottomSheetBase, {
+		isOpen,
+		onOpenChange,
+		portalContainerRef,
+		...rest,
+		children
+	});
+};
+export { BottomSheet };

package/dist/BulletedList.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+const BulletedListIcon = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	fill: "none",
+	viewBox: "0 0 25 24",
+	className: "fill-current",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		fill: "currentColor",
+		d: "M10.394 18.75a.73.73 0 0 1-.535-.216.73.73 0 0 1-.215-.534q0-.32.215-.535a.73.73 0 0 1 .535-.215h9.692q.318 0 .534.216a.73.73 0 0 1 .216.534q0 .319-.216.534a.73.73 0 0 1-.534.216zm0-6a.73.73 0 0 1-.535-.216.73.73 0 0 1-.215-.534q0-.32.215-.535a.73.73 0 0 1 .535-.215h9.692q.318 0 .534.216a.73.73 0 0 1 .216.534q0 .319-.216.534a.73.73 0 0 1-.534.216zm0-6a.73.73 0 0 1-.535-.216A.73.73 0 0 1 9.644 6q0-.32.215-.535a.73.73 0 0 1 .535-.215h9.692q.318 0 .534.216a.73.73 0 0 1 .216.534q0 .319-.216.534a.73.73 0 0 1-.534.216zM5.499 19.663q-.686 0-1.174-.488A1.6 1.6 0 0 1 3.835 18q0-.687.49-1.175a1.6 1.6 0 0 1 1.174-.489q.687 0 1.175.49.489.487.489 1.174t-.489 1.175a1.6 1.6 0 0 1-1.175.488m0-6q-.686 0-1.174-.488A1.6 1.6 0 0 1 3.835 12q0-.687.49-1.175a1.6 1.6 0 0 1 1.174-.489q.687 0 1.175.49.489.487.489 1.174t-.489 1.175a1.6 1.6 0 0 1-1.175.488m0-6q-.686 0-1.174-.488A1.6 1.6 0 0 1 3.835 6q0-.687.49-1.175a1.6 1.6 0 0 1 1.174-.489q.687 0 1.175.49.489.487.489 1.174t-.489 1.175a1.6 1.6 0 0 1-1.175.488"
+	})
+});
+export { BulletedListIcon };

package/dist/Button.js

@@ -0,0 +1,54 @@
+import { UIStyle } from "./uiStyle.context.js";
+import { ButtonContent } from "./ButtonContent.js";
+import { TooltipEllipsis } from "./TooltipEllipsis.js";
+import { LinkContext } from "./link.context.js";
+import { button, buttonContent, buttonIconSize, buttonSize, buttonTypography } from "./button.cva.js";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Button, Link, ToggleButton } from "react-aria-components";
+const Button$1 = ({ icon: Icon, iconPosition, children, isLoading, className, link, iconClassName, noDisableWhenLoading, disableTooltip,...props }) => {
+	const linkContext = LinkContext.useLinkContext();
+	const uiStyle = UIStyle.useConfig();
+	const buttonCva = uiStyle?.button?.cva ?? button;
+	const buttonSizeCva = uiStyle?.button?.sizeCva ?? buttonSize;
+	const buttonContentCva = uiStyle?.button?.contentCva ?? buttonContent;
+	const buttonIconSizeCva = uiStyle?.button?.iconSize ?? buttonIconSize;
+	const typographyMap = uiStyle?.button?.typography ?? buttonTypography;
+	const Component = (() => {
+		if (link) return linkContext?.LinkComponent ?? Link;
+		if (props.toggle != null) return ToggleButton;
+		return Button;
+	})();
+	if (link && !link.to && link.href) link.to = link.href;
+	return /* @__PURE__ */ jsx(TooltipEllipsis, {
+		text: children,
+		isDisabled: disableTooltip,
+		children: (onContentRef) => /* @__PURE__ */ jsx(Component, {
+			...props,
+			...link,
+			isDisabled: props.isDisabled || isLoading && !noDisableWhenLoading,
+			className: clsx(buttonCva({
+				...props,
+				className
+			}), buttonSizeCva({ ...props })),
+			children: /* @__PURE__ */ jsx(ButtonContent, {
+				isLoading,
+				icon: Icon,
+				text: children,
+				ref: onContentRef,
+				hideText: props.iconOnly,
+				iconPosition,
+				iconClassName: buttonIconSizeCva({
+					...props,
+					className: iconClassName
+				}),
+				className: buttonContentCva({
+					...props,
+					iconPosition: !Icon ? "none" : iconPosition
+				}),
+				typography: typographyMap({ ...props })
+			})
+		})
+	});
+};
+export { Button$1 as Button };

package/dist/ButtonContent.js

@@ -0,0 +1,28 @@
+import { buttonContent } from "./buttonContent.cva.js";
+import { Loader } from "./Loader.js";
+import { Typography } from "./Typography.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { isValidElement } from "react";
+const ButtonContent = ({ ref, text, isLoading, className, icon: Icon, iconClassName, hideText, iconPosition, typography }) => {
+	let iconOrLoader = null;
+	if (isLoading) iconOrLoader = /* @__PURE__ */ jsx(Loader, { className: "shrink-0" });
+	else if (Icon) if (isValidElement(Icon)) iconOrLoader = Icon;
+	else iconOrLoader = /* @__PURE__ */ jsx(Icon, { className: clsx("shrink-0", iconClassName) });
+	return /* @__PURE__ */ jsxs("span", {
+		className: buttonContent({
+			iconPosition: iconOrLoader ? iconPosition : null,
+			className
+		}),
+		children: [iconOrLoader, /* @__PURE__ */ jsx(Typography, {
+			as: "span",
+			size: "label-2",
+			variant: "prominent-1",
+			...typography,
+			className: clsx("hyphens-auto md:truncate", hideText && "sr-only"),
+			ref,
+			children: text
+		})]
+	});
+};
+export { ButtonContent };