@arobo/react 1.0.1 → 1.1.1

package/dist/components/empty/empty.d.ts

@@ -0,0 +1,34 @@
+import type { EmptyVariants } from "@arobo/styles";
+import type { ComponentPropsWithRef } from "react";
+interface EmptyRootProps extends ComponentPropsWithRef<"div">, EmptyVariants {
+}
+declare const EmptyRoot: ({ children, className, size, variant, ...props }: EmptyRootProps) => import("react/jsx-runtime").JSX.Element;
+type EmptyRootComponent = typeof EmptyRoot & {
+    Header: typeof EmptyHeader;
+    Media: typeof EmptyMedia;
+    Title: typeof EmptyTitle;
+    Description: typeof EmptyDescription;
+    Content: typeof EmptyContent;
+    Actions: typeof EmptyActions;
+};
+interface EmptyHeaderProps extends ComponentPropsWithRef<"div"> {
+}
+declare const EmptyHeader: ({ className, ...props }: EmptyHeaderProps) => import("react/jsx-runtime").JSX.Element;
+interface EmptyMediaProps extends ComponentPropsWithRef<"div"> {
+}
+declare const EmptyMedia: ({ className, ...props }: EmptyMediaProps) => import("react/jsx-runtime").JSX.Element;
+interface EmptyTitleProps extends ComponentPropsWithRef<"div"> {
+}
+declare const EmptyTitle: ({ className, ...props }: EmptyTitleProps) => import("react/jsx-runtime").JSX.Element;
+interface EmptyDescriptionProps extends ComponentPropsWithRef<"div"> {
+}
+declare const EmptyDescription: ({ className, ...props }: EmptyDescriptionProps) => import("react/jsx-runtime").JSX.Element;
+interface EmptyContentProps extends ComponentPropsWithRef<"div"> {
+}
+declare const EmptyContent: ({ className, ...props }: EmptyContentProps) => import("react/jsx-runtime").JSX.Element;
+interface EmptyActionsProps extends ComponentPropsWithRef<"div"> {
+}
+declare const EmptyActions: ({ className, ...props }: EmptyActionsProps) => import("react/jsx-runtime").JSX.Element;
+declare const Empty: EmptyRootComponent;
+export { Empty, EmptyRoot, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent, EmptyActions, };
+export type { EmptyRootComponent, EmptyRootProps, EmptyHeaderProps, EmptyMediaProps, EmptyTitleProps, EmptyDescriptionProps, EmptyContentProps, EmptyActionsProps, };

package/dist/components/empty/empty.js

@@ -0,0 +1,151 @@
+import React__default, { createContext, useContext } from 'react';
+import { composeSlotClassName } from '../../utils/compose.js';
+import { jsx } from 'react/jsx-runtime';
+import { emptyVariants } from '../../packages/styles/src/components/empty/empty.styles.js';
+
+const EmptyContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * Empty Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const EmptyRoot = ({
+  children,
+  className,
+  size,
+  variant,
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => emptyVariants({
+    size,
+    variant
+  }), [size, variant]);
+  return /*#__PURE__*/jsx(EmptyContext, {
+    value: {
+      slots
+    },
+    children: /*#__PURE__*/jsx("div", {
+      className: composeSlotClassName(slots.base, className),
+      "data-slot": "empty",
+      ...props,
+      children: children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Empty Header
+ * -----------------------------------------------------------------------------------------------*/
+
+const EmptyHeader = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(EmptyContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.header, className),
+    "data-slot": "empty-header",
+    ...props
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Empty Media
+ * -----------------------------------------------------------------------------------------------*/
+
+const EmptyMedia = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(EmptyContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.media, className),
+    "data-slot": "empty-media",
+    ...props
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Empty Title
+ * -----------------------------------------------------------------------------------------------*/
+
+const EmptyTitle = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(EmptyContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.title, className),
+    "data-slot": "empty-title",
+    ...props
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Empty Description
+ * -----------------------------------------------------------------------------------------------*/
+
+const EmptyDescription = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(EmptyContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.description, className),
+    "data-slot": "empty-description",
+    ...props
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Empty Content
+ * -----------------------------------------------------------------------------------------------*/
+
+const EmptyContent = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(EmptyContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.content, className),
+    "data-slot": "empty-content",
+    ...props
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Empty Actions
+ * -----------------------------------------------------------------------------------------------*/
+
+const EmptyActions = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(EmptyContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.actions, className),
+    "data-slot": "empty-actions",
+    ...props
+  });
+};
+const Empty = EmptyRoot;
+Empty.Header = EmptyHeader;
+Empty.Media = EmptyMedia;
+Empty.Title = EmptyTitle;
+Empty.Description = EmptyDescription;
+Empty.Content = EmptyContent;
+Empty.Actions = EmptyActions;
+
+export { Empty, EmptyActions, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyRoot, EmptyTitle };

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

@@ -0,0 +1,2 @@
+export { Empty, EmptyRoot, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent, EmptyActions, } from "./empty";
+export type { EmptyRootComponent, EmptyRootProps, EmptyHeaderProps, EmptyMediaProps, EmptyTitleProps, EmptyDescriptionProps, EmptyContentProps, EmptyActionsProps, } from "./empty";

package/dist/components/empty/index.js

@@ -0,0 +1 @@
+export { Empty, EmptyActions, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyRoot, EmptyTitle } from './empty.js';

package/dist/components/empty-state/empty-state.d.ts

@@ -0,0 +1,7 @@
+import { type EmptyStateVariants } from "@arobo/styles";
+import type { ComponentPropsWithRef } from "react";
+interface EmptyStateRootProps extends ComponentPropsWithRef<"div">, EmptyStateVariants {
+}
+declare const EmptyStateRoot: ({ children, className, ...rest }: EmptyStateRootProps) => import("react/jsx-runtime").JSX.Element;
+export { EmptyStateRoot };
+export type { EmptyStateRootProps };

package/dist/components/empty-state/empty-state.js

@@ -0,0 +1,19 @@
+import { jsx } from 'react/jsx-runtime';
+import { emptyStateVariants } from '../../packages/styles/src/components/empty-state/empty-state.styles.js';
+
+const EmptyStateRoot = ({
+  children,
+  className,
+  ...rest
+}) => {
+  return /*#__PURE__*/jsx("div", {
+    className: emptyStateVariants({
+      className
+    }),
+    "data-slot": "empty-state",
+    ...rest,
+    children: children || "No results found"
+  });
+};
+
+export { EmptyStateRoot };

package/dist/components/empty-state/index.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentProps } from "react";
+import { EmptyStateRoot } from "./empty-state";
+export declare const EmptyState: (({ children, className, ...rest }: import("./empty-state").EmptyStateRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, className, ...rest }: import("./empty-state").EmptyStateRootProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type EmptyState = {
+    Props: ComponentProps<typeof EmptyStateRoot>;
+    RootProps: ComponentProps<typeof EmptyStateRoot>;
+};
+export { EmptyStateRoot };
+export type { EmptyStateRootProps, EmptyStateRootProps as EmptyStateProps } from "./empty-state";

package/dist/components/empty-state/index.js

@@ -0,0 +1,10 @@
+import { EmptyStateRoot } from './empty-state.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const EmptyState = Object.assign(EmptyStateRoot, {
+  Root: EmptyStateRoot
+});
+
+export { EmptyState, EmptyStateRoot };

package/dist/components/error-message/error-message.js

@@ -1,6 +1,6 @@
 import { Text } from 'react-aria-components';
 import { jsx } from 'react/jsx-runtime';
-import { errorMessageVariants } from '../../styles/src/components/error-message/error-message.styles.js';
+import { errorMessageVariants } from '../../packages/styles/src/components/error-message/error-message.styles.js';
 
 const ErrorMessageRoot = ({
   children,

package/dist/components/error-message/index.js

@@ -1,5 +1,5 @@
 import { ErrorMessageRoot } from './error-message.js';
-export { errorMessageVariants } from '../../styles/src/components/error-message/error-message.styles.js';
+export { errorMessageVariants } from '../../packages/styles/src/components/error-message/error-message.styles.js';
 
 /* -------------------------------------------------------------------------------------------------
  * Compound Component

package/dist/components/field-error/field-error.js

@@ -1,7 +1,7 @@
 import { FieldError } from 'react-aria-components';
 import { composeTwRenderProps } from '../../utils/compose.js';
 import { jsx } from 'react/jsx-runtime';
-import { fieldErrorVariants } from '../../styles/src/components/field-error/field-error.styles.js';
+import { fieldErrorVariants } from '../../packages/styles/src/components/field-error/field-error.styles.js';
 
 const FieldErrorRoot = ({
   children,

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

@@ -1,5 +1,5 @@
 import { FieldErrorRoot } from './field-error.js';
-export { fieldErrorVariants } from '../../styles/src/components/field-error/field-error.styles.js';
+export { fieldErrorVariants } from '../../packages/styles/src/components/field-error/field-error.styles.js';
 
 /* -------------------------------------------------------------------------------------------------
  * Compound Component

package/dist/components/fieldset/fieldset.d.ts

@@ -0,0 +1,16 @@
+import type { FieldsetVariants } from "@arobo/styles";
+import type { ComponentPropsWithRef } from "react";
+interface FieldsetRootProps extends ComponentPropsWithRef<"fieldset">, FieldsetVariants {
+}
+declare const FieldsetRoot: ({ className, ...props }: FieldsetRootProps) => import("react/jsx-runtime").JSX.Element;
+interface FieldsetLegendProps extends ComponentPropsWithRef<"legend"> {
+}
+declare const FieldsetLegend: ({ className, ...props }: FieldsetLegendProps) => import("react/jsx-runtime").JSX.Element;
+interface FieldGroupProps extends ComponentPropsWithRef<"div"> {
+}
+declare const FieldGroup: ({ className, ...rest }: FieldGroupProps) => import("react/jsx-runtime").JSX.Element;
+interface FieldsetActionsProps extends ComponentPropsWithRef<"div"> {
+}
+declare const FieldsetActions: ({ children, className, ...rest }: FieldsetActionsProps) => import("react/jsx-runtime").JSX.Element;
+export { FieldsetRoot, FieldsetLegend, FieldGroup, FieldsetActions };
+export type { FieldsetRootProps, FieldsetLegendProps, FieldGroupProps, FieldsetActionsProps, };

package/dist/components/fieldset/fieldset.js

@@ -0,0 +1,87 @@
+import React__default, { createContext, useContext } from 'react';
+import { composeSlotClassName } from '../../utils/compose.js';
+import { jsx } from 'react/jsx-runtime';
+import { fieldsetVariants } from '../../packages/styles/src/components/fieldset/fieldset.styles.js';
+
+const FieldsetContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * Fieldset Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const FieldsetRoot = ({
+  className,
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => fieldsetVariants({}), []);
+  return /*#__PURE__*/jsx(FieldsetContext, {
+    value: {
+      slots
+    },
+    children: /*#__PURE__*/jsx("fieldset", {
+      className: slots?.base({
+        className
+      }),
+      "data-slot": "fieldset",
+      ...props
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Fieldset Legend
+ * -----------------------------------------------------------------------------------------------*/
+
+const FieldsetLegend = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(FieldsetContext);
+  return /*#__PURE__*/jsx("legend", {
+    className: composeSlotClassName(slots?.legend, className),
+    "data-slot": "fieldset-legend",
+    ...props
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Field Group
+ * -----------------------------------------------------------------------------------------------*/
+
+const FieldGroup = ({
+  className,
+  ...rest
+}) => {
+  const {
+    slots
+  } = useContext(FieldsetContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.fieldGroup, className),
+    "data-slot": "fieldset-field-group",
+    ...rest
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Field Actions
+ * -----------------------------------------------------------------------------------------------*/
+
+const FieldsetActions = ({
+  children,
+  className,
+  ...rest
+}) => {
+  const {
+    slots
+  } = useContext(FieldsetContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.actions, className),
+    "data-slot": "fieldset-actions",
+    ...rest,
+    children: children
+  });
+};
+
+export { FieldGroup, FieldsetActions, FieldsetLegend, FieldsetRoot };

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

@@ -0,0 +1,19 @@
+import type { ComponentProps } from "react";
+import { FieldGroup, FieldsetActions, FieldsetLegend, FieldsetRoot } from "./fieldset";
+export declare const Fieldset: (({ className, ...props }: import("./fieldset").FieldsetRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ className, ...props }: import("./fieldset").FieldsetRootProps) => import("react/jsx-runtime").JSX.Element;
+    Legend: ({ className, ...props }: import("./fieldset").FieldsetLegendProps) => import("react/jsx-runtime").JSX.Element;
+    Group: ({ className, ...rest }: import("./fieldset").FieldGroupProps) => import("react/jsx-runtime").JSX.Element;
+    Actions: ({ children, className, ...rest }: import("./fieldset").FieldsetActionsProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type Fieldset = {
+    Props: ComponentProps<typeof FieldsetRoot>;
+    RootProps: ComponentProps<typeof FieldsetRoot>;
+    LegendProps: ComponentProps<typeof FieldsetLegend>;
+    GroupProps: ComponentProps<typeof FieldGroup>;
+    ActionsProps: ComponentProps<typeof FieldsetActions>;
+};
+export { FieldsetRoot, FieldsetLegend, FieldGroup, FieldsetActions };
+export type { FieldsetRootProps, FieldsetRootProps as FieldsetProps, FieldsetLegendProps, FieldGroupProps, FieldsetActionsProps, } from "./fieldset";
+export { fieldsetVariants } from "@arobo/styles";
+export type { FieldsetVariants } from "@arobo/styles";

package/dist/components/fieldset/index.js

@@ -0,0 +1,14 @@
+import { FieldsetRoot, FieldsetActions, FieldGroup, FieldsetLegend } from './fieldset.js';
+export { fieldsetVariants } from '../../packages/styles/src/components/fieldset/fieldset.styles.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Fieldset = Object.assign(FieldsetRoot, {
+  Root: FieldsetRoot,
+  Legend: FieldsetLegend,
+  Group: FieldGroup,
+  Actions: FieldsetActions
+});
+
+export { FieldGroup, Fieldset, FieldsetActions, FieldsetLegend, FieldsetRoot };

package/dist/components/header/header.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentPropsWithRef } from "react";
+import { Header as HeaderPrimitive } from "react-aria-components";
+interface HeaderRootProps extends ComponentPropsWithRef<typeof HeaderPrimitive> {
+}
+declare const HeaderRoot: ({ children, className, ...rest }: HeaderRootProps) => import("react/jsx-runtime").JSX.Element;
+export { HeaderRoot };
+export type { HeaderRootProps };

package/dist/components/header/header.js

@@ -0,0 +1,20 @@
+import { Header } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+import { headerVariants } from '../../packages/styles/src/components/header/header.styles.js';
+
+const HeaderRoot = ({
+  children,
+  className,
+  ...rest
+}) => {
+  return /*#__PURE__*/jsx(Header, {
+    className: headerVariants({
+      className
+    }),
+    "data-slot": "header",
+    ...rest,
+    children: children
+  });
+};
+
+export { HeaderRoot };

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

@@ -0,0 +1,8 @@
+import type { ComponentProps } from "react";
+import { HeaderRoot } from "./header";
+export declare const Header: ({ children, className, ...rest }: import("./header").HeaderRootProps) => import("react/jsx-runtime").JSX.Element;
+export type Header = {
+    Props: ComponentProps<typeof HeaderRoot>;
+};
+export { HeaderRoot };
+export type { HeaderRootProps, HeaderRootProps as HeaderProps } from "./header";

package/dist/components/header/index.js

@@ -0,0 +1,8 @@
+import { HeaderRoot } from './header.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Header = HeaderRoot;
+
+export { Header, HeaderRoot };

package/dist/components/heading/heading.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { type HeadingVariants } from "@arobo/styles";
+export declare const HeadingTags: readonly ["h1", "h2", "h3", "h4", "h5", "h6"];
+export declare const defaultHeadingTag: "h2";
+interface HeadingRootProps extends HeadingVariants {
+    children?: React.ReactNode;
+    className?: string;
+    as?: (typeof HeadingTags)[number];
+}
+declare const HeadingRoot: React.ForwardRefExoticComponent<HeadingRootProps & React.RefAttributes<HTMLDivElement>>;
+export { HeadingRoot };
+export type { HeadingRootProps };

package/dist/components/heading/heading.js

@@ -0,0 +1,29 @@
+import React__default from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { headingVariants } from '../../packages/styles/src/components/heading/heading.styles.js';
+
+const HeadingTags = ["h1", "h2", "h3", "h4", "h5", "h6"];
+const defaultHeadingTag = HeadingTags[1]; // "h2"
+
+/* -------------------------------------------------------------------------------------------------
+ * HeadingRoot
+ * -----------------------------------------------------------------------------------------------*/
+
+const HeadingRoot = /*#__PURE__*/React__default.forwardRef(({
+  children,
+  className,
+  as: HeadingComponent = defaultHeadingTag,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/jsx(HeadingComponent, {
+    ref: ref,
+    className: headingVariants({
+      className,
+      ...props
+    }),
+    children: children
+  });
+});
+HeadingRoot.displayName = "Heading";
+
+export { HeadingRoot, HeadingTags, defaultHeadingTag };

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

@@ -0,0 +1,13 @@
+import type { ComponentProps } from "react";
+import { HeadingRoot } from "./heading";
+export declare const Heading: import("react").ForwardRefExoticComponent<import("./heading").HeadingRootProps & import("react").RefAttributes<HTMLDivElement>> & {
+    Root: import("react").ForwardRefExoticComponent<import("./heading").HeadingRootProps & import("react").RefAttributes<HTMLDivElement>>;
+};
+export type Heading = {
+    Props: ComponentProps<typeof HeadingRoot>;
+    RootProps: ComponentProps<typeof HeadingRoot>;
+};
+export { HeadingRoot } from "./heading";
+export type { HeadingRootProps, HeadingRootProps as HeadingProps, } from "./heading";
+export { headingVariants } from "@arobo/styles";
+export type { HeadingVariants } from "@arobo/styles";

package/dist/components/heading/index.js

@@ -0,0 +1,11 @@
+import { HeadingRoot } from './heading.js';
+export { headingVariants } from '../../packages/styles/src/components/heading/heading.styles.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Heading = Object.assign(HeadingRoot, {
+  Root: HeadingRoot
+});
+
+export { Heading, HeadingRoot };