@e-burgos/tucu-ui 2.0.8 → 2.0.9

package/documentation/ValidationSystemSection-CcHCIL8A.js

@@ -0,0 +1,53 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-BaGqriuz.js"),s=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const i=()=>{const l=[{rule:"required",example:"required: 'Field is required'",description:"Makes field required"},{rule:"minLength",example:"minLength: { value: 2, message: '...' }",description:"Minimum string length"},{rule:"maxLength",example:"maxLength: { value: 100, message: '...' }",description:"Maximum string length"},{rule:"pattern",example:"pattern: { value: /regex/, message: '...' }",description:"Regex pattern validation"},{rule:"min",example:"min: { value: 18, message: '...' }",description:"Minimum numeric value"},{rule:"max",example:"max: { value: 100, message: '...' }",description:"Maximum numeric value"},{rule:"validate",example:"validate: { custom: (v) => v > 0 || '...' }",description:"Custom validation function(s)"}],t=[{key:"rule",label:"Rule",render:r=>e.jsx("code",{className:"text-xs text-brand",children:String(r)})},{key:"example",label:"Example",render:r=>e.jsx("code",{className:"text-xs text-gray-600 dark:text-gray-400",children:String(r)})},{key:"description",label:"Description",render:r=>e.jsx("span",{className:"text-xs text-gray-600 dark:text-gray-400",children:String(r)})}];return e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"Validation System",description:"Centralized or per-field validation powered by react-hook-form rules. Supports required, pattern, min/max, and custom async validators.",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-orange-500 via-red-500 to-pink-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(s.Shield,{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:"Validation Approaches"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Two ways to define validation — centralized schema or per-field rules"})]}),e.jsxs("div",{className:"grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6",children:[e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Centralized Schema",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-4 p-4 sm:p-6",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 bg-linear-to-br from-blue-500 to-cyan-500 rounded-lg shadow-lg",children:e.jsx(s.FileText,{className:"w-5 h-5 text-white"})}),e.jsxs(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:["Define all rules in one"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:"FormValidations"})," ","object, pass to Form via"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:"validationSchema"}),"."]})]}),e.jsx(a.CodeBlock,{language:"tsx",code:`import { FormValidations } from '@e-burgos/tucu-ui';
+
+export const formValidations: FormValidations<FormValues> = {
+  name: {
+    required: 'This is a required field.',
+    minLength: {
+      value: 2,
+      message: 'The name must be at least 2 characters long.',
+    },
+  },
+  email: {
+    required: 'This is a required field.',
+    pattern: {
+      value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,}$/i,
+      message: 'Invalid email address.',
+    },
+  },
+};
+
+// Pass to Form — rules auto-applied to all FormFields
+<Form<FormValues>
+  onSubmit={handleSubmit}
+  validationSchema={formValidations}
+  useFormProps={{ defaultValues }}
+>
+  <FormField<FormValues> name="name" label="Name">
+    <Input />
+  </FormField>
+</Form>`})]})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Per-Field Rules",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-4 p-4 sm:p-6",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 bg-linear-to-br from-purple-500 to-violet-500 rounded-lg shadow-lg",children:e.jsx(s.Code,{className:"w-5 h-5 text-white"})}),e.jsxs(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:["Define rules directly on"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:"FormField"})," ","via the"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:"rules"})," ","prop. Overrides schema for that field."]})]}),e.jsx(a.CodeBlock,{language:"tsx",code:`<FormField<FormValues>
+  name="password"
+  label="Password"
+  rules={{
+    required: 'Password is required',
+    minLength: {
+      value: 8,
+      message: 'Password must be at least 8 characters',
+    },
+    validate: {
+      strength: (value) => {
+        const hasUpper = /[A-Z]/.test(value);
+        const hasLower = /[a-z]/.test(value);
+        const hasNumber = /\\d/.test(value);
+        
+        if (!hasUpper || !hasLower || !hasNumber) {
+          return 'Must contain uppercase, lowercase, and number';
+        }
+        return true;
+      }
+    }
+  }}
+>
+  <Input type="password" />
+</FormField>`})]})})})]}),e.jsx(a.Alert,{variant:"info",dismissible:!1,children:e.jsxs("div",{className:"flex flex-col gap-2",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(s.Info,{className:"h-4 w-4"}),e.jsx(a.Typography,{tag:"span",className:"font-semibold",children:"Priority"})]}),e.jsxs(a.Typography,{tag:"p",className:"text-sm",children:["Both approaches can be used together. The"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:"rules"})," ","prop on FormField takes precedence over"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:"validationSchema"})," ","for that specific field."]})]})})]}),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:"Available Rules"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"All validation rules supported by the form system"})]}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.BasicTable,{columns:t,data:l})})})]})]})};exports.default=i;

package/documentation/WCAGPrinciplesSection-BYNqkBJt.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-BaGqriuz.js"),t=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const l=()=>{const s=[{title:"Perceivable",description:"Information and UI components must be presentable to users in ways they can perceive.",icon:e.jsx(t.Eye,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),color:"from-blue-500 via-cyan-500 to-teal-500",features:["Color contrast ratios (4.5:1 for text)","Alt text for images and icons","Scalable text and responsive typography","aria-live regions for dynamic content"]},{title:"Operable",description:"UI components and navigation must be operable by all users regardless of input method.",icon:e.jsx(t.Hand,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),color:"from-purple-500 via-violet-500 to-indigo-500",features:["Full keyboard navigation (Tab, Arrow, Escape)","Visible focus indicators on all elements","No seizure-triggering content","Sufficient time for interactions"]},{title:"Understandable",description:"Information and UI operation must be understandable and predictable.",icon:e.jsx(t.Brain,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),color:"from-green-500 via-emerald-500 to-teal-500",features:["Clear and readable text content","Predictable navigation behavior","Input assistance (labels, helpers, errors)","Error identification with aria-invalid"]},{title:"Robust",description:"Content must be robust enough for various assistive technologies and future compatibility.",icon:e.jsx(t.Shield,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),color:"from-orange-500 via-amber-500 to-yellow-500",features:["Valid semantic HTML structure","Proper ARIA roles and attributes","Compatible with NVDA, JAWS, VoiceOver","Standards-compliant markup"]}];return e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"WCAG 2.1 AA Principles",description:"Four fundamental principles (POUR) that guide our accessibility implementation. Every component is evaluated against these criteria.",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-blue-500 via-indigo-500 to-violet-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(t.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(a.Typography,{tag:"h2",className:"mb-2",children:"The POUR Framework"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Each principle addresses a different aspect of accessibility"})]}),e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6",children:s.map((r,i)=>e.jsx(a.CardContainer,{className:"group hover:shadow-large transition-all duration-300 hover:-translate-y-1",children:e.jsxs("div",{className:"w-full space-y-4 p-4 sm:p-6",children:[e.jsxs("div",{className:"flex items-center gap-4",children:[e.jsx("div",{className:`p-3 rounded-xl bg-linear-to-br ${r.color} group-hover:scale-110 transition-all duration-300 shadow-lg`,children:r.icon}),e.jsx(a.Typography,{tag:"h3",className:"font-semibold text-lg group-hover:text-primary transition-colors duration-300",children:r.title})]}),e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 leading-relaxed",children:r.description}),e.jsx("div",{className:"space-y-2",children:r.features.map((o,n)=>e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(t.Check,{className:"w-4 h-4 text-green-500 shrink-0"}),e.jsx(a.Typography,{tag:"span",className:"text-sm text-gray-600 dark:text-gray-400",children:o})]},n))})]})},i))})]})]})};exports.default=l;

package/documentation/WCAGPrinciplesSection-DHmT6YQy.js

@@ -0,0 +1,126 @@
+import { jsxs as a, Fragment as n, jsx as e } from "react/jsx-runtime";
+import { H as l, T as r, C as c } from "../index-lfg6LZ1p.js";
+import { BookOpen as d, Check as m, Eye as p, Hand as h, Brain as g, Shield as u } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const C = () => /* @__PURE__ */ a(n, { children: [
+  /* @__PURE__ */ e(
+    l,
+    {
+      title: "WCAG 2.1 AA Principles",
+      description: "Four fundamental principles (POUR) that guide our accessibility implementation. Every component is evaluated against these criteria.",
+      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-blue-500 via-indigo-500 to-violet-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(d, { 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: "The POUR Framework" }),
+      /* @__PURE__ */ e(
+        r,
+        {
+          tag: "p",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "Each principle addresses a different aspect of accessibility"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6", children: [
+      {
+        title: "Perceivable",
+        description: "Information and UI components must be presentable to users in ways they can perceive.",
+        icon: /* @__PURE__ */ e(p, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
+        color: "from-blue-500 via-cyan-500 to-teal-500",
+        features: [
+          "Color contrast ratios (4.5:1 for text)",
+          "Alt text for images and icons",
+          "Scalable text and responsive typography",
+          "aria-live regions for dynamic content"
+        ]
+      },
+      {
+        title: "Operable",
+        description: "UI components and navigation must be operable by all users regardless of input method.",
+        icon: /* @__PURE__ */ e(h, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
+        color: "from-purple-500 via-violet-500 to-indigo-500",
+        features: [
+          "Full keyboard navigation (Tab, Arrow, Escape)",
+          "Visible focus indicators on all elements",
+          "No seizure-triggering content",
+          "Sufficient time for interactions"
+        ]
+      },
+      {
+        title: "Understandable",
+        description: "Information and UI operation must be understandable and predictable.",
+        icon: /* @__PURE__ */ e(g, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
+        color: "from-green-500 via-emerald-500 to-teal-500",
+        features: [
+          "Clear and readable text content",
+          "Predictable navigation behavior",
+          "Input assistance (labels, helpers, errors)",
+          "Error identification with aria-invalid"
+        ]
+      },
+      {
+        title: "Robust",
+        description: "Content must be robust enough for various assistive technologies and future compatibility.",
+        icon: /* @__PURE__ */ e(u, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
+        color: "from-orange-500 via-amber-500 to-yellow-500",
+        features: [
+          "Valid semantic HTML structure",
+          "Proper ARIA roles and attributes",
+          "Compatible with NVDA, JAWS, VoiceOver",
+          "Standards-compliant markup"
+        ]
+      }
+    ].map((t, i) => /* @__PURE__ */ e(
+      c,
+      {
+        className: "group hover:shadow-large transition-all duration-300 hover:-translate-y-1",
+        children: /* @__PURE__ */ a("div", { className: "w-full space-y-4 p-4 sm:p-6", children: [
+          /* @__PURE__ */ a("div", { className: "flex items-center gap-4", children: [
+            /* @__PURE__ */ e(
+              "div",
+              {
+                className: `p-3 rounded-xl bg-linear-to-br ${t.color} group-hover:scale-110 transition-all duration-300 shadow-lg`,
+                children: t.icon
+              }
+            ),
+            /* @__PURE__ */ e(
+              r,
+              {
+                tag: "h3",
+                className: "font-semibold text-lg group-hover:text-primary transition-colors duration-300",
+                children: t.title
+              }
+            )
+          ] }),
+          /* @__PURE__ */ e(
+            r,
+            {
+              tag: "p",
+              className: "text-gray-600 dark:text-gray-400 leading-relaxed",
+              children: t.description
+            }
+          ),
+          /* @__PURE__ */ e("div", { className: "space-y-2", children: t.features.map((s, o) => /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ e(m, { className: "w-4 h-4 text-green-500 shrink-0" }),
+            /* @__PURE__ */ e(
+              r,
+              {
+                tag: "span",
+                className: "text-sm text-gray-600 dark:text-gray-400",
+                children: s
+              }
+            )
+          ] }, o)) })
+        ] })
+      },
+      i
+    )) })
+  ] })
+] });
+export {
+  C as default
+};