@e-burgos/tucu-ui 2.0.8 → 2.0.10

package/documentation/CheckboxSection-D5f8a17w.js

@@ -0,0 +1,175 @@
+import { jsxs as l, Fragment as g, jsx as e } from "react/jsx-runtime";
+import { useState as n } from "react";
+import { H as u, C as a, a as d, T as r, p as c, P as k, A as C, c as N } from "../index-19KsCnyX.js";
+import { CheckSquare as x } from "lucide-react";
+import "react-router-dom";
+import "react-dom";
+const z = () => {
+  const [i, h] = n(!1), [t, m] = n(!0), b = [
+    { label: "Primary", color: "primary" },
+    { label: "Secondary", color: "secondary" },
+    { label: "Danger", color: "danger" },
+    { label: "Info", color: "info" },
+    { label: "Success", color: "success" },
+    { label: "Warning", color: "warning" }
+  ], p = [
+    { label: "Small", size: "sm" },
+    { label: "Medium", size: "md" },
+    { label: "Large", size: "lg" }
+  ];
+  return /* @__PURE__ */ l(g, { children: [
+    /* @__PURE__ */ e(
+      u,
+      {
+        title: "Checkbox",
+        description: "A checkbox component for binary selections.",
+        icon: /* @__PURE__ */ e("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-green-500 via-emerald-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg border border-green-500/50", children: /* @__PURE__ */ e(x, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
+      }
+    ),
+    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ l("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ l(a, { className: "p-4", children: [
+        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Basic Checkbox" }),
+        /* @__PURE__ */ e(
+          c,
+          {
+            label: "I accept the terms and conditions",
+            checked: i,
+            onChange: (s) => h(s.target.checked)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ l(a, { className: "p-4", children: [
+        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "With Helper Text" }),
+        /* @__PURE__ */ e(
+          c,
+          {
+            label: "Subscribe to newsletter",
+            helperText: "Receive updates via email",
+            checked: i,
+            onChange: (s) => h(s.target.checked)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ l(a, { className: "p-4", children: [
+        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "With Error" }),
+        /* @__PURE__ */ e(
+          c,
+          {
+            label: "Required checkbox",
+            error: "This field is required"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ l(a, { className: "p-4", children: [
+        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Disabled" }),
+        /* @__PURE__ */ e(c, { label: "Disabled option", disabled: !0 })
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Variants", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ l("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [
+      /* @__PURE__ */ l(a, { className: "p-4", children: [
+        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Ghost (default)" }),
+        /* @__PURE__ */ e(c, { label: "Ghost Variant", variant: "ghost" })
+      ] }),
+      /* @__PURE__ */ l(a, { className: "p-4", children: [
+        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Solid" }),
+        /* @__PURE__ */ e(c, { label: "Solid Variant", variant: "solid" })
+      ] }),
+      /* @__PURE__ */ l(a, { className: "p-4", children: [
+        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Transparent" }),
+        /* @__PURE__ */ e(c, { label: "Transparent Variant", variant: "transparent" })
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Colors", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3", children: b.map(({ label: s, color: o }) => /* @__PURE__ */ l(a, { className: "p-4", children: [
+      /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: s }),
+      /* @__PURE__ */ e(c, { label: `${s} Checkbox`, color: o })
+    ] }, o)) }) }) }) }),
+    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Sizes", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-3", children: p.map(({ label: s, size: o }) => /* @__PURE__ */ l(a, { className: "p-4", children: [
+      /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: s }),
+      /* @__PURE__ */ e(c, { label: `${s} Checkbox`, size: o })
+    ] }, o)) }) }) }) }),
+    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Shapes", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ l("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ l(a, { className: "p-4", children: [
+        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Rounded" }),
+        /* @__PURE__ */ e(c, { label: "Rounded Shape", shape: "rounded" })
+      ] }),
+      /* @__PURE__ */ l(a, { className: "p-4", children: [
+        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Square (default)" }),
+        /* @__PURE__ */ e(c, { label: "Square Shape", shape: "square" })
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ e(
+      k,
+      {
+        componentName: "Checkbox",
+        defaultValues: {
+          label: "Preview Checkbox",
+          variant: "ghost",
+          color: "primary",
+          size: "md",
+          shape: "square",
+          helperText: "",
+          error: "",
+          disabled: !1
+        },
+        includeProps: [
+          "label",
+          "variant",
+          "color",
+          "size",
+          "shape",
+          "helperText",
+          "error",
+          "disabled"
+        ],
+        excludeProps: ["checked", "onChange"],
+        children: (s) => /* @__PURE__ */ e(
+          c,
+          {
+            ...s,
+            checked: t,
+            onChange: (o) => m(o.target.checked)
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ e(C, { componentName: "Checkbox" }),
+    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+      N,
+      {
+        language: "tsx",
+        code: `import { Checkbox } from '@e-burgos/tucu-ui';
+
+<Checkbox
+  label="I accept the terms and conditions"
+  checked={checked}
+  onChange={(e) => setChecked(e.target.checked)}
+/>
+
+// Variants
+<Checkbox label="Ghost" variant="ghost" />
+<Checkbox label="Solid" variant="solid" />
+<Checkbox label="Transparent" variant="transparent" />
+
+// Shapes
+<Checkbox label="Rounded" shape="rounded" />
+<Checkbox label="Square" shape="square" />
+
+// Colors
+<Checkbox label="Primary" color="primary" />
+<Checkbox label="Secondary" color="secondary" />
+<Checkbox label="Danger" color="danger" />
+<Checkbox label="Info" color="info" />
+<Checkbox label="Success" color="success" />
+<Checkbox label="Warning" color="warning" />
+
+// Sizes
+<Checkbox label="Small" size="sm" />
+<Checkbox label="Medium" size="md" />
+<Checkbox label="Large" size="lg" />`
+      }
+    ) }) }) })
+  ] });
+};
+export {
+  z as default
+};

package/documentation/CheckboxSection-DpC1rIxz.js

@@ -0,0 +1,29 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("react"),a=require("../index-DMs_SmPq.js"),t=require("lucide-react");require("react-router-dom");require("react-dom");const m=()=>{const[r,c]=o.useState(!1),[i,d]=o.useState(!0),n=[{label:"Primary",color:"primary"},{label:"Secondary",color:"secondary"},{label:"Danger",color:"danger"},{label:"Info",color:"info"},{label:"Success",color:"success"},{label:"Warning",color:"warning"}],h=[{label:"Small",size:"sm"},{label:"Medium",size:"md"},{label:"Large",size:"lg"}];return e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"Checkbox",description:"A checkbox component for binary selections.",icon:e.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-green-500 via-emerald-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg border border-green-500/50",children:e.jsx(t.CheckSquare,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Basic Checkbox"}),e.jsx(a.Checkbox,{label:"I accept the terms and conditions",checked:r,onChange:s=>c(s.target.checked)})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Helper Text"}),e.jsx(a.Checkbox,{label:"Subscribe to newsletter",helperText:"Receive updates via email",checked:r,onChange:s=>c(s.target.checked)})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Error"}),e.jsx(a.Checkbox,{label:"Required checkbox",error:"This field is required"})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Disabled"}),e.jsx(a.Checkbox,{label:"Disabled option",disabled:!0})]})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Variants",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-3 gap-4",children:[e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Ghost (default)"}),e.jsx(a.Checkbox,{label:"Ghost Variant",variant:"ghost"})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Solid"}),e.jsx(a.Checkbox,{label:"Solid Variant",variant:"solid"})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Transparent"}),e.jsx(a.Checkbox,{label:"Transparent Variant",variant:"transparent"})]})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Colors",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx("div",{className:"grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3",children:n.map(({label:s,color:l})=>e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:s}),e.jsx(a.Checkbox,{label:`${s} Checkbox`,color:l})]},l))})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Sizes",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx("div",{className:"grid grid-cols-1 gap-4 md:grid-cols-3",children:h.map(({label:s,size:l})=>e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:s}),e.jsx(a.Checkbox,{label:`${s} Checkbox`,size:l})]},l))})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Shapes",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Rounded"}),e.jsx(a.Checkbox,{label:"Rounded Shape",shape:"rounded"})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Square (default)"}),e.jsx(a.Checkbox,{label:"Square Shape",shape:"square"})]})]})})})}),e.jsx(a.PropPlayground,{componentName:"Checkbox",defaultValues:{label:"Preview Checkbox",variant:"ghost",color:"primary",size:"md",shape:"square",helperText:"",error:"",disabled:!1},includeProps:["label","variant","color","size","shape","helperText","error","disabled"],excludeProps:["checked","onChange"],children:s=>e.jsx(a.Checkbox,{...s,checked:i,onChange:l=>d(l.target.checked)})}),e.jsx(a.AutoPropsTable,{componentName:"Checkbox"}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.CodeBlock,{language:"tsx",code:`import { Checkbox } from '@e-burgos/tucu-ui';
+
+<Checkbox
+  label="I accept the terms and conditions"
+  checked={checked}
+  onChange={(e) => setChecked(e.target.checked)}
+/>
+
+// Variants
+<Checkbox label="Ghost" variant="ghost" />
+<Checkbox label="Solid" variant="solid" />
+<Checkbox label="Transparent" variant="transparent" />
+
+// Shapes
+<Checkbox label="Rounded" shape="rounded" />
+<Checkbox label="Square" shape="square" />
+
+// Colors
+<Checkbox label="Primary" color="primary" />
+<Checkbox label="Secondary" color="secondary" />
+<Checkbox label="Danger" color="danger" />
+<Checkbox label="Info" color="info" />
+<Checkbox label="Success" color="success" />
+<Checkbox label="Warning" color="warning" />
+
+// Sizes
+<Checkbox label="Small" size="sm" />
+<Checkbox label="Medium" size="md" />
+<Checkbox label="Large" size="lg" />`})})})})]})};exports.default=m;

package/documentation/CodeExamplesSection-CzT6xoBd.js

@@ -0,0 +1,68 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../index-DMs_SmPq.js"),s=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const o=()=>{const i=[{title:"Accessible Input with Error",description:"Input automatically connects label, error, and helper text via aria attributes.",code:`import { Input } from '@e-burgos/tucu-ui';
+
+// Input auto-generates IDs with useId()
+// label uses htmlFor → input id
+// helperText → aria-describedby
+// error → aria-invalid="true"
+// required → aria-required="true"
+<Input
+  label="Email Address"
+  placeholder="you@example.com"
+  required
+  error="Please enter a valid email"
+  helperText="We'll never share your email"
+  variant="ghost"
+/>`},{title:"Accessible Modal",description:"Modal provides dialog semantics, Escape key, and focus restoration. Note: lacks focus trapping.",code:`import { Modal } from '@e-burgos/tucu-ui';
+
+// role="dialog" + aria-modal="true"
+// aria-labelledby → title text
+// aria-describedby → content text
+// Escape key closes
+// Focus restores to trigger on close
+// ⚠️ Tab can escape modal (no focus trap)
+<Modal
+  isOpen={isOpen}
+  setIsOpen={setIsOpen}
+  onClose={() => console.log('closed')}
+  text={{
+    title: 'Confirm Action',
+    content: 'Are you sure you want to proceed?',
+    button: 'Confirm',
+    backButton: 'Cancel',
+  }}
+/>`},{title:"Accessible Alert",description:"Alert uses live regions so screen readers announce content changes immediately.",code:`import { Alert } from '@e-burgos/tucu-ui';
+
+// role="alert" → immediate announcement
+// aria-live="assertive" + aria-atomic="true"
+// Dismiss button has aria-label="Dismiss alert"
+// Supports custom aria-label
+<Alert
+  variant="warning"
+  dismissible={true}
+  aria-label="Important notification"
+>
+  Your session will expire in 5 minutes.
+</Alert>`},{title:"Form with FormField",description:"FormField wraps react-hook-form Controller and auto-wires errors to child components.",code:`import { Form, FormField, Input, Select } from '@e-burgos/tucu-ui';
+
+<Form onSubmit={handleSubmit}>
+  {/* FormField auto-injects error prop from form state */}
+  <FormField
+    name="email"
+    label="Email"
+    rules={{ required: 'Email is required' }}
+  >
+    <Input variant="ghost" placeholder="Enter email" />
+  </FormField>
+
+  <FormField
+    name="role"
+    label="Role"
+    rules={{ required: 'Role is required' }}
+  >
+    <Select
+      options={roleOptions}
+      variant="ghost"
+      placeholder="Select role"
+    />
+  </FormField>
+</Form>`}];return e.jsxs(e.Fragment,{children:[e.jsx(r.HeroCard,{title:"Code Examples",description:"Practical code examples showing how to use accessibility features in tucu-ui components. Each example includes comments explaining the ARIA behavior.",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-cyan-500 via-blue-500 to-indigo-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(s.Code,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(r.Typography,{tag:"h2",className:"mb-2",children:"Accessible Component Patterns"}),e.jsx(r.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Copy-paste examples with built-in accessibility"})]}),e.jsx("div",{className:"space-y-6",children:i.map((t,a)=>e.jsx(r.CardContainer,{children:e.jsxs("div",{className:"w-full p-4 sm:p-6 space-y-4",children:[e.jsxs("div",{children:[e.jsx(r.Typography,{tag:"h3",className:"font-semibold text-lg mb-1",children:t.title}),e.jsx(r.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400",children:t.description})]}),e.jsx(r.CodeBlock,{language:"tsx",code:t.code})]})},a))})]})]})};exports.default=o;

package/documentation/CodeExamplesSection-DmnhyUyh.js

@@ -0,0 +1,134 @@
+import { jsxs as t, Fragment as o, jsx as e } from "react/jsx-runtime";
+import { H as s, T as r, C as l, c as n } from "../index-19KsCnyX.js";
+import { Code as c } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const x = () => /* @__PURE__ */ t(o, { children: [
+  /* @__PURE__ */ e(
+    s,
+    {
+      title: "Code Examples",
+      description: "Practical code examples showing how to use accessibility features in tucu-ui components. Each example includes comments explaining the ARIA behavior.",
+      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-cyan-500 via-blue-500 to-indigo-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__ */ t("section", { className: "space-y-8", children: [
+    /* @__PURE__ */ t("div", { className: "text-center", children: [
+      /* @__PURE__ */ e(r, { tag: "h2", className: "mb-2", children: "Accessible Component Patterns" }),
+      /* @__PURE__ */ e(
+        r,
+        {
+          tag: "p",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "Copy-paste examples with built-in accessibility"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e("div", { className: "space-y-6", children: [
+      {
+        title: "Accessible Input with Error",
+        description: "Input automatically connects label, error, and helper text via aria attributes.",
+        code: `import { Input } from '@e-burgos/tucu-ui';
+
+// Input auto-generates IDs with useId()
+// label uses htmlFor → input id
+// helperText → aria-describedby
+// error → aria-invalid="true"
+// required → aria-required="true"
+<Input
+  label="Email Address"
+  placeholder="you@example.com"
+  required
+  error="Please enter a valid email"
+  helperText="We'll never share your email"
+  variant="ghost"
+/>`
+      },
+      {
+        title: "Accessible Modal",
+        description: "Modal provides dialog semantics, Escape key, and focus restoration. Note: lacks focus trapping.",
+        code: `import { Modal } from '@e-burgos/tucu-ui';
+
+// role="dialog" + aria-modal="true"
+// aria-labelledby → title text
+// aria-describedby → content text
+// Escape key closes
+// Focus restores to trigger on close
+// ⚠️ Tab can escape modal (no focus trap)
+<Modal
+  isOpen={isOpen}
+  setIsOpen={setIsOpen}
+  onClose={() => console.log('closed')}
+  text={{
+    title: 'Confirm Action',
+    content: 'Are you sure you want to proceed?',
+    button: 'Confirm',
+    backButton: 'Cancel',
+  }}
+/>`
+      },
+      {
+        title: "Accessible Alert",
+        description: "Alert uses live regions so screen readers announce content changes immediately.",
+        code: `import { Alert } from '@e-burgos/tucu-ui';
+
+// role="alert" → immediate announcement
+// aria-live="assertive" + aria-atomic="true"
+// Dismiss button has aria-label="Dismiss alert"
+// Supports custom aria-label
+<Alert
+  variant="warning"
+  dismissible={true}
+  aria-label="Important notification"
+>
+  Your session will expire in 5 minutes.
+</Alert>`
+      },
+      {
+        title: "Form with FormField",
+        description: "FormField wraps react-hook-form Controller and auto-wires errors to child components.",
+        code: `import { Form, FormField, Input, Select } from '@e-burgos/tucu-ui';
+
+<Form onSubmit={handleSubmit}>
+  {/* FormField auto-injects error prop from form state */}
+  <FormField
+    name="email"
+    label="Email"
+    rules={{ required: 'Email is required' }}
+  >
+    <Input variant="ghost" placeholder="Enter email" />
+  </FormField>
+
+  <FormField
+    name="role"
+    label="Role"
+    rules={{ required: 'Role is required' }}
+  >
+    <Select
+      options={roleOptions}
+      variant="ghost"
+      placeholder="Select role"
+    />
+  </FormField>
+</Form>`
+      }
+    ].map((i, a) => /* @__PURE__ */ e(l, { children: /* @__PURE__ */ t("div", { className: "w-full p-4 sm:p-6 space-y-4", children: [
+      /* @__PURE__ */ t("div", { children: [
+        /* @__PURE__ */ e(r, { tag: "h3", className: "font-semibold text-lg mb-1", children: i.title }),
+        /* @__PURE__ */ e(
+          r,
+          {
+            tag: "p",
+            className: "text-sm text-gray-500 dark:text-gray-400",
+            children: i.description
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e(n, { language: "tsx", code: i.code })
+    ] }) }, a)) })
+  ] })
+] });
+export {
+  x as default
+};