@korsolutions/ui 0.0.16 → 0.0.18

package/dist/components/index.d.mts

@@ -1,4 +1,4 @@
-import { B as FieldStyles, C as SelectStyles, F as InputPrimitiveBaseProps, L as InputStyles, M as ButtonStyles, c as EmptyStyles, m as CardStyles, r as AvatarStyles, x as SelectRootBaseProps } from "../index-Dyo-iQyH.mjs";
+import { B as InputPrimitiveBaseProps, E as SelectRootBaseProps, G as FieldStyles, H as InputStyles, L as ButtonStyles, O as SelectStyles, c as AvatarStyles, p as EmptyStyles, r as ToastStyles, y as CardStyles } from "../index-Bfae0NgJ.mjs";
 import React from "react";
 import { ImageSource, TextProps, TextStyle } from "react-native";
 
@@ -166,4 +166,34 @@ interface AvatarProps {
 }
 declare function Avatar(props: AvatarProps): React.JSX.Element;
 //#endregion
-export { Avatar, AvatarProps, Button, Card, Empty, EmptyProps, Field, FieldProps, Input, Link, LinkProps, Select, SelectOption, SelectProps, Typography, TypographyProps };
+//#region src/components/toast/variants/index.d.ts
+declare const ToastVariants: {
+  default: () => ToastStyles;
+  success: () => ToastStyles;
+  danger: () => ToastStyles;
+};
+//#endregion
+//#region src/components/toast/toast-manager.d.ts
+interface ToastConfig {
+  id: string;
+  title: string;
+  description?: string;
+  variant?: keyof typeof ToastVariants;
+  duration?: number;
+}
+//#endregion
+//#region src/components/toast/toast.d.ts
+interface ToastProps {
+  title: string;
+  description?: string;
+  variant?: keyof typeof ToastVariants;
+}
+declare function ToastComponent(props: ToastProps): React.JSX.Element;
+//#endregion
+//#region src/components/toast/index.d.ts
+declare const Toast: typeof ToastComponent & {
+  show: (config: ToastConfig) => string;
+  dismiss: (id: string) => void;
+};
+//#endregion
+export { Avatar, AvatarProps, Button, Card, Empty, EmptyProps, Field, FieldProps, Input, Link, LinkProps, Select, SelectOption, SelectProps, Toast, Typography, TypographyProps };

package/dist/components/index.mjs

@@ -1,6 +1,5 @@
-import { n as useTheme } from "../themes-pgmHo7MU.mjs";
-import "../portal-jF1KeGnu.mjs";
-import { a as ButtonPrimitive, i as SelectPrimitive, n as EmptyPrimitive, o as InputPrimitive, r as CardPrimitive, s as FieldPrimitive, t as AvatarPrimitive } from "../primitives-BKUnaQrI.mjs";
+import { i as useThemedStyles, r as ToastComponent, t as ToastAPI } from "../toast-manager-Vq38WK76.mjs";
+import { a as SelectPrimitive, c as FieldPrimitive, i as CardPrimitive, n as AvatarPrimitive, o as ButtonPrimitive, r as EmptyPrimitive, s as InputPrimitive } from "../primitives-B4L9y32H.mjs";
 import React, { useState } from "react";
 import { Linking, Text } from "react-native";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -23,19 +22,6 @@ const hslaSetRelativeLightness = (hsla, delta) => {
 	return hslaSetLightness(hsla, newLightness);
 };
 
-//#endregion
-//#region src/utils/use-themed-styles.ts
-const useThemedStyles = (callback) => {
-	const theme = useTheme();
-	return callback({
-		colors: theme.colors,
-		radius: theme.radius,
-		fontFamily: theme.fontFamily,
-		letterSpacing: theme.letterSpacing,
-		fontSize: theme.fontSize
-	});
-};
-
 //#endregion
 //#region src/components/button/variants/default.tsx
 const useButtonVariantDefault = () => {
@@ -581,4 +567,11 @@ function Avatar(props) {
 }
 
 //#endregion
-export { Avatar, Button, Card, Empty, Field, Input, Link, Select, Typography };
+//#region src/components/toast/index.ts
+const Toast = Object.assign(ToastComponent, {
+	show: ToastAPI.show,
+	dismiss: ToastAPI.dismiss
+});
+
+//#endregion
+export { Avatar, Button, Card, Empty, Field, Input, Link, Select, Toast, Typography };

package/dist/{index-Dyo-iQyH.d.mts → index-Bfae0NgJ.d.mts}

@@ -351,4 +351,43 @@ declare const AvatarPrimitive: {
   Fallback: typeof AvatarFallback;
 };
 //#endregion
-export { ButtonPrimitiveRootProps as A, FieldStyles as B, SelectStyles as C, SelectValueProps as D, SelectOverlayProps as E, InputPrimitiveBaseProps as F, FieldDescriptionProps as H, InputPrimitiveProps as I, InputStyles as L, ButtonStyles as M, ButtonPrimitiveLabelProps as N, SelectTriggerProps as O, InputPrimitive as P, FieldPrimitive as R, SelectRootProps as S, SelectContentProps as T, FieldLabelProps as U, FieldErrorProps as V, CardTitleProps as _, AvatarFallbackProps as a, SelectPortalProps as b, EmptyStyles as c, EmptyDescriptionProps as d, CardPrimitive as f, CardBodyProps as g, CardFooterProps as h, AvatarImageProps as i, ButtonState as j, ButtonPrimitive as k, EmptyTitleProps as l, CardStyles as m, AvatarRootProps as n, EmptyPrimitive as o, CardRootProps as p, AvatarStyles as r, EmptyRootProps as s, AvatarPrimitive as t, EmptyMediaProps as u, CardHeaderProps as v, SelectOptionProps as w, SelectRootBaseProps as x, SelectPrimitive as y, FieldPrimitiveRootProps as z };
+//#region src/primitives/toast/toast-title.d.ts
+interface ToastTitleProps {
+  children?: string;
+  render?: (props: ToastTitleProps) => React$1.ReactNode;
+  style?: StyleProp<TextStyle>;
+}
+declare function ToastTitle(props: ToastTitleProps): React$1.JSX.Element;
+//#endregion
+//#region src/primitives/toast/toast-description.d.ts
+interface ToastDescriptionProps {
+  children?: string;
+  render?: (props: ToastDescriptionProps) => React$1.ReactNode;
+  style?: StyleProp<TextStyle>;
+}
+declare function ToastDescription(props: ToastDescriptionProps): React$1.JSX.Element;
+//#endregion
+//#region src/primitives/toast/types.d.ts
+interface ToastStyles {
+  root?: ToastRootProps["style"];
+  title?: ToastTitleProps["style"];
+  description?: ToastDescriptionProps["style"];
+}
+//#endregion
+//#region src/primitives/toast/toast-root.d.ts
+interface ToastRootProps {
+  children?: React$1.ReactNode;
+  render?: (props: ToastRootProps) => React$1.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  styles?: ToastStyles;
+}
+declare function ToastRoot(props: ToastRootProps): React$1.JSX.Element;
+//#endregion
+//#region src/primitives/toast/index.d.ts
+declare const ToastPrimitive: {
+  Root: typeof ToastRoot;
+  Title: typeof ToastTitle;
+  Description: typeof ToastDescription;
+};
+//#endregion
+export { SelectContentProps as A, InputPrimitiveBaseProps as B, CardHeaderProps as C, SelectRootProps as D, SelectRootBaseProps as E, ButtonPrimitiveRootProps as F, FieldStyles as G, InputStyles as H, ButtonState as I, FieldLabelProps as J, FieldErrorProps as K, ButtonStyles as L, SelectValueProps as M, SelectTriggerProps as N, SelectStyles as O, ButtonPrimitive as P, ButtonPrimitiveLabelProps as R, CardTitleProps as S, SelectPortalProps as T, FieldPrimitive as U, InputPrimitiveProps as V, FieldPrimitiveRootProps as W, CardPrimitive as _, ToastTitleProps as a, CardFooterProps as b, AvatarStyles as c, EmptyPrimitive as d, EmptyRootProps as f, EmptyDescriptionProps as g, EmptyMediaProps as h, ToastDescriptionProps as i, SelectOverlayProps as j, SelectOptionProps as k, AvatarImageProps as l, EmptyTitleProps as m, ToastRootProps as n, AvatarPrimitive as o, EmptyStyles as p, FieldDescriptionProps as q, ToastStyles as r, AvatarRootProps as s, ToastPrimitive as t, AvatarFallbackProps as u, CardRootProps as v, SelectPrimitive as w, CardBodyProps as x, CardStyles as y, InputPrimitive as z };

package/dist/index.mjs

@@ -1,10 +1,14 @@
-import { n as useTheme, t as ThemeProvider } from "./themes-pgmHo7MU.mjs";
-import { n as PortalHost } from "./portal-jF1KeGnu.mjs";
+import { a as ThemeProvider, n as ToastContainer, o as useTheme } from "./toast-manager-Vq38WK76.mjs";
+import { l as PortalHost } from "./primitives-B4L9y32H.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/index.tsx
 const UniversalUIProvider = ({ children }) => {
-	return /* @__PURE__ */ jsxs(ThemeProvider, { children: [children, /* @__PURE__ */ jsx(PortalHost, {})] });
+	return /* @__PURE__ */ jsxs(ThemeProvider, { children: [
+		children,
+		/* @__PURE__ */ jsx(PortalHost, {}),
+		/* @__PURE__ */ jsx(ToastContainer, {})
+	] });
 };
 
 //#endregion

package/dist/primitives/index.d.mts

@@ -1,2 +1,2 @@
-import { A as ButtonPrimitiveRootProps, B as FieldStyles, C as SelectStyles, D as SelectValueProps, E as SelectOverlayProps, F as InputPrimitiveBaseProps, H as FieldDescriptionProps, I as InputPrimitiveProps, L as InputStyles, M as ButtonStyles, N as ButtonPrimitiveLabelProps, O as SelectTriggerProps, P as InputPrimitive, R as FieldPrimitive, S as SelectRootProps, T as SelectContentProps, U as FieldLabelProps, V as FieldErrorProps, _ as CardTitleProps, a as AvatarFallbackProps, b as SelectPortalProps, c as EmptyStyles, d as EmptyDescriptionProps, f as CardPrimitive, g as CardBodyProps, h as CardFooterProps, i as AvatarImageProps, j as ButtonState, k as ButtonPrimitive, l as EmptyTitleProps, m as CardStyles, n as AvatarRootProps, o as EmptyPrimitive, p as CardRootProps, r as AvatarStyles, s as EmptyRootProps, t as AvatarPrimitive, u as EmptyMediaProps, v as CardHeaderProps, w as SelectOptionProps, x as SelectRootBaseProps, y as SelectPrimitive, z as FieldPrimitiveRootProps } from "../index-Dyo-iQyH.mjs";
-export { AvatarFallbackProps, AvatarImageProps, AvatarPrimitive, AvatarRootProps, AvatarStyles, ButtonPrimitive, ButtonPrimitiveLabelProps, ButtonPrimitiveRootProps, ButtonState, ButtonStyles, CardBodyProps, CardFooterProps, CardHeaderProps, CardPrimitive, CardRootProps, CardStyles, CardTitleProps, EmptyDescriptionProps, EmptyMediaProps, EmptyPrimitive, EmptyRootProps, EmptyStyles, EmptyTitleProps, FieldDescriptionProps, FieldErrorProps, FieldLabelProps, FieldPrimitive, FieldPrimitiveRootProps, FieldStyles, InputPrimitive, InputPrimitiveBaseProps, InputPrimitiveProps, InputStyles, SelectContentProps, SelectOptionProps, SelectOverlayProps, SelectPortalProps, SelectPrimitive, SelectRootBaseProps, SelectRootProps, SelectStyles, SelectTriggerProps, SelectValueProps };
+import { A as SelectContentProps, B as InputPrimitiveBaseProps, C as CardHeaderProps, D as SelectRootProps, E as SelectRootBaseProps, F as ButtonPrimitiveRootProps, G as FieldStyles, H as InputStyles, I as ButtonState, J as FieldLabelProps, K as FieldErrorProps, L as ButtonStyles, M as SelectValueProps, N as SelectTriggerProps, O as SelectStyles, P as ButtonPrimitive, R as ButtonPrimitiveLabelProps, S as CardTitleProps, T as SelectPortalProps, U as FieldPrimitive, V as InputPrimitiveProps, W as FieldPrimitiveRootProps, _ as CardPrimitive, a as ToastTitleProps, b as CardFooterProps, c as AvatarStyles, d as EmptyPrimitive, f as EmptyRootProps, g as EmptyDescriptionProps, h as EmptyMediaProps, i as ToastDescriptionProps, j as SelectOverlayProps, k as SelectOptionProps, l as AvatarImageProps, m as EmptyTitleProps, n as ToastRootProps, o as AvatarPrimitive, p as EmptyStyles, q as FieldDescriptionProps, r as ToastStyles, s as AvatarRootProps, t as ToastPrimitive, u as AvatarFallbackProps, v as CardRootProps, w as SelectPrimitive, x as CardBodyProps, y as CardStyles, z as InputPrimitive } from "../index-Bfae0NgJ.mjs";
+export { AvatarFallbackProps, AvatarImageProps, AvatarPrimitive, AvatarRootProps, AvatarStyles, ButtonPrimitive, ButtonPrimitiveLabelProps, ButtonPrimitiveRootProps, ButtonState, ButtonStyles, CardBodyProps, CardFooterProps, CardHeaderProps, CardPrimitive, CardRootProps, CardStyles, CardTitleProps, EmptyDescriptionProps, EmptyMediaProps, EmptyPrimitive, EmptyRootProps, EmptyStyles, EmptyTitleProps, FieldDescriptionProps, FieldErrorProps, FieldLabelProps, FieldPrimitive, FieldPrimitiveRootProps, FieldStyles, InputPrimitive, InputPrimitiveBaseProps, InputPrimitiveProps, InputStyles, SelectContentProps, SelectOptionProps, SelectOverlayProps, SelectPortalProps, SelectPrimitive, SelectRootBaseProps, SelectRootProps, SelectStyles, SelectTriggerProps, SelectValueProps, ToastDescriptionProps, ToastPrimitive, ToastRootProps, ToastStyles, ToastTitleProps };

package/dist/primitives/index.mjs

@@ -1,4 +1,3 @@
-import "../portal-jF1KeGnu.mjs";
-import { a as ButtonPrimitive, i as SelectPrimitive, n as EmptyPrimitive, o as InputPrimitive, r as CardPrimitive, s as FieldPrimitive, t as AvatarPrimitive } from "../primitives-BKUnaQrI.mjs";
+import { a as SelectPrimitive, c as FieldPrimitive, i as CardPrimitive, n as AvatarPrimitive, o as ButtonPrimitive, r as EmptyPrimitive, s as InputPrimitive, t as ToastPrimitive } from "../primitives-B4L9y32H.mjs";
 
-export { AvatarPrimitive, ButtonPrimitive, CardPrimitive, EmptyPrimitive, FieldPrimitive, InputPrimitive, SelectPrimitive };
+export { AvatarPrimitive, ButtonPrimitive, CardPrimitive, EmptyPrimitive, FieldPrimitive, InputPrimitive, SelectPrimitive, ToastPrimitive };

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

@@ -1,8 +1,63 @@
-import { t as Portal } from "./portal-jF1KeGnu.mjs";
-import React, { createContext, useContext, useEffect, useState } from "react";
+import React, { createContext, useContext, useEffect, useState, useSyncExternalStore } from "react";
 import { ActivityIndicator, Image, Pressable, StyleSheet, Text, TextInput, View } from "react-native";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx } from "react/jsx-runtime";
 
+//#region src/primitives/portal/portal.tsx
+const DEFAULT_PORTAL_HOST = "KOR_NATIVE_DEFAULT_HOST_NAME";
+const store = {
+	map: (/* @__PURE__ */ new Map()).set(DEFAULT_PORTAL_HOST, /* @__PURE__ */ new Map()),
+	listeners: /* @__PURE__ */ new Set()
+};
+function emit() {
+	for (const cb of store.listeners) cb();
+}
+function getSnapshot() {
+	return store.map;
+}
+function subscribe(cb) {
+	store.listeners.add(cb);
+	return () => {
+		store.listeners.delete(cb);
+	};
+}
+function updatePortal(hostName, name, children) {
+	const next = new Map(store.map);
+	const portal = next.get(hostName) ?? /* @__PURE__ */ new Map();
+	portal.set(name, children);
+	next.set(hostName, portal);
+	store.map = next;
+	emit();
+}
+function removePortal(hostName, name) {
+	const next = new Map(store.map);
+	const portal = next.get(hostName) ?? /* @__PURE__ */ new Map();
+	portal.delete(name);
+	next.set(hostName, portal);
+	store.map = next;
+	emit();
+}
+function PortalHost({ name = DEFAULT_PORTAL_HOST }) {
+	const portalMap = useSyncExternalStore(subscribe, getSnapshot, getSnapshot).get(name) ?? /* @__PURE__ */ new Map();
+	if (portalMap.size === 0) return null;
+	return /* @__PURE__ */ jsx(Fragment, { children: Array.from(portalMap.values()) });
+}
+function Portal({ name, hostName = DEFAULT_PORTAL_HOST, children }) {
+	useEffect(() => {
+		updatePortal(hostName, name, children);
+	}, [
+		hostName,
+		name,
+		children
+	]);
+	useEffect(() => {
+		return () => {
+			removePortal(hostName, name);
+		};
+	}, [hostName, name]);
+	return null;
+}
+
+//#endregion
 //#region src/primitives/field/context.ts
 const FieldContext = createContext(void 0);
 const useField = () => {
@@ -555,4 +610,55 @@ const AvatarPrimitive = {
 };
 
 //#endregion
-export { ButtonPrimitive as a, SelectPrimitive as i, EmptyPrimitive as n, InputPrimitive as o, CardPrimitive as r, FieldPrimitive as s, AvatarPrimitive as t };
+//#region src/primitives/toast/context.ts
+const ToastContext = createContext(void 0);
+const useToast = () => {
+	const context = useContext(ToastContext);
+	if (!context) throw new Error("useToast must be used within a ToastProvider");
+	return context;
+};
+
+//#endregion
+//#region src/primitives/toast/toast-root.tsx
+function ToastRoot(props) {
+	const composedStyle = [props.styles?.root, props.style];
+	const Component = props.render ?? View;
+	return /* @__PURE__ */ jsx(ToastContext.Provider, {
+		value: { styles: props.styles },
+		children: /* @__PURE__ */ jsx(Component, {
+			...props,
+			style: composedStyle
+		})
+	});
+}
+
+//#endregion
+//#region src/primitives/toast/toast-title.tsx
+function ToastTitle(props) {
+	const composedStyle = [useToast().styles?.title, props.style];
+	return /* @__PURE__ */ jsx(props.render ?? Text, {
+		...props,
+		style: composedStyle
+	});
+}
+
+//#endregion
+//#region src/primitives/toast/toast-description.tsx
+function ToastDescription(props) {
+	const composedStyle = [useToast().styles?.description, props.style];
+	return /* @__PURE__ */ jsx(props.render ?? Text, {
+		...props,
+		style: composedStyle
+	});
+}
+
+//#endregion
+//#region src/primitives/toast/index.ts
+const ToastPrimitive = {
+	Root: ToastRoot,
+	Title: ToastTitle,
+	Description: ToastDescription
+};
+
+//#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 };

package/dist/toast-manager-Vq38WK76.mjs

@@ -0,0 +1,281 @@
+import { t as ToastPrimitive } from "./primitives-B4L9y32H.mjs";
+import React, { createContext, useContext, useEffect, useState, useSyncExternalStore } from "react";
+import { StyleSheet, View, useColorScheme } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/themes/default/colors.ts
+const lightColors = {
+	background: "hsla(223.81, 100%, 100%, 1)",
+	foreground: "hsla(223.81, 0%, 3.94%, 1)",
+	primary: "hsla(223.81, 0%, 9.05%, 1)",
+	primaryForeground: "hsla(223.81, 0%, 98.03%, 1)",
+	secondary: "hsla(223.81, 0%, 96.06%, 1)",
+	secondaryForeground: "hsla(223.81, 0%, 9.05%, 1)",
+	muted: "hsla(223.81, 0%, 96.06%, 1)",
+	mutedForeground: "hsla(223.81, 0%, 45.15%, 1)",
+	border: "hsla(223.81, 0%, 89.82%, 1)",
+	surface: "hsla(223.81, 100%, 100%, 1)",
+	danger: "hsla(0, 84.2%, 60.2%, 1)",
+	success: "hsla(173, 58%, 39%, 1)",
+	warning: "hsla(43, 74%, 66%, 1)",
+	info: "hsla(197, 37%, 24%, 1)"
+};
+const darkColors = {
+	background: "hsla(223.81, 0%, 3.94%, 1)",
+	foreground: "hsla(223.81, 0%, 98.03%, 1)",
+	primary: "hsla(223.81, 0%, 89.82%, 1)",
+	primaryForeground: "hsla(223.81, 0%, 9.05%, 1)",
+	secondary: "hsla(223.81, 0%, 14.94%, 1)",
+	secondaryForeground: "hsla(223.81, 0%, 98.03%, 1)",
+	muted: "hsla(223.81, 0%, 14.94%, 1)",
+	mutedForeground: "hsla(223.81, 0%, 63.02%, 1)",
+	border: "hsla(223.81, 0%, 15.51%, 1)",
+	surface: "hsla(223.81, 0%, 9.05%, 1)",
+	danger: "hsla(0, 62.8%, 30.6%, 1)",
+	success: "hsla(160, 60%, 45%, 1)",
+	warning: "hsla(30, 80%, 55%, 1)",
+	info: "hsla(220, 70%, 50%, 1)"
+};
+
+//#endregion
+//#region src/themes/default/index.ts
+const defaultThemeAssets = {
+	colors: {
+		light: lightColors,
+		dark: darkColors
+	},
+	radius: 10,
+	fontFamily: "System",
+	letterSpacing: 0,
+	fontSize: 16
+};
+
+//#endregion
+//#region src/themes/themes.ts
+const themes = { default: defaultThemeAssets };
+
+//#endregion
+//#region src/themes/provider.tsx
+const ThemeContext = createContext(null);
+const ThemeProvider = (props) => {
+	const [themeName, setTheme] = useState("default");
+	const systemColorScheme = useColorScheme();
+	const [colorScheme, setColorScheme] = useState(systemColorScheme ?? "light");
+	const themesAssets = themes[themeName];
+	const colors = themesAssets.colors[colorScheme];
+	useEffect(() => {
+		if (systemColorScheme) setColorScheme(systemColorScheme);
+	}, [systemColorScheme]);
+	return /* @__PURE__ */ jsx(ThemeContext.Provider, {
+		value: {
+			themeName,
+			setTheme,
+			colorScheme,
+			setColorScheme,
+			colors,
+			radius: themesAssets.radius,
+			fontFamily: themesAssets.fontFamily,
+			letterSpacing: themesAssets.letterSpacing,
+			fontSize: themesAssets.fontSize
+		},
+		children: props.children
+	});
+};
+const useTheme = () => {
+	const context = useContext(ThemeContext);
+	if (!context) throw new Error("useTheme must be used within a ThemeProvider");
+	return context;
+};
+
+//#endregion
+//#region src/utils/use-themed-styles.ts
+const useThemedStyles = (callback) => {
+	const theme = useTheme();
+	return callback({
+		colors: theme.colors,
+		radius: theme.radius,
+		fontFamily: theme.fontFamily,
+		letterSpacing: theme.letterSpacing,
+		fontSize: theme.fontSize
+	});
+};
+
+//#endregion
+//#region src/components/toast/variants/default.tsx
+const useToastVariantDefault = () => {
+	return useThemedStyles(({ colors, radius, fontFamily, fontSize }) => ({
+		root: {
+			backgroundColor: colors.surface,
+			borderWidth: 1,
+			borderColor: colors.border,
+			borderRadius: radius,
+			padding: 16,
+			gap: 4,
+			minWidth: 300,
+			maxWidth: 400
+		},
+		title: {
+			color: colors.foreground,
+			fontSize,
+			fontWeight: "600",
+			fontFamily
+		},
+		description: {
+			color: colors.mutedForeground,
+			fontSize: fontSize * .875,
+			fontFamily
+		}
+	}));
+};
+
+//#endregion
+//#region src/components/toast/variants/success.tsx
+const useToastVariantSuccess = () => {
+	return useThemedStyles(({ colors, radius, fontFamily, fontSize }) => ({
+		root: {
+			backgroundColor: colors.success,
+			borderWidth: 1,
+			borderColor: colors.success,
+			borderRadius: radius,
+			padding: 16,
+			gap: 4,
+			minWidth: 300,
+			maxWidth: 400
+		},
+		title: {
+			color: colors.foreground,
+			fontSize,
+			fontWeight: "600",
+			fontFamily
+		},
+		description: {
+			color: colors.foreground,
+			fontSize: fontSize * .875,
+			fontFamily,
+			opacity: .9
+		}
+	}));
+};
+
+//#endregion
+//#region src/components/toast/variants/danger.tsx
+const useToastVariantDanger = () => {
+	return useThemedStyles(({ colors, radius, fontFamily, fontSize }) => ({
+		root: {
+			backgroundColor: colors.danger,
+			borderWidth: 1,
+			borderColor: colors.danger,
+			borderRadius: radius,
+			padding: 16,
+			gap: 4,
+			minWidth: 300,
+			maxWidth: 400
+		},
+		title: {
+			color: colors.foreground,
+			fontSize,
+			fontWeight: "600",
+			fontFamily
+		},
+		description: {
+			color: colors.foreground,
+			fontSize: fontSize * .875,
+			fontFamily,
+			opacity: .9
+		}
+	}));
+};
+
+//#endregion
+//#region src/components/toast/variants/index.ts
+const ToastVariants = {
+	default: useToastVariantDefault,
+	success: useToastVariantSuccess,
+	danger: useToastVariantDanger
+};
+
+//#endregion
+//#region src/components/toast/toast.tsx
+function ToastComponent(props) {
+	const useVariantStyles = ToastVariants[props.variant || "default"];
+	const styles$1 = useVariantStyles();
+	return /* @__PURE__ */ jsxs(ToastPrimitive.Root, {
+		styles: styles$1,
+		children: [/* @__PURE__ */ jsx(ToastPrimitive.Title, { children: props.title }), !!props.description && /* @__PURE__ */ jsx(ToastPrimitive.Description, { children: props.description })]
+	});
+}
+
+//#endregion
+//#region src/components/toast/toast-manager.tsx
+const store = {
+	toasts: [],
+	listeners: /* @__PURE__ */ new Set()
+};
+function emit() {
+	for (const cb of store.listeners) cb();
+}
+function getSnapshot() {
+	return store.toasts;
+}
+function subscribe(cb) {
+	store.listeners.add(cb);
+	return () => {
+		store.listeners.delete(cb);
+	};
+}
+function addToast(config) {
+	const existingToast = store.toasts.find((t) => t.id === config.id);
+	if (existingToast) return existingToast.id;
+	const toast = {
+		duration: 3e3,
+		...config
+	};
+	store.toasts = [...store.toasts, toast];
+	emit();
+	if (toast.duration) setTimeout(() => {
+		removeToast(toast.id);
+	}, toast.duration);
+	return toast.id;
+}
+function removeToast(id) {
+	store.toasts = store.toasts.filter((t) => t.id !== id);
+	emit();
+}
+const ToastAPI = {
+	show: addToast,
+	dismiss: removeToast
+};
+function ToastContainer() {
+	const toasts = useSyncExternalStore(subscribe, getSnapshot);
+	if (!toasts.length) return null;
+	return /* @__PURE__ */ jsx(View, {
+		style: styles.container,
+		pointerEvents: "box-none",
+		children: toasts.map((toast) => /* @__PURE__ */ jsx(View, {
+			style: styles.toastWrapper,
+			children: /* @__PURE__ */ jsx(ToastComponent, {
+				title: toast.title,
+				description: toast.description,
+				variant: toast.variant
+			})
+		}, toast.id))
+	});
+}
+const styles = StyleSheet.create({
+	container: {
+		position: "absolute",
+		top: 50,
+		left: 0,
+		right: 0,
+		alignItems: "center",
+		gap: 12,
+		zIndex: 9999
+	},
+	toastWrapper: {
+		width: "100%",
+		alignItems: "center"
+	}
+});
+
+//#endregion
+export { ThemeProvider as a, useThemedStyles as i, ToastContainer as n, useTheme as o, ToastComponent as r, ToastAPI as t };

package/package.json

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

package/src/components/index.ts

@@ -7,3 +7,4 @@ export * from "./typography/typography";
 export * from "./link/link";
 export * from "./empty/empty";
 export * from "./avatar/avatar";
+export * from "./toast/index";

package/src/components/toast/index.ts

@@ -0,0 +1,7 @@
+import { ToastComponent } from "./toast";
+import { ToastAPI } from "./toast-manager";
+
+export const Toast = Object.assign(ToastComponent, {
+  show: ToastAPI.show,
+  dismiss: ToastAPI.dismiss,
+});

package/src/components/toast/toast-manager.tsx

@@ -0,0 +1,104 @@
+import React, { useSyncExternalStore } from "react";
+import { View, StyleSheet } from "react-native";
+import { ToastComponent } from "./toast";
+import { ToastVariants } from "./variants";
+
+export interface ToastConfig {
+  id: string;
+  title: string;
+  description?: string;
+  variant?: keyof typeof ToastVariants;
+  duration?: number;
+}
+
+type ToastStore = {
+  toasts: ToastConfig[];
+  listeners: Set<() => void>;
+};
+
+const store: ToastStore = {
+  toasts: [],
+  listeners: new Set(),
+};
+
+function emit() {
+  for (const cb of store.listeners) cb();
+}
+
+function getSnapshot() {
+  return store.toasts;
+}
+
+function subscribe(cb: () => void) {
+  store.listeners.add(cb);
+  return () => {
+    store.listeners.delete(cb);
+  };
+}
+
+function addToast(config: ToastConfig): string {
+  // Check if toast with this ID already exists
+  const existingToast = store.toasts.find((t) => t.id === config.id);
+  if (existingToast) {
+    return existingToast.id;
+  }
+
+  const toast: ToastConfig = {
+    duration: 3000,
+    ...config,
+  };
+
+  store.toasts = [...store.toasts, toast];
+  emit();
+
+  // Auto-dismiss after duration
+  if (toast.duration) {
+    setTimeout(() => {
+      removeToast(toast.id);
+    }, toast.duration);
+  }
+
+  return toast.id;
+}
+
+function removeToast(id: string): void {
+  store.toasts = store.toasts.filter((t) => t.id !== id);
+  emit();
+}
+
+export const ToastAPI = {
+  show: addToast,
+  dismiss: removeToast,
+};
+
+export function ToastContainer() {
+  const toasts = useSyncExternalStore(subscribe, getSnapshot);
+
+  if (!toasts.length) return null;
+
+  return (
+    <View style={styles.container} pointerEvents="box-none">
+      {toasts.map((toast) => (
+        <View key={toast.id} style={styles.toastWrapper}>
+          <ToastComponent title={toast.title} description={toast.description} variant={toast.variant} />
+        </View>
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: "absolute",
+    top: 50,
+    left: 0,
+    right: 0,
+    alignItems: "center",
+    gap: 12,
+    zIndex: 9999,
+  },
+  toastWrapper: {
+    width: "100%",
+    alignItems: "center",
+  },
+});

package/src/components/toast/toast.tsx

@@ -0,0 +1,22 @@
+import { ToastPrimitive } from "@/primitives";
+import React from "react";
+import { ToastVariants } from "./variants";
+
+interface ToastProps {
+  title: string;
+  description?: string;
+
+  variant?: keyof typeof ToastVariants;
+}
+
+export function ToastComponent(props: ToastProps) {
+  const useVariantStyles = ToastVariants[props.variant || "default"];
+  const styles = useVariantStyles();
+
+  return (
+    <ToastPrimitive.Root styles={styles}>
+      <ToastPrimitive.Title>{props.title}</ToastPrimitive.Title>
+      {!!props.description && <ToastPrimitive.Description>{props.description}</ToastPrimitive.Description>}
+    </ToastPrimitive.Root>
+  );
+}

package/src/components/toast/variants/danger.tsx

@@ -0,0 +1,31 @@
+import { ToastStyles } from "@/primitives";
+import { useThemedStyles } from "@/utils/use-themed-styles";
+
+export const useToastVariantDanger = (): ToastStyles => {
+  return useThemedStyles(
+    ({ colors, radius, fontFamily, fontSize }): ToastStyles => ({
+      root: {
+        backgroundColor: colors.danger,
+        borderWidth: 1,
+        borderColor: colors.danger,
+        borderRadius: radius,
+        padding: 16,
+        gap: 4,
+        minWidth: 300,
+        maxWidth: 400,
+      },
+      title: {
+        color: colors.foreground,
+        fontSize: fontSize,
+        fontWeight: "600",
+        fontFamily,
+      },
+      description: {
+        color: colors.foreground,
+        fontSize: fontSize * 0.875,
+        fontFamily,
+        opacity: 0.9,
+      },
+    })
+  );
+};

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

@@ -0,0 +1,30 @@
+import { ToastStyles } from "@/primitives";
+import { useThemedStyles } from "@/utils/use-themed-styles";
+
+export const useToastVariantDefault = (): ToastStyles => {
+  return useThemedStyles(
+    ({ colors, radius, fontFamily, fontSize }): ToastStyles => ({
+      root: {
+        backgroundColor: colors.surface,
+        borderWidth: 1,
+        borderColor: colors.border,
+        borderRadius: radius,
+        padding: 16,
+        gap: 4,
+        minWidth: 300,
+        maxWidth: 400,
+      },
+      title: {
+        color: colors.foreground,
+        fontSize: fontSize,
+        fontWeight: "600",
+        fontFamily,
+      },
+      description: {
+        color: colors.mutedForeground,
+        fontSize: fontSize * 0.875,
+        fontFamily,
+      },
+    })
+  );
+};

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

@@ -0,0 +1,9 @@
+import { useToastVariantDefault } from "./default";
+import { useToastVariantSuccess } from "./success";
+import { useToastVariantDanger } from "./danger";
+
+export const ToastVariants = {
+  default: useToastVariantDefault,
+  success: useToastVariantSuccess,
+  danger: useToastVariantDanger,
+};

package/src/components/toast/variants/success.tsx

@@ -0,0 +1,31 @@
+import { ToastStyles } from "@/primitives";
+import { useThemedStyles } from "@/utils/use-themed-styles";
+
+export const useToastVariantSuccess = (): ToastStyles => {
+  return useThemedStyles(
+    ({ colors, radius, fontFamily, fontSize }): ToastStyles => ({
+      root: {
+        backgroundColor: colors.success,
+        borderWidth: 1,
+        borderColor: colors.success,
+        borderRadius: radius,
+        padding: 16,
+        gap: 4,
+        minWidth: 300,
+        maxWidth: 400,
+      },
+      title: {
+        color: colors.foreground,
+        fontSize: fontSize,
+        fontWeight: "600",
+        fontFamily,
+      },
+      description: {
+        color: colors.foreground,
+        fontSize: fontSize * 0.875,
+        fontFamily,
+        opacity: 0.9,
+      },
+    })
+  );
+};

package/src/index.tsx

@@ -1,11 +1,13 @@
 import { ThemeProvider } from "@/themes";
 import { PortalHost } from "./primitives/portal";
+import { ToastContainer } from "./components/toast/toast-manager";
 
 export const UniversalUIProvider = ({ children }: { children: React.ReactNode }) => {
   return (
     <ThemeProvider>
       {children}
       <PortalHost />
+      <ToastContainer />
     </ThemeProvider>
   );
 };

package/src/primitives/index.ts

@@ -5,3 +5,4 @@ export * from "./select";
 export * from "./card";
 export * from "./empty";
 export * from "./avatar";
+export * from "./toast";

package/src/primitives/toast/context.ts

@@ -0,0 +1,16 @@
+import { createContext, useContext } from "react";
+import { ToastStyles } from "./types";
+
+export interface ToastContext {
+  styles?: ToastStyles;
+}
+
+export const ToastContext = createContext<ToastContext | undefined>(undefined);
+
+export const useToast = () => {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error("useToast must be used within a ToastProvider");
+  }
+  return context;
+};

package/src/primitives/toast/index.ts

@@ -0,0 +1,14 @@
+import { ToastRoot } from "./toast-root";
+import { ToastTitle } from "./toast-title";
+import { ToastDescription } from "./toast-description";
+
+export const ToastPrimitive = {
+  Root: ToastRoot,
+  Title: ToastTitle,
+  Description: ToastDescription,
+};
+
+export type { ToastRootProps } from "./toast-root";
+export type { ToastTitleProps } from "./toast-title";
+export type { ToastDescriptionProps } from "./toast-description";
+export type { ToastStyles } from "./types";

package/src/primitives/toast/toast-description.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { StyleProp, Text, TextStyle } from "react-native";
+import { useToast } from "./context";
+
+export interface ToastDescriptionProps {
+  children?: string;
+
+  render?: (props: ToastDescriptionProps) => React.ReactNode;
+
+  style?: StyleProp<TextStyle>;
+}
+
+export function ToastDescription(props: ToastDescriptionProps) {
+  const toast = useToast();
+
+  const composedStyle = [toast.styles?.description, props.style];
+
+  const Component = props.render ?? Text;
+  return <Component {...props} style={composedStyle} />;
+}

package/src/primitives/toast/toast-root.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { StyleProp, View, ViewStyle } from "react-native";
+import { ToastStyles } from "./types";
+import { ToastContext } from "./context";
+
+export interface ToastRootProps {
+  children?: React.ReactNode;
+
+  render?: (props: ToastRootProps) => React.ReactNode;
+
+  style?: StyleProp<ViewStyle>;
+  styles?: ToastStyles;
+}
+
+export function ToastRoot(props: ToastRootProps) {
+  const composedStyle = [props.styles?.root, props.style];
+
+  const Component = props.render ?? View;
+  return (
+    <ToastContext.Provider
+      value={{
+        styles: props.styles,
+      }}
+    >
+      <Component {...props} style={composedStyle} />
+    </ToastContext.Provider>
+  );
+}

package/src/primitives/toast/toast-title.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { StyleProp, Text, TextStyle } from "react-native";
+import { useToast } from "./context";
+
+export interface ToastTitleProps {
+  children?: string;
+
+  render?: (props: ToastTitleProps) => React.ReactNode;
+
+  style?: StyleProp<TextStyle>;
+}
+
+export function ToastTitle(props: ToastTitleProps) {
+  const toast = useToast();
+
+  const composedStyle = [toast.styles?.title, props.style];
+
+  const Component = props.render ?? Text;
+  return <Component {...props} style={composedStyle} />;
+}

package/src/primitives/toast/types.ts

@@ -0,0 +1,9 @@
+import { ToastRootProps } from "./toast-root";
+import { ToastTitleProps } from "./toast-title";
+import { ToastDescriptionProps } from "./toast-description";
+
+export interface ToastStyles {
+  root?: ToastRootProps["style"];
+  title?: ToastTitleProps["style"];
+  description?: ToastDescriptionProps["style"];
+}

package/dist/portal-jF1KeGnu.mjs

@@ -1,61 +0,0 @@
-import { useEffect, useState, useSyncExternalStore } from "react";
-import "react-native";
-import { Fragment, jsx } from "react/jsx-runtime";
-
-//#region src/primitives/portal/portal.tsx
-const DEFAULT_PORTAL_HOST = "KOR_NATIVE_DEFAULT_HOST_NAME";
-const store = {
-	map: (/* @__PURE__ */ new Map()).set(DEFAULT_PORTAL_HOST, /* @__PURE__ */ new Map()),
-	listeners: /* @__PURE__ */ new Set()
-};
-function emit() {
-	for (const cb of store.listeners) cb();
-}
-function getSnapshot() {
-	return store.map;
-}
-function subscribe(cb) {
-	store.listeners.add(cb);
-	return () => {
-		store.listeners.delete(cb);
-	};
-}
-function updatePortal(hostName, name, children) {
-	const next = new Map(store.map);
-	const portal = next.get(hostName) ?? /* @__PURE__ */ new Map();
-	portal.set(name, children);
-	next.set(hostName, portal);
-	store.map = next;
-	emit();
-}
-function removePortal(hostName, name) {
-	const next = new Map(store.map);
-	const portal = next.get(hostName) ?? /* @__PURE__ */ new Map();
-	portal.delete(name);
-	next.set(hostName, portal);
-	store.map = next;
-	emit();
-}
-function PortalHost({ name = DEFAULT_PORTAL_HOST }) {
-	const portalMap = useSyncExternalStore(subscribe, getSnapshot, getSnapshot).get(name) ?? /* @__PURE__ */ new Map();
-	if (portalMap.size === 0) return null;
-	return /* @__PURE__ */ jsx(Fragment, { children: Array.from(portalMap.values()) });
-}
-function Portal({ name, hostName = DEFAULT_PORTAL_HOST, children }) {
-	useEffect(() => {
-		updatePortal(hostName, name, children);
-	}, [
-		hostName,
-		name,
-		children
-	]);
-	useEffect(() => {
-		return () => {
-			removePortal(hostName, name);
-		};
-	}, [hostName, name]);
-	return null;
-}
-
-//#endregion
-export { PortalHost as n, Portal as t };

package/dist/themes-pgmHo7MU.mjs

@@ -1,90 +0,0 @@
-import { createContext, useContext, useEffect, useState } from "react";
-import { useColorScheme } from "react-native";
-import { jsx } from "react/jsx-runtime";
-
-//#region src/themes/default/colors.ts
-const lightColors = {
-	background: "hsla(223.81, 100%, 100%, 1)",
-	foreground: "hsla(223.81, 0%, 3.94%, 1)",
-	primary: "hsla(223.81, 0%, 9.05%, 1)",
-	primaryForeground: "hsla(223.81, 0%, 98.03%, 1)",
-	secondary: "hsla(223.81, 0%, 96.06%, 1)",
-	secondaryForeground: "hsla(223.81, 0%, 9.05%, 1)",
-	muted: "hsla(223.81, 0%, 96.06%, 1)",
-	mutedForeground: "hsla(223.81, 0%, 45.15%, 1)",
-	border: "hsla(223.81, 0%, 89.82%, 1)",
-	surface: "hsla(223.81, 100%, 100%, 1)",
-	danger: "hsla(0, 84.2%, 60.2%, 1)",
-	success: "hsla(173, 58%, 39%, 1)",
-	warning: "hsla(43, 74%, 66%, 1)",
-	info: "hsla(197, 37%, 24%, 1)"
-};
-const darkColors = {
-	background: "hsla(223.81, 0%, 3.94%, 1)",
-	foreground: "hsla(223.81, 0%, 98.03%, 1)",
-	primary: "hsla(223.81, 0%, 89.82%, 1)",
-	primaryForeground: "hsla(223.81, 0%, 9.05%, 1)",
-	secondary: "hsla(223.81, 0%, 14.94%, 1)",
-	secondaryForeground: "hsla(223.81, 0%, 98.03%, 1)",
-	muted: "hsla(223.81, 0%, 14.94%, 1)",
-	mutedForeground: "hsla(223.81, 0%, 63.02%, 1)",
-	border: "hsla(223.81, 0%, 15.51%, 1)",
-	surface: "hsla(223.81, 0%, 9.05%, 1)",
-	danger: "hsla(0, 62.8%, 30.6%, 1)",
-	success: "hsla(160, 60%, 45%, 1)",
-	warning: "hsla(30, 80%, 55%, 1)",
-	info: "hsla(220, 70%, 50%, 1)"
-};
-
-//#endregion
-//#region src/themes/default/index.ts
-const defaultThemeAssets = {
-	colors: {
-		light: lightColors,
-		dark: darkColors
-	},
-	radius: 10,
-	fontFamily: "System",
-	letterSpacing: 0,
-	fontSize: 16
-};
-
-//#endregion
-//#region src/themes/themes.ts
-const themes = { default: defaultThemeAssets };
-
-//#endregion
-//#region src/themes/provider.tsx
-const ThemeContext = createContext(null);
-const ThemeProvider = (props) => {
-	const [themeName, setTheme] = useState("default");
-	const systemColorScheme = useColorScheme();
-	const [colorScheme, setColorScheme] = useState(systemColorScheme ?? "light");
-	const themesAssets = themes[themeName];
-	const colors = themesAssets.colors[colorScheme];
-	useEffect(() => {
-		if (systemColorScheme) setColorScheme(systemColorScheme);
-	}, [systemColorScheme]);
-	return /* @__PURE__ */ jsx(ThemeContext.Provider, {
-		value: {
-			themeName,
-			setTheme,
-			colorScheme,
-			setColorScheme,
-			colors,
-			radius: themesAssets.radius,
-			fontFamily: themesAssets.fontFamily,
-			letterSpacing: themesAssets.letterSpacing,
-			fontSize: themesAssets.fontSize
-		},
-		children: props.children
-	});
-};
-const useTheme = () => {
-	const context = useContext(ThemeContext);
-	if (!context) throw new Error("useTheme must be used within a ThemeProvider");
-	return context;
-};
-
-//#endregion
-export { useTheme as n, ThemeProvider as t };