@arobo/react 1.0.1

package/README.md

@@ -0,0 +1,27 @@
+AroboUI is the internal UI library built to help Arobid Development Team move fast, stay consistent, and deliver delightful user experiences.
+
+## Getting Started
+
+To get started with AroboUI in your React project, follow these steps:
+
+1. **Install the package**:
+   ```bash
+   npm install @arobo/react @arobo/styles
+   ```
+   or using Yarn:
+   ```bash
+   yarn add @arobo/react @arobo/styles
+   ```
+2. **Import styles into Tailwind CSS V4**:
+   ```css
+   @import "@arobo/styles/tailwind.css";
+   ```
+3. **Use components in your React application**:
+   ```jsx
+   import { Button } from "@arobo/react";
+   function App() {
+     return <Button>Click Me</Button>;
+   }
+   ```
+
+## Big respect to the HeroUI for making this possible

package/dist/components/button/button.d.ts

@@ -0,0 +1,10 @@
+import type { ButtonVariants } from "@arobo/styles";
+import type { ComponentPropsWithRef } from "react";
+import { Button as ButtonPrimitive } from "react-aria-components";
+import { BUTTON_GROUP_CHILD } from "../button-group";
+interface ButtonRootProps extends ComponentPropsWithRef<typeof ButtonPrimitive>, ButtonVariants {
+    [BUTTON_GROUP_CHILD]?: boolean;
+}
+declare const ButtonRoot: ({ children, className, fullWidth, isDisabled, isIconOnly, size, slot, style, variant, [BUTTON_GROUP_CHILD]: isButtonGroupChild, ...rest }: ButtonRootProps) => import("react/jsx-runtime").JSX.Element;
+export { ButtonRoot };
+export type { ButtonRootProps };

package/dist/components/button/button.js

@@ -0,0 +1,48 @@
+import { useContext } from 'react';
+import { Button } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+import { ButtonGroupContext, BUTTON_GROUP_CHILD } from '../button-group/button-group.js';
+import { buttonVariants } from '../../styles/src/components/button/button.styles.js';
+import { composeTwRenderProps } from '../../utils/compose.js';
+
+const ButtonRoot = ({
+  children,
+  className,
+  fullWidth,
+  isDisabled,
+  isIconOnly,
+  size,
+  slot,
+  style,
+  variant,
+  [BUTTON_GROUP_CHILD]: isButtonGroupChild,
+  ...rest
+}) => {
+  const buttonGroupContext = useContext(ButtonGroupContext);
+
+  // Only use context if this button is a direct child of ButtonGroup
+  const shouldUseContext = isButtonGroupChild === true;
+
+  // Merge props with precedence: direct props > context props
+  const finalSize = size ?? (shouldUseContext ? buttonGroupContext?.size : undefined);
+  const finalVariant = variant ?? (shouldUseContext ? buttonGroupContext?.variant : undefined);
+  const finalIsDisabled = isDisabled ?? (shouldUseContext ? buttonGroupContext?.isDisabled : undefined);
+  const finalFullWidth = fullWidth ?? (shouldUseContext ? buttonGroupContext?.fullWidth : undefined);
+  const styles = buttonVariants({
+    fullWidth: finalFullWidth,
+    isIconOnly,
+    size: finalSize,
+    variant: finalVariant
+  });
+  return /*#__PURE__*/jsx(Button, {
+    className: composeTwRenderProps(className, styles),
+    "data-slot": "button",
+    isDisabled: finalIsDisabled,
+    slot: slot,
+    style: style,
+    ...rest,
+    children: renderProps => typeof children === "function" ? children(renderProps) : children
+  });
+};
+
+export { ButtonRoot };

package/dist/components/button/index.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentProps } from "react";
+import { BUTTON_GROUP_CHILD } from "../button-group";
+import { ButtonRoot } from "./button";
+export declare const Button: (({ children, className, fullWidth, isDisabled, isIconOnly, size, slot, style, variant, [BUTTON_GROUP_CHILD]: isButtonGroupChild, ...rest }: import("./button").ButtonRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, className, fullWidth, isDisabled, isIconOnly, size, slot, style, variant, [BUTTON_GROUP_CHILD]: isButtonGroupChild, ...rest }: import("./button").ButtonRootProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type Button = {
+    Props: ComponentProps<typeof ButtonRoot>;
+    RootProps: ComponentProps<typeof ButtonRoot>;
+};
+export { ButtonRoot };
+export type { ButtonRootProps, ButtonRootProps as ButtonProps } from "./button";
+export { BUTTON_GROUP_CHILD };
+export { buttonVariants } from "@arobo/styles";
+export type { ButtonVariants } from "@arobo/styles";

package/dist/components/button/index.js

@@ -0,0 +1,12 @@
+import { ButtonRoot } from './button.js';
+export { BUTTON_GROUP_CHILD } from '../button-group/button-group.js';
+export { buttonVariants } from '../../styles/src/components/button/button.styles.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Button = Object.assign(ButtonRoot, {
+  Root: ButtonRoot
+});
+
+export { Button, ButtonRoot };

package/dist/components/button-group/button-group.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import type { ComponentPropsWithRef } from "react";
+import type { ButtonProps } from "../button";
+import { type ButtonGroupVariants } from "@arobo/styles";
+type ButtonGroupContext = {
+    size?: ButtonProps["size"];
+    variant?: ButtonProps["variant"];
+    isDisabled?: ButtonProps["isDisabled"];
+    fullWidth?: ButtonProps["fullWidth"];
+    hideSeparator?: boolean;
+};
+declare const ButtonGroupContext: React.Context<ButtonGroupContext>;
+export declare const BUTTON_GROUP_CHILD = "__button_group_child";
+interface ButtonGroupRootProps extends ComponentPropsWithRef<"div">, Pick<ButtonProps, "size" | "variant" | "isDisabled">, ButtonGroupVariants {
+    hideSeparator?: boolean;
+}
+declare const ButtonGroupRoot: ({ size, variant, isDisabled, fullWidth, hideSeparator, className, children, ...rest }: ButtonGroupRootProps) => import("react/jsx-runtime").JSX.Element;
+export { ButtonGroupRoot, ButtonGroupContext };
+export type { ButtonGroupRootProps };

package/dist/components/button-group/button-group.js

@@ -0,0 +1,52 @@
+import React, { Children, isValidElement, createContext } from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { buttonGroupVariants } from '../../styles/src/components/button-group/button-group.styles.js';
+
+const ButtonGroupContext = /*#__PURE__*/createContext({});
+
+// Property name to mark direct children of ButtonGroup
+const BUTTON_GROUP_CHILD = "__button_group_child";
+
+/* -------------------------------------------------------------------------------------------------
+ * ButtonGroup Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const ButtonGroupRoot = ({
+  size,
+  variant,
+  isDisabled,
+  fullWidth,
+  hideSeparator = false,
+  className,
+  children,
+  ...rest
+}) => {
+  const wrappedChildren = Children.map(children, child => {
+    if (! /*#__PURE__*/isValidElement(child)) {
+      return child;
+    }
+    return /*#__PURE__*/React.cloneElement(child, {
+      [BUTTON_GROUP_CHILD]: true
+    });
+  });
+  return /*#__PURE__*/jsx(ButtonGroupContext, {
+    value: {
+      size,
+      variant,
+      fullWidth,
+      hideSeparator
+    },
+    children: /*#__PURE__*/jsx("div", {
+      className: buttonGroupVariants({
+        className,
+        fullWidth
+      }),
+      "data-hide-separator": hideSeparator ? "true" : undefined,
+      "data-slot": "button-group",
+      ...rest,
+      children: wrappedChildren
+    })
+  });
+};
+
+export { BUTTON_GROUP_CHILD, ButtonGroupContext, ButtonGroupRoot };

package/dist/components/button-group/index.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentProps } from "react";
+import { ButtonGroupRoot } from "./button-group";
+export declare const ButtonGroup: (({ size, variant, isDisabled, fullWidth, hideSeparator, className, children, ...rest }: import("./button-group").ButtonGroupRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ size, variant, isDisabled, fullWidth, hideSeparator, className, children, ...rest }: import("./button-group").ButtonGroupRootProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type ButtonGroup = {
+    Props: ComponentProps<typeof ButtonGroupRoot>;
+    RootProps: ComponentProps<typeof ButtonGroupRoot>;
+};
+export { ButtonGroupRoot };
+export type { ButtonGroupRootProps, ButtonGroupRootProps as ButtonGroupProps, } from "./button-group";
+export { ButtonGroupContext, BUTTON_GROUP_CHILD } from "./button-group";
+export { buttonGroupVariants } from "@arobo/styles";
+export type { ButtonGroupVariants } from "@arobo/styles";

package/dist/components/button-group/index.js

@@ -0,0 +1,9 @@
+import { ButtonGroupRoot } from './button-group.js';
+export { BUTTON_GROUP_CHILD, ButtonGroupContext } from './button-group.js';
+export { buttonGroupVariants } from '../../styles/src/components/button-group/button-group.styles.js';
+
+const ButtonGroup = Object.assign(ButtonGroupRoot, {
+  Root: ButtonGroupRoot
+});
+
+export { ButtonGroup, ButtonGroupRoot };

package/dist/components/calendar/calendar.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentProps } from "react";
+import type { CalendarProps as CalendarPrimitiveProps, DateValue } from "react-aria-components";
+import { CalendarCell as CalendarCellPrimitive, CalendarGrid as CalendarGridPrimitive } from "react-aria-components";
+interface CalendarRootProps<T extends DateValue> extends Omit<CalendarPrimitiveProps<T>, "visibleDuration"> {
+    errorMessage?: string;
+}
+declare const CalendarRoot: <T extends DateValue>({ errorMessage, ...props }: CalendarRootProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const CalendarHeader: () => import("react/jsx-runtime").JSX.Element;
+declare const CalendarGridHeader: () => import("react/jsx-runtime").JSX.Element;
+interface CalendarGridProps extends ComponentProps<typeof CalendarGridPrimitive> {
+}
+export declare const CalendarGrid: (props: CalendarGridProps) => import("react/jsx-runtime").JSX.Element;
+interface CalendarCellProps extends ComponentProps<typeof CalendarCellPrimitive> {
+}
+export declare const CalendarCell: (props: CalendarCellProps) => import("react/jsx-runtime").JSX.Element;
+export { CalendarGridHeader, CalendarHeader, CalendarRoot };
+export type { CalendarCellProps, CalendarGridProps, CalendarRootProps };

package/dist/components/calendar/calendar.js

@@ -0,0 +1,98 @@
+import { ChevronRight, ChevronLeft } from 'lucide-react';
+import { Calendar, CalendarGrid as CalendarGrid$1, CalendarGridBody, CalendarCell as CalendarCell$1, Text, useLocale, Heading, CalendarGridHeader as CalendarGridHeader$1, CalendarHeaderCell } from 'react-aria-components';
+import { tv } from 'tailwind-variants';
+import { Button } from '../button/index.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { calendarVariants } from '../../styles/src/components/calendar/calendar.styles.js';
+import { focusRing } from '../../utils/styles.js';
+import { composeTwRenderProps } from '../../utils/compose.js';
+
+const cellStyles = tv({
+  extend: focusRing,
+  base: "w-[calc(100cqw/7)] aspect-square text-sm cursor-default rounded-full flex items-center justify-center forced-color-adjust-none no-highlight",
+  variants: {
+    isSelected: {
+      false: "text-neutral-900 dark:text-neutral-200 hover:bg-neutral-200 dark:hover:bg-neutral-700 pressed:bg-neutral-300 dark:pressed:bg-neutral-600",
+      true: "bg-blue-600 invalid:bg-red-600 text-white forced-colors:bg-[Highlight] forced-colors:invalid:bg-[Mark] forced-colors:text-[HighlightText]"
+    },
+    isDisabled: {
+      true: "text-neutral-300 dark:text-neutral-600 forced-colors:text-[GrayText]"
+    }
+  }
+});
+const CalendarRoot = ({
+  errorMessage,
+  ...props
+}) => {
+  return /*#__PURE__*/jsxs(Calendar, {
+    ...props,
+    className: composeTwRenderProps(props.className, "flex flex-col font-sans w-[calc(9*var(--spacing)*7)] max-w-full @container"),
+    children: [/*#__PURE__*/jsx(CalendarHeader, {}), /*#__PURE__*/jsxs(CalendarGrid$1, {
+      className: "border-spacing-0",
+      children: [/*#__PURE__*/jsx(CalendarGridHeader, {}), /*#__PURE__*/jsx(CalendarGridBody, {
+        children: date => /*#__PURE__*/jsx(CalendarCell$1, {
+          date: date,
+          className: composeTwRenderProps(calendarVariants.slots.cell)
+        })
+      })]
+    }), errorMessage && /*#__PURE__*/jsx(Text, {
+      slot: "errorMessage",
+      className: "text-sm text-red-600",
+      children: errorMessage
+    })]
+  });
+};
+const CalendarHeader = () => {
+  let {
+    direction
+  } = useLocale();
+  return /*#__PURE__*/jsxs("header", {
+    className: "flex items-center gap-1 pb-4 px-1 border-box",
+    children: [/*#__PURE__*/jsx(Button, {
+      isIconOnly: true,
+      variant: "ghost",
+      slot: "previous",
+      children: direction === "rtl" ? /*#__PURE__*/jsx(ChevronRight, {
+        "aria-hidden": true,
+        size: 18
+      }) : /*#__PURE__*/jsx(ChevronLeft, {
+        "aria-hidden": true,
+        size: 18
+      })
+    }), /*#__PURE__*/jsx(Heading, {
+      className: "flex-1 font-sans font-semibold [font-variation-settings:normal] text-base text-center mx-2 my-0 text-neutral-900 dark:text-neutral-200"
+    }), /*#__PURE__*/jsx(Button, {
+      isIconOnly: true,
+      variant: "ghost",
+      slot: "next",
+      children: direction === "rtl" ? /*#__PURE__*/jsx(ChevronLeft, {
+        "aria-hidden": true,
+        size: 18
+      }) : /*#__PURE__*/jsx(ChevronRight, {
+        "aria-hidden": true,
+        size: 18
+      })
+    })]
+  });
+};
+const CalendarGridHeader = () => {
+  return /*#__PURE__*/jsx(CalendarGridHeader$1, {
+    children: day => /*#__PURE__*/jsx(CalendarHeaderCell, {
+      className: "text-xs text-neutral-500 font-semibold",
+      children: day
+    })
+  });
+};
+const CalendarGrid = props => {
+  return /*#__PURE__*/jsx(CalendarGrid$1, {
+    ...props
+  });
+};
+const CalendarCell = props => {
+  return /*#__PURE__*/jsx(CalendarCell$1, {
+    ...props,
+    className: cellStyles
+  });
+};
+
+export { CalendarCell, CalendarGrid, CalendarGridHeader, CalendarHeader, CalendarRoot };

package/dist/components/calendar/index.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentProps } from "react";
+import { CalendarRoot } from "./calendar";
+export declare const Calendar: (<T extends import("react-aria-components").DateValue>({ errorMessage, ...props }: import("./calendar").CalendarRootProps<T>) => import("react/jsx-runtime").JSX.Element) & {
+    Root: <T extends import("react-aria-components").DateValue>({ errorMessage, ...props }: import("./calendar").CalendarRootProps<T>) => import("react/jsx-runtime").JSX.Element;
+};
+export type Calendar = {
+    Props: ComponentProps<typeof CalendarRoot>;
+    RootProps: ComponentProps<typeof CalendarRoot>;
+};
+export { CalendarRoot, CalendarHeader, CalendarGridHeader, CalendarCell, CalendarGrid, } from "./calendar";
+export type { CalendarRootProps, CalendarRootProps as CalendarProps, CalendarCellProps, CalendarGridProps, } from "./calendar";
+export { calendarVariants } from "@arobo/styles";
+export type { CalendarVariants } from "@arobo/styles";

package/dist/components/calendar/index.js

@@ -0,0 +1,12 @@
+import { CalendarRoot } from './calendar.js';
+export { CalendarCell, CalendarGrid, CalendarGridHeader, CalendarHeader } from './calendar.js';
+export { calendarVariants } from '../../styles/src/components/calendar/calendar.styles.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Calendar = Object.assign(CalendarRoot, {
+  Root: CalendarRoot
+});
+
+export { Calendar, CalendarRoot };

package/dist/components/card/card.d.ts

@@ -0,0 +1,22 @@
+import type { CardVariants } from "@arobo/styles";
+import type { ComponentPropsWithRef } from "react";
+interface CardRootProps extends ComponentPropsWithRef<"div">, CardVariants {
+}
+declare const CardRoot: ({ children, className, variant, ...props }: CardRootProps) => import("react/jsx-runtime").JSX.Element;
+interface CardHeaderProps extends ComponentPropsWithRef<"div"> {
+}
+declare const CardHeader: ({ className, ...props }: CardHeaderProps) => import("react/jsx-runtime").JSX.Element;
+interface CardTitleProps extends ComponentPropsWithRef<"h3"> {
+}
+declare const CardTitle: ({ children, className, ...props }: CardTitleProps) => import("react/jsx-runtime").JSX.Element;
+interface CardDescriptionProps extends ComponentPropsWithRef<"p"> {
+}
+declare const CardDescription: ({ children, className, ...props }: CardDescriptionProps) => import("react/jsx-runtime").JSX.Element;
+interface CardContentProps extends ComponentPropsWithRef<"div"> {
+}
+declare const CardContent: ({ className, ...props }: CardContentProps) => import("react/jsx-runtime").JSX.Element;
+interface CardFooterProps extends ComponentPropsWithRef<"div"> {
+}
+declare const CardFooter: ({ className, ...props }: CardFooterProps) => import("react/jsx-runtime").JSX.Element;
+export { CardRoot, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, };
+export type { CardRootProps, CardHeaderProps, CardTitleProps, CardDescriptionProps, CardContentProps, CardFooterProps, };

package/dist/components/card/card.js

@@ -0,0 +1,140 @@
+import React, { createContext, useContext } from 'react';
+import { composeSlotClassName } from '../../utils/compose.js';
+import { jsx } from 'react/jsx-runtime';
+import { cardVariants } from '../../styles/src/components/card/card.styles.js';
+import { SurfaceContext } from '../surface/surface.js';
+
+const CardContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * Card Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const CardRoot = ({
+  children,
+  className,
+  variant = "default",
+  ...props
+}) => {
+  const slots = React.useMemo(() => cardVariants({
+    variant
+  }), [variant]);
+  const content = /*#__PURE__*/jsx("div", {
+    className: slots.base({
+      className
+    }),
+    "data-slot": "card",
+    ...props,
+    children: children
+  });
+  return /*#__PURE__*/jsx(CardContext, {
+    value: {
+      slots
+    },
+    children: variant === "transparent" ? content :
+    /*#__PURE__*/
+    // Allows inner components to apply "on-surface" colors for proper contrast
+    jsx(SurfaceContext, {
+      value: {
+        variant: variant
+      },
+      children: content
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Card Header
+ * -----------------------------------------------------------------------------------------------*/
+
+const CardHeader = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(CardContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.header, className),
+    "data-slot": "card-header",
+    ...props
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Card Title
+ * -----------------------------------------------------------------------------------------------*/
+
+const CardTitle = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(CardContext);
+  return /*#__PURE__*/jsx("h3", {
+    className: composeSlotClassName(slots?.title, className),
+    "data-slot": "card-title",
+    ...props,
+    children: children
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Card Description
+ * -----------------------------------------------------------------------------------------------*/
+
+const CardDescription = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(CardContext);
+  return /*#__PURE__*/jsx("p", {
+    className: composeSlotClassName(slots?.description, className),
+    "data-slot": "card-description",
+    ...props,
+    children: children
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Card Content
+ * -----------------------------------------------------------------------------------------------*/
+
+const CardContent = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(CardContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.content, className),
+    "data-slot": "card-content",
+    ...props
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Card Footer
+ * -----------------------------------------------------------------------------------------------*/
+
+const CardFooter = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(CardContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.footer, className),
+    "data-slot": "card-footer",
+    ...props
+  });
+};
+
+export { CardContent, CardDescription, CardFooter, CardHeader, CardRoot, CardTitle };

package/dist/components/card/index.d.ts

@@ -0,0 +1,23 @@
+import type { ComponentProps } from "react";
+import { CardContent, CardDescription, CardFooter, CardHeader, CardRoot, CardTitle } from "./card";
+export declare const Card: (({ children, className, variant, ...props }: import("./card").CardRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, className, variant, ...props }: import("./card").CardRootProps) => import("react/jsx-runtime").JSX.Element;
+    Header: ({ className, ...props }: import("./card").CardHeaderProps) => import("react/jsx-runtime").JSX.Element;
+    Title: ({ children, className, ...props }: import("./card").CardTitleProps) => import("react/jsx-runtime").JSX.Element;
+    Description: ({ children, className, ...props }: import("./card").CardDescriptionProps) => import("react/jsx-runtime").JSX.Element;
+    Content: ({ className, ...props }: import("./card").CardContentProps) => import("react/jsx-runtime").JSX.Element;
+    Footer: ({ className, ...props }: import("./card").CardFooterProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type Card = {
+    Props: ComponentProps<typeof CardRoot>;
+    RootProps: ComponentProps<typeof CardRoot>;
+    HeaderProps: ComponentProps<typeof CardHeader>;
+    TitleProps: ComponentProps<typeof CardTitle>;
+    DescriptionProps: ComponentProps<typeof CardDescription>;
+    ContentProps: ComponentProps<typeof CardContent>;
+    FooterProps: ComponentProps<typeof CardFooter>;
+};
+export { CardRoot, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, };
+export type { CardRootProps, CardRootProps as CardProps, CardHeaderProps, CardTitleProps, CardDescriptionProps, CardContentProps, CardFooterProps, } from "./card";
+export { cardVariants } from "@arobo/styles";
+export type { CardVariants } from "@arobo/styles";

package/dist/components/card/index.js

@@ -0,0 +1,16 @@
+import { CardRoot, CardFooter, CardContent, CardDescription, CardTitle, CardHeader } from './card.js';
+export { cardVariants } from '../../styles/src/components/card/card.styles.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Card = Object.assign(CardRoot, {
+  Root: CardRoot,
+  Header: CardHeader,
+  Title: CardTitle,
+  Description: CardDescription,
+  Content: CardContent,
+  Footer: CardFooter
+});
+
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardRoot, CardTitle };

package/dist/components/checkbox/checkbox.d.ts

@@ -0,0 +1,22 @@
+import type { CheckboxVariants } from "@arobo/styles";
+import type { ComponentPropsWithRef } from "react";
+import type { CheckboxRenderProps } from "react-aria-components";
+import React from "react";
+import { Checkbox as CheckboxPrimitive } from "react-aria-components";
+interface CheckboxRootProps extends ComponentPropsWithRef<typeof CheckboxPrimitive>, CheckboxVariants {
+    /** The name of the checkbox, used when submitting an HTML form. */
+    name?: string;
+}
+declare const CheckboxRoot: ({ children, className, variant, ...props }: CheckboxRootProps) => import("react/jsx-runtime").JSX.Element;
+interface CheckboxControlProps extends ComponentPropsWithRef<"span"> {
+}
+declare const CheckboxControl: ({ children, className, ...props }: CheckboxControlProps) => import("react/jsx-runtime").JSX.Element;
+interface CheckboxIndicatorProps extends Omit<ComponentPropsWithRef<"span">, "children"> {
+    children?: React.ReactNode | ((props: CheckboxRenderProps) => React.ReactNode);
+}
+declare const CheckboxIndicator: ({ children, className, ...props }: CheckboxIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+interface CheckboxContentProps extends ComponentPropsWithRef<"div"> {
+}
+declare const CheckboxContent: ({ children, className, ...props }: CheckboxContentProps) => import("react/jsx-runtime").JSX.Element;
+export { CheckboxRoot, CheckboxControl, CheckboxIndicator, CheckboxContent };
+export type { CheckboxRootProps, CheckboxControlProps, CheckboxIndicatorProps, CheckboxContentProps, };