@e-burgos/tucu-ui 2.5.0 → 2.6.0

package/datatable/hooks/useColumns.d.ts

@@ -0,0 +1,27 @@
+import { ColumnDef, RowData, VisibilityState } from '@tanstack/react-table';
+/**
+ * getColumns
+ * @category libs/datatable
+ * @subcategory Hooks
+ *
+ * @param {Array<ColumnDef<TData, TValue>>} columns - The columns of the table.
+ * @param {number} containerWidth - The width of the container.
+ * @param {boolean} isSubComponent - Whether the table has a sub component.
+ * @param {boolean} isRowActions - Whether the table has a row actions.
+ * @param {boolean} isRowSelection - Whether the table has a row selection.
+ * @param {number} offset - The offset of the columns.
+ * @param {VisibilityState} columnVisibility - The visibility of the columns.
+ * @returns {Array<ColumnDef<TData, TValue>>} The columns of the table.
+ *
+ * @template TData - The type of the data in the table.
+ * @template TValue - The type of the value in the table.
+ */
+export declare function getColumns<TData = RowData, TValue = unknown>({ columns, containerWidth, isSubComponent, isRowActions, isRowSelection, columnVisibility, offset, }: {
+    columns: Array<ColumnDef<TData, TValue>>;
+    containerWidth: number;
+    offset: number;
+    isSubComponent: boolean;
+    isRowActions: boolean;
+    isRowSelection: boolean;
+    columnVisibility: VisibilityState;
+}): Array<ColumnDef<TData, TValue>>;

package/datatable/hooks/useComponentEventListener.d.ts

@@ -0,0 +1,21 @@
+/**
+ * useComponentEventListener
+ * @category libs/datatable
+ * @subcategory Hooks
+ *
+ * @param {string} id - The id of the component.
+ * @returns {Object} The object with the width, height, position, element, and scroll.
+ *
+ * @template TData - The type of the data in the table.
+ */
+export declare const useComponentEventListener: (id: string) => {
+    width: number | undefined;
+    height: number | undefined;
+    position: DOMRect | undefined;
+    element: HTMLElement | null;
+    scroll: {
+        x: number | undefined;
+        y: number | undefined;
+    };
+};
+export default useComponentEventListener;

package/datatable/hooks/useDataTableStore.d.ts

@@ -0,0 +1,64 @@
+import { ColumnFiltersState, ColumnOrderState, ColumnPinningState, ColumnSizingState, PaginationState, SortingState, VisibilityState } from '@tanstack/react-table';
+import { ManualPaginationState } from '../common/types';
+/**
+ * ITableData
+ * @category libs/datatable
+ * @subcategory Hooks
+ *
+ * @property {string} id - The id of the table.
+ * @property {PaginationState} pagination - The pagination state of the table.
+ * @property {SortingState} sorting - The sorting state of the table.
+ * @property {ColumnOrderState} columnOrder - The column order state of the table.
+ * @property {VisibilityState} columnVisibility - The column visibility state of the table.
+ * @property {ColumnPinningState} columnPinning - The column pinning state of the table.
+ * @property {ColumnFiltersState} columnFilters - The column filters state of the table.
+ * @property {ManualPaginationState} manualPagination - The manual pagination state of the table.
+ *
+ * @template TData - The type of the data in the table.
+ */
+export interface ITableData {
+    id: string;
+    pagination: PaginationState;
+    sorting: SortingState;
+    columnOrder: ColumnOrderState;
+    columnVisibility: VisibilityState;
+    columnPinning: ColumnPinningState;
+    columnFilters: ColumnFiltersState;
+    columnSizing: ColumnSizingState;
+    manualPagination: ManualPaginationState;
+    totalCount?: number;
+}
+export interface DataTableStore {
+    tableData: ITableData;
+    setPagination: (value: PaginationState) => void;
+    setTotalCount?: (value: number) => void;
+    setSorting: (value: SortingState) => void;
+    setColumnOrder: (value: ColumnOrderState) => void;
+    setColumnVisibility: (value: VisibilityState) => void;
+    setColumnPinning: (value: ColumnPinningState) => void;
+    setColumnFilters: (value: ColumnFiltersState) => void;
+    setColumnSizing: (value: ColumnSizingState) => void;
+    setManualPagination: (value: ManualPaginationState) => void;
+    resetStoreData: () => void;
+}
+export declare const useDataTableStore: (tableId: string) => {
+    pagination: PaginationState;
+    sorting: SortingState;
+    columnOrder: ColumnOrderState;
+    columnVisibility: VisibilityState;
+    columnPinning: ColumnPinningState;
+    columnFilters: ColumnFiltersState;
+    columnSizing: ColumnSizingState;
+    manualPagination: ManualPaginationState;
+    setPagination: (value: PaginationState) => void;
+    setTotalCount: ((value: number) => void) | undefined;
+    setSorting: (value: SortingState) => void;
+    setColumnOrder: (value: ColumnOrderState) => void;
+    setColumnVisibility: (value: VisibilityState) => void;
+    setColumnPinning: (value: ColumnPinningState) => void;
+    setColumnFilters: (value: ColumnFiltersState) => void;
+    setColumnSizing: (value: ColumnSizingState) => void;
+    setManualPagination: (value: ManualPaginationState) => void;
+    resetStoreData: () => void;
+};
+export default useDataTableStore;

package/datatable/hooks/useGetCommonPinningStyles.d.ts

@@ -0,0 +1,22 @@
+import { CSSProperties } from 'react';
+import { Column } from '@tanstack/react-table';
+import { TData } from '../common/types';
+/**
+ * useGetCommonPinningStyles
+ * @category libs/datatable
+ * @subcategory Hooks
+ *
+ * @param {Column<TData>} column - The column of the table.
+ * @returns {Object} The object with the pin styles, is pinned, is last left pinned column, and is first right pinned column.
+ *
+ * @template TData - The type of the data in the table.
+ */
+export declare const useGetCommonPinningStyles: (column: Column<TData>) => {
+    pinStyles: Omit<CSSProperties, "width"> & {
+        width: number;
+    };
+    isPinned: import('@tanstack/table-core').ColumnPinningPosition;
+    isFirstRightPinnedColumn: boolean;
+    isLastLeftPinnedColumn: boolean;
+};
+export default useGetCommonPinningStyles;

package/datatable/hooks/useInitialState.d.ts

@@ -0,0 +1,27 @@
+import { ColumnDef, ColumnOrderState, ColumnPinningState, PaginationState, SortingState, VisibilityState } from '@tanstack/react-table';
+import { ManualPaginationState, TData } from '../common/types';
+/**
+ * useInitialState
+ * @category libs/datatable
+ * @subcategory Hooks
+ *
+ * @param {string} tableId - The id of the table.
+ * @param {Array<ColumnDef<TData, TData>>} defaultColumns - The default columns of the table.
+ *
+ * @template TData - The type of the data in the table.
+ */
+export declare const useInitialState: (tableId: string, defaultColumns: ColumnDef<TData, TData>[]) => {
+    columns: ColumnDef<TData, TData>[];
+    initialPagination: PaginationState;
+    initialSorting: SortingState;
+    initialColumnOrder: ColumnOrderState;
+    initialColumnVisibility: VisibilityState;
+    initialColumnPinning: ColumnPinningState;
+    initialManualPagination: ManualPaginationState;
+    defaultPagination: PaginationState;
+    defaultSorting: SortingState;
+    defaultColumnOrder: ColumnOrderState;
+    defaultColumnPinning: ColumnPinningState;
+    defaultManualPagination: ManualPaginationState;
+};
+export default useInitialState;

package/datatable/hooks/useResetCacheVersion.d.ts

@@ -0,0 +1,19 @@
+type OptionsResetCache = {
+    version: number;
+    onSuccess?: () => void;
+    onError?: (error: Error) => void;
+};
+/**
+ * Reset cache in the datable storage.
+ * @category libs/datatable
+ * @subcategory Hooks
+ *
+ * @param tableId - The table id
+ * @param options - Options for resetting the cache version
+ * @param options.version - The version to set for the cache
+ * @param options.onSuccess - Callback function to execute on successful reset
+ * @param options.onError - Callback function to execute on error
+ * @returns {boolean} - Returns true if the cache was reset, false if the version was already up to date
+ */
+export declare function useResetCacheVersion(tableId: string, options: OptionsResetCache): boolean;
+export {};

package/datatable/hooks/useScrollableTable.d.ts

@@ -0,0 +1,30 @@
+/**
+ * UseScrollableTable
+ * @category libs/datatable
+ * @subcategory Hooks
+ *
+ * @property {number} containerWith - The width of the container.
+ * @property {boolean} isScrollable - Whether the table is scrollable.
+ * @property {number} scrollX - The scroll x of the table.
+ * @property {function} handleScroll - The function to handle the scroll of the table.
+ *
+ * @template TData - The type of the data in the table.
+ */
+export type UseScrollableTable = {
+    containerWith: number;
+    isScrollable: boolean;
+    scrollX: number;
+    handleScroll: (e: React.UIEvent<HTMLDivElement, UIEvent>) => void;
+};
+/**
+ * useScrollableTable
+ * @category libs/datatable
+ * @subcategory Hooks
+ *
+ * @param {React.MutableRefObject<HTMLDivElement>} tableContainerRef - The ref of the table container.
+ * @returns {UseScrollableTable} The object with the container width, is scrollable, scroll x, and handle scroll.
+ *
+ * @template TData - The type of the data in the table.
+ */
+export declare const useScrollableTable: (tableContainerRef: React.MutableRefObject<HTMLDivElement>) => UseScrollableTable;
+export default useScrollableTable;

package/datatable/index.d.ts

@@ -0,0 +1,12 @@
+import * as TanstackTableImport from './tanstack-table';
+export { default as DataTableComponent } from './components/DataTable/DataTableComponent';
+export { default as DataTable } from './components/DataTable/DataTable';
+export { useDataTableContext } from './context/index';
+export * from './components/Assets/index';
+export * from './common/functions';
+export * from './common/helpers/convertColumns';
+export * from './common/helpers/parseNumericValueToExport';
+export * from './common/types';
+export * from './hooks';
+export { TanstackTableImport as TanstackTable };
+export * from '../assets/css/datatable.css';

package/datatable/tanstack-table/index.d.ts

@@ -0,0 +1,2 @@
+export * from '@tanstack/react-table';
+export * from '@tanstack/table-core';

package/demo/generated/props-metadata.d.ts

@@ -1,8 +1,8 @@
 /**
  * AUTO-GENERATED — Do not edit manually.
  * Generated by: scripts/generate-props.ts
- * Last updated: 2026-05-19T04:08:06.203Z
- * Components: 143
+ * Last updated: 2026-06-01T18:32:39.302Z
+ * Components: 187
  */
 export interface PropInfo {
     name: string;

package/demo/pages/datatable/DataTablePage.d.ts

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

package/demo/pages/datatable/datatable-sections/ColumnsSection.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+declare const ColumnsSection: React.FC;
+export default ColumnsSection;

package/demo/pages/datatable/datatable-sections/DataFetchingSection.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+declare const DataFetchingSection: React.FC;
+export default DataFetchingSection;

package/demo/pages/datatable/datatable-sections/DocumentationSection.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+declare const DocumentationSection: React.FC;
+export default DocumentationSection;

package/demo/pages/datatable/datatable-sections/ExamplesSection.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+declare const ExamplesSection: React.FC;
+export default ExamplesSection;

package/demo/pages/datatable/datatable-sections/PlaygroundSection.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+declare const PlaygroundSection: React.FC;
+export default PlaygroundSection;

package/demo/pages/datatable/datatable-sections/SearchSection.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+declare const SearchSection: React.FC;
+export default SearchSection;

package/demo/pages/index.d.ts

@@ -39,3 +39,4 @@ export * from './macos/MacOSShowcase';
 export * from './macos/MacOSSonomaShowcase';
 export * from './macos/MacOSTahoeShowcase';
 export * from './mcp/MCPServerPage';
+export * from './datatable/DataTablePage';

package/documentation/APIReferenceSection-DhLda4os.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-DWDUS-PU.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/APIReferenceSection-bp_k9Tqz.js

@@ -0,0 +1,213 @@
+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-DoxeCFUJ.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/ActiveLinkSection-VZpThvCH.js

@@ -0,0 +1,79 @@
+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-DoxeCFUJ.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-tNH1S8co.js

@@ -0,0 +1,23 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-DWDUS-PU.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;