@mks2508/mks-ui 0.3.1 → 0.4.0

package/dist/react-ui/blocks/Terminal/parsing/levels/LogLevelDetector.js

@@ -0,0 +1,325 @@
+//#region src/react-ui/blocks/Terminal/parsing/levels/LogLevelDetector.ts
+/**
+* Default log level patterns.
+*
+* Predefined patterns for common log formats and frameworks.
+* Includes support for:
+* - better-logger format (ℹ️ INFO)
+* - Supervisord format (INFO, CRIT)
+* - Next.js symbols (▲ ✓)
+* - ContainerLogs prefix
+*/
+const DEFAULT_PATTERNS = {
+	info: [
+		/ℹ️\s+INFO/i,
+		/ℹ️|🔵|💙|📖|📝/i,
+		/▲|✓|ℹ/,
+		/\[INFO\]|\(INFO\)|<INFO>|{INFO}/i,
+		/\bINFO(?:RMATION)?\b/i,
+		/\binfo\b/i,
+		/^\s*(?:INFO|Information):\s*/i,
+		/\[ContainerLogs\]/i,
+		/Ready in|Starting|Local:/i
+	],
+	warn: [
+		/⚠️\s+WARN/i,
+		/⚠️|🟡|⚡|🔶/i,
+		/⚡|⚠/,
+		/\[WARN(?:ING)?\]|\(WARN(?:ING)?\)|<WARN(?:ING)?>|{WARN(?:ING)?}/i,
+		/\bWARN(?:ING)?\b/i,
+		/\bwarn\b/i,
+		/^\s*(?:WARN|WARNING):\s*/i,
+		/deprecated|warning/i
+	],
+	error: [
+		/❌\s+ERROR/i,
+		/❌|🔴|❗|🚨|⛔|💀/i,
+		/✗|✖/,
+		/\[ERROR\]|\(ERROR\)|<ERROR>|{ERROR}/i,
+		/\bERROR\b/i,
+		/\berr(?:or)?\b/i,
+		/^\s*ERROR:\s*/i,
+		/failed|failure|exception|panic/i
+	],
+	debug: [
+		/🐛\s+DEBUG/i,
+		/🐛|🔍|🔬|⚙️/i,
+		/\[DEBUG\]|\(DEBUG\)|<DEBUG>|{DEBUG}/i,
+		/\bDEBUG\b/i,
+		/\bdebug\b/i,
+		/^\s*DEBUG:\s*/i
+	],
+	trace: [
+		/\[TRACE\]|\(TRACE\)|<TRACE>|{TRACE}/i,
+		/\bTRACE\b/i,
+		/\btrace\b/i,
+		/^\s*TRACE:\s*/i
+	],
+	fatal: [
+		/🚨\s+CRITICAL/i,
+		/💀|🔥|☠️|⚰️|🚨/i,
+		/\[FATAL\]|\(FATAL\)|<FATAL>|{FATAL}/i,
+		/\[CRITICAL\]|\(CRITICAL\)|<CRITICAL>|{CRITICAL}/i,
+		/\bFATAL\b/i,
+		/\bCRITICAL\b/i,
+		/\bCRIT\b/i,
+		/^\s*(?:FATAL|CRITICAL):\s*/i,
+		/fatal|critical|emergency/i
+	],
+	unknown: []
+};
+/**
+* Log level detector class.
+*
+* Detects log levels from text using pattern matching with
+* confidence scoring. Supports custom patterns and configurable
+* detection strategies.
+*
+* @example
+* ```ts
+* const detector = new LogLevelDetector();
+* const result = detector.detect('21:35:28.944 ℹ️ INFO ⦗COMPONENT⦘ Message');
+* // { level: 'info', confidence: 0.9, matched: 'INFO', position: 12 }
+* ```
+*/
+var LogLevelDetector = class LogLevelDetector {
+	/** Combined patterns from defaults and custom additions */
+	patterns;
+	/** Detection options */
+	options;
+	/**
+	* Create a new log level detector.
+	*
+	* @param options - Detection options
+	*/
+	constructor(options = {}) {
+		this.options = {
+			custom_patterns: [],
+			enable_emoji: true,
+			enable_brackets: true,
+			enable_words: true,
+			min_confidence: .5,
+			...options
+		};
+		this.patterns = /* @__PURE__ */ new Map();
+		for (const [level, regexes] of Object.entries(DEFAULT_PATTERNS)) {
+			const patterns = regexes.map((regex) => ({
+				regex,
+				level,
+				confidence: .8
+			}));
+			this.patterns.set(level, patterns);
+		}
+		for (const pattern of this.options.custom_patterns ?? []) this.addPattern(pattern);
+	}
+	/**
+	* Detect log level from text string.
+	*
+	* Scans text for log level patterns and returns the detection
+	* with highest confidence score.
+	*
+	* @param text - Text to analyze
+	* @returns Detection result or level 'unknown' with low confidence
+	*
+	* @example
+	* ```ts
+	* const result = detector.detect('[INFO] Server started');
+	* // { level: 'info', confidence: 0.9, matched: '[INFO]', position: 0 }
+	* ```
+	*/
+	detect(text) {
+		let bestMatch = {
+			level: "unknown",
+			confidence: 0,
+			matched: "",
+			position: 0
+		};
+		for (const [level, patterns] of this.patterns.entries()) for (const pattern of patterns) {
+			const match = text.match(pattern.regex);
+			if (match) {
+				const position = match.index ?? 0;
+				const matched = match[0] ?? match[1] ?? "";
+				let confidence = pattern.confidence ?? .8;
+				if (matched.length <= 5 && matched === matched.toUpperCase()) confidence = Math.min(1, confidence + .1);
+				const positionBoost = Math.max(0, 1 - position / 100);
+				confidence *= positionBoost;
+				if (confidence > bestMatch.confidence) bestMatch = {
+					level,
+					confidence,
+					matched,
+					position
+				};
+			}
+		}
+		return bestMatch;
+	}
+	/**
+	* Detect log level with default fallback.
+	*
+	* Returns 'info' as default level instead of 'unknown' for
+	* logs without a clear level indicator.
+	*
+	* @param text - Text to analyze
+	* @returns Detected level (defaults to 'info' if unknown)
+	*/
+	detectOrDefault(text) {
+		const result = this.detect(text);
+		return result.confidence >= this.options.min_confidence ? result.level : "info";
+	}
+	/**
+	* Add a custom pattern for a log level.
+	*
+	* @param pattern - Pattern to add
+	*
+	* @example
+	* ```ts
+	* detector.addPattern({
+	*   regex: /\[CUSTOM\]/i,
+	*   level: 'info',
+	*   confidence: 0.9
+	* });
+	* ```
+	*/
+	addPattern(pattern) {
+		const existing = this.patterns.get(pattern.level) ?? [];
+		existing.push(pattern);
+		this.patterns.set(pattern.level, existing);
+	}
+	/**
+	* Remove pattern for a level.
+	*
+	* Removes all patterns matching the given regex for the specified
+	* log level.
+	*
+	* @param level - Log level
+	* @param regex - Regex pattern to remove
+	* @returns true if pattern was found and removed
+	*/
+	removePattern(level, regex) {
+		const existing = this.patterns.get(level);
+		if (!existing) return false;
+		const filtered = existing.filter((p) => p.regex !== regex);
+		if (filtered.length < existing.length) {
+			this.patterns.set(level, filtered);
+			return true;
+		}
+		return false;
+	}
+	/**
+	* Get all patterns for a log level.
+	*
+	* @param level - Log level
+	* @returns Array of patterns for the level
+	*/
+	getPatterns(level) {
+		return this.patterns.get(level) ?? [];
+	}
+	/**
+	* Clear all custom patterns.
+	*
+	* Removes all custom patterns and resets to defaults.
+	*/
+	clearCustomPatterns() {
+		this.patterns.clear();
+		for (const [level, regexes] of Object.entries(DEFAULT_PATTERNS)) {
+			const patterns = regexes.map((regex) => ({
+				regex,
+				level,
+				confidence: .8
+			}));
+			this.patterns.set(level, patterns);
+		}
+	}
+	/**
+	* Detect log level from multiple lines and return consensus.
+	*
+	* Useful for determining the overall level of a multiline
+	* log entry or buffer.
+	*
+	* @param lines - Array of text lines
+	* @returns Consensus level with aggregated confidence
+	*/
+	detectFromLines(lines) {
+		if (lines.length === 0) return {
+			level: "unknown",
+			confidence: 0,
+			matched: "",
+			position: 0
+		};
+		const votes = /* @__PURE__ */ new Map();
+		let bestMatch = {
+			level: "unknown",
+			confidence: 0,
+			matched: "",
+			position: 0
+		};
+		for (const line of lines) {
+			const result = this.detect(line);
+			if (result.confidence >= this.options.min_confidence) {
+				votes.set(result.level, (votes.get(result.level) ?? 0) + 1);
+				if (result.confidence > bestMatch.confidence) bestMatch = result;
+			}
+		}
+		if (votes.size === 0) return {
+			level: "info",
+			confidence: .3,
+			matched: "",
+			position: 0
+		};
+		let maxVotes = 0;
+		let consensusLevel = "info";
+		for (const [level, count] of votes.entries()) if (count > maxVotes) {
+			maxVotes = count;
+			consensusLevel = level;
+		}
+		return {
+			level: consensusLevel,
+			confidence: Math.min(1, bestMatch.confidence + .1),
+			matched: bestMatch.matched,
+			position: bestMatch.position
+		};
+	}
+	/**
+	* Check if text contains a specific log level.
+	*
+	* @param text - Text to check
+	* @param level - Log level to look for
+	* @returns true if level is detected with minimum confidence
+	*/
+	hasLevel(text, level) {
+		const result = this.detect(text);
+		return result.level === level && result.confidence >= this.options.min_confidence;
+	}
+	/**
+	* Get severity score for a log level.
+	*
+	* Returns numeric severity (0-6) for comparison and filtering.
+	*
+	* @param level - Log level
+	* @returns Severity score (0=trace, 6=fatal)
+	*/
+	static getSeverity(level) {
+		return {
+			trace: 0,
+			debug: 1,
+			info: 2,
+			warn: 3,
+			error: 4,
+			fatal: 5,
+			unknown: 2
+		}[level] ?? 2;
+	}
+	/**
+	* Compare two log levels by severity.
+	*
+	* @param level1 - First log level
+	* @param level2 - Second log level
+	* @returns Negative if level1 < level2, positive if level1 > level2, 0 if equal
+	*/
+	static compareSeverity(level1, level2) {
+		return LogLevelDetector.getSeverity(level1) - LogLevelDetector.getSeverity(level2);
+	}
+};
+
+//#endregion
+export { LogLevelDetector };

package/dist/react-ui/blocks/Terminal/parsing/levels/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Log level detection module barrel export.
+ *
+ * Exports log level pattern matching utilities.
+ *
+ * @module components/devenv/terminal/parsing/levels
+ */
+export { LogLevelDetector } from './LogLevelDetector';
+export type { ILogLevelDetection, ILogLevelPattern, ILogLevelDetectorOptions, } from './LogLevel.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/react-ui/blocks/Terminal/parsing/levels/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/blocks/Terminal/parsing/levels/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EACV,kBAAkB,EAClB,gBAAgB,EAChB,wBAAwB,GACzB,MAAM,kBAAkB,CAAC"}

package/dist/react-ui/blocks/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Blocks barrel export.
+ *
+ * Blocks are high-level, ready-to-use components with full functionality,
+ * similar to Shadcn blocks. They compose primitives, UI components, and hooks
+ * into complete features.
+ *
+ * @module @mks2508/mks-ui/react/blocks
+ */
+export * from './Terminal';
+//# sourceMappingURL=index.d.ts.map

package/dist/react-ui/blocks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react-ui/blocks/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,cAAc,YAAY,CAAC"}

package/dist/react-ui/icons/lucide-animated/activity.js

@@ -2,8 +2,8 @@
 
 import { cn } from "../../lib/utils.js";
 import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+import { motion, useAnimation } from "motion/react";
 import { jsx } from "react/jsx-runtime";
-import { motion, useAnimation } from "framer-motion";
 
 //#region src/react-ui/icons/lucide-animated/activity.tsx
 const VARIANTS = {

package/dist/react-ui/icons/lucide-animated/bell-electric.js

@@ -2,8 +2,8 @@
 
 import { cn } from "../../lib/utils.js";
 import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+import { motion, useAnimation } from "motion/react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { motion, useAnimation } from "framer-motion";
 
 //#region src/react-ui/icons/lucide-animated/bell-electric.tsx
 const BellElectricIcon = forwardRef(({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {

package/dist/react-ui/icons/lucide-animated/bell.js

@@ -2,8 +2,8 @@
 
 import { cn } from "../../lib/utils.js";
 import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+import { motion, useAnimation } from "motion/react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { motion, useAnimation } from "framer-motion";
 
 //#region src/react-ui/icons/lucide-animated/bell.tsx
 const SVG_VARIANTS = {

package/dist/react-ui/icons/lucide-animated/bot.js

@@ -2,8 +2,8 @@
 
 import { cn } from "../../lib/utils.js";
 import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+import { motion, useAnimation } from "motion/react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { motion, useAnimation } from "framer-motion";
 
 //#region src/react-ui/icons/lucide-animated/bot.tsx
 const BotIcon = forwardRef(({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {

package/dist/react-ui/icons/lucide-animated/box.js

@@ -2,8 +2,8 @@
 
 import { cn } from "../../lib/utils.js";
 import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+import { motion, useAnimation } from "motion/react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { motion, useAnimation } from "framer-motion";
 
 //#region src/react-ui/icons/lucide-animated/box.tsx
 const PATH_VARIANTS = {

package/dist/react-ui/icons/lucide-animated/circle-check.js

@@ -2,8 +2,8 @@
 
 import { cn } from "../../lib/utils.js";
 import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+import { motion, useAnimation } from "motion/react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { motion, useAnimation } from "framer-motion";
 
 //#region src/react-ui/icons/lucide-animated/circle-check.tsx
 const PATH_VARIANTS = {

package/dist/react-ui/icons/lucide-animated/delete.js

@@ -2,8 +2,8 @@
 
 import { cn } from "../../lib/utils.js";
 import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+import { motion, useAnimation } from "motion/react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { motion, useAnimation } from "framer-motion";
 
 //#region src/react-ui/icons/lucide-animated/delete.tsx
 const LID_VARIANTS = {

package/dist/react-ui/icons/lucide-animated/download.js

@@ -2,8 +2,8 @@
 
 import { cn } from "../../lib/utils.js";
 import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+import { motion, useAnimation } from "motion/react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { motion, useAnimation } from "framer-motion";
 
 //#region src/react-ui/icons/lucide-animated/download.tsx
 const ARROW_VARIANTS = {

package/dist/react-ui/icons/lucide-animated/home.js

@@ -2,8 +2,8 @@
 
 import { cn } from "../../lib/utils.js";
 import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+import { motion, useAnimation } from "motion/react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { motion, useAnimation } from "framer-motion";
 
 //#region src/react-ui/icons/lucide-animated/home.tsx
 const DEFAULT_TRANSITION = {

package/dist/react-ui/icons/lucide-animated/layout-panel-top.js

@@ -2,8 +2,8 @@
 
 import { cn } from "../../lib/utils.js";
 import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+import { motion, useAnimation } from "motion/react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { motion, useAnimation } from "framer-motion";
 
 //#region src/react-ui/icons/lucide-animated/layout-panel-top.tsx
 const LayoutPanelTopIcon = forwardRef(({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {

package/dist/react-ui/icons/lucide-animated/plus.js

@@ -2,8 +2,8 @@
 
 import { cn } from "../../lib/utils.js";
 import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+import { motion, useAnimation } from "motion/react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { motion, useAnimation } from "framer-motion";
 
 //#region src/react-ui/icons/lucide-animated/plus.tsx
 const PlusIcon = forwardRef(({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {

package/dist/react-ui/icons/lucide-animated/search.js

@@ -2,8 +2,8 @@
 
 import { cn } from "../../lib/utils.js";
 import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+import { motion, useAnimation } from "motion/react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { motion, useAnimation } from "framer-motion";
 
 //#region src/react-ui/icons/lucide-animated/search.tsx
 const SearchIcon = forwardRef(({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {

package/dist/react-ui/icons/lucide-animated/settings.js

@@ -2,8 +2,8 @@
 
 import { cn } from "../../lib/utils.js";
 import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+import { motion, useAnimation } from "motion/react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { motion, useAnimation } from "framer-motion";
 
 //#region src/react-ui/icons/lucide-animated/settings.tsx
 const SettingsIcon = forwardRef(({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {

package/dist/react-ui/icons/lucide-animated/trending-down.js

@@ -2,8 +2,8 @@
 
 import { cn } from "../../lib/utils.js";
 import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+import { motion, useAnimation } from "motion/react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { motion, useAnimation } from "framer-motion";
 
 //#region src/react-ui/icons/lucide-animated/trending-down.tsx
 const SVG_VARIANTS = { animate: {

package/dist/react-ui/icons/lucide-animated/trending-up.js

@@ -2,8 +2,8 @@
 
 import { cn } from "../../lib/utils.js";
 import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+import { motion, useAnimation } from "motion/react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { motion, useAnimation } from "framer-motion";
 
 //#region src/react-ui/icons/lucide-animated/trending-up.tsx
 const SVG_VARIANTS = { animate: {

package/dist/react-ui/icons/lucide-animated/x.js

@@ -2,8 +2,8 @@
 
 import { cn } from "../../lib/utils.js";
 import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+import { motion, useAnimation } from "motion/react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { motion, useAnimation } from "framer-motion";
 
 //#region src/react-ui/icons/lucide-animated/x.tsx
 const PATH_VARIANTS = {

package/dist/react-ui/index.js

@@ -41,6 +41,7 @@ import { progressStyles } from "./ui/Progress/Progress.styles.js";
 import { Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, useProgress } from "./ui/Progress/index.js";
 import { switchStyles } from "./ui/Switch/Switch.styles.js";
 import { Switch, SwitchIcon, SwitchThumb, useSwitch } from "./ui/Switch/index.js";
+import { tabsIndicatorVariants, tabsListVariants, tabsTabVariants } from "./ui/Tabs/Tabs.styles.js";
 import { Tabs, TabsHighlight, TabsHighlightItem, TabsList, TabsPanel, TabsPanels, TabsTab } from "./ui/Tabs/index.js";
 import { tooltipStyles } from "./ui/Tooltip/Tooltip.styles.js";
 import { Tooltip, TooltipArrow, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipProvider, TooltipTrigger, useTooltip } from "./ui/Tooltip/index.js";
@@ -51,6 +52,7 @@ import { Button } from "./ui/Button/index.js";
 import { cardVariants } from "./ui/Card/Card.styles.js";
 import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./ui/Card/index.js";
 import { Input } from "./ui/Input/index.js";
+import { Textarea } from "./ui/Textarea/index.js";
 import { inputGroupAddonVariants, inputGroupButtonVariants } from "./ui/InputGroup/InputGroup.styles.js";
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea } from "./ui/InputGroup/index.js";
 import { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor } from "./ui/Combobox/index.js";
@@ -103,6 +105,7 @@ import { Type } from "./icons/lucide-animated/type.js";
 import { Upload } from "./icons/lucide-animated/upload.js";
 import { XIcon } from "./icons/lucide-animated/x.js";
 import { HugeIcons } from "./icons/index.js";
+import { IconWrapper } from "./lib/icon-wrapper.js";
 import "./lib/index.js";
 
-export { ANIMATION_CONFIGS, ANIMATION_DEFAULTS, Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionStyles, AccordionTrigger, ActivityIcon, AlertDialog, AlertDialogBackdrop, AlertDialogClose, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPopup, AlertDialogPortal, AlertDialogStyles, AlertDialogTitle, AlertDialogTrigger, ArrowDownToLineIcon, ArrowUpIcon, AutoHeight, Badge, BellElectricIcon, BellIcon, BotIcon, BoxIcon, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Check, Checkbox, CheckboxIndicator, CircleCheckIcon, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, CornerBracket, CountingNumber, DataCard, DataCardActions, DataCardBracket, DataCardLabel, DataCardToggle, DataCardValue, DeleteIcon, Dialog, DialogBackdrop, DialogClose, DialogDescription, DialogFooter, DialogHeader, DialogPopup, DialogPortal, DialogTitle, DialogTrigger, DownloadIcon, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EASINGS, EFFECTS, Edit2, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Globe, Highlight, HighlightItem, HomeIcon, HugeIcons, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Label, Layers, LayoutPanelTopIcon, ListIcon, Menu, MenuArrow, MenuCheckboxItem, MenuCheckboxItemIndicator, MenuGroup, MenuGroupLabel, MenuHighlight, MenuHighlightItem, MenuItem, MenuPopup, MenuPortal, MenuPositioner, MenuRadioGroup, MenuRadioItem, MenuRadioItemIndicator, MenuSeparator, MenuShortcut, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, Morph, MorphingPopover, MorphingPopoverWithTarget, PRESETS, Package, Palette, PlusIcon, Popover, PopoverArrow, PopoverBackdrop, PopoverClose, PopoverDescription, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverTitle, PopoverTrigger, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, RESPONSIVE_CONFIGS, RefreshCw, ReorderRoot as Reorder, Rocket, Save, SearchIcon, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SettingsIcon, SlidingNumber, SlidingText, Slot, Switch, SwitchIcon, SwitchThumb, TIMING, TRANSFORMS, Tabs, TabsHighlight, TabsHighlightItem, TabsList, TabsPanel, TabsPanels, TabsTab, TerminalIcon, TextFlow, Tooltip, TooltipArrow, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipProvider, TooltipTrigger, Trash2, TrendingDownIcon, TrendingUpIcon, Type, Upload, XIcon, accordionVariants, badgeVariants, bracketVariants, buttonStateStyles, buttonVariants, calculateSeparatorCoordination, cardVariants, checkboxStyles, cn, dataCardStyles, dataCardVariants, dialogStyles, fieldVariants, getResponsiveDuration, getResponsiveStagger, getStrictContext, inputGroupAddonVariants, inputGroupButtonVariants, popoverStyles, progressStyles, shouldShowSeparator, switchStyles, tooltipStyles, useAccordionItem, useAlertDialog, useAnimationOrchestrator, useAutoHeight, useCSSGridMorph, useCheckbox, useComboboxAnchor, useControlledState, useDataCard, useDataState, useDialog, useElementRegistry, useFLIPAnimation, useFLIPClipPath, useHighlight, useIsInView, useListFormat, useMenu, useMenuActiveValue, useMorph, useMorphContext, usePopover, usePositionCapture, useProgress, useReorder, useReorderPresence, useSwitch, useTooltip, useViewTransitions };
+export { ANIMATION_CONFIGS, ANIMATION_DEFAULTS, Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionStyles, AccordionTrigger, ActivityIcon, AlertDialog, AlertDialogBackdrop, AlertDialogClose, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPopup, AlertDialogPortal, AlertDialogStyles, AlertDialogTitle, AlertDialogTrigger, ArrowDownToLineIcon, ArrowUpIcon, AutoHeight, Badge, BellElectricIcon, BellIcon, BotIcon, BoxIcon, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Check, Checkbox, CheckboxIndicator, CircleCheckIcon, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, CornerBracket, CountingNumber, DataCard, DataCardActions, DataCardBracket, DataCardLabel, DataCardToggle, DataCardValue, DeleteIcon, Dialog, DialogBackdrop, DialogClose, DialogDescription, DialogFooter, DialogHeader, DialogPopup, DialogPortal, DialogTitle, DialogTrigger, DownloadIcon, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EASINGS, EFFECTS, Edit2, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Globe, Highlight, HighlightItem, HomeIcon, HugeIcons, IconWrapper, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Label, Layers, LayoutPanelTopIcon, ListIcon, Menu, MenuArrow, MenuCheckboxItem, MenuCheckboxItemIndicator, MenuGroup, MenuGroupLabel, MenuHighlight, MenuHighlightItem, MenuItem, MenuPopup, MenuPortal, MenuPositioner, MenuRadioGroup, MenuRadioItem, MenuRadioItemIndicator, MenuSeparator, MenuShortcut, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, Morph, MorphingPopover, MorphingPopoverWithTarget, PRESETS, Package, Palette, PlusIcon, Popover, PopoverArrow, PopoverBackdrop, PopoverClose, PopoverDescription, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverTitle, PopoverTrigger, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, RESPONSIVE_CONFIGS, RefreshCw, ReorderRoot as Reorder, Rocket, Save, SearchIcon, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SettingsIcon, SlidingNumber, SlidingText, Slot, Switch, SwitchIcon, SwitchThumb, TIMING, TRANSFORMS, Tabs, TabsHighlight, TabsHighlightItem, TabsList, TabsPanel, TabsPanels, TabsTab, TerminalIcon, TextFlow, Textarea, Tooltip, TooltipArrow, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipProvider, TooltipTrigger, Trash2, TrendingDownIcon, TrendingUpIcon, Type, Upload, XIcon, accordionVariants, badgeVariants, bracketVariants, buttonStateStyles, buttonVariants, calculateSeparatorCoordination, cardVariants, checkboxStyles, cn, dataCardStyles, dataCardVariants, dialogStyles, fieldVariants, getResponsiveDuration, getResponsiveStagger, getStrictContext, inputGroupAddonVariants, inputGroupButtonVariants, popoverStyles, progressStyles, shouldShowSeparator, switchStyles, tabsIndicatorVariants, tabsListVariants, tabsTabVariants, tooltipStyles, useAccordionItem, useAlertDialog, useAnimationOrchestrator, useAutoHeight, useCSSGridMorph, useCheckbox, useComboboxAnchor, useControlledState, useDataCard, useDataState, useDialog, useElementRegistry, useFLIPAnimation, useFLIPClipPath, useHighlight, useIsInView, useListFormat, useMenu, useMenuActiveValue, useMorph, useMorphContext, usePopover, usePositionCapture, useProgress, useReorder, useReorderPresence, useSwitch, useTooltip, useViewTransitions };

package/dist/react-ui/lib/icon-wrapper.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Icon Wrapper Component.
+ *
+ * Ensures consistent sizing across different icon types.
+ * Some icons use explicit size props, others use CSS classes.
+ *
+ * @module @mks2508/mks-ui/react/lib/icon-wrapper
+ */
+import type { HTMLAttributes } from 'react';
+/**
+ * Icon wrapper props interface.
+ */
+export interface IIconWrapperProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * The icon component to render.
+     * Accepts ComponentType, ForwardRefExoticComponent, or any renderable component.
+     * Broad type needed for React 19 compatibility across duplicate @types/react copies.
+     */
+    icon: React.ComponentType<any> | React.ExoticComponent<any>;
+    /** Size in pixels for icons that use size prop (default: 16) */
+    size?: number;
+}
+/**
+ * Icon wrapper that ensures consistent sizing across different icon types.
+ *
+ * Some icons from the UI package use explicit size props (width/height on SVG),
+ * while others use CSS classes (w-4 h-4). This wrapper detects the icon type
+ * and applies the appropriate sizing method.
+ *
+ * @example
+ * ```tsx
+ * <IconWrapper icon={DownloadIcon} size={16} className="text-primary" />
+ * <IconWrapper icon={KeyIcon} className="text-muted-foreground" />
+ * ```
+ */
+export declare function IconWrapper({ icon: Icon, className, size, ...props }: IIconWrapperProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=icon-wrapper.d.ts.map

package/dist/react-ui/lib/icon-wrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-wrapper.d.ts","sourceRoot":"","sources":["../../../src/react-ui/lib/icon-wrapper.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAiB5C;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACvE;;;;OAIG;IACH,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC;IAC5D,gEAAgE;IAChE,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EAAE,IAAI,EACV,SAAS,EACT,IAAS,EACT,GAAG,KAAK,EACT,EAAE,iBAAiB,2CASnB"}

package/dist/react-ui/lib/icon-wrapper.js

@@ -0,0 +1,55 @@
+'use client';
+
+import { jsx } from "react/jsx-runtime";
+
+//#region src/react-ui/lib/icon-wrapper.tsx
+/**
+* Icon Wrapper Component.
+*
+* Ensures consistent sizing across different icon types.
+* Some icons use explicit size props, others use CSS classes.
+*
+* @module @mks2508/mks-ui/react/lib/icon-wrapper
+*/
+/**
+* Icons that use explicit size prop instead of CSS classes.
+* These icons have SVG elements with width/height attributes.
+*/
+const SIZEABLE_ICONS = new Set([
+	"DownloadIcon",
+	"EyeIcon",
+	"EyeOffIcon",
+	"SearchIcon",
+	"XIcon",
+	"DeleteIcon",
+	"TerminalIcon",
+	"PlusIcon"
+]);
+/**
+* Icon wrapper that ensures consistent sizing across different icon types.
+*
+* Some icons from the UI package use explicit size props (width/height on SVG),
+* while others use CSS classes (w-4 h-4). This wrapper detects the icon type
+* and applies the appropriate sizing method.
+*
+* @example
+* ```tsx
+* <IconWrapper icon={DownloadIcon} size={16} className="text-primary" />
+* <IconWrapper icon={KeyIcon} className="text-muted-foreground" />
+* ```
+*/
+function IconWrapper({ icon: Icon, className, size = 16, ...props }) {
+	const iconName = Icon.displayName || Icon.name || "";
+	if (SIZEABLE_ICONS.has(iconName)) return /* @__PURE__ */ jsx(Icon, {
+		size,
+		className,
+		...props
+	});
+	return /* @__PURE__ */ jsx(Icon, {
+		className,
+		...props
+	});
+}
+
+//#endregion
+export { IconWrapper };