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

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

@@ -1,14 +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

@@ -1,6 +1,8 @@
+'use client'
+
 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,12 +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

@@ -3,10 +3,12 @@
  * Provides navigation breadcrumbs with theme support and responsive design
  */
 
+'use client'
+
 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

@@ -3,9 +3,11 @@
  * Provides comprehensive menu functionality with theme support and multiple variants
  */
 
+'use client'
+
 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

@@ -3,15 +3,17 @@
  * Showcases all navigation components with different themes and configurations
  */
 
+'use client'
+
 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

@@ -3,10 +3,12 @@
  * Provides comprehensive pagination with theme support and responsive design
  */
 
+'use client'
+
 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

@@ -3,9 +3,11 @@
  * Provides comprehensive sidebar functionality with theme support and multiple variants
  */
 
+'use client'
+
 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

@@ -3,10 +3,12 @@
  * Provides comprehensive stepper functionality with theme support and multiple variants
  */
 
+'use client'
+
 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

@@ -3,10 +3,12 @@
  * Provides comprehensive tab functionality with theme support and multiple variants
  */
 
+'use client'
+
 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/backdrop.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React from 'react';
 
 export interface BackdropProps {

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

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useEffect, useRef, useCallback } from 'react';
 
 export interface FocusManagerProps {

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

@@ -1,10 +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,5 +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,14 +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

@@ -1,6 +1,8 @@
+'use client'
+
 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,7 +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,7 +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,
@@ -9,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,14 +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

@@ -1,10 +1,12 @@
+'use client'
+
 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,5 +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,5 +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,7 +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,9 +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,9 +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

@@ -1,6 +1,8 @@
+'use client'
+
 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/hooks/use-device.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { useState, useEffect } from 'react'
 
 export interface DeviceInfo {