@arobo/react 1.0.1 → 1.1.0

package/dist/components/alert-dialog/alert-dialog.js

@@ -0,0 +1,303 @@
+import { useMemo, createContext, useContext } from 'react';
+import { DialogTrigger, Heading, Dialog, Modal, ModalOverlay, Pressable } from 'react-aria-components';
+import { composeTwRenderProps, composeSlotClassName } from '../../utils/compose.js';
+import { CloseButton } from '../close-button/index.js';
+import { DangerIcon, WarningIcon, SuccessIcon, InfoIcon } from '../icons.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { alertDialogVariants } from '../../packages/styles/src/components/alert-dialog/alert-dialog.styles.js';
+
+const AlertDialogContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * AlertDialog Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const AlertDialogRoot = ({
+  children,
+  ...props
+}) => {
+  const alertDialogContext = useMemo(() => ({
+    slots: alertDialogVariants(),
+    placement: undefined
+  }), []);
+  return /*#__PURE__*/jsx(AlertDialogContext, {
+    value: alertDialogContext,
+    children: /*#__PURE__*/jsx(DialogTrigger, {
+      "data-slot": "alert-dialog-root",
+      ...props,
+      children: children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * AlertDialog Trigger
+ * -----------------------------------------------------------------------------------------------*/
+
+const AlertDialogTrigger = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(AlertDialogContext);
+  return /*#__PURE__*/jsx(Pressable, {
+    children: /*#__PURE__*/jsx("div", {
+      className: composeSlotClassName(slots?.trigger, className),
+      "data-slot": "alert-dialog-trigger",
+      role: "button",
+      ...props,
+      children: children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * AlertDialog Backdrop
+ * -----------------------------------------------------------------------------------------------*/
+
+const AlertDialogBackdrop = ({
+  children,
+  className,
+  isDismissable = false,
+  isKeyboardDismissDisabled = true,
+  variant,
+  ...props
+}) => {
+  const {
+    slots: contextSlots
+  } = useContext(AlertDialogContext);
+  const updatedSlots = useMemo(() => alertDialogVariants({
+    variant
+  }), [variant]);
+  const updatedModalContext = useMemo(() => ({
+    slots: {
+      ...contextSlots,
+      ...updatedSlots
+    }
+  }), [contextSlots, updatedSlots]);
+  return /*#__PURE__*/jsx(ModalOverlay, {
+    className: composeTwRenderProps(className, updatedSlots?.backdrop()),
+    "data-slot": "alert-dialog-backdrop",
+    isDismissable: isDismissable,
+    isKeyboardDismissDisabled: isKeyboardDismissDisabled,
+    ...props,
+    children: renderProps => /*#__PURE__*/jsxs(AlertDialogContext, {
+      value: updatedModalContext,
+      children: [typeof children === "function" ? children(renderProps) : children, " "]
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * AlertDialog Container
+ * -----------------------------------------------------------------------------------------------*/
+
+const AlertDialogContainer = ({
+  children,
+  className,
+  placement = "auto",
+  size,
+  ...props
+}) => {
+  const {
+    slots: contextSlots
+  } = useContext(AlertDialogContext);
+  const updatedSlots = useMemo(() => alertDialogVariants({
+    size
+  }), [size]);
+  const updatedContext = useMemo(() => ({
+    placement,
+    slots: {
+      ...contextSlots,
+      ...updatedSlots
+    }
+  }), [placement, contextSlots, updatedSlots]);
+  return /*#__PURE__*/jsx(Modal, {
+    className: composeTwRenderProps(className, updatedSlots?.container()),
+    "data-placement": placement,
+    "data-slot": "alert-dialog-container",
+    ...props,
+    children: renderProps => /*#__PURE__*/jsx(AlertDialogContext, {
+      value: updatedContext,
+      children: typeof children === "function" ? children(renderProps) : children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * AlertDialog Dialog
+ * -----------------------------------------------------------------------------------------------*/
+
+const AlertDialogDialog = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    placement,
+    slots
+  } = useContext(AlertDialogContext);
+  return /*#__PURE__*/jsx(Dialog, {
+    className: composeSlotClassName(slots?.dialog, className),
+    "data-placement": placement,
+    "data-slot": "alert-dialog-dialog",
+    role: "alertdialog",
+    ...props,
+    children: children
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * AlertDialog Header
+ * -----------------------------------------------------------------------------------------------*/
+
+const AlertDialogHeader = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(AlertDialogContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.header, className),
+    "data-slot": "alert-dialog-header",
+    ...props,
+    children: children
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * AlertDialog Heading
+ * -----------------------------------------------------------------------------------------------*/
+
+const AlertDialogHeading = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(AlertDialogContext);
+  return /*#__PURE__*/jsx(Heading, {
+    className: composeSlotClassName(slots?.heading, className),
+    "data-slot": "alert-dialog-heading",
+    slot: "title",
+    ...props,
+    children: children
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * AlertDialog Body
+ * -----------------------------------------------------------------------------------------------*/
+
+const AlertDialogBody = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(AlertDialogContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.body, className),
+    "data-slot": "alert-dialog-body",
+    ...props,
+    children: children
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * AlertDialog Footer
+ * -----------------------------------------------------------------------------------------------*/
+
+const AlertDialogFooter = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(AlertDialogContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.footer, className),
+    "data-slot": "alert-dialog-footer",
+    ...props,
+    children: children
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * AlertDialog Icon
+ * -----------------------------------------------------------------------------------------------*/
+
+const AlertDialogIcon = ({
+  children,
+  className,
+  status = "danger",
+  ...props
+}) => {
+  const slots = useMemo(() => alertDialogVariants({
+    status
+  }), [status]);
+  const getDefaultIcon = () => {
+    switch (status) {
+      case "default":
+        return /*#__PURE__*/jsx(InfoIcon, {
+          "data-slot": "alert-dialog-default-icon"
+        });
+      case "accent":
+        return /*#__PURE__*/jsx(InfoIcon, {
+          "data-slot": "alert-dialog-default-icon"
+        });
+      case "success":
+        return /*#__PURE__*/jsx(SuccessIcon, {
+          "data-slot": "alert-dialog-default-icon"
+        });
+      case "warning":
+        return /*#__PURE__*/jsx(WarningIcon, {
+          "data-slot": "alert-dialog-default-icon"
+        });
+      case "danger":
+        return /*#__PURE__*/jsx(DangerIcon, {
+          "data-slot": "alert-dialog-default-icon"
+        });
+      default:
+        return /*#__PURE__*/jsx(DangerIcon, {
+          "data-slot": "alert-dialog-default-icon"
+        });
+    }
+  };
+  return /*#__PURE__*/jsx("div", {
+    className: slots?.icon({
+      className
+    }),
+    "data-slot": "alert-dialog-icon",
+    ...props,
+    children: children ?? getDefaultIcon()
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * AlertDialog Close Trigger
+ * -----------------------------------------------------------------------------------------------*/
+
+const AlertDialogCloseTrigger = ({
+  className,
+  ...rest
+}) => {
+  const {
+    slots
+  } = useContext(AlertDialogContext);
+  return /*#__PURE__*/jsx(CloseButton, {
+    className: composeTwRenderProps(className, slots?.closeTrigger()),
+    "data-slot": "alert-dialog-close-trigger",
+    slot: "close",
+    ...rest
+  });
+};
+
+export { AlertDialogBackdrop, AlertDialogBody, AlertDialogCloseTrigger, AlertDialogContainer, AlertDialogDialog, AlertDialogFooter, AlertDialogHeader, AlertDialogHeading, AlertDialogIcon, AlertDialogRoot, AlertDialogTrigger };

package/dist/components/alert-dialog/index.d.ts

@@ -0,0 +1,31 @@
+import type { ComponentProps } from "react";
+import { AlertDialogBackdrop, AlertDialogBody, AlertDialogCloseTrigger, AlertDialogContainer, AlertDialogDialog, AlertDialogFooter, AlertDialogHeader, AlertDialogHeading, AlertDialogIcon, AlertDialogRoot, AlertDialogTrigger } from "./alert-dialog";
+export declare const AlertDialog: (({ children, ...props }: import("./alert-dialog").AlertDialogRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, ...props }: import("./alert-dialog").AlertDialogRootProps) => import("react/jsx-runtime").JSX.Element;
+    Trigger: ({ children, className, ...props }: import("./alert-dialog").AlertDialogTriggerProps) => import("react/jsx-runtime").JSX.Element;
+    Backdrop: ({ children, className, isDismissable, isKeyboardDismissDisabled, variant, ...props }: import("./alert-dialog").AlertDialogBackdropProps) => import("react/jsx-runtime").JSX.Element;
+    Container: ({ children, className, placement, size, ...props }: import("./alert-dialog").AlertDialogContainerProps) => import("react/jsx-runtime").JSX.Element;
+    Dialog: ({ children, className, ...props }: import("./alert-dialog").AlertDialogDialogProps) => import("react/jsx-runtime").JSX.Element;
+    Header: ({ children, className, ...props }: import("./alert-dialog").AlertDialogHeaderProps) => import("react/jsx-runtime").JSX.Element;
+    Heading: ({ children, className, ...props }: import("./alert-dialog").AlertDialogHeadingProps) => import("react/jsx-runtime").JSX.Element;
+    Body: ({ children, className, ...props }: import("./alert-dialog").AlertDialogBodyProps) => import("react/jsx-runtime").JSX.Element;
+    Footer: ({ children, className, ...props }: import("./alert-dialog").AlertDialogFooterProps) => import("react/jsx-runtime").JSX.Element;
+    Icon: ({ children, className, status, ...props }: import("./alert-dialog").AlertDialogIconProps) => import("react/jsx-runtime").JSX.Element;
+    CloseTrigger: ({ className, ...rest }: import("./alert-dialog").AlertDialogCloseTriggerProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type AlertDialog = {
+    Props: ComponentProps<typeof AlertDialogRoot>;
+    RootProps: ComponentProps<typeof AlertDialogRoot>;
+    TriggerProps: ComponentProps<typeof AlertDialogTrigger>;
+    BackdropProps: ComponentProps<typeof AlertDialogBackdrop>;
+    ContainerProps: ComponentProps<typeof AlertDialogContainer>;
+    DialogProps: ComponentProps<typeof AlertDialogDialog>;
+    HeaderProps: ComponentProps<typeof AlertDialogHeader>;
+    HeadingProps: ComponentProps<typeof AlertDialogHeading>;
+    BodyProps: ComponentProps<typeof AlertDialogBody>;
+    FooterProps: ComponentProps<typeof AlertDialogFooter>;
+    IconProps: ComponentProps<typeof AlertDialogIcon>;
+    CloseTriggerProps: ComponentProps<typeof AlertDialogCloseTrigger>;
+};
+export { AlertDialogRoot, AlertDialogTrigger, AlertDialogBackdrop, AlertDialogContainer, AlertDialogDialog, AlertDialogHeader, AlertDialogHeading, AlertDialogBody, AlertDialogFooter, AlertDialogIcon, AlertDialogCloseTrigger, };
+export type { AlertDialogRootProps, AlertDialogRootProps as AlertDialogProps, AlertDialogTriggerProps, AlertDialogBackdropProps, AlertDialogContainerProps, AlertDialogDialogProps, AlertDialogHeaderProps, AlertDialogHeadingProps, AlertDialogBodyProps, AlertDialogFooterProps, AlertDialogIconProps, AlertDialogCloseTriggerProps, } from "./alert-dialog";

package/dist/components/alert-dialog/index.js

@@ -0,0 +1,20 @@
+import { AlertDialogRoot, AlertDialogCloseTrigger, AlertDialogIcon, AlertDialogFooter, AlertDialogBody, AlertDialogHeading, AlertDialogHeader, AlertDialogDialog, AlertDialogContainer, AlertDialogBackdrop, AlertDialogTrigger } from './alert-dialog.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const AlertDialog = Object.assign(AlertDialogRoot, {
+  Root: AlertDialogRoot,
+  Trigger: AlertDialogTrigger,
+  Backdrop: AlertDialogBackdrop,
+  Container: AlertDialogContainer,
+  Dialog: AlertDialogDialog,
+  Header: AlertDialogHeader,
+  Heading: AlertDialogHeading,
+  Body: AlertDialogBody,
+  Footer: AlertDialogFooter,
+  Icon: AlertDialogIcon,
+  CloseTrigger: AlertDialogCloseTrigger
+});
+
+export { AlertDialog, AlertDialogBackdrop, AlertDialogBody, AlertDialogCloseTrigger, AlertDialogContainer, AlertDialogDialog, AlertDialogFooter, AlertDialogHeader, AlertDialogHeading, AlertDialogIcon, AlertDialogRoot, AlertDialogTrigger };

package/dist/components/avatar/avatar.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentPropsWithRef } from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import type { AvatarVariants } from "@arobo/styles";
+interface AvatarRootProps extends Omit<ComponentPropsWithRef<typeof AvatarPrimitive.Root>, "color">, AvatarVariants {
+}
+declare const AvatarRoot: ({ children, className, color, size, variant, ...props }: AvatarRootProps) => import("react/jsx-runtime").JSX.Element;
+interface AvatarImageProps extends ComponentPropsWithRef<typeof AvatarPrimitive.Image> {
+}
+declare const AvatarImage: ({ className, crossOrigin, loading, onError, onLoad, sizes, src, srcSet, ...props }: AvatarImageProps) => import("react/jsx-runtime").JSX.Element;
+interface AvatarFallbackProps extends ComponentPropsWithRef<typeof AvatarPrimitive.Fallback> {
+    color?: AvatarVariants["color"];
+}
+declare const AvatarFallback: ({ className, color, ...props }: AvatarFallbackProps) => import("react/jsx-runtime").JSX.Element;
+export { AvatarRoot, AvatarImage, AvatarFallback };
+export type { AvatarRootProps, AvatarImageProps, AvatarFallbackProps };

package/dist/components/avatar/avatar.js

@@ -0,0 +1,92 @@
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import React__default, { createContext } from 'react';
+import { composeSlotClassName } from '../../utils/compose.js';
+import { jsx } from 'react/jsx-runtime';
+import { avatarVariants } from '../../packages/styles/src/components/avatar/avatar.styles.js';
+
+const AvatarContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * Avatar Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const AvatarRoot = ({
+  children,
+  className,
+  color,
+  size,
+  variant,
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => avatarVariants({
+    color,
+    size,
+    variant
+  }), [color, size, variant]);
+  return /*#__PURE__*/jsx(AvatarContext, {
+    value: {
+      slots
+    },
+    children: /*#__PURE__*/jsx(AvatarPrimitive.Root, {
+      className: slots.base({
+        className
+      }),
+      ...props,
+      children: children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Avatar Image
+ * -----------------------------------------------------------------------------------------------*/
+
+const AvatarImage = ({
+  className,
+  crossOrigin,
+  loading,
+  onError,
+  onLoad,
+  sizes,
+  src,
+  srcSet,
+  ...props
+}) => {
+  const {
+    slots
+  } = React__default.useContext(AvatarContext);
+  return /*#__PURE__*/jsx(AvatarPrimitive.Image, {
+    className: composeSlotClassName(slots?.image, className),
+    crossOrigin: crossOrigin,
+    loading: loading,
+    sizes: sizes,
+    src: src,
+    srcSet: srcSet,
+    onError: onError,
+    onLoad: onLoad,
+    ...props
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Avatar Fallback
+ * -----------------------------------------------------------------------------------------------*/
+
+const AvatarFallback = ({
+  className,
+  color,
+  ...props
+}) => {
+  const {
+    slots
+  } = React__default.useContext(AvatarContext);
+  return /*#__PURE__*/jsx(AvatarPrimitive.Fallback, {
+    className: composeSlotClassName(slots?.fallback, className, {
+      color
+    }),
+    "data-slot": "avatar-fallback",
+    ...props
+  });
+};
+
+export { AvatarFallback, AvatarImage, AvatarRoot };

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

@@ -0,0 +1,15 @@
+import type { ComponentProps } from "react";
+import { AvatarFallback, AvatarImage, AvatarRoot } from "./avatar";
+export declare const Avatar: (({ children, className, color, size, variant, ...props }: import("./avatar").AvatarRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, className, color, size, variant, ...props }: import("./avatar").AvatarRootProps) => import("react/jsx-runtime").JSX.Element;
+    Image: ({ className, crossOrigin, loading, onError, onLoad, sizes, src, srcSet, ...props }: import("./avatar").AvatarImageProps) => import("react/jsx-runtime").JSX.Element;
+    Fallback: ({ className, color, ...props }: import("./avatar").AvatarFallbackProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type Avatar = {
+    Props: ComponentProps<typeof AvatarRoot>;
+    RootProps: ComponentProps<typeof AvatarRoot>;
+    ImageProps: ComponentProps<typeof AvatarImage>;
+    FallbackProps: ComponentProps<typeof AvatarFallback>;
+};
+export { AvatarRoot, AvatarImage, AvatarFallback };
+export type { AvatarRootProps, AvatarRootProps as AvatarProps, AvatarImageProps, AvatarFallbackProps, } from "./avatar";

package/dist/components/avatar/index.js

@@ -0,0 +1,12 @@
+import { AvatarRoot, AvatarFallback, AvatarImage } from './avatar.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Avatar = Object.assign(AvatarRoot, {
+  Root: AvatarRoot,
+  Image: AvatarImage,
+  Fallback: AvatarFallback
+});
+
+export { Avatar, AvatarFallback, AvatarImage, AvatarRoot };

package/dist/components/breadcrumbs/breadcrumbs.d.ts

@@ -0,0 +1,14 @@
+import type { LinkProps } from "../link";
+import type { ComponentPropsWithRef } from "react";
+import React from "react";
+import { Breadcrumb as BreadcrumbPrimitive, Breadcrumbs as BreadcrumbsPrimitive } from "react-aria-components";
+import type { BreadcrumbsVariants } from "@arobo/styles";
+interface BreadcrumbsRootProps extends ComponentPropsWithRef<typeof BreadcrumbsPrimitive>, BreadcrumbsVariants {
+    separator?: React.ReactNode;
+}
+declare const BreadcrumbsRoot: ({ children, className, separator, ...props }: BreadcrumbsRootProps) => import("react/jsx-runtime").JSX.Element;
+interface BreadcrumbsItemProps extends ComponentPropsWithRef<typeof BreadcrumbPrimitive> {
+}
+declare const BreadcrumbsItem: ({ children, className, ...props }: BreadcrumbsItemProps & Omit<LinkProps, "className">) => import("react/jsx-runtime").JSX.Element;
+export { BreadcrumbsRoot, BreadcrumbsItem };
+export type { BreadcrumbsRootProps, BreadcrumbsItemProps };

package/dist/components/breadcrumbs/breadcrumbs.js

@@ -0,0 +1,82 @@
+import React__default, { createContext, useContext } from 'react';
+import { Breadcrumbs, Breadcrumb } from 'react-aria-components';
+import { composeSlotClassName, composeTwRenderProps } from '../../utils/compose.js';
+import { IconChevronRight } from '../icons.js';
+import { Link } from '../link/index.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { breadcrumbsVariants } from '../../packages/styles/src/components/breadcrumbs/breadcrumbs.styles.js';
+
+const BreadcrumbsContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * Breadcrumbs Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const BreadcrumbsRoot = ({
+  children,
+  className,
+  separator,
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => breadcrumbsVariants({}), []);
+  return /*#__PURE__*/jsx(BreadcrumbsContext.Provider, {
+    value: {
+      slots,
+      separator
+    },
+    children: /*#__PURE__*/jsx(Breadcrumbs, {
+      "data-slot": "breadcrumbs",
+      ...props,
+      className: composeSlotClassName(slots.base, className),
+      children: children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Breadcrumbs Item
+ * -----------------------------------------------------------------------------------------------*/
+
+const BreadcrumbsItem = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    separator,
+    slots
+  } = useContext(BreadcrumbsContext);
+  const renderSeparator = () => {
+    if (!separator) return /*#__PURE__*/jsx(IconChevronRight, {
+      className: slots?.separator(),
+      "data-slot": "breadcrumbs-separator"
+    });
+    if (/*#__PURE__*/React__default.isValidElement(separator)) {
+      return /*#__PURE__*/React__default.cloneElement(separator, {
+        className: slots?.separator(),
+        "data-slot": "breadcrumbs-separator"
+      });
+    }
+    return separator;
+  };
+  return /*#__PURE__*/jsx(Breadcrumb, {
+    className: composeTwRenderProps(className, slots?.item()),
+    "data-slot": "breadcrumbs-item",
+    ...props,
+    children: ({
+      isCurrent
+    }) => {
+      if (typeof children === "function") {
+        return children({});
+      }
+      return /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx(Link, {
+          className: slots?.link(),
+          children: children
+        }), !isCurrent && renderSeparator()]
+      });
+    }
+  });
+};
+
+export { BreadcrumbsItem, BreadcrumbsRoot };

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

@@ -0,0 +1,13 @@
+import type { ComponentProps } from "react";
+import { BreadcrumbsItem, BreadcrumbsRoot } from "./breadcrumbs";
+export declare const Breadcrumbs: (({ children, className, separator, ...props }: import("./breadcrumbs").BreadcrumbsRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, className, separator, ...props }: import("./breadcrumbs").BreadcrumbsRootProps) => import("react/jsx-runtime").JSX.Element;
+    Item: ({ children, className, ...props }: import("./breadcrumbs").BreadcrumbsItemProps & Omit<import("../link").LinkRootProps, "className">) => import("react/jsx-runtime").JSX.Element;
+};
+export type Breadcrumbs = {
+    Props: ComponentProps<typeof BreadcrumbsRoot>;
+    RootProps: ComponentProps<typeof BreadcrumbsRoot>;
+    ItemProps: ComponentProps<typeof BreadcrumbsItem>;
+};
+export { BreadcrumbsRoot, BreadcrumbsItem };
+export type { BreadcrumbsRootProps, BreadcrumbsRootProps as BreadcrumbsProps, BreadcrumbsItemProps, } from "./breadcrumbs";

package/dist/components/breadcrumbs/index.js

@@ -0,0 +1,11 @@
+import { BreadcrumbsRoot, BreadcrumbsItem } from './breadcrumbs.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Breadcrumbs = Object.assign(BreadcrumbsRoot, {
+  Root: BreadcrumbsRoot,
+  Item: BreadcrumbsItem
+});
+
+export { Breadcrumbs, BreadcrumbsItem, BreadcrumbsRoot };

package/dist/components/button/button.js

@@ -2,7 +2,7 @@ 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 { buttonVariants } from '../../packages/styles/src/components/button/button.styles.js';
 import { composeTwRenderProps } from '../../utils/compose.js';
 
 const ButtonRoot = ({

package/dist/components/button/index.js

@@ -1,6 +1,6 @@
 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';
+export { buttonVariants } from '../../packages/styles/src/components/button/button.styles.js';
 
 /* -------------------------------------------------------------------------------------------------
  * Compound Component

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

@@ -1,6 +1,6 @@
-import React, { Children, isValidElement, createContext } from 'react';
+import React__default, { Children, isValidElement, createContext } from 'react';
 import { jsx } from 'react/jsx-runtime';
-import { buttonGroupVariants } from '../../styles/src/components/button-group/button-group.styles.js';
+import { buttonGroupVariants } from '../../packages/styles/src/components/button-group/button-group.styles.js';
 
 const ButtonGroupContext = /*#__PURE__*/createContext({});
 
@@ -25,7 +25,7 @@ const ButtonGroupRoot = ({
     if (! /*#__PURE__*/isValidElement(child)) {
       return child;
     }
-    return /*#__PURE__*/React.cloneElement(child, {
+    return /*#__PURE__*/React__default.cloneElement(child, {
       [BUTTON_GROUP_CHILD]: true
     });
   });

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

@@ -1,6 +1,6 @@
 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';
+export { buttonGroupVariants } from '../../packages/styles/src/components/button-group/button-group.styles.js';
 
 const ButtonGroup = Object.assign(ButtonGroupRoot, {
   Root: ButtonGroupRoot