@seed-design/react 2.0.4 → 2.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +201 -0
- package/NOTICE +20 -0
- 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/Dialog.d.ts +1 -1
- package/lib/components/Dialog/Dialog.d.ts.map +1 -1
- 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 +39 -34
- 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/Dialog.tsx +1 -3
- 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,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
|
+
});
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
export { QuantityPickerRoot as Root, QuantityPickerDecrementButton as DecrementButton, QuantityPickerValueDisplay as ValueDisplay, QuantityPickerIncrementButton as IncrementButton, QuantityPickerHiddenInput as HiddenInput, type QuantityPickerRootProps as RootProps, type QuantityPickerDecrementButtonProps as DecrementButtonProps, type QuantityPickerValueDisplayProps as ValueDisplayProps, type QuantityPickerIncrementButtonProps as IncrementButtonProps, type QuantityPickerHiddenInputProps as HiddenInputProps, } from './QuantityPicker';
|
|
2
|
+
//# sourceMappingURL=QuantityPicker.namespace.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"QuantityPicker.namespace.d.ts","sourceRoot":"","sources":["../../../src/components/QuantityPicker/QuantityPicker.namespace.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,IAAI,IAAI,EAC1B,6BAA6B,IAAI,eAAe,EAChD,0BAA0B,IAAI,YAAY,EAC1C,6BAA6B,IAAI,eAAe,EAChD,yBAAyB,IAAI,WAAW,EACxC,KAAK,uBAAuB,IAAI,SAAS,EACzC,KAAK,kCAAkC,IAAI,oBAAoB,EAC/D,KAAK,+BAA+B,IAAI,iBAAiB,EACzD,KAAK,kCAAkC,IAAI,oBAAoB,EAC/D,KAAK,8BAA8B,IAAI,gBAAgB,GACxD,MAAM,kBAAkB,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
|
|
2
|
+
import { QuantityPickerDecrementButton, QuantityPickerHiddenInput, QuantityPickerIncrementButton, QuantityPickerRoot, QuantityPickerValueDisplay } from "./QuantityPicker.js";
|
|
3
|
+
//#region src/components/QuantityPicker/QuantityPicker.namespace.ts
|
|
4
|
+
var QuantityPicker_namespace_exports = /* @__PURE__ */ __exportAll({
|
|
5
|
+
DecrementButton: () => QuantityPickerDecrementButton,
|
|
6
|
+
HiddenInput: () => QuantityPickerHiddenInput,
|
|
7
|
+
IncrementButton: () => QuantityPickerIncrementButton,
|
|
8
|
+
Root: () => QuantityPickerRoot,
|
|
9
|
+
ValueDisplay: () => QuantityPickerValueDisplay
|
|
10
|
+
});
|
|
11
|
+
//#endregion
|
|
12
|
+
export { QuantityPicker_namespace_exports };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"QuantityPicker.test.d.ts","sourceRoot":"","sources":["../../../src/components/QuantityPicker/QuantityPicker.test.tsx"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
2
|
+
const require_QuantityPicker = require("./QuantityPicker.cjs");
|
|
3
|
+
const require_QuantityPicker_namespace = require("./QuantityPicker.namespace.cjs");
|
|
4
|
+
Object.defineProperty(exports, "QuantityPicker", {
|
|
5
|
+
enumerable: true,
|
|
6
|
+
get: function() {
|
|
7
|
+
return require_QuantityPicker_namespace.QuantityPicker_namespace_exports;
|
|
8
|
+
}
|
|
9
|
+
});
|
|
10
|
+
exports.QuantityPickerDecrementButton = require_QuantityPicker.QuantityPickerDecrementButton;
|
|
11
|
+
exports.QuantityPickerHiddenInput = require_QuantityPicker.QuantityPickerHiddenInput;
|
|
12
|
+
exports.QuantityPickerIncrementButton = require_QuantityPicker.QuantityPickerIncrementButton;
|
|
13
|
+
exports.QuantityPickerRoot = require_QuantityPicker.QuantityPickerRoot;
|
|
14
|
+
exports.QuantityPickerValueDisplay = require_QuantityPicker.QuantityPickerValueDisplay;
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export { QuantityPickerRoot, QuantityPickerDecrementButton, QuantityPickerValueDisplay, QuantityPickerIncrementButton, QuantityPickerHiddenInput, type QuantityPickerRootProps, type QuantityPickerDecrementButtonProps, type QuantityPickerValueDisplayProps, type QuantityPickerIncrementButtonProps, type QuantityPickerHiddenInputProps, } from './QuantityPicker';
|
|
2
|
+
export * as QuantityPicker from './QuantityPicker.namespace';
|
|
3
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/QuantityPicker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,EAClB,6BAA6B,EAC7B,0BAA0B,EAC1B,6BAA6B,EAC7B,yBAAyB,EACzB,KAAK,uBAAuB,EAC5B,KAAK,kCAAkC,EACvC,KAAK,+BAA+B,EACpC,KAAK,kCAAkC,EACvC,KAAK,8BAA8B,GACpC,MAAM,kBAAkB,CAAC;AAE1B,OAAO,KAAK,cAAc,MAAM,4BAA4B,CAAC"}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { QuantityPickerDecrementButton, QuantityPickerHiddenInput, QuantityPickerIncrementButton, QuantityPickerRoot, QuantityPickerValueDisplay } from "./QuantityPicker.js";
|
|
2
|
+
import { QuantityPicker_namespace_exports } from "./QuantityPicker.namespace.js";
|
|
3
|
+
export { QuantityPicker_namespace_exports as QuantityPicker, QuantityPickerDecrementButton, QuantityPickerHiddenInput, QuantityPickerIncrementButton, QuantityPickerRoot, QuantityPickerValueDisplay };
|
|
@@ -0,0 +1,196 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
|
|
3
|
+
const require_BottomSheet = require("../BottomSheet/BottomSheet.cjs");
|
|
4
|
+
const require_BottomSheetHandle = require("../BottomSheetHandle/BottomSheetHandle.cjs");
|
|
5
|
+
const require_ContentDialog = require("../ContentDialog/ContentDialog.cjs");
|
|
6
|
+
const require_useBreakpointValue = require("../../hooks/useBreakpointValue.cjs");
|
|
7
|
+
let react = require("react");
|
|
8
|
+
react = require_runtime.__toESM(react);
|
|
9
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
10
|
+
let _seed_design_react_drawer = require("@seed-design/react-drawer");
|
|
11
|
+
//#region src/components/ResponsiveDialog/ResponsiveDialog.tsx
|
|
12
|
+
var ResponsiveDialogContext = react.createContext(null);
|
|
13
|
+
function useResponsiveDialogContext() {
|
|
14
|
+
const ctx = react.useContext(ResponsiveDialogContext);
|
|
15
|
+
if (!ctx) throw new Error("ResponsiveDialog sub-components must be used inside <ResponsiveDialogRoot>");
|
|
16
|
+
return ctx;
|
|
17
|
+
}
|
|
18
|
+
var ResponsiveDialogRoot = ({ children, open: openProp, defaultOpen = false, onOpenChange, dialogBreakpoint = "md", dialogRootProps, bottomSheetRootProps }) => {
|
|
19
|
+
const shouldUseBottomSheet = require_useBreakpointValue.useBreakpointValue({
|
|
20
|
+
base: true,
|
|
21
|
+
[dialogBreakpoint]: false
|
|
22
|
+
});
|
|
23
|
+
const isControlled = openProp !== void 0;
|
|
24
|
+
const [internalOpen, setInternalOpen] = react.useState(defaultOpen);
|
|
25
|
+
const open = openProp ?? internalOpen;
|
|
26
|
+
const setOpen = react.useCallback((nextOpen) => {
|
|
27
|
+
if (nextOpen === open) return;
|
|
28
|
+
if (!isControlled) setInternalOpen(nextOpen);
|
|
29
|
+
onOpenChange?.(nextOpen);
|
|
30
|
+
}, [
|
|
31
|
+
isControlled,
|
|
32
|
+
onOpenChange,
|
|
33
|
+
open
|
|
34
|
+
]);
|
|
35
|
+
const value = react.useMemo(() => ({ shouldUseBottomSheet }), [shouldUseBottomSheet]);
|
|
36
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResponsiveDialogContext.Provider, {
|
|
37
|
+
value,
|
|
38
|
+
children: shouldUseBottomSheet ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_BottomSheet.BottomSheetRoot, {
|
|
39
|
+
...bottomSheetRootProps,
|
|
40
|
+
open,
|
|
41
|
+
onOpenChange: setOpen,
|
|
42
|
+
children
|
|
43
|
+
}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ContentDialog.ContentDialogRoot, {
|
|
44
|
+
...dialogRootProps,
|
|
45
|
+
open,
|
|
46
|
+
onOpenChange: setOpen,
|
|
47
|
+
children
|
|
48
|
+
})
|
|
49
|
+
});
|
|
50
|
+
};
|
|
51
|
+
ResponsiveDialogRoot.displayName = "ResponsiveDialogRoot";
|
|
52
|
+
var ResponsiveDialogTrigger = react.forwardRef((props, ref) => {
|
|
53
|
+
const { shouldUseBottomSheet } = useResponsiveDialogContext();
|
|
54
|
+
return shouldUseBottomSheet ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_BottomSheet.BottomSheetTrigger, {
|
|
55
|
+
ref,
|
|
56
|
+
...props
|
|
57
|
+
}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ContentDialog.ContentDialogTrigger, {
|
|
58
|
+
ref,
|
|
59
|
+
...props
|
|
60
|
+
});
|
|
61
|
+
});
|
|
62
|
+
ResponsiveDialogTrigger.displayName = "ResponsiveDialogTrigger";
|
|
63
|
+
var ResponsiveDialogPositioner = react.forwardRef((props, ref) => {
|
|
64
|
+
const { shouldUseBottomSheet } = useResponsiveDialogContext();
|
|
65
|
+
return shouldUseBottomSheet ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_BottomSheet.BottomSheetPositioner, {
|
|
66
|
+
ref,
|
|
67
|
+
...props
|
|
68
|
+
}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ContentDialog.ContentDialogPositioner, {
|
|
69
|
+
ref,
|
|
70
|
+
...props
|
|
71
|
+
});
|
|
72
|
+
});
|
|
73
|
+
ResponsiveDialogPositioner.displayName = "ResponsiveDialogPositioner";
|
|
74
|
+
var ResponsiveDialogBackdrop = react.forwardRef((props, ref) => {
|
|
75
|
+
const { shouldUseBottomSheet } = useResponsiveDialogContext();
|
|
76
|
+
return shouldUseBottomSheet ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_BottomSheet.BottomSheetBackdrop, {
|
|
77
|
+
ref,
|
|
78
|
+
...props
|
|
79
|
+
}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ContentDialog.ContentDialogBackdrop, {
|
|
80
|
+
ref,
|
|
81
|
+
...props
|
|
82
|
+
});
|
|
83
|
+
});
|
|
84
|
+
ResponsiveDialogBackdrop.displayName = "ResponsiveDialogBackdrop";
|
|
85
|
+
var ResponsiveDialogContent = react.forwardRef((props, ref) => {
|
|
86
|
+
const { shouldUseBottomSheet } = useResponsiveDialogContext();
|
|
87
|
+
return shouldUseBottomSheet ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_BottomSheet.BottomSheetContent, {
|
|
88
|
+
ref,
|
|
89
|
+
...props
|
|
90
|
+
}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ContentDialog.ContentDialogContent, {
|
|
91
|
+
ref,
|
|
92
|
+
...props
|
|
93
|
+
});
|
|
94
|
+
});
|
|
95
|
+
ResponsiveDialogContent.displayName = "ResponsiveDialogContent";
|
|
96
|
+
var ResponsiveDialogHeader = react.forwardRef((props, ref) => {
|
|
97
|
+
const { shouldUseBottomSheet } = useResponsiveDialogContext();
|
|
98
|
+
return shouldUseBottomSheet ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_BottomSheet.BottomSheetHeader, {
|
|
99
|
+
ref,
|
|
100
|
+
...props
|
|
101
|
+
}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ContentDialog.ContentDialogHeader, {
|
|
102
|
+
ref,
|
|
103
|
+
...props
|
|
104
|
+
});
|
|
105
|
+
});
|
|
106
|
+
ResponsiveDialogHeader.displayName = "ResponsiveDialogHeader";
|
|
107
|
+
var ResponsiveDialogTitle = react.forwardRef((props, ref) => {
|
|
108
|
+
const { shouldUseBottomSheet } = useResponsiveDialogContext();
|
|
109
|
+
return shouldUseBottomSheet ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_BottomSheet.BottomSheetTitle, {
|
|
110
|
+
ref,
|
|
111
|
+
...props
|
|
112
|
+
}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ContentDialog.ContentDialogTitle, {
|
|
113
|
+
ref,
|
|
114
|
+
...props
|
|
115
|
+
});
|
|
116
|
+
});
|
|
117
|
+
ResponsiveDialogTitle.displayName = "ResponsiveDialogTitle";
|
|
118
|
+
var ResponsiveDialogDescription = react.forwardRef((props, ref) => {
|
|
119
|
+
const { shouldUseBottomSheet } = useResponsiveDialogContext();
|
|
120
|
+
return shouldUseBottomSheet ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_BottomSheet.BottomSheetDescription, {
|
|
121
|
+
ref,
|
|
122
|
+
...props
|
|
123
|
+
}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ContentDialog.ContentDialogDescription, {
|
|
124
|
+
ref,
|
|
125
|
+
...props
|
|
126
|
+
});
|
|
127
|
+
});
|
|
128
|
+
ResponsiveDialogDescription.displayName = "ResponsiveDialogDescription";
|
|
129
|
+
var ResponsiveDialogBody = react.forwardRef((props, ref) => {
|
|
130
|
+
const { shouldUseBottomSheet } = useResponsiveDialogContext();
|
|
131
|
+
return shouldUseBottomSheet ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_BottomSheet.BottomSheetBody, {
|
|
132
|
+
ref,
|
|
133
|
+
...props
|
|
134
|
+
}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ContentDialog.ContentDialogBody, {
|
|
135
|
+
ref,
|
|
136
|
+
...props
|
|
137
|
+
});
|
|
138
|
+
});
|
|
139
|
+
ResponsiveDialogBody.displayName = "ResponsiveDialogBody";
|
|
140
|
+
var ResponsiveDialogFooter = react.forwardRef((props, ref) => {
|
|
141
|
+
const { shouldUseBottomSheet } = useResponsiveDialogContext();
|
|
142
|
+
return shouldUseBottomSheet ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_BottomSheet.BottomSheetFooter, {
|
|
143
|
+
ref,
|
|
144
|
+
...props
|
|
145
|
+
}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ContentDialog.ContentDialogFooter, {
|
|
146
|
+
ref,
|
|
147
|
+
...props
|
|
148
|
+
});
|
|
149
|
+
});
|
|
150
|
+
ResponsiveDialogFooter.displayName = "ResponsiveDialogFooter";
|
|
151
|
+
var ResponsiveDialogAction = react.forwardRef((props, ref) => {
|
|
152
|
+
const { shouldUseBottomSheet } = useResponsiveDialogContext();
|
|
153
|
+
return shouldUseBottomSheet ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_seed_design_react_drawer.Drawer.CloseButton, {
|
|
154
|
+
ref,
|
|
155
|
+
...props
|
|
156
|
+
}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ContentDialog.ContentDialogAction, {
|
|
157
|
+
ref,
|
|
158
|
+
...props
|
|
159
|
+
});
|
|
160
|
+
});
|
|
161
|
+
ResponsiveDialogAction.displayName = "ResponsiveDialogAction";
|
|
162
|
+
var ResponsiveDialogCloseButton = react.forwardRef((props, ref) => {
|
|
163
|
+
const { shouldUseBottomSheet } = useResponsiveDialogContext();
|
|
164
|
+
return shouldUseBottomSheet ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_BottomSheet.BottomSheetCloseButton, {
|
|
165
|
+
ref,
|
|
166
|
+
...props
|
|
167
|
+
}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ContentDialog.ContentDialogCloseButton, {
|
|
168
|
+
ref,
|
|
169
|
+
...props
|
|
170
|
+
});
|
|
171
|
+
});
|
|
172
|
+
ResponsiveDialogCloseButton.displayName = "ResponsiveDialogCloseButton";
|
|
173
|
+
var ResponsiveDialogHandle = react.forwardRef((props, ref) => {
|
|
174
|
+
const { shouldUseBottomSheet } = useResponsiveDialogContext();
|
|
175
|
+
if (!shouldUseBottomSheet) return null;
|
|
176
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_BottomSheetHandle.BottomSheetHandle, {
|
|
177
|
+
ref,
|
|
178
|
+
...props
|
|
179
|
+
});
|
|
180
|
+
});
|
|
181
|
+
ResponsiveDialogHandle.displayName = "ResponsiveDialogHandle";
|
|
182
|
+
//#endregion
|
|
183
|
+
exports.ResponsiveDialogAction = ResponsiveDialogAction;
|
|
184
|
+
exports.ResponsiveDialogBackdrop = ResponsiveDialogBackdrop;
|
|
185
|
+
exports.ResponsiveDialogBody = ResponsiveDialogBody;
|
|
186
|
+
exports.ResponsiveDialogCloseButton = ResponsiveDialogCloseButton;
|
|
187
|
+
exports.ResponsiveDialogContent = ResponsiveDialogContent;
|
|
188
|
+
exports.ResponsiveDialogDescription = ResponsiveDialogDescription;
|
|
189
|
+
exports.ResponsiveDialogFooter = ResponsiveDialogFooter;
|
|
190
|
+
exports.ResponsiveDialogHandle = ResponsiveDialogHandle;
|
|
191
|
+
exports.ResponsiveDialogHeader = ResponsiveDialogHeader;
|
|
192
|
+
exports.ResponsiveDialogPositioner = ResponsiveDialogPositioner;
|
|
193
|
+
exports.ResponsiveDialogRoot = ResponsiveDialogRoot;
|
|
194
|
+
exports.ResponsiveDialogTitle = ResponsiveDialogTitle;
|
|
195
|
+
exports.ResponsiveDialogTrigger = ResponsiveDialogTrigger;
|
|
196
|
+
exports.useResponsiveDialogContext = useResponsiveDialogContext;
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import { Breakpoint } from '@seed-design/css/breakpoints';
|
|
2
|
+
import { Drawer } from '@seed-design/react-drawer';
|
|
3
|
+
import { BottomSheet } from '../BottomSheet';
|
|
4
|
+
import { ContentDialog } from '../ContentDialog';
|
|
5
|
+
import * as React from "react";
|
|
6
|
+
type SharedProps<ContentDialogProps, BottomSheetProps> = Pick<ContentDialogProps, Extract<keyof ContentDialogProps, keyof BottomSheetProps>> & Pick<BottomSheetProps, Extract<keyof BottomSheetProps, keyof ContentDialogProps>>;
|
|
7
|
+
interface ResponsiveDialogContextValue {
|
|
8
|
+
shouldUseBottomSheet: boolean | undefined;
|
|
9
|
+
}
|
|
10
|
+
export declare function useResponsiveDialogContext(): ResponsiveDialogContextValue;
|
|
11
|
+
export interface ResponsiveDialogRootProps {
|
|
12
|
+
children?: React.ReactNode;
|
|
13
|
+
open?: boolean;
|
|
14
|
+
defaultOpen?: boolean;
|
|
15
|
+
onOpenChange?: (open: boolean) => void;
|
|
16
|
+
/**
|
|
17
|
+
* Breakpoint at and above which it renders as a Dialog; below it, a
|
|
18
|
+
* BottomSheet. Cannot be `"base"`, which would always be a Dialog.
|
|
19
|
+
* @default "md"
|
|
20
|
+
*/
|
|
21
|
+
dialogBreakpoint?: Exclude<Breakpoint, "base">;
|
|
22
|
+
/** Props forwarded to the underlying ContentDialog root (at and above the breakpoint). */
|
|
23
|
+
dialogRootProps?: Omit<ContentDialog.RootProps, "children" | "open" | "defaultOpen" | "onOpenChange">;
|
|
24
|
+
/** Props forwarded to the underlying BottomSheet root (below the breakpoint). */
|
|
25
|
+
bottomSheetRootProps?: Omit<BottomSheet.RootProps, "children" | "open" | "defaultOpen" | "onOpenChange">;
|
|
26
|
+
}
|
|
27
|
+
export declare const ResponsiveDialogRoot: {
|
|
28
|
+
({ children, open: openProp, defaultOpen, onOpenChange, dialogBreakpoint, dialogRootProps, bottomSheetRootProps, }: ResponsiveDialogRootProps): import("react/jsx-runtime").JSX.Element;
|
|
29
|
+
displayName: string;
|
|
30
|
+
};
|
|
31
|
+
export interface ResponsiveDialogTriggerProps extends SharedProps<ContentDialog.TriggerProps, BottomSheet.TriggerProps> {
|
|
32
|
+
}
|
|
33
|
+
export declare const ResponsiveDialogTrigger: React.ForwardRefExoticComponent<ResponsiveDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
34
|
+
export interface ResponsiveDialogPositionerProps extends SharedProps<ContentDialog.PositionerProps, BottomSheet.PositionerProps> {
|
|
35
|
+
}
|
|
36
|
+
export declare const ResponsiveDialogPositioner: React.ForwardRefExoticComponent<ResponsiveDialogPositionerProps & React.RefAttributes<HTMLDivElement>>;
|
|
37
|
+
export interface ResponsiveDialogBackdropProps extends SharedProps<ContentDialog.BackdropProps, BottomSheet.BackdropProps> {
|
|
38
|
+
}
|
|
39
|
+
export declare const ResponsiveDialogBackdrop: React.ForwardRefExoticComponent<ResponsiveDialogBackdropProps & React.RefAttributes<HTMLDivElement>>;
|
|
40
|
+
export interface ResponsiveDialogContentProps extends SharedProps<ContentDialog.ContentProps, BottomSheet.ContentProps> {
|
|
41
|
+
}
|
|
42
|
+
export declare const ResponsiveDialogContent: React.ForwardRefExoticComponent<ResponsiveDialogContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
43
|
+
export interface ResponsiveDialogHeaderProps extends SharedProps<ContentDialog.HeaderProps, BottomSheet.HeaderProps> {
|
|
44
|
+
}
|
|
45
|
+
export declare const ResponsiveDialogHeader: React.ForwardRefExoticComponent<ResponsiveDialogHeaderProps & React.RefAttributes<HTMLDivElement>>;
|
|
46
|
+
export interface ResponsiveDialogTitleProps extends SharedProps<ContentDialog.TitleProps, BottomSheet.TitleProps> {
|
|
47
|
+
}
|
|
48
|
+
export declare const ResponsiveDialogTitle: React.ForwardRefExoticComponent<ResponsiveDialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
|
|
49
|
+
export interface ResponsiveDialogDescriptionProps extends SharedProps<ContentDialog.DescriptionProps, BottomSheet.DescriptionProps> {
|
|
50
|
+
}
|
|
51
|
+
export declare const ResponsiveDialogDescription: React.ForwardRefExoticComponent<ResponsiveDialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
|
|
52
|
+
export interface ResponsiveDialogBodyProps extends SharedProps<ContentDialog.BodyProps, BottomSheet.BodyProps> {
|
|
53
|
+
}
|
|
54
|
+
export declare const ResponsiveDialogBody: React.ForwardRefExoticComponent<ResponsiveDialogBodyProps & React.RefAttributes<HTMLDivElement>>;
|
|
55
|
+
export interface ResponsiveDialogFooterProps extends SharedProps<ContentDialog.FooterProps, BottomSheet.FooterProps> {
|
|
56
|
+
}
|
|
57
|
+
export declare const ResponsiveDialogFooter: React.ForwardRefExoticComponent<ResponsiveDialogFooterProps & React.RefAttributes<HTMLDivElement>>;
|
|
58
|
+
/**
|
|
59
|
+
* Unstyled button that closes the dialog or bottom sheet on click, meant to be
|
|
60
|
+
* composed with an action button via `asChild`.
|
|
61
|
+
*/
|
|
62
|
+
export interface ResponsiveDialogActionProps extends SharedProps<ContentDialog.ActionProps, Drawer.CloseButtonProps> {
|
|
63
|
+
}
|
|
64
|
+
export declare const ResponsiveDialogAction: React.ForwardRefExoticComponent<ResponsiveDialogActionProps & React.RefAttributes<HTMLButtonElement>>;
|
|
65
|
+
export interface ResponsiveDialogCloseButtonProps extends SharedProps<ContentDialog.CloseButtonProps, BottomSheet.CloseButtonProps> {
|
|
66
|
+
}
|
|
67
|
+
export declare const ResponsiveDialogCloseButton: React.ForwardRefExoticComponent<ResponsiveDialogCloseButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
68
|
+
export interface ResponsiveDialogHandleProps extends BottomSheet.HandleProps {
|
|
69
|
+
}
|
|
70
|
+
export declare const ResponsiveDialogHandle: React.ForwardRefExoticComponent<ResponsiveDialogHandleProps & React.RefAttributes<HTMLDivElement>>;
|
|
71
|
+
export {};
|
|
72
|
+
//# sourceMappingURL=ResponsiveDialog.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ResponsiveDialog.d.ts","sourceRoot":"","sources":["../../../src/components/ResponsiveDialog/ResponsiveDialog.tsx"],"names":[],"mappings":"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"}
|