@korsolutions/ui 0.0.11 → 0.0.13

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

@@ -1,6 +1,6 @@
-import * as react3 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): react3.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): react3.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";
@@ -23,6 +23,7 @@ interface Colors {
 type Radius = number;
 type FontFamily = string;
 type LetterSpacing = number;
+type FontSize = number;
 //#endregion
 //#region src/themes/provider.d.ts
 interface ThemeContext {
@@ -31,11 +32,12 @@ interface ThemeContext {
   fontFamily: FontFamily;
   colorScheme: ColorScheme;
   letterSpacing: LetterSpacing;
+  fontSize: FontSize;
   setColorScheme: (scheme: ColorScheme) => void;
   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
@@ -43,6 +45,6 @@ declare const UniversalUIProvider: ({
   children
 }: {
   children: React.ReactNode;
-}) => react0.JSX.Element;
+}) => react2.JSX.Element;
 //#endregion
 export { UniversalUIProvider, useTheme };

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { n as useTheme, t as ThemeProvider } from "./themes-D5iq6sfL.mjs";
+import { n as useTheme, t as ThemeProvider } from "./themes-DXcjBdO2.mjs";
 import { n as PortalHost } from "./portal-DoPaAohb.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 

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-Cq_-PiOm.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/dist/{themes-D5iq6sfL.mjs → themes-DXcjBdO2.mjs}

@@ -45,7 +45,8 @@ const defaultThemeAssets = {
 	},
 	radius: 10,
 	fontFamily: "System",
-	letterSpacing: 0
+	letterSpacing: 0,
+	fontSize: 16
 };
 
 //#endregion
@@ -73,7 +74,8 @@ const ThemeProvider = (props) => {
 			colors,
 			radius: themesAssets.radius,
 			fontFamily: themesAssets.fontFamily,
-			letterSpacing: themesAssets.letterSpacing
+			letterSpacing: themesAssets.letterSpacing,
+			fontSize: themesAssets.fontSize
 		},
 		children: props.children
 	});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@korsolutions/ui",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "license": "MIT",
   "main": "dist/index.mjs",
   "module": "dist/index.mjs",
@@ -8,15 +8,18 @@
   "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"
     }
   },
   "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,19 +1,22 @@
 import { ButtonStyles } from "@/primitives";
+import { hslaSetRelativeLightness } from "@/utils/hsla-utils";
 import { useThemedStyles } from "@/utils/use-themed-styles";
 
 export const useButtonVariantDefault = (): ButtonStyles => {
   return useThemedStyles(
-    ({ colors, radius, fontFamily }): ButtonStyles => ({
+    ({ colors, radius, fontFamily, fontSize }): 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,11 +24,14 @@ export const useButtonVariantDefault = (): ButtonStyles => {
         loading: {
           opacity: 0.8,
         },
+        hovered: {
+          backgroundColor: hslaSetRelativeLightness(colors.primary, -10),
+        },
       },
       label: {
         default: {
           color: colors.primaryForeground,
-          fontSize: 16,
+          fontSize,
           fontWeight: "bold",
           fontFamily,
         },

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/card/variants/default.tsx

@@ -3,7 +3,7 @@ import { useThemedStyles } from "@/utils/use-themed-styles";
 
 export function useCardVariantDefault(): CardStyles {
   return useThemedStyles(
-    ({ colors, radius, fontFamily }): CardStyles => ({
+    ({ colors, radius, fontFamily, fontSize }): CardStyles => ({
       root: {
         default: {
           borderWidth: 1,
@@ -22,7 +22,7 @@ export function useCardVariantDefault(): CardStyles {
       title: {
         default: {
           fontFamily,
-          fontSize: 18,
+          fontSize: fontSize * 1.25,
           fontWeight: "600",
           color: colors.foreground,
         },

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,
+};