@korsolutions/ui 0.0.17 → 0.0.19

package/dist/components/index.d.mts

@@ -1,4 +1,4 @@
-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 { $ as FieldStyles, D as CardStyles, G as ButtonStyles, I as SelectStyles, J as InputPrimitiveBaseProps, P as SelectRootBaseProps, X as InputStyles, d as ToastStyles, g as AvatarStyles, i as TextareaStyles, n as TextareaPrimitiveBaseProps, s as BadgeStyles, x as EmptyStyles } from "../index-BLsiF42Z.mjs";
 import React from "react";
 import { ImageSource, TextProps, TextStyle } from "react-native";
 
@@ -196,4 +196,32 @@ declare const Toast: typeof ToastComponent & {
   dismiss: (id: string) => void;
 };
 //#endregion
-export { Avatar, AvatarProps, Button, Card, Empty, EmptyProps, Field, FieldProps, Input, Link, LinkProps, Select, SelectOption, SelectProps, Toast, Typography, TypographyProps };
+//#region src/components/badge/variants/index.d.ts
+declare const BadgeVariants: {
+  default: () => BadgeStyles;
+  secondary: () => BadgeStyles;
+};
+//#endregion
+//#region src/components/badge/badge.d.ts
+interface BadgeProps {
+  children: string;
+  variant?: keyof typeof BadgeVariants;
+  color?: string;
+}
+declare function Badge(props: BadgeProps): React.JSX.Element;
+//#endregion
+//#region src/components/textarea/variants/default.d.ts
+declare function useTextareaVariantDefault(): TextareaStyles;
+//#endregion
+//#region src/components/textarea/variants/index.d.ts
+declare const TextareaVariants: {
+  default: typeof useTextareaVariantDefault;
+};
+//#endregion
+//#region src/components/textarea/textarea.d.ts
+interface TextareaProps extends TextareaPrimitiveBaseProps {
+  variant?: keyof typeof TextareaVariants;
+}
+declare function Textarea(props: TextareaProps): React.JSX.Element;
+//#endregion
+export { Avatar, AvatarProps, Badge, Button, Card, Empty, EmptyProps, Field, FieldProps, Input, Link, LinkProps, Select, SelectOption, SelectProps, Textarea, Toast, Typography, TypographyProps };

package/dist/components/index.mjs

@@ -1,5 +1,5 @@
-import { i as useThemedStyles, r as ToastComponent, t as ToastAPI } from "../toast-manager-x_SG_xL4.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 { i as useThemedStyles, r as ToastComponent, t as ToastAPI } from "../toast-manager-BOORCQn8.mjs";
+import { a as EmptyPrimitive, c as ButtonPrimitive, i as AvatarPrimitive, l as InputPrimitive, n as BadgePrimitive, o as CardPrimitive, s as SelectPrimitive, t as TextareaPrimitive, u as FieldPrimitive } from "../primitives-CyDqzNcp.mjs";
 import React, { useState } from "react";
 import { Linking, Text } from "react-native";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -574,4 +574,109 @@ const Toast = Object.assign(ToastComponent, {
 });
 
 //#endregion
-export { Avatar, Button, Card, Empty, Field, Input, Link, Select, Toast, Typography };
+//#region src/components/badge/variants/default.tsx
+const useBadgeVariantDefault = () => {
+	return useThemedStyles(({ colors, radius, fontFamily, fontSize }) => ({
+		root: { default: {
+			backgroundColor: colors.primary,
+			paddingVertical: 4,
+			paddingHorizontal: 8,
+			borderRadius: radius,
+			alignSelf: "flex-start"
+		} },
+		label: { default: {
+			color: colors.primaryForeground,
+			fontSize: fontSize * .75,
+			fontWeight: "600",
+			fontFamily
+		} }
+	}));
+};
+
+//#endregion
+//#region src/components/badge/variants/secondary.tsx
+const useBadgeVariantSecondary = () => {
+	return useThemedStyles(({ colors, radius, fontFamily, fontSize }) => ({
+		root: { default: {
+			backgroundColor: colors.secondary,
+			paddingVertical: 4,
+			paddingHorizontal: 8,
+			borderRadius: radius,
+			alignSelf: "flex-start"
+		} },
+		label: { default: {
+			color: colors.secondaryForeground,
+			fontSize: fontSize * .75,
+			fontWeight: "600",
+			fontFamily
+		} }
+	}));
+};
+
+//#endregion
+//#region src/components/badge/variants/index.ts
+const BadgeVariants = {
+	default: useBadgeVariantDefault,
+	secondary: useBadgeVariantSecondary
+};
+
+//#endregion
+//#region src/components/badge/badge.tsx
+function Badge(props) {
+	const useVariantStyles = BadgeVariants[props.variant || "default"];
+	const styles = useVariantStyles();
+	const customStyle = props.color ? { backgroundColor: props.color } : void 0;
+	return /* @__PURE__ */ jsx(BadgePrimitive.Root, {
+		styles,
+		style: customStyle,
+		children: /* @__PURE__ */ jsx(BadgePrimitive.Label, { children: props.children })
+	});
+}
+
+//#endregion
+//#region src/components/textarea/variants/default.tsx
+function useTextareaVariantDefault() {
+	return useThemedStyles(({ colors, radius, fontFamily, fontSize }) => ({
+		default: {
+			placeholderTextColor: colors.mutedForeground,
+			selectionColor: colors.primary,
+			style: {
+				borderWidth: 1,
+				borderColor: colors.border,
+				borderRadius: radius,
+				backgroundColor: colors.surface,
+				paddingVertical: 12,
+				paddingHorizontal: 16,
+				outlineWidth: 0,
+				fontFamily,
+				fontSize,
+				minHeight: 120,
+				textAlignVertical: "top",
+				color: colors.foreground
+			}
+		},
+		focused: { style: { borderColor: colors.primary } },
+		disabled: { style: {
+			color: colors.mutedForeground,
+			backgroundColor: colors.muted
+		} }
+	}));
+}
+
+//#endregion
+//#region src/components/textarea/variants/index.ts
+const TextareaVariants = { default: useTextareaVariantDefault };
+
+//#endregion
+//#region src/components/textarea/textarea.tsx
+function Textarea(props) {
+	const useVariantStyles = TextareaVariants[props.variant ?? "default"];
+	const variantStyles = useVariantStyles();
+	return /* @__PURE__ */ jsx(TextareaPrimitive, {
+		...props,
+		styles: variantStyles
+	});
+}
+
+//#endregion
+export { Avatar, Badge, Button, Card, Empty, Field, Input, Link, Select, Textarea, Toast, Typography };

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

@@ -390,4 +390,49 @@ declare const ToastPrimitive: {
   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 };
+//#region src/primitives/badge/badge-label.d.ts
+interface BadgeLabelProps {
+  children?: string;
+  render?: (props: BadgeLabelProps) => React$1.ReactNode;
+  style?: StyleProp<TextStyle>;
+}
+declare function BadgeLabel(props: BadgeLabelProps): React$1.JSX.Element;
+//#endregion
+//#region src/primitives/badge/types.d.ts
+type BadgeState = "default";
+interface BadgeStyles {
+  root?: Partial<Record<BadgeState, BadgeRootProps["style"]>>;
+  label?: Partial<Record<BadgeState, BadgeLabelProps["style"]>>;
+}
+//#endregion
+//#region src/primitives/badge/badge-root.d.ts
+interface BadgeRootProps {
+  children?: React$1.ReactNode;
+  render?: (props: BadgeRootProps) => React$1.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  styles?: BadgeStyles;
+}
+declare function BadgeRoot(props: BadgeRootProps): React$1.JSX.Element;
+//#endregion
+//#region src/primitives/badge/index.d.ts
+declare const BadgePrimitive: {
+  Root: typeof BadgeRoot;
+  Label: typeof BadgeLabel;
+};
+//#endregion
+//#region src/primitives/textarea/types.d.ts
+type TextareaState = "default" | "focused" | "disabled";
+type TextareaStyles = Partial<Record<TextareaState, TextareaPrimitiveBaseProps>>;
+//#endregion
+//#region src/primitives/textarea/textarea.d.ts
+type TextareaPrimitiveBaseProps = Omit<TextInputProps, "onChange"> & {
+  onChange?: TextInputProps["onChangeText"];
+  isDisabled?: boolean;
+};
+interface TextareaPrimitiveProps extends TextareaPrimitiveBaseProps {
+  render?: (props: TextareaPrimitiveProps) => React.ReactNode;
+  styles?: TextareaStyles;
+}
+declare function TextareaPrimitive(props: TextareaPrimitiveProps): react2.JSX.Element;
+//#endregion
+export { FieldStyles as $, CardTitleProps as A, SelectValueProps as B, EmptyMediaProps as C, CardStyles as D, CardRootProps as E, SelectRootProps as F, ButtonStyles as G, ButtonPrimitive as H, SelectStyles as I, InputPrimitiveBaseProps as J, ButtonPrimitiveLabelProps as K, SelectOptionProps as L, SelectPrimitive as M, SelectPortalProps as N, CardFooterProps as O, SelectRootBaseProps as P, FieldPrimitiveRootProps as Q, SelectContentProps as R, EmptyTitleProps as S, CardPrimitive as T, ButtonPrimitiveRootProps as U, SelectTriggerProps as V, ButtonState as W, InputStyles as X, InputPrimitiveProps as Y, FieldPrimitive as Z, AvatarImageProps as _, BadgePrimitive as a, EmptyRootProps as b, BadgeLabelProps as c, ToastStyles as d, FieldErrorProps as et, ToastDescriptionProps as f, AvatarStyles as g, AvatarRootProps as h, TextareaStyles as i, CardHeaderProps as j, CardBodyProps as k, ToastPrimitive as l, AvatarPrimitive as m, TextareaPrimitiveBaseProps as n, FieldLabelProps as nt, BadgeRootProps as o, ToastTitleProps as p, InputPrimitive as q, TextareaPrimitiveProps as r, BadgeStyles as s, TextareaPrimitive as t, FieldDescriptionProps as tt, ToastRootProps as u, AvatarFallbackProps as v, EmptyDescriptionProps as w, EmptyStyles as x, EmptyPrimitive as y, SelectOverlayProps as z };

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import { a as ThemeProvider, n as ToastContainer, o as useTheme } from "./toast-manager-x_SG_xL4.mjs";
-import { l as PortalHost } from "./primitives-B4L9y32H.mjs";
+import { a as ThemeProvider, n as ToastContainer, o as useTheme } from "./toast-manager-BOORCQn8.mjs";
+import { d as PortalHost } from "./primitives-CyDqzNcp.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/index.tsx

package/dist/primitives/index.d.mts

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

package/dist/primitives/index.mjs

@@ -1,3 +1,3 @@
-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";
+import { a as EmptyPrimitive, c as ButtonPrimitive, i as AvatarPrimitive, l as InputPrimitive, n as BadgePrimitive, o as CardPrimitive, r as ToastPrimitive, s as SelectPrimitive, t as TextareaPrimitive, u as FieldPrimitive } from "../primitives-CyDqzNcp.mjs";
 
-export { AvatarPrimitive, ButtonPrimitive, CardPrimitive, EmptyPrimitive, FieldPrimitive, InputPrimitive, SelectPrimitive, ToastPrimitive };
+export { AvatarPrimitive, BadgePrimitive, ButtonPrimitive, CardPrimitive, EmptyPrimitive, FieldPrimitive, InputPrimitive, SelectPrimitive, TextareaPrimitive, ToastPrimitive };

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

@@ -122,14 +122,14 @@ const FieldPrimitive = {
 
 //#endregion
 //#region src/primitives/input/input.tsx
-const calculateState$3 = (props, isFocused) => {
+const calculateState$4 = (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$4(props, isFocused);
 	const composedStyles = [
 		props.styles?.default?.style,
 		props.styles?.[state]?.style,
@@ -168,7 +168,7 @@ const useButtonPrimitive = () => {
 
 //#endregion
 //#region src/primitives/button/button-root.tsx
-const calculateState$2 = (props, isHovered) => {
+const calculateState$3 = (props, isHovered) => {
 	if (props.isDisabled) return "disabled";
 	if (props.isLoading) return "loading";
 	if (isHovered) return "hovered";
@@ -176,7 +176,7 @@ const calculateState$2 = (props, isHovered) => {
 };
 function ButtonRoot(props) {
 	const [isHovered, setIsHovered] = useState(false);
-	const state = calculateState$2(props, isHovered);
+	const state = calculateState$3(props, isHovered);
 	const calculatedStyle = [
 		props.styles?.root?.default,
 		props.styles?.root?.[state],
@@ -246,7 +246,7 @@ const useSelect = () => {
 
 //#endregion
 //#region src/primitives/select/select-root.tsx
-const calculateState$1 = (props) => {
+const calculateState$2 = (props) => {
 	if (props.isDisabled) return "disabled";
 	return "default";
 };
@@ -254,7 +254,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$2(props);
 	const composedStyles = calculateComposedStyles(props.styles, state, "root", props.style);
 	const Component = props.render ?? View;
 	return /* @__PURE__ */ jsx(SelectContext.Provider, {
@@ -370,7 +370,7 @@ function SelectContent(props) {
 
 //#endregion
 //#region src/primitives/select/select-option.tsx
-const calculateState = (selectState, hovered, selected) => {
+const calculateState$1 = (selectState, hovered, selected) => {
 	if (selectState === "disabled") return "disabled";
 	if (selected) return "selected";
 	if (hovered) return "hovered";
@@ -380,7 +380,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$1(select.state, isHovered, isSelected);
 	const composedStyles = calculateComposedStyles(select.styles, optionState, "option", props.style);
 	useEffect(() => {
 		select.setOptions((prev) => {
@@ -661,4 +661,86 @@ 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 = (props, isFocused) => {
+	if (props.isDisabled) return "disabled";
+	if (isFocused) return "focused";
+	return "default";
+};
+function TextareaPrimitive(props) {
+	const [isFocused, setIsFocused] = useState(false);
+	const state = calculateState(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
+export { EmptyPrimitive as a, ButtonPrimitive as c, PortalHost as d, AvatarPrimitive as i, InputPrimitive as l, BadgePrimitive as n, CardPrimitive as o, ToastPrimitive as r, SelectPrimitive as s, TextareaPrimitive as t, FieldPrimitive as u };

package/dist/{toast-manager-x_SG_xL4.mjs → toast-manager-BOORCQn8.mjs}

@@ -1,4 +1,4 @@
-import { t as ToastPrimitive } from "./primitives-B4L9y32H.mjs";
+import { r as ToastPrimitive } from "./primitives-CyDqzNcp.mjs";
 import React, { createContext, useContext, useEffect, useState, useSyncExternalStore } from "react";
 import { StyleSheet, View, useColorScheme } from "react-native";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -143,13 +143,13 @@ const useToastVariantSuccess = () => {
 			maxWidth: 400
 		},
 		title: {
-			color: colors.background,
+			color: colors.foreground,
 			fontSize,
 			fontWeight: "600",
 			fontFamily
 		},
 		description: {
-			color: colors.background,
+			color: colors.foreground,
 			fontSize: fontSize * .875,
 			fontFamily,
 			opacity: .9
@@ -172,13 +172,13 @@ const useToastVariantDanger = () => {
 			maxWidth: 400
 		},
 		title: {
-			color: colors.background,
+			color: colors.foreground,
 			fontSize,
 			fontWeight: "600",
 			fontFamily
 		},
 		description: {
-			color: colors.background,
+			color: colors.foreground,
 			fontSize: fontSize * .875,
 			fontFamily,
 			opacity: .9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@korsolutions/ui",
-  "version": "0.0.17",
+  "version": "0.0.19",
   "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,
+        },
+      },
+    })
+  );
+};

package/src/components/index.ts

@@ -8,3 +8,5 @@ export * from "./link/link";
 export * from "./empty/empty";
 export * from "./avatar/avatar";
 export * from "./toast/index";
+export * from "./badge/badge";
+export * from "./textarea/textarea";

package/src/components/textarea/textarea.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { TextareaVariants } from "./variants";
+import { TextareaPrimitive, TextareaPrimitiveBaseProps } from "@/primitives";
+
+interface TextareaProps extends TextareaPrimitiveBaseProps {
+  variant?: keyof typeof TextareaVariants;
+}
+
+export function Textarea(props: TextareaProps) {
+  const useVariantStyles = TextareaVariants[props.variant ?? "default"];
+  const variantStyles = useVariantStyles();
+
+  return <TextareaPrimitive {...props} styles={variantStyles} />;
+}

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

@@ -0,0 +1,38 @@
+import { TextareaStyles } from "@/primitives";
+import { useThemedStyles } from "@/utils/use-themed-styles";
+
+export function useTextareaVariantDefault(): TextareaStyles {
+  return useThemedStyles(
+    ({ colors, radius, fontFamily, fontSize }): TextareaStyles => ({
+      default: {
+        placeholderTextColor: colors.mutedForeground,
+        selectionColor: colors.primary,
+        style: {
+          borderWidth: 1,
+          borderColor: colors.border,
+          borderRadius: radius,
+          backgroundColor: colors.surface,
+          paddingVertical: 12,
+          paddingHorizontal: 16,
+          outlineWidth: 0,
+          fontFamily,
+          fontSize,
+          minHeight: 120,
+          textAlignVertical: "top",
+          color: colors.foreground,
+        },
+      },
+      focused: {
+        style: {
+          borderColor: colors.primary,
+        },
+      },
+      disabled: {
+        style: {
+          color: colors.mutedForeground,
+          backgroundColor: colors.muted,
+        },
+      },
+    })
+  );
+}

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

@@ -0,0 +1,5 @@
+import { useTextareaVariantDefault } from "./default";
+
+export const TextareaVariants = {
+  default: useTextareaVariantDefault,
+};

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

@@ -15,13 +15,13 @@ export const useToastVariantDanger = (): ToastStyles => {
         maxWidth: 400,
       },
       title: {
-        color: colors.background,
+        color: colors.foreground,
         fontSize: fontSize,
         fontWeight: "600",
         fontFamily,
       },
       description: {
-        color: colors.background,
+        color: colors.foreground,
         fontSize: fontSize * 0.875,
         fontFamily,
         opacity: 0.9,

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

@@ -15,13 +15,13 @@ export const useToastVariantSuccess = (): ToastStyles => {
         maxWidth: 400,
       },
       title: {
-        color: colors.background,
+        color: colors.foreground,
         fontSize: fontSize,
         fontWeight: "600",
         fontFamily,
       },
       description: {
-        color: colors.background,
+        color: colors.foreground,
         fontSize: fontSize * 0.875,
         fontFamily,
         opacity: 0.9,

package/src/primitives/badge/badge-label.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { StyleProp, Text, TextStyle } from "react-native";
+import { useBadge } from "./context";
+import { calculateComposedStyles } from "@/utils/calculate-styles";
+
+export interface BadgeLabelProps {
+  children?: string;
+
+  render?: (props: BadgeLabelProps) => React.ReactNode;
+
+  style?: StyleProp<TextStyle>;
+}
+
+export function BadgeLabel(props: BadgeLabelProps) {
+  const badge = useBadge();
+
+  const composedStyle = calculateComposedStyles(badge.styles, badge.state, "label", props.style);
+
+  const Component = props.render ?? Text;
+  return <Component {...props} style={composedStyle} />;
+}

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

@@ -0,0 +1,30 @@
+import React from "react";
+import { StyleProp, View, ViewStyle } from "react-native";
+import { BadgeStyles } from "./types";
+import { calculateComposedStyles } from "@/utils/calculate-styles";
+import { BadgeContext } from "./context";
+
+export interface BadgeRootProps {
+  children?: React.ReactNode;
+
+  render?: (props: BadgeRootProps) => React.ReactNode;
+
+  style?: StyleProp<ViewStyle>;
+  styles?: BadgeStyles;
+}
+
+export function BadgeRoot(props: BadgeRootProps) {
+  const composedStyle = calculateComposedStyles(props.styles, "default", "root", props.style);
+
+  const Component = props.render ?? View;
+  return (
+    <BadgeContext.Provider
+      value={{
+        state: "default",
+        styles: props.styles,
+      }}
+    >
+      <Component {...props} style={composedStyle} />
+    </BadgeContext.Provider>
+  );
+}

package/src/primitives/badge/context.ts

@@ -0,0 +1,17 @@
+import { createContext, useContext } from "react";
+import { BadgeState, BadgeStyles } from "./types";
+
+export interface BadgeContext {
+  state: BadgeState;
+  styles?: BadgeStyles;
+}
+
+export const BadgeContext = createContext<BadgeContext | undefined>(undefined);
+
+export const useBadge = () => {
+  const context = useContext(BadgeContext);
+  if (!context) {
+    throw new Error("useBadge must be used within a BadgeProvider");
+  }
+  return context;
+};

package/src/primitives/badge/index.ts

@@ -0,0 +1,11 @@
+import { BadgeRoot } from "./badge-root";
+import { BadgeLabel } from "./badge-label";
+
+export const BadgePrimitive = {
+  Root: BadgeRoot,
+  Label: BadgeLabel,
+};
+
+export type { BadgeRootProps } from "./badge-root";
+export type { BadgeLabelProps } from "./badge-label";
+export type { BadgeStyles } from "./types";

package/src/primitives/badge/types.ts

@@ -0,0 +1,9 @@
+import { BadgeRootProps } from "./badge-root";
+import { BadgeLabelProps } from "./badge-label";
+
+export type BadgeState = "default";
+
+export interface BadgeStyles {
+  root?: Partial<Record<BadgeState, BadgeRootProps["style"]>>;
+  label?: Partial<Record<BadgeState, BadgeLabelProps["style"]>>;
+}

package/src/primitives/index.ts

@@ -6,3 +6,5 @@ export * from "./card";
 export * from "./empty";
 export * from "./avatar";
 export * from "./toast";
+export * from "./badge";
+export * from "./textarea";

package/src/primitives/textarea/index.ts

@@ -0,0 +1,2 @@
+export * from "./textarea";
+export type { TextareaStyles } from "./types";

package/src/primitives/textarea/textarea.tsx

@@ -0,0 +1,56 @@
+import { TextInput, TextInputProps } from "react-native";
+import { TextareaState, TextareaStyles } from "./types";
+import { useState } from "react";
+
+export type TextareaPrimitiveBaseProps = Omit<TextInputProps, "onChange"> & {
+  onChange?: TextInputProps["onChangeText"];
+
+  isDisabled?: boolean;
+};
+
+export interface TextareaPrimitiveProps extends TextareaPrimitiveBaseProps {
+  render?: (props: TextareaPrimitiveProps) => React.ReactNode;
+
+  styles?: TextareaStyles;
+}
+
+const calculateState = (props: TextareaPrimitiveProps, isFocused: boolean): TextareaState => {
+  if (props.isDisabled) {
+    return "disabled";
+  }
+  if (isFocused) {
+    return "focused";
+  }
+  return "default";
+};
+
+export function TextareaPrimitive(props: TextareaPrimitiveProps) {
+  const [isFocused, setIsFocused] = useState(false);
+  const state = calculateState(props, isFocused);
+
+  const composedStyles = [props.styles?.default?.style, props.styles?.[state]?.style, props.style];
+  const composedProps = {
+    ...props.styles?.default,
+    ...props.styles?.[state],
+    ...props,
+  };
+  const Component = props.render ?? TextInput;
+  return (
+    <Component
+      {...composedProps}
+      multiline
+      onChange={undefined}
+      onChangeText={props.onChange}
+      onFocus={(e) => {
+        setIsFocused(true);
+        props.onFocus?.(e);
+      }}
+      onBlur={(e) => {
+        setIsFocused(false);
+        props.onBlur?.(e);
+      }}
+      readOnly={props.isDisabled || props.readOnly}
+      style={composedStyles}
+    />
+  );
+}

package/src/primitives/textarea/types.ts

@@ -0,0 +1,5 @@
+import { TextareaPrimitiveBaseProps } from "./textarea";
+
+export type TextareaState = "default" | "focused" | "disabled";
+
+export type TextareaStyles = Partial<Record<TextareaState, TextareaPrimitiveBaseProps>>;