@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.18 → 0.2.19

package/src/components/ui/enterprise-mobile-experience-demo.tsx

@@ -1,8 +1,8 @@
 'use client'
 
 import React, { useState } from 'react'
-import { Badge } from './badge'
-import { useEnterpriseMobileExperience } from '../../hooks/use-enterprise-mobile-experience'
+import { Badge } from './badge.js'
+import { useEnterpriseMobileExperience } from '../../hooks/use-enterprise-mobile-experience.js'
 import {
   EnterpriseButton,
   EnterpriseCard,
@@ -12,7 +12,7 @@ import {
   EnterpriseStatus,
   EnterpriseLoading,
   EnterpriseNotification
-} from './enterprise-mobile-experience'
+} from './enterprise-mobile-experience.js'
 
 export const EnterpriseMobileExperienceDemo: React.FC = () => {
   const [activeDemo, setActiveDemo] = useState<'overview' | 'quality' | 'performance' | 'accessibility' | 'components'>('overview')

package/src/components/ui/feedback/alert.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import React, { useState, useCallback } from 'react';
-import { AlertProps, AlertAction } from './types';
+import { AlertProps, AlertAction } from './types.js';
 
 // Simple icon components
 const CheckCircleIcon: React.FC<{ className?: string }> = ({ className = '' }) => (

package/src/components/ui/feedback/progress.tsx

@@ -1,8 +1,8 @@
 'use client'
 
 import React, { useEffect, useState } from 'react';
-import { useTheme } from '../../../themes/useTheme';
-import { ProgressProps, ProgressStep } from './types';
+import { useTheme } from '../../../themes/useTheme.js';
+import { ProgressProps, ProgressStep } from './types.js';
 
 // Default color fallbacks for when theme is not available
 const getDefaultColors = () => ({

package/src/components/ui/feedback/skeleton.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SkeletonProps, SkeletonTextProps, SkeletonAvatarProps, SkeletonButtonProps } from './types';
+import { SkeletonProps, SkeletonTextProps, SkeletonAvatarProps, SkeletonButtonProps } from './types.js';
 
 // Base Skeleton Component
 const BaseSkeleton: React.FC<SkeletonProps> = ({

package/src/components/ui/feedback/toast.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import React, { useState, useEffect, useCallback, useRef } from 'react';
-import { ToastProps, ToastAction, ToastContainerProps } from './types';
+import { ToastProps, ToastAction, ToastContainerProps } from './types.js';
 
 // Simple icon components
 const CheckCircleIcon: React.FC<{ className?: string }> = ({ className = '' }) => (

package/src/components/ui/font-preview.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card';
-import { Badge } from './badge';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card.js';
+import { Badge } from './badge.js';
 import { useTheme } from '../../themes';
-import { FontConfig } from '../../themes/types';
+import { FontConfig } from '../../themes/types.js';
 
 export interface FontPreviewProps {
   fontConfig?: FontConfig;

package/src/components/ui/form-demo.tsx

@@ -1,13 +1,13 @@
 'use client'
 
 import React, { useState, useRef } from 'react'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card'
-import { Button } from './button'
-import { Badge } from './badge'
-import { Tabs } from './navigation/tabs'
-import MobileFormValidation, { MobileFormValidationRef } from './mobile-form-validation'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card.js'
+import { Button } from './button.js'
+import { Badge } from './badge.js'
+import { Tabs } from './navigation/tabs.js'
+import MobileFormValidation, { MobileFormValidationRef } from './mobile-form-validation.js'
 
-import { InputType } from '../../hooks/use-semantic-input'
+import { InputType } from '../../hooks/use-semantic-input.js'
 
 export const FormDemo: React.FC = () => {
   const [activeTab, setActiveTab] = useState<'basic' | 'advanced' | 'performance' | 'semantic'>('basic')

package/src/components/ui/hardware-acceleration-demo.tsx

@@ -1,11 +1,11 @@
 'use client'
 
 import React, { useState, useCallback, useEffect } from 'react'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card'
-import { Badge } from './badge'
-import { Button } from './button'
-import { useHardwareAcceleration } from '../../hooks/use-hardware-acceleration'
-import { useBatteryOptimization } from '../../hooks/use-battery-optimization'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card.js'
+import { Badge } from './badge.js'
+import { Button } from './button.js'
+import { useHardwareAcceleration } from '../../hooks/use-hardware-acceleration.js'
+import { useBatteryOptimization } from '../../hooks/use-battery-optimization.js'
 
 export const HardwareAccelerationDemo: React.FC = () => {
   const [showGPUInfo, setShowGPUInfo] = useState(true)

package/src/components/ui/layout-demo.tsx

@@ -1,19 +1,19 @@
 'use client'
 
 import React, { useState } from 'react'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card'
-import { Badge } from './badge'
-import { Button } from './button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card.js'
+import { Badge } from './badge.js'
+import { Button } from './button.js'
 import { 
   MobileLayout, 
   TabletLayout, 
   DesktopLayout, 
   AdaptiveLayout
 } from './layouts'
-import { useAdaptiveLayout } from '../../hooks/use-adaptive-layout'
-import { useLayoutPerformance } from '../../hooks/use-layout-performance'
-import { useMobileLayout } from '../../hooks/use-mobile-layout'
-import { useTabletLayout } from '../../hooks/use-tablet-layout'
+import { useAdaptiveLayout } from '../../hooks/use-adaptive-layout.js'
+import { useLayoutPerformance } from '../../hooks/use-layout-performance.js'
+import { useMobileLayout } from '../../hooks/use-mobile-layout.js'
+import { useTabletLayout } from '../../hooks/use-tablet-layout.js'
 
 export const LayoutDemo: React.FC = () => {
   const [activeLayout, setActiveLayout] = useState<'mobile' | 'tablet' | 'desktop' | 'adaptive'>('adaptive')

package/src/components/ui/layouts/adaptive-layout.tsx

@@ -1,11 +1,11 @@
 'use client'
 
 import React, { ReactNode, useState, useEffect } from 'react'
-import { Card, CardContent } from '../card'
-import { Badge } from '../badge'
-import { MobileLayout } from './mobile-layout'
-import { TabletLayout } from './tablet-layout'
-import { DesktopLayout } from './desktop-layout'
+import { Card, CardContent } from '../card.js'
+import { Badge } from '../badge.js'
+import { MobileLayout } from './mobile-layout.js'
+import { TabletLayout } from './tablet-layout.js'
+import { DesktopLayout } from './desktop-layout.js'
 
 export type DeviceType = 'mobile' | 'tablet' | 'desktop'
 

package/src/components/ui/layouts/desktop-layout.tsx

@@ -1,9 +1,9 @@
 'use client'
 
 import React, { ReactNode, useState, useEffect } from 'react'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../card'
-import { Badge } from '../badge'
-import { Button } from '../button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../card.js'
+import { Badge } from '../badge.js'
+import { Button } from '../button.js'
 
 export interface DesktopLayoutProps {
   children: ReactNode

package/src/components/ui/layouts/mobile-layout.tsx

@@ -1,8 +1,8 @@
 'use client'
 
 import React, { ReactNode, useState, useEffect } from 'react'
-import { Card, CardContent, CardHeader, CardTitle } from '../card'
-import { Badge } from '../badge'
+import { Card, CardContent, CardHeader, CardTitle } from '../card.js'
+import { Badge } from '../badge.js'
 
 export interface MobileLayoutProps {
   children: ReactNode

package/src/components/ui/layouts/tablet-layout.tsx

@@ -1,9 +1,9 @@
 'use client'
 
 import React, { ReactNode, useState, useEffect } from 'react'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../card'
-import { Badge } from '../badge'
-import { Button } from '../button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../card.js'
+import { Badge } from '../badge.js'
+import { Button } from '../button.js'
 
 export interface TabletLayoutProps {
   children: ReactNode

package/src/components/ui/mobile-form-validation.tsx

@@ -1,16 +1,16 @@
 'use client'
 
 import React, { useState, useRef, forwardRef } from 'react'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card'
-import { Button } from './button'
-import { Badge } from './badge'
-import { Input } from './input'
-import { Label } from './label'
-import { useMobileFormValidation, ValidationRule } from '../../hooks/use-mobile-form-validation'
-import { useFormFeedback } from '../../hooks/use-form-feedback'
-import { useMobileFormLayout } from '../../hooks/use-mobile-form-layout'
-import { useSemanticInput, InputType } from '../../hooks/use-semantic-input'
-import { useFormPerformance } from '../../hooks/use-form-performance'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card.js'
+import { Button } from './button.js'
+import { Badge } from './badge.js'
+import { Input } from './input.js'
+import { Label } from './label.js'
+import { useMobileFormValidation, ValidationRule } from '../../hooks/use-mobile-form-validation.js'
+import { useFormFeedback } from '../../hooks/use-form-feedback.js'
+import { useMobileFormLayout } from '../../hooks/use-mobile-form-layout.js'
+import { useSemanticInput, InputType } from '../../hooks/use-semantic-input.js'
+import { useFormPerformance } from '../../hooks/use-form-performance.js'
 
 export interface MobileFormValidationProps {
   title?: string

package/src/components/ui/mobile-input-demo.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Card } from './card';
-import { MobileInput, mobileInputConfigs } from './mobile-input';
+import { Card } from './card.js';
+import { MobileInput, mobileInputConfigs } from './mobile-input.js';
 
 export const MobileInputDemo: React.FC = () => {
   return (

package/src/components/ui/mobile-input.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react"
 import { cn } from "../../lib/utils"
-import { Input } from "./input"
+import { Input } from "./input.js"
 
 // Input type mappings for mobile optimization
 export type MobileInputType = 

package/src/components/ui/mobile-skeleton-loading-demo.tsx

@@ -1,14 +1,14 @@
 'use client'
 
 import React, { useState, useEffect } from 'react'
-import { Card } from './card'
-import { Button } from './button'
-import { Badge } from './badge'
-import { useMobileSkeleton } from '../../hooks/use-mobile-skeleton'
-import { useDeviceLoadingStates } from '../../hooks/use-device-loading-states'
-import { useLoadingPerformance } from '../../hooks/use-loading-performance'
-import { useBatteryConsciousLoading } from '../../hooks/use-battery-conscious-loading'
-import { useLoadingAccessibility } from '../../hooks/use-loading-accessibility'
+import { Card } from './card.js'
+import { Button } from './button.js'
+import { Badge } from './badge.js'
+import { useMobileSkeleton } from '../../hooks/use-mobile-skeleton.js'
+import { useDeviceLoadingStates } from '../../hooks/use-device-loading-states.js'
+import { useLoadingPerformance } from '../../hooks/use-loading-performance.js'
+import { useBatteryConsciousLoading } from '../../hooks/use-battery-conscious-loading.js'
+import { useLoadingAccessibility } from '../../hooks/use-loading-accessibility.js'
 
 export const MobileSkeletonLoadingDemo: React.FC = () => {
   const [activeTab, setActiveTab] = useState('overview')

package/src/components/ui/navigation/breadcrumb.tsx

@@ -8,7 +8,7 @@
 import * as React from 'react';
 import { useState, useMemo } from 'react';
 import { ChevronRightIcon, HomeIcon } from '@heroicons/react/24/outline';
-import { BreadcrumbProps, BreadcrumbItem } from './types';
+import { BreadcrumbProps, BreadcrumbItem } from './types.js';
 
 export const Breadcrumb: React.FC<BreadcrumbProps> = ({
   items,

package/src/components/ui/navigation/menu.tsx

@@ -7,7 +7,7 @@
 
 import * as React from 'react';
 import { useState, useCallback, useMemo, useRef, useEffect } from 'react';
-import { MenuProps, NavigationItem, NavigationGroup } from './types';
+import { MenuProps, NavigationItem, NavigationGroup } from './types.js';
 
 // Simple icon components
 const ChevronDownIcon: React.FC<{ className?: string }> = ({ className = '' }) => (

package/src/components/ui/navigation/navigation-demo.tsx

@@ -7,13 +7,13 @@
 
 import * as React from 'react';
 import { useState } from 'react';
-import { Breadcrumb } from './breadcrumb';
-import { Tabs } from './tabs';
-import { Menu } from './menu';
-import { Sidebar } from './sidebar';
-import { Stepper } from './stepper';
-import { Pagination } from './pagination';
-import { NavigationItem, NavigationGroup } from './types';
+import { Breadcrumb } from './breadcrumb.js';
+import { Tabs } from './tabs.js';
+import { Menu } from './menu.js';
+import { Sidebar } from './sidebar.js';
+import { Stepper } from './stepper.js';
+import { Pagination } from './pagination.js';
+import { NavigationItem, NavigationGroup } from './types.js';
 
 export const NavigationDemo: React.FC = () => {
   const [currentTab, setCurrentTab] = useState('overview');

package/src/components/ui/navigation/pagination.tsx

@@ -8,7 +8,7 @@
 import * as React from 'react';
 import { useMemo } from 'react';
 import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
-import { PaginationProps, PaginationItem } from './types';
+import { PaginationProps, PaginationItem } from './types.js';
 
 // Simple icon components
 const ChevronDoubleLeftIcon: React.FC<{ className?: string }> = ({ className = '' }) => (

package/src/components/ui/navigation/sidebar.tsx

@@ -7,7 +7,7 @@
 
 import * as React from 'react';
 import { useState, useCallback, useRef, useEffect } from 'react';
-import { SidebarProps, NavigationItem, NavigationGroup } from './types';
+import { SidebarProps, NavigationItem, NavigationGroup } from './types.js';
 
 // Simple icon components
 const ChevronLeftIcon: React.FC<{ className?: string }> = ({ className = '' }) => (

package/src/components/ui/navigation/stepper.tsx

@@ -8,7 +8,7 @@
 import * as React from 'react';
 import { useState, useCallback, useMemo } from 'react';
 import { CheckIcon, ExclamationTriangleIcon } from '@heroicons/react/24/outline';
-import { StepperProps, StepItem } from './types';
+import { StepperProps, StepItem } from './types.js';
 
 // Simple icon components
 const ExclamationCircleIcon: React.FC<{ className?: string }> = ({ className = '' }) => (

package/src/components/ui/navigation/tabs.tsx

@@ -8,7 +8,7 @@
 import * as React from 'react';
 import { useState, useCallback, useMemo } from 'react';
 import { XMarkIcon } from '@heroicons/react/24/outline';
-import { TabsProps, TabItem } from './types';
+import { TabsProps, TabItem } from './types.js';
 
 // Simple icon components
 const PlusIcon: React.FC<{ className?: string }> = ({ className = '' }) => (

package/src/components/ui/overlay/modal.tsx

@@ -1,12 +1,12 @@
 'use client'
 
 import React, { useEffect, useRef, useId } from 'react';
-import { useTheme } from '../../../themes/useTheme';
-import { Portal } from './portal';
-import { Backdrop } from './backdrop';
-import { FocusManager } from './focus-manager';
-import { useOverlayManager } from './overlay-manager';
-import { ModalProps, ModalHeaderProps, ModalBodyProps, ModalFooterProps } from './types';
+import { useTheme } from '../../../themes/useTheme.js';
+import { Portal } from './portal.js';
+import { Backdrop } from './backdrop.js';
+import { FocusManager } from './focus-manager.js';
+import { useOverlayManager } from './overlay-manager.js';
+import { ModalProps, ModalHeaderProps, ModalBodyProps, ModalFooterProps } from './types.js';
 
 // SVG Icons
 const XMarkIcon: React.FC<{ className?: string }> = ({ className = 'w-6 h-6' }) => (

package/src/components/ui/overlay/overlay-manager.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import React, { createContext, useContext, useReducer, useCallback, ReactNode } from 'react';
-import { OverlayManagerProps, OverlayState, OverlayAction } from './types';
+import { OverlayManagerProps, OverlayState, OverlayAction } from './types.js';
 
 // Overlay context for managing global overlay state
 interface OverlayContextType {

package/src/components/ui/overlay/popover.tsx

@@ -1,16 +1,16 @@
 'use client'
 
 import React, { useState, useRef, useEffect, useCallback, cloneElement } from 'react';
-import { useTheme } from '../../../themes/useTheme';
-import { Portal } from './portal';
-import { FocusManager } from './focus-manager';
+import { useTheme } from '../../../themes/useTheme.js';
+import { Portal } from './portal.js';
+import { FocusManager } from './focus-manager.js';
 import { 
   PopoverProps, 
   PopoverContentProps, 
   PopoverHeaderProps, 
   PopoverBodyProps, 
   PopoverFooterProps 
-} from './types';
+} from './types.js';
 
 // SVG Icons
 const XMarkIcon: React.FC<{ className?: string }> = ({ className = 'w-5 h-5' }) => (

package/src/components/ui/overlay/portal.tsx

@@ -2,7 +2,7 @@
 
 import React, { useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { PortalProps } from './types';
+import { PortalProps } from './types.js';
 
 export const Portal: React.FC<PortalProps> = ({
   children,

package/src/components/ui/overlay/tooltip.tsx

@@ -1,9 +1,9 @@
 'use client'
 
 import React, { useState, useRef, useEffect, useCallback, cloneElement } from 'react';
-import { useTheme } from '../../../themes/useTheme';
-import { Portal } from './portal';
-import { TooltipProps, TooltipContentProps } from './types';
+import { useTheme } from '../../../themes/useTheme.js';
+import { Portal } from './portal.js';
+import { TooltipProps, TooltipContentProps } from './types.js';
 
 // Default color fallbacks
 const getDefaultColors = () => ({

package/src/components/ui/performance-demo.tsx

@@ -1,9 +1,9 @@
 'use client'
 
 import React, { useState } from 'react'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card'
-import { Button } from './button'
-import { Badge } from './badge'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card.js'
+import { Button } from './button.js'
+import { Badge } from './badge.js'
 import { 
   usePerformance,
   useFrameRate,
@@ -11,7 +11,7 @@ import {
   useBatteryStatus,
   usePerformanceThrottling
 } from '../../hooks'
-import { useDevice } from '../../hooks/use-device'
+import { useDevice } from '../../hooks/use-device.js'
 
 export const PerformanceDemo: React.FC = () => {
   const [activeTab, setActiveTab] = useState<'overview' | 'fps' | 'memory' | 'battery' | 'throttling'>('overview')

package/src/components/ui/semantic-input-system-demo.tsx

@@ -1,16 +1,16 @@
 'use client'
 
 import React, { useState } from 'react'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card'
-import { Button } from './button'
-import { Input } from './input'
-import { Label } from './label'
-import { Badge } from './badge'
-import { useSemanticInput } from '../../hooks/use-semantic-input'
-import { useMobileKeyboardOptimization } from '../../hooks/use-mobile-keyboard-optimization'
-import { useTouchFriendlyInput } from '../../hooks/use-touch-friendly-input'
-import { useInputPerformance } from '../../hooks/use-input-performance'
-import { useInputAccessibility } from '../../hooks/use-input-accessibility'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card.js'
+import { Button } from './button.js'
+import { Input } from './input.js'
+import { Label } from './label.js'
+import { Badge } from './badge.js'
+import { useSemanticInput } from '../../hooks/use-semantic-input.js'
+import { useMobileKeyboardOptimization } from '../../hooks/use-mobile-keyboard-optimization.js'
+import { useTouchFriendlyInput } from '../../hooks/use-touch-friendly-input.js'
+import { useInputPerformance } from '../../hooks/use-input-performance.js'
+import { useInputAccessibility } from '../../hooks/use-input-accessibility.js'
 
 export const SemanticInputSystemDemo: React.FC = () => {
   const [activeDemo, setActiveDemo] = useState<'semantic' | 'mobile' | 'touch' | 'performance' | 'accessibility'>('semantic')

package/src/components/ui/theme-customizer.tsx

@@ -2,11 +2,11 @@
 
 import React, { useState, useCallback, useEffect } from 'react';
 import { useTheme } from '../../themes';
-import { Card, CardContent, CardHeader, CardTitle } from './card';
-import { Button } from './button';
-import { Input } from './input';
-import { ThemePreview } from './theme-preview';
-import type { CompleteThemeConfig } from '../../themes/types';
+import { Card, CardContent, CardHeader, CardTitle } from './card.js';
+import { Button } from './button.js';
+import { Input } from './input.js';
+import { ThemePreview } from './theme-preview.js';
+import type { CompleteThemeConfig } from '../../themes/types.js';
 
 export interface ThemeCustomizerProps {
   initialTheme?: string;

package/src/components/ui/theme-preview.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTheme } from '../../themes';
-import { Card, CardContent, CardHeader, CardTitle } from './card';
-import { Badge } from './badge';
+import { Card, CardContent, CardHeader, CardTitle } from './card.js';
+import { Badge } from './badge.js';
 
 export interface ThemePreviewProps {
   themeName?: string;

package/src/components/ui/theme-switcher.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import React, { useState, useEffect } from 'react';
-import { Button } from './button';
+import { Button } from './button.js';
 import { useTheme } from '../../themes';
 import type { MultiThemeConfig } from '../../themes';
 

package/src/components/ui/theme-toggle.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import React, { useState, useEffect } from 'react';
-import { Button } from './button';
+import { Button } from './button.js';
 import { Moon, Sun } from 'lucide-react';
 
 export const ThemeToggle: React.FC = () => {

package/src/components/ui/token-demo.tsx

@@ -1,9 +1,9 @@
 'use client'
 
 import React, { useState } from 'react';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card';
-import { Badge } from './badge';
-import { Button } from './button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card.js';
+import { Badge } from './badge.js';
+import { Button } from './button.js';
 import { useTheme } from '../../themes';
 import { createTokenManager } from '../../tokens';
 

package/src/components/ui/touch-demo.tsx

@@ -1,11 +1,11 @@
 'use client'
 
 import React, { useState, useRef } from 'react'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card'
-import { Button } from './button'
-import { Badge } from './badge'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card.js'
+import { Button } from './button.js'
+import { Badge } from './badge.js'
 import { useGestures, useTouchOptimization, useMobileTouch } from '../../hooks'
-import { useDevice } from '../../hooks/use-device'
+import { useDevice } from '../../hooks/use-device.js'
 
 export const TouchDemo: React.FC = () => {
   const [activeTab, setActiveTab] = useState<'overview' | 'gestures' | 'optimization' | 'mobile'>('overview')

package/src/components/ui/touch-friendly-interface-demo.tsx

@@ -1,11 +1,11 @@
 'use client'
 
 import React, { useState } from 'react'
-import { Badge } from './badge'
-import { Input } from './input'
-import { Button } from './button'
-import { Card, CardContent } from './card'
-import { useTouchFriendlyInterface } from '../../hooks/use-touch-friendly-interface'
+import { Badge } from './badge.js'
+import { Input } from './input.js'
+import { Button } from './button.js'
+import { Card, CardContent } from './card.js'
+import { useTouchFriendlyInterface } from '../../hooks/use-touch-friendly-interface.js'
 
 export const TouchFriendlyInterfaceDemo: React.FC = () => {
   const [activeDemo, setActiveDemo] = useState<'targets' | 'interactions' | 'performance' | 'accessibility'>('targets')

package/src/components/ui/touch-friendly-interface.tsx

@@ -2,7 +2,7 @@
 
 import React, { forwardRef } from 'react'
 import { cn } from '../../lib/utils'
-import { useTouchFriendlyInterface } from '../../hooks/use-touch-friendly-interface'
+import { useTouchFriendlyInterface } from '../../hooks/use-touch-friendly-interface.js'
 
 // Touch-Friendly Button Component
 export interface TouchFriendlyButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {

package/src/hooks/use-animation-profile.ts

@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback, useMemo } from 'react'
-import { useDevice } from './use-device'
+import { useDevice } from './use-device.js'
 
 export interface AnimationProfile {
   duration: {

package/src/plugins/theme-css-generator.ts

@@ -1,7 +1,7 @@
 import { resolve } from 'path'
 import { existsSync, mkdirSync, writeFileSync } from 'fs'
 import type { Plugin } from 'vite'
-import type { MultiThemeConfig } from '../themes/types'
+import type { MultiThemeConfig } from '../themes/types.js'
 import { defaultThemes } from '../themes/base-themes'
 
 export default function themeCSSGenerator(): Plugin {
@@ -280,7 +280,7 @@ export default function themeCSSGenerator(): Plugin {
           console.log(`✅ Generated dual-mode CSS for theme: ${themeObj.meta.name} -> ${themeFileName}`)
 
           // Add import to index file
-          indexCSS += `@import './${themeFileName}';\n`
+          indexCSS += `@import './${themeFileName}.js';\n`
 
           // Set stan-design theme as default
           if (themeKey === 'stan-design') {