@ark-ui/solid
Version:
A collection of unstyled, accessible UI components for Solid, utilizing state machines for seamless interaction.
261 lines (240 loc) • 8.92 kB
JSX
import {
PresenceProvider,
splitPresenceProps,
usePresence,
usePresenceContext
} from "./2P5Y3YCK.jsx";
import {
createSplitProps
} from "./6WEDGJKQ.jsx";
import {
ark
} from "./UFYZ7HLU.jsx";
import {
useEnvironmentContext
} from "./CGW54HAQ.jsx";
import {
useLocaleContext
} from "./JFOWNFC7.jsx";
import {
runIfFn
} from "./KGOB2IMX.jsx";
import {
createContext
} from "./UZJJWJQM.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.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,
floating_panel_exports
};