@e-burgos/tucu-ui 2.5.0 → 2.6.0

package/documentation/BarChartSection-DZmMeDJ_.js

@@ -0,0 +1,127 @@
+import { jsxs as l, Fragment as d, jsx as a } from "react/jsx-runtime";
+import { T as n, C as e, a as s, l as t, c as i, P as m, A as c } from "../index-DoxeCFUJ.js";
+import "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const r = [
+  { name: "Jan", sales: 4e3, returns: 400, target: 4500 },
+  { name: "Feb", sales: 3e3, returns: 300, target: 3500 },
+  { name: "Mar", sales: 5e3, returns: 500, target: 4800 },
+  { name: "Apr", sales: 4780, returns: 478, target: 5e3 },
+  { name: "May", sales: 5890, returns: 589, target: 5500 },
+  { name: "Jun", sales: 6390, returns: 639, target: 6e3 }
+], N = () => /* @__PURE__ */ l(d, { children: [
+  /* @__PURE__ */ l("div", { className: "text-center space-y-4", children: [
+    /* @__PURE__ */ a(n, { tag: "h2", className: "text-base md:text-base font-semibold", children: "BarChart" }),
+    /* @__PURE__ */ a(
+      n,
+      {
+        tag: "p",
+        className: "text-sm text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+        children: "Bar chart component for comparing categorical data with support for stacking, horizontal layout, and custom bar styling."
+      }
+    )
+  ] }),
+  /* @__PURE__ */ a(e, { className: "overflow-hidden", children: /* @__PURE__ */ a(s, { title: "Basic Bar Chart", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a(
+    t,
+    {
+      data: r,
+      series: [
+        { dataKey: "sales", name: "Sales" },
+        { dataKey: "returns", name: "Returns" }
+      ],
+      height: 300
+    }
+  ) }) }) }),
+  /* @__PURE__ */ a(e, { className: "overflow-hidden", children: /* @__PURE__ */ a(s, { title: "Stacked Bars", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a(
+    t,
+    {
+      data: r,
+      series: [
+        { dataKey: "sales", name: "Sales", stackId: "a" },
+        { dataKey: "returns", name: "Returns", stackId: "a" }
+      ],
+      stacked: !0,
+      height: 300
+    }
+  ) }) }) }),
+  /* @__PURE__ */ a(e, { className: "overflow-hidden", children: /* @__PURE__ */ a(s, { title: "Horizontal Layout", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a(
+    t,
+    {
+      data: r,
+      series: [{ dataKey: "sales", name: "Sales" }],
+      layout: "vertical",
+      height: 350
+    }
+  ) }) }) }),
+  /* @__PURE__ */ a(e, { className: "overflow-hidden", children: /* @__PURE__ */ a(s, { title: "Usage", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a(
+    i,
+    {
+      code: `import { BarChart } from '@e-burgos/tucu-ui';
+
+const data = [
+  { name: 'Jan', sales: 4000, returns: 400 },
+  { name: 'Feb', sales: 3000, returns: 300 },
+  { name: 'Mar', sales: 5000, returns: 500 },
+];
+
+<BarChart
+  data={data}
+  series={[
+    { dataKey: 'sales', name: 'Sales' },
+    { dataKey: 'returns', name: 'Returns' },
+  ]}
+  height={300}
+  layout="horizontal"
+  stacked={false}
+  barRadius={4}
+  barGap={4}
+  showGrid
+  showTooltip
+  showLegend
+/>`,
+      language: "tsx"
+    }
+  ) }) }) }),
+  /* @__PURE__ */ a(
+    m,
+    {
+      componentName: "BarChart",
+      defaultValues: {
+        height: 300,
+        stacked: !1,
+        layout: "horizontal",
+        showGrid: !0,
+        showTooltip: !0,
+        showLegend: !0,
+        barRadius: 4,
+        barGap: 4,
+        animate: !0
+      },
+      excludeProps: [
+        "data",
+        "series",
+        "colors",
+        "className",
+        "xAxisKey",
+        "emptyMessage"
+      ],
+      children: (o) => /* @__PURE__ */ a(
+        t,
+        {
+          data: r,
+          series: [
+            { dataKey: "sales", name: "Sales" },
+            { dataKey: "returns", name: "Returns" }
+          ],
+          ...o
+        }
+      )
+    }
+  ),
+  /* @__PURE__ */ a(c, { componentName: "BarChart" })
+] });
+export {
+  N as default
+};

package/documentation/BasicTableSection-CKpQEXFP.js

@@ -0,0 +1,36 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-DWDUS-PU.js"),r=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const o=()=>{const s=[{key:"name",label:"Name"},{key:"age",label:"Age"},{key:"city",label:"City"}],l=[{name:"John Doe",age:30,city:"New York"},{name:"Jane Smith",age:25,city:"Los Angeles"},{name:"Bob Johnson",age:35,city:"Chicago"}];return e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"BasicTable",description:`A flexible and customizable table component with support for custom
+          rendering, styling, and interactions.`,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-teal-500 to-cyan-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(r.Table2,{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(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.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(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Basic Table"}),e.jsx(a.BasicTable,{columns:s,data:l})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Striped Table"}),e.jsx(a.BasicTable,{columns:s,data:l,striped:!0})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Without Border"}),e.jsx(a.BasicTable,{columns:s,data:l,border:!1})]})]})})})}),e.jsx(a.PropPlayground,{componentName:"BasicTable",title:"BasicTable Playground",defaultValues:{border:!1,hoverable:!0,rounded:!0,striped:!1,showHeader:!0,resizable:!1},excludeProps:["columns","data","className","containerClassName","headerClassName","tableClassName","rowClassName","maxRows"],children:t=>e.jsx(a.BasicTable,{...t,columns:[{key:"name",label:"Name"},{key:"role",label:"Role"},{key:"status",label:"Status"}],data:[{name:"Alice",role:"Developer",status:"Active"},{name:"Bob",role:"Designer",status:"Inactive"},{name:"Carol",role:"Manager",status:"Active"}]})}),e.jsx(a.AutoPropsTable,{componentName:"BasicTable"}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.CodeBlock,{language:"tsx",code:`import { BasicTable } from '@e-burgos/tucu-ui';
+
+const columns = [
+  { key: 'name', label: 'Name' },
+  { key: 'age', label: 'Age' },
+  { key: 'city', label: 'City' },
+];
+
+const data = [
+  { name: 'John Doe', age: 30, city: 'New York' },
+  { name: 'Jane Smith', age: 25, city: 'Los Angeles' },
+  { name: 'Bob Johnson', age: 35, city: 'Chicago' },
+];
+
+// Basic usage
+<BasicTable columns={columns} data={data} />
+
+// With custom render
+const columnsWithRender = [
+  {
+    key: 'name',
+    label: 'Name',
+    render: (value) => <strong>{value}</strong>,
+  },
+  { key: 'age', label: 'Age' },
+];
+
+// Striped table
+<BasicTable columns={columns} data={data} striped />
+
+// Without border
+<BasicTable columns={columns} data={data} border={false} />
+
+// Without hover effect
+<BasicTable columns={columns} data={data} hoverable={false} />`})})})})]})};exports.default=o;

package/documentation/BasicTableSection-Dk1pMX7T.js

@@ -0,0 +1,133 @@
+import { jsxs as a, Fragment as m, jsx as e } from "react/jsx-runtime";
+import { H as i, C as l, a as n, T as r, y as s, P as d, A as u, c as h } from "../index-DoxeCFUJ.js";
+import { Table2 as b } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const B = () => {
+  const t = [
+    { key: "name", label: "Name" },
+    { key: "age", label: "Age" },
+    { key: "city", label: "City" }
+  ], o = [
+    { name: "John Doe", age: 30, city: "New York" },
+    { name: "Jane Smith", age: 25, city: "Los Angeles" },
+    { name: "Bob Johnson", age: 35, city: "Chicago" }
+  ];
+  return /* @__PURE__ */ a(m, { children: [
+    /* @__PURE__ */ e(
+      i,
+      {
+        title: "BasicTable",
+        description: `A flexible and customizable table component with support for custom
+          rendering, styling, and interactions.`,
+        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-teal-500 to-cyan-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(b, { 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(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ a(l, { className: "p-4", children: [
+        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Basic Table" }),
+        /* @__PURE__ */ e(s, { columns: t, data: o })
+      ] }),
+      /* @__PURE__ */ a(l, { className: "p-4", children: [
+        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Striped Table" }),
+        /* @__PURE__ */ e(
+          s,
+          {
+            columns: t,
+            data: o,
+            striped: !0
+          }
+        )
+      ] }),
+      /* @__PURE__ */ a(l, { className: "p-4", children: [
+        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Without Border" }),
+        /* @__PURE__ */ e(
+          s,
+          {
+            columns: t,
+            data: o,
+            border: !1
+          }
+        )
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ e(
+      d,
+      {
+        componentName: "BasicTable",
+        title: "BasicTable Playground",
+        defaultValues: {
+          border: !1,
+          hoverable: !0,
+          rounded: !0,
+          striped: !1,
+          showHeader: !0,
+          resizable: !1
+        },
+        excludeProps: ["columns", "data", "className", "containerClassName", "headerClassName", "tableClassName", "rowClassName", "maxRows"],
+        children: (c) => /* @__PURE__ */ e(
+          s,
+          {
+            ...c,
+            columns: [
+              { key: "name", label: "Name" },
+              { key: "role", label: "Role" },
+              { key: "status", label: "Status" }
+            ],
+            data: [
+              { name: "Alice", role: "Developer", status: "Active" },
+              { name: "Bob", role: "Designer", status: "Inactive" },
+              { name: "Carol", role: "Manager", status: "Active" }
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ e(u, { componentName: "BasicTable" }),
+    /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { 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 { BasicTable } from '@e-burgos/tucu-ui';
+
+const columns = [
+  { key: 'name', label: 'Name' },
+  { key: 'age', label: 'Age' },
+  { key: 'city', label: 'City' },
+];
+
+const data = [
+  { name: 'John Doe', age: 30, city: 'New York' },
+  { name: 'Jane Smith', age: 25, city: 'Los Angeles' },
+  { name: 'Bob Johnson', age: 35, city: 'Chicago' },
+];
+
+// Basic usage
+<BasicTable columns={columns} data={data} />
+
+// With custom render
+const columnsWithRender = [
+  {
+    key: 'name',
+    label: 'Name',
+    render: (value) => <strong>{value}</strong>,
+  },
+  { key: 'age', label: 'Age' },
+];
+
+// Striped table
+<BasicTable columns={columns} data={data} striped />
+
+// Without border
+<BasicTable columns={columns} data={data} border={false} />
+
+// Without hover effect
+<BasicTable columns={columns} data={data} hoverable={false} />`
+      }
+    ) }) }) })
+  ] });
+};
+export {
+  B as default
+};

package/documentation/BasicUsageSection-C6jzFsy4.js

@@ -0,0 +1,45 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-DWDUS-PU.js"),r=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const s=()=>e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"Basic Usage",description:"Get started with the form system in three steps: define your types, set defaults, and compose your form with Form + FormField.",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-green-500 via-emerald-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(r.Code,{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(a.Typography,{tag:"h2",className:"mb-2",children:"Step by Step"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Three steps to create a fully typed, validated form"})]}),e.jsxs("div",{className:"space-y-6",children:[e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"1. Define Form Values Interface",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-4 p-4 sm:p-6",children:[e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Start by defining a TypeScript interface for your form data. This enables type-safe field names and submission handlers."}),e.jsx(a.CodeBlock,{language:"tsx",code:`export interface FormValues {
+  name: string;
+  email: string;
+  password: string;
+  message: string;
+  acceptTerms: boolean;
+  age: number;
+  gender: string;
+  country: string;
+}`})]})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"2. Create Default Values",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-4 p-4 sm:p-6",children:[e.jsxs(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:["Define default values matching your interface. These initialize the form and are used by"," ",e.jsx("code",{className:"px-1 py-0.5 border border-border rounded text-xs",children:"reset()"}),"."]}),e.jsx(a.CodeBlock,{language:"ts",code:`export const defaultValues: FormValues = {
+  name: '',
+  email: '',
+  password: '',
+  message: '',
+  acceptTerms: false,
+  age: 0,
+  gender: '',
+  country: 'ar',
+};`})]})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"3. Compose the Form",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-4 p-4 sm:p-6",children:[e.jsxs(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:["Use"," ",e.jsx("code",{className:"px-1 py-0.5 border border-border rounded text-xs",children:"<Form>"})," ","as the container and"," ",e.jsx("code",{className:"px-1 py-0.5 border border-border rounded text-xs",children:"<FormField>"})," ","to wrap each input. FormField handles registration, error display, and labeling."]}),e.jsx(a.CodeBlock,{language:"tsx",code:`import { Form, FormField, Input, Button } from '@e-burgos/tucu-ui';
+
+function ContactForm() {
+  const handleSubmit = (data: FormValues) => {
+    console.log('Form submitted:', data);
+  };
+
+  return (
+    <Form<FormValues>
+      onSubmit={handleSubmit}
+      useFormProps={{
+        defaultValues: defaultValues,
+        mode: 'onChange',
+      }}
+    >
+      <FormField<FormValues> name="name" label="Name">
+        <Input placeholder="Enter your name" />
+      </FormField>
+
+      <FormField<FormValues> name="email" label="Email">
+        <Input type="email" placeholder="Enter your email" />
+      </FormField>
+
+      <Button type="submit">Submit</Button>
+    </Form>
+  );
+}`})]})})})]})]})]});exports.default=s;

package/documentation/BasicUsageSection-Cr562E1H.js

@@ -0,0 +1,133 @@
+import { jsxs as a, Fragment as l, jsx as e } from "react/jsx-runtime";
+import { H as d, T as r, C as t, a as s, c as o } from "../index-DoxeCFUJ.js";
+import { Code as m } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const F = () => /* @__PURE__ */ a(l, { children: [
+  /* @__PURE__ */ e(
+    d,
+    {
+      title: "Basic Usage",
+      description: "Get started with the form system in three steps: define your types, set defaults, and compose your form with Form + FormField.",
+      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-green-500 via-emerald-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(m, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
+    }
+  ),
+  /* @__PURE__ */ a("section", { className: "space-y-8", children: [
+    /* @__PURE__ */ a("div", { className: "text-center", children: [
+      /* @__PURE__ */ e(r, { tag: "h2", className: "mb-2", children: "Step by Step" }),
+      /* @__PURE__ */ e(
+        r,
+        {
+          tag: "p",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "Three steps to create a fully typed, validated form"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ a("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(
+        s,
+        {
+          title: "1. Define Form Values Interface",
+          className: "mt-2 mb-2",
+          children: /* @__PURE__ */ a("div", { className: "w-full space-y-4 p-4 sm:p-6", children: [
+            /* @__PURE__ */ e(
+              r,
+              {
+                tag: "p",
+                className: "text-gray-600 dark:text-gray-400",
+                children: "Start by defining a TypeScript interface for your form data. This enables type-safe field names and submission handlers."
+              }
+            ),
+            /* @__PURE__ */ e(o, { language: "tsx", code: `export interface FormValues {
+  name: string;
+  email: string;
+  password: string;
+  message: string;
+  acceptTerms: boolean;
+  age: number;
+  gender: string;
+  country: string;
+}` })
+          ] })
+        }
+      ) }),
+      /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "2. Create Default Values", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full space-y-4 p-4 sm:p-6", children: [
+        /* @__PURE__ */ a(
+          r,
+          {
+            tag: "p",
+            className: "text-gray-600 dark:text-gray-400",
+            children: [
+              "Define default values matching your interface. These initialize the form and are used by",
+              " ",
+              /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-border rounded text-xs", children: "reset()" }),
+              "."
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(o, { language: "ts", code: `export const defaultValues: FormValues = {
+  name: '',
+  email: '',
+  password: '',
+  message: '',
+  acceptTerms: false,
+  age: 0,
+  gender: '',
+  country: 'ar',
+};` })
+      ] }) }) }),
+      /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "3. Compose the Form", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full space-y-4 p-4 sm:p-6", children: [
+        /* @__PURE__ */ a(
+          r,
+          {
+            tag: "p",
+            className: "text-gray-600 dark:text-gray-400",
+            children: [
+              "Use",
+              " ",
+              /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-border rounded text-xs", children: "<Form>" }),
+              " ",
+              "as the container and",
+              " ",
+              /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-border rounded text-xs", children: "<FormField>" }),
+              " ",
+              "to wrap each input. FormField handles registration, error display, and labeling."
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(o, { language: "tsx", code: `import { Form, FormField, Input, Button } from '@e-burgos/tucu-ui';
+
+function ContactForm() {
+  const handleSubmit = (data: FormValues) => {
+    console.log('Form submitted:', data);
+  };
+
+  return (
+    <Form<FormValues>
+      onSubmit={handleSubmit}
+      useFormProps={{
+        defaultValues: defaultValues,
+        mode: 'onChange',
+      }}
+    >
+      <FormField<FormValues> name="name" label="Name">
+        <Input placeholder="Enter your name" />
+      </FormField>
+
+      <FormField<FormValues> name="email" label="Email">
+        <Input type="email" placeholder="Enter your email" />
+      </FormField>
+
+      <Button type="submit">Submit</Button>
+    </Form>
+  );
+}` })
+      ] }) }) })
+    ] })
+  ] })
+] });
+export {
+  F as default
+};

package/documentation/BestPracticesSection-BLDoPxOK.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-DWDUS-PU.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const o=()=>{const i=["Use descriptive route names and paths","Keep route hierarchy shallow (max 2-3 levels)","Use consistent naming conventions across routes","Leverage TypeScript for type-safe route definitions","Use useMemo for dynamic route generation","Include icons for better navigation UX","Test routes with different user roles and permissions","Use basePath for MFE applications","Provide isAuthenticated and loginUrl in MFE mode","Use enableNestedRoutes when child components need internal routing"],n=["Create overly deep nesting (>3 levels)",'Use generic names like "Page" or "Component"',"Hardcode paths in components — use ReactRouter hooks","Forget to handle 404 pages with customRoutes","Mix routing logic with business logic","Skip accessibility considerations in navigation","Ignore mobile navigation UX patterns","Mix Standalone and MFE props in the same ThemeProvider","Import directly from react-router-dom — use ReactRouter namespace","Use StandaloneAppThemeProvider directly — use ThemeProvider"];return e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"Best Practices",description:"Guidelines for building maintainable, accessible, and type-safe routing configurations.",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-green-500 via-emerald-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(a.ShieldCheck,{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(s.Typography,{tag:"h2",className:"mb-2",children:"Recommendations"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Follow these guidelines for robust routing"})]}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-6",children:[e.jsx(s.CardContainer,{children:e.jsxs("div",{className:"p-6 space-y-4",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-green-500 to-emerald-500 shadow-lg",children:e.jsx(a.Check,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h3",className:"font-semibold",children:"Do's"})]}),e.jsx("ul",{className:"space-y-2",children:i.map((t,r)=>e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(a.Check,{className:"w-4 h-4 text-green-500 mt-0.5 shrink-0"}),e.jsx("span",{className:"text-sm",children:t})]},r))})]})}),e.jsx(s.CardContainer,{children:e.jsxs("div",{className:"p-6 space-y-4",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-red-500 to-rose-500 shadow-lg",children:e.jsx(a.X,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h3",className:"font-semibold",children:"Don'ts"})]}),e.jsx("ul",{className:"space-y-2",children:n.map((t,r)=>e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(a.X,{className:"w-4 h-4 text-red-500 mt-0.5 shrink-0"}),e.jsx("span",{className:"text-sm",children:t})]},r))})]})})]})]})]})};exports.default=o;

package/documentation/BestPracticesSection-BNrOOboM.js

@@ -0,0 +1,137 @@
+import { jsxs as t, Fragment as c, jsx as e } from "react/jsx-runtime";
+import { H as d, T as a, C as r } from "../index-DoxeCFUJ.js";
+import { ShieldCheck as m, CheckCircle as h, Check as p, XCircle as u, X as g, Palette as x, ArrowDownUp as b, AlertCircle as f, Bell as w } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const T = () => {
+  const l = [
+    "Use semantic HTML elements (button, nav, main, aside, header)",
+    "Always provide label prop on Input, Select, and Checkbox",
+    "Use helperText to give additional context to form fields",
+    "Test with keyboard-only navigation before shipping",
+    "Use aria-label when visual label is not possible",
+    "Set dismissible={true} on non-critical alerts",
+    "Use the correct variant on Alert (info/warning/error/success)",
+    "Trust built-in ARIA — components auto-wire roles and attributes"
+  ], n = [
+    "Don't use div or span for interactive elements — use Button",
+    "Don't rely on color alone to convey information",
+    "Don't suppress focus outlines (outline-none without replacement)",
+    "Don't use aria-label when a visible label exists (duplicates)",
+    "Don't auto-play animations without prefers-reduced-motion check",
+    "Don't trap focus in elements that shouldn't trap (non-modal)",
+    "Don't use placeholder as a substitute for label",
+    "Don't disable zoom on mobile viewports"
+  ], o = [
+    {
+      title: "Color Contrast",
+      description: "Maintain minimum 4.5:1 ratio for normal text, 3:1 for large text. Use browser DevTools to check.",
+      icon: /* @__PURE__ */ e(x, { className: "w-5 h-5 text-purple-500" })
+    },
+    {
+      title: "Focus Order",
+      description: "Ensure Tab order follows visual reading order. Never use positive tabIndex values.",
+      icon: /* @__PURE__ */ e(b, { className: "w-5 h-5 text-blue-500" })
+    },
+    {
+      title: "Error Messages",
+      description: "Connect errors to fields via aria-describedby. tucu-ui Input/Select/Checkbox do this automatically.",
+      icon: /* @__PURE__ */ e(f, { className: "w-5 h-5 text-red-500" })
+    },
+    {
+      title: "Live Regions",
+      description: 'Use Alert component for dynamic content — it includes role="alert" and aria-live="assertive" built-in.',
+      icon: /* @__PURE__ */ e(w, { className: "w-5 h-5 text-amber-500" })
+    }
+  ];
+  return /* @__PURE__ */ t(c, { children: [
+    /* @__PURE__ */ e(
+      d,
+      {
+        title: "Best Practices",
+        description: "Guidelines for maintaining accessibility when building with tucu-ui. Follow these patterns to ensure your application is usable by everyone.",
+        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-green-500 via-emerald-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(m, { 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(a, { tag: "h2", className: "mb-2", children: "Do's and Don'ts" }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            tag: "p",
+            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+            children: "Quick reference for accessible patterns"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ t("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6", children: [
+        /* @__PURE__ */ e(r, { children: /* @__PURE__ */ t("div", { className: "w-full p-4 sm:p-6 space-y-3", children: [
+          /* @__PURE__ */ t("div", { className: "flex items-center gap-2 mb-4", children: [
+            /* @__PURE__ */ e(h, { className: "w-5 h-5 text-green-500" }),
+            /* @__PURE__ */ e(a, { tag: "h3", className: "font-semibold text-green-700 dark:text-green-400", children: "Do" })
+          ] }),
+          l.map((s, i) => /* @__PURE__ */ t("div", { className: "flex items-start gap-2", children: [
+            /* @__PURE__ */ e(p, { className: "w-4 h-4 text-green-500 shrink-0 mt-0.5" }),
+            /* @__PURE__ */ e(
+              a,
+              {
+                tag: "span",
+                className: "text-sm text-gray-600 dark:text-gray-400",
+                children: s
+              }
+            )
+          ] }, i))
+        ] }) }),
+        /* @__PURE__ */ e(r, { children: /* @__PURE__ */ t("div", { className: "w-full p-4 sm:p-6 space-y-3", children: [
+          /* @__PURE__ */ t("div", { className: "flex items-center gap-2 mb-4", children: [
+            /* @__PURE__ */ e(u, { className: "w-5 h-5 text-red-500" }),
+            /* @__PURE__ */ e(a, { tag: "h3", className: "font-semibold text-red-700 dark:text-red-400", children: "Don't" })
+          ] }),
+          n.map((s, i) => /* @__PURE__ */ t("div", { className: "flex items-start gap-2", children: [
+            /* @__PURE__ */ e(g, { className: "w-4 h-4 text-red-500 shrink-0 mt-0.5" }),
+            /* @__PURE__ */ e(
+              a,
+              {
+                tag: "span",
+                className: "text-sm text-gray-600 dark:text-gray-400",
+                children: s
+              }
+            )
+          ] }, i))
+        ] }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ t("section", { className: "space-y-8", children: [
+      /* @__PURE__ */ t("div", { className: "text-center", children: [
+        /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Quick Tips" }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            tag: "p",
+            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+            children: "Common accessibility patterns to keep in mind"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6", children: o.map((s, i) => /* @__PURE__ */ e(r, { children: /* @__PURE__ */ t("div", { className: "w-full p-4 sm:p-6 space-y-2", children: [
+        /* @__PURE__ */ t("div", { className: "flex items-center gap-3", children: [
+          s.icon,
+          /* @__PURE__ */ e(a, { tag: "h3", className: "font-semibold", children: s.title })
+        ] }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            tag: "p",
+            className: "text-sm text-gray-600 dark:text-gray-400 leading-relaxed",
+            children: s.description
+          }
+        )
+      ] }) }, i)) })
+    ] })
+  ] });
+};
+export {
+  T as default
+};

package/documentation/BestPracticesSection-BVQwqior.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-DWDUS-PU.js"),t=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const o=()=>{const i=["Use semantic HTML elements (button, nav, main, aside, header)","Always provide label prop on Input, Select, and Checkbox","Use helperText to give additional context to form fields","Test with keyboard-only navigation before shipping","Use aria-label when visual label is not possible","Set dismissible={true} on non-critical alerts","Use the correct variant on Alert (info/warning/error/success)","Trust built-in ARIA — components auto-wire roles and attributes"],l=["Don't use div or span for interactive elements — use Button","Don't rely on color alone to convey information","Don't suppress focus outlines (outline-none without replacement)","Don't use aria-label when a visible label exists (duplicates)","Don't auto-play animations without prefers-reduced-motion check","Don't trap focus in elements that shouldn't trap (non-modal)","Don't use placeholder as a substitute for label","Don't disable zoom on mobile viewports"],n=[{title:"Color Contrast",description:"Maintain minimum 4.5:1 ratio for normal text, 3:1 for large text. Use browser DevTools to check.",icon:e.jsx(t.Palette,{className:"w-5 h-5 text-purple-500"})},{title:"Focus Order",description:"Ensure Tab order follows visual reading order. Never use positive tabIndex values.",icon:e.jsx(t.ArrowDownUp,{className:"w-5 h-5 text-blue-500"})},{title:"Error Messages",description:"Connect errors to fields via aria-describedby. tucu-ui Input/Select/Checkbox do this automatically.",icon:e.jsx(t.AlertCircle,{className:"w-5 h-5 text-red-500"})},{title:"Live Regions",description:'Use Alert component for dynamic content — it includes role="alert" and aria-live="assertive" built-in.',icon:e.jsx(t.Bell,{className:"w-5 h-5 text-amber-500"})}];return e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"Best Practices",description:"Guidelines for maintaining accessibility when building with tucu-ui. Follow these patterns to ensure your application is usable by everyone.",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-green-500 via-emerald-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(t.ShieldCheck,{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(s.Typography,{tag:"h2",className:"mb-2",children:"Do's and Don'ts"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Quick reference for accessible patterns"})]}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6",children:[e.jsx(s.CardContainer,{children:e.jsxs("div",{className:"w-full p-4 sm:p-6 space-y-3",children:[e.jsxs("div",{className:"flex items-center gap-2 mb-4",children:[e.jsx(t.CheckCircle,{className:"w-5 h-5 text-green-500"}),e.jsx(s.Typography,{tag:"h3",className:"font-semibold text-green-700 dark:text-green-400",children:"Do"})]}),i.map((a,r)=>e.jsxs("div",{className:"flex items-start gap-2",children:[e.jsx(t.Check,{className:"w-4 h-4 text-green-500 shrink-0 mt-0.5"}),e.jsx(s.Typography,{tag:"span",className:"text-sm text-gray-600 dark:text-gray-400",children:a})]},r))]})}),e.jsx(s.CardContainer,{children:e.jsxs("div",{className:"w-full p-4 sm:p-6 space-y-3",children:[e.jsxs("div",{className:"flex items-center gap-2 mb-4",children:[e.jsx(t.XCircle,{className:"w-5 h-5 text-red-500"}),e.jsx(s.Typography,{tag:"h3",className:"font-semibold text-red-700 dark:text-red-400",children:"Don't"})]}),l.map((a,r)=>e.jsxs("div",{className:"flex items-start gap-2",children:[e.jsx(t.X,{className:"w-4 h-4 text-red-500 shrink-0 mt-0.5"}),e.jsx(s.Typography,{tag:"span",className:"text-sm text-gray-600 dark:text-gray-400",children:a})]},r))]})})]})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(s.Typography,{tag:"h2",className:"mb-2",children:"Quick Tips"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Common accessibility patterns to keep in mind"})]}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6",children:n.map((a,r)=>e.jsx(s.CardContainer,{children:e.jsxs("div",{className:"w-full p-4 sm:p-6 space-y-2",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[a.icon,e.jsx(s.Typography,{tag:"h3",className:"font-semibold",children:a.title})]}),e.jsx(s.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 leading-relaxed",children:a.description})]})},r))})]})]})};exports.default=o;