@ark-ui/solid
Version:
A collection of unstyled, accessible UI components for Solid, utilizing state machines for seamless interaction.
143 lines (129 loc) • 4.41 kB
JSX
import {
ark
} from "./UFYZ7HLU.jsx";
import {
useLocaleContext
} from "./YUC6JE7K.jsx";
import {
useEnvironmentContext
} from "./E2L62MKC.jsx";
import {
createContext
} from "./TVCIHLER.jsx";
import {
__export
} from "./7IUG3E2V.jsx";
// src/components/toast/create-toaster.tsx
import * as toast from "@zag-js/toast";
var createToaster = (props) => {
return toast.createStore(props);
};
// src/components/toast/toast-action-trigger.tsx
import { mergeProps } from "@zag-js/solid";
// src/components/toast/use-toast-context.ts
var [ToastProvider, useToastContext] = createContext({
hookName: "useToastContext",
providerName: "<ToastProvider />"
});
// src/components/toast/toast-action-trigger.tsx
var ToastActionTrigger = (props) => {
const toast3 = useToastContext();
const mergedProps = mergeProps(() => toast3().getActionTriggerProps(), props);
return <ark.button {...mergedProps} />;
};
// src/components/toast/toast-close-trigger.tsx
import { mergeProps as mergeProps2 } from "@zag-js/solid";
var ToastCloseTrigger = (props) => {
const toast3 = useToastContext();
const mergedProps = mergeProps2(() => toast3().getCloseTriggerProps(), props);
return <ark.button {...mergedProps} />;
};
// src/components/toast/toast-context.tsx
var ToastContext = (props) => props.children(useToastContext());
// src/components/toast/toast-description.tsx
import { mergeProps as mergeProps3 } from "@zag-js/solid";
var ToastDescription = (props) => {
const toast3 = useToastContext();
const mergedProps = mergeProps3(() => toast3().getDescriptionProps(), props);
return <ark.div {...mergedProps} />;
};
// src/components/toast/toast-root.tsx
import { mergeProps as mergeProps4 } from "@zag-js/solid";
var ToastRoot = (props) => {
const toast3 = useToastContext();
const mergedProps = mergeProps4(() => toast3().getRootProps(), props);
return <div {...mergedProps}>
<div {...toast3().getGhostBeforeProps()} />
{props.children}
<div {...toast3().getGhostAfterProps()} />
</div>;
};
// src/components/toast/toast-title.tsx
import { mergeProps as mergeProps5 } from "@zag-js/solid";
var ToastTitle = (props) => {
const toast3 = useToastContext();
const mergedProps = mergeProps5(() => toast3().getTitleProps(), props);
return <ark.div {...mergedProps} />;
};
// src/components/toast/toast.anatomy.ts
import { anatomy } from "@zag-js/toast";
// src/components/toast/toaster.tsx
import { Key, mergeProps as mergeProps6, normalizeProps, useMachine } from "@zag-js/solid";
import * as toast2 from "@zag-js/toast";
import { createMemo, createUniqueId, splitProps } from "solid-js";
var Toaster = (props) => {
const [toasterProps, localProps] = splitProps(props, ["toaster", "children"]);
const locale = useLocaleContext();
const env = useEnvironmentContext();
const service = useMachine(toast2.group.machine, () => ({
store: toasterProps.toaster,
id: createUniqueId(),
dir: locale()?.dir,
getRootNode: env()?.getRootNode
}));
const api = createMemo(() => toast2.group.connect(service, normalizeProps));
const toasts = createMemo(() => api().getToasts());
const mergedProps = mergeProps6(() => api().getGroupProps(), localProps);
return <ark.div {...mergedProps}>
<Key each={toasts()} by="id">
{(toast3, index) => <ToastActor value={toast3} index={index} parent={service}>
{(ctx) => toasterProps.children(ctx)}
</ToastActor>}
</Key>
</ark.div>;
};
var ToastActor = (props) => {
const env = useEnvironmentContext();
const localProps = createMemo(() => ({
...props.value(),
parent: props.parent,
index: props.index(),
getRootNode: env().getRootNode
}));
const service = useMachine(toast2.machine, localProps);
const api = createMemo(() => toast2.connect(service, normalizeProps));
return <ToastProvider value={api}>{props.children(props.value)}</ToastProvider>;
};
// src/components/toast/toast.ts
var toast_exports = {};
__export(toast_exports, {
ActionTrigger: () => ToastActionTrigger,
CloseTrigger: () => ToastCloseTrigger,
Context: () => ToastContext,
Description: () => ToastDescription,
Root: () => ToastRoot,
Title: () => ToastTitle
});
export {
createToaster,
useToastContext,
ToastActionTrigger,
ToastCloseTrigger,
ToastContext,
ToastDescription,
ToastRoot,
ToastTitle,
anatomy,
Toaster,
toast_exports
};