@arobo/react 1.0.1 → 1.1.1

package/dist/components/accordion/accordion.d.ts

@@ -0,0 +1,30 @@
+import type { ComponentPropsWithRef } from "react";
+import { Button, Disclosure, DisclosureGroup, Heading as DisclosureHeading, DisclosurePanel } from "react-aria-components";
+import type { AccordionVariants } from "@arobo/styles";
+interface AccordionRootProps extends ComponentPropsWithRef<typeof DisclosureGroup>, AccordionVariants {
+    hideSeparator?: boolean;
+}
+declare const AccordionRoot: ({ children, className, hideSeparator, variant, ...props }: AccordionRootProps) => import("react/jsx-runtime").JSX.Element;
+interface AccordionItemProps extends ComponentPropsWithRef<typeof Disclosure> {
+}
+declare const AccordionItem: ({ className, ...props }: AccordionItemProps) => import("react/jsx-runtime").JSX.Element;
+interface AccordionIndicatorProps extends ComponentPropsWithRef<"svg"> {
+    className?: string;
+}
+declare const AccordionIndicator: ({ children, className, ...props }: AccordionIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+interface AccordionHeadingProps extends ComponentPropsWithRef<typeof DisclosureHeading> {
+    className?: string;
+}
+declare const AccordionHeading: ({ className, ...props }: AccordionHeadingProps) => import("react/jsx-runtime").JSX.Element;
+interface AccordionTriggerProps extends ComponentPropsWithRef<typeof Button> {
+}
+declare const AccordionTrigger: ({ className, ...props }: AccordionTriggerProps) => import("react/jsx-runtime").JSX.Element;
+interface AccordionBodyProps extends ComponentPropsWithRef<"div"> {
+    className?: string;
+}
+declare const AccordionBody: ({ children, className, ...props }: AccordionBodyProps) => import("react/jsx-runtime").JSX.Element;
+interface AccordionPanelProps extends ComponentPropsWithRef<typeof DisclosurePanel> {
+}
+declare const AccordionPanel: ({ children, className, ...props }: AccordionPanelProps) => import("react/jsx-runtime").JSX.Element;
+export { AccordionRoot, AccordionItem, AccordionTrigger, AccordionPanel, AccordionIndicator, AccordionBody, AccordionHeading, };
+export type { AccordionRootProps, AccordionItemProps, AccordionTriggerProps, AccordionPanelProps, AccordionIndicatorProps, AccordionBodyProps, AccordionHeadingProps, };

package/dist/components/accordion/accordion.js

@@ -0,0 +1,190 @@
+import React__default, { createContext, useContext } from 'react';
+import { DisclosureGroup, DisclosureStateContext, DisclosurePanel, Button, Heading, Disclosure } from 'react-aria-components';
+import { composeTwRenderProps, composeSlotClassName } from '../../utils/compose.js';
+import { IconChevronDown } from '../icons.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { accordionVariants } from '../../packages/styles/src/components/accordion/accordion.styles.js';
+import { SurfaceContext } from '../surface/surface.js';
+import { dataAttr } from '../../utils/assertion.js';
+
+const AccordionContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * Accordion Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const AccordionRoot = ({
+  children,
+  className,
+  hideSeparator = false,
+  variant,
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => accordionVariants({
+    variant
+  }), [variant]);
+  const content = /*#__PURE__*/jsx(DisclosureGroup, {
+    className: composeTwRenderProps(className, slots.base()),
+    "data-slot": "accordion",
+    ...props,
+    children: values => /*#__PURE__*/jsx(Fragment, {
+      children: typeof children === "function" ? children(values) : children
+    })
+  });
+  return /*#__PURE__*/jsx(AccordionContext, {
+    value: {
+      slots,
+      hideSeparator
+    },
+    children: variant === "surface" ?
+    /*#__PURE__*/
+    // Allows inner components to apply "on-surface" colors for proper contrast
+    jsx(SurfaceContext, {
+      value: {
+        variant: "default"
+      },
+      children: content
+    }) : content
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * AccordionItem
+ * -----------------------------------------------------------------------------------------------*/
+
+const AccordionItem = ({
+  className,
+  ...props
+}) => {
+  const {
+    hideSeparator,
+    slots
+  } = useContext(AccordionContext);
+  return /*#__PURE__*/jsx(Disclosure, {
+    className: composeTwRenderProps(className, slots?.item()),
+    "data-hide-separator": hideSeparator ? "true" : undefined,
+    "data-slot": "accordion-item",
+    ...props,
+    children: props.children
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * AccordionIndicator
+ * -----------------------------------------------------------------------------------------------*/
+
+const AccordionIndicator = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(AccordionContext);
+  const {
+    isExpanded
+  } = useContext(DisclosureStateContext);
+  if (children && /*#__PURE__*/React__default.isValidElement(children)) {
+    return /*#__PURE__*/React__default.cloneElement(children, {
+      ...props,
+      "data-expanded": dataAttr(isExpanded),
+      className: composeSlotClassName(slots?.indicator, className),
+      "data-slot": "accordion-indicator"
+    });
+  }
+  return /*#__PURE__*/jsx(IconChevronDown, {
+    className: composeSlotClassName(slots?.indicator, className),
+    "data-expanded": dataAttr(isExpanded),
+    "data-slot": "accordion-indicator",
+    ...props
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * AccordionHeading
+ * -----------------------------------------------------------------------------------------------*/
+
+const AccordionHeading = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(AccordionContext);
+  return /*#__PURE__*/jsx(Heading, {
+    className: composeSlotClassName(slots?.heading, className),
+    "data-slot": "accordion-heading",
+    ...props
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * AccordionTrigger
+ * -----------------------------------------------------------------------------------------------*/
+
+const AccordionTrigger = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(AccordionContext);
+  return /*#__PURE__*/jsx(Button, {
+    className: composeTwRenderProps(className, slots?.trigger()),
+    "data-slot": "accordion-trigger",
+    slot: "trigger",
+    ...props,
+    children: values => /*#__PURE__*/jsx(Fragment, {
+      children: typeof props.children === "function" ? props.children(values) : props.children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * AccordionBody
+ * -----------------------------------------------------------------------------------------------*/
+
+const AccordionBody = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(AccordionContext);
+  return /*#__PURE__*/jsx("div", {
+    className: slots?.body({}),
+    "data-slot": "accordion-body",
+    ...props,
+    children: /*#__PURE__*/jsx("div", {
+      className: composeSlotClassName(slots?.bodyInner, className),
+      children: children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * AccordionPanel
+ * -----------------------------------------------------------------------------------------------*/
+
+const AccordionPanel = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(AccordionContext);
+  const {
+    isExpanded
+  } = useContext(DisclosureStateContext);
+  return /*#__PURE__*/jsx(DisclosurePanel, {
+    className: composeTwRenderProps(className, slots?.panel()),
+    "data-expanded": dataAttr(isExpanded),
+    "data-slot": "accordion-panel",
+    ...props,
+    children: children
+  });
+};
+
+export { AccordionBody, AccordionHeading, AccordionIndicator, AccordionItem, AccordionPanel, AccordionRoot, AccordionTrigger };

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

@@ -0,0 +1,23 @@
+import type { ComponentProps } from "react";
+import { AccordionBody, AccordionHeading, AccordionIndicator, AccordionItem, AccordionPanel, AccordionRoot, AccordionTrigger } from "./accordion";
+export declare const Accordion: (({ children, className, hideSeparator, variant, ...props }: import("./accordion").AccordionRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, className, hideSeparator, variant, ...props }: import("./accordion").AccordionRootProps) => import("react/jsx-runtime").JSX.Element;
+    Item: ({ className, ...props }: import("./accordion").AccordionItemProps) => import("react/jsx-runtime").JSX.Element;
+    Heading: ({ className, ...props }: import("./accordion").AccordionHeadingProps) => import("react/jsx-runtime").JSX.Element;
+    Trigger: ({ className, ...props }: import("./accordion").AccordionTriggerProps) => import("react/jsx-runtime").JSX.Element;
+    Panel: ({ children, className, ...props }: import("./accordion").AccordionPanelProps) => import("react/jsx-runtime").JSX.Element;
+    Indicator: ({ children, className, ...props }: import("./accordion").AccordionIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+    Body: ({ children, className, ...props }: import("./accordion").AccordionBodyProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type Accordion = {
+    Props: ComponentProps<typeof AccordionRoot>;
+    RootProps: ComponentProps<typeof AccordionRoot>;
+    ItemProps: ComponentProps<typeof AccordionItem>;
+    HeadingProps: ComponentProps<typeof AccordionHeading>;
+    TriggerProps: ComponentProps<typeof AccordionTrigger>;
+    PanelProps: ComponentProps<typeof AccordionPanel>;
+    IndicatorProps: ComponentProps<typeof AccordionIndicator>;
+    BodyProps: ComponentProps<typeof AccordionBody>;
+};
+export { AccordionRoot, AccordionItem, AccordionHeading, AccordionTrigger, AccordionPanel, AccordionIndicator, AccordionBody, };
+export type { AccordionRootProps, AccordionRootProps as AccordionProps, AccordionItemProps, AccordionHeadingProps, AccordionTriggerProps, AccordionPanelProps, AccordionIndicatorProps, AccordionBodyProps, } from "./accordion";

package/dist/components/accordion/index.js

@@ -0,0 +1,16 @@
+import { AccordionRoot, AccordionBody, AccordionIndicator, AccordionPanel, AccordionTrigger, AccordionHeading, AccordionItem } from './accordion.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Accordion = Object.assign(AccordionRoot, {
+  Root: AccordionRoot,
+  Item: AccordionItem,
+  Heading: AccordionHeading,
+  Trigger: AccordionTrigger,
+  Panel: AccordionPanel,
+  Indicator: AccordionIndicator,
+  Body: AccordionBody
+});
+
+export { Accordion, AccordionBody, AccordionHeading, AccordionIndicator, AccordionItem, AccordionPanel, AccordionRoot, AccordionTrigger };

package/dist/components/alert/alert.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentPropsWithRef } from "react";
+import type { AlertVariants } from "@arobo/styles";
+interface AlertRootProps extends ComponentPropsWithRef<"div">, AlertVariants {
+}
+declare const AlertRoot: ({ children, className, status, ...rest }: AlertRootProps) => import("react/jsx-runtime").JSX.Element;
+type AlertIndicatorProps = ComponentPropsWithRef<"div">;
+declare const AlertIndicator: ({ children, className, ...rest }: AlertIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+type AlertContentProps = ComponentPropsWithRef<"div">;
+declare const AlertContent: ({ children, className, ...rest }: AlertContentProps) => import("react/jsx-runtime").JSX.Element;
+type AlertTitleProps = ComponentPropsWithRef<"p">;
+declare const AlertTitle: ({ children, className, ...rest }: AlertTitleProps) => import("react/jsx-runtime").JSX.Element;
+type AlertDescriptionProps = ComponentPropsWithRef<"span">;
+declare const AlertDescription: ({ children, className, ...rest }: AlertDescriptionProps) => import("react/jsx-runtime").JSX.Element;
+export { AlertRoot, AlertIndicator, AlertContent, AlertTitle, AlertDescription };
+export type { AlertRootProps, AlertIndicatorProps, AlertContentProps, AlertTitleProps, AlertDescriptionProps, };

package/dist/components/alert/alert.js

@@ -0,0 +1,151 @@
+import React__default, { createContext, useContext } from 'react';
+import { composeSlotClassName } from '../../utils/compose.js';
+import { InfoIcon, DangerIcon, WarningIcon, SuccessIcon } from '../icons.js';
+import { jsx } from 'react/jsx-runtime';
+import { alertVariants } from '../../packages/styles/src/components/alert/alert.styles.js';
+import { SurfaceContext } from '../surface/surface.js';
+
+const AlertContext = /*#__PURE__*/createContext({});
+
+/* ------------------------------------------------------------------------------------------------
+ * Alert Root
+ * --------------------------------------------------------------------------------------------- */
+
+const AlertRoot = ({
+  children,
+  className,
+  status,
+  ...rest
+}) => {
+  const slots = React__default.useMemo(() => alertVariants({
+    status
+  }), [status]);
+  return /*#__PURE__*/jsx(AlertContext, {
+    value: {
+      slots,
+      status
+    },
+    children: /*#__PURE__*/jsx(SurfaceContext, {
+      value: {
+        variant: "default"
+      },
+      children: /*#__PURE__*/jsx("div", {
+        className: slots?.base({
+          className
+        }),
+        "data-slot": "alert-root",
+        ...rest,
+        children: children
+      })
+    })
+  });
+};
+
+/* ------------------------------------------------------------------------------------------------
+ * Alert Indicator
+ * --------------------------------------------------------------------------------------------- */
+
+const AlertIndicator = ({
+  children,
+  className,
+  ...rest
+}) => {
+  const {
+    slots,
+    status
+  } = useContext(AlertContext);
+
+  // Map status to default icons
+  const getDefaultIcon = () => {
+    switch (status) {
+      case "accent":
+        return /*#__PURE__*/jsx(InfoIcon, {
+          "data-slot": "alert-default-icon"
+        });
+      case "success":
+        return /*#__PURE__*/jsx(SuccessIcon, {
+          "data-slot": "alert-default-icon"
+        });
+      case "warning":
+        return /*#__PURE__*/jsx(WarningIcon, {
+          "data-slot": "alert-default-icon"
+        });
+      case "danger":
+        return /*#__PURE__*/jsx(DangerIcon, {
+          "data-slot": "alert-default-icon"
+        });
+      default:
+        return /*#__PURE__*/jsx(InfoIcon, {
+          "data-slot": "alert-default-icon"
+        });
+    }
+  };
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.indicator, className),
+    "data-slot": "alert-indicator",
+    ...rest,
+    children: children ?? getDefaultIcon()
+  });
+};
+
+/* ------------------------------------------------------------------------------------------------
+ * Alert Content
+ * --------------------------------------------------------------------------------------------- */
+
+const AlertContent = ({
+  children,
+  className,
+  ...rest
+}) => {
+  const {
+    slots
+  } = useContext(AlertContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.content, className),
+    "data-slot": "alert-content",
+    ...rest,
+    children: children
+  });
+};
+
+/* ------------------------------------------------------------------------------------------------
+ * Alert Title
+ * --------------------------------------------------------------------------------------------- */
+
+const AlertTitle = ({
+  children,
+  className,
+  ...rest
+}) => {
+  const {
+    slots
+  } = useContext(AlertContext);
+  return /*#__PURE__*/jsx("p", {
+    className: composeSlotClassName(slots?.title, className),
+    "data-slot": "alert-title",
+    ...rest,
+    children: children
+  });
+};
+
+/* ------------------------------------------------------------------------------------------------
+ * Alert Description
+ * --------------------------------------------------------------------------------------------- */
+
+const AlertDescription = ({
+  children,
+  className,
+  ...rest
+}) => {
+  const {
+    slots
+  } = useContext(AlertContext);
+  return /*#__PURE__*/jsx("span", {
+    className: composeSlotClassName(slots?.description, className),
+    "data-slot": "alert-description",
+    ...rest,
+    children: children
+  });
+};
+
+export { AlertContent, AlertDescription, AlertIndicator, AlertRoot, AlertTitle };

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

@@ -0,0 +1,19 @@
+import type { ComponentProps } from "react";
+import { AlertContent, AlertDescription, AlertIndicator, AlertRoot, AlertTitle } from "./alert";
+export declare const Alert: (({ children, className, status, ...rest }: import("./alert").AlertRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, className, status, ...rest }: import("./alert").AlertRootProps) => import("react/jsx-runtime").JSX.Element;
+    Indicator: ({ children, className, ...rest }: import("./alert").AlertIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+    Content: ({ children, className, ...rest }: import("./alert").AlertContentProps) => import("react/jsx-runtime").JSX.Element;
+    Title: ({ children, className, ...rest }: import("./alert").AlertTitleProps) => import("react/jsx-runtime").JSX.Element;
+    Description: ({ children, className, ...rest }: import("./alert").AlertDescriptionProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type Alert = {
+    Props: ComponentProps<typeof AlertRoot>;
+    RootProps: ComponentProps<typeof AlertRoot>;
+    IndicatorProps: ComponentProps<typeof AlertIndicator>;
+    ContentProps: ComponentProps<typeof AlertContent>;
+    TitleProps: ComponentProps<typeof AlertTitle>;
+    DescriptionProps: ComponentProps<typeof AlertDescription>;
+};
+export { AlertRoot, AlertIndicator, AlertContent, AlertTitle, AlertDescription };
+export type { AlertRootProps, AlertRootProps as AlertProps, AlertIndicatorProps, AlertContentProps, AlertTitleProps, AlertDescriptionProps, } from "./alert";

package/dist/components/alert/index.js

@@ -0,0 +1,14 @@
+import { AlertRoot, AlertDescription, AlertTitle, AlertContent, AlertIndicator } from './alert.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Alert = Object.assign(AlertRoot, {
+  Root: AlertRoot,
+  Indicator: AlertIndicator,
+  Content: AlertContent,
+  Title: AlertTitle,
+  Description: AlertDescription
+});
+
+export { Alert, AlertContent, AlertDescription, AlertIndicator, AlertRoot, AlertTitle };

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

@@ -0,0 +1,65 @@
+import type { ComponentPropsWithRef, HTMLAttributes } from "react";
+import type { ButtonProps as ButtonPrimitiveProps, DialogProps as DialogPrimitiveProps } from "react-aria-components";
+import { DialogTrigger as AlertDialogTriggerPrimitive, Heading as HeadingPrimitive, ModalOverlay as ModalOverlayPrimitive, Modal as ModalPrimitive } from "react-aria-components";
+import type { AlertDialogVariants } from "@arobo/styles";
+type AlertDialogPlacement = "auto" | "top" | "center" | "bottom";
+type AlertDialogStatus = "default" | "accent" | "success" | "warning" | "danger";
+interface AlertDialogRootProps extends ComponentPropsWithRef<typeof AlertDialogTriggerPrimitive> {
+}
+declare const AlertDialogRoot: ({ children, ...props }: AlertDialogRootProps) => import("react/jsx-runtime").JSX.Element;
+interface AlertDialogTriggerProps extends HTMLAttributes<HTMLDivElement> {
+}
+declare const AlertDialogTrigger: ({ children, className, ...props }: AlertDialogTriggerProps) => import("react/jsx-runtime").JSX.Element;
+interface AlertDialogBackdropProps extends ComponentPropsWithRef<typeof ModalOverlayPrimitive> {
+    variant?: AlertDialogVariants["variant"];
+    /**
+     * Whether to close the alert dialog when the user interacts outside it.
+     * Alert dialogs typically require explicit action, so this defaults to false.
+     * @default false
+     */
+    isDismissable?: boolean;
+    /**
+     * Whether pressing the escape key to close the modal should be disabled.
+     * Alert dialogs typically require explicit action, so this defaults to true.
+     * @default true
+     */
+    isKeyboardDismissDisabled?: boolean;
+}
+declare const AlertDialogBackdrop: ({ children, className, isDismissable, isKeyboardDismissDisabled, variant, ...props }: AlertDialogBackdropProps) => import("react/jsx-runtime").JSX.Element;
+interface AlertDialogContainerProps extends Omit<ComponentPropsWithRef<typeof ModalPrimitive>, Exclude<keyof AlertDialogBackdropProps, "children" | "className">> {
+    /**
+     * The placement of the alert dialog on the screen.
+     * @default "auto"
+     */
+    placement?: AlertDialogPlacement;
+    size?: AlertDialogVariants["size"];
+}
+declare const AlertDialogContainer: ({ children, className, placement, size, ...props }: AlertDialogContainerProps) => import("react/jsx-runtime").JSX.Element;
+interface AlertDialogDialogProps extends DialogPrimitiveProps {
+}
+declare const AlertDialogDialog: ({ children, className, ...props }: AlertDialogDialogProps) => import("react/jsx-runtime").JSX.Element;
+interface AlertDialogHeaderProps extends HTMLAttributes<HTMLDivElement> {
+}
+declare const AlertDialogHeader: ({ children, className, ...props }: AlertDialogHeaderProps) => import("react/jsx-runtime").JSX.Element;
+interface AlertDialogHeadingProps extends ComponentPropsWithRef<typeof HeadingPrimitive> {
+}
+declare const AlertDialogHeading: ({ children, className, ...props }: AlertDialogHeadingProps) => import("react/jsx-runtime").JSX.Element;
+interface AlertDialogBodyProps extends HTMLAttributes<HTMLDivElement> {
+}
+declare const AlertDialogBody: ({ children, className, ...props }: AlertDialogBodyProps) => import("react/jsx-runtime").JSX.Element;
+interface AlertDialogFooterProps extends HTMLAttributes<HTMLDivElement> {
+}
+declare const AlertDialogFooter: ({ children, className, ...props }: AlertDialogFooterProps) => import("react/jsx-runtime").JSX.Element;
+interface AlertDialogIconProps extends ComponentPropsWithRef<"div"> {
+    /**
+     * The semantic status of the icon, affects background color and default icon
+     * @default "danger"
+     */
+    status?: AlertDialogStatus;
+}
+declare const AlertDialogIcon: ({ children, className, status, ...props }: AlertDialogIconProps) => import("react/jsx-runtime").JSX.Element;
+interface AlertDialogCloseTriggerProps extends ButtonPrimitiveProps {
+}
+declare const AlertDialogCloseTrigger: ({ className, ...rest }: AlertDialogCloseTriggerProps) => import("react/jsx-runtime").JSX.Element;
+export { AlertDialogRoot, AlertDialogTrigger, AlertDialogBackdrop, AlertDialogContainer, AlertDialogDialog, AlertDialogHeader, AlertDialogHeading, AlertDialogBody, AlertDialogFooter, AlertDialogIcon, AlertDialogCloseTrigger, };
+export type { AlertDialogRootProps, AlertDialogTriggerProps, AlertDialogBackdropProps, AlertDialogContainerProps, AlertDialogDialogProps, AlertDialogHeaderProps, AlertDialogHeadingProps, AlertDialogBodyProps, AlertDialogFooterProps, AlertDialogIconProps, AlertDialogCloseTriggerProps, AlertDialogStatus, };