@admin-layout/tailwind-design-pro 10.0.9-alpha.4 → 10.0.9-alpha.6

package/lib/components/ThemeProvider/types.d.ts

@@ -0,0 +1,112 @@
+export interface ThemeColors {
+    light: {
+        background: string;
+        foreground: string;
+        card: string;
+        cardForeground: string;
+        popover: string;
+        popoverForeground: string;
+        primary: string;
+        primaryForeground: string;
+        secondary: string;
+        secondaryForeground: string;
+        muted: string;
+        mutedForeground: string;
+        accent: string;
+        accentForeground: string;
+        destructive: string;
+        destructiveForeground: string;
+        border: string;
+        input: string;
+        ring: string;
+    };
+    dark: {
+        background: string;
+        foreground: string;
+        card: string;
+        cardForeground: string;
+        popover: string;
+        popoverForeground: string;
+        primary: string;
+        primaryForeground: string;
+        secondary: string;
+        secondaryForeground: string;
+        muted: string;
+        mutedForeground: string;
+        accent: string;
+        accentForeground: string;
+        destructive: string;
+        destructiveForeground: string;
+        border: string;
+        input: string;
+        ring: string;
+    };
+}
+export interface ThemeFontSizes {
+    xs: string;
+    sm: string;
+    base: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    '3xl': string;
+    '4xl': string;
+    '5xl': string;
+}
+export interface ThemeSpacing {
+    px: string;
+    0: string;
+    0.5: string;
+    1: string;
+    1.5: string;
+    2: string;
+    2.5: string;
+    3: string;
+    3.5: string;
+    4: string;
+    5: string;
+    6: string;
+    8: string;
+    10: string;
+    12: string;
+    16: string;
+    20: string;
+    24: string;
+    32: string;
+    40: string;
+    48: string;
+    56: string;
+    64: string;
+}
+export interface ThemeBorderRadius {
+    none: string;
+    sm: string;
+    DEFAULT: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    '3xl': string;
+    full: string;
+}
+export interface Theme {
+    name: string;
+    colors: ThemeColors;
+    fontSizes: ThemeFontSizes;
+    spacing: ThemeSpacing;
+    borderRadius: ThemeBorderRadius;
+}
+export interface ThemeOptions {
+    isDarkMode: boolean;
+    primaryColor?: string;
+    fontFamily?: string;
+}
+export interface ThemeSelectorProps {
+    value: string;
+    onChange: (value: string) => void;
+    options: {
+        key: string;
+        title: string;
+    }[];
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/components/ThemeProvider/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ThemeProvider/types.ts"],"names":[],"mappings":"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"}

package/lib/compute.js

@@ -1,4 +1,5 @@
-import {getFilteredMenus,getFilteredRoutes}from'@common-stack/client-react/lib/utils/filteredRoutes.js';const key = 'root-layout';
+import { getFilteredMenus, getFilteredRoutes } from '@common-stack/client-react/lib/utils/filteredRoutes.js';
+const key = 'root-layout';
 const antUIPage = [{
   key: key,
   name: 'root layout',
@@ -6,17 +7,31 @@ const antUIPage = [{
   auth: 'optional',
   extraPermissions: ['*'],
   exact: false,
-  component: () => import('./components/Layout/ProTailwindLayout.js')
+  componentPath: "@admin-layout/tailwind-design-pro/lib/components/Layout/ProTailwindLayout.js",
+  hasLoader: true,
+  hasClientLoader: true,
+  hasComponent: true,
+  hasLinks: true,
+  hasShouldRevalidate: true,
+  hasHandle: true,
+  loaderReturnInfo: {
+    returnType: "json",
+    hasOptions: false,
+    keys: ["newMenuData", "apolloState"]
+  }
 }, {
   key: 'update-settings-resource',
   hasServerCode: true,
   name: 'UpdateSettingsResource',
   isResourceRoute: true,
   auth: false,
-  component: () => import('./components/UpdateSettingsResource/UpdateSettingsResource.js'),
-  path: '/resources/settings'
+  path: '/resources/settings',
+  componentPath: "@admin-layout/tailwind-design-pro/lib/components/UpdateSettingsResource/UpdateSettingsResource.js",
+  hasLoader: true,
+  hasAction: true
 }];
 // get menus
 getFilteredMenus(antUIPage);
 // get routes
-const filteredRoutes = getFilteredRoutes(antUIPage);export{filteredRoutes};//# sourceMappingURL=compute.js.map
+const filteredRoutes = getFilteredRoutes(antUIPage);
+export { filteredRoutes }; //# sourceMappingURL=compute.js.map

package/lib/routes.json

@@ -0,0 +1,42 @@
+[
+  {
+    "/o/:orgName": {
+      "key": "root-layout",
+      "name": "root layout",
+      "path": "/o/:orgName",
+      "auth": "optional",
+      "extraPermissions": [
+        "*"
+      ],
+      "exact": false,
+      "componentPath": "@admin-layout/tailwind-design-pro/lib/components/Layout/ProTailwindLayout.js",
+      "hasLoader": true,
+      "hasClientLoader": true,
+      "hasComponent": true,
+      "hasLinks": true,
+      "hasShouldRevalidate": true,
+      "hasHandle": true,
+      "loaderReturnInfo": {
+        "returnType": "json",
+        "hasOptions": false,
+        "keys": [
+          "newMenuData",
+          "apolloState"
+        ]
+      }
+    }
+  },
+  {
+    "/resources/settings": {
+      "key": "update-settings-resource",
+      "hasServerCode": true,
+      "name": "UpdateSettingsResource",
+      "isResourceRoute": true,
+      "auth": false,
+      "path": "/resources/settings",
+      "componentPath": "@admin-layout/tailwind-design-pro/lib/components/UpdateSettingsResource/UpdateSettingsResource.js",
+      "hasLoader": true,
+      "hasAction": true
+    }
+  }
+]

package/lib/styles/index.css

@@ -3,49 +3,441 @@
 @tailwind components;
 @tailwind utilities;
 
-@layer base {
-    :root {
-        --background: 0 0% 100%;
-        --foreground: 222.2 84% 4.9%;
-        --card: 0 0% 100%;
-        --card-foreground: 222.2 84% 4.9%;
-        --popover: 0 0% 100%;
-        --popover-foreground: 222.2 84% 4.9%;
-        --primary: 221.2 83.2% 53.3%;
-        --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: 221.2 83.2% 53.3%;
-        --radius: 0.5rem;
-    }
-
-    .dark {
-        --background: 222.2 84% 4.9%;
-        --foreground: 210 40% 98%;
-        --card: 222.2 84% 4.9%;
-        --card-foreground: 210 40% 98%;
-        --popover: 222.2 84% 4.9%;
-        --popover-foreground: 210 40% 98%;
-        --primary: 217.2 91.2% 59.8%;
-        --primary-foreground: 222.2 47.4% 11.2%;
-        --secondary: 217.2 32.6% 17.5%;
-        --secondary-foreground: 210 40% 98%;
-        --muted: 217.2 32.6% 17.5%;
-        --muted-foreground: 215 20.2% 65.1%;
-        --accent: 217.2 32.6% 17.5%;
-        --accent-foreground: 210 40% 98%;
-        --destructive: 0 62.8% 30.6%;
-        --destructive-foreground: 210 40% 98%;
-        --border: 217.2 32.6% 17.5%;
-        --input: 217.2 32.6% 17.5%;
-        --ring: 224.3 76.3% 48%;
-    }
-}
+/* Base theme variables */
+:root {
+    /* Theme colors */
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 221.2 83.2% 53.3%;
+    --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: 221.2 83.2% 53.3%;
+    --radius: 0.5rem;
+    
+    /* Fonts */
+    --font-family: 'Inter', sans-serif;
+    
+    /* Font sizes */
+    --font-size-xs: 0.75rem;
+    --font-size-sm: 0.875rem;
+    --font-size-base: 1rem;
+    --font-size-lg: 1.125rem;
+    --font-size-xl: 1.25rem;
+    --font-size-2xl: 1.5rem;
+    --font-size-3xl: 1.875rem;
+    --font-size-4xl: 2.25rem;
+    --font-size-5xl: 3rem;
+    
+    /* Spacing */
+    --spacing-px: 1px;
+    --spacing-0: 0;
+    --spacing-0_5: 0.125rem;
+    --spacing-1: 0.25rem;
+    --spacing-1_5: 0.375rem;
+    --spacing-2: 0.5rem;
+    --spacing-2_5: 0.625rem;
+    --spacing-3: 0.75rem;
+    --spacing-3_5: 0.875rem;
+    --spacing-4: 1rem;
+    --spacing-5: 1.25rem;
+    --spacing-6: 1.5rem;
+    --spacing-8: 2rem;
+    --spacing-10: 2.5rem;
+    --spacing-12: 3rem;
+    --spacing-16: 4rem;
+    --spacing-20: 5rem;
+    --spacing-24: 6rem;
+    --spacing-32: 8rem;
+    --spacing-40: 10rem;
+    --spacing-48: 12rem;
+    --spacing-56: 14rem;
+    --spacing-64: 16rem;
+    
+    /* Border radius */
+    --radius-none: 0;
+    --radius-sm: 0.125rem;
+    --radius-default: 0.25rem;
+    --radius-md: 0.375rem;
+    --radius-lg: 0.5rem;
+    --radius-xl: 0.75rem;
+    --radius-2xl: 1rem;
+    --radius-3xl: 1.5rem;
+    --radius-full: 9999px;
+  }
+  
+  /* Dark mode theme variables */
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 217.2 91.2% 59.8%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 224.3 76.3% 48%;
+  }
+  
+  /* Theme color utilities */
+  .bg-background {
+    background-color: hsl(var(--background)) !important;
+  }
+  
+  .text-foreground {
+    color: hsl(var(--foreground)) !important;
+  }
+  
+  .bg-card {
+    background-color: hsl(var(--card)) !important;
+  }
+  
+  .text-card-foreground {
+    color: hsl(var(--card-foreground)) !important;
+  }
+  
+  .bg-popover {
+    background-color: hsl(var(--popover)) !important;
+  }
+  
+  .text-popover-foreground {
+    color: hsl(var(--popover-foreground)) !important;
+  }
+  
+  .bg-primary {
+    background-color: hsl(var(--primary)) !important;
+  }
+  
+  .text-primary {
+    color: hsl(var(--primary)) !important;
+  }
+  
+  .border-primary {
+    border-color: hsl(var(--primary)) !important;
+  }
+  
+  .ring-primary {
+    --tw-ring-color: hsl(var(--primary)) !important;
+  }
+  
+  .hover\:bg-primary:hover {
+    background-color: hsl(var(--primary)) !important;
+  }
+  
+  .hover\:text-primary:hover {
+    color: hsl(var(--primary)) !important;
+  }
+  
+  .text-primary-foreground {
+    color: hsl(var(--primary-foreground)) !important;
+  }
+  
+  .bg-secondary {
+    background-color: hsl(var(--secondary)) !important;
+  }
+  
+  .text-secondary {
+    color: hsl(var(--secondary)) !important;
+  }
+  
+  .border-secondary {
+    border-color: hsl(var(--secondary)) !important;
+  }
+  
+  .text-secondary-foreground {
+    color: hsl(var(--secondary-foreground)) !important;
+  }
+  
+  .bg-muted {
+    background-color: hsl(var(--muted)) !important;
+  }
+  
+  .text-muted {
+    color: hsl(var(--muted)) !important;
+  }
+  
+  .text-muted-foreground {
+    color: hsl(var(--muted-foreground)) !important;
+  }
+  
+  .bg-accent {
+    background-color: hsl(var(--accent)) !important;
+  }
+  
+  .text-accent {
+    color: hsl(var(--accent)) !important;
+  }
+  
+  .text-accent-foreground {
+    color: hsl(var(--accent-foreground)) !important;
+  }
+  
+  .bg-destructive {
+    background-color: hsl(var(--destructive)) !important;
+  }
+  
+  .text-destructive {
+    color: hsl(var(--destructive)) !important;
+  }
+  
+  .text-destructive-foreground {
+    color: hsl(var(--destructive-foreground)) !important;
+  }
+  
+  .border-border {
+    border-color: hsl(var(--border)) !important;
+  }
+  
+  .border-input {
+    border-color: hsl(var(--input)) !important;
+  }
+  
+  .focus-ring {
+    outline: 2px solid hsl(var(--ring));
+    outline-offset: 2px;
+  }
+  
+  /* Font family utility */
+  .font-sans {
+    font-family: var(--font-family) !important;
+  }
+  
+  /* Border radius utilities */
+  .rounded-none {
+    border-radius: var(--radius-none) !important;
+  }
+  
+  .rounded-sm {
+    border-radius: var(--radius-sm) !important;
+  }
+  
+  .rounded {
+    border-radius: var(--radius-default) !important;
+  }
+  
+  .rounded-md {
+    border-radius: var(--radius-md) !important;
+  }
+  
+  .rounded-lg {
+    border-radius: var(--radius-lg) !important;
+  }
+  
+  .rounded-xl {
+    border-radius: var(--radius-xl) !important;
+  }
+  
+  .rounded-2xl {
+    border-radius: var(--radius-2xl) !important;
+  }
+  
+  .rounded-3xl {
+    border-radius: var(--radius-3xl) !important;
+  }
+  
+  .rounded-full {
+    border-radius: var(--radius-full) !important;
+  }
+  
+  /* Font size utilities */
+  .text-xs {
+    font-size: var(--font-size-xs) !important;
+  }
+  
+  .text-sm {
+    font-size: var(--font-size-sm) !important;
+  }
+  
+  .text-base {
+    font-size: var(--font-size-base) !important;
+  }
+  
+  .text-lg {
+    font-size: var(--font-size-lg) !important;
+  }
+  
+  .text-xl {
+    font-size: var(--font-size-xl) !important;
+  }
+  
+  .text-2xl {
+    font-size: var(--font-size-2xl) !important;
+  }
+  
+  .text-3xl {
+    font-size: var(--font-size-3xl) !important;
+  }
+  
+  .text-4xl {
+    font-size: var(--font-size-4xl) !important;
+  }
+  
+  .text-5xl {
+    font-size: var(--font-size-5xl) !important;
+  }
+  
+  /* Button styles */
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-md);
+    font-weight: 500;
+    transition-property: color, background-color, border-color;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+    padding: 0.5rem 1rem;
+    font-family: var(--font-family);
+  }
+  
+  .btn-primary {
+    background-color: hsl(var(--primary));
+    color: hsl(var(--primary-foreground));
+  }
+  
+  .btn-primary:hover {
+    background-color: hsl(var(--primary) / 0.9);
+  }
+  
+  .btn-secondary {
+    background-color: hsl(var(--secondary));
+    color: hsl(var(--secondary-foreground));
+  }
+  
+  .btn-secondary:hover {
+    background-color: hsl(var(--secondary) / 0.9);
+  }
+  
+  .btn-accent {
+    background-color: hsl(var(--accent));
+    color: hsl(var(--accent-foreground));
+  }
+  
+  .btn-accent:hover {
+    background-color: hsl(var(--accent) / 0.9);
+  }
+  
+  .btn-destructive {
+    background-color: hsl(var(--destructive));
+    color: hsl(var(--destructive-foreground));
+  }
+  
+  .btn-destructive:hover {
+    background-color: hsl(var(--destructive) / 0.9);
+  }
+  
+  .btn-outline {
+    border: 1px solid hsl(var(--input));
+    background-color: transparent;
+    color: hsl(var(--foreground));
+  }
+  
+  .btn-outline:hover {
+    background-color: hsl(var(--accent));
+    color: hsl(var(--accent-foreground));
+  }
+  
+  /* Card styles */
+  .card {
+    background-color: hsl(var(--card));
+    color: hsl(var(--card-foreground));
+    border-radius: var(--radius-lg);
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  }
+  
+  /* Form input styles */
+  .input {
+    display: block;
+    width: 100%;
+    padding: 0.5rem;
+    border-radius: var(--radius-md);
+    border: 1px solid hsl(var(--input));
+    background-color: transparent;
+    color: hsl(var(--foreground));
+    font-family: var(--font-family);
+    font-size: var(--font-size-base);
+  }
+  
+  .input:focus {
+    outline: 2px solid hsl(var(--ring));
+    outline-offset: 2px;
+  }
+  
+  /* Menu and navbar styles */
+  .menu {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    font-family: var(--font-family);
+  }
+  
+  .menu-item {
+    padding: 0.5rem 1rem;
+    border-radius: var(--radius-md);
+    color: hsl(var(--foreground));
+    transition-property: color, background-color;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
+  
+  .menu-item:hover {
+    background-color: hsl(var(--accent));
+    color: hsl(var(--accent-foreground));
+  }
+  
+  .menu-item.active {
+    background-color: hsl(var(--primary));
+    color: hsl(var(--primary-foreground));
+  }
+  
+  /* Navbar styles */
+  .navbar {
+    background-color: hsl(var(--background));
+    border-bottom: 1px solid hsl(var(--border));
+    padding: 0.75rem 1rem;
+    display: flex;
+    align-items: center;
+    font-family: var(--font-family);
+  }
+  
+  /* Sidebar styles */
+  .sidebar {
+    background-color: hsl(var(--card));
+    border-right: 1px solid hsl(var(--border));
+    font-family: var(--font-family);
+  }
+  
+  /* Utility for transitions */
+  .transition-colors {
+    transition-property: color, background-color, border-color;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
+  
+  .transition-all {
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }