@vhyxui/react 0.3.0-alpha → 0.4.0-alpha

package/dist/Field-Dx9gXxGL.js

@@ -0,0 +1,120 @@
+import { jsx as u, jsxs as v } from "react/jsx-runtime";
+import N, { useContext as w, useCallback as z, useMemo as M, createContext as P } from "react";
+import { u as R } from "./useId-BGRmH6iF.js";
+import { formContract as $ } from "@vhyxui/core";
+import { withAgentContract as k } from "@vhyxseal/react";
+const A = "_form_14a4e_3", D = "_field_14a4e_24", H = "_label_14a4e_40", L = "_control_14a4e_46", G = "_hint_14a4e_51", J = "_error_14a4e_52", K = "_required_14a4e_76", O = "_optional_14a4e_81", a = {
+  form: A,
+  field: D,
+  "field--horizontal": "_field--horizontal_14a4e_30",
+  label: H,
+  control: L,
+  hint: G,
+  error: J,
+  required: K,
+  optional: O
+}, q = P(null);
+function Q() {
+  return w(q);
+}
+const E = N.forwardRef(
+  ({
+    form: e,
+    layout: s = "vertical",
+    size: n = "md",
+    disabled: f = !1,
+    onSubmit: i,
+    className: y,
+    children: F,
+    ...c
+  }, g) => {
+    const d = e == null ? void 0 : e.formState, r = e == null ? void 0 : e.register, l = e ? (t) => e.getFieldState(t) : void 0, _ = z(
+      (t) => {
+        t.preventDefault(), e && i ? e.handleSubmit((h) => {
+          i(h);
+        })(t) : i && i({});
+      },
+      [e, i]
+    ), o = M(
+      () => {
+        const t = { disabled: f, size: n, layout: s };
+        return d !== void 0 && (t.formState = d), r !== void 0 && (t.register = r), l !== void 0 && (t.getFieldState = l), t;
+      },
+      [d, r, l, f, n, s]
+    ), m = [a.form, y].filter(Boolean).join(" ");
+    return /* @__PURE__ */ u(q.Provider, { value: o, children: /* @__PURE__ */ u(
+      "form",
+      {
+        ref: g,
+        className: m,
+        "data-layout": s,
+        "data-size": n,
+        onSubmit: _,
+        ...c,
+        children: F
+      }
+    ) });
+  }
+);
+E.displayName = "VhyxForm";
+const T = { ...$, id: "vhyxui-form" }, U = k(E, T);
+U.displayName = "VhyxForm";
+function W({
+  name: e,
+  label: s,
+  hint: n,
+  error: f,
+  required: i = !1,
+  optional: y = !1,
+  layout: F,
+  children: c,
+  className: g,
+  ...d
+}) {
+  var j, B, C;
+  const r = R("field"), l = `${r}-hint`, _ = `${r}-error`, o = Q(), m = (C = (B = (j = o == null ? void 0 : o.getFieldState) == null ? void 0 : j.call(o, e)) == null ? void 0 : B.error) == null ? void 0 : C.message, t = f ?? (typeof m == "string" ? m : void 0), h = !!t, x = !!n, p = [];
+  x && p.push(l), h && p.push(_);
+  const b = p.length > 0 ? p.join(" ") : void 0, S = F ?? (o == null ? void 0 : o.layout) ?? "vertical", I = N.isValidElement(c) ? N.cloneElement(
+    c,
+    {
+      id: r,
+      ...b !== void 0 ? { "aria-describedby": b } : {},
+      ...h ? { "aria-invalid": !0, "data-error": !0 } : {}
+    }
+  ) : c, V = [
+    a.field,
+    S === "horizontal" ? a["field--horizontal"] : "",
+    g
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ v("div", { className: V, "data-layout": S, ...d, children: [
+    s !== void 0 && /* @__PURE__ */ v("label", { htmlFor: r, className: a.label, children: [
+      s,
+      i && /* @__PURE__ */ v("span", { className: a.required, "aria-hidden": "true", children: [
+        " ",
+        "*"
+      ] }),
+      y && /* @__PURE__ */ v("span", { className: a.optional, "aria-hidden": "true", children: [
+        " ",
+        "(optional)"
+      ] })
+    ] }),
+    /* @__PURE__ */ u("div", { className: a.control, children: I }),
+    x && /* @__PURE__ */ u("span", { id: l, className: a.hint, children: n }),
+    h && /* @__PURE__ */ u(
+      "span",
+      {
+        id: _,
+        className: a.error,
+        role: "alert",
+        "aria-live": "assertive",
+        children: t
+      }
+    )
+  ] });
+}
+W.displayName = "VhyxField";
+export {
+  W as F,
+  U as a,
+  Q as u
+};

package/dist/Grid-Bzzb0usH.cjs

@@ -0,0 +1 @@
+"use strict";const p=require("react/jsx-runtime"),d=require("react"),x=require("./cx-dgWA95G6.cjs"),f=require("./utils.cjs"),g="_grid_1w7ml_1",y={grid:g},t=d.forwardRef(({as:s="div",columns:a=1,minChildWidth:e,gap:i=4,collapseBelow:o,className:c,style:n,...m},u)=>{const r=typeof e=="number"?`${e}px`:e,l=r?`repeat(auto-fit, minmax(min(${r}, 100%), 1fr))`:`repeat(${Math.max(1,Math.floor(a))}, minmax(0, 1fr))`;return p.jsx(s,{ref:u,className:x.cx(y.grid,c),"data-collapse":r?void 0:o,style:{gridTemplateColumns:l,gap:f.spaceVar(i),...n},...m})});t.displayName="VhyxGrid";exports.Grid=t;

package/dist/Grid-x_OHCzGV.js

@@ -0,0 +1,25 @@
+import { jsx as n } from "react/jsx-runtime";
+import l from "react";
+import { c as d } from "./cx-OWdTFKLx.js";
+import { spaceVar as x } from "./utils.js";
+const g = "_grid_1w7ml_1", y = {
+  grid: g
+}, u = l.forwardRef(
+  ({ as: t = "div", columns: o = 1, minChildWidth: r, gap: e = 4, collapseBelow: m, className: s, style: p, ...i }, c) => {
+    const a = typeof r == "number" ? `${r}px` : r, f = a ? `repeat(auto-fit, minmax(min(${a}, 100%), 1fr))` : `repeat(${Math.max(1, Math.floor(o))}, minmax(0, 1fr))`;
+    return /* @__PURE__ */ n(
+      t,
+      {
+        ref: c,
+        className: d(y.grid, s),
+        "data-collapse": a ? void 0 : m,
+        style: { gridTemplateColumns: f, gap: x(e), ...p },
+        ...i
+      }
+    );
+  }
+);
+u.displayName = "VhyxGrid";
+export {
+  u as G
+};

package/dist/Heading-BPqfnM8i.js

@@ -0,0 +1,14 @@
+import { jsx as e } from "react/jsx-runtime";
+import i from "react";
+import { c } from "./cx-OWdTFKLx.js";
+import { s as d } from "./Text.module-CEBydIO4.js";
+const n = { 1: "2xl", 2: "xl", 3: "lg", 4: "md", 5: "sm", 6: "xs" }, x = i.forwardRef(
+  ({ level: s = 2, size: a, className: o, ...r }, m) => {
+    const t = `h${s}`;
+    return /* @__PURE__ */ e(t, { ref: m, className: c(d.heading, o), "data-size": a ?? n[s], ...r });
+  }
+);
+x.displayName = "VhyxHeading";
+export {
+  x as H
+};

package/dist/Heading-icKRWRno.cjs

@@ -0,0 +1 @@
+"use strict";const i=require("react/jsx-runtime"),d=require("react"),o=require("./cx-dgWA95G6.cjs"),x=require("./Text.module-gGopk2Yk.cjs"),u={1:"2xl",2:"xl",3:"lg",4:"md",5:"sm",6:"xs"},s=d.forwardRef(({level:e=2,size:t,className:a,...n},r)=>{const c=`h${e}`;return i.jsx(c,{ref:r,className:o.cx(x.styles.heading,a),"data-size":t??u[e],...n})});s.displayName="VhyxHeading";exports.Heading=s;

package/dist/Input-B0dEXpG8.js

@@ -0,0 +1,151 @@
+import { jsxs as n, jsx as t, Fragment as m } from "react/jsx-runtime";
+import J, { useState as O, useCallback as w } from "react";
+import { inputContract as _ } from "@vhyxui/core";
+import { withAgentContract as T } from "@vhyxseal/react";
+import { u as D } from "./useId-BGRmH6iF.js";
+const G = "_wrapper_uqbxf_1", K = "_input_uqbxf_60", Q = "_icon_uqbxf_94", U = "_prefix_uqbxf_106", X = "_suffix_uqbxf_107", e = {
+  wrapper: G,
+  "wrapper--error": "_wrapper--error_uqbxf_29",
+  input: K,
+  icon: Q,
+  prefix: U,
+  suffix: X,
+  "clear-button": "_clear-button_uqbxf_117",
+  "toggle-button": "_toggle-button_uqbxf_118"
+};
+function Y({ crossed: s }) {
+  return /* @__PURE__ */ t(
+    "svg",
+    {
+      "aria-hidden": "true",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      style: { width: "1em", height: "1em" },
+      children: s ? /* @__PURE__ */ n(m, { children: [
+        /* @__PURE__ */ t("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94" }),
+        /* @__PURE__ */ t("path", { d: "M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19" }),
+        /* @__PURE__ */ t("line", { x1: "1", y1: "1", x2: "23", y2: "23" })
+      ] }) : /* @__PURE__ */ n(m, { children: [
+        /* @__PURE__ */ t("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }),
+        /* @__PURE__ */ t("circle", { cx: 12, cy: 12, r: 3 })
+      ] })
+    }
+  );
+}
+function Z() {
+  return /* @__PURE__ */ n(
+    "svg",
+    {
+      "aria-hidden": "true",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2.5,
+      strokeLinecap: "round",
+      style: { width: "0.75em", height: "0.75em" },
+      children: [
+        /* @__PURE__ */ t("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+        /* @__PURE__ */ t("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+      ]
+    }
+  );
+}
+const y = J.forwardRef(
+  ({
+    size: s = "md",
+    icon: i,
+    iconPosition: o = "left",
+    suffix: c,
+    prefix: f,
+    clearable: g = !1,
+    onClear: r,
+    error: d = !1,
+    contract: v,
+    className: I,
+    id: N,
+    type: l,
+    value: u,
+    onChange: k,
+    "aria-label": C,
+    "aria-describedby": q,
+    ...S
+  }, B) => {
+    const j = D("vhyx-input"), x = N ?? j, [p, A] = O(!1), L = w(() => {
+      A((H) => !H);
+    }, []), h = l === "password", M = l === "search", P = h ? p ? "text" : "password" : l, V = u !== void 0 ? String(u).length > 0 : !1, b = g || M && V, z = w(() => {
+      r == null || r();
+    }, [r]), a = !!i, R = !!f, W = !!c || h || b, E = {
+      ..._,
+      id: x,
+      ...v
+    }, F = [
+      e.wrapper,
+      d ? e["wrapper--error"] : "",
+      I
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ n(
+      "div",
+      {
+        className: F,
+        "data-size": s,
+        "data-error": d ? !0 : void 0,
+        "data-has-icon": a ? !0 : void 0,
+        "data-icon-position": a ? o : void 0,
+        children: [
+          R && /* @__PURE__ */ t("span", { className: e.prefix, "aria-hidden": "true", children: f }),
+          a && o === "left" && /* @__PURE__ */ t("span", { className: e.icon, "aria-hidden": "true", children: i }),
+          /* @__PURE__ */ t(
+            "input",
+            {
+              ref: B,
+              id: x,
+              type: P,
+              value: u,
+              onChange: k,
+              "aria-invalid": d ? !0 : void 0,
+              "aria-label": C,
+              "aria-describedby": q,
+              className: e.input,
+              "data-vhyx-contract": JSON.stringify(E),
+              ...S
+            }
+          ),
+          a && o === "right" && /* @__PURE__ */ t("span", { className: e.icon, "aria-hidden": "true", children: i }),
+          b && /* @__PURE__ */ t(
+            "button",
+            {
+              type: "button",
+              className: e["clear-button"],
+              onClick: z,
+              "aria-label": "Clear",
+              tabIndex: 0,
+              children: /* @__PURE__ */ t(Z, {})
+            }
+          ),
+          h && /* @__PURE__ */ t(
+            "button",
+            {
+              type: "button",
+              className: e["toggle-button"],
+              onClick: L,
+              "aria-label": p ? "Hide password" : "Show password",
+              tabIndex: 0,
+              children: /* @__PURE__ */ t(Y, { crossed: p })
+            }
+          ),
+          W && c && /* @__PURE__ */ t("span", { className: e.suffix, "aria-hidden": "true", children: c })
+        ]
+      }
+    );
+  }
+);
+y.displayName = "VhyxInput";
+const $ = { ..._, id: "vhyxui-input" }, tt = T(y, $);
+tt.displayName = "VhyxInput";
+export {
+  tt as I
+};

package/dist/Input-CdS0oZyf.cjs

@@ -0,0 +1 @@
+"use strict";const e=require("react/jsx-runtime"),a=require("react"),w=require("@vhyxui/core"),H=require("@vhyxseal/react"),J=require("./useId-D2AEOm2G.cjs"),O="_wrapper_uqbxf_1",T="_input_uqbxf_60",D="_icon_uqbxf_94",G="_prefix_uqbxf_106",K="_suffix_uqbxf_107",t={wrapper:O,"wrapper--error":"_wrapper--error_uqbxf_29",input:T,icon:D,prefix:G,suffix:K,"clear-button":"_clear-button_uqbxf_117","toggle-button":"_toggle-button_uqbxf_118"};function Q({crossed:n}){return e.jsx("svg",{"aria-hidden":"true",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round",style:{width:"1em",height:"1em"},children:n?e.jsxs(e.Fragment,{children:[e.jsx("path",{d:"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"}),e.jsx("path",{d:"M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"}),e.jsx("line",{x1:"1",y1:"1",x2:"23",y2:"23"})]}):e.jsxs(e.Fragment,{children:[e.jsx("path",{d:"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"}),e.jsx("circle",{cx:12,cy:12,r:3})]})})}function U(){return e.jsxs("svg",{"aria-hidden":"true",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2.5,strokeLinecap:"round",style:{width:"0.75em",height:"0.75em"},children:[e.jsx("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),e.jsx("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]})}const j=a.forwardRef(({size:n="md",icon:i,iconPosition:o="left",suffix:c,prefix:h,clearable:y=!1,onClear:s,error:d=!1,contract:g,className:m,id:v,type:u,value:l,onChange:I,"aria-label":q,"aria-describedby":k,...C},N)=>{const S=J.useId("vhyx-input"),f=v??S,[x,B]=a.useState(!1),A=a.useCallback(()=>{B(E=>!E)},[]),p=u==="password",L=u==="search",M=p?x?"text":"password":u,P=l!==void 0?String(l).length>0:!1,b=y||L&&P,R=a.useCallback(()=>{s==null||s()},[s]),r=!!i,V=!!h,z=!!c||p||b,F={...w.inputContract,id:f,...g},W=[t.wrapper,d?t["wrapper--error"]:"",m].filter(Boolean).join(" ");return e.jsxs("div",{className:W,"data-size":n,"data-error":d?!0:void 0,"data-has-icon":r?!0:void 0,"data-icon-position":r?o:void 0,children:[V&&e.jsx("span",{className:t.prefix,"aria-hidden":"true",children:h}),r&&o==="left"&&e.jsx("span",{className:t.icon,"aria-hidden":"true",children:i}),e.jsx("input",{ref:N,id:f,type:M,value:l,onChange:I,"aria-invalid":d?!0:void 0,"aria-label":q,"aria-describedby":k,className:t.input,"data-vhyx-contract":JSON.stringify(F),...C}),r&&o==="right"&&e.jsx("span",{className:t.icon,"aria-hidden":"true",children:i}),b&&e.jsx("button",{type:"button",className:t["clear-button"],onClick:R,"aria-label":"Clear",tabIndex:0,children:e.jsx(U,{})}),p&&e.jsx("button",{type:"button",className:t["toggle-button"],onClick:A,"aria-label":x?"Hide password":"Show password",tabIndex:0,children:e.jsx(Q,{crossed:x})}),z&&c&&e.jsx("span",{className:t.suffix,"aria-hidden":"true",children:c})]})});j.displayName="VhyxInput";const X={...w.inputContract,id:"vhyxui-input"},_=H.withAgentContract(j,X);_.displayName="VhyxInput";exports.Input=_;

package/dist/Kbd-C2vxklhy.cjs

@@ -0,0 +1 @@
+"use strict";const e=require("react/jsx-runtime"),o={display:"inline-flex",alignItems:"center",minWidth:"1.5em",justifyContent:"center",padding:"0 var(--vhyx-space-1-5)",fontFamily:"var(--vhyx-font-mono)",fontSize:"var(--vhyx-text-xs)",lineHeight:1.6,color:"var(--vhyx-color-text-subtle)",background:"var(--vhyx-color-bg-subtle)",border:"var(--vhyx-border-width) solid var(--vhyx-color-border)",borderBottomWidth:2,borderRadius:"var(--vhyx-radius-sm)"};function l({keys:r,children:d,style:t,...i}){return r&&r.length>0?e.jsx("kbd",{style:{display:"inline-flex",gap:"var(--vhyx-space-1)",...t},...i,children:r.map((n,a)=>e.jsx("kbd",{style:o,children:n},`${n}-${a}`))}):e.jsx("kbd",{style:{...o,...t},...i,children:d})}exports.Kbd=l;

package/dist/Kbd-DGURpjWN.js

@@ -0,0 +1,22 @@
+import { jsx as e } from "react/jsx-runtime";
+const n = {
+  display: "inline-flex",
+  alignItems: "center",
+  minWidth: "1.5em",
+  justifyContent: "center",
+  padding: "0 var(--vhyx-space-1-5)",
+  fontFamily: "var(--vhyx-font-mono)",
+  fontSize: "var(--vhyx-text-xs)",
+  lineHeight: 1.6,
+  color: "var(--vhyx-color-text-subtle)",
+  background: "var(--vhyx-color-bg-subtle)",
+  border: "var(--vhyx-border-width) solid var(--vhyx-color-border)",
+  borderBottomWidth: 2,
+  borderRadius: "var(--vhyx-radius-sm)"
+};
+function v({ keys: r, children: a, style: t, ...o }) {
+  return r && r.length > 0 ? /* @__PURE__ */ e("kbd", { style: { display: "inline-flex", gap: "var(--vhyx-space-1)", ...t }, ...o, children: r.map((i, d) => /* @__PURE__ */ e("kbd", { style: n, children: i }, `${i}-${d}`)) }) : /* @__PURE__ */ e("kbd", { style: { ...n, ...t }, ...o, children: a });
+}
+export {
+  v as K
+};

package/dist/Pagination-CiE9Jzm0.cjs

@@ -0,0 +1 @@
+"use strict";const t=require("react/jsx-runtime"),m=require("react"),_=require("@vhyxui/core"),g=require("@vhyxseal/react"),L=require("./useId-D2AEOm2G.cjs"),M="_nav_1kxmq_1",P="_list_1kxmq_5",E="_button_1kxmq_15",w="_ellipsis_1kxmq_75",l={nav:M,list:P,button:E,ellipsis:w},p="ellipsis";function A(i,s,a){const u=a*2+5;if(s<=u)return Array.from({length:s},(c,x)=>x+1);const o=Math.max(i-a,2),r=Math.min(i+a,s-1),n=o>2,b=r<s-1,e=[1];n&&e.push(p);for(let c=o;c<=r;c++)e.push(c);return b&&e.push(p),e.push(s),e}const N=m.forwardRef(({page:i,pageCount:s,onPageChange:a,siblingCount:u=1,showFirstLast:o=!1,showPrevNext:r=!0,size:n="md",contract:b,className:e,...c},x)=>{const f=L.useId("vhyx-pagination"),q=m.useMemo(()=>({..._.paginationContract,id:f,...b}),[f,b]),S=m.useMemo(()=>A(i,s,u),[i,s,u]),j=i<=1,y=i>=s,I=[l.nav,e].filter(Boolean).join(" ");return t.jsx("nav",{ref:x,"aria-label":"Pagination",className:I,"data-size":n,"data-vhyx-contract":JSON.stringify(q),...c,children:t.jsxs("ul",{className:l.list,children:[o&&t.jsx("li",{children:t.jsx("button",{type:"button",className:l.button,onClick:()=>a(1),disabled:j,"aria-label":"First page","data-size":n,children:"«"})}),r&&t.jsx("li",{children:t.jsx("button",{type:"button",className:l.button,onClick:()=>a(i-1),disabled:j,"aria-label":"Previous page","data-size":n,children:"‹"})}),S.map((v,R)=>{if(v===p)return t.jsx("li",{children:t.jsx("span",{className:l.ellipsis,"aria-hidden":"true",children:"…"})},`ellipsis-${R}`);const d=v,h=d===i;return t.jsx("li",{children:t.jsx("button",{type:"button",className:l.button,onClick:()=>!h&&a(d),"aria-current":h?"page":void 0,"aria-label":h?void 0:`Page ${d}`,"data-state":h?"active":"inactive","data-size":n,children:d})},d)}),r&&t.jsx("li",{children:t.jsx("button",{type:"button",className:l.button,onClick:()=>a(i+1),disabled:y,"aria-label":"Next page","data-size":n,children:"›"})}),o&&t.jsx("li",{children:t.jsx("button",{type:"button",className:l.button,onClick:()=>a(s),disabled:y,"aria-label":"Last page","data-size":n,children:"»"})})]})})});N.displayName="VhyxPagination";const B={..._.paginationContract,id:"vhyxui-pagination"},k=g.withAgentContract(N,B);k.displayName="VhyxPagination";exports.Pagination=k;

package/dist/Pagination-UQ53MWnR.js

@@ -0,0 +1,128 @@
+import { jsx as t, jsxs as P } from "react/jsx-runtime";
+import R, { useMemo as _ } from "react";
+import { paginationContract as N } from "@vhyxui/core";
+import { withAgentContract as j } from "@vhyxseal/react";
+import { u as E } from "./useId-BGRmH6iF.js";
+const M = "_nav_1kxmq_1", g = "_list_1kxmq_5", w = "_button_1kxmq_15", A = "_ellipsis_1kxmq_75", l = {
+  nav: M,
+  list: g,
+  button: w,
+  ellipsis: A
+}, p = "ellipsis";
+function B(i, a, n) {
+  const m = n * 2 + 5;
+  if (a <= m)
+    return Array.from({ length: a }, (e, h) => h + 1);
+  const r = Math.max(i - n, 2), c = Math.min(i + n, a - 1), s = r > 2, u = c < a - 1, o = [1];
+  s && o.push(p);
+  for (let e = r; e <= c; e++)
+    o.push(e);
+  return u && o.push(p), o.push(a), o;
+}
+const k = R.forwardRef(
+  ({
+    page: i,
+    pageCount: a,
+    onPageChange: n,
+    siblingCount: m = 1,
+    showFirstLast: r = !1,
+    showPrevNext: c = !0,
+    size: s = "md",
+    contract: u,
+    className: o,
+    ...e
+  }, h) => {
+    const f = E("vhyx-pagination"), S = _(
+      () => ({ ...N, id: f, ...u }),
+      [f, u]
+    ), q = _(
+      () => B(i, a, m),
+      [i, a, m]
+    ), y = i <= 1, v = i >= a, I = [l.nav, o].filter(Boolean).join(" ");
+    return /* @__PURE__ */ t(
+      "nav",
+      {
+        ref: h,
+        "aria-label": "Pagination",
+        className: I,
+        "data-size": s,
+        "data-vhyx-contract": JSON.stringify(S),
+        ...e,
+        children: /* @__PURE__ */ P("ul", { className: l.list, children: [
+          r && /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(
+            "button",
+            {
+              type: "button",
+              className: l.button,
+              onClick: () => n(1),
+              disabled: y,
+              "aria-label": "First page",
+              "data-size": s,
+              children: "«"
+            }
+          ) }),
+          c && /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(
+            "button",
+            {
+              type: "button",
+              className: l.button,
+              onClick: () => n(i - 1),
+              disabled: y,
+              "aria-label": "Previous page",
+              "data-size": s,
+              children: "‹"
+            }
+          ) }),
+          q.map((x, L) => {
+            if (x === p)
+              return /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t("span", { className: l.ellipsis, "aria-hidden": "true", children: "…" }) }, `ellipsis-${L}`);
+            const d = x, b = d === i;
+            return /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(
+              "button",
+              {
+                type: "button",
+                className: l.button,
+                onClick: () => !b && n(d),
+                "aria-current": b ? "page" : void 0,
+                "aria-label": b ? void 0 : `Page ${d}`,
+                "data-state": b ? "active" : "inactive",
+                "data-size": s,
+                children: d
+              }
+            ) }, d);
+          }),
+          c && /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(
+            "button",
+            {
+              type: "button",
+              className: l.button,
+              onClick: () => n(i + 1),
+              disabled: v,
+              "aria-label": "Next page",
+              "data-size": s,
+              children: "›"
+            }
+          ) }),
+          r && /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(
+            "button",
+            {
+              type: "button",
+              className: l.button,
+              onClick: () => n(a),
+              disabled: v,
+              "aria-label": "Last page",
+              "data-size": s,
+              children: "»"
+            }
+          ) })
+        ] })
+      }
+    );
+  }
+);
+k.displayName = "VhyxPagination";
+const V = { ...N, id: "vhyxui-pagination" }, $ = j(k, V);
+$.displayName = "VhyxPagination";
+export {
+  $ as P
+};