@korsolutions/ui 0.0.3 → 0.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@korsolutions/ui",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "license": "MIT",
   "main": ".src/index.ts",
   "types": ".src/index.ts",

package/src/composites/card.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { Card as CardPrimitive, CardStyles } from "../primitives/card";
+
+export interface CompositeCardProps {
+  title?: string;
+  footer?: React.ReactNode;
+  children: React.ReactNode;
+  styles?: CardStyles;
+}
+
+export function Card({ title, footer, children, styles }: CompositeCardProps) {
+  return (
+    <CardPrimitive.Root styles={styles}>
+      {title && (
+        <CardPrimitive.Header>
+          <CardPrimitive.Title>{title}</CardPrimitive.Title>
+        </CardPrimitive.Header>
+      )}
+      <CardPrimitive.Body>{children}</CardPrimitive.Body>
+      {footer && <CardPrimitive.Footer>{footer}</CardPrimitive.Footer>}
+    </CardPrimitive.Root>
+  );
+}

package/src/composites/index.ts

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

package/src/index.ts

@@ -1,7 +1 @@
-export * from "./primitives/provider";
-
-export * from "./primitives/field";
-export * from "./primitives/input";
-export * from "./primitives/button";
-export * from "./primitives/select";
-export * from "./primitives/card";
+export * from "./primitives";

package/src/primitives/card/{card-content.tsx → card-body.tsx}

@@ -3,18 +3,18 @@ import { StyleProp, View, ViewStyle } from "react-native";
 import { useCard } from "./context";
 import { calculateComposedStyles } from "../../utils/calculate-styles";
 
-export interface CardContentProps {
+export interface CardBodyProps {
   children?: React.ReactNode;
 
-  render?: (props: CardContentProps) => React.ReactNode;
+  render?: (props: CardBodyProps) => React.ReactNode;
 
   style?: StyleProp<ViewStyle>;
 }
 
-export function CardContent(props: CardContentProps) {
+export function CardBody(props: CardBodyProps) {
   const card = useCard();
 
-  const composedStyle = calculateComposedStyles(card.styles, card.state, "content", props.style);
+  const composedStyle = calculateComposedStyles(card.styles, card.state, "body", props.style);
 
   const Component = props.render ?? View;
   return <Component {...props} style={composedStyle} />;

package/src/primitives/card/index.ts

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

package/src/primitives/card/types.ts

@@ -1,7 +1,7 @@
 import { CardRootProps } from "./card-root";
 import { CardHeaderProps } from "./card-header";
 import { CardTitleProps } from "./card-title";
-import { CardContentProps } from "./card-content";
+import { CardBodyProps } from "./card-body";
 import { CardFooterProps } from "./card-footer";
 
 export type CardState = "default";
@@ -10,6 +10,6 @@ export interface CardStyles {
   root?: Partial<Record<CardState, CardRootProps["style"]>>;
   header?: Partial<Record<CardState, CardHeaderProps["style"]>>;
   title?: Partial<Record<CardState, CardTitleProps["style"]>>;
-  content?: Partial<Record<CardState, CardContentProps["style"]>>;
+  body?: Partial<Record<CardState, CardBodyProps["style"]>>;
   footer?: Partial<Record<CardState, CardFooterProps["style"]>>;
 }

package/src/primitives/index.ts

@@ -0,0 +1,7 @@
+export * from "./provider";
+
+export * from "./field";
+export * from "./input";
+export * from "./button";
+export * from "./select";
+export * from "./card";