@erquhart/heroui-native 1.0.0-beta.10.1

package/src/components/button/button.types.ts

@@ -0,0 +1,88 @@
+import type { TextProps } from 'react-native';
+import type {
+  PressableFeedbackHighlightProps,
+  PressableFeedbackProps,
+  PressableFeedbackRippleProps,
+} from '../pressable-feedback';
+
+/**
+ * Size variants for the Button component
+ */
+export type ButtonSize = 'sm' | 'md' | 'lg';
+
+/**
+ * Variant types for the Button component
+ */
+export type ButtonVariant =
+  | 'primary'
+  | 'secondary'
+  | 'tertiary'
+  | 'ghost'
+  | 'danger'
+  | 'danger-soft';
+
+/**
+ * Props for the Button.Root component
+ */
+export type ButtonRootProps = PressableFeedbackProps & {
+  /**
+   * Visual variant of the button
+   * @default 'primary'
+   */
+  variant?: ButtonVariant;
+  /**
+   * Size of the button
+   * @default 'md'
+   */
+  size?: ButtonSize;
+  /**
+   * Whether the button displays an icon only (needed for correct layout)
+   * @default false
+   */
+  isIconOnly?: boolean;
+  /**
+   * Variant of pressable feedback effect
+   * @default 'highlight'
+   */
+  pressableFeedbackVariant?: 'highlight' | 'ripple' | 'none';
+  /**
+   * Props for PressableFeedback.Highlight component
+   */
+  pressableFeedbackHighlightProps?: PressableFeedbackHighlightProps;
+  /**
+   * Props for PressableFeedback.Ripple component
+   */
+  pressableFeedbackRippleProps?: PressableFeedbackRippleProps;
+};
+
+/**
+ * Props for the Button.Label component
+ */
+export interface ButtonLabelProps extends TextProps {
+  /**
+   * Content to be rendered as label
+   */
+  children?: React.ReactNode;
+  /**
+   * Additional CSS classes
+   */
+  className?: string;
+}
+
+/**
+ * Context values shared between Button components
+ */
+export interface ButtonContextValue {
+  /**
+   * Size of the button
+   */
+  size: ButtonSize;
+  /**
+   * Visual variant of the button
+   */
+  variant: ButtonVariant;
+  /**
+   * Whether the button is disabled
+   */
+  isDisabled: boolean;
+}

package/src/components/button/index.ts

@@ -0,0 +1,8 @@
+export { default as Button, useButton } from './button';
+export type {
+  ButtonContextValue,
+  ButtonLabelProps,
+  ButtonRootProps,
+  ButtonSize,
+  ButtonVariant,
+} from './button.types';

package/src/components/card/card.constants.ts

@@ -0,0 +1,11 @@
+/**
+ * Display names for Card components
+ */
+export const DISPLAY_NAME = {
+  ROOT: 'HeroUINative.Card.Root',
+  HEADER: 'HeroUINative.Card.Header',
+  BODY: 'HeroUINative.Card.Body',
+  FOOTER: 'HeroUINative.Card.Footer',
+  TITLE: 'HeroUINative.Card.Title',
+  DESCRIPTION: 'HeroUINative.Card.Description',
+};

package/src/components/card/card.md

@@ -0,0 +1,187 @@
+# Card
+
+Displays a card container with flexible layout sections for structured content.
+
+## Imports
+
+Note: Before importing this component, ensure you have completed the setup as per the [Quick Start guide](../../../README.md).
+
+```tsx
+import { Card } from 'heroui-native';
+```
+
+## Usage
+
+### Basic Usage
+
+The Card component creates a container with built-in sections for organized content.
+
+```tsx
+<Card>
+  <Card.Body>...</Card.Body>
+</Card>
+```
+
+### With Title and Description
+
+Combine title and description components for structured text content.
+
+```tsx
+<Card>
+  <Card.Body>
+    <Card.Title>...</Card.Title>
+    <Card.Description>...</Card.Description>
+  </Card.Body>
+</Card>
+```
+
+### With Header and Footer
+
+Add header and footer sections for icons, badges, or actions.
+
+```tsx
+<Card>
+  <Card.Header>...</Card.Header>
+  <Card.Body>...</Card.Body>
+  <Card.Footer>...</Card.Footer>
+</Card>
+```
+
+### Variants
+
+Control the card's background appearance using different variants.
+
+```tsx
+<Card variant="default">...</Card>
+<Card variant="secondary">...</Card>
+<Card variant="tertiary">...</Card>
+<Card variant="quaternary">...</Card>
+<Card variant="transparent">...</Card>
+```
+
+### Horizontal Layout
+
+Create horizontal cards by using flex-row styling.
+
+```tsx
+<Card className="flex-row gap-4">
+  <Image source={...} className="size-24 rounded-lg" />
+</Card>
+```
+
+### Background Image
+
+Use an image as an absolute positioned background.
+
+```tsx
+<Card>
+  <Image source={...} className="absolute inset-0" />
+  <View className="gap-4">...</View>
+</Card>
+```
+
+## Example
+
+```tsx
+import { Button, Card } from 'heroui-native';
+import { Ionicons } from '@expo/vector-icons';
+import { View } from 'react-native';
+
+export default function CardExample() {
+  return (
+    <Card>
+      <View className="gap-4">
+        <Card.Body className="mb-4">
+          <View className="gap-1 mb-2">
+            <Card.Title className="text-pink-500">$450</Card.Title>
+            <Card.Title>Living room Sofa • Collection 2025</Card.Title>
+          </View>
+          <Card.Description>
+            This sofa is perfect for modern tropical spaces, baroque inspired
+            spaces.
+          </Card.Description>
+        </Card.Body>
+        <Card.Footer className="gap-3">
+          <Button variant="primary">Buy now</Button>
+          <Button variant="ghost">
+            <Button.Label>Add to cart</Button.Label>
+            <Ionicons name="bag-outline" size={16} />
+          </Button>
+        </Card.Footer>
+      </View>
+    </Card>
+  );
+}
+```
+
+## Anatomy
+
+```tsx
+<Card>
+  <Card.Header>...</Card.Header>
+  <Card.Body>
+    <Card.Title>...</Card.Title>
+    <Card.Description>...</Card.Description>
+  </Card.Body>
+  <Card.Footer>...</Card.Footer>
+</Card>
+```
+
+- **Card**: Main container that extends Surface component. Provides base card structure with configurable surface variants and handles overall layout.
+- **Card.Header**: Header section for top-aligned content like icons or badges.
+- **Card.Body**: Main content area with flex-1 that expands to fill all available space between Card.Header and Card.Footer.
+- **Card.Title**: Title text with foreground color and medium font weight.
+- **Card.Description**: Description text with muted color and smaller font size.
+- **Card.Footer**: Footer section for bottom-aligned actions like buttons.
+
+## API Reference
+
+### Card
+
+| prop           | type                                                                      | default     | description                                                                               |
+| -------------- | ------------------------------------------------------------------------- | ----------- | ----------------------------------------------------------------------------------------- |
+| `children`     | `React.ReactNode`                                                         | -           | Content to be rendered inside the card                                                    |
+| `variant`      | `'default' \| 'secondary' \| 'tertiary' \| 'quaternary' \| 'transparent'` | `'default'` | Visual variant of the card surface                                                        |
+| `className`    | `string`                                                                  | -           | Additional CSS classes to apply                                                           |
+| `animation`    | `"disable-all" \| undefined`                                              | `undefined` | Animation configuration. Use `"disable-all"` to disable all animations including children |
+| `...ViewProps` | `ViewProps`                                                               | -           | All standard React Native View props are supported                                        |
+
+### Card.Header
+
+| prop           | type              | default | description                                        |
+| -------------- | ----------------- | ------- | -------------------------------------------------- |
+| `children`     | `React.ReactNode` | -       | Children elements to be rendered inside the header |
+| `className`    | `string`          | -       | Additional CSS classes                             |
+| `...ViewProps` | `ViewProps`       | -       | All standard React Native View props are supported |
+
+### Card.Body
+
+| prop           | type              | default | description                                        |
+| -------------- | ----------------- | ------- | -------------------------------------------------- |
+| `children`     | `React.ReactNode` | -       | Children elements to be rendered inside the body   |
+| `className`    | `string`          | -       | Additional CSS classes                             |
+| `...ViewProps` | `ViewProps`       | -       | All standard React Native View props are supported |
+
+### Card.Footer
+
+| prop           | type              | default | description                                        |
+| -------------- | ----------------- | ------- | -------------------------------------------------- |
+| `children`     | `React.ReactNode` | -       | Children elements to be rendered inside the footer |
+| `className`    | `string`          | -       | Additional CSS classes                             |
+| `...ViewProps` | `ViewProps`       | -       | All standard React Native View props are supported |
+
+### Card.Title
+
+| prop           | type              | default | description                                        |
+| -------------- | ----------------- | ------- | -------------------------------------------------- |
+| `children`     | `React.ReactNode` | -       | Children elements to be rendered as the title text |
+| `className`    | `string`          | -       | Additional CSS classes                             |
+| `...TextProps` | `TextProps`       | -       | All standard React Native Text props are supported |
+
+### Card.Description
+
+| prop           | type              | default | description                                              |
+| -------------- | ----------------- | ------- | -------------------------------------------------------- |
+| `children`     | `React.ReactNode` | -       | Children elements to be rendered as the description text |
+| `className`    | `string`          | -       | Additional CSS classes                                   |
+| `...TextProps` | `TextProps`       | -       | All standard React Native Text props are supported       |

package/src/components/card/card.styles.ts

@@ -0,0 +1,37 @@
+import { tv } from 'tailwind-variants';
+import { combineStyles } from '../../helpers/theme/utils/combine-styles';
+
+const root = tv({
+  base: '',
+});
+
+const header = tv({
+  base: '',
+});
+
+const body = tv({
+  base: '',
+});
+
+const footer = tv({
+  base: '',
+});
+
+const label = tv({
+  base: 'text-foreground font-medium text-lg',
+});
+
+const description = tv({
+  base: 'text-base text-muted',
+});
+
+const cardStyles = combineStyles({
+  root,
+  header,
+  body,
+  footer,
+  label,
+  description,
+});
+
+export default cardStyles;

package/src/components/card/card.tsx

@@ -0,0 +1,148 @@
+import { forwardRef } from 'react';
+import { View } from 'react-native';
+import { HeroText } from '../../helpers/components';
+import type { TextRef, ViewRef } from '../../helpers/types/primitives';
+import { Surface } from '../surface';
+import { DISPLAY_NAME } from './card.constants';
+import cardStyles from './card.styles';
+import type {
+  CardBodyProps,
+  CardDescriptionProps,
+  CardFooterProps,
+  CardHeaderProps,
+  CardRootProps,
+  CardTitleProps,
+} from './card.types';
+
+// --------------------------------------------------
+
+const CardRoot = forwardRef<ViewRef, CardRootProps>((props, ref) => {
+  const { children, variant = 'default', className, ...restProps } = props;
+
+  const tvStyles = cardStyles.root({ className });
+
+  return (
+    <Surface ref={ref} variant={variant} className={tvStyles} {...restProps}>
+      {children}
+    </Surface>
+  );
+});
+
+// --------------------------------------------------
+
+const CardHeader = forwardRef<ViewRef, CardHeaderProps>((props, ref) => {
+  const { children, className, ...restProps } = props;
+
+  const tvStyles = cardStyles.header({ className });
+
+  return (
+    <View ref={ref} className={tvStyles} {...restProps}>
+      {children}
+    </View>
+  );
+});
+
+// --------------------------------------------------
+
+const CardBody = forwardRef<ViewRef, CardBodyProps>((props, ref) => {
+  const { children, className, ...restProps } = props;
+
+  const tvStyles = cardStyles.body({ className });
+
+  return (
+    <View ref={ref} className={tvStyles} {...restProps}>
+      {children}
+    </View>
+  );
+});
+
+// --------------------------------------------------
+
+const CardFooter = forwardRef<ViewRef, CardFooterProps>((props, ref) => {
+  const { children, className, ...restProps } = props;
+
+  const tvStyles = cardStyles.footer({ className });
+
+  return (
+    <View ref={ref} className={tvStyles} {...restProps}>
+      {children}
+    </View>
+  );
+});
+
+// --------------------------------------------------
+
+const CardTitle = forwardRef<TextRef, CardTitleProps>((props, ref) => {
+  const { children, className, ...restProps } = props;
+
+  const tvStyles = cardStyles.label({ className });
+
+  return (
+    <HeroText ref={ref} className={tvStyles} {...restProps}>
+      {children}
+    </HeroText>
+  );
+});
+
+// --------------------------------------------------
+
+const CardDescription = forwardRef<TextRef, CardDescriptionProps>(
+  (props, ref) => {
+    const { children, className, ...restProps } = props;
+
+    const tvStyles = cardStyles.description({
+      className,
+    });
+
+    return (
+      <HeroText ref={ref} className={tvStyles} {...restProps}>
+        {children}
+      </HeroText>
+    );
+  }
+);
+
+// --------------------------------------------------
+
+CardRoot.displayName = DISPLAY_NAME.ROOT;
+CardHeader.displayName = DISPLAY_NAME.HEADER;
+CardBody.displayName = DISPLAY_NAME.BODY;
+CardFooter.displayName = DISPLAY_NAME.FOOTER;
+CardTitle.displayName = DISPLAY_NAME.TITLE;
+CardDescription.displayName = DISPLAY_NAME.DESCRIPTION;
+
+/**
+ * Compound Card component with sub-components
+ *
+ * @component Card - Main container that extends Surface component. Provides base card structure
+ * with configurable surface variants and handles overall layout.
+ *
+ * @component Card.Header - Header section for top-aligned content like icons or badges.
+ *
+ * @component Card.Body - Main content area with flex-1 that expands to fill all available space
+ * between Card.Header and Card.Footer.
+ *
+ * @component Card.Title - Title text with foreground color and medium font weight.
+ *
+ * @component Card.Description - Description text with muted color and smaller font size.
+ *
+ * @component Card.Footer - Footer section for bottom-aligned actions like buttons.
+ *
+ * All sub-components support asChild pattern for custom element composition.
+ *
+ * @see Full documentation: https://heroui.com/components/card
+ */
+const CompoundCard = Object.assign(CardRoot, {
+  /** @optional Top-aligned header section */
+  Header: CardHeader,
+  /** @optional Main content area that expands between header and footer */
+  Body: CardBody,
+  /** @optional Bottom-aligned footer for actions */
+  Footer: CardFooter,
+  /** @optional Title text with styled typography */
+  Title: CardTitle,
+  /** @optional Description text with muted styling */
+  Description: CardDescription,
+});
+
+export default CompoundCard;

package/src/components/card/card.types.ts

@@ -0,0 +1,77 @@
+import type { TextProps, ViewProps } from 'react-native';
+import type { SurfaceRootProps } from '../surface/surface.types';
+
+/**
+ * Props for the Card.Root component
+ */
+export interface CardRootProps extends SurfaceRootProps {}
+
+/**
+ * Props for the Card.Header component
+ */
+export interface CardHeaderProps extends ViewProps {
+  /**
+   * Children elements to be rendered inside the header
+   */
+  children?: React.ReactNode;
+  /**
+   * Additional CSS classes
+   */
+  className?: string;
+}
+
+/**
+ * Props for the Card.Body component
+ */
+export interface CardBodyProps extends ViewProps {
+  /**
+   * Children elements to be rendered inside the body
+   */
+  children?: React.ReactNode;
+  /**
+   * Additional CSS classes
+   */
+  className?: string;
+}
+
+/**
+ * Props for the Card.Footer component
+ */
+export interface CardFooterProps extends ViewProps {
+  /**
+   * Children elements to be rendered inside the footer
+   */
+  children?: React.ReactNode;
+  /**
+   * Additional CSS classes
+   */
+  className?: string;
+}
+
+/**
+ * Props for the Card.Title component
+ */
+export interface CardTitleProps extends TextProps {
+  /**
+   * Children elements to be rendered as the title text
+   */
+  children?: React.ReactNode;
+  /**
+   * Additional CSS classes
+   */
+  className?: string;
+}
+
+/**
+ * Props for the Card.Description component
+ */
+export interface CardDescriptionProps extends TextProps {
+  /**
+   * Children elements to be rendered as the description text
+   */
+  children?: React.ReactNode;
+  /**
+   * Additional CSS classes
+   */
+  className?: string;
+}

package/src/components/card/index.ts

@@ -0,0 +1,9 @@
+export { default as Card } from './card';
+export type {
+  CardBodyProps,
+  CardDescriptionProps,
+  CardFooterProps,
+  CardHeaderProps,
+  CardRootProps,
+  CardTitleProps,
+} from './card.types';