@uoguelph/react-components 1.3.13 → 1.4.0

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 (84) hide show
  1. package/dist/accordion-button.js +22 -22
  2. package/dist/accordion-content.js +5 -5
  3. package/dist/accordion.js +3 -3
  4. package/dist/alert-footer.js +6 -6
  5. package/dist/alert-message.js +7 -10
  6. package/dist/alert-subtitle.js +7 -7
  7. package/dist/alert-title.js +23 -23
  8. package/dist/alert.js +7 -7
  9. package/dist/blockquote-author-name.js +1 -1
  10. package/dist/blockquote-author-title.js +2 -2
  11. package/dist/blockquote-author.js +11 -11
  12. package/dist/blockquote-content.js +16 -16
  13. package/dist/breadcrumb-home.js +2 -2
  14. package/dist/breadcrumb.js +15 -15
  15. package/dist/breadcrumbs.js +9 -9
  16. package/dist/button.js +44 -44
  17. package/dist/card-content.js +10 -10
  18. package/dist/card-footer.js +11 -11
  19. package/dist/card-image.js +15 -15
  20. package/dist/card-title.js +5 -5
  21. package/dist/card.js +11 -11
  22. package/dist/carousel.js +51 -51
  23. package/dist/checkbox.js +44 -44
  24. package/dist/contact-email.js +7 -7
  25. package/dist/contact-name.js +1 -1
  26. package/dist/contact-phone.js +11 -11
  27. package/dist/contact-title.js +1 -1
  28. package/dist/contact.js +11 -14
  29. package/dist/container.js +10 -10
  30. package/dist/dismissible-alert.js +2 -2
  31. package/dist/divider.js +18 -18
  32. package/dist/embedded-video-modal-button.js +16 -16
  33. package/dist/embedded-video.js +29 -29
  34. package/dist/hero-caption.js +1 -1
  35. package/dist/hero-content.js +23 -23
  36. package/dist/hero-link.js +1 -1
  37. package/dist/hero-title.js +11 -11
  38. package/dist/hero-video.js +9 -9
  39. package/dist/hero.js +19 -19
  40. package/dist/image-overlay.js +48 -48
  41. package/dist/index.css +1 -1
  42. package/dist/info.js +16 -16
  43. package/dist/layout-content.js +3 -3
  44. package/dist/layout.js +44 -44
  45. package/dist/link-carousel-content.js +11 -11
  46. package/dist/link-carousel-item.js +15 -15
  47. package/dist/link-carousel-link.js +22 -22
  48. package/dist/link-carousel-links.js +14 -14
  49. package/dist/link-carousel.js +21 -21
  50. package/dist/link.js +10 -10
  51. package/dist/list-item.js +6 -6
  52. package/dist/list.js +21 -21
  53. package/dist/loading-indicator.js +29 -29
  54. package/dist/media-caption.js +34 -34
  55. package/dist/modal.js +25 -25
  56. package/dist/navigation-link.js +25 -25
  57. package/dist/navigation.js +8 -11
  58. package/dist/number-input.js +46 -46
  59. package/dist/pagination.js +62 -62
  60. package/dist/radio-group.js +8 -8
  61. package/dist/radio.js +19 -19
  62. package/dist/select-button.js +32 -32
  63. package/dist/select-option.js +29 -29
  64. package/dist/select-options.js +27 -27
  65. package/dist/select.js +7 -7
  66. package/dist/statistics-item-image.js +9 -9
  67. package/dist/statistics-item-represents.js +7 -7
  68. package/dist/statistics-item-value.js +7 -7
  69. package/dist/statistics-item.js +35 -35
  70. package/dist/statistics.js +25 -25
  71. package/dist/story-background-image.js +12 -12
  72. package/dist/story-background.js +7 -7
  73. package/dist/story-body.js +5 -8
  74. package/dist/story-footer.js +12 -12
  75. package/dist/story-foreground-content.js +4 -4
  76. package/dist/story-foreground-image.js +15 -15
  77. package/dist/story-foreground.js +7 -10
  78. package/dist/story.js +5 -5
  79. package/dist/tab-list.js +3 -6
  80. package/dist/tab-panel.js +3 -3
  81. package/dist/tab.js +26 -26
  82. package/dist/text-input.js +32 -32
  83. package/dist/typography.js +22 -22
  84. package/package.json +2 -2
@@ -1,7 +1,7 @@
1
1
  "use client";
2
- import { jsxs as m, jsx as o } from "react/jsx-runtime";
2
+ import { jsxs as u, jsx as t } from "react/jsx-runtime";
3
3
  import { j as x } from "./solid-D19hAF5t.js";
4
- import { FontAwesomeIcon as n } from "@fortawesome/react-fontawesome";
4
+ import { FontAwesomeIcon as p } from "@fortawesome/react-fontawesome";
5
5
  import { useState as y, useEffect as q } from "react";
6
6
  import { twMerge as B } from "tailwind-merge";
7
7
  import { tv as F } from "tailwind-variants";
@@ -34,42 +34,42 @@ function Z({
34
34
  count: e,
35
35
  visible: N,
36
36
  defaultPage: b,
37
- onChange: c,
38
- color: p = "yellow",
37
+ onChange: f,
38
+ color: g = "yellow",
39
39
  hideInput: $ = !1,
40
40
  hideList: k = !1,
41
41
  className: L
42
42
  }) {
43
- const [t, M] = y(b ?? 0), [P, j] = y(b ?? 0), C = [...Array(e).keys()], i = Math.max(Math.ceil(N), 3);
43
+ const [r, M] = y(b ?? 0), [P, j] = y(b ?? 0), C = [...Array(e).keys()], i = Math.max(Math.ceil(N), 3);
44
44
  q(() => {
45
- g(d ?? 0);
45
+ l(d ?? 0);
46
46
  }, [d]);
47
- const g = (r) => {
48
- const v = w(r, 0, e - 1);
49
- c == null || c(v), M(v);
50
- }, f = (r) => /* @__PURE__ */ o(
47
+ const l = (o) => {
48
+ const v = w(o, 0, e - 1);
49
+ f == null || f(v), M(v);
50
+ }, m = (o) => /* @__PURE__ */ t(
51
51
  "button",
52
52
  {
53
- className: `uofg-pagination-item ${W({ active: t === r })}`,
53
+ className: `uofg-pagination-item ${W({ active: r === o })}`,
54
54
  onClick: () => {
55
- g(r);
55
+ l(o);
56
56
  },
57
- children: r + 1
57
+ children: o + 1
58
58
  },
59
- r
59
+ o
60
60
  );
61
- let s, a, u, l;
62
- e <= i || e < 5 ? (s = 1, a = e - 1, u = !1, l = !1) : t < i - 1 ? (s = 1, a = i, l = !0, u = !1) : t > e - i ? (s = e - i, a = e - 1, u = !0, l = !1) : (s = t - Math.floor(i / 2), a = s + i, u = s > 1, l = a < e);
61
+ let s, a, n, c;
62
+ e <= i || e < 5 ? (s = 1, a = e - 1, n = !1, c = !1) : r < i - 1 ? (s = 1, a = i, c = !0, n = !1) : r > e - i ? (s = e - i, a = e - 1, n = !0, c = !1) : (s = r - Math.floor(i / 2), a = s + i, n = s > 1, c = a < e);
63
63
  const { base: I, list: z, seperator: E, control: h, item: W, inputWrapper: A, goTo: R, input: T } = F({
64
64
  slots: {
65
- base: "uog:flex uog:w-full uog:flex-col uog:md:flex-row uog:gap-4 uog:items-center uog:justify-center",
66
- list: "uog:flex uog:gap-4 uog:items-center uog:justify-center",
67
- seperator: "uog:md:w-1 uog:md:h-12 uog:h-1 uog:w-1/2 uog:block",
68
- control: "uog:cursor-pointer uog:disabled:opacity-15 uog:disabled:cursor-default uog:transition-colors",
69
- item: "uog:p-1 uog:aspect-square uog:flex uog:items-center uog:justify-center uog:h-[2em] uog:bg-grey-light-bg uog:text-body-copy-on-light uog:hover:bg-grey-dark-bg uog:hover:text-body-copy-on-dark uog:transition-colors uog:cursor-pointer",
70
- inputWrapper: "uog:flex uog:items-center uog:justify-center uog:gap-2",
71
- goTo: "uog:p-2 uog:text-sm",
72
- input: "uog:w-fit uog:[&_.uofg-number-input]:text-center"
65
+ base: "flex w-full flex-col items-center justify-center gap-4 md:flex-row",
66
+ list: "flex items-center justify-center gap-4",
67
+ seperator: "block h-1 w-1/2 md:h-12 md:w-1",
68
+ control: "cursor-pointer transition-colors disabled:cursor-default disabled:opacity-15",
69
+ item: "flex aspect-square h-[2em] cursor-pointer items-center justify-center bg-grey-light-bg p-1 text-body-copy-on-light transition-colors hover:bg-grey-dark-bg hover:text-body-copy-on-dark",
70
+ inputWrapper: "flex items-center justify-center gap-2",
71
+ goTo: "p-2 text-sm",
72
+ input: "w-fit [&_.uofg-number-input]:text-center"
73
73
  },
74
74
  variants: {
75
75
  active: {
@@ -77,28 +77,28 @@ function Z({
77
77
  },
78
78
  color: {
79
79
  red: {
80
- seperator: "uog:bg-red"
80
+ seperator: "bg-red"
81
81
  },
82
82
  yellow: {
83
- seperator: "uog:bg-yellow"
83
+ seperator: "bg-yellow"
84
84
  },
85
85
  blue: {
86
- seperator: "uog:bg-blue"
86
+ seperator: "bg-blue"
87
87
  },
88
88
  green: {
89
- seperator: "uog:bg-green"
89
+ seperator: "bg-green"
90
90
  }
91
91
  },
92
92
  hideList: {
93
93
  true: {
94
- list: "uog:hidden",
95
- seperator: "uog:hidden"
94
+ list: "hidden",
95
+ seperator: "hidden"
96
96
  }
97
97
  },
98
98
  hideInput: {
99
99
  true: {
100
- inputWrapper: "uog:hidden",
101
- seperator: "uog:hidden"
100
+ inputWrapper: "hidden",
101
+ seperator: "hidden"
102
102
  }
103
103
  }
104
104
  },
@@ -107,84 +107,84 @@ function Z({
107
107
  active: !0,
108
108
  color: "red",
109
109
  class: {
110
- item: "uog:bg-red uog:text-red-contrast"
110
+ item: "bg-red text-red-contrast"
111
111
  }
112
112
  },
113
113
  {
114
114
  active: !0,
115
115
  color: "yellow",
116
116
  class: {
117
- item: "uog:bg-yellow uog:text-yellow-contrast"
117
+ item: "bg-yellow text-yellow-contrast"
118
118
  }
119
119
  },
120
120
  {
121
121
  active: !0,
122
122
  color: "blue",
123
123
  class: {
124
- item: "uog:bg-blue uog:text-blue-contrast"
124
+ item: "bg-blue text-blue-contrast"
125
125
  }
126
126
  },
127
127
  {
128
128
  active: !0,
129
129
  color: "green",
130
130
  class: {
131
- item: "uog:bg-green uog:text-green-contrast"
131
+ item: "bg-green text-green-contrast"
132
132
  }
133
133
  }
134
134
  ]
135
135
  })({
136
- color: p ?? "yellow",
136
+ color: g ?? "yellow",
137
137
  hideList: k ?? !1,
138
138
  hideInput: $ ?? !1
139
139
  });
140
- return /* @__PURE__ */ m("div", { className: `uofg-pagination ${B(I(), L)}`, children: [
141
- /* @__PURE__ */ m("div", { className: `uofg-pagination-list ${z()}`, children: [
142
- /* @__PURE__ */ o(
140
+ return /* @__PURE__ */ u("div", { className: `uofg-pagination ${B(I(), L)}`, children: [
141
+ /* @__PURE__ */ u("div", { className: `uofg-pagination-list ${z()}`, children: [
142
+ /* @__PURE__ */ t(
143
143
  "button",
144
144
  {
145
- disabled: t <= 0,
145
+ disabled: r <= 0,
146
146
  className: `uofg-pagination-previous ${h()}`,
147
- onClick: () => g(t - 1),
148
- children: /* @__PURE__ */ o(n, { icon: _ })
147
+ onClick: () => l(r - 1),
148
+ children: /* @__PURE__ */ t(p, { icon: _ })
149
149
  }
150
150
  ),
151
- f(0),
152
- u && /* @__PURE__ */ o(n, { icon: x }),
153
- C.slice(s, a).map(f),
154
- l && /* @__PURE__ */ o(n, { icon: x }),
155
- f(e - 1),
156
- /* @__PURE__ */ o(
151
+ m(0),
152
+ n && /* @__PURE__ */ t(p, { icon: x }),
153
+ C.slice(s, a).map(m),
154
+ c && /* @__PURE__ */ t(p, { icon: x }),
155
+ m(e - 1),
156
+ /* @__PURE__ */ t(
157
157
  "button",
158
158
  {
159
- disabled: t >= e - 1,
159
+ disabled: r >= e - 1,
160
160
  className: `uofg-pagination-next ${h()}`,
161
- onClick: () => g(t + 1),
162
- children: /* @__PURE__ */ o(n, { icon: V })
161
+ onClick: () => l(r + 1),
162
+ children: /* @__PURE__ */ t(p, { icon: V })
163
163
  }
164
164
  )
165
165
  ] }),
166
- /* @__PURE__ */ o("span", { className: `uofg-pagination-seperator ${E()}` }),
167
- /* @__PURE__ */ m("div", { className: `uofg-pagination-go-to-wrapper ${A()}`, children: [
168
- /* @__PURE__ */ o(
166
+ /* @__PURE__ */ t("span", { className: `uofg-pagination-seperator ${E()}` }),
167
+ /* @__PURE__ */ u("div", { className: `uofg-pagination-go-to-wrapper ${A()}`, children: [
168
+ /* @__PURE__ */ t(
169
169
  S,
170
170
  {
171
- color: p,
171
+ color: g,
172
172
  min: 1,
173
173
  max: e,
174
- value: t + 1,
175
- onInput: (r) => {
176
- j(isNaN(r) ? 0 : w(r - 1, 0, e - 1));
174
+ value: r + 1,
175
+ onInput: (o) => {
176
+ j(isNaN(o) ? 0 : w(o - 1, 0, e - 1));
177
177
  },
178
178
  className: `uofg-pagination-go-to-input ${T()}`
179
179
  }
180
180
  ),
181
- /* @__PURE__ */ o(
181
+ /* @__PURE__ */ t(
182
182
  G,
183
183
  {
184
- color: p,
184
+ color: g,
185
185
  className: `uofg-pagination-go-to-button ${R()}`,
186
186
  onClick: () => {
187
- g(P);
187
+ l(P);
188
188
  },
189
189
  children: "Go to page"
190
190
  }
@@ -4,20 +4,20 @@ import { RadioGroup as d } from "@headlessui/react";
4
4
  import { useState as c, useMemo as f } from "react";
5
5
  import { tv as n } from "tailwind-variants";
6
6
  import { RadioContext as x } from "./radio-context.js";
7
- import { Radio as j } from "./radio.js";
7
+ import { Radio as y } from "./radio.js";
8
8
  function R({ name: s, inline: a = !1, onChange: o, children: i }) {
9
- const [l, e] = c(null), u = f(() => ({ setSelected: e }), [e]), m = n({
9
+ const [l, e] = c(null), m = f(() => ({ setSelected: e }), [e]), p = n({
10
10
  slots: {
11
- base: "uog:flex uog:gap-2"
11
+ base: "flex gap-2"
12
12
  },
13
13
  variants: {
14
14
  inline: {
15
15
  false: {
16
- base: "uog:flex-col"
16
+ base: "flex-col"
17
17
  }
18
18
  }
19
19
  }
20
- }), { base: p } = m({ inline: a });
20
+ }), { base: u } = p({ inline: a });
21
21
  return /* @__PURE__ */ t(
22
22
  d,
23
23
  {
@@ -26,13 +26,13 @@ function R({ name: s, inline: a = !1, onChange: o, children: i }) {
26
26
  onChange: (r) => {
27
27
  e(r), o == null || o(r);
28
28
  },
29
- className: `uofg-radio-group ${p()}`,
30
- children: /* @__PURE__ */ t(x.Provider, { value: u, children: i })
29
+ className: `uofg-radio-group ${u()}`,
30
+ children: /* @__PURE__ */ t(x.Provider, { value: m, children: i })
31
31
  }
32
32
  );
33
33
  }
34
34
  R.displayName = "RadioGroup";
35
35
  export {
36
- j as Radio,
36
+ y as Radio,
37
37
  R as RadioGroup
38
38
  };
package/dist/radio.js CHANGED
@@ -1,35 +1,35 @@
1
1
  "use client";
2
- import { jsxs as t, jsx as e } from "react/jsx-runtime";
3
- import { Field as d, Radio as f, Label as n } from "@headlessui/react";
4
- import { useContext as m, useEffect as b, Fragment as p } from "react";
2
+ import { jsxs as f, jsx as r } from "react/jsx-runtime";
3
+ import { Field as n, Radio as u, Label as m } from "@headlessui/react";
4
+ import { useContext as b, useEffect as g, Fragment as p } from "react";
5
5
  import { tv as h } from "tailwind-variants";
6
6
  import { RadioContext as x } from "./radio-context.js";
7
- function j({ selected: i, children: u, value: r }) {
8
- const o = m(x);
9
- b(() => {
10
- i && (o == null || o.setSelected(r));
11
- }, [o, i, r]);
12
- const a = h({
7
+ function j({ selected: o, children: a, value: i }) {
8
+ const e = b(x);
9
+ g(() => {
10
+ o && (e == null || e.setSelected(i));
11
+ }, [e, o, i]);
12
+ const l = h({
13
13
  slots: {
14
- field: "uog:flex uog:items-center uog:gap-2",
15
- radio: "uog:block uog:aspect-square uog:rounded-full uog:border uog:border-blue uog:p-1.5 uog:focus-visible:ring-2 uog:focus-visible:ring-blue uog:focus-visible:ring-offset-2",
16
- circle: "uog:block uog:h-2 uog:w-2 uog:rounded-full"
14
+ field: "flex items-center gap-2",
15
+ radio: "block aspect-square rounded-full border border-blue p-1.5 focus-visible:ring-2 focus-visible:ring-blue focus-visible:ring-offset-2",
16
+ circle: "block h-2 w-2 rounded-full"
17
17
  },
18
18
  variants: {
19
19
  checked: {
20
20
  true: {
21
- radio: "uog:bg-blue",
22
- circle: "uog:bg-white"
21
+ radio: "bg-blue",
22
+ circle: "bg-white"
23
23
  },
24
24
  false: {
25
- circle: "uog:bg-transparent"
25
+ circle: "bg-transparent"
26
26
  }
27
27
  }
28
28
  }
29
- }), { field: l, radio: g, circle: c } = a();
30
- return /* @__PURE__ */ t(d, { className: `uofg-radio-field ${l()}`, children: [
31
- /* @__PURE__ */ e(f, { value: r, as: p, children: ({ checked: s }) => /* @__PURE__ */ e("span", { className: `uofg-radio ${g({ checked: s })}`, children: /* @__PURE__ */ e("span", { className: `uofg-radio-circle ${c({ checked: s })}` }) }) }),
32
- /* @__PURE__ */ e(n, { className: "uofg-radio-label", children: u })
29
+ }), { field: c, radio: t, circle: d } = l();
30
+ return /* @__PURE__ */ f(n, { className: `uofg-radio-field ${c()}`, children: [
31
+ /* @__PURE__ */ r(u, { value: i, as: p, children: ({ checked: s }) => /* @__PURE__ */ r("span", { className: `uofg-radio ${t({ checked: s })}`, children: /* @__PURE__ */ r("span", { className: `uofg-radio-circle ${d({ checked: s })}` }) }) }),
32
+ /* @__PURE__ */ r(m, { className: "uofg-radio-label", children: a })
33
33
  ] });
34
34
  }
35
35
  export {
@@ -1,42 +1,42 @@
1
1
  "use client";
2
- import { jsx as t, jsxs as s, Fragment as m } from "react/jsx-runtime";
3
- import { k as c } from "./solid-D19hAF5t.js";
4
- import { FontAwesomeIcon as p } from "@fortawesome/react-fontawesome";
5
- import { ListboxButton as f } from "@headlessui/react";
6
- import { twMerge as l } from "tailwind-merge";
7
- import { tv as a } from "tailwind-variants";
8
- function b({ children: o, className: u, ...e }) {
9
- const n = a({
2
+ import { jsx as t, jsxs as m, Fragment as c } from "react/jsx-runtime";
3
+ import { k as p } from "./solid-D19hAF5t.js";
4
+ import { FontAwesomeIcon as f } from "@fortawesome/react-fontawesome";
5
+ import { ListboxButton as l } from "@headlessui/react";
6
+ import { twMerge as a } from "tailwind-merge";
7
+ import { tv as b } from "tailwind-variants";
8
+ function d({ children: o, className: e, ...n }) {
9
+ const r = b({
10
10
  slots: {
11
11
  button: [
12
12
  "uofg-select-button",
13
- "uog:ui-open:rounded-b-none",
14
- "uog:ui-open:border-blue",
15
- "uog:flex",
16
- "uog:w-full",
17
- "uog:items-center",
18
- "uog:justify-between",
19
- "uog:rounded-md",
20
- "uog:border",
21
- "uog:border-grey-light",
22
- "uog:bg-white",
23
- "uog:px-4",
24
- "uog:py-2.5",
25
- "uog:shadow-sm",
26
- "uog:transition-colors",
27
- "uog:group-focus-within:border-blue",
28
- "uog:group-focus-within:outline-none",
29
- "uog:gap-2"
13
+ "ui-open:rounded-b-none",
14
+ "ui-open:border-blue",
15
+ "flex",
16
+ "w-full",
17
+ "items-center",
18
+ "justify-between",
19
+ "rounded-md",
20
+ "border",
21
+ "border-grey-light",
22
+ "bg-white",
23
+ "px-4",
24
+ "py-2.5",
25
+ "shadow-sm",
26
+ "transition-colors",
27
+ "group-focus-within:border-blue",
28
+ "group-focus-within:outline-none",
29
+ "gap-2"
30
30
  ],
31
- icon: "uog:ui-open:rotate-180 uog:h-5 uog:w-5 uog:text-body-copy uog:transition-transform"
31
+ icon: "ui-open:rotate-180 h-5 w-5 text-body-copy transition-transform"
32
32
  }
33
- }), { button: r, icon: g } = n();
34
- return /* @__PURE__ */ t(f, { ...e, className: l(r(), u), children: (i) => /* @__PURE__ */ s(m, { children: [
35
- typeof o == "function" ? o(i) : o,
36
- /* @__PURE__ */ t(p, { className: g(), icon: c })
33
+ }), { button: i, icon: s } = r();
34
+ return /* @__PURE__ */ t(l, { ...n, className: a(i(), e), children: (u) => /* @__PURE__ */ m(c, { children: [
35
+ typeof o == "function" ? o(u) : o,
36
+ /* @__PURE__ */ t(f, { className: s(), icon: p })
37
37
  ] }) });
38
38
  }
39
- b.displayName = "SelectButton";
39
+ d.displayName = "SelectButton";
40
40
  export {
41
- b as SelectButton
41
+ d as SelectButton
42
42
  };
@@ -1,49 +1,49 @@
1
1
  "use client";
2
- import { jsx as e, jsxs as p } from "react/jsx-runtime";
3
- import { d as m } from "./regular-DmWV6rTj.js";
4
- import { FontAwesomeIcon as f } from "@fortawesome/react-fontawesome";
5
- import { ListboxOption as b } from "@headlessui/react";
2
+ import { jsx as o, jsxs as f } from "react/jsx-runtime";
3
+ import { d as g } from "./regular-DmWV6rTj.js";
4
+ import { FontAwesomeIcon as b } from "@fortawesome/react-fontawesome";
5
+ import { ListboxOption as u } from "@headlessui/react";
6
6
  import { twMerge as x } from "tailwind-merge";
7
7
  import { tv as d } from "tailwind-variants";
8
- function v({ children: o, className: r, ...i }) {
8
+ function v({ children: e, className: r, ...i }) {
9
9
  const n = d({
10
10
  slots: {
11
11
  option: [
12
12
  "uofg-select-option",
13
- "uog:relative",
14
- "uog:cursor-pointer",
15
- "uog:select-none",
16
- "uog:border-b",
17
- "uog:border-grey-dark",
18
- "uog:px-4",
19
- "uog:py-2",
20
- "uog:text-gray-900",
21
- "uog:transition-colors",
22
- "uog:last:border-b-0",
23
- "uog:hover:bg-grey-light",
24
- "uog:focus:bg-grey-light",
25
- "uog:focus:outline-none",
26
- "uog:ui-active:bg-grey-light",
27
- "uog:gap-2"
13
+ "relative",
14
+ "cursor-pointer",
15
+ "select-none",
16
+ "border-b",
17
+ "border-grey-dark",
18
+ "px-4",
19
+ "py-2",
20
+ "text-gray-900",
21
+ "transition-colors",
22
+ "last:border-b-0",
23
+ "hover:bg-grey-light",
24
+ "focus:bg-grey-light",
25
+ "focus:outline-none",
26
+ "ui-active:bg-grey-light",
27
+ "gap-2"
28
28
  ],
29
- icon: "uog:h-5 uog:w-5 uog:text-blue",
30
- wrapper: "uog:flex uog:items-center",
31
- content: "uog:flex-1"
29
+ icon: "h-5 w-5 text-blue",
30
+ wrapper: "flex items-center",
31
+ content: "flex-1"
32
32
  },
33
33
  variants: {
34
34
  selected: {
35
35
  true: {
36
- icon: "uog:visible"
36
+ icon: "visible"
37
37
  },
38
38
  false: {
39
- icon: "uog:invisible"
39
+ icon: "invisible"
40
40
  }
41
41
  }
42
42
  }
43
- }), { option: s, icon: g, wrapper: u, content: c } = n();
44
- return /* @__PURE__ */ e(b, { ...i, className: x(s(), r), children: ({ focus: a, selected: t, ...l }) => /* @__PURE__ */ p("div", { className: u(), children: [
45
- /* @__PURE__ */ e("span", { className: c(), children: typeof o == "function" ? o({ focus: a, selected: t, ...l }) : o }),
46
- /* @__PURE__ */ e(f, { icon: m, className: g({ selected: t }) })
43
+ }), { option: s, icon: c, wrapper: a, content: l } = n();
44
+ return /* @__PURE__ */ o(u, { ...i, className: x(s(), r), children: ({ focus: p, selected: t, ...m }) => /* @__PURE__ */ f("div", { className: a(), children: [
45
+ /* @__PURE__ */ o("span", { className: l(), children: typeof e == "function" ? e({ focus: p, selected: t, ...m }) : e }),
46
+ /* @__PURE__ */ o(b, { icon: g, className: c({ selected: t }) })
47
47
  ] }) });
48
48
  }
49
49
  v.displayName = "SelectOptions";
@@ -1,32 +1,32 @@
1
1
  "use client";
2
- import { jsx as r } from "react/jsx-runtime";
3
- import { ListboxOptions as g } from "@headlessui/react";
4
- import { twMerge as i } from "tailwind-merge";
5
- function s({ children: o, className: u, ...e }) {
6
- const t = i(
7
- "uog:z-10",
8
- "uog:max-h-[20rem]",
9
- "uog:w-full",
10
- "uog:overflow-auto",
11
- "uog:rounded-b-md",
12
- "uog:border",
13
- "uog:border-t-0",
14
- "uog:border-grey-light",
15
- "uog:bg-white",
16
- "uog:shadow-md",
17
- "uog:group-focus-within:border-blue",
18
- "uog:group-focus-within:outline-none",
19
- "uog:ui-open:border-blue",
20
- "uog:md:absolute",
21
- "uog:transition",
22
- "uog:duration-300",
23
- "uog:ease-out",
24
- "uog:data-[closed]:opacity-0",
25
- u
2
+ import { jsx as i } from "react/jsx-runtime";
3
+ import { ListboxOptions as s } from "@headlessui/react";
4
+ import { twMerge as n } from "tailwind-merge";
5
+ function u({ children: o, className: e, ...t }) {
6
+ const r = n(
7
+ "z-10",
8
+ "max-h-[20rem]",
9
+ "w-full",
10
+ "overflow-auto",
11
+ "rounded-b-md",
12
+ "border",
13
+ "border-t-0",
14
+ "border-grey-light",
15
+ "bg-white",
16
+ "shadow-md",
17
+ "group-focus-within:border-blue",
18
+ "group-focus-within:outline-none",
19
+ "ui-open:border-blue",
20
+ "md:absolute",
21
+ "transition",
22
+ "duration-300",
23
+ "ease-out",
24
+ "data-[closed]:opacity-0",
25
+ e
26
26
  );
27
- return /* @__PURE__ */ r(g, { ...e, className: t, children: o });
27
+ return /* @__PURE__ */ i(s, { ...t, className: r, children: o });
28
28
  }
29
- s.displayName = "SelectOptions";
29
+ u.displayName = "SelectOptions";
30
30
  export {
31
- s as SelectOptions
31
+ u as SelectOptions
32
32
  };
package/dist/select.js CHANGED
@@ -1,16 +1,16 @@
1
1
  "use client";
2
- import { jsx as t } from "react/jsx-runtime";
2
+ import { jsx as o } from "react/jsx-runtime";
3
3
  import { Listbox as r } from "@headlessui/react";
4
- import { SelectButton as m } from "./select-button.js";
5
- import { SelectOption as f } from "./select-option.js";
4
+ import { SelectButton as s } from "./select-button.js";
5
+ import { SelectOption as n } from "./select-option.js";
6
6
  import { SelectOptions as a } from "./select-options.js";
7
- function l({ children: e, ...o }) {
8
- return /* @__PURE__ */ t(r, { className: "uofg-select uog:group uog:relative uog:w-full", ...o, as: "div", children: e });
7
+ function l({ children: e, ...t }) {
8
+ return /* @__PURE__ */ o(r, { className: "uofg-select group relative w-full", ...t, as: "div", children: e });
9
9
  }
10
10
  l.displayName = "Select";
11
11
  export {
12
12
  l as Select,
13
- m as SelectButton,
14
- f as SelectOption,
13
+ s as SelectButton,
14
+ n as SelectOption,
15
15
  a as SelectOptions
16
16
  };
@@ -1,30 +1,30 @@
1
1
  "use client";
2
2
  import { jsx as t } from "react/jsx-runtime";
3
3
  import { twMerge as r } from "tailwind-merge";
4
- const g = "img";
5
- function u({
4
+ const f = "img";
5
+ function g({
6
6
  as: e,
7
7
  src: s,
8
8
  alt: m,
9
9
  width: i,
10
10
  height: a,
11
- className: o,
12
- ...c
11
+ className: c,
12
+ ...n
13
13
  }) {
14
- const n = e ?? g, l = r("uog:w-full", o);
14
+ const o = e ?? f, l = r("w-full", c);
15
15
  return /* @__PURE__ */ t("dd", { className: "contents", children: /* @__PURE__ */ t(
16
- n,
16
+ o,
17
17
  {
18
18
  src: s,
19
19
  alt: m,
20
20
  width: i,
21
21
  height: a,
22
22
  className: `uofg-statistics-item-image ${l}`,
23
- ...c
23
+ ...n
24
24
  }
25
25
  ) });
26
26
  }
27
- u.displayName = "StatisticsItemImage";
27
+ g.displayName = "StatisticsItemImage";
28
28
  export {
29
- u as StatisticsItemImage
29
+ g as StatisticsItemImage
30
30
  };
@@ -1,11 +1,11 @@
1
1
  "use client";
2
- import { jsx as o } from "react/jsx-runtime";
3
- import { twMerge as r } from "tailwind-merge";
4
- function i({ children: t, className: e }) {
5
- const s = r("uog:text-normal uog:p-6 uog:pt-0 uog:text-lg uog:font-normal", e);
6
- return /* @__PURE__ */ o("dd", { className: `uofg-statistics-item-represents ${s}`, children: t });
2
+ import { jsx as r } from "react/jsx-runtime";
3
+ import { twMerge as i } from "tailwind-merge";
4
+ function m({ children: t, className: e }) {
5
+ const s = i("text-normal p-6 pt-0 text-lg font-normal", e);
6
+ return /* @__PURE__ */ r("dd", { className: `uofg-statistics-item-represents ${s}`, children: t });
7
7
  }
8
- i.displayName = "StatisticsItemRepresents";
8
+ m.displayName = "StatisticsItemRepresents";
9
9
  export {
10
- i as StatisticsItemRepresents
10
+ m as StatisticsItemRepresents
11
11
  };
@@ -1,11 +1,11 @@
1
1
  "use client";
2
- import { jsx as s } from "react/jsx-runtime";
3
- import { twMerge as a } from "tailwind-merge";
4
- function i({ children: t, className: e }) {
5
- const o = a("uog:break-auto uog:p-6 uog:pb-0 uog:text-3xl uog:leading-tight uog:font-bold", e);
6
- return /* @__PURE__ */ s("dt", { className: `uofg-statistics-item-value ${o}`, children: t });
2
+ import { jsx as a } from "react/jsx-runtime";
3
+ import { twMerge as i } from "tailwind-merge";
4
+ function o({ children: t, className: e }) {
5
+ const s = i("break-auto p-6 pb-0 text-3xl leading-tight font-bold", e);
6
+ return /* @__PURE__ */ a("dt", { className: `uofg-statistics-item-value ${s}`, children: t });
7
7
  }
8
- i.displayName = "StatisticsItemValue";
8
+ o.displayName = "StatisticsItemValue";
9
9
  export {
10
- i as StatisticsItemValue
10
+ o as StatisticsItemValue
11
11
  };