@korsolutions/ui 0.0.12 → 0.0.14

package/dist/components/index.d.mts

@@ -1,10 +1,11 @@
-import { E as InputStyles, f as SelectStyles, k as FieldStyles, r as CardStyles, u as SelectRootBaseProps, w as InputPrimitiveBaseProps, x as ButtonStyles } from "../index-Dafk8ZGv.mjs";
+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-_E4x_kNB.mjs";
 import React from "react";
-import { TextProps, TextStyle } from "react-native";
+import { ImageSource, TextProps, TextStyle } from "react-native";
 
 //#region src/components/button/variants/index.d.ts
 declare const ButtonVariants: {
   default: () => ButtonStyles;
+  secondary: () => ButtonStyles;
 };
 //#endregion
 //#region src/components/button/button.d.ts
@@ -131,4 +132,38 @@ interface LinkProps extends TextProps {
 }
 declare function Link(props: LinkProps): React.JSX.Element;
 //#endregion
-export { Button, Card, Field, FieldProps, Input, Link, LinkProps, Select, SelectOption, SelectProps, Typography, TypographyProps };
+//#region src/components/empty/variants/default.d.ts
+declare function useEmptyVariantDefault(): EmptyStyles;
+//#endregion
+//#region src/components/empty/variants/index.d.ts
+declare const EmptyVariants: {
+  default: typeof useEmptyVariantDefault;
+};
+//#endregion
+//#region src/components/empty/empty.d.ts
+interface EmptyProps {
+  children?: React.ReactNode;
+  media?: React.ReactNode;
+  title: string;
+  description?: string;
+  variant?: keyof typeof EmptyVariants;
+}
+declare function Empty(props: EmptyProps): React.JSX.Element;
+//#endregion
+//#region src/components/avatar/variants/default.d.ts
+declare function useAvatarVariantDefault(): AvatarStyles;
+//#endregion
+//#region src/components/avatar/variants/index.d.ts
+declare const AvatarVariants: {
+  default: typeof useAvatarVariantDefault;
+};
+//#endregion
+//#region src/components/avatar/avatar.d.ts
+interface AvatarProps {
+  source?: ImageSource;
+  fallback: string;
+  variant?: keyof typeof AvatarVariants;
+}
+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 };

package/dist/components/index.mjs

@@ -1,10 +1,29 @@
 import { n as useTheme } from "../themes-DXcjBdO2.mjs";
 import "../portal-DoPaAohb.mjs";
-import { a as FieldPrimitive, i as InputPrimitive, n as SelectPrimitive, r as ButtonPrimitive, t as CardPrimitive } from "../primitives-C2enZ5Ku.mjs";
-import React from "react";
+import { a as ButtonPrimitive, i as SelectPrimitive, n as EmptyPrimitive, o as InputPrimitive, r as CardPrimitive, s as FieldPrimitive, t as AvatarPrimitive } from "../primitives-DQMWXbuX.mjs";
+import React, { useState } from "react";
 import { Linking, Text } from "react-native";
 import { jsx, jsxs } from "react/jsx-runtime";
 
+//#region src/utils/hsla-utils.ts
+const hslaSetLightness = (hsla, lightness) => {
+	const parts = hsla.replace(/^hsla?\(|\s+|\)$/g, "").split(",");
+	if (parts.length < 3) throw new Error("Invalid HSLA color format");
+	return `hsla(${parseInt(parts[0], 10)}, ${parseInt(parts[1], 10)}%, ${lightness}%, ${parts[3] ? parseFloat(parts[3]) : 1})`;
+};
+const hslaGetLightness = (hsla) => {
+	const parts = hsla.replace(/^hsla?\(|\s+|\)$/g, "").split(",");
+	if (parts.length < 3) throw new Error("Invalid HSLA color format");
+	return parseInt(parts[2], 10);
+};
+const hslaSetRelativeLightness = (hsla, delta) => {
+	let newLightness = hslaGetLightness(hsla) + delta;
+	if (newLightness > 100) newLightness = 100;
+	if (newLightness < 0) newLightness = 0;
+	return hslaSetLightness(hsla, newLightness);
+};
+
+//#endregion
 //#region src/utils/use-themed-styles.ts
 const useThemedStyles = (callback) => {
 	const theme = useTheme();
@@ -24,16 +43,19 @@ const useButtonVariantDefault = () => {
 		root: {
 			default: {
 				flexDirection: "row",
-				backgroundColor: colors.primary,
 				paddingVertical: 12,
 				paddingHorizontal: 16,
 				borderRadius: radius,
 				gap: 8,
 				alignItems: "center",
-				justifyContent: "center"
+				justifyContent: "center",
+				backgroundColor: colors.primary,
+				borderWidth: 1,
+				borderColor: colors.border
 			},
 			disabled: { opacity: .5 },
-			loading: { opacity: .8 }
+			loading: { opacity: .8 },
+			hovered: { backgroundColor: hslaSetRelativeLightness(colors.primary, -10) }
 		},
 		label: {
 			default: {
@@ -53,9 +75,51 @@ const useButtonVariantDefault = () => {
 	}));
 };
 
+//#endregion
+//#region src/components/button/variants/secondary.tsx
+const useButtonVariantSecondary = () => {
+	return useThemedStyles(({ colors, radius, fontFamily, fontSize }) => ({
+		root: {
+			default: {
+				flexDirection: "row",
+				paddingVertical: 12,
+				paddingHorizontal: 16,
+				borderRadius: radius,
+				gap: 8,
+				alignItems: "center",
+				justifyContent: "center",
+				borderWidth: 1,
+				borderColor: colors.border,
+				backgroundColor: colors.secondary
+			},
+			disabled: { opacity: .5 },
+			loading: { opacity: .8 },
+			hovered: { backgroundColor: hslaSetRelativeLightness(colors.secondary, -1) }
+		},
+		label: {
+			default: {
+				color: colors.foreground,
+				fontSize,
+				fontWeight: "bold",
+				fontFamily
+			},
+			disabled: { color: colors.mutedForeground },
+			loading: { color: colors.mutedForeground }
+		},
+		spinner: {
+			default: { color: colors.primaryForeground },
+			disabled: { color: colors.mutedForeground },
+			loading: { color: colors.mutedForeground }
+		}
+	}));
+};
+
 //#endregion
 //#region src/components/button/variants/index.ts
-const ButtonVariants = { default: useButtonVariantDefault };
+const ButtonVariants = {
+	default: useButtonVariantDefault,
+	secondary: useButtonVariantSecondary
+};
 
 //#endregion
 //#region src/components/button/button.tsx
@@ -417,4 +481,104 @@ function Link(props) {
 }
 
 //#endregion
-export { Button, Card, Field, Input, Link, Select, Typography };
+//#region src/components/empty/variants/default.tsx
+function useEmptyVariantDefault() {
+	return useThemedStyles(({ colors, fontFamily, fontSize }) => ({
+		root: {
+			alignItems: "center",
+			padding: 32,
+			gap: 32
+		},
+		media: {
+			backgroundColor: colors.muted,
+			width: 64,
+			height: 64,
+			borderRadius: "50%",
+			alignItems: "center",
+			justifyContent: "center"
+		},
+		title: {
+			fontFamily,
+			fontSize,
+			color: colors.foreground,
+			textAlign: "center",
+			fontWeight: "600"
+		},
+		description: {
+			fontFamily,
+			fontSize: fontSize * .875,
+			color: colors.mutedForeground,
+			textAlign: "center"
+		}
+	}));
+}
+
+//#endregion
+//#region src/components/empty/variants/index.ts
+const EmptyVariants = { default: useEmptyVariantDefault };
+
+//#endregion
+//#region src/components/empty/empty.tsx
+function Empty(props) {
+	const useVariantStyles = EmptyVariants[props.variant || "default"];
+	const styles = useVariantStyles();
+	return /* @__PURE__ */ jsxs(EmptyPrimitive.Root, {
+		styles,
+		children: [
+			!!props.media && /* @__PURE__ */ jsx(EmptyPrimitive.Media, { children: props.media }),
+			/* @__PURE__ */ jsx(EmptyPrimitive.Title, { children: props.title }),
+			props.description && /* @__PURE__ */ jsx(EmptyPrimitive.Description, { children: props.description }),
+			props.children
+		]
+	});
+}
+
+//#endregion
+//#region src/components/avatar/variants/default.tsx
+function useAvatarVariantDefault() {
+	return useThemedStyles(({ colors, fontFamily, fontSize }) => ({
+		root: {
+			backgroundColor: colors.surface,
+			borderRadius: "50%",
+			overflow: "hidden",
+			width: 64,
+			height: 64,
+			alignItems: "center",
+			justifyContent: "center"
+		},
+		image: {
+			width: "100%",
+			height: "100%",
+			resizeMode: "cover"
+		},
+		fallback: {
+			fontFamily,
+			fontSize,
+			color: colors.foreground,
+			textAlign: "center",
+			verticalAlign: "middle"
+		}
+	}));
+}
+
+//#endregion
+//#region src/components/avatar/variants/index.ts
+const AvatarVariants = { default: useAvatarVariantDefault };
+
+//#endregion
+//#region src/components/avatar/avatar.tsx
+function Avatar(props) {
+	const useVariantStyles = AvatarVariants[props.variant || "default"];
+	const styles = useVariantStyles();
+	const [imageError, setImageError] = useState(false);
+	return /* @__PURE__ */ jsxs(AvatarPrimitive.Root, {
+		styles,
+		children: [props.source && /* @__PURE__ */ jsx(AvatarPrimitive.Image, {
+			source: props.source,
+			onError: () => setImageError(true)
+		}), (!props.source || imageError) && /* @__PURE__ */ jsx(AvatarPrimitive.Fallback, { children: props.fallback })]
+	});
+}
+
+//#endregion
+export { Avatar, Button, Card, Empty, Field, Input, Link, Select, Typography };

package/dist/{index-Dafk8ZGv.d.mts → index-_E4x_kNB.d.mts}

@@ -1,6 +1,6 @@
-import * as react2 from "react";
+import * as react0 from "react";
 import React$1 from "react";
-import { StyleProp, TextInputProps, TextProps, TextStyle, ViewStyle } from "react-native";
+import { ImageSource, ImageStyle, StyleProp, TextInputProps, TextProps, TextStyle, ViewStyle } from "react-native";
 
 //#region src/primitives/field/field-label.d.ts
 interface FieldLabelProps {
@@ -65,7 +65,7 @@ interface InputPrimitiveProps extends InputPrimitiveBaseProps {
   render?: (props: InputPrimitiveProps) => React.ReactNode;
   styles?: InputStyles;
 }
-declare function InputPrimitive(props: InputPrimitiveProps): react2.JSX.Element;
+declare function InputPrimitive(props: InputPrimitiveProps): react0.JSX.Element;
 //#endregion
 //#region src/primitives/button/button-label.d.ts
 interface ButtonPrimitiveLabelProps {
@@ -76,7 +76,7 @@ interface ButtonPrimitiveLabelProps {
 declare function ButtonLabel(props: ButtonPrimitiveLabelProps): React$1.JSX.Element;
 //#endregion
 //#region src/primitives/button/types.d.ts
-type ButtonState = "default" | "disabled" | "loading";
+type ButtonState = "default" | "disabled" | "loading" | "hovered";
 interface ButtonStyles {
   root?: Partial<Record<ButtonState, ButtonPrimitiveRootProps["style"]>>;
   label?: Partial<Record<ButtonState, ButtonPrimitiveLabelProps["style"]>>;
@@ -152,7 +152,7 @@ interface SelectOptionProps {
   render?: (props: SelectOptionProps) => React.ReactElement;
   style?: StyleProp<TextStyle>;
 }
-declare function SelectOption(props: SelectOptionProps): react2.JSX.Element;
+declare function SelectOption(props: SelectOptionProps): react0.JSX.Element;
 //#endregion
 //#region src/primitives/select/types.d.ts
 type SelectState = "default" | "disabled";
@@ -262,4 +262,93 @@ declare const CardPrimitive: {
   Footer: typeof CardFooter;
 };
 //#endregion
-export { FieldErrorProps as A, InputPrimitive as C, FieldPrimitive as D, InputStyles as E, FieldLabelProps as M, FieldPrimitiveRootProps as O, ButtonPrimitiveLabelProps as S, InputPrimitiveProps as T, SelectTriggerProps as _, CardBodyProps as a, ButtonState as b, SelectPrimitive as c, SelectRootProps as d, SelectStyles as f, SelectValueProps as g, SelectOverlayProps as h, CardFooterProps as i, FieldDescriptionProps as j, FieldStyles as k, SelectPortalProps as l, SelectContentProps as m, CardRootProps as n, CardTitleProps as o, SelectOptionProps as p, CardStyles as r, CardHeaderProps as s, CardPrimitive as t, SelectRootBaseProps as u, ButtonPrimitive as v, InputPrimitiveBaseProps as w, ButtonStyles as x, ButtonPrimitiveRootProps as y };
+//#region src/primitives/empty/empty-description.d.ts
+interface EmptyDescriptionProps {
+  children: string;
+  render?: (props: EmptyDescriptionProps) => React$1.ReactNode;
+  style?: StyleProp<TextStyle>;
+}
+declare function EmptyDescription(props: EmptyDescriptionProps): React$1.JSX.Element;
+//#endregion
+//#region src/primitives/empty/empty-media.d.ts
+interface EmptyMediaProps {
+  children: React$1.ReactNode;
+  render?: (props: EmptyMediaProps) => React$1.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+declare function EmptyMedia(props: EmptyMediaProps): React$1.JSX.Element;
+//#endregion
+//#region src/primitives/empty/empty-title.d.ts
+interface EmptyTitleProps {
+  children: string;
+  render?: (props: EmptyTitleProps) => React$1.ReactNode;
+  style?: StyleProp<TextStyle>;
+}
+declare function EmptyTitle(props: EmptyTitleProps): React$1.JSX.Element;
+//#endregion
+//#region src/primitives/empty/types.d.ts
+type EmptyStyles = {
+  root?: EmptyRootProps["style"];
+  media?: EmptyMediaProps["style"];
+  title?: EmptyTitleProps["style"];
+  description?: EmptyDescriptionProps["style"];
+};
+//#endregion
+//#region src/primitives/empty/empty-root.d.ts
+interface EmptyRootProps {
+  children: React$1.ReactNode;
+  render?: (props: EmptyRootProps) => React$1.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  styles?: EmptyStyles;
+}
+declare function EmptyRoot(props: EmptyRootProps): React$1.JSX.Element;
+//#endregion
+//#region src/primitives/empty/index.d.ts
+declare const EmptyPrimitive: {
+  Root: typeof EmptyRoot;
+  Media: typeof EmptyMedia;
+  Title: typeof EmptyTitle;
+  Description: typeof EmptyDescription;
+};
+//#endregion
+//#region src/primitives/avatar/avatar-fallback.d.ts
+interface AvatarFallbackProps {
+  children: string;
+  render?: (props: AvatarFallbackProps) => React$1.ReactNode;
+  style?: StyleProp<TextStyle>;
+}
+declare function AvatarFallback(props: AvatarFallbackProps): React$1.JSX.Element;
+//#endregion
+//#region src/primitives/avatar/avatar-image.d.ts
+interface AvatarImageProps {
+  source: ImageSource;
+  onError: () => void;
+  render?: (props: AvatarImageProps) => React$1.ReactNode;
+  style?: StyleProp<ImageStyle>;
+}
+declare function AvatarImage(props: AvatarImageProps): React$1.JSX.Element;
+//#endregion
+//#region src/primitives/avatar/types.d.ts
+type AvatarStyles = {
+  root?: AvatarRootProps["style"];
+  image?: AvatarImageProps["style"];
+  fallback?: AvatarFallbackProps["style"];
+};
+//#endregion
+//#region src/primitives/avatar/avatar-root.d.ts
+interface AvatarRootProps {
+  children: React$1.ReactNode;
+  render?: (props: AvatarRootProps) => React$1.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  styles?: AvatarStyles;
+}
+declare function AvatarRoot(props: AvatarRootProps): React$1.JSX.Element;
+//#endregion
+//#region src/primitives/avatar/index.d.ts
+declare const AvatarPrimitive: {
+  Root: typeof AvatarRoot;
+  Image: typeof AvatarImage;
+  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 };

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import * as react0 from "react";
+import * as react2 from "react";
 
 //#region src/themes/types.d.ts
 type ThemeName = "default";
@@ -37,7 +37,7 @@ interface ThemeContext {
   setTheme: (themeName: ThemeName) => void;
   themeName: ThemeName;
 }
-declare const ThemeContext: react0.Context<ThemeContext | null>;
+declare const ThemeContext: react2.Context<ThemeContext | null>;
 declare const useTheme: () => ThemeContext;
 //#endregion
 //#region src/index.d.ts
@@ -45,6 +45,6 @@ declare const UniversalUIProvider: ({
   children
 }: {
   children: React.ReactNode;
-}) => react0.JSX.Element;
+}) => react2.JSX.Element;
 //#endregion
 export { UniversalUIProvider, useTheme };

package/dist/primitives/index.d.mts

@@ -1,2 +1,2 @@
-import { A as FieldErrorProps, C as InputPrimitive, D as FieldPrimitive, E as InputStyles, M as FieldLabelProps, O as FieldPrimitiveRootProps, S as ButtonPrimitiveLabelProps, T as InputPrimitiveProps, _ as SelectTriggerProps, a as CardBodyProps, b as ButtonState, c as SelectPrimitive, d as SelectRootProps, f as SelectStyles, g as SelectValueProps, h as SelectOverlayProps, i as CardFooterProps, j as FieldDescriptionProps, k as FieldStyles, l as SelectPortalProps, m as SelectContentProps, n as CardRootProps, o as CardTitleProps, p as SelectOptionProps, r as CardStyles, s as CardHeaderProps, t as CardPrimitive, u as SelectRootBaseProps, v as ButtonPrimitive, w as InputPrimitiveBaseProps, x as ButtonStyles, y as ButtonPrimitiveRootProps } from "../index-Dafk8ZGv.mjs";
-export { ButtonPrimitive, ButtonPrimitiveLabelProps, ButtonPrimitiveRootProps, ButtonState, ButtonStyles, CardBodyProps, CardFooterProps, CardHeaderProps, CardPrimitive, CardRootProps, CardStyles, CardTitleProps, FieldDescriptionProps, FieldErrorProps, FieldLabelProps, FieldPrimitive, FieldPrimitiveRootProps, FieldStyles, InputPrimitive, InputPrimitiveBaseProps, InputPrimitiveProps, InputStyles, SelectContentProps, SelectOptionProps, SelectOverlayProps, SelectPortalProps, SelectPrimitive, SelectRootBaseProps, SelectRootProps, SelectStyles, SelectTriggerProps, SelectValueProps };
+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-_E4x_kNB.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 };

package/dist/primitives/index.mjs

@@ -1,4 +1,4 @@
 import "../portal-DoPaAohb.mjs";
-import { a as FieldPrimitive, i as InputPrimitive, n as SelectPrimitive, r as ButtonPrimitive, t as CardPrimitive } from "../primitives-C2enZ5Ku.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-DQMWXbuX.mjs";
 
-export { ButtonPrimitive, CardPrimitive, FieldPrimitive, InputPrimitive, SelectPrimitive };
+export { AvatarPrimitive, ButtonPrimitive, CardPrimitive, EmptyPrimitive, FieldPrimitive, InputPrimitive, SelectPrimitive };

package/dist/{primitives-C2enZ5Ku.mjs → primitives-DQMWXbuX.mjs}

@@ -1,6 +1,6 @@
 import { t as Portal } from "./portal-DoPaAohb.mjs";
 import React, { createContext, useContext, useEffect, useState } from "react";
-import { ActivityIndicator, Pressable, StyleSheet, Text, TextInput, View } from "react-native";
+import { ActivityIndicator, Image, Pressable, StyleSheet, Text, TextInput, View } from "react-native";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/primitives/field/context.ts
@@ -113,13 +113,15 @@ const useButtonPrimitive = () => {
 
 //#endregion
 //#region src/primitives/button/button-root.tsx
-const calculateState$2 = (props) => {
+const calculateState$2 = (props, isHovered) => {
 	if (props.isDisabled) return "disabled";
 	if (props.isLoading) return "loading";
+	if (isHovered) return "hovered";
 	return "default";
 };
 function ButtonRoot(props) {
-	const state = calculateState$2(props);
+	const [isHovered, setIsHovered] = useState(false);
+	const state = calculateState$2(props, isHovered);
 	const calculatedStyle = [
 		props.styles?.root?.default,
 		props.styles?.root?.[state],
@@ -134,6 +136,8 @@ function ButtonRoot(props) {
 		},
 		children: /* @__PURE__ */ jsx(Container, {
 			...props,
+			onHoverIn: () => setIsHovered(true),
+			onHoverOut: () => setIsHovered(false),
 			style: calculatedStyle
 		})
 	});
@@ -438,4 +442,117 @@ const CardPrimitive = {
 };
 
 //#endregion
-export { FieldPrimitive as a, InputPrimitive as i, SelectPrimitive as n, ButtonPrimitive as r, CardPrimitive as t };
+//#region src/primitives/empty/context.ts
+const EmptyContext = createContext({});
+const useEmpty = () => {
+	const context = useContext(EmptyContext);
+	if (!context) throw new Error("useEmptyContext must be used within a EmptyProvider");
+	return context;
+};
+
+//#endregion
+//#region src/primitives/empty/empty-root.tsx
+function EmptyRoot(props) {
+	const composedStyles = [props.styles?.root, props.style];
+	const Component = props.render ?? View;
+	return /* @__PURE__ */ jsx(EmptyContext.Provider, {
+		value: { styles: props.styles },
+		children: /* @__PURE__ */ jsx(Component, {
+			...props,
+			style: composedStyles
+		})
+	});
+}
+
+//#endregion
+//#region src/primitives/empty/empty-media.tsx
+function EmptyMedia(props) {
+	const composedStyles = [useEmpty().styles?.media, props.style];
+	return /* @__PURE__ */ jsx(props.render ?? View, {
+		...props,
+		style: composedStyles
+	});
+}
+
+//#endregion
+//#region src/primitives/empty/empty-title.tsx
+function EmptyTitle(props) {
+	const composedStyles = [useEmpty().styles?.title, props.style];
+	return /* @__PURE__ */ jsx(props.render ?? Text, {
+		...props,
+		style: composedStyles
+	});
+}
+
+//#endregion
+//#region src/primitives/empty/empty-description.tsx
+function EmptyDescription(props) {
+	const composedStyles = [useEmpty().styles?.description, props.style];
+	return /* @__PURE__ */ jsx(props.render ?? Text, {
+		...props,
+		style: composedStyles
+	});
+}
+
+//#endregion
+//#region src/primitives/empty/index.ts
+const EmptyPrimitive = {
+	Root: EmptyRoot,
+	Media: EmptyMedia,
+	Title: EmptyTitle,
+	Description: EmptyDescription
+};
+
+//#endregion
+//#region src/primitives/avatar/context.ts
+const AvatarContext = createContext(void 0);
+const useAvatar = () => {
+	const context = useContext(AvatarContext);
+	if (!context) throw new Error("useAvatarContext must be used within a AvatarProvider");
+	return context;
+};
+
+//#endregion
+//#region src/primitives/avatar/avatar-root.tsx
+function AvatarRoot(props) {
+	const composedStyles = [props.styles?.root, props.style];
+	const Component = props.render ?? View;
+	return /* @__PURE__ */ jsx(AvatarContext.Provider, {
+		value: { styles: props.styles },
+		children: /* @__PURE__ */ jsx(Component, {
+			...props,
+			style: composedStyles
+		})
+	});
+}
+
+//#endregion
+//#region src/primitives/avatar/avatar-fallback.tsx
+function AvatarFallback(props) {
+	const composedStyles = [useAvatar().styles?.fallback, props.style];
+	return /* @__PURE__ */ jsx(props.render ?? View, {
+		...props,
+		style: composedStyles
+	});
+}
+
+//#endregion
+//#region src/primitives/avatar/avatar-image.tsx
+function AvatarImage(props) {
+	const composedStyles = [useAvatar().styles?.image, props.style];
+	return /* @__PURE__ */ jsx(props.render ?? Image, {
+		...props,
+		style: composedStyles
+	});
+}
+
+//#endregion
+//#region src/primitives/avatar/index.ts
+const AvatarPrimitive = {
+	Root: AvatarRoot,
+	Image: AvatarImage,
+	Fallback: AvatarFallback
+};
+
+//#endregion
+export { ButtonPrimitive as a, SelectPrimitive as i, EmptyPrimitive as n, InputPrimitive as o, CardPrimitive as r, FieldPrimitive as s, AvatarPrimitive as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@korsolutions/ui",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "license": "MIT",
   "main": "dist/index.mjs",
   "module": "dist/index.mjs",
@@ -8,15 +8,23 @@
   "exports": {
     ".": {
       "default": "./dist/index.mjs",
-      "types": "./dist/index.d.mts"
+      "types": "./dist/index.d.mts",
+      "dev-source": "./src/index.ts"
     },
     "./primitives": {
       "default": "./dist/primitives/index.mjs",
-      "types": "./dist/primitives/index.d.mts"
+      "types": "./dist/primitives/index.d.mts",
+      "dev-source": "./src/primitives/index.ts"
     },
     "./components": {
       "default": "./dist/components/index.mjs",
-      "types": "./dist/components/index.d.mts"
+      "types": "./dist/components/index.d.mts",
+      "dev-source": "./src/components/index.ts"
+    },
+    "./hooks": {
+      "default": "./dist/hooks/index.mjs",
+      "types": "./dist/hooks/index.d.mts",
+      "dev-source": "./src/hooks/index.ts"
     }
   },
   "scripts": {

package/src/components/avatar/avatar.tsx

@@ -0,0 +1,23 @@
+import { AvatarPrimitive } from "@/primitives";
+import React, { useState } from "react";
+import { ImageSource } from "react-native";
+import { AvatarVariants } from "./variants";
+
+export interface AvatarProps {
+  source?: ImageSource;
+  fallback: string;
+
+  variant?: keyof typeof AvatarVariants;
+}
+
+export function Avatar(props: AvatarProps) {
+  const useVariantStyles = AvatarVariants[props.variant || "default"];
+  const styles = useVariantStyles();
+  const [imageError, setImageError] = useState(false);
+  return (
+    <AvatarPrimitive.Root styles={styles}>
+      {props.source && <AvatarPrimitive.Image source={props.source} onError={() => setImageError(true)} />}
+      {(!props.source || imageError) && <AvatarPrimitive.Fallback>{props.fallback}</AvatarPrimitive.Fallback>}
+    </AvatarPrimitive.Root>
+  );
+}

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

@@ -0,0 +1,30 @@
+import { AvatarStyles } from "@/primitives";
+import { useThemedStyles } from "@/utils/use-themed-styles";
+
+export function useAvatarVariantDefault(): AvatarStyles {
+  return useThemedStyles(
+    ({ colors, fontFamily, fontSize }): AvatarStyles => ({
+      root: {
+        backgroundColor: colors.surface,
+        borderRadius: "50%",
+        overflow: "hidden",
+        width: 64,
+        height: 64,
+        alignItems: "center",
+        justifyContent: "center",
+      },
+      image: {
+        width: "100%",
+        height: "100%",
+        resizeMode: "cover",
+      },
+      fallback: {
+        fontFamily,
+        fontSize,
+        color: colors.foreground,
+        textAlign: "center",
+        verticalAlign: "middle",
+      },
+    })
+  );
+}

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

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

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

@@ -1,4 +1,5 @@
 import { ButtonStyles } from "@/primitives";
+import { hslaSetRelativeLightness } from "@/utils/hsla-utils";
 import { useThemedStyles } from "@/utils/use-themed-styles";
 
 export const useButtonVariantDefault = (): ButtonStyles => {
@@ -7,13 +8,15 @@ export const useButtonVariantDefault = (): ButtonStyles => {
       root: {
         default: {
           flexDirection: "row",
-          backgroundColor: colors.primary,
           paddingVertical: 12,
           paddingHorizontal: 16,
           borderRadius: radius,
           gap: 8,
           alignItems: "center",
           justifyContent: "center",
+          backgroundColor: colors.primary,
+          borderWidth: 1,
+          borderColor: colors.border,
         },
         disabled: {
           opacity: 0.5,
@@ -21,6 +24,9 @@ export const useButtonVariantDefault = (): ButtonStyles => {
         loading: {
           opacity: 0.8,
         },
+        hovered: {
+          backgroundColor: hslaSetRelativeLightness(colors.primary, -10),
+        },
       },
       label: {
         default: {

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

@@ -1,5 +1,7 @@
 import { useButtonVariantDefault } from "./default";
+import { useButtonVariantSecondary } from "./secondary";
 
 export const ButtonVariants = {
   default: useButtonVariantDefault,
+  secondary: useButtonVariantSecondary,
 };

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

@@ -0,0 +1,58 @@
+import { ButtonStyles } from "@/primitives";
+import { hslaSetRelativeLightness } from "@/utils/hsla-utils";
+import { useThemedStyles } from "@/utils/use-themed-styles";
+
+export const useButtonVariantSecondary = (): ButtonStyles => {
+  return useThemedStyles(
+    ({ colors, radius, fontFamily, fontSize }): ButtonStyles => ({
+      root: {
+        default: {
+          flexDirection: "row",
+          paddingVertical: 12,
+          paddingHorizontal: 16,
+          borderRadius: radius,
+          gap: 8,
+          alignItems: "center",
+          justifyContent: "center",
+          borderWidth: 1,
+          borderColor: colors.border,
+          backgroundColor: colors.secondary,
+        },
+        disabled: {
+          opacity: 0.5,
+        },
+        loading: {
+          opacity: 0.8,
+        },
+        hovered: {
+          backgroundColor: hslaSetRelativeLightness(colors.secondary, -1),
+        },
+      },
+      label: {
+        default: {
+          color: colors.foreground,
+          fontSize,
+          fontWeight: "bold",
+          fontFamily,
+        },
+        disabled: {
+          color: colors.mutedForeground,
+        },
+        loading: {
+          color: colors.mutedForeground,
+        },
+      },
+      spinner: {
+        default: {
+          color: colors.primaryForeground,
+        },
+        disabled: {
+          color: colors.mutedForeground,
+        },
+        loading: {
+          color: colors.mutedForeground,
+        },
+      },
+    })
+  );
+};

package/src/components/empty/empty.tsx

@@ -0,0 +1,26 @@
+import { EmptyPrimitive } from "@/primitives";
+import React from "react";
+import { EmptyVariants } from "./variants";
+
+export interface EmptyProps {
+  children?: React.ReactNode;
+  media?: React.ReactNode;
+  title: string;
+  description?: string;
+
+  variant?: keyof typeof EmptyVariants;
+}
+
+export function Empty(props: EmptyProps) {
+  const useVariantStyles = EmptyVariants[props.variant || "default"];
+  const styles = useVariantStyles();
+
+  return (
+    <EmptyPrimitive.Root styles={styles}>
+      {!!props.media && <EmptyPrimitive.Media>{props.media}</EmptyPrimitive.Media>}
+      <EmptyPrimitive.Title>{props.title}</EmptyPrimitive.Title>
+      {props.description && <EmptyPrimitive.Description>{props.description}</EmptyPrimitive.Description>}
+      {props.children}
+    </EmptyPrimitive.Root>
+  );
+}

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

@@ -0,0 +1,35 @@
+import { EmptyStyles } from "@/primitives";
+import { useThemedStyles } from "@/utils/use-themed-styles";
+
+export function useEmptyVariantDefault(): EmptyStyles {
+  return useThemedStyles(
+    ({ colors, fontFamily, fontSize }): EmptyStyles => ({
+      root: {
+        alignItems: "center",
+        padding: 32,
+        gap: 32,
+      },
+      media: {
+        backgroundColor: colors.muted,
+        width: 64,
+        height: 64,
+        borderRadius: "50%",
+        alignItems: "center",
+        justifyContent: "center",
+      },
+      title: {
+        fontFamily: fontFamily,
+        fontSize: fontSize,
+        color: colors.foreground,
+        textAlign: "center",
+        fontWeight: "600",
+      },
+      description: {
+        fontFamily: fontFamily,
+        fontSize: fontSize * 0.875,
+        color: colors.mutedForeground,
+        textAlign: "center",
+      },
+    })
+  );
+}

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

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

package/src/components/index.ts

@@ -5,3 +5,5 @@ export * from "./field/field";
 export * from "./select/select";
 export * from "./typography/typography";
 export * from "./link/link";
+export * from "./empty/empty";
+export * from "./avatar/avatar";

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export * from "./useScreenSize";

package/src/hooks/useScreenSize.ts

@@ -0,0 +1,41 @@
+import { useWindowDimensions } from "react-native";
+
+export type ScreenSize = "mobile" | "tablet" | "desktop";
+
+interface Response {
+  readonly size: ScreenSize;
+  readonly width: number;
+  readonly height: number;
+  readonly isMobile: boolean;
+  readonly isTablet: boolean;
+  readonly isDesktop: boolean;
+
+  select<T>(specifics: ({ [size in ScreenSize]?: T } & { default: T }) | { [platform in ScreenSize]: T }): T;
+  select<T>(specifics: { [size in ScreenSize]?: T }): T | undefined;
+}
+
+export function useScreenSize(): Response {
+  const windowDimensions = useWindowDimensions();
+
+  const size: ScreenSize = windowDimensions.width < 768 ? "mobile" : windowDimensions.width < 1024 ? "tablet" : "desktop";
+
+  return {
+    size,
+    width: windowDimensions.width,
+    height: windowDimensions.height,
+    isMobile: size === "mobile",
+    isTablet: size === "tablet",
+    isDesktop: size === "desktop",
+    select: (specifics) => {
+      const { mobile, tablet, desktop } = specifics;
+
+      if (size === "mobile" && mobile !== undefined) return mobile;
+      if (size === "tablet" && tablet !== undefined) return tablet;
+      if (size === "desktop" && desktop !== undefined) return desktop;
+      if (!("default" in specifics)) {
+        throw new Error(`Utils.$screenSize.select: No value specified for current screen size: ${size}`);
+      }
+      return specifics.default;
+    },
+  };
+}

package/src/primitives/avatar/avatar-fallback.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { StyleProp, TextStyle, View } from "react-native";
+import { useAvatar } from "./context";
+
+export interface AvatarFallbackProps {
+  children: string;
+  render?: (props: AvatarFallbackProps) => React.ReactNode;
+  style?: StyleProp<TextStyle>;
+}
+
+export function AvatarFallback(props: AvatarFallbackProps) {
+  const avatar = useAvatar();
+  const composedStyles = [avatar.styles?.fallback, props.style];
+  const Component = props.render ?? View;
+  return <Component {...props} style={composedStyles} />;
+}

package/src/primitives/avatar/avatar-image.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { Image, ImageSource, ImageStyle, StyleProp } from "react-native";
+import { useAvatar } from "./context";
+
+export interface AvatarImageProps {
+  source: ImageSource;
+  onError: () => void;
+  render?: (props: AvatarImageProps) => React.ReactNode;
+  style?: StyleProp<ImageStyle>;
+}
+
+export function AvatarImage(props: AvatarImageProps) {
+  const avatar = useAvatar();
+  const composedStyles = [avatar.styles?.image, props.style];
+  const Component = props.render ?? Image;
+  return <Component {...props} style={composedStyles} />;
+}

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

@@ -0,0 +1,21 @@
+import React from "react";
+import { StyleProp, View, ViewStyle } from "react-native";
+import { AvatarContext } from "./context";
+import { AvatarStyles } from "./types";
+
+export interface AvatarRootProps {
+  children: React.ReactNode;
+  render?: (props: AvatarRootProps) => React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  styles?: AvatarStyles;
+}
+
+export function AvatarRoot(props: AvatarRootProps) {
+  const composedStyles = [props.styles?.root, props.style];
+  const Component = props.render ?? View;
+  return (
+    <AvatarContext.Provider value={{ styles: props.styles }}>
+      <Component {...props} style={composedStyles} />
+    </AvatarContext.Provider>
+  );
+}

package/src/primitives/avatar/context.ts

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

package/src/primitives/avatar/index.ts

@@ -0,0 +1,14 @@
+import { AvatarRoot } from "./avatar-root";
+import { AvatarFallback } from "./avatar-fallback";
+import { AvatarImage } from "./avatar-image";
+
+export const AvatarPrimitive = {
+  Root: AvatarRoot,
+  Image: AvatarImage,
+  Fallback: AvatarFallback,
+};
+
+export type { AvatarRootProps } from "./avatar-root";
+export type { AvatarFallbackProps } from "./avatar-fallback";
+export type { AvatarImageProps } from "./avatar-image";
+export type { AvatarStyles } from "./types";

package/src/primitives/avatar/types.ts

@@ -0,0 +1,9 @@
+import { AvatarFallbackProps } from "./avatar-fallback";
+import { AvatarImageProps } from "./avatar-image";
+import { AvatarRootProps } from "./avatar-root";
+
+export type AvatarStyles = {
+  root?: AvatarRootProps["style"];
+  image?: AvatarImageProps["style"];
+  fallback?: AvatarFallbackProps["style"];
+};

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { Pressable, StyleProp, ViewStyle } from "react-native";
 import { ButtonStyles, ButtonState } from "./types";
 import { ButtonPrimitiveContext } from "./button-context";
@@ -17,25 +17,30 @@ export interface ButtonPrimitiveRootProps {
   render?: (props: this) => React.ReactElement;
 }
 
-const calculateState = (props: ButtonPrimitiveRootProps): ButtonState => {
+const calculateState = (props: ButtonPrimitiveRootProps, isHovered: boolean): ButtonState => {
   if (props.isDisabled) {
     return "disabled";
   }
   if (props.isLoading) {
     return "loading";
   }
+  if (isHovered) {
+    return "hovered";
+  }
   return "default";
 };
 
 export function ButtonRoot(props: ButtonPrimitiveRootProps) {
-  const state = calculateState(props);
+  const [isHovered, setIsHovered] = useState(false);
+
+  const state = calculateState(props, isHovered);
 
   const calculatedStyle = [props.styles?.root?.default, props.styles?.root?.[state], props.style];
 
   const Container = props.render ?? Pressable;
   return (
     <ButtonPrimitiveContext.Provider value={{ disabled: props.isDisabled, state, styles: props.styles }}>
-      <Container {...props} style={calculatedStyle} />
+      <Container {...props} onHoverIn={() => setIsHovered(true)} onHoverOut={() => setIsHovered(false)} style={calculatedStyle} />
     </ButtonPrimitiveContext.Provider>
   );
 }

package/src/primitives/button/types.ts

@@ -1,7 +1,7 @@
 import { ButtonPrimitiveRootProps } from "./button-root";
 import { ButtonPrimitiveLabelProps } from "./button-label";
 
-export type ButtonState = "default" | "disabled" | "loading";
+export type ButtonState = "default" | "disabled" | "loading" | "hovered";
 
 export interface ButtonStyles {
   root?: Partial<Record<ButtonState, ButtonPrimitiveRootProps["style"]>>;

package/src/primitives/empty/context.ts

@@ -0,0 +1,16 @@
+import { createContext, useContext } from "react";
+import { EmptyStyles } from "./types";
+
+export interface EmptyContext {
+  styles?: EmptyStyles;
+}
+
+export const EmptyContext = createContext<EmptyContext>({});
+
+export const useEmpty = () => {
+  const context = useContext(EmptyContext);
+  if (!context) {
+    throw new Error("useEmptyContext must be used within a EmptyProvider");
+  }
+  return context;
+};

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

@@ -0,0 +1,16 @@
+import React from "react";
+import { StyleProp, Text, TextStyle } from "react-native";
+import { useEmpty } from "./context";
+
+export interface EmptyDescriptionProps {
+  children: string;
+  render?: (props: EmptyDescriptionProps) => React.ReactNode;
+  style?: StyleProp<TextStyle>;
+}
+
+export function EmptyDescription(props: EmptyDescriptionProps) {
+  const empty = useEmpty();
+  const composedStyles = [empty.styles?.description, props.style];
+  const Component = props.render ?? Text;
+  return <Component {...props} style={composedStyles} />;
+}

package/src/primitives/empty/empty-media.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { StyleProp, View, ViewStyle } from "react-native";
+import { useEmpty } from "./context";
+
+export interface EmptyMediaProps {
+  children: React.ReactNode;
+  render?: (props: EmptyMediaProps) => React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function EmptyMedia(props: EmptyMediaProps) {
+  const empty = useEmpty();
+  const composedStyles = [empty.styles?.media, props.style];
+  const Component = props.render ?? View;
+  return <Component {...props} style={composedStyles} />;
+}

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

@@ -0,0 +1,21 @@
+import React from "react";
+import { StyleProp, View, ViewStyle } from "react-native";
+import { EmptyContext } from "./context";
+import { EmptyStyles } from "./types";
+
+export interface EmptyRootProps {
+  children: React.ReactNode;
+  render?: (props: EmptyRootProps) => React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  styles?: EmptyStyles;
+}
+
+export function EmptyRoot(props: EmptyRootProps) {
+  const composedStyles = [props.styles?.root, props.style];
+  const Component = props.render ?? View;
+  return (
+    <EmptyContext.Provider value={{ styles: props.styles }}>
+      <Component {...props} style={composedStyles} />
+    </EmptyContext.Provider>
+  );
+}

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

@@ -0,0 +1,16 @@
+import React from "react";
+import { useEmpty } from "./context";
+import { StyleProp, Text, TextStyle } from "react-native";
+
+export interface EmptyTitleProps {
+  children: string;
+  render?: (props: EmptyTitleProps) => React.ReactNode;
+  style?: StyleProp<TextStyle>;
+}
+
+export function EmptyTitle(props: EmptyTitleProps) {
+  const empty = useEmpty();
+  const composedStyles = [empty.styles?.title, props.style];
+  const Component = props.render ?? Text;
+  return <Component {...props} style={composedStyles} />;
+}

package/src/primitives/empty/index.ts

@@ -0,0 +1,17 @@
+import { EmptyRoot } from "./empty-root";
+import { EmptyMedia } from "./empty-media";
+import { EmptyTitle } from "./empty-title";
+import { EmptyDescription } from "./empty-description";
+
+export const EmptyPrimitive = {
+  Root: EmptyRoot,
+  Media: EmptyMedia,
+  Title: EmptyTitle,
+  Description: EmptyDescription,
+};
+
+export type { EmptyRootProps } from "./empty-root";
+export type { EmptyMediaProps } from "./empty-media";
+export type { EmptyTitleProps } from "./empty-title";
+export type { EmptyDescriptionProps } from "./empty-description";
+export type { EmptyStyles } from "./types";

package/src/primitives/empty/types.ts

@@ -0,0 +1,11 @@
+import { EmptyDescriptionProps } from "./empty-description";
+import { EmptyMediaProps } from "./empty-media";
+import { EmptyRootProps } from "./empty-root";
+import { EmptyTitleProps } from "./empty-title";
+
+export type EmptyStyles = {
+  root?: EmptyRootProps["style"];
+  media?: EmptyMediaProps["style"];
+  title?: EmptyTitleProps["style"];
+  description?: EmptyDescriptionProps["style"];
+};

package/src/primitives/index.ts

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

package/src/utils/hsla-utils.ts

@@ -8,3 +8,29 @@ export const hslaSetAlpha = (hsla: string, alpha: number): string => {
   const l = parseInt(parts[2], 10);
   return `hsla(${h}, ${s}%, ${l}%, ${alpha})`;
 };
+
+export const hslaSetLightness = (hsla: string, lightness: number): string => {
+  const parts = hsla.replace(/^hsla?\(|\s+|\)$/g, "").split(",");
+  if (parts.length < 3) {
+    throw new Error("Invalid HSLA color format");
+  }
+  const h = parseInt(parts[0], 10);
+  const s = parseInt(parts[1], 10);
+  return `hsla(${h}, ${s}%, ${lightness}%, ${parts[3] ? parseFloat(parts[3]) : 1})`;
+};
+
+export const hslaGetLightness = (hsla: string): number => {
+  const parts = hsla.replace(/^hsla?\(|\s+|\)$/g, "").split(",");
+  if (parts.length < 3) {
+    throw new Error("Invalid HSLA color format");
+  }
+  return parseInt(parts[2], 10);
+};
+
+export const hslaSetRelativeLightness = (hsla: string, delta: number): string => {
+  const currentLightness = hslaGetLightness(hsla);
+  let newLightness = currentLightness + delta;
+  if (newLightness > 100) newLightness = 100;
+  if (newLightness < 0) newLightness = 0;
+  return hslaSetLightness(hsla, newLightness);
+};

package/tsconfig.json

@@ -4,6 +4,7 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
+    "customConditions": ["dev-source"],
     "paths": {
       "@/*": ["./src/*"]
     }