@create-lft-app/nextjs 3.2.0 → 3.3.0

package/template/src/app/globals.css

@@ -1,249 +1,249 @@
-@import "tailwindcss";
-@import "tw-animate-css";
-
-@custom-variant dark (&:is(.dark *));
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar: var(--sidebar);
-  --color-chart-5: var(--chart-5);
-  --color-chart-4: var(--chart-4);
-  --color-chart-3: var(--chart-3);
-  --color-chart-2: var(--chart-2);
-  --color-chart-1: var(--chart-1);
-  --color-ring: var(--ring);
-  --color-input: var(--input);
-  --color-border: var(--border);
-  --color-destructive: var(--destructive);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-accent: var(--accent);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-muted: var(--muted);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-secondary: var(--secondary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-primary: var(--primary);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-popover: var(--popover);
-  --color-card-foreground: var(--card-foreground);
-  --color-card: var(--card);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --radius-2xl: calc(var(--radius) + 8px);
-  --radius-3xl: calc(var(--radius) + 12px);
-  --radius-4xl: calc(var(--radius) + 16px);
-}
-
-/* ========================================
-   MIDDAY DESIGN SYSTEM - Color Palette
-   ======================================== */
-
-:root {
-  --radius: 0.5rem;
-
-  /* Midday Dark Theme - Pure blacks (DEFAULT) */
-  --background: hsl(0 0% 5%);
-  --foreground: hsl(0 0% 98%);
-
-  --card: hsl(0 0% 7%);
-  --card-foreground: hsl(0 0% 98%);
-
-  --popover: hsl(0 0% 4%);
-  --popover-foreground: hsl(0 0% 98%);
-
-  --primary: hsl(0 0% 98%);
-  --primary-foreground: hsl(0 0% 9%);
-
-  --secondary: hsl(0 0% 11%);
-  --secondary-foreground: hsl(0 0% 98%);
-
-  --muted: hsl(0 0% 11%);
-  --muted-foreground: hsl(0 0% 64%);
-
-  --accent: hsl(0 0% 11%);
-  --accent-foreground: hsl(0 0% 98%);
-
-  --destructive: hsl(0 63% 31%);
-  --destructive-foreground: hsl(0 0% 98%);
-
-  --border: hsl(0 0% 11%);
-  --input: hsl(0 0% 15%);
-  --ring: hsl(0 0% 83%);
-
-  /* Chart colors dark */
-  --chart-1: hsl(220 70% 50%);
-  --chart-2: hsl(160 60% 45%);
-  --chart-3: hsl(30 80% 55%);
-  --chart-4: hsl(280 65% 60%);
-  --chart-5: hsl(340 75% 55%);
-
-  /* Sidebar dark */
-  --sidebar: hsl(0 0% 7%);
-  --sidebar-foreground: hsl(0 0% 98%);
-  --sidebar-primary: hsl(0 0% 98%);
-  --sidebar-primary-foreground: hsl(0 0% 9%);
-  --sidebar-accent: hsl(0 0% 11%);
-  --sidebar-accent-foreground: hsl(0 0% 98%);
-  --sidebar-border: hsl(0 0% 11%);
-  --sidebar-ring: hsl(0 0% 83%);
-}
-
-.light {
-  /* Midday Light Theme - Warm beige/neutral palette */
-  --background: hsl(0 0% 100%);
-  --foreground: hsl(0 0% 7%);
-
-  --card: hsl(45 18% 96%);
-  --card-foreground: hsl(0 0% 4%);
-
-  --popover: hsl(0 0% 100%);
-  --popover-foreground: hsl(0 0% 4%);
-
-  --primary: hsl(240 6% 10%);
-  --primary-foreground: hsl(0 0% 98%);
-
-  --secondary: hsl(40 11% 89%);
-  --secondary-foreground: hsl(0 0% 9%);
-
-  --muted: hsl(40 11% 89%);
-  --muted-foreground: hsl(0 0% 38%);
-
-  --accent: hsl(40 10% 94%);
-  --accent-foreground: hsl(0 0% 9%);
-
-  --destructive: hsl(0 84% 60%);
-  --destructive-foreground: hsl(0 0% 98%);
-
-  --border: hsl(45 5% 85%);
-  --input: hsl(0 0% 90%);
-  --ring: hsl(0 0% 4%);
-
-  /* Chart colors */
-  --chart-1: hsl(12 76% 61%);
-  --chart-2: hsl(173 58% 39%);
-  --chart-3: hsl(197 37% 24%);
-  --chart-4: hsl(43 74% 66%);
-  --chart-5: hsl(27 87% 67%);
-
-  /* Sidebar - Midday style */
-  --sidebar: hsl(0 0% 99%);
-  --sidebar-foreground: hsl(0 0% 7%);
-  --sidebar-primary: hsl(240 6% 10%);
-  --sidebar-primary-foreground: hsl(0 0% 98%);
-  --sidebar-accent: hsl(40 10% 97%);
-  --sidebar-accent-foreground: hsl(0 0% 9%);
-  --sidebar-border: hsl(45 5% 85%);
-  --sidebar-ring: hsl(0 0% 4%);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
-
-/* ========================================
-   MIDDAY UTILITIES
-   ======================================== */
-
-/* Scrollbar hide utility */
-.scrollbar-hide {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-.scrollbar-hide::-webkit-scrollbar {
-  display: none;
-}
-
-/* ========================================
-   MIDDAY ANIMATIONS
-   ======================================== */
-
-@keyframes shimmer {
-  0% {
-    transform: translateX(-100%);
-  }
-  100% {
-    transform: translateX(100%);
-  }
-}
-
-@keyframes accordion-down {
-  from {
-    height: 0;
-  }
-  to {
-    height: var(--radix-accordion-content-height);
-  }
-}
-
-@keyframes accordion-up {
-  from {
-    height: var(--radix-accordion-content-height);
-  }
-  to {
-    height: 0;
-  }
-}
-
-@keyframes dialog-overlay-show {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes dialog-content-show {
-  from {
-    opacity: 0;
-    transform: translate(-50%, -50%) scale(0.97);
-  }
-  to {
-    opacity: 1;
-    transform: translate(-50%, -50%) scale(1);
-  }
-}
-
-@keyframes caret-blink {
-  0%, 70%, 100% {
-    opacity: 1;
-  }
-  20%, 50% {
-    opacity: 0;
-  }
-}
-
-/* Loading ellipsis animation */
-@keyframes loading-ellipsis {
-  0% { content: ''; }
-  25% { content: '.'; }
-  50% { content: '..'; }
-  75% { content: '...'; }
-}
-
-.loading-ellipsis::after {
-  content: '';
-  animation: loading-ellipsis 1.5s infinite;
-}
-
-/* Animate shimmer class */
-.animate-shimmer {
-  animation: shimmer 2.5s linear infinite;
-}
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+}
+
+/* ========================================
+   MIDDAY DESIGN SYSTEM - Color Palette
+   ======================================== */
+
+:root {
+  --radius: 0.5rem;
+
+  /* Midday Dark Theme - Pure blacks (DEFAULT) */
+  --background: hsl(0 0% 5%);
+  --foreground: hsl(0 0% 98%);
+
+  --card: hsl(0 0% 7%);
+  --card-foreground: hsl(0 0% 98%);
+
+  --popover: hsl(0 0% 4%);
+  --popover-foreground: hsl(0 0% 98%);
+
+  --primary: hsl(0 0% 98%);
+  --primary-foreground: hsl(0 0% 9%);
+
+  --secondary: hsl(0 0% 11%);
+  --secondary-foreground: hsl(0 0% 98%);
+
+  --muted: hsl(0 0% 11%);
+  --muted-foreground: hsl(0 0% 64%);
+
+  --accent: hsl(0 0% 11%);
+  --accent-foreground: hsl(0 0% 98%);
+
+  --destructive: hsl(0 63% 31%);
+  --destructive-foreground: hsl(0 0% 98%);
+
+  --border: hsl(0 0% 11%);
+  --input: hsl(0 0% 15%);
+  --ring: hsl(0 0% 83%);
+
+  /* Chart colors dark */
+  --chart-1: hsl(220 70% 50%);
+  --chart-2: hsl(160 60% 45%);
+  --chart-3: hsl(30 80% 55%);
+  --chart-4: hsl(280 65% 60%);
+  --chart-5: hsl(340 75% 55%);
+
+  /* Sidebar dark */
+  --sidebar: hsl(0 0% 7%);
+  --sidebar-foreground: hsl(0 0% 98%);
+  --sidebar-primary: hsl(0 0% 98%);
+  --sidebar-primary-foreground: hsl(0 0% 9%);
+  --sidebar-accent: hsl(0 0% 11%);
+  --sidebar-accent-foreground: hsl(0 0% 98%);
+  --sidebar-border: hsl(0 0% 11%);
+  --sidebar-ring: hsl(0 0% 83%);
+}
+
+.light {
+  /* Midday Light Theme - Warm beige/neutral palette */
+  --background: hsl(0 0% 100%);
+  --foreground: hsl(0 0% 7%);
+
+  --card: hsl(45 18% 96%);
+  --card-foreground: hsl(0 0% 4%);
+
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(0 0% 4%);
+
+  --primary: hsl(240 6% 10%);
+  --primary-foreground: hsl(0 0% 98%);
+
+  --secondary: hsl(40 11% 89%);
+  --secondary-foreground: hsl(0 0% 9%);
+
+  --muted: hsl(40 11% 89%);
+  --muted-foreground: hsl(0 0% 38%);
+
+  --accent: hsl(40 10% 94%);
+  --accent-foreground: hsl(0 0% 9%);
+
+  --destructive: hsl(0 84% 60%);
+  --destructive-foreground: hsl(0 0% 98%);
+
+  --border: hsl(45 5% 85%);
+  --input: hsl(0 0% 90%);
+  --ring: hsl(0 0% 4%);
+
+  /* Chart colors */
+  --chart-1: hsl(12 76% 61%);
+  --chart-2: hsl(173 58% 39%);
+  --chart-3: hsl(197 37% 24%);
+  --chart-4: hsl(43 74% 66%);
+  --chart-5: hsl(27 87% 67%);
+
+  /* Sidebar - Midday style */
+  --sidebar: hsl(0 0% 99%);
+  --sidebar-foreground: hsl(0 0% 7%);
+  --sidebar-primary: hsl(240 6% 10%);
+  --sidebar-primary-foreground: hsl(0 0% 98%);
+  --sidebar-accent: hsl(40 10% 97%);
+  --sidebar-accent-foreground: hsl(0 0% 9%);
+  --sidebar-border: hsl(45 5% 85%);
+  --sidebar-ring: hsl(0 0% 4%);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* ========================================
+   MIDDAY UTILITIES
+   ======================================== */
+
+/* Scrollbar hide utility */
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+
+/* ========================================
+   MIDDAY ANIMATIONS
+   ======================================== */
+
+@keyframes shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes accordion-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+
+@keyframes accordion-up {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+
+@keyframes dialog-overlay-show {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes dialog-content-show {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+@keyframes caret-blink {
+  0%, 70%, 100% {
+    opacity: 1;
+  }
+  20%, 50% {
+    opacity: 0;
+  }
+}
+
+/* Loading ellipsis animation */
+@keyframes loading-ellipsis {
+  0% { content: ''; }
+  25% { content: '.'; }
+  50% { content: '..'; }
+  75% { content: '...'; }
+}
+
+.loading-ellipsis::after {
+  content: '';
+  animation: loading-ellipsis 1.5s infinite;
+}
+
+/* Animate shimmer class */
+.animate-shimmer {
+  animation: shimmer 2.5s linear infinite;
+}

package/template/src/app/layout.tsx

@@ -1,37 +1,37 @@
-import type { Metadata } from "next"
-import { Inter } from "next/font/google"
-import "./globals.css"
-import { Providers } from "./providers"
-import { SidebarProvider } from "@/components/layout/sidebar-context"
-import { Sidebar } from "@/components/layout/sidebar"
-import { MainContent } from "@/components/layout/main-content"
-
-const inter = Inter({ subsets: ["latin"] })
-
-export const metadata: Metadata = {
-  title: "Dashboard - LFT App",
-  description: "Panel de administración creado con create-lft-app",
-}
-
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
-  return (
-    <html lang="es" suppressHydrationWarning>
-      <body className={`${inter.className} font-sans antialiased`}>
-        <Providers>
-          <SidebarProvider>
-            <div className="min-h-screen bg-background flex">
-              <Sidebar />
-              <MainContent>
-                {children}
-              </MainContent>
-            </div>
-          </SidebarProvider>
-        </Providers>
-      </body>
-    </html>
-  )
-}
+import type { Metadata } from "next"
+import { Inter } from "next/font/google"
+import "./globals.css"
+import { Providers } from "./providers"
+import { SidebarProvider } from "@/components/layout/sidebar-context"
+import { Sidebar } from "@/components/layout/sidebar"
+import { MainContent } from "@/components/layout/main-content"
+
+const inter = Inter({ subsets: ["latin"] })
+
+export const metadata: Metadata = {
+  title: "Dashboard - LFT App",
+  description: "Panel de administración creado con create-lft-app",
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="es" suppressHydrationWarning>
+      <body className={`${inter.className} font-sans antialiased`}>
+        <Providers>
+          <SidebarProvider>
+            <div className="min-h-screen bg-background flex">
+              <Sidebar />
+              <MainContent>
+                {children}
+              </MainContent>
+            </div>
+          </SidebarProvider>
+        </Providers>
+      </body>
+    </html>
+  )
+}

package/template/src/app/page.tsx

@@ -1,5 +1,5 @@
-import { redirect } from "next/navigation"
-
-export default function Home() {
-  redirect("/dashboard")
-}
+import { redirect } from "next/navigation"
+
+export default function Home() {
+  redirect("/dashboard")
+}

package/template/src/app/providers.tsx

@@ -1,27 +1,27 @@
-'use client'
-
-import { useState } from 'react'
-import { QueryClientProvider } from '@tanstack/react-query'
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
-import { ThemeProvider } from 'next-themes'
-import { Toaster } from 'sonner'
-import { getQueryClient } from '@/lib/query-client'
-
-export function Providers({ children }: { children: React.ReactNode }) {
-  const [queryClient] = useState(() => getQueryClient())
-
-  return (
-    <QueryClientProvider client={queryClient}>
-      <ThemeProvider
-        attribute="class"
-        defaultTheme="system"
-        enableSystem
-        disableTransitionOnChange
-      >
-        {children}
-        <Toaster richColors position="top-right" />
-      </ThemeProvider>
-      <ReactQueryDevtools initialIsOpen={false} />
-    </QueryClientProvider>
-  )
-}
+'use client'
+
+import { useState } from 'react'
+import { QueryClientProvider } from '@tanstack/react-query'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+import { ThemeProvider } from 'next-themes'
+import { Toaster } from 'sonner'
+import { getQueryClient } from '@/lib/query-client'
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  const [queryClient] = useState(() => getQueryClient())
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <ThemeProvider
+        attribute="class"
+        defaultTheme="system"
+        enableSystem
+        disableTransitionOnChange
+      >
+        {children}
+        <Toaster richColors position="top-right" />
+      </ThemeProvider>
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
+  )
+}