autumn-js
Version:
Autumn JS Library
585 lines (575 loc) • 21.7 kB
JavaScript
"use client";
import {
ChevronDown
} from "./chunk-2OHJ6PS6.mjs";
import {
Presence,
useId
} from "./chunk-AHIEANFE.mjs";
import {
Primitive,
composeEventHandlers,
createContextScope,
useControllableState,
useLayoutEffect2
} from "./chunk-4XU63W7I.mjs";
import {
createSlot,
useComposedRefs
} from "./chunk-DXHYWJOY.mjs";
import {
cn
} from "./chunk-4J6OC4ZQ.mjs";
// src/libraries/react/components/ui/accordion.tsx
import * as React6 from "react";
// ../node_modules/.pnpm/@radix-ui+react-accordion@1.2.11_@types+react-dom@19.1.9_@types+react@19.1.10__@types+react@1_rikqbnzk4rayqkcryhydcdufbu/node_modules/@radix-ui/react-accordion/dist/index.mjs
import React5 from "react";
// ../node_modules/.pnpm/@radix-ui+react-collection@1.1.7_@types+react-dom@19.1.9_@types+react@19.1.10__@types+react@1_fj4gprouy7cllhpzda3tfrvhzi/node_modules/@radix-ui/react-collection/dist/index.mjs
import React from "react";
import { jsx } from "react/jsx-runtime";
import React2 from "react";
import { jsx as jsx2 } from "react/jsx-runtime";
function createCollection(name) {
const PROVIDER_NAME = name + "CollectionProvider";
const [createCollectionContext, createCollectionScope2] = createContextScope(PROVIDER_NAME);
const [CollectionProviderImpl, useCollectionContext] = createCollectionContext(
PROVIDER_NAME,
{ collectionRef: { current: null }, itemMap: /* @__PURE__ */ new Map() }
);
const CollectionProvider = (props) => {
const { scope, children } = props;
const ref = React.useRef(null);
const itemMap = React.useRef(/* @__PURE__ */ new Map()).current;
return /* @__PURE__ */ jsx(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
};
CollectionProvider.displayName = PROVIDER_NAME;
const COLLECTION_SLOT_NAME = name + "CollectionSlot";
const CollectionSlotImpl = createSlot(COLLECTION_SLOT_NAME);
const CollectionSlot = React.forwardRef(
(props, forwardedRef) => {
const { scope, children } = props;
const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
const composedRefs = useComposedRefs(forwardedRef, context.collectionRef);
return /* @__PURE__ */ jsx(CollectionSlotImpl, { ref: composedRefs, children });
}
);
CollectionSlot.displayName = COLLECTION_SLOT_NAME;
const ITEM_SLOT_NAME = name + "CollectionItemSlot";
const ITEM_DATA_ATTR = "data-radix-collection-item";
const CollectionItemSlotImpl = createSlot(ITEM_SLOT_NAME);
const CollectionItemSlot = React.forwardRef(
(props, forwardedRef) => {
const { scope, children, ...itemData } = props;
const ref = React.useRef(null);
const composedRefs = useComposedRefs(forwardedRef, ref);
const context = useCollectionContext(ITEM_SLOT_NAME, scope);
React.useEffect(() => {
context.itemMap.set(ref, { ref, ...itemData });
return () => void context.itemMap.delete(ref);
});
return /* @__PURE__ */ jsx(CollectionItemSlotImpl, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children });
}
);
CollectionItemSlot.displayName = ITEM_SLOT_NAME;
function useCollection2(scope) {
const context = useCollectionContext(name + "CollectionConsumer", scope);
const getItems = React.useCallback(() => {
const collectionNode = context.collectionRef.current;
if (!collectionNode) return [];
const orderedNodes = Array.from(collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`));
const items = Array.from(context.itemMap.values());
const orderedItems = items.sort(
(a, b) => orderedNodes.indexOf(a.ref.current) - orderedNodes.indexOf(b.ref.current)
);
return orderedItems;
}, [context.collectionRef, context.itemMap]);
return getItems;
}
return [
{ Provider: CollectionProvider, Slot: CollectionSlot, ItemSlot: CollectionItemSlot },
useCollection2,
createCollectionScope2
];
}
// ../node_modules/.pnpm/@radix-ui+react-collapsible@1.1.11_@types+react-dom@19.1.9_@types+react@19.1.10__@types+react_62ff4xakccgppayw3kaahenns4/node_modules/@radix-ui/react-collapsible/dist/index.mjs
import * as React3 from "react";
import { jsx as jsx3 } from "react/jsx-runtime";
var COLLAPSIBLE_NAME = "Collapsible";
var [createCollapsibleContext, createCollapsibleScope] = createContextScope(COLLAPSIBLE_NAME);
var [CollapsibleProvider, useCollapsibleContext] = createCollapsibleContext(COLLAPSIBLE_NAME);
var Collapsible = React3.forwardRef(
(props, forwardedRef) => {
const {
__scopeCollapsible,
open: openProp,
defaultOpen,
disabled,
onOpenChange,
...collapsibleProps
} = props;
const [open, setOpen] = useControllableState({
prop: openProp,
defaultProp: defaultOpen ?? false,
onChange: onOpenChange,
caller: COLLAPSIBLE_NAME
});
return /* @__PURE__ */ jsx3(
CollapsibleProvider,
{
scope: __scopeCollapsible,
disabled,
contentId: useId(),
open,
onOpenToggle: React3.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
children: /* @__PURE__ */ jsx3(
Primitive.div,
{
"data-state": getState(open),
"data-disabled": disabled ? "" : void 0,
...collapsibleProps,
ref: forwardedRef
}
)
}
);
}
);
Collapsible.displayName = COLLAPSIBLE_NAME;
var TRIGGER_NAME = "CollapsibleTrigger";
var CollapsibleTrigger = React3.forwardRef(
(props, forwardedRef) => {
const { __scopeCollapsible, ...triggerProps } = props;
const context = useCollapsibleContext(TRIGGER_NAME, __scopeCollapsible);
return /* @__PURE__ */ jsx3(
Primitive.button,
{
type: "button",
"aria-controls": context.contentId,
"aria-expanded": context.open || false,
"data-state": getState(context.open),
"data-disabled": context.disabled ? "" : void 0,
disabled: context.disabled,
...triggerProps,
ref: forwardedRef,
onClick: composeEventHandlers(props.onClick, context.onOpenToggle)
}
);
}
);
CollapsibleTrigger.displayName = TRIGGER_NAME;
var CONTENT_NAME = "CollapsibleContent";
var CollapsibleContent = React3.forwardRef(
(props, forwardedRef) => {
const { forceMount, ...contentProps } = props;
const context = useCollapsibleContext(CONTENT_NAME, props.__scopeCollapsible);
return /* @__PURE__ */ jsx3(Presence, { present: forceMount || context.open, children: ({ present }) => /* @__PURE__ */ jsx3(CollapsibleContentImpl, { ...contentProps, ref: forwardedRef, present }) });
}
);
CollapsibleContent.displayName = CONTENT_NAME;
var CollapsibleContentImpl = React3.forwardRef((props, forwardedRef) => {
const { __scopeCollapsible, present, children, ...contentProps } = props;
const context = useCollapsibleContext(CONTENT_NAME, __scopeCollapsible);
const [isPresent, setIsPresent] = React3.useState(present);
const ref = React3.useRef(null);
const composedRefs = useComposedRefs(forwardedRef, ref);
const heightRef = React3.useRef(0);
const height = heightRef.current;
const widthRef = React3.useRef(0);
const width = widthRef.current;
const isOpen = context.open || isPresent;
const isMountAnimationPreventedRef = React3.useRef(isOpen);
const originalStylesRef = React3.useRef(void 0);
React3.useEffect(() => {
const rAF = requestAnimationFrame(() => isMountAnimationPreventedRef.current = false);
return () => cancelAnimationFrame(rAF);
}, []);
useLayoutEffect2(() => {
const node = ref.current;
if (node) {
originalStylesRef.current = originalStylesRef.current || {
transitionDuration: node.style.transitionDuration,
animationName: node.style.animationName
};
node.style.transitionDuration = "0s";
node.style.animationName = "none";
const rect = node.getBoundingClientRect();
heightRef.current = rect.height;
widthRef.current = rect.width;
if (!isMountAnimationPreventedRef.current) {
node.style.transitionDuration = originalStylesRef.current.transitionDuration;
node.style.animationName = originalStylesRef.current.animationName;
}
setIsPresent(present);
}
}, [context.open, present]);
return /* @__PURE__ */ jsx3(
Primitive.div,
{
"data-state": getState(context.open),
"data-disabled": context.disabled ? "" : void 0,
id: context.contentId,
hidden: !isOpen,
...contentProps,
ref: composedRefs,
style: {
[`--radix-collapsible-content-height`]: height ? `${height}px` : void 0,
[`--radix-collapsible-content-width`]: width ? `${width}px` : void 0,
...props.style
},
children: isOpen && children
}
);
});
function getState(open) {
return open ? "open" : "closed";
}
var Root = Collapsible;
var Trigger = CollapsibleTrigger;
var Content = CollapsibleContent;
// ../node_modules/.pnpm/@radix-ui+react-direction@1.1.1_@types+react@19.1.10_react@19.1.1/node_modules/@radix-ui/react-direction/dist/index.mjs
import * as React4 from "react";
import { jsx as jsx4 } from "react/jsx-runtime";
var DirectionContext = React4.createContext(void 0);
function useDirection(localDir) {
const globalDir = React4.useContext(DirectionContext);
return localDir || globalDir || "ltr";
}
// ../node_modules/.pnpm/@radix-ui+react-accordion@1.2.11_@types+react-dom@19.1.9_@types+react@19.1.10__@types+react@1_rikqbnzk4rayqkcryhydcdufbu/node_modules/@radix-ui/react-accordion/dist/index.mjs
import { jsx as jsx5 } from "react/jsx-runtime";
var ACCORDION_NAME = "Accordion";
var ACCORDION_KEYS = ["Home", "End", "ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"];
var [Collection, useCollection, createCollectionScope] = createCollection(ACCORDION_NAME);
var [createAccordionContext, createAccordionScope] = createContextScope(ACCORDION_NAME, [
createCollectionScope,
createCollapsibleScope
]);
var useCollapsibleScope = createCollapsibleScope();
var Accordion = React5.forwardRef(
(props, forwardedRef) => {
const { type, ...accordionProps } = props;
const singleProps = accordionProps;
const multipleProps = accordionProps;
return /* @__PURE__ */ jsx5(Collection.Provider, { scope: props.__scopeAccordion, children: type === "multiple" ? /* @__PURE__ */ jsx5(AccordionImplMultiple, { ...multipleProps, ref: forwardedRef }) : /* @__PURE__ */ jsx5(AccordionImplSingle, { ...singleProps, ref: forwardedRef }) });
}
);
Accordion.displayName = ACCORDION_NAME;
var [AccordionValueProvider, useAccordionValueContext] = createAccordionContext(ACCORDION_NAME);
var [AccordionCollapsibleProvider, useAccordionCollapsibleContext] = createAccordionContext(
ACCORDION_NAME,
{ collapsible: false }
);
var AccordionImplSingle = React5.forwardRef(
(props, forwardedRef) => {
const {
value: valueProp,
defaultValue,
onValueChange = () => {
},
collapsible = false,
...accordionSingleProps
} = props;
const [value, setValue] = useControllableState({
prop: valueProp,
defaultProp: defaultValue ?? "",
onChange: onValueChange,
caller: ACCORDION_NAME
});
return /* @__PURE__ */ jsx5(
AccordionValueProvider,
{
scope: props.__scopeAccordion,
value: React5.useMemo(() => value ? [value] : [], [value]),
onItemOpen: setValue,
onItemClose: React5.useCallback(() => collapsible && setValue(""), [collapsible, setValue]),
children: /* @__PURE__ */ jsx5(AccordionCollapsibleProvider, { scope: props.__scopeAccordion, collapsible, children: /* @__PURE__ */ jsx5(AccordionImpl, { ...accordionSingleProps, ref: forwardedRef }) })
}
);
}
);
var AccordionImplMultiple = React5.forwardRef((props, forwardedRef) => {
const {
value: valueProp,
defaultValue,
onValueChange = () => {
},
...accordionMultipleProps
} = props;
const [value, setValue] = useControllableState({
prop: valueProp,
defaultProp: defaultValue ?? [],
onChange: onValueChange,
caller: ACCORDION_NAME
});
const handleItemOpen = React5.useCallback(
(itemValue) => setValue((prevValue = []) => [...prevValue, itemValue]),
[setValue]
);
const handleItemClose = React5.useCallback(
(itemValue) => setValue((prevValue = []) => prevValue.filter((value2) => value2 !== itemValue)),
[setValue]
);
return /* @__PURE__ */ jsx5(
AccordionValueProvider,
{
scope: props.__scopeAccordion,
value,
onItemOpen: handleItemOpen,
onItemClose: handleItemClose,
children: /* @__PURE__ */ jsx5(AccordionCollapsibleProvider, { scope: props.__scopeAccordion, collapsible: true, children: /* @__PURE__ */ jsx5(AccordionImpl, { ...accordionMultipleProps, ref: forwardedRef }) })
}
);
});
var [AccordionImplProvider, useAccordionContext] = createAccordionContext(ACCORDION_NAME);
var AccordionImpl = React5.forwardRef(
(props, forwardedRef) => {
const { __scopeAccordion, disabled, dir, orientation = "vertical", ...accordionProps } = props;
const accordionRef = React5.useRef(null);
const composedRefs = useComposedRefs(accordionRef, forwardedRef);
const getItems = useCollection(__scopeAccordion);
const direction = useDirection(dir);
const isDirectionLTR = direction === "ltr";
const handleKeyDown = composeEventHandlers(props.onKeyDown, (event) => {
if (!ACCORDION_KEYS.includes(event.key)) return;
const target = event.target;
const triggerCollection = getItems().filter((item) => !item.ref.current?.disabled);
const triggerIndex = triggerCollection.findIndex((item) => item.ref.current === target);
const triggerCount = triggerCollection.length;
if (triggerIndex === -1) return;
event.preventDefault();
let nextIndex = triggerIndex;
const homeIndex = 0;
const endIndex = triggerCount - 1;
const moveNext = () => {
nextIndex = triggerIndex + 1;
if (nextIndex > endIndex) {
nextIndex = homeIndex;
}
};
const movePrev = () => {
nextIndex = triggerIndex - 1;
if (nextIndex < homeIndex) {
nextIndex = endIndex;
}
};
switch (event.key) {
case "Home":
nextIndex = homeIndex;
break;
case "End":
nextIndex = endIndex;
break;
case "ArrowRight":
if (orientation === "horizontal") {
if (isDirectionLTR) {
moveNext();
} else {
movePrev();
}
}
break;
case "ArrowDown":
if (orientation === "vertical") {
moveNext();
}
break;
case "ArrowLeft":
if (orientation === "horizontal") {
if (isDirectionLTR) {
movePrev();
} else {
moveNext();
}
}
break;
case "ArrowUp":
if (orientation === "vertical") {
movePrev();
}
break;
}
const clampedIndex = nextIndex % triggerCount;
triggerCollection[clampedIndex].ref.current?.focus();
});
return /* @__PURE__ */ jsx5(
AccordionImplProvider,
{
scope: __scopeAccordion,
disabled,
direction: dir,
orientation,
children: /* @__PURE__ */ jsx5(Collection.Slot, { scope: __scopeAccordion, children: /* @__PURE__ */ jsx5(
Primitive.div,
{
...accordionProps,
"data-orientation": orientation,
ref: composedRefs,
onKeyDown: disabled ? void 0 : handleKeyDown
}
) })
}
);
}
);
var ITEM_NAME = "AccordionItem";
var [AccordionItemProvider, useAccordionItemContext] = createAccordionContext(ITEM_NAME);
var AccordionItem = React5.forwardRef(
(props, forwardedRef) => {
const { __scopeAccordion, value, ...accordionItemProps } = props;
const accordionContext = useAccordionContext(ITEM_NAME, __scopeAccordion);
const valueContext = useAccordionValueContext(ITEM_NAME, __scopeAccordion);
const collapsibleScope = useCollapsibleScope(__scopeAccordion);
const triggerId = useId();
const open = value && valueContext.value.includes(value) || false;
const disabled = accordionContext.disabled || props.disabled;
return /* @__PURE__ */ jsx5(
AccordionItemProvider,
{
scope: __scopeAccordion,
open,
disabled,
triggerId,
children: /* @__PURE__ */ jsx5(
Root,
{
"data-orientation": accordionContext.orientation,
"data-state": getState2(open),
...collapsibleScope,
...accordionItemProps,
ref: forwardedRef,
disabled,
open,
onOpenChange: (open2) => {
if (open2) {
valueContext.onItemOpen(value);
} else {
valueContext.onItemClose(value);
}
}
}
)
}
);
}
);
AccordionItem.displayName = ITEM_NAME;
var HEADER_NAME = "AccordionHeader";
var AccordionHeader = React5.forwardRef(
(props, forwardedRef) => {
const { __scopeAccordion, ...headerProps } = props;
const accordionContext = useAccordionContext(ACCORDION_NAME, __scopeAccordion);
const itemContext = useAccordionItemContext(HEADER_NAME, __scopeAccordion);
return /* @__PURE__ */ jsx5(
Primitive.h3,
{
"data-orientation": accordionContext.orientation,
"data-state": getState2(itemContext.open),
"data-disabled": itemContext.disabled ? "" : void 0,
...headerProps,
ref: forwardedRef
}
);
}
);
AccordionHeader.displayName = HEADER_NAME;
var TRIGGER_NAME2 = "AccordionTrigger";
var AccordionTrigger = React5.forwardRef(
(props, forwardedRef) => {
const { __scopeAccordion, ...triggerProps } = props;
const accordionContext = useAccordionContext(ACCORDION_NAME, __scopeAccordion);
const itemContext = useAccordionItemContext(TRIGGER_NAME2, __scopeAccordion);
const collapsibleContext = useAccordionCollapsibleContext(TRIGGER_NAME2, __scopeAccordion);
const collapsibleScope = useCollapsibleScope(__scopeAccordion);
return /* @__PURE__ */ jsx5(Collection.ItemSlot, { scope: __scopeAccordion, children: /* @__PURE__ */ jsx5(
Trigger,
{
"aria-disabled": itemContext.open && !collapsibleContext.collapsible || void 0,
"data-orientation": accordionContext.orientation,
id: itemContext.triggerId,
...collapsibleScope,
...triggerProps,
ref: forwardedRef
}
) });
}
);
AccordionTrigger.displayName = TRIGGER_NAME2;
var CONTENT_NAME2 = "AccordionContent";
var AccordionContent = React5.forwardRef(
(props, forwardedRef) => {
const { __scopeAccordion, ...contentProps } = props;
const accordionContext = useAccordionContext(ACCORDION_NAME, __scopeAccordion);
const itemContext = useAccordionItemContext(CONTENT_NAME2, __scopeAccordion);
const collapsibleScope = useCollapsibleScope(__scopeAccordion);
return /* @__PURE__ */ jsx5(
Content,
{
role: "region",
"aria-labelledby": itemContext.triggerId,
"data-orientation": accordionContext.orientation,
...collapsibleScope,
...contentProps,
ref: forwardedRef,
style: {
["--radix-accordion-content-height"]: "var(--radix-collapsible-content-height)",
["--radix-accordion-content-width"]: "var(--radix-collapsible-content-width)",
...props.style
}
}
);
}
);
AccordionContent.displayName = CONTENT_NAME2;
function getState2(open) {
return open ? "open" : "closed";
}
var Root2 = Accordion;
var Item = AccordionItem;
var Header = AccordionHeader;
var Trigger2 = AccordionTrigger;
var Content2 = AccordionContent;
// src/libraries/react/components/ui/accordion.tsx
import { jsx as jsx6, jsxs } from "react/jsx-runtime";
var Accordion2 = Root2;
var AccordionItem2 = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
Item,
{
ref,
className: cn("au-border-b", className),
...props
}
));
AccordionItem2.displayName = "AccordionItem";
var AccordionTrigger2 = React6.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx6(Header, { className: "au-flex", children: /* @__PURE__ */ jsxs(
Trigger2,
{
ref,
className: cn(
"au-flex au-flex-1 au-items-center au-justify-between au-py-4 au-text-sm au-font-medium au-transition-all hover:au-underline au-text-left [&[data-state=open]>svg]:au-rotate-180",
className
),
...props,
children: [
children,
/* @__PURE__ */ jsx6(ChevronDown, { className: "au-h-4 au-w-4 au-shrink-0 au-text-muted-foreground au-transition-transform au-duration-200" })
]
}
) }));
AccordionTrigger2.displayName = Trigger2.displayName;
var AccordionContent2 = React6.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx6(
Content2,
{
ref,
className: "au-overflow-hidden au-text-sm data-[state=closed]:au-animate-accordion-up data-[state=open]:au-animate-accordion-down",
...props,
children: /* @__PURE__ */ jsx6("div", { className: cn("au-pb-4 au-pt-0", className), children })
}
));
AccordionContent2.displayName = Content2.displayName;
export {
Header,
Trigger2,
Accordion2 as Accordion,
AccordionItem2 as AccordionItem,
AccordionTrigger2 as AccordionTrigger,
AccordionContent2 as AccordionContent
};