@e-burgos/tucu-ui 2.0.8 → 2.0.9

package/documentation/UsingThemeSystemSection-CDie8_J5.js

@@ -1,140 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-VrMogvDN.js"),r=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const o=()=>e.jsx(t.CardContainer,{children:e.jsx(t.CardTitle,{title:"Using the Theme System",className:"mt-2 mb-6",children:e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-lg shadow-lg",children:e.jsx(r.Code,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(t.Typography,{tag:"h4",className:"font-semibold",children:"ThemeProvider Setup"})]}),e.jsx(t.CodeBlock,{language:"tsx",code:`import { ThemeProvider, LAYOUT_OPTIONS } from '@ui/tucu-ui';
-
-function App() {
-  const menuItems = [
-    { label: 'Home', path: '/', icon: HomeIcon },
-    { label: 'Dashboard', path: '/dashboard', icon: DashboardIcon },
-  ];
-
-  return (
-    <ThemeProvider
-      // Layout Configuration
-      layout={LAYOUT_OPTIONS.HORIZONTAL} // CLEAN | ADMIN | HORIZONTAL
-      menuItems={menuItems}
-      logo={{ path: '/', name: 'MyApp' }}
-
-      // Color Configuration
-      brandColor="Blue"              // Primary brand color preset
-      customPaletteColor={{
-        primary: '#0052ff',          // Hex color or preset name
-        darkPrimary: '#578bfa',
-        secondary: '#f3f4f6',
-        darkSecondary: '#172131',
-        accent: '#f7d21a',
-        darkAccent: '#936000',
-        muted: '#4a5565',
-        darkMuted: '#828a99',
-        darkBg: '#030712',
-        lightBg: '#ffffff',
-        lightDark: '#f9fafb',
-        darkLightDark: '#0a101d',
-      }}
-
-      // Theme Settings
-      mode="light"                   // 'light' | 'dark'
-      showSettings={true}
-      
-      // Additional Features
-      headerClassName="custom-header"
-      contentClassName="custom-content"
-      fullWidth={false}
-      rightButton={<UserMenu />}
-      className="custom-layout"
-    >
-      {/* Routes are automatically handled by ThemeProvider */}
-      {/* Or provide customRoutes prop for custom routing */}
-    </ThemeProvider>
-  );
-}`})]}),e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 bg-gradient-to-br from-purple-500 to-violet-500 rounded-lg shadow-lg",children:e.jsx(r.Zap,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(t.Typography,{tag:"h4",className:"font-semibold",children:"useTheme Hook"})]}),e.jsx(t.CodeBlock,{language:"tsx",code:`import { useTheme, LAYOUT_OPTIONS } from '@ui/tucu-ui';
-
-function ThemeControls() {
-  const {
-    // State
-    mode,
-    layout,
-    primaryPreset,
-    darkPrimaryPreset,
-    secondaryPreset,
-    darkSecondaryPreset,
-    accentPreset,
-    darkAccentPreset,
-    mutedPreset,
-    darkMutedPreset,
-    darkBgPreset,
-    lightBgPreset,
-    lightDarkPreset,
-    darkLightDarkPreset,
-    direction,
-    logo,
-    lang,
-    isSettingsOpen,
-    showSettings,
-
-    // Setters
-    setMode,
-    setLayout,
-    setPrimaryPreset,
-    setDarkPrimaryPreset,
-    setSecondaryPreset,
-    setDarkSecondaryPreset,
-    setAccentPreset,
-    setDarkAccentPreset,
-    setMutedPreset,
-    setDarkMutedPreset,
-    setDarkBgPreset,
-    setLightBgPreset,
-    setLightDarkPreset,
-    setDarkLightDarkPreset,
-    setDirection,
-    setLogo,
-    setLang,
-    setIsSettingsOpen,
-    setShowSettings,
-    restoreDefaultColors,
-  } = useTheme();
-
-  return (
-    <div>
-      {/* Basic Controls */}
-      <button onClick={() => setMode(mode === 'light' ? 'dark' : 'light')}>
-        Toggle {mode === 'light' ? 'Dark' : 'Light'} Mode
-      </button>
-
-      <select
-        value={layout}
-        onChange={(e) => setLayout(e.target.value as LAYOUT_OPTIONS)}
-      >
-        <option value={LAYOUT_OPTIONS.CLEAN}>Clean</option>
-        <option value={LAYOUT_OPTIONS.ADMIN}>Admin</option>
-        <option value={LAYOUT_OPTIONS.HORIZONTAL}>Horizontal</option>
-      </select>
-
-      <select
-        value={direction}
-        onChange={(e) => setDirection(e.target.value as 'ltr' | 'rtl')}
-      >
-        <option value="ltr">LTR</option>
-        <option value="rtl">RTL</option>
-      </select>
-
-      {/* Advanced Color Controls */}
-      <button onClick={() => setPrimaryPreset({ label: 'Blue', value: '#105eff' })}>
-        Set Primary Color
-      </button>
-
-      <button onClick={() => setSecondaryPreset({ label: 'DEFAULT_SECONDARY', value: '#f3f4f6' })}>
-        Set Secondary Color
-      </button>
-
-      {/* Settings Panel Control */}
-      <button onClick={() => setIsSettingsOpen(!isSettingsOpen)}>
-        {isSettingsOpen ? 'Close' : 'Open'} Settings
-      </button>
-
-      {/* Restore Defaults */}
-      <button onClick={restoreDefaultColors}>
-        Restore Default Colors
-      </button>
-    </div>
-  );
-}`})]})]})})});exports.default=o;

package/documentation/ValidationSystemSection-Ca9vjcW1.js

@@ -1,54 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-VrMogvDN.js"),t=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const n=()=>{const i=[{key:"rule",label:"Rule"},{key:"example",label:"Example"},{key:"description",label:"Description"}],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"}];return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(a.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"Validation System"}),e.jsx(a.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"Centralized validation with built-in and custom rules"})]}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Validation Approaches",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-6 p-4 sm:p-6",children:[e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"You can define validation in two ways:"}),e.jsxs("div",{className:"grid grid-cols-1 lg:grid-cols-2 gap-6",children:[e.jsxs("div",{className:"space-y-4",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(t.FileText,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(a.Typography,{tag:"h4",className:"font-semibold",children:"Centralized Validation Schema"})]}),e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"Define all validation rules in a single schema object and pass it to the Form component. This eliminates the need to define rules on each FormField."}),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.',
-    },
-  },
-};
-
-// Use in Form component
-<Form<FormValues>
-  onSubmit={handleSubmit}
-  validationSchema={formValidations}
-  useFormProps={{ defaultValues }}
->
-  {/* FormFields don't need rules prop */}
-  <FormField<FormValues> name="name" label="Name">
-    <Input />
-  </FormField>
-</Form>`})]}),e.jsxs("div",{className:"space-y-4",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(t.Code,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(a.Typography,{tag:"h4",className:"font-semibold",children:"Per-Field Validation"})]}),e.jsxs(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:["Define validation rules directly on each FormField using the"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:"rules"})," ","prop. Useful for field-specific validation."]}),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 'Password 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(t.Info,{className:"h-4 w-4"}),e.jsx(a.Typography,{tag:"span",className:"font-semibold",children:"Validation Schema vs Rules Prop"})]}),e.jsxs(a.Typography,{tag:"p",className:"text-sm",children:[e.jsx("strong",{children:"validationSchema:"})," Centralized validation for all fields. Rules are automatically applied."," ",e.jsx("strong",{children:"rules prop:"})," Field-specific validation that overrides schema rules for that field. Both can be used together, with"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:"rules"})," ","taking precedence."]})]})})]})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Available Validation Rules",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-6 p-4 sm:p-6",children:[e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Complete list of validation rules supported by React Hook Form:"}),e.jsx(a.BasicTable,{columns:i.map(s=>({...s,render:r=>s.key==="rule"?e.jsx("code",{className:"text-xs text-brand",children:String(r??"")}):s.key==="example"?e.jsx("code",{className:"text-xs text-gray-600 dark:text-gray-400",children:String(r??"")}):s.key==="description"?e.jsx("span",{className:"text-xs text-gray-600 dark:text-gray-400",children:String(r??"")}):String(r??"")})),data:l,containerClassName:"mb-4"})]})})})]})};exports.default=n;

package/documentation/ValidationSystemSection-CiTBMt8_.js

@@ -1,197 +0,0 @@
-import { jsxs as a, Fragment as m, jsx as e } from "react/jsx-runtime";
-import { T as r, C as i, a as l, c as d, ag as c, q as u } from "../index-D3gBsvbO.js";
-import { FileText as p, Code as h, Info as g } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const F = () => {
-  const n = [
-    { key: "rule", label: "Rule" },
-    { key: "example", label: "Example" },
-    { key: "description", label: "Description" }
-  ], o = [
-    {
-      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"
-    }
-  ];
-  return /* @__PURE__ */ a(m, { children: [
-    /* @__PURE__ */ a("div", { className: "text-center space-y-4", children: [
-      /* @__PURE__ */ e(r, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "Validation System" }),
-      /* @__PURE__ */ e(
-        r,
-        {
-          tag: "p",
-          className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
-          children: "Centralized validation with built-in and custom rules"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Validation Approaches", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full space-y-6 p-4 sm:p-6", children: [
-      /* @__PURE__ */ e(r, { tag: "p", className: "text-gray-600 dark:text-gray-400", children: "You can define validation in two ways:" }),
-      /* @__PURE__ */ a("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6", children: [
-        /* @__PURE__ */ a("div", { className: "space-y-4", 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(p, { className: "w-5 h-5 text-white filter drop-shadow-sm" }) }),
-            /* @__PURE__ */ e(r, { tag: "h4", className: "font-semibold", children: "Centralized Validation Schema" })
-          ] }),
-          /* @__PURE__ */ e(
-            r,
-            {
-              tag: "p",
-              className: "text-sm text-gray-600 dark:text-gray-400",
-              children: "Define all validation rules in a single schema object and pass it to the Form component. This eliminates the need to define rules on each FormField."
-            }
-          ),
-          /* @__PURE__ */ e(
-            d,
-            {
-              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.',
-    },
-  },
-};
-
-// Use in Form component
-<Form<FormValues>
-  onSubmit={handleSubmit}
-  validationSchema={formValidations}
-  useFormProps={{ defaultValues }}
->
-  {/* FormFields don't need rules prop */}
-  <FormField<FormValues> name="name" label="Name">
-    <Input />
-  </FormField>
-</Form>`
-            }
-          )
-        ] }),
-        /* @__PURE__ */ a("div", { className: "space-y-4", 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(h, { className: "w-5 h-5 text-white filter drop-shadow-sm" }) }),
-            /* @__PURE__ */ e(r, { tag: "h4", className: "font-semibold", children: "Per-Field Validation" })
-          ] }),
-          /* @__PURE__ */ a(
-            r,
-            {
-              tag: "p",
-              className: "text-sm text-gray-600 dark:text-gray-400",
-              children: [
-                "Define validation rules directly on each FormField using the",
-                " ",
-                /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs", children: "rules" }),
-                " ",
-                "prop. Useful for field-specific validation."
-              ]
-            }
-          ),
-          /* @__PURE__ */ e(
-            d,
-            {
-              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 'Password must contain uppercase, lowercase, and number';
-        }
-        return true;
-      }
-    }
-  }}
->
-  <Input type="password" />
-</FormField>`
-            }
-          )
-        ] })
-      ] }),
-      /* @__PURE__ */ e(c, { 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(g, { className: "h-4 w-4" }),
-          /* @__PURE__ */ e(r, { tag: "span", className: "font-semibold", children: "Validation Schema vs Rules Prop" })
-        ] }),
-        /* @__PURE__ */ a(r, { tag: "p", className: "text-sm", children: [
-          /* @__PURE__ */ e("strong", { children: "validationSchema:" }),
-          " Centralized validation for all fields. Rules are automatically applied.",
-          " ",
-          /* @__PURE__ */ e("strong", { children: "rules prop:" }),
-          " Field-specific validation that overrides schema rules for that field. Both can be used together, with",
-          " ",
-          /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs", children: "rules" }),
-          " ",
-          "taking precedence."
-        ] })
-      ] }) })
-    ] }) }) }),
-    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Available Validation Rules", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full space-y-6 p-4 sm:p-6", children: [
-      /* @__PURE__ */ e(r, { tag: "p", className: "text-gray-600 dark:text-gray-400", children: "Complete list of validation rules supported by React Hook Form:" }),
-      /* @__PURE__ */ e(
-        u,
-        {
-          columns: n.map((t) => ({
-            ...t,
-            render: (s) => t.key === "rule" ? /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(s ?? "") }) : t.key === "example" ? /* @__PURE__ */ e("code", { className: "text-xs text-gray-600 dark:text-gray-400", children: String(s ?? "") }) : t.key === "description" ? /* @__PURE__ */ e("span", { className: "text-xs text-gray-600 dark:text-gray-400", children: String(s ?? "") }) : String(s ?? "")
-          })),
-          data: o,
-          containerClassName: "mb-4"
-        }
-      )
-    ] }) }) })
-  ] });
-};
-export {
-  F as default
-};

package/documentation/WCAGPrinciplesSection-B9sZXPfQ.js

@@ -1,116 +0,0 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { T as r, C as l } from "../index-D3gBsvbO.js";
-import { Check as n, Eye as c, Hand as d, Brain as m, Wrench as p } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const y = () => /* @__PURE__ */ t("div", { className: "space-y-8", children: [
-  /* @__PURE__ */ t("div", { className: "text-center space-y-4", children: [
-    /* @__PURE__ */ e(r, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "WCAG 2.1 AA Principles" }),
-    /* @__PURE__ */ e(
-      r,
-      {
-        tag: "p",
-        className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
-        children: "Four fundamental principles that guide our accessibility implementation"
-      }
-    )
-  ] }),
-  /* @__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(c, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
-      color: "from-orange-500 via-amber-500 to-yellow-500",
-      features: [
-        "Color contrast ratios",
-        "Alt text for images",
-        "Scalable text",
-        "Audio descriptions"
-      ]
-    },
-    {
-      title: "Operable",
-      description: "UI components and navigation must be operable by all users.",
-      icon: /* @__PURE__ */ e(d, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
-      color: "from-orange-500 via-amber-500 to-yellow-500",
-      features: [
-        "Keyboard navigation",
-        "Focus management",
-        "No seizure triggers",
-        "Sufficient time limits"
-      ]
-    },
-    {
-      title: "Understandable",
-      description: "Information and UI operation must be understandable.",
-      icon: /* @__PURE__ */ e(m, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
-      color: "from-orange-500 via-amber-500 to-yellow-500",
-      features: [
-        "Readable text",
-        "Predictable functionality",
-        "Input assistance",
-        "Error identification"
-      ]
-    },
-    {
-      title: "Robust",
-      description: "Content must be robust enough for various assistive technologies.",
-      icon: /* @__PURE__ */ e(p, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
-      color: "from-orange-500 via-amber-500 to-yellow-500",
-      features: [
-        "Valid HTML",
-        "Compatible markup",
-        "Future-proof code",
-        "Assistive tech support"
-      ]
-    }
-  ].map((a, s) => /* @__PURE__ */ e(
-    l,
-    {
-      className: "group hover:shadow-large transition-all duration-300 hover:-translate-y-1",
-      children: /* @__PURE__ */ t("div", { className: "w-full space-y-4 p-4 sm:p-6", children: [
-        /* @__PURE__ */ t("div", { className: "flex items-center gap-4", children: [
-          /* @__PURE__ */ e(
-            "div",
-            {
-              className: `p-3 rounded-xl bg-linear-to-br ${a.color} group-hover:scale-110 transition-all duration-300 shadow-lg hover:shadow-xl`,
-              children: a.icon
-            }
-          ),
-          /* @__PURE__ */ e(
-            r,
-            {
-              tag: "h3",
-              className: "font-semibold text-lg group-hover:text-primary transition-colors duration-300",
-              children: a.title
-            }
-          )
-        ] }),
-        /* @__PURE__ */ e(
-          r,
-          {
-            tag: "p",
-            className: "text-gray-600 dark:text-gray-400 leading-relaxed",
-            children: a.description
-          }
-        ),
-        /* @__PURE__ */ e("div", { className: "space-y-2", children: a.features.map((o, i) => /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ e(n, { 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: o
-            }
-          )
-        ] }, i)) })
-      ] })
-    },
-    s
-  )) })
-] });
-export {
-  y as default
-};

package/documentation/WCAGPrinciplesSection-C9SsLYli.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-VrMogvDN.js"),s=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const n=()=>{const r=[{title:"Perceivable",description:"Information and UI components must be presentable to users in ways they can perceive.",icon:e.jsx(s.Eye,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),color:"from-orange-500 via-amber-500 to-yellow-500",features:["Color contrast ratios","Alt text for images","Scalable text","Audio descriptions"]},{title:"Operable",description:"UI components and navigation must be operable by all users.",icon:e.jsx(s.Hand,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),color:"from-orange-500 via-amber-500 to-yellow-500",features:["Keyboard navigation","Focus management","No seizure triggers","Sufficient time limits"]},{title:"Understandable",description:"Information and UI operation must be understandable.",icon:e.jsx(s.Brain,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),color:"from-orange-500 via-amber-500 to-yellow-500",features:["Readable text","Predictable functionality","Input assistance","Error identification"]},{title:"Robust",description:"Content must be robust enough for various assistive technologies.",icon:e.jsx(s.Wrench,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),color:"from-orange-500 via-amber-500 to-yellow-500",features:["Valid HTML","Compatible markup","Future-proof code","Assistive tech support"]}];return e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(t.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"WCAG 2.1 AA Principles"}),e.jsx(t.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"Four fundamental principles that guide our accessibility implementation"})]}),e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6",children:r.map((a,i)=>e.jsx(t.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 ${a.color} group-hover:scale-110 transition-all duration-300 shadow-lg hover:shadow-xl`,children:a.icon}),e.jsx(t.Typography,{tag:"h3",className:"font-semibold text-lg group-hover:text-primary transition-colors duration-300",children:a.title})]}),e.jsx(t.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 leading-relaxed",children:a.description}),e.jsx("div",{className:"space-y-2",children:a.features.map((o,l)=>e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(s.Check,{className:"w-4 h-4 text-green-500 shrink-0"}),e.jsx(t.Typography,{tag:"span",className:"text-sm text-gray-600 dark:text-gray-400",children:o})]},l))})]})},i))})]})};exports.default=n;