UNPKG

@ark-ui/solid

Version:

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

172 lines (165 loc) 7.47 kB
import { usePresenceContext, splitPresenceProps, usePresence, PresenceProvider } from './FW6EZLZL.js'; import { createSplitProps } from './ZMHI4GDJ.js'; import { ark } from './EPLBB4QN.js'; import { useEnvironmentContext } from './5QLLQM7E.js'; import { useLocaleContext } from './RVOPDSQY.js'; import { runIfFn } from './DT73WLR4.js'; import { createContext } from './THN5C4U6.js'; import { __export } from './ESLJRKWD.js'; import { createComponent } from 'solid-js/web'; import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid'; import * as floatingPanel from '@zag-js/floating-panel'; import { createUniqueId, createMemo } from 'solid-js'; // src/components/floating-panel/use-floating-panel-context.ts var [FloatingPanelProvider, useFloatingPanelContext] = createContext({ hookName: "useFloatingPanelContext", providerName: "<FloatingPanelProvider />" }); // src/components/floating-panel/floating-panel-body.tsx var FloatingPanelBody = (props) => { const floatingPanel2 = useFloatingPanelContext(); const mergedProps = mergeProps(() => floatingPanel2().getBodyProps(), props); return createComponent(ark.div, mergedProps); }; var FloatingPanelCloseTrigger = (props) => { const floatingPanel2 = useFloatingPanelContext(); const mergedProps = mergeProps(() => floatingPanel2().getCloseTriggerProps(), props); return createComponent(ark.button, mergedProps); }; var FloatingPanelContent = (props) => { const floatingPanel2 = useFloatingPanelContext(); const presence = usePresenceContext(); const mergedProps = mergeProps(() => floatingPanel2().getContentProps(), () => presence().presenceProps, props); if (presence().unmounted) { return null; } return createComponent(ark.div, mergedProps); }; // src/components/floating-panel/floating-panel-context.tsx var FloatingPanelContext = (props) => props.children(useFloatingPanelContext()); var FloatingPanelDragTrigger = (props) => { const floatingPanel2 = useFloatingPanelContext(); const mergedProps = mergeProps(() => floatingPanel2().getDragTriggerProps(), props); return createComponent(ark.div, mergedProps); }; var FloatingPanelHeader = (props) => { const floatingPanel2 = useFloatingPanelContext(); const mergedProps = mergeProps(() => floatingPanel2().getHeaderProps(), props); return createComponent(ark.div, mergedProps); }; var FloatingPanelPositioner = (props) => { const floatingPanel2 = useFloatingPanelContext(); const mergedProps = mergeProps(() => floatingPanel2().getPositionerProps(), props); const presence = usePresenceContext(); if (presence().unmounted) { return null; } return createComponent(ark.div, mergedProps); }; var FloatingPanelResizeTrigger = (props) => { const [resizeProps, localProps] = createSplitProps()(props, ["axis"]); const floatingPanel2 = useFloatingPanelContext(); const mergedProps = mergeProps(() => floatingPanel2().getResizeTriggerProps(resizeProps), localProps); return createComponent(ark.div, mergedProps); }; var FloatingPanelStageTrigger = (props) => { const [stage, localProps] = createSplitProps()(props, ["stage"]); const floatingPanel2 = useFloatingPanelContext(); const mergedProps = mergeProps(() => floatingPanel2().getStageTriggerProps(stage), localProps); return createComponent(ark.button, mergedProps); }; var useFloatingPanel = (props = {}) => { const env = useEnvironmentContext(); const locale = useLocaleContext(); const id = createUniqueId(); const machineProps = createMemo(() => ({ id, dir: locale().dir, getRootNode: env().getRootNode, ...runIfFn(props) })); const service = useMachine(floatingPanel.machine, machineProps); return createMemo(() => floatingPanel.connect(service, normalizeProps)); }; // src/components/floating-panel/floating-panel-root.tsx var FloatingPanelRoot = (props) => { const [presenceProps, otherProps] = splitPresenceProps(props); const [useFloatingPanelProps, localProps] = createSplitProps()(otherProps, ["allowOverflow", "closeOnEscape", "defaultOpen", "defaultPosition", "defaultSize", "dir", "disabled", "draggable", "getAnchorPosition", "getBoundaryEl", "gridSize", "id", "ids", "lockAspectRatio", "maxSize", "minSize", "onOpenChange", "onPositionChange", "onPositionChangeEnd", "onSizeChange", "onSizeChangeEnd", "onStageChange", "open", "persistRect", "position", "resizable", "size", "strategy", "translations"]); const floatingPanel2 = useFloatingPanel(useFloatingPanelProps); const usePresenceProps = mergeProps(() => ({ present: floatingPanel2().open }), presenceProps); const presence = usePresence(usePresenceProps); return createComponent(FloatingPanelProvider, { value: floatingPanel2, get children() { return createComponent(PresenceProvider, { value: presence, get children() { return localProps.children; } }); } }); }; var FloatingPanelRootProvider = (props) => { const [presenceProps, baseProps] = splitPresenceProps(props); const [rootProps, localProps] = createSplitProps()(baseProps, ["value"]); const presence = usePresence(mergeProps(() => ({ present: rootProps.value().open }), presenceProps)); return createComponent(FloatingPanelProvider, { get value() { return rootProps.value; }, get children() { return createComponent(PresenceProvider, { value: presence, get children() { return localProps.children; } }); } }); }; var FloatingPanelTitle = (props) => { const floatingPanel2 = useFloatingPanelContext(); const mergedProps = mergeProps(() => floatingPanel2().getTitleProps(), props); return createComponent(ark.h2, mergedProps); }; var FloatingPanelTrigger = (props) => { const floatingPanel2 = useFloatingPanelContext(); const presence = usePresenceContext(); const mergedProps = mergeProps(() => { const triggerProps = floatingPanel2().getTriggerProps(); return { ...triggerProps, "aria-controls": presence().unmounted ? void 0 : triggerProps["aria-controls"] }; }, props); return createComponent(ark.button, mergedProps); }; var FloatingPanelControl = (props) => { const floatingPanel2 = useFloatingPanelContext(); const mergedProps = mergeProps(() => floatingPanel2().getControlProps(), props); return createComponent(ark.div, mergedProps); }; // src/components/floating-panel/floating-panel.ts var floating_panel_exports = {}; __export(floating_panel_exports, { Body: () => FloatingPanelBody, CloseTrigger: () => FloatingPanelCloseTrigger, Content: () => FloatingPanelContent, Context: () => FloatingPanelContext, Control: () => FloatingPanelControl, DragTrigger: () => FloatingPanelDragTrigger, Header: () => FloatingPanelHeader, Positioner: () => FloatingPanelPositioner, ResizeTrigger: () => FloatingPanelResizeTrigger, Root: () => FloatingPanelRoot, RootProvider: () => FloatingPanelRootProvider, StageTrigger: () => FloatingPanelStageTrigger, Title: () => FloatingPanelTitle, Trigger: () => FloatingPanelTrigger }); export { FloatingPanelBody, FloatingPanelCloseTrigger, FloatingPanelContent, FloatingPanelContext, FloatingPanelControl, FloatingPanelDragTrigger, FloatingPanelHeader, FloatingPanelPositioner, FloatingPanelResizeTrigger, FloatingPanelRoot, FloatingPanelRootProvider, FloatingPanelStageTrigger, FloatingPanelTitle, FloatingPanelTrigger, floating_panel_exports, useFloatingPanel, useFloatingPanelContext };