@jfrader/ui 0.0.0-stage → 0.1.1

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 (194) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +123 -2
  3. package/dist/accordion-Dl-kvgPQ.js +168 -0
  4. package/dist/accordion.js +1 -0
  5. package/dist/alert-BzntPa_5.js +129 -0
  6. package/dist/alert.js +1 -0
  7. package/dist/avatar-Dk2ES3ru.js +124 -0
  8. package/dist/avatar.js +1 -0
  9. package/dist/badge-DZefC7rm.js +102 -0
  10. package/dist/badge.js +1 -0
  11. package/dist/breadcrumbs-5MCZ_Jr3.js +125 -0
  12. package/dist/breadcrumbs.js +1 -0
  13. package/dist/button-qy-50NPd.js +187 -0
  14. package/dist/button.js +1 -0
  15. package/dist/calendar-DcCAiN3b.js +372 -0
  16. package/dist/calendar.js +1 -0
  17. package/dist/card-L-Z_1vZN.js +120 -0
  18. package/dist/card.js +1 -0
  19. package/dist/checkbox-B7em7B-6.js +134 -0
  20. package/dist/checkbox.js +1 -0
  21. package/dist/choice-control-DCyQ_hVw.js +35 -0
  22. package/dist/collection-registry-C2jnQa7X.js +97 -0
  23. package/dist/combobox-DQcXR94r.js +301 -0
  24. package/dist/combobox.js +1 -0
  25. package/dist/command-palette-BRJ8A5De.js +328 -0
  26. package/dist/command-palette.js +1 -0
  27. package/dist/container-COHiEjI8.js +34 -0
  28. package/dist/container.js +1 -0
  29. package/dist/css-CW_HG55W.js +1 -0
  30. package/dist/date-picker-D1GwiRB9.js +239 -0
  31. package/dist/date-picker.js +1 -0
  32. package/dist/dialog-CYf9fCZO.js +175 -0
  33. package/dist/dialog.js +1 -0
  34. package/dist/disclosure-caret-BC6P8AsM.js +13 -0
  35. package/dist/divider-bi7OgCI5.js +76 -0
  36. package/dist/divider.js +1 -0
  37. package/dist/field-anatomy-DKkB268x.js +104 -0
  38. package/dist/flex-CDFDDaiu.js +21 -0
  39. package/dist/flex.js +1 -0
  40. package/dist/focus-ring-qOS3rPlM.js +11 -0
  41. package/dist/icon-wrapper-BKo4FI-O.js +12 -0
  42. package/dist/index.js +37 -0
  43. package/dist/kbd-DpiJgDJ2.js +55 -0
  44. package/dist/kbd.js +1 -0
  45. package/dist/layout-style-B_6YHQ6Q.js +56 -0
  46. package/dist/loading-ring-CTpT-IrT.js +18 -0
  47. package/dist/media-8K3xDAxM.js +4 -0
  48. package/dist/menu-A9fZUaAG.js +186 -0
  49. package/dist/menu.js +1 -0
  50. package/dist/navigation-Cemnmc_J.js +174 -0
  51. package/dist/navigation.js +1 -0
  52. package/dist/pagination-orCjUsn_.js +148 -0
  53. package/dist/pagination.js +1 -0
  54. package/dist/part-id-Bg1LSlk7.js +4 -0
  55. package/dist/pill-Dg2JJHHW.js +49 -0
  56. package/dist/pill.js +1 -0
  57. package/dist/popover-D_YU34WS.js +97 -0
  58. package/dist/popover.js +1 -0
  59. package/dist/progress-XdvBG0Vv.js +83 -0
  60. package/dist/progress.js +1 -0
  61. package/dist/radio-group-CxMJ2Vq7.js +130 -0
  62. package/dist/radio-group.js +1 -0
  63. package/dist/renderable-DwPvt1I8.js +6 -0
  64. package/dist/roving-focus-DeEZ55-T.js +35 -0
  65. package/dist/select-mwFbmzsn.js +256 -0
  66. package/dist/select.js +1 -0
  67. package/dist/skeleton-qas9ZKK9.js +47 -0
  68. package/dist/skeleton.js +1 -0
  69. package/dist/spinner-ros2CfIf.js +49 -0
  70. package/dist/spinner.js +1 -0
  71. package/dist/stack-Hs8THnIL.js +20 -0
  72. package/dist/stack.js +1 -0
  73. package/dist/surface-Bo_aSQOb.js +18 -0
  74. package/dist/switch-E375Bz4X.js +135 -0
  75. package/dist/switch.js +1 -0
  76. package/dist/tabs-CBwRiuul.js +173 -0
  77. package/dist/tabs.js +1 -0
  78. package/dist/text-field-BlP8qGn_.js +73 -0
  79. package/dist/text-field.js +1 -0
  80. package/dist/textarea-CUG26CH2.js +83 -0
  81. package/dist/textarea.js +1 -0
  82. package/dist/theme-root-CrdzwfSo.js +20 -0
  83. package/dist/theme-root.js +1 -0
  84. package/dist/toast-D_dnqnn-.js +270 -0
  85. package/dist/toast.js +1 -0
  86. package/dist/toggle-group-B7gXCea8.js +150 -0
  87. package/dist/toggle-group.js +1 -0
  88. package/dist/tooltip-BJ2hLV1b.js +92 -0
  89. package/dist/tooltip.js +1 -0
  90. package/dist/trigger-style-f54idgjT.js +35 -0
  91. package/dist/types/components/accordion/accordion.d.ts +33 -0
  92. package/dist/types/components/accordion/index.d.ts +2 -0
  93. package/dist/types/components/alert/alert.d.ts +23 -0
  94. package/dist/types/components/alert/index.d.ts +2 -0
  95. package/dist/types/components/avatar/avatar.d.ts +23 -0
  96. package/dist/types/components/avatar/index.d.ts +2 -0
  97. package/dist/types/components/badge/badge.d.ts +36 -0
  98. package/dist/types/components/badge/index.d.ts +2 -0
  99. package/dist/types/components/breadcrumbs/breadcrumbs.d.ts +15 -0
  100. package/dist/types/components/breadcrumbs/index.d.ts +2 -0
  101. package/dist/types/components/button/button.d.ts +34 -0
  102. package/dist/types/components/button/index.d.ts +2 -0
  103. package/dist/types/components/calendar/calendar.d.ts +28 -0
  104. package/dist/types/components/calendar/calendar.styles.d.ts +9 -0
  105. package/dist/types/components/calendar/calendar.utils.d.ts +37 -0
  106. package/dist/types/components/calendar/index.d.ts +2 -0
  107. package/dist/types/components/card/card.d.ts +34 -0
  108. package/dist/types/components/card/index.d.ts +2 -0
  109. package/dist/types/components/checkbox/checkbox.d.ts +21 -0
  110. package/dist/types/components/checkbox/index.d.ts +2 -0
  111. package/dist/types/components/combobox/combobox.d.ts +44 -0
  112. package/dist/types/components/combobox/index.d.ts +2 -0
  113. package/dist/types/components/command-palette/command-palette.d.ts +47 -0
  114. package/dist/types/components/command-palette/command-palette.styles.d.ts +8 -0
  115. package/dist/types/components/command-palette/index.d.ts +2 -0
  116. package/dist/types/components/container/container.d.ts +14 -0
  117. package/dist/types/components/container/index.d.ts +3 -0
  118. package/dist/types/components/date-picker/date-picker.d.ts +39 -0
  119. package/dist/types/components/date-picker/index.d.ts +2 -0
  120. package/dist/types/components/dialog/dialog.d.ts +61 -0
  121. package/dist/types/components/dialog/index.d.ts +2 -0
  122. package/dist/types/components/divider/divider.d.ts +14 -0
  123. package/dist/types/components/divider/index.d.ts +2 -0
  124. package/dist/types/components/field/field-anatomy.d.ts +49 -0
  125. package/dist/types/components/flex/flex.d.ts +4 -0
  126. package/dist/types/components/flex/index.d.ts +3 -0
  127. package/dist/types/components/kbd/index.d.ts +2 -0
  128. package/dist/types/components/kbd/kbd.d.ts +6 -0
  129. package/dist/types/components/menu/index.d.ts +2 -0
  130. package/dist/types/components/menu/menu.d.ts +29 -0
  131. package/dist/types/components/navigation/index.d.ts +2 -0
  132. package/dist/types/components/navigation/navigation.d.ts +24 -0
  133. package/dist/types/components/pagination/index.d.ts +2 -0
  134. package/dist/types/components/pagination/pagination.d.ts +14 -0
  135. package/dist/types/components/pill/index.d.ts +2 -0
  136. package/dist/types/components/pill/pill.d.ts +6 -0
  137. package/dist/types/components/popover/index.d.ts +2 -0
  138. package/dist/types/components/popover/popover.d.ts +19 -0
  139. package/dist/types/components/progress/index.d.ts +2 -0
  140. package/dist/types/components/progress/progress.d.ts +19 -0
  141. package/dist/types/components/radio-group/index.d.ts +2 -0
  142. package/dist/types/components/radio-group/radio-group.d.ts +29 -0
  143. package/dist/types/components/select/index.d.ts +2 -0
  144. package/dist/types/components/select/select.d.ts +38 -0
  145. package/dist/types/components/skeleton/index.d.ts +2 -0
  146. package/dist/types/components/skeleton/skeleton.d.ts +11 -0
  147. package/dist/types/components/spinner/index.d.ts +2 -0
  148. package/dist/types/components/spinner/spinner.d.ts +8 -0
  149. package/dist/types/components/stack/index.d.ts +3 -0
  150. package/dist/types/components/stack/stack.d.ts +7 -0
  151. package/dist/types/components/switch/index.d.ts +2 -0
  152. package/dist/types/components/switch/switch.d.ts +20 -0
  153. package/dist/types/components/tabs/index.d.ts +2 -0
  154. package/dist/types/components/tabs/tabs.d.ts +22 -0
  155. package/dist/types/components/text-field/index.d.ts +2 -0
  156. package/dist/types/components/text-field/text-field.d.ts +14 -0
  157. package/dist/types/components/textarea/index.d.ts +2 -0
  158. package/dist/types/components/textarea/textarea.d.ts +17 -0
  159. package/dist/types/components/theme-root/index.d.ts +2 -0
  160. package/dist/types/components/theme-root/theme-root.d.ts +7 -0
  161. package/dist/types/components/toast/index.d.ts +2 -0
  162. package/dist/types/components/toast/toast.d.ts +37 -0
  163. package/dist/types/components/toggle-group/index.d.ts +2 -0
  164. package/dist/types/components/toggle-group/toggle-group.d.ts +29 -0
  165. package/dist/types/components/tooltip/index.d.ts +2 -0
  166. package/dist/types/components/tooltip/tooltip.d.ts +23 -0
  167. package/dist/types/index.d.ts +36 -0
  168. package/dist/types/overlay/use-native-dialog.d.ts +39 -0
  169. package/dist/types/overlay/use-overlay-floating.d.ts +11 -0
  170. package/dist/types/overlay/use-scroll-lock.d.ts +5 -0
  171. package/dist/types/styling/choice-control.d.ts +8 -0
  172. package/dist/types/styling/css.d.ts +2 -0
  173. package/dist/types/styling/disclosure-caret.d.ts +9 -0
  174. package/dist/types/styling/focus-ring.d.ts +10 -0
  175. package/dist/types/styling/icon-wrapper.d.ts +1 -0
  176. package/dist/types/styling/input-control.d.ts +1 -0
  177. package/dist/types/styling/layout-style.d.ts +26 -0
  178. package/dist/types/styling/listbox-style.d.ts +12 -0
  179. package/dist/types/styling/loading-ring.d.ts +14 -0
  180. package/dist/types/styling/media.d.ts +2 -0
  181. package/dist/types/styling/surface.d.ts +19 -0
  182. package/dist/types/styling/trigger-style.d.ts +1 -0
  183. package/dist/types/styling/visually-hidden.d.ts +1 -0
  184. package/dist/types/utils/collection-registry.d.ts +41 -0
  185. package/dist/types/utils/part-id.d.ts +2 -0
  186. package/dist/types/utils/renderable.d.ts +3 -0
  187. package/dist/types/utils/roving-focus.d.ts +18 -0
  188. package/dist/types/utils/use-controlled-state.d.ts +7 -0
  189. package/dist/types/utils/use-latest-callback.d.ts +10 -0
  190. package/dist/use-controlled-state-DQXkiTQI.js +20 -0
  191. package/dist/use-native-dialog-BCp1chwO.js +83 -0
  192. package/dist/use-overlay-floating-CsZd3qxa.js +18 -0
  193. package/dist/visually-hidden-BXVyhj0y.js +16 -0
  194. package/package.json +198 -3
@@ -0,0 +1,186 @@
1
+ import { t as e } from "./css-CW_HG55W.js";
2
+ import { t } from "./focus-ring-qOS3rPlM.js";
3
+ import { n } from "./media-8K3xDAxM.js";
4
+ import { t as r } from "./use-controlled-state-DQXkiTQI.js";
5
+ import { f as i, i as a, n as o, o as s } from "./collection-registry-C2jnQa7X.js";
6
+ import { t as c } from "./trigger-style-f54idgjT.js";
7
+ import { t as l } from "./use-overlay-floating-CsZd3qxa.js";
8
+ import { createContext as u, forwardRef as d, useContext as f, useEffect as p, useMemo as m, useRef as h, useState as g } from "react";
9
+ import { vars as _ } from "@jfrader/tokens/vars";
10
+ import { jsx as v } from "@emotion/react/jsx-runtime";
11
+ import { FloatingFocusManager as y, FloatingList as b, FloatingPortal as x, useClick as S, useDismiss as C, useInteractions as w, useListNavigation as T, useMergeRefs as E, useRole as D, useTypeahead as O } from "@floating-ui/react";
12
+ //#region src/components/menu/menu.tsx
13
+ var k = 500, A = u(null), j = u(!1);
14
+ function M(e) {
15
+ let t = f(A);
16
+ if (!t) throw Error(`Menu.${e} must be rendered inside <Menu>.`);
17
+ return t;
18
+ }
19
+ function N() {
20
+ let e = M("Item");
21
+ if (!f(j)) throw Error("Menu.Item must be rendered inside <Menu.Content>.");
22
+ return e;
23
+ }
24
+ var P = e({
25
+ appearance: "none",
26
+ boxSizing: "border-box",
27
+ display: "flex",
28
+ alignItems: "center",
29
+ inlineSize: "100%",
30
+ minBlockSize: "32px",
31
+ border: 0,
32
+ borderRadius: _.radius.sm,
33
+ backgroundColor: "transparent",
34
+ paddingBlock: _.space[1],
35
+ paddingInline: _.space[2],
36
+ font: "inherit",
37
+ fontSize: _.textSize.sm,
38
+ color: _.color.text,
39
+ textAlign: "start",
40
+ cursor: "pointer",
41
+ transitionProperty: "background-color",
42
+ transitionDuration: _.motion.duration.fast,
43
+ transitionTimingFunction: _.motion.easeStandard,
44
+ "&:focus-visible": { ...t },
45
+ [n]: { transitionDuration: "0s" }
46
+ }), F = e({
47
+ blockSize: "1px",
48
+ marginBlock: _.space[1],
49
+ backgroundColor: _.color.border
50
+ });
51
+ function I({ open: e, defaultOpen: t = !1, onOpenChange: n, placement: i = "bottom-start", children: a }) {
52
+ let [o = !1, s] = r(e, t, n), [c, u] = g(null), d = h([]), f = h([]), _ = h(/* @__PURE__ */ new Set()), y = h(!1), { refs: b, floatingStyles: x, context: E } = l({
53
+ open: o,
54
+ placement: i,
55
+ onOpenChange: (e, t, n) => {
56
+ e || (y.current = n === "escape-key"), s(e);
57
+ }
58
+ });
59
+ p(() => {
60
+ !o && y.current && (y.current = !1, b.domReference.current?.focus());
61
+ }, [o, b]);
62
+ let j = S(E), M = D(E, { role: "menu" }), N = C(E, {
63
+ escapeKey: !0,
64
+ outsidePress: !0
65
+ }), P = T(E, {
66
+ listRef: d,
67
+ activeIndex: c,
68
+ onNavigate: u,
69
+ loop: !0,
70
+ orientation: "vertical",
71
+ disabledIndices: (e) => _.current.has(e),
72
+ focusItemOnOpen: !0
73
+ }), F = O(E, {
74
+ listRef: f,
75
+ activeIndex: c,
76
+ onMatch: o ? u : void 0,
77
+ resetMs: k
78
+ }), { getReferenceProps: I, getFloatingProps: L, getItemProps: R } = w([
79
+ j,
80
+ M,
81
+ N,
82
+ P,
83
+ F
84
+ ]), z = m(() => ({
85
+ open: o,
86
+ requestClose: (e = !1) => {
87
+ e && (y.current = !0), s(!1);
88
+ },
89
+ activeIndex: c,
90
+ refs: b,
91
+ floatingContext: E,
92
+ floatingStyles: x,
93
+ elementsRef: d,
94
+ labelsRef: f,
95
+ disabledIndices: _.current,
96
+ getReferenceProps: I,
97
+ getFloatingProps: L,
98
+ getItemProps: R
99
+ }), [
100
+ o,
101
+ s,
102
+ c,
103
+ b,
104
+ E,
105
+ x,
106
+ I,
107
+ L,
108
+ R
109
+ ]);
110
+ return /* @__PURE__ */ v(A.Provider, {
111
+ value: z,
112
+ children: a
113
+ });
114
+ }
115
+ var L = d(function(e, t) {
116
+ let { refs: n, getReferenceProps: r } = M("Trigger"), i = E([n.setReference, t]);
117
+ return /* @__PURE__ */ v("button", {
118
+ type: "button",
119
+ ...r(e),
120
+ ref: i,
121
+ "data-ui": "menu-trigger",
122
+ css: c
123
+ });
124
+ }), R = d(function({ style: e, children: t, ...n }, r) {
125
+ let { open: a, refs: o, floatingContext: s, floatingStyles: c, elementsRef: l, labelsRef: u, getFloatingProps: d } = M("Content"), f = E([o.setFloating, r]);
126
+ return a ? /* @__PURE__ */ v(x, { children: /* @__PURE__ */ v(y, {
127
+ context: s,
128
+ modal: !1,
129
+ initialFocus: -1,
130
+ returnFocus: !1,
131
+ restoreFocus: !0,
132
+ children: /* @__PURE__ */ v("div", {
133
+ ...d(n),
134
+ ref: f,
135
+ "data-ui": "menu",
136
+ style: {
137
+ ...e,
138
+ ...c
139
+ },
140
+ css: i,
141
+ children: /* @__PURE__ */ v(b, {
142
+ elementsRef: l,
143
+ labelsRef: u,
144
+ children: /* @__PURE__ */ v(j.Provider, {
145
+ value: !0,
146
+ children: t
147
+ })
148
+ })
149
+ })
150
+ }) }) : null;
151
+ }), z = d(function({ onSelect: e, disabled: t = !1, onClick: n, ...r }, i) {
152
+ let { activeIndex: c, requestClose: l, disabledIndices: u, getItemProps: d } = N(), { ref: f, index: p } = a({ label: t ? null : void 0 }), m = E([f, i]), h = p !== -1 && c === p;
153
+ o(p, t, u);
154
+ let g = (r) => {
155
+ t || (n?.(r), e?.(), r.defaultPrevented || l(!0));
156
+ };
157
+ return /* @__PURE__ */ v("button", {
158
+ type: "button",
159
+ ...d({
160
+ ...r,
161
+ onClick: g
162
+ }),
163
+ ref: m,
164
+ role: "menuitem",
165
+ tabIndex: h ? 0 : -1,
166
+ "aria-disabled": t || void 0,
167
+ "data-active": h || void 0,
168
+ "data-ui": "menu-item",
169
+ css: [P, s]
170
+ });
171
+ }), B = d(function(e, t) {
172
+ return /* @__PURE__ */ v("div", {
173
+ ...e,
174
+ ref: t,
175
+ role: "separator",
176
+ "data-ui": "menu-separator",
177
+ css: F
178
+ });
179
+ }), V = Object.assign(I, {
180
+ Trigger: L,
181
+ Content: R,
182
+ Item: z,
183
+ Separator: B
184
+ });
185
+ //#endregion
186
+ export { V as t };
package/dist/menu.js ADDED
@@ -0,0 +1 @@
1
+ export { t as Menu } from "./menu-A9fZUaAG.js";
@@ -0,0 +1,174 @@
1
+ import { t as e } from "./css-CW_HG55W.js";
2
+ import { t } from "./disclosure-caret-BC6P8AsM.js";
3
+ import { t as n } from "./focus-ring-qOS3rPlM.js";
4
+ import { n as r, t as i } from "./media-8K3xDAxM.js";
5
+ import { t as a } from "./renderable-DwPvt1I8.js";
6
+ import { t as o } from "./icon-wrapper-BKo4FI-O.js";
7
+ import { forwardRef as s, useId as c } from "react";
8
+ import { vars as l } from "@jfrader/tokens/vars";
9
+ import { Fragment as u, jsx as d, jsxs as f } from "@emotion/react/jsx-runtime";
10
+ //#region src/components/navigation/navigation.tsx
11
+ var p = l.space[8], m = "0.06em", h = e({
12
+ display: "grid",
13
+ gap: l.space[4],
14
+ fontFamily: l.font.sans
15
+ }), g = e({
16
+ display: "grid",
17
+ gap: l.space[1],
18
+ "&[open] > summary::after": { transform: "rotate(90deg)" },
19
+ "&[open]:dir(rtl) > summary::after": { transform: "rotate(-90deg)" }
20
+ }), _ = e({
21
+ margin: 0,
22
+ paddingBlock: l.space[1],
23
+ paddingInline: l.space[3],
24
+ fontSize: l.textSize.xs,
25
+ fontWeight: l.fontWeight.medium,
26
+ lineHeight: l.lineHeight.tight,
27
+ letterSpacing: m,
28
+ textTransform: "uppercase",
29
+ color: l.color.textMuted
30
+ }), v = e({
31
+ display: "flex",
32
+ alignItems: "center",
33
+ justifyContent: "space-between",
34
+ gap: l.space[2],
35
+ inlineSize: "100%",
36
+ boxSizing: "border-box",
37
+ minBlockSize: p,
38
+ borderRadius: l.radius.sm,
39
+ cursor: "pointer",
40
+ listStyle: "none",
41
+ transitionProperty: "background-color, color",
42
+ transitionDuration: l.motion.duration.fast,
43
+ transitionTimingFunction: l.motion.easeStandard,
44
+ "&::-webkit-details-marker": { display: "none" },
45
+ "&::after": { ...t },
46
+ "&:hover": {
47
+ backgroundColor: l.color.surfaceHover,
48
+ color: l.color.text
49
+ },
50
+ "&:focus-visible": { ...n },
51
+ [r]: {
52
+ transitionDuration: "0s",
53
+ "&::after": { transitionDuration: "0s" }
54
+ }
55
+ }), y = e({
56
+ display: "grid",
57
+ gap: l.space[1],
58
+ margin: 0,
59
+ padding: 0,
60
+ listStyle: "none"
61
+ }), b = e({
62
+ display: "flex",
63
+ alignItems: "center",
64
+ gap: l.space[2],
65
+ minBlockSize: p,
66
+ paddingInline: l.space[3],
67
+ borderRadius: l.radius.sm,
68
+ fontSize: l.textSize.sm,
69
+ lineHeight: l.lineHeight.tight,
70
+ color: l.color.textMuted,
71
+ textDecoration: "none",
72
+ transitionProperty: "background-color, color",
73
+ transitionDuration: l.motion.duration.fast,
74
+ transitionTimingFunction: l.motion.easeStandard,
75
+ "&:hover:not([aria-current=\"page\"])": {
76
+ backgroundColor: l.color.surfaceHover,
77
+ color: l.color.text
78
+ },
79
+ "&[aria-current=\"page\"]": {
80
+ backgroundColor: l.color.accentSoft,
81
+ color: l.color.accentText,
82
+ fontWeight: l.fontWeight.medium
83
+ },
84
+ "&[aria-disabled=\"true\"]": {
85
+ opacity: .55,
86
+ pointerEvents: "none"
87
+ },
88
+ "&:focus-visible": { ...n },
89
+ [r]: { transitionDuration: "0s" },
90
+ [i]: { "&[aria-current=\"page\"]": {
91
+ forcedColorAdjust: "none",
92
+ backgroundColor: "SelectedItem",
93
+ color: "SelectedItemText"
94
+ } }
95
+ }), x = s(function({ label: e = "Main", ...t }, n) {
96
+ return /* @__PURE__ */ d("nav", {
97
+ ...t,
98
+ ref: n,
99
+ "aria-label": e,
100
+ "data-ui": "navigation",
101
+ css: h
102
+ });
103
+ }), S = s(function({ label: e, collapsible: t = !1, defaultOpen: n, children: r, ...i }, o) {
104
+ let s = c(), l = a(e);
105
+ if (t && !l) throw Error("Navigation.Group requires a renderable label when collapsible is true.");
106
+ let u = /* @__PURE__ */ d("ul", {
107
+ "aria-labelledby": l ? s : void 0,
108
+ css: y,
109
+ children: r
110
+ });
111
+ return t ? /* @__PURE__ */ f("details", {
112
+ ...i,
113
+ ref: o,
114
+ open: n,
115
+ "data-ui": "navigation-group",
116
+ css: g,
117
+ children: [/* @__PURE__ */ d("summary", {
118
+ id: s,
119
+ "data-ui": "navigation-group-summary",
120
+ css: [_, v],
121
+ children: e
122
+ }), u]
123
+ }) : /* @__PURE__ */ f("section", {
124
+ ...i,
125
+ ref: o,
126
+ "data-ui": "navigation-group",
127
+ css: g,
128
+ children: [l && /* @__PURE__ */ d("h2", {
129
+ id: s,
130
+ "data-ui": "navigation-group-label",
131
+ css: _,
132
+ children: e
133
+ }), u]
134
+ });
135
+ }), C = s(function({ href: e, active: t = !1, disabled: n = !1, icon: r, children: i, ...s }, c) {
136
+ let l = /* @__PURE__ */ f(u, { children: [a(r) && /* @__PURE__ */ d("span", {
137
+ "aria-hidden": "true",
138
+ "data-ui": "navigation-item-icon",
139
+ css: o,
140
+ children: r
141
+ }), i] }), p = {
142
+ "aria-current": t ? "page" : void 0,
143
+ "aria-disabled": n || void 0,
144
+ tabIndex: n ? -1 : s.tabIndex,
145
+ onClick: n ? (e) => {
146
+ e.preventDefault();
147
+ } : s.onClick
148
+ };
149
+ return /* @__PURE__ */ d("li", {
150
+ "data-ui": "navigation-list-item",
151
+ children: e === void 0 ? /* @__PURE__ */ d("span", {
152
+ ...s,
153
+ ...p,
154
+ ref: c,
155
+ "data-ui": "navigation-item",
156
+ css: b,
157
+ children: l
158
+ }) : /* @__PURE__ */ d("a", {
159
+ ...s,
160
+ ...p,
161
+ ref: c,
162
+ href: n ? void 0 : e,
163
+ role: n ? "link" : void 0,
164
+ "data-ui": "navigation-item",
165
+ css: b,
166
+ children: l
167
+ })
168
+ });
169
+ }), w = Object.assign(x, {
170
+ Group: S,
171
+ Item: C
172
+ });
173
+ //#endregion
174
+ export { w as t };
@@ -0,0 +1 @@
1
+ export { t as Navigation } from "./navigation-Cemnmc_J.js";
@@ -0,0 +1,148 @@
1
+ import { t as e } from "./css-CW_HG55W.js";
2
+ import { n as t } from "./focus-ring-qOS3rPlM.js";
3
+ import { n } from "./media-8K3xDAxM.js";
4
+ import { t as r } from "./visually-hidden-BXVyhj0y.js";
5
+ import { forwardRef as i, useImperativeHandle as a, useLayoutEffect as o, useMemo as s, useRef as c } from "react";
6
+ import { vars as l } from "@jfrader/tokens/vars";
7
+ import { jsx as u, jsxs as d } from "@emotion/react/jsx-runtime";
8
+ //#region src/components/pagination/pagination.tsx
9
+ var f = 50, p = 105, m = (e) => Math.max(0, Math.floor(Number.isFinite(e) ? e : 0)), h = (e, t) => Array.from({ length: Math.min(p, Math.max(0, t - e + 1)) }, (t, n) => e + n);
10
+ function g(e, t, n) {
11
+ let r = n * 2 + 5;
12
+ if (t <= r) return h(1, t);
13
+ let i = Math.max(e - n, 1), a = Math.min(e + n, t), o = i > 3, s = a < t - 2, c = r - 2;
14
+ return o ? s ? [
15
+ 1,
16
+ "start-ellipsis",
17
+ ...h(i, a),
18
+ "end-ellipsis",
19
+ t
20
+ ] : [
21
+ 1,
22
+ "start-ellipsis",
23
+ ...h(t - c + 1, t)
24
+ ] : [
25
+ ...h(1, c),
26
+ "end-ellipsis",
27
+ t
28
+ ];
29
+ }
30
+ var _ = e({
31
+ display: "flex",
32
+ flexWrap: "wrap",
33
+ alignItems: "center",
34
+ gap: l.space[1],
35
+ margin: 0,
36
+ padding: 0,
37
+ listStyle: "none",
38
+ fontFamily: l.font.sans,
39
+ fontSize: l.textSize.sm,
40
+ lineHeight: l.lineHeight.tight
41
+ }), v = e({
42
+ display: "inline-flex",
43
+ alignItems: "center",
44
+ justifyContent: "center",
45
+ minInlineSize: "32px",
46
+ blockSize: "32px"
47
+ }), y = e({
48
+ position: "relative",
49
+ appearance: "none",
50
+ paddingInline: l.space[2],
51
+ border: "1px solid transparent",
52
+ borderRadius: l.radius.md,
53
+ background: "transparent",
54
+ color: l.color.text,
55
+ font: "inherit",
56
+ fontVariantNumeric: "tabular-nums",
57
+ cursor: "pointer",
58
+ transitionProperty: "background-color, border-color, color",
59
+ transitionDuration: l.motion.duration.fast,
60
+ transitionTimingFunction: l.motion.easeStandard,
61
+ "&:hover:not(:disabled):not([aria-current=\"page\"])": { backgroundColor: l.color.surfaceHover },
62
+ "&[aria-current=\"page\"]": {
63
+ backgroundColor: l.color.accentSoft,
64
+ borderColor: l.color.accentBorder,
65
+ color: l.color.accentText,
66
+ fontWeight: l.fontWeight.semibold
67
+ },
68
+ "&:disabled": {
69
+ cursor: "not-allowed",
70
+ opacity: .55
71
+ },
72
+ "&:focus-visible": { ...t },
73
+ [n]: { transitionDuration: "0s" }
74
+ }), b = e({ color: l.color.textMuted }), x = e({
75
+ display: "inline-block",
76
+ "&:dir(rtl)": { transform: "scaleX(-1)" }
77
+ }), S = i(function({ page: e, totalPages: t, onPageChange: n, siblingCount: i = 1, label: l = "Pagination", previousLabel: p = "Previous page", nextLabel: h = "Next page", locale: S = typeof navigator > "u" ? void 0 : navigator.language, ...C }, w) {
78
+ let T = m(t), E = Math.min(Math.max(m(e), 1), Math.max(T, 1)), D = g(E, T, Math.min(m(i), f)), O = s(() => new Intl.NumberFormat(S), [S]), k = c(null);
79
+ a(w, () => k.current, []);
80
+ let A = c(!1);
81
+ o(() => {
82
+ let e = k.current;
83
+ if (!A.current || !e) return;
84
+ A.current = !1;
85
+ let t = e.ownerDocument.activeElement;
86
+ (t === e.ownerDocument.body || t && e.contains(t) && t.matches(":disabled")) && e.querySelector("[aria-current=\"page\"]")?.focus();
87
+ }, [E]);
88
+ let j = (e, t = !1) => {
89
+ A.current = t && (e <= 1 || e >= T), e !== E && n?.(e);
90
+ };
91
+ return /* @__PURE__ */ u("nav", {
92
+ ...C,
93
+ ref: k,
94
+ "aria-label": l,
95
+ "data-ui": "pagination",
96
+ children: /* @__PURE__ */ d("ul", {
97
+ css: _,
98
+ children: [
99
+ /* @__PURE__ */ u("li", { children: /* @__PURE__ */ d("button", {
100
+ type: "button",
101
+ disabled: E <= 1,
102
+ onClick: () => j(E - 1, !0),
103
+ "data-ui": "pagination-previous",
104
+ css: [v, y],
105
+ children: [/* @__PURE__ */ u("span", {
106
+ "aria-hidden": "true",
107
+ css: x,
108
+ children: "‹"
109
+ }), /* @__PURE__ */ u("span", {
110
+ css: r,
111
+ children: p
112
+ })]
113
+ }) }),
114
+ D.map((e) => typeof e == "number" ? /* @__PURE__ */ u("li", { children: /* @__PURE__ */ u("button", {
115
+ type: "button",
116
+ "aria-current": e === E ? "page" : void 0,
117
+ "aria-label": O.format(e),
118
+ onClick: () => j(e),
119
+ "data-ui": "pagination-page",
120
+ css: [v, y],
121
+ children: O.format(e)
122
+ }) }, e) : /* @__PURE__ */ u("li", { children: /* @__PURE__ */ u("span", {
123
+ "aria-hidden": "true",
124
+ "data-ui": "pagination-ellipsis",
125
+ css: [v, b],
126
+ children: "…"
127
+ }) }, e)),
128
+ /* @__PURE__ */ u("li", { children: /* @__PURE__ */ d("button", {
129
+ type: "button",
130
+ disabled: E >= T,
131
+ onClick: () => j(E + 1, !0),
132
+ "data-ui": "pagination-next",
133
+ css: [v, y],
134
+ children: [/* @__PURE__ */ u("span", {
135
+ "aria-hidden": "true",
136
+ css: x,
137
+ children: "›"
138
+ }), /* @__PURE__ */ u("span", {
139
+ css: r,
140
+ children: h
141
+ })]
142
+ }) })
143
+ ]
144
+ })
145
+ });
146
+ });
147
+ //#endregion
148
+ export { S as t };
@@ -0,0 +1 @@
1
+ export { t as Pagination } from "./pagination-orCjUsn_.js";
@@ -0,0 +1,4 @@
1
+ //#region src/utils/part-id.ts
2
+ var e = (e, t, n) => `${e}-${t}-${encodeURIComponent(n)}`;
3
+ //#endregion
4
+ export { e as t };
@@ -0,0 +1,49 @@
1
+ import { t as e } from "./css-CW_HG55W.js";
2
+ import { forwardRef as t } from "react";
3
+ import { vars as n } from "@jfrader/tokens/vars";
4
+ import { jsx as r } from "@emotion/react/jsx-runtime";
5
+ //#region src/components/pill/pill.tsx
6
+ var i = e({
7
+ display: "inline-flex",
8
+ alignItems: "center",
9
+ boxSizing: "border-box",
10
+ blockSize: n.space[5],
11
+ paddingInline: n.space[2],
12
+ borderRadius: n.radius.full,
13
+ fontSize: n.textSize.xs,
14
+ fontWeight: n.fontWeight.medium,
15
+ lineHeight: 1,
16
+ whiteSpace: "nowrap",
17
+ verticalAlign: "middle"
18
+ }), a = {
19
+ neutral: e({
20
+ backgroundColor: n.color.surfaceHover,
21
+ color: n.color.textMuted
22
+ }),
23
+ accent: e({
24
+ backgroundColor: n.color.accentSoft,
25
+ color: n.color.accentText
26
+ }),
27
+ success: e({
28
+ backgroundColor: n.color.successSoft,
29
+ color: n.color.success
30
+ }),
31
+ warning: e({
32
+ backgroundColor: n.color.warningSoft,
33
+ color: n.color.warning
34
+ }),
35
+ danger: e({
36
+ backgroundColor: n.color.dangerSoft,
37
+ color: n.color.dangerText
38
+ })
39
+ }, o = t(function({ tone: e = "neutral", ...t }, n) {
40
+ return /* @__PURE__ */ r("span", {
41
+ ...t,
42
+ ref: n,
43
+ "data-ui": "pill",
44
+ "data-tone": e,
45
+ css: [i, a[e]]
46
+ });
47
+ });
48
+ //#endregion
49
+ export { o as t };
package/dist/pill.js ADDED
@@ -0,0 +1 @@
1
+ export { t as Pill } from "./pill-Dg2JJHHW.js";
@@ -0,0 +1,97 @@
1
+ import { t as e } from "./css-CW_HG55W.js";
2
+ import { t } from "./use-controlled-state-DQXkiTQI.js";
3
+ import { t as n } from "./trigger-style-f54idgjT.js";
4
+ import { n as r } from "./surface-Bo_aSQOb.js";
5
+ import { t as i } from "./use-overlay-floating-CsZd3qxa.js";
6
+ import { createContext as a, forwardRef as o, useContext as s, useEffect as c, useMemo as l, useRef as u } from "react";
7
+ import { vars as d } from "@jfrader/tokens/vars";
8
+ import { jsx as f } from "@emotion/react/jsx-runtime";
9
+ import { FloatingFocusManager as p, FloatingPortal as m, useClick as h, useDismiss as g, useInteractions as _, useMergeRefs as v, useRole as y } from "@floating-ui/react";
10
+ //#region src/components/popover/popover.tsx
11
+ var b = a(null);
12
+ function x(e) {
13
+ let t = s(b);
14
+ if (!t) throw Error(`Popover.${e} must be rendered inside <Popover>.`);
15
+ return t;
16
+ }
17
+ var S = e({
18
+ ...r,
19
+ borderRadius: d.radius.lg,
20
+ boxShadow: d.shadow.overlay,
21
+ padding: d.space[4],
22
+ minInlineSize: "200px",
23
+ maxInlineSize: "min(360px, calc(100vw - 32px))",
24
+ fontSize: d.textSize.sm
25
+ });
26
+ function C({ open: e, defaultOpen: n = !1, onOpenChange: r, placement: a = "bottom", children: o }) {
27
+ let [s = !1, d] = t(e, n, r), p = u(!1), { refs: m, floatingStyles: v, context: x } = i({
28
+ open: s,
29
+ placement: a,
30
+ onOpenChange: (e, t, n) => {
31
+ e || (p.current = n === "escape-key"), d(e);
32
+ }
33
+ });
34
+ c(() => {
35
+ !s && p.current && (p.current = !1, m.domReference.current?.focus());
36
+ }, [s, m]);
37
+ let S = h(x), C = g(x, {
38
+ escapeKey: !0,
39
+ outsidePress: !0
40
+ }), w = y(x, { role: "dialog" }), { getReferenceProps: T, getFloatingProps: E } = _([
41
+ S,
42
+ C,
43
+ w
44
+ ]), D = l(() => ({
45
+ open: s,
46
+ refs: m,
47
+ floatingContext: x,
48
+ floatingStyles: v,
49
+ getReferenceProps: T,
50
+ getFloatingProps: E
51
+ }), [
52
+ s,
53
+ m,
54
+ x,
55
+ v,
56
+ T,
57
+ E
58
+ ]);
59
+ return /* @__PURE__ */ f(b.Provider, {
60
+ value: D,
61
+ children: o
62
+ });
63
+ }
64
+ var w = o(function(e, t) {
65
+ let { refs: r, getReferenceProps: i } = x("Trigger"), a = v([r.setReference, t]);
66
+ return /* @__PURE__ */ f("button", {
67
+ type: "button",
68
+ ...i(e),
69
+ ref: a,
70
+ "data-ui": "popover-trigger",
71
+ css: n
72
+ });
73
+ }), T = o(function({ style: e, ...t }, n) {
74
+ let { open: r, refs: i, floatingContext: a, floatingStyles: o, getFloatingProps: s } = x("Content"), c = v([i.setFloating, n]);
75
+ return r ? /* @__PURE__ */ f(m, { children: /* @__PURE__ */ f(p, {
76
+ context: a,
77
+ modal: !1,
78
+ initialFocus: -1,
79
+ returnFocus: !1,
80
+ closeOnFocusOut: !1,
81
+ children: /* @__PURE__ */ f("div", {
82
+ ...s(t),
83
+ ref: c,
84
+ "data-ui": "popover",
85
+ style: {
86
+ ...e,
87
+ ...o
88
+ },
89
+ css: S
90
+ })
91
+ }) }) : null;
92
+ }), E = Object.assign(C, {
93
+ Trigger: w,
94
+ Content: T
95
+ });
96
+ //#endregion
97
+ export { E as t };
@@ -0,0 +1 @@
1
+ export { t as Popover } from "./popover-D_YU34WS.js";