@seed-design/lynx-react 0.4.1 → 0.5.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/Accordion/Accordion.d.ts +56 -0
- package/lib/components/Accordion/Accordion.d.ts.map +1 -0
- package/lib/components/Accordion/Accordion.jsx +210 -0
- package/lib/components/Accordion/Accordion.namespace.d.ts +2 -0
- package/lib/components/Accordion/Accordion.namespace.d.ts.map +1 -0
- package/lib/components/Accordion/Accordion.namespace.js +17 -0
- package/lib/components/Accordion/index.d.ts +3 -0
- package/lib/components/Accordion/index.d.ts.map +1 -0
- package/lib/components/ActionButton/ActionButton.jsx +6 -6
- package/lib/components/AppBar/AppBar.jsx +1 -1
- package/lib/components/Badge/Badge.jsx +1 -1
- package/lib/components/BottomSheet/BottomSheet.d.ts.map +1 -1
- package/lib/components/BottomSheet/BottomSheet.jsx +6 -3
- package/lib/components/Box/Box.jsx +1 -1
- package/lib/components/Callout/Callout.d.ts +32 -0
- package/lib/components/Callout/Callout.d.ts.map +1 -0
- package/lib/components/Callout/Callout.jsx +113 -0
- package/lib/components/Callout/Callout.namespace.d.ts +2 -0
- package/lib/components/Callout/Callout.namespace.d.ts.map +1 -0
- package/lib/components/Callout/Callout.namespace.js +13 -0
- package/lib/components/Callout/index.d.ts +3 -0
- package/lib/components/Callout/index.d.ts.map +1 -0
- package/lib/components/Checkbox/Checkbox.d.ts.map +1 -1
- package/lib/components/Checkbox/Checkbox.jsx +36 -5
- package/lib/components/Chip/Chip.d.ts +66 -0
- package/lib/components/Chip/Chip.d.ts.map +1 -0
- package/lib/components/Chip/Chip.jsx +159 -0
- package/lib/components/Chip/Chip.namespace.d.ts +2 -0
- package/lib/components/Chip/Chip.namespace.d.ts.map +1 -0
- package/lib/components/Chip/Chip.namespace.js +16 -0
- package/lib/components/Chip/index.d.ts +3 -0
- package/lib/components/Chip/index.d.ts.map +1 -0
- package/lib/components/Divider/Divider.d.ts +31 -0
- package/lib/components/Divider/Divider.d.ts.map +1 -0
- package/lib/components/Divider/Divider.jsx +26 -0
- package/lib/components/Divider/index.d.ts +2 -0
- package/lib/components/Divider/index.d.ts.map +1 -0
- package/lib/components/Field/Field.jsx +1 -1
- package/lib/components/Icon/Icon.jsx +2 -2
- package/lib/components/ProgressCircle/ProgressCircle.jsx +2 -2
- package/lib/components/RadioGroup/RadioGroup.jsx +2 -2
- package/lib/components/Stack/Stack.jsx +1 -1
- package/lib/components/Switch/Switch.jsx +2 -2
- package/lib/components/Tabs/Tabs.d.ts +59 -0
- package/lib/components/Tabs/Tabs.d.ts.map +1 -0
- package/lib/components/Tabs/Tabs.jsx +419 -0
- package/lib/components/Tabs/Tabs.namespace.d.ts +2 -0
- package/lib/components/Tabs/Tabs.namespace.d.ts.map +1 -0
- package/lib/components/Tabs/Tabs.namespace.js +14 -0
- package/lib/components/Tabs/Tabs.utils.d.ts +18 -0
- package/lib/components/Tabs/Tabs.utils.d.ts.map +1 -0
- package/lib/components/Tabs/Tabs.utils.js +37 -0
- package/lib/components/Tabs/index.d.ts +3 -0
- package/lib/components/Tabs/index.d.ts.map +1 -0
- package/lib/components/TagGroup/TagGroup.jsx +2 -2
- package/lib/components/Text/Text.jsx +2 -2
- package/lib/components/TextField/TextField.jsx +2 -2
- package/lib/components/index.d.ts +5 -0
- package/lib/components/index.d.ts.map +1 -1
- package/lib/hooks/useIconColor.d.ts +2 -1
- package/lib/hooks/useIconColor.d.ts.map +1 -1
- package/lib/hooks/useIconColor.js +29 -5
- package/lib/hooks/usePressTap.d.ts.map +1 -1
- package/lib/hooks/usePressTap.js +1 -0
- package/lib/index.js +14 -5
- package/lib/utils/create-slot-recipe-context.jsx +1 -1
- package/package.json +2 -2
- package/src/components/Accordion/Accordion.namespace.ts +22 -0
- package/src/components/Accordion/Accordion.test.tsx +129 -0
- package/src/components/Accordion/Accordion.tsx +453 -0
- package/src/components/Accordion/index.ts +24 -0
- package/src/components/BottomSheet/BottomSheet.test.tsx +24 -0
- package/src/components/BottomSheet/BottomSheet.tsx +14 -2
- package/src/components/Callout/Callout.namespace.ts +14 -0
- package/src/components/Callout/Callout.test.tsx +188 -0
- package/src/components/Callout/Callout.tsx +272 -0
- package/src/components/Callout/index.ts +16 -0
- package/src/components/Checkbox/Checkbox.test.tsx +176 -0
- package/src/components/Checkbox/Checkbox.tsx +36 -2
- package/src/components/Chip/Chip.namespace.ts +20 -0
- package/src/components/Chip/Chip.test.tsx +113 -0
- package/src/components/Chip/Chip.tsx +373 -0
- package/src/components/Chip/index.ts +22 -0
- package/src/components/Divider/Divider.test.tsx +73 -0
- package/src/components/Divider/Divider.tsx +76 -0
- package/src/components/Divider/index.ts +1 -0
- package/src/components/Icon/Icon.test.tsx +129 -0
- package/src/components/Tabs/Tabs.namespace.ts +16 -0
- package/src/components/Tabs/Tabs.test.tsx +221 -0
- package/src/components/Tabs/Tabs.tsx +727 -0
- package/src/components/Tabs/Tabs.utils.ts +56 -0
- package/src/components/Tabs/index.ts +2 -0
- package/src/components/index.ts +5 -0
- package/src/hooks/useIconColor.ts +43 -5
- package/src/hooks/usePressTap.test.ts +13 -0
- package/src/hooks/usePressTap.ts +1 -0
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import { ReactElement } from '@lynx-js/react';
|
|
2
|
+
import { AccordionVariantProps } from '@seed-design/lynx-css/recipes/accordion';
|
|
3
|
+
import { LynxAccessibilityProps, LynxIconElementProps, LynxPressableProps, LynxStyledElementProps } from '../../types';
|
|
4
|
+
import * as React from "@lynx-js/react";
|
|
5
|
+
/**
|
|
6
|
+
* @platform Lynx
|
|
7
|
+
*
|
|
8
|
+
* 웹 대비 미지원 기능:
|
|
9
|
+
* - `asChild`: Lynx에 Slot 기반 polymorphic 렌더링이 없음
|
|
10
|
+
* - `headingLevel`: Lynx 접근성 heading은 level을 받지 않음
|
|
11
|
+
* - DOM ARIA와 키보드 탐색: Lynx native 접근성 속성과 tap 상호작용으로 대체
|
|
12
|
+
* - `size="responsive"`: Lynx preset은 viewport media query를 지원하지 않음
|
|
13
|
+
*/
|
|
14
|
+
type PublicAccordionVariantProps = Omit<AccordionVariantProps, "open" | "pressed" | "disabled">;
|
|
15
|
+
export interface AccordionRootProps extends PublicAccordionVariantProps, LynxStyledElementProps {
|
|
16
|
+
values?: string[];
|
|
17
|
+
defaultValues?: string[];
|
|
18
|
+
onValuesChange?: (values: string[]) => void;
|
|
19
|
+
disabled?: boolean;
|
|
20
|
+
multiple?: boolean;
|
|
21
|
+
}
|
|
22
|
+
export declare const AccordionRoot: React.ForwardRefExoticComponent<AccordionRootProps & React.RefAttributes<unknown>>;
|
|
23
|
+
export interface AccordionItemProps extends LynxStyledElementProps {
|
|
24
|
+
value: string;
|
|
25
|
+
disabled?: boolean;
|
|
26
|
+
}
|
|
27
|
+
export declare const AccordionItem: React.ForwardRefExoticComponent<AccordionItemProps & React.RefAttributes<unknown>>;
|
|
28
|
+
export interface AccordionHeaderProps extends LynxStyledElementProps, LynxAccessibilityProps {
|
|
29
|
+
}
|
|
30
|
+
export declare const AccordionHeader: React.ForwardRefExoticComponent<AccordionHeaderProps & React.RefAttributes<unknown>>;
|
|
31
|
+
export interface AccordionTriggerProps extends LynxStyledElementProps, LynxAccessibilityProps, Pick<LynxPressableProps, "bindtap"> {
|
|
32
|
+
expandedAccessibilityValue?: string;
|
|
33
|
+
collapsedAccessibilityValue?: string;
|
|
34
|
+
}
|
|
35
|
+
export declare const AccordionTrigger: React.ForwardRefExoticComponent<AccordionTriggerProps & React.RefAttributes<unknown>>;
|
|
36
|
+
export interface AccordionContentProps extends LynxStyledElementProps, LynxAccessibilityProps {
|
|
37
|
+
}
|
|
38
|
+
export declare const AccordionContent: React.ForwardRefExoticComponent<AccordionContentProps & React.RefAttributes<unknown>>;
|
|
39
|
+
export interface AccordionBodyProps extends LynxStyledElementProps {
|
|
40
|
+
}
|
|
41
|
+
export declare const AccordionBody: React.ForwardRefExoticComponent<AccordionBodyProps & React.RefAttributes<unknown>>;
|
|
42
|
+
export interface AccordionTitleProps extends LynxStyledElementProps {
|
|
43
|
+
}
|
|
44
|
+
export declare const AccordionTitle: React.ForwardRefExoticComponent<AccordionTitleProps & React.RefAttributes<unknown>>;
|
|
45
|
+
export interface AccordionDescriptionProps extends LynxStyledElementProps {
|
|
46
|
+
}
|
|
47
|
+
export declare const AccordionDescription: React.ForwardRefExoticComponent<AccordionDescriptionProps & React.RefAttributes<unknown>>;
|
|
48
|
+
export interface AccordionPrefixProps extends LynxStyledElementProps {
|
|
49
|
+
}
|
|
50
|
+
export declare const AccordionPrefix: React.ForwardRefExoticComponent<AccordionPrefixProps & React.RefAttributes<unknown>>;
|
|
51
|
+
export interface AccordionSuffixIconProps extends LynxStyledElementProps {
|
|
52
|
+
icon?: ReactElement<LynxIconElementProps>;
|
|
53
|
+
}
|
|
54
|
+
export declare const AccordionSuffixIcon: React.ForwardRefExoticComponent<AccordionSuffixIconProps & React.RefAttributes<unknown>>;
|
|
55
|
+
export {};
|
|
56
|
+
//# sourceMappingURL=Accordion.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AACxC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGnD,OAAO,EAAa,KAAK,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;AAIhG,OAAO,KAAK,EACV,sBAAsB,EACtB,oBAAoB,EACpB,kBAAkB,EAClB,sBAAsB,EAIvB,MAAM,aAAa,CAAC;AAKrB;;;;;;;;GAQG;AAEH,KAAK,2BAA2B,GAAG,IAAI,CAAC,qBAAqB,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,CAAC,CAAC;AA0ChG,MAAM,WAAW,kBAAmB,SAAQ,2BAA2B,EAAE,sBAAsB;IAC7F,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,aAAa,oFA8DxB,CAAC;AAKH,MAAM,WAAW,kBAAmB,SAAQ,sBAAsB;IAChE,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,aAAa,oFAkCxB,CAAC;AAKH,MAAM,WAAW,oBAAqB,SAAQ,sBAAsB,EAAE,sBAAsB;CAAG;AAE/F,eAAO,MAAM,eAAe,sFAmB1B,CAAC;AAKH,MAAM,WAAW,qBACf,SAAQ,sBAAsB,EAC5B,sBAAsB,EACtB,IAAI,CAAC,kBAAkB,EAAE,SAAS,CAAC;IACrC,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,2BAA2B,CAAC,EAAE,MAAM,CAAC;CACtC;AAED,eAAO,MAAM,gBAAgB,uFAoD3B,CAAC;AAKH,MAAM,WAAW,qBAAsB,SAAQ,sBAAsB,EAAE,sBAAsB;CAAG;AAYhG,eAAO,MAAM,gBAAgB,uFA6B3B,CAAC;AAKH,MAAM,WAAW,kBAAmB,SAAQ,sBAAsB;CAAG;AAErE,eAAO,MAAM,aAAa,oFAaxB,CAAC;AAKH,MAAM,WAAW,mBAAoB,SAAQ,sBAAsB;CAAG;AAEtE,eAAO,MAAM,cAAc,qFAazB,CAAC;AAKH,MAAM,WAAW,yBAA0B,SAAQ,sBAAsB;CAAG;AAE5E,eAAO,MAAM,oBAAoB,2FAehC,CAAC;AAKF,MAAM,WAAW,oBAAqB,SAAQ,sBAAsB;CAAG;AAEvE,eAAO,MAAM,eAAe,sFAa1B,CAAC;AAKH,MAAM,WAAW,wBAAyB,SAAQ,sBAAsB;IACtE,IAAI,CAAC,EAAE,YAAY,CAAC,oBAAoB,CAAC,CAAC;CAC3C;AAED,eAAO,MAAM,mBAAmB,0FAoC/B,CAAC"}
|
|
@@ -0,0 +1,210 @@
|
|
|
1
|
+
import { useControllableState } from "../../hooks/useControllableState.js";
|
|
2
|
+
import { usePressTap } from "../../hooks/usePressTap.js";
|
|
3
|
+
import { toArray } from "../../utils/children.js";
|
|
4
|
+
import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context.jsx";
|
|
5
|
+
import { InternalIcon } from "../Icon/Icon.jsx";
|
|
6
|
+
import * as React from "@lynx-js/react";
|
|
7
|
+
import clsx from "clsx";
|
|
8
|
+
import { accordion } from "@seed-design/lynx-css/recipes/accordion";
|
|
9
|
+
//#region src/components/Accordion/Accordion.tsx
|
|
10
|
+
var AccordionContext = React.createContext(null);
|
|
11
|
+
function useAccordionContext(consumer) {
|
|
12
|
+
const context = React.useContext(AccordionContext);
|
|
13
|
+
if (!context) throw new Error(`<${consumer}/> must be rendered inside <AccordionRoot/>.`);
|
|
14
|
+
return context;
|
|
15
|
+
}
|
|
16
|
+
var AccordionItemContext = React.createContext(null);
|
|
17
|
+
var AccordionItemPositionContext = React.createContext({ isLast: false });
|
|
18
|
+
function useAccordionItemContext(consumer) {
|
|
19
|
+
const context = React.useContext(AccordionItemContext);
|
|
20
|
+
if (!context) throw new Error(`<${consumer}/> must be rendered inside <AccordionItem/>.`);
|
|
21
|
+
return context;
|
|
22
|
+
}
|
|
23
|
+
var { ClassNamesProvider, useClassNames } = createSlotRecipeContext(accordion);
|
|
24
|
+
var AccordionRoot = React.forwardRef((props, ref) => {
|
|
25
|
+
const { children, className, values: valuesProp, defaultValues = [], onValuesChange, disabled = false, multiple = false, ...restProps } = props;
|
|
26
|
+
const [variantProps, nativeProps] = accordion.splitVariantProps(restProps);
|
|
27
|
+
const [rawValues, setValues] = useControllableState({
|
|
28
|
+
value: valuesProp,
|
|
29
|
+
defaultValue: defaultValues,
|
|
30
|
+
onChange: onValuesChange
|
|
31
|
+
});
|
|
32
|
+
const values = multiple ? rawValues : rawValues.slice(0, 1);
|
|
33
|
+
const toggle = React.useCallback((itemValue) => {
|
|
34
|
+
if (disabled) return;
|
|
35
|
+
if (!multiple) {
|
|
36
|
+
setValues(values[0] === itemValue ? [] : [itemValue]);
|
|
37
|
+
return;
|
|
38
|
+
}
|
|
39
|
+
setValues(values.includes(itemValue) ? values.filter((value) => value !== itemValue) : [...values, itemValue]);
|
|
40
|
+
}, [
|
|
41
|
+
disabled,
|
|
42
|
+
multiple,
|
|
43
|
+
setValues,
|
|
44
|
+
values
|
|
45
|
+
]);
|
|
46
|
+
const contextValue = React.useMemo(() => ({
|
|
47
|
+
values,
|
|
48
|
+
disabled,
|
|
49
|
+
variantProps,
|
|
50
|
+
toggle
|
|
51
|
+
}), [
|
|
52
|
+
disabled,
|
|
53
|
+
toggle,
|
|
54
|
+
values,
|
|
55
|
+
variantProps
|
|
56
|
+
]);
|
|
57
|
+
const classes = accordion({
|
|
58
|
+
...variantProps,
|
|
59
|
+
disabled
|
|
60
|
+
});
|
|
61
|
+
const items = toArray(children);
|
|
62
|
+
return <AccordionContext.Provider value={contextValue}>
|
|
63
|
+
<view {...ref ? { ref } : {}} className={clsx(classes.root, className)} {...nativeProps}>
|
|
64
|
+
{items.map((item, index) => <AccordionItemPositionContext.Provider key={React.isValidElement(item) ? item.key ?? index : index} value={{ isLast: index === items.length - 1 }}>
|
|
65
|
+
{item}
|
|
66
|
+
</AccordionItemPositionContext.Provider>)}
|
|
67
|
+
</view>
|
|
68
|
+
</AccordionContext.Provider>;
|
|
69
|
+
});
|
|
70
|
+
AccordionRoot.displayName = "AccordionRoot";
|
|
71
|
+
var AccordionItem = React.forwardRef((props, ref) => {
|
|
72
|
+
const { children, className, value, disabled: itemDisabled = false, ...nativeProps } = props;
|
|
73
|
+
const accordionContext = useAccordionContext("AccordionItem");
|
|
74
|
+
const { isLast } = React.useContext(AccordionItemPositionContext);
|
|
75
|
+
const disabled = accordionContext.disabled || itemDisabled;
|
|
76
|
+
const open = accordionContext.values.includes(value);
|
|
77
|
+
const toggle = React.useCallback(() => accordionContext.toggle(value), [accordionContext, value]);
|
|
78
|
+
const classes = accordion({
|
|
79
|
+
...accordionContext.variantProps,
|
|
80
|
+
open,
|
|
81
|
+
disabled,
|
|
82
|
+
pressed: false
|
|
83
|
+
});
|
|
84
|
+
const contextValue = React.useMemo(() => ({
|
|
85
|
+
value,
|
|
86
|
+
open,
|
|
87
|
+
disabled,
|
|
88
|
+
variantProps: accordionContext.variantProps,
|
|
89
|
+
toggle
|
|
90
|
+
}), [
|
|
91
|
+
accordionContext.variantProps,
|
|
92
|
+
disabled,
|
|
93
|
+
open,
|
|
94
|
+
toggle,
|
|
95
|
+
value
|
|
96
|
+
]);
|
|
97
|
+
return <AccordionItemContext.Provider value={contextValue}>
|
|
98
|
+
<ClassNamesProvider value={classes}>
|
|
99
|
+
<view {...ref ? { ref } : {}} className={clsx(classes.item, className)} {...nativeProps}>
|
|
100
|
+
{children}
|
|
101
|
+
{!isLast ? <view className={classes.divider} accessibility-elements-hidden={true} /> : null}
|
|
102
|
+
</view>
|
|
103
|
+
</ClassNamesProvider>
|
|
104
|
+
</AccordionItemContext.Provider>;
|
|
105
|
+
});
|
|
106
|
+
AccordionItem.displayName = "AccordionItem";
|
|
107
|
+
var AccordionHeader = React.forwardRef((props, ref) => {
|
|
108
|
+
const { children, className, "accessibility-heading": accessibilityHeading = true, ...nativeProps } = props;
|
|
109
|
+
const classes = useClassNames();
|
|
110
|
+
return <view {...ref ? { ref } : {}} className={clsx(classes.header, className)} accessibility-heading={accessibilityHeading} {...nativeProps}>
|
|
111
|
+
{children}
|
|
112
|
+
</view>;
|
|
113
|
+
});
|
|
114
|
+
AccordionHeader.displayName = "AccordionHeader";
|
|
115
|
+
var AccordionTrigger = React.forwardRef((props, ref) => {
|
|
116
|
+
const { children, className, bindtap, expandedAccessibilityValue = "펼쳐짐", collapsedAccessibilityValue = "접힘", "accessibility-element": accessibilityElement = true, "accessibility-role-description": accessibilityRoleDescription = "button", "accessibility-traits": accessibilityTraits, "accessibility-value": accessibilityValue, ...nativeProps } = props;
|
|
117
|
+
const context = useAccordionItemContext("AccordionTrigger");
|
|
118
|
+
const handleTap = React.useCallback((event) => {
|
|
119
|
+
context.toggle();
|
|
120
|
+
bindtap?.(event);
|
|
121
|
+
}, [bindtap, context]);
|
|
122
|
+
const { pressed, ...pressHandlers } = usePressTap({
|
|
123
|
+
disabled: context.disabled,
|
|
124
|
+
onTap: handleTap
|
|
125
|
+
});
|
|
126
|
+
const classes = accordion({
|
|
127
|
+
...context.variantProps,
|
|
128
|
+
open: context.open,
|
|
129
|
+
disabled: context.disabled,
|
|
130
|
+
pressed
|
|
131
|
+
});
|
|
132
|
+
return <ClassNamesProvider value={classes}>
|
|
133
|
+
<view {...ref ? { ref } : {}} className={clsx(classes.trigger, className)} accessibility-element={accessibilityElement} accessibility-role-description={accessibilityRoleDescription} accessibility-traits={accessibilityTraits ?? (context.disabled ? "disabled" : "button")} accessibility-value={accessibilityValue ?? (context.open ? expandedAccessibilityValue : collapsedAccessibilityValue)} {...pressHandlers} {...nativeProps}>
|
|
134
|
+
<view className={classes.pressedOverlay} accessibility-elements-hidden={true} />
|
|
135
|
+
{children}
|
|
136
|
+
</view>
|
|
137
|
+
</ClassNamesProvider>;
|
|
138
|
+
});
|
|
139
|
+
AccordionTrigger.displayName = "AccordionTrigger";
|
|
140
|
+
function getContentLayoutHeight(event) {
|
|
141
|
+
const eventWithHeight = event;
|
|
142
|
+
const height = event.detail?.height ?? event.params?.height ?? eventWithHeight.height;
|
|
143
|
+
if (typeof height !== "number" || !Number.isFinite(height)) return null;
|
|
144
|
+
return Math.max(0, height);
|
|
145
|
+
}
|
|
146
|
+
var AccordionContent = React.forwardRef((props, ref) => {
|
|
147
|
+
const { children, className, style, "accessibility-elements-hidden": accessibilityElementsHidden = false, ...nativeProps } = props;
|
|
148
|
+
const context = useAccordionItemContext("AccordionContent");
|
|
149
|
+
const classes = useClassNames();
|
|
150
|
+
const [contentHeight, setContentHeight] = React.useState(0);
|
|
151
|
+
const handleContentLayoutChange = React.useCallback((event) => {
|
|
152
|
+
const height = getContentLayoutHeight(event);
|
|
153
|
+
if (height !== null) setContentHeight((current) => current === height ? current : height);
|
|
154
|
+
}, []);
|
|
155
|
+
return <view {...ref ? { ref } : {}} className={clsx(classes.content, className)} style={{
|
|
156
|
+
...style,
|
|
157
|
+
height: context.open ? `${contentHeight}px` : "0px"
|
|
158
|
+
}} accessibility-elements-hidden={!context.open || accessibilityElementsHidden} {...nativeProps}>
|
|
159
|
+
<view className={classes.contentInner} bindlayoutchange={handleContentLayoutChange}>
|
|
160
|
+
{children}
|
|
161
|
+
</view>
|
|
162
|
+
</view>;
|
|
163
|
+
});
|
|
164
|
+
AccordionContent.displayName = "AccordionContent";
|
|
165
|
+
var AccordionBody = React.forwardRef((props, ref) => {
|
|
166
|
+
const { children, className, ...nativeProps } = props;
|
|
167
|
+
const classes = useClassNames();
|
|
168
|
+
return <view {...ref ? { ref } : {}} className={clsx(classes.body, className)} {...nativeProps}>
|
|
169
|
+
{children}
|
|
170
|
+
</view>;
|
|
171
|
+
});
|
|
172
|
+
AccordionBody.displayName = "AccordionBody";
|
|
173
|
+
var AccordionTitle = React.forwardRef((props, ref) => {
|
|
174
|
+
const { children, className, ...nativeProps } = props;
|
|
175
|
+
const classes = useClassNames();
|
|
176
|
+
return <text {...ref ? { ref } : {}} className={clsx(classes.title, className)} {...nativeProps}>
|
|
177
|
+
{children}
|
|
178
|
+
</text>;
|
|
179
|
+
});
|
|
180
|
+
AccordionTitle.displayName = "AccordionTitle";
|
|
181
|
+
var AccordionDescription = React.forwardRef((props, ref) => {
|
|
182
|
+
const { children, className, ...nativeProps } = props;
|
|
183
|
+
const classes = useClassNames();
|
|
184
|
+
return <text {...ref ? { ref } : {}} className={clsx(classes.description, className)} {...nativeProps}>
|
|
185
|
+
{children}
|
|
186
|
+
</text>;
|
|
187
|
+
});
|
|
188
|
+
AccordionDescription.displayName = "AccordionDescription";
|
|
189
|
+
var AccordionPrefix = React.forwardRef((props, ref) => {
|
|
190
|
+
const { children, className, ...nativeProps } = props;
|
|
191
|
+
const classes = useClassNames();
|
|
192
|
+
return <view {...ref ? { ref } : {}} className={clsx(classes.prefix, className)} {...nativeProps}>
|
|
193
|
+
{children}
|
|
194
|
+
</view>;
|
|
195
|
+
});
|
|
196
|
+
AccordionPrefix.displayName = "AccordionPrefix";
|
|
197
|
+
var AccordionSuffixIcon = React.forwardRef((props, ref) => {
|
|
198
|
+
const { icon, children, className, style, ...nativeProps } = props;
|
|
199
|
+
const context = useAccordionItemContext("AccordionSuffixIcon");
|
|
200
|
+
const mergedClassName = clsx(useClassNames().suffixIcon, className);
|
|
201
|
+
if (icon) return <view {...ref ? { ref } : {}} accessibility-elements-hidden={true} {...nativeProps}>
|
|
202
|
+
<InternalIcon icon={icon} className={mergedClassName} style={style} deps={[context.open, context.disabled]} />
|
|
203
|
+
</view>;
|
|
204
|
+
return <view {...ref ? { ref } : {}} className={mergedClassName} style={style} accessibility-elements-hidden={true} {...nativeProps}>
|
|
205
|
+
{children}
|
|
206
|
+
</view>;
|
|
207
|
+
});
|
|
208
|
+
AccordionSuffixIcon.displayName = "AccordionSuffixIcon";
|
|
209
|
+
//#endregion
|
|
210
|
+
export { AccordionBody, AccordionContent, AccordionDescription, AccordionHeader, AccordionItem, AccordionPrefix, AccordionRoot, AccordionSuffixIcon, AccordionTitle, AccordionTrigger };
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
export { AccordionBody as Body, AccordionContent as Content, AccordionDescription as Description, AccordionHeader as Header, AccordionItem as Item, AccordionPrefix as Prefix, AccordionRoot as Root, AccordionSuffixIcon as SuffixIcon, AccordionTitle as Title, AccordionTrigger as Trigger, type AccordionBodyProps as BodyProps, type AccordionContentProps as ContentProps, type AccordionDescriptionProps as DescriptionProps, type AccordionHeaderProps as HeaderProps, type AccordionItemProps as ItemProps, type AccordionPrefixProps as PrefixProps, type AccordionRootProps as RootProps, type AccordionSuffixIconProps as SuffixIconProps, type AccordionTitleProps as TitleProps, type AccordionTriggerProps as TriggerProps, } from './Accordion';
|
|
2
|
+
//# sourceMappingURL=Accordion.namespace.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Accordion.namespace.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.namespace.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,IAAI,IAAI,EACrB,gBAAgB,IAAI,OAAO,EAC3B,oBAAoB,IAAI,WAAW,EACnC,eAAe,IAAI,MAAM,EACzB,aAAa,IAAI,IAAI,EACrB,eAAe,IAAI,MAAM,EACzB,aAAa,IAAI,IAAI,EACrB,mBAAmB,IAAI,UAAU,EACjC,cAAc,IAAI,KAAK,EACvB,gBAAgB,IAAI,OAAO,EAC3B,KAAK,kBAAkB,IAAI,SAAS,EACpC,KAAK,qBAAqB,IAAI,YAAY,EAC1C,KAAK,yBAAyB,IAAI,gBAAgB,EAClD,KAAK,oBAAoB,IAAI,WAAW,EACxC,KAAK,kBAAkB,IAAI,SAAS,EACpC,KAAK,oBAAoB,IAAI,WAAW,EACxC,KAAK,kBAAkB,IAAI,SAAS,EACpC,KAAK,wBAAwB,IAAI,eAAe,EAChD,KAAK,mBAAmB,IAAI,UAAU,EACtC,KAAK,qBAAqB,IAAI,YAAY,GAC3C,MAAM,aAAa,CAAC"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
|
|
2
|
+
import { AccordionBody, AccordionContent, AccordionDescription, AccordionHeader, AccordionItem, AccordionPrefix, AccordionRoot, AccordionSuffixIcon, AccordionTitle, AccordionTrigger } from "./Accordion.jsx";
|
|
3
|
+
//#region src/components/Accordion/Accordion.namespace.ts
|
|
4
|
+
var Accordion_namespace_exports = /* @__PURE__ */ __exportAll({
|
|
5
|
+
Body: () => AccordionBody,
|
|
6
|
+
Content: () => AccordionContent,
|
|
7
|
+
Description: () => AccordionDescription,
|
|
8
|
+
Header: () => AccordionHeader,
|
|
9
|
+
Item: () => AccordionItem,
|
|
10
|
+
Prefix: () => AccordionPrefix,
|
|
11
|
+
Root: () => AccordionRoot,
|
|
12
|
+
SuffixIcon: () => AccordionSuffixIcon,
|
|
13
|
+
Title: () => AccordionTitle,
|
|
14
|
+
Trigger: () => AccordionTrigger
|
|
15
|
+
});
|
|
16
|
+
//#endregion
|
|
17
|
+
export { Accordion_namespace_exports };
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export { AccordionRoot, AccordionItem, AccordionHeader, AccordionTrigger, AccordionContent, AccordionBody, AccordionTitle, AccordionDescription, AccordionPrefix, AccordionSuffixIcon, type AccordionRootProps, type AccordionItemProps, type AccordionHeaderProps, type AccordionTriggerProps, type AccordionContentProps, type AccordionBodyProps, type AccordionTitleProps, type AccordionDescriptionProps, type AccordionPrefixProps, type AccordionSuffixIconProps, } from './Accordion';
|
|
2
|
+
export * as Accordion from './Accordion.namespace';
|
|
3
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,aAAa,EACb,eAAe,EACf,gBAAgB,EAChB,gBAAgB,EAChB,aAAa,EACb,cAAc,EACd,oBAAoB,EACpB,eAAe,EACf,mBAAmB,EACnB,KAAK,kBAAkB,EACvB,KAAK,kBAAkB,EACvB,KAAK,oBAAoB,EACzB,KAAK,qBAAqB,EAC1B,KAAK,qBAAqB,EAC1B,KAAK,kBAAkB,EACvB,KAAK,mBAAmB,EACxB,KAAK,yBAAyB,EAC9B,KAAK,oBAAoB,EACzB,KAAK,wBAAwB,GAC9B,MAAM,aAAa,CAAC;AAErB,OAAO,KAAK,SAAS,MAAM,uBAAuB,CAAC"}
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import { usePressTap } from "../../hooks/usePressTap.js";
|
|
2
|
-
import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context.jsx";
|
|
3
2
|
import { toArray } from "../../utils/children.js";
|
|
4
|
-
import {
|
|
3
|
+
import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context.jsx";
|
|
5
4
|
import { resolveFlexValue } from "../../utils/styled.js";
|
|
6
|
-
import { ProgressCircleRange, ProgressCircleRoot } from "../ProgressCircle/ProgressCircle.jsx";
|
|
7
5
|
import { Icon, IconRequired, IconSlotProvider, PrefixIcon, SuffixIcon, getIconSlotName } from "../Icon/Icon.jsx";
|
|
6
|
+
import { capitalize, resolveRecipeToken } from "../../utils/resolve-recipe-token.js";
|
|
7
|
+
import { ProgressCircleRange, ProgressCircleRoot } from "../ProgressCircle/ProgressCircle.jsx";
|
|
8
|
+
import * as React from "@lynx-js/react";
|
|
9
|
+
import { isValidElement, useMemo } from "@lynx-js/react";
|
|
10
|
+
import clsx from "clsx";
|
|
8
11
|
import { actionButton } from "@seed-design/lynx-css/recipes/action-button";
|
|
9
12
|
import { progressCircleVariantMap } from "@seed-design/lynx-css/recipes/progress-circle";
|
|
10
13
|
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
14
|
//#region src/components/ActionButton/ActionButton.tsx
|
|
15
15
|
var { ClassNamesProvider, useClassNames, PropsProvider } = createSlotRecipeContext(actionButton);
|
|
16
16
|
function resolveProgressCircleSize(actionButtonSize) {
|
|
@@ -2,8 +2,8 @@ import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context.
|
|
|
2
2
|
import { Icon } from "../Icon/Icon.jsx";
|
|
3
3
|
import { AppBarProvider, useAppBarContext } from "./context.js";
|
|
4
4
|
import { getLayoutWidth, getMainLayoutStyle, useAppBar } from "./useAppBar.js";
|
|
5
|
-
import clsx from "clsx";
|
|
6
5
|
import * as React from "@lynx-js/react";
|
|
6
|
+
import clsx from "clsx";
|
|
7
7
|
import { appBar } from "@seed-design/lynx-css/recipes/app-bar";
|
|
8
8
|
import { appBarMain } from "@seed-design/lynx-css/recipes/app-bar-main";
|
|
9
9
|
//#region src/components/AppBar/AppBar.tsx
|
|
@@ -1 +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,
|
|
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,CAuCrF,CAAC;AAOL,MAAM,WAAW,sBAAuB,SAAQ,gBAAgB;CAAG;AAEnE;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,GAAG,YAAY,CAW7E;yBAXe,iBAAiB;;;AAwBjC,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,EAAE,uBAAuB,CAAC,OAAO,EAAE,oBAAoB,CAiBjF,CAAC;AAGH,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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context.jsx";
|
|
2
2
|
import { useSafeArea } from "../../hooks/useSafeArea.js";
|
|
3
|
-
import clsx from "clsx";
|
|
4
3
|
import { createContext, forwardRef, useCallback, useContext, useMemo, useRef } from "@lynx-js/react";
|
|
4
|
+
import clsx from "clsx";
|
|
5
5
|
import { bottomSheet } from "@seed-design/lynx-css/recipes/bottom-sheet";
|
|
6
6
|
import { bottomSheetHandle } from "@seed-design/lynx-css/recipes/bottom-sheet-handle";
|
|
7
7
|
import { SheetBackdrop, SheetContent, SheetHandle, SheetRoot, SheetView } from "@lynx-js/lynx-ui-sheet";
|
|
@@ -95,12 +95,15 @@ BottomSheetPositioner.displayName = "BottomSheetPositioner";
|
|
|
95
95
|
var BottomSheetBackdrop = withContext(SheetBackdrop, "backdrop");
|
|
96
96
|
BottomSheetBackdrop.displayName = "BottomSheetBackdrop";
|
|
97
97
|
var BottomSheetContent = forwardRef((props, ref) => {
|
|
98
|
-
const { className, innerStyle, snapAnimation, enterAnimation, exitAnimation, ...restProps } = props;
|
|
98
|
+
const { className, style, innerStyle, snapAnimation, enterAnimation, exitAnimation, ...restProps } = props;
|
|
99
99
|
const classNames = useClassNames();
|
|
100
100
|
const { options } = useBottomSheetContext();
|
|
101
101
|
const { safeAreaInsetBottom } = useSafeArea();
|
|
102
102
|
const defaultAnimation = options.skipAnimation ? SKIP_ANIMATION_TRANSITION : void 0;
|
|
103
|
-
return <SheetContent {...ref ? { ref } : {}} {...restProps} className={clsx(classNames.content, className)}
|
|
103
|
+
return <SheetContent {...ref ? { ref } : {}} {...restProps} className={clsx(classNames.content, className)} style={{
|
|
104
|
+
left: "auto",
|
|
105
|
+
...style
|
|
106
|
+
}} innerStyle={{
|
|
104
107
|
display: "flex",
|
|
105
108
|
flexDirection: "column",
|
|
106
109
|
minHeight: "0",
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { useStyleProps } from "../../utils/styled.js";
|
|
2
|
-
import clsx from "clsx";
|
|
3
2
|
import * as React from "@lynx-js/react";
|
|
3
|
+
import clsx from "clsx";
|
|
4
4
|
//#region src/components/Box/Box.tsx
|
|
5
5
|
var Box = React.forwardRef((props, ref) => {
|
|
6
6
|
const { style, restProps } = useStyleProps(props);
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { CalloutVariantProps } from '@seed-design/lynx-css/recipes/callout';
|
|
2
|
+
import { LynxAccessibilityProps, LynxPressableProps, LynxStyledElementProps } from '../../types';
|
|
3
|
+
import * as React from "@lynx-js/react";
|
|
4
|
+
/**
|
|
5
|
+
* @platform Lynx
|
|
6
|
+
*
|
|
7
|
+
* 웹 대비 차이:
|
|
8
|
+
* - `asChild`와 DOM 이벤트 대신 Lynx native `<view>`와 `bindtap`을 사용합니다.
|
|
9
|
+
* - 웹 focus ring은 지원하지 않습니다.
|
|
10
|
+
*/
|
|
11
|
+
export interface CalloutRootProps extends Omit<CalloutVariantProps, "pressed">, LynxStyledElementProps, LynxPressableProps, LynxAccessibilityProps {
|
|
12
|
+
defaultOpen?: boolean;
|
|
13
|
+
open?: boolean;
|
|
14
|
+
onDismiss?: () => void;
|
|
15
|
+
}
|
|
16
|
+
export declare const CalloutRoot: React.ForwardRefExoticComponent<CalloutRootProps & React.RefAttributes<unknown>>;
|
|
17
|
+
export interface CalloutContentProps extends LynxStyledElementProps, LynxAccessibilityProps {
|
|
18
|
+
}
|
|
19
|
+
export declare const CalloutContent: React.ForwardRefExoticComponent<CalloutContentProps & React.RefAttributes<unknown>>;
|
|
20
|
+
export interface CalloutTitleProps extends LynxStyledElementProps, LynxAccessibilityProps {
|
|
21
|
+
}
|
|
22
|
+
export declare const CalloutTitle: React.ForwardRefExoticComponent<CalloutTitleProps & React.RefAttributes<unknown>>;
|
|
23
|
+
export interface CalloutDescriptionProps extends LynxStyledElementProps, LynxAccessibilityProps {
|
|
24
|
+
}
|
|
25
|
+
export declare const CalloutDescription: React.ForwardRefExoticComponent<CalloutDescriptionProps & React.RefAttributes<unknown>>;
|
|
26
|
+
export interface CalloutLinkProps extends LynxStyledElementProps, LynxPressableProps, LynxAccessibilityProps {
|
|
27
|
+
}
|
|
28
|
+
export declare const CalloutLink: React.ForwardRefExoticComponent<CalloutLinkProps & React.RefAttributes<unknown>>;
|
|
29
|
+
export interface CalloutCloseButtonProps extends LynxStyledElementProps, LynxPressableProps, LynxAccessibilityProps {
|
|
30
|
+
}
|
|
31
|
+
export declare const CalloutCloseButton: React.ForwardRefExoticComponent<CalloutCloseButtonProps & React.RefAttributes<unknown>>;
|
|
32
|
+
//# sourceMappingURL=Callout.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Callout.d.ts","sourceRoot":"","sources":["../../../src/components/Callout/Callout.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,KAAK,mBAAmB,EAAE,MAAM,uCAAuC,CAAC;AAC1F,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAMxC,OAAO,KAAK,EACV,sBAAsB,EACtB,kBAAkB,EAClB,sBAAsB,EAIvB,MAAM,aAAa,CAAC;AA0BrB;;;;;;GAMG;AACH,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,mBAAmB,EAAE,SAAS,CAAC,EAC1C,sBAAsB,EACtB,kBAAkB,EAClB,sBAAsB;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,eAAO,MAAM,WAAW,kFAiEtB,CAAC;AAKH,MAAM,WAAW,mBAAoB,SAAQ,sBAAsB,EAAE,sBAAsB;CAAG;AAE9F,eAAO,MAAM,cAAc,qFAczB,CAAC;AAKH,MAAM,WAAW,iBAAkB,SAAQ,sBAAsB,EAAE,sBAAsB;CAAG;AAE5F,eAAO,MAAM,YAAY,mFAevB,CAAC;AAKH,MAAM,WAAW,uBAAwB,SAAQ,sBAAsB,EAAE,sBAAsB;CAAG;AAElG,eAAO,MAAM,kBAAkB,yFAiB9B,CAAC;AAKF,MAAM,WAAW,gBACf,SAAQ,sBAAsB,EAC5B,kBAAkB,EAClB,sBAAsB;CAAG;AAE7B,eAAO,MAAM,WAAW,kFAuBtB,CAAC;AAKH,MAAM,WAAW,uBACf,SAAQ,sBAAsB,EAC5B,kBAAkB,EAClB,sBAAsB;CAAG;AAE7B,eAAO,MAAM,kBAAkB,yFAsC9B,CAAC"}
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
import { useControllableState } from "../../hooks/useControllableState.js";
|
|
2
|
+
import { usePressTap } from "../../hooks/usePressTap.js";
|
|
3
|
+
import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context.jsx";
|
|
4
|
+
import { IconSlotProvider } from "../Icon/Icon.jsx";
|
|
5
|
+
import * as React from "@lynx-js/react";
|
|
6
|
+
import clsx from "clsx";
|
|
7
|
+
import { useMemoizedFn } from "@lynx-js/lynx-ui-common";
|
|
8
|
+
import { callout } from "@seed-design/lynx-css/recipes/callout";
|
|
9
|
+
//#region src/components/Callout/Callout.tsx
|
|
10
|
+
var { ClassNamesProvider, useClassNames } = createSlotRecipeContext(callout);
|
|
11
|
+
var CalloutContext = React.createContext(null);
|
|
12
|
+
function useCalloutContext(consumer) {
|
|
13
|
+
const context = React.useContext(CalloutContext);
|
|
14
|
+
if (!context) throw new Error(`<${consumer}/> must be rendered inside <CalloutRoot/>.`);
|
|
15
|
+
return context;
|
|
16
|
+
}
|
|
17
|
+
var CalloutRoot = React.forwardRef((props, ref) => {
|
|
18
|
+
const [variantProps, otherProps] = callout.splitVariantProps(props);
|
|
19
|
+
const { children, className, style, defaultOpen = true, open: openProp, onDismiss, bindtap, "main-thread:bindtap": mainThreadBindtap, "accessibility-element": accessibilityElement, "accessibility-traits": accessibilityTraits, ...nativeProps } = otherProps;
|
|
20
|
+
const [open, setOpen] = useControllableState({
|
|
21
|
+
value: openProp,
|
|
22
|
+
defaultValue: defaultOpen
|
|
23
|
+
});
|
|
24
|
+
const isInteractive = bindtap != null || mainThreadBindtap != null;
|
|
25
|
+
const pressTap = usePressTap({
|
|
26
|
+
disabled: !isInteractive,
|
|
27
|
+
onTap: bindtap,
|
|
28
|
+
mainThreadOnTap: mainThreadBindtap
|
|
29
|
+
});
|
|
30
|
+
const classNames = callout({
|
|
31
|
+
...variantProps,
|
|
32
|
+
pressed: pressTap.pressed
|
|
33
|
+
});
|
|
34
|
+
const dismiss = useMemoizedFn(() => {
|
|
35
|
+
if (!open) return;
|
|
36
|
+
setOpen(false);
|
|
37
|
+
onDismiss?.();
|
|
38
|
+
});
|
|
39
|
+
const contextValue = React.useMemo(() => ({ dismiss }), [dismiss]);
|
|
40
|
+
const iconSlotContextValue = React.useMemo(() => ({
|
|
41
|
+
classNames: {
|
|
42
|
+
prefixIcon: classNames.prefixIcon,
|
|
43
|
+
suffixIcon: classNames.suffixIcon
|
|
44
|
+
},
|
|
45
|
+
deps: [variantProps.tone ?? "neutral", pressTap.pressed]
|
|
46
|
+
}), [
|
|
47
|
+
classNames.prefixIcon,
|
|
48
|
+
classNames.suffixIcon,
|
|
49
|
+
pressTap.pressed,
|
|
50
|
+
variantProps.tone
|
|
51
|
+
]);
|
|
52
|
+
if (!open) return null;
|
|
53
|
+
return <CalloutContext.Provider value={contextValue}>
|
|
54
|
+
<ClassNamesProvider value={classNames}>
|
|
55
|
+
<IconSlotProvider value={iconSlotContextValue}>
|
|
56
|
+
<view {...ref ? { ref } : {}} {...nativeProps} {...isInteractive ? pressTap : {}} accessibility-element={accessibilityElement ?? (isInteractive ? true : void 0)} accessibility-traits={accessibilityTraits ?? (isInteractive ? "button" : void 0)} className={clsx(classNames.root, className)} style={style}>
|
|
57
|
+
{children}
|
|
58
|
+
</view>
|
|
59
|
+
</IconSlotProvider>
|
|
60
|
+
</ClassNamesProvider>
|
|
61
|
+
</CalloutContext.Provider>;
|
|
62
|
+
});
|
|
63
|
+
CalloutRoot.displayName = "CalloutRoot";
|
|
64
|
+
var CalloutContent = React.forwardRef((props, ref) => {
|
|
65
|
+
const { children, className, style, ...nativeProps } = props;
|
|
66
|
+
const classNames = useClassNames();
|
|
67
|
+
return <text {...ref ? { ref } : {}} {...nativeProps} className={clsx(classNames.content, className)} style={style}>
|
|
68
|
+
{children}
|
|
69
|
+
</text>;
|
|
70
|
+
});
|
|
71
|
+
CalloutContent.displayName = "CalloutContent";
|
|
72
|
+
var CalloutTitle = React.forwardRef((props, ref) => {
|
|
73
|
+
const { children, className, style, ...nativeProps } = props;
|
|
74
|
+
const classNames = useClassNames();
|
|
75
|
+
return <text {...ref ? { ref } : {}} {...nativeProps} className={clsx(classNames.title, className)} style={style}>
|
|
76
|
+
{children}
|
|
77
|
+
{" "}
|
|
78
|
+
</text>;
|
|
79
|
+
});
|
|
80
|
+
CalloutTitle.displayName = "CalloutTitle";
|
|
81
|
+
var CalloutDescription = React.forwardRef((props, ref) => {
|
|
82
|
+
const { children, className, style, ...nativeProps } = props;
|
|
83
|
+
const classNames = useClassNames();
|
|
84
|
+
return <text {...ref ? { ref } : {}} {...nativeProps} className={clsx(classNames.description, className)} style={style}>
|
|
85
|
+
{children}
|
|
86
|
+
{" "}
|
|
87
|
+
</text>;
|
|
88
|
+
});
|
|
89
|
+
CalloutDescription.displayName = "CalloutDescription";
|
|
90
|
+
var CalloutLink = React.forwardRef((props, ref) => {
|
|
91
|
+
const { children, className, style, "accessibility-element": accessibilityElement = true, "accessibility-traits": accessibilityTraits = "link", ...nativeProps } = props;
|
|
92
|
+
const classNames = useClassNames();
|
|
93
|
+
return <text {...ref ? { ref } : {}} {...nativeProps} accessibility-element={accessibilityElement} accessibility-traits={accessibilityTraits} className={clsx(classNames.link, className)} style={style}>
|
|
94
|
+
{children}
|
|
95
|
+
</text>;
|
|
96
|
+
});
|
|
97
|
+
CalloutLink.displayName = "CalloutLink";
|
|
98
|
+
var CalloutCloseButton = React.forwardRef((props, ref) => {
|
|
99
|
+
const { children, className, style, bindtap, "accessibility-element": accessibilityElement = true, "accessibility-label": accessibilityLabel, "accessibility-traits": accessibilityTraits = "button", ...nativeProps } = props;
|
|
100
|
+
const classNames = useClassNames();
|
|
101
|
+
const { dismiss } = useCalloutContext("CalloutCloseButton");
|
|
102
|
+
const handleTap = useMemoizedFn((event) => {
|
|
103
|
+
bindtap?.(event);
|
|
104
|
+
dismiss();
|
|
105
|
+
});
|
|
106
|
+
if (process.env.NODE_ENV !== "production" && accessibilityElement && !accessibilityLabel) console.warn("CalloutCloseButton requires `accessibility-label` for accessibility.");
|
|
107
|
+
return <view {...ref ? { ref } : {}} {...nativeProps} bindtap={handleTap} accessibility-element={accessibilityElement} accessibility-label={accessibilityLabel} accessibility-traits={accessibilityTraits} className={clsx(classNames.closeButton, className)} style={style}>
|
|
108
|
+
{children}
|
|
109
|
+
</view>;
|
|
110
|
+
});
|
|
111
|
+
CalloutCloseButton.displayName = "CalloutCloseButton";
|
|
112
|
+
//#endregion
|
|
113
|
+
export { CalloutCloseButton, CalloutContent, CalloutDescription, CalloutLink, CalloutRoot, CalloutTitle };
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
export { CalloutCloseButton as CloseButton, CalloutContent as Content, CalloutDescription as Description, CalloutLink as Link, CalloutRoot as Root, CalloutTitle as Title, type CalloutCloseButtonProps as CloseButtonProps, type CalloutContentProps as ContentProps, type CalloutDescriptionProps as DescriptionProps, type CalloutLinkProps as LinkProps, type CalloutRootProps as RootProps, type CalloutTitleProps as TitleProps, } from './Callout';
|
|
2
|
+
//# sourceMappingURL=Callout.namespace.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Callout.namespace.d.ts","sourceRoot":"","sources":["../../../src/components/Callout/Callout.namespace.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,IAAI,WAAW,EACjC,cAAc,IAAI,OAAO,EACzB,kBAAkB,IAAI,WAAW,EACjC,WAAW,IAAI,IAAI,EACnB,WAAW,IAAI,IAAI,EACnB,YAAY,IAAI,KAAK,EACrB,KAAK,uBAAuB,IAAI,gBAAgB,EAChD,KAAK,mBAAmB,IAAI,YAAY,EACxC,KAAK,uBAAuB,IAAI,gBAAgB,EAChD,KAAK,gBAAgB,IAAI,SAAS,EAClC,KAAK,gBAAgB,IAAI,SAAS,EAClC,KAAK,iBAAiB,IAAI,UAAU,GACrC,MAAM,WAAW,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
|
|
2
|
+
import { CalloutCloseButton, CalloutContent, CalloutDescription, CalloutLink, CalloutRoot, CalloutTitle } from "./Callout.jsx";
|
|
3
|
+
//#region src/components/Callout/Callout.namespace.ts
|
|
4
|
+
var Callout_namespace_exports = /* @__PURE__ */ __exportAll({
|
|
5
|
+
CloseButton: () => CalloutCloseButton,
|
|
6
|
+
Content: () => CalloutContent,
|
|
7
|
+
Description: () => CalloutDescription,
|
|
8
|
+
Link: () => CalloutLink,
|
|
9
|
+
Root: () => CalloutRoot,
|
|
10
|
+
Title: () => CalloutTitle
|
|
11
|
+
});
|
|
12
|
+
//#endregion
|
|
13
|
+
export { Callout_namespace_exports };
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export { CalloutCloseButton, CalloutContent, CalloutDescription, CalloutLink, CalloutRoot, CalloutTitle, type CalloutCloseButtonProps, type CalloutContentProps, type CalloutDescriptionProps, type CalloutLinkProps, type CalloutRootProps, type CalloutTitleProps, } from './Callout';
|
|
2
|
+
export * as Callout from './Callout.namespace';
|
|
3
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Callout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,EAClB,cAAc,EACd,kBAAkB,EAClB,WAAW,EACX,WAAW,EACX,YAAY,EACZ,KAAK,uBAAuB,EAC5B,KAAK,mBAAmB,EACxB,KAAK,uBAAuB,EAC5B,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACrB,KAAK,iBAAiB,GACvB,MAAM,WAAW,CAAC;AAEnB,OAAO,KAAK,OAAO,MAAM,qBAAqB,CAAC"}
|
|
@@ -1 +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;
|
|
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;AAyDrB,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,mFAyEvB,CAAC;AAKH,MAAM,WAAW,oBACf,SAAQ,IAAI,CAAC,qBAAqB,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC,EAC9D,sBAAsB;CAAG;AAE7B,eAAO,MAAM,eAAe,sFAgD1B,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"}
|