@wakastellar/ui 2.3.2 → 2.3.5

package/src/blocks/pricing/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, CardFooter, CardHeader, CardTitle } from "../../components/card"
 import { Badge } from "../../components/badge"
@@ -82,6 +83,22 @@ export interface WakaPricingProps {
   showComparison?: boolean
   /** Classes CSS additionnelles */
   className?: string
+  /** Composant de lien personnalisé (ex: next/link) pour navigation SPA */
+  LinkComponent?: React.ComponentType<LinkComponentProps>
+}
+
+// ============================================
+// CONTEXT
+// ============================================
+
+interface PricingContextValue {
+  LinkComponent?: React.ComponentType<LinkComponentProps>
+}
+
+const PricingContext = React.createContext<PricingContextValue>({})
+
+function usePricingContext() {
+  return React.useContext(PricingContext)
 }
 
 // ============================================
@@ -135,6 +152,8 @@ interface PricingCardProps {
 }
 
 function PricingCard({ plan, billingPeriod }: PricingCardProps) {
+  const { LinkComponent } = usePricingContext()
+
   const price = billingPeriod === "yearly" && plan.priceYearly !== undefined
     ? plan.priceYearly
     : plan.price
@@ -236,7 +255,11 @@ function PricingCard({ plan, billingPeriod }: PricingCardProps) {
           asChild={!!plan.href}
         >
           {plan.href ? (
-            <a href={plan.href}>{plan.buttonText || "Choisir"}</a>
+            LinkComponent ? (
+              <LinkComponent href={plan.href}>{plan.buttonText || "Choisir"}</LinkComponent>
+            ) : (
+              <a href={plan.href}>{plan.buttonText || "Choisir"}</a>
+            )
           ) : (
             plan.buttonText || "Choisir"
           )}
@@ -252,6 +275,8 @@ interface PricingTableProps {
 }
 
 function PricingTable({ plans, billingPeriod }: PricingTableProps) {
+  const { LinkComponent } = usePricingContext()
+
   // Get all unique features
   const allFeatures = Array.from(
     new Set(plans.flatMap((plan) => plan.features.map((f) => f.name)))
@@ -367,7 +392,11 @@ function PricingTable({ plans, billingPeriod }: PricingTableProps) {
                   asChild={!!plan.href}
                 >
                   {plan.href ? (
-                    <a href={plan.href}>{plan.buttonText || "Choisir"}</a>
+                    LinkComponent ? (
+                      <LinkComponent href={plan.href}>{plan.buttonText || "Choisir"}</LinkComponent>
+                    ) : (
+                      <a href={plan.href}>{plan.buttonText || "Choisir"}</a>
+                    )
                   ) : (
                     plan.buttonText || "Choisir"
                   )}
@@ -420,6 +449,7 @@ export function WakaPricing({
   columns = 3,
   showComparison = false,
   className,
+  LinkComponent,
 }: WakaPricingProps) {
   const [internalBillingPeriod, setInternalBillingPeriod] = React.useState<"monthly" | "yearly">("monthly")
 
@@ -439,8 +469,11 @@ export function WakaPricing({
     4: "md:grid-cols-2 lg:grid-cols-4",
   }
 
+  const contextValue = React.useMemo(() => ({ LinkComponent }), [LinkComponent])
+
   return (
-    <div className={cn("container py-16", className)}>
+    <PricingContext.Provider value={contextValue}>
+      <div className={cn("container py-16", className)}>
       {/* Header */}
       <div className="text-center mb-12">
         <h1 className="text-3xl md:text-4xl font-bold tracking-tight mb-4">
@@ -477,7 +510,8 @@ export function WakaPricing({
       {faq && faq.length > 0 && (
         <PricingFAQSection title={faqTitle} items={faq} />
       )}
-    </div>
+      </div>
+    </PricingContext.Provider>
   )
 }
 

package/src/blocks/sidebar/index.tsx

@@ -78,6 +78,10 @@ export interface SidebarLogoConfig {
   component?: React.ReactNode
 }
 
+// Re-export du type partagé
+export type { LinkComponentProps } from "../../types/link"
+import type { LinkComponentProps } from "../../types/link"
+
 export interface WakaSidebarProps {
   /** Configuration du logo */
   logo?: SidebarLogoConfig
@@ -119,6 +123,8 @@ export interface WakaSidebarProps {
   header?: React.ReactNode
   /** Mode de positionnement : "fixed" pour app layout, "relative" pour preview/demo */
   position?: "fixed" | "relative"
+  /** Composant de lien personnalisé (ex: next/link) pour navigation SPA */
+  LinkComponent?: React.ComponentType<LinkComponentProps>
 }
 
 // ============ CONTEXT ============
@@ -131,6 +137,7 @@ interface SidebarContextValue {
   isMobile: boolean
   closeOnNavigate: boolean
   onClose: () => void
+  LinkComponent?: React.ComponentType<LinkComponentProps>
 }
 
 const SidebarContext = React.createContext<SidebarContextValue | null>(null)
@@ -149,6 +156,8 @@ function useSidebarContext() {
  * Logo de la sidebar
  */
 function SidebarLogo({ config }: { config: SidebarLogoConfig }) {
+  const { LinkComponent } = useSidebarContext()
+
   const content = config.component ? (
     config.component
   ) : (
@@ -167,6 +176,13 @@ function SidebarLogo({ config }: { config: SidebarLogoConfig }) {
   )
 
   if (config.href) {
+    if (LinkComponent) {
+      return (
+        <LinkComponent href={config.href} className="block" onClick={config.onClick}>
+          {content}
+        </LinkComponent>
+      )
+    }
     return (
       <a href={config.href} className="block" onClick={config.onClick}>
         {content}
@@ -197,7 +213,7 @@ function SidebarMenuItemComponent({
   isChild?: boolean
   renderItem?: (item: SidebarMenuItem, isChild: boolean) => React.ReactNode
 }) {
-  const { activeId, setActiveId, expandedIds, toggleExpanded, isMobile, closeOnNavigate, onClose } =
+  const { activeId, setActiveId, expandedIds, toggleExpanded, isMobile, closeOnNavigate, onClose, LinkComponent } =
     useSidebarContext()
 
   const hasChildren = item.children && item.children.length > 0
@@ -284,21 +300,23 @@ function SidebarMenuItemComponent({
 
   // Lien ou bouton simple
   if (item.href) {
-    return (
-      <a
-        href={item.href}
-        onClick={(e) => {
-          if (item.disabled) {
-            e.preventDefault()
-            return
-          }
-          handleClick()
-        }}
-        className="block"
-      >
-        {itemContent}
-      </a>
-    )
+    const linkProps = {
+      href: item.href,
+      className: "block",
+      onClick: (e: React.MouseEvent) => {
+        if (item.disabled) {
+          e.preventDefault()
+          return
+        }
+        handleClick()
+      },
+    }
+
+    if (LinkComponent) {
+      return <LinkComponent {...linkProps}>{itemContent}</LinkComponent>
+    }
+
+    return <a {...linkProps}>{itemContent}</a>
   }
 
   return (
@@ -317,6 +335,8 @@ function SidebarMenuItemComponent({
  * Menu utilisateur
  */
 function SidebarUser({ config }: { config: SidebarUserConfig }) {
+  const { LinkComponent } = useSidebarContext()
+
   const initials =
     config.initials ||
     config.name
@@ -366,10 +386,17 @@ function SidebarUser({ config }: { config: SidebarUserConfig }) {
               asChild={!!action.href}
             >
               {action.href ? (
-                <a href={action.href} className="flex items-center gap-2">
-                  {action.icon}
-                  {action.label}
-                </a>
+                LinkComponent ? (
+                  <LinkComponent href={action.href} className="flex items-center gap-2">
+                    {action.icon}
+                    {action.label}
+                  </LinkComponent>
+                ) : (
+                  <a href={action.href} className="flex items-center gap-2">
+                    {action.icon}
+                    {action.label}
+                  </a>
+                )
               ) : (
                 <span className="flex items-center gap-2">
                   {action.icon}
@@ -487,6 +514,7 @@ export function WakaSidebar({
   footer,
   header,
   position = "fixed",
+  LinkComponent,
 }: WakaSidebarProps) {
   // État interne pour mobile si non contrôlé
   const [internalOpen, setInternalOpen] = React.useState(false)
@@ -552,12 +580,13 @@ export function WakaSidebar({
     isMobile,
     closeOnNavigate: true,
     onClose: () => setIsOpen(false),
+    LinkComponent,
   }
 
   // Styles personnalisés - utilise les variables CSS du thème par défaut
   const customStyles = {
     "--sidebar-bg": backgroundColor || "hsl(var(--sidebar-background, var(--card)))",
-    "--sidebar-text": textColor || "hsl(var(--sidebar-foreground, var(--card-foreground)))",
+    "--sidebar-text": textColor || "hsl(var(--sidebar-foreground, var(--muted-foreground)))",
     "--sidebar-active": activeColor || "hsl(var(--sidebar-primary, var(--primary)))",
     "--sidebar-active-foreground": "hsl(var(--sidebar-primary-foreground, var(--primary-foreground)))",
     "--sidebar-hover": hoverColor || "hsl(var(--sidebar-accent, var(--accent)))",

package/src/styles/base.css

@@ -50,6 +50,15 @@
   --warning-foreground: 0 0% 0%;
   --info: 199 89% 48%;
   --info-foreground: 0 0% 100%;
+
+  /* Sidebar colors */
+  --sidebar-background: 222.2 84% 4.9%;
+  --sidebar-foreground: 210 40% 98%;
+  --sidebar-primary: 222.2 47.4% 11.2%;
+  --sidebar-primary-foreground: 210 40% 98%;
+  --sidebar-accent: 217.2 32.6% 17.5%;
+  --sidebar-accent-foreground: 210 40% 98%;
+  --sidebar-border: 217.2 32.6% 17.5%;
 }
 
 .dark,
@@ -86,6 +95,15 @@
   --warning-foreground: 0 0% 0%;
   --info: 199 89% 48%;
   --info-foreground: 0 0% 100%;
+
+  /* Sidebar colors - dark */
+  --sidebar-background: 222.2 84% 4.9%;
+  --sidebar-foreground: 210 40% 98%;
+  --sidebar-primary: 210 40% 98%;
+  --sidebar-primary-foreground: 222.2 47.4% 11.2%;
+  --sidebar-accent: 217.2 32.6% 17.5%;
+  --sidebar-accent-foreground: 210 40% 98%;
+  --sidebar-border: 217.2 32.6% 17.5%;
 }
 
 /* ============================================

package/src/styles/themes/forest.css

@@ -33,6 +33,15 @@
   --warning-foreground: 0 0% 0%;
   --info: 199 89% 48%;
   --info-foreground: 0 0% 100%;
+
+  /* Sidebar colors */
+  --sidebar-background: 120 33% 9%;
+  --sidebar-foreground: 120 56% 69%;
+  --sidebar-primary: 120 45% 33%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 120 36% 28%;
+  --sidebar-accent-foreground: 120 56% 69%;
+  --sidebar-border: 120 36% 28%;
 }
 
 [data-theme="forest"].dark {
@@ -68,4 +77,13 @@
   --warning-foreground: 0 0% 0%;
   --info: 199 89% 48%;
   --info-foreground: 0 0% 100%;
+
+  /* Sidebar colors - dark */
+  --sidebar-background: 120 33% 9%;
+  --sidebar-foreground: 120 56% 69%;
+  --sidebar-primary: 120 40% 56%;
+  --sidebar-primary-foreground: 120 33% 9%;
+  --sidebar-accent: 120 36% 28%;
+  --sidebar-accent-foreground: 120 56% 69%;
+  --sidebar-border: 120 36% 28%;
 }

package/src/styles/themes/monochrome.css

@@ -33,6 +33,15 @@
   --warning-foreground: 0 0% 0%;
   --info: 199 89% 48%;
   --info-foreground: 0 0% 100%;
+
+  /* Sidebar colors */
+  --sidebar-background: 0 0% 4%;
+  --sidebar-foreground: 0 0% 98%;
+  --sidebar-primary: 0 0% 9%;
+  --sidebar-primary-foreground: 0 0% 98%;
+  --sidebar-accent: 0 0% 15%;
+  --sidebar-accent-foreground: 0 0% 98%;
+  --sidebar-border: 0 0% 15%;
 }
 
 [data-theme="monochrome"].dark {
@@ -68,4 +77,13 @@
   --warning-foreground: 0 0% 0%;
   --info: 199 89% 48%;
   --info-foreground: 0 0% 100%;
+
+  /* Sidebar colors - dark */
+  --sidebar-background: 0 0% 4%;
+  --sidebar-foreground: 0 0% 98%;
+  --sidebar-primary: 0 0% 98%;
+  --sidebar-primary-foreground: 0 0% 4%;
+  --sidebar-accent: 0 0% 15%;
+  --sidebar-accent-foreground: 0 0% 98%;
+  --sidebar-border: 0 0% 15%;
 }

package/src/styles/themes/perpetuity.css

@@ -33,6 +33,15 @@
   --warning-foreground: 0 0% 0%;
   --info: 199 89% 48%;
   --info-foreground: 0 0% 100%;
+
+  /* Sidebar colors */
+  --sidebar-background: 195 50% 8%;
+  --sidebar-foreground: 180 75% 60%;
+  --sidebar-primary: 184 93% 29%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 189 59% 21%;
+  --sidebar-accent-foreground: 180 75% 60%;
+  --sidebar-border: 189 59% 21%;
 }
 
 [data-theme="perpetuity"].dark {
@@ -68,4 +77,13 @@
   --warning-foreground: 0 0% 0%;
   --info: 199 89% 48%;
   --info-foreground: 0 0% 100%;
+
+  /* Sidebar colors - dark */
+  --sidebar-background: 195 50% 8%;
+  --sidebar-foreground: 180 75% 60%;
+  --sidebar-primary: 180 75% 60%;
+  --sidebar-primary-foreground: 195 50% 8%;
+  --sidebar-accent: 189 59% 21%;
+  --sidebar-accent-foreground: 180 75% 60%;
+  --sidebar-border: 189 59% 21%;
 }

package/src/styles/themes/sunset.css

@@ -33,6 +33,15 @@
   --warning-foreground: 0 0% 0%;
   --info: 199 89% 48%;
   --info-foreground: 0 0% 100%;
+
+  /* Sidebar colors */
+  --sidebar-background: 18 56% 7%;
+  --sidebar-foreground: 28 92% 83%;
+  --sidebar-primary: 21 90% 48%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 26 80% 31%;
+  --sidebar-accent-foreground: 28 92% 83%;
+  --sidebar-border: 28 75% 26%;
 }
 
 [data-theme="sunset"].dark {
@@ -68,4 +77,13 @@
   --warning-foreground: 0 0% 0%;
   --info: 199 89% 48%;
   --info-foreground: 0 0% 100%;
+
+  /* Sidebar colors - dark */
+  --sidebar-background: 18 56% 7%;
+  --sidebar-foreground: 28 92% 83%;
+  --sidebar-primary: 38 92% 50%;
+  --sidebar-primary-foreground: 18 56% 7%;
+  --sidebar-accent: 26 80% 31%;
+  --sidebar-accent-foreground: 28 92% 83%;
+  --sidebar-border: 28 75% 26%;
 }

package/src/styles/themes/twilight.css

@@ -33,6 +33,15 @@
   --warning-foreground: 0 0% 0%;
   --info: 199 89% 48%;
   --info-foreground: 0 0% 100%;
+
+  /* Sidebar colors */
+  --sidebar-background: 270 45% 11%;
+  --sidebar-foreground: 275 100% 92%;
+  --sidebar-primary: 262 83% 66%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 268 35% 30%;
+  --sidebar-accent-foreground: 275 100% 92%;
+  --sidebar-border: 268 35% 30%;
 }
 
 [data-theme="twilight"].dark {
@@ -68,4 +77,13 @@
   --warning-foreground: 0 0% 0%;
   --info: 199 89% 48%;
   --info-foreground: 0 0% 100%;
+
+  /* Sidebar colors - dark */
+  --sidebar-background: 270 45% 11%;
+  --sidebar-foreground: 275 100% 92%;
+  --sidebar-primary: 262 91% 76%;
+  --sidebar-primary-foreground: 270 45% 11%;
+  --sidebar-accent: 268 35% 30%;
+  --sidebar-accent-foreground: 275 100% 92%;
+  --sidebar-border: 268 35% 30%;
 }