@mks2508/mks-ui 0.1.3 → 0.2.0

package/src/react/ui/CornerBracket/CornerBracket.styles.ts

@@ -0,0 +1,38 @@
+import { cva } from 'class-variance-authority';
+import type { StyleSlots } from '@/core/types';
+
+type CornerBracketSlot = 'root';
+
+const cornerBracketStyles: StyleSlots<CornerBracketSlot> = {
+  root: 'absolute pointer-events-none',
+};
+
+/** CVA variants for CornerBracket positioning and color. */
+const bracketVariants = cva(cornerBracketStyles.root, {
+  variants: {
+    position: {
+      tl: 'top-0 left-0',
+      tr: 'top-0 right-0',
+      bl: 'bottom-0 left-0',
+      br: 'bottom-0 right-0',
+    },
+    variant: {
+      default: 'stroke-primary/50',
+      accent: 'stroke-primary/66',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+
+/** SVG path data for each corner position. */
+const BRACKET_PATHS = {
+  tl: 'M 0 20 L 0 5 A 5 5 0 0 1 5 0 L 20 0',
+  tr: 'M 0 0 L 15 0 A 5 5 0 0 1 20 5 L 20 20',
+  bl: 'M 0 0 L 0 15 A 5 5 0 0 0 5 20 L 20 20',
+  br: 'M 20 0 L 5 0 A 5 5 0 0 0 0 5 L 0 20',
+} as const;
+
+export { cornerBracketStyles, bracketVariants, BRACKET_PATHS };
+export type { CornerBracketSlot };

package/src/react/ui/CornerBracket/CornerBracket.types.ts

@@ -0,0 +1,15 @@
+import type { VariantProps } from 'class-variance-authority';
+import type { SlotOverrides } from '@/core/types';
+import type { bracketVariants, CornerBracketSlot } from './CornerBracket.styles';
+
+/** Props for the CornerBracket component. */
+interface ICornerBracketProps
+  extends Omit<React.SVGProps<SVGSVGElement>, 'variant'>,
+    VariantProps<typeof bracketVariants> {
+  /** Bracket size in pixels. */
+  size?: number;
+  /** Override classes for bracket visual regions. */
+  slots?: SlotOverrides<CornerBracketSlot>;
+}
+
+export type { ICornerBracketProps };

package/src/react/ui/CornerBracket/index.tsx

@@ -0,0 +1,49 @@
+import { cn } from '@/react/lib/utils';
+import { bracketVariants, BRACKET_PATHS } from './CornerBracket.styles';
+import type { ICornerBracketProps } from './CornerBracket.types';
+
+/**
+ * CornerBracket — SVG corner bracket decoration for industrial/technical UI styling.
+ *
+ * @param position - Corner position: 'tl', 'tr', 'bl', 'br'
+ * @param variant - Visual style: 'default' or 'accent'
+ * @param size - Bracket size in pixels (default: 20)
+ *
+ * @example
+ * ```tsx
+ * <div className="relative p-4">
+ *   <CornerBracket position="tl" />
+ *   <CornerBracket position="br" variant="accent" />
+ *   Content here
+ * </div>
+ * ```
+ */
+function CornerBracket({
+  className,
+  position,
+  variant,
+  size = 20,
+  slots,
+  ...props
+}: ICornerBracketProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      className={cn(bracketVariants({ position, variant }), slots?.root, className)}
+      {...props}
+    >
+      <path
+        d={BRACKET_PATHS[position || 'tl']}
+        strokeWidth={1.5}
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+export { CornerBracket, bracketVariants };
+export type { ICornerBracketProps } from './CornerBracket.types';
+export type { CornerBracketSlot } from './CornerBracket.styles';

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

@@ -0,0 +1,59 @@
+/**
+ * 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/Dialog/Dialog.types.ts

@@ -0,0 +1,284 @@
+/**
+ * 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>;
+}