@sproutsocial/seeds-react-accordion 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/.eslintignore +6 -0
- package/.eslintrc.js +4 -0
- package/.turbo/turbo-build.log +21 -0
- package/CHANGELOG.md +7 -0
- package/dist/esm/index.js +267 -0
- package/dist/esm/index.js.map +1 -0
- package/dist/index.d.mts +48 -0
- package/dist/index.d.ts +48 -0
- package/dist/index.js +300 -0
- package/dist/index.js.map +1 -0
- package/jest.config.js +9 -0
- package/package.json +47 -0
- package/src/Accordion.stories.tsx +563 -0
- package/src/Accordion.tsx +63 -0
- package/src/AccordionContent.tsx +23 -0
- package/src/AccordionItem.tsx +11 -0
- package/src/AccordionTrigger.tsx +188 -0
- package/src/AccordionTypes.ts +54 -0
- package/src/__tests__/accordion.test.tsx +419 -0
- package/src/index.ts +6 -0
- package/src/styled.d.ts +7 -0
- package/src/styles.ts +194 -0
- package/tsconfig.json +9 -0
- package/tsup.config.ts +12 -0
package/.eslintignore
ADDED
package/.eslintrc.js
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
yarn run v1.22.22
|
|
2
|
+
$ tsup --dts
|
|
3
|
+
[34mCLI[39m Building entry: src/index.ts
|
|
4
|
+
[34mCLI[39m Using tsconfig: tsconfig.json
|
|
5
|
+
[34mCLI[39m tsup v8.5.0
|
|
6
|
+
[34mCLI[39m Using tsup config: /home/runner/work/seeds/seeds/seeds-react/seeds-react-accordion/tsup.config.ts
|
|
7
|
+
[34mCLI[39m Target: es2022
|
|
8
|
+
[34mCLI[39m Cleaning output folder
|
|
9
|
+
[34mCJS[39m Build start
|
|
10
|
+
[34mESM[39m Build start
|
|
11
|
+
[32mCJS[39m [1mdist/index.js [22m[32m10.02 KB[39m
|
|
12
|
+
[32mCJS[39m [1mdist/index.js.map [22m[32m14.60 KB[39m
|
|
13
|
+
[32mCJS[39m ⚡️ Build success in 230ms
|
|
14
|
+
[32mESM[39m [1mdist/esm/index.js [22m[32m7.29 KB[39m
|
|
15
|
+
[32mESM[39m [1mdist/esm/index.js.map [22m[32m14.16 KB[39m
|
|
16
|
+
[32mESM[39m ⚡️ Build success in 229ms
|
|
17
|
+
[34mDTS[39m Build start
|
|
18
|
+
[32mDTS[39m ⚡️ Build success in 26454ms
|
|
19
|
+
[32mDTS[39m [1mdist/index.d.ts [22m[32m2.24 KB[39m
|
|
20
|
+
[32mDTS[39m [1mdist/index.d.mts [22m[32m2.24 KB[39m
|
|
21
|
+
Done in 34.48s.
|
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,267 @@
|
|
|
1
|
+
// src/Accordion.tsx
|
|
2
|
+
import React2, { createContext } from "react";
|
|
3
|
+
import * as RadixAccordion from "@radix-ui/react-accordion";
|
|
4
|
+
import { Icon } from "@sproutsocial/seeds-react-icon";
|
|
5
|
+
|
|
6
|
+
// src/AccordionTypes.ts
|
|
7
|
+
import "react";
|
|
8
|
+
import "@sproutsocial/seeds-react-system-props";
|
|
9
|
+
import "@sproutsocial/seeds-react-icon";
|
|
10
|
+
import "@sproutsocial/seeds-react-menu";
|
|
11
|
+
|
|
12
|
+
// src/Accordion.tsx
|
|
13
|
+
import { jsx } from "react/jsx-runtime";
|
|
14
|
+
var AccordionContext = createContext({
|
|
15
|
+
triggerIcon: null,
|
|
16
|
+
triggerPosition: "",
|
|
17
|
+
styled: false
|
|
18
|
+
});
|
|
19
|
+
var Accordion = ({
|
|
20
|
+
children,
|
|
21
|
+
collapsible,
|
|
22
|
+
defaultValue = ["item-0"],
|
|
23
|
+
triggerPosition = "right",
|
|
24
|
+
triggerIcon = /* @__PURE__ */ jsx(Icon, { className: "triggerIcon", name: "chevron-down-outline" }),
|
|
25
|
+
type = "multiple",
|
|
26
|
+
styled: styled2 = true
|
|
27
|
+
}) => {
|
|
28
|
+
if (type === "single") {
|
|
29
|
+
return /* @__PURE__ */ jsx(
|
|
30
|
+
RadixAccordion.Root,
|
|
31
|
+
{
|
|
32
|
+
type: "single",
|
|
33
|
+
defaultValue: Array.isArray(defaultValue) ? defaultValue[0] : defaultValue,
|
|
34
|
+
collapsible,
|
|
35
|
+
children: /* @__PURE__ */ jsx(
|
|
36
|
+
AccordionContext.Provider,
|
|
37
|
+
{
|
|
38
|
+
value: {
|
|
39
|
+
triggerIcon: React2.isValidElement(triggerIcon) ? triggerIcon : null,
|
|
40
|
+
triggerPosition,
|
|
41
|
+
styled: styled2
|
|
42
|
+
},
|
|
43
|
+
children
|
|
44
|
+
}
|
|
45
|
+
)
|
|
46
|
+
}
|
|
47
|
+
);
|
|
48
|
+
}
|
|
49
|
+
return /* @__PURE__ */ jsx(
|
|
50
|
+
RadixAccordion.Root,
|
|
51
|
+
{
|
|
52
|
+
type: "multiple",
|
|
53
|
+
defaultValue: Array.isArray(defaultValue) ? defaultValue : [defaultValue],
|
|
54
|
+
children: /* @__PURE__ */ jsx(
|
|
55
|
+
AccordionContext.Provider,
|
|
56
|
+
{
|
|
57
|
+
value: {
|
|
58
|
+
triggerIcon: React2.isValidElement(triggerIcon) ? triggerIcon : null,
|
|
59
|
+
triggerPosition,
|
|
60
|
+
styled: styled2
|
|
61
|
+
},
|
|
62
|
+
children
|
|
63
|
+
}
|
|
64
|
+
)
|
|
65
|
+
}
|
|
66
|
+
);
|
|
67
|
+
};
|
|
68
|
+
|
|
69
|
+
// src/AccordionItem.tsx
|
|
70
|
+
import "@radix-ui/react-accordion";
|
|
71
|
+
|
|
72
|
+
// src/styles.ts
|
|
73
|
+
import styled, { css } from "styled-components";
|
|
74
|
+
import * as RadixAccordion2 from "@radix-ui/react-accordion";
|
|
75
|
+
import {
|
|
76
|
+
BORDER,
|
|
77
|
+
COMMON,
|
|
78
|
+
FLEXBOX,
|
|
79
|
+
LAYOUT,
|
|
80
|
+
TYPOGRAPHY
|
|
81
|
+
} from "@sproutsocial/seeds-react-system-props";
|
|
82
|
+
var StyledAccordionItem = styled(RadixAccordion2.Item)``;
|
|
83
|
+
var animations = css`
|
|
84
|
+
@keyframes slideDown {
|
|
85
|
+
from {
|
|
86
|
+
height: 0;
|
|
87
|
+
}
|
|
88
|
+
to {
|
|
89
|
+
height: var(--radix-accordion-content-height);
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
@keyframes slideUp {
|
|
94
|
+
from {
|
|
95
|
+
height: var(--radix-accordion-content-height);
|
|
96
|
+
}
|
|
97
|
+
to {
|
|
98
|
+
height: 0;
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
`;
|
|
102
|
+
var StyledRadixAccordionTrigger = styled(
|
|
103
|
+
RadixAccordion2.Trigger
|
|
104
|
+
)`
|
|
105
|
+
padding: 0;
|
|
106
|
+
width: 100%;
|
|
107
|
+
display: flex;
|
|
108
|
+
align-items: center;
|
|
109
|
+
justify-content: space-between;
|
|
110
|
+
cursor: pointer;
|
|
111
|
+
outline: none;
|
|
112
|
+
border: none;
|
|
113
|
+
background: transparent;
|
|
114
|
+
${({ theme }) => theme.typography[200]};
|
|
115
|
+
|
|
116
|
+
.triggerIcon {
|
|
117
|
+
color: ${({ theme }) => theme.colors.icon.base};
|
|
118
|
+
transition: transform 300ms ease-in-out;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
&[data-state="open"] {
|
|
122
|
+
.triggerIcon {
|
|
123
|
+
transform: rotate(-180deg);
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
&[data-styled] {
|
|
128
|
+
padding: ${({ theme }) => theme.space[400]};
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
${COMMON}
|
|
132
|
+
`;
|
|
133
|
+
var StyledRadixAccordionContent = styled(
|
|
134
|
+
RadixAccordion2.Content
|
|
135
|
+
)`
|
|
136
|
+
${animations}
|
|
137
|
+
|
|
138
|
+
overflow: hidden;
|
|
139
|
+
|
|
140
|
+
&[data-state="open"] {
|
|
141
|
+
animation: slideDown 300ms ease-in-out;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
&[data-state="closed"] {
|
|
145
|
+
animation: slideUp 300ms ease-in-out;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
&[data-styled="true"] {
|
|
149
|
+
border-left: ${({ theme }) => `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};
|
|
150
|
+
border-right: ${({ theme }) => `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};
|
|
151
|
+
background: ${({ theme }) => theme.colors.container.background.base};
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.accordion-item:last-child[data-state="open"] &[data-styled="true"],
|
|
155
|
+
.accordion-item:last-child[data-state="closed"] &[data-styled="true"] {
|
|
156
|
+
border-bottom: ${({ theme }) => `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};
|
|
157
|
+
border-bottom-left-radius: ${({ theme }) => theme.radii.outer};
|
|
158
|
+
border-bottom-right-radius: ${({ theme }) => theme.radii.outer};
|
|
159
|
+
}
|
|
160
|
+
`;
|
|
161
|
+
var StyledAccordionArea = styled.div`
|
|
162
|
+
display: flex;
|
|
163
|
+
align-items: center;
|
|
164
|
+
justify-content: space-between;
|
|
165
|
+
width: 100%;
|
|
166
|
+
`;
|
|
167
|
+
var FlexCenter = styled.div`
|
|
168
|
+
display: flex;
|
|
169
|
+
align-items: center;
|
|
170
|
+
`;
|
|
171
|
+
var ContentContainer = styled.div`
|
|
172
|
+
color: ${({ theme }) => theme.colors.text.body};
|
|
173
|
+
background: transparent;
|
|
174
|
+
font-family: ${({ theme }) => theme.fontFamily};
|
|
175
|
+
${({ theme }) => theme.typography[200]};
|
|
176
|
+
|
|
177
|
+
&[data-styled="true"] {
|
|
178
|
+
padding: ${({ theme }) => theme.space[400]};
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.accordion-item:last-child[data-state="open"] &[data-styled="true"],
|
|
182
|
+
.accordion-item:last-child[data-state="closed"] &[data-styled="true"] {
|
|
183
|
+
border-bottom-left-radius: ${({ theme }) => theme.radii.outer};
|
|
184
|
+
border-bottom-right-radius: ${({ theme }) => theme.radii.outer};
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
${COMMON}
|
|
188
|
+
${BORDER}
|
|
189
|
+
${LAYOUT}
|
|
190
|
+
${FLEXBOX}
|
|
191
|
+
`;
|
|
192
|
+
var TriggerContainer = styled.div`
|
|
193
|
+
display: flex;
|
|
194
|
+
align-items: center;
|
|
195
|
+
|
|
196
|
+
&[data-styled="true"] {
|
|
197
|
+
border-top: ${({ theme }) => `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};
|
|
198
|
+
border-left: ${({ theme }) => `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};
|
|
199
|
+
border-right: ${({ theme }) => `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};
|
|
200
|
+
background: ${({ theme }) => theme.colors.container.background.base};
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
.accordion-item[data-state="open"] &[data-styled="true"] {
|
|
204
|
+
border-bottom: ${({ theme }) => `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
.accordion-item[data-state="closed"] &[data-styled="true"] {
|
|
208
|
+
transition: border-bottom-color 0s ease-in-out 0.3s;
|
|
209
|
+
border-bottom: ${({ theme }) => `${theme.borderWidths[500]} solid transparent`};
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
.accordion-item:first-child &[data-styled="true"] {
|
|
213
|
+
border-top-left-radius: ${({ theme }) => theme.radii.outer};
|
|
214
|
+
border-top-right-radius: ${({ theme }) => theme.radii.outer};
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
.accordion-item:last-child &[data-styled="true"] {
|
|
218
|
+
border-bottom: ${({ theme }) => `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
.accordion-item:last-child[data-state="closed"] &[data-styled="true"] {
|
|
222
|
+
transition: border-radius 0s linear 0.3s;
|
|
223
|
+
border-bottom-left-radius: ${({ theme }) => theme.radii.outer};
|
|
224
|
+
border-bottom-right-radius: ${({ theme }) => theme.radii.outer};
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
${COMMON}
|
|
228
|
+
${BORDER}
|
|
229
|
+
${LAYOUT}
|
|
230
|
+
${FLEXBOX}
|
|
231
|
+
`;
|
|
232
|
+
var TitleStyles = styled.h4`
|
|
233
|
+
margin: 0;
|
|
234
|
+
font-size: ${({ theme }) => theme.fontSizes[200]};
|
|
235
|
+
font-weight: normal;
|
|
236
|
+
|
|
237
|
+
&[data-styled="true"] {
|
|
238
|
+
font-weight: ${({ theme }) => theme.fontWeights.semibold};
|
|
239
|
+
color: ${({ theme }) => theme.colors.text.headline};
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
${COMMON}
|
|
243
|
+
${TYPOGRAPHY}
|
|
244
|
+
`;
|
|
245
|
+
|
|
246
|
+
// src/AccordionItem.tsx
|
|
247
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
248
|
+
var AccordionItem = ({ children, value }) => {
|
|
249
|
+
return /* @__PURE__ */ jsx2(StyledAccordionItem, { className: "accordion-item", value, children });
|
|
250
|
+
};
|
|
251
|
+
|
|
252
|
+
// src/AccordionContent.tsx
|
|
253
|
+
import { useContext } from "react";
|
|
254
|
+
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
255
|
+
var AccordionContent = ({
|
|
256
|
+
children,
|
|
257
|
+
...rest
|
|
258
|
+
}) => {
|
|
259
|
+
const { styled: styled2 } = useContext(AccordionContext);
|
|
260
|
+
return /* @__PURE__ */ jsx3(StyledRadixAccordionContent, { "data-styled": styled2, children: /* @__PURE__ */ jsx3(ContentContainer, { "data-styled": styled2, ...rest, children }) });
|
|
261
|
+
};
|
|
262
|
+
export {
|
|
263
|
+
Accordion,
|
|
264
|
+
AccordionContent,
|
|
265
|
+
AccordionItem
|
|
266
|
+
};
|
|
267
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/Accordion.tsx","../../src/AccordionTypes.ts","../../src/AccordionItem.tsx","../../src/styles.ts","../../src/AccordionContent.tsx"],"sourcesContent":["import React, { createContext, type ReactElement } from \"react\";\nimport * as RadixAccordion from \"@radix-ui/react-accordion\";\nimport { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport { type TypeAccordionProps } from \"./AccordionTypes\";\n\nexport const AccordionContext = createContext<{\n triggerIcon: ReactElement | null;\n triggerPosition: string;\n styled: boolean;\n}>({\n triggerIcon: null,\n triggerPosition: \"\",\n styled: false,\n});\n\nexport const Accordion = ({\n children,\n collapsible,\n defaultValue = [\"item-0\"],\n triggerPosition = \"right\",\n triggerIcon = <Icon className=\"triggerIcon\" name=\"chevron-down-outline\" />,\n type = \"multiple\",\n styled = true,\n}: TypeAccordionProps) => {\n if (type === \"single\") {\n return (\n <RadixAccordion.Root\n type=\"single\"\n defaultValue={\n Array.isArray(defaultValue) ? defaultValue[0] : defaultValue\n }\n collapsible={collapsible}\n >\n <AccordionContext.Provider\n value={{\n triggerIcon: React.isValidElement(triggerIcon) ? triggerIcon : null,\n triggerPosition,\n styled,\n }}\n >\n {children}\n </AccordionContext.Provider>\n </RadixAccordion.Root>\n );\n }\n\n return (\n <RadixAccordion.Root\n type=\"multiple\"\n defaultValue={Array.isArray(defaultValue) ? defaultValue : [defaultValue]}\n >\n <AccordionContext.Provider\n value={{\n triggerIcon: React.isValidElement(triggerIcon) ? triggerIcon : null,\n triggerPosition,\n styled,\n }}\n >\n {children}\n </AccordionContext.Provider>\n </RadixAccordion.Root>\n );\n};\n","import * as React from \"react\";\nimport {\n type TypeSystemCommonProps,\n type TypeBorderSystemProps,\n type TypeFlexboxSystemProps,\n type TypeLayoutSystemProps,\n type TypeStyledComponentsCommonProps,\n type TypeTypographySystemProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport { type TypeIconName } from \"@sproutsocial/seeds-react-icon\";\nimport { type TypeMenuItemProps } from \"@sproutsocial/seeds-react-menu\";\n\nexport interface TypeAccordionSystemProps\n extends Omit<React.ComponentPropsWithoutRef<\"div\">, \"color\">,\n TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n TypeBorderSystemProps,\n TypeFlexboxSystemProps,\n TypeLayoutSystemProps,\n TypeTypographySystemProps {}\n\nexport interface TypeAccordionProps {\n children?: React.ReactNode;\n collapsible?: boolean;\n defaultValue: string | [string];\n triggerIcon?: React.ReactNode;\n triggerPosition?: \"left\" | \"right\";\n type?: \"single\" | \"multiple\";\n styled?: boolean;\n}\n\nexport interface TypeRelatedAction {\n iconName: TypeIconName;\n onClick: () => void;\n \"aria-label\": string;\n}\n\nexport interface TypeOverflowMenuItem extends TypeMenuItemProps {\n iconName?: TypeIconName;\n}\n\nexport interface TypeOverflowMenuConfig {\n /** Menu items to be rendered in the overflow menu */\n items: TypeOverflowMenuItem[];\n /** Aria label for the overflow menu trigger button. Defaults to \"More actions\" */\n \"aria-label\"?: string;\n}\n\nexport interface TypeAccordionItemProps {\n children: React.ReactNode;\n relatedActions?: TypeRelatedAction[];\n overflowMenu?: TypeOverflowMenuConfig;\n value: string;\n}\n","import * as RadixAccordion from \"@radix-ui/react-accordion\";\nimport { type TypeAccordionItemProps } from \"./AccordionTypes\";\nimport { StyledAccordionItem } from \"./styles\";\n\nexport const AccordionItem = ({ children, value }: TypeAccordionItemProps) => {\n return (\n <StyledAccordionItem className=\"accordion-item\" value={value}>\n {children}\n </StyledAccordionItem>\n );\n};\n","import styled, { css } from \"styled-components\";\nimport * as RadixAccordion from \"@radix-ui/react-accordion\";\nimport {\n BORDER,\n COMMON,\n FLEXBOX,\n LAYOUT,\n TYPOGRAPHY,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport { type TypeAccordionSystemProps } from \"./AccordionTypes\";\n\ninterface StyledAccordionProps extends TypeAccordionSystemProps {\n $styled?: boolean;\n}\n\nexport const StyledAccordionItem = styled(RadixAccordion.Item)``;\n\nconst animations = css`\n @keyframes slideDown {\n from {\n height: 0;\n }\n to {\n height: var(--radix-accordion-content-height);\n }\n }\n\n @keyframes slideUp {\n from {\n height: var(--radix-accordion-content-height);\n }\n to {\n height: 0;\n }\n }\n`;\n\nexport const StyledRadixAccordionTrigger = styled(\n RadixAccordion.Trigger\n)<StyledAccordionProps>`\n padding: 0;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer;\n outline: none;\n border: none;\n background: transparent;\n ${({ theme }) => theme.typography[200]};\n\n .triggerIcon {\n color: ${({ theme }) => theme.colors.icon.base};\n transition: transform 300ms ease-in-out;\n }\n\n &[data-state=\"open\"] {\n .triggerIcon {\n transform: rotate(-180deg);\n }\n }\n\n &[data-styled] {\n padding: ${({ theme }) => theme.space[400]};\n }\n\n ${COMMON}\n`;\n\nexport const StyledRadixAccordionContent = styled(\n RadixAccordion.Content\n)<StyledAccordionProps>`\n ${animations}\n\n overflow: hidden;\n\n &[data-state=\"open\"] {\n animation: slideDown 300ms ease-in-out;\n }\n\n &[data-state=\"closed\"] {\n animation: slideUp 300ms ease-in-out;\n }\n\n &[data-styled=\"true\"] {\n border-left: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n border-right: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n background: ${({ theme }) => theme.colors.container.background.base};\n }\n\n .accordion-item:last-child[data-state=\"open\"] &[data-styled=\"true\"],\n .accordion-item:last-child[data-state=\"closed\"] &[data-styled=\"true\"] {\n border-bottom: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n border-bottom-left-radius: ${({ theme }) => theme.radii.outer};\n border-bottom-right-radius: ${({ theme }) => theme.radii.outer};\n }\n`;\n\nexport const StyledAccordionArea = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n`;\nexport const FlexCenter = styled.div`\n display: flex;\n align-items: center;\n`;\n\nexport const ContentContainer = styled.div<StyledAccordionProps>`\n color: ${({ theme }) => theme.colors.text.body};\n background: transparent;\n font-family: ${({ theme }) => theme.fontFamily};\n ${({ theme }) => theme.typography[200]};\n\n &[data-styled=\"true\"] {\n padding: ${({ theme }) => theme.space[400]};\n }\n\n .accordion-item:last-child[data-state=\"open\"] &[data-styled=\"true\"],\n .accordion-item:last-child[data-state=\"closed\"] &[data-styled=\"true\"] {\n border-bottom-left-radius: ${({ theme }) => theme.radii.outer};\n border-bottom-right-radius: ${({ theme }) => theme.radii.outer};\n }\n\n ${COMMON}\n ${BORDER}\n\t${LAYOUT}\n\t${FLEXBOX}\n`;\n\nexport const TriggerContainer = styled.div<StyledAccordionProps>`\n display: flex;\n align-items: center;\n\n &[data-styled=\"true\"] {\n border-top: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n border-left: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n border-right: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n background: ${({ theme }) => theme.colors.container.background.base};\n }\n\n .accordion-item[data-state=\"open\"] &[data-styled=\"true\"] {\n border-bottom: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n }\n\n .accordion-item[data-state=\"closed\"] &[data-styled=\"true\"] {\n transition: border-bottom-color 0s ease-in-out 0.3s;\n border-bottom: ${({ theme }) =>\n `${theme.borderWidths[500]} solid transparent`};\n }\n\n .accordion-item:first-child &[data-styled=\"true\"] {\n border-top-left-radius: ${({ theme }) => theme.radii.outer};\n border-top-right-radius: ${({ theme }) => theme.radii.outer};\n }\n\n .accordion-item:last-child &[data-styled=\"true\"] {\n border-bottom: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n }\n\n .accordion-item:last-child[data-state=\"closed\"] &[data-styled=\"true\"] {\n transition: border-radius 0s linear 0.3s;\n border-bottom-left-radius: ${({ theme }) => theme.radii.outer};\n border-bottom-right-radius: ${({ theme }) => theme.radii.outer};\n }\n\n ${COMMON}\n ${BORDER}\n\t${LAYOUT}\n\t${FLEXBOX}\n`;\n\nexport const TitleStyles = styled.h4<StyledAccordionProps>`\n margin: 0;\n font-size: ${({ theme }) => theme.fontSizes[200]};\n font-weight: normal;\n\n &[data-styled=\"true\"] {\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n color: ${({ theme }) => theme.colors.text.headline};\n }\n\n ${COMMON}\n ${TYPOGRAPHY}\n`;\n","import { StyledRadixAccordionContent, ContentContainer } from \"./styles\";\nimport { type TypeAccordionSystemProps } from \"./AccordionTypes\";\nimport { AccordionContext } from \"./Accordion\";\nimport { useContext } from \"react\";\n\ninterface TypeAccordionContentProps extends TypeAccordionSystemProps {\n children?: React.ReactNode;\n}\n\nexport const AccordionContent = ({\n children,\n ...rest\n}: TypeAccordionContentProps) => {\n const { styled } = useContext(AccordionContext);\n\n return (\n <StyledRadixAccordionContent data-styled={styled}>\n <ContentContainer data-styled={styled} {...rest}>\n {children}\n </ContentContainer>\n </StyledRadixAccordionContent>\n );\n};\n"],"mappings":"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","names":["React","styled","React","RadixAccordion","jsx","jsx","styled"]}
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import * as React$1 from 'react';
|
|
3
|
+
import { TypeStyledComponentsCommonProps, TypeSystemCommonProps, TypeBorderSystemProps, TypeFlexboxSystemProps, TypeLayoutSystemProps, TypeTypographySystemProps } from '@sproutsocial/seeds-react-system-props';
|
|
4
|
+
import { TypeIconName } from '@sproutsocial/seeds-react-icon';
|
|
5
|
+
import { TypeMenuItemProps } from '@sproutsocial/seeds-react-menu';
|
|
6
|
+
|
|
7
|
+
interface TypeAccordionSystemProps extends Omit<React$1.ComponentPropsWithoutRef<"div">, "color">, TypeStyledComponentsCommonProps, TypeSystemCommonProps, TypeBorderSystemProps, TypeFlexboxSystemProps, TypeLayoutSystemProps, TypeTypographySystemProps {
|
|
8
|
+
}
|
|
9
|
+
interface TypeAccordionProps {
|
|
10
|
+
children?: React$1.ReactNode;
|
|
11
|
+
collapsible?: boolean;
|
|
12
|
+
defaultValue: string | [string];
|
|
13
|
+
triggerIcon?: React$1.ReactNode;
|
|
14
|
+
triggerPosition?: "left" | "right";
|
|
15
|
+
type?: "single" | "multiple";
|
|
16
|
+
styled?: boolean;
|
|
17
|
+
}
|
|
18
|
+
interface TypeRelatedAction {
|
|
19
|
+
iconName: TypeIconName;
|
|
20
|
+
onClick: () => void;
|
|
21
|
+
"aria-label": string;
|
|
22
|
+
}
|
|
23
|
+
interface TypeOverflowMenuItem extends TypeMenuItemProps {
|
|
24
|
+
iconName?: TypeIconName;
|
|
25
|
+
}
|
|
26
|
+
interface TypeOverflowMenuConfig {
|
|
27
|
+
/** Menu items to be rendered in the overflow menu */
|
|
28
|
+
items: TypeOverflowMenuItem[];
|
|
29
|
+
/** Aria label for the overflow menu trigger button. Defaults to "More actions" */
|
|
30
|
+
"aria-label"?: string;
|
|
31
|
+
}
|
|
32
|
+
interface TypeAccordionItemProps {
|
|
33
|
+
children: React$1.ReactNode;
|
|
34
|
+
relatedActions?: TypeRelatedAction[];
|
|
35
|
+
overflowMenu?: TypeOverflowMenuConfig;
|
|
36
|
+
value: string;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
declare const Accordion: ({ children, collapsible, defaultValue, triggerPosition, triggerIcon, type, styled, }: TypeAccordionProps) => react_jsx_runtime.JSX.Element;
|
|
40
|
+
|
|
41
|
+
declare const AccordionItem: ({ children, value }: TypeAccordionItemProps) => react_jsx_runtime.JSX.Element;
|
|
42
|
+
|
|
43
|
+
interface TypeAccordionContentProps extends TypeAccordionSystemProps {
|
|
44
|
+
children?: React.ReactNode;
|
|
45
|
+
}
|
|
46
|
+
declare const AccordionContent: ({ children, ...rest }: TypeAccordionContentProps) => react_jsx_runtime.JSX.Element;
|
|
47
|
+
|
|
48
|
+
export { Accordion, AccordionContent, AccordionItem, type TypeAccordionItemProps, type TypeAccordionProps, type TypeAccordionSystemProps, type TypeOverflowMenuConfig, type TypeOverflowMenuItem, type TypeRelatedAction };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import * as React$1 from 'react';
|
|
3
|
+
import { TypeStyledComponentsCommonProps, TypeSystemCommonProps, TypeBorderSystemProps, TypeFlexboxSystemProps, TypeLayoutSystemProps, TypeTypographySystemProps } from '@sproutsocial/seeds-react-system-props';
|
|
4
|
+
import { TypeIconName } from '@sproutsocial/seeds-react-icon';
|
|
5
|
+
import { TypeMenuItemProps } from '@sproutsocial/seeds-react-menu';
|
|
6
|
+
|
|
7
|
+
interface TypeAccordionSystemProps extends Omit<React$1.ComponentPropsWithoutRef<"div">, "color">, TypeStyledComponentsCommonProps, TypeSystemCommonProps, TypeBorderSystemProps, TypeFlexboxSystemProps, TypeLayoutSystemProps, TypeTypographySystemProps {
|
|
8
|
+
}
|
|
9
|
+
interface TypeAccordionProps {
|
|
10
|
+
children?: React$1.ReactNode;
|
|
11
|
+
collapsible?: boolean;
|
|
12
|
+
defaultValue: string | [string];
|
|
13
|
+
triggerIcon?: React$1.ReactNode;
|
|
14
|
+
triggerPosition?: "left" | "right";
|
|
15
|
+
type?: "single" | "multiple";
|
|
16
|
+
styled?: boolean;
|
|
17
|
+
}
|
|
18
|
+
interface TypeRelatedAction {
|
|
19
|
+
iconName: TypeIconName;
|
|
20
|
+
onClick: () => void;
|
|
21
|
+
"aria-label": string;
|
|
22
|
+
}
|
|
23
|
+
interface TypeOverflowMenuItem extends TypeMenuItemProps {
|
|
24
|
+
iconName?: TypeIconName;
|
|
25
|
+
}
|
|
26
|
+
interface TypeOverflowMenuConfig {
|
|
27
|
+
/** Menu items to be rendered in the overflow menu */
|
|
28
|
+
items: TypeOverflowMenuItem[];
|
|
29
|
+
/** Aria label for the overflow menu trigger button. Defaults to "More actions" */
|
|
30
|
+
"aria-label"?: string;
|
|
31
|
+
}
|
|
32
|
+
interface TypeAccordionItemProps {
|
|
33
|
+
children: React$1.ReactNode;
|
|
34
|
+
relatedActions?: TypeRelatedAction[];
|
|
35
|
+
overflowMenu?: TypeOverflowMenuConfig;
|
|
36
|
+
value: string;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
declare const Accordion: ({ children, collapsible, defaultValue, triggerPosition, triggerIcon, type, styled, }: TypeAccordionProps) => react_jsx_runtime.JSX.Element;
|
|
40
|
+
|
|
41
|
+
declare const AccordionItem: ({ children, value }: TypeAccordionItemProps) => react_jsx_runtime.JSX.Element;
|
|
42
|
+
|
|
43
|
+
interface TypeAccordionContentProps extends TypeAccordionSystemProps {
|
|
44
|
+
children?: React.ReactNode;
|
|
45
|
+
}
|
|
46
|
+
declare const AccordionContent: ({ children, ...rest }: TypeAccordionContentProps) => react_jsx_runtime.JSX.Element;
|
|
47
|
+
|
|
48
|
+
export { Accordion, AccordionContent, AccordionItem, type TypeAccordionItemProps, type TypeAccordionProps, type TypeAccordionSystemProps, type TypeOverflowMenuConfig, type TypeOverflowMenuItem, type TypeRelatedAction };
|