@tecsinapse/cortex-react 1.2.0 → 1.2.2-beta.0

package/README.md

@@ -1,11 +1,71 @@
-# `cortex-react`
+# TecSinapse Design System
 
-> TODO: description
+[![build workflow](https://github.com/tecsinapse/design-system/actions/workflows/publish.yml/badge.svg)](https://github.com/tecsinapse/design-system/actions/workflows/publish.yml)
 
-## Usage
+Welcome to [TecSinapse](https://www.tecsinapse.com.br/) Design System. This repo contains core components to build web and mobile applications.
+Our primary goal is to create a system that can be used to build a wide variety of TecSinapse websites and apps,
+while providing a consistent and inclusive user experience to our end users.
+In addition, the design system and component library should be easy to use for developers and designers.
 
+## Quick start
+
+Please refer to the official [documentation](https://tecsinapse.github.io/design-system).
+
+## Packages
+
+| Package                                                         | Content                                                                          | Version                                                                                                                                    |
+| --------------------------------------------------------------- | -------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
+| **[@tecsinapse/react-core](./packages/react-core)**             | core primitives for `CSS-in-JS` packages                                         | [![npm version](https://badge.fury.io/js/%40tecsinapse%2Freact-core.svg)](https://badge.fury.io/js/%40tecsinapse%2Freact-core)             |
+| **[@tecsinapse/react-web-kit](./packages/react-web-kit)**       | emotion `styled-components` for browsers with `react-native-web`                 | [![npm version](https://badge.fury.io/js/%40tecsinapse%2Freact-web-kit.svg)](https://badge.fury.io/js/%40tecsinapse%2Freact-web-kit)       |
+| **[@tecsinapse/react-native-kit](./packages/react-native-kit)** | emotion native `styled-components` for `react-native` cross platform development | [![npm version](https://badge.fury.io/js/%40tecsinapse%2Freact-native-kit.svg)](https://badge.fury.io/js/%40tecsinapse%2Freact-native-kit) |
+| **[@tecsinapse/react-charts](./packages/react-charts)**         | charts for react & react-native based on SVG                                     | [![npm version](https://badge.fury.io/js/%40tecsinapse%2Freact-charts.svg)](https://badge.fury.io/js/%40tecsinapse%2Freact-charts)         |
+| **[@tecsinapse/cortex-core](./packages/cortex-core)**           | core primitives for `tailwindcss` packages                                       | [![npm version](https://badge.fury.io/js/%40tecsinapse%2Fcortex-core.svg)](https://badge.fury.io/js/%40tecsinapse%2Fcortex-core)           |
+| **[@tecsinapse/cortex-react](./packages/cortex-react)**         | `html` based components using `cortex-core` primitives                           | [![npm version](https://badge.fury.io/js/%40tecsinapse%2Fcortex-react.svg)](https://badge.fury.io/js/%40tecsinapse%2Fcortex-react)         |
+
+## Code of conduct
+
+We want to foster an inclusive and friendly community around our Open Source efforts. This project follows the Contributor Covenant Code of Conduct.
+Please, [read it and follow it](./CODE_OF_CONDUCT.md).
+
+If you feel another member of the community violated our code or you are experiencing problems participating in our community because of another individual's behavior,
+please get in touch with our maintainers.
+
+## Running locally
+
+Recommended requirements:
+
+- `pnpm` >= 9
+- `node` >= 20
+
+To run locally, you should install the dependencies first:
+
+```
+pnpm i
 ```
-const index = require('cortex-react');
 
-// TODO: DEMONSTRATE API
+After this script, all packages will build. When developing, for a better experience, also use:
+
 ```
+pnpm dev
+```
+
+This script watch for changes on any package and rebuild files to reflect on live mode. To run storybook with all components, use:
+
+```
+pnpm storybook
+```
+
+For web development this is sufficient. For mobile, follow additional steps on [rn-playground](./packages/rn-playground).
+
+## How to make local changes available for other projects?
+
+Check [these docs](https://pnpm.io/cli/link).
+
+## Contributing
+
+If you have ideas for how we could improve this readme or the project in general, [let us know](https://github.com/tecsinapse/design-system/issues)!
+
+## About TecSinapse
+
+[TecSinapse](https://www.tecsinapse.com.br/) is a specialist in the automotive industry for over 15 years.
+We operate with diverse integrated solutions, from client prospecting to after-sales, plus market indicators tools and process improvement for complete management.\_

package/dist/cjs/components/Avatar.js

@@ -0,0 +1,34 @@
+'use strict';
+
+var clsx = require('clsx');
+var React = require('react');
+var utils = require('./utils.js');
+
+const Avatar = ({ src, name, className, ...rest }) => {
+  const [hasError, setHasError] = React.useState(false);
+  React.useEffect(() => {
+    setHasError(false);
+  }, [src]);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ...rest,
+      className: clsx(
+        "rounded-pill bg-secondary-dark w-mega h-mega flex items-center justify-center cursor-pointer",
+        className
+      )
+    },
+    src && !hasError ? /* @__PURE__ */ React.createElement(
+      "img",
+      {
+        src,
+        alt: name,
+        className: "rounded-pill",
+        onError: () => setHasError(true),
+        "data-testid": "avatar-img"
+      }
+    ) : /* @__PURE__ */ React.createElement("p", { className: "font-bold text-white text-base", "data-testid": "avatar-p" }, utils.getNameInitials(name))
+  );
+};
+
+exports.Avatar = Avatar;

package/dist/cjs/components/BreadcrumbItem.js

@@ -0,0 +1,27 @@
+'use strict';
+
+var React = require('react');
+var md = require('react-icons/md');
+
+const BreadcrumbItem = ({
+  isLast,
+  Component,
+  componentProps,
+  title
+}) => {
+  return /* @__PURE__ */ React.createElement(Component, { ...componentProps, key: title }, /* @__PURE__ */ React.createElement("div", { className: "flex gap-x-mili items-center" }, /* @__PURE__ */ React.createElement(
+    "p",
+    {
+      className: isLast ? "text-secondary-medium" : "text-secondary-xdark"
+    },
+    title
+  ), !isLast ? /* @__PURE__ */ React.createElement(
+    md.MdOutlineKeyboardDoubleArrowRight,
+    {
+      className: "mt-[0.125rem] text-primary-medium",
+      "data-testid": "breadcrumb-item-icon"
+    }
+  ) : /* @__PURE__ */ React.createElement(React.Fragment, null)));
+};
+
+exports.BreadcrumbItem = BreadcrumbItem;

package/dist/cjs/components/Breadcrumbs.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var React = require('react');
+var BreadcrumbItem = require('./BreadcrumbItem.js');
+var Card = require('./Card.js');
+
+const Breadcrumbs = (props) => {
+  const { breadcrumbs, ...rest } = props;
+  return /* @__PURE__ */ React.createElement(Card.Card, { className: "flex gap-x-mili w-full items-center py-mili", ...rest }, breadcrumbs.map((item, index) => {
+    const isLast = index === breadcrumbs.length - 1;
+    return /* @__PURE__ */ React.createElement(
+      BreadcrumbItem.BreadcrumbItem,
+      {
+        key: `${item.title}-${index}`,
+        ...item,
+        isLast
+      }
+    );
+  }));
+};
+
+exports.Breadcrumbs = Breadcrumbs;

package/dist/cjs/components/Card.js

@@ -1,19 +1,11 @@
 'use strict';
 
-var React = require('react');
 var cortexCore = require('@tecsinapse/cortex-core');
+var React = require('react');
 
 const Card = React.forwardRef((props, ref) => {
   const { children, className, ...rest } = props;
-  return /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: cortexCore.card({ className }),
-      ref,
-      ...rest
-    },
-    children
-  );
+  return /* @__PURE__ */ React.createElement("div", { className: cortexCore.card({ className }), ref, ...rest }, children);
 });
 
 exports.Card = Card;

package/dist/cjs/components/Drawer.js

@@ -0,0 +1,32 @@
+'use strict';
+
+var React = require('react');
+var cortexCore = require('@tecsinapse/cortex-core');
+
+const Drawer = ({
+  children,
+  onClose,
+  open,
+  position = "right"
+}) => {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      "data-testid": "overlay",
+      className: cortexCore.overlay({ show: open }),
+      onClick: onClose
+    }
+  ), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      "data-testid": "drawer",
+      className: cortexCore.drawer({
+        position,
+        open
+      })
+    },
+    children
+  ));
+};
+
+exports.Drawer = Drawer;

package/dist/cjs/components/GroupButton.js

@@ -0,0 +1,42 @@
+'use strict';
+
+var clsx = require('clsx');
+var React = require('react');
+require('../styles/progressBar.js');
+var groupButton = require('../styles/groupButton.js');
+
+const { button, container, active, inactive, firstButton, lastButton } = groupButton.groupButton();
+const GroupButton = (props) => {
+  const {
+    options,
+    value,
+    renderKey,
+    renderOption,
+    onChange,
+    customStyles,
+    disableAllOptions
+  } = props;
+  return /* @__PURE__ */ React.createElement("div", { className: container(), "data-testid": "group-button-container" }, options.map((option) => {
+    const key = renderKey?.(option.value);
+    const isActive = key === renderKey?.(value);
+    return /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        disabled: disableAllOptions,
+        value: String(value),
+        onClick: () => onChange(option.value),
+        className: clsx(
+          button(),
+          firstButton({ className: customStyles?.firstButton }),
+          lastButton({ className: customStyles?.lastButton }),
+          !isActive && inactive({ className: customStyles?.inactive }),
+          isActive && active({ className: customStyles?.active })
+        ),
+        key
+      },
+      renderOption(option.value)
+    );
+  }));
+};
+
+exports.GroupButton = GroupButton;

package/dist/cjs/components/Input.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var React = require('react');
 var cortexCore = require('@tecsinapse/cortex-core');
 var clsx = require('clsx');
+var React = require('react');
 
 const getValidChildren = (children) => {
   return React.Children.toArray(children).filter(
@@ -19,13 +19,15 @@ const Box = React.forwardRef(
         placeholder: placeholder ?? " ",
         className: clsx.clsx(cortexCore.inputBox(placeholder, label, className)),
         ...rest,
-        ref
+        ref,
+        "data-testid": "input-input"
       }
     ), /* @__PURE__ */ React.createElement(
       "label",
       {
         htmlFor: id ?? name,
-        className: cortexCore.labelStyle({ intent: variants?.intent, placeholder })
+        className: cortexCore.labelStyle({ intent: variants?.intent, placeholder }),
+        "data-testid": "input-label"
       },
       label
     ));

package/dist/cjs/components/Modal.js

@@ -5,21 +5,14 @@ var cortexCore = require('@tecsinapse/cortex-core');
 
 const Modal = React.forwardRef((props, ref) => {
   const { open, onClose, children, className } = props;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("div", { ref, ...props }, /* @__PURE__ */ React.createElement(
     "div",
     {
-      ref,
-      ...props
-    },
-    /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: cortexCore.overlay({ show: open }),
-        onClick: onClose
-      }
-    ),
-    /* @__PURE__ */ React.createElement("dialog", { className: cortexCore.modal({ open, className }) }, children)
-  );
+      "data-testid": "overlay",
+      className: cortexCore.overlay({ show: open }),
+      onClick: onClose
+    }
+  ), /* @__PURE__ */ React.createElement("dialog", { "data-testid": "modal", className: cortexCore.modal({ open, className }) }, children));
 });
 
 exports.Modal = Modal;

package/dist/cjs/components/ProgressBar.js

@@ -0,0 +1,70 @@
+'use strict';
+
+var clsx = require('clsx');
+var React = require('react');
+var progressBar = require('../styles/progressBar.js');
+require('../styles/groupButton.js');
+
+const ProgressBar = ({
+  segments: _segments = 1,
+  valueMin = 0,
+  valueMax = 100,
+  valueCurrent = 50,
+  intentProgress = "default",
+  animated = true
+}) => {
+  const [displayedValue, setDisplayedValue] = React.useState(0);
+  const [showAnimation, setShowAnimation] = React.useState(true);
+  React.useEffect(() => {
+    const timeout = setTimeout(() => {
+      if (valueCurrent < displayedValue) {
+        setShowAnimation(false);
+      }
+      if (animated && valueCurrent > displayedValue) setShowAnimation(true);
+      setDisplayedValue(valueCurrent);
+    }, 0);
+    return () => clearTimeout(timeout);
+  }, [valueCurrent]);
+  const progressStyle = React.useCallback(
+    (width, index) => {
+      return {
+        width: `${width}%`,
+        transitionDelay: `${showAnimation ? `${index * 1e3}ms` : `0ms`}`
+      };
+    },
+    [showAnimation]
+  );
+  const totalProgress = (displayedValue - valueMin) / (valueMax - valueMin) * 100;
+  const segments = Math.max(1, _segments);
+  const lengthSeg = 100 / Math.max(segments);
+  const items = [...Array(segments).keys()];
+  return /* @__PURE__ */ React.createElement("div", { className: "flex gap-x-nano flex-row" }, items.map((_, index) => {
+    const max = lengthSeg * (index + 1);
+    const min = lengthSeg * index;
+    const minmax = (totalProgress - min) / (max - min);
+    const width = (minmax > 1 ? 1 : minmax < 0 ? 0 : minmax) * 100;
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        "data-testid": "progress-bar",
+        key: index,
+        className: clsx(
+          "h-[0.5rem] bg-secondary-light flex flex-1 first:rounded-l-pill last:rounded-r-pill"
+        )
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          "data-testid": "div-segment-filled",
+          style: progressStyle(width, index),
+          className: progressBar.progressBarFilled({
+            intentProgress,
+            showAnimation
+          })
+        }
+      )
+    );
+  }));
+};
+
+exports.ProgressBar = ProgressBar;

package/dist/cjs/components/SearchInput.js

@@ -13,6 +13,11 @@ require('./Tag.js');
 require('./Toggle.js');
 require('./TextArea.js');
 require('@tecsinapse/cortex-core');
+require('react-icons/md');
+require('clsx');
+require('../styles/progressBar.js');
+require('../styles/groupButton.js');
+require('./GroupButton.js');
 var ai = require('react-icons/ai');
 var io5 = require('react-icons/io5');
 var useDebouncedState = require('../hooks/useDebouncedState.js');

package/dist/cjs/components/Skeleton.js

@@ -0,0 +1,21 @@
+'use strict';
+
+var clsx = require('clsx');
+var React = require('react');
+
+const Skeleton = ({
+  className,
+  children,
+  ...rest
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ...rest,
+      className: clsx("animate-pulse bg-secondary-light", className)
+    },
+    children
+  );
+};
+
+exports.Skeleton = Skeleton;

package/dist/cjs/components/Table.js

@@ -18,6 +18,9 @@ const THeadCell = ({
   className,
   ...rest
 }) => /* @__PURE__ */ React.createElement("th", { className: cortexCore.tHeadCell({ className }), ...rest }, children);
+const TRowHeader = ({
+  children
+}) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("tr", { className: cortexCore.tRow() }, children), /* @__PURE__ */ React.createElement("tr", { className: cortexCore.tRow() }, /* @__PURE__ */ React.createElement("td", { colSpan: 99 }, /* @__PURE__ */ React.createElement("hr", { className: cortexCore.hr() }))));
 const TCell = ({
   children,
   className,
@@ -41,7 +44,7 @@ const Hr = ({
 const Td = ({
   children,
   ...rest
-}) => /* @__PURE__ */ React.createElement("td", { colSpan: 99, ...rest }, children);
+}) => /* @__PURE__ */ React.createElement("td", { ...rest }, children);
 
 exports.Hr = Hr;
 exports.TCell = TCell;
@@ -49,5 +52,6 @@ exports.TFoot = TFoot;
 exports.THead = THead;
 exports.THeadCell = THeadCell;
 exports.TRow = TRow;
+exports.TRowHeader = TRowHeader;
 exports.Table = Table;
 exports.Td = Td;

package/dist/cjs/components/Toggle.js

@@ -1,18 +1,26 @@
 'use strict';
 
-var React = require('react');
 var cortexCore = require('@tecsinapse/cortex-core');
+var React = require('react');
 
 const Toggle = React.forwardRef((props, ref) => {
-  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-row items-center gap-x-centi" }, /* @__PURE__ */ React.createElement("label", { className: cortexCore.styleLabelElement() }, /* @__PURE__ */ React.createElement(
-    "input",
+  return /* @__PURE__ */ React.createElement(
+    "div",
     {
-      type: "checkbox",
-      className: cortexCore.styleInputElement(),
-      ref,
-      ...props
-    }
-  ), /* @__PURE__ */ React.createElement("div", { className: cortexCore.toggle() })));
+      className: "flex flex-row items-center gap-x-centi",
+      "data-testid": "toggle-div"
+    },
+    /* @__PURE__ */ React.createElement("label", { className: cortexCore.styleLabelElement() }, /* @__PURE__ */ React.createElement(
+      "input",
+      {
+        type: "checkbox",
+        className: cortexCore.styleInputElement(),
+        ref,
+        "data-testid": "toggle-input",
+        ...props
+      }
+    ), /* @__PURE__ */ React.createElement("div", { className: cortexCore.toggle() }))
+  );
 });
 
 exports.Toggle = Toggle;

package/dist/cjs/components/utils.js

@@ -0,0 +1,12 @@
+'use strict';
+
+const getNameInitials = (name) => {
+  const nameSplit = name.split(" ");
+  const length = nameSplit.length;
+  if (length > 1) {
+    return `${nameSplit[0][0]}${nameSplit[length - 1][0]}`;
+  }
+  return name[0];
+};
+
+exports.getNameInitials = getNameInitials;

package/dist/cjs/index.js

@@ -12,6 +12,12 @@ var Tag = require('./components/Tag.js');
 var Toggle = require('./components/Toggle.js');
 var TextArea = require('./components/TextArea.js');
 var Table = require('./components/Table.js');
+var Drawer = require('./components/Drawer.js');
+var Breadcrumbs = require('./components/Breadcrumbs.js');
+var Avatar = require('./components/Avatar.js');
+var Skeleton = require('./components/Skeleton.js');
+var ProgressBar = require('./components/ProgressBar.js');
+var GroupButton = require('./components/GroupButton.js');
 
 
 
@@ -38,5 +44,12 @@ exports.TFoot = Table.TFoot;
 exports.THead = Table.THead;
 exports.THeadCell = Table.THeadCell;
 exports.TRow = Table.TRow;
+exports.TRowHeader = Table.TRowHeader;
 exports.Table = Table.Table;
 exports.Td = Table.Td;
+exports.Drawer = Drawer.Drawer;
+exports.Breadcrumbs = Breadcrumbs.Breadcrumbs;
+exports.Avatar = Avatar.Avatar;
+exports.Skeleton = Skeleton.Skeleton;
+exports.ProgressBar = ProgressBar.ProgressBar;
+exports.GroupButton = GroupButton.GroupButton;

package/dist/cjs/styles/groupButton.js

@@ -0,0 +1,16 @@
+'use strict';
+
+var tailwindVariants = require('tailwind-variants');
+
+const groupButton = tailwindVariants.tv({
+  slots: {
+    button: "border-[1px] border-secondary-medium px-centi py-mili items-center flex text-sub font-bold",
+    inactive: "bg-white text-secondary-medium disabled:bg-secondary-light",
+    firstButton: "first:rounded-l-mili first:border-r-0",
+    lastButton: "last:rounded-r-mili last:border-l-0",
+    container: "flex flex-row flex-1 h-[2rem] w-[500px]",
+    active: "text-white bg-secondary-medium"
+  }
+});
+
+exports.groupButton = groupButton;

package/dist/cjs/styles/progressBar.js

@@ -0,0 +1,21 @@
+'use strict';
+
+var tailwindVariants = require('tailwind-variants');
+
+const progressBarFilled = tailwindVariants.tv({
+  base: "h-full first:rounded-l-pill last:rounded-r-pill",
+  variants: {
+    intentProgress: {
+      default: "bg-primary-medium",
+      error: "bg-error-medium",
+      info: "bg-info-medium",
+      warning: "bg-warning-medium",
+      success: "bg-success-medium"
+    },
+    showAnimation: {
+      true: "transition-[width] duration-1000 ease-linear"
+    }
+  }
+});
+
+exports.progressBarFilled = progressBarFilled;

package/dist/esm/components/Avatar.js

@@ -0,0 +1,32 @@
+import clsx from 'clsx';
+import React from 'react';
+import { getNameInitials } from './utils.js';
+
+const Avatar = ({ src, name, className, ...rest }) => {
+  const [hasError, setHasError] = React.useState(false);
+  React.useEffect(() => {
+    setHasError(false);
+  }, [src]);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ...rest,
+      className: clsx(
+        "rounded-pill bg-secondary-dark w-mega h-mega flex items-center justify-center cursor-pointer",
+        className
+      )
+    },
+    src && !hasError ? /* @__PURE__ */ React.createElement(
+      "img",
+      {
+        src,
+        alt: name,
+        className: "rounded-pill",
+        onError: () => setHasError(true),
+        "data-testid": "avatar-img"
+      }
+    ) : /* @__PURE__ */ React.createElement("p", { className: "font-bold text-white text-base", "data-testid": "avatar-p" }, getNameInitials(name))
+  );
+};
+
+export { Avatar };

package/dist/esm/components/BreadcrumbItem.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { MdOutlineKeyboardDoubleArrowRight } from 'react-icons/md';
+
+const BreadcrumbItem = ({
+  isLast,
+  Component,
+  componentProps,
+  title
+}) => {
+  return /* @__PURE__ */ React.createElement(Component, { ...componentProps, key: title }, /* @__PURE__ */ React.createElement("div", { className: "flex gap-x-mili items-center" }, /* @__PURE__ */ React.createElement(
+    "p",
+    {
+      className: isLast ? "text-secondary-medium" : "text-secondary-xdark"
+    },
+    title
+  ), !isLast ? /* @__PURE__ */ React.createElement(
+    MdOutlineKeyboardDoubleArrowRight,
+    {
+      className: "mt-[0.125rem] text-primary-medium",
+      "data-testid": "breadcrumb-item-icon"
+    }
+  ) : /* @__PURE__ */ React.createElement(React.Fragment, null)));
+};
+
+export { BreadcrumbItem };

package/dist/esm/components/Breadcrumbs.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { BreadcrumbItem } from './BreadcrumbItem.js';
+import { Card } from './Card.js';
+
+const Breadcrumbs = (props) => {
+  const { breadcrumbs, ...rest } = props;
+  return /* @__PURE__ */ React.createElement(Card, { className: "flex gap-x-mili w-full items-center py-mili", ...rest }, breadcrumbs.map((item, index) => {
+    const isLast = index === breadcrumbs.length - 1;
+    return /* @__PURE__ */ React.createElement(
+      BreadcrumbItem,
+      {
+        key: `${item.title}-${index}`,
+        ...item,
+        isLast
+      }
+    );
+  }));
+};
+
+export { Breadcrumbs };

package/dist/esm/components/Card.js

@@ -1,17 +1,9 @@
-import React, { forwardRef } from 'react';
 import { card } from '@tecsinapse/cortex-core';
+import React, { forwardRef } from 'react';
 
 const Card = forwardRef((props, ref) => {
   const { children, className, ...rest } = props;
-  return /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: card({ className }),
-      ref,
-      ...rest
-    },
-    children
-  );
+  return /* @__PURE__ */ React.createElement("div", { className: card({ className }), ref, ...rest }, children);
 });
 
 export { Card };