@korsolutions/ui 0.0.48 → 0.0.50

package/dist/typescript/src/primitives/list/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/primitives/list/index.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,IAAI,+EAAW,CAAC;AAE7B,YAAY,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}

package/dist/typescript/src/primitives/list/list-root.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+export interface ListProps<T> {
+    data: readonly T[];
+    keyExtractor: (item: T, index: number) => string;
+    renderItem: (info: {
+        item: T;
+        index: number;
+    }) => React.ReactElement;
+    renderEmpty?: () => React.ReactElement;
+    renderSeparator?: () => React.ReactElement;
+}
+export declare const ListRoot: <T>(props: ListProps<T>) => React.JSX.Element;
+//# sourceMappingURL=list-root.d.ts.map

package/dist/typescript/src/primitives/list/list-root.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-root.d.ts","sourceRoot":"","sources":["../../../../../src/primitives/list/list-root.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,SAAS,CAAC,CAAC;IAC1B,IAAI,EAAE,SAAS,CAAC,EAAE,CAAC;IACnB,YAAY,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACjD,UAAU,EAAE,CAAC,IAAI,EAAE;QAAE,IAAI,EAAE,CAAC,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,KAAK,CAAC,YAAY,CAAC;IACrE,WAAW,CAAC,EAAE,MAAM,KAAK,CAAC,YAAY,CAAC;IACvC,eAAe,CAAC,EAAE,MAAM,KAAK,CAAC,YAAY,CAAC;CAC5C;AAED,eAAO,MAAM,QAAQ,GAAI,CAAC,EAAG,OAAO,SAAS,CAAC,CAAC,CAAC,sBAY/C,CAAC"}

package/dist/typescript/src/primitives/typography/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./typography";
+//# sourceMappingURL=index.d.ts.map

package/dist/typescript/src/primitives/typography/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/primitives/typography/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/typescript/src/{components → primitives}/typography/typography.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../../../../src/components/typography/typography.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAkB,KAAK,SAAS,IAAI,WAAW,EAAE,MAAM,cAAc,CAAC;AAC7E,OAAO,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAEhD,MAAM,WAAW,eAAgB,SAAQ,WAAW;IAClD,OAAO,CAAC,EAAE,MAAM,OAAO,kBAAkB,CAAC;CAC3C;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,qBAIhD"}
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../../../../src/primitives/typography/typography.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAkB,KAAK,SAAS,IAAI,WAAW,EAAE,MAAM,cAAc,CAAC;AAC7E,OAAO,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAEhD,MAAM,WAAW,eAAgB,SAAQ,WAAW;IAClD,OAAO,CAAC,EAAE,MAAM,OAAO,kBAAkB,CAAC;CAC3C;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,qBAMhD"}

package/dist/typescript/src/{components → primitives}/typography/variants/body-lg.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"body-lg.d.ts","sourceRoot":"","sources":["../../../../../../src/components/typography/variants/body-lg.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,wBAAgB,oBAAoB,IAAI,SAAS,CAShD"}
+{"version":3,"file":"body-lg.d.ts","sourceRoot":"","sources":["../../../../../../src/primitives/typography/variants/body-lg.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,wBAAgB,oBAAoB,IAAI,SAAS,CAShD"}

package/dist/typescript/src/{components → primitives}/typography/variants/body-md.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"body-md.d.ts","sourceRoot":"","sources":["../../../../../../src/components/typography/variants/body-md.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,wBAAgB,oBAAoB,IAAI,SAAS,CAShD"}
+{"version":3,"file":"body-md.d.ts","sourceRoot":"","sources":["../../../../../../src/primitives/typography/variants/body-md.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,wBAAgB,oBAAoB,IAAI,SAAS,CAShD"}

package/dist/typescript/src/{components → primitives}/typography/variants/body-sm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"body-sm.d.ts","sourceRoot":"","sources":["../../../../../../src/components/typography/variants/body-sm.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,wBAAgB,oBAAoB,IAAI,SAAS,CAShD"}
+{"version":3,"file":"body-sm.d.ts","sourceRoot":"","sources":["../../../../../../src/primitives/typography/variants/body-sm.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,wBAAgB,oBAAoB,IAAI,SAAS,CAShD"}

package/dist/typescript/src/{components → primitives}/typography/variants/heading-lg.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"heading-lg.d.ts","sourceRoot":"","sources":["../../../../../../src/components/typography/variants/heading-lg.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,wBAAgB,uBAAuB,IAAI,SAAS,CAUnD"}
+{"version":3,"file":"heading-lg.d.ts","sourceRoot":"","sources":["../../../../../../src/primitives/typography/variants/heading-lg.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,wBAAgB,uBAAuB,IAAI,SAAS,CAUnD"}

package/dist/typescript/src/{components → primitives}/typography/variants/heading-md.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"heading-md.d.ts","sourceRoot":"","sources":["../../../../../../src/components/typography/variants/heading-md.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,wBAAgB,uBAAuB,IAAI,SAAS,CAUnD"}
+{"version":3,"file":"heading-md.d.ts","sourceRoot":"","sources":["../../../../../../src/primitives/typography/variants/heading-md.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,wBAAgB,uBAAuB,IAAI,SAAS,CAUnD"}

package/dist/typescript/src/{components → primitives}/typography/variants/heading-sm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"heading-sm.d.ts","sourceRoot":"","sources":["../../../../../../src/components/typography/variants/heading-sm.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,wBAAgB,uBAAuB,IAAI,SAAS,CAUnD"}
+{"version":3,"file":"heading-sm.d.ts","sourceRoot":"","sources":["../../../../../../src/primitives/typography/variants/heading-sm.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,wBAAgB,uBAAuB,IAAI,SAAS,CAUnD"}

package/dist/typescript/src/{components → primitives}/typography/variants/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/typography/variants/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;AACjD,OAAO,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;AACjD,OAAO,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;AACjD,OAAO,EAAE,uBAAuB,EAAE,MAAM,cAAc,CAAC;AACvD,OAAO,EAAE,uBAAuB,EAAE,MAAM,cAAc,CAAC;AACvD,OAAO,EAAE,uBAAuB,EAAE,MAAM,cAAc,CAAC;AAEvD,eAAO,MAAM,kBAAkB;;;;;;;CAO9B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/primitives/typography/variants/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;AACjD,OAAO,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;AACjD,OAAO,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;AACjD,OAAO,EAAE,uBAAuB,EAAE,MAAM,cAAc,CAAC;AACvD,OAAO,EAAE,uBAAuB,EAAE,MAAM,cAAc,CAAC;AACvD,OAAO,EAAE,uBAAuB,EAAE,MAAM,cAAc,CAAC;AAEvD,eAAO,MAAM,kBAAkB;;;;;;;CAO9B,CAAC"}

package/dist/typescript/src/themes/provider.d.ts

@@ -1,3 +1,4 @@
+import type { DeepPartial } from "../types/util.types";
 import { type PropsWithChildren } from "react";
 import type { Colors, ColorScheme, FontFamily, FontSize, LetterSpacing, Radius, ThemeAssets } from "./types";
 interface ThemeContext {
@@ -11,7 +12,7 @@ interface ThemeContext {
 }
 declare const ThemeContext: import("react").Context<ThemeContext | null>;
 export interface ThemeProviderProps extends PropsWithChildren {
-    theme?: Partial<ThemeAssets>;
+    theme?: DeepPartial<ThemeAssets>;
 }
 export declare const ThemeProvider: (props: ThemeProviderProps) => import("react").JSX.Element;
 export declare const useTheme: () => ThemeContext;

package/dist/typescript/src/themes/provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../../../src/themes/provider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,iBAAiB,EAAmC,MAAM,OAAO,CAAC;AAG/F,OAAO,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAG7G,UAAU,YAAY;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,UAAU,CAAC;IACvB,WAAW,EAAE,WAAW,CAAC;IACzB,aAAa,EAAE,aAAa,CAAC;IAC7B,QAAQ,EAAE,QAAQ,CAAC;IACnB,cAAc,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;CAC/C;AAED,QAAA,MAAM,YAAY,8CAA2C,CAAC;AAE9D,MAAM,WAAW,kBAAmB,SAAQ,iBAAiB;IAC3D,KAAK,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;CAC9B;AAED,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,gCA+BtD,CAAC;AAEF,eAAO,MAAM,QAAQ,oBAMpB,CAAC"}
+{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../../../src/themes/provider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAiB,KAAK,iBAAiB,EAAmC,MAAM,OAAO,CAAC;AAG/F,OAAO,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAG7G,UAAU,YAAY;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,UAAU,CAAC;IACvB,WAAW,EAAE,WAAW,CAAC;IACzB,aAAa,EAAE,aAAa,CAAC;IAC7B,QAAQ,EAAE,QAAQ,CAAC;IACnB,cAAc,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;CAC/C;AAED,QAAA,MAAM,YAAY,8CAA2C,CAAC;AAE9D,MAAM,WAAW,kBAAmB,SAAQ,iBAAiB;IAC3D,KAAK,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;CAClC;AAED,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,gCA+BtD,CAAC;AAEF,eAAO,MAAM,QAAQ,oBAMpB,CAAC"}

package/dist/typescript/src/themes/utils.d.ts

@@ -1,3 +1,4 @@
+import type { DeepPartial } from "../types/util.types";
 import type { ThemeAssets } from "./types";
-export declare function mergeThemeAssets(base: ThemeAssets, override: Partial<ThemeAssets>): ThemeAssets;
+export declare function mergeThemeAssets(base: ThemeAssets, override: DeepPartial<ThemeAssets>): ThemeAssets;
 //# sourceMappingURL=utils.d.ts.map

package/dist/typescript/src/themes/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/themes/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,OAAO,CAAC,WAAW,CAAC,GAAG,WAAW,CAW/F"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/themes/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,CAAC,WAAW,CAAC,GAAG,WAAW,CAWnG"}

package/dist/typescript/src/types/util.types.d.ts

@@ -0,0 +1,4 @@
+export type DeepPartial<T> = T extends object ? {
+    [P in keyof T]?: DeepPartial<T[P]>;
+} : T;
+//# sourceMappingURL=util.types.d.ts.map

package/dist/typescript/src/types/util.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.types.d.ts","sourceRoot":"","sources":["../../../../src/types/util.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI,CAAC,SAAS,MAAM,GACzC;KACG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CACnC,GACD,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@korsolutions/ui",
-  "version": "0.0.48",
+  "version": "0.0.50",
   "license": "MIT",
   "repository": {
     "type": "git",

package/src/components/index.ts

@@ -4,7 +4,6 @@ export * from "./avatar/avatar";
 export * from "./badge/badge";
 export * from "./button/button";
 export * from "./calendar/calendar";
-export * from "./card/card";
 export * from "./checkbox";
 export * from "./dropdown-menu/dropdown-menu";
 export * from "./empty/empty";
@@ -17,4 +16,3 @@ export * from "./select/select";
 export * from "./tabs";
 export * from "./textarea/textarea";
 export * from "./toast/index";
-export * from "./typography/typography";

package/src/index.tsx

@@ -31,4 +31,8 @@ export { useTheme } from "./themes/provider";
 export * from "./themes/types";
 
 export * from "./primitives/alert";
+export * from "./primitives/card";
+export * from "./primitives/list";
+export * from "./primitives/typography";
+
 export * from "./safe-area";

package/src/primitives/card/card-body.tsx

@@ -1,3 +1,4 @@
+import type { PropsWithRender } from "@/types/props.types";
 import { calculateComposedStyles } from "@/utils/calculate-styles";
 import React from "react";
 import { type StyleProp, View, type ViewStyle } from "react-native";
@@ -6,12 +7,10 @@ import { useCard } from "./context";
 export interface CardBodyProps {
   children?: React.ReactNode;
 
-  render?: (props: CardBodyProps) => React.ReactNode;
-
   style?: StyleProp<ViewStyle>;
 }
 
-export function CardBody(props: CardBodyProps) {
+export function CardBody(props: PropsWithRender<CardBodyProps>) {
   const card = useCard();
 
   const composedStyle = calculateComposedStyles(card.styles, card.state, "body", props.style);

package/src/primitives/card/card-footer.tsx

@@ -1,3 +1,4 @@
+import type { PropsWithRender } from "@/types/props.types";
 import { calculateComposedStyles } from "@/utils/calculate-styles";
 import React from "react";
 import { type StyleProp, View, type ViewStyle } from "react-native";
@@ -6,12 +7,10 @@ import { useCard } from "./context";
 export interface CardFooterProps {
   children?: React.ReactNode;
 
-  render?: (props: CardFooterProps) => React.ReactNode;
-
   style?: StyleProp<ViewStyle>;
 }
 
-export function CardFooter(props: CardFooterProps) {
+export function CardFooter(props: PropsWithRender<CardFooterProps>) {
   const card = useCard();
 
   const composedStyle = calculateComposedStyles(card.styles, card.state, "footer", props.style);

package/src/primitives/card/card-header.tsx

@@ -1,3 +1,4 @@
+import type { PropsWithRender } from "@/types/props.types";
 import { calculateComposedStyles } from "@/utils/calculate-styles";
 import React from "react";
 import { type StyleProp, View, type ViewStyle } from "react-native";
@@ -6,12 +7,10 @@ import { useCard } from "./context";
 export interface CardHeaderProps {
   children?: React.ReactNode;
 
-  render?: (props: CardHeaderProps) => React.ReactNode;
-
   style?: StyleProp<ViewStyle>;
 }
 
-export function CardHeader(props: CardHeaderProps) {
+export function CardHeader(props: PropsWithRender<CardHeaderProps>) {
   const card = useCard();
 
   const composedStyle = calculateComposedStyles(card.styles, card.state, "header", props.style);

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

@@ -1,27 +1,28 @@
+import type { PropsWithRender } from "@/types/props.types";
 import { calculateComposedStyles } from "@/utils/calculate-styles";
 import React from "react";
 import { type StyleProp, View, type ViewStyle } from "react-native";
 import { CardContext } from "./context";
-import type { CardStyles } from "./types";
+import { CardVariants } from "./variants";
 
 export interface CardRootProps {
+  variant?: keyof typeof CardVariants;
   children?: React.ReactNode;
 
-  render?: (props: CardRootProps) => React.ReactNode;
-
   style?: StyleProp<ViewStyle>;
-  styles?: CardStyles;
 }
 
-export function CardRoot(props: CardRootProps) {
-  const composedStyle = calculateComposedStyles(props.styles, "default", "root", props.style);
+export function CardRoot(props: PropsWithRender<CardRootProps>) {
+  const variantStyles = CardVariants[props.variant || "default"]();
+
+  const composedStyle = calculateComposedStyles(variantStyles, "default", "root", props.style);
 
   const Component = props.render ?? View;
   return (
     <CardContext.Provider
       value={{
         state: "default",
-        styles: props.styles,
+        styles: variantStyles,
       }}
     >
       <Component {...props} style={composedStyle} />

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

@@ -1,17 +1,17 @@
+import type { TextChildren } from "@/types/element.types";
+import type { PropsWithRender } from "@/types/props.types";
 import { calculateComposedStyles } from "@/utils/calculate-styles";
 import React from "react";
 import { type StyleProp, Text, type TextStyle } from "react-native";
 import { useCard } from "./context";
 
 export interface CardTitleProps {
-  children?: string;
-
-  render?: (props: CardTitleProps) => React.ReactNode;
+  children?: TextChildren;
 
   style?: StyleProp<TextStyle>;
 }
 
-export function CardTitle(props: CardTitleProps) {
+export function CardTitle(props: PropsWithRender<CardTitleProps>) {
   const card = useCard();
 
   const composedStyle = calculateComposedStyles(card.styles, card.state, "title", props.style);

package/src/primitives/card/index.ts

@@ -1,10 +1,10 @@
-import { CardRoot } from "./card-root";
-import { CardHeader } from "./card-header";
-import { CardTitle } from "./card-title";
 import { CardBody } from "./card-body";
 import { CardFooter } from "./card-footer";
+import { CardHeader } from "./card-header";
+import { CardRoot } from "./card-root";
+import { CardTitle } from "./card-title";
 
-export const CardPrimitive = {
+export const Card = {
   Root: CardRoot,
   Header: CardHeader,
   Title: CardTitle,
@@ -12,9 +12,9 @@ export const CardPrimitive = {
   Footer: CardFooter,
 };
 
-export type { CardRootProps } from "./card-root";
-export type { CardHeaderProps } from "./card-header";
-export type { CardTitleProps } from "./card-title";
 export type { CardBodyProps } from "./card-body";
 export type { CardFooterProps } from "./card-footer";
+export type { CardHeaderProps } from "./card-header";
+export type { CardRootProps } from "./card-root";
+export type { CardTitleProps } from "./card-title";
 export type { CardStyles } from "./types";

package/src/{components → primitives}/card/variants/default.tsx

@@ -10,13 +10,12 @@ export function useCardVariantDefault(): CardStyles {
           borderColor: colors.border,
           borderRadius: radius,
           backgroundColor: colors.surface,
-          paddingVertical: 24,
-          gap: 24,
         },
       },
       header: {
         default: {
           paddingHorizontal: 24,
+          paddingTop: 24,
         },
       },
       title: {
@@ -29,10 +28,18 @@ export function useCardVariantDefault(): CardStyles {
       },
       body: {
         default: {
+          padding: 24,
+          gap: 24,
+        },
+      },
+      footer: {
+        default: {
+          flexDirection: "row",
           paddingHorizontal: 24,
+          paddingBottom: 24,
           gap: 24,
         },
       },
-    })
+    }),
   );
 }

package/src/primitives/index.ts

@@ -11,6 +11,7 @@ export * from "./dropdown-menu";
 export * from "./empty";
 export * from "./field";
 export * from "./input";
+export * from "./list";
 export * from "./popover";
 export * from "./portal";
 export * from "./progress";
@@ -18,3 +19,4 @@ export * from "./select";
 export * from "./tabs";
 export * from "./textarea";
 export * from "./toast";
+export * from "./typography";

package/src/primitives/list/index.ts

@@ -0,0 +1,5 @@
+import { ListRoot } from "./list-root";
+
+export const List = ListRoot;
+
+export type { ListProps } from "./list-root";

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

@@ -0,0 +1,23 @@
+import React from "react";
+
+export interface ListProps<T> {
+  data: readonly T[];
+  keyExtractor: (item: T, index: number) => string;
+  renderItem: (info: { item: T; index: number }) => React.ReactElement;
+  renderEmpty?: () => React.ReactElement;
+  renderSeparator?: () => React.ReactElement;
+}
+
+export const ListRoot = <T,>(props: ListProps<T>) => {
+  return (
+    <>
+      {props.data.length === 0 && props.renderEmpty?.()}
+      {props.data.map((item, index) => (
+        <React.Fragment key={props.keyExtractor(item, index) ?? index}>
+          {props.renderItem({ item, index })}
+          {props.data.length - 1 !== index && props.renderSeparator?.()}
+        </React.Fragment>
+      ))}
+    </>
+  );
+};

package/src/primitives/typography/index.ts

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

package/src/{components → primitives}/typography/typography.tsx

@@ -7,7 +7,9 @@ export interface TypographyProps extends RnTextProps {
 }
 
 export function Typography(props: TypographyProps) {
-  const useVariantStyles = TypographyVariants[props.variant ?? "body-md"];
-  const variantStyles = useVariantStyles();
-  return <RnText {...props} style={variantStyles} />;
+  const variantStyles = TypographyVariants[props.variant ?? "body-md"]();
+
+  const combinedStyles = [variantStyles, props.style];
+
+  return <RnText {...props} style={combinedStyles} />;
 }

package/src/themes/default/colors.ts

@@ -16,10 +16,10 @@ export const lightColors: Colors = {
   border: "hsla(224, 0%, 90%, 1)",
   surface: "hsla(224, 0%, 100%, 1)",
 
-  danger: "hsla(352, 100%, 41%, 1)",
-  success: "hsla(227, 70%, 40%, 1)",
-  warning: "hsla(212, 100%, 79%, 1)",
-  info: "hsla(221, 86%, 54%, 1)",
+  danger: "hsla(360, 100%, 45%, 1)",
+  success: "hsla(140, 100%, 40%, 1)",
+  warning: "hsla(31, 92%, 45%, 1)",
+  info: "hsla(210, 92%, 45%, 1)",
 };
 
 export const darkColors: Colors = {
@@ -38,8 +38,8 @@ export const darkColors: Colors = {
   border: "hsla(224, 0%, 16%, 1)",
   surface: "hsla(224, 0%, 9%, 1)",
 
-  danger: "hsla(359, 100%, 70%, 1)",
-  success: "hsla(227, 70%, 40%, 1)",
-  warning: "hsla(212, 100%, 79%, 1)",
-  info: "hsla(221, 86%, 54%, 1)",
+  danger: "hsla(360, 100%, 45%, 1)",
+  success: "hsla(140, 100%, 40%, 1)",
+  warning: "hsla(31, 92%, 45%, 1)",
+  info: "hsla(210, 92%, 45%, 1)",
 };

package/src/themes/provider.tsx

@@ -1,3 +1,4 @@
+import type { DeepPartial } from "@/types/util.types";
 import { createContext, type PropsWithChildren, useContext, useEffect, useState } from "react";
 import { useColorScheme } from "react-native";
 import { defaultThemeAssets } from "./default";
@@ -17,7 +18,7 @@ interface ThemeContext {
 const ThemeContext = createContext<ThemeContext | null>(null);
 
 export interface ThemeProviderProps extends PropsWithChildren {
-  theme?: Partial<ThemeAssets>;
+  theme?: DeepPartial<ThemeAssets>;
 }
 
 export const ThemeProvider = (props: ThemeProviderProps) => {

package/src/themes/utils.ts

@@ -1,6 +1,7 @@
+import type { DeepPartial } from "@/types/util.types";
 import type { ThemeAssets } from "./types";
 
-export function mergeThemeAssets(base: ThemeAssets, override: Partial<ThemeAssets>): ThemeAssets {
+export function mergeThemeAssets(base: ThemeAssets, override: DeepPartial<ThemeAssets>): ThemeAssets {
   return {
     colors: {
       light: { ...base.colors.light, ...override.colors?.light },

package/src/types/util.types.ts

@@ -0,0 +1,5 @@
+export type DeepPartial<T> = T extends object
+  ? {
+      [P in keyof T]?: DeepPartial<T[P]>;
+    }
+  : T;

package/dist/module/components/card/card.js

@@ -1,21 +0,0 @@
-"use strict";
-
-import { CardPrimitive } from "../../primitives/index.js";
-import React from "react";
-import { CardVariants } from "./variants/index.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function Card(props) {
-  const useVariantStyles = CardVariants[props.variant || "default"];
-  const styles = useVariantStyles();
-  return /*#__PURE__*/_jsxs(CardPrimitive.Root, {
-    styles: styles,
-    children: [!!props.title && /*#__PURE__*/_jsx(CardPrimitive.Header, {
-      children: /*#__PURE__*/_jsx(CardPrimitive.Title, {
-        children: props.title
-      })
-    }), /*#__PURE__*/_jsx(CardPrimitive.Body, {
-      children: props.children
-    })]
-  });
-}
-//# sourceMappingURL=card.js.map

package/dist/module/components/card/card.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["CardPrimitive","React","CardVariants","jsx","_jsx","jsxs","_jsxs","Card","props","useVariantStyles","variant","styles","Root","children","title","Header","Title","Body"],"sourceRoot":"../../../../src","sources":["components/card/card.tsx"],"mappings":";;AAAA,SAASA,aAAa;AACtB,OAAOC,KAAK,MAAM,OAAO;AACzB,SAASC,YAAY;AAAqB,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAS1C,OAAO,SAASC,IAAIA,CAACC,KAAgB,EAAE;EACrC,MAAMC,gBAAgB,GAAGP,YAAY,CAACM,KAAK,CAACE,OAAO,IAAI,SAAS,CAAC;EACjE,MAAMC,MAAM,GAAGF,gBAAgB,CAAC,CAAC;EAEjC,oBACEH,KAAA,CAACN,aAAa,CAACY,IAAI;IAACD,MAAM,EAAEA,MAAO;IAAAE,QAAA,GAChC,CAAC,CAACL,KAAK,CAACM,KAAK,iBACZV,IAAA,CAACJ,aAAa,CAACe,MAAM;MAAAF,QAAA,eACnBT,IAAA,CAACJ,aAAa,CAACgB,KAAK;QAAAH,QAAA,EAAEL,KAAK,CAACM;MAAK,CAAsB;IAAC,CACpC,CACvB,eACDV,IAAA,CAACJ,aAAa,CAACiB,IAAI;MAAAJ,QAAA,EAAEL,KAAK,CAACK;IAAQ,CAAqB,CAAC;EAAA,CACvC,CAAC;AAEzB","ignoreList":[]}

package/dist/module/components/card/variants/default.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["useThemedStyles","useCardVariantDefault","colors","radius","fontFamily","fontSize","root","default","borderWidth","borderColor","border","borderRadius","backgroundColor","surface","paddingVertical","gap","header","paddingHorizontal","title","fontWeight","color","foreground","body"],"sourceRoot":"../../../../../src","sources":["components/card/variants/default.tsx"],"mappings":";;AACA,SAASA,eAAe;AAExB,OAAO,SAASC,qBAAqBA,CAAA,EAAe;EAClD,OAAOD,eAAe,CACpB,CAAC;IAAEE,MAAM;IAAEC,MAAM;IAAEC,UAAU;IAAEC;EAAS,CAAC,MAAkB;IACzDC,IAAI,EAAE;MACJC,OAAO,EAAE;QACPC,WAAW,EAAE,CAAC;QACdC,WAAW,EAAEP,MAAM,CAACQ,MAAM;QAC1BC,YAAY,EAAER,MAAM;QACpBS,eAAe,EAAEV,MAAM,CAACW,OAAO;QAC/BC,eAAe,EAAE,EAAE;QACnBC,GAAG,EAAE;MACP;IACF,CAAC;IACDC,MAAM,EAAE;MACNT,OAAO,EAAE;QACPU,iBAAiB,EAAE;MACrB;IACF,CAAC;IACDC,KAAK,EAAE;MACLX,OAAO,EAAE;QACPH,UAAU;QACVC,QAAQ,EAAEA,QAAQ,GAAG,IAAI;QACzBc,UAAU,EAAE,KAAK;QACjBC,KAAK,EAAElB,MAAM,CAACmB;MAChB;IACF,CAAC;IACDC,IAAI,EAAE;MACJf,OAAO,EAAE;QACPU,iBAAiB,EAAE,EAAE;QACrBF,GAAG,EAAE;MACP;IACF;EACF,CAAC,CACH,CAAC;AACH","ignoreList":[]}

package/dist/module/components/typography/typography.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","Text","RnText","TypographyVariants","jsx","_jsx","Typography","props","useVariantStyles","variant","variantStyles","style"],"sourceRoot":"../../../../src","sources":["components/typography/typography.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,IAAIC,MAAM,QAAuC,cAAc;AAC5E,SAASC,kBAAkB;AAAqB,SAAAC,GAAA,IAAAC,IAAA;AAMhD,OAAO,SAASC,UAAUA,CAACC,KAAsB,EAAE;EACjD,MAAMC,gBAAgB,GAAGL,kBAAkB,CAACI,KAAK,CAACE,OAAO,IAAI,SAAS,CAAC;EACvE,MAAMC,aAAa,GAAGF,gBAAgB,CAAC,CAAC;EACxC,oBAAOH,IAAA,CAACH,MAAM;IAAA,GAAKK,KAAK;IAAEI,KAAK,EAAED;EAAc,CAAE,CAAC;AACpD","ignoreList":[]}

package/dist/typescript/src/components/card/card.d.ts

@@ -1,10 +0,0 @@
-import React from "react";
-import { CardVariants } from "./variants";
-interface CardProps {
-    title?: string;
-    children: React.ReactNode;
-    variant?: keyof typeof CardVariants;
-}
-export declare function Card(props: CardProps): React.JSX.Element;
-export {};
-//# sourceMappingURL=card.d.ts.map

package/dist/typescript/src/components/card/card.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../../../src/components/card/card.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE1C,UAAU,SAAS;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,OAAO,CAAC,EAAE,MAAM,OAAO,YAAY,CAAC;CACrC;AAED,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,qBAcpC"}

package/src/components/card/card.tsx

@@ -1,26 +0,0 @@
-import { CardPrimitive } from "@/primitives";
-import React from "react";
-import { CardVariants } from "./variants";
-
-interface CardProps {
-  title?: string;
-  children: React.ReactNode;
-
-  variant?: keyof typeof CardVariants;
-}
-
-export function Card(props: CardProps) {
-  const useVariantStyles = CardVariants[props.variant || "default"];
-  const styles = useVariantStyles();
-
-  return (
-    <CardPrimitive.Root styles={styles}>
-      {!!props.title && (
-        <CardPrimitive.Header>
-          <CardPrimitive.Title>{props.title}</CardPrimitive.Title>
-        </CardPrimitive.Header>
-      )}
-      <CardPrimitive.Body>{props.children}</CardPrimitive.Body>
-    </CardPrimitive.Root>
-  );
-}