@korsolutions/ui 0.0.18 → 0.0.20

package/dist/{primitives-B4L9y32H.mjs → primitives-P_8clvQr.mjs}

@@ -1,5 +1,6 @@
-import React, { createContext, useContext, useEffect, useState, useSyncExternalStore } from "react";
-import { ActivityIndicator, Image, Pressable, StyleSheet, Text, TextInput, View } from "react-native";
+import * as React$1 from "react";
+import React, { createContext, forwardRef, useContext, useEffect, useImperativeHandle, useRef, useState, useSyncExternalStore } from "react";
+import { ActivityIndicator, Image, Pressable, StyleSheet, Text, TextInput, View, useWindowDimensions } from "react-native";
 import { Fragment, jsx } from "react/jsx-runtime";
 
 //#region src/primitives/portal/portal.tsx
@@ -122,14 +123,14 @@ const FieldPrimitive = {
 
 //#endregion
 //#region src/primitives/input/input.tsx
-const calculateState$3 = (props, isFocused) => {
+const calculateState$5 = (props, isFocused) => {
 	if (props.isDisabled) return "disabled";
 	if (isFocused) return "focused";
 	return "default";
 };
 function InputPrimitive(props) {
 	const [isFocused, setIsFocused] = useState(false);
-	const state = calculateState$3(props, isFocused);
+	const state = calculateState$5(props, isFocused);
 	const composedStyles = [
 		props.styles?.default?.style,
 		props.styles?.[state]?.style,
@@ -168,7 +169,7 @@ const useButtonPrimitive = () => {
 
 //#endregion
 //#region src/primitives/button/button-root.tsx
-const calculateState$2 = (props, isHovered) => {
+const calculateState$4 = (props, isHovered) => {
 	if (props.isDisabled) return "disabled";
 	if (props.isLoading) return "loading";
 	if (isHovered) return "hovered";
@@ -176,7 +177,7 @@ const calculateState$2 = (props, isHovered) => {
 };
 function ButtonRoot(props) {
 	const [isHovered, setIsHovered] = useState(false);
-	const state = calculateState$2(props, isHovered);
+	const state = calculateState$4(props, isHovered);
 	const calculatedStyle = [
 		props.styles?.root?.default,
 		props.styles?.root?.[state],
@@ -246,7 +247,7 @@ const useSelect = () => {
 
 //#endregion
 //#region src/primitives/select/select-root.tsx
-const calculateState$1 = (props) => {
+const calculateState$3 = (props) => {
 	if (props.isDisabled) return "disabled";
 	return "default";
 };
@@ -254,7 +255,7 @@ function SelectRoot(props) {
 	const [isOpen, setIsOpen] = useState(false);
 	const [triggerLayout, setTriggerLayout] = useState(null);
 	const [options, setOptions] = useState([]);
-	const state = calculateState$1(props);
+	const state = calculateState$3(props);
 	const composedStyles = calculateComposedStyles(props.styles, state, "root", props.style);
 	const Component = props.render ?? View;
 	return /* @__PURE__ */ jsx(SelectContext.Provider, {
@@ -370,7 +371,7 @@ function SelectContent(props) {
 
 //#endregion
 //#region src/primitives/select/select-option.tsx
-const calculateState = (selectState, hovered, selected) => {
+const calculateState$2 = (selectState, hovered, selected) => {
 	if (selectState === "disabled") return "disabled";
 	if (selected) return "selected";
 	if (hovered) return "hovered";
@@ -380,7 +381,7 @@ function SelectOption(props) {
 	const [isHovered, setIsHovered] = useState(false);
 	const select = useSelect();
 	const isSelected = select.value === props.value;
-	const optionState = calculateState(select.state, isHovered, isSelected);
+	const optionState = calculateState$2(select.state, isHovered, isSelected);
 	const composedStyles = calculateComposedStyles(select.styles, optionState, "option", props.style);
 	useEffect(() => {
 		select.setOptions((prev) => {
@@ -661,4 +662,505 @@ const ToastPrimitive = {
 };
 
 //#endregion
-export { SelectPrimitive as a, FieldPrimitive as c, CardPrimitive as i, PortalHost as l, AvatarPrimitive as n, ButtonPrimitive as o, EmptyPrimitive as r, InputPrimitive as s, ToastPrimitive as t };
+//#region src/primitives/badge/context.ts
+const BadgeContext = createContext(void 0);
+const useBadge = () => {
+	const context = useContext(BadgeContext);
+	if (!context) throw new Error("useBadge must be used within a BadgeProvider");
+	return context;
+};
+
+//#endregion
+//#region src/primitives/badge/badge-root.tsx
+function BadgeRoot(props) {
+	const composedStyle = calculateComposedStyles(props.styles, "default", "root", props.style);
+	const Component = props.render ?? View;
+	return /* @__PURE__ */ jsx(BadgeContext.Provider, {
+		value: {
+			state: "default",
+			styles: props.styles
+		},
+		children: /* @__PURE__ */ jsx(Component, {
+			...props,
+			style: composedStyle
+		})
+	});
+}
+
+//#endregion
+//#region src/primitives/badge/badge-label.tsx
+function BadgeLabel(props) {
+	const badge = useBadge();
+	const composedStyle = calculateComposedStyles(badge.styles, badge.state, "label", props.style);
+	return /* @__PURE__ */ jsx(props.render ?? Text, {
+		...props,
+		style: composedStyle
+	});
+}
+
+//#endregion
+//#region src/primitives/badge/index.ts
+const BadgePrimitive = {
+	Root: BadgeRoot,
+	Label: BadgeLabel
+};
+
+//#endregion
+//#region src/primitives/textarea/textarea.tsx
+const calculateState$1 = (props, isFocused) => {
+	if (props.isDisabled) return "disabled";
+	if (isFocused) return "focused";
+	return "default";
+};
+function TextareaPrimitive(props) {
+	const [isFocused, setIsFocused] = useState(false);
+	const state = calculateState$1(props, isFocused);
+	const composedStyles = [
+		props.styles?.default?.style,
+		props.styles?.[state]?.style,
+		props.style
+	];
+	const composedProps = {
+		...props.styles?.default,
+		...props.styles?.[state],
+		...props
+	};
+	return /* @__PURE__ */ jsx(props.render ?? TextInput, {
+		...composedProps,
+		multiline: true,
+		onChange: void 0,
+		onChangeText: props.onChange,
+		onFocus: (e) => {
+			setIsFocused(true);
+			props.onFocus?.(e);
+		},
+		onBlur: (e) => {
+			setIsFocused(false);
+			props.onBlur?.(e);
+		},
+		readOnly: props.isDisabled || props.readOnly,
+		style: composedStyles
+	});
+}
+
+//#endregion
+//#region src/primitives/dropdown-menu/context.ts
+const DropdownMenuContext = createContext(void 0);
+const useDropdownMenu = () => {
+	const context = useContext(DropdownMenuContext);
+	if (!context) throw new Error("useDropdownMenu must be used within a DropdownMenuRoot");
+	return context;
+};
+
+//#endregion
+//#region src/hooks/useRelativePosition.ts
+function useRelativePosition({ align, avoidCollisions, triggerPosition, contentLayout, alignOffset, insets, sideOffset, side }) {
+	const dimensions = useWindowDimensions();
+	return React$1.useMemo(() => {
+		if (!triggerPosition || !contentLayout) return {
+			position: "absolute",
+			opacity: 0,
+			top: dimensions.height,
+			zIndex: -9999999
+		};
+		return getContentStyle({
+			align,
+			avoidCollisions,
+			contentLayout,
+			side,
+			triggerPosition,
+			alignOffset,
+			insets,
+			sideOffset,
+			dimensions
+		});
+	}, [
+		align,
+		avoidCollisions,
+		side,
+		alignOffset,
+		insets,
+		triggerPosition,
+		contentLayout,
+		dimensions.width,
+		dimensions.height
+	]);
+}
+const DEFAULT_LAYOUT = {
+	x: 0,
+	y: 0,
+	width: 0,
+	height: 0
+};
+const DEFAULT_POSITION = {
+	height: 0,
+	width: 0,
+	pageX: 0,
+	pageY: 0
+};
+function getSidePosition({ side, triggerPosition, contentLayout, sideOffset, insets, avoidCollisions, dimensions }) {
+	const insetTop = insets?.top ?? 0;
+	const insetBottom = insets?.bottom ?? 0;
+	const positionTop = triggerPosition?.pageY - sideOffset - contentLayout.height;
+	const positionBottom = triggerPosition.pageY + triggerPosition.height + sideOffset;
+	if (!avoidCollisions) return { top: side === "top" ? positionTop : positionBottom };
+	if (side === "top") return { top: Math.min(Math.max(insetTop, positionTop), dimensions.height - insetBottom - contentLayout.height) };
+	return { top: Math.min(dimensions.height - insetBottom - contentLayout.height, positionBottom) };
+}
+function getAlignPosition({ align, avoidCollisions, contentLayout, triggerPosition, alignOffset, insets, dimensions }) {
+	const insetLeft = insets?.left ?? 0;
+	const insetRight = insets?.right ?? 0;
+	const maxContentWidth = dimensions.width - insetLeft - insetRight;
+	const contentWidth = Math.min(contentLayout.width, maxContentWidth);
+	let left = getLeftPosition(align, triggerPosition.pageX, triggerPosition.width, contentWidth, alignOffset, insetLeft, insetRight, dimensions);
+	if (avoidCollisions) {
+		if (left < insetLeft || left + contentWidth > dimensions.width - insetRight) {
+			const spaceLeft = left - insetLeft;
+			const spaceRight = dimensions.width - insetRight - (left + contentWidth);
+			if (spaceLeft > spaceRight && spaceLeft >= contentWidth) left = insetLeft;
+			else if (spaceRight >= contentWidth) left = dimensions.width - insetRight - contentWidth;
+			else left = Math.max(insetLeft, (dimensions.width - contentWidth - insetRight) / 2);
+		}
+	}
+	return {
+		left,
+		maxWidth: maxContentWidth
+	};
+}
+function getLeftPosition(align, triggerPageX, triggerWidth, contentWidth, alignOffset, insetLeft, insetRight, dimensions) {
+	let left = 0;
+	if (align === "start") left = triggerPageX;
+	if (align === "center") left = triggerPageX + triggerWidth / 2 - contentWidth / 2;
+	if (align === "end") left = triggerPageX + triggerWidth - contentWidth;
+	return Math.max(insetLeft, Math.min(left + alignOffset, dimensions.width - contentWidth - insetRight));
+}
+function getContentStyle({ align, avoidCollisions, contentLayout, side, triggerPosition, alignOffset, insets, sideOffset, dimensions }) {
+	return Object.assign({ position: "absolute" }, getSidePosition({
+		side,
+		triggerPosition,
+		contentLayout,
+		sideOffset,
+		insets,
+		avoidCollisions,
+		dimensions
+	}), getAlignPosition({
+		align,
+		avoidCollisions,
+		triggerPosition,
+		contentLayout,
+		alignOffset,
+		insets,
+		dimensions
+	}));
+}
+
+//#endregion
+//#region src/primitives/dropdown-menu/dropdown-menu-root.tsx
+function DropdownMenuRoot(props) {
+	const [isOpen, setIsOpen] = useState(false);
+	const [triggerPosition, setTriggerPosition] = useState(DEFAULT_POSITION);
+	const [contentLayout, setContentLayout] = useState(DEFAULT_LAYOUT);
+	return /* @__PURE__ */ jsx(DropdownMenuContext.Provider, {
+		value: {
+			isOpen,
+			setIsOpen,
+			triggerPosition,
+			setTriggerPosition,
+			contentLayout,
+			setContentLayout,
+			styles: props.styles
+		},
+		children: props.children
+	});
+}
+
+//#endregion
+//#region src/primitives/dropdown-menu/dropdown-menu-trigger.tsx
+const DropdownMenuTrigger = forwardRef((props, ref) => {
+	const dropdownMenu = useDropdownMenu();
+	const triggerRef = useRef(null);
+	const onTriggerPress = async () => {
+		triggerRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
+			dropdownMenu.setTriggerPosition({
+				height,
+				width,
+				pageX,
+				pageY
+			});
+		});
+		dropdownMenu.setIsOpen((prev) => !prev);
+	};
+	useImperativeHandle(ref, () => ({
+		open: () => dropdownMenu.setIsOpen(true),
+		close: () => dropdownMenu.setIsOpen(false)
+	}));
+	return React.cloneElement(props.children, {
+		ref: triggerRef,
+		onPress: onTriggerPress,
+		role: "button",
+		accessible: true,
+		accessibilityRole: "button",
+		accessibilityState: { expanded: dropdownMenu.isOpen },
+		...props.children.props
+	});
+});
+DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
+
+//#endregion
+//#region src/primitives/dropdown-menu/dropdown-menu-content.tsx
+function DropdownMenuContent(props) {
+	const menu = useDropdownMenu();
+	const composedStyle = [
+		useRelativePosition({
+			align: "start",
+			avoidCollisions: true,
+			triggerPosition: menu.triggerPosition,
+			contentLayout: menu.contentLayout,
+			alignOffset: 0,
+			side: "bottom",
+			sideOffset: 0
+		}),
+		menu.styles?.content,
+		props.style
+	];
+	return /* @__PURE__ */ jsx(props.render ?? View, {
+		...props,
+		onLayout: (e) => {
+			menu.setContentLayout(e.nativeEvent.layout);
+		},
+		style: composedStyle
+	});
+}
+
+//#endregion
+//#region src/primitives/dropdown-menu/dropdown-menu-button.tsx
+const calculateState = (isHovered) => {
+	if (isHovered) return "hovered";
+	return "default";
+};
+function DropdownMenuButton(props) {
+	const menu = useDropdownMenu();
+	const [isHovered, setIsHovered] = useState(false);
+	const state = calculateState(isHovered);
+	const composedStyle = [
+		menu.styles?.button?.default,
+		menu.styles?.button?.[state],
+		props.style
+	];
+	const handlePress = () => {
+		props.onPress?.();
+		menu.setIsOpen((prev) => !prev);
+	};
+	return /* @__PURE__ */ jsx(props.render ?? Text, {
+		...props,
+		onPress: handlePress,
+		onMouseEnter: () => setIsHovered(true),
+		onMouseLeave: () => setIsHovered(false),
+		style: composedStyle,
+		children: props.children
+	});
+}
+
+//#endregion
+//#region src/primitives/dropdown-menu/dropdown-menu-divider.tsx
+function DropdownMenuDivider(props) {
+	const composedStyle = [useDropdownMenu().styles?.divider, props.style];
+	return /* @__PURE__ */ jsx(props.render ?? View, {
+		...props,
+		style: composedStyle
+	});
+}
+
+//#endregion
+//#region src/primitives/dropdown-menu/dropdown-menu-portal.tsx
+function DropdownMenuPortal(props) {
+	const menu = useDropdownMenu();
+	if (!menu.isOpen) return null;
+	return /* @__PURE__ */ jsx(Portal, {
+		name: "dropdown-menu-portal",
+		children: /* @__PURE__ */ jsx(DropdownMenuContext.Provider, {
+			value: menu,
+			children: props.children
+		})
+	});
+}
+
+//#endregion
+//#region src/primitives/dropdown-menu/dropdown-menu-overlay.tsx
+function DropdownMenuOverlay(props) {
+	const menu = useDropdownMenu();
+	const composedStyle = [
+		StyleSheet.absoluteFill,
+		menu.styles?.overlay,
+		props.style
+	];
+	return /* @__PURE__ */ jsx(props.render ?? Pressable, {
+		onPress: () => {
+			menu.setIsOpen(false);
+		},
+		style: composedStyle,
+		children: props.children
+	});
+}
+
+//#endregion
+//#region src/primitives/dropdown-menu/index.ts
+const DropdownMenuPrimitive = {
+	Root: DropdownMenuRoot,
+	Trigger: DropdownMenuTrigger,
+	Portal: DropdownMenuPortal,
+	Overlay: DropdownMenuOverlay,
+	Content: DropdownMenuContent,
+	Button: DropdownMenuButton,
+	Divider: DropdownMenuDivider
+};
+
+//#endregion
+//#region src/primitives/popover/context.ts
+const PopoverContext = createContext(void 0);
+const usePopover = () => {
+	const context = useContext(PopoverContext);
+	if (!context) throw new Error("usePopover must be used within a PopoverRoot");
+	return context;
+};
+
+//#endregion
+//#region src/primitives/popover/popover-root.tsx
+function PopoverRoot(props) {
+	const [isOpen, setIsOpen] = useState(false);
+	const [contentLayout, setContentLayout] = useState(DEFAULT_LAYOUT);
+	const [triggerPosition, setTriggerPosition] = useState(DEFAULT_POSITION);
+	return /* @__PURE__ */ jsx(PopoverContext.Provider, {
+		value: {
+			isOpen,
+			setIsOpen,
+			contentLayout,
+			setContentLayout,
+			triggerPosition,
+			setTriggerPosition,
+			styles: props.styles
+		},
+		children: props.children
+	});
+}
+
+//#endregion
+//#region src/primitives/popover/popover-trigger.tsx
+const PopoverTrigger = forwardRef((props, ref) => {
+	const popover = usePopover();
+	const triggerRef = useRef(null);
+	const onTriggerPress = async () => {
+		triggerRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
+			popover.setTriggerPosition({
+				height,
+				width,
+				pageX,
+				pageY
+			});
+		});
+		popover.setIsOpen((prev) => !prev);
+	};
+	useImperativeHandle(ref, () => ({
+		open: () => popover.setIsOpen(true),
+		close: () => popover.setIsOpen(false)
+	}));
+	return React.cloneElement(props.children, {
+		ref: triggerRef,
+		onPress: onTriggerPress,
+		role: "button",
+		accessible: true,
+		accessibilityRole: "button",
+		accessibilityState: { expanded: popover.isOpen },
+		...props.children.props
+	});
+});
+PopoverTrigger.displayName = "PopoverTrigger";
+
+//#endregion
+//#region src/primitives/popover/popover-portal.tsx
+function PopoverPortal(props) {
+	const popover = usePopover();
+	if (!popover.isOpen) return null;
+	return /* @__PURE__ */ jsx(Portal, {
+		name: "popover-portal",
+		children: /* @__PURE__ */ jsx(PopoverContext.Provider, {
+			value: popover,
+			children: props.children
+		})
+	});
+}
+
+//#endregion
+//#region src/primitives/popover/popover-overlay.tsx
+function PopoverOverlay(props) {
+	const { closeOnPress = true, ...restProps } = props;
+	const popover = usePopover();
+	const composedStyle = [
+		StyleSheet.absoluteFill,
+		popover.styles?.overlay,
+		props.style
+	];
+	return /* @__PURE__ */ jsx(props.render ?? Pressable, {
+		...restProps,
+		onPress: () => {
+			if (closeOnPress) popover.setIsOpen(false);
+			props.onPress?.();
+		},
+		style: composedStyle,
+		children: props.children
+	});
+}
+
+//#endregion
+//#region src/primitives/popover/popover-content.tsx
+function PopoverContent(props) {
+	const popover = usePopover();
+	const composedStyle = [
+		useRelativePosition({
+			align: "start",
+			avoidCollisions: true,
+			triggerPosition: popover.triggerPosition,
+			contentLayout: popover.contentLayout,
+			alignOffset: 0,
+			side: "bottom",
+			sideOffset: 0
+		}),
+		popover.styles?.content,
+		props.style
+	];
+	return /* @__PURE__ */ jsx(props.render ?? View, {
+		...props,
+		onLayout: (e) => {
+			popover.setContentLayout(e.nativeEvent.layout);
+		},
+		style: composedStyle
+	});
+}
+
+//#endregion
+//#region src/primitives/popover/popover-close.tsx
+function PopoverClose(props) {
+	const popover = usePopover();
+	return /* @__PURE__ */ jsx(props.render ?? Pressable, {
+		...props,
+		onPress: () => {
+			popover.setIsOpen(false);
+			props.onPress?.();
+		},
+		style: props.style
+	});
+}
+
+//#endregion
+//#region src/primitives/popover/index.ts
+const PopoverPrimitive = {
+	Root: PopoverRoot,
+	Trigger: PopoverTrigger,
+	Portal: PopoverPortal,
+	Overlay: PopoverOverlay,
+	Content: PopoverContent,
+	Close: PopoverClose
+};
+
+//#endregion
+export { BadgePrimitive as a, EmptyPrimitive as c, ButtonPrimitive as d, InputPrimitive as f, TextareaPrimitive as i, CardPrimitive as l, PortalHost as m, usePopover as n, ToastPrimitive as o, FieldPrimitive as p, DropdownMenuPrimitive as r, AvatarPrimitive as s, PopoverPrimitive as t, SelectPrimitive as u };

package/dist/{toast-manager-Vq38WK76.mjs → toast-manager-DSo9oN8w.mjs}

@@ -1,4 +1,4 @@
-import { t as ToastPrimitive } from "./primitives-B4L9y32H.mjs";
+import { o as ToastPrimitive } from "./primitives-P_8clvQr.mjs";
 import React, { createContext, useContext, useEffect, useState, useSyncExternalStore } from "react";
 import { StyleSheet, View, useColorScheme } from "react-native";
 import { jsx, jsxs } from "react/jsx-runtime";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@korsolutions/ui",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "license": "MIT",
   "main": "dist/index.mjs",
   "module": "dist/index.mjs",

package/src/components/badge/badge.tsx

@@ -0,0 +1,23 @@
+import { BadgePrimitive } from "@/primitives";
+import React from "react";
+import { BadgeVariants } from "./variants";
+
+interface BadgeProps {
+  children: string;
+  variant?: keyof typeof BadgeVariants;
+  color?: string;
+}
+
+export function Badge(props: BadgeProps) {
+  const useVariantStyles = BadgeVariants[props.variant || "default"];
+  const styles = useVariantStyles();
+
+  // Override background color if custom color is provided
+  const customStyle = props.color ? { backgroundColor: props.color } : undefined;
+
+  return (
+    <BadgePrimitive.Root styles={styles} style={customStyle}>
+      <BadgePrimitive.Label>{props.children}</BadgePrimitive.Label>
+    </BadgePrimitive.Root>
+  );
+}

package/src/components/badge/variants/default.tsx

@@ -0,0 +1,26 @@
+import { BadgeStyles } from "@/primitives";
+import { useThemedStyles } from "@/utils/use-themed-styles";
+
+export const useBadgeVariantDefault = (): BadgeStyles => {
+  return useThemedStyles(
+    ({ colors, radius, fontFamily, fontSize }): BadgeStyles => ({
+      root: {
+        default: {
+          backgroundColor: colors.primary,
+          paddingVertical: 4,
+          paddingHorizontal: 8,
+          borderRadius: radius,
+          alignSelf: "flex-start",
+        },
+      },
+      label: {
+        default: {
+          color: colors.primaryForeground,
+          fontSize: fontSize * 0.75,
+          fontWeight: "600",
+          fontFamily,
+        },
+      },
+    })
+  );
+};

package/src/components/badge/variants/index.ts

@@ -0,0 +1,7 @@
+import { useBadgeVariantDefault } from "./default";
+import { useBadgeVariantSecondary } from "./secondary";
+
+export const BadgeVariants = {
+  default: useBadgeVariantDefault,
+  secondary: useBadgeVariantSecondary,
+};

package/src/components/badge/variants/secondary.tsx

@@ -0,0 +1,26 @@
+import { BadgeStyles } from "@/primitives";
+import { useThemedStyles } from "@/utils/use-themed-styles";
+
+export const useBadgeVariantSecondary = (): BadgeStyles => {
+  return useThemedStyles(
+    ({ colors, radius, fontFamily, fontSize }): BadgeStyles => ({
+      root: {
+        default: {
+          backgroundColor: colors.secondary,
+          paddingVertical: 4,
+          paddingHorizontal: 8,
+          borderRadius: radius,
+          alignSelf: "flex-start",
+        },
+      },
+      label: {
+        default: {
+          color: colors.secondaryForeground,
+          fontSize: fontSize * 0.75,
+          fontWeight: "600",
+          fontFamily,
+        },
+      },
+    })
+  );
+};