@kubit-ui-web/react-components 2.0.0-beta.22 → 2.0.0-beta.23

package/dist/types/index.d.ts

@@ -729,87 +729,121 @@ export declare type CalendarVariantStyles<Variant extends string> = CalendarStyl
 };
 
 /**
- * CardImage component for displaying an image card with responsive and theme support.
+ * Card component for displaying content in a structured container.
  *
- * This component is useful for rendering images in a card layout, adapting its style
- * based on the current device and variant. It leverages generics to allow custom variant
- * types, enabling flexible theming and styling.
+ * This component wraps content in a styled card with optional header, content, and footer sections.
+ * It is useful for organizing information, displaying items in a list, or creating selectable cards.
+ * Supports interactive states (hover, selected) and custom theming via variants.
  *
- * Internally, it uses {@link CardImageStandAlone} and injects device and CSS class information.
+ * All sections (header, content, footer) are optional and can accept either text or any React node.
+ * The card can respond to user interaction through onClick, onMouseEnter, and onMouseLeave handlers.
  *
- * The generic type parameter `<Variant extends string>` allows you to define your own variant
- * types for more precise theming.
+ * Internally, it computes CSS classes using a custom hook and delegates rendering to {@link CardStandAlone}.
+ *
+ * This component accepts a generic type parameter `<Variant extends string>` to allow for custom variant values,
+ * enabling flexible theming and styling.
  *
  * @example
  * ```tsx
- * <CardImage variant="primary" />
+ * <Card
+ *   header={{ content: "Card Title" }}
+ *   content="This is the card content"
+ *   footer={{ content: "Footer information" }}
+ * />
  *
  * // With a custom variant type:
- * type MyVariant = "rounded" | "square";
- * <CardImage<MyVariant> variant="rounded" />
+ * type MyVariant = "primary" | "secondary";
+ * <Card<MyVariant>
+ *   header="Primary Card"
+ *   content={<div>Custom content</div>}
+ *   variant="primary"
+ *   state="selected"
+ * />
  * ```
  */
-export declare const CardImage: ForwardRefExoticComponent<CardImageProps<string> & RefAttributes<HTMLDivElement>>;
+export declare const Card: ForwardRefExoticComponent<CardProps<string> & RefAttributes<HTMLDivElement>>;
 
-declare type CardImageCssClasses = ComponentSelected<ComponentsTypesComponents['CARD_IMAGE']>;
+declare type CardCssClasses = ComponentSelected<ComponentsTypesComponents['CARD']>;
 
 /**
- * Represents the type for a link within the CardImage component.
- * Extends the LinkProps interface and includes content.
- */
-export declare type CardImageLinkProps = Omit<LinkProps, 'children'> & {
-    content: string;
-};
-
-/**
- * Interface for the CardImage component with a variant.
- * Extends the CardImageStandAloneProps interface and adds a variant and additional CSS classes.
+ * Interface for the card component with a variant.
+ * Extends the ICardStandAlone interface and adds a variant and additional CSS classes.
  *
- * @template Variant - The type of the variant for the CardImage.
+ * @template Variant - The type of the variant for the card.
  */
-export declare interface CardImageProps<Variant = undefined extends string ? unknown : string> extends Omit<CardImageStandAloneProps, 'device'> {
+export declare interface CardProps<Variant extends string | unknown> extends Omit<CardStandAloneProps, 'cssClasses'> {
     variant?: Variant;
-    additionalClasses?: CardImageCssClasses;
+    additionalClasses?: Partial<CardCssClasses>;
 }
 
 /**
- * Represents the type for responsive images based on device breakpoints.
+ * Standalone card component for rendering a section with optional header, content and footer areas.
+ *
+ * This component displays a styled card container with three optional sections:
+ * - header: Can be text or any React node
+ * - content: Can be text or any React node
+ * - footer: Can be text or any React node
+ *
+ * Supports interactive states like hover and selected, making it useful for
+ * selectable cards, clickable items, or informational panels.
+ *
+ * This component accepts a generic type parameter `<Variant extends string>` to allow for custom variant values,
+ * enabling flexible theming and styling of the card.
+ *
+ * @example
+ * ```tsx
+ * <CardStandAlone
+ *   header={{ content: "Card Title" }}
+ *   content="Card content goes here"
+ *   footer={{ content: "Footer text" }}
+ * />
+ *
+ * // With a custom variant type:
+ * type MyVariant = "primary" | "secondary";
+ * <CardStandAlone<MyVariant>
+ *   header="Primary Card"
+ *   content={<div>Custom content</div>}
+ *   variant="primary"
+ *   state="selected"
+ * />
+ * ```
  */
-declare interface CardImageResponsiveImages {
-    [DEVICE_BREAKPOINTS.DESKTOP]: string;
-    [DEVICE_BREAKPOINTS.MOBILE]: string;
-    [DEVICE_BREAKPOINTS.TABLET]: string;
-}
+export declare const CardStandAlone: ForwardRefExoticComponent<CardStandAloneProps & RefAttributes<HTMLDivElement>>;
 
 /**
- * Interface for the standalone CardImage component.
- * Includes responsive images, title, description, optional link, and CSS classes.
+ * Interface for the standalone card component.
+ * It includes optional custom CSS classes, header, content, footer sections and interactive states.
  */
-export declare interface CardImageStandAloneProps extends DataAttributes {
-    image: CardImageResponsiveImages;
-    title: CommonTextProps;
-    description?: CommonTextProps;
-    link?: CardImageLinkProps;
-    device: string;
-    imageAltText?: string;
-    component?: string | React.ElementType;
-    onClick?: React.MouseEventHandler;
-    cssClasses?: CardImageCssClasses;
+export declare interface CardStandAloneProps extends DataAttributes {
+    cssClasses?: CardCssClasses;
+    header?: CommonTextProps | ReactNode;
+    content?: CommonTextProps | ReactNode;
+    footer?: CommonTextProps | ReactNode;
+    state?: StateType;
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+    onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
+    onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
 }
 
-export declare interface CardImageStyleProps extends CssLibPropsType {
-    _imageContainer?: CssLibPropsType;
+/**
+ * Interface representing the styles for the card component.
+ */
+export declare interface CardStyleProps extends CssLibPropsType {
+    _header?: CssLibPropsType;
     _content?: CssLibPropsType;
-    _textContainer?: CssLibPropsType;
-    _titleContainer?: CssLibPropsType;
-    _title?: CssLibPropsType;
-    _descriptionContainer?: CssLibPropsType;
-    _description?: CssLibPropsType;
-    _linkContainer?: CssLibPropsType;
+    _footer?: CssLibPropsType;
+    $pseudo?: {
+        hover?: CssLibPropsType;
+    };
 }
 
-export declare type CardImageVariantStyles<Variant extends string> = CardImageStyleProps & {
-    [key in Variant]?: CardImageStyleProps;
+/**
+ * Type representing the styles for different variants of the card component.
+ *
+ * @template Variant - The type of the variant keys.
+ */
+export declare type CardVariantStyles<Variant extends string> = CardStyleProps & {
+    [key in Variant]: CardStyleProps;
 };
 
 export declare const Carousel: ForwardRefExoticComponent<Omit<ICarousel, "ref"> & RefAttributes<CarouselRefType>>;
@@ -1128,7 +1162,7 @@ declare type ComponentSelected<T> = Pick<T, NonVariablesKeys<T>>;
 
 declare type ComponentSelected_2<T> = Pick<T, NonVariablesKeys_2<T>>;
 
-declare type ComponentsTypesAvailableComponents = 'ACCORDION' | 'ALERT' | 'AVATAR' | 'BADGE' | 'BREADCRUMBS' | 'BUTTON' | 'CALENDAR' | 'CARD_IMAGE' | 'CAROUSEL' | 'CHECKBOX' | 'CHECKBOX_BASE' | 'CHIP' | 'CONTAINER' | 'DATA_TABLE' | 'DOT' | 'ERROR_MESSAGE' | 'ICON' | 'INPUT' | 'INPUT_BASE' | 'INPUT_DECORATION' | 'INPUT_SIGNATURE' | 'ITEM_ROVE' | 'LINK' | 'LINK_AS_BUTTON' | 'LIST_OPTIONS' | 'MODAL' | 'OPTION' | 'OVERLAY' | 'PAGE_CONTROL' | 'PAGINATION' | 'POPOVER' | 'PROGRESS_BAR' | 'RADIO_BUTTON' | 'SELECT' | 'SELECTOR_BOX_FILE' | 'SKELETON' | 'SLIDER' | 'SNACKBAR' | 'STEPPER_NUMBER' | 'TABLE' | 'TABLE_BODY' | 'TABLE_CAPTION' | 'TABLE_CELL' | 'TABLE_DIVIDER' | 'TABLE_FOOT' | 'TABLE_HEAD' | 'TABLE_ROW' | 'TABS' | 'TAG' | 'TEXT' | 'TEXT_AREA' | 'TEXT_COUNT' | 'TOGGLE' | 'TOOLTIP' | 'VIRTUAL_KEYBOARD';
+declare type ComponentsTypesAvailableComponents = 'ACCORDION' | 'ALERT' | 'AVATAR' | 'BADGE' | 'BREADCRUMBS' | 'BUTTON' | 'CALENDAR' | 'CARD' | 'CAROUSEL' | 'CHECKBOX' | 'CHECKBOX_BASE' | 'CHIP' | 'CONTAINER' | 'DATA_TABLE' | 'DOT' | 'ERROR_MESSAGE' | 'ICON' | 'INPUT' | 'INPUT_BASE' | 'INPUT_DECORATION' | 'INPUT_SIGNATURE' | 'ITEM_ROVE' | 'LINK' | 'LINK_AS_BUTTON' | 'LIST_OPTIONS' | 'MODAL' | 'OPTION' | 'OVERLAY' | 'PAGE_CONTROL' | 'PAGINATION' | 'POPOVER' | 'PROGRESS_BAR' | 'RADIO_BUTTON' | 'SELECT' | 'SELECTOR_BOX_FILE' | 'SKELETON' | 'SLIDER' | 'SNACKBAR' | 'STEPPER_NUMBER' | 'TABLE' | 'TABLE_BODY' | 'TABLE_CAPTION' | 'TABLE_CELL' | 'TABLE_DIVIDER' | 'TABLE_FOOT' | 'TABLE_HEAD' | 'TABLE_ROW' | 'TABS' | 'TAG' | 'TEXT' | 'TEXT_AREA' | 'TEXT_COUNT' | 'TOGGLE' | 'TOOLTIP' | 'VIRTUAL_KEYBOARD';
 
 declare type ComponentsTypesComponents = {
     ACCORDION: {
@@ -1306,22 +1340,16 @@ declare type ComponentsTypesComponents = {
             loader: string;
         };
     };
-    CARD_IMAGE: {
-        card_image: string;
+    CARD: {
+        card: string;
         content: string;
-        description: string;
-        descriptioncontainer: string;
-        imagecontainer: string;
-        linkcontainer: string;
-        textcontainer: string;
-        title: string;
-        titlecontainer: string;
-        $_alternative: {
-            card_image: string;
-        };
+        footer: string;
+        header: string;
         $_default: {
-            card_image: string;
-            description: string;
+            card: string;
+            content: string;
+            footer: string;
+            header: string;
         };
     };
     CAROUSEL: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubit-ui-web/react-components",
-  "version": "2.0.0-beta.22",
+  "version": "2.0.0-beta.23",
   "description": "Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience",
   "author": {
     "name": "Kubit",
@@ -133,7 +133,7 @@
     "@testing-library/react": "^16.3.1",
     "@testing-library/user-event": "^14.6.1",
     "@trivago/prettier-plugin-sort-imports": "^6.0.2",
-    "@types/node": "^25.0.3",
+    "@types/node": "^25.0.5",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@types/testing-library__jest-dom": "^6.0.0",
@@ -160,7 +160,7 @@
     "typescript-eslint": "^8.52.0",
     "vite": "7.3.1",
     "vite-plugin-dts": "^4.5.4",
-    "vite-tsconfig-paths": "^6.0.3",
+    "vite-tsconfig-paths": "^6.0.4",
     "vitest": "^4.0.16",
     "vitest-axe": "^0.1.0"
   },

package/dist/cjs/components/cardImage/cardImage.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../_virtual/jsx-runtime.js"),s=require("react"),a=require("../../lib/hooks/useClassName/useClassName.js"),r=require("../../lib/hooks/useMediaDevice/useMediaDevice.js"),i=require("./cardImageStandAlone.js"),t=s.forwardRef(({additionalClasses:s,variant:t,...o},u)=>{const n=r.useMediaDevice(),d=a.useClassName({additionalClassNames:s,component:"CARD_IMAGE",variant:t});return e.jsxRuntimeExports.jsx(i.CardImageStandAlone,{...o,ref:u,cssClasses:d,device:n})});exports.CardImage=t;

package/dist/cjs/components/cardImage/cardImageStandAlone.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../_virtual/jsx-runtime.js"),t=require("react"),s=require("../link/link.js"),i=require("../text/text.js"),o=require("../../lib/utils/pickCustomAttributes/pickCustomAttributes.js"),r=require("../../lib/utils/process/processCommonProp.js"),n=require("../../lib/components/customComponent/customComponent.js"),c=t.forwardRef(({component:t="div",cssClasses:c,description:l,device:a,image:x,imageAltText:m,link:u,onClick:p,title:d,...j},C)=>{const b=o.pickCustomAttributes(j);return e.jsxRuntimeExports.jsxs(n.CustomComponent,{ref:C,className:c?.card_image,component:t,tabIndex:0,onClick:p,...b,children:[e.jsxRuntimeExports.jsx("div",{"aria-label":m||void 0,className:c?.imagecontainer,role:m?"img":void 0,style:x?.[a]?{backgroundImage:`url(${x[a]})`}:void 0}),e.jsxRuntimeExports.jsxs("div",{className:c?.content,children:[e.jsxRuntimeExports.jsxs("div",{className:c?.textcontainer,children:[e.jsxRuntimeExports.jsx(i.Text,{additionalClasses:{text:c?.title},component:"h3",...r.processTextProp(d)}),e.jsxRuntimeExports.jsx(i.Text,{additionalClasses:{text:c?.description},...r.processTextProp(l)})]}),u?.url&&e.jsxRuntimeExports.jsx("div",{className:c?.linkcontainer,children:e.jsxRuntimeExports.jsx(s.Link,{iconPosition:"right",...u,children:u.content||""})})]})]})});exports.CardImageStandAlone=c;

package/dist/esm/components/cardImage/cardImage.js

@@ -1,2 +0,0 @@
-import{j as s}from"../../_virtual/jsx-runtime.js";import{forwardRef as e}from"react";import{useClassName as a}from"../../lib/hooks/useClassName/useClassName.js";import{useMediaDevice as o}from"../../lib/hooks/useMediaDevice/useMediaDevice.js";import{CardImageStandAlone as i}from"./cardImageStandAlone.js";const r=e(({additionalClasses:e,variant:r,...t},m)=>{const n=o(),l=a({additionalClassNames:e,component:"CARD_IMAGE",variant:r});/* @__PURE__ */
-return s.jsx(i,{...t,ref:m,cssClasses:l,device:n})});export{r as CardImage};

package/dist/esm/components/cardImage/cardImageStandAlone.js

@@ -1,7 +0,0 @@
-import{j as t}from"../../_virtual/jsx-runtime.js";import{forwardRef as i}from"react";import{Link as s}from"../link/link.js";import{Text as o}from"../text/text.js";import{pickCustomAttributes as e}from"../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";import{processTextProp as n}from"../../lib/utils/process/processCommonProp.js";import{CustomComponent as r}from"../../lib/components/customComponent/customComponent.js";const m=i(({component:i="div",cssClasses:m,description:c,device:l,image:a,imageAltText:d,link:p,onClick:x,title:j,...u},v)=>{const C=e(u);/* @__PURE__ */
-return t.jsxs(r,{ref:v,className:m?.card_image,component:i,tabIndex:0,onClick:x,...C,children:[
-/* @__PURE__ */t.jsx("div",{"aria-label":d||void 0,className:m?.imagecontainer,role:d?"img":void 0,style:a?.[l]?{backgroundImage:`url(${a[l]})`}:void 0}),
-/* @__PURE__ */t.jsxs("div",{className:m?.content,children:[
-/* @__PURE__ */t.jsxs("div",{className:m?.textcontainer,children:[
-/* @__PURE__ */t.jsx(o,{additionalClasses:{text:m?.title},component:"h3",...n(j)}),
-/* @__PURE__ */t.jsx(o,{additionalClasses:{text:m?.description},...n(c)})]}),p?.url&&/* @__PURE__ */t.jsx("div",{className:m?.linkcontainer,children:/* @__PURE__ */t.jsx(s,{iconPosition:"right",...p,children:p.content||""})})]})]})});export{m as CardImageStandAlone};