@zendir/ui 0.1.0

package/dist/react/core/Pagination.js

@@ -0,0 +1,190 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+import { classNames } from "../utils/index.js";
+import { useTheme } from "../theme/ThemeProvider.js";
+const Pagination = memo(function Pagination2({
+  currentPage,
+  totalPages,
+  onChange,
+  siblingCount = 1,
+  showFirstLast = true,
+  showPrevNext = true,
+  size = "medium",
+  displayMode = "buttons",
+  disabled = false,
+  className = ""
+}) {
+  const { tokens, theme } = useTheme();
+  const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
+  const sizeConfig = {
+    small: { buttonSize: "28px", fontSize: tokens.typography.fontSize.xxs },
+    medium: { buttonSize: "34px", fontSize: tokens.typography.fontSize.xs }
+  };
+  const config = sizeConfig[size];
+  const pageNumbers = useMemo(() => {
+    const range = [];
+    const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
+    const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);
+    const showLeftEllipsis = leftSiblingIndex > 2;
+    const showRightEllipsis = rightSiblingIndex < totalPages - 1;
+    if (!showLeftEllipsis && showRightEllipsis) {
+      const leftRange = Array.from({ length: 3 + 2 * siblingCount }, (_, i) => i + 1);
+      range.push(...leftRange, "ellipsis", totalPages);
+    } else if (showLeftEllipsis && !showRightEllipsis) {
+      const rightRange = Array.from(
+        { length: 3 + 2 * siblingCount },
+        (_, i) => totalPages - 3 - 2 * siblingCount + i + 1
+      );
+      range.push(1, "ellipsis", ...rightRange);
+    } else if (showLeftEllipsis && showRightEllipsis) {
+      const middleRange = Array.from(
+        { length: 2 * siblingCount + 1 },
+        (_, i) => leftSiblingIndex + i
+      );
+      range.push(1, "ellipsis", ...middleRange, "ellipsis", totalPages);
+    } else {
+      range.push(...Array.from({ length: totalPages }, (_, i) => i + 1));
+    }
+    return range;
+  }, [currentPage, totalPages, siblingCount]);
+  const buttonStyle = {
+    width: config.buttonSize,
+    height: config.buttonSize,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: config.fontSize,
+    fontFamily: tokens.typography.fontFamily.mono,
+    fontWeight: tokens.typography.fontWeight.medium,
+    backgroundColor: isTransparentTheme ? `${tokens.colors.background.surface}99` : "transparent",
+    border: `1px solid ${tokens.colors.border.muted}`,
+    borderRadius: tokens.borderRadius.md,
+    cursor: disabled ? "not-allowed" : "pointer",
+    opacity: disabled ? 0.5 : 1,
+    transition: `all ${tokens.animation.fast}`,
+    color: tokens.colors.text.primary,
+    backdropFilter: isTransparentTheme ? "blur(8px)" : void 0,
+    WebkitBackdropFilter: isTransparentTheme ? "blur(8px)" : void 0
+  };
+  const activeButtonStyle = {
+    ...buttonStyle,
+    backgroundColor: tokens.colors.accent.primary,
+    borderColor: tokens.colors.accent.primary,
+    color: tokens.colors.text.inverse,
+    boxShadow: `0 0 0 1px ${tokens.colors.accent.primary}55, 0 0 14px ${tokens.colors.accent.primary}55`
+  };
+  const handleClick = (page) => {
+    if (!disabled && page >= 1 && page <= totalPages && page !== currentPage) {
+      onChange(page);
+    }
+  };
+  const NavButton = ({
+    direction,
+    targetPage,
+    children
+  }) => {
+    const isDisabled = disabled || (direction === "first" || direction === "prev" ? currentPage <= 1 : currentPage >= totalPages);
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => handleClick(targetPage),
+        disabled: isDisabled,
+        "aria-label": direction === "first" ? "Go to first page" : direction === "prev" ? "Go to previous page" : direction === "next" ? "Go to next page" : "Go to last page",
+        style: {
+          ...buttonStyle,
+          opacity: isDisabled ? 0.3 : 1,
+          cursor: isDisabled ? "not-allowed" : "pointer"
+        },
+        children
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      className: classNames("zendir-pagination", className),
+      "aria-label": "Pagination",
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: tokens.spacing.xs,
+        padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,
+        borderRadius: tokens.borderRadius.lg,
+        ...tokens.colors.border.cardStyle ?? { border: `1px solid ${tokens.colors.border.muted}` },
+        background: isTransparentTheme ? `${tokens.colors.background.surface}66` : `${tokens.colors.background.surface}66`,
+        backdropFilter: isTransparentTheme ? "blur(10px)" : void 0,
+        WebkitBackdropFilter: isTransparentTheme ? "blur(10px)" : void 0
+      },
+      children: [
+        showFirstLast && /* @__PURE__ */ jsx(NavButton, { direction: "first", targetPage: 1, children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z" }) }) }),
+        showPrevNext && /* @__PURE__ */ jsx(NavButton, { direction: "prev", targetPage: currentPage - 1, children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" }) }) }),
+        displayMode === "text" ? /* @__PURE__ */ jsxs(
+          "span",
+          {
+            style: {
+              padding: `0 ${tokens.spacing.sm}`,
+              color: tokens.colors.text.secondary,
+              fontSize: tokens.typography.fontSize.xs,
+              fontFamily: tokens.typography.fontFamily.mono,
+              letterSpacing: "0.02em",
+              whiteSpace: "nowrap"
+            },
+            children: [
+              "Page ",
+              currentPage,
+              " of ",
+              totalPages
+            ]
+          }
+        ) : pageNumbers.map(
+          (page, index) => page === "ellipsis" ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                width: config.buttonSize,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                color: tokens.colors.text.muted
+              },
+              children: "..."
+            },
+            `ellipsis-${index}`
+          ) : /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => handleClick(page),
+              disabled,
+              "aria-current": page === currentPage ? "page" : void 0,
+              style: page === currentPage ? activeButtonStyle : buttonStyle,
+              onMouseEnter: (e) => {
+                if (!disabled && page !== currentPage) {
+                  e.currentTarget.style.backgroundColor = `${tokens.colors.accent.primary}22`;
+                  e.currentTarget.style.borderColor = tokens.colors.accent.primary;
+                  e.currentTarget.style.transform = "translateY(-1px)";
+                }
+              },
+              onMouseLeave: (e) => {
+                if (!disabled && page !== currentPage) {
+                  e.currentTarget.style.backgroundColor = isTransparentTheme ? `${tokens.colors.background.surface}99` : "transparent";
+                  e.currentTarget.style.borderColor = tokens.colors.border.muted;
+                  e.currentTarget.style.transform = "translateY(0)";
+                }
+              },
+              children: page
+            },
+            page
+          )
+        ),
+        showPrevNext && /* @__PURE__ */ jsx(NavButton, { direction: "next", targetPage: currentPage + 1, children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" }) }) }),
+        showFirstLast && /* @__PURE__ */ jsx(NavButton, { direction: "last", targetPage: totalPages, children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z" }) }) })
+      ]
+    }
+  );
+});
+export {
+  Pagination
+};
+//# sourceMappingURL=Pagination.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.js","sources":["../../../src/react/core/Pagination.tsx"],"sourcesContent":["/**\n * @zendir/ui - Pagination Component\n * \n * Pagination following Astro UX Design System.\n * \n * @example\n * ```tsx\n * <Pagination\n *   currentPage={page}\n *   totalPages={10}\n *   onChange={setPage}\n * />\n * ```\n */\n\nimport React, { memo, useMemo } from 'react';\nimport { useTheme } from '../theme';\nimport { classNames } from '../utils';\n\nexport interface PaginationProps {\n  /** Current page (1-indexed) */\n  currentPage: number;\n  /** Total number of pages */\n  totalPages: number;\n  /** Change handler */\n  onChange: (page: number) => void;\n  /** Number of page buttons to show */\n  siblingCount?: number;\n  /** Show first/last buttons */\n  showFirstLast?: boolean;\n  /** Show prev/next buttons */\n  showPrevNext?: boolean;\n  /** Size variant */\n  size?: 'small' | 'medium';\n  /**\n   * Display mode.\n   * - `'buttons'` — numbered page buttons with ellipsis (default).\n   * - `'text'`    — compact \"Page X of Y\" label with prev/next arrows.\n   */\n  displayMode?: 'buttons' | 'text';\n  /** Disabled state */\n  disabled?: boolean;\n  /** Custom className */\n  className?: string;\n}\n\nexport const Pagination = memo(function Pagination({\n  currentPage,\n  totalPages,\n  onChange,\n  siblingCount = 1,\n  showFirstLast = true,\n  showPrevNext = true,\n  size = 'medium',\n  displayMode = 'buttons',\n  disabled = false,\n  className = '',\n}: PaginationProps): React.ReactElement {\n  const { tokens, theme } = useTheme();\n  const isTransparentTheme =\n    theme === 'transparent' || theme === 'transparent-bold' || theme === 'transparent-minimal';\n  \n  const sizeConfig = {\n    small: { buttonSize: '28px', fontSize: tokens.typography.fontSize.xxs },\n    medium: { buttonSize: '34px', fontSize: tokens.typography.fontSize.xs },\n  };\n  const config = sizeConfig[size];\n  \n  // Calculate visible page numbers\n  const pageNumbers = useMemo(() => {\n    const range: (number | 'ellipsis')[] = [];\n    const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);\n    const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);\n    \n    const showLeftEllipsis = leftSiblingIndex > 2;\n    const showRightEllipsis = rightSiblingIndex < totalPages - 1;\n    \n    if (!showLeftEllipsis && showRightEllipsis) {\n      const leftRange = Array.from({ length: 3 + 2 * siblingCount }, (_, i) => i + 1);\n      range.push(...leftRange, 'ellipsis', totalPages);\n    } else if (showLeftEllipsis && !showRightEllipsis) {\n      const rightRange = Array.from(\n        { length: 3 + 2 * siblingCount },\n        (_, i) => totalPages - 3 - 2 * siblingCount + i + 1\n      );\n      range.push(1, 'ellipsis', ...rightRange);\n    } else if (showLeftEllipsis && showRightEllipsis) {\n      const middleRange = Array.from(\n        { length: 2 * siblingCount + 1 },\n        (_, i) => leftSiblingIndex + i\n      );\n      range.push(1, 'ellipsis', ...middleRange, 'ellipsis', totalPages);\n    } else {\n      range.push(...Array.from({ length: totalPages }, (_, i) => i + 1));\n    }\n    \n    return range;\n  }, [currentPage, totalPages, siblingCount]);\n  \n  const buttonStyle: React.CSSProperties = {\n    width: config.buttonSize,\n    height: config.buttonSize,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    fontSize: config.fontSize,\n    fontFamily: tokens.typography.fontFamily.mono,\n    fontWeight: tokens.typography.fontWeight.medium,\n    backgroundColor: isTransparentTheme ? `${tokens.colors.background.surface}99` : 'transparent',\n    border: `1px solid ${tokens.colors.border.muted}`,\n    borderRadius: tokens.borderRadius.md,\n    cursor: disabled ? 'not-allowed' : 'pointer',\n    opacity: disabled ? 0.5 : 1,\n    transition: `all ${tokens.animation.fast}`,\n    color: tokens.colors.text.primary,\n    backdropFilter: isTransparentTheme ? 'blur(8px)' : undefined,\n    WebkitBackdropFilter: isTransparentTheme ? 'blur(8px)' : undefined,\n  };\n  \n  const activeButtonStyle: React.CSSProperties = {\n    ...buttonStyle,\n    backgroundColor: tokens.colors.accent.primary,\n    borderColor: tokens.colors.accent.primary,\n    color: tokens.colors.text.inverse,\n    boxShadow: `0 0 0 1px ${tokens.colors.accent.primary}55, 0 0 14px ${tokens.colors.accent.primary}55`,\n  };\n  \n  const handleClick = (page: number) => {\n    if (!disabled && page >= 1 && page <= totalPages && page !== currentPage) {\n      onChange(page);\n    }\n  };\n  \n  const NavButton = ({ \n    direction, \n    targetPage, \n    children \n  }: { \n    direction: 'first' | 'prev' | 'next' | 'last'; \n    targetPage: number;\n    children: React.ReactNode;\n  }) => {\n    const isDisabled = disabled || \n      (direction === 'first' || direction === 'prev' ? currentPage <= 1 : currentPage >= totalPages);\n    \n    return (\n      <button\n        type=\"button\"\n        onClick={() => handleClick(targetPage)}\n        disabled={isDisabled}\n        aria-label={\n        direction === 'first' ? 'Go to first page' :\n        direction === 'prev' ? 'Go to previous page' :\n        direction === 'next' ? 'Go to next page' :\n        'Go to last page'\n      }\n        style={{\n          ...buttonStyle,\n          opacity: isDisabled ? 0.3 : 1,\n          cursor: isDisabled ? 'not-allowed' : 'pointer',\n        }}\n      >\n        {children}\n      </button>\n    );\n  };\n  \n  return (\n    <nav\n      className={classNames('zendir-pagination', className)}\n      aria-label=\"Pagination\"\n      style={{\n        display: 'flex',\n        alignItems: 'center',\n        gap: tokens.spacing.xs,\n        padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,\n        borderRadius: tokens.borderRadius.lg,\n        ...(tokens.colors.border.cardStyle ?? { border: `1px solid ${tokens.colors.border.muted}` }),\n        background: isTransparentTheme ? `${tokens.colors.background.surface}66` : `${tokens.colors.background.surface}66`,\n        backdropFilter: isTransparentTheme ? 'blur(10px)' : undefined,\n        WebkitBackdropFilter: isTransparentTheme ? 'blur(10px)' : undefined,\n      }}\n    >\n      {showFirstLast && (\n        <NavButton direction=\"first\" targetPage={1}>\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path d=\"M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z\" />\n          </svg>\n        </NavButton>\n      )}\n      \n      {showPrevNext && (\n        <NavButton direction=\"prev\" targetPage={currentPage - 1}>\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\" />\n          </svg>\n        </NavButton>\n      )}\n      \n      {displayMode === 'text' ? (\n        <span\n          style={{\n            padding: `0 ${tokens.spacing.sm}`,\n            color: tokens.colors.text.secondary,\n            fontSize: tokens.typography.fontSize.xs,\n            fontFamily: tokens.typography.fontFamily.mono,\n            letterSpacing: '0.02em',\n            whiteSpace: 'nowrap',\n          }}\n        >\n          Page {currentPage} of {totalPages}\n        </span>\n      ) : (\n        pageNumbers.map((page, index) => \n          page === 'ellipsis' ? (\n            <span\n              key={`ellipsis-${index}`}\n              style={{\n                width: config.buttonSize,\n                display: 'flex',\n                alignItems: 'center',\n                justifyContent: 'center',\n                color: tokens.colors.text.muted,\n              }}\n            >\n              ...\n            </span>\n          ) : (\n            <button\n              key={page}\n              type=\"button\"\n              onClick={() => handleClick(page)}\n              disabled={disabled}\n              aria-current={page === currentPage ? 'page' : undefined}\n              style={page === currentPage ? activeButtonStyle : buttonStyle}\n              onMouseEnter={(e) => {\n                if (!disabled && page !== currentPage) {\n                  e.currentTarget.style.backgroundColor = `${tokens.colors.accent.primary}22`;\n                  e.currentTarget.style.borderColor = tokens.colors.accent.primary;\n                  e.currentTarget.style.transform = 'translateY(-1px)';\n                }\n              }}\n              onMouseLeave={(e) => {\n                if (!disabled && page !== currentPage) {\n                  e.currentTarget.style.backgroundColor = isTransparentTheme ? `${tokens.colors.background.surface}99` : 'transparent';\n                  e.currentTarget.style.borderColor = tokens.colors.border.muted;\n                  e.currentTarget.style.transform = 'translateY(0)';\n                }\n              }}\n            >\n              {page}\n            </button>\n          )\n        )\n      )}\n      \n      {showPrevNext && (\n        <NavButton direction=\"next\" targetPage={currentPage + 1}>\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n          </svg>\n        </NavButton>\n      )}\n      \n      {showFirstLast && (\n        <NavButton direction=\"last\" targetPage={totalPages}>\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path d=\"M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z\" />\n          </svg>\n        </NavButton>\n      )}\n    </nav>\n  );\n});\n\nexport default Pagination;\n"],"names":["Pagination"],"mappings":"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"}

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

@@ -0,0 +1,41 @@
+import { default as React } from 'react';
+import { LabelPlacement } from './Input';
+
+export interface PinInputProps {
+    /** Number of character cells (default 6; any positive number, e.g. 4, 6, 8) */
+    length?: number;
+    /** Input type */
+    type?: 'numeric' | 'alphanumeric';
+    /** Current value */
+    value: string;
+    /** Change handler */
+    onChange: (value: string) => void;
+    /** Label text or ReactNode (supports rich content like tooltip icons) */
+    label?: React.ReactNode;
+    /** Helper text */
+    helperText?: string;
+    /** Error state */
+    error?: boolean | string;
+    /** Disabled */
+    disabled?: boolean;
+    /** Mask characters (password mode) */
+    mask?: boolean;
+    /** Size */
+    size?: 'small' | 'medium' | 'large';
+    /** Auto-focus first cell on mount */
+    autoFocus?: boolean;
+    /** Callback when all cells filled */
+    onComplete?: (value: string) => void;
+    /**
+     * Label placement style.
+     * - `'outlined'` — label sits on the border of a surrounding container. **Default.**
+     * - `'above'`    — label sits above the cells with a gap (classic stack).
+     */
+    labelPlacement?: LabelPlacement;
+    /** Required indicator */
+    required?: boolean;
+    /** Stretch to full width of container (cells share width equally, same as standard inputs) */
+    fullWidth?: boolean;
+}
+export declare const PinInput: React.NamedExoticComponent<PinInputProps>;
+export default PinInput;

package/dist/react/core/PinInput.js

@@ -0,0 +1,210 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { memo, useRef, useState, useEffect, useCallback } from "react";
+import { useBreakpoint } from "./layout/useBreakpoint.js";
+import { useTheme } from "../theme/ThemeProvider.js";
+const PinInput = memo(function PinInput2({
+  length = 6,
+  type = "alphanumeric",
+  value,
+  onChange,
+  label,
+  helperText,
+  error,
+  disabled = false,
+  mask = false,
+  size = "medium",
+  autoFocus = false,
+  onComplete,
+  labelPlacement = "outlined",
+  required,
+  fullWidth = false
+}) {
+  const { tokens, theme } = useTheme();
+  const { isMobile } = useBreakpoint();
+  const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
+  const refs = useRef([]);
+  const [focusedIndex, setFocusedIndex] = useState(null);
+  const chars = value.split("").concat(Array(length).fill("")).slice(0, length);
+  useEffect(() => {
+    if (autoFocus && refs.current[0]) {
+      refs.current[0].focus();
+    }
+  }, [autoFocus]);
+  const reducedHeight = size === "small" ? "26px" : size === "medium" ? "34px" : "42px";
+  const controlHeight = isMobile ? "44px" : reducedHeight;
+  const sizeConfig = {
+    small: { fontSize: tokens.typography.fontSize.xs },
+    medium: { fontSize: tokens.typography.fontSize.sm },
+    large: { fontSize: tokens.typography.fontSize.base }
+  };
+  const config = { ...sizeConfig[size], height: controlHeight };
+  const isValid = (char) => {
+    if (type === "numeric") return /^[0-9]$/.test(char);
+    return /^[a-zA-Z0-9]$/.test(char);
+  };
+  const handleChange = useCallback((index, inputValue) => {
+    var _a, _b;
+    if (inputValue.length > 1) {
+      const normalized = inputValue.replace(/\s/g, "");
+      const filtered = normalized.split("").filter(isValid).slice(0, length);
+      const newValue2 = filtered.join("");
+      onChange(newValue2);
+      const nextIndex = Math.min(filtered.length, length - 1);
+      (_a = refs.current[nextIndex]) == null ? void 0 : _a.focus();
+      if (filtered.length === length) onComplete == null ? void 0 : onComplete(newValue2);
+      return;
+    }
+    const char = inputValue;
+    if (char && !isValid(char)) return;
+    const newChars = [...chars];
+    newChars[index] = char.toUpperCase();
+    const newValue = newChars.join("").replace(/\s/g, "");
+    onChange(newValue);
+    if (char && index < length - 1) {
+      (_b = refs.current[index + 1]) == null ? void 0 : _b.focus();
+    }
+    if (newValue.length === length) {
+      onComplete == null ? void 0 : onComplete(newValue);
+    }
+  }, [chars, length, onChange, onComplete, type]);
+  const handleKeyDown = useCallback((index, e) => {
+    var _a, _b, _c;
+    if (e.key === "Backspace") {
+      if (!chars[index] && index > 0) {
+        (_a = refs.current[index - 1]) == null ? void 0 : _a.focus();
+        const newChars = [...chars];
+        newChars[index - 1] = "";
+        onChange(newChars.join(""));
+      }
+    } else if (e.key === "ArrowLeft" && index > 0) {
+      (_b = refs.current[index - 1]) == null ? void 0 : _b.focus();
+    } else if (e.key === "ArrowRight" && index < length - 1) {
+      (_c = refs.current[index + 1]) == null ? void 0 : _c.focus();
+    }
+  }, [chars, length, onChange]);
+  const hasError = !!error;
+  const errorMessage = typeof error === "string" ? error : void 0;
+  const inputBg = isTransparentTheme ? tokens.colors.interactive.transparentInputBg || "rgba(139, 92, 246, 0.08)" : tokens.colors.background.surface;
+  const isOutlined = labelPlacement === "outlined";
+  const isFocused = focusedIndex !== null;
+  const labelBg = isTransparentTheme ? tokens.colors.background.base : tokens.colors.background.surface;
+  const outlinedLabelSizeMap = { small: "0.625rem", medium: "0.6875rem", large: "0.75rem" };
+  const outlinedLabelLeftMap = { small: "2px", medium: "2px", large: "2px" };
+  const labelContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+    label,
+    required && /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.status.critical, marginLeft: "2px" }, children: "*" })
+  ] });
+  const cellsEl = /* @__PURE__ */ jsx("div", { style: {
+    display: "flex",
+    gap: tokens.spacing.xs,
+    width: fullWidth ? "100%" : void 0
+  }, children: Array.from({ length }, (_, i) => /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref: (el) => {
+        refs.current[i] = el;
+      },
+      type: mask ? "password" : "text",
+      inputMode: type === "numeric" ? "numeric" : "text",
+      maxLength: 1,
+      value: chars[i] || "",
+      onChange: (e) => handleChange(i, e.target.value),
+      onKeyDown: (e) => handleKeyDown(i, e),
+      onFocus: () => setFocusedIndex(i),
+      onBlur: () => setFocusedIndex(null),
+      onPaste: (e) => {
+        e.preventDefault();
+        handleChange(i, e.clipboardData.getData("text"));
+      },
+      disabled,
+      "aria-label": `Character ${i + 1} of ${length}`,
+      "aria-invalid": hasError || void 0,
+      "aria-describedby": errorMessage ? "zendir-pin-error" : helperText ? "zendir-pin-helper" : void 0,
+      style: {
+        ...fullWidth ? { flex: 1, minWidth: 0 } : { width: controlHeight },
+        height: config.height,
+        textAlign: "center",
+        fontSize: config.fontSize,
+        fontWeight: tokens.typography.fontWeight.bold,
+        fontFamily: tokens.typography.fontFamily.mono,
+        fontVariantNumeric: "tabular-nums",
+        color: tokens.colors.text.primary,
+        backgroundColor: isOutlined ? "transparent" : inputBg,
+        border: isOutlined ? "none" : hasError ? `${tokens.borders.width.medium} solid ${tokens.colors.status.critical}` : focusedIndex === i ? `${tokens.borders.width.medium} solid ${tokens.colors.accent.primary}` : chars[i] ? `${tokens.borders.width.medium} solid ${tokens.colors.border.default}` : `${tokens.borders.width.medium} solid ${tokens.colors.border.muted}`,
+        borderRadius: isOutlined ? 0 : tokens.borderRadius.md,
+        outline: "none",
+        transition: tokens.animation.fast,
+        opacity: disabled ? 0.5 : 1,
+        cursor: disabled ? "not-allowed" : "text",
+        ...!isOutlined && focusedIndex === i ? {
+          boxShadow: tokens.borders.focusRing.subtle
+        } : {}
+      }
+    },
+    i
+  )) });
+  return /* @__PURE__ */ jsxs("div", { style: {
+    fontFamily: tokens.typography.fontFamily.primary,
+    width: fullWidth ? "100%" : void 0
+  }, children: [
+    label && !isOutlined && /* @__PURE__ */ jsx("div", { style: {
+      fontSize: tokens.typography.fontSize.xs,
+      fontWeight: tokens.typography.fontWeight.medium,
+      color: tokens.colors.text.secondary,
+      letterSpacing: tokens.typography.letterSpacing.wide,
+      marginBottom: tokens.spacing.xs
+    }, children: labelContent }),
+    isOutlined ? /* @__PURE__ */ jsxs("div", { style: {
+      position: "relative",
+      width: fullWidth ? "100%" : void 0,
+      minHeight: controlHeight,
+      border: hasError ? tokens.borders.input.error : isFocused ? tokens.borders.input.focus : tokens.borders.input.default,
+      borderRadius: tokens.borderRadius.md,
+      padding: `0 ${tokens.spacing.sm}`,
+      display: "flex",
+      alignItems: "center",
+      backgroundColor: inputBg,
+      transition: tokens.animation.fast,
+      boxSizing: "border-box",
+      ...isFocused ? {
+        boxShadow: tokens.borders.focusRing.subtle
+      } : {}
+    }, children: [
+      label && /* @__PURE__ */ jsx("div", { style: {
+        position: "absolute",
+        top: 0,
+        left: outlinedLabelLeftMap[size],
+        transform: "translateY(-50%)",
+        backgroundColor: labelBg,
+        padding: `0 ${tokens.spacing.xs}`,
+        fontSize: outlinedLabelSizeMap[size],
+        fontWeight: tokens.typography.fontWeight.medium,
+        color: isFocused ? hasError ? tokens.colors.status.critical : tokens.colors.accent.primary : hasError ? tokens.colors.status.critical : tokens.colors.text.secondary,
+        letterSpacing: tokens.typography.letterSpacing.wide,
+        zIndex: 1,
+        pointerEvents: "none",
+        transition: tokens.animation.fast,
+        lineHeight: 1.2,
+        whiteSpace: "nowrap"
+      }, children: labelContent }),
+      cellsEl
+    ] }) : cellsEl,
+    (helperText || errorMessage) && /* @__PURE__ */ jsx(
+      "div",
+      {
+        id: errorMessage ? "zendir-pin-error" : "zendir-pin-helper",
+        role: errorMessage ? "alert" : void 0,
+        style: {
+          fontSize: tokens.typography.fontSize.xs,
+          color: hasError ? tokens.colors.status.critical : tokens.colors.text.tertiary,
+          marginTop: tokens.spacing.xs
+        },
+        children: errorMessage || helperText
+      }
+    )
+  ] });
+});
+export {
+  PinInput
+};
+//# sourceMappingURL=PinInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PinInput.js","sources":["../../../src/react/core/PinInput.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - PinInput Component\r\n * \r\n * Multi-character code entry for passwords, verification codes, and team IDs.\r\n * Auto-advances focus between cells. Supports numeric and alphanumeric modes.\r\n * \r\n * Astro UX Compliance:\r\n * - Consistent styling with Input component\r\n * - Focus ring for accessibility\r\n * - Monospace tabular numbers\r\n * \r\n * @example\r\n * ```tsx\r\n * <PinInput length={6} type=\"alphanumeric\" value={password} onChange={setPassword} label=\"Team Password\" />\r\n * <PinInput length={4} type=\"numeric\" value={code} onChange={setCode} label=\"Verification Code\" />\r\n * <PinInput length={8} value={token} onChange={setToken} label=\"API Token\" />\r\n * ```\r\n */\r\n\r\nimport React, { memo, useState, useRef, useCallback, useEffect } from 'react';\r\nimport { useTheme } from '../theme';\r\nimport type { LabelPlacement } from './Input';\r\nimport { useBreakpoint } from './layout/useBreakpoint';\r\n\r\nexport interface PinInputProps {\r\n  /** Number of character cells (default 6; any positive number, e.g. 4, 6, 8) */\r\n  length?: number;\r\n  /** Input type */\r\n  type?: 'numeric' | 'alphanumeric';\r\n  /** Current value */\r\n  value: string;\r\n  /** Change handler */\r\n  onChange: (value: string) => void;\r\n  /** Label text or ReactNode (supports rich content like tooltip icons) */\r\n  label?: React.ReactNode;\r\n  /** Helper text */\r\n  helperText?: string;\r\n  /** Error state */\r\n  error?: boolean | string;\r\n  /** Disabled */\r\n  disabled?: boolean;\r\n  /** Mask characters (password mode) */\r\n  mask?: boolean;\r\n  /** Size */\r\n  size?: 'small' | 'medium' | 'large';\r\n  /** Auto-focus first cell on mount */\r\n  autoFocus?: boolean;\r\n  /** Callback when all cells filled */\r\n  onComplete?: (value: string) => void;\r\n  /**\r\n   * Label placement style.\r\n   * - `'outlined'` — label sits on the border of a surrounding container. **Default.**\r\n   * - `'above'`    — label sits above the cells with a gap (classic stack).\r\n   */\r\n  labelPlacement?: LabelPlacement;\r\n  /** Required indicator */\r\n  required?: boolean;\r\n  /** Stretch to full width of container (cells share width equally, same as standard inputs) */\r\n  fullWidth?: boolean;\r\n}\r\n\r\nexport const PinInput = memo(function PinInput({\r\n  length = 6,\r\n  type = 'alphanumeric',\r\n  value,\r\n  onChange,\r\n  label,\r\n  helperText,\r\n  error,\r\n  disabled = false,\r\n  mask = false,\r\n  size = 'medium',\r\n  autoFocus = false,\r\n  onComplete,\r\n  labelPlacement = 'outlined',\r\n  required,\r\n  fullWidth = false,\r\n}: PinInputProps): React.ReactElement {\r\n  const { tokens, theme } = useTheme();\r\n  const { isMobile } = useBreakpoint();\r\n  const isTransparentTheme = theme === 'transparent' || theme === 'transparent-bold' || theme === 'transparent-minimal';\r\n  const refs = useRef<(HTMLInputElement | null)[]>([]);\r\n  const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\r\n  \r\n  const chars = value.split('').concat(Array(length).fill('')).slice(0, length);\r\n  \r\n  useEffect(() => {\r\n    if (autoFocus && refs.current[0]) {\r\n      refs.current[0].focus();\r\n    }\r\n  }, [autoFocus]);\r\n  \r\n  // Between original tokens and the reduced set: slightly more height than 24/32/40, still less than 28/36/44\r\n  const reducedHeight = size === 'small' ? '26px' : size === 'medium' ? '34px' : '42px';\r\n  const controlHeight = isMobile ? '44px' : reducedHeight;\r\n  const sizeConfig = {\r\n    small: { fontSize: tokens.typography.fontSize.xs },\r\n    medium: { fontSize: tokens.typography.fontSize.sm },\r\n    large: { fontSize: tokens.typography.fontSize.base },\r\n  };\r\n  const config = { ...sizeConfig[size], height: controlHeight } as { height: string; fontSize: string };\r\n  \r\n  const isValid = (char: string): boolean => {\r\n    if (type === 'numeric') return /^[0-9]$/.test(char);\r\n    return /^[a-zA-Z0-9]$/.test(char);\r\n  };\r\n  \r\n  const handleChange = useCallback((index: number, inputValue: string) => {\r\n    // Handle paste (multiple characters). Strip spaces so pasted codes like \"12 34 56\" work.\r\n    if (inputValue.length > 1) {\r\n      const normalized = inputValue.replace(/\\s/g, '');\r\n      const filtered = normalized.split('').filter(isValid).slice(0, length);\r\n      const newValue = filtered.join('');\r\n      onChange(newValue);\r\n      const nextIndex = Math.min(filtered.length, length - 1);\r\n      refs.current[nextIndex]?.focus();\r\n      if (filtered.length === length) onComplete?.(newValue);\r\n      return;\r\n    }\r\n    \r\n    const char = inputValue;\r\n    if (char && !isValid(char)) return;\r\n    \r\n    const newChars = [...chars];\r\n    newChars[index] = char.toUpperCase();\r\n    const newValue = newChars.join('').replace(/\\s/g, '');\r\n    onChange(newValue);\r\n    \r\n    // Auto-advance\r\n    if (char && index < length - 1) {\r\n      refs.current[index + 1]?.focus();\r\n    }\r\n    \r\n    if (newValue.length === length) {\r\n      onComplete?.(newValue);\r\n    }\r\n  }, [chars, length, onChange, onComplete, type]);\r\n  \r\n  const handleKeyDown = useCallback((index: number, e: React.KeyboardEvent) => {\r\n    if (e.key === 'Backspace') {\r\n      if (!chars[index] && index > 0) {\r\n        refs.current[index - 1]?.focus();\r\n        const newChars = [...chars];\r\n        newChars[index - 1] = '';\r\n        onChange(newChars.join(''));\r\n      }\r\n    } else if (e.key === 'ArrowLeft' && index > 0) {\r\n      refs.current[index - 1]?.focus();\r\n    } else if (e.key === 'ArrowRight' && index < length - 1) {\r\n      refs.current[index + 1]?.focus();\r\n    }\r\n  }, [chars, length, onChange]);\r\n  \r\n  const hasError = !!error;\r\n  const errorMessage = typeof error === 'string' ? error : undefined;\r\n  \r\n  const inputBg = isTransparentTheme\r\n    ? (tokens.colors.interactive.transparentInputBg || 'rgba(139, 92, 246, 0.08)')\r\n    : tokens.colors.background.surface;\r\n  \r\n  const isOutlined = labelPlacement === 'outlined';\r\n  const isFocused = focusedIndex !== null;\r\n  \r\n  // Background for the outlined label \"notch\"\r\n  const labelBg = isTransparentTheme\r\n    ? tokens.colors.background.base\r\n    : tokens.colors.background.surface;\r\n  \r\n  // Outlined label font sizes\r\n  const outlinedLabelSizeMap = { small: '0.625rem', medium: '0.6875rem', large: '0.75rem' };\r\n  // Container always uses spacing.sm (8px) horizontal padding, so label left is always 8-6=2px\r\n  const outlinedLabelLeftMap = { small: '2px', medium: '2px', large: '2px' };\r\n  \r\n  // Shared label content\r\n  const labelContent = (\r\n    <>\r\n      {label}\r\n      {required && (\r\n        <span style={{ color: tokens.colors.status.critical, marginLeft: '2px' }}>*</span>\r\n      )}\r\n    </>\r\n  );\r\n  \r\n  // Cells renderer: fullWidth = cells share space (same total width as standard inputs); otherwise fixed square cells\r\n  const cellsEl = (\r\n    <div style={{\r\n      display: 'flex',\r\n      gap: tokens.spacing.xs,\r\n      width: fullWidth ? '100%' : undefined,\r\n    }}>\r\n      {Array.from({ length }, (_, i) => (\r\n        <input\r\n          key={i}\r\n          ref={el => { refs.current[i] = el; }}\r\n          type={mask ? 'password' : 'text'}\r\n          inputMode={type === 'numeric' ? 'numeric' : 'text'}\r\n          maxLength={1}\r\n          value={chars[i] || ''}\r\n          onChange={e => handleChange(i, e.target.value)}\r\n          onKeyDown={e => handleKeyDown(i, e)}\r\n          onFocus={() => setFocusedIndex(i)}\r\n          onBlur={() => setFocusedIndex(null)}\r\n          onPaste={e => {\r\n            e.preventDefault();\r\n            handleChange(i, e.clipboardData.getData('text'));\r\n          }}\r\n          disabled={disabled}\r\n          aria-label={`Character ${i + 1} of ${length}`}\r\n          aria-invalid={hasError || undefined}\r\n          aria-describedby={errorMessage ? 'zendir-pin-error' : helperText ? 'zendir-pin-helper' : undefined}\r\n          style={{\r\n            ...(fullWidth ? { flex: 1, minWidth: 0 } : { width: controlHeight }),\r\n            height: config.height,\r\n            textAlign: 'center',\r\n            fontSize: config.fontSize,\r\n            fontWeight: tokens.typography.fontWeight.bold,\r\n            fontFamily: tokens.typography.fontFamily.mono,\r\n            fontVariantNumeric: 'tabular-nums',\r\n            color: tokens.colors.text.primary,\r\n            backgroundColor: isOutlined ? 'transparent' : inputBg,\r\n            border: isOutlined ? 'none' : (\r\n              hasError\r\n                ? `${tokens.borders.width.medium} solid ${tokens.colors.status.critical}`\r\n                : focusedIndex === i\r\n                  ? `${tokens.borders.width.medium} solid ${tokens.colors.accent.primary}`\r\n                  : chars[i]\r\n                    ? `${tokens.borders.width.medium} solid ${tokens.colors.border.default}`\r\n                    : `${tokens.borders.width.medium} solid ${tokens.colors.border.muted}`\r\n            ),\r\n            borderRadius: isOutlined ? 0 : tokens.borderRadius.md,\r\n            outline: 'none',\r\n            transition: tokens.animation.fast,\r\n            opacity: disabled ? 0.5 : 1,\r\n            cursor: disabled ? 'not-allowed' : 'text',\r\n            ...(!isOutlined && focusedIndex === i ? {\r\n              boxShadow: tokens.borders.focusRing.subtle,\r\n            } : {}),\r\n          }}\r\n        />\r\n      ))}\r\n    </div>\r\n  );\r\n  \r\n  return (\r\n    <div style={{\r\n      fontFamily: tokens.typography.fontFamily.primary,\r\n      width: fullWidth ? '100%' : undefined,\r\n    }}>\r\n      {/* Label: 'above' variant */}\r\n      {label && !isOutlined && (\r\n        <div style={{\r\n          fontSize: tokens.typography.fontSize.xs,\r\n          fontWeight: tokens.typography.fontWeight.medium,\r\n          color: tokens.colors.text.secondary,\r\n          letterSpacing: tokens.typography.letterSpacing.wide,\r\n          marginBottom: tokens.spacing.xs,\r\n        }}>\r\n          {labelContent}\r\n        </div>\r\n      )}\r\n      \r\n      {/* Outlined variant: wrap cells in a bordered container with the label on the border */}\r\n      {isOutlined ? (\r\n        <div style={{\r\n          position: 'relative',\r\n          width: fullWidth ? '100%' : undefined,\r\n          minHeight: controlHeight,\r\n          border: hasError\r\n            ? tokens.borders.input.error\r\n            : isFocused\r\n              ? tokens.borders.input.focus\r\n              : tokens.borders.input.default,\r\n          borderRadius: tokens.borderRadius.md,\r\n          padding: `0 ${tokens.spacing.sm}`,\r\n          display: 'flex',\r\n          alignItems: 'center',\r\n          backgroundColor: inputBg,\r\n          transition: tokens.animation.fast,\r\n          boxSizing: 'border-box',\r\n          ...(isFocused ? {\r\n            boxShadow: tokens.borders.focusRing.subtle,\r\n          } : {}),\r\n        }}>\r\n          {label && (\r\n            <div style={{\r\n              position: 'absolute',\r\n              top: 0,\r\n              left: outlinedLabelLeftMap[size],\r\n              transform: 'translateY(-50%)',\r\n              backgroundColor: labelBg,\r\n              padding: `0 ${tokens.spacing.xs}`,\r\n              fontSize: outlinedLabelSizeMap[size],\r\n              fontWeight: tokens.typography.fontWeight.medium,\r\n              color: isFocused\r\n                ? (hasError ? tokens.colors.status.critical : tokens.colors.accent.primary)\r\n                : hasError\r\n                  ? tokens.colors.status.critical\r\n                  : tokens.colors.text.secondary,\r\n              letterSpacing: tokens.typography.letterSpacing.wide,\r\n              zIndex: 1,\r\n              pointerEvents: 'none',\r\n              transition: tokens.animation.fast,\r\n              lineHeight: 1.2,\r\n              whiteSpace: 'nowrap',\r\n            }}>\r\n              {labelContent}\r\n            </div>\r\n          )}\r\n          {cellsEl}\r\n        </div>\r\n      ) : (\r\n        cellsEl\r\n      )}\r\n      \r\n      {(helperText || errorMessage) && (\r\n        <div\r\n          id={errorMessage ? 'zendir-pin-error' : 'zendir-pin-helper'}\r\n          role={errorMessage ? 'alert' : undefined}\r\n          style={{\r\n            fontSize: tokens.typography.fontSize.xs,\r\n            color: hasError ? tokens.colors.status.critical : tokens.colors.text.tertiary,\r\n            marginTop: tokens.spacing.xs,\r\n          }}\r\n        >\r\n          {errorMessage || helperText}\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n});\r\n\r\nexport default PinInput;\r\n"],"names":["PinInput","newValue"],"mappings":"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"}

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

@@ -0,0 +1,55 @@
+import { default as React } from 'react';
+
+export type PopoverPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
+export interface PopoverProps {
+    /** Trigger element */
+    trigger: React.ReactElement;
+    /** Popover content */
+    children: React.ReactNode;
+    /** Placement relative to trigger */
+    placement?: PopoverPlacement;
+    /** Open on hover instead of click */
+    hover?: boolean;
+    /** Controlled open state */
+    open?: boolean;
+    /** Controlled open change */
+    onOpenChange?: (open: boolean) => void;
+    /** Close on content click */
+    closeOnClick?: boolean;
+    /** Width: 'trigger' matches trigger width, number for px, 'auto' */
+    width?: 'trigger' | 'auto' | number;
+    /** Custom style for popover panel */
+    style?: React.CSSProperties;
+}
+export declare const Popover: React.NamedExoticComponent<PopoverProps>;
+export interface MenuProps {
+    children: React.ReactNode;
+    style?: React.CSSProperties;
+}
+declare const MenuRoot: React.NamedExoticComponent<MenuProps>;
+export interface MenuItemProps {
+    /** Click handler */
+    onClick?: () => void;
+    /** Icon (ReactNode or IconName string) */
+    icon?: React.ReactNode;
+    /** Label text */
+    children: React.ReactNode;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Destructive action (red text) */
+    destructive?: boolean;
+    /** Keyboard shortcut hint */
+    shortcut?: string;
+}
+declare const MenuItem: React.NamedExoticComponent<MenuItemProps>;
+declare const MenuDivider: React.NamedExoticComponent<object>;
+declare const MenuLabel: React.NamedExoticComponent<{
+    children: React.ReactNode;
+}>;
+type MenuComponent = typeof MenuRoot & {
+    Item: typeof MenuItem;
+    Divider: typeof MenuDivider;
+    Label: typeof MenuLabel;
+};
+export declare const Menu: MenuComponent;
+export default Popover;