@mks2508/mks-ui 0.5.7 → 0.6.0

package/src/react-ui/ui/Dialog/Dialog.styles.ts

@@ -1,59 +0,0 @@
-/**
- * Style definitions for the Dialog component.
- *
- * Provides StyleSlots for each visual region and CVA variants
- * for sub-component styling. Uses only CSS variable utilities;
- * never hard-coded color values.
- *
- * @module @mks2508/mks-ui/react/ui/Dialog/Dialog.styles
- */
-
-import type { StyleSlots } from '@/core/types';
-import type { DialogSlot } from './Dialog.types';
-
-/**
- * Default Tailwind classes for each Dialog visual region.
- * Consumers override via the `slots` prop; the merge order is:
- * `base -> slots -> className`.
- *
- * @example
- * ```typescript
- * import { dialogStyles } from './Dialog.styles';
- * // dialogStyles.backdrop => 'fixed inset-0 z-50 bg-black/80'
- * ```
- */
-export const dialogStyles: StyleSlots<DialogSlot> = {
-  /** Root wrapper — no visual styling by default. */
-  root: '',
-
-  /** Semi-transparent overlay behind the popup. */
-  backdrop:
-    'fixed inset-0 z-50 bg-black/80',
-
-  /** Main popup container with centered positioning. */
-  popup: [
-    'fixed top-1/2 left-1/2 z-50 -translate-x-1/2 -translate-y-1/2',
-    'w-full max-w-lg',
-    'rounded-lg border border-border bg-background p-6 shadow-lg',
-  ].join(' '),
-
-  /** Header region — stacks title + description vertically. */
-  header:
-    'flex flex-col gap-2 text-center sm:text-left',
-
-  /** Footer region — right-aligned action buttons. */
-  footer:
-    'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
-
-  /** Dialog title text. */
-  title:
-    'text-lg font-semibold leading-none tracking-tight text-foreground',
-
-  /** Dialog description text. */
-  description:
-    'text-sm text-muted-foreground',
-
-  /** Close button positioning. */
-  close:
-    'absolute top-4 right-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none',
-};

package/src/react-ui/ui/Dialog/Dialog.types.ts

@@ -1,284 +0,0 @@
-/**
- * Type definitions for the Dialog component.
- *
- * Provides all prop interfaces, slot types, context types, and configuration
- * for the animated dialog system built on Base UI and Motion.
- *
- * @module @mks2508/mks-ui/react/ui/Dialog/Dialog.types
- */
-
-import type * as React from 'react';
-import type { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
-import type { HTMLMotionProps } from 'motion/react';
-
-import type { SlotOverrides, IBaseConfig } from '@/core/types';
-
-/* -------------------------------------------------------------------------- */
-/*  Slot                                                                      */
-/* -------------------------------------------------------------------------- */
-
-/**
- * Visual regions available for class-name overrides via the `slots` prop.
- *
- * @example
- * ```tsx
- * <DialogBackdrop slots={{ backdrop: 'bg-black/80' }} />
- * <DialogPopup slots={{ popup: 'max-w-lg rounded-xl' }} />
- * ```
- */
-export type DialogSlot =
-  | 'root'
-  | 'backdrop'
-  | 'popup'
-  | 'header'
-  | 'footer'
-  | 'title'
-  | 'description'
-  | 'close';
-
-/* -------------------------------------------------------------------------- */
-/*  Flip direction                                                            */
-/* -------------------------------------------------------------------------- */
-
-/**
- * Direction from which the dialog popup flips in during its entrance animation.
- *
- * @example
- * ```tsx
- * <DialogPopup from="bottom" />
- * ```
- */
-export type DialogFlipDirection = 'top' | 'bottom' | 'left' | 'right';
-
-/* -------------------------------------------------------------------------- */
-/*  Config                                                                    */
-/* -------------------------------------------------------------------------- */
-
-/**
- * Extended configuration for the Dialog component.
- * Inherits base animation settings and adds dialog-specific options.
- *
- * @example
- * ```typescript
- * const config: IDialogConfig = {
- *   animation: { duration: 0.2, easing: 'ease-in-out' },
- * };
- * ```
- */
-export interface IDialogConfig extends IBaseConfig {
-  // Reserved for future dialog-specific config (e.g., closeOnEsc toggle).
-}
-
-/* -------------------------------------------------------------------------- */
-/*  Context                                                                   */
-/* -------------------------------------------------------------------------- */
-
-/**
- * Internal context type shared between Dialog sub-components.
- * Tracks open state so AnimatePresence can coordinate enter/exit animations.
- *
- * @example
- * ```tsx
- * const { isOpen, setIsOpen } = useDialog();
- * ```
- */
-export type DialogContextType = {
-  /** Whether the dialog is currently open. */
-  isOpen: boolean;
-  /** Callback to change the open state. */
-  setIsOpen: IDialogProps['onOpenChange'];
-};
-
-/* -------------------------------------------------------------------------- */
-/*  Props interfaces                                                          */
-/* -------------------------------------------------------------------------- */
-
-/**
- * Props for the root `Dialog` component.
- * Wraps Base UI Dialog.Root with controlled-state support and context provider.
- *
- * @example
- * ```tsx
- * <Dialog open={isOpen} onOpenChange={setIsOpen}>
- *   <DialogTrigger>Open</DialogTrigger>
- *   <DialogPortal>
- *     <DialogBackdrop />
- *     <DialogPopup>Content</DialogPopup>
- *   </DialogPortal>
- * </Dialog>
- * ```
- */
-export interface IDialogProps
-  extends React.ComponentProps<typeof DialogPrimitive.Root> {
-  /** Style slot overrides for the root wrapper. */
-  slots?: SlotOverrides<DialogSlot>;
-  /** Component configuration. */
-  config?: IDialogConfig;
-}
-
-/**
- * Props for the `DialogTrigger` component.
- * Renders the element that opens the dialog on interaction.
- *
- * @example
- * ```tsx
- * <DialogTrigger>
- *   <Button>Open Dialog</Button>
- * </DialogTrigger>
- * ```
- */
-export interface IDialogTriggerProps
-  extends React.ComponentProps<typeof DialogPrimitive.Trigger> {
-  /** Style slot overrides. */
-  slots?: SlotOverrides<DialogSlot>;
-}
-
-/**
- * Props for the `DialogPortal` component.
- * Renders children into a React portal with AnimatePresence for exit animations.
- * The `keepMounted` prop is handled internally and cannot be overridden.
- *
- * @example
- * ```tsx
- * <DialogPortal>
- *   <DialogBackdrop />
- *   <DialogPopup>...</DialogPopup>
- * </DialogPortal>
- * ```
- */
-export interface IDialogPortalProps
-  extends Omit<
-    React.ComponentProps<typeof DialogPrimitive.Portal>,
-    'keepMounted'
-  > {
-  /** Style slot overrides. */
-  slots?: SlotOverrides<DialogSlot>;
-}
-
-/**
- * Props for the `DialogBackdrop` component.
- * Renders a motion-animated overlay behind the dialog popup.
- * Accepts all HTMLMotionProps for full animation control.
- *
- * @example
- * ```tsx
- * <DialogBackdrop className="bg-black/60" />
- * ```
- */
-export interface IDialogBackdropProps
-  extends Omit<
-      Omit<React.ComponentProps<typeof DialogPrimitive.Backdrop>, 'render'>,
-      keyof HTMLMotionProps<'div'>
-    >,
-    HTMLMotionProps<'div'> {
-  /** Style slot overrides. */
-  slots?: SlotOverrides<DialogSlot>;
-}
-
-/**
- * Props for the `DialogPopup` component.
- * The main content container with perspective-flip entrance animation.
- *
- * @example
- * ```tsx
- * <DialogPopup from="bottom" className="rounded-xl p-6">
- *   <DialogTitle>Confirm</DialogTitle>
- *   <DialogDescription>Are you sure?</DialogDescription>
- * </DialogPopup>
- * ```
- */
-export interface IDialogPopupProps
-  extends Omit<
-      Omit<React.ComponentProps<typeof DialogPrimitive.Popup>, 'render'>,
-      keyof HTMLMotionProps<'div'>
-    >,
-    HTMLMotionProps<'div'> {
-  /**
-   * Direction from which the popup flips in.
-   * @defaultValue 'top'
-   */
-  from?: DialogFlipDirection;
-  /** Style slot overrides. */
-  slots?: SlotOverrides<DialogSlot>;
-}
-
-/**
- * Props for the `DialogClose` component.
- * Renders a button that closes the dialog when clicked.
- *
- * @example
- * ```tsx
- * <DialogClose>
- *   <button aria-label="Close">X</button>
- * </DialogClose>
- * ```
- */
-export interface IDialogCloseProps
-  extends React.ComponentProps<typeof DialogPrimitive.Close> {
-  /** Style slot overrides. */
-  slots?: SlotOverrides<DialogSlot>;
-}
-
-/**
- * Props for the `DialogHeader` layout component.
- * Renders a semantic header region inside the dialog popup.
- *
- * @example
- * ```tsx
- * <DialogHeader>
- *   <DialogTitle>Settings</DialogTitle>
- *   <DialogDescription>Adjust your preferences.</DialogDescription>
- * </DialogHeader>
- * ```
- */
-export interface IDialogHeaderProps extends React.ComponentProps<'div'> {
-  /** Style slot overrides. */
-  slots?: SlotOverrides<DialogSlot>;
-}
-
-/**
- * Props for the `DialogFooter` layout component.
- * Renders a semantic footer region inside the dialog popup.
- *
- * @example
- * ```tsx
- * <DialogFooter>
- *   <DialogClose><Button variant="outline">Cancel</Button></DialogClose>
- *   <Button>Save</Button>
- * </DialogFooter>
- * ```
- */
-export interface IDialogFooterProps extends React.ComponentProps<'div'> {
-  /** Style slot overrides. */
-  slots?: SlotOverrides<DialogSlot>;
-}
-
-/**
- * Props for the `DialogTitle` component.
- * Renders the accessible title for the dialog.
- *
- * @example
- * ```tsx
- * <DialogTitle>Delete Item</DialogTitle>
- * ```
- */
-export interface IDialogTitleProps
-  extends React.ComponentProps<typeof DialogPrimitive.Title> {
-  /** Style slot overrides. */
-  slots?: SlotOverrides<DialogSlot>;
-}
-
-/**
- * Props for the `DialogDescription` component.
- * Renders the accessible description for the dialog.
- *
- * @example
- * ```tsx
- * <DialogDescription>This action cannot be undone.</DialogDescription>
- * ```
- */
-export interface IDialogDescriptionProps
-  extends React.ComponentProps<typeof DialogPrimitive.Description> {
-  /** Style slot overrides. */
-  slots?: SlotOverrides<DialogSlot>;
-}