@fuf-stack/pixels 0.0.3 → 0.0.5

package/src/components/Button/Button.tsx

@@ -0,0 +1,74 @@
+import type { ButtonProps as NextButtonProps } from '@nextui-org/button';
+import type { ReactNode } from 'react';
+
+import { Button as NextButton } from '@nextui-org/button';
+import cn from 'classnames';
+
+import LoadingSpinner from './subcomponents/LoadingSpinner';
+
+export interface ButtonProps {
+  /** sets HTML aria-label attribute */
+  ariaLabel?: string;
+  /** child components */
+  children?: ReactNode;
+  /** CSS class name */
+  className?: string | string[];
+  /** next ui button color  */
+  color?: NextButtonProps['color'];
+  /** disables function of the button. */
+  disabled?: boolean;
+  /** If set loading animation is shown */
+  loading?: boolean;
+  /** optional icon */
+  icon?: ReactNode;
+  /** on click event */
+  onClick?: NextButtonProps['onPress'];
+  /** 3 size options */
+  size?: NextButtonProps['size'];
+  /** HTML data-testid attribute used in e2e tests */
+  testId?: string;
+  /** sets the button type. */
+  type?: 'button' | 'submit' | 'reset' | undefined;
+  /** next ui button variants */
+  variant?: NextButtonProps['variant'];
+}
+
+/**
+ * Button component based on [NextUI Button](https://nextui.org/docs/components/button)
+ */
+const Button = ({
+  ariaLabel = undefined,
+  children = undefined,
+  className = undefined,
+  color = 'default',
+  disabled = false,
+  icon = undefined,
+  loading = false,
+  onClick = undefined,
+  size = undefined,
+  testId = undefined,
+  type = undefined,
+  variant = 'solid',
+}: ButtonProps) => {
+  return (
+    <NextButton
+      aria-label={ariaLabel}
+      className={cn(className)}
+      color={color}
+      data-testid={testId}
+      isDisabled={disabled}
+      isIconOnly={!!(icon && !children)}
+      isLoading={loading}
+      onPress={onClick}
+      size={size}
+      spinner={<LoadingSpinner />}
+      type={type}
+      variant={variant}
+    >
+      {icon}
+      {children}
+    </NextButton>
+  );
+};
+
+export default Button;

package/src/components/Button/__snapshots__/Button.test.tsx.snap

@@ -0,0 +1,235 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Story Snapshots > AllColors 1`] = `
+<div>
+  <div
+    style="margin-top: 10px;"
+  >
+    <button
+      class="z-0 group relative inline-flex items-center justify-center box-border appearance-none select-none whitespace-nowrap font-normal subpixel-antialiased overflow-hidden tap-highlight-transparent outline-none data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 px-unit-4 min-w-unit-20 h-unit-10 text-small gap-unit-2 rounded-medium [&>svg]:max-w-[theme(spacing.unit-8)] data-[pressed=true]:scale-[0.97] transition-transform-colors-opacity motion-reduce:transition-none bg-default text-default-foreground data-[hover=true]:opacity-hover"
+      type="button"
+    >
+      default
+    </button>
+  </div>
+  <div
+    style="margin-top: 10px;"
+  >
+    <button
+      class="z-0 group relative inline-flex items-center justify-center box-border appearance-none select-none whitespace-nowrap font-normal subpixel-antialiased overflow-hidden tap-highlight-transparent outline-none data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 px-unit-4 min-w-unit-20 h-unit-10 text-small gap-unit-2 rounded-medium [&>svg]:max-w-[theme(spacing.unit-8)] data-[pressed=true]:scale-[0.97] transition-transform-colors-opacity motion-reduce:transition-none bg-primary text-primary-foreground data-[hover=true]:opacity-hover"
+      type="button"
+    >
+      primary
+    </button>
+  </div>
+  <div
+    style="margin-top: 10px;"
+  >
+    <button
+      class="z-0 group relative inline-flex items-center justify-center box-border appearance-none select-none whitespace-nowrap font-normal subpixel-antialiased overflow-hidden tap-highlight-transparent outline-none data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 px-unit-4 min-w-unit-20 h-unit-10 text-small gap-unit-2 rounded-medium [&>svg]:max-w-[theme(spacing.unit-8)] data-[pressed=true]:scale-[0.97] transition-transform-colors-opacity motion-reduce:transition-none bg-secondary text-secondary-foreground data-[hover=true]:opacity-hover"
+      type="button"
+    >
+      secondary
+    </button>
+  </div>
+  <div
+    style="margin-top: 10px;"
+  >
+    <button
+      class="z-0 group relative inline-flex items-center justify-center box-border appearance-none select-none whitespace-nowrap font-normal subpixel-antialiased overflow-hidden tap-highlight-transparent outline-none data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 px-unit-4 min-w-unit-20 h-unit-10 text-small gap-unit-2 rounded-medium [&>svg]:max-w-[theme(spacing.unit-8)] data-[pressed=true]:scale-[0.97] transition-transform-colors-opacity motion-reduce:transition-none bg-success text-success-foreground data-[hover=true]:opacity-hover"
+      type="button"
+    >
+      success
+    </button>
+  </div>
+  <div
+    style="margin-top: 10px;"
+  >
+    <button
+      class="z-0 group relative inline-flex items-center justify-center box-border appearance-none select-none whitespace-nowrap font-normal subpixel-antialiased overflow-hidden tap-highlight-transparent outline-none data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 px-unit-4 min-w-unit-20 h-unit-10 text-small gap-unit-2 rounded-medium [&>svg]:max-w-[theme(spacing.unit-8)] data-[pressed=true]:scale-[0.97] transition-transform-colors-opacity motion-reduce:transition-none bg-warning text-warning-foreground data-[hover=true]:opacity-hover"
+      type="button"
+    >
+      warning
+    </button>
+  </div>
+  <div
+    style="margin-top: 10px;"
+  >
+    <button
+      class="z-0 group relative inline-flex items-center justify-center box-border appearance-none select-none whitespace-nowrap font-normal subpixel-antialiased overflow-hidden tap-highlight-transparent outline-none data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 px-unit-4 min-w-unit-20 h-unit-10 text-small gap-unit-2 rounded-medium [&>svg]:max-w-[theme(spacing.unit-8)] data-[pressed=true]:scale-[0.97] transition-transform-colors-opacity motion-reduce:transition-none bg-danger text-danger-foreground data-[hover=true]:opacity-hover"
+      type="button"
+    >
+      danger
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Story Snapshots > AllSizes 1`] = `
+<div>
+  <div
+    style="margin-top: 10px;"
+  >
+    <button
+      class="z-0 group relative inline-flex items-center justify-center box-border appearance-none select-none whitespace-nowrap font-normal subpixel-antialiased overflow-hidden tap-highlight-transparent outline-none data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 px-unit-3 min-w-unit-16 h-unit-8 text-tiny gap-unit-2 rounded-small [&>svg]:max-w-[theme(spacing.unit-8)] data-[pressed=true]:scale-[0.97] transition-transform-colors-opacity motion-reduce:transition-none bg-default text-default-foreground data-[hover=true]:opacity-hover"
+      type="button"
+    >
+      sm
+    </button>
+  </div>
+  <div
+    style="margin-top: 10px;"
+  >
+    <button
+      class="z-0 group relative inline-flex items-center justify-center box-border appearance-none select-none whitespace-nowrap font-normal subpixel-antialiased overflow-hidden tap-highlight-transparent outline-none data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 px-unit-4 min-w-unit-20 h-unit-10 text-small gap-unit-2 rounded-medium [&>svg]:max-w-[theme(spacing.unit-8)] data-[pressed=true]:scale-[0.97] transition-transform-colors-opacity motion-reduce:transition-none bg-default text-default-foreground data-[hover=true]:opacity-hover"
+      type="button"
+    >
+      md
+    </button>
+  </div>
+  <div
+    style="margin-top: 10px;"
+  >
+    <button
+      class="z-0 group relative inline-flex items-center justify-center box-border appearance-none select-none whitespace-nowrap font-normal subpixel-antialiased overflow-hidden tap-highlight-transparent outline-none data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 px-unit-6 min-w-unit-24 h-unit-12 text-medium gap-unit-3 rounded-large [&>svg]:max-w-[theme(spacing.unit-8)] data-[pressed=true]:scale-[0.97] transition-transform-colors-opacity motion-reduce:transition-none bg-default text-default-foreground data-[hover=true]:opacity-hover"
+      type="button"
+    >
+      lg
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Story Snapshots > AllVariants 1`] = `
+<div>
+  <div
+    style="margin-top: 10px;"
+  >
+    <button
+      class="z-0 group relative inline-flex items-center justify-center box-border appearance-none select-none whitespace-nowrap font-normal subpixel-antialiased overflow-hidden tap-highlight-transparent outline-none data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 px-unit-4 min-w-unit-20 h-unit-10 text-small gap-unit-2 rounded-medium [&>svg]:max-w-[theme(spacing.unit-8)] data-[pressed=true]:scale-[0.97] transition-transform-colors-opacity motion-reduce:transition-none bg-default text-default-foreground data-[hover=true]:opacity-hover"
+      type="button"
+    >
+      solid
+    </button>
+  </div>
+  <div
+    style="margin-top: 10px;"
+  >
+    <button
+      class="z-0 group relative inline-flex items-center justify-center box-border appearance-none select-none whitespace-nowrap font-normal subpixel-antialiased overflow-hidden tap-highlight-transparent outline-none data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 border-medium px-unit-4 min-w-unit-20 h-unit-10 text-small gap-unit-2 rounded-medium [&>svg]:max-w-[theme(spacing.unit-8)] data-[pressed=true]:scale-[0.97] transition-transform-colors-opacity motion-reduce:transition-none bg-transparent border-default text-foreground data-[hover=true]:opacity-hover"
+      type="button"
+    >
+      bordered
+    </button>
+  </div>
+  <div
+    style="margin-top: 10px;"
+  >
+    <button
+      class="z-0 group relative inline-flex items-center justify-center box-border appearance-none select-none whitespace-nowrap font-normal subpixel-antialiased overflow-hidden tap-highlight-transparent outline-none data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 px-unit-4 min-w-unit-20 h-unit-10 text-small gap-unit-2 rounded-medium [&>svg]:max-w-[theme(spacing.unit-8)] data-[pressed=true]:scale-[0.97] transition-transform-colors-opacity motion-reduce:transition-none bg-transparent text-default-foreground data-[hover=true]:bg-default/40"
+      type="button"
+    >
+      light
+    </button>
+  </div>
+  <div
+    style="margin-top: 10px;"
+  >
+    <button
+      class="z-0 group relative inline-flex items-center justify-center box-border appearance-none select-none whitespace-nowrap font-normal subpixel-antialiased overflow-hidden tap-highlight-transparent outline-none data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 px-unit-4 min-w-unit-20 h-unit-10 text-small gap-unit-2 rounded-medium [&>svg]:max-w-[theme(spacing.unit-8)] data-[pressed=true]:scale-[0.97] transition-transform-colors-opacity motion-reduce:transition-none bg-default/40 text-default-foreground data-[hover=true]:opacity-hover"
+      type="button"
+    >
+      flat
+    </button>
+  </div>
+  <div
+    style="margin-top: 10px;"
+  >
+    <button
+      class="z-0 group relative inline-flex items-center justify-center box-border appearance-none select-none whitespace-nowrap font-normal subpixel-antialiased overflow-hidden tap-highlight-transparent outline-none data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 border-medium px-unit-4 min-w-unit-20 h-unit-10 text-small gap-unit-2 rounded-medium [&>svg]:max-w-[theme(spacing.unit-8)] data-[pressed=true]:scale-[0.97] transition-transform-colors-opacity motion-reduce:transition-none border-default bg-default-100 text-default-foreground data-[hover=true]:opacity-hover"
+      type="button"
+    >
+      faded
+    </button>
+  </div>
+  <div
+    style="margin-top: 10px;"
+  >
+    <button
+      class="z-0 group relative inline-flex items-center justify-center box-border appearance-none select-none whitespace-nowrap font-normal subpixel-antialiased overflow-hidden tap-highlight-transparent outline-none data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 px-unit-4 min-w-unit-20 h-unit-10 text-small gap-unit-2 rounded-medium [&>svg]:max-w-[theme(spacing.unit-8)] data-[pressed=true]:scale-[0.97] transition-transform-colors-opacity motion-reduce:transition-none shadow-lg shadow-default/50 bg-default text-default-foreground data-[hover=true]:opacity-hover"
+      type="button"
+    >
+      shadow
+    </button>
+  </div>
+  <div
+    style="margin-top: 10px;"
+  >
+    <button
+      class="z-0 group relative inline-flex items-center justify-center box-border appearance-none select-none whitespace-nowrap font-normal subpixel-antialiased overflow-hidden tap-highlight-transparent outline-none data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 border-medium bg-transparent px-unit-4 min-w-unit-20 h-unit-10 text-small gap-unit-2 rounded-medium [&>svg]:max-w-[theme(spacing.unit-8)] data-[pressed=true]:scale-[0.97] transition-transform-colors-opacity motion-reduce:transition-none border-default text-default-foreground hover:!bg-default"
+      type="button"
+    >
+      ghost
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Story Snapshots > Default 1`] = `
+<div>
+  <button
+    class="z-0 group relative inline-flex items-center justify-center box-border appearance-none select-none whitespace-nowrap font-normal subpixel-antialiased overflow-hidden tap-highlight-transparent outline-none data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 px-unit-4 min-w-unit-20 h-unit-10 text-small gap-unit-2 rounded-medium [&>svg]:max-w-[theme(spacing.unit-8)] data-[pressed=true]:scale-[0.97] transition-transform-colors-opacity motion-reduce:transition-none bg-default text-default-foreground data-[hover=true]:opacity-hover"
+    data-testid="some-test-id"
+    type="button"
+  >
+    Button
+  </button>
+</div>
+`;
+
+exports[`Story Snapshots > Disabled 1`] = `
+<div>
+  <button
+    class="z-0 group relative inline-flex items-center justify-center box-border appearance-none select-none whitespace-nowrap font-normal subpixel-antialiased overflow-hidden tap-highlight-transparent outline-none data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 px-unit-4 min-w-unit-20 h-unit-10 text-small gap-unit-2 rounded-medium opacity-disabled pointer-events-none [&>svg]:max-w-[theme(spacing.unit-8)] data-[pressed=true]:scale-[0.97] transition-transform-colors-opacity motion-reduce:transition-none bg-default text-default-foreground data-[hover=true]:opacity-hover"
+    data-disabled="true"
+    disabled=""
+    type="button"
+  >
+    Button
+  </button>
+</div>
+`;
+
+exports[`Story Snapshots > Loading 1`] = `
+<div>
+  <button
+    class="z-0 group relative inline-flex items-center justify-center box-border appearance-none select-none whitespace-nowrap font-normal subpixel-antialiased overflow-hidden tap-highlight-transparent outline-none data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 px-unit-4 min-w-unit-20 h-unit-10 text-small gap-unit-2 rounded-medium opacity-disabled pointer-events-none [&>svg]:max-w-[theme(spacing.unit-8)] data-[pressed=true]:scale-[0.97] transition-transform-colors-opacity motion-reduce:transition-none bg-default text-default-foreground data-[hover=true]:opacity-hover"
+    data-disabled="true"
+    data-loading="true"
+    disabled=""
+    type="button"
+  >
+    <svg
+      class="animate-spin h-5 w-5 text-current"
+      fill="none"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle
+        class="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        stroke-width="4"
+      />
+      <path
+        class="opacity-75"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        fill="currentColor"
+      />
+    </svg>
+    Button
+  </button>
+</div>
+`;

package/src/components/Button/index.ts

@@ -0,0 +1,7 @@
+import type { ButtonProps } from './Button';
+
+import Button from './Button';
+
+export default Button;
+
+export type { ButtonProps };

package/src/components/Button/subcomponents/LoadingSpinner.tsx

@@ -0,0 +1,26 @@
+/**
+ * svg loading spinner for button
+ * @see https://nextui.org/docs/components/button#loading
+ * */
+export default () => (
+  <svg
+    className="animate-spin h-5 w-5 text-current"
+    fill="none"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle
+      className="opacity-25"
+      cx="12"
+      cy="12"
+      r="10"
+      stroke="currentColor"
+      strokeWidth="4"
+    />
+    <path
+      className="opacity-75"
+      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      fill="currentColor"
+    />
+  </svg>
+);

package/src/components/Card/Card.stories.tsx

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Card from './Card';
+
+const meta: Meta<typeof Card> = {
+  title: 'pixels/Card',
+  component: Card,
+};
+
+export default meta;
+type Story = StoryObj<typeof Card>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <p className="w-96">
+        Lorem commodo nulla adipisicing cillum Lorem sunt laboris exercitation
+        esse. Exercitation ut cillum cupidatat deserunt occaecat pariatur
+        laborum ut reprehenderit veniam. Culpa fugiat aliqua consectetur sit
+        esse.
+      </p>
+    ),
+  },
+};
+
+export const FooterAndHeader: Story = {
+  args: {
+    footer: 'Footer',
+    header: 'Header',
+    children: (
+      <p className="w-96">
+        Lorem commodo nulla adipisicing cillum Lorem sunt laboris exercitation
+        esse. Exercitation ut cillum cupidatat deserunt occaecat pariatur
+        laborum ut reprehenderit veniam. Culpa fugiat aliqua consectetur sit
+        esse.
+      </p>
+    ),
+  },
+};
+
+export const CustomSlotStyles: Story = {
+  args: {
+    footer: 'Footer',
+    header: 'Header',
+    children: (
+      <p className="w-96">
+        Lorem commodo nulla adipisicing cillum Lorem sunt laboris exercitatio
+      </p>
+    ),
+    className: {
+      base: 'text-blue-400',
+      body: 'text-green-400',
+      divider: 'bg-yellow-400',
+    },
+  },
+};

package/src/components/Card/Card.test.tsx

@@ -0,0 +1,9 @@
+import { describe } from 'vitest';
+
+import storySnapshots from 'storybook-config/story-snapshots';
+
+import * as stories from './Card.stories';
+
+describe('Story Snapshots', () => {
+  storySnapshots(stories);
+});

package/src/components/Card/Card.tsx

@@ -0,0 +1,120 @@
+import type { ReactNode } from 'react';
+import type { VariantProps } from 'tailwind-variants';
+
+import {
+  Card as NextCard,
+  CardBody as NextCardBody,
+  CardFooter as NextCardFooter,
+  CardHeader as NextCardHeader,
+} from '@nextui-org/card';
+import { Divider as NextDivider } from '@nextui-org/divider';
+import createDebug from 'debug';
+import { tv } from 'tailwind-variants';
+
+const debug = createDebug('component:Card');
+
+// card styling variants
+export const cardVariants = tv({
+  slots: {
+    base: 'border border-slate-300',
+    body: '',
+    divider: 'my-0 bg-slate-300',
+    footer: '',
+    header: 'text-base font-semibold',
+  },
+});
+
+type CardVariantProps = VariantProps<typeof cardVariants>;
+type CardVariantSlots = Partial<
+  Record<keyof ReturnType<typeof cardVariants>, string>
+>;
+
+export interface CardProps extends CardVariantProps {
+  /** child components */
+  children?: ReactNode;
+  /** CSS class name */
+  className?: string | CardVariantSlots;
+  /** footer content */
+  footer?: ReactNode;
+  /** header content */
+  header?: ReactNode;
+  /** HTML data-testid attribute used in e2e tests */
+  testId?: string;
+}
+
+/**
+ * Card component based on [NextUI Card](https://nextui.org/docs/components/card)
+ */
+const Card = ({
+  children = null,
+  className = undefined,
+  testId = undefined,
+  header = undefined,
+  footer = undefined,
+}: CardProps) => {
+  debug('Card', { className, testId });
+  const {
+    base: baseSlot,
+    body: bodySlot,
+    divider: dividerSlot,
+    footer: footerSlot,
+    header: headerSlot,
+  } = cardVariants();
+
+  return (
+    <NextCard
+      data-testid={testId && `card_${testId}`}
+      className={baseSlot({
+        className: typeof className === 'object' ? className.base : className,
+      })}
+      fullWidth
+      radius="sm"
+      shadow="none"
+    >
+      {header && (
+        <>
+          <NextCardHeader
+            data-testid={testId && `card_header_${testId}`}
+            className={headerSlot({
+              className: typeof className === 'object' && className.header,
+            })}
+          >
+            {header}
+          </NextCardHeader>
+          <NextDivider
+            className={dividerSlot({
+              className: typeof className === 'object' && className.divider,
+            })}
+          />
+        </>
+      )}
+      <NextCardBody
+        data-testid={testId && `card_body_${testId}`}
+        className={bodySlot({
+          className: typeof className === 'object' && className.body,
+        })}
+      >
+        {children}
+      </NextCardBody>
+      {footer && (
+        <>
+          <NextDivider
+            className={dividerSlot({
+              className: typeof className === 'object' && className.divider,
+            })}
+          />
+          <NextCardFooter
+            data-testid={testId && `card_footer_${testId}`}
+            className={footerSlot({
+              className: typeof className === 'object' && className.footer,
+            })}
+          >
+            {footer}
+          </NextCardFooter>
+        </>
+      )}
+    </NextCard>
+  );
+};
+
+export default Card;

package/src/components/Card/__snapshots__/Card.test.tsx.snap

@@ -0,0 +1,94 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Story Snapshots > CustomSlotStyles 1`] = `
+<div>
+  <div
+    class="flex flex-col relative overflow-hidden height-auto box-border bg-content1 outline-none data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 shadow-none rounded-small w-full transition-transform-background motion-reduce:transition-none border border-slate-300 text-blue-400"
+    tabindex="-1"
+  >
+    <div
+      class="flex p-3 z-10 w-full justify-start items-center shrink-0 overflow-inherit color-inherit subpixel-antialiased rounded-t-small text-base font-semibold"
+    >
+      Header
+    </div>
+    <hr
+      class="shrink-0 border-none w-full h-divider my-0 bg-yellow-400"
+      role="separator"
+    />
+    <div
+      class="relative flex w-full p-3 flex-auto flex-col place-content-inherit align-items-inherit h-auto break-words text-left overflow-y-auto subpixel-antialiased text-green-400"
+    >
+      <p
+        class="w-96"
+      >
+        Lorem commodo nulla adipisicing cillum Lorem sunt laboris exercitatio
+      </p>
+    </div>
+    <hr
+      class="shrink-0 border-none w-full h-divider my-0 bg-yellow-400"
+      role="separator"
+    />
+    <div
+      class="p-3 h-auto flex w-full items-center overflow-hidden color-inherit subpixel-antialiased rounded-b-small"
+    >
+      Footer
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Story Snapshots > Default 1`] = `
+<div>
+  <div
+    class="flex flex-col relative overflow-hidden height-auto text-foreground box-border bg-content1 outline-none data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 shadow-none rounded-small w-full transition-transform-background motion-reduce:transition-none border border-slate-300"
+    tabindex="-1"
+  >
+    <div
+      class="relative flex w-full p-3 flex-auto flex-col place-content-inherit align-items-inherit h-auto break-words text-left overflow-y-auto subpixel-antialiased"
+    >
+      <p
+        class="w-96"
+      >
+        Lorem commodo nulla adipisicing cillum Lorem sunt laboris exercitation esse. Exercitation ut cillum cupidatat deserunt occaecat pariatur laborum ut reprehenderit veniam. Culpa fugiat aliqua consectetur sit esse.
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Story Snapshots > FooterAndHeader 1`] = `
+<div>
+  <div
+    class="flex flex-col relative overflow-hidden height-auto text-foreground box-border bg-content1 outline-none data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 shadow-none rounded-small w-full transition-transform-background motion-reduce:transition-none border border-slate-300"
+    tabindex="-1"
+  >
+    <div
+      class="flex p-3 z-10 w-full justify-start items-center shrink-0 overflow-inherit color-inherit subpixel-antialiased rounded-t-small text-base font-semibold"
+    >
+      Header
+    </div>
+    <hr
+      class="shrink-0 border-none w-full h-divider my-0 bg-slate-300"
+      role="separator"
+    />
+    <div
+      class="relative flex w-full p-3 flex-auto flex-col place-content-inherit align-items-inherit h-auto break-words text-left overflow-y-auto subpixel-antialiased"
+    >
+      <p
+        class="w-96"
+      >
+        Lorem commodo nulla adipisicing cillum Lorem sunt laboris exercitation esse. Exercitation ut cillum cupidatat deserunt occaecat pariatur laborum ut reprehenderit veniam. Culpa fugiat aliqua consectetur sit esse.
+      </p>
+    </div>
+    <hr
+      class="shrink-0 border-none w-full h-divider my-0 bg-slate-300"
+      role="separator"
+    />
+    <div
+      class="p-3 h-auto flex w-full items-center overflow-hidden color-inherit subpixel-antialiased rounded-b-small"
+    >
+      Footer
+    </div>
+  </div>
+</div>
+`;

package/src/components/Card/index.ts

@@ -0,0 +1,3 @@
+import Card from './Card';
+
+export default Card;

package/tailwind.config.js

@@ -0,0 +1,7 @@
+/* eslint-disable import/no-extraneous-dependencies */
+
+const sharedConfig = require('tailwind-config/tailwind.config');
+
+module.exports = {
+  presets: [sharedConfig],
+};

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ESNext"]
+  },
+  "include": ["src", "globals.d.ts"]
+}

package/tsup.config.ts

@@ -0,0 +1,15 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  clean: true,
+  dts: true,
+  entry: [
+    'src',
+    '!src/**/__snapshots__/**',
+    '!src/**/*.stories.*',
+    '!src/**/*.test.*',
+  ],
+  format: ['cjs', 'esm'],
+  sourcemap: true,
+});