@cognitiv/components-web 1.0.4 → 1.1.0

package/dist/components/meter/styles.js

@@ -0,0 +1,47 @@
+"use strict";
+import { tv } from 'tailwind-variants';
+
+const meterVariants = tv({
+  defaultVariants: {
+    color: "accent",
+    size: "md"
+  },
+  slots: {
+    base: "meter",
+    fill: "meter__fill",
+    output: "meter__output",
+    track: "meter__track"
+  },
+  variants: {
+    color: {
+      accent: {
+        base: "meter--accent"
+      },
+      danger: {
+        base: "meter--danger"
+      },
+      default: {
+        base: "meter--default"
+      },
+      success: {
+        base: "meter--success"
+      },
+      warning: {
+        base: "meter--warning"
+      }
+    },
+    size: {
+      lg: {
+        base: "meter--lg"
+      },
+      md: {
+        base: "meter--md"
+      },
+      sm: {
+        base: "meter--sm"
+      }
+    }
+  }
+});
+
+export { meterVariants };

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

@@ -0,0 +1,33 @@
+import type { ComponentProps } from "react";
+import { ModalBackdrop, ModalBody, ModalCloseTrigger, ModalContainer, ModalDialog, ModalFooter, ModalHeader, ModalHeading, ModalIcon, ModalRoot, ModalTrigger } from "./modal";
+export declare const Modal: (({ children, state, ...props }: import("./modal").ModalRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Backdrop: ({ children, className, isDismissable, onClick, variant, ...props }: import("./modal").ModalBackdropProps) => import("react/jsx-runtime").JSX.Element;
+    Body: ({ children, className, ...props }: import("./modal").ModalBodyProps) => import("react/jsx-runtime").JSX.Element;
+    CloseTrigger: ({ className, ...rest }: import("./modal").ModalCloseTriggerProps) => import("react/jsx-runtime").JSX.Element;
+    Container: ({ children, className, placement, scroll, size, ...props }: import("./modal").ModalContainerProps) => import("react/jsx-runtime").JSX.Element;
+    Dialog: ({ children, className, ...props }: import("./modal").ModalDialogProps) => import("react/jsx-runtime").JSX.Element;
+    Footer: ({ children, className, ...props }: import("./modal").ModalFooterProps) => import("react/jsx-runtime").JSX.Element;
+    Header: ({ children, className, ...props }: import("./modal").ModalHeaderProps) => import("react/jsx-runtime").JSX.Element;
+    Heading: ({ children, className, ...props }: import("./modal").ModalHeadingProps) => import("react/jsx-runtime").JSX.Element;
+    Icon: ({ children, className, ...props }: import("./modal").ModalIconProps) => import("react/jsx-runtime").JSX.Element;
+    Root: ({ children, state, ...props }: import("./modal").ModalRootProps) => import("react/jsx-runtime").JSX.Element;
+    Trigger: ({ children, className, ...props }: import("./modal").ModalTriggerProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type Modal = {
+    Props: ComponentProps<typeof ModalRoot>;
+    RootProps: ComponentProps<typeof ModalRoot>;
+    TriggerProps: ComponentProps<typeof ModalTrigger>;
+    BackdropProps: ComponentProps<typeof ModalBackdrop>;
+    ContainerProps: ComponentProps<typeof ModalContainer>;
+    DialogProps: ComponentProps<typeof ModalDialog>;
+    HeaderProps: ComponentProps<typeof ModalHeader>;
+    IconProps: ComponentProps<typeof ModalIcon>;
+    HeadingProps: ComponentProps<typeof ModalHeading>;
+    BodyProps: ComponentProps<typeof ModalBody>;
+    FooterProps: ComponentProps<typeof ModalFooter>;
+    CloseTriggerProps: ComponentProps<typeof ModalCloseTrigger>;
+};
+export { ModalRoot, ModalTrigger, ModalBackdrop, ModalContainer, ModalDialog, ModalHeader, ModalIcon, ModalHeading, ModalBody, ModalFooter, ModalCloseTrigger, };
+export type { ModalRootProps, ModalRootProps as ModalProps, ModalTriggerProps, ModalBackdropProps, ModalContainerProps, ModalDialogProps, ModalHeaderProps, ModalIconProps, ModalHeadingProps, ModalBodyProps, ModalFooterProps, ModalCloseTriggerProps, } from "./modal";
+export { modalVariants } from "./styles";
+export type { ModalVariants } from "./styles";

package/dist/components/modal/index.js

@@ -0,0 +1,22 @@
+"use strict";
+import { ModalRoot, ModalTrigger, ModalIcon, ModalHeading, ModalHeader, ModalFooter, ModalDialog, ModalContainer, ModalCloseTrigger, ModalBody, ModalBackdrop } from './modal.js';
+export { modalVariants } from './styles.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Modal = Object.assign(ModalRoot, {
+  Backdrop: ModalBackdrop,
+  Body: ModalBody,
+  CloseTrigger: ModalCloseTrigger,
+  Container: ModalContainer,
+  Dialog: ModalDialog,
+  Footer: ModalFooter,
+  Header: ModalHeader,
+  Heading: ModalHeading,
+  Icon: ModalIcon,
+  Root: ModalRoot,
+  Trigger: ModalTrigger
+});
+
+export { Modal, ModalBackdrop, ModalBody, ModalCloseTrigger, ModalContainer, ModalDialog, ModalFooter, ModalHeader, ModalHeading, ModalIcon, ModalRoot, ModalTrigger };

package/dist/components/modal/modal.d.ts

@@ -0,0 +1,53 @@
+import type { UseOverlayStateReturn } from "../../hooks/use-overlay-state";
+import type { ModalVariants } from "./styles";
+import type { ComponentPropsWithRef, ReactNode } from "react";
+import type { Button as ButtonPrimitive, DialogProps as DialogPrimitiveProps } from "react-aria-components";
+import { Heading as HeadingPrimitive, ModalOverlay as ModalOverlayPrimitive, Modal as ModalPrimitive, DialogTrigger as ModalTriggerPrimitive } from "react-aria-components";
+type ModalPlacement = "auto" | "top" | "center" | "bottom";
+interface ModalRootProps extends ComponentPropsWithRef<typeof ModalTriggerPrimitive> {
+    state?: UseOverlayStateReturn;
+}
+declare const ModalRoot: ({ children, state, ...props }: ModalRootProps) => import("react/jsx-runtime").JSX.Element;
+interface ModalTriggerProps extends ComponentPropsWithRef<"div"> {
+}
+declare const ModalTrigger: ({ children, className, ...props }: ModalTriggerProps) => import("react/jsx-runtime").JSX.Element;
+interface ModalBackdropProps extends ComponentPropsWithRef<typeof ModalOverlayPrimitive> {
+    variant?: ModalVariants["variant"];
+    /**
+     * Whether to close the modal when the user interacts outside it.
+     * @default true
+     */
+    isDismissable?: boolean;
+}
+declare const ModalBackdrop: ({ children, className, isDismissable, onClick, variant, ...props }: ModalBackdropProps) => import("react/jsx-runtime").JSX.Element;
+interface ModalContainerProps extends Omit<ComponentPropsWithRef<typeof ModalPrimitive>, Exclude<keyof ModalBackdropProps, "children" | "className">> {
+    placement?: ModalPlacement;
+    scroll?: ModalVariants["scroll"];
+    size?: ModalVariants["size"];
+}
+declare const ModalContainer: ({ children, className, placement, scroll, size, ...props }: ModalContainerProps) => import("react/jsx-runtime").JSX.Element;
+interface ModalDialogProps extends DialogPrimitiveProps {
+}
+declare const ModalDialog: ({ children, className, ...props }: ModalDialogProps) => import("react/jsx-runtime").JSX.Element;
+interface ModalHeaderProps extends ComponentPropsWithRef<"div"> {
+}
+declare const ModalHeader: ({ children, className, ...props }: ModalHeaderProps) => import("react/jsx-runtime").JSX.Element;
+interface ModalBodyProps extends ComponentPropsWithRef<"div"> {
+}
+declare const ModalBody: ({ children, className, ...props }: ModalBodyProps) => import("react/jsx-runtime").JSX.Element;
+interface ModalFooterProps extends ComponentPropsWithRef<"div"> {
+}
+declare const ModalFooter: ({ children, className, ...props }: ModalFooterProps) => import("react/jsx-runtime").JSX.Element;
+interface ModalHeadingProps extends ComponentPropsWithRef<typeof HeadingPrimitive> {
+}
+declare const ModalHeading: ({ children, className, ...props }: ModalHeadingProps) => import("react/jsx-runtime").JSX.Element;
+interface ModalIconProps extends ComponentPropsWithRef<"div"> {
+}
+declare const ModalIcon: ({ children, className, ...props }: ModalIconProps) => import("react/jsx-runtime").JSX.Element;
+interface ModalCloseTriggerProps extends ComponentPropsWithRef<typeof ButtonPrimitive> {
+    className?: string;
+    children?: ReactNode;
+}
+declare const ModalCloseTrigger: ({ className, ...rest }: ModalCloseTriggerProps) => import("react/jsx-runtime").JSX.Element;
+export { ModalRoot, ModalTrigger, ModalBackdrop, ModalContainer, ModalDialog, ModalHeader, ModalIcon, ModalHeading, ModalBody, ModalFooter, ModalCloseTrigger, };
+export type { ModalRootProps, ModalTriggerProps, ModalBackdropProps, ModalContainerProps, ModalDialogProps, ModalHeaderProps, ModalIconProps, ModalHeadingProps, ModalBodyProps, ModalFooterProps, ModalCloseTriggerProps, };

package/dist/components/modal/modal.js

@@ -0,0 +1,288 @@
+"use client";
+import { mergeProps } from '@react-aria/utils';
+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 { modalVariants } from './styles.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { SurfaceContext } from '../surface/surface.js';
+
+const ModalContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * Modal Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const ModalRoot = ({
+  children,
+  state,
+  ...props
+}) => {
+  const modalContext = useMemo(() => ({
+    placement: undefined,
+    slots: modalVariants()
+  }), []);
+  const controlledProps = useMemo(() => state ? {
+    isOpen: state.isOpen,
+    onOpenChange: state.setOpen
+  } : {}, [state]);
+  return /*#__PURE__*/jsx(ModalContext, {
+    value: modalContext,
+    children: /*#__PURE__*/jsx(DialogTrigger, {
+      "data-slot": "modal-root",
+      ...mergeProps(props, controlledProps),
+      children: children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Modal Trigger
+ * -----------------------------------------------------------------------------------------------*/
+
+const ModalTrigger = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(ModalContext);
+  return /*#__PURE__*/jsx(Pressable, {
+    children: /*#__PURE__*/jsx("div", {
+      className: composeSlotClassName(slots?.trigger, className),
+      "data-slot": "modal-trigger",
+      role: "button",
+      ...props,
+      children: children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Modal Backdrop
+ * -----------------------------------------------------------------------------------------------*/
+
+const ModalBackdrop = ({
+  children,
+  className,
+  isDismissable = true,
+  onClick,
+  variant,
+  ...props
+}) => {
+  const {
+    slots: contextSlots
+  } = useContext(ModalContext);
+  const updatedSlots = useMemo(() => modalVariants({
+    variant
+  }), [variant]);
+  const updatedModalContext = useMemo(() => ({
+    slots: {
+      ...contextSlots,
+      ...updatedSlots
+    }
+  }), [contextSlots, updatedSlots]);
+  return /*#__PURE__*/jsx(ModalOverlay, {
+    className: composeTwRenderProps(className, updatedSlots?.backdrop()),
+    "data-slot": "modal-backdrop",
+    isDismissable: isDismissable,
+    onClick: e => {
+      e.stopPropagation();
+      onClick?.(e);
+    },
+    ...props,
+    children: renderProps => /*#__PURE__*/jsxs(ModalContext, {
+      value: updatedModalContext,
+      children: [typeof children === "function" ? children(renderProps) : children, " "]
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Modal Container
+ * -----------------------------------------------------------------------------------------------*/
+
+const ModalContainer = ({
+  children,
+  className,
+  placement = "auto",
+  scroll,
+  size,
+  ...props
+}) => {
+  const {
+    slots: contextSlots
+  } = useContext(ModalContext);
+  const updatedSlots = useMemo(() => modalVariants({
+    scroll,
+    size
+  }), [scroll, size]);
+  const updatedModalContext = useMemo(() => ({
+    placement,
+    slots: {
+      ...contextSlots,
+      ...updatedSlots
+    }
+  }), [contextSlots, placement, updatedSlots]);
+  return /*#__PURE__*/jsx(Modal, {
+    className: composeTwRenderProps(className, updatedSlots?.container()),
+    "data-placement": placement,
+    "data-slot": "modal-container",
+    ...props,
+    children: renderProps => /*#__PURE__*/jsx(ModalContext, {
+      value: updatedModalContext,
+      children: typeof children === "function" ? children(renderProps) : children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Modal Dialog
+ * -----------------------------------------------------------------------------------------------*/
+
+const ModalDialog = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    placement,
+    slots
+  } = useContext(ModalContext);
+  return /*#__PURE__*/jsx(SurfaceContext, {
+    value: {
+      variant: "default"
+    },
+    children: /*#__PURE__*/jsx(Dialog, {
+      className: composeSlotClassName(slots?.dialog, className),
+      "data-placement": placement,
+      "data-slot": "modal-dialog",
+      ...props,
+      children: children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Modal Header
+ * -----------------------------------------------------------------------------------------------*/
+
+const ModalHeader = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(ModalContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.header, className),
+    "data-slot": "modal-header",
+    ...props,
+    children: children
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Modal Body
+ * -----------------------------------------------------------------------------------------------*/
+
+const ModalBody = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(ModalContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.body, className),
+    "data-slot": "modal-body",
+    ...props,
+    children: children
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Modal Footer
+ * -----------------------------------------------------------------------------------------------*/
+
+const ModalFooter = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(ModalContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.footer, className),
+    "data-slot": "modal-footer",
+    ...props,
+    children: children
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Modal Heading
+ * -----------------------------------------------------------------------------------------------*/
+
+const ModalHeading = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(ModalContext);
+  return /*#__PURE__*/jsx(Heading, {
+    className: composeSlotClassName(slots?.heading, className),
+    "data-slot": "modal-heading",
+    slot: "title",
+    ...props,
+    children: children
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * AlertDialog Icon
+ * -----------------------------------------------------------------------------------------------*/
+
+const ModalIcon = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(ModalContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.icon, className),
+    "data-slot": "modal-icon",
+    ...props,
+    children: children
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Modal Close Trigger
+ * -----------------------------------------------------------------------------------------------*/
+
+const ModalCloseTrigger = ({
+  className,
+  ...rest
+}) => {
+  const {
+    slots
+  } = useContext(ModalContext);
+  return /*#__PURE__*/jsx(CloseButton, {
+    className: composeTwRenderProps(className, slots?.closeTrigger()),
+    "data-slot": "modal-close-trigger",
+    slot: "close",
+    ...rest
+  });
+};
+
+export { ModalBackdrop, ModalBody, ModalCloseTrigger, ModalContainer, ModalDialog, ModalFooter, ModalHeader, ModalHeading, ModalIcon, ModalRoot, ModalTrigger };

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

@@ -0,0 +1,168 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const modalVariants: import("tailwind-variants").TVReturnType<{
+    scroll: {
+        inside: {
+            body: string;
+            dialog: string;
+        };
+        outside: {
+            body: string;
+            container: string;
+            dialog: string;
+        };
+    };
+    size: {
+        cover: {
+            dialog: string;
+        };
+        full: {
+            container: string;
+            dialog: string;
+        };
+        lg: {
+            dialog: string;
+        };
+        md: {
+            dialog: string;
+        };
+        sm: {
+            dialog: string;
+        };
+        xs: {
+            dialog: string;
+        };
+    };
+    variant: {
+        blur: {
+            backdrop: string;
+        };
+        opaque: {
+            backdrop: string;
+        };
+        transparent: {
+            backdrop: string;
+        };
+    };
+}, {
+    backdrop: string;
+    body: string;
+    closeTrigger: string;
+    container: string;
+    dialog: string;
+    footer: string;
+    header: string;
+    heading: string;
+    icon: string;
+    trigger: string;
+}, undefined, {
+    scroll: {
+        inside: {
+            body: string;
+            dialog: string;
+        };
+        outside: {
+            body: string;
+            container: string;
+            dialog: string;
+        };
+    };
+    size: {
+        cover: {
+            dialog: string;
+        };
+        full: {
+            container: string;
+            dialog: string;
+        };
+        lg: {
+            dialog: string;
+        };
+        md: {
+            dialog: string;
+        };
+        sm: {
+            dialog: string;
+        };
+        xs: {
+            dialog: string;
+        };
+    };
+    variant: {
+        blur: {
+            backdrop: string;
+        };
+        opaque: {
+            backdrop: string;
+        };
+        transparent: {
+            backdrop: string;
+        };
+    };
+}, {
+    backdrop: string;
+    body: string;
+    closeTrigger: string;
+    container: string;
+    dialog: string;
+    footer: string;
+    header: string;
+    heading: string;
+    icon: string;
+    trigger: string;
+}, import("tailwind-variants").TVReturnType<{
+    scroll: {
+        inside: {
+            body: string;
+            dialog: string;
+        };
+        outside: {
+            body: string;
+            container: string;
+            dialog: string;
+        };
+    };
+    size: {
+        cover: {
+            dialog: string;
+        };
+        full: {
+            container: string;
+            dialog: string;
+        };
+        lg: {
+            dialog: string;
+        };
+        md: {
+            dialog: string;
+        };
+        sm: {
+            dialog: string;
+        };
+        xs: {
+            dialog: string;
+        };
+    };
+    variant: {
+        blur: {
+            backdrop: string;
+        };
+        opaque: {
+            backdrop: string;
+        };
+        transparent: {
+            backdrop: string;
+        };
+    };
+}, {
+    backdrop: string;
+    body: string;
+    closeTrigger: string;
+    container: string;
+    dialog: string;
+    footer: string;
+    header: string;
+    heading: string;
+    icon: string;
+    trigger: string;
+}, undefined, unknown, unknown, undefined>>;
+export type ModalVariants = VariantProps<typeof modalVariants>;

package/dist/components/modal/styles.js

@@ -0,0 +1,69 @@
+"use strict";
+import { tv } from 'tailwind-variants';
+
+const modalVariants = tv({
+  defaultVariants: {
+    scroll: "inside",
+    size: "md",
+    variant: "opaque"
+  },
+  slots: {
+    backdrop: "modal__backdrop",
+    body: "modal__body",
+    closeTrigger: "modal__close-trigger",
+    container: "modal__container",
+    dialog: "modal__dialog",
+    footer: "modal__footer",
+    header: "modal__header",
+    heading: "modal__heading",
+    icon: "modal__icon",
+    trigger: "modal__trigger"
+  },
+  variants: {
+    scroll: {
+      inside: {
+        body: "modal__body--scroll-inside",
+        dialog: "modal__dialog--scroll-inside"
+      },
+      outside: {
+        body: "modal__body--scroll-outside",
+        container: "modal__container--scroll-outside",
+        dialog: "modal__dialog--scroll-outside"
+      }
+    },
+    size: {
+      cover: {
+        dialog: "modal__dialog--cover"
+      },
+      full: {
+        container: "modal__container--full",
+        dialog: "modal__dialog--full"
+      },
+      lg: {
+        dialog: "modal__dialog--lg"
+      },
+      md: {
+        dialog: "modal__dialog--md"
+      },
+      sm: {
+        dialog: "modal__dialog--sm"
+      },
+      xs: {
+        dialog: "modal__dialog--xs"
+      }
+    },
+    variant: {
+      blur: {
+        backdrop: "modal__backdrop--blur"
+      },
+      opaque: {
+        backdrop: "modal__backdrop--opaque"
+      },
+      transparent: {
+        backdrop: "modal__backdrop--transparent"
+      }
+    }
+  }
+});
+
+export { modalVariants };