@e-burgos/tucu-ui 2.5.0 → 2.7.0

package/documentation/ValidationSystemSection-gd_ZxQ3N.js

@@ -1,222 +0,0 @@
-import { jsxs as a, Fragment as d, jsx as e } from "react/jsx-runtime";
-import { H as o, T as r, C as l, a as t, c as i, aj as n, y as m } from "../index-DYDFy1df.js";
-import { Shield as c, FileText as u, Code as p, Info as h } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const k = () => /* @__PURE__ */ a(d, { children: [
-  /* @__PURE__ */ e(
-    o,
-    {
-      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: /* @__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-orange-500 via-red-500 to-pink-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(c, { 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: "Validation Approaches" }),
-      /* @__PURE__ */ e(
-        r,
-        {
-          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"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ a("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6", children: [
-      /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Centralized Schema", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full space-y-4 p-4 sm:p-6", children: [
-        /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ e("div", { className: "p-2 bg-linear-to-br from-blue-500 to-cyan-500 rounded-lg shadow-lg", children: /* @__PURE__ */ e(u, { className: "w-5 h-5 text-white" }) }),
-          /* @__PURE__ */ a(
-            r,
-            {
-              tag: "p",
-              className: "text-sm text-gray-600 dark:text-gray-400",
-              children: [
-                "Define all rules in one",
-                " ",
-                /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-border rounded text-xs", children: "FormValidations" }),
-                " ",
-                "object, pass to Form via",
-                " ",
-                /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-border rounded text-xs", children: "validationSchema" }),
-                "."
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ e(i, { 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>` })
-      ] }) }) }),
-      /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Per-Field Rules", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full space-y-4 p-4 sm:p-6", children: [
-        /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ e("div", { className: "p-2 bg-linear-to-br from-purple-500 to-violet-500 rounded-lg shadow-lg", children: /* @__PURE__ */ e(p, { className: "w-5 h-5 text-white" }) }),
-          /* @__PURE__ */ a(
-            r,
-            {
-              tag: "p",
-              className: "text-sm text-gray-600 dark:text-gray-400",
-              children: [
-                "Define rules directly on",
-                " ",
-                /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-border rounded text-xs", children: "FormField" }),
-                " ",
-                "via the",
-                " ",
-                /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-border rounded text-xs", children: "rules" }),
-                " ",
-                "prop. Overrides schema for that field."
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ e(i, { 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>` })
-      ] }) }) })
-    ] }),
-    /* @__PURE__ */ e(n, { variant: "info", dismissible: !1, children: /* @__PURE__ */ a("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ e(h, { className: "h-4 w-4" }),
-        /* @__PURE__ */ e(r, { tag: "span", className: "font-semibold", children: "Priority" })
-      ] }),
-      /* @__PURE__ */ a(r, { tag: "p", className: "text-sm", children: [
-        "Both approaches can be used together. The",
-        " ",
-        /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-border rounded text-xs", children: "rules" }),
-        " ",
-        "prop on FormField takes precedence over",
-        " ",
-        /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-border rounded text-xs", children: "validationSchema" }),
-        " ",
-        "for that specific field."
-      ] })
-    ] }) })
-  ] }),
-  /* @__PURE__ */ a("section", { className: "space-y-8", children: [
-    /* @__PURE__ */ a("div", { className: "text-center", children: [
-      /* @__PURE__ */ e(r, { tag: "h2", className: "mb-2", children: "Available Rules" }),
-      /* @__PURE__ */ e(
-        r,
-        {
-          tag: "p",
-          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
-          children: "All validation rules supported by the form system"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
-      m,
-      {
-        columns: [
-          {
-            key: "rule",
-            label: "Rule",
-            render: (s) => /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(s) })
-          },
-          {
-            key: "example",
-            label: "Example",
-            render: (s) => /* @__PURE__ */ e("code", { className: "text-xs text-gray-600 dark:text-gray-400", children: String(s) })
-          },
-          {
-            key: "description",
-            label: "Description",
-            render: (s) => /* @__PURE__ */ e("span", { className: "text-xs text-gray-600 dark:text-gray-400", children: String(s) })
-          }
-        ],
-        data: [
-          {
-            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)"
-          }
-        ]
-      }
-    ) }) })
-  ] })
-] });
-export {
-  k as default
-};

package/documentation/WCAGPrinciplesSection-BvBX0KP3.js

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

@@ -1,126 +0,0 @@
-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-DYDFy1df.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
-};

package/hooks/index.d.ts

@@ -1,14 +0,0 @@
-export * from './use-breakpoint';
-export * from './use-click-away';
-export * from './use-copy-to-clipboard';
-export * from './use-element-size';
-export * from './use-event-listener';
-export * from './use-grid-switcher';
-export * from './use-is-mobile';
-export * from './use-is-mounted';
-export * from './use-lock-body-scroll';
-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

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

package/hooks/use-breakpoint.d.ts

@@ -1 +0,0 @@
-export declare const useBreakpoint: () => string;

package/hooks/use-click-away.d.ts

@@ -1 +0,0 @@
-export { default as useClickAway } from 'react-use/lib/useClickAway';

package/hooks/use-copy-to-clipboard.d.ts

@@ -1 +0,0 @@
-export { default as useCopyToClipboard } from 'react-use/lib/useCopyToClipboard';

package/hooks/use-element-size.d.ts

@@ -1,9 +0,0 @@
-type Size = {
-    width: number;
-    height: number;
-};
-export declare function useElementSize<T extends HTMLElement = HTMLDivElement>(): [
-    (node: T | null) => void,
-    Size
-];
-export {};

package/hooks/use-event-listener.d.ts

@@ -1,7 +0,0 @@
-import { RefObject, useEffect } from 'react';
-export declare const useIsomorphicLayoutEffect: typeof useEffect;
-declare function useEventListener<K extends keyof MediaQueryListEventMap>(eventName: K, handler: (event: MediaQueryListEventMap[K]) => void, element: RefObject<MediaQueryList>, options?: boolean | AddEventListenerOptions): void;
-declare function useEventListener<K extends keyof WindowEventMap>(eventName: K, handler: (event: WindowEventMap[K]) => void, element?: undefined, options?: boolean | AddEventListenerOptions): void;
-declare function useEventListener<K extends keyof HTMLElementEventMap, T extends HTMLElement = HTMLDivElement>(eventName: K, handler: (event: HTMLElementEventMap[K]) => void, element: RefObject<T>, options?: boolean | AddEventListenerOptions): void;
-declare function useEventListener<K extends keyof DocumentEventMap>(eventName: K, handler: (event: DocumentEventMap[K]) => void, element: RefObject<Document>, options?: boolean | AddEventListenerOptions): void;
-export { useEventListener };

package/hooks/use-grid-switcher.d.ts

@@ -1,6 +0,0 @@
-interface GridSwitcherStore {
-    isGridCompact: boolean;
-    setIsGridCompact: (isGridCompact: boolean) => void;
-}
-export declare const useGridSwitcher: import('zustand').UseBoundStore<import('zustand').StoreApi<GridSwitcherStore>>;
-export {};

package/hooks/use-is-mobile.d.ts

@@ -1,4 +0,0 @@
-export declare const useIsMobile: () => {
-    isMobile: boolean;
-};
-export default useIsMobile;

package/hooks/use-is-mounted.d.ts

@@ -1 +0,0 @@
-export declare function useIsMounted(): boolean;

package/hooks/use-lock-body-scroll.d.ts

@@ -1 +0,0 @@
-export declare function useLockBodyScroll(freezeBodyScroll: boolean): void;

package/hooks/use-measure.d.ts

@@ -1 +0,0 @@
-export { default as useMeasure } from 'react-use/lib/useMeasure';

package/hooks/use-scrollable-slider.d.ts

@@ -1,7 +0,0 @@
-export declare function useScrollableSlider(defaultActivePath?: string): {
-    sliderEl: import('react').RefObject<HTMLDivElement>;
-    sliderPrevBtn: import('react').RefObject<HTMLButtonElement>;
-    sliderNextBtn: import('react').RefObject<HTMLButtonElement>;
-    scrollToTheRight: () => void;
-    scrollToTheLeft: () => void;
-};

package/hooks/use-toast-store.d.ts

@@ -1,17 +0,0 @@
-export interface IToast {
-    id: string;
-    title?: string;
-    message: string;
-    open?: boolean;
-    variant?: 'default' | 'destructive' | 'success' | 'warning' | 'info';
-    timeout?: number;
-    dismissing?: boolean;
-}
-interface ToastState {
-    toasts: IToast[];
-    setToasts: (toasts: IToast[]) => void;
-    addToast: (toast: IToast) => void;
-    dismissToast: (toastId?: string) => void;
-}
-export declare const useToastStore: import('zustand').UseBoundStore<import('zustand').StoreApi<ToastState>>;
-export {};

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

@@ -1,11 +0,0 @@
-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;