@seed-design/react 2.0.5 → 2.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.
- package/lib/components/ContentDialog/ContentDialog.cjs +105 -0
- package/lib/components/ContentDialog/ContentDialog.d.ts +50 -0
- package/lib/components/ContentDialog/ContentDialog.d.ts.map +1 -0
- package/lib/components/ContentDialog/ContentDialog.js +91 -0
- package/lib/components/ContentDialog/ContentDialog.namespace.cjs +24 -0
- package/lib/components/ContentDialog/ContentDialog.namespace.d.ts +2 -0
- package/lib/components/ContentDialog/ContentDialog.namespace.d.ts.map +1 -0
- package/lib/components/ContentDialog/ContentDialog.namespace.js +19 -0
- package/lib/components/ContentDialog/index.cjs +21 -0
- package/lib/components/ContentDialog/index.d.ts +3 -0
- package/lib/components/ContentDialog/index.d.ts.map +1 -0
- package/lib/components/ContentDialog/index.js +3 -0
- package/lib/components/Dialog/index.d.ts.map +1 -1
- package/lib/components/QuantityPicker/QuantityPicker.cjs +120 -0
- package/lib/components/QuantityPicker/QuantityPicker.d.ts +25 -0
- package/lib/components/QuantityPicker/QuantityPicker.d.ts.map +1 -0
- package/lib/components/QuantityPicker/QuantityPicker.js +113 -0
- package/lib/components/QuantityPicker/QuantityPicker.namespace.cjs +17 -0
- package/lib/components/QuantityPicker/QuantityPicker.namespace.d.ts +2 -0
- package/lib/components/QuantityPicker/QuantityPicker.namespace.d.ts.map +1 -0
- package/lib/components/QuantityPicker/QuantityPicker.namespace.js +12 -0
- package/lib/components/QuantityPicker/QuantityPicker.test.d.ts +2 -0
- package/lib/components/QuantityPicker/QuantityPicker.test.d.ts.map +1 -0
- package/lib/components/QuantityPicker/index.cjs +14 -0
- package/lib/components/QuantityPicker/index.d.ts +3 -0
- package/lib/components/QuantityPicker/index.d.ts.map +1 -0
- package/lib/components/QuantityPicker/index.js +3 -0
- package/lib/components/ResponsiveDialog/ResponsiveDialog.cjs +196 -0
- package/lib/components/ResponsiveDialog/ResponsiveDialog.d.ts +72 -0
- package/lib/components/ResponsiveDialog/ResponsiveDialog.d.ts.map +1 -0
- package/lib/components/ResponsiveDialog/ResponsiveDialog.js +181 -0
- package/lib/components/ResponsiveDialog/ResponsiveDialog.namespace.cjs +25 -0
- package/lib/components/ResponsiveDialog/ResponsiveDialog.namespace.d.ts +2 -0
- package/lib/components/ResponsiveDialog/ResponsiveDialog.namespace.d.ts.map +1 -0
- package/lib/components/ResponsiveDialog/ResponsiveDialog.namespace.js +20 -0
- package/lib/components/ResponsiveDialog/index.cjs +23 -0
- package/lib/components/ResponsiveDialog/index.d.ts +3 -0
- package/lib/components/ResponsiveDialog/index.d.ts.map +1 -0
- package/lib/components/ResponsiveDialog/index.js +3 -0
- package/lib/components/Select/Select.cjs +191 -0
- package/lib/components/Select/Select.d.ts +89 -0
- package/lib/components/Select/Select.d.ts.map +1 -0
- package/lib/components/Select/Select.js +171 -0
- package/lib/components/Select/Select.namespace.cjs +30 -0
- package/lib/components/Select/Select.namespace.d.ts +2 -0
- package/lib/components/Select/Select.namespace.d.ts.map +1 -0
- package/lib/components/Select/Select.namespace.js +25 -0
- package/lib/components/Select/Select.test.d.ts +2 -0
- package/lib/components/Select/Select.test.d.ts.map +1 -0
- package/lib/components/Select/index.cjs +27 -0
- package/lib/components/Select/index.d.ts +3 -0
- package/lib/components/Select/index.d.ts.map +1 -0
- package/lib/components/Select/index.js +3 -0
- package/lib/components/index.cjs +81 -0
- package/lib/components/index.d.ts +4 -0
- package/lib/components/index.d.ts.map +1 -1
- package/lib/components/index.js +9 -1
- package/lib/index.cjs +82 -1
- package/lib/index.js +10 -2
- package/package.json +8 -6
- package/src/components/ContentDialog/ContentDialog.namespace.ts +26 -0
- package/src/components/ContentDialog/ContentDialog.tsx +222 -0
- package/src/components/ContentDialog/index.ts +33 -0
- package/src/components/Dialog/index.ts +5 -0
- package/src/components/QuantityPicker/QuantityPicker.namespace.ts +12 -0
- package/src/components/QuantityPicker/QuantityPicker.test.tsx +108 -0
- package/src/components/QuantityPicker/QuantityPicker.tsx +214 -0
- package/src/components/QuantityPicker/index.ts +14 -0
- package/src/components/ResponsiveDialog/ResponsiveDialog.namespace.ts +28 -0
- package/src/components/ResponsiveDialog/ResponsiveDialog.tsx +327 -0
- package/src/components/ResponsiveDialog/index.ts +31 -0
- package/src/components/Select/Select.namespace.ts +38 -0
- package/src/components/Select/Select.test.tsx +451 -0
- package/src/components/Select/Select.tsx +443 -0
- package/src/components/Select/index.ts +40 -0
- package/src/components/index.ts +4 -0
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
|
|
3
|
+
const require_createSlotRecipeContext = require("../../utils/createSlotRecipeContext.cjs");
|
|
4
|
+
const require_styled = require("../../utils/styled.cjs");
|
|
5
|
+
const require_createRenderTrackingContext = require("../../utils/createRenderTrackingContext.cjs");
|
|
6
|
+
let _seed_design_react_dialog = require("@seed-design/react-dialog");
|
|
7
|
+
let _seed_design_react_primitive = require("@seed-design/react-primitive");
|
|
8
|
+
let clsx = require("clsx");
|
|
9
|
+
clsx = require_runtime.__toESM(clsx);
|
|
10
|
+
let react = require("react");
|
|
11
|
+
react = require_runtime.__toESM(react);
|
|
12
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
13
|
+
let _seed_design_dom_utils = require("@seed-design/dom-utils");
|
|
14
|
+
let _radix_ui_react_compose_refs = require("@radix-ui/react-compose-refs");
|
|
15
|
+
let _seed_design_css_recipes_content_dialog = require("@seed-design/css/recipes/content-dialog");
|
|
16
|
+
//#region src/components/ContentDialog/ContentDialog.tsx
|
|
17
|
+
var { withContext, useClassNames, ClassNamesProvider } = require_createSlotRecipeContext.createSlotRecipeContext(_seed_design_css_recipes_content_dialog.contentDialog);
|
|
18
|
+
var closeButtonTracker = require_createRenderTrackingContext.createRenderTrackingContext("ContentDialogCloseButton");
|
|
19
|
+
function ContentDialogRoot(props) {
|
|
20
|
+
const [variantProps, otherProps] = _seed_design_css_recipes_content_dialog.contentDialog.splitVariantProps({
|
|
21
|
+
lazyMount: true,
|
|
22
|
+
unmountOnExit: true,
|
|
23
|
+
...props
|
|
24
|
+
});
|
|
25
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ClassNamesProvider, {
|
|
26
|
+
value: (0, _seed_design_css_recipes_content_dialog.contentDialog)(variantProps),
|
|
27
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(closeButtonTracker.Provider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_seed_design_react_dialog.Dialog.Root, { ...otherProps }) })
|
|
28
|
+
});
|
|
29
|
+
}
|
|
30
|
+
var ContentDialogTrigger = _seed_design_react_dialog.Dialog.Trigger;
|
|
31
|
+
var ContentDialogPositioner = withContext(_seed_design_react_dialog.Dialog.Positioner, "positioner");
|
|
32
|
+
var ContentDialogBackdrop = withContext(_seed_design_react_dialog.Dialog.Backdrop, "backdrop");
|
|
33
|
+
var ContentDialogContent = withContext(require_styled.withStyleProps(_seed_design_react_dialog.Dialog.Content), "content");
|
|
34
|
+
var ContentDialogHeader = react.forwardRef(({ className, ...props }, ref) => {
|
|
35
|
+
const classNames = useClassNames();
|
|
36
|
+
const { isRendered } = closeButtonTracker.useRenderTracking();
|
|
37
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_seed_design_react_primitive.Primitive.div, {
|
|
38
|
+
ref,
|
|
39
|
+
"data-show-close-button": (0, _seed_design_dom_utils.dataAttr)(isRendered),
|
|
40
|
+
className: (0, clsx.default)(classNames.header, className),
|
|
41
|
+
...props
|
|
42
|
+
});
|
|
43
|
+
});
|
|
44
|
+
ContentDialogHeader.displayName = "ContentDialogHeader";
|
|
45
|
+
var ContentDialogTitle = withContext(_seed_design_react_dialog.Dialog.Title, "title");
|
|
46
|
+
var ContentDialogDescription = withContext(_seed_design_react_dialog.Dialog.Description, "description");
|
|
47
|
+
var ContentDialogBody = react.forwardRef((props, forwardedRef) => {
|
|
48
|
+
const classNames = useClassNames();
|
|
49
|
+
const { style, restProps } = require_styled.useStyleProps(props);
|
|
50
|
+
const { className, ...otherProps } = restProps;
|
|
51
|
+
const ref = react.useRef(null);
|
|
52
|
+
const [scrolled, setScrolled] = react.useState(false);
|
|
53
|
+
const [overflowing, setOverflowing] = react.useState(false);
|
|
54
|
+
react.useEffect(() => {
|
|
55
|
+
const element = ref.current;
|
|
56
|
+
if (!element) return;
|
|
57
|
+
const check = () => {
|
|
58
|
+
setScrolled(element.scrollTop > 0);
|
|
59
|
+
const paddingBottom = Number.parseFloat(getComputedStyle(element).paddingBottom) || 0;
|
|
60
|
+
setOverflowing(element.scrollHeight - paddingBottom > element.clientHeight);
|
|
61
|
+
};
|
|
62
|
+
check();
|
|
63
|
+
element.addEventListener("scroll", check);
|
|
64
|
+
const observer = new ResizeObserver(check);
|
|
65
|
+
observer.observe(element);
|
|
66
|
+
return () => {
|
|
67
|
+
element.removeEventListener("scroll", check);
|
|
68
|
+
observer.disconnect();
|
|
69
|
+
};
|
|
70
|
+
}, []);
|
|
71
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_seed_design_react_primitive.Primitive.div, {
|
|
72
|
+
ref: (0, _radix_ui_react_compose_refs.composeRefs)(ref, forwardedRef),
|
|
73
|
+
"data-scrolled": (0, _seed_design_dom_utils.dataAttr)(scrolled),
|
|
74
|
+
"data-overflow": (0, _seed_design_dom_utils.dataAttr)(overflowing),
|
|
75
|
+
className: (0, clsx.default)(classNames.body, className),
|
|
76
|
+
style,
|
|
77
|
+
...otherProps
|
|
78
|
+
});
|
|
79
|
+
});
|
|
80
|
+
ContentDialogBody.displayName = "ContentDialogBody";
|
|
81
|
+
var ContentDialogFooter = withContext(_seed_design_react_primitive.Primitive.div, "footer");
|
|
82
|
+
var ContentDialogAction = _seed_design_react_dialog.Dialog.CloseButton;
|
|
83
|
+
var ContentDialogCloseButton = react.forwardRef(({ className, ...props }, ref) => {
|
|
84
|
+
const classNames = useClassNames();
|
|
85
|
+
const { trackRef } = closeButtonTracker.useRenderTracking();
|
|
86
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_seed_design_react_dialog.Dialog.CloseButton, {
|
|
87
|
+
ref: (0, _radix_ui_react_compose_refs.composeRefs)(ref, trackRef),
|
|
88
|
+
className: (0, clsx.default)(classNames.closeButton, className),
|
|
89
|
+
...props
|
|
90
|
+
});
|
|
91
|
+
});
|
|
92
|
+
ContentDialogCloseButton.displayName = "ContentDialogCloseButton";
|
|
93
|
+
//#endregion
|
|
94
|
+
exports.ContentDialogAction = ContentDialogAction;
|
|
95
|
+
exports.ContentDialogBackdrop = ContentDialogBackdrop;
|
|
96
|
+
exports.ContentDialogBody = ContentDialogBody;
|
|
97
|
+
exports.ContentDialogCloseButton = ContentDialogCloseButton;
|
|
98
|
+
exports.ContentDialogContent = ContentDialogContent;
|
|
99
|
+
exports.ContentDialogDescription = ContentDialogDescription;
|
|
100
|
+
exports.ContentDialogFooter = ContentDialogFooter;
|
|
101
|
+
exports.ContentDialogHeader = ContentDialogHeader;
|
|
102
|
+
exports.ContentDialogPositioner = ContentDialogPositioner;
|
|
103
|
+
exports.ContentDialogRoot = ContentDialogRoot;
|
|
104
|
+
exports.ContentDialogTitle = ContentDialogTitle;
|
|
105
|
+
exports.ContentDialogTrigger = ContentDialogTrigger;
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { ContentDialogVariantProps } from '@seed-design/css/recipes/content-dialog';
|
|
2
|
+
import { Dialog as DialogPrimitive } from '@seed-design/react-dialog';
|
|
3
|
+
import { PrimitiveProps } from '@seed-design/react-primitive';
|
|
4
|
+
import { StyleProps } from '../../utils/styled';
|
|
5
|
+
import * as React from "react";
|
|
6
|
+
export interface ContentDialogRootProps extends ContentDialogVariantProps, Omit<DialogPrimitive.RootProps, "role"> {
|
|
7
|
+
/**
|
|
8
|
+
* @default true
|
|
9
|
+
*/
|
|
10
|
+
lazyMount?: DialogPrimitive.RootProps["lazyMount"];
|
|
11
|
+
/**
|
|
12
|
+
* @default true
|
|
13
|
+
*/
|
|
14
|
+
unmountOnExit?: DialogPrimitive.RootProps["unmountOnExit"];
|
|
15
|
+
}
|
|
16
|
+
export declare function ContentDialogRoot(props: ContentDialogRootProps): import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
export interface ContentDialogTriggerProps extends DialogPrimitive.TriggerProps {
|
|
18
|
+
}
|
|
19
|
+
export declare const ContentDialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.TriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
20
|
+
export interface ContentDialogPositionerProps extends DialogPrimitive.PositionerProps {
|
|
21
|
+
}
|
|
22
|
+
export declare const ContentDialogPositioner: React.ForwardRefExoticComponent<ContentDialogPositionerProps & React.RefAttributes<HTMLDivElement>>;
|
|
23
|
+
export interface ContentDialogBackdropProps extends DialogPrimitive.BackdropProps {
|
|
24
|
+
}
|
|
25
|
+
export declare const ContentDialogBackdrop: React.ForwardRefExoticComponent<ContentDialogBackdropProps & React.RefAttributes<HTMLDivElement>>;
|
|
26
|
+
export interface ContentDialogContentProps extends DialogPrimitive.ContentProps, Pick<StyleProps, "width" | "maxWidth"> {
|
|
27
|
+
}
|
|
28
|
+
export declare const ContentDialogContent: React.ForwardRefExoticComponent<ContentDialogContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
29
|
+
export interface ContentDialogHeaderProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
|
|
30
|
+
}
|
|
31
|
+
export declare const ContentDialogHeader: React.ForwardRefExoticComponent<ContentDialogHeaderProps & React.RefAttributes<HTMLDivElement>>;
|
|
32
|
+
export interface ContentDialogTitleProps extends DialogPrimitive.TitleProps {
|
|
33
|
+
}
|
|
34
|
+
export declare const ContentDialogTitle: React.ForwardRefExoticComponent<ContentDialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
|
|
35
|
+
export interface ContentDialogDescriptionProps extends DialogPrimitive.DescriptionProps {
|
|
36
|
+
}
|
|
37
|
+
export declare const ContentDialogDescription: React.ForwardRefExoticComponent<ContentDialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
|
|
38
|
+
export interface ContentDialogBodyProps extends PrimitiveProps, Pick<StyleProps, "paddingX" | "minHeight" | "maxHeight" | "justifyContent" | "alignItems">, React.HTMLAttributes<HTMLDivElement> {
|
|
39
|
+
}
|
|
40
|
+
export declare const ContentDialogBody: React.ForwardRefExoticComponent<ContentDialogBodyProps & React.RefAttributes<HTMLDivElement>>;
|
|
41
|
+
export interface ContentDialogFooterProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
|
|
42
|
+
}
|
|
43
|
+
export declare const ContentDialogFooter: React.ForwardRefExoticComponent<ContentDialogFooterProps & React.RefAttributes<HTMLDivElement>>;
|
|
44
|
+
export interface ContentDialogActionProps extends DialogPrimitive.CloseButtonProps {
|
|
45
|
+
}
|
|
46
|
+
export declare const ContentDialogAction: React.ForwardRefExoticComponent<DialogPrimitive.CloseButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
47
|
+
export interface ContentDialogCloseButtonProps extends DialogPrimitive.CloseButtonProps {
|
|
48
|
+
}
|
|
49
|
+
export declare const ContentDialogCloseButton: React.ForwardRefExoticComponent<ContentDialogCloseButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
50
|
+
//# sourceMappingURL=ContentDialog.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ContentDialog.d.ts","sourceRoot":"","sources":["../../../src/components/ContentDialog/ContentDialog.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,yBAAyB,EAC/B,MAAM,yCAAyC,CAAC;AAEjD,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,2BAA2B,CAAC;AACtE,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAiC,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAQpF,MAAM,WAAW,sBACf,SAAQ,yBAAyB,EAC/B,IAAI,CAAC,eAAe,CAAC,SAAS,EAAE,MAAM,CAAC;IACzC;;OAEG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACnD;;OAEG;IACH,aAAa,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC;CAC5D;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,2CAe9D;AAID,MAAM,WAAW,yBAA0B,SAAQ,eAAe,CAAC,YAAY;CAAG;AAElF,eAAO,MAAM,oBAAoB,wGAA0B,CAAC;AAI5D,MAAM,WAAW,4BAA6B,SAAQ,eAAe,CAAC,eAAe;CAAG;AAExF,eAAO,MAAM,uBAAuB,qGAGnC,CAAC;AAIF,MAAM,WAAW,0BAA2B,SAAQ,eAAe,CAAC,aAAa;CAAG;AAEpF,eAAO,MAAM,qBAAqB,mGAGjC,CAAC;AAIF,MAAM,WAAW,yBACf,SAAQ,eAAe,CAAC,YAAY,EAClC,IAAI,CAAC,UAAU,EAAE,OAAO,GAAG,UAAU,CAAC;CAAG;AAE7C,eAAO,MAAM,oBAAoB,kGAGhC,CAAC;AAIF,MAAM,WAAW,wBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,mBAAmB,iGAc/B,CAAC;AAMF,MAAM,WAAW,uBAAwB,SAAQ,eAAe,CAAC,UAAU;CAAG;AAE9E,eAAO,MAAM,kBAAkB,oGAG9B,CAAC;AAIF,MAAM,WAAW,6BAA8B,SAAQ,eAAe,CAAC,gBAAgB;CAAG;AAE1F,eAAO,MAAM,wBAAwB,4GAGQ,CAAC;AAI9C,MAAM,WAAW,sBACf,SAAQ,cAAc,EACpB,IAAI,CAAC,UAAU,EAAE,UAAU,GAAG,WAAW,GAAG,WAAW,GAAG,gBAAgB,GAAG,YAAY,CAAC,EAC1F,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,iBAAiB,+FA8C7B,CAAC;AAMF,MAAM,WAAW,wBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,mBAAmB,iGAG/B,CAAC;AAIF,MAAM,WAAW,wBAAyB,SAAQ,eAAe,CAAC,gBAAgB;CAAG;AAErF,eAAO,MAAM,mBAAmB,4GAA8B,CAAC;AAI/D,MAAM,WAAW,6BAA8B,SAAQ,eAAe,CAAC,gBAAgB;CAAG;AAE1F,eAAO,MAAM,wBAAwB,yGAcnC,CAAC"}
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext.js";
|
|
3
|
+
import { useStyleProps, withStyleProps } from "../../utils/styled.js";
|
|
4
|
+
import { createRenderTrackingContext } from "../../utils/createRenderTrackingContext.js";
|
|
5
|
+
import { Dialog } from "@seed-design/react-dialog";
|
|
6
|
+
import { Primitive } from "@seed-design/react-primitive";
|
|
7
|
+
import clsx$1 from "clsx";
|
|
8
|
+
import * as React$1 from "react";
|
|
9
|
+
import { jsx } from "react/jsx-runtime";
|
|
10
|
+
import { dataAttr } from "@seed-design/dom-utils";
|
|
11
|
+
import { composeRefs } from "@radix-ui/react-compose-refs";
|
|
12
|
+
import { contentDialog } from "@seed-design/css/recipes/content-dialog";
|
|
13
|
+
//#region src/components/ContentDialog/ContentDialog.tsx
|
|
14
|
+
var { withContext, useClassNames, ClassNamesProvider } = createSlotRecipeContext(contentDialog);
|
|
15
|
+
var closeButtonTracker = createRenderTrackingContext("ContentDialogCloseButton");
|
|
16
|
+
function ContentDialogRoot(props) {
|
|
17
|
+
const [variantProps, otherProps] = contentDialog.splitVariantProps({
|
|
18
|
+
lazyMount: true,
|
|
19
|
+
unmountOnExit: true,
|
|
20
|
+
...props
|
|
21
|
+
});
|
|
22
|
+
return /* @__PURE__ */ jsx(ClassNamesProvider, {
|
|
23
|
+
value: contentDialog(variantProps),
|
|
24
|
+
children: /* @__PURE__ */ jsx(closeButtonTracker.Provider, { children: /* @__PURE__ */ jsx(Dialog.Root, { ...otherProps }) })
|
|
25
|
+
});
|
|
26
|
+
}
|
|
27
|
+
var ContentDialogTrigger = Dialog.Trigger;
|
|
28
|
+
var ContentDialogPositioner = withContext(Dialog.Positioner, "positioner");
|
|
29
|
+
var ContentDialogBackdrop = withContext(Dialog.Backdrop, "backdrop");
|
|
30
|
+
var ContentDialogContent = withContext(withStyleProps(Dialog.Content), "content");
|
|
31
|
+
var ContentDialogHeader = React$1.forwardRef(({ className, ...props }, ref) => {
|
|
32
|
+
const classNames = useClassNames();
|
|
33
|
+
const { isRendered } = closeButtonTracker.useRenderTracking();
|
|
34
|
+
return /* @__PURE__ */ jsx(Primitive.div, {
|
|
35
|
+
ref,
|
|
36
|
+
"data-show-close-button": dataAttr(isRendered),
|
|
37
|
+
className: clsx$1(classNames.header, className),
|
|
38
|
+
...props
|
|
39
|
+
});
|
|
40
|
+
});
|
|
41
|
+
ContentDialogHeader.displayName = "ContentDialogHeader";
|
|
42
|
+
var ContentDialogTitle = withContext(Dialog.Title, "title");
|
|
43
|
+
var ContentDialogDescription = withContext(Dialog.Description, "description");
|
|
44
|
+
var ContentDialogBody = React$1.forwardRef((props, forwardedRef) => {
|
|
45
|
+
const classNames = useClassNames();
|
|
46
|
+
const { style, restProps } = useStyleProps(props);
|
|
47
|
+
const { className, ...otherProps } = restProps;
|
|
48
|
+
const ref = React$1.useRef(null);
|
|
49
|
+
const [scrolled, setScrolled] = React$1.useState(false);
|
|
50
|
+
const [overflowing, setOverflowing] = React$1.useState(false);
|
|
51
|
+
React$1.useEffect(() => {
|
|
52
|
+
const element = ref.current;
|
|
53
|
+
if (!element) return;
|
|
54
|
+
const check = () => {
|
|
55
|
+
setScrolled(element.scrollTop > 0);
|
|
56
|
+
const paddingBottom = Number.parseFloat(getComputedStyle(element).paddingBottom) || 0;
|
|
57
|
+
setOverflowing(element.scrollHeight - paddingBottom > element.clientHeight);
|
|
58
|
+
};
|
|
59
|
+
check();
|
|
60
|
+
element.addEventListener("scroll", check);
|
|
61
|
+
const observer = new ResizeObserver(check);
|
|
62
|
+
observer.observe(element);
|
|
63
|
+
return () => {
|
|
64
|
+
element.removeEventListener("scroll", check);
|
|
65
|
+
observer.disconnect();
|
|
66
|
+
};
|
|
67
|
+
}, []);
|
|
68
|
+
return /* @__PURE__ */ jsx(Primitive.div, {
|
|
69
|
+
ref: composeRefs(ref, forwardedRef),
|
|
70
|
+
"data-scrolled": dataAttr(scrolled),
|
|
71
|
+
"data-overflow": dataAttr(overflowing),
|
|
72
|
+
className: clsx$1(classNames.body, className),
|
|
73
|
+
style,
|
|
74
|
+
...otherProps
|
|
75
|
+
});
|
|
76
|
+
});
|
|
77
|
+
ContentDialogBody.displayName = "ContentDialogBody";
|
|
78
|
+
var ContentDialogFooter = withContext(Primitive.div, "footer");
|
|
79
|
+
var ContentDialogAction = Dialog.CloseButton;
|
|
80
|
+
var ContentDialogCloseButton = React$1.forwardRef(({ className, ...props }, ref) => {
|
|
81
|
+
const classNames = useClassNames();
|
|
82
|
+
const { trackRef } = closeButtonTracker.useRenderTracking();
|
|
83
|
+
return /* @__PURE__ */ jsx(Dialog.CloseButton, {
|
|
84
|
+
ref: composeRefs(ref, trackRef),
|
|
85
|
+
className: clsx$1(classNames.closeButton, className),
|
|
86
|
+
...props
|
|
87
|
+
});
|
|
88
|
+
});
|
|
89
|
+
ContentDialogCloseButton.displayName = "ContentDialogCloseButton";
|
|
90
|
+
//#endregion
|
|
91
|
+
export { ContentDialogAction, ContentDialogBackdrop, ContentDialogBody, ContentDialogCloseButton, ContentDialogContent, ContentDialogDescription, ContentDialogFooter, ContentDialogHeader, ContentDialogPositioner, ContentDialogRoot, ContentDialogTitle, ContentDialogTrigger };
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
|
|
2
|
+
const require_ContentDialog = require("./ContentDialog.cjs");
|
|
3
|
+
//#region src/components/ContentDialog/ContentDialog.namespace.ts
|
|
4
|
+
var ContentDialog_namespace_exports = /* @__PURE__ */ require_runtime.__exportAll({
|
|
5
|
+
Action: () => require_ContentDialog.ContentDialogAction,
|
|
6
|
+
Backdrop: () => require_ContentDialog.ContentDialogBackdrop,
|
|
7
|
+
Body: () => require_ContentDialog.ContentDialogBody,
|
|
8
|
+
CloseButton: () => require_ContentDialog.ContentDialogCloseButton,
|
|
9
|
+
Content: () => require_ContentDialog.ContentDialogContent,
|
|
10
|
+
Description: () => require_ContentDialog.ContentDialogDescription,
|
|
11
|
+
Footer: () => require_ContentDialog.ContentDialogFooter,
|
|
12
|
+
Header: () => require_ContentDialog.ContentDialogHeader,
|
|
13
|
+
Positioner: () => require_ContentDialog.ContentDialogPositioner,
|
|
14
|
+
Root: () => require_ContentDialog.ContentDialogRoot,
|
|
15
|
+
Title: () => require_ContentDialog.ContentDialogTitle,
|
|
16
|
+
Trigger: () => require_ContentDialog.ContentDialogTrigger
|
|
17
|
+
});
|
|
18
|
+
//#endregion
|
|
19
|
+
Object.defineProperty(exports, "ContentDialog_namespace_exports", {
|
|
20
|
+
enumerable: true,
|
|
21
|
+
get: function() {
|
|
22
|
+
return ContentDialog_namespace_exports;
|
|
23
|
+
}
|
|
24
|
+
});
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
export { ContentDialogBackdrop as Backdrop, ContentDialogPositioner as Positioner, ContentDialogContent as Content, ContentDialogBody as Body, ContentDialogDescription as Description, ContentDialogFooter as Footer, ContentDialogHeader as Header, ContentDialogRoot as Root, ContentDialogTitle as Title, ContentDialogTrigger as Trigger, ContentDialogAction as Action, ContentDialogCloseButton as CloseButton, type ContentDialogBackdropProps as BackdropProps, type ContentDialogPositionerProps as PositionerProps, type ContentDialogContentProps as ContentProps, type ContentDialogBodyProps as BodyProps, type ContentDialogDescriptionProps as DescriptionProps, type ContentDialogFooterProps as FooterProps, type ContentDialogHeaderProps as HeaderProps, type ContentDialogRootProps as RootProps, type ContentDialogTitleProps as TitleProps, type ContentDialogTriggerProps as TriggerProps, type ContentDialogActionProps as ActionProps, type ContentDialogCloseButtonProps as CloseButtonProps, } from './ContentDialog';
|
|
2
|
+
//# sourceMappingURL=ContentDialog.namespace.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ContentDialog.namespace.d.ts","sourceRoot":"","sources":["../../../src/components/ContentDialog/ContentDialog.namespace.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,qBAAqB,IAAI,QAAQ,EACjC,uBAAuB,IAAI,UAAU,EACrC,oBAAoB,IAAI,OAAO,EAC/B,iBAAiB,IAAI,IAAI,EACzB,wBAAwB,IAAI,WAAW,EACvC,mBAAmB,IAAI,MAAM,EAC7B,mBAAmB,IAAI,MAAM,EAC7B,iBAAiB,IAAI,IAAI,EACzB,kBAAkB,IAAI,KAAK,EAC3B,oBAAoB,IAAI,OAAO,EAC/B,mBAAmB,IAAI,MAAM,EAC7B,wBAAwB,IAAI,WAAW,EACvC,KAAK,0BAA0B,IAAI,aAAa,EAChD,KAAK,4BAA4B,IAAI,eAAe,EACpD,KAAK,yBAAyB,IAAI,YAAY,EAC9C,KAAK,sBAAsB,IAAI,SAAS,EACxC,KAAK,6BAA6B,IAAI,gBAAgB,EACtD,KAAK,wBAAwB,IAAI,WAAW,EAC5C,KAAK,wBAAwB,IAAI,WAAW,EAC5C,KAAK,sBAAsB,IAAI,SAAS,EACxC,KAAK,uBAAuB,IAAI,UAAU,EAC1C,KAAK,yBAAyB,IAAI,YAAY,EAC9C,KAAK,wBAAwB,IAAI,WAAW,EAC5C,KAAK,6BAA6B,IAAI,gBAAgB,GACvD,MAAM,iBAAiB,CAAC"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
|
|
2
|
+
import { ContentDialogAction, ContentDialogBackdrop, ContentDialogBody, ContentDialogCloseButton, ContentDialogContent, ContentDialogDescription, ContentDialogFooter, ContentDialogHeader, ContentDialogPositioner, ContentDialogRoot, ContentDialogTitle, ContentDialogTrigger } from "./ContentDialog.js";
|
|
3
|
+
//#region src/components/ContentDialog/ContentDialog.namespace.ts
|
|
4
|
+
var ContentDialog_namespace_exports = /* @__PURE__ */ __exportAll({
|
|
5
|
+
Action: () => ContentDialogAction,
|
|
6
|
+
Backdrop: () => ContentDialogBackdrop,
|
|
7
|
+
Body: () => ContentDialogBody,
|
|
8
|
+
CloseButton: () => ContentDialogCloseButton,
|
|
9
|
+
Content: () => ContentDialogContent,
|
|
10
|
+
Description: () => ContentDialogDescription,
|
|
11
|
+
Footer: () => ContentDialogFooter,
|
|
12
|
+
Header: () => ContentDialogHeader,
|
|
13
|
+
Positioner: () => ContentDialogPositioner,
|
|
14
|
+
Root: () => ContentDialogRoot,
|
|
15
|
+
Title: () => ContentDialogTitle,
|
|
16
|
+
Trigger: () => ContentDialogTrigger
|
|
17
|
+
});
|
|
18
|
+
//#endregion
|
|
19
|
+
export { ContentDialog_namespace_exports };
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
2
|
+
const require_ContentDialog = require("./ContentDialog.cjs");
|
|
3
|
+
const require_ContentDialog_namespace = require("./ContentDialog.namespace.cjs");
|
|
4
|
+
Object.defineProperty(exports, "ContentDialog", {
|
|
5
|
+
enumerable: true,
|
|
6
|
+
get: function() {
|
|
7
|
+
return require_ContentDialog_namespace.ContentDialog_namespace_exports;
|
|
8
|
+
}
|
|
9
|
+
});
|
|
10
|
+
exports.ContentDialogAction = require_ContentDialog.ContentDialogAction;
|
|
11
|
+
exports.ContentDialogBackdrop = require_ContentDialog.ContentDialogBackdrop;
|
|
12
|
+
exports.ContentDialogBody = require_ContentDialog.ContentDialogBody;
|
|
13
|
+
exports.ContentDialogCloseButton = require_ContentDialog.ContentDialogCloseButton;
|
|
14
|
+
exports.ContentDialogContent = require_ContentDialog.ContentDialogContent;
|
|
15
|
+
exports.ContentDialogDescription = require_ContentDialog.ContentDialogDescription;
|
|
16
|
+
exports.ContentDialogFooter = require_ContentDialog.ContentDialogFooter;
|
|
17
|
+
exports.ContentDialogHeader = require_ContentDialog.ContentDialogHeader;
|
|
18
|
+
exports.ContentDialogPositioner = require_ContentDialog.ContentDialogPositioner;
|
|
19
|
+
exports.ContentDialogRoot = require_ContentDialog.ContentDialogRoot;
|
|
20
|
+
exports.ContentDialogTitle = require_ContentDialog.ContentDialogTitle;
|
|
21
|
+
exports.ContentDialogTrigger = require_ContentDialog.ContentDialogTrigger;
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export { ContentDialogBackdrop, ContentDialogPositioner, ContentDialogContent, ContentDialogBody, ContentDialogDescription, ContentDialogFooter, ContentDialogHeader, ContentDialogRoot, ContentDialogTitle, ContentDialogTrigger, ContentDialogAction, ContentDialogCloseButton, type ContentDialogBackdropProps, type ContentDialogPositionerProps, type ContentDialogContentProps, type ContentDialogBodyProps, type ContentDialogDescriptionProps, type ContentDialogFooterProps, type ContentDialogHeaderProps, type ContentDialogRootProps, type ContentDialogTitleProps, type ContentDialogTriggerProps, type ContentDialogActionProps, type ContentDialogCloseButtonProps, } from './ContentDialog';
|
|
2
|
+
export * as ContentDialog from './ContentDialog.namespace';
|
|
3
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ContentDialog/index.ts"],"names":[],"mappings":"AAKA,OAAO,EACL,qBAAqB,EACrB,uBAAuB,EACvB,oBAAoB,EACpB,iBAAiB,EACjB,wBAAwB,EACxB,mBAAmB,EACnB,mBAAmB,EACnB,iBAAiB,EACjB,kBAAkB,EAClB,oBAAoB,EACpB,mBAAmB,EACnB,wBAAwB,EACxB,KAAK,0BAA0B,EAC/B,KAAK,4BAA4B,EACjC,KAAK,yBAAyB,EAC9B,KAAK,sBAAsB,EAC3B,KAAK,6BAA6B,EAClC,KAAK,wBAAwB,EAC7B,KAAK,wBAAwB,EAC7B,KAAK,sBAAsB,EAC3B,KAAK,uBAAuB,EAC5B,KAAK,yBAAyB,EAC9B,KAAK,wBAAwB,EAC7B,KAAK,6BAA6B,GACnC,MAAM,iBAAiB,CAAC;AAEzB,OAAO,KAAK,aAAa,MAAM,2BAA2B,CAAC"}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { ContentDialogAction, ContentDialogBackdrop, ContentDialogBody, ContentDialogCloseButton, ContentDialogContent, ContentDialogDescription, ContentDialogFooter, ContentDialogHeader, ContentDialogPositioner, ContentDialogRoot, ContentDialogTitle, ContentDialogTrigger } from "./ContentDialog.js";
|
|
2
|
+
import { ContentDialog_namespace_exports } from "./ContentDialog.namespace.js";
|
|
3
|
+
export { ContentDialog_namespace_exports as ContentDialog, ContentDialogAction, ContentDialogBackdrop, ContentDialogBody, ContentDialogCloseButton, ContentDialogContent, ContentDialogDescription, ContentDialogFooter, ContentDialogHeader, ContentDialogPositioner, ContentDialogRoot, ContentDialogTitle, ContentDialogTrigger };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/index.ts"],"names":[],"mappings":"AAKA,OAAO,EACL,cAAc,EACd,gBAAgB,EAChB,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,WAAW,EACX,aAAa,EACb,YAAY,EACZ,KAAK,mBAAmB,EACxB,KAAK,qBAAqB,EAC1B,KAAK,kBAAkB,EACvB,KAAK,sBAAsB,EAC3B,KAAK,iBAAiB,EACtB,KAAK,iBAAiB,EACtB,KAAK,eAAe,EACpB,KAAK,gBAAgB,EACrB,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,GACvB,MAAM,UAAU,CAAC;AAElB,OAAO,KAAK,MAAM,MAAM,oBAAoB,CAAC"}
|
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
"use client";
|
|
3
|
+
const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
|
|
4
|
+
const require_createSlotRecipeContext = require("../../utils/createSlotRecipeContext.cjs");
|
|
5
|
+
const require_createWithStateProps = require("../../utils/createWithStateProps.cjs");
|
|
6
|
+
let _seed_design_react_primitive = require("@seed-design/react-primitive");
|
|
7
|
+
let clsx = require("clsx");
|
|
8
|
+
clsx = require_runtime.__toESM(clsx);
|
|
9
|
+
let react = require("react");
|
|
10
|
+
react = require_runtime.__toESM(react);
|
|
11
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
12
|
+
let _seed_design_dom_utils = require("@seed-design/dom-utils");
|
|
13
|
+
let _seed_design_react_quantity_picker = require("@seed-design/react-quantity-picker");
|
|
14
|
+
let _seed_design_css_recipes_quantity_picker = require("@seed-design/css/recipes/quantity-picker");
|
|
15
|
+
//#region src/components/QuantityPicker/QuantityPicker.tsx
|
|
16
|
+
var { ClassNamesProvider, useClassNames } = require_createSlotRecipeContext.createSlotRecipeContext(_seed_design_css_recipes_quantity_picker.quantityPicker);
|
|
17
|
+
var withStateProps = require_createWithStateProps.createWithStateProps([_seed_design_react_quantity_picker.useQuantityPickerContext]);
|
|
18
|
+
function isQuantityPickerButton(child) {
|
|
19
|
+
return react.isValidElement(child) && (child.type === QuantityPickerDecrementButton || child.type === QuantityPickerIncrementButton);
|
|
20
|
+
}
|
|
21
|
+
function isQuantityPickerValueDisplay(child) {
|
|
22
|
+
return react.isValidElement(child) && child.type === QuantityPickerValueDisplay;
|
|
23
|
+
}
|
|
24
|
+
function withDividers(children, dividerClassName) {
|
|
25
|
+
const childArray = react.Children.toArray(children);
|
|
26
|
+
return childArray.flatMap((child, index) => {
|
|
27
|
+
const nextChild = childArray[index + 1];
|
|
28
|
+
if (!(isQuantityPickerButton(child) && isQuantityPickerValueDisplay(nextChild) || isQuantityPickerValueDisplay(child) && isQuantityPickerButton(nextChild))) return child;
|
|
29
|
+
return [child, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_seed_design_react_primitive.Primitive.div, {
|
|
30
|
+
"aria-hidden": "true",
|
|
31
|
+
className: dividerClassName
|
|
32
|
+
}, `divider-${index.toString()}`)];
|
|
33
|
+
});
|
|
34
|
+
}
|
|
35
|
+
function getValueDisplayPlaceholder(max) {
|
|
36
|
+
return String(max).replace(/\d/g, "0");
|
|
37
|
+
}
|
|
38
|
+
function renderIcon(icon, className, stateProps, ariaHidden) {
|
|
39
|
+
if (!react.isValidElement(icon)) return icon;
|
|
40
|
+
return react.cloneElement(icon, {
|
|
41
|
+
...ariaHidden ? { "aria-hidden": true } : {},
|
|
42
|
+
className: (0, clsx.default)(icon.props.className, className),
|
|
43
|
+
"data-disabled": stateProps["data-disabled"]
|
|
44
|
+
});
|
|
45
|
+
}
|
|
46
|
+
var QuantityPickerRoot = react.forwardRef((props, ref) => {
|
|
47
|
+
const [variantProps, otherProps] = _seed_design_css_recipes_quantity_picker.quantityPicker.splitVariantProps(props);
|
|
48
|
+
const { children, className, removable: _removable, removeAriaLabel: _removeAriaLabel, ...rootProps } = otherProps;
|
|
49
|
+
const classNames = (0, _seed_design_css_recipes_quantity_picker.quantityPicker)(variantProps);
|
|
50
|
+
const quantityPickerRootProps = props.removable ? {
|
|
51
|
+
...rootProps,
|
|
52
|
+
removable: true,
|
|
53
|
+
removeAriaLabel: props.removeAriaLabel
|
|
54
|
+
} : {
|
|
55
|
+
...rootProps,
|
|
56
|
+
removable: false
|
|
57
|
+
};
|
|
58
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ClassNamesProvider, {
|
|
59
|
+
value: classNames,
|
|
60
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_seed_design_react_quantity_picker.QuantityPicker.Root, {
|
|
61
|
+
ref,
|
|
62
|
+
className: (0, clsx.default)(classNames.root, className),
|
|
63
|
+
...quantityPickerRootProps,
|
|
64
|
+
children: withDividers(children, classNames.divider)
|
|
65
|
+
})
|
|
66
|
+
});
|
|
67
|
+
});
|
|
68
|
+
QuantityPickerRoot.displayName = "QuantityPickerRoot";
|
|
69
|
+
var QuantityPickerDecrementButton = react.forwardRef(({ children, className, icon, loadingIndicator, removeIcon, ...props }, ref) => {
|
|
70
|
+
const classNames = useClassNames();
|
|
71
|
+
const { decrementIconProps, decrementLoading, isRemoveButton } = (0, _seed_design_react_quantity_picker.useQuantityPickerContext)();
|
|
72
|
+
const content = decrementLoading ? loadingIndicator : isRemoveButton ? removeIcon ?? icon : icon;
|
|
73
|
+
const contentIsIcon = content !== null && content !== void 0;
|
|
74
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_seed_design_react_quantity_picker.QuantityPicker.DecrementButton, {
|
|
75
|
+
ref,
|
|
76
|
+
className: (0, clsx.default)(classNames.decrementButton, className),
|
|
77
|
+
...props,
|
|
78
|
+
children: renderIcon(content ?? children, classNames.decrementIcon, decrementIconProps, contentIsIcon)
|
|
79
|
+
});
|
|
80
|
+
});
|
|
81
|
+
QuantityPickerDecrementButton.displayName = "QuantityPickerDecrementButton";
|
|
82
|
+
var QuantityPickerValueDisplay = withStateProps(react.forwardRef(({ className, ...props }, ref) => {
|
|
83
|
+
const classNames = useClassNames();
|
|
84
|
+
const { getValueText, max, valueDisplayProps } = (0, _seed_design_react_quantity_picker.useQuantityPickerContext)();
|
|
85
|
+
const placeholder = getValueDisplayPlaceholder(max);
|
|
86
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_seed_design_react_primitive.Primitive.span, {
|
|
87
|
+
ref,
|
|
88
|
+
...(0, _seed_design_dom_utils.mergeProps)(valueDisplayProps, props),
|
|
89
|
+
className: (0, clsx.default)(classNames.valueDisplay, className),
|
|
90
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_seed_design_react_primitive.Primitive.span, {
|
|
91
|
+
"aria-hidden": "true",
|
|
92
|
+
className: classNames.valueDisplayPlaceholder,
|
|
93
|
+
children: getValueText(placeholder, placeholder)
|
|
94
|
+
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_seed_design_react_primitive.Primitive.span, {
|
|
95
|
+
className: classNames.valueDisplayText,
|
|
96
|
+
children: valueDisplayProps.children
|
|
97
|
+
})]
|
|
98
|
+
});
|
|
99
|
+
}));
|
|
100
|
+
QuantityPickerValueDisplay.displayName = "QuantityPickerValueDisplay";
|
|
101
|
+
var QuantityPickerIncrementButton = react.forwardRef(({ children, className, icon, loadingIndicator, ...props }, ref) => {
|
|
102
|
+
const classNames = useClassNames();
|
|
103
|
+
const { incrementIconProps, incrementLoading } = (0, _seed_design_react_quantity_picker.useQuantityPickerContext)();
|
|
104
|
+
const content = incrementLoading ? loadingIndicator : icon;
|
|
105
|
+
const contentIsIcon = content !== null && content !== void 0;
|
|
106
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_seed_design_react_quantity_picker.QuantityPicker.IncrementButton, {
|
|
107
|
+
ref,
|
|
108
|
+
className: (0, clsx.default)(classNames.incrementButton, className),
|
|
109
|
+
...props,
|
|
110
|
+
children: renderIcon(content ?? children, classNames.incrementIcon, incrementIconProps, contentIsIcon)
|
|
111
|
+
});
|
|
112
|
+
});
|
|
113
|
+
QuantityPickerIncrementButton.displayName = "QuantityPickerIncrementButton";
|
|
114
|
+
var QuantityPickerHiddenInput = _seed_design_react_quantity_picker.QuantityPicker.HiddenInput;
|
|
115
|
+
//#endregion
|
|
116
|
+
exports.QuantityPickerDecrementButton = QuantityPickerDecrementButton;
|
|
117
|
+
exports.QuantityPickerHiddenInput = QuantityPickerHiddenInput;
|
|
118
|
+
exports.QuantityPickerIncrementButton = QuantityPickerIncrementButton;
|
|
119
|
+
exports.QuantityPickerRoot = QuantityPickerRoot;
|
|
120
|
+
exports.QuantityPickerValueDisplay = QuantityPickerValueDisplay;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { PrimitiveProps } from '@seed-design/react-primitive';
|
|
2
|
+
import { QuantityPicker as QuantityPickerPrimitive } from '@seed-design/react-quantity-picker';
|
|
3
|
+
import { QuantityPickerVariantProps } from '@seed-design/css/recipes/quantity-picker';
|
|
4
|
+
import * as React from "react";
|
|
5
|
+
export type QuantityPickerRootProps = QuantityPickerVariantProps & QuantityPickerPrimitive.RootProps;
|
|
6
|
+
export declare const QuantityPickerRoot: React.ForwardRefExoticComponent<QuantityPickerRootProps & React.RefAttributes<HTMLDivElement>>;
|
|
7
|
+
interface QuantityPickerButtonProps extends PrimitiveProps, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "disabled" | "type"> {
|
|
8
|
+
icon?: React.ReactNode;
|
|
9
|
+
loadingIndicator?: React.ReactNode;
|
|
10
|
+
}
|
|
11
|
+
export interface QuantityPickerDecrementButtonProps extends Omit<QuantityPickerPrimitive.DecrementButtonProps, "children">, QuantityPickerButtonProps {
|
|
12
|
+
removeIcon?: React.ReactNode;
|
|
13
|
+
}
|
|
14
|
+
export declare const QuantityPickerDecrementButton: React.ForwardRefExoticComponent<QuantityPickerDecrementButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
15
|
+
export interface QuantityPickerValueDisplayProps extends QuantityPickerPrimitive.ValueDisplayProps {
|
|
16
|
+
}
|
|
17
|
+
export declare const QuantityPickerValueDisplay: React.ForwardRefExoticComponent<Omit<QuantityPickerValueDisplayProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
|
|
18
|
+
export interface QuantityPickerIncrementButtonProps extends Omit<QuantityPickerPrimitive.IncrementButtonProps, "children">, QuantityPickerButtonProps {
|
|
19
|
+
}
|
|
20
|
+
export declare const QuantityPickerIncrementButton: React.ForwardRefExoticComponent<QuantityPickerIncrementButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
21
|
+
export interface QuantityPickerHiddenInputProps extends QuantityPickerPrimitive.HiddenInputProps {
|
|
22
|
+
}
|
|
23
|
+
export declare const QuantityPickerHiddenInput: React.ForwardRefExoticComponent<QuantityPickerPrimitive.HiddenInputProps & React.RefAttributes<HTMLInputElement>>;
|
|
24
|
+
export {};
|
|
25
|
+
//# sourceMappingURL=QuantityPicker.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"QuantityPicker.d.ts","sourceRoot":"","sources":["../../../src/components/QuantityPicker/QuantityPicker.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EACL,cAAc,IAAI,uBAAuB,EAE1C,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAEL,KAAK,0BAA0B,EAChC,MAAM,0CAA0C,CAAC;AAElD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAkE/B,MAAM,MAAM,uBAAuB,GAAG,0BAA0B,GAC9D,uBAAuB,CAAC,SAAS,CAAC;AAEpC,eAAO,MAAM,kBAAkB,gGAkC9B,CAAC;AAGF,UAAU,yBACR,SAAQ,cAAc,EACpB,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAC1E,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACpC;AAED,MAAM,WAAW,kCACf,SAAQ,IAAI,CAAC,uBAAuB,CAAC,oBAAoB,EAAE,UAAU,CAAC,EACpE,yBAAyB;IAC3B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,eAAO,MAAM,6BAA6B,8GAsBxC,CAAC;AAGH,MAAM,WAAW,+BACf,SAAQ,uBAAuB,CAAC,iBAAiB;CAAG;AAEtD,eAAO,MAAM,0BAA0B,6JAuBtC,CAAC;AAGF,MAAM,WAAW,kCACf,SAAQ,IAAI,CAAC,uBAAuB,CAAC,oBAAoB,EAAE,UAAU,CAAC,EACpE,yBAAyB;CAAG;AAEhC,eAAO,MAAM,6BAA6B,8GAkBxC,CAAC;AAGH,MAAM,WAAW,8BAA+B,SAAQ,uBAAuB,CAAC,gBAAgB;CAAG;AAEnG,eAAO,MAAM,yBAAyB,mHAAsC,CAAC"}
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
"use client";
|
|
3
|
+
import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext.js";
|
|
4
|
+
import { createWithStateProps } from "../../utils/createWithStateProps.js";
|
|
5
|
+
import { Primitive } from "@seed-design/react-primitive";
|
|
6
|
+
import clsx$1 from "clsx";
|
|
7
|
+
import * as React$1 from "react";
|
|
8
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
9
|
+
import { mergeProps } from "@seed-design/dom-utils";
|
|
10
|
+
import { QuantityPicker, useQuantityPickerContext } from "@seed-design/react-quantity-picker";
|
|
11
|
+
import { quantityPicker } from "@seed-design/css/recipes/quantity-picker";
|
|
12
|
+
//#region src/components/QuantityPicker/QuantityPicker.tsx
|
|
13
|
+
var { ClassNamesProvider, useClassNames } = createSlotRecipeContext(quantityPicker);
|
|
14
|
+
var withStateProps = createWithStateProps([useQuantityPickerContext]);
|
|
15
|
+
function isQuantityPickerButton(child) {
|
|
16
|
+
return React$1.isValidElement(child) && (child.type === QuantityPickerDecrementButton || child.type === QuantityPickerIncrementButton);
|
|
17
|
+
}
|
|
18
|
+
function isQuantityPickerValueDisplay(child) {
|
|
19
|
+
return React$1.isValidElement(child) && child.type === QuantityPickerValueDisplay;
|
|
20
|
+
}
|
|
21
|
+
function withDividers(children, dividerClassName) {
|
|
22
|
+
const childArray = React$1.Children.toArray(children);
|
|
23
|
+
return childArray.flatMap((child, index) => {
|
|
24
|
+
const nextChild = childArray[index + 1];
|
|
25
|
+
if (!(isQuantityPickerButton(child) && isQuantityPickerValueDisplay(nextChild) || isQuantityPickerValueDisplay(child) && isQuantityPickerButton(nextChild))) return child;
|
|
26
|
+
return [child, /* @__PURE__ */ jsx(Primitive.div, {
|
|
27
|
+
"aria-hidden": "true",
|
|
28
|
+
className: dividerClassName
|
|
29
|
+
}, `divider-${index.toString()}`)];
|
|
30
|
+
});
|
|
31
|
+
}
|
|
32
|
+
function getValueDisplayPlaceholder(max) {
|
|
33
|
+
return String(max).replace(/\d/g, "0");
|
|
34
|
+
}
|
|
35
|
+
function renderIcon(icon, className, stateProps, ariaHidden) {
|
|
36
|
+
if (!React$1.isValidElement(icon)) return icon;
|
|
37
|
+
return React$1.cloneElement(icon, {
|
|
38
|
+
...ariaHidden ? { "aria-hidden": true } : {},
|
|
39
|
+
className: clsx$1(icon.props.className, className),
|
|
40
|
+
"data-disabled": stateProps["data-disabled"]
|
|
41
|
+
});
|
|
42
|
+
}
|
|
43
|
+
var QuantityPickerRoot = React$1.forwardRef((props, ref) => {
|
|
44
|
+
const [variantProps, otherProps] = quantityPicker.splitVariantProps(props);
|
|
45
|
+
const { children, className, removable: _removable, removeAriaLabel: _removeAriaLabel, ...rootProps } = otherProps;
|
|
46
|
+
const classNames = quantityPicker(variantProps);
|
|
47
|
+
const quantityPickerRootProps = props.removable ? {
|
|
48
|
+
...rootProps,
|
|
49
|
+
removable: true,
|
|
50
|
+
removeAriaLabel: props.removeAriaLabel
|
|
51
|
+
} : {
|
|
52
|
+
...rootProps,
|
|
53
|
+
removable: false
|
|
54
|
+
};
|
|
55
|
+
return /* @__PURE__ */ jsx(ClassNamesProvider, {
|
|
56
|
+
value: classNames,
|
|
57
|
+
children: /* @__PURE__ */ jsx(QuantityPicker.Root, {
|
|
58
|
+
ref,
|
|
59
|
+
className: clsx$1(classNames.root, className),
|
|
60
|
+
...quantityPickerRootProps,
|
|
61
|
+
children: withDividers(children, classNames.divider)
|
|
62
|
+
})
|
|
63
|
+
});
|
|
64
|
+
});
|
|
65
|
+
QuantityPickerRoot.displayName = "QuantityPickerRoot";
|
|
66
|
+
var QuantityPickerDecrementButton = React$1.forwardRef(({ children, className, icon, loadingIndicator, removeIcon, ...props }, ref) => {
|
|
67
|
+
const classNames = useClassNames();
|
|
68
|
+
const { decrementIconProps, decrementLoading, isRemoveButton } = useQuantityPickerContext();
|
|
69
|
+
const content = decrementLoading ? loadingIndicator : isRemoveButton ? removeIcon ?? icon : icon;
|
|
70
|
+
const contentIsIcon = content !== null && content !== void 0;
|
|
71
|
+
return /* @__PURE__ */ jsx(QuantityPicker.DecrementButton, {
|
|
72
|
+
ref,
|
|
73
|
+
className: clsx$1(classNames.decrementButton, className),
|
|
74
|
+
...props,
|
|
75
|
+
children: renderIcon(content ?? children, classNames.decrementIcon, decrementIconProps, contentIsIcon)
|
|
76
|
+
});
|
|
77
|
+
});
|
|
78
|
+
QuantityPickerDecrementButton.displayName = "QuantityPickerDecrementButton";
|
|
79
|
+
var QuantityPickerValueDisplay = withStateProps(React$1.forwardRef(({ className, ...props }, ref) => {
|
|
80
|
+
const classNames = useClassNames();
|
|
81
|
+
const { getValueText, max, valueDisplayProps } = useQuantityPickerContext();
|
|
82
|
+
const placeholder = getValueDisplayPlaceholder(max);
|
|
83
|
+
return /* @__PURE__ */ jsxs(Primitive.span, {
|
|
84
|
+
ref,
|
|
85
|
+
...mergeProps(valueDisplayProps, props),
|
|
86
|
+
className: clsx$1(classNames.valueDisplay, className),
|
|
87
|
+
children: [/* @__PURE__ */ jsx(Primitive.span, {
|
|
88
|
+
"aria-hidden": "true",
|
|
89
|
+
className: classNames.valueDisplayPlaceholder,
|
|
90
|
+
children: getValueText(placeholder, placeholder)
|
|
91
|
+
}), /* @__PURE__ */ jsx(Primitive.span, {
|
|
92
|
+
className: classNames.valueDisplayText,
|
|
93
|
+
children: valueDisplayProps.children
|
|
94
|
+
})]
|
|
95
|
+
});
|
|
96
|
+
}));
|
|
97
|
+
QuantityPickerValueDisplay.displayName = "QuantityPickerValueDisplay";
|
|
98
|
+
var QuantityPickerIncrementButton = React$1.forwardRef(({ children, className, icon, loadingIndicator, ...props }, ref) => {
|
|
99
|
+
const classNames = useClassNames();
|
|
100
|
+
const { incrementIconProps, incrementLoading } = useQuantityPickerContext();
|
|
101
|
+
const content = incrementLoading ? loadingIndicator : icon;
|
|
102
|
+
const contentIsIcon = content !== null && content !== void 0;
|
|
103
|
+
return /* @__PURE__ */ jsx(QuantityPicker.IncrementButton, {
|
|
104
|
+
ref,
|
|
105
|
+
className: clsx$1(classNames.incrementButton, className),
|
|
106
|
+
...props,
|
|
107
|
+
children: renderIcon(content ?? children, classNames.incrementIcon, incrementIconProps, contentIsIcon)
|
|
108
|
+
});
|
|
109
|
+
});
|
|
110
|
+
QuantityPickerIncrementButton.displayName = "QuantityPickerIncrementButton";
|
|
111
|
+
var QuantityPickerHiddenInput = QuantityPicker.HiddenInput;
|
|
112
|
+
//#endregion
|
|
113
|
+
export { QuantityPickerDecrementButton, QuantityPickerHiddenInput, QuantityPickerIncrementButton, QuantityPickerRoot, QuantityPickerValueDisplay };
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
|
|
2
|
+
const require_QuantityPicker = require("./QuantityPicker.cjs");
|
|
3
|
+
//#region src/components/QuantityPicker/QuantityPicker.namespace.ts
|
|
4
|
+
var QuantityPicker_namespace_exports = /* @__PURE__ */ require_runtime.__exportAll({
|
|
5
|
+
DecrementButton: () => require_QuantityPicker.QuantityPickerDecrementButton,
|
|
6
|
+
HiddenInput: () => require_QuantityPicker.QuantityPickerHiddenInput,
|
|
7
|
+
IncrementButton: () => require_QuantityPicker.QuantityPickerIncrementButton,
|
|
8
|
+
Root: () => require_QuantityPicker.QuantityPickerRoot,
|
|
9
|
+
ValueDisplay: () => require_QuantityPicker.QuantityPickerValueDisplay
|
|
10
|
+
});
|
|
11
|
+
//#endregion
|
|
12
|
+
Object.defineProperty(exports, "QuantityPicker_namespace_exports", {
|
|
13
|
+
enumerable: true,
|
|
14
|
+
get: function() {
|
|
15
|
+
return QuantityPicker_namespace_exports;
|
|
16
|
+
}
|
|
17
|
+
});
|