@kopexa/card 3.0.0 → 4.0.0

package/dist/card.d.mts

@@ -18,5 +18,9 @@ type CardFooterProps = ComponentProps<"div"> & {
     asChild?: boolean;
 };
 declare function CardFooter(props: CardFooterProps): react_jsx_runtime.JSX.Element;
+type CardHeadingProps = ComponentProps<"div">;
+declare function CardHeading({ className, ...props }: CardHeadingProps): react_jsx_runtime.JSX.Element;
+type CardToolbarProps = ComponentProps<"div">;
+declare function CardToolbar({ className, ...props }: CardToolbarProps): react_jsx_runtime.JSX.Element;
 
-export { CardBody, type CardBodyProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, CardRoot, type CardRootProps };
+export { CardBody, type CardBodyProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, CardHeading, type CardHeadingProps, CardRoot, type CardRootProps, CardToolbar, type CardToolbarProps };

package/dist/card.d.ts

@@ -18,5 +18,9 @@ type CardFooterProps = ComponentProps<"div"> & {
     asChild?: boolean;
 };
 declare function CardFooter(props: CardFooterProps): react_jsx_runtime.JSX.Element;
+type CardHeadingProps = ComponentProps<"div">;
+declare function CardHeading({ className, ...props }: CardHeadingProps): react_jsx_runtime.JSX.Element;
+type CardToolbarProps = ComponentProps<"div">;
+declare function CardToolbar({ className, ...props }: CardToolbarProps): react_jsx_runtime.JSX.Element;
 
-export { CardBody, type CardBodyProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, CardRoot, type CardRootProps };
+export { CardBody, type CardBodyProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, CardHeading, type CardHeadingProps, CardRoot, type CardRootProps, CardToolbar, type CardToolbarProps };

package/dist/card.js

@@ -1,5 +1,6 @@
 "use client";
 "use strict";
+"use client";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -34,7 +35,9 @@ __export(card_exports, {
   CardBody: () => CardBody,
   CardFooter: () => CardFooter,
   CardHeader: () => CardHeader,
-  CardRoot: () => CardRoot
+  CardHeading: () => CardHeading,
+  CardRoot: () => CardRoot,
+  CardToolbar: () => CardToolbar
 });
 module.exports = __toCommonJS(card_exports);
 var import_react_utils = require("@kopexa/react-utils");
@@ -82,6 +85,7 @@ var CardRoot = (props) => {
       tabIndex: isPressable ? 0 : -1,
       "data-disabled": (0, import_shared_utils.dataAttr)(isDisabled),
       role: isPressable ? "button" : void 0,
+      "data-slot": "card",
       ...rest,
       children
     }
@@ -91,13 +95,29 @@ function CardHeader(props) {
   const { className, children, asChild, ...rest } = props;
   const Component = asChild ? Slot.Root : "div";
   const { styles } = useCardContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { className: styles.header({ className }), ...rest, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Component,
+    {
+      "data-slot": "card-header",
+      className: styles.header({ className }),
+      ...rest,
+      children
+    }
+  );
 }
 function CardBody(props) {
   const { className, children, asChild, ...rest } = props;
   const Component = asChild ? Slot.Root : "div";
   const { styles } = useCardContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { className: styles.body({ className }), ...rest, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Component,
+    {
+      className: styles.body({ className }),
+      "data-slot": "card-body",
+      ...rest,
+      children
+    }
+  );
 }
 function CardFooter(props) {
   const { className, children, asChild, ...rest } = props;
@@ -105,10 +125,34 @@ function CardFooter(props) {
   const { styles } = useCardContext();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { className: styles.footer({ className }), ...rest, children });
 }
+function CardHeading({ className, ...props }) {
+  const { styles } = useCardContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      "data-slot": "card-heading",
+      className: (0, import_shared_utils.cn)(styles.heading(), className),
+      ...props
+    }
+  );
+}
+function CardToolbar({ className, ...props }) {
+  const { styles } = useCardContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      "data-slot": "card-toolbar",
+      className: (0, import_shared_utils.cn)(styles.toolbar(), className),
+      ...props
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CardBody,
   CardFooter,
   CardHeader,
-  CardRoot
+  CardHeading,
+  CardRoot,
+  CardToolbar
 });

package/dist/card.mjs

@@ -1,13 +1,18 @@
 "use client";
+"use client";
 import {
   CardBody,
   CardFooter,
   CardHeader,
-  CardRoot
-} from "./chunk-QJLYPGLR.mjs";
+  CardHeading,
+  CardRoot,
+  CardToolbar
+} from "./chunk-4TZ4CO7Q.mjs";
 export {
   CardBody,
   CardFooter,
   CardHeader,
-  CardRoot
+  CardHeading,
+  CardRoot,
+  CardToolbar
 };

package/dist/{chunk-QJLYPGLR.mjs → chunk-4TZ4CO7Q.mjs}

@@ -7,7 +7,7 @@ var __export = (target, all) => {
 
 // src/card.tsx
 import { createContext } from "@kopexa/react-utils";
-import { dataAttr } from "@kopexa/shared-utils";
+import { cn, dataAttr } from "@kopexa/shared-utils";
 import { card } from "@kopexa/theme";
 import * as Slot from "@radix-ui/react-slot";
 import { jsx } from "react/jsx-runtime";
@@ -51,6 +51,7 @@ var CardRoot = (props) => {
       tabIndex: isPressable ? 0 : -1,
       "data-disabled": dataAttr(isDisabled),
       role: isPressable ? "button" : void 0,
+      "data-slot": "card",
       ...rest,
       children
     }
@@ -60,13 +61,29 @@ function CardHeader(props) {
   const { className, children, asChild, ...rest } = props;
   const Component = asChild ? Slot.Root : "div";
   const { styles } = useCardContext();
-  return /* @__PURE__ */ jsx(Component, { className: styles.header({ className }), ...rest, children });
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      "data-slot": "card-header",
+      className: styles.header({ className }),
+      ...rest,
+      children
+    }
+  );
 }
 function CardBody(props) {
   const { className, children, asChild, ...rest } = props;
   const Component = asChild ? Slot.Root : "div";
   const { styles } = useCardContext();
-  return /* @__PURE__ */ jsx(Component, { className: styles.body({ className }), ...rest, children });
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      className: styles.body({ className }),
+      "data-slot": "card-body",
+      ...rest,
+      children
+    }
+  );
 }
 function CardFooter(props) {
   const { className, children, asChild, ...rest } = props;
@@ -74,11 +91,35 @@ function CardFooter(props) {
   const { styles } = useCardContext();
   return /* @__PURE__ */ jsx(Component, { className: styles.footer({ className }), ...rest, children });
 }
+function CardHeading({ className, ...props }) {
+  const { styles } = useCardContext();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-heading",
+      className: cn(styles.heading(), className),
+      ...props
+    }
+  );
+}
+function CardToolbar({ className, ...props }) {
+  const { styles } = useCardContext();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-toolbar",
+      className: cn(styles.toolbar(), className),
+      ...props
+    }
+  );
+}
 
 export {
   __export,
   CardRoot,
   CardHeader,
   CardBody,
-  CardFooter
+  CardFooter,
+  CardHeading,
+  CardToolbar
 };

package/dist/{chunk-6LOHEW6B.mjs → chunk-BZFCKMXJ.mjs}

@@ -3,9 +3,11 @@ import {
   CardBody,
   CardFooter,
   CardHeader,
+  CardHeading,
   CardRoot,
+  CardToolbar,
   __export
-} from "./chunk-QJLYPGLR.mjs";
+} from "./chunk-4TZ4CO7Q.mjs";
 
 // src/namespace.ts
 var namespace_exports = {};
@@ -13,7 +15,9 @@ __export(namespace_exports, {
   Body: () => CardBody,
   Footer: () => CardFooter,
   Header: () => CardHeader,
-  Root: () => CardRoot
+  Heading: () => CardHeading,
+  Root: () => CardRoot,
+  Toolbar: () => CardToolbar
 });
 
 export {

package/dist/index.js

@@ -41,7 +41,9 @@ __export(namespace_exports, {
   Body: () => CardBody,
   Footer: () => CardFooter,
   Header: () => CardHeader,
-  Root: () => CardRoot
+  Heading: () => CardHeading,
+  Root: () => CardRoot,
+  Toolbar: () => CardToolbar
 });
 
 // src/card.tsx
@@ -90,6 +92,7 @@ var CardRoot = (props) => {
       tabIndex: isPressable ? 0 : -1,
       "data-disabled": (0, import_shared_utils.dataAttr)(isDisabled),
       role: isPressable ? "button" : void 0,
+      "data-slot": "card",
       ...rest,
       children
     }
@@ -99,13 +102,29 @@ function CardHeader(props) {
   const { className, children, asChild, ...rest } = props;
   const Component = asChild ? Slot.Root : "div";
   const { styles } = useCardContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { className: styles.header({ className }), ...rest, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Component,
+    {
+      "data-slot": "card-header",
+      className: styles.header({ className }),
+      ...rest,
+      children
+    }
+  );
 }
 function CardBody(props) {
   const { className, children, asChild, ...rest } = props;
   const Component = asChild ? Slot.Root : "div";
   const { styles } = useCardContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { className: styles.body({ className }), ...rest, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Component,
+    {
+      className: styles.body({ className }),
+      "data-slot": "card-body",
+      ...rest,
+      children
+    }
+  );
 }
 function CardFooter(props) {
   const { className, children, asChild, ...rest } = props;
@@ -113,6 +132,28 @@ function CardFooter(props) {
   const { styles } = useCardContext();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { className: styles.footer({ className }), ...rest, children });
 }
+function CardHeading({ className, ...props }) {
+  const { styles } = useCardContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      "data-slot": "card-heading",
+      className: (0, import_shared_utils.cn)(styles.heading(), className),
+      ...props
+    }
+  );
+}
+function CardToolbar({ className, ...props }) {
+  const { styles } = useCardContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      "data-slot": "card-toolbar",
+      className: (0, import_shared_utils.cn)(styles.toolbar(), className),
+      ...props
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Card

package/dist/index.mjs

@@ -1,8 +1,8 @@
 "use client";
 import {
   namespace_exports
-} from "./chunk-6LOHEW6B.mjs";
-import "./chunk-QJLYPGLR.mjs";
+} from "./chunk-BZFCKMXJ.mjs";
+import "./chunk-4TZ4CO7Q.mjs";
 export {
   namespace_exports as Card
 };

package/dist/namespace.d.mts

@@ -1,10 +1,10 @@
-import { CardBody, CardBodyProps, CardFooter, CardFooterProps, CardHeader, CardHeaderProps, CardRoot, CardRootProps } from './card.mjs';
+import { CardBody, CardBodyProps, CardFooter, CardFooterProps, CardHeader, CardHeaderProps, CardHeading, CardHeadingProps, CardRoot, CardRootProps, CardToolbar, CardToolbarProps } from './card.mjs';
 import 'react/jsx-runtime';
 import '@kopexa/theme';
 import 'react';
 
 declare namespace namespace {
-  export { CardBody as Body, CardBodyProps as BodyProps, CardFooter as Footer, CardFooterProps as FooterProps, CardHeader as Header, CardHeaderProps as HeaderProps, CardRoot as Root, CardRootProps as RootProps };
+  export { CardBody as Body, CardBodyProps as BodyProps, CardFooter as Footer, CardFooterProps as FooterProps, CardHeader as Header, CardHeaderProps as HeaderProps, CardHeading as Heading, CardHeadingProps as HeadingProps, CardRoot as Root, CardRootProps as RootProps, CardToolbar as Toolbar, CardToolbarProps as ToolbarProps };
 }
 
-export { CardBody as Body, CardBodyProps as BodyProps, CardFooter as Footer, CardFooterProps as FooterProps, CardHeader as Header, CardHeaderProps as HeaderProps, CardRoot as Root, CardRootProps as RootProps, namespace as n };
+export { CardBody as Body, CardBodyProps as BodyProps, CardFooter as Footer, CardFooterProps as FooterProps, CardHeader as Header, CardHeaderProps as HeaderProps, CardHeading as Heading, CardHeadingProps as HeadingProps, CardRoot as Root, CardRootProps as RootProps, CardToolbar as Toolbar, CardToolbarProps as ToolbarProps, namespace as n };

package/dist/namespace.d.ts

@@ -1,10 +1,10 @@
-import { CardBody, CardBodyProps, CardFooter, CardFooterProps, CardHeader, CardHeaderProps, CardRoot, CardRootProps } from './card.js';
+import { CardBody, CardBodyProps, CardFooter, CardFooterProps, CardHeader, CardHeaderProps, CardHeading, CardHeadingProps, CardRoot, CardRootProps, CardToolbar, CardToolbarProps } from './card.js';
 import 'react/jsx-runtime';
 import '@kopexa/theme';
 import 'react';
 
 declare namespace namespace {
-  export { CardBody as Body, CardBodyProps as BodyProps, CardFooter as Footer, CardFooterProps as FooterProps, CardHeader as Header, CardHeaderProps as HeaderProps, CardRoot as Root, CardRootProps as RootProps };
+  export { CardBody as Body, CardBodyProps as BodyProps, CardFooter as Footer, CardFooterProps as FooterProps, CardHeader as Header, CardHeaderProps as HeaderProps, CardHeading as Heading, CardHeadingProps as HeadingProps, CardRoot as Root, CardRootProps as RootProps, CardToolbar as Toolbar, CardToolbarProps as ToolbarProps };
 }
 
-export { CardBody as Body, CardBodyProps as BodyProps, CardFooter as Footer, CardFooterProps as FooterProps, CardHeader as Header, CardHeaderProps as HeaderProps, CardRoot as Root, CardRootProps as RootProps, namespace as n };
+export { CardBody as Body, CardBodyProps as BodyProps, CardFooter as Footer, CardFooterProps as FooterProps, CardHeader as Header, CardHeaderProps as HeaderProps, CardHeading as Heading, CardHeadingProps as HeadingProps, CardRoot as Root, CardRootProps as RootProps, CardToolbar as Toolbar, CardToolbarProps as ToolbarProps, namespace as n };

package/dist/namespace.js

@@ -34,7 +34,9 @@ __export(namespace_exports, {
   Body: () => CardBody,
   Footer: () => CardFooter,
   Header: () => CardHeader,
-  Root: () => CardRoot
+  Heading: () => CardHeading,
+  Root: () => CardRoot,
+  Toolbar: () => CardToolbar
 });
 module.exports = __toCommonJS(namespace_exports);
 
@@ -84,6 +86,7 @@ var CardRoot = (props) => {
       tabIndex: isPressable ? 0 : -1,
       "data-disabled": (0, import_shared_utils.dataAttr)(isDisabled),
       role: isPressable ? "button" : void 0,
+      "data-slot": "card",
       ...rest,
       children
     }
@@ -93,13 +96,29 @@ function CardHeader(props) {
   const { className, children, asChild, ...rest } = props;
   const Component = asChild ? Slot.Root : "div";
   const { styles } = useCardContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { className: styles.header({ className }), ...rest, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Component,
+    {
+      "data-slot": "card-header",
+      className: styles.header({ className }),
+      ...rest,
+      children
+    }
+  );
 }
 function CardBody(props) {
   const { className, children, asChild, ...rest } = props;
   const Component = asChild ? Slot.Root : "div";
   const { styles } = useCardContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { className: styles.body({ className }), ...rest, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Component,
+    {
+      className: styles.body({ className }),
+      "data-slot": "card-body",
+      ...rest,
+      children
+    }
+  );
 }
 function CardFooter(props) {
   const { className, children, asChild, ...rest } = props;
@@ -107,10 +126,34 @@ function CardFooter(props) {
   const { styles } = useCardContext();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { className: styles.footer({ className }), ...rest, children });
 }
+function CardHeading({ className, ...props }) {
+  const { styles } = useCardContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      "data-slot": "card-heading",
+      className: (0, import_shared_utils.cn)(styles.heading(), className),
+      ...props
+    }
+  );
+}
+function CardToolbar({ className, ...props }) {
+  const { styles } = useCardContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      "data-slot": "card-toolbar",
+      className: (0, import_shared_utils.cn)(styles.toolbar(), className),
+      ...props
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Body,
   Footer,
   Header,
-  Root
+  Heading,
+  Root,
+  Toolbar
 });

package/dist/namespace.mjs

@@ -1,14 +1,18 @@
 "use client";
-import "./chunk-6LOHEW6B.mjs";
+import "./chunk-BZFCKMXJ.mjs";
 import {
   CardBody,
   CardFooter,
   CardHeader,
-  CardRoot
-} from "./chunk-QJLYPGLR.mjs";
+  CardHeading,
+  CardRoot,
+  CardToolbar
+} from "./chunk-4TZ4CO7Q.mjs";
 export {
   CardBody as Body,
   CardFooter as Footer,
   CardHeader as Header,
-  CardRoot as Root
+  CardHeading as Heading,
+  CardRoot as Root,
+  CardToolbar as Toolbar
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kopexa/card",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "description": "A card to be used as container",
   "keywords": [
     "card"
@@ -28,7 +28,7 @@
     "motion": ">=12.23.6",
     "react": ">=19.0.0-rc.0",
     "react-dom": ">=19.0.0-rc.0",
-    "@kopexa/theme": "2.0.0"
+    "@kopexa/theme": "2.1.0"
   },
   "dependencies": {
     "@radix-ui/react-slot": "^1.2.3",