npm - @pattern-stack/frontend-patterns - Versions diffs - 0.1.0 → 0.1.2 - Mend

@pattern-stack/frontend-patterns 0.1.0 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (627) hide show

package/src/atoms/shared/styles/color-palettes.css ADDED Viewed

@@ -0,0 +1,566 @@
+/* ==================================================================
+   STRIKING COLOR PALETTES FOR DATA TRUST NAVIGATOR
+   ================================================================== */
+/*
+   Usage: Add one of these palette classes to the <html> or <body> element
+   to override the default color scheme:
+   <html class="palette-ocean-depth">
+   <html class="palette-neon-cyber">
+   <html class="palette-earth-tones">
+   etc.
+*/
+@layer components {
+  /* ==================================================================
+     PALETTE 1: OCEAN DEPTH - Deep blues with vibrant accents
+     ================================================================== */
+  .palette-ocean-depth {
+  /* Base semantic colors */
+  --background: 220 26% 14%;      /* Deep navy background */
+  --foreground: 195 100% 95%;     /* Crisp white-blue */
+  --card: 220 24% 16%;            /* Slightly lighter navy */
+  --card-foreground: 195 100% 95%;
+  --popover: 220 24% 16%;
+  --popover-foreground: 195 100% 95%;
+  --primary: 195 100% 65%;        /* Bright cyan */
+  --primary-foreground: 220 26% 14%;
+  --primary-hover: 195 100% 70%;
+  --primary-active: 195 100% 60%;
+  --primary-disabled: 195 30% 40%;
+  --secondary: 220 20% 25%;       /* Muted blue-gray */
+  --secondary-foreground: 195 80% 85%;
+  --secondary-hover: 220 20% 30%;
+  --secondary-active: 220 20% 20%;
+  --muted: 220 18% 20%;           /* Dark blue-gray */
+  --muted-foreground: 195 40% 70%;
+  --accent: 280 100% 70%;         /* Electric purple accent */
+  --accent-foreground: 220 26% 14%;
+  --destructive: 0 85% 65%;       /* Bright coral red */
+  --destructive-foreground: 220 26% 14%;
+  --destructive-hover: 0 85% 70%;
+  --destructive-active: 0 85% 60%;
+  --border: 220 20% 22%;
+  --input: 220 20% 22%;
+  --ring: 195 100% 65%;
+  /* Data categorization - Ocean inspired */
+  --category-1: 195 100% 65%;     /* Bright cyan */
+  --category-2: 175 70% 55%;      /* Turquoise */
+  --category-3: 25 90% 65%;       /* Coral orange */
+  --category-4: 280 80% 70%;      /* Electric purple */
+  --category-5: 320 75% 65%;      /* Pink coral */
+  --category-6: 160 60% 50%;      /* Sea green */
+  --category-7: 45 100% 70%;      /* Golden sand */
+  --category-8: 340 85% 65%;      /* Sunset pink */
+  /* Status colors - High contrast for depth */
+  --status-success: 160 70% 55%;  /* Sea green */
+  --status-warning: 45 100% 70%;  /* Golden sand */
+  --status-error: 0 85% 65%;      /* Coral red */
+  --status-info: 195 100% 65%;    /* Bright cyan */
+  --status-neutral: 195 30% 60%;  /* Muted blue */
+  /* Surface colors */
+  --surface: 220 24% 16%;
+  --overlay: 220 26% 14% / 0.8;
+  --backdrop: 0 0% 0% / 0.6;
+}
+/* ==================================================================
+   PALETTE 2: NEON CYBER - Vibrant cyberpunk aesthetics
+   ================================================================== */
+.palette-neon-cyber {
+  /* Base semantic colors */
+  --background: 260 15% 8%;       /* Very dark purple */
+  --foreground: 120 100% 95%;     /* Bright green-white */
+  --card: 260 15% 10%;            /* Slightly lighter dark */
+  --card-foreground: 120 100% 95%;
+  --popover: 260 15% 10%;
+  --popover-foreground: 120 100% 95%;
+  --primary: 320 100% 70%;        /* Hot pink/magenta */
+  --primary-foreground: 260 15% 8%;
+  --primary-hover: 320 100% 75%;
+  --primary-active: 320 100% 65%;
+  --primary-disabled: 320 30% 40%;
+  --secondary: 260 20% 18%;       /* Dark purple-gray */
+  --secondary-foreground: 120 80% 85%;
+  --secondary-hover: 260 20% 22%;
+  --secondary-active: 260 20% 15%;
+  --muted: 260 15% 15%;           /* Very dark purple */
+  --muted-foreground: 120 40% 70%;
+  --accent: 180 100% 70%;         /* Electric cyan */
+  --accent-foreground: 260 15% 8%;
+  --destructive: 0 100% 70%;      /* Bright red */
+  --destructive-foreground: 260 15% 8%;
+  --destructive-hover: 0 100% 75%;
+  --destructive-active: 0 100% 65%;
+  --border: 260 20% 20%;
+  --input: 260 20% 20%;
+  --ring: 320 100% 70%;
+  /* Data categorization - Cyberpunk neon */
+  --category-1: 320 100% 70%;     /* Hot pink */
+  --category-2: 180 100% 70%;     /* Electric cyan */
+  --category-3: 120 100% 65%;     /* Neon green */
+  --category-4: 280 100% 75%;     /* Electric purple */
+  --category-5: 60 100% 70%;      /* Electric yellow */
+  --category-6: 200 100% 65%;     /* Sky blue */
+  --category-7: 30 100% 70%;      /* Electric orange */
+  --category-8: 0 100% 70%;       /* Neon red */
+  /* Status colors - Neon bright */
+  --status-success: 120 100% 65%; /* Neon green */
+  --status-warning: 60 100% 70%;  /* Electric yellow */
+  --status-error: 0 100% 70%;     /* Neon red */
+  --status-info: 180 100% 70%;    /* Electric cyan */
+  --status-neutral: 260 40% 60%;  /* Muted purple */
+  /* Surface colors */
+  --surface: 260 15% 10%;
+  --overlay: 260 15% 8% / 0.9;
+  --backdrop: 0 0% 0% / 0.8;
+}
+/* ==================================================================
+   PALETTE 3: EARTH TONES - Warm, organic, professional
+   ================================================================== */
+.palette-earth-tones {
+  /* Base semantic colors */
+  --background: 35 25% 96%;       /* Warm cream */
+  --foreground: 25 30% 15%;       /* Rich brown */
+  --card: 35 40% 98%;             /* Pure warm white */
+  --card-foreground: 25 30% 15%;
+  --popover: 35 40% 98%;
+  --popover-foreground: 25 30% 15%;
+  --primary: 25 70% 45%;          /* Rich terracotta */
+  --primary-foreground: 35 40% 98%;
+  --primary-hover: 25 70% 50%;
+  --primary-active: 25 70% 40%;
+  --primary-disabled: 25 30% 60%;
+  --secondary: 35 20% 88%;        /* Warm light gray */
+  --secondary-foreground: 25 30% 15%;
+  --secondary-hover: 35 20% 85%;
+  --secondary-active: 35 20% 90%;
+  --muted: 35 15% 90%;            /* Soft gray */
+  --muted-foreground: 25 20% 45%;
+  --accent: 200 60% 55%;          /* Sage blue */
+  --accent-foreground: 35 40% 98%;
+  --destructive: 5 75% 55%;       /* Warm red */
+  --destructive-foreground: 35 40% 98%;
+  --destructive-hover: 5 75% 60%;
+  --destructive-active: 5 75% 50%;
+  --border: 35 20% 85%;
+  --input: 35 20% 85%;
+  --ring: 25 70% 45%;
+  /* Data categorization - Natural earth palette */
+  --category-1: 25 70% 45%;       /* Terracotta */
+  --category-2: 160 40% 40%;      /* Forest green */
+  --category-3: 35 80% 55%;       /* Golden amber */
+  --category-4: 280 30% 55%;      /* Sage purple */
+  --category-5: 340 50% 50%;      /* Dusty rose */
+  --category-6: 80 50% 45%;       /* Olive green */
+  --category-7: 45 70% 60%;       /* Warm gold */
+  --category-8: 15 60% 50%;       /* Clay red */
+  /* Status colors - Earthy variants */
+  --status-success: 120 40% 40%;  /* Natural green */
+  --status-warning: 45 70% 55%;   /* Amber */
+  --status-error: 5 65% 50%;      /* Warm red */
+  --status-info: 200 50% 50%;     /* Sage blue */
+  --status-neutral: 35 15% 50%;   /* Warm gray */
+  /* Surface colors */
+  --surface: 35 40% 98%;
+  --overlay: 25 30% 15% / 0.4;
+  --backdrop: 25 20% 20% / 0.3;
+}
+/* Dark mode variant for Earth Tones */
+.palette-earth-tones.dark {
+  --background: 25 20% 12%;       /* Dark brown */
+  --foreground: 35 40% 95%;       /* Warm white */
+  --card: 25 18% 14%;
+  --card-foreground: 35 40% 95%;
+  --popover: 25 18% 14%;
+  --popover-foreground: 35 40% 95%;
+  /* Adjust other colors for dark mode... */
+  --category-1: 25 60% 65%;       /* Lighter terracotta */
+  --category-2: 160 50% 60%;      /* Lighter forest green */
+  --category-3: 35 70% 70%;       /* Lighter amber */
+  --category-4: 280 40% 70%;      /* Lighter sage purple */
+  --category-5: 340 60% 65%;      /* Lighter dusty rose */
+  --category-6: 80 60% 60%;       /* Lighter olive */
+  --category-7: 45 80% 75%;       /* Lighter gold */
+  --category-8: 15 70% 65%;       /* Lighter clay */
+}
+/* ==================================================================
+   PALETTE 4: AURORA BOREALIS - Mystical greens and blues
+   ================================================================== */
+.palette-aurora {
+  /* Base semantic colors */
+  --background: 220 30% 8%;       /* Deep night blue */
+  --foreground: 160 80% 92%;      /* Aurora white-green */
+  --card: 220 25% 10%;
+  --card-foreground: 160 80% 92%;
+  --popover: 220 25% 10%;
+  --popover-foreground: 160 80% 92%;
+  --primary: 160 80% 65%;         /* Aurora green */
+  --primary-foreground: 220 30% 8%;
+  --primary-hover: 160 80% 70%;
+  --primary-active: 160 80% 60%;
+  --primary-disabled: 160 30% 40%;
+  --secondary: 220 20% 20%;       /* Dark blue-gray */
+  --secondary-foreground: 160 60% 85%;
+  --secondary-hover: 220 20% 25%;
+  --secondary-active: 220 20% 15%;
+  --muted: 220 15% 18%;
+  --muted-foreground: 160 40% 70%;
+  --accent: 280 90% 75%;          /* Purple aurora */
+  --accent-foreground: 220 30% 8%;
+  --destructive: 350 85% 65%;     /* Aurora pink-red */
+  --destructive-foreground: 220 30% 8%;
+  --destructive-hover: 350 85% 70%;
+  --destructive-active: 350 85% 60%;
+  --border: 220 20% 22%;
+  --input: 220 20% 22%;
+  --ring: 160 80% 65%;
+  /* Data categorization - Aurora inspired */
+  --category-1: 160 80% 65%;      /* Primary aurora green */
+  --category-2: 180 70% 60%;      /* Cyan aurora */
+  --category-3: 200 85% 70%;      /* Blue aurora */
+  --category-4: 280 85% 75%;      /* Purple aurora */
+  --category-5: 320 80% 70%;      /* Pink aurora */
+  --category-6: 140 70% 55%;      /* Deep green aurora */
+  --category-7: 60 90% 75%;       /* Yellow aurora */
+  --category-8: 350 85% 65%;      /* Red aurora */
+  /* Status colors - Aurora variants */
+  --status-success: 160 80% 65%;  /* Aurora green */
+  --status-warning: 60 90% 75%;   /* Yellow aurora */
+  --status-error: 350 85% 65%;    /* Aurora pink-red */
+  --status-info: 200 85% 70%;     /* Blue aurora */
+  --status-neutral: 220 40% 60%;  /* Muted blue */
+  /* Surface colors */
+  --surface: 220 25% 10%;
+  --overlay: 220 30% 8% / 0.85;
+  --backdrop: 0 0% 0% / 0.7;
+}
+/* ==================================================================
+   PALETTE 5: SUNSET GRADIENT - Warm oranges, pinks, and purples
+   ================================================================== */
+.palette-sunset {
+  /* Base semantic colors */
+  --background: 15 30% 95%;       /* Warm light */
+  --foreground: 280 40% 15%;      /* Deep purple */
+  --card: 15 50% 98%;
+  --card-foreground: 280 40% 15%;
+  --popover: 15 50% 98%;
+  --popover-foreground: 280 40% 15%;
+  --primary: 25 85% 60%;          /* Sunset orange */
+  --primary-foreground: 15 50% 98%;
+  --primary-hover: 25 85% 65%;
+  --primary-active: 25 85% 55%;
+  --primary-disabled: 25 40% 60%;
+  --secondary: 15 25% 88%;        /* Warm light gray */
+  --secondary-foreground: 280 40% 15%;
+  --secondary-hover: 15 25% 85%;
+  --secondary-active: 15 25% 90%;
+  --muted: 15 20% 90%;
+  --muted-foreground: 280 25% 45%;
+  --accent: 320 85% 65%;          /* Sunset pink */
+  --accent-foreground: 15 50% 98%;
+  --destructive: 5 90% 60%;       /* Bright sunset red */
+  --destructive-foreground: 15 50% 98%;
+  --destructive-hover: 5 90% 65%;
+  --destructive-active: 5 90% 55%;
+  --border: 15 25% 85%;
+  --input: 15 25% 85%;
+  --ring: 25 85% 60%;
+  /* Data categorization - Sunset spectrum */
+  --category-1: 25 85% 60%;       /* Sunset orange */
+  --category-2: 340 85% 65%;      /* Sunset pink */
+  --category-3: 320 80% 70%;      /* Magenta sunset */
+  --category-4: 280 85% 65%;      /* Purple sunset */
+  --category-5: 45 90% 65%;       /* Golden sunset */
+  --category-6: 15 80% 55%;       /* Deep orange */
+  --category-7: 60 85% 70%;       /* Yellow sunset */
+  --category-8: 300 80% 65%;      /* Violet sunset */
+  /* Status colors - Sunset themed */
+  --status-success: 120 50% 50%;  /* Balanced green */
+  --status-warning: 45 90% 65%;   /* Golden sunset */
+  --status-error: 5 90% 60%;      /* Sunset red */
+  --status-info: 280 85% 65%;     /* Purple sunset */
+  --status-neutral: 15 25% 50%;   /* Warm gray */
+  /* Surface colors */
+  --surface: 15 50% 98%;
+  --overlay: 280 40% 15% / 0.4;
+  --backdrop: 280 20% 20% / 0.3;
+}
+/* ==================================================================
+   PALETTE 6: MONOCHROME ELITE - Sophisticated grayscale with accent
+   ================================================================== */
+.palette-monochrome {
+  /* Base semantic colors */
+  --background: 0 0% 98%;         /* Pure light gray */
+  --foreground: 0 0% 8%;          /* Deep black */
+  --card: 0 0% 100%;              /* Pure white */
+  --card-foreground: 0 0% 8%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 0 0% 8%;
+  --primary: 240 100% 50%;        /* Pure blue accent */
+  --primary-foreground: 0 0% 100%;
+  --primary-hover: 240 100% 45%;
+  --primary-active: 240 100% 55%;
+  --primary-disabled: 240 30% 60%;
+  --secondary: 0 0% 90%;          /* Light gray */
+  --secondary-foreground: 0 0% 8%;
+  --secondary-hover: 0 0% 85%;
+  --secondary-active: 0 0% 95%;
+  --muted: 0 0% 92%;
+  --muted-foreground: 0 0% 40%;
+  --accent: 240 100% 50%;         /* Blue accent */
+  --accent-foreground: 0 0% 100%;
+  --destructive: 0 100% 50%;      /* Pure red */
+  --destructive-foreground: 0 0% 100%;
+  --destructive-hover: 0 100% 45%;
+  --destructive-active: 0 100% 55%;
+  --border: 0 0% 85%;
+  --input: 0 0% 85%;
+  --ring: 240 100% 50%;
+  /* Data categorization - Sophisticated grays with color accents */
+  --category-1: 240 100% 50%;     /* Blue */
+  --category-2: 0 0% 20%;         /* Dark gray */
+  --category-3: 0 0% 35%;         /* Medium-dark gray */
+  --category-4: 0 0% 50%;         /* Medium gray */
+  --category-5: 0 0% 65%;         /* Medium-light gray */
+  --category-6: 180 100% 40%;     /* Teal accent */
+  --category-7: 60 100% 45%;      /* Yellow accent */
+  --category-8: 300 100% 50%;     /* Magenta accent */
+  /* Status colors - High contrast */
+  --status-success: 120 100% 35%; /* Dark green */
+  --status-warning: 45 100% 45%;  /* Orange */
+  --status-error: 0 100% 50%;     /* Pure red */
+  --status-info: 240 100% 50%;    /* Blue */
+  --status-neutral: 0 0% 50%;     /* Medium gray */
+  /* Surface colors */
+  --surface: 0 0% 100%;
+  --overlay: 0 0% 0% / 0.4;
+  --backdrop: 0 0% 0% / 0.2;
+}
+/* Dark mode for monochrome */
+.palette-monochrome.dark {
+  --background: 0 0% 8%;          /* Deep black */
+  --foreground: 0 0% 95%;         /* Light gray */
+  --card: 0 0% 10%;
+  --card-foreground: 0 0% 95%;
+  --popover: 0 0% 10%;
+  --popover-foreground: 0 0% 95%;
+  /* Invert the grayscale categories */
+  --category-2: 0 0% 80%;         /* Light gray */
+  --category-3: 0 0% 65%;         /* Medium-light gray */
+  --category-4: 0 0% 50%;         /* Medium gray */
+  --category-5: 0 0% 35%;         /* Medium-dark gray */
+  --border: 0 0% 20%;
+  --input: 0 0% 20%;
+  --surface: 0 0% 10%;
+}
+/* ==================================================================
+   PALETTE 7: CORPORATE ELITE - Executive boardroom sophistication
+   ================================================================== */
+.palette-corporate-elite {
+  /* Base semantic colors */
+  --background: 220 15% 97%;      /* Clean light gray */
+  --foreground: 224 25% 12%;      /* Deep navy text */
+  --card: 0 0% 100%;              /* Pure white cards */
+  --card-foreground: 224 25% 12%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 224 25% 12%;
+  --primary: 224 65% 25%;         /* Deep navy blue */
+  --primary-foreground: 0 0% 100%;
+  --primary-hover: 224 65% 20%;
+  --primary-active: 224 65% 30%;
+  --primary-disabled: 224 25% 50%;
+  --secondary: 220 10% 88%;       /* Sophisticated light gray */
+  --secondary-foreground: 224 25% 12%;
+  --secondary-hover: 220 10% 85%;
+  --secondary-active: 220 10% 90%;
+  --muted: 220 8% 92%;            /* Very light warm gray */
+  --muted-foreground: 224 15% 45%;
+  --accent: 45 85% 55%;           /* Sophisticated gold accent */
+  --accent-foreground: 224 25% 12%;
+  --destructive: 0 65% 45%;       /* Professional burgundy */
+  --destructive-foreground: 0 0% 100%;
+  --destructive-hover: 0 65% 40%;
+  --destructive-active: 0 65% 50%;
+  --border: 220 12% 85%;
+  --input: 220 12% 85%;
+  --ring: 224 65% 25%;
+  /* Data categorization - Executive palette */
+  --category-1: 224 65% 25%;      /* Deep navy (primary) */
+  --category-2: 45 85% 45%;       /* Rich gold */
+  --category-3: 160 40% 35%;      /* Forest green */
+  --category-4: 224 25% 35%;      /* Charcoal blue */
+  --category-5: 0 45% 40%;        /* Professional burgundy */
+  --category-6: 200 25% 45%;      /* Steel blue */
+  --category-7: 35 25% 25%;       /* Warm charcoal */
+  --category-8: 280 20% 45%;      /* Sophisticated purple */
+  /* Status colors - Professional variants */
+  --status-success: 160 50% 35%;  /* Rich forest green */
+  --status-warning: 45 85% 50%;   /* Sophisticated gold */
+  --status-error: 0 60% 45%;      /* Professional burgundy */
+  --status-info: 224 65% 25%;     /* Deep navy */
+  --status-neutral: 220 15% 50%;  /* Professional gray */
+  /* Surface colors */
+  --surface: 0 0% 100%;
+  --overlay: 224 25% 12% / 0.4;
+  --backdrop: 224 25% 12% / 0.2;
+}
+/* Dark mode variant for Corporate Elite */
+.palette-corporate-elite.dark {
+  --background: 224 20% 8%;       /* Very dark navy */
+  --foreground: 220 15% 95%;      /* Crisp light gray */
+  --card: 224 18% 10%;            /* Dark navy cards */
+  --card-foreground: 220 15% 95%;
+  --popover: 224 18% 10%;
+  --popover-foreground: 220 15% 95%;
+  --primary: 224 65% 55%;         /* Brighter navy for contrast */
+  --primary-foreground: 224 20% 8%;
+  --primary-hover: 224 65% 60%;
+  --primary-active: 224 65% 50%;
+  --secondary: 224 15% 18%;       /* Dark blue-gray */
+  --secondary-foreground: 220 15% 95%;
+  --secondary-hover: 224 15% 22%;
+  --secondary-active: 224 15% 15%;
+  --muted: 224 12% 15%;
+  --muted-foreground: 220 10% 70%;
+  --accent: 45 85% 65%;           /* Brighter gold for dark mode */
+  --accent-foreground: 224 20% 8%;
+  --destructive: 0 65% 60%;       /* Brighter burgundy */
+  --destructive-foreground: 224 20% 8%;
+  /* Adjusted category colors for dark mode */
+  --category-1: 224 65% 55%;      /* Brighter navy */
+  --category-2: 45 85% 60%;       /* Brighter gold */
+  --category-3: 160 50% 50%;      /* Brighter forest green */
+  --category-4: 224 35% 55%;      /* Brighter charcoal blue */
+  --category-5: 0 55% 55%;        /* Brighter burgundy */
+  --category-6: 200 35% 60%;      /* Brighter steel blue */
+  --category-7: 35 35% 65%;       /* Brighter warm gray */
+  --category-8: 280 30% 65%;      /* Brighter sophisticated purple */
+  --border: 224 15% 20%;
+  --input: 224 15% 20%;
+  --surface: 224 18% 10%;
+}
+/* ==================================================================
+   PALETTE APPLICATION UTILITIES
+   ================================================================== */
+/* Very fast transitions for all theme changes */
+* {
+  transition:
+    background-color 0.025s ease,
+    color 0.025s ease,
+    border-color 0.025s ease,
+    box-shadow 0.025s ease;
+}
+/* Dark mode is handled by the main application via document.documentElement.classList */
+/* Helper classes for palette preview */
+.palette-preview {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  gap: 0.5rem;
+  padding: 1rem;
+  border-radius: 0.5rem;
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--border));
+}
+.palette-swatch {
+  aspect-ratio: 1;
+  border-radius: 0.25rem;
+  border: 1px solid hsl(var(--border) / 0.2);
+}
+/* Usage example in component:
+<div className="palette-preview">
+  <div className="palette-swatch bg-category-1"></div>
+  <div className="palette-swatch bg-category-2"></div>
+  <!-- ... etc for all 8 categories -->
+</div>
+*/
+}

package/src/atoms/types/auth.ts ADDED Viewed

@@ -0,0 +1,62 @@
+export interface BaseUser {
+  id: string;
+  email: string;
+  username?: string;
+}
+export interface AuthEndpoints {
+  login: string;
+  register?: string;
+  refresh: string;
+  me: string;
+  logout?: string;
+}
+export interface AuthConfig {
+  apiUrl: string;
+  endpoints: AuthEndpoints;
+  tokenStorage?: 'localStorage' | 'sessionStorage' | 'cookie';
+  tokenRefreshBuffer?: number; // minutes before expiry to refresh
+  autoRefresh?: boolean;
+  permissions?: {
+    enabled: boolean;
+    adminRoles?: string[];
+    userRoles?: string[];
+  };
+}
+export interface LoginCredentials {
+  email: string;
+  password: string;
+}
+export interface LoginResponse<T extends BaseUser = BaseUser> {
+  token: string;
+  refreshToken?: string;
+  user: T;
+  expiresIn?: number;
+}
+export interface RefreshResponse {
+  token: string;
+  refreshToken?: string;
+  expiresIn?: number;
+}
+export interface AuthContextType<T extends BaseUser = BaseUser> {
+  user: T | null;
+  isAuthenticated: boolean;
+  isLoading: boolean;
+  permissions?: string[];
+  login: (credentials: LoginCredentials) => Promise<void>;
+  logout: () => void;
+  refreshToken: () => Promise<void>;
+  hasPermission: (permission: string) => boolean;
+  hasRole: (role: string) => boolean;
+}
+export interface TokenData {
+  token: string;
+  refreshToken?: string;
+  expiresAt?: number;
+}