@mks2508/mks-ui 0.1.4 → 0.2.1

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

@@ -1,179 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { Accordion as AccordionPrimitive } from '@base-ui-components/react/accordion';
-import { AnimatePresence, motion, type HTMLMotionProps } from 'motion/react';
-
-import { getStrictContext } from '@/lib/get-strict-context';
-import { useControlledState } from '@/hooks/use-controlled-state';
-
-type AccordionContextType = {
-  value: string | string[] | undefined;
-  setValue: (value: string | string[] | undefined) => void;
-};
-
-type AccordionItemContextType = {
-  isOpen: boolean;
-  setIsOpen: (open: boolean) => void;
-};
-
-const [AccordionProvider, useAccordion] =
-  getStrictContext<AccordionContextType>('AccordionContext');
-
-const [AccordionItemProvider, useAccordionItem] =
-  getStrictContext<AccordionItemContextType>('AccordionItemContext');
-
-type AccordionProps = React.ComponentProps<typeof AccordionPrimitive.Root>;
-
-function Accordion(props: AccordionProps) {
-  const [value, setValue] = useControlledState<string | string[] | undefined>({
-    value: props?.value,
-    defaultValue: props?.defaultValue,
-    onChange: props?.onValueChange as (
-      value: string | string[] | undefined,
-    ) => void,
-  });
-
-  return (
-    <AccordionProvider value={{ value, setValue }}>
-      <AccordionPrimitive.Root
-        data-slot="accordion"
-        {...props}
-        onValueChange={setValue}
-      />
-    </AccordionProvider>
-  );
-}
-
-type AccordionItemProps = React.ComponentProps<typeof AccordionPrimitive.Item>;
-
-function AccordionItem(props: AccordionItemProps) {
-  const { value } = useAccordion();
-  const [isOpen, setIsOpen] = React.useState(
-    value?.includes(props?.value) ?? false,
-  );
-
-  React.useEffect(() => {
-    setIsOpen(value?.includes(props?.value) ?? false);
-  }, [value, props?.value]);
-
-  return (
-    <AccordionItemProvider value={{ isOpen, setIsOpen }}>
-      <AccordionPrimitive.Item data-slot="accordion-item" {...props} />
-    </AccordionItemProvider>
-  );
-}
-
-type AccordionHeaderProps = React.ComponentProps<
-  typeof AccordionPrimitive.Header
->;
-
-function AccordionHeader(props: AccordionHeaderProps) {
-  return <AccordionPrimitive.Header data-slot="accordion-header" {...props} />;
-}
-
-type AccordionTriggerProps = React.ComponentProps<
-  typeof AccordionPrimitive.Trigger
->;
-
-function AccordionTrigger(props: AccordionTriggerProps) {
-  return (
-    <AccordionPrimitive.Trigger data-slot="accordion-trigger" {...props} />
-  );
-}
-
-type AccordionPanelProps = Omit<
-  React.ComponentProps<typeof AccordionPrimitive.Panel>,
-  'keepMounted' | 'render'
-> &
-  HTMLMotionProps<'div'> & {
-    keepRendered?: boolean;
-  };
-
-function AccordionPanel({
-  transition = { duration: 0.35, ease: 'easeInOut' },
-  hiddenUntilFound,
-  keepRendered = false,
-  ...props
-}: AccordionPanelProps) {
-  const { isOpen } = useAccordionItem();
-
-  return (
-    <AnimatePresence>
-      {keepRendered ? (
-        <AccordionPrimitive.Panel
-          hidden={false}
-          hiddenUntilFound={hiddenUntilFound}
-          keepMounted
-          render={
-            <motion.div
-              key="accordion-panel"
-              data-slot="accordion-panel"
-              initial={{ height: 0, opacity: 0, '--mask-stop': '0%', y: 20 }}
-              animate={
-                isOpen
-                  ? { height: 'auto', opacity: 1, '--mask-stop': '100%', y: 0 }
-                  : { height: 0, opacity: 0, '--mask-stop': '0%', y: 20 }
-              }
-              transition={transition}
-              style={{
-                maskImage:
-                  'linear-gradient(black var(--mask-stop), transparent var(--mask-stop))',
-                WebkitMaskImage:
-                  'linear-gradient(black var(--mask-stop), transparent var(--mask-stop))',
-                overflow: 'hidden',
-              }}
-              {...props}
-            />
-          }
-        />
-      ) : (
-        isOpen && (
-          <AccordionPrimitive.Panel
-            hidden={false}
-            hiddenUntilFound={hiddenUntilFound}
-            keepMounted
-            render={
-              <motion.div
-                key="accordion-panel"
-                data-slot="accordion-panel"
-                initial={{ height: 0, opacity: 0, '--mask-stop': '0%', y: 20 }}
-                animate={{
-                  height: 'auto',
-                  opacity: 1,
-                  '--mask-stop': '100%',
-                  y: 0,
-                }}
-                exit={{ height: 0, opacity: 0, '--mask-stop': '0%', y: 20 }}
-                transition={transition}
-                style={{
-                  maskImage:
-                    'linear-gradient(black var(--mask-stop), transparent var(--mask-stop))',
-                  WebkitMaskImage:
-                    'linear-gradient(black var(--mask-stop), transparent var(--mask-stop))',
-                  overflow: 'hidden',
-                }}
-                {...props}
-              />
-            }
-          />
-        )
-      )}
-    </AnimatePresence>
-  );
-}
-
-export {
-  Accordion,
-  AccordionItem,
-  AccordionHeader,
-  AccordionTrigger,
-  AccordionPanel,
-  useAccordionItem,
-  type AccordionProps,
-  type AccordionItemProps,
-  type AccordionHeaderProps,
-  type AccordionTriggerProps,
-  type AccordionPanelProps,
-  type AccordionItemContextType,
-};

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

@@ -1,218 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { AlertDialog as AlertDialogPrimitive } from '@base-ui-components/react/alert-dialog';
-import { AnimatePresence, motion, type HTMLMotionProps } from 'motion/react';
-
-import { useControlledState } from '@/hooks/use-controlled-state';
-import { getStrictContext } from '@/lib/get-strict-context';
-
-type AlertDialogContextType = {
-  isOpen: boolean;
-  setIsOpen: AlertDialogProps['onOpenChange'];
-};
-
-const [AlertDialogProvider, useAlertDialog] =
-  getStrictContext<AlertDialogContextType>('AlertDialogContext');
-
-type AlertDialogProps = React.ComponentProps<typeof AlertDialogPrimitive.Root>;
-
-function AlertDialog(props: AlertDialogProps) {
-  const [isOpen, setIsOpen] = useControlledState({
-    value: props?.open,
-    defaultValue: props?.defaultOpen,
-    onChange: props?.onOpenChange,
-  });
-
-  return (
-    <AlertDialogProvider value={{ isOpen, setIsOpen }}>
-      <AlertDialogPrimitive.Root
-        data-slot="alert-dialog"
-        {...props}
-        onOpenChange={setIsOpen}
-      />
-    </AlertDialogProvider>
-  );
-}
-
-type AlertDialogTriggerProps = React.ComponentProps<
-  typeof AlertDialogPrimitive.Trigger
->;
-
-function AlertDialogTrigger(props: AlertDialogTriggerProps) {
-  return (
-    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
-  );
-}
-
-type AlertDialogPortalProps = Omit<
-  React.ComponentProps<typeof AlertDialogPrimitive.Portal>,
-  'keepMounted'
->;
-
-function AlertDialogPortal(props: AlertDialogPortalProps) {
-  const { isOpen } = useAlertDialog();
-
-  return (
-    <AnimatePresence>
-      {isOpen && (
-        <AlertDialogPrimitive.Portal
-          data-slot="alert-dialog-portal"
-          keepMounted
-          {...props}
-        />
-      )}
-    </AnimatePresence>
-  );
-}
-
-type AlertDialogBackdropProps = Omit<
-  React.ComponentProps<typeof AlertDialogPrimitive.Backdrop>,
-  'render'
-> &
-  HTMLMotionProps<'div'>;
-
-function AlertDialogBackdrop({
-  transition = { duration: 0.2, ease: 'easeInOut' },
-  ...props
-}: AlertDialogBackdropProps) {
-  return (
-    <AlertDialogPrimitive.Backdrop
-      data-slot="alert-dialog-backdrop"
-      render={
-        <motion.div
-          key="alert-dialog-backdrop"
-          initial={{ opacity: 0, filter: 'blur(4px)' }}
-          animate={{ opacity: 1, filter: 'blur(0px)' }}
-          exit={{ opacity: 0, filter: 'blur(4px)' }}
-          transition={transition}
-          {...props}
-        />
-      }
-    />
-  );
-}
-
-type AlertDialogFlipDirection = 'top' | 'bottom' | 'left' | 'right';
-
-type AlertDialogPopupProps = Omit<
-  React.ComponentProps<typeof AlertDialogPrimitive.Popup>,
-  'render'
-> &
-  HTMLMotionProps<'div'> & {
-    from?: AlertDialogFlipDirection;
-  };
-
-function AlertDialogPopup({
-  from = 'top',
-  initialFocus,
-  finalFocus,
-  transition = { type: 'spring', stiffness: 150, damping: 25 },
-  ...props
-}: AlertDialogPopupProps) {
-  const initialRotation =
-    from === 'bottom' || from === 'left' ? '20deg' : '-20deg';
-  const isVertical = from === 'top' || from === 'bottom';
-  const rotateAxis = isVertical ? 'rotateX' : 'rotateY';
-
-  return (
-    <AlertDialogPrimitive.Popup
-      initialFocus={initialFocus}
-      finalFocus={finalFocus}
-      render={
-        <motion.div
-          key="alert-dialog-popup"
-          data-slot="alert-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 AlertDialogCloseProps = React.ComponentProps<
-  typeof AlertDialogPrimitive.Close
->;
-
-function AlertDialogClose(props: AlertDialogCloseProps) {
-  return (
-    <AlertDialogPrimitive.Close data-slot="alert-dialog-close" {...props} />
-  );
-}
-
-type AlertDialogHeaderProps = React.ComponentProps<'div'>;
-
-function AlertDialogHeader(props: AlertDialogHeaderProps) {
-  return <div data-slot="alert-dialog-header" {...props} />;
-}
-
-type AlertDialogFooterProps = React.ComponentProps<'div'>;
-
-function AlertDialogFooter(props: AlertDialogFooterProps) {
-  return <div data-slot="alert-dialog-footer" {...props} />;
-}
-
-type AlertDialogTitleProps = React.ComponentProps<
-  typeof AlertDialogPrimitive.Title
->;
-
-function AlertDialogTitle(props: AlertDialogTitleProps) {
-  return (
-    <AlertDialogPrimitive.Title data-slot="alert-dialog-title" {...props} />
-  );
-}
-
-type AlertDialogDescriptionProps = React.ComponentProps<
-  typeof AlertDialogPrimitive.Description
->;
-
-function AlertDialogDescription(props: AlertDialogDescriptionProps) {
-  return (
-    <AlertDialogPrimitive.Description
-      data-slot="alert-dialog-description"
-      {...props}
-    />
-  );
-}
-
-export {
-  AlertDialog,
-  AlertDialogPortal,
-  AlertDialogBackdrop,
-  AlertDialogClose,
-  AlertDialogTrigger,
-  AlertDialogPopup,
-  AlertDialogHeader,
-  AlertDialogFooter,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  useAlertDialog,
-  type AlertDialogProps,
-  type AlertDialogTriggerProps,
-  type AlertDialogPortalProps,
-  type AlertDialogCloseProps,
-  type AlertDialogBackdropProps,
-  type AlertDialogPopupProps,
-  type AlertDialogHeaderProps,
-  type AlertDialogFooterProps,
-  type AlertDialogTitleProps,
-  type AlertDialogDescriptionProps,
-  type AlertDialogContextType,
-  type AlertDialogFlipDirection,
-};

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

@@ -1,153 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { Checkbox as CheckboxPrimitive } from '@base-ui-components/react/checkbox';
-import {
-  motion,
-  type HTMLMotionProps,
-  type SVGMotionProps,
-} from 'motion/react';
-
-import { getStrictContext } from '@/lib/get-strict-context';
-import { useControlledState } from '@/hooks/use-controlled-state';
-
-type CheckboxContextType = {
-  isChecked: boolean;
-  setIsChecked: CheckboxProps['onCheckedChange'];
-  isIndeterminate: boolean | undefined;
-};
-
-const [CheckboxProvider, useCheckbox] =
-  getStrictContext<CheckboxContextType>('CheckboxContext');
-
-type CheckboxProps = Omit<
-  React.ComponentProps<typeof CheckboxPrimitive.Root>,
-  'render'
-> &
-  HTMLMotionProps<'button'>;
-
-function Checkbox({
-  name,
-  checked,
-  defaultChecked,
-  onCheckedChange,
-  indeterminate,
-  value,
-  nativeButton,
-  parent,
-  disabled,
-  readOnly,
-  required,
-  inputRef,
-  id,
-  ...props
-}: CheckboxProps) {
-  const [isChecked, setIsChecked] = useControlledState({
-    value: checked,
-    defaultValue: defaultChecked,
-    onChange: onCheckedChange,
-  });
-
-  return (
-    <CheckboxProvider
-      value={{ isChecked, setIsChecked, isIndeterminate: indeterminate }}
-    >
-      <CheckboxPrimitive.Root
-        name={name}
-        defaultChecked={defaultChecked}
-        checked={checked}
-        onCheckedChange={setIsChecked}
-        indeterminate={indeterminate}
-        value={value}
-        nativeButton={nativeButton}
-        parent={parent}
-        disabled={disabled}
-        readOnly={readOnly}
-        required={required}
-        inputRef={inputRef}
-        id={id}
-        render={
-          <motion.button
-            data-slot="checkbox"
-            whileTap={{ scale: 0.95 }}
-            whileHover={{ scale: 1.05 }}
-            {...props}
-          />
-        }
-      />
-    </CheckboxProvider>
-  );
-}
-
-type CheckboxIndicatorProps = SVGMotionProps<SVGSVGElement>;
-
-function CheckboxIndicator(props: CheckboxIndicatorProps) {
-  const { isChecked, isIndeterminate } = useCheckbox();
-
-  return (
-    <CheckboxPrimitive.Indicator
-      keepMounted
-      render={
-        <motion.svg
-          data-slot="checkbox-indicator"
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          strokeWidth="3.5"
-          stroke="currentColor"
-          initial="unchecked"
-          animate={isChecked ? 'checked' : 'unchecked'}
-          {...props}
-        >
-          {isIndeterminate ? (
-            <motion.line
-              x1="5"
-              y1="12"
-              x2="19"
-              y2="12"
-              strokeLinecap="round"
-              initial={{ pathLength: 0, opacity: 0 }}
-              animate={{
-                pathLength: 1,
-                opacity: 1,
-                transition: { duration: 0.2 },
-              }}
-            />
-          ) : (
-            <motion.path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              d="M4.5 12.75l6 6 9-13.5"
-              variants={{
-                checked: {
-                  pathLength: 1,
-                  opacity: 1,
-                  transition: {
-                    duration: 0.2,
-                    delay: 0.2,
-                  },
-                },
-                unchecked: {
-                  pathLength: 0,
-                  opacity: 0,
-                  transition: {
-                    duration: 0.2,
-                  },
-                },
-              }}
-            />
-          )}
-        </motion.svg>
-      }
-    ></CheckboxPrimitive.Indicator>
-  );
-}
-
-export {
-  Checkbox,
-  CheckboxIndicator,
-  useCheckbox,
-  type CheckboxProps,
-  type CheckboxIndicatorProps,
-  type CheckboxContextType,
-};