eidos-ui 0.1.0

package/dist/chunk-OVYIBDGE.js

@@ -0,0 +1,183 @@
+// src/components/OTPInput/OTPInput.component.tsx
+import { useState, useEffect, useRef, useId } from "react";
+import { CircleAlert } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var OTPInput = ({
+  length = 6,
+  value,
+  defaultValue = "",
+  onChange,
+  onComplete,
+  type = "numeric",
+  mask = false,
+  size = "md",
+  disabled = false,
+  error,
+  label,
+  hint,
+  autoFocus = false,
+  className = ""
+}) => {
+  const generatedId = useId();
+  const labelId = `otp-label-${generatedId}`;
+  const hintId = `otp-hint-${generatedId}`;
+  const errorId = `otp-error-${generatedId}`;
+  const isControlled = value !== void 0;
+  const splitToSlots = (src) => Array.from({ length }, (_v, i) => src[i] ?? "");
+  const [slots, setSlots] = useState(
+    () => splitToSlots(isControlled ? value ?? "" : defaultValue)
+  );
+  const slotsRef = useRef(slots);
+  const [focusedIndex, setFocusedIndex] = useState(null);
+  const inputRefs = useRef([]);
+  useEffect(() => {
+    if (isControlled) {
+      const synced = splitToSlots(value ?? "");
+      slotsRef.current = synced;
+      setSlots(synced);
+    }
+  }, [value, length, isControlled]);
+  useEffect(() => {
+    if (!autoFocus) return;
+    const firstEmptyIdx = slots.findIndex((s) => s === "");
+    const targetIdx = firstEmptyIdx === -1 ? 0 : firstEmptyIdx;
+    inputRefs.current[targetIdx]?.focus();
+  }, []);
+  const commitChange = (newSlots) => {
+    slotsRef.current = newSlots;
+    if (!isControlled) setSlots(newSlots);
+    const fullValue = newSlots.join("");
+    onChange?.(fullValue);
+    if (newSlots.every((s) => s !== "")) {
+      onComplete?.(fullValue);
+    }
+  };
+  const handleChange = (e, index) => {
+    const rawValue = e.target.value;
+    const char = rawValue.slice(-1);
+    if (!char) return;
+    if (type === "numeric" && !/^\d$/.test(char)) return;
+    const newSlots = [...slotsRef.current];
+    newSlots[index] = char;
+    commitChange(newSlots);
+    if (index < length - 1) {
+      inputRefs.current[index + 1]?.focus();
+    }
+  };
+  const handleKeyDown = (e, index) => {
+    if (type === "numeric") {
+      const controlKeys = [
+        "Backspace",
+        "Delete",
+        "Tab",
+        "Escape",
+        "ArrowLeft",
+        "ArrowRight",
+        "Home",
+        "End"
+      ];
+      const isDigit = /^\d$/.test(e.key);
+      const isControlKey = e.ctrlKey || e.metaKey;
+      if (!isDigit && !controlKeys.includes(e.key) && !isControlKey) {
+        e.preventDefault();
+        return;
+      }
+    }
+    if (e.key === "Backspace") {
+      e.preventDefault();
+      if (slotsRef.current[index] !== "") {
+        const newSlots = [...slotsRef.current];
+        newSlots[index] = "";
+        commitChange(newSlots);
+      } else if (index > 0) {
+        const newSlots = [...slotsRef.current];
+        newSlots[index - 1] = "";
+        commitChange(newSlots);
+        inputRefs.current[index - 1]?.focus();
+      }
+      return;
+    }
+    if (e.key === "ArrowLeft" && index > 0) {
+      e.preventDefault();
+      inputRefs.current[index - 1]?.focus();
+      return;
+    }
+    if (e.key === "ArrowRight" && index < length - 1) {
+      e.preventDefault();
+      inputRefs.current[index + 1]?.focus();
+    }
+  };
+  const handlePaste = (e, index) => {
+    e.preventDefault();
+    const pasted = e.clipboardData.getData("text/plain");
+    const filtered = type === "numeric" ? pasted.replace(/\D/g, "") : pasted;
+    if (!filtered) return;
+    const newSlots = [...slotsRef.current];
+    let charsPlaced = 0;
+    for (let i = index; i < length && charsPlaced < filtered.length; i++) {
+      newSlots[i] = filtered[charsPlaced];
+      charsPlaced++;
+    }
+    commitChange(newSlots);
+    const nextFocusIdx = Math.min(index + charsPlaced, length - 1);
+    inputRefs.current[nextFocusIdx]?.focus();
+  };
+  const containerClasses = [
+    "eidos-otp",
+    `eidos-otp--${size}`,
+    disabled && "eidos-otp--disabled",
+    className
+  ].filter(Boolean).join(" ");
+  const slotClasses = (index) => [
+    "eidos-otp-slot",
+    // Show "filled" accent only when there's no error overriding the colour
+    slots[index] !== "" && !error && "eidos-otp-slot--filled",
+    focusedIndex === index && "eidos-otp-slot--focused",
+    error && "eidos-otp-slot--error",
+    disabled && "eidos-otp-slot--disabled"
+  ].filter(Boolean).join(" ");
+  const describedBy = error ? errorId : hint ? hintId : void 0;
+  return /* @__PURE__ */ jsxs("div", { className: containerClasses, children: [
+    label && /* @__PURE__ */ jsx("label", { id: labelId, className: "eidos-otp-label", children: label }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "eidos-otp-slots",
+        role: "group",
+        "aria-labelledby": label ? labelId : void 0,
+        "aria-describedby": describedBy,
+        children: Array.from({ length }, (_v, index) => /* @__PURE__ */ jsx("div", { className: slotClasses(index), children: /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: (el) => {
+              inputRefs.current[index] = el;
+            },
+            type: mask ? "password" : "text",
+            inputMode: type === "numeric" ? "numeric" : "text",
+            maxLength: 2,
+            value: slots[index],
+            disabled,
+            "aria-label": `Digit ${index + 1} of ${length}`,
+            autoComplete: index === 0 ? "one-time-code" : "off",
+            onChange: (e) => handleChange(e, index),
+            onKeyDown: (e) => handleKeyDown(e, index),
+            onPaste: (e) => handlePaste(e, index),
+            onFocus: () => setFocusedIndex(index),
+            onBlur: () => setFocusedIndex(null)
+          }
+        ) }, index))
+      }
+    ),
+    hint && !error && /* @__PURE__ */ jsx("span", { id: hintId, className: "eidos-otp-hint", children: hint }),
+    error && /* @__PURE__ */ jsxs("span", { id: errorId, className: "eidos-otp-error-message", role: "alert", children: [
+      /* @__PURE__ */ jsx(CircleAlert, { "aria-hidden": "true" }),
+      error
+    ] })
+  ] });
+};
+OTPInput.displayName = "OTPInput";
+
+export {
+  OTPInput
+};
+//# sourceMappingURL=chunk-OVYIBDGE.js.map

package/dist/chunk-OVYIBDGE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/OTPInput/OTPInput.component.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, useId } from 'react';\r\nimport { CircleAlert } from 'lucide-react';\r\nimport type { OTPInputProps } from './OTPInput.types';\r\nimport './OTPInput.scss';\r\n\r\nexport const OTPInput: React.FC<OTPInputProps> = ({\r\n  length = 6,\r\n  value,\r\n  defaultValue = '',\r\n  onChange,\r\n  onComplete,\r\n  type = 'numeric',\r\n  mask = false,\r\n  size = 'md',\r\n  disabled = false,\r\n  error,\r\n  label,\r\n  hint,\r\n  autoFocus = false,\r\n  className = '',\r\n}) => {\r\n  const generatedId = useId();\r\n  const labelId = `otp-label-${generatedId}`;\r\n  const hintId = `otp-hint-${generatedId}`;\r\n  const errorId = `otp-error-${generatedId}`;\r\n\r\n  const isControlled = value !== undefined;\r\n\r\n  // Split a string into an array of `length` single characters, padding with ''\r\n  const splitToSlots = (src: string): string[] => Array.from({ length }, (_v, i) => src[i] ?? '');\r\n\r\n  const [slots, setSlots] = useState<string[]>(() =>\r\n    splitToSlots(isControlled ? (value ?? '') : defaultValue),\r\n  );\r\n\r\n  // A ref that always mirrors the latest slots value so that event handlers\r\n  // never operate on stale closure state during rapid sequential keystrokes.\r\n  const slotsRef = useRef<string[]>(slots);\r\n\r\n  const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\r\n\r\n  // Array of refs - one per slot input\r\n  const inputRefs = useRef<Array<HTMLInputElement | null>>([]);\r\n\r\n  // Sync internal slots when the controlled `value` prop changes\r\n  useEffect(() => {\r\n    if (isControlled) {\r\n      const synced = splitToSlots(value ?? '');\r\n      slotsRef.current = synced;\r\n      setSlots(synced);\r\n    }\r\n    // splitToSlots is stable within a render; length is in deps\r\n    // eslint-disable-next-line react-hooks/exhaustive-deps\r\n  }, [value, length, isControlled]);\r\n\r\n  // AutoFocus: focus first empty slot on mount\r\n  useEffect(() => {\r\n    if (!autoFocus) return;\r\n    const firstEmptyIdx = slots.findIndex((s) => s === '');\r\n    const targetIdx = firstEmptyIdx === -1 ? 0 : firstEmptyIdx;\r\n    inputRefs.current[targetIdx]?.focus();\r\n    // Intentionally runs only on mount\r\n    // eslint-disable-next-line react-hooks/exhaustive-deps\r\n  }, []);\r\n\r\n  // ── Core state update ──────────────────────────────────────────────────────\r\n\r\n  /**\r\n   * Apply a new slots array, propagate onChange, and fire onComplete if every\r\n   * slot is filled. In controlled mode we do NOT call setSlots - the parent\r\n   * drives state via the `value` prop.\r\n   */\r\n  const commitChange = (newSlots: string[]) => {\r\n    // Keep the ref in sync BEFORE state update so the next synchronous\r\n    // handler (rapid typing) reads the correct value from the ref.\r\n    slotsRef.current = newSlots;\r\n    if (!isControlled) setSlots(newSlots);\r\n    const fullValue = newSlots.join('');\r\n    onChange?.(fullValue);\r\n    if (newSlots.every((s) => s !== '')) {\r\n      onComplete?.(fullValue);\r\n    }\r\n  };\r\n\r\n  // ── Event handlers ─────────────────────────────────────────────────────────\r\n\r\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>, index: number) => {\r\n    const rawValue = e.target.value;\r\n    // When maxLength=1 is enforced, rawValue is 0–1 chars.\r\n    // When the browser transiently allows 2 chars (typed over existing), we\r\n    // take the last character - that's always the newly entered one.\r\n    const char = rawValue.slice(-1);\r\n\r\n    if (!char) return; // Deletes are handled by onKeyDown\r\n\r\n    // Guard: numeric mode rejects non-digit characters\r\n    if (type === 'numeric' && !/^\\d$/.test(char)) return;\r\n\r\n    // Read from slotsRef (not the stale `slots` closure) so rapid keystrokes\r\n    // don't overwrite each other when React hasn't re-rendered yet.\r\n    const newSlots = [...slotsRef.current];\r\n    newSlots[index] = char;\r\n    commitChange(newSlots);\r\n\r\n    // Advance focus to the next slot\r\n    if (index < length - 1) {\r\n      inputRefs.current[index + 1]?.focus();\r\n    }\r\n  };\r\n\r\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>, index: number) => {\r\n    // ── Numeric mode: block non-digit, non-control key presses ──────────────\r\n    if (type === 'numeric') {\r\n      const controlKeys = [\r\n        'Backspace',\r\n        'Delete',\r\n        'Tab',\r\n        'Escape',\r\n        'ArrowLeft',\r\n        'ArrowRight',\r\n        'Home',\r\n        'End',\r\n      ];\r\n      const isDigit = /^\\d$/.test(e.key);\r\n      const isControlKey = e.ctrlKey || e.metaKey;\r\n      if (!isDigit && !controlKeys.includes(e.key) && !isControlKey) {\r\n        e.preventDefault();\r\n        return;\r\n      }\r\n    }\r\n\r\n    // ── Backspace ────────────────────────────────────────────────────────────\r\n    if (e.key === 'Backspace') {\r\n      e.preventDefault(); // Prevent the browser from also firing onChange\r\n      if (slotsRef.current[index] !== '') {\r\n        // Clear the current slot\r\n        const newSlots = [...slotsRef.current];\r\n        newSlots[index] = '';\r\n        commitChange(newSlots);\r\n      } else if (index > 0) {\r\n        // Move focus to the previous slot and clear it\r\n        const newSlots = [...slotsRef.current];\r\n        newSlots[index - 1] = '';\r\n        commitChange(newSlots);\r\n        inputRefs.current[index - 1]?.focus();\r\n      }\r\n      return;\r\n    }\r\n\r\n    // ── Arrow navigation ─────────────────────────────────────────────────────\r\n    if (e.key === 'ArrowLeft' && index > 0) {\r\n      e.preventDefault();\r\n      inputRefs.current[index - 1]?.focus();\r\n      return;\r\n    }\r\n    if (e.key === 'ArrowRight' && index < length - 1) {\r\n      e.preventDefault();\r\n      inputRefs.current[index + 1]?.focus();\r\n    }\r\n  };\r\n\r\n  const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>, index: number) => {\r\n    e.preventDefault();\r\n    const pasted = e.clipboardData.getData('text/plain');\r\n    // Strip non-digits in numeric mode\r\n    const filtered = type === 'numeric' ? pasted.replace(/\\D/g, '') : pasted;\r\n    if (!filtered) return;\r\n\r\n    const newSlots = [...slotsRef.current];\r\n    let charsPlaced = 0;\r\n    for (let i = index; i < length && charsPlaced < filtered.length; i++) {\r\n      newSlots[i] = filtered[charsPlaced];\r\n      charsPlaced++;\r\n    }\r\n    commitChange(newSlots);\r\n\r\n    // Focus the slot after the last pasted character\r\n    const nextFocusIdx = Math.min(index + charsPlaced, length - 1);\r\n    inputRefs.current[nextFocusIdx]?.focus();\r\n  };\r\n\r\n  // ── CSS class builders ─────────────────────────────────────────────────────\r\n\r\n  const containerClasses = [\r\n    'eidos-otp',\r\n    `eidos-otp--${size}`,\r\n    disabled && 'eidos-otp--disabled',\r\n    className,\r\n  ]\r\n    .filter(Boolean)\r\n    .join(' ');\r\n\r\n  const slotClasses = (index: number) =>\r\n    [\r\n      'eidos-otp-slot',\r\n      // Show \"filled\" accent only when there's no error overriding the colour\r\n      slots[index] !== '' && !error && 'eidos-otp-slot--filled',\r\n      focusedIndex === index && 'eidos-otp-slot--focused',\r\n      error && 'eidos-otp-slot--error',\r\n      disabled && 'eidos-otp-slot--disabled',\r\n    ]\r\n      .filter(Boolean)\r\n      .join(' ');\r\n\r\n  // Accessible description: prefer error, fall back to hint\r\n  const describedBy = error ? errorId : hint ? hintId : undefined;\r\n\r\n  return (\r\n    <div className={containerClasses}>\r\n      {label && (\r\n        <label id={labelId} className=\"eidos-otp-label\">\r\n          {label}\r\n        </label>\r\n      )}\r\n\r\n      <div\r\n        className=\"eidos-otp-slots\"\r\n        role=\"group\"\r\n        aria-labelledby={label ? labelId : undefined}\r\n        aria-describedby={describedBy}\r\n      >\r\n        {Array.from({ length }, (_v, index) => (\r\n          <div key={index} className={slotClasses(index)}>\r\n            <input\r\n              ref={(el) => {\r\n                inputRefs.current[index] = el;\r\n              }}\r\n              type={mask ? 'password' : 'text'}\r\n              inputMode={type === 'numeric' ? 'numeric' : 'text'}\r\n              maxLength={2}\r\n              value={slots[index]}\r\n              disabled={disabled}\r\n              aria-label={`Digit ${index + 1} of ${length}`}\r\n              autoComplete={index === 0 ? 'one-time-code' : 'off'}\r\n              onChange={(e) => handleChange(e, index)}\r\n              onKeyDown={(e) => handleKeyDown(e, index)}\r\n              onPaste={(e) => handlePaste(e, index)}\r\n              onFocus={() => setFocusedIndex(index)}\r\n              onBlur={() => setFocusedIndex(null)}\r\n            />\r\n          </div>\r\n        ))}\r\n      </div>\r\n\r\n      {hint && !error && (\r\n        <span id={hintId} className=\"eidos-otp-hint\">\r\n          {hint}\r\n        </span>\r\n      )}\r\n\r\n      {error && (\r\n        <span id={errorId} className=\"eidos-otp-error-message\" role=\"alert\">\r\n          <CircleAlert aria-hidden=\"true\" />\r\n          {error}\r\n        </span>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\nOTPInput.displayName = 'OTPInput';\r\n"],"mappings":"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","names":[]}

package/dist/chunk-P2BTQ33C.cjs

@@ -0,0 +1,126 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+var _chunkTBMVUI7Scjs = require('./chunk-TBMVUI7S.cjs');
+
+
+var _chunkR5QPUQSIcjs = require('./chunk-R5QPUQSI.cjs');
+
+// src/components/Textarea/Textarea.component.tsx
+var _react = require('react');
+var _lucidereact = require('lucide-react');
+var _jsxruntime = require('react/jsx-runtime');
+var Textarea = _react.forwardRef.call(void 0, 
+  ({
+    variant = "filled",
+    color = "primary",
+    size = "md",
+    disabled = false,
+    loading = false,
+    className = "",
+    fullWidth = false,
+    label,
+    error,
+    disclaimerIcon,
+    disclaimerContent,
+    required,
+    rows = 4,
+    resize = "vertical",
+    showCount = false,
+    maxLength,
+    id,
+    ...textareaProps
+  }, ref) => {
+    const generatedId = _react.useId.call(void 0, );
+    const textareaId = id || `textarea-${generatedId}`;
+    const { defaultValue, ...restTextareaProps } = textareaProps;
+    const isControlled = restTextareaProps.value !== void 0;
+    const [localValue, setLocalValue] = _react.useState.call(void 0, defaultValue != null ? String(defaultValue) : "");
+    const [isFocused, setIsFocused] = _react.useState.call(void 0, false);
+    const currentValue = isControlled ? restTextareaProps.value : localValue;
+    const shouldFloatLabel = Boolean(currentValue) || Boolean(defaultValue);
+    const isRequired = required || Boolean("required" in restTextareaProps && restTextareaProps.required);
+    const handleChange = (e) => {
+      if (!isControlled) {
+        setLocalValue(e.target.value);
+      }
+      _optionalChain([restTextareaProps, 'access', _ => _.onChange, 'optionalCall', _2 => _2(e)]);
+    };
+    const containerClasses = [
+      "eidos-textarea-container",
+      fullWidth && "eidos-textarea-container--fullWidth",
+      className
+    ].filter(Boolean).join(" ");
+    const wrapperClasses = [
+      "eidos-textarea-wrapper",
+      `eidos-textarea-wrapper--${variant}`,
+      `eidos-textarea-wrapper--${color}`,
+      `eidos-textarea-wrapper--${size}`,
+      fullWidth && "eidos-textarea-wrapper--fullWidth",
+      loading && "eidos-textarea-wrapper--loading",
+      isFocused && "eidos-textarea-wrapper--focused",
+      error && "eidos-textarea-wrapper--error"
+    ].filter(Boolean).join(" ");
+    const textareaClasses = [
+      "eidos-textarea",
+      `eidos-textarea--${variant}`,
+      `eidos-textarea--${color}`,
+      `eidos-textarea--${size}`,
+      `eidos-textarea--resize-${resize}`,
+      fullWidth && "eidos-textarea--fullWidth",
+      loading && "eidos-textarea--loading",
+      error && "eidos-textarea--error"
+    ].filter(Boolean).join(" ");
+    const labelClasses = [
+      "eidos-textarea-label",
+      shouldFloatLabel && "eidos-textarea-label--floating",
+      disclaimerIcon && "eidos-textarea-label--with-icon",
+      error && "eidos-textarea-label--error"
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: containerClasses, children: [
+      label && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "label", { htmlFor: textareaId, className: labelClasses, children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "eidos-textarea-label-text", children: label }),
+        isRequired && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "eidos-textarea-required-asterisk", children: "*" }),
+        disclaimerIcon && (disclaimerContent ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR5QPUQSIcjs.Tooltip, { message: disclaimerContent, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "eidos-textarea-disclaimer-icon", children: _chunkTBMVUI7Scjs.renderIcon.call(void 0, disclaimerIcon, "eidos-textarea-disclaimer-icon-svg") }) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "eidos-textarea-disclaimer-icon", children: _chunkTBMVUI7Scjs.renderIcon.call(void 0, disclaimerIcon, "eidos-textarea-disclaimer-icon-svg") }))
+      ] }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: wrapperClasses, children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "textarea",
+          {
+            ref,
+            id: textareaId,
+            className: textareaClasses,
+            rows,
+            maxLength,
+            disabled: disabled || loading,
+            ...restTextareaProps,
+            value: currentValue,
+            onFocus: (e) => {
+              setIsFocused(true);
+              _optionalChain([restTextareaProps, 'access', _3 => _3.onFocus, 'optionalCall', _4 => _4(e)]);
+            },
+            onBlur: (e) => {
+              setIsFocused(false);
+              _optionalChain([restTextareaProps, 'access', _5 => _5.onBlur, 'optionalCall', _6 => _6(e)]);
+            },
+            onChange: handleChange
+          }
+        ),
+        showCount && maxLength && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "eidos-textarea-count", children: [
+          String(_nullishCoalesce(currentValue, () => ( ""))).length,
+          "/",
+          maxLength
+        ] })
+      ] }),
+      error && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "eidos-textarea-error-message", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.CircleAlert, { className: "eidos-textarea-error-icon" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: error })
+      ] })
+    ] });
+  }
+);
+Textarea.displayName = "Textarea";
+
+
+
+exports.Textarea = Textarea;
+//# sourceMappingURL=chunk-P2BTQ33C.cjs.map

package/dist/chunk-P2BTQ33C.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/Users/pedromealha/Documents/Repositories/Personal/eidos-ui/dist/chunk-P2BTQ33C.cjs","../src/components/Textarea/Textarea.component.tsx"],"names":[],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACA;ACPA,8BAAmD;AACnD,2CAA4B;AAyGlB,+CAAA;AApGH,IAAM,SAAA,EAAW,+BAAA;AAAA,EACtB,CACE;AAAA,IACE,QAAA,EAAU,QAAA;AAAA,IACV,MAAA,EAAQ,SAAA;AAAA,IACR,KAAA,EAAO,IAAA;AAAA,IACP,SAAA,EAAW,KAAA;AAAA,IACX,QAAA,EAAU,KAAA;AAAA,IACV,UAAA,EAAY,EAAA;AAAA,IACZ,UAAA,EAAY,KAAA;AAAA,IACZ,KAAA;AAAA,IACA,KAAA;AAAA,IACA,cAAA;AAAA,IACA,iBAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA,EAAO,CAAA;AAAA,IACP,OAAA,EAAS,UAAA;AAAA,IACT,UAAA,EAAY,KAAA;AAAA,IACZ,SAAA;AAAA,IACA,EAAA;AAAA,IACA,GAAG;AAAA,EACL,CAAA,EACA,GAAA,EAAA,GACG;AACH,IAAA,MAAM,YAAA,EAAc,0BAAA,CAAM;AAC1B,IAAA,MAAM,WAAA,EAAa,GAAA,GAAM,CAAA,SAAA,EAAY,WAAW,CAAA,CAAA;AAKD,IAAA;AAGE,IAAA;AACJ,IAAA;AACG,IAAA;AAEZ,IAAA;AAGS,IAAA;AAGvB,IAAA;AAE8C,IAAA;AAC/C,MAAA;AACW,QAAA;AAC9B,MAAA;AAC8B,sBAAA;AAChC,IAAA;AAIyB,IAAA;AACvB,MAAA;AACa,MAAA;AACb,MAAA;AAGS,IAAA;AAEY,IAAA;AACrB,MAAA;AACkC,MAAA;AACF,MAAA;AACD,MAAA;AAClB,MAAA;AACF,MAAA;AACE,MAAA;AACJ,MAAA;AAGA,IAAA;AAEa,IAAA;AACtB,MAAA;AAC0B,MAAA;AACF,MAAA;AACD,MAAA;AACS,MAAA;AACnB,MAAA;AACF,MAAA;AACF,MAAA;AAGA,IAAA;AAEU,IAAA;AACnB,MAAA;AACoB,MAAA;AACF,MAAA;AACT,MAAA;AAGA,IAAA;AAGO,IAAA;AAEL,MAAA;AACW,wBAAA;AACK,QAAA;AAGjB,QAAA;AAUN,MAAA;AAGc,sBAAA;AACd,wBAAA;AAAC,UAAA;AAAA,UAAA;AACC,YAAA;AACI,YAAA;AACO,YAAA;AACX,YAAA;AACA,YAAA;AACsB,YAAA;AAClB,YAAA;AACG,YAAA;AACS,YAAA;AACG,cAAA;AACY,8BAAA;AAC/B,YAAA;AACe,YAAA;AACK,cAAA;AACU,8BAAA;AAC9B,YAAA;AACU,YAAA;AAAA,UAAA;AACZ,QAAA;AAGE,QAAA;AAC8B,UAAA;AAAO,UAAA;AAAE,UAAA;AACvC,QAAA;AAEJ,MAAA;AAGO,MAAA;AACU,wBAAA;AACN,wBAAA;AACT,MAAA;AAEJ,IAAA;AAEJ,EAAA;AACF;AAEuB;AD1C8B;AACA;AACA;AACA","file":"/Users/pedromealha/Documents/Repositories/Personal/eidos-ui/dist/chunk-P2BTQ33C.cjs","sourcesContent":[null,"import React, { forwardRef, useState, useId } from 'react';\r\nimport { CircleAlert } from 'lucide-react';\r\nimport { renderIcon } from '../../utils';\r\nimport type { TextareaProps } from './Textarea.types';\r\nimport { Tooltip } from '../Tooltip/Tooltip.component';\r\n\r\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(\r\n  (\r\n    {\r\n      variant = 'filled',\r\n      color = 'primary',\r\n      size = 'md',\r\n      disabled = false,\r\n      loading = false,\r\n      className = '',\r\n      fullWidth = false,\r\n      label,\r\n      error,\r\n      disclaimerIcon,\r\n      disclaimerContent,\r\n      required,\r\n      rows = 4,\r\n      resize = 'vertical',\r\n      showCount = false,\r\n      maxLength,\r\n      id,\r\n      ...textareaProps\r\n    },\r\n    ref,\r\n  ) => {\r\n    const generatedId = useId();\r\n    const textareaId = id || `textarea-${generatedId}`;\r\n\r\n    // Extract defaultValue so it never reaches the native <textarea> alongside `value`.\r\n    // Same reasoning as Input: we always set value={currentValue}, so having defaultValue\r\n    // in the spread as well triggers React's controlled/uncontrolled warning.\r\n    const { defaultValue, ...restTextareaProps } = textareaProps;\r\n\r\n    // Determine if using controlled or uncontrolled mode\r\n    const isControlled = restTextareaProps.value !== undefined;\r\n    const [localValue, setLocalValue] = useState(defaultValue != null ? String(defaultValue) : '');\r\n    const [isFocused, setIsFocused] = useState(false);\r\n\r\n    const currentValue = isControlled ? restTextareaProps.value : localValue;\r\n\r\n    // Label floats when the field has content (same logic as Input)\r\n    const shouldFloatLabel = Boolean(currentValue) || Boolean(defaultValue);\r\n\r\n    const isRequired =\r\n      required || Boolean('required' in restTextareaProps && restTextareaProps.required);\r\n\r\n    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\r\n      if (!isControlled) {\r\n        setLocalValue(e.target.value);\r\n      }\r\n      restTextareaProps.onChange?.(e);\r\n    };\r\n\r\n    // ── Class lists ──────────────────────────────────────────────────────────\r\n\r\n    const containerClasses = [\r\n      'eidos-textarea-container',\r\n      fullWidth && 'eidos-textarea-container--fullWidth',\r\n      className,\r\n    ]\r\n      .filter(Boolean)\r\n      .join(' ');\r\n\r\n    const wrapperClasses = [\r\n      'eidos-textarea-wrapper',\r\n      `eidos-textarea-wrapper--${variant}`,\r\n      `eidos-textarea-wrapper--${color}`,\r\n      `eidos-textarea-wrapper--${size}`,\r\n      fullWidth && 'eidos-textarea-wrapper--fullWidth',\r\n      loading && 'eidos-textarea-wrapper--loading',\r\n      isFocused && 'eidos-textarea-wrapper--focused',\r\n      error && 'eidos-textarea-wrapper--error',\r\n    ]\r\n      .filter(Boolean)\r\n      .join(' ');\r\n\r\n    const textareaClasses = [\r\n      'eidos-textarea',\r\n      `eidos-textarea--${variant}`,\r\n      `eidos-textarea--${color}`,\r\n      `eidos-textarea--${size}`,\r\n      `eidos-textarea--resize-${resize}`,\r\n      fullWidth && 'eidos-textarea--fullWidth',\r\n      loading && 'eidos-textarea--loading',\r\n      error && 'eidos-textarea--error',\r\n    ]\r\n      .filter(Boolean)\r\n      .join(' ');\r\n\r\n    const labelClasses = [\r\n      'eidos-textarea-label',\r\n      shouldFloatLabel && 'eidos-textarea-label--floating',\r\n      disclaimerIcon && 'eidos-textarea-label--with-icon',\r\n      error && 'eidos-textarea-label--error',\r\n    ]\r\n      .filter(Boolean)\r\n      .join(' ');\r\n\r\n    return (\r\n      <div className={containerClasses}>\r\n        {label && (\r\n          <label htmlFor={textareaId} className={labelClasses}>\r\n            <span className=\"eidos-textarea-label-text\">{label}</span>\r\n            {isRequired && <span className=\"eidos-textarea-required-asterisk\">*</span>}\r\n            {disclaimerIcon &&\r\n              (disclaimerContent ? (\r\n                <Tooltip message={disclaimerContent}>\r\n                  <span className=\"eidos-textarea-disclaimer-icon\">\r\n                    {renderIcon(disclaimerIcon, 'eidos-textarea-disclaimer-icon-svg')}\r\n                  </span>\r\n                </Tooltip>\r\n              ) : (\r\n                <span className=\"eidos-textarea-disclaimer-icon\">\r\n                  {renderIcon(disclaimerIcon, 'eidos-textarea-disclaimer-icon-svg')}\r\n                </span>\r\n              ))}\r\n          </label>\r\n        )}\r\n\r\n        <div className={wrapperClasses}>\r\n          <textarea\r\n            ref={ref}\r\n            id={textareaId}\r\n            className={textareaClasses}\r\n            rows={rows}\r\n            maxLength={maxLength}\r\n            disabled={disabled || loading}\r\n            {...restTextareaProps}\r\n            value={currentValue}\r\n            onFocus={(e) => {\r\n              setIsFocused(true);\r\n              restTextareaProps.onFocus?.(e);\r\n            }}\r\n            onBlur={(e) => {\r\n              setIsFocused(false);\r\n              restTextareaProps.onBlur?.(e);\r\n            }}\r\n            onChange={handleChange}\r\n          />\r\n\r\n          {showCount && maxLength && (\r\n            <span className=\"eidos-textarea-count\">\r\n              {String(currentValue ?? '').length}/{maxLength}\r\n            </span>\r\n          )}\r\n        </div>\r\n\r\n        {error && (\r\n          <div className=\"eidos-textarea-error-message\">\r\n            <CircleAlert className=\"eidos-textarea-error-icon\" />\r\n            <span>{error}</span>\r\n          </div>\r\n        )}\r\n      </div>\r\n    );\r\n  },\r\n);\r\n\r\nTextarea.displayName = 'Textarea';\r\n"]}

package/dist/chunk-P6ZBENAG.js

@@ -0,0 +1,211 @@
+import {
+  Select
+} from "./chunk-F54MVGKO.js";
+import {
+  Button
+} from "./chunk-FO5FNTJX.js";
+
+// src/components/Pagination/Pagination.component.tsx
+import { useState, useEffect } from "react";
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ELLIPSIS = "ellipsis";
+function usePaginationRange(page, totalPages, siblingCount) {
+  const totalShown = siblingCount * 2 + 5;
+  if (totalPages <= totalShown) {
+    return Array.from({ length: totalPages }, (_, i) => i + 1);
+  }
+  const leftSibling = Math.max(page - siblingCount, 1);
+  const rightSibling = Math.min(page + siblingCount, totalPages);
+  const showLeftEllipsis = leftSibling > 2;
+  const showRightEllipsis = rightSibling < totalPages - 1;
+  const items = [1];
+  if (showLeftEllipsis) {
+    items.push(ELLIPSIS);
+  } else {
+    for (let i = 2; i < leftSibling; i++) items.push(i);
+  }
+  for (let i = leftSibling; i <= rightSibling; i++) {
+    if (i !== 1 && i !== totalPages) items.push(i);
+  }
+  if (showRightEllipsis) {
+    items.push(ELLIPSIS);
+  } else {
+    for (let i = rightSibling + 1; i < totalPages; i++) items.push(i);
+  }
+  items.push(totalPages);
+  return items;
+}
+var Pagination = ({
+  page,
+  totalPages,
+  onChange,
+  siblingCount = 1,
+  showFirstLast = false,
+  color = "primary",
+  size = "sm",
+  disabled = false,
+  className = "",
+  // Table-footer mode
+  totalItems,
+  pageSize,
+  onPageSizeChange,
+  pageSizeOptions = [10, 25, 50, 100]
+}) => {
+  const items = usePaginationRange(page, totalPages, siblingCount);
+  const [inputValue, setInputValue] = useState(String(page));
+  useEffect(() => {
+    setInputValue(String(page));
+  }, [page]);
+  const commitInput = (raw) => {
+    const val = parseInt(raw, 10);
+    if (!isNaN(val) && val >= 1 && val <= totalPages && val !== page) {
+      onChange(val);
+    } else {
+      setInputValue(String(page));
+    }
+  };
+  const hasResults = totalItems !== void 0 && pageSize !== void 0;
+  const hasPageSize = !!onPageSizeChange && pageSize !== void 0;
+  const tableMode = hasResults || hasPageSize;
+  const startItem = hasResults ? totalItems === 0 ? 0 : (page - 1) * pageSize + 1 : void 0;
+  const endItem = hasResults ? Math.min(page * pageSize, totalItems) : void 0;
+  const rootClasses = [
+    "eidos-pagination",
+    `eidos-pagination--${size}`,
+    tableMode && "eidos-pagination--table",
+    className
+  ].filter(Boolean).join(" ");
+  const nav = /* @__PURE__ */ jsxs("nav", { "aria-label": "Pagination", className: "eidos-pagination-nav", children: [
+    showFirstLast && /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "text",
+        size,
+        icon: ChevronsLeft,
+        disabled: page === 1 || disabled,
+        onClick: () => onChange(1),
+        "aria-label": "First page"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "text",
+        size,
+        icon: ChevronLeft,
+        disabled: page === 1 || disabled,
+        onClick: () => onChange(page - 1),
+        "aria-label": "Previous page"
+      }
+    ),
+    items.map(
+      (item, i) => item === ELLIPSIS ? /* @__PURE__ */ jsx("span", { className: "eidos-pagination-ellipsis", "aria-hidden": "true", children: "\u2026" }, `ellipsis-${i}`) : item === page ? (
+        // Active page - styled as filled chip, editable via keyboard/click
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            inputMode: "numeric",
+            className: [
+              "eidos-pagination-page",
+              "eidos-pagination-page--active",
+              `eidos-pagination-page--${color}`
+            ].join(" "),
+            value: inputValue,
+            onChange: (e) => setInputValue(e.target.value),
+            onFocus: (e) => e.target.select(),
+            onBlur: () => commitInput(inputValue),
+            onKeyDown: (e) => {
+              if (e.key === "Enter") {
+                commitInput(inputValue);
+                e.currentTarget.blur();
+              } else if (e.key === "Escape") {
+                setInputValue(String(page));
+                e.currentTarget.blur();
+              }
+            },
+            "aria-label": `Page ${page} of ${totalPages}, editable`,
+            "aria-current": "page",
+            disabled
+          },
+          "active-page"
+        )
+      ) : /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "eidos-pagination-page",
+          onClick: () => onChange(item),
+          disabled,
+          "aria-label": `Page ${item}`,
+          children: item
+        },
+        item
+      )
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "text",
+        size,
+        icon: ChevronRight,
+        disabled: page === totalPages || disabled,
+        onClick: () => onChange(page + 1),
+        "aria-label": "Next page"
+      }
+    ),
+    showFirstLast && /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "text",
+        size,
+        icon: ChevronsRight,
+        disabled: page === totalPages || disabled,
+        onClick: () => onChange(totalPages),
+        "aria-label": "Last page"
+      }
+    )
+  ] });
+  if (!tableMode) {
+    return /* @__PURE__ */ jsx("div", { className: rootClasses, children: nav });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: rootClasses, children: [
+    hasResults && /* @__PURE__ */ jsxs("span", { className: "eidos-pagination-info", children: [
+      "Showing ",
+      startItem,
+      "-",
+      endItem,
+      " of ",
+      totalItems,
+      " results"
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "eidos-pagination-controls", children: [
+      hasPageSize && /* @__PURE__ */ jsxs("div", { className: "eidos-pagination-size", children: [
+        /* @__PURE__ */ jsx("label", { className: "eidos-pagination-size-label", children: "Show:" }),
+        /* @__PURE__ */ jsx(
+          Select,
+          {
+            value: String(pageSize),
+            onChange: (val) => onPageSizeChange(Number(val)),
+            options: pageSizeOptions.map((n) => ({
+              id: String(n),
+              value: String(n),
+              label: String(n)
+            })),
+            clearable: false,
+            disabled,
+            inputProps: { size: "sm", width: "3ch" }
+          }
+        )
+      ] }),
+      totalPages > 1 && nav
+    ] })
+  ] });
+};
+Pagination.displayName = "Pagination";
+
+export {
+  Pagination
+};
+//# sourceMappingURL=chunk-P6ZBENAG.js.map

package/dist/chunk-P6ZBENAG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Pagination/Pagination.component.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\r\nimport { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';\r\nimport { Button } from '../Button';\r\nimport { Select } from '../Select';\r\nimport type { PaginationProps } from './Pagination.types';\r\n\r\n// ── Ellipsis range helper ─────────────────────────────────────────────────────\r\n\r\nconst ELLIPSIS = 'ellipsis' as const;\r\ntype PageItem = number | typeof ELLIPSIS;\r\n\r\nfunction usePaginationRange(page: number, totalPages: number, siblingCount: number): PageItem[] {\r\n  const totalShown = siblingCount * 2 + 5;\r\n\r\n  if (totalPages <= totalShown) {\r\n    return Array.from({ length: totalPages }, (_, i) => i + 1);\r\n  }\r\n\r\n  const leftSibling = Math.max(page - siblingCount, 1);\r\n  const rightSibling = Math.min(page + siblingCount, totalPages);\r\n\r\n  const showLeftEllipsis = leftSibling > 2;\r\n  const showRightEllipsis = rightSibling < totalPages - 1;\r\n\r\n  const items: PageItem[] = [1];\r\n\r\n  if (showLeftEllipsis) {\r\n    items.push(ELLIPSIS);\r\n  } else {\r\n    for (let i = 2; i < leftSibling; i++) items.push(i);\r\n  }\r\n\r\n  for (let i = leftSibling; i <= rightSibling; i++) {\r\n    if (i !== 1 && i !== totalPages) items.push(i);\r\n  }\r\n\r\n  if (showRightEllipsis) {\r\n    items.push(ELLIPSIS);\r\n  } else {\r\n    for (let i = rightSibling + 1; i < totalPages; i++) items.push(i);\r\n  }\r\n\r\n  items.push(totalPages);\r\n\r\n  return items;\r\n}\r\n\r\n// ── Component ─────────────────────────────────────────────────────────────────\r\n\r\nexport const Pagination: React.FC<PaginationProps> = ({\r\n  page,\r\n  totalPages,\r\n  onChange,\r\n  siblingCount = 1,\r\n  showFirstLast = false,\r\n  color = 'primary',\r\n  size = 'sm',\r\n  disabled = false,\r\n  className = '',\r\n  // Table-footer mode\r\n  totalItems,\r\n  pageSize,\r\n  onPageSizeChange,\r\n  pageSizeOptions = [10, 25, 50, 100],\r\n}) => {\r\n  const items = usePaginationRange(page, totalPages, siblingCount);\r\n\r\n  // ── Active-page editable input ─────────────────────────────────────────────\r\n  const [inputValue, setInputValue] = useState(String(page));\r\n  useEffect(() => {\r\n    setInputValue(String(page));\r\n  }, [page]);\r\n\r\n  const commitInput = (raw: string) => {\r\n    const val = parseInt(raw, 10);\r\n    if (!isNaN(val) && val >= 1 && val <= totalPages && val !== page) {\r\n      onChange(val);\r\n    } else {\r\n      setInputValue(String(page)); // revert on invalid or same-page\r\n    }\r\n  };\r\n\r\n  // ── Layout flags ───────────────────────────────────────────────────────────\r\n  const hasResults = totalItems !== undefined && pageSize !== undefined;\r\n  const hasPageSize = !!onPageSizeChange && pageSize !== undefined;\r\n  const tableMode = hasResults || hasPageSize;\r\n\r\n  const startItem = hasResults ? (totalItems === 0 ? 0 : (page - 1) * pageSize! + 1) : undefined;\r\n  const endItem = hasResults ? Math.min(page * pageSize!, totalItems!) : undefined;\r\n\r\n  const rootClasses = [\r\n    'eidos-pagination',\r\n    `eidos-pagination--${size}`,\r\n    tableMode && 'eidos-pagination--table',\r\n    className,\r\n  ]\r\n    .filter(Boolean)\r\n    .join(' ');\r\n\r\n  // ── Navigation block ───────────────────────────────────────────────────────\r\n  const nav = (\r\n    <nav aria-label=\"Pagination\" className=\"eidos-pagination-nav\">\r\n      {showFirstLast && (\r\n        <Button\r\n          variant=\"text\"\r\n          size={size}\r\n          icon={ChevronsLeft}\r\n          disabled={page === 1 || disabled}\r\n          onClick={() => onChange(1)}\r\n          aria-label=\"First page\"\r\n        />\r\n      )}\r\n\r\n      <Button\r\n        variant=\"text\"\r\n        size={size}\r\n        icon={ChevronLeft}\r\n        disabled={page === 1 || disabled}\r\n        onClick={() => onChange(page - 1)}\r\n        aria-label=\"Previous page\"\r\n      />\r\n\r\n      {items.map((item, i) =>\r\n        item === ELLIPSIS ? (\r\n          <span key={`ellipsis-${i}`} className=\"eidos-pagination-ellipsis\" aria-hidden=\"true\">\r\n            …\r\n          </span>\r\n        ) : item === page ? (\r\n          // Active page - styled as filled chip, editable via keyboard/click\r\n          <input\r\n            key=\"active-page\"\r\n            type=\"text\"\r\n            inputMode=\"numeric\"\r\n            className={[\r\n              'eidos-pagination-page',\r\n              'eidos-pagination-page--active',\r\n              `eidos-pagination-page--${color}`,\r\n            ].join(' ')}\r\n            value={inputValue}\r\n            onChange={(e) => setInputValue(e.target.value)}\r\n            onFocus={(e) => e.target.select()}\r\n            onBlur={() => commitInput(inputValue)}\r\n            onKeyDown={(e) => {\r\n              if (e.key === 'Enter') {\r\n                commitInput(inputValue);\r\n                e.currentTarget.blur();\r\n              } else if (e.key === 'Escape') {\r\n                setInputValue(String(page));\r\n                e.currentTarget.blur();\r\n              }\r\n            }}\r\n            aria-label={`Page ${page} of ${totalPages}, editable`}\r\n            aria-current=\"page\"\r\n            disabled={disabled}\r\n          />\r\n        ) : (\r\n          <button\r\n            key={item}\r\n            type=\"button\"\r\n            className=\"eidos-pagination-page\"\r\n            onClick={() => onChange(item)}\r\n            disabled={disabled}\r\n            aria-label={`Page ${item}`}\r\n          >\r\n            {item}\r\n          </button>\r\n        ),\r\n      )}\r\n\r\n      <Button\r\n        variant=\"text\"\r\n        size={size}\r\n        icon={ChevronRight}\r\n        disabled={page === totalPages || disabled}\r\n        onClick={() => onChange(page + 1)}\r\n        aria-label=\"Next page\"\r\n      />\r\n\r\n      {showFirstLast && (\r\n        <Button\r\n          variant=\"text\"\r\n          size={size}\r\n          icon={ChevronsRight}\r\n          disabled={page === totalPages || disabled}\r\n          onClick={() => onChange(totalPages)}\r\n          aria-label=\"Last page\"\r\n        />\r\n      )}\r\n    </nav>\r\n  );\r\n\r\n  // ── Standalone mode ────────────────────────────────────────────────────────\r\n  if (!tableMode) {\r\n    return <div className={rootClasses}>{nav}</div>;\r\n  }\r\n\r\n  // ── Table-footer mode ──────────────────────────────────────────────────────\r\n  return (\r\n    <div className={rootClasses}>\r\n      {hasResults && (\r\n        <span className=\"eidos-pagination-info\">\r\n          Showing {startItem}-{endItem} of {totalItems} results\r\n        </span>\r\n      )}\r\n\r\n      <div className=\"eidos-pagination-controls\">\r\n        {hasPageSize && (\r\n          <div className=\"eidos-pagination-size\">\r\n            <label className=\"eidos-pagination-size-label\">Show:</label>\r\n            <Select\r\n              value={String(pageSize)}\r\n              onChange={(val) => onPageSizeChange(Number(val))}\r\n              options={pageSizeOptions.map((n) => ({\r\n                id: String(n),\r\n                value: String(n),\r\n                label: String(n),\r\n              }))}\r\n              clearable={false}\r\n              disabled={disabled}\r\n              inputProps={{ size: 'sm', width: '3ch' }}\r\n            />\r\n          </div>\r\n        )}\r\n\r\n        {totalPages > 1 && nav}\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\nPagination.displayName = 'Pagination';\r\n"],"mappings":"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","names":[]}