@vtx-ui/react 0.0.1-beta.15 → 0.0.1-beta.17

package/dist/cjs/components/Grid/components/Grid/Grid.js

@@ -0,0 +1,130 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/**
+ * Grid component - A responsive grid layout system
+ *
+ * The Grid component uses a 12-column responsive grid layout inspired by Material-UI.
+ * It supports five breakpoints (xs, sm, md, lg, xl) and provides flexible spacing,
+ * alignment, and direction options.
+ *
+ * ## Breakpoints
+ * - xs: 0px and up (extra small devices)
+ * - sm: 600px and up (small devices)
+ * - md: 960px and up (medium devices)
+ * - lg: 1280px and up (large devices)
+ * - xl: 1920px and up (extra large devices)
+ *
+ * ## CSS Customization
+ *
+ * You can customize the grid spacing using CSS custom properties:
+ *
+ * ```css
+ * :root {
+ *   --vtx-grid-spacing-unit: 8px;
+ * }
+ * ```
+ *
+ * @example
+ * Basic grid with equal columns
+ * ```tsx
+ * <Grid container spacing={2}>
+ *   <Grid item xs={12} sm={6} md={4}>
+ *     <div>Column 1</div>
+ *   </Grid>
+ *   <Grid item xs={12} sm={6} md={4}>
+ *     <div>Column 2</div>
+ *   </Grid>
+ *   <Grid item xs={12} sm={6} md={4}>
+ *     <div>Column 3</div>
+ *   </Grid>
+ * </Grid>
+ * ```
+ *
+ * @example
+ * Responsive layout
+ * ```tsx
+ * <Grid container spacing={3}>
+ *   <Grid item xs={12} md={8}>
+ *     <div>Main content</div>
+ *   </Grid>
+ *   <Grid item xs={12} md={4}>
+ *     <div>Sidebar</div>
+ *   </Grid>
+ * </Grid>
+ * ```
+ *
+ * @example
+ * Auto-width columns
+ * ```tsx
+ * <Grid container spacing={2}>
+ *   <Grid item xs="auto">
+ *     <div>Auto width</div>
+ *   </Grid>
+ *   <Grid item xs>
+ *     <div>Fills remaining space</div>
+ *   </Grid>
+ * </Grid>
+ * ```
+ *
+ * @example
+ * With alignment
+ * ```tsx
+ * <Grid container spacing={2} justifyContent="center" alignItems="center">
+ *   <Grid item xs={6}>
+ *     <div>Centered content</div>
+ *   </Grid>
+ * </Grid>
+ * ```
+ */
+const Grid = React__default["default"].forwardRef(({ container = false, item = false, spacing, rowSpacing, columnSpacing, xs, sm, md, lg, xl, justifyContent, alignItems, alignContent, direction = 'row', wrap = 'wrap', className = '', children, style, ...props }, ref) => {
+    // Build class names
+    const classNames = [
+        'vtx-grid',
+        container && 'vtx-grid-container',
+        item && 'vtx-grid-item',
+        // Spacing
+        container && spacing !== undefined && `vtx-grid-spacing-${spacing}`,
+        container && rowSpacing !== undefined && `vtx-grid-row-spacing-${rowSpacing}`,
+        container && columnSpacing !== undefined && `vtx-grid-column-spacing-${columnSpacing}`,
+        // Breakpoints
+        xs !== undefined && `vtx-grid-xs${xs === true ? '' : xs === 'auto' ? '-auto' : `-${xs}`}`,
+        sm !== undefined && `vtx-grid-sm${sm === true ? '' : sm === 'auto' ? '-auto' : `-${sm}`}`,
+        md !== undefined && `vtx-grid-md${md === true ? '' : md === 'auto' ? '-auto' : `-${md}`}`,
+        lg !== undefined && `vtx-grid-lg${lg === true ? '' : lg === 'auto' ? '-auto' : `-${lg}`}`,
+        xl !== undefined && `vtx-grid-xl${xl === true ? '' : xl === 'auto' ? '-auto' : `-${xl}`}`,
+        // Direction
+        container && direction !== 'row' && `vtx-grid-direction-${direction}`,
+        // Wrap
+        container && wrap !== 'wrap' && `vtx-grid-wrap-${wrap}`,
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    // Build inline styles for alignment
+    const alignmentStyles = {
+        ...style,
+    };
+    if (container) {
+        if (justifyContent)
+            alignmentStyles.justifyContent = justifyContent;
+        if (alignItems)
+            alignmentStyles.alignItems = alignItems;
+        if (alignContent)
+            alignmentStyles.alignContent = alignContent;
+    }
+    return (jsxRuntime.jsx("div", { ref: ref, className: classNames, style: Object.keys(alignmentStyles).length > 0 ? alignmentStyles : undefined, ...props, children: children }));
+});
+Grid.displayName = 'Grid';
+
+exports.Grid = Grid;
+exports["default"] = Grid;
+//# sourceMappingURL=Grid.js.map

package/dist/cjs/components/Grid/components/Grid/Grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.js","sources":["../../../../../../src/components/Grid/Grid.tsx"],"sourcesContent":[null],"names":["React","_jsx"],"mappings":";;;;;;;;;;;AA4FA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2EG;AACH,MAAM,IAAI,GAAGA,yBAAK,CAAC,UAAU,CAC3B,CACE,EACE,SAAS,GAAG,KAAK,EACjB,IAAI,GAAG,KAAK,EACZ,OAAO,EACP,UAAU,EACV,aAAa,EACb,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,cAAc,EACd,UAAU,EACV,YAAY,EACZ,SAAS,GAAG,KAAK,EACjB,IAAI,GAAG,MAAM,EACb,SAAS,GAAG,EAAE,EACd,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACT,EACD,GAAG,KACD;;AAEF,IAAA,MAAM,UAAU,GAAG;QACjB,UAAU;AACV,QAAA,SAAS,IAAI,oBAAoB;AACjC,QAAA,IAAI,IAAI,eAAe;;AAEvB,QAAA,SAAS,IAAI,OAAO,KAAK,SAAS,IAAI,CAAA,iBAAA,EAAoB,OAAO,CAAE,CAAA;AACnE,QAAA,SAAS,IAAI,UAAU,KAAK,SAAS,IAAI,CAAA,qBAAA,EAAwB,UAAU,CAAE,CAAA;AAC7E,QAAA,SAAS,IAAI,aAAa,KAAK,SAAS,IAAI,CAAA,wBAAA,EAA2B,aAAa,CAAE,CAAA;;QAEtF,EAAE,KAAK,SAAS,IAAI,CAAc,WAAA,EAAA,EAAE,KAAK,IAAI,GAAG,EAAE,GAAG,EAAE,KAAK,MAAM,GAAG,OAAO,GAAG,CAAA,CAAA,EAAI,EAAE,CAAA,CAAE,CAAE,CAAA;QACzF,EAAE,KAAK,SAAS,IAAI,CAAc,WAAA,EAAA,EAAE,KAAK,IAAI,GAAG,EAAE,GAAG,EAAE,KAAK,MAAM,GAAG,OAAO,GAAG,CAAA,CAAA,EAAI,EAAE,CAAA,CAAE,CAAE,CAAA;QACzF,EAAE,KAAK,SAAS,IAAI,CAAc,WAAA,EAAA,EAAE,KAAK,IAAI,GAAG,EAAE,GAAG,EAAE,KAAK,MAAM,GAAG,OAAO,GAAG,CAAA,CAAA,EAAI,EAAE,CAAA,CAAE,CAAE,CAAA;QACzF,EAAE,KAAK,SAAS,IAAI,CAAc,WAAA,EAAA,EAAE,KAAK,IAAI,GAAG,EAAE,GAAG,EAAE,KAAK,MAAM,GAAG,OAAO,GAAG,CAAA,CAAA,EAAI,EAAE,CAAA,CAAE,CAAE,CAAA;QACzF,EAAE,KAAK,SAAS,IAAI,CAAc,WAAA,EAAA,EAAE,KAAK,IAAI,GAAG,EAAE,GAAG,EAAE,KAAK,MAAM,GAAG,OAAO,GAAG,CAAA,CAAA,EAAI,EAAE,CAAA,CAAE,CAAE,CAAA;;AAEzF,QAAA,SAAS,IAAI,SAAS,KAAK,KAAK,IAAI,CAAA,mBAAA,EAAsB,SAAS,CAAE,CAAA;;AAErE,QAAA,SAAS,IAAI,IAAI,KAAK,MAAM,IAAI,CAAA,cAAA,EAAiB,IAAI,CAAE,CAAA;QACvD,SAAS;AACV,KAAA;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;;AAGb,IAAA,MAAM,eAAe,GAAwB;AAC3C,QAAA,GAAG,KAAK;KACT,CAAC;IAEF,IAAI,SAAS,EAAE;AACb,QAAA,IAAI,cAAc;AAAE,YAAA,eAAe,CAAC,cAAc,GAAG,cAAc,CAAC;AACpE,QAAA,IAAI,UAAU;AAAE,YAAA,eAAe,CAAC,UAAU,GAAG,UAAU,CAAC;AACxD,QAAA,IAAI,YAAY;AAAE,YAAA,eAAe,CAAC,YAAY,GAAG,YAAY,CAAC;KAC/D;AAED,IAAA,QACEC,cACE,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,EACrB,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,MAAM,GAAG,CAAC,GAAG,eAAe,GAAG,SAAS,KACxE,KAAK,EAAA,QAAA,EAER,QAAQ,EAAA,CACL,EACN;AACJ,CAAC,EACD;AAEF,IAAI,CAAC,WAAW,GAAG,MAAM;;;;;"}

package/dist/cjs/components/Grid/components/Grid/index.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_Grid_Grid = require('./Grid.js');
+
+
+
+exports.Grid = components_Grid_Grid["default"];
+exports.GridComponent = components_Grid_Grid["default"];
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/Grid/components/Grid/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/dist/cjs/components/Header/components/Header/Header.js

@@ -0,0 +1,109 @@
+"use client";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var components_Flex_Flex = require('../../../Flex/components/Flex/Flex.js');
+var components_Typography_Typography = require('../../../Typography/components/Typography/Typography.js');
+var components_Avatar_Avatar = require('../../../Avatar/components/Avatar/Avatar.js');
+var components_Badge_Badge = require('../../../Badge/components/Badge/Badge.js');
+var components_Menu_Menu = require('../../../Menu/components/Menu/Menu.js');
+require('../../../Menu/components/Menu/ActionMenu.js');
+var icons_IconComponents = require('../../../../icons/icons/IconComponents.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/**
+ * NotificationPanel component
+ */
+const NotificationPanel = React__default["default"].forwardRef(({ notifications, onNotificationClick, onMarkAllAsRead, onClose }, ref) => {
+    const unreadCount = notifications.filter((n) => !n.read).length;
+    return (jsxRuntime.jsxs("div", { ref: ref, className: "vtx-header-notifications-panel", children: [jsxRuntime.jsx("div", { className: "vtx-header-notifications-header", children: jsxRuntime.jsxs(components_Flex_Flex["default"], { justify: "between", align: "center", children: [jsxRuntime.jsx(components_Typography_Typography["default"], { variant: "subtitle2", noMargin: true, children: "Notifications" }), unreadCount > 0 && onMarkAllAsRead && (jsxRuntime.jsx("button", { className: "vtx-header-notifications-mark-read", onClick: () => {
+                                onMarkAllAsRead();
+                                onClose();
+                            }, children: "Mark all as read" }))] }) }), jsxRuntime.jsx("div", { className: "vtx-header-notifications-list", children: notifications.length === 0 ? (jsxRuntime.jsxs("div", { className: "vtx-header-notifications-empty", children: [jsxRuntime.jsx(icons_IconComponents.BellIcon, {}), jsxRuntime.jsx(components_Typography_Typography["default"], { variant: "body2", textColor: "var(--color-neutral-500)", noMargin: true, children: "No notifications" })] })) : (notifications.map((notification) => (jsxRuntime.jsxs("div", { className: `vtx-header-notification-item ${!notification.read ? 'vtx-header-notification-item--unread' : ''} ${notification.type ? `vtx-header-notification-item--${notification.type}` : ''}`, onClick: () => {
+                        onNotificationClick === null || onNotificationClick === void 0 ? void 0 : onNotificationClick(notification);
+                        onClose();
+                    }, children: [notification.icon && (jsxRuntime.jsx("div", { className: "vtx-header-notification-icon", children: notification.icon })), jsxRuntime.jsxs("div", { className: "vtx-header-notification-content", children: [jsxRuntime.jsx(components_Typography_Typography["default"], { variant: "body2", noMargin: true, style: { fontWeight: notification.read ? 400 : 600 }, children: notification.title }), notification.description && (jsxRuntime.jsx(components_Typography_Typography["default"], { variant: "caption", textColor: "var(--color-neutral-600)", noMargin: true, children: notification.description })), jsxRuntime.jsx(components_Typography_Typography["default"], { variant: "caption", textColor: "var(--color-neutral-500)", noMargin: true, style: { marginTop: '4px' }, children: notification.time })] }), !notification.read && jsxRuntime.jsx("div", { className: "vtx-header-notification-dot" })] }, notification.id)))) })] }));
+});
+NotificationPanel.displayName = 'NotificationPanel';
+/**
+ * Header component - Professional admin panel header with notifications and user menu
+ *
+ * @example
+ * Basic header
+ * ```tsx
+ * <Header
+ *   title="Admin Dashboard"
+ *   userName="John Doe"
+ *   userSubtitle="Admin"
+ *   onToggleSidebar={() => setCollapsed(!collapsed)}
+ * />
+ * ```
+ *
+ * @example
+ * With notifications
+ * ```tsx
+ * <Header
+ *   title="Dashboard"
+ *   notifications={[
+ *     { id: '1', title: 'New order received', time: '2 min ago', read: false },
+ *     { id: '2', title: 'User registered', time: '1 hour ago', read: true }
+ *   ]}
+ *   userName="John Doe"
+ *   userMenuItems={[
+ *     { label: 'Profile', icon: <UserIcon /> },
+ *     { label: 'Settings', icon: <SettingsIcon /> },
+ *     { label: 'Logout', icon: <LogoutIcon />, variant: 'danger' }
+ *   ]}
+ * />
+ * ```
+ */
+const Header = React__default["default"].forwardRef(({ logo, title, onToggleSidebar, showToggle = true, notifications = [], onNotificationClick, onMarkAllAsRead, userName, userSubtitle, userAvatar, userMenuItems = [], actions, className = '', sticky = true, }, ref) => {
+    const [notificationsOpen, setNotificationsOpen] = React.useState(false);
+    const [userMenuOpen, setUserMenuOpen] = React.useState(false);
+    const notificationsRef = React.useRef(null);
+    const userMenuRef = React.useRef(null);
+    const notificationsPanelRef = React.useRef(null);
+    const unreadCount = notifications.filter((n) => !n.read).length;
+    // Close dropdowns on outside click
+    React.useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (notificationsRef.current &&
+                !notificationsRef.current.contains(event.target) &&
+                notificationsPanelRef.current &&
+                !notificationsPanelRef.current.contains(event.target)) {
+                setNotificationsOpen(false);
+            }
+            if (userMenuRef.current && !userMenuRef.current.contains(event.target)) {
+                setUserMenuOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+    const headerClasses = ['vtx-header', sticky && 'vtx-header--sticky', className]
+        .filter(Boolean)
+        .join(' ');
+    return (jsxRuntime.jsxs("header", { ref: ref, className: headerClasses, children: [jsxRuntime.jsxs(components_Flex_Flex["default"], { align: "center", gap: 16, style: { flex: 1 }, children: [showToggle && onToggleSidebar && (jsxRuntime.jsx("button", { className: "vtx-header-toggle", onClick: onToggleSidebar, "aria-label": "Toggle sidebar", children: jsxRuntime.jsx(icons_IconComponents.MenuIcon, {}) })), logo && jsxRuntime.jsx("div", { className: "vtx-header-logo", children: logo }), title && (jsxRuntime.jsx(components_Typography_Typography["default"], { variant: "h6", noMargin: true, className: "vtx-header-title", children: title }))] }), actions && jsxRuntime.jsx("div", { className: "vtx-header-actions", children: actions }), jsxRuntime.jsxs("div", { className: "vtx-header-right", children: [notifications && notifications.length > 0 && (jsxRuntime.jsxs("div", { className: "vtx-header-notifications", ref: notificationsRef, children: [jsxRuntime.jsxs("button", { className: `vtx-header-icon-button ${notificationsOpen ? 'vtx-header-icon-button--active' : ''}`, onClick: () => setNotificationsOpen(!notificationsOpen), "aria-label": "Notifications", children: [jsxRuntime.jsx(icons_IconComponents.BellIcon, {}), unreadCount > 0 && (jsxRuntime.jsx(components_Badge_Badge["default"], { variant: "error", size: "sm", style: {
+                                            position: 'absolute',
+                                            top: '4px',
+                                            right: '4px',
+                                            minWidth: '18px',
+                                            height: '18px',
+                                            padding: '0 4px',
+                                        }, children: unreadCount > 9 ? '9+' : unreadCount }))] }), notificationsOpen && (jsxRuntime.jsx(NotificationPanel, { ref: notificationsPanelRef, notifications: notifications, onNotificationClick: onNotificationClick, onMarkAllAsRead: onMarkAllAsRead, onClose: () => setNotificationsOpen(false) }))] })), userName && (jsxRuntime.jsxs("div", { className: "vtx-header-user-menu", ref: userMenuRef, children: [jsxRuntime.jsxs("button", { className: `vtx-header-user-button ${userMenuOpen ? 'vtx-header-user-button--active' : ''}`, onClick: () => setUserMenuOpen(!userMenuOpen), "aria-label": "User menu", children: [jsxRuntime.jsx(components_Avatar_Avatar["default"], { src: userAvatar, alt: userName, size: "sm" }), !userAvatar && (jsxRuntime.jsx("span", { className: "vtx-header-avatar-fallback", children: userName
+                                            .split(' ')
+                                            .map((n) => n[0])
+                                            .join('')
+                                            .slice(0, 2) })), jsxRuntime.jsxs("div", { className: "vtx-header-user-info", children: [jsxRuntime.jsx(components_Typography_Typography["default"], { variant: "body2", noMargin: true, style: { fontWeight: 600 }, children: userName }), userSubtitle && (jsxRuntime.jsx(components_Typography_Typography["default"], { variant: "caption", textColor: "var(--color-neutral-600)", noMargin: true, children: userSubtitle }))] }), jsxRuntime.jsx(icons_IconComponents.ChevronDownIcon, {})] }), userMenuOpen && (jsxRuntime.jsx("div", { className: "vtx-header-user-dropdown", children: jsxRuntime.jsx(components_Menu_Menu["default"], { items: userMenuItems, responsive: false }) }))] }))] })] }));
+});
+Header.displayName = 'Header';
+
+exports.Header = Header;
+exports["default"] = Header;
+//# sourceMappingURL=Header.js.map

package/dist/cjs/components/Header/components/Header/Header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.js","sources":["../../../../../../src/components/Header/Header.tsx"],"sourcesContent":[null],"names":["React","_jsxs","_jsx","Flex","Typography","BellIcon","useState","useRef","useEffect","MenuIcon","Badge","Avatar","ChevronDownIcon","Menu"],"mappings":"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"}

package/dist/cjs/components/Header/components/Header/index.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_Header_Header = require('./Header.js');
+
+
+
+exports.Header = components_Header_Header["default"];
+exports.HeaderComponent = components_Header_Header["default"];
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/Header/components/Header/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/dist/cjs/components/Image/components/Image/Image.js

@@ -0,0 +1,77 @@
+"use client";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var hoc_withParsedClasses = require('../../../../hoc/hoc/withParsedClasses.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/**
+ * Image - Intelligent image component
+ *
+ * Handles loading states, fallbacks, and supports custom image components (like Next.js Image).
+ * Displays a fallback image until the main image is fully loaded.
+ *
+ * @example
+ * ```tsx
+ * <Image
+ *   src="/product.jpg"
+ *   alt="Product"
+ *   fallback="/placeholder.jpg"
+ * />
+ * ```
+ *
+ * @example
+ * With Next.js Image
+ * ```tsx
+ * <Image
+ *   component={NextImage}
+ *   src="/product.jpg"
+ *   alt="Product"
+ *   imageProps={{ width: 500, height: 500 }}
+ * />
+ * ```
+ */
+const Image = React__default["default"].forwardRef(({ src, alt, fallback, component: Component = 'img', priority = false, className = '', style, imageProps = {}, onLoad, onError, ...props }, ref) => {
+    const [loaded, setLoaded] = React.useState(false);
+    const [error, setError] = React.useState(false);
+    // const { theme } = useThemeContext();
+    // Reset state if src changes
+    React.useEffect(() => {
+        setLoaded(false);
+        setError(false);
+    }, [src]);
+    const handleLoad = (e) => {
+        setLoaded(true);
+        if (onLoad)
+            onLoad(e);
+    };
+    const handleError = (e) => {
+        setError(true);
+        if (onError)
+            onError(e);
+    };
+    // If using a custom component, we assume it supports className, style, src, alt, etc.
+    // If it's standard img, we merge props.
+    // Logic:
+    // 1. Render fallback absolutely positioned at bottom.
+    // 2. Render main image on top.
+    // 3. Main image is opacity 0 until loaded.
+    // 4. If error, main image stays hidden (or removed) and fallback stays visible.
+    // const showFallback = (!loaded || error) && fallback;
+    return (jsxRuntime.jsxs("div", { ref: ref, className: `vtx-image-wrapper ${className}`, style: style, ...props, children: [fallback && (jsxRuntime.jsx("img", { src: fallback, alt: alt ? `${alt} placeholder` : 'Placeholder', className: `vtx-image-placeholder ${loaded && !error ? 'vtx-image-placeholder--hidden' : ''}` })), !error && (jsxRuntime.jsx(Component, { src: src, alt: alt, className: `vtx-image-main ${loaded ? 'vtx-image-main--loaded' : 'vtx-image-main--loading'} ${imageProps.className || ''}`, onLoad: handleLoad, onError: handleError, loading: priority ? "eager" : "lazy", ...imageProps })), error && !fallback && (jsxRuntime.jsx("div", { style: { display: 'none' }, children: "Failed to load props" })
+            // Render standard img to show browser broken icon? 
+            // Or just leave it blank. User requested "default image".
+            )] }));
+});
+Image.displayName = 'Image';
+const ImageWithParsedClasses = hoc_withParsedClasses.withParsedClasses(Image);
+
+exports.Image = ImageWithParsedClasses;
+exports["default"] = ImageWithParsedClasses;
+//# sourceMappingURL=Image.js.map

package/dist/cjs/components/Image/components/Image/Image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.js","sources":["../../../../../../src/components/Image/Image.tsx"],"sourcesContent":[null],"names":["React","useState","useEffect","_jsxs","_jsx","withParsedClasses"],"mappings":";;;;;;;;;;;;AA4CA;;;;;;;;;;;;;;;;;;;;;;;;;AAyBG;AACH,MAAM,KAAK,GAAGA,yBAAK,CAAC,UAAU,CAC1B,CACI,EACI,GAAG,EACH,GAAG,EACH,QAAQ,EACR,SAAS,EAAE,SAAS,GAAG,KAAK,EAC5B,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,EAAE,EACd,KAAK,EACL,UAAU,GAAG,EAAE,EACf,MAAM,EACN,OAAO,EACP,GAAG,KAAK,EACX,EACD,GAAG,KACH;IACA,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC,CAAC;;;IAI1CC,eAAS,CAAC,MAAK;QACX,SAAS,CAAC,KAAK,CAAC,CAAC;QACjB,QAAQ,CAAC,KAAK,CAAC,CAAC;AACpB,KAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;AAEV,IAAA,MAAM,UAAU,GAAG,CAAC,CAAM,KAAI;QAC1B,SAAS,CAAC,IAAI,CAAC,CAAC;AAChB,QAAA,IAAI,MAAM;YAAE,MAAM,CAAC,CAAC,CAAC,CAAC;AAC1B,KAAC,CAAC;AAEF,IAAA,MAAM,WAAW,GAAG,CAAC,CAAM,KAAI;QAC3B,QAAQ,CAAC,IAAI,CAAC,CAAC;AACf,QAAA,IAAI,OAAO;YAAE,OAAO,CAAC,CAAC,CAAC,CAAC;AAC5B,KAAC,CAAC;;;;;;;;;AAaF,IAAA,QACIC,eAAA,CAAA,KAAA,EAAA,EACI,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,CAAqB,kBAAA,EAAA,SAAS,CAAE,CAAA,EAC3C,KAAK,EAAE,KAAK,EACR,GAAA,KAAK,EAGR,QAAA,EAAA,CAAA,QAAQ,KACLC,cACI,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,QAAQ,EACb,GAAG,EAAE,GAAG,GAAG,CAAG,EAAA,GAAG,CAAc,YAAA,CAAA,GAAG,aAAa,EAC/C,SAAS,EAAE,CAAyB,sBAAA,EAAA,MAAM,IAAI,CAAC,KAAK,GAAG,+BAA+B,GAAG,EAAE,CAAE,CAAA,EAAA,CAC/F,CACL,EAGA,CAAC,KAAK,KACHA,eAAC,SAAS,EAAA,EACN,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,CAAkB,eAAA,EAAA,MAAM,GAAG,wBAAwB,GAAG,yBAAyB,CAAA,CAAA,EAAI,UAAU,CAAC,SAAS,IAAI,EAAE,CAAA,CAAE,EAC1H,MAAM,EAAE,UAAU,EAClB,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,QAAQ,GAAG,OAAO,GAAG,MAAM,EAAA,GAChC,UAAU,EAChB,CAAA,CACL,EAQA,KAAK,IAAI,CAAC,QAAQ,KACfA,cAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAA4B,QAAA,EAAA,sBAAA,EAAA,CAAA;;;AAG9D,aAAA,CAAA,EAAA,CACC,EACR;AACN,CAAC,CACJ,CAAC;AAEF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC;AAE5B,MAAM,sBAAsB,GAAGC,uCAAiB,CAAC,KAAK;;;;;"}

package/dist/cjs/components/Image/components/Image/index.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_Image_Image = require('./Image.js');
+
+
+
+exports.Image = components_Image_Image["default"];
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/Image/components/Image/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/cjs/components/Input/components/Input/Input.js

@@ -0,0 +1,115 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var icons_IconComponents = require('../../../../icons/icons/IconComponents.js');
+var React = require('react');
+var hooks_index = require('../../../../hooks/hooks/index.js');
+var theme_ThemeProvider = require('../../../../theme/theme/ThemeProvider.js');
+require('../../../../theme/theme/tokens.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/**
+ * Input component - Text input field with label, helper text, validation states, and rich features
+ *
+ * A comprehensive input component with support for icons, prefixes, suffixes, character counting,
+ * clear functionality, and various validation states.
+ *
+ * @example
+ * Basic usage
+ * ```tsx
+ * <Input
+ *   label="Email"
+ *   type="email"
+ *   placeholder="Enter your email"
+ *   helperText="We'll never share your email"
+ * />
+ * ```
+ *
+ * @example
+ * With error state
+ * ```tsx
+ * <Input
+ *   label="Username"
+ *   error="Username is already taken"
+ *   value={username}
+ *   onChange={(e) => setUsername(e.target.value)}
+ * />
+ * ```
+ *
+ * @example
+ * With icons and clear button
+ * ```tsx
+ * <Input
+ *   label="Search"
+ *   leftIcon={<SearchIcon />}
+ *   clearable
+ *   onClear={() => setSearch('')}
+ * />
+ * ```
+ *
+ * @example
+ * With character counter
+ * ```tsx
+ * <Input
+ *   label="Bio"
+ *   maxLength={100}
+ *   showCount
+ *   value={bio}
+ *   onChange={(e) => setBio(e.target.value)}
+ * />
+ * ```
+ */
+const Input = React__default["default"].forwardRef(({ label, helperText, error, success, size, fullWidth = false, leftIcon, rightIcon, clearable = false, onClear, showCount = false, className = '', wrapperClassName = '', labelClassName = '', inputClassName = '', prefix, suffix, id: providedId, disabled = false, required = false, value, maxLength, ...props }, ref) => {
+    const { theme } = theme_ThemeProvider.useThemeContext();
+    const inputSize = size || theme.defaultSize;
+    const generatedId = hooks_index.useId('input');
+    const id = providedId || generatedId;
+    const helperId = `${id}-helper`;
+    const errorId = `${id}-error`;
+    const successId = `${id}-success`;
+    const hasError = Boolean(error);
+    const hasSuccess = Boolean(success) && !hasError;
+    const showClearButton = clearable && value && String(value).length > 0 && !disabled;
+    const describedBy = [
+        helperText && !error && !success && helperId,
+        error && errorId,
+        success && successId,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const wrapperClassNames = [
+        'vtx-input-wrapper',
+        fullWidth && 'vtx-input-wrapper--full-width',
+        wrapperClassName,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const inputContainerClassNames = [
+        'vtx-input-container',
+        `vtx-input-container--${inputSize}`,
+        hasError && 'vtx-input-container--error',
+        hasSuccess && 'vtx-input-container--success',
+        disabled && 'vtx-input-container--disabled',
+        (leftIcon || prefix) && 'vtx-input-container--with-left-element',
+        (rightIcon || suffix || showClearButton) && 'vtx-input-container--with-right-element',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const handleClear = () => {
+        onClear === null || onClear === void 0 ? void 0 : onClear();
+    };
+    const currentLength = value ? String(value).length : 0;
+    const showCounter = showCount && maxLength;
+    return (jsxRuntime.jsxs("div", { className: wrapperClassNames, children: [label && (jsxRuntime.jsxs("label", { htmlFor: id, className: `vtx-input-label ${labelClassName}`.trim(), children: [label, required && (jsxRuntime.jsxs("span", { className: "vtx-input-label__required", "aria-label": "required", children: [' ', "*"] }))] })), jsxRuntime.jsxs("div", { className: inputContainerClassNames, children: [leftIcon && (jsxRuntime.jsx("span", { className: "vtx-input-icon vtx-input-icon--left", "aria-hidden": "true", children: leftIcon })), prefix && (jsxRuntime.jsx("span", { className: "vtx-input-prefix", "aria-hidden": "true", children: prefix })), jsxRuntime.jsx("input", { ref: ref, id: id, className: `vtx-input ${inputClassName}`.trim(), disabled: disabled, required: required, value: value, maxLength: maxLength, "aria-invalid": hasError, "aria-describedby": describedBy || undefined, ...props }), suffix && (jsxRuntime.jsx("span", { className: "vtx-input-suffix", "aria-hidden": "true", children: suffix })), showClearButton && (jsxRuntime.jsx("button", { type: "button", className: "vtx-input-clear", onClick: handleClear, "aria-label": "Clear input", tabIndex: -1, children: jsxRuntime.jsx(icons_IconComponents.CloseSmallIcon, { size: 16 }) })), rightIcon && !showClearButton && (jsxRuntime.jsx("span", { className: "vtx-input-icon vtx-input-icon--right", "aria-hidden": "true", children: rightIcon }))] }), helperText && !error && !success && (jsxRuntime.jsx("p", { id: helperId, className: "vtx-input-helper", children: helperText })), error && (jsxRuntime.jsx("p", { id: errorId, className: "vtx-input-error", role: "alert", children: error })), success && (jsxRuntime.jsx("p", { id: successId, className: "vtx-input-success", role: "status", children: success })), showCounter && (jsxRuntime.jsxs("p", { className: "vtx-input-counter", "aria-live": "polite", children: [currentLength, " / ", maxLength] }))] }));
+});
+Input.displayName = 'Input';
+
+exports.Input = Input;
+exports["default"] = Input;
+//# sourceMappingURL=Input.js.map

package/dist/cjs/components/Input/components/Input/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sources":["../../../../../../src/components/Input/Input.tsx"],"sourcesContent":[null],"names":["React","useThemeContext","useId","_jsxs","_jsx","CloseSmallIcon"],"mappings":"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"}

package/dist/cjs/components/Input/components/Input/index.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_Input_Input = require('./Input.js');
+
+
+
+exports.Input = components_Input_Input["default"];
+exports.InputComponent = components_Input_Input["default"];
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/Input/components/Input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}