@m3000/market 0.0.1

package/src/components/primitives/Drawer.tsx

@@ -0,0 +1,125 @@
+"use client";
+
+import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer";
+import type * as React from "react";
+import { cn } from "@/lib/cn";
+
+type OpenChangeDetails = Parameters<
+  NonNullable<React.ComponentProps<typeof DrawerPrimitive.Root>["onOpenChange"]>
+>[1];
+
+export interface DrawerProps {
+  trigger: React.ReactElement;
+  children: React.ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean, eventDetails: OpenChangeDetails) => void;
+  className?: string;
+  triggerClassName?: string;
+  panelClassName?: string;
+  backdropClassName?: string;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  side?: "left" | "right";
+  modal?: React.ComponentProps<typeof DrawerPrimitive.Root>["modal"];
+  initialFocus?: React.ComponentProps<
+    typeof DrawerPrimitive.Popup
+  >["initialFocus"];
+  finalFocus?: React.ComponentProps<typeof DrawerPrimitive.Popup>["finalFocus"];
+  popupAriaLabel?: string;
+}
+
+export function Drawer({
+  trigger,
+  children,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  className,
+  triggerClassName,
+  panelClassName,
+  backdropClassName,
+  title,
+  description,
+  side = "right",
+  modal = true,
+  initialFocus,
+  finalFocus,
+  popupAriaLabel,
+}: DrawerProps): React.ReactElement {
+  const sideClassName =
+    side === "left" ? "inset-y-0 left-0 h-full" : "inset-y-0 right-0 h-full";
+  const swipeDirection = side === "left" ? "left" : "right";
+
+  return (
+    <DrawerPrimitive.Root
+      open={open}
+      defaultOpen={defaultOpen}
+      onOpenChange={onOpenChange}
+      modal={modal}
+      swipeDirection={swipeDirection}
+    >
+      <div className={className}>
+        <DrawerPrimitive.Trigger
+          className={cn("outline-none", triggerClassName)}
+          render={trigger}
+        />
+      </div>
+
+      <DrawerPrimitive.Portal>
+        <DrawerPrimitive.Backdrop
+          className={(state) =>
+            cn(
+              "fixed inset-0 z-60 bg-background/70 backdrop-blur-sm transition-opacity duration-150 ease-out",
+              (state.transitionStatus === "starting" ||
+                state.transitionStatus === "ending") &&
+                "opacity-0",
+              backdropClassName,
+            )
+          }
+        />
+
+        <DrawerPrimitive.Viewport className="fixed inset-0 z-70 overflow-hidden">
+          <DrawerPrimitive.Popup
+            aria-label={popupAriaLabel}
+            initialFocus={initialFocus}
+            finalFocus={finalFocus}
+            className={cn(
+              "fixed z-70 flex h-full w-auto outline-none transition-transform duration-200 ease-out",
+              sideClassName,
+            )}
+            style={(state) => ({
+              transform:
+                state.transitionStatus === "starting" ||
+                state.transitionStatus === "ending"
+                  ? side === "left"
+                    ? "translateX(-100%)"
+                    : "translateX(100%)"
+                  : "translateX(var(--drawer-swipe-movement-x, 0px))",
+            })}
+          >
+            <DrawerPrimitive.Content
+              className={cn(
+                "flex h-full w-[max(50vw,24rem)] max-w-none flex-col border-border bg-background shadow-2xl sm:w-[max(50vw,28rem)]",
+                side === "left" ? "border-r" : "border-l",
+                panelClassName,
+              )}
+            >
+              {title ? (
+                <DrawerPrimitive.Title className="sr-only">
+                  {title}
+                </DrawerPrimitive.Title>
+              ) : null}
+              {description ? (
+                <DrawerPrimitive.Description className="sr-only">
+                  {description}
+                </DrawerPrimitive.Description>
+              ) : null}
+              {children}
+            </DrawerPrimitive.Content>
+          </DrawerPrimitive.Popup>
+        </DrawerPrimitive.Viewport>
+      </DrawerPrimitive.Portal>
+    </DrawerPrimitive.Root>
+  );
+}

package/src/components/primitives/Feedback.tsx

@@ -0,0 +1,185 @@
+import { AnimatePresence, motion } from "motion/react";
+import * as React from "react";
+import { createContext, useContext } from "react";
+import { cn } from "@/lib/cn";
+
+type FeedbackPosition = "bottom" | "top" | "left" | "right";
+
+interface FeedbackContextValue {
+  show: boolean;
+  position: FeedbackPosition;
+  transition: {
+    stiffness: number;
+    damping: number;
+  };
+}
+
+const FeedbackContext = createContext<FeedbackContextValue | null>(null);
+
+function useFeedback() {
+  const context = useContext(FeedbackContext);
+  if (!context) {
+    throw new Error("Feedback.Content must be used within Feedback.Root");
+  }
+  return context;
+}
+
+const positionStyles: Record<FeedbackPosition, string> = {
+  bottom: "top-full right-0 left-0",
+  top: "bottom-full right-0 left-0",
+  left: "right-full top-0 bottom-0",
+  right: "left-full top-0 bottom-0",
+};
+
+const initialAnimations: Record<FeedbackPosition, { x?: string; y?: string }> =
+  {
+    bottom: { y: "-100%" },
+    top: { y: "100%" },
+    left: { x: "100%" },
+    right: { x: "-100%" },
+  };
+
+interface FeedbackRootProps {
+  children: React.ReactNode;
+  show?: boolean;
+  position?: FeedbackPosition;
+  className?: string;
+  transition?: {
+    stiffness?: number;
+    damping?: number;
+  };
+}
+
+const FeedbackRoot: React.FC<FeedbackRootProps> = ({
+  children,
+  show = false,
+  position = "bottom",
+  className,
+  transition = { stiffness: 300, damping: 20 },
+}): React.ReactElement => {
+  const contextValue = React.useMemo(
+    () => ({
+      show,
+      position,
+      transition: {
+        stiffness: transition.stiffness ?? 300,
+        damping: transition.damping ?? 20,
+      },
+    }),
+    [show, position, transition],
+  );
+
+  return (
+    <FeedbackContext.Provider value={contextValue}>
+      <span className={cn("relative inline-block", className)}>
+        {React.Children.map(children, (child) => {
+          if (React.isValidElement(child) && child.type === FeedbackContent) {
+            return child;
+          }
+          return <span className="relative z-10">{child}</span>;
+        })}
+      </span>
+    </FeedbackContext.Provider>
+  );
+};
+
+type ContentTransitionMode = "crossfade" | "slide-up" | "slide-down";
+
+interface FeedbackContentProps {
+  children: React.ReactNode;
+  className?: string;
+  contentKey?: string | number;
+  mode?: ContentTransitionMode;
+}
+
+const contentAnimations = {
+  crossfade: {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    exit: { opacity: 0 },
+  },
+  "slide-up": {
+    initial: { opacity: 0, y: 8 },
+    animate: { opacity: 1, y: 0 },
+    exit: { opacity: 0, y: -8 },
+  },
+  "slide-down": {
+    initial: { opacity: 0, y: -8 },
+    animate: { opacity: 1, y: 0 },
+    exit: { opacity: 0, y: 8 },
+  },
+} as const;
+
+function getContentKey(children: React.ReactNode): string {
+  if (typeof children === "string" || typeof children === "number") {
+    return String(children);
+  }
+  if (React.isValidElement(children)) {
+    return children.key ?? JSON.stringify(children.props);
+  }
+  return JSON.stringify(children);
+}
+
+const FeedbackContent: React.FC<FeedbackContentProps> = ({
+  children,
+  className,
+  contentKey,
+  mode = "slide-up",
+}): React.ReactElement => {
+  const { show, position, transition } = useFeedback();
+
+  const key = contentKey ?? getContentKey(children);
+  const contentAnimation = contentAnimations[mode];
+
+  return (
+    <AnimatePresence mode="wait">
+      {show && (
+        <motion.div
+          key="feedback-container"
+          initial={{
+            ...initialAnimations[position],
+            opacity: 0,
+            rotateZ: 5,
+          }}
+          animate={{ x: "0%", y: "0%", opacity: 1, rotateZ: 0 }}
+          exit={{ ...initialAnimations[position], opacity: 0, rotateZ: 0 }}
+          className={cn(
+            "absolute z-0 flex items-center justify-center",
+            positionStyles[position],
+            className,
+          )}
+          transition={{
+            type: "spring",
+            stiffness: transition.stiffness,
+            damping: transition.damping,
+          }}
+        >
+          <AnimatePresence mode="wait">
+            <motion.span
+              key={key}
+              initial={contentAnimation.initial}
+              animate={contentAnimation.animate}
+              exit={contentAnimation.exit}
+              transition={{
+                duration: 0.2,
+                ease: "easeInOut",
+              }}
+            >
+              {children}
+            </motion.span>
+          </AnimatePresence>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+};
+
+interface FeedbackComponent {
+  Root: React.FC<FeedbackRootProps>;
+  Content: React.FC<FeedbackContentProps>;
+}
+
+export const Feedback: FeedbackComponent = {
+  Root: FeedbackRoot,
+  Content: FeedbackContent,
+};

package/src/components/primitives/MorphDialog.tsx

@@ -0,0 +1,160 @@
+"use client";
+
+import { Dialog } from "@base-ui/react/dialog";
+import {
+  AnimatePresence,
+  LayoutGroup,
+  motion,
+  useReducedMotion,
+} from "motion/react";
+import type * as React from "react";
+import { useCallback, useId, useMemo, useState } from "react";
+import { cn, springs, transitions } from "@/lib";
+
+type OpenChangeDetails = Parameters<
+  NonNullable<React.ComponentProps<typeof Dialog.Root>["onOpenChange"]>
+>[1];
+
+export interface MorphDialogProps {
+  trigger: React.ReactNode;
+  content: React.ReactNode;
+  contentClosesDialog?: boolean;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean, eventDetails: OpenChangeDetails) => void;
+  className?: string;
+  triggerClassName?: string;
+  popupClassName?: string;
+  backdropClassName?: string;
+  modal?: React.ComponentProps<typeof Dialog.Root>["modal"];
+  initialFocus?: React.ComponentProps<typeof Dialog.Popup>["initialFocus"];
+  finalFocus?: React.ComponentProps<typeof Dialog.Popup>["finalFocus"];
+  popupAriaLabel?: string;
+}
+
+export function MorphDialog({
+  trigger,
+  content,
+  contentClosesDialog = false,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  className,
+  triggerClassName,
+  popupClassName,
+  backdropClassName,
+  modal = true,
+  initialFocus,
+  finalFocus,
+  popupAriaLabel,
+}: MorphDialogProps): React.ReactElement {
+  const generatedId = useId();
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const prefersReducedMotion = useReducedMotion();
+
+  const isControlled = open !== undefined;
+  const isOpen = isControlled ? open : uncontrolledOpen;
+  const layoutId = useMemo(
+    () => `morph-dialog-${generatedId.replace(/:/g, "")}`,
+    [generatedId],
+  );
+
+  const handleOpenChange = useCallback(
+    (nextOpen: boolean, eventDetails: OpenChangeDetails) => {
+      if (!isControlled) {
+        setUncontrolledOpen(nextOpen);
+      }
+      onOpenChange?.(nextOpen, eventDetails);
+    },
+    [isControlled, onOpenChange],
+  );
+
+  const handleBackdropClick = useCallback(() => {
+    handleOpenChange(false, {} as OpenChangeDetails);
+  }, [handleOpenChange]);
+
+  const handleContentClick = useCallback(
+    (event: React.MouseEvent<HTMLDivElement>) => {
+      event.stopPropagation();
+    },
+    [],
+  );
+
+  return (
+    <LayoutGroup id={layoutId}>
+      <Dialog.Root open={isOpen} onOpenChange={handleOpenChange} modal={modal}>
+        <div className={className}>
+          <Dialog.Trigger
+            className={cn(
+              "block cursor-pointer appearance-none border-0 bg-transparent p-0 text-left outline-none disabled:cursor-default",
+              triggerClassName,
+            )}
+          >
+            <motion.div
+              layout={!prefersReducedMotion}
+              layoutId={prefersReducedMotion ? undefined : layoutId}
+              transition={springs.quick}
+              className="h-full w-full"
+            >
+              {trigger}
+            </motion.div>
+          </Dialog.Trigger>
+        </div>
+
+        <Dialog.Portal>
+          <Dialog.Backdrop
+            className={cn(
+              "fixed inset-0 z-60 cursor-pointer backdrop-blur-sm transition-opacity duration-150 ease-out",
+              isOpen ? "opacity-100" : "opacity-0",
+              backdropClassName,
+            )}
+            onClick={handleBackdropClick}
+          />
+
+          <Dialog.Popup
+            aria-label={popupAriaLabel}
+            initialFocus={initialFocus}
+            finalFocus={finalFocus}
+            className="fixed inset-0 z-70 flex items-center justify-center p-5 outline-none sm:p-8"
+            onClick={handleBackdropClick}
+          >
+            <AnimatePresence initial={false}>
+              {isOpen ? (
+                <motion.div
+                  key="morph-dialog-content"
+                  layout={!prefersReducedMotion}
+                  layoutId={prefersReducedMotion ? undefined : layoutId}
+                  initial={
+                    prefersReducedMotion ? { opacity: 0, scale: 0.98 } : false
+                  }
+                  animate={{ opacity: 1, scale: 1 }}
+                  exit={
+                    prefersReducedMotion
+                      ? { opacity: 0, scale: 0.98 }
+                      : undefined
+                  }
+                  transition={
+                    prefersReducedMotion ? transitions.fade : springs.quick
+                  }
+                  className={cn(
+                    "pointer-events-auto max-h-[90vh] max-w-[90vw]",
+                    popupClassName,
+                  )}
+                  onClick={handleContentClick}
+                >
+                  {contentClosesDialog ? (
+                    <Dialog.Close className="block cursor-pointer appearance-none border-0 bg-transparent p-0 text-left outline-none">
+                      {content}
+                    </Dialog.Close>
+                  ) : (
+                    content
+                  )}
+                </motion.div>
+              ) : null}
+            </AnimatePresence>
+          </Dialog.Popup>
+        </Dialog.Portal>
+      </Dialog.Root>
+    </LayoutGroup>
+  );
+}