@mks2508/mks-ui 0.1.4 → 0.2.0

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

@@ -1,167 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { Popover as PopoverPrimitive } from '@base-ui-components/react/popover';
-import { AnimatePresence, motion, type HTMLMotionProps } from 'motion/react';
-
-import { getStrictContext } from '@/lib/get-strict-context';
-import { useControlledState } from '@/hooks/use-controlled-state';
-
-type PopoverContextType = {
-  isOpen: boolean;
-  setIsOpen: PopoverProps['onOpenChange'];
-};
-
-const [PopoverProvider, usePopover] =
-  getStrictContext<PopoverContextType>('PopoverContext');
-
-type PopoverProps = React.ComponentProps<typeof PopoverPrimitive.Root>;
-
-function Popover(props: PopoverProps) {
-  const [isOpen, setIsOpen] = useControlledState({
-    value: props?.open,
-    defaultValue: props?.defaultOpen,
-    onChange: props?.onOpenChange,
-  });
-
-  return (
-    <PopoverProvider value={{ isOpen, setIsOpen }}>
-      <PopoverPrimitive.Root
-        data-slot="popover"
-        {...props}
-        onOpenChange={setIsOpen}
-      />
-    </PopoverProvider>
-  );
-}
-
-type PopoverTriggerProps = React.ComponentProps<
-  typeof PopoverPrimitive.Trigger
->;
-
-function PopoverTrigger(props: PopoverTriggerProps) {
-  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
-}
-
-type PopoverPortalProps = Omit<
-  React.ComponentProps<typeof PopoverPrimitive.Portal>,
-  'keepMounted'
->;
-
-function PopoverPortal(props: PopoverPortalProps) {
-  const { isOpen } = usePopover();
-
-  return (
-    <AnimatePresence>
-      {isOpen && (
-        <PopoverPrimitive.Portal
-          keepMounted
-          data-slot="popover-portal"
-          {...props}
-        />
-      )}
-    </AnimatePresence>
-  );
-}
-
-type PopoverPositionerProps = React.ComponentProps<
-  typeof PopoverPrimitive.Positioner
->;
-
-function PopoverPositioner(props: PopoverPositionerProps) {
-  return (
-    <PopoverPrimitive.Positioner data-slot="popover-positioner" {...props} />
-  );
-}
-
-type PopoverPopupProps = Omit<
-  React.ComponentProps<typeof PopoverPrimitive.Popup>,
-  'render'
-> &
-  HTMLMotionProps<'div'>;
-
-function PopoverPopup({
-  initialFocus,
-  finalFocus,
-  transition = { type: 'spring', stiffness: 300, damping: 25 },
-  ...props
-}: PopoverPopupProps) {
-  return (
-    <PopoverPrimitive.Popup
-      initialFocus={initialFocus}
-      finalFocus={finalFocus}
-      render={
-        <motion.div
-          key="popover-popup"
-          data-slot="popover-popup"
-          initial={{ opacity: 0, scale: 0.5 }}
-          animate={{ opacity: 1, scale: 1 }}
-          exit={{ opacity: 0, scale: 0.5 }}
-          transition={transition}
-          {...props}
-        />
-      }
-    />
-  );
-}
-
-type PopoverBackdropProps = React.ComponentProps<
-  typeof PopoverPrimitive.Backdrop
->;
-
-function PopoverBackdrop(props: PopoverBackdropProps) {
-  return <PopoverPrimitive.Backdrop data-slot="popover-backdrop" {...props} />;
-}
-
-type PopoverArrowProps = React.ComponentProps<typeof PopoverPrimitive.Arrow>;
-
-function PopoverArrow(props: PopoverArrowProps) {
-  return <PopoverPrimitive.Arrow data-slot="popover-arrow" {...props} />;
-}
-
-type PopoverTitleProps = React.ComponentProps<typeof PopoverPrimitive.Title>;
-
-function PopoverTitle(props: PopoverTitleProps) {
-  return <PopoverPrimitive.Title data-slot="popover-title" {...props} />;
-}
-
-type PopoverDescriptionProps = React.ComponentProps<
-  typeof PopoverPrimitive.Description
->;
-
-function PopoverDescription(props: PopoverDescriptionProps) {
-  return (
-    <PopoverPrimitive.Description data-slot="popover-description" {...props} />
-  );
-}
-
-type PopoverCloseProps = React.ComponentProps<typeof PopoverPrimitive.Close>;
-
-function PopoverClose(props: PopoverCloseProps) {
-  return <PopoverPrimitive.Close data-slot="popover-close" {...props} />;
-}
-
-export {
-  Popover,
-  PopoverTrigger,
-  PopoverPortal,
-  PopoverPositioner,
-  PopoverPopup,
-  PopoverBackdrop,
-  PopoverArrow,
-  PopoverTitle,
-  PopoverDescription,
-  PopoverClose,
-  usePopover,
-  type PopoverProps,
-  type PopoverTriggerProps,
-  type PopoverPortalProps,
-  type PopoverPositionerProps,
-  type PopoverPopupProps,
-  type PopoverBackdropProps,
-  type PopoverArrowProps,
-  type PopoverTitleProps,
-  type PopoverDescriptionProps,
-  type PopoverCloseProps,
-  type PopoverContextType,
-};

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

@@ -1,103 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { Progress as ProgressPrimitives } from '@base-ui-components/react/progress';
-import { motion } from 'motion/react';
-
-import {
-  CountingNumber,
-  type CountingNumberProps,
-} from '@/components/animate-ui/primitives/texts/counting-number';
-import { getStrictContext } from '@/lib/get-strict-context';
-
-type ProgressContextType = {
-  value: number;
-};
-
-const [ProgressProvider, useProgress] =
-  getStrictContext<ProgressContextType>('ProgressContext');
-
-type ProgressProps = React.ComponentProps<typeof ProgressPrimitives.Root>;
-
-const Progress = (props: ProgressProps) => {
-  return (
-    <ProgressProvider value={{ value: props.value ?? 0 }}>
-      <ProgressPrimitives.Root data-slot="progress" {...props} />
-    </ProgressProvider>
-  );
-};
-
-type ProgressIndicatorProps = React.ComponentProps<
-  typeof MotionProgressIndicator
->;
-
-const MotionProgressIndicator = motion.create(ProgressPrimitives.Indicator);
-
-function ProgressIndicator({
-  transition = { type: 'spring', stiffness: 100, damping: 30 },
-  ...props
-}: ProgressIndicatorProps) {
-  const { value } = useProgress();
-
-  return (
-    <MotionProgressIndicator
-      data-slot="progress-indicator"
-      animate={{ width: `${value}%` }}
-      transition={transition}
-      {...props}
-    />
-  );
-}
-
-type ProgressTrackProps = React.ComponentProps<typeof ProgressPrimitives.Track>;
-
-function ProgressTrack(props: ProgressTrackProps) {
-  return <ProgressPrimitives.Track data-slot="progress-track" {...props} />;
-}
-
-type ProgressLabelProps = React.ComponentProps<typeof ProgressPrimitives.Label>;
-
-function ProgressLabel(props: ProgressLabelProps) {
-  return <ProgressPrimitives.Label data-slot="progress-label" {...props} />;
-}
-
-type ProgressValueProps = Omit<
-  React.ComponentProps<typeof ProgressPrimitives.Value>,
-  'render'
-> &
-  Omit<CountingNumberProps, 'number'>;
-
-function ProgressValue({
-  transition = { stiffness: 80, damping: 20 },
-  ...props
-}: ProgressValueProps) {
-  const { value } = useProgress();
-
-  return (
-    <ProgressPrimitives.Value
-      data-slot="progress-value"
-      render={
-        <CountingNumber
-          number={value ?? 0}
-          transition={transition}
-          {...props}
-        />
-      }
-    />
-  );
-}
-
-export {
-  Progress,
-  ProgressIndicator,
-  ProgressTrack,
-  ProgressLabel,
-  ProgressValue,
-  useProgress,
-  type ProgressProps,
-  type ProgressIndicatorProps,
-  type ProgressTrackProps,
-  type ProgressLabelProps,
-  type ProgressValueProps,
-  type ProgressContextType,
-};

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

@@ -1,158 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { Switch as SwitchPrimitives } from '@base-ui-components/react/switch';
-import {
-  motion,
-  type TargetAndTransition,
-  type VariantLabels,
-  type HTMLMotionProps,
-  type LegacyAnimationControls,
-} from 'motion/react';
-
-import { getStrictContext } from '@/lib/get-strict-context';
-import { useControlledState } from '@/hooks/use-controlled-state';
-
-type SwitchContextType = {
-  isChecked: boolean;
-  setIsChecked: SwitchProps['onCheckedChange'];
-  isPressed: boolean;
-  setIsPressed: (isPressed: boolean) => void;
-};
-
-const [SwitchProvider, useSwitch] =
-  getStrictContext<SwitchContextType>('SwitchContext');
-
-type SwitchProps = Omit<
-  React.ComponentProps<typeof SwitchPrimitives.Root>,
-  'render'
-> &
-  HTMLMotionProps<'button'>;
-
-function Switch({
-  name,
-  defaultChecked,
-  checked,
-  onCheckedChange,
-  nativeButton,
-  disabled,
-  readOnly,
-  required,
-  inputRef,
-  id,
-  ...props
-}: SwitchProps) {
-  const [isPressed, setIsPressed] = React.useState(false);
-  const [isChecked, setIsChecked] = useControlledState({
-    value: checked,
-    defaultValue: defaultChecked,
-    onChange: onCheckedChange,
-  });
-
-  return (
-    <SwitchProvider
-      value={{ isChecked, setIsChecked, isPressed, setIsPressed }}
-    >
-      <SwitchPrimitives.Root
-        name={name}
-        defaultChecked={defaultChecked}
-        checked={checked}
-        onCheckedChange={setIsChecked}
-        nativeButton={nativeButton}
-        disabled={disabled}
-        readOnly={readOnly}
-        required={required}
-        inputRef={inputRef}
-        id={id}
-        render={
-          <motion.button
-            data-slot="switch"
-            whileTap="tap"
-            initial={false}
-            onTapStart={() => setIsPressed(true)}
-            onTapCancel={() => setIsPressed(false)}
-            onTap={() => setIsPressed(false)}
-            {...props}
-          />
-        }
-      />
-    </SwitchProvider>
-  );
-}
-
-type SwitchThumbProps = Omit<
-  React.ComponentProps<typeof SwitchPrimitives.Thumb>,
-  'render'
-> &
-  HTMLMotionProps<'div'> & {
-    pressedAnimation?:
-      | TargetAndTransition
-      | VariantLabels
-      | boolean
-      | LegacyAnimationControls;
-  };
-
-function SwitchThumb({
-  pressedAnimation,
-  transition = { type: 'spring', stiffness: 300, damping: 25 },
-  ...props
-}: SwitchThumbProps) {
-  const { isPressed } = useSwitch();
-
-  return (
-    <SwitchPrimitives.Thumb
-      render={
-        <motion.div
-          data-slot="switch-thumb"
-          whileTap="tab"
-          layout
-          transition={transition}
-          animate={isPressed ? pressedAnimation : undefined}
-          {...props}
-        />
-      }
-    />
-  );
-}
-
-type SwitchIconPosition = 'left' | 'right' | 'thumb';
-
-type SwitchIconProps = HTMLMotionProps<'div'> & {
-  position: SwitchIconPosition;
-};
-
-function SwitchIcon({
-  position,
-  transition = { type: 'spring', bounce: 0 },
-  ...props
-}: SwitchIconProps) {
-  const { isChecked } = useSwitch();
-
-  const isAnimated = React.useMemo(() => {
-    if (position === 'right') return !isChecked;
-    if (position === 'left') return isChecked;
-    if (position === 'thumb') return true;
-    return false;
-  }, [position, isChecked]);
-
-  return (
-    <motion.div
-      data-slot={`switch-${position}-icon`}
-      animate={isAnimated ? { scale: 1, opacity: 1 } : { scale: 0, opacity: 0 }}
-      transition={transition}
-      {...props}
-    />
-  );
-}
-
-export {
-  Switch,
-  SwitchThumb,
-  SwitchIcon,
-  useSwitch,
-  type SwitchProps,
-  type SwitchThumbProps,
-  type SwitchIconProps,
-  type SwitchIconPosition,
-  type SwitchContextType,
-};

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

@@ -1,202 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { Tabs as TabsPrimitive } from '@base-ui-components/react/tabs';
-import {
-  motion,
-  AnimatePresence,
-  type HTMLMotionProps,
-  type Transition,
-} from 'motion/react';
-
-import {
-  Highlight,
-  HighlightItem,
-  type HighlightProps,
-  type HighlightItemProps,
-} from '@/components/animate-ui/primitives/effects/highlight';
-import { getStrictContext } from '@/lib/get-strict-context';
-import { useControlledState } from '@/hooks/use-controlled-state';
-import {
-  AutoHeight,
-  type AutoHeightProps,
-} from '@/components/animate-ui/primitives/effects/auto-height';
-
-type TabsContextType = {
-  value: string | undefined;
-  setValue: TabsProps['onValueChange'];
-};
-
-const [TabsProvider, useTabs] =
-  getStrictContext<TabsContextType>('TabsContext');
-
-type TabsProps = React.ComponentProps<typeof TabsPrimitive.Root>;
-
-function Tabs(props: TabsProps) {
-  const [value, setValue] = useControlledState({
-    value: props.value,
-    defaultValue: props.defaultValue,
-    onChange: props.onValueChange,
-  });
-
-  return (
-    <TabsProvider value={{ value, setValue }}>
-      <TabsPrimitive.Root
-        data-slot="tabs"
-        {...props}
-        onValueChange={setValue}
-      />
-    </TabsProvider>
-  );
-}
-
-type TabsHighlightProps = Omit<HighlightProps, 'controlledItems' | 'value'>;
-
-function TabsHighlight({
-  transition = { type: 'spring', stiffness: 200, damping: 25 },
-  ...props
-}: TabsHighlightProps) {
-  const { value } = useTabs();
-
-  return (
-    <Highlight
-      data-slot="tabs-highlight"
-      controlledItems
-      value={value}
-      transition={transition}
-      click={false}
-      {...props}
-    />
-  );
-}
-
-type TabsListProps = React.ComponentProps<typeof TabsPrimitive.List>;
-
-function TabsList(props: TabsListProps) {
-  return <TabsPrimitive.List data-slot="tabs-list" {...props} />;
-}
-
-type TabsHighlightItemProps = HighlightItemProps & {
-  value: string;
-};
-
-function TabsHighlightItem(props: TabsHighlightItemProps) {
-  return <HighlightItem data-slot="tabs-highlight-item" {...props} />;
-}
-
-type TabsTabProps = React.ComponentProps<typeof TabsPrimitive.Tab>;
-
-function TabsTab(props: TabsTabProps) {
-  return <TabsPrimitive.Tab data-slot="tabs-tab" {...props} />;
-}
-
-type TabsPanelProps = React.ComponentProps<typeof TabsPrimitive.Panel> &
-  HTMLMotionProps<'div'>;
-
-function TabsPanel({
-  value,
-  keepMounted,
-  transition = { duration: 0.5, ease: 'easeInOut' },
-  ...props
-}: TabsPanelProps) {
-  return (
-    <AnimatePresence mode="wait">
-      <TabsPrimitive.Panel
-        render={
-          <motion.div
-            data-slot="tabs-panel"
-            layout
-            layoutDependency={value}
-            initial={{ opacity: 0, filter: 'blur(4px)' }}
-            animate={{ opacity: 1, filter: 'blur(0px)' }}
-            exit={{ opacity: 0, filter: 'blur(4px)' }}
-            transition={transition}
-            {...props}
-          />
-        }
-        keepMounted={keepMounted}
-        value={value}
-      />
-    </AnimatePresence>
-  );
-}
-
-type TabsPanelsAutoProps = Omit<AutoHeightProps, 'children'> & {
-  mode?: 'auto-height';
-  children: React.ReactNode;
-  transition?: Transition;
-};
-
-type TabsPanelsLayoutProps = Omit<HTMLMotionProps<'div'>, 'children'> & {
-  mode: 'layout';
-  children: React.ReactNode;
-  transition?: Transition;
-};
-
-type TabsPanelsProps = TabsPanelsAutoProps | TabsPanelsLayoutProps;
-
-const defaultTransition: Transition = {
-  type: 'spring',
-  stiffness: 200,
-  damping: 30,
-};
-
-function isAutoMode(props: TabsPanelsProps): props is TabsPanelsAutoProps {
-  return !props.mode || props.mode === 'auto-height';
-}
-
-function TabsPanels(props: TabsPanelsProps) {
-  const { value } = useTabs();
-
-  if (isAutoMode(props)) {
-    const { children, transition = defaultTransition, ...autoProps } = props;
-
-    return (
-      <AutoHeight
-        data-slot="tabs-panels"
-        deps={[value]}
-        transition={transition}
-        {...autoProps}
-      >
-        <React.Fragment key={value}>{children}</React.Fragment>
-      </AutoHeight>
-    );
-  }
-
-  const {
-    children,
-    style,
-    transition = defaultTransition,
-    ...layoutProps
-  } = props;
-
-  return (
-    <motion.div
-      data-slot="tabs-panels"
-      layout="size"
-      layoutDependency={value}
-      transition={{ layout: transition }}
-      style={{ overflow: 'hidden', ...style }}
-      {...layoutProps}
-    >
-      <React.Fragment key={value}>{children}</React.Fragment>
-    </motion.div>
-  );
-}
-
-export {
-  Tabs,
-  TabsHighlight,
-  TabsHighlightItem,
-  TabsList,
-  TabsTab,
-  TabsPanel,
-  TabsPanels,
-  type TabsProps,
-  type TabsHighlightProps,
-  type TabsHighlightItemProps,
-  type TabsListProps,
-  type TabsTabProps,
-  type TabsPanelProps,
-  type TabsPanelsProps,
-};