Merge pull request #25 from Atnic/feature/card

feat: add card component

packages/components/card/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @jala-banyu/card
 
+## 4.1.0
+
+### Minor Changes
+
+- Initial version of Card
+
 ## 4.0.0
 
 ### Patch Changes

packages/components/card/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jala-banyu/card",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "Card is a container for text, photos, and actions in the context of a single subject.",
   "keywords": [
     "card"
@@ -41,6 +41,7 @@
     "@jala-banyu/system": "1.0.0"
   },
   "dependencies": {
+    "@jala-banyu/shared-icons": "workspace:*",
     "@jala-banyu/shared-utils": "workspace: *",
     "@jala-banyu/react-utils": "workspace: *",
     "@jala-banyu/use-aria-button": "workspace: *",

packages/components/card/src/card-title.tsx

@@ -0,0 +1,35 @@
+import React, {forwardRef} from "react";
+import {HTMLBanyuProps} from "@jala-banyu/system";
+import {clsx} from "@jala-banyu/shared-utils";
+
+import {useCardContext} from "./card-context";
+
+type CardTitleProps = HTMLBanyuProps<"div"> & {
+  startButton?: React.ReactNode;
+  title: string;
+  subtitle?: string;
+};
+
+const CardTitle = forwardRef<"div", CardTitleProps>((props, ref) => {
+  const {as, className} = props;
+  const Component = as || "div";
+  const domRef = ref;
+
+  const {slots, classNames} = useCardContext();
+  const headerTitleStyles = clsx(classNames?.headerTitle, className);
+  const headerSubtitleStyles = clsx(classNames?.headerSubtitle, className);
+
+  return (
+    <Component ref={domRef} className="flex items-center justify-between gap-2 w-full">
+      {props.startButton}
+      <div className="flex-1 flex-col">
+        <h2 className={slots.headerTitle?.({class: headerTitleStyles})}>{props.title}</h2>
+        <p className={slots.headerSubtitle?.({class: headerSubtitleStyles})}>{props.subtitle}</p>
+      </div>
+    </Component>
+  );
+});
+
+CardTitle.displayName = "Banyu.CardTitle";
+
+export default CardTitle;

packages/components/card/src/index.ts

@@ -11,5 +11,6 @@ export {CardProvider, useCardContext} from "./card-context";
 // export components
 export {default as Card} from "./card";
 export {default as CardHeader} from "./card-header";
+export {default as CardTitle} from "./card-title";
 export {default as CardBody} from "./card-body";
 export {default as CardFooter} from "./card-footer";