welcome-ui 10.0.0-alpha.2 → 10.0.0-alpha.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/Icon.js +8 -4
  2. package/dist/Link.js +19 -18
  3. package/dist/Pagination.css +1 -1
  4. package/dist/Pagination.js +155 -76
  5. package/dist/types/components/Icon/icons.d.ts +2 -2
  6. package/dist/types/components/Pagination/types.d.ts +11 -0
  7. package/package.json +1 -1
package/dist/Icon.js CHANGED
@@ -2,7 +2,7 @@
2
2
  import { jsxs as o, jsx as a } from "react/jsx-runtime";
3
3
  import { forwardRef as C } from "react";
4
4
  import { c as e } from "./index-PAaZGbyz.js";
5
- const s = "_root_576cf_2", A = {
5
+ const s = "_root_576cf_2", n = {
6
6
  root: s,
7
7
  "size-xs": "_size-xs_576cf_7",
8
8
  "size-sm": "_size-sm_576cf_10",
@@ -212,14 +212,18 @@ const s = "_root_576cf_2", A = {
212
212
  /* @__PURE__ */ a("symbol", { id: "thumbs-down", viewBox: "0 0 24 24", children: /* @__PURE__ */ a("path", { fill: "currentColor", d: "M19,2H6.27A3,3,0,0,0,3.32,4.46l-1.27,7A3,3,0,0,0,5,15H9.56L9,16.43A4.13,4.13,0,0,0,12.89,22a1,1,0,0,0,.91-.59L16.65,15H19a3,3,0,0,0,3-3V5A3,3,0,0,0,19,2ZM15,13.79l-2.72,6.12a2.13,2.13,0,0,1-1.38-2.78l.53-1.43A2,2,0,0,0,9.56,13H5a1,1,0,0,1-.77-.36A1,1,0,0,1,4,11.82l1.27-7a1,1,0,0,1,1-.82H15ZM20,12a1,1,0,0,1-1,1H17V4h2a1,1,0,0,1,1,1Z", xmlns: "http://www.w3.org/2000/svg" }) }),
213
213
  /* @__PURE__ */ a("symbol", { id: "trees", viewBox: "0 0 24 24", children: /* @__PURE__ */ a("path", { fill: "currentColor", d: "M16.5,5A4.86,4.86,0,0,0,14,5.69,6,6,0,0,0,2.5,8v4a6,6,0,0,0,5,5.91V21a1,1,0,0,0,2,0V17.91a6.08,6.08,0,0,0,2.78-1.26A5,5,0,0,0,15.5,18.9V21a1,1,0,0,0,2,0V18.9a5,5,0,0,0,4-4.9V10A5,5,0,0,0,16.5,5Zm-5,5v4a5.23,5.23,0,0,0,.06.57,4,4,0,0,1-2.06,1.3V13a1,1,0,0,0-2,0v2.86A4,4,0,0,1,4.5,12V8a4,4,0,0,1,6.83-2.84,3.94,3.94,0,0,1,1.06,2A5,5,0,0,0,11.5,10Zm8,4a3,3,0,0,1-2,2.82V13a1,1,0,0,0-2,0v3.82a3,3,0,0,1-2-2.82V10a3,3,0,0,1,6,0Z", xmlns: "http://www.w3.org/2000/svg" }) }),
214
214
  /* @__PURE__ */ a("symbol", { id: "exit", viewBox: "0 0 24 24", children: /* @__PURE__ */ a("path", { fill: "currentColor", d: "M4,12a1,1,0,0,0,1,1h7.59l-2.3,2.29a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0l4-4a1,1,0,0,0,.21-.33,1,1,0,0,0,0-.76,1,1,0,0,0-.21-.33l-4-4a1,1,0,1,0-1.42,1.42L12.59,11H5A1,1,0,0,0,4,12ZM17,2H7A3,3,0,0,0,4,5V8A1,1,0,0,0,6,8V5A1,1,0,0,1,7,4H17a1,1,0,0,1,1,1V19a1,1,0,0,1-1,1H7a1,1,0,0,1-1-1V16a1,1,0,0,0-2,0v3a3,3,0,0,0,3,3H17a3,3,0,0,0,3-3V5A3,3,0,0,0,17,2Z", xmlns: "http://www.w3.org/2000/svg" }) }),
215
- /* @__PURE__ */ a("symbol", { id: "ban", viewBox: "0 0 24 24", children: /* @__PURE__ */ a("path", { fill: "currentColor", d: "M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,18a8,8,0,0,1-8-8A7.92,7.92,0,0,1,5.69,7.1L16.9,18.31A7.92,7.92,0,0,1,12,20Zm6.31-3.1L7.1,5.69A7.92,7.92,0,0,1,12,4a8,8,0,0,1,8,8A7.92,7.92,0,0,1,18.31,16.9Z", xmlns: "http://www.w3.org/2000/svg" }) })
216
- ] }), m = e(A), v = C(
215
+ /* @__PURE__ */ a("symbol", { id: "ban", viewBox: "0 0 24 24", children: /* @__PURE__ */ a("path", { fill: "currentColor", d: "M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,18a8,8,0,0,1-8-8A7.92,7.92,0,0,1,5.69,7.1L16.9,18.31A7.92,7.92,0,0,1,12,20Zm6.31-3.1L7.1,5.69A7.92,7.92,0,0,1,12,4a8,8,0,0,1,8,8A7.92,7.92,0,0,1,18.31,16.9Z", xmlns: "http://www.w3.org/2000/svg" }) }),
216
+ /* @__PURE__ */ a("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", id: "angle-double-left", children: /* @__PURE__ */ a("path", { fill: "currentColor", d: "M11.46,8.29a1,1,0,0,0-1.42,0l-3,3a1,1,0,0,0,0,1.42l3,3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42L9.16,12l2.3-2.29A1,1,0,0,0,11.46,8.29ZM14.66,12,17,9.71a1,1,0,0,0-1.42-1.42l-3,3a1,1,0,0,0,0,1.42l3,3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42Z" }) }),
217
+ /* @__PURE__ */ a("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", id: "angle-double-right", children: /* @__PURE__ */ a("path", { fill: "currentColor", d: "M8.46,8.29A1,1,0,1,0,7,9.71L9.34,12,7,14.29a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0l3-3a1,1,0,0,0,0-1.42Zm8.5,3-3-3a1,1,0,0,0-1.42,1.42L14.84,12l-2.3,2.29a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0l3-3A1,1,0,0,0,17,11.29Z" }) }),
218
+ /* @__PURE__ */ a("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", id: "angle-right", children: /* @__PURE__ */ a("path", { fill: "currentColor", d: "M14.83,11.29,10.59,7.05a1,1,0,0,0-1.42,0,1,1,0,0,0,0,1.41L12.71,12,9.17,15.54a1,1,0,0,0,0,1.41,1,1,0,0,0,.71.29,1,1,0,0,0,.71-.29l4.24-4.24A1,1,0,0,0,14.83,11.29Z" }) }),
219
+ /* @__PURE__ */ a("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", id: "angle-left", children: /* @__PURE__ */ a("path", { fill: "currentColor", d: "M11.29,12l3.54-3.54a1,1,0,0,0,0-1.41,1,1,0,0,0-1.42,0L9.17,11.29a1,1,0,0,0,0,1.42L13.41,17a1,1,0,0,0,.71.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41Z" }) })
220
+ ] }), A = e(n), v = C(
217
221
  ({ "aria-label": l, className: w, name: r, size: h = "md", ...i }, t) => /* @__PURE__ */ a(
218
222
  "svg",
219
223
  {
220
224
  "aria-hidden": l ? "false" : "true",
221
225
  "aria-label": l,
222
- className: m("root", `size-${h}`, `name-${r}`, w),
226
+ className: A("root", `size-${h}`, `name-${r}`, w),
223
227
  ref: t,
224
228
  role: l ? "img" : void 0,
225
229
  ...i,
package/dist/Link.js CHANGED
@@ -1,7 +1,7 @@
1
1
  "use client";
2
- import { jsxs as m, jsx as i } from "react/jsx-runtime";
2
+ import { jsxs as p, jsx as i } from "react/jsx-runtime";
3
3
  import o from "react";
4
- import { Icon as p } from "./Icon.js";
4
+ import { Icon as u } from "./Icon.js";
5
5
  import { c as N } from "./index-PAaZGbyz.js";
6
6
  import { f as w } from "./forwardRefWithAs-8eP3ZN15.js";
7
7
  const E = "_root_gizuv_2", k = "_isExternal_gizuv_14", M = "_isMultiline_gizuv_131", W = {
@@ -16,46 +16,47 @@ const E = "_root_gizuv_2", k = "_isExternal_gizuv_14", M = "_isMultiline_gizuv_1
16
16
  "size-lg": "_size-lg_gizuv_115",
17
17
  isMultiline: M,
18
18
  "icon-disabled": "_icon-disabled_gizuv_134"
19
- }, r = N(W), l = ({ children: e, isExternal: s }) => /* @__PURE__ */ m("span", { className: r("wui-text"), children: [
19
+ }, r = N(W), _ = ({ children: e, isExternal: s }) => /* @__PURE__ */ p("span", { className: r("wui-text"), children: [
20
20
  e,
21
- s ? /* @__PURE__ */ i(p, { name: "external-link-alt", size: "sm" }) : null
22
- ] }), _ = (e, s) => typeof e == "string" ? /* @__PURE__ */ i(l, { isExternal: s, children: e }) : o.isValidElement(e) && (e.type === "span" || e.props.as === "span" || // FormattedMessage from react-intl has a span tag by default
23
- e.props.tagName === "span" || e.props["data-wui-link"] === !0 || typeof e.props.children == "string") ? s ? /* @__PURE__ */ i(l, { isExternal: s, children: e }) : (
21
+ s ? /* @__PURE__ */ i(u, { name: "external-link-alt", size: "sm" }) : null
22
+ ] }), m = (e, s) => typeof e == "string" ? /* @__PURE__ */ i(_, { isExternal: s, children: e }) : o.isValidElement(e) && (e.type === "span" || e.props.as === "span" || // FormattedMessage from react-intl has a span tag by default
23
+ e.props.tagName === "span" || e.props["data-wui-link"] === !0 || typeof e.props.children == "string") ? s ? /* @__PURE__ */ i(_, { isExternal: s, children: e }) : (
24
24
  // If it is not external, we just need to add wui-text className to the child as we don't need to wrap it to display the icon
25
25
  o.cloneElement(e, {
26
26
  className: r("wui-text", e.props.className)
27
27
  })
28
28
  ) : e, C = w((e, s) => {
29
29
  const {
30
- as: u,
30
+ as: c,
31
31
  children: t,
32
- className: c,
32
+ className: z,
33
33
  disabled: n,
34
34
  isExternal: a,
35
- multiline: z,
36
- size: d = "md",
37
- target: g,
35
+ multiline: d,
36
+ size: g = "md",
37
+ target: l,
38
38
  variant: v = "primary",
39
39
  ...f
40
- } = e, x = u || "a", y = typeof t == "string" ? _(t, a) : o.Children.map(t, (b) => _(b, a));
41
- return /* @__PURE__ */ m(
40
+ } = e, x = c || "a", y = typeof t == "string" ? m(t, a) : o.Children.map(t, (b) => m(b, a));
41
+ return /* @__PURE__ */ p(
42
42
  x,
43
43
  {
44
44
  "aria-disabled": n,
45
45
  className: r(
46
46
  "root",
47
47
  `variant-${v}`,
48
- `size-${d}`,
48
+ `size-${g}`,
49
49
  a && "isExternal",
50
- z && "isMultiline",
51
- c
50
+ d && "isMultiline",
51
+ z
52
52
  ),
53
53
  ref: s,
54
- rel: g === "_blank" ? "noopener noreferrer" : void 0,
54
+ rel: l === "_blank" ? "noopener noreferrer" : void 0,
55
55
  tabIndex: n ? -1 : 0,
56
+ target: l,
56
57
  ...f,
57
58
  children: [
58
- n ? /* @__PURE__ */ i(p, { className: r("icon-disabled"), name: "ban", size: "md" }) : null,
59
+ n ? /* @__PURE__ */ i(u, { className: r("icon-disabled"), name: "ban", size: "md" }) : null,
59
60
  y
60
61
  ]
61
62
  }
package/dist/Pagination.css CHANGED
@@ -1 +1 @@
1
- @layer components{._list_1sith_2{list-style-type:none;padding:0;margin:0;display:flex;gap:var(--components-dimensions-pagination-start-padding-inline-leading-lg);align-items:center;flex-wrap:wrap}._item_1sith_11{color:var(--color, var(--components-colors-pagination-color-icon-unchecked-pressed));background-color:var(--backgroundColor, var(--components-colors-pagination-color-background-unchecked-default));font-size:var(--components-dimensions-pagination-start-padding-inline-trailing-md);font-weight:var(--font-weight-semi-bold);height:var(--components-dimensions-pagination-size-max-height-md);width:var(--components-dimensions-pagination-size-max-height-md);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none}._item_1sith_11:not([disabled]):hover,._item_1sith_11:focus-visible{--backgroundColor: var(--color-background-neutral-subtlest)}._item_1sith_11:focus-visible{--color: var(--components-colors-pagination-color-icon-unchecked-pressed);outline:none!important}._disabled-arrow_1sith_32{cursor:not-allowed;--color: var(--color-icon-warm-tertiary);--backgroundColor: var(--color-background-warm-stronger)}._page_1sith_37[aria-current=true]{--backgroundColor: var(--components-colors-pagination-color-icon-unchecked-pressed);--color: var(--components-colors-pagination-color-background-unchecked-default)}._page_1sith_37[aria-current=true]:hover,._page_1sith_37[aria-current=true]:focus-visible{--backgroundColor: var(--components-colors-pagination-color-icon-unchecked-pressed)}._dots_1sith_44{display:flex;justify-content:center;align-items:center}}
1
+ @layer components{._list_uyk8e_3{list-style-type:none;padding:0;margin:0;display:flex;gap:var(--components-dimensions-pagination-gap-pages);align-items:center;flex-wrap:wrap}._item_uyk8e_13{color:var(--color, var(--components-colors-pagination-color-icon-unchecked-pressed));background-color:var(--backgroundColor, var(--components-colors-pagination-color-background-unchecked-default));font-size:var(--components-dimensions-pagination-start-padding-inline-trailing-md);font-weight:var(--font-weight-semi-bold);border-radius:var(--components-dimensions-pagination-border-radius);display:flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;border-color:var(--borderColor, var(--components-colors-pagination-color-border-unchecked-default));border-width:var(--borderWidth, var(--components-dimensions-pagination-border-width-unchecked));border-style:solid;box-shadow:var(--elevation-10)}._item_uyk8e_13:not([disabled]):not([aria-current=true]):hover,._item_uyk8e_13:not([disabled]):not([aria-current=true]):focus-visible{background-color:var(--components-colors-pagination-color-background-unchecked-hover);border-color:var(--components-colors-pagination-color-border-unchecked-hover);box-shadow:var(--elevation-20);outline:none!important}._item_uyk8e_13:not([disabled]):not([aria-current=true]):active{background-color:var(--components-colors-pagination-color-background-unchecked-pressed);border-color:var(--components-colors-pagination-color-border-unchecked-pressed)}._item_uyk8e_13._disabled-arrow_uyk8e_43,._item_uyk8e_13[disabled]{cursor:not-allowed;color:var(--components-colors-pagination-color-text-unchecked-disabled);background:repeating-linear-gradient(-45deg,var(--color-neutral-30),var(--color-neutral-30) 1.75px,var(--color-background-warm-stronger) 3.75px,var(--color-background-warm-stronger) 3.25px) padding-box;box-shadow:none;border:0}._page_uyk8e_52[aria-current=true]{background-color:var(--components-colors-pagination-color-background-checked-default);border-color:var(--components-colors-pagination-color-border-checked-default);border-width:var(--components-dimensions-pagination-border-width-checked);color:var(--components-colors-pagination-color-text-checked-default)}._page_uyk8e_52[aria-current=true]:hover,._page_uyk8e_52[aria-current=true]:focus-visible{background-color:var(--components-colors-pagination-color-background-checked-hover);border-color:var(--components-colors-pagination-color-border-checked-hover);color:var(--components-colors-pagination-color-text-checked-hover);outline:none!important}._page_uyk8e_52[aria-current=true]:active{background-color:var(--components-colors-pagination-color-background-checked-pressed);border-color:var(--components-colors-pagination-color-border-checked-pressed);color:var(--components-colors-pagination-color-text-checked-pressed)}._with-text-left_uyk8e_72,._with-text-right_uyk8e_72{gap:var(--components-dimensions-pagination-gap-content)}._size-lg_uyk8e_75{font-size:var(--font-size-md);height:var(--components-dimensions-pagination-size-max-height-lg);width:var(--components-dimensions-pagination-size-min-height-lg)}._size-lg_uyk8e_75._with-text-right_uyk8e_72{padding-left:var(--components-dimensions-pagination-start-padding-inline-leading-lg);padding-right:var(--components-dimensions-pagination-end-padding-inline-leading-lg);width:auto}._size-lg_uyk8e_75._with-text-left_uyk8e_72{padding-left:var(--components-dimensions-pagination-start-padding-inline-trailing-lg);padding-right:var(--components-dimensions-pagination-end-padding-inline-trailing-lg);width:auto}._size-md_uyk8e_90{font-size:var(--font-size-sm);height:var(--components-dimensions-pagination-size-max-height-md);width:var(--components-dimensions-pagination-size-min-height-md)}._size-md_uyk8e_90._with-text-right_uyk8e_72{padding-left:var(--components-dimensions-pagination-start-padding-inline-leading-md);padding-right:var(--components-dimensions-pagination-end-padding-inline-leading-md);width:auto}._size-md_uyk8e_90._with-text-left_uyk8e_72{padding-left:var(--components-dimensions-pagination-start-padding-inline-trailing-md);padding-right:var(--components-dimensions-pagination-end-padding-inline-trailing-md);width:auto}}
package/dist/Pagination.js CHANGED
@@ -1,105 +1,184 @@
1
1
  "use client";
2
- import { jsx as n, jsxs as y } from "react/jsx-runtime";
3
- import { useMemo as z, forwardRef as B, useRef as _, useCallback as N } from "react";
4
- import { Icon as x } from "./Icon.js";
5
- import { c as D } from "./index-PAaZGbyz.js";
6
- const G = "_list_1sith_2", q = "_item_1sith_11", F = "_page_1sith_37", J = "_dots_1sith_44", K = {
7
- list: G,
8
- item: q,
9
- "disabled-arrow": "_disabled-arrow_1sith_32",
10
- page: F,
11
- dots: J
12
- }, c = 5, L = 3;
13
- function O({ page: i, pageCount: t, rangeDisplay: a }) {
14
- return z(() => {
15
- if (t <= a || t <= c + 1)
16
- return h(t, (s) => s + 1);
17
- const r = Q(i, t), d = r === "before" ? h(c, (s) => s + 1) : [1], l = r === "center" ? h(L, (s) => s + i - 1) : [], o = r === "after" ? h(c, (s) => s + t - c + 1) : [t];
18
- return S([d, l, o], "-");
19
- }, [i, t, a]);
2
+ import { jsx as s, jsxs as N } from "react/jsx-runtime";
3
+ import { useMemo as Z, forwardRef as p, useRef as M, useCallback as R } from "react";
4
+ import { Icon as A } from "./Icon.js";
5
+ import { c as H } from "./index-PAaZGbyz.js";
6
+ const I = "_list_uyk8e_3", C = "_item_uyk8e_13", n = "_page_uyk8e_52", a = {
7
+ list: I,
8
+ item: C,
9
+ "disabled-arrow": "_disabled-arrow_uyk8e_43",
10
+ page: n,
11
+ "with-text-left": "_with-text-left_uyk8e_72",
12
+ "with-text-right": "_with-text-right_uyk8e_72",
13
+ "size-lg": "_size-lg_uyk8e_75",
14
+ "size-md": "_size-md_uyk8e_90"
15
+ }, h = 5, x = 3;
16
+ function v({ page: c, pageCount: e, rangeDisplay: _ }) {
17
+ return Z(() => {
18
+ if (e <= _ || e <= h + 1)
19
+ return B(e, (b) => b + 1);
20
+ const u = g(c, e), o = u === "before" ? B(h, (b) => b + 1) : [1], r = u === "center" ? B(x, (b) => b + c - 1) : [], w = u === "after" ? B(h, (b) => b + e - h + 1) : [e];
21
+ return T([o, r, w], "-");
22
+ }, [c, e, _]);
20
23
  }
21
- function h(i, t) {
22
- return Array.from({ length: i }, (a, r) => t(r));
24
+ function B(c, e) {
25
+ return Array.from({ length: c }, (_, u) => e(u));
23
26
  }
24
- function Q(i, t) {
25
- return i < c ? "before" : i >= c && i <= t - c + 1 ? "center" : i > t - c + 1 ? "after" : "center";
27
+ function g(c, e) {
28
+ return c < h ? "before" : c >= h && c <= e - h + 1 ? "center" : c > e - h + 1 ? "after" : "center";
26
29
  }
27
- function S(i, t) {
28
- return i.reduce((a, r, d) => {
29
- const l = [];
30
- return l.push(...a), l.push(...r), r.length && d < i.length - 1 && l.push(t), l;
30
+ function T(c, e) {
31
+ return c.reduce((_, u, o) => {
32
+ const r = [];
33
+ return r.push(..._), r.push(...u), u.length && o < c.length - 1 && r.push(e), r;
31
34
  }, []);
32
35
  }
33
- const f = D(K), Y = B(
36
+ const m = H(a), sl = p(
34
37
  ({
35
- "aria-label": i,
36
- buttonNextProps: t,
37
- buttonPrevProps: a,
38
+ "aria-label": c,
39
+ buttonFirstProps: e,
40
+ buttonLastProps: _,
41
+ buttonNextProps: u,
42
+ buttonPrevProps: o,
38
43
  dataTestId: r,
39
- getHref: d,
40
- listProps: l,
41
- onChange: o,
42
- page: s,
43
- pageCount: m,
44
- rangeDisplay: v = 5,
45
- ...w
46
- }, P) => {
47
- const R = O({ page: s, pageCount: m, rangeDisplay: v }), $ = _(null), k = _(null), u = s === 1, b = s === m, A = N(() => {
48
- if (u) return;
49
- const e = Math.max(s - 1, 1);
50
- o(e);
51
- }, [u, s, o]), E = N(() => {
52
- if (b) return;
53
- const e = Math.min(s + 1, m);
54
- o(e);
55
- }, [b, s, m, o]);
56
- return /* @__PURE__ */ n("nav", { "aria-label": i ?? "Pagination", "data-testid": r, ref: P, ...w, children: /* @__PURE__ */ y("ol", { className: f("list"), ...l, children: [
57
- /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
44
+ getHref: w,
45
+ listProps: b,
46
+ navigationTexts: l,
47
+ onChange: d,
48
+ page: f,
49
+ pageCount: P,
50
+ rangeDisplay: G = 5,
51
+ showEdgeControls: D = !1,
52
+ size: i = "lg",
53
+ ...q
54
+ }, J) => {
55
+ const K = v({ page: f, pageCount: P, rangeDisplay: G }), O = M(null), Q = M(null), k = f === 1, y = f === P, $ = f === 1, z = f === P, j = (l == null ? void 0 : l.firstPage) || "First Page", E = (l == null ? void 0 : l.lastPage) || "Last Page", F = (l == null ? void 0 : l.nextPage) || "Next Page", L = (l == null ? void 0 : l.previousPage) || "Previous Page", S = R(() => {
56
+ $ || d(1);
57
+ }, [$, d]), U = R(() => {
58
+ z || d(P);
59
+ }, [z, P, d]), V = R(() => {
60
+ if (k) return;
61
+ const t = Math.max(f - 1, 1);
62
+ d(t);
63
+ }, [k, f, d]), W = R(() => {
64
+ if (y) return;
65
+ const t = Math.min(f + 1, P);
66
+ d(t);
67
+ }, [y, f, P, d]);
68
+ return /* @__PURE__ */ s("nav", { "aria-label": c ?? "Pagination", "data-testid": r, ref: J, ...q, children: /* @__PURE__ */ N("ol", { className: m("list"), ...b, children: [
69
+ D ? /* @__PURE__ */ s("li", { children: /* @__PURE__ */ N(
58
70
  "button",
59
71
  {
60
- "aria-label": "Previous Page",
61
- className: f("item", u && "disabled-arrow"),
72
+ "aria-label": j,
73
+ className: m(
74
+ "item",
75
+ `size-${i}`,
76
+ (l == null ? void 0 : l.firstPage) && "with-text-right",
77
+ $ && "disabled-arrow"
78
+ ),
79
+ "data-testid": r ? `${r}-arrow-first` : void 0,
80
+ disabled: $,
81
+ onClick: S,
82
+ type: "button",
83
+ ...e,
84
+ children: [
85
+ /* @__PURE__ */ s(A, { className: m("icon"), name: "angle-double-left", size: "lg" }),
86
+ l != null && l.firstPage ? j : null
87
+ ]
88
+ }
89
+ ) }) : null,
90
+ /* @__PURE__ */ s("li", { children: /* @__PURE__ */ N(
91
+ "button",
92
+ {
93
+ "aria-label": L,
94
+ className: m(
95
+ "item",
96
+ `size-${i}`,
97
+ (l == null ? void 0 : l.previousPage) && "with-text-right",
98
+ k && "disabled-arrow"
99
+ ),
62
100
  "data-testid": r ? `${r}-arrow-prev` : void 0,
63
- disabled: u,
64
- onClick: A,
65
- ref: $,
101
+ disabled: k,
102
+ onClick: V,
103
+ ref: O,
66
104
  type: "button",
67
- ...a,
68
- children: /* @__PURE__ */ n(x, { name: "angle-left-b", size: "sm" })
105
+ ...o,
106
+ children: [
107
+ /* @__PURE__ */ s(A, { className: m("icon"), name: "angle-left", size: "lg" }),
108
+ l != null && l.previousPage ? L : null
109
+ ]
69
110
  }
70
111
  ) }),
71
- R.map(
72
- (e, j) => e === "-" ? /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n("span", { className: f("dots"), children: "..." }) }, `${j}-`) : /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
112
+ K.map(
113
+ (t, X) => t === "-" ? /* @__PURE__ */ s("li", { children: /* @__PURE__ */ s(
114
+ "button",
115
+ {
116
+ "aria-label": "Collapsed Pages",
117
+ className: m("item", `size-${i}`),
118
+ type: "button",
119
+ ...u,
120
+ children: "..."
121
+ }
122
+ ) }, `${X}-`) : /* @__PURE__ */ s("li", { children: /* @__PURE__ */ s(
73
123
  "a",
74
124
  {
75
- "aria-current": e === s,
76
- className: f("item", "page"),
77
- "data-testid": r ? `${r}-${e}` : void 0,
78
- href: d == null ? void 0 : d(e),
79
- onClick: (M) => {
80
- o && (M.preventDefault(), o(e));
125
+ "aria-current": t === f,
126
+ className: m("item", "page", `size-${i}`),
127
+ "data-testid": r ? `${r}-${t}` : void 0,
128
+ href: w == null ? void 0 : w(t),
129
+ onClick: (Y) => {
130
+ d && (Y.preventDefault(), d(t));
81
131
  },
82
- children: e
132
+ children: t
83
133
  }
84
- ) }, e)
134
+ ) }, t)
85
135
  ),
86
- /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
136
+ /* @__PURE__ */ s("li", { children: /* @__PURE__ */ N(
87
137
  "button",
88
138
  {
89
- "aria-label": "Next Page",
90
- className: f("item", b && "disabled-arrow"),
139
+ "aria-label": F,
140
+ className: m(
141
+ "item",
142
+ `size-${i}`,
143
+ (l == null ? void 0 : l.nextPage) && "with-text-left",
144
+ y && "disabled-arrow"
145
+ ),
91
146
  "data-testid": r ? `${r}-arrow-next` : void 0,
92
- disabled: b,
93
- onClick: E,
94
- ref: k,
147
+ disabled: y,
148
+ onClick: W,
149
+ ref: Q,
150
+ type: "button",
151
+ ...u,
152
+ children: [
153
+ l != null && l.nextPage ? F : null,
154
+ /* @__PURE__ */ s(A, { name: "angle-right", size: "lg" })
155
+ ]
156
+ }
157
+ ) }),
158
+ D ? /* @__PURE__ */ s("li", { children: /* @__PURE__ */ N(
159
+ "button",
160
+ {
161
+ "aria-label": E,
162
+ className: m(
163
+ "item",
164
+ `size-${i}`,
165
+ (l == null ? void 0 : l.lastPage) && "with-text-left",
166
+ z && "disabled-arrow"
167
+ ),
168
+ "data-testid": r ? `${r}-arrow-last` : void 0,
169
+ disabled: z,
170
+ onClick: U,
95
171
  type: "button",
96
- ...t,
97
- children: /* @__PURE__ */ n(x, { name: "angle-right-b", size: "sm" })
172
+ ..._,
173
+ children: [
174
+ l != null && l.lastPage ? E : null,
175
+ /* @__PURE__ */ s(A, { className: m("icon"), name: "angle-double-right", size: "lg" })
176
+ ]
98
177
  }
99
- ) })
178
+ ) }) : null
100
179
  ] }) });
101
180
  }
102
181
  );
103
182
  export {
104
- Y as Pagination
183
+ sl as Pagination
105
184
  };
package/dist/types/components/Icon/icons.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export declare const arrows: readonly ["angle-left-b", "angle-right-b", "angle-up", "angle-down", "arrow-left", "arrow-right", "arrow-up", "arrow-down", "left-arrow-to-left", "arrow-to-right", "top-arrow-to-top", "arrow-to-bottom"];
1
+ export declare const arrows: readonly ["angle-left-b", "angle-right-b", "angle-up", "angle-down", "arrow-left", "arrow-right", "arrow-up", "arrow-down", "left-arrow-to-left", "arrow-to-right", "top-arrow-to-top", "arrow-to-bottom", "angle-double-left", "angle-double-right", "angle-left", "angle-right"];
2
2
  export declare const actions: readonly ["asterisk", "info-circle", "chart-line", "plus", "chart-line", "archive-alt", "arrows-merge-v", "arrows-shrink-v", "apps", "user-check", "user-plus", "user-times", "check", "times", "trash", "import", "upload", "draggable-dots", "copy", "pen", "left-arrow-from-left", "arrow-from-right", "resize-handle", "arrow-resize-diagonal", "external-link-alt", "heart-solid", "heart", "filter", "eye", "eye-slash", "link", "sign-out-alt", "bars", "ellipsis-v", "ellipsis-h", "move-arrow", "bell", "print", "bolt-alt", "redo", "save", "search", "setting", "share-alt", "share"];
3
3
  export declare const miscellaneous: readonly ["music", "sparkles", "rocket", "file-alt", "user-square", "book-reader", "file-question-alt", "sad-solid", "smile-beam-solid", "sad", "smile-beam", "sign-right", "exclamation-triangle", "exclamation-circle", "exclamation-octagon", "chart-pie", "paperclip", "chart-bar", "fire", "user-check", "apps", "trophy", "bookmark-solid", "bookmark", "clock", "comment-alt-lines", "file-edit-alt", "illustration", "calendar", "users-alt", "globe", "graduation-cap", "envelope", "equal-circle", "minus", "venus", "mars", "estate", "info-circle", "columns", "english-to-chinese", "bag-alt", "chart-line", "map-marker-alt", "lock-alt", "flag", "at", "user", "user-circle", "clipboard-check", "building", "compass", "phone", "pin", "microphone", "user-search", "house-user", "star-solid", "star", "coins", "euro-circle", "file-search-alt", "question-circle", "gift", "birthday-cake", "bunting-flags", "tag-alt", "tablet", "mobile", "video", "plus-circle", "pen", "check-circle", "certified", "plug"];
4
4
  export declare const player: readonly ["play", "stop-circle-solid", "pause-circle-solid", "previous", "step-forward", "expand-arrows-alt", "compress-arrows", "screen-share", "stop-screen-share", "microphone", "microphone-slash", "cast", "cast-connected", "cast-unavailable", "video", "video-slash", "airplay", "history", "playlist", "volume-up", "volume-mute", "closed-captioning"];
@@ -8,4 +8,4 @@ export declare const markdown: readonly ["bold", "arrow", "brackets-curly", "ita
8
8
  export declare const brands: readonly ["behance", "dribbble", "facebook", "github", "google", "instagram", "linkedin", "npm", "pinterest", "slack", "stackoverflow", "tiktok", "twitch", "x", "xing", "youtube", "zapier"];
9
9
  export declare const welcome: readonly ["symbol", "wttj"];
10
10
  export declare const flags: readonly ["flag-fr", "flag-en", "flag-us"];
11
- export declare const icons: readonly ["asterisk", "info-circle", "chart-line", "plus", "chart-line", "archive-alt", "arrows-merge-v", "arrows-shrink-v", "apps", "user-check", "user-plus", "user-times", "check", "times", "trash", "import", "upload", "draggable-dots", "copy", "pen", "left-arrow-from-left", "arrow-from-right", "resize-handle", "arrow-resize-diagonal", "external-link-alt", "heart-solid", "heart", "filter", "eye", "eye-slash", "link", "sign-out-alt", "bars", "ellipsis-v", "ellipsis-h", "move-arrow", "bell", "print", "bolt-alt", "redo", "save", "search", "setting", "share-alt", "share", "angle-left-b", "angle-right-b", "angle-up", "angle-down", "arrow-left", "arrow-right", "arrow-up", "arrow-down", "left-arrow-to-left", "arrow-to-right", "top-arrow-to-top", "arrow-to-bottom", "behance", "dribbble", "facebook", "github", "google", "instagram", "linkedin", "npm", "pinterest", "slack", "stackoverflow", "tiktok", "twitch", "x", "xing", "youtube", "zapier", "folder", "folder-open", "folder-full", "file", "image", "flag-fr", "flag-en", "flag-us", "bold", "arrow", "brackets-curly", "italic", "list-ol-alt", "list-ul", "quote", "text-strike-through", "heading", "heading-1", "heading-2", "heading-3", "heading-4", "heading-5", "heading-6", "font", "underline", "music", "sparkles", "rocket", "file-alt", "user-square", "book-reader", "file-question-alt", "sad-solid", "smile-beam-solid", "sad", "smile-beam", "sign-right", "exclamation-triangle", "exclamation-circle", "exclamation-octagon", "chart-pie", "paperclip", "chart-bar", "fire", "user-check", "apps", "trophy", "bookmark-solid", "bookmark", "clock", "comment-alt-lines", "file-edit-alt", "illustration", "calendar", "users-alt", "globe", "graduation-cap", "envelope", "equal-circle", "minus", "venus", "mars", "estate", "info-circle", "columns", "english-to-chinese", "bag-alt", "chart-line", "map-marker-alt", "lock-alt", "flag", "at", "user", "user-circle", "clipboard-check", "building", "compass", "phone", "pin", "microphone", "user-search", "house-user", "star-solid", "star", "coins", "euro-circle", "file-search-alt", "question-circle", "gift", "birthday-cake", "bunting-flags", "tag-alt", "tablet", "mobile", "video", "plus-circle", "pen", "check-circle", "certified", "plug", "play", "stop-circle-solid", "pause-circle-solid", "previous", "step-forward", "expand-arrows-alt", "compress-arrows", "screen-share", "stop-screen-share", "microphone", "microphone-slash", "cast", "cast-connected", "cast-unavailable", "video", "video-slash", "airplay", "history", "playlist", "volume-up", "volume-mute", "closed-captioning", "symbol", "wttj", "package", "basketball", "book-alt", "lightbulb-alt", "life-ring", "calculator-alt", "camera", "shopping-cart", "clipboard-notes", "coffee", "ruler", "desktop", "hard-hat", "credit-card", "moon-solid", "moon", "crosshair", "crown", "restaurant", "diamond", "industry", "fingerprint", "flag", "flag-solid", "setting", "handshake", "hashtag", "headphones", "heart", "estate", "balance-scale", "key-skeleton", "leaf", "map", "masonry", "masonry-plus", "megaphone", "microphone", "processor", "euro-circle", "mountains", "pen", "images", "chart-pie-alt", "pizza-slice", "puzzle-piece-solid", "puzzle-piece", "shield", "wrench", "sparkles", "server", "sun", "hunting", "thumbs-up", "thumbs-down", "trees", "sofa", "exit", "redo", "play", "ban"];
11
+ export declare const icons: readonly ["asterisk", "info-circle", "chart-line", "plus", "chart-line", "archive-alt", "arrows-merge-v", "arrows-shrink-v", "apps", "user-check", "user-plus", "user-times", "check", "times", "trash", "import", "upload", "draggable-dots", "copy", "pen", "left-arrow-from-left", "arrow-from-right", "resize-handle", "arrow-resize-diagonal", "external-link-alt", "heart-solid", "heart", "filter", "eye", "eye-slash", "link", "sign-out-alt", "bars", "ellipsis-v", "ellipsis-h", "move-arrow", "bell", "print", "bolt-alt", "redo", "save", "search", "setting", "share-alt", "share", "angle-left-b", "angle-right-b", "angle-up", "angle-down", "arrow-left", "arrow-right", "arrow-up", "arrow-down", "left-arrow-to-left", "arrow-to-right", "top-arrow-to-top", "arrow-to-bottom", "angle-double-left", "angle-double-right", "angle-left", "angle-right", "behance", "dribbble", "facebook", "github", "google", "instagram", "linkedin", "npm", "pinterest", "slack", "stackoverflow", "tiktok", "twitch", "x", "xing", "youtube", "zapier", "folder", "folder-open", "folder-full", "file", "image", "flag-fr", "flag-en", "flag-us", "bold", "arrow", "brackets-curly", "italic", "list-ol-alt", "list-ul", "quote", "text-strike-through", "heading", "heading-1", "heading-2", "heading-3", "heading-4", "heading-5", "heading-6", "font", "underline", "music", "sparkles", "rocket", "file-alt", "user-square", "book-reader", "file-question-alt", "sad-solid", "smile-beam-solid", "sad", "smile-beam", "sign-right", "exclamation-triangle", "exclamation-circle", "exclamation-octagon", "chart-pie", "paperclip", "chart-bar", "fire", "user-check", "apps", "trophy", "bookmark-solid", "bookmark", "clock", "comment-alt-lines", "file-edit-alt", "illustration", "calendar", "users-alt", "globe", "graduation-cap", "envelope", "equal-circle", "minus", "venus", "mars", "estate", "info-circle", "columns", "english-to-chinese", "bag-alt", "chart-line", "map-marker-alt", "lock-alt", "flag", "at", "user", "user-circle", "clipboard-check", "building", "compass", "phone", "pin", "microphone", "user-search", "house-user", "star-solid", "star", "coins", "euro-circle", "file-search-alt", "question-circle", "gift", "birthday-cake", "bunting-flags", "tag-alt", "tablet", "mobile", "video", "plus-circle", "pen", "check-circle", "certified", "plug", "play", "stop-circle-solid", "pause-circle-solid", "previous", "step-forward", "expand-arrows-alt", "compress-arrows", "screen-share", "stop-screen-share", "microphone", "microphone-slash", "cast", "cast-connected", "cast-unavailable", "video", "video-slash", "airplay", "history", "playlist", "volume-up", "volume-mute", "closed-captioning", "symbol", "wttj", "package", "basketball", "book-alt", "lightbulb-alt", "life-ring", "calculator-alt", "camera", "shopping-cart", "clipboard-notes", "coffee", "ruler", "desktop", "hard-hat", "credit-card", "moon-solid", "moon", "crosshair", "crown", "restaurant", "diamond", "industry", "fingerprint", "flag", "flag-solid", "setting", "handshake", "hashtag", "headphones", "heart", "estate", "balance-scale", "key-skeleton", "leaf", "map", "masonry", "masonry-plus", "megaphone", "microphone", "processor", "euro-circle", "mountains", "pen", "images", "chart-pie-alt", "pizza-slice", "puzzle-piece-solid", "puzzle-piece", "shield", "wrench", "sparkles", "server", "sun", "hunting", "thumbs-up", "thumbs-down", "trees", "sofa", "exit", "redo", "play", "ban"];
package/dist/types/components/Pagination/types.d.ts CHANGED
@@ -1,13 +1,24 @@
1
1
  import { ForwardRefProps } from '../../utils';
2
+ export interface NavigationTexts {
3
+ firstPage?: string;
4
+ lastPage?: string;
5
+ nextPage?: string;
6
+ previousPage?: string;
7
+ }
2
8
  export interface PaginationOptions {
9
+ buttonFirstProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
10
+ buttonLastProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
3
11
  buttonNextProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
4
12
  buttonPrevProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
5
13
  dataTestId?: string;
6
14
  getHref?: (page: number | string) => string;
7
15
  listProps?: React.OlHTMLAttributes<HTMLOListElement>;
16
+ navigationTexts?: NavigationTexts;
8
17
  onChange: (page: number | string) => void;
9
18
  page: number;
10
19
  pageCount: number;
11
20
  rangeDisplay?: number;
21
+ showEdgeControls?: boolean;
22
+ size?: 'lg' | 'md';
12
23
  }
13
24
  export type PaginationProps = ForwardRefProps<PaginationOptions, 'nav'>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "welcome-ui",
3
- "version": "10.0.0-alpha.2",
3
+ "version": "10.0.0-alpha.3",
4
4
  "description": "Customizable design system with react, typescript, tailwindcss and ariakit.",
5
5
  "files": [
6
6
  "dist"