@zendir/ui 0.1.0

package/dist/react/core/Dialog.js

@@ -0,0 +1,201 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { memo, useRef, useId, useCallback, useEffect } from "react";
+import { createPortal } from "react-dom";
+import { classNames } from "../utils/index.js";
+import { useTheme } from "../theme/ThemeProvider.js";
+const DialogActions = memo(function DialogActions2({
+  children,
+  align = "right"
+}) {
+  const { tokens } = useTheme();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        display: "flex",
+        justifyContent: align === "left" ? "flex-start" : align === "right" ? "flex-end" : "center",
+        gap: tokens.spacing.sm,
+        marginTop: tokens.spacing.lg,
+        paddingTop: tokens.spacing.md,
+        borderTop: tokens.borders.divider
+      },
+      children
+    }
+  );
+});
+const Dialog = memo(function Dialog2({
+  open,
+  onClose,
+  title,
+  size = "medium",
+  showCloseButton = true,
+  closeOnBackdropClick = true,
+  closeOnEscape = true,
+  children,
+  className = ""
+}) {
+  const { tokens, theme } = useTheme();
+  const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
+  const dialogRef = useRef(null);
+  const previousActiveElement = useRef(null);
+  const titleId = useId();
+  const DIALOG_Z_INDEX = 2147483e3;
+  const sizeConfig = {
+    small: { width: "min(360px, calc(100vw - 32px))", maxHeight: "80vh" },
+    medium: { width: "min(540px, calc(100vw - 32px))", maxHeight: "80vh" },
+    large: { width: "min(800px, calc(100vw - 32px))", maxHeight: "90vh" },
+    fullscreen: { width: "100vw", maxHeight: "100vh" }
+  };
+  const config = sizeConfig[size];
+  const handleKeyDown = useCallback((e) => {
+    if (closeOnEscape && e.key === "Escape") {
+      onClose();
+    }
+  }, [closeOnEscape, onClose]);
+  useEffect(() => {
+    if (open) {
+      previousActiveElement.current = document.activeElement;
+      document.body.style.overflow = "hidden";
+      document.addEventListener("keydown", handleKeyDown);
+      const focusTimer = setTimeout(() => {
+        var _a;
+        const focusable = (_a = dialogRef.current) == null ? void 0 : _a.querySelector(
+          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+        );
+        focusable == null ? void 0 : focusable.focus();
+      }, 0);
+      return () => {
+        var _a;
+        clearTimeout(focusTimer);
+        document.body.style.overflow = "";
+        document.removeEventListener("keydown", handleKeyDown);
+        (_a = previousActiveElement.current) == null ? void 0 : _a.focus();
+      };
+    }
+  }, [open, handleKeyDown]);
+  if (!open) return null;
+  if (typeof document === "undefined") return null;
+  return createPortal(/* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames("zendir-dialog-backdrop", className),
+      onClick: closeOnBackdropClick ? onClose : void 0,
+      style: {
+        position: "fixed",
+        inset: 0,
+        backgroundColor: isTransparentTheme ? `${tokens.colors.background.base}66` : `${tokens.colors.background.base}99`,
+        backdropFilter: isTransparentTheme ? "blur(4px)" : void 0,
+        WebkitBackdropFilter: isTransparentTheme ? "blur(4px)" : void 0,
+        display: "flex",
+        alignItems: size === "fullscreen" ? "stretch" : "center",
+        justifyContent: "center",
+        zIndex: DIALOG_Z_INDEX,
+        animation: `zendir-dialog-backdrop ${tokens.animation.duration.normal}ms ${tokens.animation.easing.default} both`
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: dialogRef,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": title ? titleId : void 0,
+            className: "zendir-dialog",
+            onClick: (e) => e.stopPropagation(),
+            style: {
+              width: config.width,
+              maxWidth: size === "fullscreen" ? "100vw" : "calc(100vw - 32px)",
+              maxHeight: config.maxHeight,
+              backgroundColor: isTransparentTheme ? "rgba(139, 92, 246, 0.08)" : tokens.colors.background.surface,
+              ...isTransparentTheme && { backdropFilter: "blur(16px)", WebkitBackdropFilter: "blur(16px)", border: "1px solid rgba(139, 92, 246, 0.2)" },
+              borderRadius: size === "fullscreen" ? 0 : tokens.borderRadius.lg,
+              boxShadow: tokens.shadows.xl,
+              display: "flex",
+              flexDirection: "column",
+              overflow: "hidden",
+              animation: `zendir-dialog-panel ${tokens.animation.duration.normal}ms ${tokens.animation.easing.default} both`
+            },
+            children: [
+              (title || showCloseButton) && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    padding: `${tokens.spacing.md} ${tokens.spacing.lg}`,
+                    borderBottom: tokens.borders.divider
+                  },
+                  children: [
+                    title && /* @__PURE__ */ jsx(
+                      "h2",
+                      {
+                        id: titleId,
+                        style: {
+                          margin: 0,
+                          fontSize: tokens.typography.fontSize.lg,
+                          fontWeight: tokens.typography.fontWeight.semibold,
+                          color: tokens.colors.text.primary
+                        },
+                        children: title
+                      }
+                    ),
+                    showCloseButton && /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: onClose,
+                        "aria-label": "Close dialog",
+                        style: {
+                          padding: tokens.spacing.sm,
+                          minWidth: 44,
+                          minHeight: 44,
+                          backgroundColor: "transparent",
+                          border: "none",
+                          borderRadius: tokens.borderRadius.sm,
+                          cursor: "pointer",
+                          color: tokens.colors.text.muted ?? tokens.colors.text.tertiary,
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          transition: `color ${tokens.animation.fast}`
+                        },
+                        onMouseEnter: (e) => {
+                          e.currentTarget.style.color = tokens.colors.text.primary;
+                        },
+                        onMouseLeave: (e) => {
+                          e.currentTarget.style.color = tokens.colors.text.muted ?? tokens.colors.text.tertiary;
+                        },
+                        children: /* @__PURE__ */ jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) })
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    flex: 1,
+                    padding: tokens.spacing.lg,
+                    overflow: "auto"
+                  },
+                  children
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("style", { children: `
+          @keyframes zendir-dialog-backdrop { from { opacity: 0; } to { opacity: 1; } }
+          @keyframes zendir-dialog-panel { from { transform: scale(0.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }
+        ` })
+      ]
+    }
+  ), document.body);
+});
+Dialog.Actions = DialogActions;
+export {
+  Dialog
+};
+//# sourceMappingURL=Dialog.js.map

package/dist/react/core/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","sources":["../../../src/react/core/Dialog.tsx"],"sourcesContent":["/**\n * @zendir/ui - Dialog/Modal Component\n * \n * Modal dialog following Astro UX Design System.\n * \n * @example\n * ```tsx\n * <Dialog\n *   open={isOpen}\n *   onClose={() => setIsOpen(false)}\n *   title=\"Confirm Action\"\n * >\n *   <p>Are you sure you want to proceed?</p>\n *   <Dialog.Actions>\n *     <Button variant=\"secondary\" onClick={() => setIsOpen(false)}>Cancel</Button>\n *     <Button onClick={handleConfirm}>Confirm</Button>\n *   </Dialog.Actions>\n * </Dialog>\n * ```\n */\n\nimport React, { memo, useEffect, useRef, useCallback, useId } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useTheme } from '../theme';\nimport { classNames } from '../utils';\n\nexport type DialogSize = 'small' | 'medium' | 'large' | 'fullscreen';\n\nexport interface DialogProps {\n  /** Open state */\n  open: boolean;\n  /** Close handler */\n  onClose: () => void;\n  /** Dialog title */\n  title?: string;\n  /** Size variant */\n  size?: DialogSize;\n  /** Show close button */\n  showCloseButton?: boolean;\n  /** Close on backdrop click */\n  closeOnBackdropClick?: boolean;\n  /** Close on escape key */\n  closeOnEscape?: boolean;\n  /** Children */\n  children: React.ReactNode;\n  /** Custom className */\n  className?: string;\n}\n\nexport interface DialogActionsProps {\n  children: React.ReactNode;\n  align?: 'left' | 'center' | 'right';\n}\n\nconst DialogActions = memo(function DialogActions({\n  children,\n  align = 'right',\n}: DialogActionsProps): React.ReactElement {\n  const { tokens } = useTheme();\n  \n  return (\n    <div\n      style={{\n        display: 'flex',\n        justifyContent: align === 'left' ? 'flex-start' : align === 'right' ? 'flex-end' : 'center',\n        gap: tokens.spacing.sm,\n        marginTop: tokens.spacing.lg,\n        paddingTop: tokens.spacing.md,\n        borderTop: tokens.borders.divider,\n      }}\n    >\n      {children}\n    </div>\n  );\n});\n\nexport const Dialog = memo(function Dialog({\n  open,\n  onClose,\n  title,\n  size = 'medium',\n  showCloseButton = true,\n  closeOnBackdropClick = true,\n  closeOnEscape = true,\n  children,\n  className = '',\n}: DialogProps): React.ReactElement | null {\n  const { tokens, theme } = useTheme();\n  const isTransparentTheme = theme === 'transparent' || theme === 'transparent-bold' || theme === 'transparent-minimal';\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const previousActiveElement = useRef<HTMLElement | null>(null);\n  const titleId = useId();\n  const DIALOG_Z_INDEX = 2147483000;\n  \n  const sizeConfig = {\n    small: { width: 'min(360px, calc(100vw - 32px))', maxHeight: '80vh' },\n    medium: { width: 'min(540px, calc(100vw - 32px))', maxHeight: '80vh' },\n    large: { width: 'min(800px, calc(100vw - 32px))', maxHeight: '90vh' },\n    fullscreen: { width: '100vw', maxHeight: '100vh' },\n  };\n  const config = sizeConfig[size];\n  \n  // Handle escape key\n  const handleKeyDown = useCallback((e: KeyboardEvent) => {\n    if (closeOnEscape && e.key === 'Escape') {\n      onClose();\n    }\n  }, [closeOnEscape, onClose]);\n  \n  // Focus trap and escape key\n  useEffect(() => {\n    if (open) {\n      previousActiveElement.current = document.activeElement as HTMLElement;\n      document.body.style.overflow = 'hidden';\n      document.addEventListener('keydown', handleKeyDown);\n      \n      // Focus first focusable element\n      const focusTimer = setTimeout(() => {\n        const focusable = dialogRef.current?.querySelector<HTMLElement>(\n          'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n        );\n        focusable?.focus();\n      }, 0);\n      \n      return () => {\n        clearTimeout(focusTimer);\n        document.body.style.overflow = '';\n        document.removeEventListener('keydown', handleKeyDown);\n        previousActiveElement.current?.focus();\n      };\n    }\n  }, [open, handleKeyDown]);\n  \n  if (!open) return null;\n  if (typeof document === 'undefined') return null;\n\n  return createPortal((\n    <div\n      className={classNames('zendir-dialog-backdrop', className)}\n      onClick={closeOnBackdropClick ? onClose : undefined}\n      style={{\n        position: 'fixed',\n        inset: 0,\n        backgroundColor: isTransparentTheme ? `${tokens.colors.background.base}66` : `${tokens.colors.background.base}99`,\n        backdropFilter: isTransparentTheme ? 'blur(4px)' : undefined,\n        WebkitBackdropFilter: isTransparentTheme ? 'blur(4px)' : undefined,\n        display: 'flex',\n        alignItems: size === 'fullscreen' ? 'stretch' : 'center',\n        justifyContent: 'center',\n        zIndex: DIALOG_Z_INDEX,\n        animation: `zendir-dialog-backdrop ${tokens.animation.duration.normal}ms ${tokens.animation.easing.default} both`,\n      }}\n    >\n      <div\n        ref={dialogRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={title ? titleId : undefined}\n        className=\"zendir-dialog\"\n        onClick={(e) => e.stopPropagation()}\n        style={{\n          width: config.width,\n          maxWidth: size === 'fullscreen' ? '100vw' : 'calc(100vw - 32px)',\n          maxHeight: config.maxHeight,\n          backgroundColor: isTransparentTheme ? 'rgba(139, 92, 246, 0.08)' : tokens.colors.background.surface,\n          ...(isTransparentTheme && { backdropFilter: 'blur(16px)', WebkitBackdropFilter: 'blur(16px)', border: '1px solid rgba(139, 92, 246, 0.2)' }),\n          borderRadius: size === 'fullscreen' ? 0 : tokens.borderRadius.lg,\n          boxShadow: tokens.shadows.xl,\n          display: 'flex',\n          flexDirection: 'column',\n          overflow: 'hidden',\n          animation: `zendir-dialog-panel ${tokens.animation.duration.normal}ms ${tokens.animation.easing.default} both`,\n        }}\n      >\n        {/* Header */}\n        {(title || showCloseButton) && (\n          <div\n            style={{\n              display: 'flex',\n              alignItems: 'center',\n              justifyContent: 'space-between',\n              padding: `${tokens.spacing.md} ${tokens.spacing.lg}`,\n              borderBottom: tokens.borders.divider,\n            }}\n          >\n            {title && (\n              <h2\n                id={titleId}\n                style={{\n                  margin: 0,\n                  fontSize: tokens.typography.fontSize.lg,\n                  fontWeight: tokens.typography.fontWeight.semibold,\n                  color: tokens.colors.text.primary,\n                }}\n              >\n                {title}\n              </h2>\n            )}\n            {showCloseButton && (\n              <button\n                type=\"button\"\n                onClick={onClose}\n                aria-label=\"Close dialog\"\n                style={{\n                  padding: tokens.spacing.sm,\n                  minWidth: 44,\n                  minHeight: 44,\n                  backgroundColor: 'transparent',\n                  border: 'none',\n                  borderRadius: tokens.borderRadius.sm,\n                  cursor: 'pointer',\n                  color: tokens.colors.text.muted ?? tokens.colors.text.tertiary,\n                  display: 'flex',\n                  alignItems: 'center',\n                  justifyContent: 'center',\n                  transition: `color ${tokens.animation.fast}`,\n                }}\n                onMouseEnter={(e) => {\n                  e.currentTarget.style.color = tokens.colors.text.primary;\n                }}\n                onMouseLeave={(e) => {\n                  e.currentTarget.style.color = tokens.colors.text.muted ?? tokens.colors.text.tertiary;\n                }}\n              >\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                  <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" />\n                </svg>\n              </button>\n            )}\n          </div>\n        )}\n        \n        {/* Content */}\n        <div\n          style={{\n            flex: 1,\n            padding: tokens.spacing.lg,\n            overflow: 'auto',\n          }}\n        >\n          {children}\n        </div>\n      </div>\n      \n      <style>\n        {`\n          @keyframes zendir-dialog-backdrop { from { opacity: 0; } to { opacity: 1; } }\n          @keyframes zendir-dialog-panel { from { transform: scale(0.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }\n        `}\n      </style>\n    </div>\n  ), document.body);\n}) as React.NamedExoticComponent<DialogProps> & {\n  Actions: typeof DialogActions;\n};\n\n// Attach subcomponent\n(Dialog as any).Actions = DialogActions;\n\nexport default Dialog;\n"],"names":["DialogActions","Dialog"],"mappings":"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"}

package/dist/react/core/FileExplorer.d.ts

@@ -0,0 +1,65 @@
+import { default as React } from 'react';
+
+export interface FileNode {
+    /** File/folder name */
+    name: string;
+    /** Full path */
+    path: string;
+    /** Whether this is a directory */
+    isDirectory: boolean;
+    /** File size in bytes (for files) */
+    size?: number;
+    /** Last modified date */
+    modified?: string | Date;
+    /** MIME type */
+    mimeType?: string;
+    /** Children (for directories) */
+    children?: FileNode[];
+    /** Custom icon name */
+    icon?: string;
+    /** Whether the file is readonly */
+    readonly?: boolean;
+}
+export type FileViewMode = 'tree' | 'list';
+export type FileSortBy = 'name' | 'size' | 'modified';
+export type FileSortDir = 'asc' | 'desc';
+export interface FileExplorerProps {
+    /** Root file tree */
+    files: FileNode[];
+    /** Height (default: 500) */
+    height?: number | string;
+    /** Title */
+    title?: string;
+    /** View mode (default: 'list') */
+    viewMode?: FileViewMode;
+    /** Show search bar (default: true) */
+    showSearch?: boolean;
+    /** Show breadcrumbs (default: true) */
+    showBreadcrumbs?: boolean;
+    /** Show file details (size, date) (default: true) */
+    showDetails?: boolean;
+    /** Allow multi-select (default: false) */
+    multiSelect?: boolean;
+    /** Allow upload (default: false) */
+    allowUpload?: boolean;
+    /** Allow delete (default: false) */
+    allowDelete?: boolean;
+    /** Called when a file is opened/double-clicked */
+    onFileOpen?: (file: FileNode) => void;
+    /** Called when download is requested */
+    onFileDownload?: (file: FileNode) => void;
+    /** Called when delete is requested */
+    onFileDelete?: (files: FileNode[]) => void;
+    /** Called when files are uploaded */
+    onFileUpload?: (files: File[], targetPath: string) => void;
+    /** Called when selection changes */
+    onSelectionChange?: (files: FileNode[]) => void;
+    /** CSS class */
+    className?: string;
+    /** Show outer container border (default: true). Set false when embedded inside a Container/card. */
+    bordered?: boolean;
+    /** Custom style overrides for the outer container */
+    style?: React.CSSProperties;
+}
+export declare const FileExplorer: React.NamedExoticComponent<FileExplorerProps>;
+export default FileExplorer;