@zentauri-ui/zentauri-components 1.2.0 → 1.3.0

package/dist/ui/modal/animated.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/modal/animated/animations.ts","../../../src/ui/modal/animated/modal-content-animated.tsx"],"names":["useModalContext","useReducedMotion","useFocusManagement","createPortal","jsx","AnimatePresence","jsxs","motion","modalOverlayVariants","cn","modalContentVariants"],"mappings":"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","file":"animated.js","sourcesContent":["import type { ModalAnimationPresets } from \"./types\";\n\nexport const modalOverlayAnimationPresets: ModalAnimationPresets = {\n  none: {},\n  fade: {\n    initial: { opacity: 0 },\n    animate: { opacity: 1 },\n    exit: { opacity: 0 },\n    transition: { duration: 0.2 },\n  },\n  scale: {\n    initial: { opacity: 0, scale: 0.96 },\n    animate: { opacity: 1, scale: 1 },\n    exit: { opacity: 0, scale: 0.96 },\n    transition: { type: \"spring\", stiffness: 420, damping: 32 },\n  },\n  \"slide-up\": {\n    initial: { opacity: 0, y: 24 },\n    animate: { opacity: 1, y: 0 },\n    exit: { opacity: 0, y: 16 },\n    transition: { type: \"spring\", stiffness: 380, damping: 30 },\n  },\n  \"slide-down\": {\n    initial: { opacity: 0, y: -24 },\n    animate: { opacity: 1, y: 0 },\n    exit: { opacity: 0, y: -16 },\n    transition: { type: \"spring\", stiffness: 380, damping: 30 },\n  },\n};\n","\"use client\";\n\nimport { AnimatePresence, motion, useReducedMotion } from \"framer-motion\";\nimport { createPortal } from \"react-dom\";\n\nimport { cn } from \"../../../lib/utils\";\nimport { useFocusManagement } from \"../../../hooks/useFocusManagement\";\n\nimport { modalOverlayAnimationPresets } from \"./animations\";\nimport type { ModalContentAnimatedProps } from \"./types\";\nimport { modalContentVariants, modalOverlayVariants } from \"../variants\";\nimport { useModalContext } from \"../modal-base\";\n\nexport function ModalContentAnimated({\n  className,\n  size,\n  position,\n  appearance,\n  animation = \"scale\",\n  children,\n  ref,\n  id,\n  style,\n}: ModalContentAnimatedProps) {\n  const { open, setOpen, titleId, descriptionId, contentRef } =\n    useModalContext(\"ModalContent\");\n  const reduceMotion = useReducedMotion();\n  const overlayMotion =\n    modalOverlayAnimationPresets[reduceMotion ? \"fade\" : animation];\n  const panelMotion =\n    modalOverlayAnimationPresets[reduceMotion ? \"fade\" : animation];\n\n  useFocusManagement({\n    open,\n    setOpen,\n    contentRef,\n  });\n\n  const portalTarget = typeof document !== \"undefined\" ? document.body : null;\n\n  if (!portalTarget) {\n    return null;\n  }\n\n  return createPortal(\n    <AnimatePresence>\n      {open ? (\n        <div className=\"fixed inset-0 z-50\" data-slot=\"modal-portal\">\n          <motion.button\n            type=\"button\"\n            aria-hidden\n            tabIndex={-1}\n            data-slot=\"modal-overlay\"\n            className={modalOverlayVariants()}\n            onClick={() => setOpen(false)}\n            initial={animation === \"none\" ? false : overlayMotion.initial}\n            animate={animation === \"none\" ? undefined : overlayMotion.animate}\n            exit={animation === \"none\" ? undefined : overlayMotion.exit}\n            transition={overlayMotion.transition}\n          />\n          <motion.div\n            ref={(node) => {\n              contentRef.current = node;\n              if (typeof ref === \"function\") {\n                ref(node);\n              } else if (ref) {\n                (ref as React.RefObject<HTMLDivElement | null>).current = node;\n              }\n            }}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-labelledby={titleId}\n            aria-describedby={descriptionId}\n            data-slot=\"modal-content\"\n            tabIndex={-1}\n            className={cn(\n              modalContentVariants({ size, position, appearance }),\n              className,\n            )}\n            initial={animation === \"none\" ? false : panelMotion.initial}\n            animate={animation === \"none\" ? undefined : panelMotion.animate}\n            exit={animation === \"none\" ? undefined : panelMotion.exit}\n            transition={panelMotion.transition}\n            id={id}\n            style={style}\n          >\n            {children}\n          </motion.div>\n        </div>\n      ) : null}\n    </AnimatePresence>,\n    portalTarget,\n  );\n}\n\nModalContentAnimated.displayName = \"ModalContent\";\n"]}

package/dist/ui/modal/animated.mjs

@@ -0,0 +1,117 @@
+"use client";
+import { useModalContext, modalOverlayVariants, modalContentVariants } from '../../chunk-IXDJ3IPG.mjs';
+import { useFocusManagement } from '../../chunk-WL5I7RVS.mjs';
+import '../../chunk-PMAF6FBF.mjs';
+import { cn } from '../../chunk-DFEZH7TC.mjs';
+import { useReducedMotion, AnimatePresence, motion } from 'framer-motion';
+import { createPortal } from 'react-dom';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/ui/modal/animated/animations.ts
+var modalOverlayAnimationPresets = {
+  none: {},
+  fade: {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    exit: { opacity: 0 },
+    transition: { duration: 0.2 }
+  },
+  scale: {
+    initial: { opacity: 0, scale: 0.96 },
+    animate: { opacity: 1, scale: 1 },
+    exit: { opacity: 0, scale: 0.96 },
+    transition: { type: "spring", stiffness: 420, damping: 32 }
+  },
+  "slide-up": {
+    initial: { opacity: 0, y: 24 },
+    animate: { opacity: 1, y: 0 },
+    exit: { opacity: 0, y: 16 },
+    transition: { type: "spring", stiffness: 380, damping: 30 }
+  },
+  "slide-down": {
+    initial: { opacity: 0, y: -24 },
+    animate: { opacity: 1, y: 0 },
+    exit: { opacity: 0, y: -16 },
+    transition: { type: "spring", stiffness: 380, damping: 30 }
+  }
+};
+function ModalContentAnimated({
+  className,
+  size,
+  position,
+  appearance,
+  animation = "scale",
+  children,
+  ref,
+  id,
+  style
+}) {
+  const { open, setOpen, titleId, descriptionId, contentRef } = useModalContext("ModalContent");
+  const reduceMotion = useReducedMotion();
+  const overlayMotion = modalOverlayAnimationPresets[reduceMotion ? "fade" : animation];
+  const panelMotion = modalOverlayAnimationPresets[reduceMotion ? "fade" : animation];
+  useFocusManagement({
+    open,
+    setOpen,
+    contentRef
+  });
+  const portalTarget = typeof document !== "undefined" ? document.body : null;
+  if (!portalTarget) {
+    return null;
+  }
+  return createPortal(
+    /* @__PURE__ */ jsx(AnimatePresence, { children: open ? /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50", "data-slot": "modal-portal", children: [
+      /* @__PURE__ */ jsx(
+        motion.button,
+        {
+          type: "button",
+          "aria-hidden": true,
+          tabIndex: -1,
+          "data-slot": "modal-overlay",
+          className: modalOverlayVariants(),
+          onClick: () => setOpen(false),
+          initial: animation === "none" ? false : overlayMotion.initial,
+          animate: animation === "none" ? void 0 : overlayMotion.animate,
+          exit: animation === "none" ? void 0 : overlayMotion.exit,
+          transition: overlayMotion.transition
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          ref: (node) => {
+            contentRef.current = node;
+            if (typeof ref === "function") {
+              ref(node);
+            } else if (ref) {
+              ref.current = node;
+            }
+          },
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": titleId,
+          "aria-describedby": descriptionId,
+          "data-slot": "modal-content",
+          tabIndex: -1,
+          className: cn(
+            modalContentVariants({ size, position, appearance }),
+            className
+          ),
+          initial: animation === "none" ? false : panelMotion.initial,
+          animate: animation === "none" ? void 0 : panelMotion.animate,
+          exit: animation === "none" ? void 0 : panelMotion.exit,
+          transition: panelMotion.transition,
+          id,
+          style,
+          children
+        }
+      )
+    ] }) : null }),
+    portalTarget
+  );
+}
+ModalContentAnimated.displayName = "ModalContent";
+
+export { ModalContentAnimated, modalOverlayAnimationPresets };
+//# sourceMappingURL=animated.mjs.map
+//# sourceMappingURL=animated.mjs.map

package/dist/ui/modal/animated.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/modal/animated/animations.ts","../../../src/ui/modal/animated/modal-content-animated.tsx"],"names":[],"mappings":"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","file":"animated.mjs","sourcesContent":["import type { ModalAnimationPresets } from \"./types\";\n\nexport const modalOverlayAnimationPresets: ModalAnimationPresets = {\n  none: {},\n  fade: {\n    initial: { opacity: 0 },\n    animate: { opacity: 1 },\n    exit: { opacity: 0 },\n    transition: { duration: 0.2 },\n  },\n  scale: {\n    initial: { opacity: 0, scale: 0.96 },\n    animate: { opacity: 1, scale: 1 },\n    exit: { opacity: 0, scale: 0.96 },\n    transition: { type: \"spring\", stiffness: 420, damping: 32 },\n  },\n  \"slide-up\": {\n    initial: { opacity: 0, y: 24 },\n    animate: { opacity: 1, y: 0 },\n    exit: { opacity: 0, y: 16 },\n    transition: { type: \"spring\", stiffness: 380, damping: 30 },\n  },\n  \"slide-down\": {\n    initial: { opacity: 0, y: -24 },\n    animate: { opacity: 1, y: 0 },\n    exit: { opacity: 0, y: -16 },\n    transition: { type: \"spring\", stiffness: 380, damping: 30 },\n  },\n};\n","\"use client\";\n\nimport { AnimatePresence, motion, useReducedMotion } from \"framer-motion\";\nimport { createPortal } from \"react-dom\";\n\nimport { cn } from \"../../../lib/utils\";\nimport { useFocusManagement } from \"../../../hooks/useFocusManagement\";\n\nimport { modalOverlayAnimationPresets } from \"./animations\";\nimport type { ModalContentAnimatedProps } from \"./types\";\nimport { modalContentVariants, modalOverlayVariants } from \"../variants\";\nimport { useModalContext } from \"../modal-base\";\n\nexport function ModalContentAnimated({\n  className,\n  size,\n  position,\n  appearance,\n  animation = \"scale\",\n  children,\n  ref,\n  id,\n  style,\n}: ModalContentAnimatedProps) {\n  const { open, setOpen, titleId, descriptionId, contentRef } =\n    useModalContext(\"ModalContent\");\n  const reduceMotion = useReducedMotion();\n  const overlayMotion =\n    modalOverlayAnimationPresets[reduceMotion ? \"fade\" : animation];\n  const panelMotion =\n    modalOverlayAnimationPresets[reduceMotion ? \"fade\" : animation];\n\n  useFocusManagement({\n    open,\n    setOpen,\n    contentRef,\n  });\n\n  const portalTarget = typeof document !== \"undefined\" ? document.body : null;\n\n  if (!portalTarget) {\n    return null;\n  }\n\n  return createPortal(\n    <AnimatePresence>\n      {open ? (\n        <div className=\"fixed inset-0 z-50\" data-slot=\"modal-portal\">\n          <motion.button\n            type=\"button\"\n            aria-hidden\n            tabIndex={-1}\n            data-slot=\"modal-overlay\"\n            className={modalOverlayVariants()}\n            onClick={() => setOpen(false)}\n            initial={animation === \"none\" ? false : overlayMotion.initial}\n            animate={animation === \"none\" ? undefined : overlayMotion.animate}\n            exit={animation === \"none\" ? undefined : overlayMotion.exit}\n            transition={overlayMotion.transition}\n          />\n          <motion.div\n            ref={(node) => {\n              contentRef.current = node;\n              if (typeof ref === \"function\") {\n                ref(node);\n              } else if (ref) {\n                (ref as React.RefObject<HTMLDivElement | null>).current = node;\n              }\n            }}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-labelledby={titleId}\n            aria-describedby={descriptionId}\n            data-slot=\"modal-content\"\n            tabIndex={-1}\n            className={cn(\n              modalContentVariants({ size, position, appearance }),\n              className,\n            )}\n            initial={animation === \"none\" ? false : panelMotion.initial}\n            animate={animation === \"none\" ? undefined : panelMotion.animate}\n            exit={animation === \"none\" ? undefined : panelMotion.exit}\n            transition={panelMotion.transition}\n            id={id}\n            style={style}\n          >\n            {children}\n          </motion.div>\n        </div>\n      ) : null}\n    </AnimatePresence>,\n    portalTarget,\n  );\n}\n\nModalContentAnimated.displayName = \"ModalContent\";\n"]}

package/dist/ui/modal.d.mts

@@ -1,54 +1,20 @@
-import * as react from 'react';
-import { ReactNode, Ref, CSSProperties, HTMLAttributes } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { VariantProps } from 'class-variance-authority';
-import * as class_variance_authority_types from 'class-variance-authority/types';
-import { HTMLMotionProps } from 'framer-motion';
-
-declare const modalOverlayVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
-declare const modalTriggerVariants: (props?: ({
-    appearance?: "default" | "glass" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "gray" | "amber" | "violet" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-declare const modalContentVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | "xl" | "full" | null | undefined;
-    position?: "center" | "top" | "bottom" | null | undefined;
-    appearance?: "default" | "glass" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "gray" | "amber" | "violet" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
+import { M as ModalProps, a as ModalSectionProps, b as ModalContentProps, c as ModalTriggerProps } from '../types-C7N9UvRm.mjs';
+export { d as ModalContentVariantProps, m as modalContentVariants, e as modalOverlayVariants } from '../types-C7N9UvRm.mjs';
+import * as react from 'react';
+import 'class-variance-authority';
+import 'class-variance-authority/types';
 
-type ModalAnimation = "none" | "fade" | "scale" | "slide-up" | "slide-down";
-type ModalContentVariantProps = VariantProps<typeof modalContentVariants>;
-type ModalProps = {
-    open?: boolean;
-    defaultOpen?: boolean;
-    onOpenChange?: (open: boolean) => void;
-    children?: ReactNode;
-};
-type ModalTriggerProps = HTMLAttributes<HTMLButtonElement> & {
-    ref?: Ref<HTMLButtonElement>;
-    appearance?: VariantProps<typeof modalTriggerVariants>["appearance"];
-};
-type ModalContentProps = ModalContentVariantProps & {
-    animation?: ModalAnimation;
-    className?: string;
-    children?: ReactNode;
-    ref?: Ref<HTMLDivElement>;
-    id?: string;
-    style?: CSSProperties;
-};
-type ModalSectionProps = {
-    className?: string;
-    children?: ReactNode;
+declare const Modal: {
+    (props: ModalProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
 };
 
-declare function Modal({ open, defaultOpen, onOpenChange, children, }: ModalProps): react_jsx_runtime.JSX.Element;
-declare namespace Modal {
-    var displayName: string;
-}
 declare function ModalTrigger({ className, children, appearance, onClick, ref, ...rest }: ModalTriggerProps): react_jsx_runtime.JSX.Element;
 declare namespace ModalTrigger {
     var displayName: string;
 }
-declare function ModalContent({ className, size, position, appearance, animation, children, ref, id, style, }: ModalContentProps): react.ReactPortal | null;
+declare function ModalContent({ className, size, position, appearance, children, ref, id, style, }: ModalContentProps): react.ReactPortal | null;
 declare namespace ModalContent {
     var displayName: string;
 }
@@ -77,8 +43,4 @@ declare namespace ModalClose {
     var displayName: string;
 }
 
-type ModalPresetMotionProps = Pick<HTMLMotionProps<"div">, "initial" | "animate" | "exit" | "transition">;
-type ModalAnimationPresets = Record<ModalAnimation, ModalPresetMotionProps>;
-declare const modalOverlayAnimationPresets: ModalAnimationPresets;
-
-export { Modal, type ModalAnimation, ModalBody, ModalClose, ModalContent, type ModalContentProps, ModalDescription, ModalFooter, ModalHeader, type ModalProps, type ModalSectionProps, ModalTitle, ModalTrigger, type ModalTriggerProps, modalContentVariants, modalOverlayAnimationPresets, modalOverlayVariants };
+export { Modal, ModalBody, ModalClose, ModalContent, ModalContentProps, ModalDescription, ModalFooter, ModalHeader, ModalProps, ModalSectionProps, ModalTitle, ModalTrigger, ModalTriggerProps };

package/dist/ui/modal.d.ts

@@ -1,54 +1,20 @@
-import * as react from 'react';
-import { ReactNode, Ref, CSSProperties, HTMLAttributes } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { VariantProps } from 'class-variance-authority';
-import * as class_variance_authority_types from 'class-variance-authority/types';
-import { HTMLMotionProps } from 'framer-motion';
-
-declare const modalOverlayVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
-declare const modalTriggerVariants: (props?: ({
-    appearance?: "default" | "glass" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "gray" | "amber" | "violet" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-declare const modalContentVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | "xl" | "full" | null | undefined;
-    position?: "center" | "top" | "bottom" | null | undefined;
-    appearance?: "default" | "glass" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "gray" | "amber" | "violet" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
+import { M as ModalProps, a as ModalSectionProps, b as ModalContentProps, c as ModalTriggerProps } from '../types-C7N9UvRm.js';
+export { d as ModalContentVariantProps, m as modalContentVariants, e as modalOverlayVariants } from '../types-C7N9UvRm.js';
+import * as react from 'react';
+import 'class-variance-authority';
+import 'class-variance-authority/types';
 
-type ModalAnimation = "none" | "fade" | "scale" | "slide-up" | "slide-down";
-type ModalContentVariantProps = VariantProps<typeof modalContentVariants>;
-type ModalProps = {
-    open?: boolean;
-    defaultOpen?: boolean;
-    onOpenChange?: (open: boolean) => void;
-    children?: ReactNode;
-};
-type ModalTriggerProps = HTMLAttributes<HTMLButtonElement> & {
-    ref?: Ref<HTMLButtonElement>;
-    appearance?: VariantProps<typeof modalTriggerVariants>["appearance"];
-};
-type ModalContentProps = ModalContentVariantProps & {
-    animation?: ModalAnimation;
-    className?: string;
-    children?: ReactNode;
-    ref?: Ref<HTMLDivElement>;
-    id?: string;
-    style?: CSSProperties;
-};
-type ModalSectionProps = {
-    className?: string;
-    children?: ReactNode;
+declare const Modal: {
+    (props: ModalProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
 };
 
-declare function Modal({ open, defaultOpen, onOpenChange, children, }: ModalProps): react_jsx_runtime.JSX.Element;
-declare namespace Modal {
-    var displayName: string;
-}
 declare function ModalTrigger({ className, children, appearance, onClick, ref, ...rest }: ModalTriggerProps): react_jsx_runtime.JSX.Element;
 declare namespace ModalTrigger {
     var displayName: string;
 }
-declare function ModalContent({ className, size, position, appearance, animation, children, ref, id, style, }: ModalContentProps): react.ReactPortal | null;
+declare function ModalContent({ className, size, position, appearance, children, ref, id, style, }: ModalContentProps): react.ReactPortal | null;
 declare namespace ModalContent {
     var displayName: string;
 }
@@ -77,8 +43,4 @@ declare namespace ModalClose {
     var displayName: string;
 }
 
-type ModalPresetMotionProps = Pick<HTMLMotionProps<"div">, "initial" | "animate" | "exit" | "transition">;
-type ModalAnimationPresets = Record<ModalAnimation, ModalPresetMotionProps>;
-declare const modalOverlayAnimationPresets: ModalAnimationPresets;
-
-export { Modal, type ModalAnimation, ModalBody, ModalClose, ModalContent, type ModalContentProps, ModalDescription, ModalFooter, ModalHeader, type ModalProps, type ModalSectionProps, ModalTitle, ModalTrigger, type ModalTriggerProps, modalContentVariants, modalOverlayAnimationPresets, modalOverlayVariants };
+export { Modal, ModalBody, ModalClose, ModalContent, ModalContentProps, ModalDescription, ModalFooter, ModalHeader, ModalProps, ModalSectionProps, ModalTitle, ModalTrigger, ModalTriggerProps };