@mks2508/mks-ui 0.1.4 → 0.2.0

package/src/components/animate-ui/primitives/base/dialog.tsx

@@ -1,203 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { Dialog as DialogPrimitive } from '@base-ui-components/react/dialog';
-import { AnimatePresence, motion, type HTMLMotionProps } from 'motion/react';
-
-import { useControlledState } from '@/hooks/use-controlled-state';
-import { getStrictContext } from '@/lib/get-strict-context';
-
-type DialogContextType = {
-  isOpen: boolean;
-  setIsOpen: DialogProps['onOpenChange'];
-};
-
-const [DialogProvider, useDialog] =
-  getStrictContext<DialogContextType>('DialogContext');
-
-type DialogProps = React.ComponentProps<typeof DialogPrimitive.Root>;
-
-function Dialog(props: DialogProps) {
-  const [isOpen, setIsOpen] = useControlledState({
-    value: props?.open,
-    defaultValue: props?.defaultOpen,
-    onChange: props?.onOpenChange,
-  });
-
-  return (
-    <DialogProvider value={{ isOpen, setIsOpen }}>
-      <DialogPrimitive.Root
-        data-slot="dialog"
-        {...props}
-        onOpenChange={setIsOpen}
-      />
-    </DialogProvider>
-  );
-}
-
-type DialogTriggerProps = React.ComponentProps<typeof DialogPrimitive.Trigger>;
-
-function DialogTrigger(props: DialogTriggerProps) {
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
-}
-
-type DialogPortalProps = Omit<
-  React.ComponentProps<typeof DialogPrimitive.Portal>,
-  'keepMounted'
->;
-
-function DialogPortal(props: DialogPortalProps) {
-  const { isOpen } = useDialog();
-
-  return (
-    <AnimatePresence>
-      {isOpen && (
-        <DialogPrimitive.Portal
-          data-slot="dialog-portal"
-          keepMounted
-          {...props}
-        />
-      )}
-    </AnimatePresence>
-  );
-}
-
-type DialogBackdropProps = Omit<
-  React.ComponentProps<typeof DialogPrimitive.Backdrop>,
-  'render'
-> &
-  HTMLMotionProps<'div'>;
-
-function DialogBackdrop({
-  transition = { duration: 0.2, ease: 'easeInOut' },
-  ...props
-}: DialogBackdropProps) {
-  return (
-    <DialogPrimitive.Backdrop
-      data-slot="dialog-backdrop"
-      render={
-        <motion.div
-          key="dialog-backdrop"
-          initial={{ opacity: 0, filter: 'blur(4px)' }}
-          animate={{ opacity: 1, filter: 'blur(0px)' }}
-          exit={{ opacity: 0, filter: 'blur(4px)' }}
-          transition={transition}
-          {...props}
-        />
-      }
-    />
-  );
-}
-
-type DialogFlipDirection = 'top' | 'bottom' | 'left' | 'right';
-
-type DialogPopupProps = Omit<
-  React.ComponentProps<typeof DialogPrimitive.Popup>,
-  'render'
-> &
-  HTMLMotionProps<'div'> & {
-    from?: DialogFlipDirection;
-  };
-
-function DialogPopup({
-  from = 'top',
-  initialFocus,
-  finalFocus,
-  transition = { type: 'spring', stiffness: 150, damping: 25 },
-  ...props
-}: DialogPopupProps) {
-  const initialRotation =
-    from === 'bottom' || from === 'left' ? '20deg' : '-20deg';
-  const isVertical = from === 'top' || from === 'bottom';
-  const rotateAxis = isVertical ? 'rotateX' : 'rotateY';
-
-  return (
-    <DialogPrimitive.Popup
-      initialFocus={initialFocus}
-      finalFocus={finalFocus}
-      render={
-        <motion.div
-          key="dialog-popup"
-          data-slot="dialog-popup"
-          initial={{
-            opacity: 0,
-            filter: 'blur(4px)',
-            transform: `perspective(500px) ${rotateAxis}(${initialRotation}) scale(0.8)`,
-          }}
-          animate={{
-            opacity: 1,
-            filter: 'blur(0px)',
-            transform: `perspective(500px) ${rotateAxis}(0deg) scale(1)`,
-          }}
-          exit={{
-            opacity: 0,
-            filter: 'blur(4px)',
-            transform: `perspective(500px) ${rotateAxis}(${initialRotation}) scale(0.8)`,
-          }}
-          transition={transition}
-          {...props}
-        />
-      }
-    />
-  );
-}
-
-type DialogCloseProps = React.ComponentProps<typeof DialogPrimitive.Close>;
-
-function DialogClose(props: DialogCloseProps) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
-}
-
-type DialogHeaderProps = React.ComponentProps<'div'>;
-
-function DialogHeader(props: DialogHeaderProps) {
-  return <div data-slot="dialog-header" {...props} />;
-}
-
-type DialogFooterProps = React.ComponentProps<'div'>;
-
-function DialogFooter(props: DialogFooterProps) {
-  return <div data-slot="dialog-footer" {...props} />;
-}
-
-type DialogTitleProps = React.ComponentProps<typeof DialogPrimitive.Title>;
-
-function DialogTitle(props: DialogTitleProps) {
-  return <DialogPrimitive.Title data-slot="dialog-title" {...props} />;
-}
-
-type DialogDescriptionProps = React.ComponentProps<
-  typeof DialogPrimitive.Description
->;
-
-function DialogDescription(props: DialogDescriptionProps) {
-  return (
-    <DialogPrimitive.Description data-slot="dialog-description" {...props} />
-  );
-}
-
-export {
-  Dialog,
-  DialogPortal,
-  DialogBackdrop,
-  DialogClose,
-  DialogTrigger,
-  DialogPopup,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
-  DialogDescription,
-  useDialog,
-  type DialogProps,
-  type DialogTriggerProps,
-  type DialogPortalProps,
-  type DialogCloseProps,
-  type DialogBackdropProps,
-  type DialogPopupProps,
-  type DialogHeaderProps,
-  type DialogFooterProps,
-  type DialogTitleProps,
-  type DialogDescriptionProps,
-  type DialogContextType,
-  type DialogFlipDirection,
-};

package/src/components/animate-ui/primitives/base/menu.tsx

@@ -1,463 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { Menu as MenuPrimitive } from '@base-ui-components/react/menu';
-import { AnimatePresence, motion, type HTMLMotionProps } from 'motion/react';
-
-import {
-  Highlight,
-  HighlightItem,
-  type HighlightItemProps,
-  type HighlightProps,
-} from '@/components/animate-ui/primitives/effects/highlight';
-import { getStrictContext } from '@/lib/get-strict-context';
-import { useControlledState } from '@/hooks/use-controlled-state';
-import { useDataState } from '@/hooks/use-data-state';
-
-type MenuActiveValueContextType = {
-  highlightedValue: string | null;
-  setHighlightedValue: (value: string | null) => void;
-};
-
-type MenuContextType = {
-  isOpen: boolean;
-  setIsOpen: MenuProps['onOpenChange'];
-};
-
-const [MenuActiveValueProvider, useMenuActiveValue] =
-  getStrictContext<MenuActiveValueContextType>('MenuActiveValueContext');
-const [MenuProvider, useMenu] =
-  getStrictContext<MenuContextType>('MenuContext');
-
-type MenuProps = React.ComponentProps<typeof MenuPrimitive.Root>;
-
-function Menu(props: MenuProps) {
-  const [isOpen, setIsOpen] = useControlledState({
-    value: props?.open,
-    defaultValue: props?.defaultOpen,
-    onChange: props?.onOpenChange,
-  });
-  const [highlightedValue, setHighlightedValue] = React.useState<string | null>(
-    null,
-  );
-
-  return (
-    <MenuActiveValueProvider value={{ highlightedValue, setHighlightedValue }}>
-      <MenuProvider value={{ isOpen, setIsOpen }}>
-        <MenuPrimitive.Root
-          data-slot="menu"
-          {...props}
-          onOpenChange={setIsOpen}
-        />
-      </MenuProvider>
-    </MenuActiveValueProvider>
-  );
-}
-
-type MenuTriggerProps = React.ComponentProps<typeof MenuPrimitive.Trigger>;
-
-function MenuTrigger(props: MenuTriggerProps) {
-  return <MenuPrimitive.Trigger data-slot="menu-trigger" {...props} />;
-}
-
-type MenuPortalProps = Omit<
-  React.ComponentProps<typeof MenuPrimitive.Portal>,
-  'keepMounted'
->;
-
-function MenuPortal(props: MenuPortalProps) {
-  const { isOpen } = useMenu();
-
-  return (
-    <AnimatePresence>
-      {isOpen && (
-        <MenuPrimitive.Portal keepMounted data-slot="menu-portal" {...props} />
-      )}
-    </AnimatePresence>
-  );
-}
-
-type MenuGroupProps = React.ComponentProps<typeof MenuPrimitive.Group>;
-
-function MenuGroup(props: MenuGroupProps) {
-  return <MenuPrimitive.Group data-slot="menu-group" {...props} />;
-}
-
-type MenuGroupLabelProps = React.ComponentProps<
-  typeof MenuPrimitive.GroupLabel
->;
-
-function MenuGroupLabel(props: MenuGroupLabelProps) {
-  return <MenuPrimitive.GroupLabel data-slot="menu-group-label" {...props} />;
-}
-
-type MenuSubmenuProps = React.ComponentProps<typeof MenuPrimitive.SubmenuRoot>;
-
-function MenuSubmenu(props: MenuSubmenuProps) {
-  const [isOpen, setIsOpen] = useControlledState({
-    value: props?.open,
-    defaultValue: props?.defaultOpen,
-    onChange: props?.onOpenChange,
-  });
-
-  return (
-    <MenuProvider value={{ isOpen, setIsOpen }}>
-      <MenuPrimitive.SubmenuRoot
-        data-slot="menu-submenu"
-        {...props}
-        onOpenChange={setIsOpen}
-      />
-    </MenuProvider>
-  );
-}
-
-type MenuSubmenuTriggerProps = Omit<
-  React.ComponentProps<typeof MenuPrimitive.SubmenuTrigger>,
-  'render'
-> &
-  HTMLMotionProps<'div'> & {
-    disabled?: boolean;
-  };
-
-function MenuSubmenuTrigger({
-  label,
-  id,
-  nativeButton,
-  ...props
-}: MenuSubmenuTriggerProps) {
-  const { setHighlightedValue } = useMenuActiveValue();
-  const [, highlightedRef] = useDataState<HTMLDivElement>(
-    'highlighted',
-    undefined,
-    (value) => {
-      if (value === true) {
-        const el = highlightedRef.current;
-        const v = el?.dataset.value || el?.id || null;
-        if (v) setHighlightedValue(v);
-      }
-    },
-  );
-
-  return (
-    <MenuPrimitive.SubmenuTrigger
-      ref={highlightedRef}
-      label={label}
-      id={id}
-      nativeButton={nativeButton}
-      data-slot="menu-submenu-trigger"
-      {...props}
-    />
-  );
-}
-
-type MenuHighlightProps = Omit<
-  HighlightProps,
-  'controlledItems' | 'enabled' | 'hover'
-> & {
-  animateOnHover?: boolean;
-};
-
-function MenuHighlight({
-  transition = { type: 'spring', stiffness: 350, damping: 35 },
-  ...props
-}: MenuHighlightProps) {
-  const { highlightedValue } = useMenuActiveValue();
-
-  return (
-    <Highlight
-      data-slot="menu-highlight"
-      click={false}
-      controlledItems
-      transition={transition}
-      value={highlightedValue}
-      {...props}
-    />
-  );
-}
-
-type MenuHighlightItemProps = HighlightItemProps;
-
-function MenuHighlightItem(props: MenuHighlightItemProps) {
-  return <HighlightItem data-slot="menu-highlight-item" {...props} />;
-}
-
-type MenuPositionerProps = React.ComponentProps<
-  typeof MenuPrimitive.Positioner
->;
-
-function MenuPositioner(props: MenuPositionerProps) {
-  return <MenuPrimitive.Positioner data-slot="menu-positioner" {...props} />;
-}
-
-type MenuPopupProps = Omit<
-  React.ComponentProps<typeof MenuPrimitive.Popup>,
-  'render'
-> &
-  HTMLMotionProps<'div'>;
-
-function MenuPopup({
-  finalFocus,
-  id,
-  transition = { duration: 0.2 },
-  style,
-  ...props
-}: MenuPopupProps) {
-  return (
-    <MenuPrimitive.Popup
-      finalFocus={finalFocus}
-      id={id}
-      render={
-        <motion.div
-          key="menu-popup"
-          data-slot="menu-popup"
-          initial={{ opacity: 0, scale: 0.95 }}
-          animate={{ opacity: 1, scale: 1 }}
-          exit={{ opacity: 0, scale: 0.95 }}
-          transition={transition}
-          style={{ willChange: 'opacity, transform', ...style }}
-          {...props}
-        />
-      }
-    />
-  );
-}
-
-type MenuItemProps = Omit<
-  React.ComponentProps<typeof MenuPrimitive.Item>,
-  'render'
-> &
-  HTMLMotionProps<'div'>;
-
-function MenuItem({
-  disabled,
-  label,
-  closeOnClick,
-  nativeButton,
-  id,
-  ...props
-}: MenuItemProps) {
-  const { setHighlightedValue } = useMenuActiveValue();
-  const [, highlightedRef] = useDataState<HTMLDivElement>(
-    'highlighted',
-    undefined,
-    (value) => {
-      if (value === true) {
-        const el = highlightedRef.current;
-        const v = el?.dataset.value || el?.id || null;
-        if (v) setHighlightedValue(v);
-      }
-    },
-  );
-
-  return (
-    <MenuPrimitive.Item
-      ref={highlightedRef}
-      label={label}
-      closeOnClick={closeOnClick}
-      nativeButton={nativeButton}
-      disabled={disabled}
-      id={id}
-      data-slot="menu-item"
-      {...props}
-    />
-  );
-}
-
-type MenuCheckboxItemProps = Omit<
-  React.ComponentProps<typeof MenuPrimitive.CheckboxItem>,
-  'render'
->;
-
-function MenuCheckboxItem({
-  label,
-  defaultChecked,
-  checked,
-  onCheckedChange,
-  disabled,
-  closeOnClick,
-  nativeButton,
-  id,
-  ...props
-}: MenuCheckboxItemProps) {
-  const { setHighlightedValue } = useMenuActiveValue();
-  const [, highlightedRef] = useDataState<HTMLDivElement>(
-    'highlighted',
-    undefined,
-    (value) => {
-      if (value === true) {
-        const el = highlightedRef.current;
-        const v = el?.dataset.value || el?.id || null;
-        if (v) setHighlightedValue(v);
-      }
-    },
-  );
-  return (
-    <MenuPrimitive.CheckboxItem
-      ref={highlightedRef}
-      label={label}
-      checked={checked}
-      defaultChecked={defaultChecked}
-      onCheckedChange={onCheckedChange}
-      disabled={disabled}
-      closeOnClick={closeOnClick}
-      nativeButton={nativeButton}
-      id={id}
-      data-slot="menu-checkbox-item"
-      {...props}
-    />
-  );
-}
-
-type MenuCheckboxItemIndicatorProps = Omit<
-  React.ComponentProps<typeof MenuPrimitive.CheckboxItemIndicator>,
-  'render'
-> &
-  HTMLMotionProps<'div'>;
-
-function MenuCheckboxItemIndicator({
-  keepMounted,
-  ...props
-}: MenuCheckboxItemIndicatorProps) {
-  return (
-    <MenuPrimitive.CheckboxItemIndicator
-      data-slot="menu-checkbox-item-indicator"
-      keepMounted={keepMounted}
-      render={
-        <motion.div data-slot="menu-checkbox-item-indicator" {...props} />
-      }
-    />
-  );
-}
-
-type MenuRadioGroupProps = React.ComponentProps<
-  typeof MenuPrimitive.RadioGroup
->;
-
-function MenuRadioGroup(props: MenuRadioGroupProps) {
-  return <MenuPrimitive.RadioGroup data-slot="menu-radio-group" {...props} />;
-}
-
-type MenuRadioItemProps = Omit<
-  React.ComponentProps<typeof MenuPrimitive.RadioItem>,
-  'render'
->;
-
-function MenuRadioItem({
-  value,
-  disabled,
-  label,
-  closeOnClick,
-  nativeButton,
-  id,
-  ...props
-}: MenuRadioItemProps) {
-  const { setHighlightedValue } = useMenuActiveValue();
-  const [, highlightedRef] = useDataState<HTMLDivElement>(
-    'highlighted',
-    undefined,
-    (value) => {
-      if (value === true) {
-        const el = highlightedRef.current;
-        const v = el?.dataset.value || el?.id || null;
-        if (v) setHighlightedValue(v);
-      }
-    },
-  );
-  return (
-    <MenuPrimitive.RadioItem
-      ref={highlightedRef}
-      value={value}
-      disabled={disabled}
-      label={label}
-      closeOnClick={closeOnClick}
-      nativeButton={nativeButton}
-      id={id}
-      data-slot="menu-radio-item"
-      {...props}
-    />
-  );
-}
-
-type MenuRadioItemIndicatorProps = Omit<
-  React.ComponentProps<typeof MenuPrimitive.RadioItemIndicator>,
-  'render'
-> &
-  HTMLMotionProps<'div'>;
-
-function MenuRadioItemIndicator({
-  keepMounted,
-  ...props
-}: MenuRadioItemIndicatorProps) {
-  return (
-    <MenuPrimitive.RadioItemIndicator
-      data-slot="menu-radio-item-indicator"
-      keepMounted={keepMounted}
-      render={<motion.div data-slot="menu-radio-item-indicator" {...props} />}
-    />
-  );
-}
-
-type MenuShortcutProps = React.ComponentProps<'span'>;
-
-function MenuShortcut(props: MenuShortcutProps) {
-  return <span data-slot="menu-shortcut" {...props} />;
-}
-
-type MenuArrowProps = React.ComponentProps<typeof MenuPrimitive.Arrow>;
-
-function MenuArrow(props: MenuArrowProps) {
-  return <MenuPrimitive.Arrow data-slot="menu-arrow" {...props} />;
-}
-
-type MenuSeparatorProps = React.ComponentProps<typeof MenuPrimitive.Separator>;
-
-function MenuSeparator(props: MenuSeparatorProps) {
-  return <MenuPrimitive.Separator data-slot="menu-separator" {...props} />;
-}
-
-export {
-  Menu,
-  MenuTrigger,
-  MenuPortal,
-  MenuPositioner,
-  MenuPopup,
-  MenuArrow,
-  MenuItem,
-  MenuCheckboxItem,
-  MenuCheckboxItemIndicator,
-  MenuRadioGroup,
-  MenuRadioItem,
-  MenuRadioItemIndicator,
-  MenuGroup,
-  MenuGroupLabel,
-  MenuSeparator,
-  MenuShortcut,
-  MenuHighlight,
-  MenuHighlightItem,
-  MenuSubmenu,
-  MenuSubmenuTrigger,
-  useMenuActiveValue,
-  useMenu,
-  type MenuProps,
-  type MenuTriggerProps,
-  type MenuPortalProps,
-  type MenuPositionerProps,
-  type MenuPopupProps,
-  type MenuArrowProps,
-  type MenuItemProps,
-  type MenuCheckboxItemProps,
-  type MenuCheckboxItemIndicatorProps,
-  type MenuRadioItemProps,
-  type MenuRadioItemIndicatorProps,
-  type MenuRadioGroupProps,
-  type MenuGroupProps,
-  type MenuGroupLabelProps,
-  type MenuSeparatorProps,
-  type MenuShortcutProps,
-  type MenuHighlightProps,
-  type MenuHighlightItemProps,
-  type MenuSubmenuProps,
-  type MenuSubmenuTriggerProps,
-  type MenuActiveValueContextType,
-  type MenuContextType,
-};