UNPKG

@ark-ui/solid

Version:

A collection of unstyled, accessible UI components for Solid, utilizing state machines for seamless interaction.

206 lines (188 loc) 7.05 kB
import { collapsible_exports, useCollapsibleContext } from "./Z2BXVXSV.jsx"; import { RenderStrategyProvider, splitRenderStrategyProps, useRenderStrategyContext } from "./NEBB7COJ.jsx"; import { createSplitProps } from "./6WEDGJKQ.jsx"; import { ark } from "./UFYZ7HLU.jsx"; import { useLocaleContext } from "./YUC6JE7K.jsx"; import { useEnvironmentContext } from "./E2L62MKC.jsx"; import { createContext } from "./TVCIHLER.jsx"; import { runIfFn } from "./KGOB2IMX.jsx"; import { __export } from "./7IUG3E2V.jsx"; // src/components/accordion/use-accordion-context.ts var [AccordionProvider, useAccordionContext] = createContext({ hookName: "useAccordionContext", providerName: "<AccordionProvider />" }); // src/components/accordion/accordion-context.tsx var AccordionContext = (props) => props.children(useAccordionContext()); // src/components/accordion/accordion-item.tsx import { mergeProps } from "@zag-js/solid"; import { createMemo } from "solid-js"; // src/components/accordion/use-accordion-item-context.ts var [AccordionItemProvider, useAccordionItemContext] = createContext({ hookName: "useAccordionItemContext", providerName: "<AccordionItemProvider />" }); // src/components/accordion/use-accordion-item-props-context.ts var [AccordionItemPropsProvider, useAccordionItemPropsContext] = createContext({ hookName: "useAccordionItemPropsContext", providerName: "<AccordionItemPropsProvider />" }); // src/components/accordion/accordion-item.tsx var AccordionItem = (props) => { const [itemProps, localProps] = createSplitProps()(props, ["value", "disabled"]); const accordion2 = useAccordionContext(); const renderStrategyProps = useRenderStrategyContext(); const mergedProps = mergeProps(() => accordion2().getItemProps(itemProps), localProps); const itemState = createMemo(() => accordion2().getItemState(itemProps)); const itemContentProps = accordion2().getItemContentProps(itemProps); return <AccordionItemPropsProvider value={itemProps}> <AccordionItemProvider value={itemState}> <collapsible_exports.Root open={itemState().expanded} ids={{ content: itemContentProps.id }} {...renderStrategyProps} {...mergedProps} /> </AccordionItemProvider> </AccordionItemPropsProvider>; }; // src/components/accordion/accordion-item-content.tsx import { mergeProps as mergeProps2 } from "@zag-js/solid"; import { createMemo as createMemo2 } from "solid-js"; var splitVisibilityProps = createSplitProps(); var AccordionItemContent = (props) => { const accordion2 = useAccordionContext(); const itemProps = useAccordionItemPropsContext(); const itemContentProps = createMemo2(() => { const contentProps = accordion2().getItemContentProps(itemProps); const [, ownProps] = splitVisibilityProps(contentProps, ["hidden", "data-state"]); return ownProps; }); const mergedProps = mergeProps2(() => itemContentProps(), props); return <collapsible_exports.Content {...mergedProps} />; }; // src/components/accordion/accordion-item-context.tsx var AccordionItemContext = (props) => props.children(useAccordionItemContext()); // src/components/accordion/accordion-item-indicator.tsx import { mergeProps as mergeProps3 } from "@zag-js/solid"; var AccordionItemIndicator = (props) => { const accordion2 = useAccordionContext(); const itemProps = useAccordionItemPropsContext(); const mergedProps = mergeProps3(() => accordion2().getItemIndicatorProps(itemProps), props); return <ark.div {...mergedProps} />; }; // src/components/accordion/accordion-item-trigger.tsx import { mergeProps as mergeProps4 } from "@zag-js/solid"; import { splitProps } from "solid-js"; var AccordionItemTrigger = (props) => { const accordion2 = useAccordionContext(); const itemProps = useAccordionItemPropsContext(); const collapsible = useCollapsibleContext(); const mergedProps = mergeProps4(() => accordion2().getItemTriggerProps(itemProps), props); const [ariaControls, buttonProps] = splitProps(mergedProps, ["aria-controls"]); return <ark.button {...buttonProps} {...!collapsible().unmounted && ariaControls} />; }; // src/components/accordion/accordion-root.tsx import { mergeProps as mergeProps5 } from "@zag-js/solid"; // src/components/accordion/use-accordion.ts import * as accordion from "@zag-js/accordion"; import { normalizeProps, useMachine } from "@zag-js/solid"; import { createMemo as createMemo3, createUniqueId } from "solid-js"; var useAccordion = (props) => { const id = createUniqueId(); const locale = useLocaleContext(); const environment = useEnvironmentContext(); const machineProps = createMemo3(() => ({ id, dir: locale().dir, getRootNode: environment().getRootNode, ...runIfFn(props) })); const service = useMachine(accordion.machine, machineProps); return createMemo3(() => accordion.connect(service, normalizeProps)); }; // src/components/accordion/accordion-root.tsx var AccordionRoot = (props) => { const [renderStrategyProps, accordionProps] = splitRenderStrategyProps(props); const [useAccordionProps, localProps] = createSplitProps()(accordionProps, [ "collapsible", "defaultValue", "disabled", "id", "ids", "multiple", "onFocusChange", "onValueChange", "orientation", "value" ]); const api = useAccordion(useAccordionProps); const mergedProps = mergeProps5(() => api().getRootProps(), localProps); return <AccordionProvider value={api}> <RenderStrategyProvider value={renderStrategyProps}> <ark.div {...mergedProps} /> </RenderStrategyProvider> </AccordionProvider>; }; // src/components/accordion/accordion-root-provider.tsx import { mergeProps as mergeProps6 } from "@zag-js/solid"; var AccordionRootProvider = (props) => { const [renderStrategyProps, accordionProps] = splitRenderStrategyProps(props); const [{ value: accordion2 }, localProps] = createSplitProps()(accordionProps, ["value"]); const mergedProps = mergeProps6(() => accordion2().getRootProps(), localProps); return <AccordionProvider value={accordion2}> <RenderStrategyProvider value={renderStrategyProps}> <ark.div {...mergedProps} /> </RenderStrategyProvider> </AccordionProvider>; }; // src/components/accordion/accordion.anatomy.ts import { anatomy } from "@zag-js/accordion"; // src/components/accordion/accordion.ts var accordion_exports = {}; __export(accordion_exports, { Context: () => AccordionContext, Item: () => AccordionItem, ItemContent: () => AccordionItemContent, ItemContext: () => AccordionItemContext, ItemIndicator: () => AccordionItemIndicator, ItemTrigger: () => AccordionItemTrigger, Root: () => AccordionRoot, RootProvider: () => AccordionRootProvider }); export { useAccordionContext, AccordionContext, useAccordionItemContext, AccordionItem, AccordionItemContent, AccordionItemContext, AccordionItemIndicator, AccordionItemTrigger, useAccordion, AccordionRoot, AccordionRootProvider, anatomy, accordion_exports };