panelui-native 0.4.0 → 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/README.md +14 -7
- package/lib/module/components/accordion/index.js +312 -0
- package/lib/module/components/accordion/index.js.map +1 -0
- package/lib/module/components/avatar/index.js +58 -17
- package/lib/module/components/avatar/index.js.map +1 -1
- package/lib/module/components/badge/index.js +26 -5
- package/lib/module/components/badge/index.js.map +1 -1
- package/lib/module/components/button/index.js +51 -19
- package/lib/module/components/button/index.js.map +1 -1
- package/lib/module/components/checkbox/index.js +42 -14
- package/lib/module/components/checkbox/index.js.map +1 -1
- package/lib/module/components/frame/index.js +64 -13
- package/lib/module/components/frame/index.js.map +1 -1
- package/lib/module/components/timeline/index.js +633 -0
- package/lib/module/components/timeline/index.js.map +1 -0
- package/lib/module/components/toast/index.js +145 -55
- package/lib/module/components/toast/index.js.map +1 -1
- package/lib/module/icons/index.js +388 -27
- package/lib/module/icons/index.js.map +1 -1
- package/lib/module/index.js +3 -1
- package/lib/module/index.js.map +1 -1
- package/lib/typescript/src/components/accordion/index.d.ts +56 -0
- package/lib/typescript/src/components/accordion/index.d.ts.map +1 -0
- package/lib/typescript/src/components/avatar/index.d.ts +8 -1
- package/lib/typescript/src/components/avatar/index.d.ts.map +1 -1
- package/lib/typescript/src/components/badge/index.d.ts +38 -0
- package/lib/typescript/src/components/badge/index.d.ts.map +1 -1
- package/lib/typescript/src/components/button/index.d.ts +18 -0
- package/lib/typescript/src/components/button/index.d.ts.map +1 -1
- package/lib/typescript/src/components/checkbox/index.d.ts +42 -0
- package/lib/typescript/src/components/checkbox/index.d.ts.map +1 -1
- package/lib/typescript/src/components/frame/index.d.ts +39 -5
- package/lib/typescript/src/components/frame/index.d.ts.map +1 -1
- package/lib/typescript/src/components/timeline/index.d.ts +96 -0
- package/lib/typescript/src/components/timeline/index.d.ts.map +1 -0
- package/lib/typescript/src/components/toast/index.d.ts.map +1 -1
- package/lib/typescript/src/icons/index.d.ts +38 -3
- package/lib/typescript/src/icons/index.d.ts.map +1 -1
- package/lib/typescript/src/index.d.ts +4 -2
- package/lib/typescript/src/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/accordion/index.tsx +344 -0
- package/src/components/avatar/index.tsx +68 -20
- package/src/components/badge/index.tsx +35 -6
- package/src/components/button/index.tsx +63 -20
- package/src/components/checkbox/index.tsx +49 -11
- package/src/components/frame/index.tsx +101 -31
- package/src/components/timeline/index.tsx +456 -0
- package/src/components/toast/index.tsx +166 -45
- package/src/icons/index.tsx +292 -27
- package/src/index.ts +38 -1
|
@@ -2,8 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
import { forwardRef } from 'react';
|
|
4
4
|
import { tv } from 'tailwind-variants';
|
|
5
|
+
import { useCSSVariable } from 'uniwind';
|
|
5
6
|
import { AnimatedPressable } from "../../primitives/animated-pressable.js";
|
|
6
7
|
import { Text } from "../../primitives/text.js";
|
|
8
|
+
import { IconColorProvider } from "../../icons/index.js";
|
|
7
9
|
import { Spinner } from "../spinner/index.js";
|
|
8
10
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
9
11
|
const buttonVariants = tv({
|
|
@@ -38,6 +40,12 @@ const buttonVariants = tv({
|
|
|
38
40
|
root: 'border-destructive bg-destructive shadow-sm',
|
|
39
41
|
label: 'text-white',
|
|
40
42
|
spinner: 'border-white/32 border-t-white'
|
|
43
|
+
},
|
|
44
|
+
/** Neutral surface for third-party sign-in, sized for a full-width stack. */
|
|
45
|
+
social: {
|
|
46
|
+
root: 'border-input bg-card shadow-sm',
|
|
47
|
+
label: 'text-foreground',
|
|
48
|
+
spinner: 'border-muted border-t-foreground'
|
|
41
49
|
}
|
|
42
50
|
},
|
|
43
51
|
size: {
|
|
@@ -79,6 +87,21 @@ const SPINNER_SIZE = {
|
|
|
79
87
|
lg: 'md',
|
|
80
88
|
icon: 'sm'
|
|
81
89
|
};
|
|
90
|
+
|
|
91
|
+
/**
|
|
92
|
+
* The theme token each variant's content reads against. Icons in the content
|
|
93
|
+
* slots inherit the resolved value, so they follow the theme automatically.
|
|
94
|
+
*
|
|
95
|
+
* `destructive` is absent on purpose: its background is a saturated red in
|
|
96
|
+
* every theme, so its content is always white rather than a themed token.
|
|
97
|
+
*/
|
|
98
|
+
const CONTENT_COLOR_VAR = {
|
|
99
|
+
primary: '--color-primary-foreground',
|
|
100
|
+
secondary: '--color-secondary-foreground',
|
|
101
|
+
outline: '--color-foreground',
|
|
102
|
+
ghost: '--color-foreground',
|
|
103
|
+
social: '--color-foreground'
|
|
104
|
+
};
|
|
82
105
|
export const Button = /*#__PURE__*/forwardRef(({
|
|
83
106
|
children,
|
|
84
107
|
className,
|
|
@@ -103,27 +126,36 @@ export const Button = /*#__PURE__*/forwardRef(({
|
|
|
103
126
|
fullWidth,
|
|
104
127
|
disabled: isDisabled
|
|
105
128
|
});
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
129
|
+
|
|
130
|
+
// Icons in the content slots inherit this, so they stay legible when the
|
|
131
|
+
// theme inverts the button's background. Without it every caller has to
|
|
132
|
+
// hardcode a hex that is wrong in one theme or the other.
|
|
133
|
+
const themedColor = useCSSVariable(CONTENT_COLOR_VAR[variant === 'destructive' ? 'primary' : variant ?? 'primary']);
|
|
134
|
+
const contentColor = variant === 'destructive' ? '#ffffff' : typeof themedColor === 'string' ? themedColor : undefined;
|
|
135
|
+
return /*#__PURE__*/_jsx(IconColorProvider, {
|
|
136
|
+
color: contentColor,
|
|
137
|
+
children: /*#__PURE__*/_jsxs(AnimatedPressable, {
|
|
138
|
+
ref: ref,
|
|
139
|
+
accessibilityRole: "button",
|
|
140
|
+
accessibilityState: {
|
|
141
|
+
disabled: isDisabled,
|
|
142
|
+
busy: loading
|
|
143
|
+
},
|
|
110
144
|
disabled: isDisabled,
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
disabled: isDisabled,
|
|
114
|
-
className: root({
|
|
115
|
-
className
|
|
116
|
-
}),
|
|
117
|
-
...props,
|
|
118
|
-
children: [loading ? /*#__PURE__*/_jsx(Spinner, {
|
|
119
|
-
size: SPINNER_SIZE[size ?? 'md'],
|
|
120
|
-
className: spinner()
|
|
121
|
-
}) : startContent, typeof children === 'string' ? /*#__PURE__*/_jsx(Text, {
|
|
122
|
-
className: label({
|
|
123
|
-
className: labelClassName
|
|
145
|
+
className: root({
|
|
146
|
+
className
|
|
124
147
|
}),
|
|
125
|
-
|
|
126
|
-
|
|
148
|
+
...props,
|
|
149
|
+
children: [loading ? /*#__PURE__*/_jsx(Spinner, {
|
|
150
|
+
size: SPINNER_SIZE[size ?? 'md'],
|
|
151
|
+
className: spinner()
|
|
152
|
+
}) : startContent, typeof children === 'string' ? /*#__PURE__*/_jsx(Text, {
|
|
153
|
+
className: label({
|
|
154
|
+
className: labelClassName
|
|
155
|
+
}),
|
|
156
|
+
children: children
|
|
157
|
+
}) : children, endContent]
|
|
158
|
+
})
|
|
127
159
|
});
|
|
128
160
|
});
|
|
129
161
|
Button.displayName = 'Button';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["forwardRef","tv","AnimatedPressable","Text","Spinner","jsx","_jsx","jsxs","_jsxs","buttonVariants","slots","root","label","spinner","variants","variant","primary","secondary","outline","ghost","destructive","size","sm","md","lg","icon","fullWidth","true","disabled","defaultVariants","SPINNER_SIZE","Button","children","className","labelClassName","loading","startContent","endContent","props","ref","isDisabled","accessibilityRole","accessibilityState","busy","displayName"],"sourceRoot":"../../../../src","sources":["components/button/index.tsx"],"mappings":";;AAAA,SAASA,UAAU,QAAwB,OAAO;AAElD,SAASC,EAAE,QAA2B,mBAAmB;AACzD,SACEC,iBAAiB,QAEZ,wCAAqC;AAC5C,SAASC,IAAI,QAAQ,0BAAuB;AAC5C,SAASC,OAAO,QAAQ,qBAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAErC,MAAMC,cAAc,
|
|
1
|
+
{"version":3,"names":["forwardRef","tv","useCSSVariable","AnimatedPressable","Text","IconColorProvider","Spinner","jsx","_jsx","jsxs","_jsxs","buttonVariants","slots","root","label","spinner","variants","variant","primary","secondary","outline","ghost","destructive","social","size","sm","md","lg","icon","fullWidth","true","disabled","defaultVariants","SPINNER_SIZE","CONTENT_COLOR_VAR","Button","children","className","labelClassName","loading","startContent","endContent","props","ref","isDisabled","themedColor","contentColor","undefined","color","accessibilityRole","accessibilityState","busy","displayName"],"sourceRoot":"../../../../src","sources":["components/button/index.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -18,11 +18,35 @@ const checkboxVariants = tv({
|
|
|
18
18
|
description: 'text-sm text-muted-foreground'
|
|
19
19
|
},
|
|
20
20
|
variants: {
|
|
21
|
+
variant: {
|
|
22
|
+
default: {},
|
|
23
|
+
/**
|
|
24
|
+
* The whole surface is the target — for pickable options where the
|
|
25
|
+
* checkbox is a confirmation rather than the affordance itself.
|
|
26
|
+
*/
|
|
27
|
+
card: {
|
|
28
|
+
row: 'w-full items-start gap-3 rounded-xl border border-border bg-card p-4',
|
|
29
|
+
label: 'text-base font-medium'
|
|
30
|
+
}
|
|
31
|
+
},
|
|
32
|
+
checked: {
|
|
33
|
+
true: {}
|
|
34
|
+
},
|
|
21
35
|
disabled: {
|
|
22
36
|
true: {
|
|
23
37
|
row: 'opacity-50'
|
|
24
38
|
}
|
|
25
39
|
}
|
|
40
|
+
},
|
|
41
|
+
compoundVariants: [{
|
|
42
|
+
variant: 'card',
|
|
43
|
+
checked: true,
|
|
44
|
+
class: {
|
|
45
|
+
row: 'border-primary bg-accent'
|
|
46
|
+
}
|
|
47
|
+
}],
|
|
48
|
+
defaultVariants: {
|
|
49
|
+
variant: 'default'
|
|
26
50
|
}
|
|
27
51
|
});
|
|
28
52
|
export const Checkbox = /*#__PURE__*/forwardRef(({
|
|
@@ -31,10 +55,13 @@ export const Checkbox = /*#__PURE__*/forwardRef(({
|
|
|
31
55
|
onCheckedChange,
|
|
32
56
|
disabled,
|
|
33
57
|
label,
|
|
34
|
-
description
|
|
58
|
+
description,
|
|
59
|
+
variant
|
|
35
60
|
}, ref) => {
|
|
36
61
|
const progress = useSharedValue(checked ? 1 : 0);
|
|
37
62
|
const slots = checkboxVariants({
|
|
63
|
+
variant,
|
|
64
|
+
checked,
|
|
38
65
|
disabled: !!disabled
|
|
39
66
|
});
|
|
40
67
|
const checkColor = useCSSVariable('--color-primary-foreground');
|
|
@@ -53,6 +80,17 @@ export const Checkbox = /*#__PURE__*/forwardRef(({
|
|
|
53
80
|
scale: 0.6 + progress.value * 0.4
|
|
54
81
|
}]
|
|
55
82
|
}));
|
|
83
|
+
const box = /*#__PURE__*/_jsx(View, {
|
|
84
|
+
className: slots.box(),
|
|
85
|
+
children: /*#__PURE__*/_jsx(Animated.View, {
|
|
86
|
+
style: fillStyle,
|
|
87
|
+
className: slots.fill(),
|
|
88
|
+
children: /*#__PURE__*/_jsx(CheckIcon, {
|
|
89
|
+
size: 12,
|
|
90
|
+
color: typeof checkColor === 'string' ? checkColor : '#fff'
|
|
91
|
+
})
|
|
92
|
+
})
|
|
93
|
+
});
|
|
56
94
|
return /*#__PURE__*/_jsxs(Pressable, {
|
|
57
95
|
ref: ref,
|
|
58
96
|
accessibilityRole: "checkbox",
|
|
@@ -69,19 +107,9 @@ export const Checkbox = /*#__PURE__*/forwardRef(({
|
|
|
69
107
|
// label rather than centring it against the whole block.
|
|
70
108
|
,
|
|
71
109
|
className: slots.row({
|
|
72
|
-
className: description ? `items-start ${className ?? ''}` : className
|
|
110
|
+
className: description && variant !== 'card' ? `items-start ${className ?? ''}` : className
|
|
73
111
|
}),
|
|
74
|
-
children: [/*#__PURE__*/
|
|
75
|
-
className: slots.box(),
|
|
76
|
-
children: /*#__PURE__*/_jsx(Animated.View, {
|
|
77
|
-
style: fillStyle,
|
|
78
|
-
className: slots.fill(),
|
|
79
|
-
children: /*#__PURE__*/_jsx(CheckIcon, {
|
|
80
|
-
size: 12,
|
|
81
|
-
color: typeof checkColor === 'string' ? checkColor : '#fff'
|
|
82
|
-
})
|
|
83
|
-
})
|
|
84
|
-
}), label || description ? /*#__PURE__*/_jsxs(View, {
|
|
112
|
+
children: [variant === 'card' ? null : box, label || description ? /*#__PURE__*/_jsxs(View, {
|
|
85
113
|
className: slots.content(),
|
|
86
114
|
children: [label ? /*#__PURE__*/_jsx(Text, {
|
|
87
115
|
className: slots.label(),
|
|
@@ -90,7 +118,7 @@ export const Checkbox = /*#__PURE__*/forwardRef(({
|
|
|
90
118
|
className: slots.description(),
|
|
91
119
|
children: description
|
|
92
120
|
}) : null]
|
|
93
|
-
}) : null]
|
|
121
|
+
}) : null, variant === 'card' ? box : null]
|
|
94
122
|
});
|
|
95
123
|
});
|
|
96
124
|
Checkbox.displayName = 'Checkbox';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["forwardRef","useEffect","Pressable","View","Animated","useAnimatedStyle","useSharedValue","withSpring","withTiming","tv","useCSSVariable","CheckIcon","Text","jsx","_jsx","jsxs","_jsxs","checkboxVariants","slots","row","box","fill","content","label","description","variants","
|
|
1
|
+
{"version":3,"names":["forwardRef","useEffect","Pressable","View","Animated","useAnimatedStyle","useSharedValue","withSpring","withTiming","tv","useCSSVariable","CheckIcon","Text","jsx","_jsx","jsxs","_jsxs","checkboxVariants","slots","row","box","fill","content","label","description","variants","variant","default","card","checked","true","disabled","compoundVariants","class","defaultVariants","Checkbox","className","onCheckedChange","ref","progress","checkColor","value","damping","stiffness","mass","duration","fillStyle","opacity","transform","scale","children","style","size","color","accessibilityRole","accessibilityState","accessibilityLabel","accessibilityHint","onPress","hitSlop","displayName"],"sourceRoot":"../../../../src","sources":["components/checkbox/index.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,30 +1,52 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
/**
|
|
4
|
+
* Frame — a widget shell: a titled surface wrapping an inset panel of rows,
|
|
5
|
+
* with an optional action on the header row and a caption underneath.
|
|
6
|
+
*
|
|
7
|
+
* Layout follows the nested-radius rule (inner radius = outer radius minus the
|
|
8
|
+
* gap between them), which is why the panel is `rounded-xl` inside a
|
|
9
|
+
* `rounded-2xl` shell. Since v0.4.0 the radius scale is theme-scoped, so this
|
|
10
|
+
* relationship holds while the absolute values change per theme.
|
|
11
|
+
*
|
|
12
|
+
* ```tsx
|
|
13
|
+
* <Frame>
|
|
14
|
+
* <Frame.Header>
|
|
15
|
+
* <Frame.Title>Usage Type</Frame.Title>
|
|
16
|
+
* <Frame.Action>Amount</Frame.Action>
|
|
17
|
+
* </Frame.Header>
|
|
18
|
+
* <Frame.Panel>
|
|
19
|
+
* <Frame.Row>…</Frame.Row>
|
|
20
|
+
* <Frame.Row divided>…</Frame.Row>
|
|
21
|
+
* </Frame.Panel>
|
|
22
|
+
* <Frame.Footer>Updated 2 minutes ago</Frame.Footer>
|
|
23
|
+
* </Frame>
|
|
24
|
+
* ```
|
|
25
|
+
*/
|
|
3
26
|
import { forwardRef } from 'react';
|
|
4
27
|
import { View } from 'react-native';
|
|
5
28
|
import { Text } from "../../primitives/text.js";
|
|
6
29
|
import { cn } from "../../utils/cn.js";
|
|
7
30
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
|
-
/**
|
|
9
|
-
* Grouping container (Coss UI's CardFrame): a tinted, rounded surface that
|
|
10
|
-
* holds a header, one or more inset panels, and a footer. Use it to group
|
|
11
|
-
* related settings or list sections under a single title.
|
|
12
|
-
*/
|
|
13
31
|
const FrameRoot = /*#__PURE__*/forwardRef(({
|
|
14
32
|
className,
|
|
15
33
|
...props
|
|
16
34
|
}, ref) => /*#__PURE__*/_jsx(View, {
|
|
17
35
|
ref: ref,
|
|
18
|
-
className: cn('
|
|
36
|
+
className: cn('rounded-2xl border border-border bg-surface p-1.5', className),
|
|
19
37
|
...props
|
|
20
38
|
}));
|
|
21
39
|
FrameRoot.displayName = 'Frame';
|
|
40
|
+
/**
|
|
41
|
+
* The header row: title on the left, `Frame.Action` on the right. Add
|
|
42
|
+
* `className="flex-col items-start"` when you want a description underneath.
|
|
43
|
+
*/
|
|
22
44
|
const FrameHeader = /*#__PURE__*/forwardRef(({
|
|
23
45
|
className,
|
|
24
46
|
...props
|
|
25
47
|
}, ref) => /*#__PURE__*/_jsx(View, {
|
|
26
48
|
ref: ref,
|
|
27
|
-
className: cn('gap-
|
|
49
|
+
className: cn('flex-row items-center justify-between gap-3 px-3 pb-2.5 pt-2', className),
|
|
28
50
|
...props
|
|
29
51
|
}));
|
|
30
52
|
FrameHeader.displayName = 'Frame.Header';
|
|
@@ -34,11 +56,32 @@ const FrameTitle = /*#__PURE__*/forwardRef(({
|
|
|
34
56
|
}, ref) => /*#__PURE__*/_jsx(Text, {
|
|
35
57
|
ref: ref,
|
|
36
58
|
size: "base",
|
|
37
|
-
weight: "
|
|
59
|
+
weight: "medium",
|
|
38
60
|
className: cn('text-foreground', className),
|
|
39
61
|
...props
|
|
40
62
|
}));
|
|
41
63
|
FrameTitle.displayName = 'Frame.Title';
|
|
64
|
+
/**
|
|
65
|
+
* Trailing slot on the header row — a column label, a count, a button, a badge.
|
|
66
|
+
* Plain strings render as muted text; anything else renders as-is.
|
|
67
|
+
*/
|
|
68
|
+
const FrameAction = /*#__PURE__*/forwardRef(({
|
|
69
|
+
className,
|
|
70
|
+
children,
|
|
71
|
+
...props
|
|
72
|
+
}, ref) => /*#__PURE__*/_jsx(View, {
|
|
73
|
+
ref: ref,
|
|
74
|
+
className: cn('flex-row items-center gap-2', className),
|
|
75
|
+
...props,
|
|
76
|
+
children: typeof children === 'string' ? /*#__PURE__*/_jsx(Text, {
|
|
77
|
+
size: "base",
|
|
78
|
+
muted: true,
|
|
79
|
+
children: children
|
|
80
|
+
}) : children
|
|
81
|
+
}));
|
|
82
|
+
FrameAction.displayName = 'Frame.Action';
|
|
83
|
+
|
|
84
|
+
/** Secondary line under the title, inside a column-wrapped header. */
|
|
42
85
|
const FrameDescription = /*#__PURE__*/forwardRef(({
|
|
43
86
|
className,
|
|
44
87
|
...props
|
|
@@ -52,15 +95,15 @@ const FrameDescription = /*#__PURE__*/forwardRef(({
|
|
|
52
95
|
FrameDescription.displayName = 'Frame.Description';
|
|
53
96
|
|
|
54
97
|
/**
|
|
55
|
-
*
|
|
56
|
-
*
|
|
98
|
+
* The inset card holding the frame's content — the raised surface sitting in
|
|
99
|
+
* from the shell's edges, with its own smaller radius.
|
|
57
100
|
*/
|
|
58
101
|
const FramePanel = /*#__PURE__*/forwardRef(({
|
|
59
102
|
className,
|
|
60
103
|
...props
|
|
61
104
|
}, ref) => /*#__PURE__*/_jsx(View, {
|
|
62
105
|
ref: ref,
|
|
63
|
-
className: cn('
|
|
106
|
+
className: cn('overflow-hidden rounded-xl border border-border bg-card', className),
|
|
64
107
|
...props
|
|
65
108
|
}));
|
|
66
109
|
FramePanel.displayName = 'Frame.Panel';
|
|
@@ -80,18 +123,26 @@ const FrameRow = /*#__PURE__*/forwardRef(({
|
|
|
80
123
|
...props
|
|
81
124
|
}));
|
|
82
125
|
FrameRow.displayName = 'Frame.Row';
|
|
126
|
+
/** Muted caption under the panel. Strings are wrapped for you. */
|
|
83
127
|
const FrameFooter = /*#__PURE__*/forwardRef(({
|
|
84
128
|
className,
|
|
129
|
+
children,
|
|
85
130
|
...props
|
|
86
131
|
}, ref) => /*#__PURE__*/_jsx(View, {
|
|
87
132
|
ref: ref,
|
|
88
|
-
className: cn('flex-row items-center gap-2 px-5
|
|
89
|
-
...props
|
|
133
|
+
className: cn('flex-row items-center gap-2 px-3 pb-1.5 pt-2.5', className),
|
|
134
|
+
...props,
|
|
135
|
+
children: typeof children === 'string' ? /*#__PURE__*/_jsx(Text, {
|
|
136
|
+
size: "sm",
|
|
137
|
+
muted: true,
|
|
138
|
+
children: children
|
|
139
|
+
}) : children
|
|
90
140
|
}));
|
|
91
141
|
FrameFooter.displayName = 'Frame.Footer';
|
|
92
142
|
export const Frame = Object.assign(FrameRoot, {
|
|
93
143
|
Header: FrameHeader,
|
|
94
144
|
Title: FrameTitle,
|
|
145
|
+
Action: FrameAction,
|
|
95
146
|
Description: FrameDescription,
|
|
96
147
|
Panel: FramePanel,
|
|
97
148
|
Row: FrameRow,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["forwardRef","View","Text","cn","jsx","_jsx","FrameRoot","className","props","ref","displayName","FrameHeader","FrameTitle","size","weight","
|
|
1
|
+
{"version":3,"names":["forwardRef","View","Text","cn","jsx","_jsx","FrameRoot","className","props","ref","displayName","FrameHeader","FrameTitle","size","weight","FrameAction","children","muted","FrameDescription","FramePanel","FrameRow","divided","FrameFooter","Frame","Object","assign","Header","Title","Action","Description","Panel","Row","Footer"],"sourceRoot":"../../../../src","sources":["components/frame/index.tsx"],"mappings":"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","ignoreList":[]}
|