UNPKG

@ark-ui/solid

Version:

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

265 lines (243 loc) 9.04 kB
import { PresenceProvider, splitPresenceProps, usePresence, usePresenceContext } from "./IG7INNI2.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/floating-panel/floating-panel-body.tsx import { mergeProps } from "@zag-js/solid"; // 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 <ark.div {...mergedProps} />; }; // src/components/floating-panel/floating-panel-close-trigger.tsx import { mergeProps as mergeProps2 } from "@zag-js/solid"; var FloatingPanelCloseTrigger = (props) => { const floatingPanel2 = useFloatingPanelContext(); const mergedProps = mergeProps2(() => floatingPanel2().getCloseTriggerProps(), props); return <ark.button {...mergedProps} />; }; // src/components/floating-panel/floating-panel-content.tsx import { mergeProps as mergeProps3 } from "@zag-js/solid"; var FloatingPanelContent = (props) => { const floatingPanel2 = useFloatingPanelContext(); const presence = usePresenceContext(); const mergedProps = mergeProps3( () => floatingPanel2().getContentProps(), () => presence().presenceProps, props ); if (presence().unmounted) { return null; } return <ark.div {...mergedProps} />; }; // src/components/floating-panel/floating-panel-context.tsx var FloatingPanelContext = (props) => props.children(useFloatingPanelContext()); // src/components/floating-panel/floating-panel-drag-trigger.tsx import { mergeProps as mergeProps4 } from "@zag-js/solid"; var FloatingPanelDragTrigger = (props) => { const floatingPanel2 = useFloatingPanelContext(); const mergedProps = mergeProps4(() => floatingPanel2().getDragTriggerProps(), props); return <ark.div {...mergedProps} />; }; // src/components/floating-panel/floating-panel-header.tsx import { mergeProps as mergeProps5 } from "@zag-js/solid"; var FloatingPanelHeader = (props) => { const floatingPanel2 = useFloatingPanelContext(); const mergedProps = mergeProps5(() => floatingPanel2().getHeaderProps(), props); return <ark.div {...mergedProps} />; }; // src/components/floating-panel/floating-panel-positioner.tsx import { mergeProps as mergeProps6 } from "@zag-js/solid"; var FloatingPanelPositioner = (props) => { const floatingPanel2 = useFloatingPanelContext(); const mergedProps = mergeProps6(() => floatingPanel2().getPositionerProps(), props); const presence = usePresenceContext(); if (presence().unmounted) { return null; } return <ark.div {...mergedProps} />; }; // src/components/floating-panel/floating-panel-resize-trigger.tsx import { mergeProps as mergeProps7 } from "@zag-js/solid"; var FloatingPanelResizeTrigger = (props) => { const [resizeProps, localProps] = createSplitProps()(props, ["axis"]); const floatingPanel2 = useFloatingPanelContext(); const mergedProps = mergeProps7(() => floatingPanel2().getResizeTriggerProps(resizeProps), localProps); return <ark.div {...mergedProps} />; }; // src/components/floating-panel/floating-panel-stage-trigger.tsx import { mergeProps as mergeProps8 } from "@zag-js/solid"; var FloatingPanelStageTrigger = (props) => { const [stage, localProps] = createSplitProps()(props, ["stage"]); const floatingPanel2 = useFloatingPanelContext(); const mergedProps = mergeProps8(() => floatingPanel2().getStageTriggerProps(stage), localProps); return <ark.button {...mergedProps} />; }; // src/components/floating-panel/floating-panel-root.tsx import { mergeProps as mergeProps9 } from "@zag-js/solid"; // src/components/floating-panel/use-floating-panel.ts import * as floatingPanel from "@zag-js/floating-panel"; import { normalizeProps, useMachine } from "@zag-js/solid"; import { createMemo, createUniqueId } from "solid-js"; 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 = mergeProps9(() => ({ present: floatingPanel2().open }), presenceProps); const presence = usePresence(usePresenceProps); return <FloatingPanelProvider value={floatingPanel2}> <PresenceProvider value={presence}>{localProps.children}</PresenceProvider> </FloatingPanelProvider>; }; // src/components/floating-panel/floating-panel-root-provider.tsx import { mergeProps as mergeProps10 } from "@zag-js/solid"; var FloatingPanelRootProvider = (props) => { const [presenceProps, baseProps] = splitPresenceProps(props); const [rootProps, localProps] = createSplitProps()(baseProps, ["value"]); const presence = usePresence(mergeProps10(() => ({ present: rootProps.value().open }), presenceProps)); return <FloatingPanelProvider value={rootProps.value}> <PresenceProvider value={presence}>{localProps.children}</PresenceProvider> </FloatingPanelProvider>; }; // src/components/floating-panel/floating-panel-title.tsx import { mergeProps as mergeProps11 } from "@zag-js/solid"; var FloatingPanelTitle = (props) => { const floatingPanel2 = useFloatingPanelContext(); const mergedProps = mergeProps11(() => floatingPanel2().getTitleProps(), props); return <ark.h2 {...mergedProps} />; }; // src/components/floating-panel/floating-panel-trigger.tsx import { mergeProps as mergeProps12 } from "@zag-js/solid"; var FloatingPanelTrigger = (props) => { const floatingPanel2 = useFloatingPanelContext(); const presence = usePresenceContext(); const mergedProps = mergeProps12(() => { const triggerProps = floatingPanel2().getTriggerProps(); return { ...triggerProps, "aria-controls": presence().unmounted ? void 0 : triggerProps["aria-controls"] }; }, props); return <ark.button {...mergedProps} />; }; // src/components/floating-panel/floating-panel-control.tsx import { mergeProps as mergeProps13 } from "@zag-js/solid"; var FloatingPanelControl = (props) => { const floatingPanel2 = useFloatingPanelContext(); const mergedProps = mergeProps13(() => floatingPanel2().getControlProps(), props); return <ark.div {...mergedProps} />; }; // src/components/floating-panel/floating-panel.anatomy.ts import { anatomy } from "@zag-js/floating-panel"; // 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 { useFloatingPanelContext, FloatingPanelBody, FloatingPanelCloseTrigger, FloatingPanelContent, FloatingPanelContext, FloatingPanelDragTrigger, FloatingPanelHeader, FloatingPanelPositioner, FloatingPanelResizeTrigger, FloatingPanelStageTrigger, useFloatingPanel, FloatingPanelRoot, FloatingPanelRootProvider, FloatingPanelTitle, FloatingPanelTrigger, FloatingPanelControl, anatomy, floating_panel_exports };