@korsolutions/ui 0.0.11 → 0.0.13

package/README.md

@@ -0,0 +1,2 @@
+# TODO
+- [ ] Line height

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-Cq_-PiOm.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 as TextProps$1, 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
@@ -34,11 +35,11 @@ interface CardProps {
 declare function Card(props: CardProps): React.JSX.Element;
 //#endregion
 //#region src/components/input/variants/default.d.ts
-declare function useInputVariantDefault$1(): InputStyles;
+declare function useInputVariantDefault(): InputStyles;
 //#endregion
 //#region src/components/input/variants/index.d.ts
 declare const InputVariants: {
-  default: typeof useInputVariantDefault$1;
+  default: typeof useInputVariantDefault;
 };
 //#endregion
 //#region src/components/input/input.d.ts
@@ -82,19 +83,39 @@ interface SelectProps<T> extends SelectRootBaseProps {
 }
 declare function Select<T>(props: SelectProps<T>): React.JSX.Element;
 //#endregion
-//#region src/components/text/variants/default.d.ts
-declare function useInputVariantDefault(): TextStyle;
+//#region src/components/typography/variants/body-lg.d.ts
+declare function useTextVariantBodyLg(): TextStyle;
 //#endregion
-//#region src/components/text/variants/index.d.ts
-declare const TextVariants: {
-  default: typeof useInputVariantDefault;
+//#region src/components/typography/variants/body-md.d.ts
+declare function useTextVariantBodyMd(): TextStyle;
+//#endregion
+//#region src/components/typography/variants/body-sm.d.ts
+declare function useTextVariantBodySm(): TextStyle;
+//#endregion
+//#region src/components/typography/variants/heading-lg.d.ts
+declare function useTextVariantHeadingLg(): TextStyle;
+//#endregion
+//#region src/components/typography/variants/heading-md.d.ts
+declare function useTextVariantHeadingMd(): TextStyle;
+//#endregion
+//#region src/components/typography/variants/heading-sm.d.ts
+declare function useTextVariantHeadingSm(): TextStyle;
+//#endregion
+//#region src/components/typography/variants/index.d.ts
+declare const TypographyVariants: {
+  "body-sm": typeof useTextVariantBodySm;
+  "body-md": typeof useTextVariantBodyMd;
+  "body-lg": typeof useTextVariantBodyLg;
+  "heading-sm": typeof useTextVariantHeadingSm;
+  "heading-md": typeof useTextVariantHeadingMd;
+  "heading-lg": typeof useTextVariantHeadingLg;
 };
 //#endregion
-//#region src/components/text/text.d.ts
-interface TextProps extends TextProps$1 {
-  variant?: keyof typeof TextVariants;
+//#region src/components/typography/typography.d.ts
+interface TypographyProps extends TextProps {
+  variant?: keyof typeof TypographyVariants;
 }
-declare function Text(props: TextProps): React.JSX.Element;
+declare function Typography(props: TypographyProps): React.JSX.Element;
 //#endregion
 //#region src/components/link/variants/default.d.ts
 declare function useLinkVariantDefault(): TextStyle;
@@ -105,10 +126,44 @@ declare const LinkVariants: {
 };
 //#endregion
 //#region src/components/link/link.d.ts
-interface LinkProps extends TextProps$1 {
+interface LinkProps extends TextProps {
   href?: string;
   variant?: keyof typeof LinkVariants;
 }
 declare function Link(props: LinkProps): React.JSX.Element;
 //#endregion
-export { Button, Card, Field, FieldProps, Input, Link, LinkProps, Select, SelectOption, SelectProps, Text, TextProps };
+//#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-D5iq6sfL.mjs";
+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 { Linking, Text as Text$1 } from "react-native";
+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();
@@ -12,32 +31,75 @@ const useThemedStyles = (callback) => {
 		colors: theme.colors,
 		radius: theme.radius,
 		fontFamily: theme.fontFamily,
-		letterSpacing: theme.letterSpacing
+		letterSpacing: theme.letterSpacing,
+		fontSize: theme.fontSize
 	});
 };
 
 //#endregion
 //#region src/components/button/variants/default.tsx
 const useButtonVariantDefault = () => {
-	return useThemedStyles(({ colors, radius, fontFamily }) => ({
+	return useThemedStyles(({ colors, radius, fontFamily, fontSize }) => ({
 		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: {
 				color: colors.primaryForeground,
-				fontSize: 16,
+				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/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
 			},
@@ -54,7 +116,10 @@ const useButtonVariantDefault = () => {
 
 //#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
@@ -72,7 +137,7 @@ function Button(props) {
 //#endregion
 //#region src/components/card/variants/default.tsx
 function useCardVariantDefault() {
-	return useThemedStyles(({ colors, radius, fontFamily }) => ({
+	return useThemedStyles(({ colors, radius, fontFamily, fontSize }) => ({
 		root: { default: {
 			borderWidth: 1,
 			borderColor: colors.border,
@@ -84,7 +149,7 @@ function useCardVariantDefault() {
 		header: { default: { paddingHorizontal: 24 } },
 		title: { default: {
 			fontFamily,
-			fontSize: 18,
+			fontSize: fontSize * 1.25,
 			fontWeight: "600",
 			color: colors.foreground
 		} },
@@ -112,8 +177,8 @@ function Card(props) {
 
 //#endregion
 //#region src/components/input/variants/default.tsx
-function useInputVariantDefault$1() {
-	return useThemedStyles(({ colors, radius, fontFamily }) => ({
+function useInputVariantDefault() {
+	return useThemedStyles(({ colors, radius, fontFamily, fontSize }) => ({
 		default: {
 			placeholderTextColor: colors.mutedForeground,
 			selectionColor: colors.primary,
@@ -126,6 +191,7 @@ function useInputVariantDefault$1() {
 				paddingHorizontal: 16,
 				outlineWidth: 0,
 				fontFamily,
+				fontSize,
 				height: 48,
 				color: colors.foreground
 			}
@@ -140,7 +206,7 @@ function useInputVariantDefault$1() {
 
 //#endregion
 //#region src/components/input/variants/index.ts
-const InputVariants = { default: useInputVariantDefault$1 };
+const InputVariants = { default: useInputVariantDefault };
 
 //#endregion
 //#region src/components/input/input.tsx
@@ -156,25 +222,25 @@ function Input(props) {
 //#endregion
 //#region src/components/field/variants/default.tsx
 const useFieldVariantDefault = () => {
-	return useThemedStyles(({ colors, fontFamily }) => ({
+	return useThemedStyles(({ colors, fontFamily, fontSize }) => ({
 		root: {
 			flexDirection: "column",
 			gap: 8
 		},
 		label: {
 			fontFamily,
-			fontSize: 14,
+			fontSize: fontSize * .875,
 			fontWeight: "600",
 			color: colors.foreground
 		},
 		description: {
 			fontFamily,
-			fontSize: 14,
+			fontSize: fontSize * .875,
 			color: colors.mutedForeground
 		},
 		error: {
 			fontFamily,
-			fontSize: 14,
+			fontSize: fontSize * .875,
 			color: colors.danger
 		}
 	}));
@@ -206,7 +272,7 @@ function Field(props) {
 //#endregion
 //#region src/components/select/variants/default.tsx
 function useSelectVariantDefault() {
-	return useThemedStyles(({ colors, radius, fontFamily }) => ({
+	return useThemedStyles(({ colors, radius, fontFamily, fontSize }) => ({
 		root: {
 			default: {},
 			disabled: {}
@@ -226,7 +292,7 @@ function useSelectVariantDefault() {
 		value: {
 			default: {
 				fontFamily,
-				fontSize: 16,
+				fontSize,
 				color: colors.foreground
 			},
 			disabled: { color: colors.mutedForeground }
@@ -234,7 +300,7 @@ function useSelectVariantDefault() {
 		placeholder: {
 			default: {
 				fontFamily,
-				fontSize: 16,
+				fontSize,
 				color: colors.mutedForeground
 			},
 			disabled: { color: colors.mutedForeground }
@@ -259,7 +325,7 @@ function useSelectVariantDefault() {
 				paddingVertical: 12,
 				paddingHorizontal: 16,
 				fontFamily,
-				fontSize: 16,
+				fontSize,
 				color: colors.foreground,
 				borderRadius: radius / 2
 			},
@@ -290,26 +356,91 @@ function Select(props) {
 }
 
 //#endregion
-//#region src/components/text/variants/default.tsx
-function useInputVariantDefault() {
-	return useThemedStyles(({ colors, fontFamily, letterSpacing }) => ({
+//#region src/components/typography/variants/body-lg.tsx
+function useTextVariantBodyLg() {
+	return useThemedStyles(({ colors, fontFamily, letterSpacing, fontSize }) => ({
 		color: colors.foreground,
-		fontSize: 16,
+		fontSize: fontSize * 1.25,
 		fontFamily,
 		letterSpacing
 	}));
 }
 
 //#endregion
-//#region src/components/text/variants/index.ts
-const TextVariants = { default: useInputVariantDefault };
+//#region src/components/typography/variants/body-md.tsx
+function useTextVariantBodyMd() {
+	return useThemedStyles(({ colors, fontFamily, letterSpacing, fontSize }) => ({
+		color: colors.foreground,
+		fontSize,
+		fontFamily,
+		letterSpacing
+	}));
+}
+
+//#endregion
+//#region src/components/typography/variants/body-sm.tsx
+function useTextVariantBodySm() {
+	return useThemedStyles(({ colors, fontFamily, letterSpacing, fontSize }) => ({
+		color: colors.foreground,
+		fontSize: fontSize * .875,
+		fontFamily,
+		letterSpacing
+	}));
+}
+
+//#endregion
+//#region src/components/typography/variants/heading-lg.tsx
+function useTextVariantHeadingLg() {
+	return useThemedStyles(({ colors, fontFamily, letterSpacing, fontSize }) => ({
+		color: colors.foreground,
+		fontSize: fontSize * 1.5,
+		fontFamily,
+		letterSpacing,
+		fontWeight: "600"
+	}));
+}
+
+//#endregion
+//#region src/components/typography/variants/heading-md.tsx
+function useTextVariantHeadingMd() {
+	return useThemedStyles(({ colors, fontFamily, letterSpacing, fontSize }) => ({
+		color: colors.foreground,
+		fontSize: fontSize * 1.25,
+		fontFamily,
+		letterSpacing,
+		fontWeight: "600"
+	}));
+}
+
+//#endregion
+//#region src/components/typography/variants/heading-sm.tsx
+function useTextVariantHeadingSm() {
+	return useThemedStyles(({ colors, fontFamily, letterSpacing, fontSize }) => ({
+		color: colors.foreground,
+		fontSize,
+		fontFamily,
+		letterSpacing,
+		fontWeight: "600"
+	}));
+}
+
+//#endregion
+//#region src/components/typography/variants/index.ts
+const TypographyVariants = {
+	["body-sm"]: useTextVariantBodySm,
+	["body-md"]: useTextVariantBodyMd,
+	["body-lg"]: useTextVariantBodyLg,
+	["heading-sm"]: useTextVariantHeadingSm,
+	["heading-md"]: useTextVariantHeadingMd,
+	["heading-lg"]: useTextVariantHeadingLg
+};
 
 //#endregion
-//#region src/components/text/text.tsx
-function Text(props) {
-	const useVariantStyles = TextVariants[props.variant ?? "default"];
+//#region src/components/typography/typography.tsx
+function Typography(props) {
+	const useVariantStyles = TypographyVariants[props.variant ?? "body-md"];
 	const variantStyles = useVariantStyles();
-	return /* @__PURE__ */ jsx(Text$1, {
+	return /* @__PURE__ */ jsx(Text, {
 		...props,
 		style: variantStyles
 	});
@@ -318,9 +449,9 @@ function Text(props) {
 //#endregion
 //#region src/components/link/variants/default.tsx
 function useLinkVariantDefault() {
-	return useThemedStyles(({ colors, fontFamily, letterSpacing }) => ({
+	return useThemedStyles(({ colors, fontFamily, letterSpacing, fontSize }) => ({
 		color: colors.primary,
-		fontSize: 16,
+		fontSize,
 		fontFamily,
 		textDecorationLine: "underline",
 		letterSpacing
@@ -342,7 +473,7 @@ function Link(props) {
 		}
 		props.onPress?.(e);
 	};
-	return /* @__PURE__ */ jsx(Text$1, {
+	return /* @__PURE__ */ jsx(Text, {
 		...props,
 		style: variantStyles,
 		onPress: handlePress
@@ -350,4 +481,104 @@ function Link(props) {
 }
 
 //#endregion
-export { Button, Card, Field, Input, Link, Select, Text };
+//#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 };