blacktrigram 0.7.2

package/lib/components/shared/base/BaseButton.js

@@ -0,0 +1,214 @@
+import { KOREAN_COLORS } from "../../../types/constants/colors.js";
+import { UI_DIMENSIONS } from "../../../types/constants/ui.js";
+import "../../../types/constants/index.js";
+import { hexToRgbaString } from "../../../utils/colorUtils.js";
+import { useKoreanTheme } from "./useKoreanTheme.js";
+import { applyHtmlOverlayStyles, calculateDistanceFactor } from "../../../utils/htmlOverlayHelpers.js";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Html } from "@react-three/drei";
+//#region src/components/shared/base/BaseButton.tsx
+/**
+* BaseButton - Enhanced button component with Korean theming
+*
+* Builds on existing KoreanButton with extracted common logic
+* Provides consistent button styling across the application
+*
+* Now with Html overlay positioning helpers for:
+* - Consistent z-index management
+* - Performance optimization with distanceFactor
+* - GPU acceleration
+*
+* @module components/base
+*/
+/**
+* BaseButton Component
+*
+* Enhanced Korean-themed button with common functionality extracted.
+* Uses useKoreanTheme hook for consistent styling.
+* Now includes Html overlay positioning helpers for proper z-index and performance.
+*
+* WCAG 2.1 AA Accessibility Features:
+* - Proper ARIA labels and semantic HTML
+* - Keyboard navigation support (Enter and Space keys)
+* - Visible focus indicators with high contrast
+* - Disabled state properly communicated
+* - Minimum 44x44px touch targets on mobile
+*
+* Optimized with React.memo for performance
+*
+* @example
+* ```tsx
+* <BaseButton
+*   korean="공격"
+*   english="Attack"
+*   onClick={() => console.log("Attack")}
+*   variant="primary"
+*   size="md"
+*   layer="hud"
+*   ariaLabel="Attack button"
+* />
+* ```
+*/
+var BaseButtonComponent = ({ korean, english, onClick, disabled = false, variant = "primary", size = "md", position = [
+	0,
+	0,
+	0
+], fullWidth = false, testId, isMobile = false, layer = "hud", occlude = false, ariaLabel, ariaDescribedBy, autoFocus = false }) => {
+	const [isHovered, setIsHovered] = useState(false);
+	const [isPressed, setIsPressed] = useState(false);
+	const [isFocused, setIsFocused] = useState(false);
+	const buttonRef = useRef(null);
+	const { buttonVariant, buttonSize, fontFamily, accessibility } = useKoreanTheme({
+		variant,
+		size,
+		disabled,
+		isMobile
+	});
+	useEffect(() => {
+		if (autoFocus && buttonRef.current) buttonRef.current.focus();
+	}, [autoFocus]);
+	const [screenWidth, setScreenWidth] = useState(() => typeof window !== "undefined" ? window.innerWidth : UI_DIMENSIONS.DEFAULT_SCREEN_WIDTH);
+	useEffect(() => {
+		if (typeof window === "undefined") return;
+		const handleResize = () => {
+			setScreenWidth(window.innerWidth);
+		};
+		window.addEventListener("resize", handleResize);
+		return () => window.removeEventListener("resize", handleResize);
+	}, []);
+	const distanceFactor = useMemo(() => {
+		return calculateDistanceFactor(screenWidth, "button", isMobile);
+	}, [screenWidth, isMobile]);
+	const overlayStyle = useMemo(() => {
+		return applyHtmlOverlayStyles(layer, true, distanceFactor, true, occlude);
+	}, [
+		layer,
+		distanceFactor,
+		occlude
+	]);
+	const handleClick = useCallback(() => {
+		if (!disabled) onClick();
+	}, [onClick, disabled]);
+	const handleMouseEnter = useCallback(() => {
+		if (!disabled) setIsHovered(true);
+	}, [disabled]);
+	const handleMouseLeave = useCallback(() => {
+		setIsHovered(false);
+		setIsPressed(false);
+	}, []);
+	const handleMouseDown = useCallback(() => {
+		if (!disabled) setIsPressed(true);
+	}, [disabled]);
+	const handleMouseUp = useCallback(() => {
+		setIsPressed(false);
+	}, []);
+	const handleFocus = useCallback(() => {
+		setIsFocused(true);
+	}, []);
+	const handleBlur = useCallback(() => {
+		setIsFocused(false);
+	}, []);
+	const handleKeyDown = useCallback((e) => {
+		if ((e.key === "Enter" || e.key === " ") && !disabled) setIsPressed(true);
+	}, [disabled]);
+	const handleKeyUp = useCallback((e) => {
+		if ((e.key === "Enter" || e.key === " ") && !disabled) setIsPressed(false);
+	}, [disabled]);
+	const buttonStyle = useMemo(() => {
+		let background = hexToRgbaString(buttonVariant.background, .9);
+		if (isPressed) background = buttonVariant.activeBg;
+		else if (isHovered) background = buttonVariant.hoverBg;
+		return {
+			background,
+			border: `${buttonSize.borderWidth} solid ${hexToRgbaString(buttonVariant.border)}`,
+			color: hexToRgbaString(buttonVariant.text),
+			padding: buttonSize.padding,
+			fontSize: buttonSize.fontSize,
+			fontFamily: fontFamily.KOREAN,
+			fontWeight: "bold",
+			cursor: disabled ? "not-allowed" : "pointer",
+			opacity: disabled ? .5 : 1,
+			borderRadius: "4px",
+			transition: "all 0.2s ease",
+			textAlign: "center",
+			userSelect: "none",
+			WebkitUserSelect: "none",
+			width: fullWidth ? "100%" : "auto",
+			minWidth: isMobile ? accessibility.minTouchTarget : "auto",
+			minHeight: isMobile ? accessibility.minTouchTarget : "auto",
+			boxShadow: isHovered && !disabled ? `0 0 10px ${hexToRgbaString(buttonVariant.border, .5)}` : "none",
+			transform: isPressed && !disabled ? "scale(0.98)" : "scale(1)",
+			textShadow: `0 2px 4px ${hexToRgbaString(KOREAN_COLORS.BLACK_SOLID, .5)}`,
+			WebkitTransform: overlayStyle.transform,
+			zIndex: overlayStyle.zIndex,
+			outline: isFocused && !disabled ? accessibility.focusOutline : "none",
+			outlineOffset: isFocused && !disabled ? accessibility.focusOutlineOffset : "0"
+		};
+	}, [
+		buttonVariant,
+		buttonSize,
+		fontFamily,
+		disabled,
+		fullWidth,
+		isHovered,
+		isPressed,
+		isFocused,
+		overlayStyle,
+		isMobile,
+		accessibility
+	]);
+	return /* @__PURE__ */ jsx(Html, {
+		position,
+		center: overlayStyle.center,
+		distanceFactor: overlayStyle.distanceFactor,
+		occlude: overlayStyle.occlude,
+		style: { pointerEvents: overlayStyle.pointerEvents },
+		children: /* @__PURE__ */ jsx("button", {
+			ref: buttonRef,
+			onClick: handleClick,
+			onMouseEnter: handleMouseEnter,
+			onMouseLeave: handleMouseLeave,
+			onMouseDown: handleMouseDown,
+			onMouseUp: handleMouseUp,
+			onFocus: handleFocus,
+			onBlur: handleBlur,
+			onKeyDown: handleKeyDown,
+			onKeyUp: handleKeyUp,
+			disabled,
+			type: "button",
+			"aria-label": ariaLabel ?? `${korean} ${english}`,
+			"aria-describedby": ariaDescribedBy,
+			"aria-disabled": disabled,
+			style: buttonStyle,
+			"data-testid": testId ?? "base-button",
+			children: /* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					flexDirection: "column",
+					alignItems: "center",
+					gap: "2px"
+				},
+				children: [/* @__PURE__ */ jsx("span", {
+					lang: "ko",
+					style: { fontSize: "1em" },
+					children: korean
+				}), /* @__PURE__ */ jsx("span", {
+					lang: "en",
+					style: {
+						fontSize: "0.75em",
+						opacity: .8,
+						fontStyle: "italic"
+					},
+					children: english
+				})]
+			})
+		})
+	});
+};
+var BaseButton = React.memo(BaseButtonComponent);
+BaseButton.displayName = "BaseButton";
+//#endregion
+export { BaseButton };
+
+//# sourceMappingURL=BaseButton.js.map

package/lib/components/shared/base/BaseButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseButton.js","names":[],"sources":["../../../../src/components/shared/base/BaseButton.tsx"],"sourcesContent":["/**\n * BaseButton - Enhanced button component with Korean theming\n *\n * Builds on existing KoreanButton with extracted common logic\n * Provides consistent button styling across the application\n *\n * Now with Html overlay positioning helpers for:\n * - Consistent z-index management\n * - Performance optimization with distanceFactor\n * - GPU acceleration\n *\n * @module components/base\n */\n\nimport { Html } from \"@react-three/drei\";\nimport React, {\n  useCallback,\n  useMemo,\n  useState,\n  useEffect,\n  useRef,\n} from \"react\";\nimport { KOREAN_COLORS, UI_DIMENSIONS } from \"@/types/constants\";\nimport { hexToRgbaString } from \"../../../utils/colorUtils\";\nimport {\n  applyHtmlOverlayStyles,\n  calculateDistanceFactor,\n} from \"../../../utils/htmlOverlayHelpers\";\nimport type { HtmlOverlayLayer } from \"../../../types/HtmlOverlayTypes\";\nimport { useKoreanTheme } from \"./useKoreanTheme\";\n\n/**\n * Props for BaseButton component\n */\nexport interface BaseButtonProps {\n  readonly korean: string;\n  readonly english: string;\n  readonly onClick: () => void;\n  readonly disabled?: boolean;\n  readonly variant?: \"primary\" | \"secondary\" | \"danger\";\n  readonly size?: \"sm\" | \"md\" | \"lg\";\n  readonly position?: [number, number, number];\n  readonly fullWidth?: boolean;\n  readonly testId?: string;\n  readonly isMobile?: boolean;\n  /** Html overlay layer for z-index (default: 'hud') */\n  readonly layer?: HtmlOverlayLayer;\n  /** Whether button should occlude behind 3D objects (default: false) */\n  readonly occlude?: boolean;\n  /** ARIA label for accessibility (optional, defaults to korean text) */\n  readonly ariaLabel?: string;\n  /** ARIA described by ID for additional context */\n  readonly ariaDescribedBy?: string;\n  /** Auto-focus on mount (default: false) */\n  readonly autoFocus?: boolean;\n}\n\n/**\n * BaseButton Component\n *\n * Enhanced Korean-themed button with common functionality extracted.\n * Uses useKoreanTheme hook for consistent styling.\n * Now includes Html overlay positioning helpers for proper z-index and performance.\n *\n * WCAG 2.1 AA Accessibility Features:\n * - Proper ARIA labels and semantic HTML\n * - Keyboard navigation support (Enter and Space keys)\n * - Visible focus indicators with high contrast\n * - Disabled state properly communicated\n * - Minimum 44x44px touch targets on mobile\n *\n * Optimized with React.memo for performance\n *\n * @example\n * ```tsx\n * <BaseButton\n *   korean=\"공격\"\n *   english=\"Attack\"\n *   onClick={() => console.log(\"Attack\")}\n *   variant=\"primary\"\n *   size=\"md\"\n *   layer=\"hud\"\n *   ariaLabel=\"Attack button\"\n * />\n * ```\n */\nconst BaseButtonComponent: React.FC<BaseButtonProps> = ({\n  korean,\n  english,\n  onClick,\n  disabled = false,\n  variant = \"primary\",\n  size = \"md\",\n  position = [0, 0, 0],\n  fullWidth = false,\n  testId,\n  isMobile = false,\n  layer = \"hud\",\n  occlude = false,\n  ariaLabel,\n  ariaDescribedBy,\n  autoFocus = false,\n}) => {\n  const [isHovered, setIsHovered] = useState(false);\n  const [isPressed, setIsPressed] = useState(false);\n  const [isFocused, setIsFocused] = useState(false);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n\n  // Use Korean theme hook for consistent styling\n  const { buttonVariant, buttonSize, fontFamily, accessibility } =\n    useKoreanTheme({\n      variant,\n      size,\n      disabled,\n      isMobile,\n    });\n\n  // Auto-focus on mount if requested\n  useEffect(() => {\n    if (autoFocus && buttonRef.current) {\n      buttonRef.current.focus();\n    }\n  }, [autoFocus]);\n\n  // Track screen width for responsive distance factor updates on resize\n  const [screenWidth, setScreenWidth] = useState(() =>\n    typeof window !== \"undefined\"\n      ? window.innerWidth\n      : UI_DIMENSIONS.DEFAULT_SCREEN_WIDTH,\n  );\n\n  useEffect(() => {\n    if (typeof window === \"undefined\") return;\n\n    const handleResize = () => {\n      setScreenWidth(window.innerWidth);\n    };\n\n    window.addEventListener(\"resize\", handleResize);\n    return () => window.removeEventListener(\"resize\", handleResize);\n  }, []);\n\n  // Calculate optimal distance factor for button\n  const distanceFactor = useMemo(() => {\n    return calculateDistanceFactor(screenWidth, \"button\", isMobile);\n  }, [screenWidth, isMobile]);\n\n  // Apply Html overlay styles with proper z-index\n  const overlayStyle = useMemo(() => {\n    return applyHtmlOverlayStyles(layer, true, distanceFactor, true, occlude);\n  }, [layer, distanceFactor, occlude]);\n\n  const handleClick = useCallback(() => {\n    if (!disabled) {\n      onClick();\n    }\n  }, [onClick, disabled]);\n\n  const handleMouseEnter = useCallback(() => {\n    if (!disabled) {\n      setIsHovered(true);\n    }\n  }, [disabled]);\n\n  const handleMouseLeave = useCallback(() => {\n    setIsHovered(false);\n    setIsPressed(false);\n  }, []);\n\n  const handleMouseDown = useCallback(() => {\n    if (!disabled) {\n      setIsPressed(true);\n    }\n  }, [disabled]);\n\n  const handleMouseUp = useCallback(() => {\n    setIsPressed(false);\n  }, []);\n\n  const handleFocus = useCallback(() => {\n    setIsFocused(true);\n  }, []);\n\n  const handleBlur = useCallback(() => {\n    setIsFocused(false);\n  }, []);\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLButtonElement>) => {\n      // Set pressed state for visual feedback on keyboard activation\n      if ((e.key === \"Enter\" || e.key === \" \") && !disabled) {\n        setIsPressed(true);\n      }\n    },\n    [disabled],\n  );\n\n  const handleKeyUp = useCallback(\n    (e: React.KeyboardEvent<HTMLButtonElement>) => {\n      // Clear pressed state - native button behavior will trigger onClick\n      if ((e.key === \"Enter\" || e.key === \" \") && !disabled) {\n        setIsPressed(false);\n      }\n    },\n    [disabled],\n  );\n\n  // Memoize button styles for performance\n  const buttonStyle = useMemo<React.CSSProperties>(() => {\n    let background = hexToRgbaString(buttonVariant.background, 0.9);\n\n    if (isPressed) {\n      background = buttonVariant.activeBg;\n    } else if (isHovered) {\n      background = buttonVariant.hoverBg;\n    }\n\n    return {\n      background,\n      border: `${buttonSize.borderWidth} solid ${hexToRgbaString(buttonVariant.border)}`,\n      color: hexToRgbaString(buttonVariant.text),\n      padding: buttonSize.padding,\n      fontSize: buttonSize.fontSize,\n      fontFamily: fontFamily.KOREAN,\n      fontWeight: \"bold\",\n      cursor: disabled ? \"not-allowed\" : \"pointer\",\n      opacity: disabled ? 0.5 : 1,\n      borderRadius: \"4px\",\n      transition: \"all 0.2s ease\",\n      textAlign: \"center\",\n      userSelect: \"none\",\n      WebkitUserSelect: \"none\",\n      width: fullWidth ? \"100%\" : \"auto\",\n      // Ensure minimum touch target size on mobile (WCAG 2.1 AA)\n      minWidth: isMobile ? accessibility.minTouchTarget : \"auto\",\n      minHeight: isMobile ? accessibility.minTouchTarget : \"auto\",\n      boxShadow:\n        isHovered && !disabled\n          ? `0 0 10px ${hexToRgbaString(buttonVariant.border, 0.5)}`\n          : \"none\",\n      transform: isPressed && !disabled ? \"scale(0.98)\" : \"scale(1)\",\n      textShadow: `0 2px 4px ${hexToRgbaString(KOREAN_COLORS.BLACK_SOLID, 0.5)}`,\n      // Apply GPU acceleration from overlay style\n      WebkitTransform: overlayStyle.transform,\n      zIndex: overlayStyle.zIndex,\n      // WCAG 2.1 AA compliant focus indicator\n      outline: isFocused && !disabled ? accessibility.focusOutline : \"none\",\n      outlineOffset:\n        isFocused && !disabled ? accessibility.focusOutlineOffset : \"0\",\n    };\n  }, [\n    buttonVariant,\n    buttonSize,\n    fontFamily,\n    disabled,\n    fullWidth,\n    isHovered,\n    isPressed,\n    isFocused,\n    overlayStyle,\n    isMobile,\n    accessibility,\n  ]);\n\n  return (\n    <Html\n      position={position}\n      center={overlayStyle.center}\n      distanceFactor={overlayStyle.distanceFactor}\n      occlude={overlayStyle.occlude}\n      style={{ pointerEvents: overlayStyle.pointerEvents }}\n    >\n      <button\n        ref={buttonRef}\n        onClick={handleClick}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n        onMouseDown={handleMouseDown}\n        onMouseUp={handleMouseUp}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        onKeyDown={handleKeyDown}\n        onKeyUp={handleKeyUp}\n        disabled={disabled}\n        type=\"button\"\n        aria-label={ariaLabel ?? `${korean} ${english}`}\n        aria-describedby={ariaDescribedBy}\n        aria-disabled={disabled}\n        style={buttonStyle}\n        data-testid={testId ?? \"base-button\"}\n      >\n        <div\n          style={{\n            display: \"flex\",\n            flexDirection: \"column\",\n            alignItems: \"center\",\n            gap: \"2px\",\n          }}\n        >\n          <span lang=\"ko\" style={{ fontSize: \"1em\" }}>\n            {korean}\n          </span>\n          <span\n            lang=\"en\"\n            style={{\n              fontSize: \"0.75em\",\n              opacity: 0.8,\n              fontStyle: \"italic\",\n            }}\n          >\n            {english}\n          </span>\n        </div>\n      </button>\n    </Html>\n  );\n};\n\n// Export memoized component for performance optimization\nexport const BaseButton = React.memo(BaseButtonComponent);\n\nBaseButton.displayName = \"BaseButton\";\n"],"mappings":"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"}

package/lib/components/shared/base/BaseButtonOverlayHtml.d.ts

@@ -0,0 +1,52 @@
+/**
+ * BaseButtonOverlayHtml - HTML button component with Korean theming (non-Three.js)
+ *
+ * A version of BaseButton that doesn't require Three.js/Canvas context
+ * Can be used in regular DOM components
+ *
+ * @module components/base
+ */
+import React from "react";
+/**
+ * Props for BaseButtonOverlayHtml component
+ */
+export interface BaseButtonOverlayHtmlProps {
+    readonly korean: string;
+    readonly english: string;
+    readonly onClick: () => void;
+    readonly onMouseEnter?: () => void;
+    readonly disabled?: boolean;
+    readonly variant?: "primary" | "secondary" | "danger";
+    readonly size?: "sm" | "md" | "lg";
+    readonly fullWidth?: boolean;
+    readonly testId?: string;
+    readonly isMobile?: boolean;
+    readonly className?: string;
+    readonly style?: React.CSSProperties;
+    readonly autoFocus?: boolean;
+    readonly ariaLabel?: string;
+    readonly ariaCurrent?: React.AriaAttributes["aria-current"];
+}
+/**
+ * BaseButtonOverlayHtml Component
+ *
+ * HTML button with Korean theming (no Three.js dependency).
+ * Uses useKoreanTheme hook for consistent styling.
+ *
+ * Optimized with React.memo for 60fps performance:
+ * - Prevents re-renders when props haven't changed
+ * - Event handlers already use useCallback internally
+ *
+ * @example
+ * ```tsx
+ * <BaseButtonOverlayHtml
+ *   korean="확인"
+ *   english="Confirm"
+ *   onClick={() => handleConfirm()}
+ *   variant="primary"
+ *   size="md"
+ * />
+ * ```
+ */
+export declare const BaseButtonOverlayHtml: React.NamedExoticComponent<BaseButtonOverlayHtmlProps>;
+//# sourceMappingURL=BaseButtonOverlayHtml.d.ts.map

package/lib/components/shared/base/BaseButtonOverlayHtml.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseButtonOverlayHtml.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/base/BaseButtonOverlayHtml.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAyC,MAAM,OAAO,CAAC;AAK9D;;GAEG;AACH,MAAM,WAAW,0BAA0B;IACzC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;IAC7B,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAC;IACtD,QAAQ,CAAC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACnC,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;CAC7D;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,qBAAqB,wDAkIhC,CAAC"}

package/lib/components/shared/base/BaseButtonOverlayHtml.js

@@ -0,0 +1,130 @@
+import { useKoreanTheme } from "./useKoreanTheme.js";
+import { getKoreanButtonWithGlow } from "../../../utils/koreanThemeHelpers.js";
+import { UIHaptics } from "../../../utils/hapticFeedback.js";
+import React, { useCallback, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/shared/base/BaseButtonOverlayHtml.tsx
+/**
+* BaseButtonOverlayHtml - HTML button component with Korean theming (non-Three.js)
+* 
+* A version of BaseButton that doesn't require Three.js/Canvas context
+* Can be used in regular DOM components
+* 
+* @module components/base
+*/
+/**
+* BaseButtonOverlayHtml Component
+* 
+* HTML button with Korean theming (no Three.js dependency).
+* Uses useKoreanTheme hook for consistent styling.
+*
+* Optimized with React.memo for 60fps performance:
+* - Prevents re-renders when props haven't changed
+* - Event handlers already use useCallback internally
+* 
+* @example
+* ```tsx
+* <BaseButtonOverlayHtml
+*   korean="확인"
+*   english="Confirm"
+*   onClick={() => handleConfirm()}
+*   variant="primary"
+*   size="md"
+* />
+* ```
+*/
+var BaseButtonOverlayHtml = React.memo(({ korean, english, onClick, onMouseEnter, disabled = false, variant = "primary", size = "md", fullWidth = false, testId, isMobile = false, className, style: customStyle, autoFocus = false, ariaLabel, ariaCurrent }) => {
+	const [isHovered, setIsHovered] = useState(false);
+	const [isPressed, setIsPressed] = useState(false);
+	const { buttonSize } = useKoreanTheme({
+		variant,
+		size,
+		disabled,
+		isMobile
+	});
+	return /* @__PURE__ */ jsx("button", {
+		onClick: useCallback(() => {
+			if (!disabled) {
+				UIHaptics.buttonTap();
+				onClick();
+			}
+		}, [onClick, disabled]),
+		onMouseEnter: useCallback(() => {
+			if (!disabled) {
+				UIHaptics.menuHover();
+				setIsHovered(true);
+				onMouseEnter?.();
+			}
+		}, [disabled, onMouseEnter]),
+		onMouseLeave: useCallback(() => {
+			setIsHovered(false);
+			setIsPressed(false);
+		}, []),
+		onMouseDown: useCallback(() => {
+			if (!disabled) setIsPressed(true);
+		}, [disabled]),
+		onMouseUp: useCallback(() => {
+			setIsPressed(false);
+		}, []),
+		disabled,
+		style: useMemo(() => {
+			return {
+				...getKoreanButtonWithGlow({
+					variant,
+					isHovered: isHovered && !disabled,
+					isPressed: isPressed && !disabled,
+					isFocused: false,
+					glowIntensity: "medium",
+					hoverAnimation: "combined"
+				}),
+				padding: buttonSize.padding,
+				fontSize: buttonSize.fontSize,
+				cursor: disabled ? "not-allowed" : "pointer",
+				opacity: disabled ? .5 : 1,
+				borderRadius: "4px",
+				textAlign: "center",
+				userSelect: "none",
+				WebkitUserSelect: "none",
+				width: fullWidth ? "100%" : "auto",
+				...customStyle
+			};
+		}, [
+			variant,
+			buttonSize,
+			disabled,
+			fullWidth,
+			isHovered,
+			isPressed,
+			customStyle
+		]),
+		className,
+		"data-testid": testId ?? "base-button-html",
+		autoFocus,
+		"aria-label": ariaLabel ?? `${korean} | ${english}`,
+		"aria-current": ariaCurrent,
+		children: /* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				flexDirection: "column",
+				alignItems: "center",
+				gap: "2px"
+			},
+			children: [/* @__PURE__ */ jsx("span", {
+				style: { fontSize: "1em" },
+				children: korean
+			}), /* @__PURE__ */ jsx("span", {
+				style: {
+					fontSize: "0.75em",
+					opacity: .8,
+					fontStyle: "italic"
+				},
+				children: english
+			})]
+		})
+	});
+});
+BaseButtonOverlayHtml.displayName = "BaseButtonOverlayHtml";
+//#endregion
+export { BaseButtonOverlayHtml };
+
+//# sourceMappingURL=BaseButtonOverlayHtml.js.map

package/lib/components/shared/base/BaseButtonOverlayHtml.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseButtonOverlayHtml.js","names":[],"sources":["../../../../src/components/shared/base/BaseButtonOverlayHtml.tsx"],"sourcesContent":["/**\n * BaseButtonOverlayHtml - HTML button component with Korean theming (non-Three.js)\n * \n * A version of BaseButton that doesn't require Three.js/Canvas context\n * Can be used in regular DOM components\n * \n * @module components/base\n */\n\nimport React, { useCallback, useMemo, useState } from \"react\";\nimport { getKoreanButtonWithGlow } from \"../../../utils/koreanThemeHelpers\";\nimport { useKoreanTheme } from \"./useKoreanTheme\";\nimport { UIHaptics } from \"../../../utils/hapticFeedback\";\n\n/**\n * Props for BaseButtonOverlayHtml component\n */\nexport interface BaseButtonOverlayHtmlProps {\n  readonly korean: string;\n  readonly english: string;\n  readonly onClick: () => void;\n  readonly onMouseEnter?: () => void;\n  readonly disabled?: boolean;\n  readonly variant?: \"primary\" | \"secondary\" | \"danger\";\n  readonly size?: \"sm\" | \"md\" | \"lg\";\n  readonly fullWidth?: boolean;\n  readonly testId?: string;\n  readonly isMobile?: boolean;\n  readonly className?: string;\n  readonly style?: React.CSSProperties;\n  readonly autoFocus?: boolean;\n  readonly ariaLabel?: string;\n  readonly ariaCurrent?: React.AriaAttributes[\"aria-current\"];\n}\n\n/**\n * BaseButtonOverlayHtml Component\n * \n * HTML button with Korean theming (no Three.js dependency).\n * Uses useKoreanTheme hook for consistent styling.\n *\n * Optimized with React.memo for 60fps performance:\n * - Prevents re-renders when props haven't changed\n * - Event handlers already use useCallback internally\n * \n * @example\n * ```tsx\n * <BaseButtonOverlayHtml\n *   korean=\"확인\"\n *   english=\"Confirm\"\n *   onClick={() => handleConfirm()}\n *   variant=\"primary\"\n *   size=\"md\"\n * />\n * ```\n */\nexport const BaseButtonOverlayHtml = React.memo<BaseButtonOverlayHtmlProps>(\n  ({\n    korean,\n    english,\n    onClick,\n    onMouseEnter,\n    disabled = false,\n  variant = \"primary\",\n  size = \"md\",\n  fullWidth = false,\n  testId,\n  isMobile = false,\n  className,\n  style: customStyle,\n  autoFocus = false,\n  ariaLabel,\n  ariaCurrent,\n}) => {\n  const [isHovered, setIsHovered] = useState(false);\n  const [isPressed, setIsPressed] = useState(false);\n\n  // Use Korean theme hook for size and font info only\n  const { buttonSize } = useKoreanTheme({\n    variant,\n    size,\n    disabled,\n    isMobile,\n  });\n\n  const handleClick = useCallback(() => {\n    if (!disabled) {\n      UIHaptics.buttonTap(); // Add haptic feedback\n      onClick();\n    }\n  }, [onClick, disabled]);\n\n  const handleMouseEnterInternal = useCallback(() => {\n    if (!disabled) {\n      UIHaptics.menuHover(); // Add haptic feedback\n      setIsHovered(true);\n      onMouseEnter?.();\n    }\n  }, [disabled, onMouseEnter]);\n\n  const handleMouseLeave = useCallback(() => {\n    setIsHovered(false);\n    setIsPressed(false);\n  }, []);\n\n  const handleMouseDown = useCallback(() => {\n    if (!disabled) {\n      setIsPressed(true);\n    }\n  }, [disabled]);\n\n  const handleMouseUp = useCallback(() => {\n    setIsPressed(false);\n  }, []);\n\n  // Memoize button styles for performance - now using enhanced visual effects\n  const buttonStyle = useMemo<React.CSSProperties>(() => {\n    // Get enhanced button styles with neon glow\n    const enhancedStyles = getKoreanButtonWithGlow({\n      variant,\n      isHovered: isHovered && !disabled,\n      isPressed: isPressed && !disabled,\n      isFocused: false,\n      glowIntensity: \"medium\",\n      hoverAnimation: \"combined\",\n    });\n\n    // Merge with size-specific styles\n    // Note: fontSize from enhancedStyles is intentionally overridden by buttonSize.fontSize\n    // to ensure consistent sizing across button size variants (small/medium/large).\n    // The Korean font optimization (anti-aliasing, letter-spacing) is preserved.\n    return {\n      ...enhancedStyles,\n      padding: buttonSize.padding,\n      fontSize: buttonSize.fontSize, // Override for size consistency\n      cursor: disabled ? \"not-allowed\" : \"pointer\",\n      opacity: disabled ? 0.5 : 1,\n      borderRadius: \"4px\",\n      textAlign: \"center\" as const,\n      userSelect: \"none\" as const,\n      WebkitUserSelect: \"none\" as const,\n      width: fullWidth ? \"100%\" : \"auto\",\n      ...customStyle,\n    };\n  }, [\n    variant,\n    buttonSize,\n    disabled,\n    fullWidth,\n    isHovered,\n    isPressed,\n    customStyle,\n  ]);\n\n  return (\n    <button\n      onClick={handleClick}\n      onMouseEnter={handleMouseEnterInternal}\n      onMouseLeave={handleMouseLeave}\n      onMouseDown={handleMouseDown}\n      onMouseUp={handleMouseUp}\n      disabled={disabled}\n      style={buttonStyle}\n      className={className}\n      data-testid={testId ?? \"base-button-html\"}\n      autoFocus={autoFocus}\n      aria-label={ariaLabel ?? `${korean} | ${english}`}\n      aria-current={ariaCurrent}\n    >\n      <div style={{ \n        display: \"flex\", \n        flexDirection: \"column\", \n        alignItems: \"center\",\n        gap: \"2px\"\n      }}>\n        <span style={{ fontSize: \"1em\" }}>{korean}</span>\n        <span style={{ \n          fontSize: \"0.75em\", \n          opacity: 0.8,\n          fontStyle: \"italic\"\n        }}>\n          {english}\n        </span>\n      </div>\n    </button>\n  );\n});\n\nBaseButtonOverlayHtml.displayName = \"BaseButtonOverlayHtml\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwDA,IAAa,wBAAwB,MAAM,MACxC,EACC,QACA,SACA,SACA,cACA,WAAW,OACb,UAAU,WACV,OAAO,MACP,YAAY,OACZ,QACA,WAAW,OACX,WACA,OAAO,aACP,YAAY,OACZ,WACA,kBACI;CACJ,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;CACjD,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;CAGjD,MAAM,EAAE,eAAe,eAAe;EACpC;EACA;EACA;EACA;EACD,CAAC;AAuEF,QACE,oBAAC,UAAD;EACE,SAvEgB,kBAAkB;AACpC,OAAI,CAAC,UAAU;AACb,cAAU,WAAW;AACrB,aAAS;;KAEV,CAAC,SAAS,SAAS,CAAC;EAmEnB,cAjE6B,kBAAkB;AACjD,OAAI,CAAC,UAAU;AACb,cAAU,WAAW;AACrB,iBAAa,KAAK;AAClB,oBAAgB;;KAEjB,CAAC,UAAU,aAAa,CAAC;EA4DxB,cA1DqB,kBAAkB;AACzC,gBAAa,MAAM;AACnB,gBAAa,MAAM;KAClB,EAAE,CAAC;EAwDF,aAtDoB,kBAAkB;AACxC,OAAI,CAAC,SACH,cAAa,KAAK;KAEnB,CAAC,SAAS,CAAC;EAmDV,WAjDkB,kBAAkB;AACtC,gBAAa,MAAM;KAClB,EAAE,CAAC;EAgDQ;EACV,OA9CgB,cAAmC;AAerD,UAAO;IACL,GAdqB,wBAAwB;KAC7C;KACA,WAAW,aAAa,CAAC;KACzB,WAAW,aAAa,CAAC;KACzB,WAAW;KACX,eAAe;KACf,gBAAgB;KACjB,CAAC;IAQA,SAAS,WAAW;IACpB,UAAU,WAAW;IACrB,QAAQ,WAAW,gBAAgB;IACnC,SAAS,WAAW,KAAM;IAC1B,cAAc;IACd,WAAW;IACX,YAAY;IACZ,kBAAkB;IAClB,OAAO,YAAY,SAAS;IAC5B,GAAG;IACJ;KACA;GACD;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EAWa;EACX,eAAa,UAAU;EACZ;EACX,cAAY,aAAa,GAAG,OAAO,KAAK;EACxC,gBAAc;YAEd,qBAAC,OAAD;GAAK,OAAO;IACV,SAAS;IACT,eAAe;IACf,YAAY;IACZ,KAAK;IACN;aALD,CAME,oBAAC,QAAD;IAAM,OAAO,EAAE,UAAU,OAAO;cAAG;IAAc,CAAA,EACjD,oBAAC,QAAD;IAAM,OAAO;KACX,UAAU;KACV,SAAS;KACT,WAAW;KACZ;cACE;IACI,CAAA,CACH;;EACC,CAAA;EAEX;AAEF,sBAAsB,cAAc"}

package/lib/components/shared/base/BasePanel.d.ts

@@ -0,0 +1,30 @@
+/**
+ * BasePanel - Enhanced panel component with Korean theming
+ *
+ * Builds on existing KoreanPanel with extracted common logic
+ * Provides consistent panel styling across the application
+ *
+ * @module components/base
+ */
+import React from "react";
+/**
+ * Props for BasePanel component
+ */
+export interface BasePanelProps {
+    readonly children: React.ReactNode;
+    readonly position?: [number, number, number];
+    readonly width?: number | string;
+    readonly height?: number | string;
+    readonly padding?: number;
+    readonly variant?: "default" | "bordered" | "elevated";
+    readonly testId?: string;
+    readonly isMobile?: boolean;
+    /** ARIA role for semantic HTML (default: "region") */
+    readonly ariaRole?: "region" | "article" | "complementary" | "navigation" | "main";
+    /** ARIA label for accessibility */
+    readonly ariaLabel?: string;
+    /** ARIA described by ID for additional context */
+    readonly ariaDescribedBy?: string;
+}
+export declare const BasePanel: React.NamedExoticComponent<BasePanelProps>;
+//# sourceMappingURL=BasePanel.d.ts.map

package/lib/components/shared/base/BasePanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BasePanel.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/base/BasePanel.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,KAAkB,MAAM,OAAO,CAAC;AAGvC;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAC7C,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAClC,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;IACvD,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,sDAAsD;IACtD,QAAQ,CAAC,QAAQ,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,eAAe,GAAG,YAAY,GAAG,MAAM,CAAC;IACnF,mCAAmC;IACnC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,kDAAkD;IAClD,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,CAAC;CACnC;AA4ED,eAAO,MAAM,SAAS,4CAAiC,CAAC"}

package/lib/components/shared/base/BasePanel.js

@@ -0,0 +1,83 @@
+import { useKoreanTheme } from "./useKoreanTheme.js";
+import React, { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Html } from "@react-three/drei";
+//#region src/components/shared/base/BasePanel.tsx
+/**
+* BasePanel - Enhanced panel component with Korean theming
+* 
+* Builds on existing KoreanPanel with extracted common logic
+* Provides consistent panel styling across the application
+* 
+* @module components/base
+*/
+/**
+* BasePanel Component
+* 
+* Enhanced Korean-themed panel with common functionality extracted.
+* Uses useKoreanTheme hook for consistent styling.
+* 
+* WCAG 2.1 AA Accessibility Features:
+* - Proper ARIA roles for semantic HTML
+* - ARIA labels for screen reader context
+* - Responsive padding for touch targets
+* 
+* Optimized with React.memo for performance
+* 
+* @example
+* ```tsx
+* <BasePanel 
+*   variant="bordered" 
+*   padding={20}
+*   ariaRole="region"
+*   ariaLabel="Combat statistics panel"
+* >
+*   <h1>Panel Content</h1>
+* </BasePanel>
+* ```
+*/
+var BasePanelComponent = ({ children, position = [
+	0,
+	0,
+	0
+], width = "auto", height = "auto", padding = 16, variant = "default", testId, isMobile = false, ariaRole = "region", ariaLabel, ariaDescribedBy }) => {
+	const { panelVariant, fontFamily } = useKoreanTheme({
+		variant,
+		isMobile
+	});
+	return /* @__PURE__ */ jsx(Html, {
+		position,
+		center: true,
+		children: /* @__PURE__ */ jsx("div", {
+			style: useMemo(() => {
+				return {
+					width,
+					height,
+					padding: `${padding}px`,
+					borderRadius: "8px",
+					fontFamily: fontFamily.KOREAN,
+					background: panelVariant.background,
+					border: panelVariant.border,
+					boxShadow: panelVariant.boxShadow
+				};
+			}, [
+				width,
+				height,
+				padding,
+				panelVariant,
+				fontFamily
+			]),
+			"data-testid": testId ?? "base-panel",
+			role: ariaRole,
+			"aria-label": ariaLabel,
+			"aria-describedby": ariaDescribedBy,
+			children
+		})
+	});
+};
+var BasePanel = React.memo(BasePanelComponent);
+BasePanel.displayName = "BasePanel";
+//#endregion
+export { BasePanel };
+
+//# sourceMappingURL=BasePanel.js.map

package/lib/components/shared/base/BasePanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BasePanel.js","names":[],"sources":["../../../../src/components/shared/base/BasePanel.tsx"],"sourcesContent":["/**\n * BasePanel - Enhanced panel component with Korean theming\n * \n * Builds on existing KoreanPanel with extracted common logic\n * Provides consistent panel styling across the application\n * \n * @module components/base\n */\n\nimport { Html } from \"@react-three/drei\";\nimport React, { useMemo } from \"react\";\nimport { useKoreanTheme } from \"./useKoreanTheme\";\n\n/**\n * Props for BasePanel component\n */\nexport interface BasePanelProps {\n  readonly children: React.ReactNode;\n  readonly position?: [number, number, number];\n  readonly width?: number | string;\n  readonly height?: number | string;\n  readonly padding?: number;\n  readonly variant?: \"default\" | \"bordered\" | \"elevated\";\n  readonly testId?: string;\n  readonly isMobile?: boolean;\n  /** ARIA role for semantic HTML (default: \"region\") */\n  readonly ariaRole?: \"region\" | \"article\" | \"complementary\" | \"navigation\" | \"main\";\n  /** ARIA label for accessibility */\n  readonly ariaLabel?: string;\n  /** ARIA described by ID for additional context */\n  readonly ariaDescribedBy?: string;\n}\n\n/**\n * BasePanel Component\n * \n * Enhanced Korean-themed panel with common functionality extracted.\n * Uses useKoreanTheme hook for consistent styling.\n * \n * WCAG 2.1 AA Accessibility Features:\n * - Proper ARIA roles for semantic HTML\n * - ARIA labels for screen reader context\n * - Responsive padding for touch targets\n * \n * Optimized with React.memo for performance\n * \n * @example\n * ```tsx\n * <BasePanel \n *   variant=\"bordered\" \n *   padding={20}\n *   ariaRole=\"region\"\n *   ariaLabel=\"Combat statistics panel\"\n * >\n *   <h1>Panel Content</h1>\n * </BasePanel>\n * ```\n */\nconst BasePanelComponent: React.FC<BasePanelProps> = ({\n  children,\n  position = [0, 0, 0],\n  width = \"auto\",\n  height = \"auto\",\n  padding = 16,\n  variant = \"default\",\n  testId,\n  isMobile = false,\n  ariaRole = \"region\",\n  ariaLabel,\n  ariaDescribedBy,\n}) => {\n  // Use Korean theme hook for consistent styling\n  const { panelVariant, fontFamily } = useKoreanTheme({\n    variant,\n    isMobile,\n  });\n\n  // Memoize panel styles for performance\n  const panelStyle = useMemo<React.CSSProperties>(() => {\n    return {\n      width,\n      height,\n      padding: `${padding}px`,\n      borderRadius: \"8px\",\n      fontFamily: fontFamily.KOREAN,\n      background: panelVariant.background,\n      border: panelVariant.border,\n      boxShadow: panelVariant.boxShadow,\n    };\n  }, [width, height, padding, panelVariant, fontFamily]);\n\n  return (\n    <Html position={position} center>\n      <div \n        style={panelStyle} \n        data-testid={testId ?? \"base-panel\"}\n        role={ariaRole}\n        aria-label={ariaLabel}\n        aria-describedby={ariaDescribedBy}\n      >\n        {children}\n      </div>\n    </Html>\n  );\n};\n\n// Export memoized component for performance optimization\nexport const BasePanel = React.memo(BasePanelComponent);\n\nBasePanel.displayName = \"BasePanel\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0DA,IAAM,sBAAgD,EACpD,UACA,WAAW;CAAC;CAAG;CAAG;CAAE,EACpB,QAAQ,QACR,SAAS,QACT,UAAU,IACV,UAAU,WACV,QACA,WAAW,OACX,WAAW,UACX,WACA,sBACI;CAEJ,MAAM,EAAE,cAAc,eAAe,eAAe;EAClD;EACA;EACD,CAAC;AAgBF,QACE,oBAAC,MAAD;EAAgB;EAAU,QAAA;YACxB,oBAAC,OAAD;GACE,OAhBa,cAAmC;AACpD,WAAO;KACL;KACA;KACA,SAAS,GAAG,QAAQ;KACpB,cAAc;KACd,YAAY,WAAW;KACvB,YAAY,aAAa;KACzB,QAAQ,aAAa;KACrB,WAAW,aAAa;KACzB;MACA;IAAC;IAAO;IAAQ;IAAS;IAAc;IAAW,CAAC;GAMhD,eAAa,UAAU;GACvB,MAAM;GACN,cAAY;GACZ,oBAAkB;GAEjB;GACG,CAAA;EACD,CAAA;;AAKX,IAAa,YAAY,MAAM,KAAK,mBAAmB;AAEvD,UAAU,cAAc"}

package/lib/components/shared/base/BaseText.d.ts

@@ -0,0 +1,40 @@
+/**
+ * BaseText - Enhanced bilingual text component with Korean theming
+ *
+ * Builds on existing KoreanText with extracted common logic
+ * Provides consistent text styling across the application
+ *
+ * Now with Html overlay positioning helpers for:
+ * - Consistent z-index management
+ * - Performance optimization with distanceFactor
+ * - GPU acceleration
+ *
+ * @module components/base
+ */
+import React from "react";
+import type { HtmlOverlayLayer } from "../../../types/HtmlOverlayTypes";
+/**
+ * Props for BaseText component
+ */
+export interface BaseTextProps {
+    readonly korean: string;
+    readonly english: string;
+    readonly position?: [number, number, number];
+    readonly size?: "small" | "medium" | "large" | "xlarge";
+    readonly color?: number;
+    readonly align?: "left" | "center" | "right";
+    readonly weight?: "normal" | "bold";
+    readonly layout?: "vertical" | "horizontal";
+    readonly testId?: string;
+    readonly isMobile?: boolean;
+    /** Html overlay layer for z-index (default: 'hud') */
+    readonly layer?: HtmlOverlayLayer;
+    /** Whether text should occlude behind 3D objects (default: false) */
+    readonly occlude?: boolean;
+    /** ARIA label for accessibility (optional) */
+    readonly ariaLabel?: string;
+    /** ARIA live region for dynamic content (optional) */
+    readonly ariaLive?: "polite" | "assertive" | "off";
+}
+export declare const BaseText: React.NamedExoticComponent<BaseTextProps>;
+//# sourceMappingURL=BaseText.d.ts.map

package/lib/components/shared/base/BaseText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseText.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/base/BaseText.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAGH,OAAO,KAAuC,MAAM,OAAO,CAAC;AAO5D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAGxE;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAC7C,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;IACxD,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC7C,QAAQ,CAAC,MAAM,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACpC,QAAQ,CAAC,MAAM,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IAC5C,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,sDAAsD;IACtD,QAAQ,CAAC,KAAK,CAAC,EAAE,gBAAgB,CAAC;IAClC,qEAAqE;IACrE,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAC3B,8CAA8C;IAC9C,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,sDAAsD;IACtD,QAAQ,CAAC,QAAQ,CAAC,EAAE,QAAQ,GAAG,WAAW,GAAG,KAAK,CAAC;CACpD;AAwKD,eAAO,MAAM,QAAQ,2CAAgC,CAAC"}