@ostack.tech/ui 0.1.0

package/dist/types/components/Alert/Alert.d.ts

@@ -0,0 +1,82 @@
+import * as React from "react";
+import { CloseButton } from "../CloseButton";
+import { CollapsibleContent } from "../Collapsible";
+import { Icon, type IconProp } from "../Icon";
+/** Alert variants. */
+export type AlertVariant = "solid" | "subtle" | "outlined";
+/** Alert severities. */
+export type AlertSeverity = "neutral" | "info" | "success" | "danger" | "warning";
+/** Properties of the alert component. */
+export interface AlertProps extends React.ComponentPropsWithoutRef<"div"> {
+    /**
+     * Alert variant.
+     *
+     * @default subtle
+     */
+    variant?: AlertVariant;
+    /**
+     * Sets the alert's severity.
+     *
+     * @default info
+     */
+    severity?: AlertSeverity;
+    /** Alert action. */
+    action?: React.ReactNode;
+    /**
+     * Whether the alert should be open by default.
+     *
+     * @default true
+     */
+    defaultOpen?: boolean;
+    /**
+     * Property controlling whether the alert should be open. Use together with
+     * `onOpenChange` to control the alert's open state.
+     */
+    open?: boolean;
+    /** Function called when the open state changes. */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Icon to show. The default icon is `faCircleInfo`. Each severity except
+     * `"neutral"` has its own default icon.
+     */
+    icon?: IconProp | null;
+    /**
+     * Whether to show a close button.
+     *
+     * @default false
+     */
+    showCloseButton?: boolean;
+    /** Properties to pass to the container component. */
+    containerProps?: React.ComponentPropsWithRef<typeof CollapsibleContent>;
+    /** Properties to pass to the icon component. */
+    iconProps?: Omit<React.ComponentPropsWithRef<typeof Icon>, "icon">;
+    /** Properties to pass to the content component. */
+    contentProps?: React.ComponentPropsWithRef<"div">;
+    /** Properties to pass to the component containing the action/close button. */
+    actionContainerProps?: React.ComponentPropsWithRef<"div">;
+    /** Properties to pass to the close button component. */
+    closeButtonProps?: React.ComponentPropsWithRef<typeof CloseButton>;
+}
+/**
+ * The alert component can be used to attract the user's attentions.
+ *
+ * It has the following subcomponent:
+ *
+ * - `AlertTitle`: Title of the alert.
+ *
+ * Example usage:
+ *
+ * ```tsx
+ * import { Alert, AlertTitle } from "@ostack.tech/ui";
+ *
+ * function TermAndConditionsNotice {
+ *   return (
+ *     <Alert>
+ *       <AlertTitle>Notice</AlertTitle>
+ *       Terms and conditions may apply.
+ *     </Alert>
+ *   );
+ * }
+ * ```
+ */
+export declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/Alert/AlertTitle.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+/** Properties of the alert title component. */
+export interface AlertTitleProps extends React.ComponentPropsWithoutRef<"div"> {
+    /**
+     * Change the component to the HTML tag or custom component of the only child.
+     * This will merge the original component props with the props of the supplied
+     * element/component and change the underlying DOM node.
+     */
+    asChild?: boolean;
+}
+/** Title of the alert. */
+export declare const AlertTitle: React.ForwardRefExoticComponent<AlertTitleProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/Alert/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Alert.tsx";
+export * from "./AlertTitle.tsx";

package/dist/types/components/AlertDialog/AlertDialog.d.ts

@@ -0,0 +1,81 @@
+import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
+/**
+ * The alert dialog component displays an important overlaid “window” to the
+ * user and expects a response.
+ *
+ * Built on top of the [Radix Alert Dialog
+ * primitive](https://www.radix-ui.com/primitives/docs/components/alert-dialog),
+ * and the `Card` component.
+ *
+ * It composes the following subcomponents:
+ *
+ * - `AlertDialogTrigger`: The button which, when pressed, opens the alert dialog.
+ * - `AlertDialogContent`: Content to display when the alert dialog is open.
+ * - `AlertDialogHeader`: Header section of the alert dialog.
+ * - `AlertDialogTitle`: An accessible title to be announced when the alert dialog
+ *   is opened.
+ * - `AlertDialogBody`: Body section of the alert dialog.
+ * - `AlertDialogDescription`: An optional accessible description to be announced
+ *   when the alert dialog is opened.
+ *
+ *   To hide the description, wrap it within `<VisuallyHidden asChild>`. To remove
+ *   the description entirely, pass `aria-describedby={undefined}` to the
+ *   `AlertDialogContent` and omit this component.
+ * - `AlertDialogFooter`: Footer section of the alert dialog.
+ * - `AlertDialogCancel`: A button which closes the alert dialog by cancelling the
+ *   action. These buttons should be distinguished visually from
+ *   `AlertDialogAction` buttons.
+ * - `AlertDialogAction`: A button which closes the alert dialog by accepting the
+ *   action. These buttons should be distinguished visually from
+ *   `AlertDialogCancel` buttons.
+ *
+ * Example usage:
+ *
+ * ```tsx
+ * import {
+ *   Button,
+ *   AlertDialog,
+ *   AlertDialogAction,
+ *   AlertDialogBody,
+ *   AlertDialogCancel,
+ *   AlertDialogClose,
+ *   AlertDialogContent,
+ *   AlertDialogDescription,
+ *   AlertDialogFooter,
+ *   AlertDialogHeader,
+ *   AlertDialogTitle,
+ *   AlertDialogTrigger,
+ * } from "@ostack.tech/ui";
+ *
+ * function UserAgreement() {
+ *   return (
+ *     <AlertDialog>
+ *       <AlertDialogTrigger>
+ *         <Button>Accept user agreement…</Button>
+ *       </AlertDialogTrigger>
+ *
+ *       <AlertDialogContent>
+ *         <AlertDialogHeader>
+ *           <AlertDialogTitle>User Agreement</AlertDialogTitle>
+ *         </AlertDialogHeader>
+ *         <AlertDialogBody>
+ *           <AlertDialogDescription>
+ *             Please read and accept the following user agreement:
+ *           </AlertDialogDescription>
+ *           …
+ *         </AlertDialogBody>
+ *         <AlertDialogFooter>
+ *           <AlertDialogCancel>
+ *             <Button variant="subtle">Cancel</Button>
+ *           </AlertDialogCancel>
+ *           <AlertDialogAction>
+ *             <Button>Accept</Button>
+ *           </AlertDialogAction>
+ *         </AlertDialogFooter>
+ *       </AlertDialogContent>
+ *     </AlertDialog>
+ *   );
+ * }
+ * ```
+ */
+export declare const AlertDialog: import("react").FC<AlertDialogPrimitive.AlertDialogProps>;

package/dist/types/components/AlertDialog/AlertDialogAction.d.ts

@@ -0,0 +1,10 @@
+import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
+import * as React from "react";
+/** Properties of the alert dialog action component. */
+export interface AlertDialogActionProps extends Omit<React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>, "asChild"> {
+}
+/**
+ * Button which closes the alert dialog by accepting the action. These buttons
+ * should be distinguished visually from `AlertDialogCancel` buttons.
+ */
+export declare const AlertDialogAction: React.ForwardRefExoticComponent<AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/types/components/AlertDialog/AlertDialogBody.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { DialogBody } from "../Dialog";
+/** Properties to the alert dialog body component. */
+export interface AlertDialogBodyProps extends React.ComponentPropsWithoutRef<typeof DialogBody> {
+}
+/** Body section of the alert dialog. */
+export declare const AlertDialogBody: React.ForwardRefExoticComponent<AlertDialogBodyProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/AlertDialog/AlertDialogCancel.d.ts

@@ -0,0 +1,10 @@
+import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
+import * as React from "react";
+/** Properties of the alert dialog cancel component. */
+export interface AlertDialogCancelProps extends Omit<React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>, "asChild"> {
+}
+/**
+ * Button which closes the alert dialog by cancelling the action. These buttons
+ * should be distinguished visually from `AlertDialogAction` buttons.
+ */
+export declare const AlertDialogCancel: React.ForwardRefExoticComponent<AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/types/components/AlertDialog/AlertDialogContent.d.ts

@@ -0,0 +1,45 @@
+import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
+import * as React from "react";
+import { type DialogContentColor, type DialogContentSize, type DialogContentVariant } from "../Dialog";
+import { Overlay } from "../Overlay";
+/** Alert dialog content variants. */
+export type AlertDialogContentVariant = DialogContentVariant;
+/** Possible alert dialog content colors. */
+export type AlertDialogContentColor = DialogContentColor;
+/** Possible alert dialog content sizes. */
+export type AlertDialogContentSize = DialogContentSize;
+/** Properties of the alert dialog content component. */
+export interface AlertDialogContentProps extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> {
+    /**
+     * Dialog content variant.
+     *
+     * @default solid
+     */
+    variant?: AlertDialogContentVariant;
+    /**
+     * Whether sections should be merged together, as opposed to them being
+     * clearly delimited. By default, each section is clearly delimited via a
+     * border or solid background colour.
+     *
+     * @default false
+     */
+    mergeSections?: boolean;
+    /**
+     * Dialog content color.
+     *
+     * @default neutral
+     */
+    color?: AlertDialogContentColor;
+    /**
+     * Size of the dialog content.
+     *
+     * @default md
+     */
+    size?: AlertDialogContentSize;
+    /** Properties to pass to the portal component. */
+    portalProps?: Omit<React.ComponentPropsWithRef<typeof AlertDialogPrimitive.Portal>, "forceMount">;
+    /** Properties to pass to the dialog's overlay component. */
+    overlayProps?: React.ComponentPropsWithRef<typeof Overlay>;
+}
+/** Content to be rendered in the open alert dialog. */
+export declare const AlertDialogContent: React.ForwardRefExoticComponent<AlertDialogContentProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/AlertDialog/AlertDialogDescription.d.ts

@@ -0,0 +1,14 @@
+import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
+import * as React from "react";
+/** Properties of the alert dialog description component. */
+export interface AlertDialogDescriptionProps extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description> {
+}
+/**
+ * Optional accessible description to be announced when the alert dialog is
+ * opened.
+ *
+ * To hide the description, wrap it within `<VisuallyHidden asChild>`. To remove
+ * the description entirely, pass `aria-describedby={undefined}` to the
+ * `AlertDialogContent` and omit this component.
+ */
+export declare const AlertDialogDescription: React.ForwardRefExoticComponent<AlertDialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;

package/dist/types/components/AlertDialog/AlertDialogFooter.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { DialogFooter } from "../Dialog";
+/** Properties to the alert dialog footer component. */
+export interface AlertDialogFooterProps extends React.ComponentPropsWithoutRef<typeof DialogFooter> {
+}
+/** Footer section of the alert dialog. */
+export declare const AlertDialogFooter: React.ForwardRefExoticComponent<AlertDialogFooterProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/AlertDialog/AlertDialogHeader.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { CardHeader } from "../Card";
+/** Properties of the alert dialog header component. */
+export interface AlertDialogHeaderProps extends React.ComponentPropsWithoutRef<typeof CardHeader> {
+}
+/** Header section of the alert dialog. */
+export declare const AlertDialogHeader: React.ForwardRefExoticComponent<AlertDialogHeaderProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/AlertDialog/AlertDialogTitle.d.ts

@@ -0,0 +1,7 @@
+import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
+import * as React from "react";
+/** Properties of the alert dialog title component. */
+export interface AlertDialogTitleProps extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title> {
+}
+/** Accessible title to be announced when the alert dialog is opened. */
+export declare const AlertDialogTitle: React.ForwardRefExoticComponent<AlertDialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;

package/dist/types/components/AlertDialog/AlertDialogTrigger.d.ts

@@ -0,0 +1,7 @@
+import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
+import * as React from "react";
+/** Properties of the alert dialog trigger component. */
+export interface AlertDialogTriggerProps extends Omit<React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Trigger>, "asChild"> {
+}
+/** The button which, when pressed, opens the alert dialog */
+export declare const AlertDialogTrigger: React.ForwardRefExoticComponent<AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/types/components/AlertDialog/index.d.ts

@@ -0,0 +1,10 @@
+export * from "./AlertDialog.tsx";
+export * from "./AlertDialogAction.tsx";
+export * from "./AlertDialogBody.tsx";
+export * from "./AlertDialogCancel.tsx";
+export * from "./AlertDialogContent.tsx";
+export * from "./AlertDialogDescription.tsx";
+export * from "./AlertDialogFooter.tsx";
+export * from "./AlertDialogHeader.tsx";
+export * from "./AlertDialogTitle.tsx";
+export * from "./AlertDialogTrigger.tsx";

package/dist/types/components/Button/Button.d.ts

@@ -0,0 +1,111 @@
+import * as React from "react";
+import { type AccentColor } from "../../utils/accent.ts";
+import { Icon, type IconProp } from "../Icon";
+import { Spinner } from "../Spinner";
+/** Button variants. */
+export type ButtonVariant = "solid" | "subtle" | "outlined" | "ghost";
+/** Button colours. */
+export type ButtonColor = AccentColor;
+/** Button sizes. */
+export type ButtonSize = "sm" | "md" | "lg" | "xl";
+/** Button's icon placement. */
+export type ButtonIconPlacement = "start" | "end";
+/** Properties of the button component. */
+export interface ButtonProps extends React.ComponentPropsWithoutRef<"button"> {
+    /**
+     * Change the component to the HTML tag or custom component of the only child.
+     * This will merge the original component props with the props of the supplied
+     * element/component and change the underlying DOM node.
+     */
+    asChild?: boolean;
+    /**
+     * Button's variant.
+     *
+     * @default solid
+     */
+    variant?: ButtonVariant;
+    /**
+     * Button's colour.
+     *
+     * @default neutral
+     */
+    color?: ButtonColor;
+    /**
+     * Size of the button.
+     *
+     * @default md
+     */
+    size?: ButtonSize;
+    /**
+     * Whether to display the button content vertically. This property should only
+     * be set when an icon is also specified.
+     *
+     * @default false
+     */
+    vertical?: boolean;
+    /**
+     * Font Awesome icon to show within the button. The position of the icon may
+     * be controlled via `iconPlacement`.
+     *
+     * @default null
+     */
+    icon?: IconProp | React.ReactElement | null;
+    /**
+     * Whether to display the icon at the start or end of the button. This
+     * property also affects the placement of the spinner.
+     *
+     * @default start
+     */
+    iconPlacement?: ButtonIconPlacement;
+    /**
+     * Whether to display the button in "active" state.
+     *
+     * @default false
+     */
+    active?: boolean;
+    /**
+     * Whether to disable the button.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether to display the button in "loading" state by presenting a spinner as
+     * icon. The position of the spinner may be controlled via `iconPlacement`.
+     *
+     * Setting this property will automatically disable the button.
+     *
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Whether the button should be enabled when `loading` is `true`.
+     *
+     * @default false
+     */
+    enabledWhenLoading?: boolean;
+    /**
+     * Content of the button when it is in "loading" state. If not provided, the
+     * button content will remain unchanged.
+     */
+    loadingContent?: React.ReactNode;
+    /** Properties to pass to the icon component. */
+    iconProps?: Omit<React.ComponentPropsWithRef<typeof Icon>, "icon">;
+    /** Properties to pass to the spinner component. */
+    spinnerProps?: React.ComponentPropsWithRef<typeof Spinner>;
+}
+/**
+ * The button component is used to trigger actions or events, such as opening a
+ * dialog or submitting a form.
+ *
+ * Example usage:
+ *
+ * ```tsx
+ * import { Button } from "@ostack.tech/ui";
+ *
+ * function Launch() {
+ *   return <Button onClick={launchRocket}>Launch rocket</Button>;
+ * }
+ * ```
+ */
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/types/components/Button/index.d.ts

@@ -0,0 +1 @@
+export * from "./Button.tsx";

package/dist/types/components/ButtonGroup/ButtonGroup.d.ts

@@ -0,0 +1,32 @@
+import * as React from "react";
+/** Properties of the button group component. */
+export interface ButtonGroupProps extends React.ComponentPropsWithoutRef<"div"> {
+    /**
+     * Change the component to the HTML tag or custom component of the only child.
+     * This will merge the original component props with the props of the supplied
+     * element/component and change the underlying DOM node.
+     */
+    asChild?: boolean;
+}
+/**
+ * The button group component can be used to group buttons together.
+ *
+ * It supports both `Button` and `IconButton` components as children.
+ *
+ * Example usage:
+ *
+ * ```tsx
+ * import { Button, ButtonGroup } from "@ostack.tech/ui";
+ *
+ * function Actions() {
+ *   return (
+ *     <ButtonGroup>
+ *       <Button>Delete</Button>
+ *       <Button>Correct</Button>
+ *       <Button>Submit</Button>
+ *     </ButtonGroup>
+ *   );
+ * }
+ * ```
+ */
+export declare const ButtonGroup: React.ForwardRefExoticComponent<ButtonGroupProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/ButtonGroup/index.d.ts

@@ -0,0 +1 @@
+export * from "./ButtonGroup.tsx";

package/dist/types/components/Calendar/Calendar.d.ts

@@ -0,0 +1,41 @@
+import { type Locale } from "date-fns";
+import * as React from "react";
+import { type DayPickerProps } from "react-day-picker";
+import { type IconButton } from "../IconButton";
+import { type Select } from "../Select";
+/** Properties of the calendar component. */
+export interface CalendarProps extends Omit<DayPickerProps, "mode" | "selected" | "onSelect" | "classNames" | "modifiersClassNames" | "styles" | "modifiersStyles" | "fromDate" | "toDate" | "fromMonth" | "toMonth" | "fromYear" | "toYear" | "startMonth" | "endMonth" | "reverseMonths" | "captionLayout" | "navLayout" | "components" | "locale" | "labels" | "formatters" | "dir" | "dateLib"> {
+    /** Minimum date allowed. */
+    minDate?: string | Date | null;
+    /** Maximum date allowed. */
+    maxDate?: string | Date | null;
+    /** Minimum month allowed. */
+    minMonth?: string | Date | null;
+    /** Maximum month allowed. */
+    maxMonth?: string | Date | null;
+    /** Minimum year allowed. */
+    minYear?: number;
+    /** Maximum year allowed. */
+    maxYear?: number;
+    /** `date-fns` locale to format dates and to be used by the date picker. */
+    locale?: Locale;
+    /** Label of the "previous month" button. */
+    previousMonthLabel?: string;
+    /** Label of the "next month" button. */
+    nextMonthLabel?: string;
+    /** Properties to pass to the caption element. */
+    captionProps?: React.ComponentPropsWithRef<"div">;
+    /** Properties to pass to the previous button component. */
+    previousButtonProps?: React.ComponentPropsWithRef<typeof IconButton>;
+    /** Properties to pass to the next button component. */
+    nextButtonProps?: React.ComponentPropsWithRef<typeof IconButton>;
+    /** Properties to pass to the month select component. */
+    monthSelectProps?: Omit<React.ComponentPropsWithRef<typeof Select>, "multiple" | "defaultValue" | "value">;
+    /** Properties to pass to the year select component. */
+    yearSelectProps?: Omit<React.ComponentPropsWithRef<typeof Select>, "multiple" | "defaultValue" | "value">;
+}
+/**
+ * Calendar component built on top of [React
+ * DayPicker](https://react-day-picker.js.org).
+ */
+export declare function Calendar({ required, minDate, maxDate, minMonth, maxMonth, minYear, maxYear, previousMonthLabel, nextMonthLabel, defaultMonth, month: controlledMonth, onMonthChange, onDayClick, numberOfMonths, showOutsideDays, fixedWeeks, disableNavigation, locale: dateFnsLocale, disabled, modifiers, captionProps, previousButtonProps, nextButtonProps, monthSelectProps, yearSelectProps, pagedNavigation, ...otherProps }: CalendarProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Calendar/CalendarContext.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { type CalendarProps } from "./Calendar.tsx";
+/** Value of the calendar context. */
+export interface CalendarContextValue {
+    minAllowedDate: Date | undefined;
+    maxAllowedDate: Date | undefined;
+    previousMonthLabel: CalendarProps["previousMonthLabel"];
+    nextMonthLabel: CalendarProps["nextMonthLabel"];
+    captionProps: CalendarProps["captionProps"];
+    previousButtonProps: CalendarProps["previousButtonProps"];
+    nextButtonProps: CalendarProps["nextButtonProps"];
+    monthSelectProps: CalendarProps["monthSelectProps"];
+    yearSelectProps: CalendarProps["yearSelectProps"];
+}
+/** Calendar context. */
+export declare const CalendarContext: React.Context<CalendarContextValue | null>;
+/** Hook providing access to the calendar context. */
+export declare function useCalendarContext(): CalendarContextValue;

package/dist/types/components/Calendar/CalendarDay.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+/**
+ * Reimplementation of the React Day Picker's day component to provide a
+ * consistent inner element (even when the day isn't interactive), as well as a
+ * wrapper over the day text which lets us style it without styling the whole
+ * button.
+ */
+export declare const CalendarDay: React.NamedExoticComponent<{
+    day: import("react-day-picker").CalendarDay;
+    modifiers: import("react-day-picker").Modifiers;
+} & React.HTMLAttributes<HTMLDivElement>>;

package/dist/types/components/Calendar/CalendarMonthCaption.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+/**
+ * Reimplementation of the React Day Picker's caption component to provide both
+ * navigation arrows and dropdown selections.
+ */
+export declare const CalendarMonthCaption: React.NamedExoticComponent<{
+    calendarMonth: import("react-day-picker").CalendarMonth;
+    displayIndex: number;
+} & React.HTMLAttributes<HTMLDivElement>>;

package/dist/types/components/Calendar/index.d.ts

@@ -0,0 +1 @@
+export * from "./Calendar.tsx";

package/dist/types/components/Card/Card.d.ts

@@ -0,0 +1,70 @@
+import * as React from "react";
+import { type AccentColor } from "../../utils/accent.ts";
+/** Card variants. */
+export type CardVariant = "solid" | "subtle" | "outlined" | "ghost";
+/** Possible card colours. */
+export type CardColor = AccentColor;
+/** Properties of the card component. */
+export interface CardProps extends React.ComponentPropsWithoutRef<"div"> {
+    /**
+     * Change the component to the HTML tag or custom component of the only child.
+     * This will merge the original component props with the props of the supplied
+     * element/component and change the underlying DOM node.
+     */
+    asChild?: boolean;
+    /**
+     * Card variant.
+     *
+     * @default solid
+     */
+    variant?: CardVariant;
+    /**
+     * Whether sections should be merged together, as opposed to them being
+     * clearly delimited. By default, each section is clearly delimited via a
+     * border or solid background colour.
+     *
+     * @default false
+     */
+    mergeSections?: boolean;
+    /**
+     * Card color.
+     *
+     * @default neutral
+     */
+    color?: CardColor;
+}
+/**
+ * The card component encapsulates content in a card format.
+ *
+ * It composes the following subcomponents:
+ *
+ * - `CardHeader`: Header section of the card.
+ * - `CardTitle`: Title of the card.
+ * - `CardBody`: Body section of the card.
+ * - `CardFooter`: Footer section of the card.
+ *
+ * Example usage:
+ *
+ * ```tsx
+ * import {
+ *   Card,
+ *   CardBody,
+ *   CardFooter,
+ *   CardHeader,
+ *   CardTitle,
+ * } from "@ostack.tech/ui";
+ *
+ * function UserCard() {
+ *   return (
+ *     <Card>
+ *       <CardHeader>
+ *         <CardTitle>User</CardTitle>
+ *       </CardHeader>
+ *       <CardBody>…</CardBody>
+ *       <CardFooter>…</CardFooter>
+ *     </Card>
+ *   );
+ * }
+ * ```
+ */
+export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/Card/CardBody.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+/** Properties of the card body component. */
+export interface CardBodyProps extends React.ComponentPropsWithoutRef<"div"> {
+    /**
+     * Change the component to the HTML tag or custom component of the only child.
+     * This will merge the original component props with the props of the supplied
+     * element/component and change the underlying DOM node.
+     */
+    asChild?: boolean;
+}
+/** Body section of the `Card` component. */
+export declare const CardBody: React.ForwardRefExoticComponent<CardBodyProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/Card/CardFooter.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+/** Properties of the card footer component. */
+export interface CardFooterProps extends React.ComponentPropsWithoutRef<"div"> {
+    /**
+     * Change the component to the HTML tag or custom component of the only child.
+     * This will merge the original component props with the props of the supplied
+     * element/component and change the underlying DOM node.
+     */
+    asChild?: boolean;
+}
+/** Footer section of the `Card` component. */
+export declare const CardFooter: React.ForwardRefExoticComponent<CardFooterProps & React.RefAttributes<HTMLDivElement>>;