@wakastellar/ui 2.3.2 → 2.3.5

package/dist/types/index.d.ts

@@ -0,0 +1 @@
+export type { LinkComponentProps } from './link';

package/dist/types/link.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+/**
+ * Props du composant de lien personnalisé pour navigation SPA
+ * Permet d'injecter next/link ou tout autre composant de routing
+ *
+ * @example
+ * ```tsx
+ * import Link from 'next/link'
+ * import type { LinkComponentProps } from '@wakastellar/ui'
+ *
+ * const NextLink = ({ href, className, onClick, children }: LinkComponentProps) => (
+ *   <Link href={href} className={className} onClick={onClick}>
+ *     {children}
+ *   </Link>
+ * )
+ * ```
+ */
+export interface LinkComponentProps {
+    href: string;
+    className?: string;
+    onClick?: (e: React.MouseEvent) => void;
+    children: React.ReactNode;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wakastellar/ui",
-  "version": "2.3.2",
+  "version": "2.3.5",
   "description": "Zero-config UI Library for Next.js with TweakCN theming and i18n support",
   "keywords": [
     "ui",

package/src/blocks/dashboard/index.tsx

@@ -2,6 +2,7 @@
 
 import * as React from "react"
 import { cn } from "../../utils"
+import type { LinkComponentProps } from "../../types/link"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../../components/card"
 import { Button } from "../../components/button"
 import { Badge } from "../../components/badge"
@@ -119,6 +120,22 @@ export interface WakaDashboardProps {
   statsColumns?: 2 | 3 | 4
   /** Classes CSS additionnelles */
   className?: string
+  /** Composant de lien personnalisé (ex: next/link) pour navigation SPA */
+  LinkComponent?: React.ComponentType<LinkComponentProps>
+}
+
+// ============================================
+// CONTEXT
+// ============================================
+
+interface DashboardContextValue {
+  LinkComponent?: React.ComponentType<LinkComponentProps>
+}
+
+const DashboardContext = React.createContext<DashboardContextValue>({})
+
+function useDashboardContext() {
+  return React.useContext(DashboardContext)
 }
 
 // ============================================
@@ -196,27 +213,37 @@ function DashboardHeader({
         )}
 
         {/* Actions rapides */}
-        {quickActions?.map((action) => (
-          <Button
-            key={action.id}
-            variant={action.variant || "default"}
-            size="sm"
-            onClick={action.onClick}
-            asChild={!!action.href}
-          >
-            {action.href ? (
-              <a href={action.href}>
-                {action.icon && <span className="mr-2">{action.icon}</span>}
-                {action.label}
-              </a>
-            ) : (
-              <>
-                {action.icon && <span className="mr-2">{action.icon}</span>}
-                {action.label}
-              </>
-            )}
-          </Button>
-        ))}
+        {quickActions?.map((action) => {
+          const { LinkComponent } = useDashboardContext()
+          return (
+            <Button
+              key={action.id}
+              variant={action.variant || "default"}
+              size="sm"
+              onClick={action.onClick}
+              asChild={!!action.href}
+            >
+              {action.href ? (
+                LinkComponent ? (
+                  <LinkComponent href={action.href}>
+                    {action.icon && <span className="mr-2">{action.icon}</span>}
+                    {action.label}
+                  </LinkComponent>
+                ) : (
+                  <a href={action.href}>
+                    {action.icon && <span className="mr-2">{action.icon}</span>}
+                    {action.label}
+                  </a>
+                )
+              ) : (
+                <>
+                  {action.icon && <span className="mr-2">{action.icon}</span>}
+                  {action.label}
+                </>
+              )}
+            </Button>
+          )
+        })}
       </div>
     </div>
   )
@@ -296,6 +323,8 @@ interface DashboardTableCardProps {
 }
 
 function DashboardTableCard({ config }: DashboardTableCardProps) {
+  const { LinkComponent } = useDashboardContext()
+
   return (
     <Card>
       <CardHeader className="flex flex-row items-center justify-between pb-2">
@@ -316,10 +345,17 @@ function DashboardTableCard({ config }: DashboardTableCardProps) {
                 asChild={!!action.href}
               >
                 {action.href ? (
-                  <a href={action.href}>
-                    {action.label}
-                    <ArrowUpRight className="ml-1 h-3 w-3" />
-                  </a>
+                  LinkComponent ? (
+                    <LinkComponent href={action.href}>
+                      {action.label}
+                      <ArrowUpRight className="ml-1 h-3 w-3" />
+                    </LinkComponent>
+                  ) : (
+                    <a href={action.href}>
+                      {action.label}
+                      <ArrowUpRight className="ml-1 h-3 w-3" />
+                    </a>
+                  )
                 ) : (
                   action.label
                 )}
@@ -415,9 +451,13 @@ export function WakaDashboard({
   statsLayout = "grid",
   statsColumns = 4,
   className,
+  LinkComponent,
 }: WakaDashboardProps) {
+  const contextValue = React.useMemo(() => ({ LinkComponent }), [LinkComponent])
+
   return (
-    <div className={cn("space-y-6", className)}>
+    <DashboardContext.Provider value={contextValue}>
+      <div className={cn("space-y-6", className)}>
       {/* Header */}
       {showHeader && (
         <DashboardHeader
@@ -469,7 +509,8 @@ export function WakaDashboard({
           </div>
         )}
       </div>
-    </div>
+      </div>
+    </DashboardContext.Provider>
   )
 }
 

package/src/blocks/empty-states/index.tsx

@@ -2,6 +2,7 @@
 
 import * as React from "react"
 import { cn } from "../../utils"
+import type { LinkComponentProps } from "../../types/link"
 import { Button } from "../../components/button"
 import {
   FileQuestion,
@@ -78,6 +79,8 @@ export interface WakaEmptyStateProps {
   children?: React.ReactNode
   /** Classes CSS additionnelles */
   className?: string
+  /** Composant de lien personnalisé (ex: next/link) pour navigation SPA */
+  LinkComponent?: React.ComponentType<LinkComponentProps>
 }
 
 // ============================================
@@ -238,6 +241,7 @@ export function WakaEmptyState({
   centered = true,
   children,
   className,
+  LinkComponent,
 }: WakaEmptyStateProps) {
   const config = emptyStateConfigs[type]
   const displayTitle = title ?? config.title
@@ -325,10 +329,17 @@ export function WakaEmptyState({
                   asChild={!!action.href}
                 >
                   {action.href ? (
-                    <a href={action.href}>
-                      {action.icon && <span className="mr-2">{action.icon}</span>}
-                      {action.label}
-                    </a>
+                    LinkComponent ? (
+                      <LinkComponent href={action.href}>
+                        {action.icon && <span className="mr-2">{action.icon}</span>}
+                        {action.label}
+                      </LinkComponent>
+                    ) : (
+                      <a href={action.href}>
+                        {action.icon && <span className="mr-2">{action.icon}</span>}
+                        {action.label}
+                      </a>
+                    )
                   ) : (
                     <>
                       {action.icon && <span className="mr-2">{action.icon}</span>}
@@ -399,10 +410,17 @@ export function WakaEmptyState({
               asChild={!!action.href}
             >
               {action.href ? (
-                <a href={action.href}>
-                  {action.icon && <span className="mr-2">{action.icon}</span>}
-                  {action.label}
-                </a>
+                LinkComponent ? (
+                  <LinkComponent href={action.href}>
+                    {action.icon && <span className="mr-2">{action.icon}</span>}
+                    {action.label}
+                  </LinkComponent>
+                ) : (
+                  <a href={action.href}>
+                    {action.icon && <span className="mr-2">{action.icon}</span>}
+                    {action.label}
+                  </a>
+                )
               ) : (
                 <>
                   {action.icon && <span className="mr-2">{action.icon}</span>}

package/src/blocks/error-pages/index.tsx

@@ -2,6 +2,7 @@
 
 import * as React from "react"
 import { cn } from "../../utils"
+import type { LinkComponentProps } from "../../types/link"
 import { Button } from "../../components/button"
 import {
   Home,
@@ -65,6 +66,8 @@ export interface WakaErrorPageProps {
   size?: "sm" | "md" | "lg"
   /** Classes CSS additionnelles */
   className?: string
+  /** Composant de lien personnalisé (ex: next/link) pour navigation SPA */
+  LinkComponent?: React.ComponentType<LinkComponentProps>
 }
 
 // ============================================
@@ -186,6 +189,7 @@ export function WakaErrorPage({
   layout = "centered",
   size = "md",
   className,
+  LinkComponent,
 }: WakaErrorPageProps) {
   const config = errorConfigs[type]
   const displayCode = code ?? config.code
@@ -297,10 +301,17 @@ export function WakaErrorPage({
               asChild={!!action.href}
             >
               {action.href ? (
-                <a href={action.href}>
-                  {action.icon && <span className="mr-2">{action.icon}</span>}
-                  {action.label}
-                </a>
+                LinkComponent ? (
+                  <LinkComponent href={action.href}>
+                    {action.icon && <span className="mr-2">{action.icon}</span>}
+                    {action.label}
+                  </LinkComponent>
+                ) : (
+                  <a href={action.href}>
+                    {action.icon && <span className="mr-2">{action.icon}</span>}
+                    {action.label}
+                  </a>
+                )
               ) : (
                 <>
                   {action.icon && <span className="mr-2">{action.icon}</span>}
@@ -359,10 +370,17 @@ export function WakaErrorPage({
                     asChild={!!action.href}
                   >
                     {action.href ? (
-                      <a href={action.href}>
-                        {action.icon && <span className="mr-2">{action.icon}</span>}
-                        {action.label}
-                      </a>
+                      LinkComponent ? (
+                        <LinkComponent href={action.href}>
+                          {action.icon && <span className="mr-2">{action.icon}</span>}
+                          {action.label}
+                        </LinkComponent>
+                      ) : (
+                        <a href={action.href}>
+                          {action.icon && <span className="mr-2">{action.icon}</span>}
+                          {action.label}
+                        </a>
+                      )
                     ) : (
                       <>
                         {action.icon && <span className="mr-2">{action.icon}</span>}

package/src/blocks/index.ts

@@ -23,7 +23,7 @@ export type { LoginProps, LoginConfig, LoginColorConfig, LoginThemeConfig, Login
 
 // Sidebar
 export { WakaSidebar, useSidebar, SidebarLayout } from './sidebar'
-export type { WakaSidebarProps, SidebarMenuItem, SidebarUserConfig, SidebarLogoConfig, SidebarLayoutProps } from './sidebar'
+export type { WakaSidebarProps, SidebarMenuItem, SidebarUserConfig, SidebarLogoConfig, SidebarLayoutProps, LinkComponentProps } from './sidebar'
 
 // Header
 export { WakaHeader } from './header'

package/src/blocks/landing/index.tsx

@@ -2,6 +2,7 @@
 
 import * as React from "react"
 import { cn } from "../../utils"
+import type { LinkComponentProps } from "../../types/link"
 import { Button } from "../../components/button"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../../components/card"
 import { Badge } from "../../components/badge"
@@ -117,6 +118,22 @@ export interface WakaLandingProps {
   footer?: React.ReactNode
   /** Classes CSS additionnelles */
   className?: string
+  /** Composant de lien personnalisé (ex: next/link) pour navigation SPA */
+  LinkComponent?: React.ComponentType<LinkComponentProps>
+}
+
+// ============================================
+// CONTEXT
+// ============================================
+
+interface LandingContextValue {
+  LinkComponent?: React.ComponentType<LinkComponentProps>
+}
+
+const LandingContext = React.createContext<LandingContextValue>({})
+
+function useLandingContext() {
+  return React.useContext(LandingContext)
 }
 
 // ============================================
@@ -143,29 +160,35 @@ function LandingNavbar({
   loginHref,
 }: LandingNavbarProps) {
   const [isOpen, setIsOpen] = React.useState(false)
+  const { LinkComponent } = useLandingContext()
+
+  const renderLink = (href: string, className: string, children: React.ReactNode, onClick?: () => void) => {
+    if (LinkComponent) {
+      return <LinkComponent href={href} className={className} onClick={onClick}>{children}</LinkComponent>
+    }
+    return <a href={href} className={className} onClick={onClick}>{children}</a>
+  }
 
   return (
     <nav className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
       <div className="container flex h-16 items-center justify-between">
         {/* Logo */}
-        <a href="/" className="flex items-center gap-2 font-bold text-xl">
+        {renderLink("/", "flex items-center gap-2 font-bold text-xl", <>
           {logo}
           <span>{brandName}</span>
-        </a>
+        </>)}
 
         {/* Desktop Nav */}
         <div className="hidden md:flex items-center gap-6">
           {navItems.map((item) => (
-            <a
-              key={item.href}
-              href={item.href}
-              className={cn(
+            renderLink(
+              item.href,
+              cn(
                 "text-sm font-medium transition-colors hover:text-primary",
                 item.isActive ? "text-primary" : "text-muted-foreground"
-              )}
-            >
-              {item.label}
-            </a>
+              ),
+              item.label
+            )
           ))}
         </div>
 
@@ -178,7 +201,11 @@ function LandingNavbar({
               asChild={!!loginHref}
             >
               {loginHref ? (
-                <a href={loginHref}>{loginButtonText}</a>
+                LinkComponent ? (
+                  <LinkComponent href={loginHref}>{loginButtonText}</LinkComponent>
+                ) : (
+                  <a href={loginHref}>{loginButtonText}</a>
+                )
               ) : (
                 loginButtonText
               )}
@@ -202,19 +229,21 @@ function LandingNavbar({
         <div className="md:hidden border-t bg-background p-4">
           <div className="flex flex-col gap-4">
             {navItems.map((item) => (
-              <a
-                key={item.href}
-                href={item.href}
-                className="text-sm font-medium"
-                onClick={() => setIsOpen(false)}
-              >
-                {item.label}
-              </a>
+              renderLink(
+                item.href,
+                "text-sm font-medium",
+                item.label,
+                () => setIsOpen(false)
+              )
             ))}
             {showLoginButton && (
               <Button onClick={onLogin} asChild={!!loginHref}>
                 {loginHref ? (
-                  <a href={loginHref}>{loginButtonText}</a>
+                  LinkComponent ? (
+                    <LinkComponent href={loginHref}>{loginButtonText}</LinkComponent>
+                  ) : (
+                    <a href={loginHref}>{loginButtonText}</a>
+                  )
                 ) : (
                   loginButtonText
                 )}
@@ -243,6 +272,8 @@ function LandingHeroSection({
   image,
   stats,
 }: LandingHeroSectionProps) {
+  const { LinkComponent } = useLandingContext()
+
   return (
     <section className="container py-24 md:py-32">
       <div className="flex flex-col lg:flex-row items-center gap-12">
@@ -272,10 +303,17 @@ function LandingHeroSection({
               asChild={!!primaryButtonHref}
             >
               {primaryButtonHref ? (
-                <a href={primaryButtonHref}>
-                  {primaryButtonText}
-                  <ArrowRight className="ml-2 h-4 w-4" />
-                </a>
+                LinkComponent ? (
+                  <LinkComponent href={primaryButtonHref}>
+                    {primaryButtonText}
+                    <ArrowRight className="ml-2 h-4 w-4" />
+                  </LinkComponent>
+                ) : (
+                  <a href={primaryButtonHref}>
+                    {primaryButtonText}
+                    <ArrowRight className="ml-2 h-4 w-4" />
+                  </a>
+                )
               ) : (
                 <>
                   {primaryButtonText}
@@ -292,10 +330,17 @@ function LandingHeroSection({
                 asChild={!!secondaryButtonHref}
               >
                 {secondaryButtonHref ? (
-                  <a href={secondaryButtonHref}>
-                    <Play className="mr-2 h-4 w-4" />
-                    {secondaryButtonText}
-                  </a>
+                  LinkComponent ? (
+                    <LinkComponent href={secondaryButtonHref}>
+                      <Play className="mr-2 h-4 w-4" />
+                      {secondaryButtonText}
+                    </LinkComponent>
+                  ) : (
+                    <a href={secondaryButtonHref}>
+                      <Play className="mr-2 h-4 w-4" />
+                      {secondaryButtonText}
+                    </a>
+                  )
                 ) : (
                   <>
                     <Play className="mr-2 h-4 w-4" />
@@ -459,6 +504,8 @@ function LandingCTASection({
   secondaryButtonAction,
   variant = "default",
 }: LandingCTASectionProps) {
+  const { LinkComponent } = useLandingContext()
+
   const variantClasses = {
     default: "bg-muted/50",
     gradient: "bg-gradient-to-r from-primary/10 via-primary/5 to-background",
@@ -495,10 +542,17 @@ function LandingCTASection({
               asChild={!!buttonHref}
             >
               {buttonHref ? (
-                <a href={buttonHref}>
-                  {buttonText}
-                  <ChevronRight className="ml-2 h-4 w-4" />
-                </a>
+                LinkComponent ? (
+                  <LinkComponent href={buttonHref}>
+                    {buttonText}
+                    <ChevronRight className="ml-2 h-4 w-4" />
+                  </LinkComponent>
+                ) : (
+                  <a href={buttonHref}>
+                    {buttonText}
+                    <ChevronRight className="ml-2 h-4 w-4" />
+                  </a>
+                )
               ) : (
                 <>
                   {buttonText}
@@ -544,46 +598,51 @@ export function WakaLanding({
   cta,
   footer,
   className,
+  LinkComponent,
 }: WakaLandingProps) {
+  const contextValue = React.useMemo(() => ({ LinkComponent }), [LinkComponent])
+
   return (
-    <div className={cn("min-h-screen", className)}>
-      {/* Navbar */}
-      <LandingNavbar
-        logo={logo}
-        brandName={brandName}
-        navItems={navItems}
-        showLoginButton={showLoginButton}
-        loginButtonText={loginButtonText}
-        onLogin={onLogin}
-        loginHref={loginHref}
-      />
-
-      {/* Hero */}
-      {hero && <LandingHeroSection {...hero} />}
-
-      {/* Features */}
-      {features && features.length > 0 && (
-        <LandingFeaturesSection
-          title={featuresTitle}
-          description={featuresDescription}
-          features={features}
+    <LandingContext.Provider value={contextValue}>
+      <div className={cn("min-h-screen", className)}>
+        {/* Navbar */}
+        <LandingNavbar
+          logo={logo}
+          brandName={brandName}
+          navItems={navItems}
+          showLoginButton={showLoginButton}
+          loginButtonText={loginButtonText}
+          onLogin={onLogin}
+          loginHref={loginHref}
         />
-      )}
 
-      {/* Testimonials */}
-      {testimonials && testimonials.length > 0 && (
-        <LandingTestimonialsSection
-          title={testimonialsTitle}
-          testimonials={testimonials}
-        />
-      )}
+        {/* Hero */}
+        {hero && <LandingHeroSection {...hero} />}
 
-      {/* CTA */}
-      {cta && <LandingCTASection {...cta} />}
+        {/* Features */}
+        {features && features.length > 0 && (
+          <LandingFeaturesSection
+            title={featuresTitle}
+            description={featuresDescription}
+            features={features}
+          />
+        )}
 
-      {/* Footer */}
-      {footer}
-    </div>
+        {/* Testimonials */}
+        {testimonials && testimonials.length > 0 && (
+          <LandingTestimonialsSection
+            title={testimonialsTitle}
+            testimonials={testimonials}
+          />
+        )}
+
+        {/* CTA */}
+        {cta && <LandingCTASection {...cta} />}
+
+        {/* Footer */}
+        {footer}
+      </div>
+    </LandingContext.Provider>
   )
 }