@box-kite/react 2.2.15 → 2.2.17
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.
- package/.claude/rules/box-kite-rules.md +1 -1
- package/.claude/skills/box-kite/SKILL.md +1 -1
- package/.claude/skills/box-kite/references/styling.md +1 -1
- package/.cursor/rules/box-kite.mdc +1 -1
- package/AGENTS.md +1 -1
- package/BOX_AI_CONTEXT.md +16 -0
- package/BOX_KITE_AI_CONTEXT.md +16 -0
- package/behavior.cjs +1 -1
- package/behavior.mjs +16 -16
- package/catalog.cjs +1 -1
- package/catalog.mjs +1 -1
- package/client.cjs +1 -1
- package/client.mjs +10 -10
- package/components/accordion.cjs +1 -1
- package/components/accordion.mjs +95 -91
- package/components/calendar.cjs +1 -1
- package/components/calendar.mjs +212 -210
- package/components/chart.cjs +1 -1
- package/components/chart.d.ts +8 -3
- package/components/chart.mjs +70 -65
- package/components/combobox.cjs +1 -1
- package/components/combobox.mjs +187 -186
- package/components/dashboard.cjs +1 -1
- package/components/dashboard.d.ts +1 -44
- package/components/dashboard.mjs +202 -201
- package/components/dataGrid/components/dataGridListLayout.d.ts +1 -1
- package/components/dataGrid/contracts/dataGridContract.d.ts +1 -1
- package/components/dataGrid/models/gridModel.d.ts +1 -1
- package/components/dataGrid.cjs +2 -2
- package/components/dataGrid.mjs +10 -10
- package/components/dateField.cjs +1 -1
- package/components/dateField.mjs +96 -96
- package/components/datePicker.cjs +1 -1
- package/components/datePicker.mjs +286 -285
- package/components/dialog.cjs +1 -1
- package/components/dialog.d.ts +2 -64
- package/components/dialog.mjs +131 -126
- package/components/form.cjs +1 -1
- package/components/form.d.ts +4 -3
- package/components/form.mjs +25 -22
- package/components/menu.cjs +1 -1
- package/components/menu.d.ts +2 -73
- package/components/menu.mjs +220 -215
- package/components/overlay.cjs +1 -1
- package/components/overlay.mjs +44 -43
- package/components/popover.cjs +1 -1
- package/components/popover.d.ts +1 -41
- package/components/popover.mjs +56 -51
- package/components/presence.cjs +1 -1
- package/components/presence.mjs +1 -1
- package/components/radioGroup.cjs +1 -1
- package/components/radioGroup.mjs +59 -55
- package/components/semantics.d.ts +29 -29
- package/components/slider.cjs +1 -1
- package/components/slider.d.ts +1 -55
- package/components/slider.mjs +92 -90
- package/components/sortableList.cjs +1 -1
- package/components/sortableList.mjs +149 -148
- package/components/swipeItem.cjs +1 -1
- package/components/swipeItem.mjs +100 -100
- package/components/tabs.cjs +1 -1
- package/components/tabs.mjs +135 -132
- package/components/toaster.cjs +1 -1
- package/components/toaster.d.ts +1 -37
- package/components/toaster.mjs +130 -128
- package/components/tooltip.cjs +1 -1
- package/components/tooltip.d.ts +1 -34
- package/components/tooltip.mjs +73 -69
- package/components/virtualList.cjs +1 -1
- package/components/virtualList.mjs +88 -87
- package/docs/props.md +2 -2
- package/interactionListening.cjs +1 -1
- package/interactionListening.mjs +3 -3
- package/layer.cjs +1 -1
- package/layer.mjs +1 -1
- package/motion.cjs +1 -1
- package/motion.mjs +30 -20
- package/package.json +41 -40
- package/placement.cjs +1 -1
- package/placement.mjs +1 -1
- package/platform.cjs +1 -1
- package/platform.mjs +17 -14
- package/react/animation/useHeldContent.d.ts +6 -0
- package/react/animation/usePresence.d.ts +4 -0
- package/react/componentsContext.d.ts +1 -1
- package/react-shared.cjs +1 -1
- package/react-shared.mjs +1 -1
- package/scrolling.cjs +1 -1
- package/scrolling.mjs +1 -1
- package/utils/chart/chartUtils.d.ts +3 -2
- package/utils/dashboard/dashboardUtils.d.ts +1 -1
- package/utils/dom/domUtils.d.ts +6 -0
- package/create/src/agents.d.ts +0 -22
- package/create/src/agents.test.d.ts +0 -1
- package/create/src/index.d.ts +0 -1
- package/create/src/options.d.ts +0 -31
- package/create/src/options.test.d.ts +0 -1
- package/create/src/packageManager.d.ts +0 -5
- package/create/src/project.d.ts +0 -27
- package/create/src/project.test.d.ts +0 -1
- package/create/templates/ts/designs/azure.d.ts +0 -5
- package/create/templates/ts/designs/ember.d.ts +0 -5
- package/create/templates/ts/designs/mono.d.ts +0 -5
- package/create/templates/ts/src/App.d.ts +0 -2
- package/create/templates/ts/src/design.d.ts +0 -5
- package/create/templates/ts/src/main.d.ts +0 -0
- package/mcp/src/data.d.ts +0 -90
- package/mcp/src/data.test.d.ts +0 -1
- package/mcp/src/engine.d.ts +0 -23
- package/mcp/src/index.d.ts +0 -1
- package/mcp/src/search.d.ts +0 -38
- package/mcp/src/search.test.d.ts +0 -1
- package/mcp/src/server.d.ts +0 -18
- package/mcp/src/server.test.d.ts +0 -1
- package/mcp/src/styles.d.ts +0 -27
- package/mcp/src/styles.test.d.ts +0 -1
- package/mcp/src/tools.d.ts +0 -18
- package/mcp/src/vocabulary.d.ts +0 -41
- package/registry/blocks/dashboard-shell/dashboard-shell.d.ts +0 -24
- package/registry/blocks/dashboard-shell/dashboard-stats.d.ts +0 -13
- package/registry/blocks/data-grid/invoice-rows.d.ts +0 -15
- package/registry/blocks/data-grid/invoices-grid.d.ts +0 -1
- package/registry/blocks/settings-form/settings-form.d.ts +0 -17
- package/registry/designs/store/address-form.d.ts +0 -11
- package/registry/designs/store/cart-items.d.ts +0 -10
- package/registry/designs/store/cart-page.d.ts +0 -4
- package/registry/designs/store/checkout-page.d.ts +0 -7
- package/registry/designs/store/credit-card-form.d.ts +0 -10
- package/registry/designs/store/form-field.d.ts +0 -19
- package/registry/designs/store/order-summary.d.ts +0 -18
- package/registry/designs/store/product-art.d.ts +0 -26
- package/registry/designs/store/product-card.d.ts +0 -11
- package/registry/designs/store/product-gallery.d.ts +0 -11
- package/registry/designs/store/product-grid.d.ts +0 -10
- package/registry/designs/store/product-page.d.ts +0 -5
- package/registry/designs/store/quantity-stepper.d.ts +0 -13
- package/registry/designs/store/shipping-method.d.ts +0 -14
- package/registry/designs/store/store-data.d.ts +0 -53
- package/registry/designs/store/store-design.d.ts +0 -63
- package/registry/designs/store/store-shell.d.ts +0 -12
- package/registry/designs/store/storefront-page.d.ts +0 -4
- package/registry/designs/store/variant-picker.d.ts +0 -15
- package/supabase/functions/collect/index.d.ts +0 -30
- package/supabase/functions/collect/index.test.d.ts +0 -1
package/components/overlay.mjs
CHANGED
|
@@ -1,53 +1,54 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { c as e,
|
|
3
|
-
import { t as
|
|
4
|
-
import { n as
|
|
5
|
-
import
|
|
6
|
-
import { t as
|
|
7
|
-
import { n as
|
|
8
|
-
import { forwardRef as
|
|
9
|
-
import { Fragment as
|
|
10
|
-
import { createPortal as
|
|
2
|
+
import { c as e, f as t, l as n, m as r } from "../platform.mjs";
|
|
3
|
+
import { t as i } from "../client.mjs";
|
|
4
|
+
import { n as a } from "../effects.mjs";
|
|
5
|
+
import o from "../box.mjs";
|
|
6
|
+
import { t as s } from "../placement.mjs";
|
|
7
|
+
import { n as c } from "../layer.mjs";
|
|
8
|
+
import { forwardRef as l, useCallback as u, useRef as d, useState as f } from "react";
|
|
9
|
+
import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
|
|
10
|
+
import { createPortal as g } from "react-dom";
|
|
11
11
|
//#region src/components/overlay.tsx
|
|
12
|
-
function
|
|
13
|
-
let { side:
|
|
14
|
-
side:
|
|
15
|
-
align:
|
|
16
|
-
offset:
|
|
17
|
-
flip:
|
|
18
|
-
matchWidth:
|
|
19
|
-
anchor:
|
|
20
|
-
trackSide: !!
|
|
12
|
+
function _(l, _) {
|
|
13
|
+
let { side: v = "bottom", align: y = "center", offset: b = 0, flip: x = !0, onSideChange: S, anchor: C, contentRef: w, matchWidth: T = !0, ...E } = l, [D, O] = f(null), [k, A] = f(!1), j = d(null), M = c(), N = d(null), P = i(!M), F = s({
|
|
14
|
+
side: v,
|
|
15
|
+
align: y,
|
|
16
|
+
offset: b,
|
|
17
|
+
flip: x,
|
|
18
|
+
matchWidth: T,
|
|
19
|
+
anchor: C ?? D,
|
|
20
|
+
trackSide: !!S
|
|
21
21
|
});
|
|
22
|
-
|
|
23
|
-
let t =
|
|
24
|
-
!
|
|
25
|
-
}),
|
|
26
|
-
if (
|
|
27
|
-
let e = t(
|
|
28
|
-
|
|
22
|
+
a(() => {
|
|
23
|
+
let t = N.current;
|
|
24
|
+
!M || !e() || !t || !t.isConnected || t.matches(":popover-open") || t.showPopover();
|
|
25
|
+
}), a(() => {
|
|
26
|
+
if (M) return;
|
|
27
|
+
let e = t(C) ?? D;
|
|
28
|
+
A(!!e && r(e));
|
|
29
29
|
}, [
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
]),
|
|
34
|
-
|
|
30
|
+
C,
|
|
31
|
+
D,
|
|
32
|
+
M
|
|
33
|
+
]), a(() => {
|
|
34
|
+
j.current !== F.side && (j.current = F.side, S?.(F.side));
|
|
35
35
|
});
|
|
36
|
-
let
|
|
37
|
-
|
|
38
|
-
}, [
|
|
39
|
-
...
|
|
40
|
-
ref:
|
|
36
|
+
let I = F.layerProps.ref, L = u((e) => {
|
|
37
|
+
I?.(e), N.current = e, n(_, e);
|
|
38
|
+
}, [I, _]), R = /* @__PURE__ */ m(o, {
|
|
39
|
+
...F.layerProps,
|
|
40
|
+
ref: L,
|
|
41
41
|
transition: "none",
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
42
|
+
overflow: "visible",
|
|
43
|
+
props: M ? { popover: "manual" } : { dir: k ? "rtl" : "ltr" },
|
|
44
|
+
children: /* @__PURE__ */ m(o, {
|
|
45
|
+
ref: w,
|
|
46
|
+
...E
|
|
46
47
|
})
|
|
47
48
|
});
|
|
48
|
-
return /* @__PURE__ */
|
|
49
|
+
return /* @__PURE__ */ h(p, { children: [!C && /* @__PURE__ */ m(o, { ref: O }), M ? R : P && g(R, P)] });
|
|
49
50
|
}
|
|
50
|
-
var
|
|
51
|
-
|
|
51
|
+
var v = l(_);
|
|
52
|
+
v.displayName = "Overlay";
|
|
52
53
|
//#endregion
|
|
53
|
-
export {
|
|
54
|
+
export { v as default };
|
package/components/popover.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../
|
|
1
|
+
"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../react-shared.cjs"),t=require("../platform.cjs"),n=require("../box.cjs"),r=require("../behavior.cjs"),i=require("../placement.cjs"),a=require("../layer.cjs"),o=require("./overlay.cjs"),s=require("../motion.cjs");let c=require("react"),l=require("react/jsx-runtime");function u(e,u){let{trigger:d,children:f,open:p,defaultOpen:m=!1,onOpenChange:h,label:g,labelledBy:_,side:v=`bottom`,align:y=`center`,offset:b=2,flip:x=!0,matchWidth:S=!1,autoFocus:C=!0,props:w,...T}=e,E=r.a(e=>{!C||e.contains(document.activeElement)||e.focus()}),{platform:D,isOpen:O,id:k,trigger:A,triggerElement:j,setPanel:M,panelElement:N}=a.t({haspopup:`dialog`,idPrefix:`popover`,id:T.id,interaction:{component:`popover`,type:`openChange`},open:p,defaultOpen:m,onOpenChange:h,onOpened:E}),P=i.t({side:v,align:y,offset:b,flip:x,matchWidth:S,anchor:j}),F=s.t(f,O,N),I=(0,c.useCallback)(e=>{M(e),t.l(u,e)},[M,u]),L={"aria-label":g,"aria-labelledby":_},R=T;return D?(0,l.jsxs)(l.Fragment,{children:[d(A),(0,l.jsx)(n.default,{ref:I,component:`popover`,...R,variant:[R.variant,{topLayer:!0}],...P.layerProps,id:k,props:{popover:`auto`,role:`dialog`,...L,tabIndex:-1,...w},children:F})]}):(0,l.jsxs)(l.Fragment,{children:[d(A),O&&(0,l.jsx)(o.default,{contentRef:I,anchor:j,side:v,align:y,offset:b,flip:x,matchWidth:S,component:`popover`,...R,id:k,props:{role:`dialog`,...L,tabIndex:-1,...w},children:f})]})}var d=e.f(u,`Popover`);exports.default=d;
|
package/components/popover.d.ts
CHANGED
|
@@ -56,45 +56,5 @@ interface Props<TKey extends keyof ComponentsAndVariants> extends PopoverBoxProp
|
|
|
56
56
|
*/
|
|
57
57
|
autoFocus?: boolean;
|
|
58
58
|
}
|
|
59
|
-
|
|
60
|
-
* A panel anchored to a trigger, on the platform's own Popover API: the top layer, light dismiss and
|
|
61
|
-
* focus return are the browser's, and the position is CSS anchor positioning.
|
|
62
|
-
*
|
|
63
|
-
* ```tsx
|
|
64
|
-
* <Popover label="Filters" trigger={(t) => <Button {...t}>Filters</Button>}>
|
|
65
|
-
* <Checkbox label="Only mine" />
|
|
66
|
-
* </Popover>
|
|
67
|
-
* ```
|
|
68
|
-
*
|
|
69
|
-
* **There is no portal.** A top-layer element paints above every stacking context and outside every
|
|
70
|
-
* clipped ancestor, which is the whole class of bug a portal exists to work around — and because the
|
|
71
|
-
* panel stays where it was declared in the DOM, it inherits the theme, the custom properties and the text
|
|
72
|
-
* direction around it, and the tab order runs trigger → panel with nothing to arrange. (Measured against a
|
|
73
|
-
* `z-index: 9999` sibling, a `transform`ed ancestor and an `overflow: hidden` one.)
|
|
74
|
-
*
|
|
75
|
-
* **The panel is always rendered**, and closed means `display: none` from the UA stylesheet. That is what
|
|
76
|
-
* lets the browser own show and hide — and what makes the exit a plain CSS transition rather than a
|
|
77
|
-
* `<Presence>`, since nothing unmounts. Content that is expensive to render should be gated by the
|
|
78
|
-
* consumer: `{open && <Heavy />}`.
|
|
79
|
-
*
|
|
80
|
-
* **The panel keeps the side it chose when it opened.** Chrome re-evaluates `position-try-fallbacks` on
|
|
81
|
-
* scroll for an ordinary positioned element and never for one in the top layer (measured in 152), so a
|
|
82
|
-
* panel left open while the page scrolls does not flip when its side runs out of room. Every open picks
|
|
83
|
-
* the right side; it is only a scroll *while* open that this affects. See `Overlay`, which shares it.
|
|
84
|
-
*
|
|
85
|
-
* Where the browser has no Popover API the panel is an `Overlay` — a portal — with `useDismiss` and
|
|
86
|
-
* `useFocusReturn` supplying what the platform otherwise would.
|
|
87
|
-
*
|
|
88
|
-
* @a11y `role="dialog"` on the panel, named by `label` or `labelledBy`; the popover attribute supplies no
|
|
89
|
-
* role at all, and a panel with none is announced as a group of orphaned content.
|
|
90
|
-
* @a11y The trigger carries `aria-expanded`, `aria-haspopup="dialog"` and `aria-controls`, so the control
|
|
91
|
-
* says what it operates and what state it is in.
|
|
92
|
-
* @a11y Focus moves into the panel on open and back to the trigger on close. Nothing is trapped: this is a
|
|
93
|
-
* non-modal dialog, so Tab leaves it, and the panel follows the trigger in the DOM either way.
|
|
94
|
-
* @keyboard Enter, Space — On the trigger, toggles the panel.
|
|
95
|
-
* @keyboard Escape — Closes it and returns focus to the trigger, from anywhere inside.
|
|
96
|
-
* @keyboard Tab — Moves into the panel from the trigger, and out of the panel to whatever follows it.
|
|
97
|
-
*/
|
|
98
|
-
declare function PopoverImpl<TKey extends keyof ComponentsAndVariants = 'popover'>(props: Props<TKey>): import("react").JSX.Element;
|
|
99
|
-
declare const Popover: typeof PopoverImpl;
|
|
59
|
+
declare const Popover: <TKey extends keyof ComponentsAndVariants = "popover">(props: Props<TKey>) => React.ReactNode;
|
|
100
60
|
export default Popover;
|
package/components/popover.mjs
CHANGED
|
@@ -1,73 +1,78 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import e from "../
|
|
3
|
-
import {
|
|
4
|
-
import
|
|
5
|
-
import {
|
|
6
|
-
import i from "
|
|
7
|
-
import {
|
|
2
|
+
import { f as e } from "../react-shared.mjs";
|
|
3
|
+
import { l as t } from "../platform.mjs";
|
|
4
|
+
import n from "../box.mjs";
|
|
5
|
+
import { a as r } from "../behavior.mjs";
|
|
6
|
+
import { t as i } from "../placement.mjs";
|
|
7
|
+
import { t as a } from "../layer.mjs";
|
|
8
|
+
import o from "./overlay.mjs";
|
|
9
|
+
import { t as s } from "../motion.mjs";
|
|
10
|
+
import { useCallback as c } from "react";
|
|
11
|
+
import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
|
|
8
12
|
//#region src/components/popover.tsx
|
|
9
|
-
function
|
|
10
|
-
let { trigger:
|
|
11
|
-
!
|
|
12
|
-
}), { platform:
|
|
13
|
+
function f(e, f) {
|
|
14
|
+
let { trigger: p, children: m, open: h, defaultOpen: g = !1, onOpenChange: _, label: v, labelledBy: y, side: b = "bottom", align: x = "center", offset: S = 2, flip: C = !0, matchWidth: w = !1, autoFocus: T = !0, props: E, ...D } = e, O = r((e) => {
|
|
15
|
+
!T || e.contains(document.activeElement) || e.focus();
|
|
16
|
+
}), { platform: k, isOpen: A, id: j, trigger: M, triggerElement: N, setPanel: P, panelElement: F } = a({
|
|
13
17
|
haspopup: "dialog",
|
|
14
18
|
idPrefix: "popover",
|
|
15
|
-
id:
|
|
19
|
+
id: D.id,
|
|
16
20
|
interaction: {
|
|
17
21
|
component: "popover",
|
|
18
22
|
type: "openChange"
|
|
19
23
|
},
|
|
20
|
-
open:
|
|
21
|
-
defaultOpen:
|
|
22
|
-
onOpenChange:
|
|
23
|
-
onOpened:
|
|
24
|
-
}),
|
|
25
|
-
side:
|
|
26
|
-
align:
|
|
27
|
-
offset:
|
|
28
|
-
flip:
|
|
29
|
-
matchWidth:
|
|
30
|
-
anchor:
|
|
31
|
-
}),
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
24
|
+
open: h,
|
|
25
|
+
defaultOpen: g,
|
|
26
|
+
onOpenChange: _,
|
|
27
|
+
onOpened: O
|
|
28
|
+
}), I = i({
|
|
29
|
+
side: b,
|
|
30
|
+
align: x,
|
|
31
|
+
offset: S,
|
|
32
|
+
flip: C,
|
|
33
|
+
matchWidth: w,
|
|
34
|
+
anchor: N
|
|
35
|
+
}), L = s(m, A, F), R = c((e) => {
|
|
36
|
+
P(e), t(f, e);
|
|
37
|
+
}, [P, f]), z = {
|
|
38
|
+
"aria-label": v,
|
|
39
|
+
"aria-labelledby": y
|
|
40
|
+
}, B = D;
|
|
41
|
+
return k ? /* @__PURE__ */ d(l, { children: [p(M), /* @__PURE__ */ u(n, {
|
|
42
|
+
ref: R,
|
|
37
43
|
component: "popover",
|
|
38
|
-
...
|
|
39
|
-
variant: [
|
|
40
|
-
...
|
|
41
|
-
id:
|
|
44
|
+
...B,
|
|
45
|
+
variant: [B.variant, { topLayer: !0 }],
|
|
46
|
+
...I.layerProps,
|
|
47
|
+
id: j,
|
|
42
48
|
props: {
|
|
43
49
|
popover: "auto",
|
|
44
50
|
role: "dialog",
|
|
45
|
-
...
|
|
51
|
+
...z,
|
|
46
52
|
tabIndex: -1,
|
|
47
|
-
...
|
|
53
|
+
...E
|
|
48
54
|
},
|
|
49
|
-
children:
|
|
50
|
-
})] }) : /* @__PURE__ */
|
|
51
|
-
contentRef:
|
|
52
|
-
anchor:
|
|
53
|
-
side:
|
|
54
|
-
align:
|
|
55
|
-
offset:
|
|
56
|
-
flip:
|
|
57
|
-
matchWidth:
|
|
55
|
+
children: L
|
|
56
|
+
})] }) : /* @__PURE__ */ d(l, { children: [p(M), A && /* @__PURE__ */ u(o, {
|
|
57
|
+
contentRef: R,
|
|
58
|
+
anchor: N,
|
|
59
|
+
side: b,
|
|
60
|
+
align: x,
|
|
61
|
+
offset: S,
|
|
62
|
+
flip: C,
|
|
63
|
+
matchWidth: w,
|
|
58
64
|
component: "popover",
|
|
59
|
-
...
|
|
60
|
-
id:
|
|
65
|
+
...B,
|
|
66
|
+
id: j,
|
|
61
67
|
props: {
|
|
62
68
|
role: "dialog",
|
|
63
|
-
...
|
|
69
|
+
...z,
|
|
64
70
|
tabIndex: -1,
|
|
65
|
-
...
|
|
71
|
+
...E
|
|
66
72
|
},
|
|
67
|
-
children:
|
|
73
|
+
children: m
|
|
68
74
|
})] });
|
|
69
75
|
}
|
|
70
|
-
var
|
|
71
|
-
l.displayName = "Popover";
|
|
76
|
+
var p = e(f, "Popover");
|
|
72
77
|
//#endregion
|
|
73
|
-
export {
|
|
78
|
+
export { p as default };
|
package/components/presence.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../motion.cjs");let t=require("react/jsx-runtime");function n(n){let r=e.
|
|
1
|
+
"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../motion.cjs");let t=require("react/jsx-runtime");function n(n){let r=e.r({present:n.present});return(0,t.jsx)(t.Fragment,{children:r.mounted?n.children(r):null})}n.displayName=`Presence`,exports.default=n;
|
package/components/presence.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../
|
|
1
|
+
"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../react-shared.cjs"),t=require("../platform.cjs"),n=require("../behavior.cjs"),r=require("../identity.cjs"),i=require("../reporting.cjs"),a=require("./flex.cjs"),o=require("./semantics.cjs"),s=require("./radioButton.cjs");let c=require("react"),l=require("react/jsx-runtime");var u=(0,c.createContext)(null);function d(e){return[...e?.querySelectorAll(`input[type="radio"]`)??[]].filter(e=>!e.disabled)}function f(e){return e===`ArrowDown`||e===`ArrowRight`?1:e===`ArrowUp`||e===`ArrowLeft`?-1:0}function p(e,s){let{label:p,name:m,value:h,defaultValue:g,onValueChange:_,onChange:v,orientation:y=`vertical`,children:b,props:x,...S}=e,C=r.t(`radiogroup`),w=(0,c.useRef)(null),T=(0,c.useCallback)(e=>{w.current=e,t.l(s,e)},[s]),E=(0,c.useRef)(`click`),D=n.a((e,t)=>{_?.(e,t),v?.(e,t)}),[O,k]=i.a({value:h,defaultValue:g,onChange:D,interaction:{component:`radioGroup`,type:`valueChange`}}),A=n.a(e=>{let t=f(e.key);if(t===0||e.defaultPrevented)return;let n=d(w.current),r=n.indexOf(document.activeElement);if(r===-1)return;e.preventDefault();let i=n[(r+t+n.length)%n.length];i!==n[r]&&(E.current=`keyboard`,i.focus(),i.click(),E.current=`click`)}),j=`${C}-label`,M=p!=null,N=(0,c.useMemo)(()=>({name:m??C,value:O,select:(e,t)=>k(e,{reason:E.current,event:t})}),[C,m,O,k]);return(0,l.jsx)(u.Provider,{value:N,children:(0,l.jsxs)(a.default,{ref:T,component:`radioGroup`,variant:{horizontal:y===`horizontal`},...S,props:{role:`radiogroup`,"aria-labelledby":M?j:void 0,...x,onKeyDown:A},children:[M&&(0,l.jsx)(o.Span,{component:`radioGroup.label`,id:j,children:p}),b]})})}function m(e){let t=(0,c.useContext)(u),{value:r,...i}=e,a=n.a(e=>t?.select(r,e));return t?(0,l.jsx)(s.default,{name:t.name,value:r,checked:t.value===r,onChange:a,...i}):(0,l.jsx)(s.default,{value:r,...i})}m.displayName=`RadioGroup.Item`;var h=e.f(p,`RadioGroup`);h.Item=m,h.displayName=`RadioGroup`,exports.default=h;
|
|
@@ -1,88 +1,92 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {
|
|
3
|
-
import { t } from "../
|
|
4
|
-
import { a as n } from "../
|
|
5
|
-
import r from "
|
|
6
|
-
import {
|
|
7
|
-
import a from "./
|
|
8
|
-
import {
|
|
9
|
-
import
|
|
2
|
+
import { f as e } from "../react-shared.mjs";
|
|
3
|
+
import { l as t } from "../platform.mjs";
|
|
4
|
+
import { a as n } from "../behavior.mjs";
|
|
5
|
+
import { t as r } from "../identity.mjs";
|
|
6
|
+
import { a as i } from "../reporting.mjs";
|
|
7
|
+
import a from "./flex.mjs";
|
|
8
|
+
import { Span as o } from "./semantics.mjs";
|
|
9
|
+
import s from "./radioButton.mjs";
|
|
10
|
+
import { createContext as c, useCallback as l, useContext as u, useMemo as d, useRef as f } from "react";
|
|
11
|
+
import { jsx as p, jsxs as m } from "react/jsx-runtime";
|
|
10
12
|
//#region src/components/radioGroup.tsx
|
|
11
|
-
var
|
|
12
|
-
function
|
|
13
|
+
var h = c(null);
|
|
14
|
+
function g(e) {
|
|
13
15
|
return [...e?.querySelectorAll("input[type=\"radio\"]") ?? []].filter((e) => !e.disabled);
|
|
14
16
|
}
|
|
15
|
-
function
|
|
17
|
+
function _(e) {
|
|
16
18
|
return e === "ArrowDown" || e === "ArrowRight" ? 1 : e === "ArrowUp" || e === "ArrowLeft" ? -1 : 0;
|
|
17
19
|
}
|
|
18
|
-
function
|
|
19
|
-
let { label:
|
|
20
|
-
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
20
|
+
function v(e, s) {
|
|
21
|
+
let { label: c, name: u, value: v, defaultValue: y, onValueChange: b, onChange: x, orientation: S = "vertical", children: C, props: w, ...T } = e, E = r("radiogroup"), D = f(null), O = l((e) => {
|
|
22
|
+
D.current = e, t(s, e);
|
|
23
|
+
}, [s]), k = f("click"), A = n((e, t) => {
|
|
24
|
+
b?.(e, t), x?.(e, t);
|
|
25
|
+
}), [j, M] = i({
|
|
26
|
+
value: v,
|
|
27
|
+
defaultValue: y,
|
|
28
|
+
onChange: A,
|
|
25
29
|
interaction: {
|
|
26
30
|
component: "radioGroup",
|
|
27
31
|
type: "valueChange"
|
|
28
32
|
}
|
|
29
|
-
}),
|
|
30
|
-
let t =
|
|
33
|
+
}), N = n((e) => {
|
|
34
|
+
let t = _(e.key);
|
|
31
35
|
if (t === 0 || e.defaultPrevented) return;
|
|
32
|
-
let n =
|
|
36
|
+
let n = g(D.current), r = n.indexOf(document.activeElement);
|
|
33
37
|
if (r === -1) return;
|
|
34
38
|
e.preventDefault();
|
|
35
39
|
let i = n[(r + t + n.length) % n.length];
|
|
36
|
-
i !== n[r] && (
|
|
37
|
-
}),
|
|
38
|
-
name:
|
|
39
|
-
value:
|
|
40
|
-
select: (e, t) =>
|
|
41
|
-
reason:
|
|
40
|
+
i !== n[r] && (k.current = "keyboard", i.focus(), i.click(), k.current = "click");
|
|
41
|
+
}), P = `${E}-label`, F = c != null, I = d(() => ({
|
|
42
|
+
name: u ?? E,
|
|
43
|
+
value: j,
|
|
44
|
+
select: (e, t) => M(e, {
|
|
45
|
+
reason: k.current,
|
|
42
46
|
event: t
|
|
43
47
|
})
|
|
44
48
|
}), [
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
+
E,
|
|
50
|
+
u,
|
|
51
|
+
j,
|
|
52
|
+
M
|
|
49
53
|
]);
|
|
50
|
-
return /* @__PURE__ */
|
|
51
|
-
value:
|
|
52
|
-
children: /* @__PURE__ */
|
|
53
|
-
ref:
|
|
54
|
+
return /* @__PURE__ */ p(h.Provider, {
|
|
55
|
+
value: I,
|
|
56
|
+
children: /* @__PURE__ */ m(a, {
|
|
57
|
+
ref: O,
|
|
54
58
|
component: "radioGroup",
|
|
55
|
-
variant: { horizontal:
|
|
56
|
-
...
|
|
59
|
+
variant: { horizontal: S === "horizontal" },
|
|
60
|
+
...T,
|
|
57
61
|
props: {
|
|
58
62
|
role: "radiogroup",
|
|
59
|
-
"aria-labelledby":
|
|
60
|
-
...
|
|
61
|
-
onKeyDown:
|
|
63
|
+
"aria-labelledby": F ? P : void 0,
|
|
64
|
+
...w,
|
|
65
|
+
onKeyDown: N
|
|
62
66
|
},
|
|
63
|
-
children: [
|
|
67
|
+
children: [F && /* @__PURE__ */ p(o, {
|
|
64
68
|
component: "radioGroup.label",
|
|
65
|
-
id:
|
|
66
|
-
children:
|
|
67
|
-
}),
|
|
69
|
+
id: P,
|
|
70
|
+
children: c
|
|
71
|
+
}), C]
|
|
68
72
|
})
|
|
69
73
|
});
|
|
70
74
|
}
|
|
71
|
-
function
|
|
72
|
-
let
|
|
73
|
-
return
|
|
74
|
-
name:
|
|
75
|
+
function y(e) {
|
|
76
|
+
let t = u(h), { value: r, ...i } = e, a = n((e) => t?.select(r, e));
|
|
77
|
+
return t ? /* @__PURE__ */ p(s, {
|
|
78
|
+
name: t.name,
|
|
75
79
|
value: r,
|
|
76
|
-
checked:
|
|
77
|
-
onChange:
|
|
80
|
+
checked: t.value === r,
|
|
81
|
+
onChange: a,
|
|
78
82
|
...i
|
|
79
|
-
}) : /* @__PURE__ */
|
|
83
|
+
}) : /* @__PURE__ */ p(s, {
|
|
80
84
|
value: r,
|
|
81
85
|
...i
|
|
82
86
|
});
|
|
83
87
|
}
|
|
84
|
-
|
|
85
|
-
var
|
|
86
|
-
|
|
88
|
+
y.displayName = "RadioGroup.Item";
|
|
89
|
+
var b = e(v, "RadioGroup");
|
|
90
|
+
b.Item = y, b.displayName = "RadioGroup";
|
|
87
91
|
//#endregion
|
|
88
|
-
export {
|
|
92
|
+
export { b as default };
|