@admin-layout/tailwind-design-pro 11.0.4-alpha.4 → 11.2.1-alpha.1

package/README.md

@@ -1 +1,471 @@
-# Tailwind UI
+# Tailwind Design Pro
+
+A universal tailwind design system with multi-theme support and CSS custom properties for seamless theme switching.
+
+## Features
+
+-   **Multi-Theme System**: 5 pre-built themes (Default, Airbnb, Slack, GitHub, Spotify)
+-   **CSS Custom Properties**: Theme-aware styling with CSS variables
+-   **Dark/Light Mode**: Automatic theme switching with persistent preferences
+-   **Component Library**: Pre-built UI components with theme integration
+-   **Responsive Design**: Mobile-first approach with consistent breakpoints
+-   **Accessibility**: WCAG compliant color contrasts and focus states
+
+## Quick Start
+
+### 1. Install the package
+
+```bash
+npm install @admin-layout/tailwind-design-pro
+```
+
+### 2. Import the CSS
+
+```typescript
+// In your main CSS file or entry point
+import '@admin-layout/tailwind-design-pro/src/styles/index.css';
+```
+
+### 3. Configure Tailwind
+
+```typescript
+// tailwind.config.ts
+import { themeConfig } from '@admin-layout/tailwind-design-pro';
+
+export default {
+    content: ['./src/**/*.{js,jsx,ts,tsx}', '../../packages/**/*.{js,jsx,ts,tsx}'],
+    theme: {
+        extend: themeConfig,
+    },
+    darkMode: 'class',
+    plugins: [],
+};
+```
+
+### 4. Set up Theme Provider
+
+```tsx
+import { ThemeProviderTailwind } from '@admin-layout/tailwind-ui';
+
+const App = () => {
+    const settings = {
+        theme: 'default', // 'default', 'airbnb', 'slack', 'github', 'spotify'
+        navTheme: 'light', // 'light' or 'dark'
+        primaryColor: '#000000',
+        fontFamily: 'Inter, sans-serif',
+    };
+
+    return (
+        <ThemeProviderTailwind settings={settings} actor={actor}>
+            <YourApp />
+        </ThemeProviderTailwind>
+    );
+};
+```
+
+## Available Themes
+
+### 1. Default Theme
+
+-   Clean, professional design
+-   Neutral color palette
+-   Perfect for business applications
+
+### 2. Airbnb Theme
+
+-   Warm, welcoming colors
+-   Red accent colors
+-   Great for hospitality and travel apps
+
+### 3. Slack Theme
+
+-   Purple-based design
+-   Modern, collaborative feel
+-   Ideal for team communication tools
+
+### 4. GitHub Theme
+
+-   Dark, developer-friendly
+-   High contrast design
+-   Perfect for developer tools
+
+### 5. Spotify Theme
+
+-   Green accent colors
+-   Music and entertainment focused
+-   Great for media applications
+
+## Theme-Aware CSS Classes
+
+The design system provides theme-aware CSS classes that automatically adapt to the current theme:
+
+### Background Colors
+
+```css
+.bg-background          /* Main background */
+/* Main background */
+/* Main background */
+/* Main background */
+/* Main background */
+/* Main background */
+/* Main background */
+/* Main background */
+/* Main background */
+/* Main background */
+/* Main background */
+/* Main background */
+/* Main background */
+/* Main background */
+/* Main background */
+/* Main background */
+.bg-card               /* Card background */
+.bg-popover            /* Popover background */
+.bg-muted              /* Muted background */
+.bg-accent; /* Accent background */
+```
+
+### Text Colors
+
+```css
+.text-foreground        /* Primary text */
+/* Primary text */
+/* Primary text */
+/* Primary text */
+/* Primary text */
+/* Primary text */
+/* Primary text */
+/* Primary text */
+/* Primary text */
+/* Primary text */
+/* Primary text */
+/* Primary text */
+/* Primary text */
+/* Primary text */
+/* Primary text */
+/* Primary text */
+.text-muted-foreground  /* Secondary text */
+.text-primary           /* Primary brand color */
+.text-secondary         /* Secondary brand color */
+.text-accent; /* Accent color */
+```
+
+### Semantic Colors
+
+```css
+.text-success           /* Success text */
+/* Success text */
+/* Success text */
+/* Success text */
+/* Success text */
+/* Success text */
+/* Success text */
+/* Success text */
+/* Success text */
+/* Success text */
+/* Success text */
+/* Success text */
+/* Success text */
+/* Success text */
+/* Success text */
+/* Success text */
+.text-warning           /* Warning text */
+.text-error             /* Error text */
+.text-info              /* Info text */
+.bg-success             /* Success background */
+.bg-warning             /* Warning background */
+.bg-error               /* Error background */
+.bg-info; /* Info background */
+```
+
+### Component Classes
+
+```css
+.themed-button          /* Theme-aware button */
+/* Theme-aware button */
+/* Theme-aware button */
+/* Theme-aware button */
+/* Theme-aware button */
+/* Theme-aware button */
+/* Theme-aware button */
+/* Theme-aware button */
+/* Theme-aware button */
+/* Theme-aware button */
+/* Theme-aware button */
+/* Theme-aware button */
+/* Theme-aware button */
+/* Theme-aware button */
+/* Theme-aware button */
+/* Theme-aware button */
+.themed-card            /* Theme-aware card */
+.themed-input           /* Theme-aware input */
+.themed-modal           /* Theme-aware modal */
+.themed-dropdown        /* Theme-aware dropdown */
+.themed-sidebar; /* Theme-aware sidebar */
+```
+
+### Interactive Classes
+
+```css
+.interactive-hover      /* Hover effects */
+/* Hover effects */
+/* Hover effects */
+/* Hover effects */
+/* Hover effects */
+/* Hover effects */
+/* Hover effects */
+/* Hover effects */
+/* Hover effects */
+/* Hover effects */
+/* Hover effects */
+/* Hover effects */
+/* Hover effects */
+/* Hover effects */
+/* Hover effects */
+/* Hover effects */
+.focus-themed           /* Focus states */
+.rounded-themed         /* Theme-aware border radius */
+.shadow-themed-sm       /* Theme-aware shadows */
+.shadow-themed-md
+.shadow-themed-lg
+.shadow-themed-xl;
+```
+
+## Using Theme-Aware Components
+
+### Basic Usage
+
+```tsx
+import { Button, Card, CardContent, CardHeader, CardTitle } from '@admin-layout/tailwind-ui';
+
+const MyComponent = () => {
+    return (
+        <div className="bg-background text-foreground p-6">
+            <Card className="themed-card">
+                <CardHeader>
+                    <CardTitle className="text-foreground">Card Title</CardTitle>
+                </CardHeader>
+                <CardContent>
+                    <p className="text-muted-foreground">Card content</p>
+                    <Button className="themed-button interactive-hover">Click Me</Button>
+                </CardContent>
+            </Card>
+        </div>
+    );
+};
+```
+
+### Form Components
+
+```tsx
+const FormExample = () => {
+    return (
+        <form className="space-y-4">
+            <div>
+                <label className="text-foreground font-medium">Email</label>
+                <input type="email" className="w-full themed-input focus-themed" placeholder="Enter your email" />
+            </div>
+            <Button type="submit" className="themed-button">
+                Submit
+            </Button>
+        </form>
+    );
+};
+```
+
+### Theme Switching
+
+```tsx
+import { useTheme } from '@admin-layout/tailwind-ui';
+
+const ThemeSwitcher = () => {
+    const { theme, mode, toggleMode, setTheme, setMode } = useTheme();
+
+    return (
+        <div className="space-x-2">
+            <Button
+                onClick={() => setTheme('airbnb')}
+                className={theme === 'airbnb' ? 'themed-button' : 'bg-muted text-foreground'}
+            >
+                Airbnb
+            </Button>
+            <Button
+                onClick={() => setTheme('slack')}
+                className={theme === 'slack' ? 'themed-button' : 'bg-muted text-foreground'}
+            >
+                Slack
+            </Button>
+            <Button onClick={toggleDarkMode}>{mode === 'dark' ? 'Light' : 'Dark'} Mode</Button>
+        </div>
+    );
+};
+```
+
+## CSS Custom Properties
+
+The design system uses CSS custom properties for dynamic theming:
+
+### Color Variables
+
+```css
+:root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --radius: 0.5rem;
+}
+```
+
+### Theme-Specific Variables
+
+Each theme has its own set of variables:
+
+```css
+[data-theme='airbnb'] {
+    --primary: 0 100% 60%;
+    --background: 0 0% 100%;
+    /* ... other theme-specific variables */
+}
+```
+
+## Best Practices
+
+### 1. Use Theme-Aware Classes
+
+```tsx
+// ✅ Good - Theme-aware
+<div className="bg-background text-foreground">
+    <Button className="themed-button">Click</Button>
+</div>
+
+// ❌ Avoid - Hardcoded colors
+<div className="bg-white text-black">
+    <Button className="bg-blue-500 text-white">Click</Button>
+</div>
+```
+
+### 2. Leverage Semantic Colors
+
+```tsx
+// ✅ Good - Semantic meaning
+<div className="text-success">Success message</div>
+<div className="text-error">Error message</div>
+
+// ❌ Avoid - Hardcoded colors
+<div className="text-green-500">Success message</div>
+<div className="text-red-500">Error message</div>
+```
+
+### 3. Use Interactive Classes
+
+```tsx
+// ✅ Good - Built-in interactions
+<Button className="themed-button interactive-hover">
+    Hover me
+</Button>
+
+// ❌ Avoid - Custom hover states
+<Button className="themed-button hover:scale-105 hover:shadow-lg">
+    Hover me
+</Button>
+```
+
+### 4. Responsive Design
+
+```tsx
+// ✅ Good - Responsive with theme
+<div className="bg-background p-4 md:p-6 lg:p-8">
+    <Card className="themed-card">
+        <CardContent className="p-4 md:p-6">Content</CardContent>
+    </Card>
+</div>
+```
+
+## Migration Guide
+
+### From Inline Styles to CSS Classes
+
+**Before:**
+
+```tsx
+const { theme, isDarkMode } = useTheme();
+const textColor = isDarkMode ? theme.colors.text.dark.primary : theme.colors.text.light.primary;
+
+<div style={{ color: textColor, backgroundColor: theme.colors.background.light }}>Content</div>;
+```
+
+**After:**
+
+```tsx
+<div className="bg-background text-foreground">Content</div>
+```
+
+### From Custom Components to Theme-Aware Components
+
+**Before:**
+
+```tsx
+<button
+    style={{
+        backgroundColor: theme.components.buttons.primary.background,
+        color: theme.components.buttons.primary.text,
+        borderRadius: theme.components.buttons.primary.borderRadius,
+    }}
+>
+    Button
+</button>
+```
+
+**After:**
+
+```tsx
+<Button className="themed-button">Button</Button>
+```
+
+## Troubleshooting
+
+### Theme Not Applying
+
+1. Ensure CSS is imported: `import '@admin-layout/tailwind-design-pro/src/styles/index.css'`
+2. Check that `ThemeProviderTailwind` wraps your app
+3. Verify theme name is valid: `'default'`, `'airbnb'`, `'slack'`, `'github'`, `'spotify'`
+
+### Dark Mode Not Working
+
+1. Check `navTheme` setting: `'light'` or `'dark'`
+2. Ensure `darkMode: 'class'` in Tailwind config
+3. Verify CSS custom properties are being applied
+
+### Components Not Styled
+
+1. Use theme-aware classes: `themed-button`, `themed-card`, etc.
+2. Import components from `@admin-layout/tailwind-ui`
+3. Check that CSS custom properties are loaded
+
+## Contributing
+
+When contributing to the theme system:
+
+1. **Follow the CSS Custom Properties pattern**
+2. **Use semantic color names**
+3. **Test across all themes**
+4. **Ensure accessibility compliance**
+5. **Update documentation for new features**
+
+## Examples
+
+See the demo applications for complete examples:
+
+-   `packages-modules/demo/tailwind-browser` - Tailwind examples
+-   `packages-modules/demo/chakra-browser` - Chakra UI examples

package/lib/cdm-locales/en/menu.json

@@ -110,6 +110,7 @@
         "dict": "Dict",
         "config": "Config",
         "system_log": "System Log",
-        "login_info": "Login Info"
+        "login_info": "Login Info",
+        "tenant_management": "Tenant Management"
     }
 }

package/lib/cdm-locales/en/settings.json

@@ -5,6 +5,8 @@
     "header": "Header",
     "footer": "Footer",
     "search_bar": "Search Bar",
+    "search_bar_on_scroll": "Show Search Bar on Scroll",
+    "search_bar_overlay": "Show Overlay on Search",
     "menu": "Menu",
     "menu_header": "Menu Header",
     "setting": "Setting",
@@ -15,5 +17,42 @@
     "other_setting": "Other Setting",
     "weak_mode": "Weak Mode",
     "light": "Light",
-    "dark": "Dark"
+    "dark": "Dark",
+    "font_family": "Font Family",
+    "select_theme": "Select Theme",
+    "scroll_threshold": "Searchbar Scroll Threshold",
+    "menu_divider_names": "Menu Divider Names",
+    "upper_menu_divider": "Upper Menu Divider",
+    "middle_menu_divider": "Middle Menu Divider",
+    "lower_menu_divider": "Lower Menu Divider",
+    "header_elements": "Header Elements",
+    "show_logo": "Show Logo",
+    "show_search_slot": "Show Search Slot",
+    "show_right_content": "Show Right Content",
+    "desktop_settings": "Desktop Settings",
+    "mobile_settings": "Mobile Settings",
+    "show_menu_toggle": "Show Menu Toggle",
+    "show_back_button": "Show Back Button",
+    "show_page_title": "Show Page Title",
+    "show_action_buttons": "Show Action Buttons",
+    "show_header": "Show Header",
+    "background_color": "Background Color",
+    "background_type": "Background Type",
+    "background": "Background",
+    "color": "Color",
+    "image": "Image",
+    "video": "Video",
+    "image_url": "Image URL",
+    "video_url": "Video URL",
+    "video_thumbnail": "Video Thumbnail URL",
+    "desktop_background": "Desktop Background",
+    "mobile_background": "Mobile Background",
+    "device_settings": "Device Settings",
+    "desktop_tab": "Desktop",
+    "mobile_tab": "Mobile",
+    "invitation_settings": "Invitation Settings",
+    "show_email_invite": "Show Email Invite",
+    "show_sms_invite": "Show SMS Invite",
+    "show_qr_code_invite": "Show QR Code Invite",
+    "show_invite_link": "Show Invite Link"
 }

package/lib/cdm-locales/es/menu.json

@@ -110,6 +110,7 @@
         "dict": "Diccionario",
         "config": "Configuración",
         "system_log": "Registro del Sistema",
-        "login_info": "Información de Inicio de Sesión"
+        "login_info": "Información de Inicio de Sesión",
+        "tenant_management": "Gestión de Inquilinos"
     }
 }

package/lib/cdm-locales/es/settings.json

@@ -5,15 +5,54 @@
     "header": "Encabezado",
     "footer": "Pie de Página",
     "search_bar": "Barra de Búsqueda",
+    "search_bar_on_scroll": "Mostrar Barra de Búsqueda al Desplazar",
+    "search_bar_overlay": "Mostrar Superposición en Búsqueda",
     "menu": "Menú",
     "menu_header": "Encabezado del Menú",
     "setting": "Configuración",
-    "page_style_settings": "Configuraciones de Estilo de Página",
+    "page_style_settings": "Configuración de Estilo de Página",
     "theme_color": "Color del Tema",
     "navigation_mode": "Modo de Navegación",
-    "regional_rettings": "Configuraciones Regionales",
+    "regional_rettings": "Configuración Regional",
     "other_setting": "Otra Configuración",
     "weak_mode": "Modo Débil",
     "light": "Claro",
-    "dark": "Oscuro"
+    "dark": "Oscuro",
+    "font_family": "Familia de Fuente",
+    "select_theme": "Seleccionar Tema",
+    "scroll_threshold": "Umbral de Desplazamiento de la Barra de Búsqueda",
+    "menu_divider_names": "Nombres de Divisores de Menú",
+    "upper_menu_divider": "Divisor Superior del Menú",
+    "middle_menu_divider": "Divisor Medio del Menú",
+    "lower_menu_divider": "Divisor Inferior del Menú",
+    "header_elements": "Elementos del Encabezado",
+    "show_logo": "Mostrar Logo",
+    "show_search_slot": "Mostrar Espacio de Búsqueda",
+    "show_right_content": "Mostrar Contenido Derecho",
+    "desktop_settings": "Configuración de Escritorio",
+    "mobile_settings": "Configuración Móvil",
+    "show_menu_toggle": "Mostrar Alternador de Menú",
+    "show_back_button": "Mostrar Botón Atrás",
+    "show_page_title": "Mostrar Título de Página",
+    "show_action_buttons": "Mostrar Botones de Acción",
+    "show_header": "Mostrar Encabezado",
+    "background_color": "Color de Fondo",
+    "background_type": "Tipo de Fondo",
+    "background": "Fondo",
+    "color": "Color",
+    "image": "Imagen",
+    "video": "Video",
+    "image_url": "URL de Imagen",
+    "video_url": "URL de Video",
+    "video_thumbnail": "URL de Miniatura de Video",
+    "desktop_background": "Fondo de Escritorio",
+    "mobile_background": "Fondo Móvil",
+    "device_settings": "Configuración de Dispositivo",
+    "desktop_tab": "Escritorio",
+    "mobile_tab": "Móvil",
+    "invitation_settings": "Configuración de Invitaciones",
+    "show_email_invite": "Mostrar Invitación por Correo Electrónico",
+    "show_sms_invite": "Mostrar Invitación por SMS",
+    "show_qr_code_invite": "Mostrar Invitación por Código QR",
+    "show_invite_link": "Mostrar Enlace de Invitación"
 }

package/lib/cdm-locales/index.d.ts

@@ -0,0 +1,2 @@
+export * from '@admin-layout/client/src/graphql/link';
+//# sourceMappingURL=index.d.ts.map

package/lib/cdm-locales/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/cdm-locales/index.ts"],"names":[],"mappings":"AAAA,cAAc,uCAAuC,CAAC"}

package/lib/cdm-locales/index.ts

@@ -0,0 +1 @@
+export * from '@admin-layout/client/src/graphql/link';

package/lib/components/LanguageMenu/LanguageMenu.d.ts

@@ -1,2 +1,3 @@
-export declare const LanguageMenu: () => import("react/jsx-runtime").JSX.Element;
+import React from 'react';
+export declare const LanguageMenu: () => React.JSX.Element;
 //# sourceMappingURL=LanguageMenu.d.ts.map

package/lib/components/LanguageMenu/LanguageMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LanguageMenu.d.ts","sourceRoot":"","sources":["../../../src/components/LanguageMenu/LanguageMenu.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,YAAY,+CA6FxB,CAAC"}
+{"version":3,"file":"LanguageMenu.d.ts","sourceRoot":"","sources":["../../../src/components/LanguageMenu/LanguageMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAQ3D,eAAO,MAAM,YAAY,yBAiFxB,CAAC"}