@cognitiv/components-web 1.0.4 → 1.1.0

package/dist/components/alert/alert.js

@@ -0,0 +1,152 @@
+"use client";
+import React__default, { useContext, createContext } from 'react';
+import { composeSlotClassName } from '../../utils/compose.js';
+import { InfoIcon, DangerIcon, WarningIcon, SuccessIcon } from '../icons.js';
+import { alertVariants } from './styles.js';
+import { jsx } from 'react/jsx-runtime';
+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,21 @@
+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) & {
+    Content: ({ children, className, ...rest }: import("./alert").AlertContentProps) => import("react/jsx-runtime").JSX.Element;
+    Description: ({ children, className, ...rest }: import("./alert").AlertDescriptionProps) => import("react/jsx-runtime").JSX.Element;
+    Indicator: ({ children, className, ...rest }: import("./alert").AlertIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+    Root: ({ children, className, status, ...rest }: import("./alert").AlertRootProps) => import("react/jsx-runtime").JSX.Element;
+    Title: ({ children, className, ...rest }: import("./alert").AlertTitleProps) => 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";
+export { alertVariants } from "./styles";
+export type { AlertVariants } from "./styles";

package/dist/components/alert/index.js

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

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

@@ -0,0 +1,75 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const alertVariants: import("tailwind-variants").TVReturnType<{
+    status: {
+        accent: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+        default: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    description: string;
+    indicator: string;
+    title: string;
+}, undefined, {
+    status: {
+        accent: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+        default: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    description: string;
+    indicator: string;
+    title: string;
+}, import("tailwind-variants").TVReturnType<{
+    status: {
+        accent: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+        default: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    description: string;
+    indicator: string;
+    title: string;
+}, undefined, unknown, unknown, undefined>>;
+export type AlertVariants = VariantProps<typeof alertVariants>;

package/dist/components/alert/styles.js

@@ -0,0 +1,36 @@
+"use strict";
+import { tv } from 'tailwind-variants';
+
+const alertVariants = tv({
+  defaultVariants: {
+    status: "default"
+  },
+  slots: {
+    base: "alert",
+    content: "alert__content",
+    description: "alert__description",
+    indicator: "alert__indicator",
+    title: "alert__title"
+  },
+  variants: {
+    status: {
+      accent: {
+        base: "alert--accent"
+      },
+      danger: {
+        base: "alert--danger"
+      },
+      default: {
+        base: "alert--default"
+      },
+      success: {
+        base: "alert--success"
+      },
+      warning: {
+        base: "alert--warning"
+      }
+    }
+  }
+});
+
+export { alertVariants };

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

@@ -0,0 +1,65 @@
+import type { AlertDialogVariants } from "./styles";
+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";
+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, onClick, 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, };

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

@@ -0,0 +1,309 @@
+"use client";
+import { useMemo, useContext, createContext } from 'react';
+import { DialogTrigger, Pressable, Heading, Dialog, Modal, ModalOverlay } from 'react-aria-components';
+import { composeSlotClassName, composeTwRenderProps } from '../../utils/compose.js';
+import { CloseButton } from '../close-button/index.js';
+import { DangerIcon, WarningIcon, SuccessIcon, InfoIcon } from '../icons.js';
+import { alertDialogVariants } from './styles.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+const AlertDialogContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * AlertDialog Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const AlertDialogRoot = ({
+  children,
+  ...props
+}) => {
+  const alertDialogContext = useMemo(() => ({
+    placement: undefined,
+    slots: alertDialogVariants()
+  }), []);
+  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,
+  onClick,
+  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,
+    onClick: e => {
+      e.stopPropagation();
+      onClick?.(e);
+    },
+    ...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 };