@e-burgos/tucu-ui 1.1.1 → 2.0.0

package/UsingThemeSystemSection-Dk5n1wP3.js

@@ -0,0 +1,140 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("./index-CjRk4ezu.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: '#eef0f3',
+        darkSecondary: '#282b31',
+        accent: '#f7d21a',
+        darkAccent: '#936000',
+        muted: '#5b616e',
+        darkMuted: '#8a919e',
+        darkBg: '#0a0b0d',
+        lightBg: '#ffffff',
+        lightDark: '#f7f8f9',
+        darkLightDark: '#141519',
+      }}
+
+      // 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: '#eef0f3' })}>
+        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/ValidationSystemSection-9-Sh0rkM.mjs

@@ -0,0 +1,197 @@
+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, a4 as c, B as u } from "./index-Hq6IUBmn.mjs";
+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/ValidationSystemSection-BrpnhJ2J.js

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

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

package/WCAGPrinciplesSection-nFfogbYI.mjs

@@ -0,0 +1,116 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { T as r, C as l } from "./index-Hq6IUBmn.mjs";
+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/collection-1-BIsLOX9N.js

@@ -0,0 +1 @@
+"use strict";const A="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wAARCAAwADADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD9ffHnju88Y3z3NwzHcxPzHPXHrnH9fzNebPLHGMyOqj3NErFYpGHVUYj6gHFfjv8Atpftyaj8CJ7rTmjliZHkCSYIHH3ecDPTI/pWlWoqUeZptXtp+fyP7xzrOMv4QyuOIqUpLDU2qcYU1tsl/T+/c/WzU/FOgaPEZtQ1O1tkHUySov8AMis3TPH/AIT1d/L0/WbK5fONsc8bNn6Bq/ip+MP/AAUu+L3xEmew0C+vYkaRlUxySDgk8ccdMdMH24NaHwB/a9+PHhTxNpV9ruoahNpkt1D5okkkKhGkGc5bHf39+9cU8yw9OUY1Jxg5NJKUkm27aJdep+fU/GHA4jFRp4fLsTUw14qeI5XaF7Jydlayvrp+B/bsjq6hkIZWGQRyCDXpHgTx5feDrxbi2dhhgeDjp9Pp+GPpXxd+zX8V4fir8PtJ1kSB7hrWEy85O4xqTn0PXivouvQTuk1s0mfrEfqub4GnOSjWw+JpxlZq6akk9V3/ABTA88HoeK/Ev/gp78AdJ+Itj50McaXewszDAYn3x7+nP9f20r8+v2y/AHiHVdCudb0zzJYreNmeNAW+ULkjAB9O3tXjZ/LMI5bXeW041MTyvl5ui6tef+R53E+AoZjlNfD4ml7WlpKcUrvlTTdvPr8j+Xnwz+zbonhnUhFdxRyzI2SGUE5z7559iP8AGveh4A0qe2TT4LOGOSPaYsRrng5HTj+VZ/jrXryz1e5HzW93bzMjpICpypOeuPw/OtHwZ4skvbyJXbzLpyiIigsxJOPfJ/D8K/BK886rYinWrzqzrwqJOHvpqomtLfyt66edj8io4bJ8LSq4ShRp04uL97lV3FpaXavzfr2Z+6P/AAT3uv7H8M/2DcynckaiNCenGMAE9OnT/wDX+n9fmh+xN4B1iCwTxBfpJFHLGjIrAqCpUHv/AJ796/S8cAD0r99yKpjqmXUJY+kqVfljor6q278z9f4Zh7PJ8LBKShGNqfNe/LpbfUKzNX0G18R2E+mXkCzwXCMjKyhhhhg8HPrXq3j/AMDXngu6khulZQhIyRjpxz/nt9ced2mvW1pDNK4BKK3X8eOv+TjPSvXk+WLk1ov6sej9dw1bCLEwlGpRqR0e6knb1XU/A/8Ab5/ZK0XQILzX/Dai3vJTJK0cahfmOTyFx/k186fsT/BvwfqGuwSeN76KO4hnXZFcMoJIbjhsZ54/H8a/U79rDxNZeIxd204UoPMUDOfXtn/P41+QesC+8N6o+oaDdS2rxS7wI3K52nIztI+uf0GKrC8O4LEz+u2hzuz5ZQVr2TvdddrdX13PkpcMZRicVHNaVON4O88O5ctOTundx239f8v6d/A+kaDouh2dnoBgNpHCioYNuCoUDPy/T1rs6/HT9j39qHWNQv7bwr4guGmclIlaVyWPRc8n+n5V+5Pw68FXfjqaBbRWKzKhBUZ++vt9fx/KtK1GVCXJK1raen9f0j6xYvDYfCOtNxo0aMbS6Rior9NF18rn/9k=";exports.collection1Img=A;

package/collection-1-NeFANkbk.mjs

@@ -0,0 +1,4 @@
+const A = "data:image/jpeg;base64,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";
+export {
+  A as c
+};

package/components/common/badge.d.ts

@@ -1,8 +1,18 @@
-type BadgeProps = {
+import { default as React } from 'react';
+type ShapeNames = 'rounded' | 'pill' | 'circle';
+type VariantNames = 'solid' | 'ghost' | 'outline' | 'soft';
+type ColorNames = 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'gray' | 'white' | 'light-dark';
+type SizeNames = 'tiny' | 'small' | 'medium' | 'large';
+type StatusNames = 'active' | 'inactive' | 'pending' | 'default';
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    children?: React.ReactNode;
     className?: string;
-    status?: 'active' | 'inactive';
-    size?: 'sm' | 'md' | 'lg';
-    variant?: 'default' | 'outline';
-} & React.HTMLAttributes<HTMLSpanElement>;
-export declare const Badge: ({ className, status, size, variant, ...props }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+    status?: StatusNames;
+    color?: ColorNames;
+    size?: SizeNames;
+    variant?: VariantNames;
+    shape?: ShapeNames;
+    withDot?: boolean;
+}
+export declare const Badge: ({ children, className, status, color, size, variant, shape, withDot, ...props }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
 export default Badge;

package/components/common/skeleton.d.ts

@@ -1,6 +1,39 @@
-interface SkeletonProps {
-    animation?: boolean;
+import { default as React } from 'react';
+type ShapeNames = 'rectangle' | 'circle' | 'text' | 'rounded';
+type AnimationNames = 'pulse' | 'wave' | 'shimmer' | 'none';
+type SizeNames = 'tiny' | 'small' | 'medium' | 'large' | 'full';
+export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Animation type for the skeleton
+     * @default 'shimmer'
+     */
+    animation?: AnimationNames;
+    /**
+     * Shape of the skeleton
+     * @default 'rounded'
+     */
+    shape?: ShapeNames;
+    /**
+     * Predefined size of the skeleton
+     * @default 'medium'
+     */
+    size?: SizeNames;
+    /**
+     * Width of the skeleton (overrides size)
+     */
+    width?: string;
+    /**
+     * Height of the skeleton (overrides size)
+     */
+    height?: string;
+    /**
+     * Number of skeleton lines to render (useful for text skeletons)
+     */
+    count?: number;
+    /**
+     * Additional CSS classes
+     */
     className?: string;
 }
-export declare function Skeleton({ className, animation }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+export declare function Skeleton({ animation, shape, size, width, height, count, className, ...props }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
 export default Skeleton;

package/components/icons/chevron-left.d.ts

@@ -1 +1 @@
-export declare function ChevronLeft(props: React.SVGAttributes<SVGElement>): import("react/jsx-runtime").JSX.Element;
+export declare function ChevronLeft({ className, ...props }: React.SVGAttributes<SVGElement>): import("react/jsx-runtime").JSX.Element;

package/components/index.d.ts

@@ -5,13 +5,16 @@ export * from './cards';
 export * from './carousel';
 export * from './common';
 export * from './dialog';
-export * from './tabs';
+export * from './forms';
 export * from './icons';
+export * from './inputs';
+export * from './layouts';
 export * from './links';
+export * from './list';
 export * from './loaders';
 export * from './logos';
 export * from './notifications';
+export * from './table';
+export * from './tabs';
 export * from './typography';
 export * from './utils';
-export * from './forms';
-export * from './inputs';