@kopexa/sight 17.12.1 → 17.13.0

package/dist/components/dialog/namespace.js

@@ -0,0 +1,213 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/dialog/namespace.ts
+var namespace_exports = {};
+__export(namespace_exports, {
+  Body: () => DialogBody,
+  Close: () => DialogClose,
+  CloseTrigger: () => DialogCloseTrigger,
+  Content: () => DialogContent,
+  Description: () => DialogDescription,
+  Footer: () => DialogFooter,
+  Header: () => DialogHeader,
+  Overlay: () => DialogOverlay,
+  Portal: () => DialogPortal,
+  Root: () => DialogRoot,
+  Title: () => DialogTitle,
+  Trigger: () => DialogTrigger
+});
+module.exports = __toCommonJS(namespace_exports);
+
+// src/components/dialog/dialog.tsx
+var import_dialog = require("@base-ui/react/dialog");
+var import_icons = require("@kopexa/icons");
+var import_react_utils = require("@kopexa/react-utils");
+var import_shared_utils = require("@kopexa/shared-utils");
+var import_theme = require("@kopexa/theme");
+var import_use_controllable_state = require("@kopexa/use-controllable-state");
+var import_jsx_runtime = require("react/jsx-runtime");
+var [DialogProvider, useDialogContext] = (0, import_react_utils.createContext)();
+var DialogRoot = (props) => {
+  const {
+    open: openProp,
+    onOpenChange,
+    size,
+    radius,
+    placement,
+    scrollBehavior,
+    ...restProps
+  } = props;
+  const [open, setOpen] = (0, import_use_controllable_state.useControllableState)({
+    value: openProp,
+    onChange: onOpenChange,
+    defaultValue: false
+  });
+  const styles = (0, import_theme.dialog)({ size, radius, placement, scrollBehavior });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogProvider, { value: { styles, open, placement, size, radius }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_dialog.Dialog.Root,
+    {
+      "data-slot": "dialog",
+      open,
+      onOpenChange: (open2) => setOpen(open2),
+      ...restProps
+    }
+  ) });
+};
+function DialogTrigger({ ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.Dialog.Trigger, { "data-slot": "dialog-trigger", ...props });
+}
+function DialogPortal({ ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.Dialog.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogClose({ ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.Dialog.Close, { "data-slot": "dialog-close", ...props });
+}
+function DialogOverlay({ className, ...props }) {
+  const { styles } = useDialogContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_dialog.Dialog.Backdrop,
+    {
+      "data-slot": "dialog-overlay",
+      className: (0, import_shared_utils.cn)(styles.overlay(), className),
+      ...props
+    }
+  );
+}
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}) {
+  const { styles } = useDialogContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogOverlay, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_dialog.Dialog.Popup,
+      {
+        "data-slot": "dialog-content",
+        className: (0, import_shared_utils.cn)(styles.content(), className),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            import_dialog.Dialog.Close,
+            {
+              "data-slot": "dialog-close",
+              className: styles.close(),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CloseIcon, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function DialogHeader({ className, ...props }) {
+  const { styles } = useDialogContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: styles.header({ className }),
+      ...props
+    }
+  );
+}
+function DialogFooter({ className, ...props }) {
+  const { styles } = useDialogContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      "data-slot": "dialog-footer",
+      className: styles.footer({ className }),
+      ...props
+    }
+  );
+}
+function DialogBody({ className, ...props }) {
+  const { styles } = useDialogContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      "data-slot": "dialog-body",
+      className: styles.body({ className }),
+      ...props
+    }
+  );
+}
+function DialogTitle({ className, ...props }) {
+  const { styles } = useDialogContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_dialog.Dialog.Title,
+    {
+      "data-slot": "dialog-title",
+      className: (0, import_shared_utils.cn)(styles.title(), className),
+      ...props
+    }
+  );
+}
+function DialogDescription({
+  className,
+  ...props
+}) {
+  const { styles } = useDialogContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_dialog.Dialog.Description,
+    {
+      "data-slot": "dialog-description",
+      className: (0, import_shared_utils.cn)(styles.description(), className),
+      ...props
+    }
+  );
+}
+function DialogCloseTrigger({
+  className,
+  ...props
+}) {
+  const { styles } = useDialogContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_dialog.Dialog.Close,
+    {
+      "data-slot": "dialog-close-trigger",
+      className: (0, import_shared_utils.cn)(styles.closeTrigger(), className),
+      ...props
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Body,
+  Close,
+  CloseTrigger,
+  Content,
+  Description,
+  Footer,
+  Header,
+  Overlay,
+  Portal,
+  Root,
+  Title,
+  Trigger
+});

package/dist/components/dialog/namespace.mjs

@@ -0,0 +1,29 @@
+"use client";
+import {
+  DialogBody,
+  DialogClose,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger
+} from "../../chunk-SHETEVHO.mjs";
+export {
+  DialogBody as Body,
+  DialogClose as Close,
+  DialogCloseTrigger as CloseTrigger,
+  DialogContent as Content,
+  DialogDescription as Description,
+  DialogFooter as Footer,
+  DialogHeader as Header,
+  DialogOverlay as Overlay,
+  DialogPortal as Portal,
+  DialogRoot as Root,
+  DialogTitle as Title,
+  DialogTrigger as Trigger
+};

package/dist/components/dialog/transition.d.mts

@@ -0,0 +1,5 @@
+import { Variant } from 'motion';
+
+declare const scaleInOut: Record<string, Variant>;
+
+export { scaleInOut };

package/dist/components/dialog/transition.d.ts

@@ -0,0 +1,5 @@
+import { Variant } from 'motion';
+
+declare const scaleInOut: Record<string, Variant>;
+
+export { scaleInOut };

package/dist/components/dialog/transition.js

@@ -0,0 +1,132 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/dialog/transition.ts
+var transition_exports = {};
+__export(transition_exports, {
+  scaleInOut: () => scaleInOut
+});
+module.exports = __toCommonJS(transition_exports);
+
+// ../../utilities/motion-utils/src/transition-utils.ts
+var TRANSITION_EASINGS = {
+  ease: [0.36, 0.66, 0.4, 1],
+  easeIn: [0.4, 0, 1, 1],
+  easeOut: [0, 0, 0.2, 1],
+  easeInOut: [0.4, 0, 0.2, 1],
+  spring: [0.155, 1.105, 0.295, 1.12],
+  springOut: [0.57, -0.15, 0.62, 0.07],
+  softSpring: [0.16, 1.11, 0.3, 1.02]
+};
+var TRANSITION_DEFAULTS = {
+  enter: {
+    duration: 0.2,
+    ease: TRANSITION_EASINGS.easeOut
+  },
+  exit: {
+    duration: 0.1,
+    ease: TRANSITION_EASINGS.easeIn
+  }
+};
+var TRANSITION_VARIANTS = {
+  fade: {
+    enter: {
+      opacity: 1,
+      transition: {
+        duration: 0.4,
+        ease: TRANSITION_EASINGS.ease
+      }
+    },
+    exit: {
+      opacity: 0,
+      transition: {
+        duration: 0.3,
+        ease: TRANSITION_EASINGS.ease
+      }
+    }
+  },
+  scaleSpringOpacity: {
+    initial: {
+      opacity: 0,
+      transform: "scale(0.8)"
+    },
+    enter: {
+      opacity: 1,
+      transform: "scale(1)",
+      transition: {
+        type: "spring",
+        bounce: 0,
+        duration: 0.3
+      }
+    },
+    exit: {
+      opacity: 0,
+      transform: "scale(0.96)",
+      transition: {
+        ease: TRANSITION_EASINGS.easeOut,
+        bounce: 0,
+        duration: 0.15
+      }
+    }
+  },
+  scale: {
+    enter: { scale: 1 },
+    exit: { scale: 0.95 }
+  }
+};
+
+// src/components/dialog/transition.ts
+var scaleInOut = {
+  enter: {
+    scale: "var(--scale-enter)",
+    y: "var(--slide-enter)",
+    opacity: 1,
+    willChange: "auto",
+    transition: {
+      scale: {
+        duration: 0.4,
+        ease: TRANSITION_EASINGS.ease
+      },
+      opacity: {
+        duration: 0.4,
+        ease: TRANSITION_EASINGS.ease
+      },
+      y: {
+        type: "spring",
+        bounce: 0,
+        duration: 0.6
+      }
+    }
+  },
+  exit: {
+    scale: "var(--scale-exit)",
+    y: "var(--slide-exit)",
+    opacity: 0,
+    willChange: "transform",
+    transition: {
+      duration: 0.3,
+      ease: TRANSITION_EASINGS.ease
+    }
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  scaleInOut
+});

package/dist/components/dialog/transition.mjs

@@ -0,0 +1,106 @@
+"use client";
+
+// ../../utilities/motion-utils/src/transition-utils.ts
+var TRANSITION_EASINGS = {
+  ease: [0.36, 0.66, 0.4, 1],
+  easeIn: [0.4, 0, 1, 1],
+  easeOut: [0, 0, 0.2, 1],
+  easeInOut: [0.4, 0, 0.2, 1],
+  spring: [0.155, 1.105, 0.295, 1.12],
+  springOut: [0.57, -0.15, 0.62, 0.07],
+  softSpring: [0.16, 1.11, 0.3, 1.02]
+};
+var TRANSITION_DEFAULTS = {
+  enter: {
+    duration: 0.2,
+    ease: TRANSITION_EASINGS.easeOut
+  },
+  exit: {
+    duration: 0.1,
+    ease: TRANSITION_EASINGS.easeIn
+  }
+};
+var TRANSITION_VARIANTS = {
+  fade: {
+    enter: {
+      opacity: 1,
+      transition: {
+        duration: 0.4,
+        ease: TRANSITION_EASINGS.ease
+      }
+    },
+    exit: {
+      opacity: 0,
+      transition: {
+        duration: 0.3,
+        ease: TRANSITION_EASINGS.ease
+      }
+    }
+  },
+  scaleSpringOpacity: {
+    initial: {
+      opacity: 0,
+      transform: "scale(0.8)"
+    },
+    enter: {
+      opacity: 1,
+      transform: "scale(1)",
+      transition: {
+        type: "spring",
+        bounce: 0,
+        duration: 0.3
+      }
+    },
+    exit: {
+      opacity: 0,
+      transform: "scale(0.96)",
+      transition: {
+        ease: TRANSITION_EASINGS.easeOut,
+        bounce: 0,
+        duration: 0.15
+      }
+    }
+  },
+  scale: {
+    enter: { scale: 1 },
+    exit: { scale: 0.95 }
+  }
+};
+
+// src/components/dialog/transition.ts
+var scaleInOut = {
+  enter: {
+    scale: "var(--scale-enter)",
+    y: "var(--slide-enter)",
+    opacity: 1,
+    willChange: "auto",
+    transition: {
+      scale: {
+        duration: 0.4,
+        ease: TRANSITION_EASINGS.ease
+      },
+      opacity: {
+        duration: 0.4,
+        ease: TRANSITION_EASINGS.ease
+      },
+      y: {
+        type: "spring",
+        bounce: 0,
+        duration: 0.6
+      }
+    }
+  },
+  exit: {
+    scale: "var(--scale-exit)",
+    y: "var(--slide-exit)",
+    opacity: 0,
+    willChange: "transform",
+    transition: {
+      duration: 0.3,
+      ease: TRANSITION_EASINGS.ease
+    }
+  }
+};
+export {
+  scaleInOut
+};

package/dist/components/file-upload/avatar-upload.d.mts

@@ -0,0 +1,54 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { AvatarUploadVariants } from '@kopexa/theme';
+import { ComponentProps } from 'react';
+import { FileWithPreview } from '../../hooks/use-file-upload/index.mjs';
+
+interface AvatarUploadBaseProps {
+    /**
+     * Maximum allowed file size in bytes.
+     * @default 2MB.
+     */
+    maxSize?: number;
+    /**
+     * Additional CSS class names applied to the root element.
+     */
+    className?: string;
+    /**
+     * Callback fired when the selected file changes (after upload or removal).
+     * Provides the FileWithPreview object or null if cleared.
+     */
+    onFileChange?: (file: FileWithPreview | null) => void;
+    /**
+     * URL for a default/fallback avatar image shown when no file is uploaded.
+     */
+    defaultAvatar?: string;
+    /**
+     * Accepted file types for the upload input (e.g. ".png,.jpg").
+     * @default ".png,.jpg"
+     */
+    accept?: string;
+    /**
+     * Enables the image crop dialog if the selected file is an image.
+     * @default true
+     */
+    cropperEnabled?: boolean;
+    /**
+     * Aspect ratio for the ImageCrop component (e.g. 1 for square cropping).
+     * @default 1
+     */
+    cropAspect?: number;
+    /**
+     * Maximum image size forwarded to the ImageCrop component (in bytes).
+     * Defaults to the same as maxSize (2MB).
+     */
+    cropMaxImageSize?: number;
+    /**
+     * Callback fired after cropping is completed.
+     * Provides the newly created cropped File object.
+     */
+    onCroppedFile?: (file: File) => void;
+}
+type AvatarUploadProps = ComponentProps<"div"> & AvatarUploadVariants & AvatarUploadBaseProps;
+declare const AvatarUpload: (props: AvatarUploadProps) => react_jsx_runtime.JSX.Element;
+
+export { AvatarUpload, type AvatarUploadProps };

package/dist/components/file-upload/avatar-upload.d.ts

@@ -0,0 +1,54 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { AvatarUploadVariants } from '@kopexa/theme';
+import { ComponentProps } from 'react';
+import { FileWithPreview } from '../../hooks/use-file-upload/index.js';
+
+interface AvatarUploadBaseProps {
+    /**
+     * Maximum allowed file size in bytes.
+     * @default 2MB.
+     */
+    maxSize?: number;
+    /**
+     * Additional CSS class names applied to the root element.
+     */
+    className?: string;
+    /**
+     * Callback fired when the selected file changes (after upload or removal).
+     * Provides the FileWithPreview object or null if cleared.
+     */
+    onFileChange?: (file: FileWithPreview | null) => void;
+    /**
+     * URL for a default/fallback avatar image shown when no file is uploaded.
+     */
+    defaultAvatar?: string;
+    /**
+     * Accepted file types for the upload input (e.g. ".png,.jpg").
+     * @default ".png,.jpg"
+     */
+    accept?: string;
+    /**
+     * Enables the image crop dialog if the selected file is an image.
+     * @default true
+     */
+    cropperEnabled?: boolean;
+    /**
+     * Aspect ratio for the ImageCrop component (e.g. 1 for square cropping).
+     * @default 1
+     */
+    cropAspect?: number;
+    /**
+     * Maximum image size forwarded to the ImageCrop component (in bytes).
+     * Defaults to the same as maxSize (2MB).
+     */
+    cropMaxImageSize?: number;
+    /**
+     * Callback fired after cropping is completed.
+     * Provides the newly created cropped File object.
+     */
+    onCroppedFile?: (file: File) => void;
+}
+type AvatarUploadProps = ComponentProps<"div"> & AvatarUploadVariants & AvatarUploadBaseProps;
+declare const AvatarUpload: (props: AvatarUploadProps) => react_jsx_runtime.JSX.Element;
+
+export { AvatarUpload, type AvatarUploadProps };