@seed-design/lynx-react 0.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/lib/_virtual/_rolldown/runtime.js +13 -0
- package/lib/components/ActionButton/ActionButton.d.ts +44 -0
- package/lib/components/ActionButton/ActionButton.d.ts.map +1 -0
- package/lib/components/ActionButton/ActionButton.jsx +158 -0
- package/lib/components/ActionButton/index.d.ts +2 -0
- package/lib/components/ActionButton/index.d.ts.map +1 -0
- package/lib/components/BottomSheet/BottomSheet.d.ts +87 -0
- package/lib/components/BottomSheet/BottomSheet.d.ts.map +1 -0
- package/lib/components/BottomSheet/BottomSheet.jsx +150 -0
- package/lib/components/BottomSheet/BottomSheet.namespace.d.ts +2 -0
- package/lib/components/BottomSheet/BottomSheet.namespace.d.ts.map +1 -0
- package/lib/components/BottomSheet/BottomSheet.namespace.js +18 -0
- package/lib/components/BottomSheet/index.d.ts +3 -0
- package/lib/components/BottomSheet/index.d.ts.map +1 -0
- package/lib/components/Box/Box.d.ts +20 -0
- package/lib/components/Box/Box.d.ts.map +1 -0
- package/lib/components/Box/Box.jsx +14 -0
- package/lib/components/Box/index.d.ts +2 -0
- package/lib/components/Box/index.d.ts.map +1 -0
- package/lib/components/Checkbox/Checkbox.d.ts +35 -0
- package/lib/components/Checkbox/Checkbox.d.ts.map +1 -0
- package/lib/components/Checkbox/Checkbox.jsx +130 -0
- package/lib/components/Checkbox/Checkbox.namespace.d.ts +2 -0
- package/lib/components/Checkbox/Checkbox.namespace.d.ts.map +1 -0
- package/lib/components/Checkbox/Checkbox.namespace.js +12 -0
- package/lib/components/Checkbox/index.d.ts +3 -0
- package/lib/components/Checkbox/index.d.ts.map +1 -0
- package/lib/components/Icon/Icon.d.ts +37 -0
- package/lib/components/Icon/Icon.d.ts.map +1 -0
- package/lib/components/Icon/Icon.jsx +143 -0
- package/lib/components/Icon/index.d.ts +2 -0
- package/lib/components/Icon/index.d.ts.map +1 -0
- package/lib/components/ProgressCircle/ProgressCircle.d.ts +25 -0
- package/lib/components/ProgressCircle/ProgressCircle.d.ts.map +1 -0
- package/lib/components/ProgressCircle/ProgressCircle.jsx +281 -0
- package/lib/components/ProgressCircle/ProgressCircle.namespace.d.ts +2 -0
- package/lib/components/ProgressCircle/ProgressCircle.namespace.d.ts.map +1 -0
- package/lib/components/ProgressCircle/ProgressCircle.namespace.js +9 -0
- package/lib/components/ProgressCircle/index.d.ts +3 -0
- package/lib/components/ProgressCircle/index.d.ts.map +1 -0
- package/lib/components/RadioGroup/RadioGroup.d.ts +34 -0
- package/lib/components/RadioGroup/RadioGroup.d.ts.map +1 -0
- package/lib/components/RadioGroup/RadioGroup.jsx +160 -0
- package/lib/components/RadioGroup/RadioGroup.namespace.d.ts +2 -0
- package/lib/components/RadioGroup/RadioGroup.namespace.d.ts.map +1 -0
- package/lib/components/RadioGroup/RadioGroup.namespace.js +12 -0
- package/lib/components/RadioGroup/index.d.ts +3 -0
- package/lib/components/RadioGroup/index.d.ts.map +1 -0
- package/lib/components/Stack/Stack.d.ts +33 -0
- package/lib/components/Stack/Stack.d.ts.map +1 -0
- package/lib/components/Stack/Stack.jsx +39 -0
- package/lib/components/Stack/index.d.ts +2 -0
- package/lib/components/Stack/index.d.ts.map +1 -0
- package/lib/components/Switch/Switch.d.ts +21 -0
- package/lib/components/Switch/Switch.d.ts.map +1 -0
- package/lib/components/Switch/Switch.jsx +101 -0
- package/lib/components/Switch/Switch.namespace.d.ts +2 -0
- package/lib/components/Switch/Switch.namespace.d.ts.map +1 -0
- package/lib/components/Switch/Switch.namespace.js +11 -0
- package/lib/components/Switch/index.d.ts +3 -0
- package/lib/components/Switch/index.d.ts.map +1 -0
- package/lib/components/TagGroup/TagGroup.d.ts +34 -0
- package/lib/components/TagGroup/TagGroup.d.ts.map +1 -0
- package/lib/components/TagGroup/TagGroup.jsx +57 -0
- package/lib/components/TagGroup/TagGroup.namespace.d.ts +2 -0
- package/lib/components/TagGroup/TagGroup.namespace.d.ts.map +1 -0
- package/lib/components/TagGroup/TagGroup.namespace.js +10 -0
- package/lib/components/TagGroup/index.d.ts +3 -0
- package/lib/components/TagGroup/index.d.ts.map +1 -0
- package/lib/components/Text/Text.d.ts +7 -0
- package/lib/components/Text/Text.d.ts.map +1 -0
- package/lib/components/Text/Text.jsx +28 -0
- package/lib/components/Text/index.d.ts +2 -0
- package/lib/components/Text/index.d.ts.map +1 -0
- package/lib/components/index.d.ts +12 -0
- package/lib/components/index.d.ts.map +1 -0
- package/lib/hooks/index.d.ts +5 -0
- package/lib/hooks/index.d.ts.map +1 -0
- package/lib/hooks/useControllableState.d.ts +15 -0
- package/lib/hooks/useControllableState.d.ts.map +1 -0
- package/lib/hooks/useControllableState.js +27 -0
- package/lib/hooks/useIconColor.d.ts +19 -0
- package/lib/hooks/useIconColor.d.ts.map +1 -0
- package/lib/hooks/useIconColor.js +38 -0
- package/lib/hooks/usePressTap.d.ts +27 -0
- package/lib/hooks/usePressTap.d.ts.map +1 -0
- package/lib/hooks/usePressTap.js +35 -0
- package/lib/hooks/useSafeArea.d.ts +19 -0
- package/lib/hooks/useSafeArea.d.ts.map +1 -0
- package/lib/hooks/useSafeArea.js +33 -0
- package/lib/index.d.ts +5 -0
- package/lib/index.d.ts.map +1 -0
- package/lib/index.js +26 -0
- package/lib/types.d.ts +33 -0
- package/lib/types.d.ts.map +1 -0
- package/lib/utils/children.d.ts +3 -0
- package/lib/utils/children.d.ts.map +1 -0
- package/lib/utils/children.js +8 -0
- package/lib/utils/create-slot-recipe-context.d.ts +27 -0
- package/lib/utils/create-slot-recipe-context.d.ts.map +1 -0
- package/lib/utils/create-slot-recipe-context.jsx +94 -0
- package/lib/utils/get-seed-class-name.d.ts +22 -0
- package/lib/utils/get-seed-class-name.d.ts.map +1 -0
- package/lib/utils/get-seed-class-name.js +28 -0
- package/lib/utils/index.d.ts +5 -0
- package/lib/utils/index.d.ts.map +1 -0
- package/lib/utils/resolve-recipe-token.d.ts +38 -0
- package/lib/utils/resolve-recipe-token.d.ts.map +1 -0
- package/lib/utils/resolve-recipe-token.js +49 -0
- package/lib/utils/split-multiple-variants-props.d.ts +29 -0
- package/lib/utils/split-multiple-variants-props.d.ts.map +1 -0
- package/lib/utils/split-multiple-variants-props.js +34 -0
- package/lib/utils/styled.d.ts +83 -0
- package/lib/utils/styled.d.ts.map +1 -0
- package/lib/utils/styled.js +144 -0
- package/package.json +54 -0
- package/src/components/ActionButton/ActionButton.test.tsx +137 -0
- package/src/components/ActionButton/ActionButton.tsx +340 -0
- package/src/components/ActionButton/index.ts +1 -0
- package/src/components/BottomSheet/BottomSheet.namespace.ts +24 -0
- package/src/components/BottomSheet/BottomSheet.test.tsx +153 -0
- package/src/components/BottomSheet/BottomSheet.tsx +397 -0
- package/src/components/BottomSheet/index.ts +27 -0
- package/src/components/Box/Box.test.tsx +85 -0
- package/src/components/Box/Box.tsx +39 -0
- package/src/components/Box/index.ts +1 -0
- package/src/components/Checkbox/Checkbox.namespace.ts +12 -0
- package/src/components/Checkbox/Checkbox.tsx +282 -0
- package/src/components/Checkbox/index.ts +14 -0
- package/src/components/Icon/Icon.tsx +265 -0
- package/src/components/Icon/index.ts +8 -0
- package/src/components/ProgressCircle/ProgressCircle.namespace.ts +5 -0
- package/src/components/ProgressCircle/ProgressCircle.tsx +424 -0
- package/src/components/ProgressCircle/index.ts +9 -0
- package/src/components/RadioGroup/RadioGroup.namespace.ts +12 -0
- package/src/components/RadioGroup/RadioGroup.tsx +320 -0
- package/src/components/RadioGroup/index.ts +14 -0
- package/src/components/Stack/Stack.tsx +97 -0
- package/src/components/Stack/index.ts +1 -0
- package/src/components/Switch/Switch.namespace.ts +10 -0
- package/src/components/Switch/Switch.tsx +200 -0
- package/src/components/Switch/index.ts +12 -0
- package/src/components/TagGroup/TagGroup.namespace.ts +8 -0
- package/src/components/TagGroup/TagGroup.tsx +127 -0
- package/src/components/TagGroup/index.ts +10 -0
- package/src/components/Text/Text.tsx +64 -0
- package/src/components/Text/index.ts +1 -0
- package/src/components/index.ts +11 -0
- package/src/hooks/index.ts +4 -0
- package/src/hooks/useControllableState.test.ts +120 -0
- package/src/hooks/useControllableState.ts +38 -0
- package/src/hooks/useIconColor.test.ts +13 -0
- package/src/hooks/useIconColor.ts +67 -0
- package/src/hooks/usePressTap.test.ts +129 -0
- package/src/hooks/usePressTap.ts +58 -0
- package/src/hooks/useSafeArea.test.ts +83 -0
- package/src/hooks/useSafeArea.ts +56 -0
- package/src/index.ts +4 -0
- package/src/types.ts +45 -0
- package/src/utils/children.ts +13 -0
- package/src/utils/create-slot-recipe-context.test.tsx +96 -0
- package/src/utils/create-slot-recipe-context.tsx +187 -0
- package/src/utils/get-seed-class-name.ts +47 -0
- package/src/utils/index.ts +4 -0
- package/src/utils/resolve-recipe-token.ts +47 -0
- package/src/utils/split-multiple-variants-props.test.ts +61 -0
- package/src/utils/split-multiple-variants-props.ts +59 -0
- package/src/utils/styled.ts +442 -0
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
//#region \0rolldown/runtime.js
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __exportAll = (all, no_symbols) => {
|
|
4
|
+
let target = {};
|
|
5
|
+
for (var name in all) __defProp(target, name, {
|
|
6
|
+
get: all[name],
|
|
7
|
+
enumerable: true
|
|
8
|
+
});
|
|
9
|
+
if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
|
|
10
|
+
return target;
|
|
11
|
+
};
|
|
12
|
+
//#endregion
|
|
13
|
+
export { __exportAll };
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { ActionButtonVariantProps } from '@seed-design/lynx-css/recipes/action-button';
|
|
2
|
+
import { LynxElementProps, LynxPressableProps } from '../../types';
|
|
3
|
+
import { StyleProps } from '../../utils/styled';
|
|
4
|
+
import { IconProps, PrefixIconProps, SuffixIconProps } from '../Icon/Icon';
|
|
5
|
+
import * as React from "@lynx-js/react";
|
|
6
|
+
/**
|
|
7
|
+
* @platform Lynx
|
|
8
|
+
*
|
|
9
|
+
* 웹 대비 차이:
|
|
10
|
+
* - 아이콘 렌더링: 웹의 SVG `currentColor` 대신 Lynx `<image>` 의 `tint-color` 를
|
|
11
|
+
* `Icon` / `PrefixIcon` / `SuffixIcon` wrapper 가 동기화한다.
|
|
12
|
+
* - 호환 API: 기존 `prefixIcon` / `suffixIcon` / `icon` prop 도 유지한다.
|
|
13
|
+
* - 미지원 prop: `color`, `fontWeight`, `bleedX`, `bleedY` (CSS variable 동적 주입 제한)
|
|
14
|
+
*
|
|
15
|
+
* ```tsx
|
|
16
|
+
* import IconPlusFill from "@karrotmarket/lynx-monochrome-icon/IconPlusFill";
|
|
17
|
+
* import IconChevronDownFill from "@karrotmarket/lynx-monochrome-icon/IconChevronDownFill";
|
|
18
|
+
* import { Icon, PrefixIcon, SuffixIcon } from "@seed-design/lynx-react";
|
|
19
|
+
*
|
|
20
|
+
* // withText (기본)
|
|
21
|
+
* <ActionButton variant="brandSolid">
|
|
22
|
+
* <PrefixIcon icon={<IconPlusFill />} />
|
|
23
|
+
* 라벨
|
|
24
|
+
* <SuffixIcon icon={<IconChevronDownFill />} />
|
|
25
|
+
* </ActionButton>
|
|
26
|
+
*
|
|
27
|
+
* // iconOnly — `<Icon />` child 와 `aria-label` 필수
|
|
28
|
+
* <ActionButton
|
|
29
|
+
* layout="iconOnly"
|
|
30
|
+
* variant="neutralSolid"
|
|
31
|
+
* aria-label="추가"
|
|
32
|
+
* >
|
|
33
|
+
* <Icon icon={<IconPlusFill />} />
|
|
34
|
+
* </ActionButton>
|
|
35
|
+
* ```
|
|
36
|
+
*/
|
|
37
|
+
export interface ActionButtonProps extends Omit<ActionButtonVariantProps, "pressed">, Pick<StyleProps, "flexGrow">, LynxElementProps, LynxPressableProps {
|
|
38
|
+
icon?: IconProps["icon"];
|
|
39
|
+
prefixIcon?: PrefixIconProps["icon"];
|
|
40
|
+
suffixIcon?: SuffixIconProps["icon"];
|
|
41
|
+
"aria-label"?: string;
|
|
42
|
+
}
|
|
43
|
+
export declare const ActionButton: React.ForwardRefExoticComponent<ActionButtonProps & React.RefAttributes<unknown>>;
|
|
44
|
+
//# sourceMappingURL=ActionButton.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ActionButton.d.ts","sourceRoot":"","sources":["../../../src/components/ActionButton/ActionButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,6CAA6C,CAAC;AAI5F,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAIxC,OAAO,KAAK,EACV,gBAAgB,EAChB,kBAAkB,EAKnB,MAAM,aAAa,CAAC;AAIrB,OAAO,EAAoB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAMvE,OAAO,EAOL,KAAK,SAAS,EACd,KAAK,eAAe,EACpB,KAAK,eAAe,EACrB,MAAM,cAAc,CAAC;AAsMtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,wBAAwB,EAAE,SAAS,CAAC,EAC/C,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC,EAC5B,gBAAgB,EAChB,kBAAkB;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACzB,UAAU,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IACrC,UAAU,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IACrC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,YAAY,mFA8DvB,CAAC"}
|
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
import { usePressTap } from "../../hooks/usePressTap.js";
|
|
2
|
+
import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context.jsx";
|
|
3
|
+
import { toArray } from "../../utils/children.js";
|
|
4
|
+
import { capitalize, resolveRecipeToken } from "../../utils/resolve-recipe-token.js";
|
|
5
|
+
import { resolveFlexValue } from "../../utils/styled.js";
|
|
6
|
+
import { ProgressCircleRange, ProgressCircleRoot } from "../ProgressCircle/ProgressCircle.jsx";
|
|
7
|
+
import { Icon, IconRequired, IconSlotProvider, PrefixIcon, SuffixIcon, getIconSlotName } from "../Icon/Icon.jsx";
|
|
8
|
+
import { actionButton } from "@seed-design/lynx-css/recipes/action-button";
|
|
9
|
+
import { progressCircleVariantMap } from "@seed-design/lynx-css/recipes/progress-circle";
|
|
10
|
+
import { actionButton as actionButton$1 } from "@seed-design/lynx-css/vars/component";
|
|
11
|
+
import clsx from "clsx";
|
|
12
|
+
import * as React from "@lynx-js/react";
|
|
13
|
+
import { isValidElement, useMemo } from "@lynx-js/react";
|
|
14
|
+
//#region src/components/ActionButton/ActionButton.tsx
|
|
15
|
+
var { ClassNamesProvider, useClassNames, PropsProvider } = createSlotRecipeContext(actionButton);
|
|
16
|
+
function resolveProgressCircleSize(actionButtonSize) {
|
|
17
|
+
const token = resolveRecipeToken(actionButton$1, [
|
|
18
|
+
`size${capitalize(actionButtonSize ?? "medium")}`,
|
|
19
|
+
"enabled",
|
|
20
|
+
"progressCircle",
|
|
21
|
+
"size"
|
|
22
|
+
]);
|
|
23
|
+
const normalized = token?.endsWith("px") ? token.slice(0, -2) : token;
|
|
24
|
+
return progressCircleVariantMap.size.find((size) => size === normalized) ?? "16";
|
|
25
|
+
}
|
|
26
|
+
var ActionButtonRoot = React.forwardRef((innerProps, ref) => {
|
|
27
|
+
const props = {
|
|
28
|
+
layout: "withText",
|
|
29
|
+
...innerProps
|
|
30
|
+
};
|
|
31
|
+
const [variantProps, otherProps] = actionButton.splitVariantProps(props);
|
|
32
|
+
const classNames = actionButton(variantProps);
|
|
33
|
+
const { className: userClassName, children, ...rest } = otherProps;
|
|
34
|
+
const propsForContext = useMemo(() => variantProps, [
|
|
35
|
+
variantProps.variant,
|
|
36
|
+
variantProps.size,
|
|
37
|
+
variantProps.layout,
|
|
38
|
+
variantProps.pressed,
|
|
39
|
+
variantProps.disabled,
|
|
40
|
+
variantProps.loading
|
|
41
|
+
]);
|
|
42
|
+
const iconSlotContextValue = useMemo(() => ({
|
|
43
|
+
classNames: {
|
|
44
|
+
icon: classNames.icon,
|
|
45
|
+
prefixIcon: classNames.prefixIcon,
|
|
46
|
+
suffixIcon: classNames.suffixIcon
|
|
47
|
+
},
|
|
48
|
+
deps: [
|
|
49
|
+
variantProps.variant ?? null,
|
|
50
|
+
variantProps.disabled ?? false,
|
|
51
|
+
variantProps.loading ?? false,
|
|
52
|
+
variantProps.pressed ?? false
|
|
53
|
+
]
|
|
54
|
+
}), [
|
|
55
|
+
classNames.icon,
|
|
56
|
+
classNames.prefixIcon,
|
|
57
|
+
classNames.suffixIcon,
|
|
58
|
+
variantProps.variant,
|
|
59
|
+
variantProps.disabled,
|
|
60
|
+
variantProps.loading,
|
|
61
|
+
variantProps.pressed
|
|
62
|
+
]);
|
|
63
|
+
return <ClassNamesProvider value={classNames}>
|
|
64
|
+
<PropsProvider value={propsForContext}>
|
|
65
|
+
<IconSlotProvider value={iconSlotContextValue}>
|
|
66
|
+
<view {...ref ? { ref } : {}} {...rest} className={clsx(classNames.root, userClassName)}>
|
|
67
|
+
{children}
|
|
68
|
+
</view>
|
|
69
|
+
</IconSlotProvider>
|
|
70
|
+
</PropsProvider>
|
|
71
|
+
</ClassNamesProvider>;
|
|
72
|
+
});
|
|
73
|
+
ActionButtonRoot.displayName = "ActionButtonRoot";
|
|
74
|
+
var ActionButtonTextSlot = React.forwardRef((props, ref) => {
|
|
75
|
+
const { children, className: userClassName, ...rest } = props;
|
|
76
|
+
const classNames = useClassNames();
|
|
77
|
+
return <text {...ref ? { ref } : {}} {...rest} className={clsx(classNames.text, userClassName)}>
|
|
78
|
+
{children}
|
|
79
|
+
</text>;
|
|
80
|
+
});
|
|
81
|
+
ActionButtonTextSlot.displayName = "ActionButtonTextSlot";
|
|
82
|
+
function ActionButtonContent({ children, isIconOnly, icon, prefixIcon, suffixIcon }) {
|
|
83
|
+
const childArray = toArray(children);
|
|
84
|
+
const prefixIconChildren = [];
|
|
85
|
+
const suffixIconChildren = [];
|
|
86
|
+
const iconChildren = [];
|
|
87
|
+
const textChildren = [];
|
|
88
|
+
for (const child of childArray) {
|
|
89
|
+
const slotName = getIconSlotName(child);
|
|
90
|
+
if (slotName === "prefixIcon") {
|
|
91
|
+
prefixIconChildren.push(child);
|
|
92
|
+
continue;
|
|
93
|
+
}
|
|
94
|
+
if (slotName === "suffixIcon") {
|
|
95
|
+
suffixIconChildren.push(child);
|
|
96
|
+
continue;
|
|
97
|
+
}
|
|
98
|
+
if (slotName === "icon") {
|
|
99
|
+
iconChildren.push(child);
|
|
100
|
+
continue;
|
|
101
|
+
}
|
|
102
|
+
textChildren.push(child);
|
|
103
|
+
}
|
|
104
|
+
if (isIconOnly) {
|
|
105
|
+
if (icon != null && isValidElement(icon)) return <Icon icon={icon} />;
|
|
106
|
+
return iconChildren.length > 0 ? <>{iconChildren}</> : null;
|
|
107
|
+
}
|
|
108
|
+
return <>
|
|
109
|
+
{prefixIcon != null && isValidElement(prefixIcon) ? <PrefixIcon icon={prefixIcon} /> : null}
|
|
110
|
+
{prefixIconChildren}
|
|
111
|
+
{textChildren.length > 0 ? <ActionButtonTextSlot>{textChildren}</ActionButtonTextSlot> : null}
|
|
112
|
+
{suffixIconChildren}
|
|
113
|
+
{suffixIcon != null && isValidElement(suffixIcon) ? <SuffixIcon icon={suffixIcon} /> : null}
|
|
114
|
+
</>;
|
|
115
|
+
}
|
|
116
|
+
function ActionButtonLoadingContent(props) {
|
|
117
|
+
const classNames = useClassNames();
|
|
118
|
+
return <view className={classNames.content}>
|
|
119
|
+
<ActionButtonContent {...props} />
|
|
120
|
+
</view>;
|
|
121
|
+
}
|
|
122
|
+
function ActionButtonLoadingIndicator({ size }) {
|
|
123
|
+
const classNames = useClassNames();
|
|
124
|
+
const progressCircleSize = resolveProgressCircleSize(size);
|
|
125
|
+
return <view className={classNames.loadingIndicator}>
|
|
126
|
+
<ProgressCircleRoot size={progressCircleSize} tone="inherit">
|
|
127
|
+
<ProgressCircleRange />
|
|
128
|
+
</ProgressCircleRoot>
|
|
129
|
+
</view>;
|
|
130
|
+
}
|
|
131
|
+
var ActionButton = React.forwardRef((props, ref) => {
|
|
132
|
+
const { children, flexGrow, layout, icon, prefixIcon, suffixIcon, bindtap, "main-thread:bindtap": mainThreadBindtap, ...variantAndRest } = props;
|
|
133
|
+
const { disabled = false, loading = false } = variantAndRest;
|
|
134
|
+
const isInteractive = !disabled && !loading;
|
|
135
|
+
const isIconOnly = layout === "iconOnly";
|
|
136
|
+
const size = variantAndRest.size;
|
|
137
|
+
if (process.env.NODE_ENV !== "production" && isIconOnly && !props["aria-label"]) console.warn("ActionButton: `layout=\"iconOnly\"` requires `aria-label` for accessibility.");
|
|
138
|
+
const { pressed, ...pressTapHandlers } = usePressTap({
|
|
139
|
+
disabled: !isInteractive,
|
|
140
|
+
onTap: bindtap,
|
|
141
|
+
mainThreadOnTap: mainThreadBindtap
|
|
142
|
+
});
|
|
143
|
+
return <IconRequired enabled={isIconOnly}>
|
|
144
|
+
<ActionButtonRoot {...variantAndRest} layout={layout} pressed={pressed} ref={ref} style={flexGrow != null ? { flexGrow: resolveFlexValue(flexGrow) } : void 0} {...pressTapHandlers}>
|
|
145
|
+
{loading ? <>
|
|
146
|
+
<ActionButtonLoadingIndicator size={size} />
|
|
147
|
+
<ActionButtonLoadingContent isIconOnly={isIconOnly} icon={icon} prefixIcon={prefixIcon} suffixIcon={suffixIcon}>
|
|
148
|
+
{children}
|
|
149
|
+
</ActionButtonLoadingContent>
|
|
150
|
+
</> : <ActionButtonContent isIconOnly={isIconOnly} icon={icon} prefixIcon={prefixIcon} suffixIcon={suffixIcon}>
|
|
151
|
+
{children}
|
|
152
|
+
</ActionButtonContent>}
|
|
153
|
+
</ActionButtonRoot>
|
|
154
|
+
</IconRequired>;
|
|
155
|
+
});
|
|
156
|
+
ActionButton.displayName = "ActionButton";
|
|
157
|
+
//#endregion
|
|
158
|
+
export { ActionButton };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ActionButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC"}
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
import { BottomSheetVariantProps } from '@seed-design/lynx-css/recipes/bottom-sheet';
|
|
2
|
+
import { SheetBackdropProps, SheetContentProps, SheetHandleProps, SheetRootProps, SheetRootRef, SheetViewProps } from '@lynx-js/lynx-ui-sheet';
|
|
3
|
+
import { ForwardRefExoticComponent, PropsWithoutRef, ReactElement, RefAttributes } from '@lynx-js/react';
|
|
4
|
+
import { LynxPressableProps, LynxStyledElementProps } from '../../types';
|
|
5
|
+
type LynxForwardRefComponent<T, P> = ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;
|
|
6
|
+
export type BottomSheetRootRef = SheetRootRef;
|
|
7
|
+
export interface BottomSheetRootProps extends BottomSheetVariantProps, Omit<SheetRootProps, "show" | "defaultShow" | "onShowChange"> {
|
|
8
|
+
/**
|
|
9
|
+
* Whether the sheet is open (controlled mode).
|
|
10
|
+
* Internally mapped to `show` of `@lynx-js/lynx-ui-sheet`.
|
|
11
|
+
*/
|
|
12
|
+
open?: boolean;
|
|
13
|
+
/**
|
|
14
|
+
* Whether the sheet is open by default (uncontrolled mode).
|
|
15
|
+
* Internally mapped to `defaultShow`.
|
|
16
|
+
* @defaultValue false
|
|
17
|
+
*/
|
|
18
|
+
defaultOpen?: boolean;
|
|
19
|
+
/**
|
|
20
|
+
* Called when the sheet's open state is about to change.
|
|
21
|
+
* Internally mapped to `onShowChange`.
|
|
22
|
+
*/
|
|
23
|
+
onOpenChange?: (open: boolean) => void;
|
|
24
|
+
}
|
|
25
|
+
/**
|
|
26
|
+
* @platform Lynx — wraps `@lynx-js/lynx-ui-sheet`
|
|
27
|
+
*
|
|
28
|
+
* 웹 대비 미지원 기능:
|
|
29
|
+
* - `lazyMount`, `unmountOnExit`: lynx-ui-sheet의 `forceMount`로 대체
|
|
30
|
+
* - `BottomSheetPositioner`: lynx-ui-sheet의 `SheetView`가 자동 처리하므로 별도 슬롯 없음
|
|
31
|
+
* - `BottomSheetCloseButton`: Tier B (Lynx SVG 지원 후 추가 예정)
|
|
32
|
+
* - `BottomSheetTrigger`의 `asChild`: 미지원 (기본 `<view>`만)
|
|
33
|
+
*/
|
|
34
|
+
export declare const BottomSheetRoot: LynxForwardRefComponent<SheetRootRef, BottomSheetRootProps>;
|
|
35
|
+
export interface BottomSheetTriggerProps extends LynxStyledElementProps, Pick<LynxPressableProps, "bindtap"> {
|
|
36
|
+
}
|
|
37
|
+
export declare const BottomSheetTrigger: LynxForwardRefComponent<unknown, BottomSheetTriggerProps>;
|
|
38
|
+
export interface BottomSheetPositionerProps extends SheetViewProps {
|
|
39
|
+
}
|
|
40
|
+
/**
|
|
41
|
+
* Backdrop/Content는 반드시 `BottomSheetPositioner` 안에 배치해야 한다.
|
|
42
|
+
*
|
|
43
|
+
* `SheetView`는 `mounted || forceMount` 조건으로 자식을 gating하므로 시트가 처음
|
|
44
|
+
* 열리기 전까지는 SheetBackdrop/SheetContent가 마운트되지 않아 motion value
|
|
45
|
+
* 초기화 레이스를 피할 수 있다. Trigger는 이 컴포넌트 밖에 두어야 탭 가능하다.
|
|
46
|
+
*
|
|
47
|
+
* recipe의 `positioner` slot className을 자동 적용해 `position: fixed` + 전체
|
|
48
|
+
* 뷰포트 커버 레이아웃을 보장한다.
|
|
49
|
+
*/
|
|
50
|
+
export declare const BottomSheetPositioner: LynxForwardRefComponent<unknown, BottomSheetPositionerProps>;
|
|
51
|
+
export interface BottomSheetBackdropProps extends SheetBackdropProps {
|
|
52
|
+
}
|
|
53
|
+
export declare const BottomSheetBackdrop: LynxForwardRefComponent<unknown, BottomSheetBackdropProps>;
|
|
54
|
+
export interface BottomSheetContentProps extends SheetContentProps {
|
|
55
|
+
}
|
|
56
|
+
export declare const BottomSheetContent: LynxForwardRefComponent<unknown, BottomSheetContentProps>;
|
|
57
|
+
export interface BottomSheetHandleProps extends SheetHandleProps {
|
|
58
|
+
}
|
|
59
|
+
/**
|
|
60
|
+
* @remarks
|
|
61
|
+
* `SheetHandle`은 forwardRef가 아니므로 ref 시그니처는 제공하지 않는다. touchArea 슬롯은
|
|
62
|
+
* `SheetHandle` JSX가 정적으로 children을 받지 않는 구조라 적용하지 않는다 (Lynx
|
|
63
|
+
* BackgroundSnapshot이 정적 slot 외의 동적 children 삽입을 허용하지 않음).
|
|
64
|
+
*/
|
|
65
|
+
export declare function BottomSheetHandle(props: BottomSheetHandleProps): ReactElement;
|
|
66
|
+
export declare namespace BottomSheetHandle {
|
|
67
|
+
var displayName: string;
|
|
68
|
+
}
|
|
69
|
+
export interface BottomSheetSlotProps extends LynxStyledElementProps {
|
|
70
|
+
}
|
|
71
|
+
export interface BottomSheetHeaderProps extends BottomSheetSlotProps {
|
|
72
|
+
}
|
|
73
|
+
export declare const BottomSheetHeader: LynxForwardRefComponent<unknown, BottomSheetSlotProps>;
|
|
74
|
+
export interface BottomSheetBodyProps extends BottomSheetSlotProps {
|
|
75
|
+
}
|
|
76
|
+
export declare const BottomSheetBody: LynxForwardRefComponent<unknown, BottomSheetSlotProps>;
|
|
77
|
+
export interface BottomSheetFooterProps extends BottomSheetSlotProps {
|
|
78
|
+
}
|
|
79
|
+
export declare const BottomSheetFooter: LynxForwardRefComponent<unknown, BottomSheetSlotProps>;
|
|
80
|
+
export interface BottomSheetTitleProps extends BottomSheetSlotProps {
|
|
81
|
+
}
|
|
82
|
+
export declare const BottomSheetTitle: LynxForwardRefComponent<unknown, BottomSheetSlotProps>;
|
|
83
|
+
export interface BottomSheetDescriptionProps extends BottomSheetSlotProps {
|
|
84
|
+
}
|
|
85
|
+
export declare const BottomSheetDescription: LynxForwardRefComponent<unknown, BottomSheetSlotProps>;
|
|
86
|
+
export {};
|
|
87
|
+
//# sourceMappingURL=BottomSheet.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/components/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,uBAAuB,EAC7B,MAAM,4CAA4C,CAAC;AAEpD,OAAO,EAML,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACrB,KAAK,cAAc,EACnB,KAAK,YAAY,EAEjB,KAAK,cAAc,EACpB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAOL,KAAK,yBAAyB,EAC9B,KAAK,eAAe,EACpB,KAAK,YAAY,EAEjB,KAAK,aAAa,EACnB,MAAM,gBAAgB,CAAC;AAIxB,OAAO,KAAK,EACV,kBAAkB,EAClB,sBAAsB,EAGvB,MAAM,aAAa,CAAC;AAIrB,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,yBAAyB,CAC5D,eAAe,CAAC,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC,CACtC,CAAC;AAmEF,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC;AAE9C,MAAM,WAAW,oBACf,SAAQ,uBAAuB,EAC7B,IAAI,CAAC,cAAc,EAAE,MAAM,GAAG,aAAa,GAAG,cAAc,CAAC;IAC/D;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,eAAe,EAAE,uBAAuB,CAAC,YAAY,EAAE,oBAAoB,CAsDpF,CAAC;AAOL,MAAM,WAAW,uBACf,SAAQ,sBAAsB,EAC5B,IAAI,CAAC,kBAAkB,EAAE,SAAS,CAAC;CAAG;AAE1C,eAAO,MAAM,kBAAkB,EAAE,uBAAuB,CAAC,OAAO,EAAE,uBAAuB,CA6BrF,CAAC;AAOL,MAAM,WAAW,0BAA2B,SAAQ,cAAc;CAAG;AAErE;;;;;;;;;GASG;AACH,eAAO,MAAM,qBAAqB,EAAE,uBAAuB,CAAC,OAAO,EAAE,0BAA0B,CACpB,CAAC;AAY5E,MAAM,WAAW,wBAAyB,SAAQ,kBAAkB;CAAG;AAEvE,eAAO,MAAM,mBAAmB,EAAE,uBAAuB,CAAC,OAAO,EAAE,wBAAwB,CAChB,CAAC;AAG5E,MAAM,WAAW,uBAAwB,SAAQ,iBAAiB;CAAG;AAErE,eAAO,MAAM,kBAAkB,EAAE,uBAAuB,CAAC,OAAO,EAAE,uBAAuB,CAwBrF,CAAC;AAOL,MAAM,WAAW,sBAAuB,SAAQ,gBAAgB;CAAG;AAEnE;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,GAAG,YAAY,CAK7E;yBALe,iBAAiB;;;AAkBjC,MAAM,WAAW,oBAAqB,SAAQ,sBAAsB;CAAG;AA0CvE,MAAM,WAAW,sBAAuB,SAAQ,oBAAoB;CAAG;AACvE,eAAO,MAAM,iBAAiB,wDAA2B,CAAC;AAG1D,MAAM,WAAW,oBAAqB,SAAQ,oBAAoB;CAAG;AACrE,eAAO,MAAM,eAAe,wDAAyB,CAAC;AAGtD,MAAM,WAAW,sBAAuB,SAAQ,oBAAoB;CAAG;AACvE,eAAO,MAAM,iBAAiB,wDAA2B,CAAC;AAG1D,MAAM,WAAW,qBAAsB,SAAQ,oBAAoB;CAAG;AACtE,eAAO,MAAM,gBAAgB,wDAA0B,CAAC;AAGxD,MAAM,WAAW,2BAA4B,SAAQ,oBAAoB;CAAG;AAC5E,eAAO,MAAM,sBAAsB,wDAAgC,CAAC"}
|
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context.jsx";
|
|
2
|
+
import { useSafeArea } from "../../hooks/useSafeArea.js";
|
|
3
|
+
import clsx from "clsx";
|
|
4
|
+
import { createContext, forwardRef, useCallback, useContext, useMemo, useRef } from "@lynx-js/react";
|
|
5
|
+
import { bottomSheet } from "@seed-design/lynx-css/recipes/bottom-sheet";
|
|
6
|
+
import { bottomSheetHandle } from "@seed-design/lynx-css/recipes/bottom-sheet-handle";
|
|
7
|
+
import { SheetBackdrop, SheetContent, SheetHandle, SheetRoot, SheetView } from "@lynx-js/lynx-ui-sheet";
|
|
8
|
+
//#region src/components/BottomSheet/BottomSheet.tsx
|
|
9
|
+
var { ClassNamesProvider, useClassNames, withContext } = createSlotRecipeContext(bottomSheet);
|
|
10
|
+
var DEFAULT_SNAP_POINTS = ["fit"];
|
|
11
|
+
var SKIP_ANIMATION_TRANSITION = {
|
|
12
|
+
type: "tween",
|
|
13
|
+
duration: 0
|
|
14
|
+
};
|
|
15
|
+
var SEED_SNAP_ANIMATION = {
|
|
16
|
+
type: "spring",
|
|
17
|
+
stiffness: 400,
|
|
18
|
+
damping: 35
|
|
19
|
+
};
|
|
20
|
+
var SEED_ENTER_ANIMATION = {
|
|
21
|
+
type: "spring",
|
|
22
|
+
stiffness: 350,
|
|
23
|
+
damping: 32
|
|
24
|
+
};
|
|
25
|
+
var SEED_EXIT_ANIMATION = {
|
|
26
|
+
type: "spring",
|
|
27
|
+
stiffness: 400,
|
|
28
|
+
damping: 40
|
|
29
|
+
};
|
|
30
|
+
var BottomSheetContext = createContext(null);
|
|
31
|
+
function useBottomSheetContext() {
|
|
32
|
+
const ctx = useContext(BottomSheetContext);
|
|
33
|
+
if (!ctx) throw new Error("BottomSheet compound components must be used within BottomSheetRoot");
|
|
34
|
+
return ctx;
|
|
35
|
+
}
|
|
36
|
+
/**
|
|
37
|
+
* @platform Lynx — wraps `@lynx-js/lynx-ui-sheet`
|
|
38
|
+
*
|
|
39
|
+
* 웹 대비 미지원 기능:
|
|
40
|
+
* - `lazyMount`, `unmountOnExit`: lynx-ui-sheet의 `forceMount`로 대체
|
|
41
|
+
* - `BottomSheetPositioner`: lynx-ui-sheet의 `SheetView`가 자동 처리하므로 별도 슬롯 없음
|
|
42
|
+
* - `BottomSheetCloseButton`: Tier B (Lynx SVG 지원 후 추가 예정)
|
|
43
|
+
* - `BottomSheetTrigger`의 `asChild`: 미지원 (기본 `<view>`만)
|
|
44
|
+
*/
|
|
45
|
+
var BottomSheetRoot = forwardRef((props, forwardedRef) => {
|
|
46
|
+
const [variantProps, restProps] = bottomSheet.splitVariantProps(props);
|
|
47
|
+
const { open, defaultOpen, onOpenChange, snapPoints, children, ...nativeProps } = restProps;
|
|
48
|
+
const { headerAlign, skipAnimation } = variantProps;
|
|
49
|
+
const internalRef = useRef(null);
|
|
50
|
+
const mergedRef = useCallback((value) => {
|
|
51
|
+
internalRef.current = value;
|
|
52
|
+
if (typeof forwardedRef === "function") forwardedRef(value);
|
|
53
|
+
else if (forwardedRef) forwardedRef.current = value;
|
|
54
|
+
}, [forwardedRef]);
|
|
55
|
+
const classNames = useMemo(() => bottomSheet(variantProps), [headerAlign, skipAnimation]);
|
|
56
|
+
const shouldSkipAnimation = skipAnimation === true;
|
|
57
|
+
const context = useMemo(() => ({
|
|
58
|
+
rootRef: internalRef,
|
|
59
|
+
options: { skipAnimation: shouldSkipAnimation }
|
|
60
|
+
}), [shouldSkipAnimation]);
|
|
61
|
+
return <BottomSheetContext.Provider value={context}>
|
|
62
|
+
<ClassNamesProvider value={classNames}>
|
|
63
|
+
<SheetRoot ref={mergedRef} show={open} defaultShow={defaultOpen} onShowChange={onOpenChange} snapPoints={snapPoints ?? DEFAULT_SNAP_POINTS} {...nativeProps}>
|
|
64
|
+
{children}
|
|
65
|
+
</SheetRoot>
|
|
66
|
+
</ClassNamesProvider>
|
|
67
|
+
</BottomSheetContext.Provider>;
|
|
68
|
+
});
|
|
69
|
+
BottomSheetRoot.displayName = "BottomSheetRoot";
|
|
70
|
+
var BottomSheetTrigger = forwardRef((props, ref) => {
|
|
71
|
+
const { children, className, style, bindtap: userBindtap } = props;
|
|
72
|
+
const { rootRef, options } = useBottomSheetContext();
|
|
73
|
+
const handlers = { bindtap: (event, instance) => {
|
|
74
|
+
if (options.skipAnimation) rootRef.current?.open({ animate: false });
|
|
75
|
+
else rootRef.current?.open();
|
|
76
|
+
userBindtap?.(event, instance);
|
|
77
|
+
} };
|
|
78
|
+
return <view {...ref ? { ref } : {}} {...handlers} className={className} style={style}>
|
|
79
|
+
{children}
|
|
80
|
+
</view>;
|
|
81
|
+
});
|
|
82
|
+
BottomSheetTrigger.displayName = "BottomSheetTrigger";
|
|
83
|
+
/**
|
|
84
|
+
* Backdrop/Content는 반드시 `BottomSheetPositioner` 안에 배치해야 한다.
|
|
85
|
+
*
|
|
86
|
+
* `SheetView`는 `mounted || forceMount` 조건으로 자식을 gating하므로 시트가 처음
|
|
87
|
+
* 열리기 전까지는 SheetBackdrop/SheetContent가 마운트되지 않아 motion value
|
|
88
|
+
* 초기화 레이스를 피할 수 있다. Trigger는 이 컴포넌트 밖에 두어야 탭 가능하다.
|
|
89
|
+
*
|
|
90
|
+
* recipe의 `positioner` slot className을 자동 적용해 `position: fixed` + 전체
|
|
91
|
+
* 뷰포트 커버 레이아웃을 보장한다.
|
|
92
|
+
*/
|
|
93
|
+
var BottomSheetPositioner = withContext(SheetView, "positioner");
|
|
94
|
+
BottomSheetPositioner.displayName = "BottomSheetPositioner";
|
|
95
|
+
var BottomSheetBackdrop = withContext(SheetBackdrop, "backdrop");
|
|
96
|
+
BottomSheetBackdrop.displayName = "BottomSheetBackdrop";
|
|
97
|
+
var BottomSheetContent = forwardRef((props, ref) => {
|
|
98
|
+
const { className, innerStyle, snapAnimation, enterAnimation, exitAnimation, ...restProps } = props;
|
|
99
|
+
const classNames = useClassNames();
|
|
100
|
+
const { options } = useBottomSheetContext();
|
|
101
|
+
const { safeAreaInsetBottom } = useSafeArea();
|
|
102
|
+
const defaultAnimation = options.skipAnimation ? SKIP_ANIMATION_TRANSITION : void 0;
|
|
103
|
+
return <SheetContent {...ref ? { ref } : {}} {...restProps} className={clsx(classNames.content, className)} innerStyle={{
|
|
104
|
+
paddingBottom: safeAreaInsetBottom,
|
|
105
|
+
...innerStyle
|
|
106
|
+
}} snapAnimation={snapAnimation ?? defaultAnimation ?? SEED_SNAP_ANIMATION} enterAnimation={enterAnimation ?? defaultAnimation ?? SEED_ENTER_ANIMATION} exitAnimation={exitAnimation ?? defaultAnimation ?? SEED_EXIT_ANIMATION} />;
|
|
107
|
+
});
|
|
108
|
+
BottomSheetContent.displayName = "BottomSheetContent";
|
|
109
|
+
/**
|
|
110
|
+
* @remarks
|
|
111
|
+
* `SheetHandle`은 forwardRef가 아니므로 ref 시그니처는 제공하지 않는다. touchArea 슬롯은
|
|
112
|
+
* `SheetHandle` JSX가 정적으로 children을 받지 않는 구조라 적용하지 않는다 (Lynx
|
|
113
|
+
* BackgroundSnapshot이 정적 slot 외의 동적 children 삽입을 허용하지 않음).
|
|
114
|
+
*/
|
|
115
|
+
function BottomSheetHandle(props) {
|
|
116
|
+
const { className, style, ...rest } = props;
|
|
117
|
+
const classNames = bottomSheetHandle();
|
|
118
|
+
return <SheetHandle className={clsx(classNames.root, className)} style={style} {...rest} />;
|
|
119
|
+
}
|
|
120
|
+
BottomSheetHandle.displayName = "BottomSheetHandle";
|
|
121
|
+
function createViewSlot(slotName) {
|
|
122
|
+
return forwardRef((props, ref) => {
|
|
123
|
+
const { children, className, style } = props;
|
|
124
|
+
const classNames = useClassNames();
|
|
125
|
+
return <view {...ref ? { ref } : {}} className={clsx(classNames[slotName], className)} style={style}>
|
|
126
|
+
{children}
|
|
127
|
+
</view>;
|
|
128
|
+
});
|
|
129
|
+
}
|
|
130
|
+
function createTextSlot(slotName) {
|
|
131
|
+
return forwardRef((props, ref) => {
|
|
132
|
+
const { children, className, style } = props;
|
|
133
|
+
const classNames = useClassNames();
|
|
134
|
+
return <text {...ref ? { ref } : {}} className={clsx(classNames[slotName], className)} style={style}>
|
|
135
|
+
{children}
|
|
136
|
+
</text>;
|
|
137
|
+
});
|
|
138
|
+
}
|
|
139
|
+
var BottomSheetHeader = createViewSlot("header");
|
|
140
|
+
BottomSheetHeader.displayName = "BottomSheetHeader";
|
|
141
|
+
var BottomSheetBody = createViewSlot("body");
|
|
142
|
+
BottomSheetBody.displayName = "BottomSheetBody";
|
|
143
|
+
var BottomSheetFooter = createViewSlot("footer");
|
|
144
|
+
BottomSheetFooter.displayName = "BottomSheetFooter";
|
|
145
|
+
var BottomSheetTitle = createTextSlot("title");
|
|
146
|
+
BottomSheetTitle.displayName = "BottomSheetTitle";
|
|
147
|
+
var BottomSheetDescription = createTextSlot("description");
|
|
148
|
+
BottomSheetDescription.displayName = "BottomSheetDescription";
|
|
149
|
+
//#endregion
|
|
150
|
+
export { BottomSheetBackdrop, BottomSheetBody, BottomSheetContent, BottomSheetDescription, BottomSheetFooter, BottomSheetHandle, BottomSheetHeader, BottomSheetPositioner, BottomSheetRoot, BottomSheetTitle, BottomSheetTrigger };
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
export { BottomSheetBackdrop as Backdrop, BottomSheetBody as Body, BottomSheetContent as Content, BottomSheetDescription as Description, BottomSheetFooter as Footer, BottomSheetHandle as Handle, BottomSheetHeader as Header, BottomSheetPositioner as Positioner, BottomSheetRoot as Root, BottomSheetTitle as Title, BottomSheetTrigger as Trigger, type BottomSheetBackdropProps as BackdropProps, type BottomSheetBodyProps as BodyProps, type BottomSheetContentProps as ContentProps, type BottomSheetDescriptionProps as DescriptionProps, type BottomSheetFooterProps as FooterProps, type BottomSheetHandleProps as HandleProps, type BottomSheetHeaderProps as HeaderProps, type BottomSheetPositionerProps as PositionerProps, type BottomSheetRootProps as RootProps, type BottomSheetTitleProps as TitleProps, type BottomSheetTriggerProps as TriggerProps, } from './BottomSheet';
|
|
2
|
+
//# sourceMappingURL=BottomSheet.namespace.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BottomSheet.namespace.d.ts","sourceRoot":"","sources":["../../../src/components/BottomSheet/BottomSheet.namespace.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,IAAI,QAAQ,EAC/B,eAAe,IAAI,IAAI,EACvB,kBAAkB,IAAI,OAAO,EAC7B,sBAAsB,IAAI,WAAW,EACrC,iBAAiB,IAAI,MAAM,EAC3B,iBAAiB,IAAI,MAAM,EAC3B,iBAAiB,IAAI,MAAM,EAC3B,qBAAqB,IAAI,UAAU,EACnC,eAAe,IAAI,IAAI,EACvB,gBAAgB,IAAI,KAAK,EACzB,kBAAkB,IAAI,OAAO,EAC7B,KAAK,wBAAwB,IAAI,aAAa,EAC9C,KAAK,oBAAoB,IAAI,SAAS,EACtC,KAAK,uBAAuB,IAAI,YAAY,EAC5C,KAAK,2BAA2B,IAAI,gBAAgB,EACpD,KAAK,sBAAsB,IAAI,WAAW,EAC1C,KAAK,sBAAsB,IAAI,WAAW,EAC1C,KAAK,sBAAsB,IAAI,WAAW,EAC1C,KAAK,0BAA0B,IAAI,eAAe,EAClD,KAAK,oBAAoB,IAAI,SAAS,EACtC,KAAK,qBAAqB,IAAI,UAAU,EACxC,KAAK,uBAAuB,IAAI,YAAY,GAC7C,MAAM,eAAe,CAAC"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
|
|
2
|
+
import { BottomSheetBackdrop, BottomSheetBody, BottomSheetContent, BottomSheetDescription, BottomSheetFooter, BottomSheetHandle, BottomSheetHeader, BottomSheetPositioner, BottomSheetRoot, BottomSheetTitle, BottomSheetTrigger } from "./BottomSheet.jsx";
|
|
3
|
+
//#region src/components/BottomSheet/BottomSheet.namespace.ts
|
|
4
|
+
var BottomSheet_namespace_exports = /* @__PURE__ */ __exportAll({
|
|
5
|
+
Backdrop: () => BottomSheetBackdrop,
|
|
6
|
+
Body: () => BottomSheetBody,
|
|
7
|
+
Content: () => BottomSheetContent,
|
|
8
|
+
Description: () => BottomSheetDescription,
|
|
9
|
+
Footer: () => BottomSheetFooter,
|
|
10
|
+
Handle: () => BottomSheetHandle,
|
|
11
|
+
Header: () => BottomSheetHeader,
|
|
12
|
+
Positioner: () => BottomSheetPositioner,
|
|
13
|
+
Root: () => BottomSheetRoot,
|
|
14
|
+
Title: () => BottomSheetTitle,
|
|
15
|
+
Trigger: () => BottomSheetTrigger
|
|
16
|
+
});
|
|
17
|
+
//#endregion
|
|
18
|
+
export { BottomSheet_namespace_exports };
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export { BottomSheetBackdrop, type BottomSheetBackdropProps, BottomSheetBody, type BottomSheetBodyProps, BottomSheetContent, type BottomSheetContentProps, BottomSheetDescription, type BottomSheetDescriptionProps, BottomSheetFooter, type BottomSheetFooterProps, BottomSheetHandle, type BottomSheetHandleProps, BottomSheetHeader, type BottomSheetHeaderProps, BottomSheetPositioner, type BottomSheetPositionerProps, BottomSheetRoot, type BottomSheetRootProps, type BottomSheetRootRef, BottomSheetTitle, type BottomSheetTitleProps, BottomSheetTrigger, type BottomSheetTriggerProps, } from './BottomSheet';
|
|
2
|
+
export * as BottomSheet from './BottomSheet.namespace';
|
|
3
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/BottomSheet/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EACnB,KAAK,wBAAwB,EAC7B,eAAe,EACf,KAAK,oBAAoB,EACzB,kBAAkB,EAClB,KAAK,uBAAuB,EAC5B,sBAAsB,EACtB,KAAK,2BAA2B,EAChC,iBAAiB,EACjB,KAAK,sBAAsB,EAC3B,iBAAiB,EACjB,KAAK,sBAAsB,EAC3B,iBAAiB,EACjB,KAAK,sBAAsB,EAC3B,qBAAqB,EACrB,KAAK,0BAA0B,EAC/B,eAAe,EACf,KAAK,oBAAoB,EACzB,KAAK,kBAAkB,EACvB,gBAAgB,EAChB,KAAK,qBAAqB,EAC1B,kBAAkB,EAClB,KAAK,uBAAuB,GAC7B,MAAM,eAAe,CAAC;AAEvB,OAAO,KAAK,WAAW,MAAM,yBAAyB,CAAC"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { LynxPressableProps, LynxStyledElementProps } from '../../types';
|
|
2
|
+
import { StyleProps } from '../../utils/styled';
|
|
3
|
+
import * as React from "@lynx-js/react";
|
|
4
|
+
/**
|
|
5
|
+
* @platform Lynx
|
|
6
|
+
*
|
|
7
|
+
* `Box`는 SEED style prop을 native `<view>`의 object style로 변환하는 편의
|
|
8
|
+
* primitive입니다. 많은 항목을 반복 렌더링하는 화면에서는 primitive 컴포넌트
|
|
9
|
+
* 렌더링과 style prop 해석 비용이 누적될 수 있습니다. 앱 코드에서는 native
|
|
10
|
+
* `<view>`/`<text>`와 Tailwind utility className을 우선 고려하세요. 패키지
|
|
11
|
+
* 컴포넌트 내부에서는 native tag와 recipe className을 사용하고, inline style은
|
|
12
|
+
* 런타임 값이 필요한 경우에만 제한적으로 사용합니다.
|
|
13
|
+
*/
|
|
14
|
+
export interface BoxProps extends StyleProps, LynxStyledElementProps, LynxPressableProps {
|
|
15
|
+
bindtouchstart?: () => void;
|
|
16
|
+
bindtouchend?: () => void;
|
|
17
|
+
bindtouchcancel?: () => void;
|
|
18
|
+
}
|
|
19
|
+
export declare const Box: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<unknown>>;
|
|
20
|
+
//# sourceMappingURL=Box.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../src/components/Box/Box.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAExC,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAe,MAAM,aAAa,CAAC;AAC3F,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEpE;;;;;;;;;GASG;AACH,MAAM,WAAW,QAAS,SAAQ,UAAU,EAAE,sBAAsB,EAAE,kBAAkB;IACtF,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED,eAAO,MAAM,GAAG,0EAcd,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { useStyleProps } from "../../utils/styled.js";
|
|
2
|
+
import clsx from "clsx";
|
|
3
|
+
import * as React from "@lynx-js/react";
|
|
4
|
+
//#region src/components/Box/Box.tsx
|
|
5
|
+
var Box = React.forwardRef((props, ref) => {
|
|
6
|
+
const { style, restProps } = useStyleProps(props);
|
|
7
|
+
const { children, className, ...nativeProps } = restProps;
|
|
8
|
+
return <view {...ref ? { ref } : {}} {...nativeProps} className={clsx(className)} style={style}>
|
|
9
|
+
{children}
|
|
10
|
+
</view>;
|
|
11
|
+
});
|
|
12
|
+
Box.displayName = "Box";
|
|
13
|
+
//#endregion
|
|
14
|
+
export { Box };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Box/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAC"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { ReactElement } from '@lynx-js/react';
|
|
2
|
+
import { CheckboxVariantProps } from '@seed-design/lynx-css/recipes/checkbox';
|
|
3
|
+
import { CheckmarkVariantProps } from '@seed-design/lynx-css/recipes/checkmark';
|
|
4
|
+
import { LynxIconElementProps, LynxStyledElementProps } from '../../types';
|
|
5
|
+
import * as React from "@lynx-js/react";
|
|
6
|
+
export interface CheckboxRootProps extends CheckboxVariantProps, Omit<CheckmarkVariantProps, "size" | "checked" | "disabled" | "indeterminate">, LynxStyledElementProps {
|
|
7
|
+
checked?: boolean;
|
|
8
|
+
defaultChecked?: boolean;
|
|
9
|
+
indeterminate?: boolean;
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
onCheckedChange?: (checked: boolean) => void;
|
|
12
|
+
}
|
|
13
|
+
export declare const CheckboxRoot: React.ForwardRefExoticComponent<CheckboxRootProps & React.RefAttributes<unknown>>;
|
|
14
|
+
export interface CheckboxControlProps extends Pick<CheckmarkVariantProps, "tone" | "variant" | "size">, LynxStyledElementProps {
|
|
15
|
+
}
|
|
16
|
+
export declare const CheckboxControl: React.ForwardRefExoticComponent<CheckboxControlProps & React.RefAttributes<unknown>>;
|
|
17
|
+
export interface CheckboxIndicatorProps extends Pick<LynxStyledElementProps, "className" | "style"> {
|
|
18
|
+
/** Icon rendered when neither checked nor indeterminate. Optional. */
|
|
19
|
+
unchecked?: ReactElement<LynxIconElementProps>;
|
|
20
|
+
/** Icon rendered when `checked=true` and `indeterminate=false`. */
|
|
21
|
+
checked: ReactElement<LynxIconElementProps>;
|
|
22
|
+
/** Icon rendered when `indeterminate=true`. */
|
|
23
|
+
indeterminate?: ReactElement<LynxIconElementProps>;
|
|
24
|
+
}
|
|
25
|
+
export declare function CheckboxIndicator(props: CheckboxIndicatorProps): React.JSX.Element | null;
|
|
26
|
+
export declare namespace CheckboxIndicator {
|
|
27
|
+
var displayName: string;
|
|
28
|
+
}
|
|
29
|
+
export interface CheckboxLabelProps extends LynxStyledElementProps {
|
|
30
|
+
}
|
|
31
|
+
export declare const CheckboxLabel: React.ForwardRefExoticComponent<CheckboxLabelProps & React.RefAttributes<unknown>>;
|
|
32
|
+
export interface CheckboxGroupProps extends LynxStyledElementProps {
|
|
33
|
+
}
|
|
34
|
+
export declare const CheckboxGroup: React.ForwardRefExoticComponent<CheckboxGroupProps & React.RefAttributes<unknown>>;
|
|
35
|
+
//# sourceMappingURL=Checkbox.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAAkB,KAAK,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAInE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,wCAAwC,CAAC;AAEnF,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;AAKrF,OAAO,KAAK,EACV,oBAAoB,EACpB,sBAAsB,EAGvB,MAAM,aAAa,CAAC;AAuDrB,MAAM,WAAW,iBACf,SAAQ,oBAAoB,EAC1B,IAAI,CAAC,qBAAqB,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,eAAe,CAAC,EAC9E,sBAAsB;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C;AAED,eAAO,MAAM,YAAY,mFA8DvB,CAAC;AAKH,MAAM,WAAW,oBACf,SAAQ,IAAI,CAAC,qBAAqB,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC,EAC9D,sBAAsB;CAAG;AAE7B,eAAO,MAAM,eAAe,sFA2B1B,CAAC;AAKH,MAAM,WAAW,sBACf,SAAQ,IAAI,CAAC,sBAAsB,EAAE,WAAW,GAAG,OAAO,CAAC;IAC3D,sEAAsE;IACtE,SAAS,CAAC,EAAE,YAAY,CAAC,oBAAoB,CAAC,CAAC;IAC/C,mEAAmE;IACnE,OAAO,EAAE,YAAY,CAAC,oBAAoB,CAAC,CAAC;IAC5C,+CAA+C;IAC/C,aAAa,CAAC,EAAE,YAAY,CAAC,oBAAoB,CAAC,CAAC;CACpD;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,4BAwC9D;yBAxCe,iBAAiB;;;AA6CjC,MAAM,WAAW,kBAAmB,SAAQ,sBAAsB;CAAG;AAErE,eAAO,MAAM,aAAa,oFAiBxB,CAAC;AAKH,MAAM,WAAW,kBAAmB,SAAQ,sBAAsB;CAAG;AAErE,eAAO,MAAM,aAAa,oFAaxB,CAAC"}
|