@e-burgos/tucu-ui 2.4.1 → 2.6.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@e-burgos/tucu-ui",
   "description": "Tucu UI Library",
-  "version": "2.4.1",
+  "version": "2.6.0",
   "main": "./index.js",
   "module": "./index.mjs",
   "types": "./index.d.ts",
@@ -44,24 +44,32 @@
     "pack:lib": "cd ../../ui/tucu-ui && pnpm npm pack"
   },
   "dependencies": {
-    "@e-burgos/tucu-ui-mcp": "^0.5.0",
-    "@tailwindcss/typography": "0.0.0-insiders.0339c42",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@e-burgos/tucu-ui-mcp": "^0.6.0",
+    "@tailwindcss/typography": "^0.5.19",
+    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/table-core": "^8.21.3",
     "classnames": "^2.5.1",
-    "framer-motion": "12.23.3",
-    "lucide-react": "^0.460.0",
-    "react-hook-form": "7.60.0",
-    "react-router-dom": "7.9.1",
-    "react-router": "7.9.1",
+    "framer-motion": "^12.40.0",
+    "lodash": "^4.18.1",
+    "lucide-react": "^1.17.0",
+    "react-hook-form": "^7.77.0",
+    "react-router-dom": "^7.16.0",
+    "react-router": "^7.16.0",
     "react-use": "^17.6.0",
-    "recharts": "3.8.1",
-    "swiper": "11.2.8",
-    "zustand": "^5.0.8"
+    "recharts": "^3.8.1",
+    "swiper": "^12.2.0",
+    "zustand": "^5.0.14"
   },
   "devDependencies": {
-    "@tailwindcss/vite": "^4.1.18",
-    "tailwindcss": "^4.1.18",
+    "@tailwindcss/vite": "^4.3.0",
+    "tailwindcss": "^4.3.0",
     "prismjs": "^1.30.0",
-    "@types/prismjs": "^1.26.5"
+    "@types/prismjs": "^1.26.6",
+    "@types/lodash": "^4.17.24"
   },
   "peerDependencies": {
     "react": ">=18.0.0",

package/themes/components/settings/index.d.ts

@@ -1,5 +1,19 @@
+export * from './background-picker';
+export * from './color-dot';
+export * from './color-swatch-modal';
+export * from './default-color-settings';
+export * from './direction-switcher';
 export * from './lang-selector';
+export * from './layout-switcher';
+export * from './restore-defaults';
 export * from './settings-button';
 export * from './settings-drawer';
+export * from './settings-section-heading';
+export * from './settings-types';
+export * from './sonoma-accent-picker';
 export * from './switch-mode';
 export * from './switch-variant';
+export * from './switcher-button';
+export * from './tahoe-accent-picker';
+export * from './theme-icons';
+export * from './theme-variant-switcher';

package/themes/components/settings/settings-drawer.d.ts

@@ -1,3 +1,2 @@
-export declare function RestoreDefaults(): import("react/jsx-runtime").JSX.Element;
 export declare function SettingsDrawer(): import("react/jsx-runtime").JSX.Element;
 export default SettingsDrawer;

package/themes/config/index.d.ts

@@ -230,6 +230,18 @@ export declare const macosLightPresets: {
         readonly label: PRESET_LABEL_COLORS.MACOS_DARK_LIGHT_DARK;
         readonly value: PRESET_COLORS.MACOS_DARK_LIGHT_DARK;
     };
+    readonly fgPreset: IThemeItem;
+    readonly darkFgPreset: IThemeItem;
+    readonly borderPreset: IThemeItem;
+    readonly darkBorderPreset: IThemeItem;
+    readonly successPreset: IThemeItem;
+    readonly darkSuccessPreset: IThemeItem;
+    readonly warningPreset: IThemeItem;
+    readonly darkWarningPreset: IThemeItem;
+    readonly errorPreset: IThemeItem;
+    readonly darkErrorPreset: IThemeItem;
+    readonly infoPreset: IThemeItem;
+    readonly darkInfoPreset: IThemeItem;
 };
 export interface TahoeAccentBundle {
     id: string;
@@ -300,6 +312,16 @@ export declare function buildTahoePresets(bundle: TahoeAccentBundle): {
         label: PRESET_LABEL_COLORS;
         value: PRESET_COLORS;
     };
+    fgPreset: IThemeItem;
+    darkFgPreset: IThemeItem;
+    successPreset: IThemeItem;
+    darkSuccessPreset: IThemeItem;
+    warningPreset: IThemeItem;
+    darkWarningPreset: IThemeItem;
+    errorPreset: IThemeItem;
+    darkErrorPreset: IThemeItem;
+    infoPreset: IThemeItem;
+    darkInfoPreset: IThemeItem;
 };
 export declare const SONOMA_ACCENT_BUNDLES: TahoeAccentBundle[];
 /** Build a full macOS preset set from a Sonoma accent bundle */
@@ -360,4 +382,14 @@ export declare function buildSonomaPresets(bundle: TahoeAccentBundle): {
         label: PRESET_LABEL_COLORS;
         value: PRESET_COLORS;
     };
+    fgPreset: IThemeItem;
+    darkFgPreset: IThemeItem;
+    successPreset: IThemeItem;
+    darkSuccessPreset: IThemeItem;
+    warningPreset: IThemeItem;
+    darkWarningPreset: IThemeItem;
+    errorPreset: IThemeItem;
+    darkErrorPreset: IThemeItem;
+    infoPreset: IThemeItem;
+    darkInfoPreset: IThemeItem;
 };

package/themes/hooks/use-theme.d.ts

@@ -1,6 +1,36 @@
 import { DIRECTION, IThemeItem, LogoType, LAYOUT_OPTIONS, MODE, THEME_VARIANT, LangType } from '../config/index';
 export type BackgroundVariant = 'none' | 'base' | 'sonoma' | 'wave' | 'wallpaper' | 'mobile' | 'radial' | 'window' | 'aurora' | 'depth' | 'demo';
 export type TahoeBackgroundVariant = BackgroundVariant;
+interface IThemeConfig {
+    primaryPreset: IThemeItem;
+    darkPrimaryPreset: IThemeItem;
+    secondaryPreset: IThemeItem;
+    darkSecondaryPreset: IThemeItem;
+    accentPreset: IThemeItem;
+    darkAccentPreset: IThemeItem;
+    mutedPreset: IThemeItem;
+    darkMutedPreset: IThemeItem;
+    darkBgPreset: IThemeItem;
+    lightBgPreset: IThemeItem;
+    lightDarkPreset: IThemeItem;
+    darkLightDarkPreset: IThemeItem;
+    successPreset: IThemeItem;
+    darkSuccessPreset: IThemeItem;
+    warningPreset: IThemeItem;
+    darkWarningPreset: IThemeItem;
+    errorPreset: IThemeItem;
+    darkErrorPreset: IThemeItem;
+    infoPreset: IThemeItem;
+    darkInfoPreset: IThemeItem;
+    fgPreset: IThemeItem;
+    darkFgPreset: IThemeItem;
+    borderPreset: IThemeItem;
+    darkBorderPreset: IThemeItem;
+    layout: LAYOUT_OPTIONS;
+    mode: MODE;
+    direction: DIRECTION;
+    backgroundVariant: BackgroundVariant;
+}
 /** Helper: for every key K in T, produce a setter `setK: (value: T[K]) => void` */
 type Setters<T> = {
     [K in keyof T as `set${Capitalize<string & K>}`]: (value: T[K]) => void;
@@ -40,6 +70,7 @@ interface IThemeState {
     showSettings: boolean;
     lang: LangType;
     backgroundVariant: BackgroundVariant;
+    themeConfigs: Record<THEME_VARIANT, IThemeConfig>;
 }
 /** Full store interface: state + auto-generated setters + actions */
 export interface ITheme extends IThemeState, Setters<IThemeState> {

package/documentation/APIReferenceSection-DGjGAJB9.js

@@ -1,213 +0,0 @@
-import { jsxs as t, Fragment as d, jsx as e } from "react/jsx-runtime";
-import { H as c, T as r, C as a, a as n, y as s, K as l } from "../index-BOVWnu1L.js";
-import { BookOpen as u } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const P = () => {
-  const o = [
-    {
-      key: "prop",
-      label: "Property",
-      render: (i) => /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(i) })
-    },
-    {
-      key: "type",
-      label: "Type",
-      render: (i) => /* @__PURE__ */ e("code", { className: "text-xs", children: String(i) })
-    },
-    {
-      key: "required",
-      label: "Required",
-      render: (i) => {
-        const p = String(i);
-        return /* @__PURE__ */ e(l, { variant: "outline", className: "text-xs", children: p === "Yes" ? "Yes" : "Optional" });
-      }
-    },
-    { key: "description", label: "Description" }
-  ];
-  return /* @__PURE__ */ t(d, { children: [
-    /* @__PURE__ */ e(
-      c,
-      {
-        title: "API Reference",
-        description: "Complete API reference for all routing system interfaces and their properties.",
-        icon: /* @__PURE__ */ e("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-gray-500 via-slate-500 to-zinc-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(u, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
-      }
-    ),
-    /* @__PURE__ */ t("section", { className: "space-y-8", children: [
-      /* @__PURE__ */ t("div", { className: "text-center", children: [
-        /* @__PURE__ */ e(r, { tag: "h2", className: "mb-2", children: "StandaloneAppRoutesMenuItem" }),
-        /* @__PURE__ */ e(
-          r,
-          {
-            tag: "p",
-            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
-            children: "Properties for standalone route definitions"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ e(a, { children: /* @__PURE__ */ e(n, { title: "Properties", children: /* @__PURE__ */ e(s, { columns: o, data: [
-        {
-          prop: "name",
-          type: "string",
-          required: "Yes",
-          description: "Display name for navigation menu"
-        },
-        {
-          prop: "path",
-          type: "string",
-          required: "Yes",
-          description: "URL path for the route"
-        },
-        {
-          prop: "component",
-          type: "React.JSX.Element",
-          required: "Yes",
-          description: "Component to render for this route"
-        },
-        {
-          prop: "icon",
-          type: "React.ReactNode",
-          required: "Optional",
-          description: "Icon to display in navigation"
-        },
-        {
-          prop: "dropdownItems",
-          type: "StandaloneAppRoutesMenuItem[]",
-          required: "Optional",
-          description: "Array of nested sub-routes (recursive)"
-        },
-        {
-          prop: "enableNestedRoutes",
-          type: "boolean",
-          required: "Optional",
-          description: "Adds /* to path for nested routing within the component"
-        },
-        {
-          prop: "isPublic",
-          type: "boolean",
-          required: "Optional",
-          description: "Whether the route is publicly accessible"
-        },
-        {
-          prop: "hide",
-          type: "boolean",
-          required: "Optional",
-          description: "Hide route from navigation menu"
-        },
-        {
-          prop: "href",
-          type: "string",
-          required: "Optional",
-          description: "External URL (opens in new tab)"
-        },
-        {
-          prop: "isActive",
-          type: "boolean",
-          required: "Optional",
-          description: "Force active state in navigation"
-        },
-        {
-          prop: "onClick",
-          type: "() => void",
-          required: "Optional",
-          description: "Custom click handler for the menu item"
-        }
-      ] }) }) })
-    ] }),
-    /* @__PURE__ */ t("section", { className: "space-y-8", children: [
-      /* @__PURE__ */ t("div", { className: "text-center", children: [
-        /* @__PURE__ */ e(r, { tag: "h2", className: "mb-2", children: "IAppRouteConfig (MFE)" }),
-        /* @__PURE__ */ e(
-          r,
-          {
-            tag: "p",
-            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
-            children: "Properties for MFE route configurations (extends RouteProps)"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ e(a, { children: /* @__PURE__ */ e(n, { title: "Properties", children: /* @__PURE__ */ e(s, { columns: o, data: [
-        {
-          prop: "key",
-          type: "string",
-          required: "Yes",
-          description: "Unique identifier for the route"
-        },
-        {
-          prop: "path",
-          type: "string",
-          required: "Yes",
-          description: "URL path (inherited from RouteProps)"
-        },
-        {
-          prop: "element",
-          type: "React.ReactNode",
-          required: "Yes",
-          description: "Component to render (inherited from RouteProps)"
-        },
-        {
-          prop: "isPublic",
-          type: "boolean",
-          required: "Optional",
-          description: "If true, accessible without authentication (default: false)"
-        },
-        {
-          prop: "disabled",
-          type: "boolean",
-          required: "Optional",
-          description: "Temporarily disable this route"
-        }
-      ] }) }) })
-    ] }),
-    /* @__PURE__ */ t("section", { className: "space-y-8", children: [
-      /* @__PURE__ */ t("div", { className: "text-center", children: [
-        /* @__PURE__ */ e(r, { tag: "h2", className: "mb-2", children: "MFE ThemeProvider Props" }),
-        /* @__PURE__ */ e(
-          r,
-          {
-            tag: "p",
-            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
-            children: 'Required props when using architecturalPatterns="mfe"'
-          }
-        )
-      ] }),
-      /* @__PURE__ */ e(a, { children: /* @__PURE__ */ e(n, { title: "MFE-Specific Props", children: /* @__PURE__ */ e(s, { columns: o, data: [
-        {
-          prop: "architecturalPatterns",
-          type: "'mfe'",
-          required: "Yes",
-          description: "Activates MFE mode"
-        },
-        {
-          prop: "basePath",
-          type: "string",
-          required: "Yes",
-          description: "Base path for the micro frontend (e.g., /my-app)"
-        },
-        {
-          prop: "appRoutesConfig",
-          type: "IAppRouteConfig[]",
-          required: "Yes",
-          description: "Array of route configurations"
-        },
-        {
-          prop: "isAuthenticated",
-          type: "boolean",
-          required: "Yes",
-          description: "Whether the user is authenticated"
-        },
-        {
-          prop: "loginUrl",
-          type: "string",
-          required: "Yes",
-          description: "Redirect URL for unauthenticated users"
-        }
-      ] }) }) })
-    ] })
-  ] });
-};
-export {
-  P as default
-};

package/documentation/APIReferenceSection-pgQd8-DV.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-CQ1tqJiQ.js"),p=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const d=()=>{const i=[{key:"prop",label:"Property",render:r=>e.jsx("code",{className:"text-xs text-brand",children:String(r)})},{key:"type",label:"Type",render:r=>e.jsx("code",{className:"text-xs",children:String(r)})},{key:"required",label:"Required",render:r=>{const a=String(r);return e.jsx(t.Badge,{variant:"outline",className:"text-xs",children:a==="Yes"?"Yes":"Optional"})}},{key:"description",label:"Description"}],o=[{prop:"name",type:"string",required:"Yes",description:"Display name for navigation menu"},{prop:"path",type:"string",required:"Yes",description:"URL path for the route"},{prop:"component",type:"React.JSX.Element",required:"Yes",description:"Component to render for this route"},{prop:"icon",type:"React.ReactNode",required:"Optional",description:"Icon to display in navigation"},{prop:"dropdownItems",type:"StandaloneAppRoutesMenuItem[]",required:"Optional",description:"Array of nested sub-routes (recursive)"},{prop:"enableNestedRoutes",type:"boolean",required:"Optional",description:"Adds /* to path for nested routing within the component"},{prop:"isPublic",type:"boolean",required:"Optional",description:"Whether the route is publicly accessible"},{prop:"hide",type:"boolean",required:"Optional",description:"Hide route from navigation menu"},{prop:"href",type:"string",required:"Optional",description:"External URL (opens in new tab)"},{prop:"isActive",type:"boolean",required:"Optional",description:"Force active state in navigation"},{prop:"onClick",type:"() => void",required:"Optional",description:"Custom click handler for the menu item"}],s=[{prop:"key",type:"string",required:"Yes",description:"Unique identifier for the route"},{prop:"path",type:"string",required:"Yes",description:"URL path (inherited from RouteProps)"},{prop:"element",type:"React.ReactNode",required:"Yes",description:"Component to render (inherited from RouteProps)"},{prop:"isPublic",type:"boolean",required:"Optional",description:"If true, accessible without authentication (default: false)"},{prop:"disabled",type:"boolean",required:"Optional",description:"Temporarily disable this route"}],n=[{prop:"architecturalPatterns",type:"'mfe'",required:"Yes",description:"Activates MFE mode"},{prop:"basePath",type:"string",required:"Yes",description:"Base path for the micro frontend (e.g., /my-app)"},{prop:"appRoutesConfig",type:"IAppRouteConfig[]",required:"Yes",description:"Array of route configurations"},{prop:"isAuthenticated",type:"boolean",required:"Yes",description:"Whether the user is authenticated"},{prop:"loginUrl",type:"string",required:"Yes",description:"Redirect URL for unauthenticated users"}];return e.jsxs(e.Fragment,{children:[e.jsx(t.HeroCard,{title:"API Reference",description:"Complete API reference for all routing system interfaces and their properties.",icon:e.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-gray-500 via-slate-500 to-zinc-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(p.BookOpen,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(t.Typography,{tag:"h2",className:"mb-2",children:"StandaloneAppRoutesMenuItem"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Properties for standalone route definitions"})]}),e.jsx(t.CardContainer,{children:e.jsx(t.CardTitle,{title:"Properties",children:e.jsx(t.BasicTable,{columns:i,data:o})})})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(t.Typography,{tag:"h2",className:"mb-2",children:"IAppRouteConfig (MFE)"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Properties for MFE route configurations (extends RouteProps)"})]}),e.jsx(t.CardContainer,{children:e.jsx(t.CardTitle,{title:"Properties",children:e.jsx(t.BasicTable,{columns:i,data:s})})})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(t.Typography,{tag:"h2",className:"mb-2",children:"MFE ThemeProvider Props"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:'Required props when using architecturalPatterns="mfe"'})]}),e.jsx(t.CardContainer,{children:e.jsx(t.CardTitle,{title:"MFE-Specific Props",children:e.jsx(t.BasicTable,{columns:i,data:n})})})]})]})};exports.default=d;

package/documentation/ActiveLinkSection-2k77Clqe.js

@@ -1,79 +0,0 @@
-import { jsxs as t, Fragment as s, jsx as e } from "react/jsx-runtime";
-import { H as l, C as a, a as o, T as c, a8 as i, P as m, A as r, c as h } from "../index-BOVWnu1L.js";
-import { Link as d } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const b = () => /* @__PURE__ */ t(s, { children: [
-  /* @__PURE__ */ e(
-    l,
-    {
-      title: "ActiveLink",
-      description: `A link component that automatically applies an active class when the
-          current path matches the link path.`,
-      icon: /* @__PURE__ */ e("div", { className: "w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-cyan-500 to-blue-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(d, { className: "w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg" }) })
-    }
-  ),
-  /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ t("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ t(a, { className: "p-4", children: [
-      /* @__PURE__ */ e(c, { tag: "h5", className: "mb-3", children: "Active Link" }),
-      /* @__PURE__ */ t("div", { className: "flex gap-4", children: [
-        /* @__PURE__ */ e(i, { to: "/components", path: "/components", children: "Components" }),
-        /* @__PURE__ */ e(i, { to: "/about", path: "/about", children: "About" })
-      ] })
-    ] }),
-    /* @__PURE__ */ t(a, { className: "p-4", children: [
-      /* @__PURE__ */ e(c, { tag: "h5", className: "mb-3", children: "With Custom Active Class" }),
-      /* @__PURE__ */ e(
-        i,
-        {
-          to: "/home",
-          path: "/home",
-          activeClassName: "text-brand font-bold",
-          children: "Home"
-        }
-      )
-    ] })
-  ] }) }) }) }),
-  /* @__PURE__ */ e(
-    m,
-    {
-      componentName: "ActiveLink",
-      defaultValues: { path: "/demo", activeClassName: "active" },
-      excludeProps: ["state", "to"],
-      children: (n) => /* @__PURE__ */ e(i, { ...n, to: "#", children: "Active Link Example" })
-    }
-  ),
-  /* @__PURE__ */ e(r, { componentName: "ActiveLink" }),
-  /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
-    h,
-    {
-      language: "tsx",
-      code: `import { ActiveLink } from '@e-burgos/tucu-ui';
-
-// Basic usage
-<ActiveLink to="/components" path="/components">
-  Components
-</ActiveLink>
-
-// With custom active class
-<ActiveLink
-  to="/home"
-  path="/home"
-  activeClassName="text-brand font-bold"
->
-  Home
-</ActiveLink>
-
-// Navigation example
-<nav>
-  <ActiveLink to="/" path="/">Home</ActiveLink>
-  <ActiveLink to="/about" path="/about">About</ActiveLink>
-  <ActiveLink to="/contact" path="/contact">Contact</ActiveLink>
-</nav>`
-    }
-  ) }) }) })
-] });
-export {
-  b as default
-};

package/documentation/ActiveLinkSection-B76tuuXw.js

@@ -1,23 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-CQ1tqJiQ.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const s=()=>e.jsxs(e.Fragment,{children:[e.jsx(t.HeroCard,{title:"ActiveLink",description:`A link component that automatically applies an active class when the
-          current path matches the link path.`,icon:e.jsx("div",{className:"w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-cyan-500 to-blue-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(a.Link,{className:"w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg"})})}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"space-y-4",children:[e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"Active Link"}),e.jsxs("div",{className:"flex gap-4",children:[e.jsx(t.ActiveLink,{to:"/components",path:"/components",children:"Components"}),e.jsx(t.ActiveLink,{to:"/about",path:"/about",children:"About"})]})]}),e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"With Custom Active Class"}),e.jsx(t.ActiveLink,{to:"/home",path:"/home",activeClassName:"text-brand font-bold",children:"Home"})]})]})})})}),e.jsx(t.PropPlayground,{componentName:"ActiveLink",defaultValues:{path:"/demo",activeClassName:"active"},excludeProps:["state","to"],children:i=>e.jsx(t.ActiveLink,{...i,to:"#",children:"Active Link Example"})}),e.jsx(t.AutoPropsTable,{componentName:"ActiveLink"}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(t.CodeBlock,{language:"tsx",code:`import { ActiveLink } from '@e-burgos/tucu-ui';
-
-// Basic usage
-<ActiveLink to="/components" path="/components">
-  Components
-</ActiveLink>
-
-// With custom active class
-<ActiveLink
-  to="/home"
-  path="/home"
-  activeClassName="text-brand font-bold"
->
-  Home
-</ActiveLink>
-
-// Navigation example
-<nav>
-  <ActiveLink to="/" path="/">Home</ActiveLink>
-  <ActiveLink to="/about" path="/about">About</ActiveLink>
-  <ActiveLink to="/contact" path="/contact">Contact</ActiveLink>
-</nav>`})})})})]});exports.default=s;