@e-burgos/tucu-ui 1.1.1 → 2.0.0

package/demo/pages/form-system/example/constants.d.ts

@@ -0,0 +1,12 @@
+export declare const countryOptions: {
+    name: string;
+    value: string;
+}[];
+export declare const genderOptions: {
+    value: string;
+    label: string;
+}[];
+export declare const developerOptions: {
+    value: boolean;
+    label: string;
+}[];

package/demo/pages/form-system/example/simple-form-example.d.ts

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

package/demo/pages/form-system/form-example-page.d.ts

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

package/demo/pages/form-system/form-system-sections/AdvancedFeaturesSection.d.ts

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

package/demo/pages/form-system/form-system-sections/ArchitectureOverviewSection.d.ts

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

package/demo/pages/form-system/form-system-sections/BasicUsageSection.d.ts

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

package/demo/pages/form-system/form-system-sections/BestPracticesSection.d.ts

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

package/demo/pages/form-system/form-system-sections/FormComponentsSection.d.ts

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

package/demo/pages/form-system/form-system-sections/FormMethodsSection.d.ts

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

package/demo/pages/form-system/form-system-sections/LiveDemoSection.d.ts

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

package/demo/pages/form-system/form-system-sections/ValidationSystemSection.d.ts

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

package/demo/pages/index.d.ts

@@ -0,0 +1,36 @@
+export * from './blockchain/BlockchainComponents';
+export * from './components/ComponentsIntroduction';
+export * from './components/InputsComponents';
+export * from './components/UiComponents';
+export * from './design-system/DesignSystem';
+export * from './design-system/LayoutSystem';
+export * from './design-system/ThemingGuide';
+export * from './features/Accessibility';
+export * from './features/FeaturesIntroduction';
+export * from './features/HooksUtilities';
+export * from './features/IconsSystem';
+export * from './features/RoutingSystem';
+export * from './form-system/code-example-page';
+export * from './form-system/example/constants';
+export * from './form-system/example/simple-form-example';
+export * from './form-system/form-example-page';
+export * from './form-system/FormSystem';
+export * from './introduction/BasicUsageDemo';
+export * from './introduction/BasicUsageExampleCode';
+export * from './introduction/BasicUsageWithCustomRouterExampleCode';
+export * from './introduction/index';
+export * from './tailwind/AccessibilityUtilities';
+export * from './tailwind/BackgroundUtilities';
+export * from './tailwind/BordersUtilities';
+export * from './tailwind/Colors';
+export * from './tailwind/EffectsUtilities';
+export * from './tailwind/FiltersUtilities';
+export * from './tailwind/FlexboxGridUtilities';
+export * from './tailwind/InteractivityUtilities';
+export * from './tailwind/LayoutUtilities';
+export * from './tailwind/SVGUtilities';
+export * from './tailwind/TablesUtilities';
+export * from './tailwind/TailwindIntroduction';
+export * from './tailwind/TransformsUtilities';
+export * from './tailwind/TransitionsAnimations';
+export * from './tailwind/TypographyUtilities';

package/demo/pages/introduction/BasicUsageDemo.d.ts

@@ -0,0 +1 @@
+export declare const Home: () => JSX.Element;

package/demo/pages/introduction/BasicUsageExampleCode.d.ts

@@ -0,0 +1 @@
+export declare const BasicUsageExampleCode = "import {\n  Button,\n  CardContainer,\n  Avatar,\n  ThemeProvider,\n  Typography,\n  Badge,\n  LucideIcons,\n} from '@e-burgos/tucu-ui';\nimport '@e-burgos/tucu-ui/styles';\n\nfunction App() {\n  return (\n    <ThemeProvider\n      showSettings\n      logo={{\n        name: 'My',\n        secondName: 'App',\n      }}\n      rightButton={\n        <Button variant=\"ghost\" size=\"small\">\n          Documentation\n        </Button>\n      }\n      menuItems={[\n        {\n          name: 'Home',\n          path: '/',\n          icon: <LucideIcons.Home />,\n          component: <Home />,\n        },\n        {\n          name: 'About',\n          path: '/about',\n          icon: <LucideIcons.Info />,\n          component: <About />,\n        },\n      ]}\n    />\n  );\n}\n\nexport default App;\n\nexport const Home = (): JSX.Element => {\n  const avatarImg =\n    'https://e7.pngegg.com/pngimages/799/987/png-clipart-computer-icons-avatar-icon-design-avatar-heroes-computer-wallpaper-thumbnail.png';\n\n  return (\n    <CardContainer className=\"flex flex-col items-center justify-center p-6 gap-4\">\n      <Avatar image={avatarImg} alt=\"Demo User\" size=\"md\" />\n      <div className=\"flex flex-col\">\n        <Typography tag=\"h3\" className=\"font-semibold mb-2 text-center\">\n          Welcome to Tucu UI\n        </Typography>\n        <div className=\"flex flex-wrap gap-2 justify-center sm:justify-start\">\n          <Badge status=\"active\">Production Ready</Badge>\n          <Badge variant=\"outline\" color=\"info\">\n            TypeScript\n          </Badge>\n          <Badge variant=\"outline\" color=\"success\">\n            React Hook Form\n          </Badge>\n          <Badge variant=\"outline\" color=\"warning\">\n            Tailwind CSS\n          </Badge>\n        </div>\n      </div>\n      <Button size=\"large\" shape=\"rounded\" variant=\"solid\" color=\"primary\">\n        <div className=\"flex justify-center items-center\">\n          <LucideIcons.Zap className=\"w-4 h-4 mr-2\" />\n          Get Started\n        </div>\n      </Button>\n    </CardContainer>\n  );\n};\n\nexport const About = (): JSX.Element => {\n  return (\n    <CardContainer className=\"flex flex-col items-center justify-center p-6 gap-4\">\n      <div className=\"flex flex-col w-full px-4\">\n        <Typography tag=\"h3\" className=\"font-semibold mb-2 text-center\">\n          About My App\n        </Typography>\n        <div className=\"flex flex-wrap gap-2 justify-center sm:justify-start\">\n          <ul className=\"list-disc list-inside\">\n            <li className=\"mb-2\">\n              This is a demo app built with Tucu UI, React, and Tailwind CSS.\n            </li>\n            <li className=\"mb-2\">\n              It is a simple app that allows you to manage your tasks and\n              projects.\n            </li>\n            <li className=\"mb-2\">\n              All the components are built with Tucu UI and are fully\n              responsive.\n            </li>\n            <li className=\"mb-2\">\n              The app is fully responsive and works on all devices.\n            </li>\n            <li className=\"mb-2\">Routes are handled with React Router.</li>\n            <li className=\"mb-2\">\n              Theme is handled with ThemeProvider and Zustand.\n            </li>\n            <li className=\"mb-2\">Icons are handled with Lucide React.</li>\n          </ul>\n        </div>\n      </div>\n    </CardContainer>\n  );\n};\n";

package/demo/pages/introduction/BasicUsageWithCustomRouterExampleCode.d.ts

@@ -0,0 +1 @@
+export declare const BasicUsageWithCustomRouterExampleCode = "import {\n  Button,\n  CardContainer,\n  Avatar,\n  ThemeProvider,\n  Typography,\n  Badge,\n  LucideIcons,\n  ReactRouter,\n} from '@e-burgos/tucu-ui';\nimport '@e-burgos/tucu-ui/styles';\n\nfunction App() {\n  return (\n    <ThemeProvider\n      showSettings\n      layout=\"clean\"\n      menuItems={[]}\n      customRoutes={\n        <ReactRouter.Routes>\n          <ReactRouter.Route path=\"/\" element={<Home />} />\n          <ReactRouter.Route path=\"/about\" element={<About />} />\n        </ReactRouter.Routes>\n      }\n    />\n  );\n}\n\nexport default App;\n\nexport const Home = (): JSX.Element => {\n  const navigate = ReactRouter.useNavigate();\n  const avatarImg =\n    'https://e7.pngegg.com/pngimages/799/987/png-clipart-computer-icons-avatar-icon-design-avatar-heroes-computer-wallpaper-thumbnail.png';\n\n  return (\n    <div className=\"min-h-full px-4 pb-16 pt-16 sm:px-6 sm:pb-20 lg:px-8 xl:pb-24 xl:pt-24 3xl:px-10\">\n      <CardContainer className=\"flex flex-col items-center justify-center p-6 gap-4\">\n        <Avatar image={avatarImg} alt=\"Demo User\" size=\"md\" />\n        <div className=\"flex flex-col\">\n          <Typography tag=\"h3\" className=\"font-semibold mb-2 text-center\">\n            Welcome to Tucu UI\n          </Typography>\n          <div className=\"flex flex-wrap gap-2 justify-center sm:justify-start\">\n            <Badge status=\"active\">Production Ready</Badge>\n            <Badge variant=\"outline\" color=\"info\">\n              TypeScript\n            </Badge>\n            <Badge variant=\"outline\" color=\"success\">\n              React Hook Form\n            </Badge>\n            <Badge variant=\"outline\" color=\"warning\">\n              Tailwind CSS\n            </Badge>\n          </div>\n        </div>\n        <Button\n          size=\"large\"\n          shape=\"rounded\"\n          variant=\"solid\"\n          color=\"primary\"\n          onClick={() => {\n            navigate('/about');\n          }}\n        >\n          <div className=\"flex justify-center items-center\">\n            <LucideIcons.Zap className=\"w-4 h-4 mr-2\" />\n            Go to About\n          </div>\n        </Button>\n      </CardContainer>\n    </div>\n  );\n};\n\nexport const About = (): JSX.Element => {\n  const navigate = ReactRouter.useNavigate();\n  return (\n    <div className=\"min-h-full px-4 pb-16 pt-16 sm:px-6 sm:pb-20 lg:px-8 xl:pb-24 xl:pt-24 3xl:px-10\">\n      <CardContainer className=\"flex flex-col items-center justify-center p-6\">\n        <div className=\"flex flex-col justify-center items-center gap-8 w-full px-4\">\n          <Typography tag=\"h3\" className=\"font-semibold mb-4 text-center\">\n            About My App\n          </Typography>\n          <div className=\"flex flex-wrap gap-2 justify-center sm:justify-start\">\n            <ul className=\"list-disc list-inside\">\n              <li className=\"mb-2\">\n                This is a demo app built with Tucu UI, React, and Tailwind CSS.\n              </li>\n              <li className=\"mb-2\">\n                It is a simple app that allows you to manage your tasks and\n                projects.\n              </li>\n              <li className=\"mb-2\">\n                All the components are built with Tucu UI and are fully\n                responsive.\n              </li>\n              <li className=\"mb-2\">\n                The app is fully responsive and works on all devices.\n              </li>\n              <li className=\"mb-2\">Routes are handled with React Router.</li>\n              <li className=\"mb-2\">\n                Theme is handled with ThemeProvider and Zustand.\n              </li>\n              <li className=\"mb-2\">Icons are handled with Lucide React.</li>\n            </ul>\n          </div>\n        </div>\n        <Button\n          size=\"large\"\n          shape=\"rounded\"\n          variant=\"solid\"\n          color=\"primary\"\n          onClick={() => {\n            navigate('/');\n          }}\n        >\n          Go to Home\n        </Button>\n      </CardContainer>\n    </div>\n  );\n};\n";

package/demo/pages/introduction/ThemeProviderExamples.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Examples demonstrating conditional typing in ThemeProvider
+ * based on architecturalPatterns
+ */
+export declare const StandaloneAppExample = "import { ThemeProvider, LucideIcons } from '@e-burgos/tucu-ui';\nimport '@e-burgos/tucu-ui/styles';\n\nfunction App() {\n  // Single App Pattern (default)\n  // TypeScript will require: menuItems, and optionally customRoutes\n  // TypeScript will NOT allow: basePath or appRoutesConfig\n  \n  return (\n    <ThemeProvider\n      // architecturalPatterns=\"single\" is optional (default)\n      showSettings\n      logo={{\n        name: 'My',\n        secondName: 'App',\n      }}\n      menuItems={[\n        {\n          name: 'Home',\n          path: '/',\n          icon: <LucideIcons.Home />,\n          component: <Home />,\n        },\n        {\n          name: 'Dashboard',\n          path: '/dashboard',\n          icon: <LucideIcons.LayoutDashboard />,\n          component: <Dashboard />,\n        },\n      ]}\n      // customRoutes is optional for more control\n      customRoutes={\n        <Routes>\n          <Route path=\"/\" element={<Home />} />\n          <Route path=\"/dashboard\" element={<Dashboard />} />\n        </Routes>\n      }\n    />\n  );\n}\n\nexport default App;\n";
+export declare const MfeAppExample = "import { ThemeProvider } from '@e-burgos/tucu-ui';\nimport '@e-burgos/tucu-ui/styles';\n\nfunction App() {\n  // MFE Pattern\n  // TypeScript will require: architecturalPatterns=\"mfe\", basePath, appRoutesConfig\n  // TypeScript will NOT allow: menuItems or customRoutes\n  \n  return (\n    <ThemeProvider\n      architecturalPatterns=\"mfe\"\n      basePath=\"/my-app\"\n      appRoutesConfig={[\n        {\n          key: 'home',\n          path: '/',\n          element: <Home />,\n          isPublic: true,\n        },\n        {\n          key: 'dashboard',\n          path: '/dashboard',\n          element: <Dashboard />,\n          isPublic: false,\n        },\n        {\n          key: 'settings',\n          path: '/settings',\n          element: <Settings />,\n          disabled: false,\n        },\n      ]}\n      showSettings\n      logo={{\n        name: 'My',\n        secondName: 'MFE',\n      }}\n    />\n  );\n}\n\nexport default App;\n";
+export declare const ConditionalTypingExplanation = "\n# Conditional Typing in ThemeProvider\n\nThe ThemeProvider uses TypeScript discriminated unions to provide different prop requirements based on the `architecturalPatterns` prop.\n\n## How It Works\n\nThe type system uses a discriminated union:\n\n```typescript\ntype StandaloneAppThemeProviderProps = StandaloneAppProviderProps & {\n  architecturalPatterns?: 'single';\n};\n\ntype MfeThemeProviderProps = MfeAppThemeProviderProps & {\n  architecturalPatterns: 'mfe';\n};\n\ntype ThemeProviderProps = StandaloneAppThemeProviderProps | MfeThemeProviderProps;\n```\n\n## Benefits\n\n### 1. Type Safety\n- **Single App**: TypeScript enforces `menuItems` and allows `customRoutes`\n- **MFE**: TypeScript enforces `basePath` and `appRoutesConfig`\n\n### 2. IntelliSense Support\nWhen you type `architecturalPatterns=\"mfe\"`, your IDE will automatically:\n- Show only relevant props (`basePath`, `appRoutesConfig`)\n- Hide irrelevant props (`menuItems`, `customRoutes`)\n- Provide autocomplete for the correct props\n\n### 3. Compile-Time Errors\nInvalid combinations will fail at compile time:\n\n```typescript\n// \u274C This will fail - mixing MFE pattern with Single App props\n<ThemeProvider\n  architecturalPatterns=\"mfe\"\n  menuItems={[...]}  // Error: Property 'menuItems' does not exist\n/>\n\n// \u274C This will fail - MFE pattern requires basePath and appRoutesConfig\n<ThemeProvider\n  architecturalPatterns=\"mfe\"\n  // Error: Property 'basePath' is missing\n/>\n\n// \u2705 This is correct - MFE pattern with required props\n<ThemeProvider\n  architecturalPatterns=\"mfe\"\n  basePath=\"/app\"\n  appRoutesConfig={[...]}\n/>\n\n// \u2705 This is correct - Single App pattern (default)\n<ThemeProvider\n  menuItems={[...]}\n/>\n```\n\n## Pattern Selection\n\n### Use Single App Pattern when:\n- Building a standalone application\n- You want automatic route generation from menuItems\n- You need simple navigation structure\n- Default pattern (no `architecturalPatterns` prop needed)\n\n### Use MFE Pattern when:\n- Building a micro-frontend architecture\n- You need explicit route configuration\n- You want to integrate multiple apps with a base path\n- You need granular control over route access (isPublic, disabled)\n\n## Advanced Usage\n\n### Single App with Custom Routes\n```typescript\n<ThemeProvider\n  menuItems={menuConfig}\n  customRoutes={\n    <Routes>\n      <Route path=\"/\" element={<Home />} />\n      <Route path=\"/dashboard/*\" element={<Dashboard />}>\n        <Route path=\"analytics\" element={<Analytics />} />\n        <Route path=\"reports\" element={<Reports />} />\n      </Route>\n    </Routes>\n  }\n/>\n```\n\n### MFE with Route Guards\n```typescript\n<ThemeProvider\n  architecturalPatterns=\"mfe\"\n  basePath=\"/admin\"\n  appRoutesConfig={[\n    {\n      key: 'public-home',\n      path: '/',\n      element: <Home />,\n      isPublic: true,  // No authentication required\n    },\n    {\n      key: 'private-dashboard',\n      path: '/dashboard',\n      element: <Dashboard />,\n      isPublic: false,  // Authentication required\n    },\n    {\n      key: 'disabled-feature',\n      path: '/beta-feature',\n      element: <BetaFeature />,\n      disabled: true,  // Temporarily disabled\n    },\n  ]}\n/>\n```\n";

package/demo/pages/introduction/index.d.ts

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

package/demo/pages/tailwind/AccessibilityUtilities.d.ts

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

package/demo/pages/tailwind/BackgroundUtilities.d.ts

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

package/demo/pages/tailwind/BordersUtilities.d.ts

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

package/demo/pages/tailwind/Colors.d.ts

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

package/demo/pages/tailwind/EffectsUtilities.d.ts

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

package/demo/pages/tailwind/FiltersUtilities.d.ts

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

package/demo/pages/tailwind/FlexboxGridUtilities.d.ts

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

package/demo/pages/tailwind/InteractivityUtilities.d.ts

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

package/demo/pages/tailwind/LayoutUtilities.d.ts

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

package/demo/pages/tailwind/SVGUtilities.d.ts

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

package/demo/pages/tailwind/TablesUtilities.d.ts

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

package/demo/pages/tailwind/TailwindIntroduction.d.ts

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

package/demo/pages/tailwind/TransformsUtilities.d.ts

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

package/demo/pages/tailwind/TransitionsAnimations.d.ts

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

package/demo/pages/tailwind/TypographyUtilities.d.ts

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

package/hooks/index.d.ts

@@ -11,3 +11,4 @@ export * from './use-measure';
 export * from './use-scrollable-slider';
 export * from './use-toast-store';
 export * from './use-window-scroll';
+export * from './use-anchor-scroll';

package/hooks/use-anchor-scroll.d.ts

@@ -0,0 +1 @@
+export declare const useAnchorScroll: () => null;

package/hooks/use-window-scroll.d.ts

@@ -1 +1,11 @@
-export { default as useWindowScroll } from 'react-use/lib/useWindowScroll';
+export interface UseWindowScrollReturn {
+    x: number;
+    y: number;
+}
+/**
+ * Hook that tracks window scroll position in real-time
+ * Works with both window scroll and container scroll (e.g., overflow-auto containers)
+ * Detects the actual scrollable container (window, document, or parent container)
+ * @returns Object with x and y scroll positions
+ */
+export declare function useWindowScroll(): UseWindowScrollReturn;