@radix-solid-js/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/dist/index.cjs ADDED
@@ -0,0 +1,330 @@
1
+ 'use strict';
2
+
3
+ var solidJs = require('solid-js');
4
+ var primitive = require('@radix-solid-js/primitive');
5
+ var collection = require('@radix-solid-js/collection');
6
+ var context = require('@radix-solid-js/context');
7
+ var direction = require('@radix-solid-js/direction');
8
+ var id = require('@radix-solid-js/id');
9
+ var primitiveComponent = require('@radix-solid-js/primitive-component');
10
+ var useControllableState = require('@radix-solid-js/use-controllable-state');
11
+ var collapsible = require('@radix-solid-js/collapsible');
12
+
13
+ // src/accordion.tsx
14
+ var ACCORDION_NAME = "Accordion";
15
+ var ACCORDION_KEYS = ["Home", "End", "ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"];
16
+ var [Collection, useCollection, createCollectionScope] = collection.createCollection(ACCORDION_NAME);
17
+ var [createAccordionContext, createAccordionScope] = context.createContextScope(ACCORDION_NAME, [
18
+ createCollectionScope,
19
+ collapsible.createCollapsibleScope
20
+ ]);
21
+ var useCollapsibleScope = collapsible.createCollapsibleScope();
22
+ var [AccordionValueProvider, useAccordionValueContext] = createAccordionContext(ACCORDION_NAME);
23
+ var [AccordionCollapsibleProvider, useAccordionCollapsibleContext] = createAccordionContext(
24
+ ACCORDION_NAME,
25
+ { collapsible: false }
26
+ );
27
+ var [AccordionImplProvider, useAccordionContext] = createAccordionContext(ACCORDION_NAME);
28
+ var ITEM_NAME = "AccordionItem";
29
+ var [AccordionItemProvider, useAccordionItemContext] = createAccordionContext(ITEM_NAME);
30
+ function Accordion(props) {
31
+ const [local, rest] = solidJs.splitProps(props, ["type", "__scopeAccordion"]);
32
+ return /* @__PURE__ */ React.createElement(Collection.Provider, { scope: local.__scopeAccordion }, local.type === "multiple" ? /* @__PURE__ */ React.createElement(
33
+ AccordionImplMultiple,
34
+ {
35
+ ...rest,
36
+ __scopeAccordion: local.__scopeAccordion
37
+ }
38
+ ) : /* @__PURE__ */ React.createElement(
39
+ AccordionImplSingle,
40
+ {
41
+ ...rest,
42
+ __scopeAccordion: local.__scopeAccordion
43
+ }
44
+ ));
45
+ }
46
+ function AccordionImplSingle(props) {
47
+ const [local, rest] = solidJs.splitProps(props, [
48
+ "__scopeAccordion",
49
+ "value",
50
+ "defaultValue",
51
+ "onValueChange",
52
+ "collapsible"
53
+ ]);
54
+ const [value, setValue] = useControllableState.createControllableSignal({
55
+ prop: () => local.value,
56
+ defaultProp: local.defaultValue ?? "",
57
+ onChange: local.onValueChange,
58
+ caller: ACCORDION_NAME
59
+ });
60
+ return /* @__PURE__ */ React.createElement(
61
+ AccordionValueProvider,
62
+ {
63
+ scope: local.__scopeAccordion,
64
+ value: value() ? [value()] : [],
65
+ onItemOpen: setValue,
66
+ onItemClose: () => {
67
+ if (local.collapsible) setValue("");
68
+ }
69
+ },
70
+ /* @__PURE__ */ React.createElement(
71
+ AccordionCollapsibleProvider,
72
+ {
73
+ scope: local.__scopeAccordion,
74
+ collapsible: local.collapsible ?? false
75
+ },
76
+ /* @__PURE__ */ React.createElement(AccordionImpl, { ...rest, __scopeAccordion: local.__scopeAccordion })
77
+ )
78
+ );
79
+ }
80
+ function AccordionImplMultiple(props) {
81
+ const [local, rest] = solidJs.splitProps(props, [
82
+ "__scopeAccordion",
83
+ "value",
84
+ "defaultValue",
85
+ "onValueChange"
86
+ ]);
87
+ const [value, setValue] = useControllableState.createControllableSignal({
88
+ prop: () => local.value,
89
+ defaultProp: local.defaultValue ?? [],
90
+ onChange: local.onValueChange,
91
+ caller: ACCORDION_NAME
92
+ });
93
+ const handleItemOpen = (itemValue) => {
94
+ setValue((prevValue = []) => [...prevValue, itemValue]);
95
+ };
96
+ const handleItemClose = (itemValue) => {
97
+ setValue((prevValue = []) => prevValue.filter((v) => v !== itemValue));
98
+ };
99
+ return /* @__PURE__ */ React.createElement(
100
+ AccordionValueProvider,
101
+ {
102
+ scope: local.__scopeAccordion,
103
+ value: value(),
104
+ onItemOpen: handleItemOpen,
105
+ onItemClose: handleItemClose
106
+ },
107
+ /* @__PURE__ */ React.createElement(AccordionCollapsibleProvider, { scope: local.__scopeAccordion, collapsible: true }, /* @__PURE__ */ React.createElement(AccordionImpl, { ...rest, __scopeAccordion: local.__scopeAccordion }))
108
+ );
109
+ }
110
+ function AccordionImpl(props) {
111
+ const [local, rest] = solidJs.splitProps(props, [
112
+ "__scopeAccordion",
113
+ "disabled",
114
+ "dir",
115
+ "orientation",
116
+ "onKeyDown",
117
+ "ref"
118
+ ]);
119
+ const getItems = useCollection(local.__scopeAccordion);
120
+ const direction$1 = direction.useDirection(local.dir);
121
+ const isDirectionLTR = direction$1 === "ltr";
122
+ const orientation = local.orientation ?? "vertical";
123
+ const handleKeyDown = primitive.composeEventHandlers(
124
+ local.onKeyDown,
125
+ (event) => {
126
+ if (!ACCORDION_KEYS.includes(event.key)) return;
127
+ const target = event.target;
128
+ const items = getItems();
129
+ const triggerButtons = items.map((item) => {
130
+ const ref = item.ref;
131
+ if (ref instanceof HTMLButtonElement) return ref;
132
+ return ref.querySelector("button");
133
+ }).filter(
134
+ (btn) => btn !== null && !btn.disabled
135
+ );
136
+ const triggerIndex = triggerButtons.findIndex((btn) => btn === target);
137
+ const triggerCount = triggerButtons.length;
138
+ if (triggerIndex === -1) return;
139
+ event.preventDefault();
140
+ let nextIndex = triggerIndex;
141
+ const homeIndex = 0;
142
+ const endIndex = triggerCount - 1;
143
+ const moveNext = () => {
144
+ nextIndex = triggerIndex + 1;
145
+ if (nextIndex > endIndex) {
146
+ nextIndex = homeIndex;
147
+ }
148
+ };
149
+ const movePrev = () => {
150
+ nextIndex = triggerIndex - 1;
151
+ if (nextIndex < homeIndex) {
152
+ nextIndex = endIndex;
153
+ }
154
+ };
155
+ switch (event.key) {
156
+ case "Home":
157
+ nextIndex = homeIndex;
158
+ break;
159
+ case "End":
160
+ nextIndex = endIndex;
161
+ break;
162
+ case "ArrowRight":
163
+ if (orientation === "horizontal") {
164
+ if (isDirectionLTR) {
165
+ moveNext();
166
+ } else {
167
+ movePrev();
168
+ }
169
+ }
170
+ break;
171
+ case "ArrowDown":
172
+ if (orientation === "vertical") {
173
+ moveNext();
174
+ }
175
+ break;
176
+ case "ArrowLeft":
177
+ if (orientation === "horizontal") {
178
+ if (isDirectionLTR) {
179
+ movePrev();
180
+ } else {
181
+ moveNext();
182
+ }
183
+ }
184
+ break;
185
+ case "ArrowUp":
186
+ if (orientation === "vertical") {
187
+ movePrev();
188
+ }
189
+ break;
190
+ }
191
+ const clampedIndex = nextIndex % triggerCount;
192
+ triggerButtons[clampedIndex]?.focus();
193
+ }
194
+ );
195
+ return /* @__PURE__ */ React.createElement(
196
+ AccordionImplProvider,
197
+ {
198
+ scope: local.__scopeAccordion,
199
+ disabled: local.disabled,
200
+ direction: direction$1,
201
+ orientation
202
+ },
203
+ /* @__PURE__ */ React.createElement(Collection.Slot, { scope: local.__scopeAccordion }, /* @__PURE__ */ React.createElement(
204
+ primitiveComponent.Primitive.div,
205
+ {
206
+ ...rest,
207
+ "data-orientation": orientation,
208
+ ref: local.ref,
209
+ onKeyDown: local.disabled ? void 0 : handleKeyDown
210
+ }
211
+ ))
212
+ );
213
+ }
214
+ function AccordionItem(props) {
215
+ const [local, rest] = solidJs.splitProps(props, [
216
+ "__scopeAccordion",
217
+ "value",
218
+ "disabled"
219
+ ]);
220
+ const accordionContext = useAccordionContext(ITEM_NAME, local.__scopeAccordion);
221
+ const valueContext = useAccordionValueContext(ITEM_NAME, local.__scopeAccordion);
222
+ const collapsibleScope = useCollapsibleScope(local.__scopeAccordion);
223
+ const triggerId = id.createId();
224
+ const open = () => local.value && valueContext.value.includes(local.value) || false;
225
+ const disabled = () => accordionContext.disabled || local.disabled;
226
+ return /* @__PURE__ */ React.createElement(
227
+ AccordionItemProvider,
228
+ {
229
+ scope: local.__scopeAccordion,
230
+ open: open(),
231
+ disabled: disabled(),
232
+ triggerId
233
+ },
234
+ /* @__PURE__ */ React.createElement(
235
+ collapsible.Collapsible,
236
+ {
237
+ "data-orientation": accordionContext.orientation,
238
+ "data-state": getState(open()),
239
+ ...collapsibleScope,
240
+ ...rest,
241
+ disabled: disabled(),
242
+ open: open(),
243
+ onOpenChange: (isOpen) => {
244
+ if (isOpen) {
245
+ valueContext.onItemOpen(local.value);
246
+ } else {
247
+ valueContext.onItemClose(local.value);
248
+ }
249
+ }
250
+ }
251
+ )
252
+ );
253
+ }
254
+ var HEADER_NAME = "AccordionHeader";
255
+ function AccordionHeader(props) {
256
+ const [local, rest] = solidJs.splitProps(props, ["__scopeAccordion"]);
257
+ const accordionContext = useAccordionContext(ACCORDION_NAME, local.__scopeAccordion);
258
+ const itemContext = useAccordionItemContext(HEADER_NAME, local.__scopeAccordion);
259
+ return /* @__PURE__ */ React.createElement(
260
+ primitiveComponent.Primitive.h3,
261
+ {
262
+ "data-orientation": accordionContext.orientation,
263
+ "data-state": getState(itemContext.open),
264
+ "data-disabled": itemContext.disabled ? "" : void 0,
265
+ ...rest
266
+ }
267
+ );
268
+ }
269
+ var TRIGGER_NAME = "AccordionTrigger";
270
+ function AccordionTrigger(props) {
271
+ const [local, rest] = solidJs.splitProps(props, ["__scopeAccordion"]);
272
+ const accordionContext = useAccordionContext(ACCORDION_NAME, local.__scopeAccordion);
273
+ const itemContext = useAccordionItemContext(TRIGGER_NAME, local.__scopeAccordion);
274
+ const collapsibleContext = useAccordionCollapsibleContext(TRIGGER_NAME, local.__scopeAccordion);
275
+ const collapsibleScope = useCollapsibleScope(local.__scopeAccordion);
276
+ return /* @__PURE__ */ React.createElement(Collection.ItemSlot, { scope: local.__scopeAccordion }, /* @__PURE__ */ React.createElement(
277
+ collapsible.CollapsibleTrigger,
278
+ {
279
+ "aria-disabled": itemContext.open && !collapsibleContext.collapsible || void 0,
280
+ "data-orientation": accordionContext.orientation,
281
+ id: itemContext.triggerId,
282
+ ...collapsibleScope,
283
+ ...rest
284
+ }
285
+ ));
286
+ }
287
+ var CONTENT_NAME = "AccordionContent";
288
+ function AccordionContent(props) {
289
+ const [local, rest] = solidJs.splitProps(props, ["__scopeAccordion", "style"]);
290
+ const accordionContext = useAccordionContext(ACCORDION_NAME, local.__scopeAccordion);
291
+ const itemContext = useAccordionItemContext(CONTENT_NAME, local.__scopeAccordion);
292
+ const collapsibleScope = useCollapsibleScope(local.__scopeAccordion);
293
+ return /* @__PURE__ */ React.createElement(
294
+ collapsible.CollapsibleContent,
295
+ {
296
+ role: "region",
297
+ "aria-labelledby": itemContext.triggerId,
298
+ "data-orientation": accordionContext.orientation,
299
+ ...collapsibleScope,
300
+ ...rest,
301
+ style: {
302
+ "--radix-accordion-content-height": "var(--radix-collapsible-content-height)",
303
+ "--radix-accordion-content-width": "var(--radix-collapsible-content-width)",
304
+ ...typeof local.style === "object" ? local.style : {}
305
+ }
306
+ }
307
+ );
308
+ }
309
+ function getState(open) {
310
+ return open ? "open" : "closed";
311
+ }
312
+ var Root = Accordion;
313
+ var Item = AccordionItem;
314
+ var Header = AccordionHeader;
315
+ var Trigger = AccordionTrigger;
316
+ var Content = AccordionContent;
317
+
318
+ exports.Accordion = Accordion;
319
+ exports.AccordionContent = AccordionContent;
320
+ exports.AccordionHeader = AccordionHeader;
321
+ exports.AccordionItem = AccordionItem;
322
+ exports.AccordionTrigger = AccordionTrigger;
323
+ exports.Content = Content;
324
+ exports.Header = Header;
325
+ exports.Item = Item;
326
+ exports.Root = Root;
327
+ exports.Trigger = Trigger;
328
+ exports.createAccordionScope = createAccordionScope;
329
+ //# sourceMappingURL=index.cjs.map
330
+ //# sourceMappingURL=index.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/accordion.tsx"],"names":["createCollection","createContextScope","createCollapsibleScope","splitProps","createControllableSignal","direction","useDirection","composeEventHandlers","Primitive","createId","Collapsible","CollapsibleTrigger","CollapsibleContent"],"mappings":"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","file":"index.cjs","sourcesContent":["import { type JSX, splitProps } from 'solid-js';\nimport { composeEventHandlers } from '@radix-solid-js/primitive';\nimport { createCollection } from '@radix-solid-js/collection';\nimport { createContextScope } from '@radix-solid-js/context';\nimport { useDirection } from '@radix-solid-js/direction';\nimport { createId } from '@radix-solid-js/id';\nimport { Primitive, type PrimitiveProps } from '@radix-solid-js/primitive-component';\nimport { createControllableSignal } from '@radix-solid-js/use-controllable-state';\nimport {\n Collapsible,\n CollapsibleTrigger,\n CollapsibleContent,\n createCollapsibleScope,\n} from '@radix-solid-js/collapsible';\n\nimport type { Scope } from '@radix-solid-js/context';\n\ntype Direction = 'ltr' | 'rtl';\n\n/* -------------------------------------------------------------------------------------------------\n * Accordion\n * -----------------------------------------------------------------------------------------------*/\n\nconst ACCORDION_NAME = 'Accordion';\nconst ACCORDION_KEYS = ['Home', 'End', 'ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'];\n\ntype AccordionTriggerElement = HTMLButtonElement;\n\nconst [Collection, useCollection, createCollectionScope] =\n createCollection<AccordionTriggerElement>(ACCORDION_NAME);\n\ntype ScopedProps<P> = P & { __scopeAccordion?: Scope };\n\nconst [createAccordionContext, createAccordionScope] = createContextScope(ACCORDION_NAME, [\n createCollectionScope,\n createCollapsibleScope,\n]);\n\nconst useCollapsibleScope = createCollapsibleScope();\n\n/* -------------------------------------------------------------------------------------------------\n * AccordionValueContext\n * -----------------------------------------------------------------------------------------------*/\n\ntype AccordionValueContextValue = {\n value: string[];\n onItemOpen(value: string): void;\n onItemClose(value: string): void;\n};\n\nconst [AccordionValueProvider, useAccordionValueContext] =\n createAccordionContext<AccordionValueContextValue>(ACCORDION_NAME);\n\n/* -------------------------------------------------------------------------------------------------\n * AccordionCollapsibleContext\n * -----------------------------------------------------------------------------------------------*/\n\nconst [AccordionCollapsibleProvider, useAccordionCollapsibleContext] = createAccordionContext(\n ACCORDION_NAME,\n { collapsible: false },\n);\n\n/* -------------------------------------------------------------------------------------------------\n * AccordionImplContext\n * -----------------------------------------------------------------------------------------------*/\n\ntype AccordionImplContextValue = {\n disabled?: boolean;\n direction: Direction;\n orientation: 'horizontal' | 'vertical';\n};\n\nconst [AccordionImplProvider, useAccordionContext] =\n createAccordionContext<AccordionImplContextValue>(ACCORDION_NAME);\n\n/* -------------------------------------------------------------------------------------------------\n * AccordionItemContext\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_NAME = 'AccordionItem';\n\ntype AccordionItemContextValue = {\n open?: boolean;\n disabled?: boolean;\n triggerId: string;\n};\n\nconst [AccordionItemProvider, useAccordionItemContext] =\n createAccordionContext<AccordionItemContextValue>(ITEM_NAME);\n\n/* -------------------------------------------------------------------------------------------------\n * Types\n * -----------------------------------------------------------------------------------------------*/\n\ninterface AccordionImplProps extends PrimitiveProps<'div'> {\n /**\n * Whether or not an accordion is disabled from user interaction.\n * @defaultValue false\n */\n disabled?: boolean;\n /**\n * The layout in which the Accordion operates.\n * @default vertical\n */\n orientation?: 'horizontal' | 'vertical';\n /**\n * The language read direction.\n */\n dir?: Direction;\n}\n\ninterface AccordionImplSingleProps extends AccordionImplProps {\n /**\n * The controlled stateful value of the accordion item whose content is expanded.\n */\n value?: string;\n /**\n * The value of the item whose content is expanded when the accordion is initially rendered.\n * Use `defaultValue` if you do not need to control the state of an accordion.\n */\n defaultValue?: string;\n /**\n * The callback that fires when the state of the accordion changes.\n */\n onValueChange?(value: string): void;\n /**\n * Whether an accordion item can be collapsed after it has been opened.\n * @default false\n */\n collapsible?: boolean;\n}\n\ninterface AccordionImplMultipleProps extends AccordionImplProps {\n /**\n * The controlled stateful value of the accordion items whose contents are expanded.\n */\n value?: string[];\n /**\n * The value of the items whose contents are expanded when the accordion is initially rendered.\n * Use `defaultValue` if you do not need to control the state of an accordion.\n */\n defaultValue?: string[];\n /**\n * The callback that fires when the state of the accordion changes.\n */\n onValueChange?(value: string[]): void;\n}\n\ninterface AccordionSingleProps extends AccordionImplSingleProps {\n type: 'single';\n}\n\ninterface AccordionMultipleProps extends AccordionImplMultipleProps {\n type: 'multiple';\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Accordion\n * -----------------------------------------------------------------------------------------------*/\n\nfunction Accordion(props: ScopedProps<AccordionSingleProps | AccordionMultipleProps>) {\n const [local, rest] = splitProps(props, ['type', '__scopeAccordion']);\n\n return (\n <Collection.Provider scope={local.__scopeAccordion}>\n {local.type === 'multiple' ? (\n <AccordionImplMultiple\n {...(rest as unknown as ScopedProps<AccordionImplMultipleProps>)}\n __scopeAccordion={local.__scopeAccordion}\n />\n ) : (\n <AccordionImplSingle\n {...(rest as unknown as ScopedProps<AccordionImplSingleProps>)}\n __scopeAccordion={local.__scopeAccordion}\n />\n )}\n </Collection.Provider>\n );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * AccordionImplSingle\n * -----------------------------------------------------------------------------------------------*/\n\nfunction AccordionImplSingle(props: ScopedProps<AccordionImplSingleProps>) {\n const [local, rest] = splitProps(props, [\n '__scopeAccordion',\n 'value',\n 'defaultValue',\n 'onValueChange',\n 'collapsible',\n ]);\n\n const [value, setValue] = createControllableSignal({\n prop: () => local.value,\n defaultProp: local.defaultValue ?? '',\n onChange: local.onValueChange,\n caller: ACCORDION_NAME,\n });\n\n return (\n <AccordionValueProvider\n scope={local.__scopeAccordion}\n value={value() ? [value() as string] : []}\n onItemOpen={setValue}\n onItemClose={() => {\n if (local.collapsible) setValue('');\n }}\n >\n <AccordionCollapsibleProvider\n scope={local.__scopeAccordion}\n collapsible={local.collapsible ?? false}\n >\n <AccordionImpl {...rest} __scopeAccordion={local.__scopeAccordion} />\n </AccordionCollapsibleProvider>\n </AccordionValueProvider>\n );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * AccordionImplMultiple\n * -----------------------------------------------------------------------------------------------*/\n\nfunction AccordionImplMultiple(props: ScopedProps<AccordionImplMultipleProps>) {\n const [local, rest] = splitProps(props, [\n '__scopeAccordion',\n 'value',\n 'defaultValue',\n 'onValueChange',\n ]);\n\n const [value, setValue] = createControllableSignal({\n prop: () => local.value,\n defaultProp: local.defaultValue ?? ([] as string[]),\n onChange: local.onValueChange,\n caller: ACCORDION_NAME,\n });\n\n const handleItemOpen = (itemValue: string) => {\n setValue((prevValue = []) => [...prevValue, itemValue]);\n };\n\n const handleItemClose = (itemValue: string) => {\n setValue((prevValue = []) => prevValue.filter((v) => v !== itemValue));\n };\n\n return (\n <AccordionValueProvider\n scope={local.__scopeAccordion}\n value={value() as string[]}\n onItemOpen={handleItemOpen}\n onItemClose={handleItemClose}\n >\n <AccordionCollapsibleProvider scope={local.__scopeAccordion} collapsible={true}>\n <AccordionImpl {...rest} __scopeAccordion={local.__scopeAccordion} />\n </AccordionCollapsibleProvider>\n </AccordionValueProvider>\n );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * AccordionImpl\n * -----------------------------------------------------------------------------------------------*/\n\nfunction AccordionImpl(props: ScopedProps<AccordionImplProps>) {\n const [local, rest] = splitProps(props, [\n '__scopeAccordion',\n 'disabled',\n 'dir',\n 'orientation',\n 'onKeyDown',\n 'ref',\n ]);\n\n const getItems = useCollection(local.__scopeAccordion);\n const direction = useDirection(local.dir);\n const isDirectionLTR = direction === 'ltr';\n const orientation = local.orientation ?? 'vertical';\n\n const handleKeyDown = composeEventHandlers<KeyboardEvent>(\n local.onKeyDown as ((event: KeyboardEvent) => void) | undefined,\n (event) => {\n if (!ACCORDION_KEYS.includes(event.key)) return;\n\n const target = event.target as HTMLElement;\n const items = getItems();\n\n // Get trigger buttons from collection items.\n // Each collection item's ref is a wrapper <span>, the actual <button> is inside.\n const triggerButtons = items\n .map((item) => {\n const ref = item.ref as HTMLElement;\n if (ref instanceof HTMLButtonElement) return ref;\n return ref.querySelector('button') as HTMLButtonElement | null;\n })\n .filter(\n (btn): btn is HTMLButtonElement => btn !== null && !btn.disabled\n );\n\n const triggerIndex = triggerButtons.findIndex((btn) => btn === target);\n const triggerCount = triggerButtons.length;\n\n if (triggerIndex === -1) return;\n\n // Prevents page scroll while user is navigating\n event.preventDefault();\n\n let nextIndex = triggerIndex;\n const homeIndex = 0;\n const endIndex = triggerCount - 1;\n\n const moveNext = () => {\n nextIndex = triggerIndex + 1;\n if (nextIndex > endIndex) {\n nextIndex = homeIndex;\n }\n };\n\n const movePrev = () => {\n nextIndex = triggerIndex - 1;\n if (nextIndex < homeIndex) {\n nextIndex = endIndex;\n }\n };\n\n switch (event.key) {\n case 'Home':\n nextIndex = homeIndex;\n break;\n case 'End':\n nextIndex = endIndex;\n break;\n case 'ArrowRight':\n if (orientation === 'horizontal') {\n if (isDirectionLTR) {\n moveNext();\n } else {\n movePrev();\n }\n }\n break;\n case 'ArrowDown':\n if (orientation === 'vertical') {\n moveNext();\n }\n break;\n case 'ArrowLeft':\n if (orientation === 'horizontal') {\n if (isDirectionLTR) {\n movePrev();\n } else {\n moveNext();\n }\n }\n break;\n case 'ArrowUp':\n if (orientation === 'vertical') {\n movePrev();\n }\n break;\n }\n\n const clampedIndex = nextIndex % triggerCount;\n triggerButtons[clampedIndex]?.focus();\n }\n );\n\n return (\n <AccordionImplProvider\n scope={local.__scopeAccordion}\n disabled={local.disabled}\n direction={direction as Direction}\n orientation={orientation}\n >\n <Collection.Slot scope={local.__scopeAccordion}>\n <Primitive.div\n {...rest}\n data-orientation={orientation}\n ref={local.ref}\n onKeyDown={local.disabled ? undefined : handleKeyDown}\n />\n </Collection.Slot>\n </AccordionImplProvider>\n );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * AccordionItem\n * -----------------------------------------------------------------------------------------------*/\n\ninterface AccordionItemProps extends PrimitiveProps<'div'> {\n /**\n * Whether or not an accordion item is disabled from user interaction.\n * @defaultValue false\n */\n disabled?: boolean;\n /**\n * A string value for the accordion item. All items within an accordion should use a unique value.\n */\n value: string;\n}\n\n/**\n * `AccordionItem` contains all of the parts of a collapsible section inside of an `Accordion`.\n */\nfunction AccordionItem(props: ScopedProps<AccordionItemProps>) {\n const [local, rest] = splitProps(props, [\n '__scopeAccordion',\n 'value',\n 'disabled',\n ]);\n\n const accordionContext = useAccordionContext(ITEM_NAME, local.__scopeAccordion);\n const valueContext = useAccordionValueContext(ITEM_NAME, local.__scopeAccordion);\n const collapsibleScope = useCollapsibleScope(local.__scopeAccordion);\n const triggerId = createId();\n const open = () => (local.value && valueContext.value.includes(local.value)) || false;\n const disabled = () => accordionContext.disabled || local.disabled;\n\n return (\n <AccordionItemProvider\n scope={local.__scopeAccordion}\n open={open()}\n disabled={disabled()}\n triggerId={triggerId}\n >\n <Collapsible\n data-orientation={accordionContext.orientation}\n data-state={getState(open())}\n {...collapsibleScope}\n {...rest}\n disabled={disabled()}\n open={open()}\n onOpenChange={(isOpen: boolean) => {\n if (isOpen) {\n valueContext.onItemOpen(local.value);\n } else {\n valueContext.onItemClose(local.value);\n }\n }}\n />\n </AccordionItemProvider>\n );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * AccordionHeader\n * -----------------------------------------------------------------------------------------------*/\n\nconst HEADER_NAME = 'AccordionHeader';\n\ninterface AccordionHeaderProps extends PrimitiveProps<'h3'> {}\n\n/**\n * `AccordionHeader` contains the content for the parts of an `AccordionItem` that will be visible\n * whether or not its content is collapsed.\n */\nfunction AccordionHeader(props: ScopedProps<AccordionHeaderProps>) {\n const [local, rest] = splitProps(props, ['__scopeAccordion']);\n const accordionContext = useAccordionContext(ACCORDION_NAME, local.__scopeAccordion);\n const itemContext = useAccordionItemContext(HEADER_NAME, local.__scopeAccordion);\n\n return (\n <Primitive.h3\n data-orientation={accordionContext.orientation}\n data-state={getState(itemContext.open)}\n data-disabled={itemContext.disabled ? '' : undefined}\n {...rest}\n />\n );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * AccordionTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'AccordionTrigger';\n\ninterface AccordionTriggerProps extends PrimitiveProps<'button'> {}\n\n/**\n * `AccordionTrigger` is the trigger that toggles the collapsed state of an `AccordionItem`. It\n * should always be nested inside of an `AccordionHeader`.\n */\nfunction AccordionTrigger(props: ScopedProps<AccordionTriggerProps>) {\n const [local, rest] = splitProps(props, ['__scopeAccordion']);\n const accordionContext = useAccordionContext(ACCORDION_NAME, local.__scopeAccordion);\n const itemContext = useAccordionItemContext(TRIGGER_NAME, local.__scopeAccordion);\n const collapsibleContext = useAccordionCollapsibleContext(TRIGGER_NAME, local.__scopeAccordion);\n const collapsibleScope = useCollapsibleScope(local.__scopeAccordion);\n\n return (\n <Collection.ItemSlot scope={local.__scopeAccordion}>\n <CollapsibleTrigger\n aria-disabled={\n (itemContext.open && !collapsibleContext.collapsible) || undefined\n }\n data-orientation={accordionContext.orientation}\n id={itemContext.triggerId}\n {...collapsibleScope}\n {...rest}\n />\n </Collection.ItemSlot>\n );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * AccordionContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'AccordionContent';\n\ninterface AccordionContentProps extends PrimitiveProps<'div'> {\n /**\n * Used to force mounting when more control is needed. Useful when controlling animation\n * with SolidJS animation libraries.\n */\n forceMount?: true;\n}\n\n/**\n * `AccordionContent` contains the collapsible content for an `AccordionItem`.\n */\nfunction AccordionContent(props: ScopedProps<AccordionContentProps>) {\n const [local, rest] = splitProps(props, ['__scopeAccordion', 'style']);\n const accordionContext = useAccordionContext(ACCORDION_NAME, local.__scopeAccordion);\n const itemContext = useAccordionItemContext(CONTENT_NAME, local.__scopeAccordion);\n const collapsibleScope = useCollapsibleScope(local.__scopeAccordion);\n\n return (\n <CollapsibleContent\n role=\"region\"\n aria-labelledby={itemContext.triggerId}\n data-orientation={accordionContext.orientation}\n {...collapsibleScope}\n {...rest}\n style={\n {\n '--radix-accordion-content-height': 'var(--radix-collapsible-content-height)',\n '--radix-accordion-content-width': 'var(--radix-collapsible-content-width)',\n ...(typeof local.style === 'object' ? local.style : {}),\n } as JSX.CSSProperties\n }\n />\n );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Utils\n * -----------------------------------------------------------------------------------------------*/\n\nfunction getState(open?: boolean) {\n return open ? 'open' : 'closed';\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Exports\n * -----------------------------------------------------------------------------------------------*/\n\nconst Root = Accordion;\nconst Item = AccordionItem;\nconst Header = AccordionHeader;\nconst Trigger = AccordionTrigger;\nconst Content = AccordionContent;\n\nexport {\n createAccordionScope,\n //\n Accordion,\n AccordionItem,\n AccordionHeader,\n AccordionTrigger,\n AccordionContent,\n //\n Root,\n Item,\n Header,\n Trigger,\n Content,\n};\nexport type {\n AccordionSingleProps,\n AccordionMultipleProps,\n AccordionItemProps,\n AccordionHeaderProps,\n AccordionTriggerProps,\n AccordionContentProps,\n};\n"]}
@@ -0,0 +1,115 @@
1
+ import * as _radix_solid_js_context from '@radix-solid-js/context';
2
+ import { Scope } from '@radix-solid-js/context';
3
+ import { JSX } from 'solid-js';
4
+ import { PrimitiveProps } from '@radix-solid-js/primitive-component';
5
+
6
+ type Direction = 'ltr' | 'rtl';
7
+ type ScopedProps<P> = P & {
8
+ __scopeAccordion?: Scope;
9
+ };
10
+ declare const createAccordionScope: _radix_solid_js_context.CreateScope;
11
+ interface AccordionImplProps extends PrimitiveProps<'div'> {
12
+ /**
13
+ * Whether or not an accordion is disabled from user interaction.
14
+ * @defaultValue false
15
+ */
16
+ disabled?: boolean;
17
+ /**
18
+ * The layout in which the Accordion operates.
19
+ * @default vertical
20
+ */
21
+ orientation?: 'horizontal' | 'vertical';
22
+ /**
23
+ * The language read direction.
24
+ */
25
+ dir?: Direction;
26
+ }
27
+ interface AccordionImplSingleProps extends AccordionImplProps {
28
+ /**
29
+ * The controlled stateful value of the accordion item whose content is expanded.
30
+ */
31
+ value?: string;
32
+ /**
33
+ * The value of the item whose content is expanded when the accordion is initially rendered.
34
+ * Use `defaultValue` if you do not need to control the state of an accordion.
35
+ */
36
+ defaultValue?: string;
37
+ /**
38
+ * The callback that fires when the state of the accordion changes.
39
+ */
40
+ onValueChange?(value: string): void;
41
+ /**
42
+ * Whether an accordion item can be collapsed after it has been opened.
43
+ * @default false
44
+ */
45
+ collapsible?: boolean;
46
+ }
47
+ interface AccordionImplMultipleProps extends AccordionImplProps {
48
+ /**
49
+ * The controlled stateful value of the accordion items whose contents are expanded.
50
+ */
51
+ value?: string[];
52
+ /**
53
+ * The value of the items whose contents are expanded when the accordion is initially rendered.
54
+ * Use `defaultValue` if you do not need to control the state of an accordion.
55
+ */
56
+ defaultValue?: string[];
57
+ /**
58
+ * The callback that fires when the state of the accordion changes.
59
+ */
60
+ onValueChange?(value: string[]): void;
61
+ }
62
+ interface AccordionSingleProps extends AccordionImplSingleProps {
63
+ type: 'single';
64
+ }
65
+ interface AccordionMultipleProps extends AccordionImplMultipleProps {
66
+ type: 'multiple';
67
+ }
68
+ declare function Accordion(props: ScopedProps<AccordionSingleProps | AccordionMultipleProps>): JSX.Element;
69
+ interface AccordionItemProps extends PrimitiveProps<'div'> {
70
+ /**
71
+ * Whether or not an accordion item is disabled from user interaction.
72
+ * @defaultValue false
73
+ */
74
+ disabled?: boolean;
75
+ /**
76
+ * A string value for the accordion item. All items within an accordion should use a unique value.
77
+ */
78
+ value: string;
79
+ }
80
+ /**
81
+ * `AccordionItem` contains all of the parts of a collapsible section inside of an `Accordion`.
82
+ */
83
+ declare function AccordionItem(props: ScopedProps<AccordionItemProps>): JSX.Element;
84
+ interface AccordionHeaderProps extends PrimitiveProps<'h3'> {
85
+ }
86
+ /**
87
+ * `AccordionHeader` contains the content for the parts of an `AccordionItem` that will be visible
88
+ * whether or not its content is collapsed.
89
+ */
90
+ declare function AccordionHeader(props: ScopedProps<AccordionHeaderProps>): JSX.Element;
91
+ interface AccordionTriggerProps extends PrimitiveProps<'button'> {
92
+ }
93
+ /**
94
+ * `AccordionTrigger` is the trigger that toggles the collapsed state of an `AccordionItem`. It
95
+ * should always be nested inside of an `AccordionHeader`.
96
+ */
97
+ declare function AccordionTrigger(props: ScopedProps<AccordionTriggerProps>): JSX.Element;
98
+ interface AccordionContentProps extends PrimitiveProps<'div'> {
99
+ /**
100
+ * Used to force mounting when more control is needed. Useful when controlling animation
101
+ * with SolidJS animation libraries.
102
+ */
103
+ forceMount?: true;
104
+ }
105
+ /**
106
+ * `AccordionContent` contains the collapsible content for an `AccordionItem`.
107
+ */
108
+ declare function AccordionContent(props: ScopedProps<AccordionContentProps>): JSX.Element;
109
+ declare const Root: typeof Accordion;
110
+ declare const Item: typeof AccordionItem;
111
+ declare const Header: typeof AccordionHeader;
112
+ declare const Trigger: typeof AccordionTrigger;
113
+ declare const Content: typeof AccordionContent;
114
+
115
+ export { Accordion, AccordionContent, type AccordionContentProps, AccordionHeader, type AccordionHeaderProps, AccordionItem, type AccordionItemProps, type AccordionMultipleProps, type AccordionSingleProps, AccordionTrigger, type AccordionTriggerProps, Content, Header, Item, Root, Trigger, createAccordionScope };
@@ -0,0 +1,115 @@
1
+ import * as _radix_solid_js_context from '@radix-solid-js/context';
2
+ import { Scope } from '@radix-solid-js/context';
3
+ import { JSX } from 'solid-js';
4
+ import { PrimitiveProps } from '@radix-solid-js/primitive-component';
5
+
6
+ type Direction = 'ltr' | 'rtl';
7
+ type ScopedProps<P> = P & {
8
+ __scopeAccordion?: Scope;
9
+ };
10
+ declare const createAccordionScope: _radix_solid_js_context.CreateScope;
11
+ interface AccordionImplProps extends PrimitiveProps<'div'> {
12
+ /**
13
+ * Whether or not an accordion is disabled from user interaction.
14
+ * @defaultValue false
15
+ */
16
+ disabled?: boolean;
17
+ /**
18
+ * The layout in which the Accordion operates.
19
+ * @default vertical
20
+ */
21
+ orientation?: 'horizontal' | 'vertical';
22
+ /**
23
+ * The language read direction.
24
+ */
25
+ dir?: Direction;
26
+ }
27
+ interface AccordionImplSingleProps extends AccordionImplProps {
28
+ /**
29
+ * The controlled stateful value of the accordion item whose content is expanded.
30
+ */
31
+ value?: string;
32
+ /**
33
+ * The value of the item whose content is expanded when the accordion is initially rendered.
34
+ * Use `defaultValue` if you do not need to control the state of an accordion.
35
+ */
36
+ defaultValue?: string;
37
+ /**
38
+ * The callback that fires when the state of the accordion changes.
39
+ */
40
+ onValueChange?(value: string): void;
41
+ /**
42
+ * Whether an accordion item can be collapsed after it has been opened.
43
+ * @default false
44
+ */
45
+ collapsible?: boolean;
46
+ }
47
+ interface AccordionImplMultipleProps extends AccordionImplProps {
48
+ /**
49
+ * The controlled stateful value of the accordion items whose contents are expanded.
50
+ */
51
+ value?: string[];
52
+ /**
53
+ * The value of the items whose contents are expanded when the accordion is initially rendered.
54
+ * Use `defaultValue` if you do not need to control the state of an accordion.
55
+ */
56
+ defaultValue?: string[];
57
+ /**
58
+ * The callback that fires when the state of the accordion changes.
59
+ */
60
+ onValueChange?(value: string[]): void;
61
+ }
62
+ interface AccordionSingleProps extends AccordionImplSingleProps {
63
+ type: 'single';
64
+ }
65
+ interface AccordionMultipleProps extends AccordionImplMultipleProps {
66
+ type: 'multiple';
67
+ }
68
+ declare function Accordion(props: ScopedProps<AccordionSingleProps | AccordionMultipleProps>): JSX.Element;
69
+ interface AccordionItemProps extends PrimitiveProps<'div'> {
70
+ /**
71
+ * Whether or not an accordion item is disabled from user interaction.
72
+ * @defaultValue false
73
+ */
74
+ disabled?: boolean;
75
+ /**
76
+ * A string value for the accordion item. All items within an accordion should use a unique value.
77
+ */
78
+ value: string;
79
+ }
80
+ /**
81
+ * `AccordionItem` contains all of the parts of a collapsible section inside of an `Accordion`.
82
+ */
83
+ declare function AccordionItem(props: ScopedProps<AccordionItemProps>): JSX.Element;
84
+ interface AccordionHeaderProps extends PrimitiveProps<'h3'> {
85
+ }
86
+ /**
87
+ * `AccordionHeader` contains the content for the parts of an `AccordionItem` that will be visible
88
+ * whether or not its content is collapsed.
89
+ */
90
+ declare function AccordionHeader(props: ScopedProps<AccordionHeaderProps>): JSX.Element;
91
+ interface AccordionTriggerProps extends PrimitiveProps<'button'> {
92
+ }
93
+ /**
94
+ * `AccordionTrigger` is the trigger that toggles the collapsed state of an `AccordionItem`. It
95
+ * should always be nested inside of an `AccordionHeader`.
96
+ */
97
+ declare function AccordionTrigger(props: ScopedProps<AccordionTriggerProps>): JSX.Element;
98
+ interface AccordionContentProps extends PrimitiveProps<'div'> {
99
+ /**
100
+ * Used to force mounting when more control is needed. Useful when controlling animation
101
+ * with SolidJS animation libraries.
102
+ */
103
+ forceMount?: true;
104
+ }
105
+ /**
106
+ * `AccordionContent` contains the collapsible content for an `AccordionItem`.
107
+ */
108
+ declare function AccordionContent(props: ScopedProps<AccordionContentProps>): JSX.Element;
109
+ declare const Root: typeof Accordion;
110
+ declare const Item: typeof AccordionItem;
111
+ declare const Header: typeof AccordionHeader;
112
+ declare const Trigger: typeof AccordionTrigger;
113
+ declare const Content: typeof AccordionContent;
114
+
115
+ export { Accordion, AccordionContent, type AccordionContentProps, AccordionHeader, type AccordionHeaderProps, AccordionItem, type AccordionItemProps, type AccordionMultipleProps, type AccordionSingleProps, AccordionTrigger, type AccordionTriggerProps, Content, Header, Item, Root, Trigger, createAccordionScope };
package/dist/index.js ADDED
@@ -0,0 +1,318 @@
1
+ import { splitProps } from 'solid-js';
2
+ import { composeEventHandlers } from '@radix-solid-js/primitive';
3
+ import { createCollection } from '@radix-solid-js/collection';
4
+ import { createContextScope } from '@radix-solid-js/context';
5
+ import { useDirection } from '@radix-solid-js/direction';
6
+ import { createId } from '@radix-solid-js/id';
7
+ import { Primitive } from '@radix-solid-js/primitive-component';
8
+ import { createControllableSignal } from '@radix-solid-js/use-controllable-state';
9
+ import { createCollapsibleScope, Collapsible, CollapsibleTrigger, CollapsibleContent } from '@radix-solid-js/collapsible';
10
+
11
+ // src/accordion.tsx
12
+ var ACCORDION_NAME = "Accordion";
13
+ var ACCORDION_KEYS = ["Home", "End", "ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"];
14
+ var [Collection, useCollection, createCollectionScope] = createCollection(ACCORDION_NAME);
15
+ var [createAccordionContext, createAccordionScope] = createContextScope(ACCORDION_NAME, [
16
+ createCollectionScope,
17
+ createCollapsibleScope
18
+ ]);
19
+ var useCollapsibleScope = createCollapsibleScope();
20
+ var [AccordionValueProvider, useAccordionValueContext] = createAccordionContext(ACCORDION_NAME);
21
+ var [AccordionCollapsibleProvider, useAccordionCollapsibleContext] = createAccordionContext(
22
+ ACCORDION_NAME,
23
+ { collapsible: false }
24
+ );
25
+ var [AccordionImplProvider, useAccordionContext] = createAccordionContext(ACCORDION_NAME);
26
+ var ITEM_NAME = "AccordionItem";
27
+ var [AccordionItemProvider, useAccordionItemContext] = createAccordionContext(ITEM_NAME);
28
+ function Accordion(props) {
29
+ const [local, rest] = splitProps(props, ["type", "__scopeAccordion"]);
30
+ return /* @__PURE__ */ React.createElement(Collection.Provider, { scope: local.__scopeAccordion }, local.type === "multiple" ? /* @__PURE__ */ React.createElement(
31
+ AccordionImplMultiple,
32
+ {
33
+ ...rest,
34
+ __scopeAccordion: local.__scopeAccordion
35
+ }
36
+ ) : /* @__PURE__ */ React.createElement(
37
+ AccordionImplSingle,
38
+ {
39
+ ...rest,
40
+ __scopeAccordion: local.__scopeAccordion
41
+ }
42
+ ));
43
+ }
44
+ function AccordionImplSingle(props) {
45
+ const [local, rest] = splitProps(props, [
46
+ "__scopeAccordion",
47
+ "value",
48
+ "defaultValue",
49
+ "onValueChange",
50
+ "collapsible"
51
+ ]);
52
+ const [value, setValue] = createControllableSignal({
53
+ prop: () => local.value,
54
+ defaultProp: local.defaultValue ?? "",
55
+ onChange: local.onValueChange,
56
+ caller: ACCORDION_NAME
57
+ });
58
+ return /* @__PURE__ */ React.createElement(
59
+ AccordionValueProvider,
60
+ {
61
+ scope: local.__scopeAccordion,
62
+ value: value() ? [value()] : [],
63
+ onItemOpen: setValue,
64
+ onItemClose: () => {
65
+ if (local.collapsible) setValue("");
66
+ }
67
+ },
68
+ /* @__PURE__ */ React.createElement(
69
+ AccordionCollapsibleProvider,
70
+ {
71
+ scope: local.__scopeAccordion,
72
+ collapsible: local.collapsible ?? false
73
+ },
74
+ /* @__PURE__ */ React.createElement(AccordionImpl, { ...rest, __scopeAccordion: local.__scopeAccordion })
75
+ )
76
+ );
77
+ }
78
+ function AccordionImplMultiple(props) {
79
+ const [local, rest] = splitProps(props, [
80
+ "__scopeAccordion",
81
+ "value",
82
+ "defaultValue",
83
+ "onValueChange"
84
+ ]);
85
+ const [value, setValue] = createControllableSignal({
86
+ prop: () => local.value,
87
+ defaultProp: local.defaultValue ?? [],
88
+ onChange: local.onValueChange,
89
+ caller: ACCORDION_NAME
90
+ });
91
+ const handleItemOpen = (itemValue) => {
92
+ setValue((prevValue = []) => [...prevValue, itemValue]);
93
+ };
94
+ const handleItemClose = (itemValue) => {
95
+ setValue((prevValue = []) => prevValue.filter((v) => v !== itemValue));
96
+ };
97
+ return /* @__PURE__ */ React.createElement(
98
+ AccordionValueProvider,
99
+ {
100
+ scope: local.__scopeAccordion,
101
+ value: value(),
102
+ onItemOpen: handleItemOpen,
103
+ onItemClose: handleItemClose
104
+ },
105
+ /* @__PURE__ */ React.createElement(AccordionCollapsibleProvider, { scope: local.__scopeAccordion, collapsible: true }, /* @__PURE__ */ React.createElement(AccordionImpl, { ...rest, __scopeAccordion: local.__scopeAccordion }))
106
+ );
107
+ }
108
+ function AccordionImpl(props) {
109
+ const [local, rest] = splitProps(props, [
110
+ "__scopeAccordion",
111
+ "disabled",
112
+ "dir",
113
+ "orientation",
114
+ "onKeyDown",
115
+ "ref"
116
+ ]);
117
+ const getItems = useCollection(local.__scopeAccordion);
118
+ const direction = useDirection(local.dir);
119
+ const isDirectionLTR = direction === "ltr";
120
+ const orientation = local.orientation ?? "vertical";
121
+ const handleKeyDown = composeEventHandlers(
122
+ local.onKeyDown,
123
+ (event) => {
124
+ if (!ACCORDION_KEYS.includes(event.key)) return;
125
+ const target = event.target;
126
+ const items = getItems();
127
+ const triggerButtons = items.map((item) => {
128
+ const ref = item.ref;
129
+ if (ref instanceof HTMLButtonElement) return ref;
130
+ return ref.querySelector("button");
131
+ }).filter(
132
+ (btn) => btn !== null && !btn.disabled
133
+ );
134
+ const triggerIndex = triggerButtons.findIndex((btn) => btn === target);
135
+ const triggerCount = triggerButtons.length;
136
+ if (triggerIndex === -1) return;
137
+ event.preventDefault();
138
+ let nextIndex = triggerIndex;
139
+ const homeIndex = 0;
140
+ const endIndex = triggerCount - 1;
141
+ const moveNext = () => {
142
+ nextIndex = triggerIndex + 1;
143
+ if (nextIndex > endIndex) {
144
+ nextIndex = homeIndex;
145
+ }
146
+ };
147
+ const movePrev = () => {
148
+ nextIndex = triggerIndex - 1;
149
+ if (nextIndex < homeIndex) {
150
+ nextIndex = endIndex;
151
+ }
152
+ };
153
+ switch (event.key) {
154
+ case "Home":
155
+ nextIndex = homeIndex;
156
+ break;
157
+ case "End":
158
+ nextIndex = endIndex;
159
+ break;
160
+ case "ArrowRight":
161
+ if (orientation === "horizontal") {
162
+ if (isDirectionLTR) {
163
+ moveNext();
164
+ } else {
165
+ movePrev();
166
+ }
167
+ }
168
+ break;
169
+ case "ArrowDown":
170
+ if (orientation === "vertical") {
171
+ moveNext();
172
+ }
173
+ break;
174
+ case "ArrowLeft":
175
+ if (orientation === "horizontal") {
176
+ if (isDirectionLTR) {
177
+ movePrev();
178
+ } else {
179
+ moveNext();
180
+ }
181
+ }
182
+ break;
183
+ case "ArrowUp":
184
+ if (orientation === "vertical") {
185
+ movePrev();
186
+ }
187
+ break;
188
+ }
189
+ const clampedIndex = nextIndex % triggerCount;
190
+ triggerButtons[clampedIndex]?.focus();
191
+ }
192
+ );
193
+ return /* @__PURE__ */ React.createElement(
194
+ AccordionImplProvider,
195
+ {
196
+ scope: local.__scopeAccordion,
197
+ disabled: local.disabled,
198
+ direction,
199
+ orientation
200
+ },
201
+ /* @__PURE__ */ React.createElement(Collection.Slot, { scope: local.__scopeAccordion }, /* @__PURE__ */ React.createElement(
202
+ Primitive.div,
203
+ {
204
+ ...rest,
205
+ "data-orientation": orientation,
206
+ ref: local.ref,
207
+ onKeyDown: local.disabled ? void 0 : handleKeyDown
208
+ }
209
+ ))
210
+ );
211
+ }
212
+ function AccordionItem(props) {
213
+ const [local, rest] = splitProps(props, [
214
+ "__scopeAccordion",
215
+ "value",
216
+ "disabled"
217
+ ]);
218
+ const accordionContext = useAccordionContext(ITEM_NAME, local.__scopeAccordion);
219
+ const valueContext = useAccordionValueContext(ITEM_NAME, local.__scopeAccordion);
220
+ const collapsibleScope = useCollapsibleScope(local.__scopeAccordion);
221
+ const triggerId = createId();
222
+ const open = () => local.value && valueContext.value.includes(local.value) || false;
223
+ const disabled = () => accordionContext.disabled || local.disabled;
224
+ return /* @__PURE__ */ React.createElement(
225
+ AccordionItemProvider,
226
+ {
227
+ scope: local.__scopeAccordion,
228
+ open: open(),
229
+ disabled: disabled(),
230
+ triggerId
231
+ },
232
+ /* @__PURE__ */ React.createElement(
233
+ Collapsible,
234
+ {
235
+ "data-orientation": accordionContext.orientation,
236
+ "data-state": getState(open()),
237
+ ...collapsibleScope,
238
+ ...rest,
239
+ disabled: disabled(),
240
+ open: open(),
241
+ onOpenChange: (isOpen) => {
242
+ if (isOpen) {
243
+ valueContext.onItemOpen(local.value);
244
+ } else {
245
+ valueContext.onItemClose(local.value);
246
+ }
247
+ }
248
+ }
249
+ )
250
+ );
251
+ }
252
+ var HEADER_NAME = "AccordionHeader";
253
+ function AccordionHeader(props) {
254
+ const [local, rest] = splitProps(props, ["__scopeAccordion"]);
255
+ const accordionContext = useAccordionContext(ACCORDION_NAME, local.__scopeAccordion);
256
+ const itemContext = useAccordionItemContext(HEADER_NAME, local.__scopeAccordion);
257
+ return /* @__PURE__ */ React.createElement(
258
+ Primitive.h3,
259
+ {
260
+ "data-orientation": accordionContext.orientation,
261
+ "data-state": getState(itemContext.open),
262
+ "data-disabled": itemContext.disabled ? "" : void 0,
263
+ ...rest
264
+ }
265
+ );
266
+ }
267
+ var TRIGGER_NAME = "AccordionTrigger";
268
+ function AccordionTrigger(props) {
269
+ const [local, rest] = splitProps(props, ["__scopeAccordion"]);
270
+ const accordionContext = useAccordionContext(ACCORDION_NAME, local.__scopeAccordion);
271
+ const itemContext = useAccordionItemContext(TRIGGER_NAME, local.__scopeAccordion);
272
+ const collapsibleContext = useAccordionCollapsibleContext(TRIGGER_NAME, local.__scopeAccordion);
273
+ const collapsibleScope = useCollapsibleScope(local.__scopeAccordion);
274
+ return /* @__PURE__ */ React.createElement(Collection.ItemSlot, { scope: local.__scopeAccordion }, /* @__PURE__ */ React.createElement(
275
+ CollapsibleTrigger,
276
+ {
277
+ "aria-disabled": itemContext.open && !collapsibleContext.collapsible || void 0,
278
+ "data-orientation": accordionContext.orientation,
279
+ id: itemContext.triggerId,
280
+ ...collapsibleScope,
281
+ ...rest
282
+ }
283
+ ));
284
+ }
285
+ var CONTENT_NAME = "AccordionContent";
286
+ function AccordionContent(props) {
287
+ const [local, rest] = splitProps(props, ["__scopeAccordion", "style"]);
288
+ const accordionContext = useAccordionContext(ACCORDION_NAME, local.__scopeAccordion);
289
+ const itemContext = useAccordionItemContext(CONTENT_NAME, local.__scopeAccordion);
290
+ const collapsibleScope = useCollapsibleScope(local.__scopeAccordion);
291
+ return /* @__PURE__ */ React.createElement(
292
+ CollapsibleContent,
293
+ {
294
+ role: "region",
295
+ "aria-labelledby": itemContext.triggerId,
296
+ "data-orientation": accordionContext.orientation,
297
+ ...collapsibleScope,
298
+ ...rest,
299
+ style: {
300
+ "--radix-accordion-content-height": "var(--radix-collapsible-content-height)",
301
+ "--radix-accordion-content-width": "var(--radix-collapsible-content-width)",
302
+ ...typeof local.style === "object" ? local.style : {}
303
+ }
304
+ }
305
+ );
306
+ }
307
+ function getState(open) {
308
+ return open ? "open" : "closed";
309
+ }
310
+ var Root = Accordion;
311
+ var Item = AccordionItem;
312
+ var Header = AccordionHeader;
313
+ var Trigger = AccordionTrigger;
314
+ var Content = AccordionContent;
315
+
316
+ export { Accordion, AccordionContent, AccordionHeader, AccordionItem, AccordionTrigger, Content, Header, Item, Root, Trigger, createAccordionScope };
317
+ //# sourceMappingURL=index.js.map
318
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/accordion.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import { type JSX, splitProps } from 'solid-js';\nimport { composeEventHandlers } from '@radix-solid-js/primitive';\nimport { createCollection } from '@radix-solid-js/collection';\nimport { createContextScope } from '@radix-solid-js/context';\nimport { useDirection } from '@radix-solid-js/direction';\nimport { createId } from '@radix-solid-js/id';\nimport { Primitive, type PrimitiveProps } from '@radix-solid-js/primitive-component';\nimport { createControllableSignal } from '@radix-solid-js/use-controllable-state';\nimport {\n Collapsible,\n CollapsibleTrigger,\n CollapsibleContent,\n createCollapsibleScope,\n} from '@radix-solid-js/collapsible';\n\nimport type { Scope } from '@radix-solid-js/context';\n\ntype Direction = 'ltr' | 'rtl';\n\n/* -------------------------------------------------------------------------------------------------\n * Accordion\n * -----------------------------------------------------------------------------------------------*/\n\nconst ACCORDION_NAME = 'Accordion';\nconst ACCORDION_KEYS = ['Home', 'End', 'ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'];\n\ntype AccordionTriggerElement = HTMLButtonElement;\n\nconst [Collection, useCollection, createCollectionScope] =\n createCollection<AccordionTriggerElement>(ACCORDION_NAME);\n\ntype ScopedProps<P> = P & { __scopeAccordion?: Scope };\n\nconst [createAccordionContext, createAccordionScope] = createContextScope(ACCORDION_NAME, [\n createCollectionScope,\n createCollapsibleScope,\n]);\n\nconst useCollapsibleScope = createCollapsibleScope();\n\n/* -------------------------------------------------------------------------------------------------\n * AccordionValueContext\n * -----------------------------------------------------------------------------------------------*/\n\ntype AccordionValueContextValue = {\n value: string[];\n onItemOpen(value: string): void;\n onItemClose(value: string): void;\n};\n\nconst [AccordionValueProvider, useAccordionValueContext] =\n createAccordionContext<AccordionValueContextValue>(ACCORDION_NAME);\n\n/* -------------------------------------------------------------------------------------------------\n * AccordionCollapsibleContext\n * -----------------------------------------------------------------------------------------------*/\n\nconst [AccordionCollapsibleProvider, useAccordionCollapsibleContext] = createAccordionContext(\n ACCORDION_NAME,\n { collapsible: false },\n);\n\n/* -------------------------------------------------------------------------------------------------\n * AccordionImplContext\n * -----------------------------------------------------------------------------------------------*/\n\ntype AccordionImplContextValue = {\n disabled?: boolean;\n direction: Direction;\n orientation: 'horizontal' | 'vertical';\n};\n\nconst [AccordionImplProvider, useAccordionContext] =\n createAccordionContext<AccordionImplContextValue>(ACCORDION_NAME);\n\n/* -------------------------------------------------------------------------------------------------\n * AccordionItemContext\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_NAME = 'AccordionItem';\n\ntype AccordionItemContextValue = {\n open?: boolean;\n disabled?: boolean;\n triggerId: string;\n};\n\nconst [AccordionItemProvider, useAccordionItemContext] =\n createAccordionContext<AccordionItemContextValue>(ITEM_NAME);\n\n/* -------------------------------------------------------------------------------------------------\n * Types\n * -----------------------------------------------------------------------------------------------*/\n\ninterface AccordionImplProps extends PrimitiveProps<'div'> {\n /**\n * Whether or not an accordion is disabled from user interaction.\n * @defaultValue false\n */\n disabled?: boolean;\n /**\n * The layout in which the Accordion operates.\n * @default vertical\n */\n orientation?: 'horizontal' | 'vertical';\n /**\n * The language read direction.\n */\n dir?: Direction;\n}\n\ninterface AccordionImplSingleProps extends AccordionImplProps {\n /**\n * The controlled stateful value of the accordion item whose content is expanded.\n */\n value?: string;\n /**\n * The value of the item whose content is expanded when the accordion is initially rendered.\n * Use `defaultValue` if you do not need to control the state of an accordion.\n */\n defaultValue?: string;\n /**\n * The callback that fires when the state of the accordion changes.\n */\n onValueChange?(value: string): void;\n /**\n * Whether an accordion item can be collapsed after it has been opened.\n * @default false\n */\n collapsible?: boolean;\n}\n\ninterface AccordionImplMultipleProps extends AccordionImplProps {\n /**\n * The controlled stateful value of the accordion items whose contents are expanded.\n */\n value?: string[];\n /**\n * The value of the items whose contents are expanded when the accordion is initially rendered.\n * Use `defaultValue` if you do not need to control the state of an accordion.\n */\n defaultValue?: string[];\n /**\n * The callback that fires when the state of the accordion changes.\n */\n onValueChange?(value: string[]): void;\n}\n\ninterface AccordionSingleProps extends AccordionImplSingleProps {\n type: 'single';\n}\n\ninterface AccordionMultipleProps extends AccordionImplMultipleProps {\n type: 'multiple';\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Accordion\n * -----------------------------------------------------------------------------------------------*/\n\nfunction Accordion(props: ScopedProps<AccordionSingleProps | AccordionMultipleProps>) {\n const [local, rest] = splitProps(props, ['type', '__scopeAccordion']);\n\n return (\n <Collection.Provider scope={local.__scopeAccordion}>\n {local.type === 'multiple' ? (\n <AccordionImplMultiple\n {...(rest as unknown as ScopedProps<AccordionImplMultipleProps>)}\n __scopeAccordion={local.__scopeAccordion}\n />\n ) : (\n <AccordionImplSingle\n {...(rest as unknown as ScopedProps<AccordionImplSingleProps>)}\n __scopeAccordion={local.__scopeAccordion}\n />\n )}\n </Collection.Provider>\n );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * AccordionImplSingle\n * -----------------------------------------------------------------------------------------------*/\n\nfunction AccordionImplSingle(props: ScopedProps<AccordionImplSingleProps>) {\n const [local, rest] = splitProps(props, [\n '__scopeAccordion',\n 'value',\n 'defaultValue',\n 'onValueChange',\n 'collapsible',\n ]);\n\n const [value, setValue] = createControllableSignal({\n prop: () => local.value,\n defaultProp: local.defaultValue ?? '',\n onChange: local.onValueChange,\n caller: ACCORDION_NAME,\n });\n\n return (\n <AccordionValueProvider\n scope={local.__scopeAccordion}\n value={value() ? [value() as string] : []}\n onItemOpen={setValue}\n onItemClose={() => {\n if (local.collapsible) setValue('');\n }}\n >\n <AccordionCollapsibleProvider\n scope={local.__scopeAccordion}\n collapsible={local.collapsible ?? false}\n >\n <AccordionImpl {...rest} __scopeAccordion={local.__scopeAccordion} />\n </AccordionCollapsibleProvider>\n </AccordionValueProvider>\n );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * AccordionImplMultiple\n * -----------------------------------------------------------------------------------------------*/\n\nfunction AccordionImplMultiple(props: ScopedProps<AccordionImplMultipleProps>) {\n const [local, rest] = splitProps(props, [\n '__scopeAccordion',\n 'value',\n 'defaultValue',\n 'onValueChange',\n ]);\n\n const [value, setValue] = createControllableSignal({\n prop: () => local.value,\n defaultProp: local.defaultValue ?? ([] as string[]),\n onChange: local.onValueChange,\n caller: ACCORDION_NAME,\n });\n\n const handleItemOpen = (itemValue: string) => {\n setValue((prevValue = []) => [...prevValue, itemValue]);\n };\n\n const handleItemClose = (itemValue: string) => {\n setValue((prevValue = []) => prevValue.filter((v) => v !== itemValue));\n };\n\n return (\n <AccordionValueProvider\n scope={local.__scopeAccordion}\n value={value() as string[]}\n onItemOpen={handleItemOpen}\n onItemClose={handleItemClose}\n >\n <AccordionCollapsibleProvider scope={local.__scopeAccordion} collapsible={true}>\n <AccordionImpl {...rest} __scopeAccordion={local.__scopeAccordion} />\n </AccordionCollapsibleProvider>\n </AccordionValueProvider>\n );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * AccordionImpl\n * -----------------------------------------------------------------------------------------------*/\n\nfunction AccordionImpl(props: ScopedProps<AccordionImplProps>) {\n const [local, rest] = splitProps(props, [\n '__scopeAccordion',\n 'disabled',\n 'dir',\n 'orientation',\n 'onKeyDown',\n 'ref',\n ]);\n\n const getItems = useCollection(local.__scopeAccordion);\n const direction = useDirection(local.dir);\n const isDirectionLTR = direction === 'ltr';\n const orientation = local.orientation ?? 'vertical';\n\n const handleKeyDown = composeEventHandlers<KeyboardEvent>(\n local.onKeyDown as ((event: KeyboardEvent) => void) | undefined,\n (event) => {\n if (!ACCORDION_KEYS.includes(event.key)) return;\n\n const target = event.target as HTMLElement;\n const items = getItems();\n\n // Get trigger buttons from collection items.\n // Each collection item's ref is a wrapper <span>, the actual <button> is inside.\n const triggerButtons = items\n .map((item) => {\n const ref = item.ref as HTMLElement;\n if (ref instanceof HTMLButtonElement) return ref;\n return ref.querySelector('button') as HTMLButtonElement | null;\n })\n .filter(\n (btn): btn is HTMLButtonElement => btn !== null && !btn.disabled\n );\n\n const triggerIndex = triggerButtons.findIndex((btn) => btn === target);\n const triggerCount = triggerButtons.length;\n\n if (triggerIndex === -1) return;\n\n // Prevents page scroll while user is navigating\n event.preventDefault();\n\n let nextIndex = triggerIndex;\n const homeIndex = 0;\n const endIndex = triggerCount - 1;\n\n const moveNext = () => {\n nextIndex = triggerIndex + 1;\n if (nextIndex > endIndex) {\n nextIndex = homeIndex;\n }\n };\n\n const movePrev = () => {\n nextIndex = triggerIndex - 1;\n if (nextIndex < homeIndex) {\n nextIndex = endIndex;\n }\n };\n\n switch (event.key) {\n case 'Home':\n nextIndex = homeIndex;\n break;\n case 'End':\n nextIndex = endIndex;\n break;\n case 'ArrowRight':\n if (orientation === 'horizontal') {\n if (isDirectionLTR) {\n moveNext();\n } else {\n movePrev();\n }\n }\n break;\n case 'ArrowDown':\n if (orientation === 'vertical') {\n moveNext();\n }\n break;\n case 'ArrowLeft':\n if (orientation === 'horizontal') {\n if (isDirectionLTR) {\n movePrev();\n } else {\n moveNext();\n }\n }\n break;\n case 'ArrowUp':\n if (orientation === 'vertical') {\n movePrev();\n }\n break;\n }\n\n const clampedIndex = nextIndex % triggerCount;\n triggerButtons[clampedIndex]?.focus();\n }\n );\n\n return (\n <AccordionImplProvider\n scope={local.__scopeAccordion}\n disabled={local.disabled}\n direction={direction as Direction}\n orientation={orientation}\n >\n <Collection.Slot scope={local.__scopeAccordion}>\n <Primitive.div\n {...rest}\n data-orientation={orientation}\n ref={local.ref}\n onKeyDown={local.disabled ? undefined : handleKeyDown}\n />\n </Collection.Slot>\n </AccordionImplProvider>\n );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * AccordionItem\n * -----------------------------------------------------------------------------------------------*/\n\ninterface AccordionItemProps extends PrimitiveProps<'div'> {\n /**\n * Whether or not an accordion item is disabled from user interaction.\n * @defaultValue false\n */\n disabled?: boolean;\n /**\n * A string value for the accordion item. All items within an accordion should use a unique value.\n */\n value: string;\n}\n\n/**\n * `AccordionItem` contains all of the parts of a collapsible section inside of an `Accordion`.\n */\nfunction AccordionItem(props: ScopedProps<AccordionItemProps>) {\n const [local, rest] = splitProps(props, [\n '__scopeAccordion',\n 'value',\n 'disabled',\n ]);\n\n const accordionContext = useAccordionContext(ITEM_NAME, local.__scopeAccordion);\n const valueContext = useAccordionValueContext(ITEM_NAME, local.__scopeAccordion);\n const collapsibleScope = useCollapsibleScope(local.__scopeAccordion);\n const triggerId = createId();\n const open = () => (local.value && valueContext.value.includes(local.value)) || false;\n const disabled = () => accordionContext.disabled || local.disabled;\n\n return (\n <AccordionItemProvider\n scope={local.__scopeAccordion}\n open={open()}\n disabled={disabled()}\n triggerId={triggerId}\n >\n <Collapsible\n data-orientation={accordionContext.orientation}\n data-state={getState(open())}\n {...collapsibleScope}\n {...rest}\n disabled={disabled()}\n open={open()}\n onOpenChange={(isOpen: boolean) => {\n if (isOpen) {\n valueContext.onItemOpen(local.value);\n } else {\n valueContext.onItemClose(local.value);\n }\n }}\n />\n </AccordionItemProvider>\n );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * AccordionHeader\n * -----------------------------------------------------------------------------------------------*/\n\nconst HEADER_NAME = 'AccordionHeader';\n\ninterface AccordionHeaderProps extends PrimitiveProps<'h3'> {}\n\n/**\n * `AccordionHeader` contains the content for the parts of an `AccordionItem` that will be visible\n * whether or not its content is collapsed.\n */\nfunction AccordionHeader(props: ScopedProps<AccordionHeaderProps>) {\n const [local, rest] = splitProps(props, ['__scopeAccordion']);\n const accordionContext = useAccordionContext(ACCORDION_NAME, local.__scopeAccordion);\n const itemContext = useAccordionItemContext(HEADER_NAME, local.__scopeAccordion);\n\n return (\n <Primitive.h3\n data-orientation={accordionContext.orientation}\n data-state={getState(itemContext.open)}\n data-disabled={itemContext.disabled ? '' : undefined}\n {...rest}\n />\n );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * AccordionTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'AccordionTrigger';\n\ninterface AccordionTriggerProps extends PrimitiveProps<'button'> {}\n\n/**\n * `AccordionTrigger` is the trigger that toggles the collapsed state of an `AccordionItem`. It\n * should always be nested inside of an `AccordionHeader`.\n */\nfunction AccordionTrigger(props: ScopedProps<AccordionTriggerProps>) {\n const [local, rest] = splitProps(props, ['__scopeAccordion']);\n const accordionContext = useAccordionContext(ACCORDION_NAME, local.__scopeAccordion);\n const itemContext = useAccordionItemContext(TRIGGER_NAME, local.__scopeAccordion);\n const collapsibleContext = useAccordionCollapsibleContext(TRIGGER_NAME, local.__scopeAccordion);\n const collapsibleScope = useCollapsibleScope(local.__scopeAccordion);\n\n return (\n <Collection.ItemSlot scope={local.__scopeAccordion}>\n <CollapsibleTrigger\n aria-disabled={\n (itemContext.open && !collapsibleContext.collapsible) || undefined\n }\n data-orientation={accordionContext.orientation}\n id={itemContext.triggerId}\n {...collapsibleScope}\n {...rest}\n />\n </Collection.ItemSlot>\n );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * AccordionContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'AccordionContent';\n\ninterface AccordionContentProps extends PrimitiveProps<'div'> {\n /**\n * Used to force mounting when more control is needed. Useful when controlling animation\n * with SolidJS animation libraries.\n */\n forceMount?: true;\n}\n\n/**\n * `AccordionContent` contains the collapsible content for an `AccordionItem`.\n */\nfunction AccordionContent(props: ScopedProps<AccordionContentProps>) {\n const [local, rest] = splitProps(props, ['__scopeAccordion', 'style']);\n const accordionContext = useAccordionContext(ACCORDION_NAME, local.__scopeAccordion);\n const itemContext = useAccordionItemContext(CONTENT_NAME, local.__scopeAccordion);\n const collapsibleScope = useCollapsibleScope(local.__scopeAccordion);\n\n return (\n <CollapsibleContent\n role=\"region\"\n aria-labelledby={itemContext.triggerId}\n data-orientation={accordionContext.orientation}\n {...collapsibleScope}\n {...rest}\n style={\n {\n '--radix-accordion-content-height': 'var(--radix-collapsible-content-height)',\n '--radix-accordion-content-width': 'var(--radix-collapsible-content-width)',\n ...(typeof local.style === 'object' ? local.style : {}),\n } as JSX.CSSProperties\n }\n />\n );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Utils\n * -----------------------------------------------------------------------------------------------*/\n\nfunction getState(open?: boolean) {\n return open ? 'open' : 'closed';\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Exports\n * -----------------------------------------------------------------------------------------------*/\n\nconst Root = Accordion;\nconst Item = AccordionItem;\nconst Header = AccordionHeader;\nconst Trigger = AccordionTrigger;\nconst Content = AccordionContent;\n\nexport {\n createAccordionScope,\n //\n Accordion,\n AccordionItem,\n AccordionHeader,\n AccordionTrigger,\n AccordionContent,\n //\n Root,\n Item,\n Header,\n Trigger,\n Content,\n};\nexport type {\n AccordionSingleProps,\n AccordionMultipleProps,\n AccordionItemProps,\n AccordionHeaderProps,\n AccordionTriggerProps,\n AccordionContentProps,\n};\n"]}
package/package.json ADDED
@@ -0,0 +1,60 @@
1
+ {
2
+ "name": "@radix-solid-js/accordion",
3
+ "version": "0.1.0",
4
+ "license": "MIT",
5
+ "type": "module",
6
+ "main": "./dist/index.cjs",
7
+ "module": "./dist/index.js",
8
+ "types": "./dist/index.d.ts",
9
+ "exports": {
10
+ ".": {
11
+ "import": {
12
+ "types": "./dist/index.d.ts",
13
+ "default": "./dist/index.js"
14
+ },
15
+ "require": {
16
+ "types": "./dist/index.d.cts",
17
+ "default": "./dist/index.cjs"
18
+ }
19
+ }
20
+ },
21
+ "files": [
22
+ "dist"
23
+ ],
24
+ "sideEffects": false,
25
+ "scripts": {
26
+ "build": "tsup",
27
+ "clean": "rm -rf dist",
28
+ "typecheck": "tsc --noEmit",
29
+ "test": "vitest run"
30
+ },
31
+ "dependencies": {
32
+ "@radix-solid-js/primitive": "workspace:*",
33
+ "@radix-solid-js/collapsible": "workspace:*",
34
+ "@radix-solid-js/collection": "workspace:*",
35
+ "@radix-solid-js/compose-refs": "workspace:*",
36
+ "@radix-solid-js/context": "workspace:*",
37
+ "@radix-solid-js/direction": "workspace:*",
38
+ "@radix-solid-js/id": "workspace:*",
39
+ "@radix-solid-js/primitive-component": "workspace:*",
40
+ "@radix-solid-js/use-controllable-state": "workspace:*"
41
+ },
42
+ "peerDependencies": {
43
+ "solid-js": "^1.8.0"
44
+ },
45
+ "devDependencies": {
46
+ "@repo/tsconfig": "workspace:*",
47
+ "tsup": "^8.3.6",
48
+ "typescript": "^5.7.3",
49
+ "solid-js": "^1.9.3",
50
+ "vitest": "^2.1.8"
51
+ },
52
+ "publishConfig": {
53
+ "access": "public"
54
+ },
55
+ "repository": {
56
+ "type": "git",
57
+ "url": "https://github.com/ljho01/shadcn-solid-js.git",
58
+ "directory": "packages/solid/accordion"
59
+ }
60
+ }