@arobo/react 1.0.1

package/dist/components/icons.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+interface IconProps extends React.SVGProps<SVGSVGElement> {
+}
+export declare const IconChevronDown: (props: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IconChevronRight: (props: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ExternalLinkIcon: ({ height, width, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CircleDashedIcon: (props: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CloseIcon: (props: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InfoIcon: (props: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const WarningIcon: (props: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DangerIcon: (props: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SuccessIcon: (props: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IconMinus: (props: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IconPlus: (props: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IconSearch: (props: IconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/icons.js

@@ -0,0 +1,36 @@
+import { jsx } from 'react/jsx-runtime';
+
+const IconChevronDown = props => /*#__PURE__*/jsx("svg", {
+  "aria-hidden": "true",
+  "aria-label": "Chevron down icon",
+  fill: "none",
+  role: "presentation",
+  viewBox: "0 0 16 16",
+  xmlns: "http://www.w3.org/2000/svg",
+  ...props,
+  children: /*#__PURE__*/jsx("path", {
+    clipRule: "evenodd",
+    d: "M2.97 5.47a.75.75 0 0 1 1.06 0L8 9.44l3.97-3.97a.75.75 0 1 1 1.06 1.06l-4.5 4.5a.75.75 0 0 1-1.06 0l-4.5-4.5a.75.75 0 0 1 0-1.06",
+    fill: "currentColor",
+    fillRule: "evenodd"
+  })
+});
+const CloseIcon = props => /*#__PURE__*/jsx("svg", {
+  "aria-hidden": "true",
+  "aria-label": "Close icon",
+  fill: "none",
+  height: 16,
+  role: "presentation",
+  viewBox: "0 0 16 16",
+  width: 16,
+  xmlns: "http://www.w3.org/2000/svg",
+  ...props,
+  children: /*#__PURE__*/jsx("path", {
+    clipRule: "evenodd",
+    d: "M3.47 3.47a.75.75 0 0 1 1.06 0L8 6.94l3.47-3.47a.75.75 0 1 1 1.06 1.06L9.06 8l3.47 3.47a.75.75 0 1 1-1.06 1.06L8 9.06l-3.47 3.47a.75.75 0 0 1-1.06-1.06L6.94 8 3.47 4.53a.75.75 0 0 1 0-1.06Z",
+    fill: "currentColor",
+    fillRule: "evenodd"
+  })
+});
+
+export { CloseIcon, IconChevronDown };

package/dist/components/index.d.ts

@@ -0,0 +1,21 @@
+export * from "./button";
+export * from "./button-group";
+export * from "./calendar";
+export * from "./checkbox";
+export * from "./checkbox-group";
+export * from "./close-button";
+export * from "./combobox";
+export * from "./date-field";
+export * from "./date-input-group";
+export * from "./date-picker";
+export * from "./date-range-picker";
+export * from "./description";
+export * from "./error-message";
+export * from "./field-error";
+export * from "./field-group";
+export * from "./input";
+export * from "./label";
+export * from "./popover";
+export * from "./range-calendar";
+export * from "./surface";
+export * from "./text-field";

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

@@ -0,0 +1,13 @@
+import type { ComponentProps } from "react";
+import { InputRoot } from "./input";
+export declare const Input: (({ className, fullWidth, variant: variantProp, ...rest }: import("./input").InputRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ className, fullWidth, variant: variantProp, ...rest }: import("./input").InputRootProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type Input = {
+    Props: ComponentProps<typeof InputRoot>;
+    RootProps: ComponentProps<typeof InputRoot>;
+};
+export { InputRoot } from "./input";
+export type { InputRootProps, InputRootProps as InputProps, } from "./input";
+export { inputVariants } from "@arobo/styles";
+export type { InputVariants } from "@arobo/styles";

package/dist/components/input/index.js

@@ -0,0 +1,11 @@
+import { InputRoot } from './input.js';
+export { inputVariants } from '../../styles/src/components/input/input.styles.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Input = Object.assign(InputRoot, {
+  Root: InputRoot
+});
+
+export { Input, InputRoot };

package/dist/components/input/input.d.ts

@@ -0,0 +1,8 @@
+import type { InputVariants } from "@arobo/styles";
+import type { ComponentPropsWithRef } from "react";
+import { Input as InputPrimitive } from "react-aria-components";
+interface InputRootProps extends ComponentPropsWithRef<typeof InputPrimitive>, InputVariants {
+}
+declare const InputRoot: ({ className, fullWidth, variant: variantProp, ...rest }: InputRootProps) => import("react/jsx-runtime").JSX.Element;
+export { InputRoot };
+export type { InputRootProps };

package/dist/components/input/input.js

@@ -0,0 +1,27 @@
+import { useContext } from 'react';
+import { Input } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+import { TextFieldContext } from '../text-field/text-field.js';
+import { inputVariants } from '../../styles/src/components/input/input.styles.js';
+import { composeTwRenderProps } from '../../utils/compose.js';
+
+const InputRoot = ({
+  className,
+  fullWidth,
+  variant: variantProp,
+  ...rest
+}) => {
+  const context = useContext(TextFieldContext);
+  // Use variant from context if not explicitly provided
+  const variant = variantProp ?? context.variant;
+  return /*#__PURE__*/jsx(Input, {
+    className: composeTwRenderProps(className, inputVariants({
+      fullWidth,
+      variant
+    })),
+    "data-slot": "input",
+    ...rest
+  });
+};
+
+export { InputRoot };

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

@@ -0,0 +1,13 @@
+import type { ComponentProps } from "react";
+import { LabelRoot } from "./label";
+export declare const Label: (({ children, className, isDisabled, isInvalid, isRequired, ...rest }: import("./label").LabelRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, className, isDisabled, isInvalid, isRequired, ...rest }: import("./label").LabelRootProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type Label = {
+    Props: ComponentProps<typeof LabelRoot>;
+    RootProps: ComponentProps<typeof LabelRoot>;
+};
+export { LabelRoot };
+export type { LabelRootProps, LabelRootProps as LabelProps } from "./label";
+export { labelVariants } from "@arobo/styles";
+export type { LabelVariants } from "@arobo/styles";

package/dist/components/label/index.js

@@ -0,0 +1,11 @@
+import { LabelRoot } from './label.js';
+export { labelVariants } from '../../styles/src/components/label/label.styles.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Label = Object.assign(LabelRoot, {
+  Root: LabelRoot
+});
+
+export { Label, LabelRoot };

package/dist/components/label/label.d.ts

@@ -0,0 +1,8 @@
+import type { LabelVariants } from "@arobo/styles";
+import type { ComponentPropsWithRef } from "react";
+import { Label as LabelPrimitive } from "react-aria-components";
+interface LabelRootProps extends ComponentPropsWithRef<typeof LabelPrimitive>, LabelVariants {
+}
+declare const LabelRoot: ({ children, className, isDisabled, isInvalid, isRequired, ...rest }: LabelRootProps) => import("react/jsx-runtime").JSX.Element;
+export { LabelRoot };
+export type { LabelRootProps };

package/dist/components/label/label.js

@@ -0,0 +1,26 @@
+import { Label } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+import { labelVariants } from '../../styles/src/components/label/label.styles.js';
+
+const LabelRoot = ({
+  children,
+  className,
+  isDisabled,
+  isInvalid,
+  isRequired,
+  ...rest
+}) => {
+  return /*#__PURE__*/jsx(Label, {
+    className: labelVariants({
+      isRequired,
+      isDisabled,
+      isInvalid,
+      className
+    }),
+    "data-slot": "label",
+    ...rest,
+    children: children
+  });
+};
+
+export { LabelRoot };

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

@@ -0,0 +1,23 @@
+import type { ComponentProps } from "react";
+import { PopoverArrow, PopoverContent, PopoverDialog, PopoverHeading, PopoverRoot, PopoverTrigger } from "./popover";
+export declare const Popover: (({ children, ...props }: import("react").ComponentPropsWithRef<typeof import("react-aria-components").DialogTrigger>) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, ...props }: import("react").ComponentPropsWithRef<typeof import("react-aria-components").DialogTrigger>) => import("react/jsx-runtime").JSX.Element;
+    Trigger: ({ children, className, ...props }: import("./popover").PopoverTriggerProps) => import("react/jsx-runtime").JSX.Element;
+    Dialog: ({ children, className, ...props }: import("./popover").PopoverDialogProps) => import("react/jsx-runtime").JSX.Element;
+    Arrow: ({ children, className, ...props }: import("./popover").PopoverArrowProps) => import("react/jsx-runtime").JSX.Element;
+    Content: ({ children, className, ...props }: import("./popover").PopoverContentProps) => import("react/jsx-runtime").JSX.Element;
+    Heading: ({ children, className, ...props }: import("./popover").PopoverHeadingProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type Popover = {
+    Props: ComponentProps<typeof PopoverRoot>;
+    RootProps: ComponentProps<typeof PopoverRoot>;
+    TriggerProps: ComponentProps<typeof PopoverTrigger>;
+    DialogProps: ComponentProps<typeof PopoverDialog>;
+    ArrowProps: ComponentProps<typeof PopoverArrow>;
+    ContentProps: ComponentProps<typeof PopoverContent>;
+    HeadingProps: ComponentProps<typeof PopoverHeading>;
+};
+export { PopoverArrow, PopoverContent, PopoverDialog, PopoverHeading, PopoverRoot, PopoverTrigger, };
+export type { PopoverRootProps, PopoverRootProps as PopoverProps, PopoverTriggerProps, PopoverDialogProps, PopoverArrowProps, PopoverContentProps, PopoverHeadingProps, } from "./popover";
+export { popoverVariants } from "@arobo/styles";
+export type { PopoverVariants } from "@arobo/styles";

package/dist/components/popover/index.js

@@ -0,0 +1,16 @@
+import { PopoverRoot, PopoverHeading, PopoverContent, PopoverArrow, PopoverDialog, PopoverTrigger } from './popover.js';
+export { popoverVariants } from '../../styles/src/components/popover/popover.styles.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Popover = Object.assign(PopoverRoot, {
+  Root: PopoverRoot,
+  Trigger: PopoverTrigger,
+  Dialog: PopoverDialog,
+  Arrow: PopoverArrow,
+  Content: PopoverContent,
+  Heading: PopoverHeading
+});
+
+export { Popover, PopoverArrow, PopoverContent, PopoverDialog, PopoverHeading, PopoverRoot, PopoverTrigger };

package/dist/components/popover/popover.d.ts

@@ -0,0 +1,26 @@
+import type { PopoverVariants } from "@arobo/styles";
+import type { ComponentPropsWithRef } from "react";
+import React from "react";
+import { Dialog as DialogPrimitive, Heading as HeadingPrimitive, OverlayArrow, Popover as PopoverPrimitive, DialogTrigger as PopoverTriggerPrimitive } from "react-aria-components";
+type PopoverRootProps = ComponentPropsWithRef<typeof PopoverTriggerPrimitive>;
+declare const PopoverRoot: ({ children, ...props }: ComponentPropsWithRef<typeof PopoverTriggerPrimitive>) => import("react/jsx-runtime").JSX.Element;
+interface PopoverContentProps extends Omit<ComponentPropsWithRef<typeof PopoverPrimitive>, "children">, PopoverVariants {
+    children: React.ReactNode;
+}
+declare const PopoverContent: ({ children, className, ...props }: PopoverContentProps) => import("react/jsx-runtime").JSX.Element;
+type PopoverArrowProps = Omit<ComponentPropsWithRef<typeof OverlayArrow>, "children"> & {
+    children?: React.ReactNode;
+};
+declare const PopoverArrow: ({ children, className, ...props }: PopoverArrowProps) => import("react/jsx-runtime").JSX.Element;
+type PopoverDialogProps = Omit<ComponentPropsWithRef<typeof DialogPrimitive>, "children"> & {
+    children: React.ReactNode;
+};
+declare const PopoverDialog: ({ children, className, ...props }: PopoverDialogProps) => import("react/jsx-runtime").JSX.Element;
+type PopoverTriggerProps = ComponentPropsWithRef<"div"> & {
+    asChild?: boolean;
+};
+declare const PopoverTrigger: ({ children, className, ...props }: PopoverTriggerProps) => import("react/jsx-runtime").JSX.Element;
+type PopoverHeadingProps = ComponentPropsWithRef<typeof HeadingPrimitive> & {};
+declare const PopoverHeading: ({ children, className, ...props }: PopoverHeadingProps) => import("react/jsx-runtime").JSX.Element;
+export { PopoverRoot, PopoverTrigger, PopoverDialog, PopoverArrow, PopoverContent, PopoverHeading, };
+export type { PopoverRootProps, PopoverTriggerProps, PopoverDialogProps, PopoverArrowProps, PopoverContentProps, PopoverHeadingProps, };

package/dist/components/popover/popover.js

@@ -0,0 +1,154 @@
+import React, { createContext, useContext } from 'react';
+import { DialogTrigger, Heading, Popover, OverlayArrow, Dialog, Pressable } from 'react-aria-components';
+import { Slot } from '@radix-ui/react-slot';
+import { composeSlotClassName, composeTwRenderProps } from '../../utils/compose.js';
+import { jsx } from 'react/jsx-runtime';
+import { popoverVariants } from '../../styles/src/components/popover/popover.styles.js';
+import { SurfaceContext } from '../surface/surface.js';
+
+const PopoverContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * Popover Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const PopoverRoot = ({
+  children,
+  ...props
+}) => {
+  const slots = React.useMemo(() => popoverVariants(), []);
+  return /*#__PURE__*/jsx(PopoverContext, {
+    value: {
+      slots
+    },
+    children: /*#__PURE__*/jsx(DialogTrigger, {
+      "data-slot": "popover-root",
+      ...props,
+      children: children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Popover Content
+ * -----------------------------------------------------------------------------------------------*/
+
+const PopoverContent = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(PopoverContext);
+  return /*#__PURE__*/jsx(PopoverContext, {
+    value: {
+      slots
+    },
+    children: /*#__PURE__*/jsx(SurfaceContext, {
+      value: {
+        variant: "default"
+      },
+      children: /*#__PURE__*/jsx(Popover, {
+        ...props,
+        className: composeTwRenderProps(className, slots?.base()),
+        children: children
+      })
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Popover Arrow
+ * -----------------------------------------------------------------------------------------------*/
+
+const PopoverArrow = ({
+  children,
+  className,
+  ...props
+}) => {
+  const defaultArrow = /*#__PURE__*/jsx("svg", {
+    width: 12,
+    height: 12,
+    viewBox: "0 0 12 12",
+    "data-slot": "popover-overlay-arrow",
+    children: /*#__PURE__*/jsx("path", {
+      d: "M0 0 L6 6 L12 0"
+    })
+  });
+  const arrow = /*#__PURE__*/React.isValidElement(children) ? /*#__PURE__*/React.cloneElement(children, {
+    "data-slot": "popover-overlay-arrow"
+  }) : defaultArrow;
+  return /*#__PURE__*/jsx(OverlayArrow, {
+    "data-slot": "popover-overlay-arrow-group",
+    ...props,
+    className: className,
+    children: arrow
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Popover Dialog
+ * -----------------------------------------------------------------------------------------------*/
+
+const PopoverDialog = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(PopoverContext);
+  return /*#__PURE__*/jsx(Dialog, {
+    "data-slot": "popover-dialog",
+    ...props,
+    className: composeSlotClassName(slots?.dialog, className),
+    children: children
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Popover Trigger
+ * -----------------------------------------------------------------------------------------------*/
+
+const PopoverTrigger = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(PopoverContext);
+  const Component = props.asChild ? Slot : "div";
+  return /*#__PURE__*/jsx(Pressable, {
+    children: /*#__PURE__*/jsx(Component, {
+      className: composeSlotClassName(slots?.trigger, className),
+      "data-slot": "popover-trigger",
+      role: "button",
+      ...props,
+      children: children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Popover Heading
+ * -----------------------------------------------------------------------------------------------*/
+
+const PopoverHeading = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(PopoverContext);
+  return /*#__PURE__*/jsx(Heading, {
+    slot: "title",
+    ...props,
+    className: composeSlotClassName(slots?.heading, className),
+    children: children
+  });
+};
+
+export { PopoverArrow, PopoverContent, PopoverDialog, PopoverHeading, PopoverRoot, PopoverTrigger };

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

@@ -0,0 +1,13 @@
+import type { ComponentProps } from "react";
+import { RangeCalendarRoot } from "./range-calendar";
+export declare const RangeCalendar: (<T extends import("react-aria-components").DateValue>({ errorMessage, ...props }: import("./range-calendar").RangeCalendarRootProps<T>) => import("react/jsx-runtime").JSX.Element) & {
+    Root: <T extends import("react-aria-components").DateValue>({ errorMessage, ...props }: import("./range-calendar").RangeCalendarRootProps<T>) => import("react/jsx-runtime").JSX.Element;
+};
+export type RangeCalendar = {
+    Props: ComponentProps<typeof RangeCalendarRoot>;
+    RootProps: ComponentProps<typeof RangeCalendarRoot>;
+};
+export { RangeCalendarRoot } from "./range-calendar";
+export type { RangeCalendarRootProps, RangeCalendarRootProps as RangeCalendarProps, } from "./range-calendar";
+export { rangeCalendarVariants } from "@arobo/styles";
+export type { RangeCalendarVariants } from "@arobo/styles";

package/dist/components/range-calendar/index.js

@@ -0,0 +1,11 @@
+import { RangeCalendarRoot } from './range-calendar.js';
+export { rangeCalendarVariants } from '../../styles/src/components/range-calendar/range-calendar.styles.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const RangeCalendar = Object.assign(RangeCalendarRoot, {
+  Root: RangeCalendarRoot
+});
+
+export { RangeCalendar, RangeCalendarRoot };

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

@@ -0,0 +1,7 @@
+import type { RangeCalendarProps as RangeCalendarPrimitiveProps, DateValue } from "react-aria-components";
+interface RangeCalendarRootProps<T extends DateValue> extends Omit<RangeCalendarPrimitiveProps<T>, "visibleDuration"> {
+    errorMessage?: string;
+}
+declare const RangeCalendarRoot: <T extends DateValue>({ errorMessage, ...props }: RangeCalendarRootProps<T>) => import("react/jsx-runtime").JSX.Element;
+export { RangeCalendarRoot };
+export type { RangeCalendarRootProps };

package/dist/components/range-calendar/range-calendar.js

@@ -0,0 +1,44 @@
+import { RangeCalendar, CalendarGrid, CalendarGridBody, CalendarCell } from 'react-aria-components';
+import { ErrorMessage } from '../error-message/index.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { CalendarHeader, CalendarGridHeader } from '../calendar/calendar.js';
+import { rangeCalendarVariants } from '../../styles/src/components/range-calendar/range-calendar.styles.js';
+import { composeTwRenderProps } from '../../utils/compose.js';
+
+const RangeCalendarRoot = ({
+  errorMessage,
+  ...props
+}) => {
+  return /*#__PURE__*/jsxs(RangeCalendar, {
+    ...props,
+    className: composeTwRenderProps(props.className, rangeCalendarVariants.base),
+    children: [/*#__PURE__*/jsx(CalendarHeader, {}), /*#__PURE__*/jsxs(CalendarGrid, {
+      className: rangeCalendarVariants.slots.grid,
+      children: [/*#__PURE__*/jsx(CalendarGridHeader, {}), /*#__PURE__*/jsx(CalendarGridBody, {
+        children: date => /*#__PURE__*/jsx(CalendarCell, {
+          date: date,
+          className: rangeCalendarVariants.slots.cell,
+          children: ({
+            formattedDate,
+            isSelected,
+            isSelectionStart,
+            isSelectionEnd,
+            isFocusVisible,
+            isDisabled
+          }) => /*#__PURE__*/jsx("span", {
+            "data-slot": "cell-content",
+            "data-selection-state": isSelected && (isSelectionStart || isSelectionEnd) ? "cap" : isSelected ? "middle" : "none",
+            "data-disabled": isDisabled ? true : undefined,
+            "data-focus-visible": isFocusVisible ? true : undefined,
+            children: formattedDate
+          })
+        })
+      })]
+    }), errorMessage && /*#__PURE__*/jsx(ErrorMessage, {
+      slot: "errorMessage",
+      children: errorMessage
+    })]
+  });
+};
+
+export { RangeCalendarRoot };

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

@@ -0,0 +1,14 @@
+import type { ComponentProps } from "react";
+import { SurfaceRoot } from "./surface";
+export declare const Surface: (({ children, className, variant, effect, ...rest }: import("./surface").SurfaceRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, className, variant, effect, ...rest }: import("./surface").SurfaceRootProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type Surface = {
+    Props: ComponentProps<typeof SurfaceRoot>;
+    RootProps: ComponentProps<typeof SurfaceRoot>;
+};
+export { SurfaceRoot } from "./surface";
+export type { SurfaceRootProps, SurfaceRootProps as SurfaceProps, } from "./surface";
+export { SurfaceContext } from "./surface";
+export { surfaceVariants } from "@arobo/styles";
+export type { SurfaceVariants } from "@arobo/styles";

package/dist/components/surface/index.js

@@ -0,0 +1,12 @@
+import { SurfaceRoot } from './surface.js';
+export { SurfaceContext } from './surface.js';
+export { surfaceVariants } from '../../styles/src/components/surface/surface.styles.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Surface = Object.assign(SurfaceRoot, {
+  Root: SurfaceRoot
+});
+
+export { Surface, SurfaceRoot };

package/dist/components/surface/surface.d.ts

@@ -0,0 +1,12 @@
+import type { SurfaceVariants } from "@arobo/styles";
+import type { ComponentPropsWithRef } from "react";
+import React from "react";
+type SurfaceContext = {
+    variant?: SurfaceVariants["variant"];
+};
+declare const SurfaceContext: React.Context<SurfaceContext>;
+interface SurfaceRootProps extends ComponentPropsWithRef<"div">, SurfaceVariants {
+}
+declare const SurfaceRoot: ({ children, className, variant, effect, ...rest }: SurfaceRootProps) => import("react/jsx-runtime").JSX.Element;
+export { SurfaceRoot, SurfaceContext };
+export type { SurfaceRootProps };

package/dist/components/surface/surface.js

@@ -0,0 +1,35 @@
+import { createContext } from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { surfaceVariants } from '../../styles/src/components/surface/surface.styles.js';
+
+const SurfaceContext = /*#__PURE__*/createContext({});
+
+/* ------------------------------------------------------------------------------------------------
+ * Surface Root
+ * --------------------------------------------------------------------------------------------- */
+
+const SurfaceRoot = ({
+  children,
+  className,
+  variant = "default",
+  effect = "none",
+  ...rest
+}) => {
+  return /*#__PURE__*/jsx(SurfaceContext, {
+    value: {
+      variant
+    },
+    children: /*#__PURE__*/jsx("div", {
+      className: surfaceVariants({
+        variant,
+        className,
+        effect
+      }),
+      "data-slot": "surface",
+      ...rest,
+      children: children
+    })
+  });
+};
+
+export { SurfaceContext, SurfaceRoot };

package/dist/components/text-field/index.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentProps } from "react";
+import { TextFieldRoot } from "./text-field";
+export declare const TextField: (({ children, className, fullWidth, variant, ...props }: import("./text-field").TextFieldRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, className, fullWidth, variant, ...props }: import("./text-field").TextFieldRootProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type TextField = {
+    Props: ComponentProps<typeof TextFieldRoot>;
+    RootProps: ComponentProps<typeof TextFieldRoot>;
+};
+export { TextFieldRoot };
+export type { TextFieldRootProps, TextFieldRootProps as TextFieldProps, } from "./text-field";
+export { TextFieldContext } from "./text-field";
+export { textFieldVariants } from "@arobo/styles";
+export type { TextFieldVariants } from "@arobo/styles";

package/dist/components/text-field/index.js

@@ -0,0 +1,12 @@
+import { TextFieldRoot } from './text-field.js';
+export { TextFieldContext } from './text-field.js';
+export { textFieldVariants } from '../../styles/src/components/text-field/text-field.styles.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const TextField = Object.assign(TextFieldRoot, {
+  Root: TextFieldRoot
+});
+
+export { TextField, TextFieldRoot };

package/dist/components/text-field/text-field.d.ts

@@ -0,0 +1,18 @@
+import type { TextFieldVariants } from "@arobo/styles";
+import type { ComponentPropsWithRef } from "react";
+import React from "react";
+import { TextField as TextFieldPrimitive } from "react-aria-components";
+type TextFieldContext = {
+    variant?: "primary" | "secondary";
+};
+declare const TextFieldContext: React.Context<TextFieldContext>;
+interface TextFieldRootProps extends ComponentPropsWithRef<typeof TextFieldPrimitive>, TextFieldVariants {
+    /**
+     * The variant of the text field.
+     * @default "primary"
+     */
+    variant?: "primary" | "secondary";
+}
+declare const TextFieldRoot: ({ children, className, fullWidth, variant, ...props }: TextFieldRootProps) => import("react/jsx-runtime").JSX.Element;
+export { TextFieldRoot, TextFieldContext };
+export type { TextFieldRootProps };