@fidely-ui/react/dist/components/dialog/dialog.js

Fidely UI is a modern, beautifully crafted React design system powered by Ark UI and Panda CSS, delivering accessible and themeable components for building exceptional web apps

'use client';
import { jsx as _jsx } from "react/jsx-runtime";
import { ark } from '@ark-ui/react/factory';
import { Dialog as ArkDialog, useDialogContext } from '@ark-ui/react/dialog';
import { dialog, } from '@fidely-ui/styled-system/recipes';
import { styled } from '@fidely-ui/styled-system/jsx';
import { makeStyleContext } from '../../system/make-style-context';
import { forwardRef } from 'react';
const { withSlotRootProvider, withSlotContext } = makeStyleContext(dialog);
export const DialogRootProvider = withSlotRootProvider(ArkDialog.RootProvider);
export const DialogRoot = withSlotRootProvider(ArkDialog.Root);
export const DialogContent = withSlotContext(ArkDialog.Content, 'content');
export const DialogDescription = withSlotContext(ArkDialog.Description, 'description');
export const DialogTitle = withSlotContext(ArkDialog.Title, 'title');
export const DialogCloseTrigger = withSlotContext(ArkDialog.CloseTrigger, 'closeTrigger');
export const DialogTrigger = withSlotContext(ArkDialog.Trigger, 'trigger');
const StyledCloseAction = styled(ark.button);
export const DialogCloseAction = forwardRef(function DialogCloseAction(props, ref) {
    const dialog = useDialogContext();
    return (_jsx(StyledCloseAction, { ...props, ref: ref, onClick: () => dialog.setOpen(false) }));
});
export const DialogPositioner = withSlotContext(ArkDialog.Positioner, 'positioner');
export const DialogBackdrop = withSlotContext(ArkDialog.Backdrop, 'backdrop');
export const DialogBody = withSlotContext('div', 'body');
export const DialogHeader = withSlotContext('div', 'header');
export const DialogFooter = withSlotContext('div', 'footer');
// -------------------- Context --------------------
export const DialogContext = ArkDialog.Context;