@suphark/ui 0.1.0

package/src/components/ui/date-picker.tsx

@@ -0,0 +1,308 @@
+"use client";
+
+import { Button } from "@suphark/ui/components/ui/button";
+import { Calendar } from "@suphark/ui/components/ui/calendar";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@suphark/ui/components/ui/input-group";
+import { Popover, PopoverContent, PopoverTrigger } from "@suphark/ui/components/ui/popover";
+import { formatRelativeThaiDate, formatThaiFullDate } from "@suphark/ui/lib/formatters";
+import { cn } from "@suphark/ui/lib/utils";
+import { addDays, addMonths, addWeeks, subDays, subMonths, subWeeks } from "date-fns";
+import { CalendarIcon, Check, Clock, X } from "lucide-react";
+import { useMemo, useState } from "react";
+
+/**
+ * Smart date parser supporting intuitive Thai & international date inputs:
+ * - "1/7" -> 1 July of current year
+ * - "1/7/25" -> 1 July 2025 CE
+ * - "1/7/68" -> 1 July 2025 CE (BE 2568)
+ * - "1/7/2568" -> 1 July 2025 CE (BE 2568)
+ */
+export function parseSmartDateInput(input: string): Date | null {
+  if (!input?.trim()) return null;
+  const clean = input.trim().replace(/\s+/g, "");
+
+  const parts = clean.split(/[/\-.]/);
+  if (parts.length < 2 || parts.length > 3) return null;
+
+  const day = parseInt(parts[0] ?? "", 10);
+  const month = parseInt(parts[1] ?? "", 10);
+  if (Number.isNaN(day) || Number.isNaN(month) || day < 1 || day > 31 || month < 1 || month > 12) {
+    return null;
+  }
+
+  const currentYear = new Date().getFullYear();
+  let year = currentYear;
+
+  if (parts.length === 3 && parts[2]) {
+    const rawYear = parseInt(parts[2], 10);
+    if (Number.isNaN(rawYear)) return null;
+
+    if (rawYear > 2400) {
+      // Full Buddhist Era year (e.g. 2568 -> 2025 CE)
+      year = rawYear - 543;
+    } else if (rawYear >= 50 && rawYear < 100) {
+      // Short BE year (e.g. 68 -> 2568 -> 2025 CE)
+      year = 2500 + rawYear - 543;
+    } else if (rawYear < 50) {
+      // Short AD year (e.g. 25 -> 2025 CE)
+      year = 2000 + rawYear;
+    } else {
+      year = rawYear;
+    }
+  }
+
+  const d = new Date(year, month - 1, day);
+  if (d.getFullYear() === year && d.getMonth() === month - 1 && d.getDate() === day) {
+    return d;
+  }
+
+  return null;
+}
+
+interface DatePickerProps {
+  id?: string;
+  value: Date | string | number | null | undefined;
+  onChange: (date: Date | null) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+  allowClear?: boolean;
+  showPresets?: boolean;
+  showSmartInput?: boolean;
+}
+
+export function DatePicker({
+  id,
+  value,
+  onChange,
+  placeholder = "เลือกวันที่อ้างอิงราคา...",
+  disabled = false,
+  className,
+  allowClear = true,
+  showPresets = true,
+  showSmartInput = true,
+}: DatePickerProps) {
+  const [open, setOpen] = useState(false);
+  const [smartText, setSmartText] = useState("");
+
+  const selectedDate = value ? new Date(value) : undefined;
+  const isValidDate = selectedDate && !Number.isNaN(selectedDate.getTime());
+
+  const parsedSmartDate = useMemo(() => parseSmartDateInput(smartText), [smartText]);
+
+  const handleSelectDate = (date: Date | undefined) => {
+    onChange(date || null);
+    setOpen(false);
+    setSmartText("");
+  };
+
+  const applyPreset = (date: Date | null) => {
+    onChange(date);
+    setOpen(false);
+    setSmartText("");
+  };
+
+  const handleSmartSubmit = () => {
+    if (parsedSmartDate) {
+      onChange(parsedSmartDate);
+      setOpen(false);
+      setSmartText("");
+    }
+  };
+
+  const today = new Date();
+  const displayMonth = parsedSmartDate || (isValidDate ? selectedDate : undefined);
+
+  return (
+    <Popover
+      open={open}
+      onOpenChange={(o) => {
+        setOpen(o);
+        if (!o) setSmartText("");
+      }}
+    >
+      <PopoverTrigger
+        render={
+          <Button
+            id={id}
+            variant="outline"
+            disabled={disabled}
+            className={cn(
+              "h-8 w-full justify-between bg-background pr-2 pl-3 text-left font-normal text-xs",
+              !isValidDate && "text-muted-foreground",
+              className,
+            )}
+          />
+        }
+      >
+        <div className="flex items-center gap-2 truncate">
+          <CalendarIcon className="h-3.5 w-3.5 shrink-0 text-slate-500" />
+          <span className="truncate">
+            {isValidDate ? (
+              <>
+                <span className="font-medium text-foreground">
+                  {formatThaiFullDate(selectedDate)}
+                </span>
+                <span className="ml-1 text-muted-foreground text-xs">
+                  ({formatRelativeThaiDate(selectedDate)})
+                </span>
+              </>
+            ) : (
+              <span>{placeholder}</span>
+            )}
+          </span>
+        </div>
+        {allowClear && isValidDate && !disabled && (
+          <span
+            role="button"
+            tabIndex={0}
+            className="ml-1 cursor-pointer rounded p-0.5 text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-600"
+            onClick={(e) => {
+              e.stopPropagation();
+              onChange(null);
+            }}
+          >
+            <X className="h-3.5 w-3.5" />
+          </span>
+        )}
+      </PopoverTrigger>
+      <PopoverContent
+        className="w-[320px] border bg-background p-3 shadow-xl sm:w-[340px]"
+        align="start"
+      >
+        {/* Smart Date Text Input */}
+        {showSmartInput && (
+          <div className="mb-3 flex flex-col gap-1.5 border-b pb-2.5">
+            <InputGroup className="h-8">
+              <InputGroupInput
+                value={smartText}
+                onChange={(e) => setSmartText(e.target.value)}
+                onKeyDown={(event) => {
+                  if (event.key === "Enter") {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    handleSmartSubmit();
+                  }
+                }}
+                placeholder="เช่น 1/7, 1/7/25, 1-7-2568..."
+                className="h-8 text-xs"
+              />
+              <InputGroupAddon align="inline-end">
+                <InputGroupButton
+                  type="submit"
+                  variant="default"
+                  size="xs"
+                  onClick={handleSmartSubmit}
+                  disabled={!parsedSmartDate}
+                >
+                  ตกลง
+                </InputGroupButton>
+              </InputGroupAddon>
+            </InputGroup>
+            {parsedSmartDate && (
+              <span className="flex items-center gap-1 font-medium text-emerald-600 text-xs">
+                <Check className="size-3" />
+                {formatThaiFullDate(parsedSmartDate)}
+              </span>
+            )}
+          </div>
+        )}
+
+        {/* Quick Presets Section (Flex Wrap & Clean Spacing) */}
+        {showPresets && (
+          <div className="mb-3 border-b pb-2.5">
+            <div className="mb-1.5 flex items-center gap-1 font-semibold text-muted-foreground text-xs">
+              <Clock className="h-3 w-3" />
+              Quick Preset
+            </div>
+            <div className="flex flex-wrap items-center gap-1.5">
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                className="h-6 px-2 font-normal text-xs hover:bg-slate-100"
+                onClick={() => applyPreset(today)}
+              >
+                Today
+              </Button>
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                className="h-6 px-2 font-normal text-xs hover:bg-slate-100"
+                onClick={() => applyPreset(subDays(today, 1))}
+              >
+                Yesterday
+              </Button>
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                className="h-6 px-2 font-normal text-xs hover:bg-slate-100"
+                onClick={() => applyPreset(addDays(today, 1))}
+              >
+                Tomorrow
+              </Button>
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                className="h-6 px-2 font-normal text-xs hover:bg-slate-100"
+                onClick={() => applyPreset(addWeeks(today, 1))}
+              >
+                +1 Week
+              </Button>
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                className="h-6 px-2 font-normal text-xs hover:bg-slate-100"
+                onClick={() => applyPreset(subWeeks(today, 1))}
+              >
+                -1 Week
+              </Button>
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                className="h-6 px-2 font-normal text-xs hover:bg-slate-100"
+                onClick={() => applyPreset(addMonths(today, 1))}
+              >
+                +1 Month
+              </Button>
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                className="h-6 px-2 font-normal text-xs hover:bg-slate-100"
+                onClick={() => applyPreset(subMonths(today, 1))}
+              >
+                -1 Month
+              </Button>
+            </div>
+          </div>
+        )}
+
+        {/* Visual DayPicker Calendar */}
+        <div className="flex w-full justify-center">
+          <Calendar
+            mode="single"
+            selected={isValidDate ? selectedDate : undefined}
+            onSelect={handleSelectDate}
+            disabled={disabled}
+            captionLayout="dropdown"
+            startMonth={new Date(1990, 0)}
+            endMonth={new Date(2040, 11)}
+            defaultMonth={displayMonth}
+            className="p-0"
+          />
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/components/ui/dialog.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+import { Button } from "@suphark/ui/components/ui/button";
+import { cn } from "@suphark/ui/lib/utils";
+import { XIcon } from "lucide-react";
+import type * as React from "react";
+
+function Dialog({ ...props }: DialogPrimitive.Root.Props) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+
+function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+function DialogOverlay({ className, ...props }: DialogPrimitive.Backdrop.Props) {
+  return (
+    <DialogPrimitive.Backdrop
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-open:fade-in-0 data-closed:fade-out-0 fixed inset-0 isolate z-50 bg-black/10 duration-100 data-closed:animate-out data-open:animate-in supports-backdrop-filter:backdrop-blur-xs",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: DialogPrimitive.Popup.Props & {
+  showCloseButton?: boolean;
+}) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Popup
+        data-slot="dialog-content"
+        className={cn(
+          "data-open:fade-in-0 data-open:zoom-in-95 data-closed:fade-out-0 data-closed:zoom-out-95 fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-popover-foreground text-sm outline-none ring-1 ring-foreground/10 duration-100 data-closed:animate-out data-open:animate-in sm:max-w-sm",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            render={<Button variant="ghost" className="absolute top-2 right-2" size="icon-sm" />}
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Popup>
+    </DialogPortal>
+  );
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div data-slot="dialog-header" className={cn("flex flex-col gap-2", className)} {...props} />
+  );
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean;
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close render={<Button variant="outline" />}>Close</DialogPrimitive.Close>
+      )}
+    </div>
+  );
+}
+
+function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("font-medium text-base leading-none", className)}
+      {...props}
+    />
+  );
+}
+
+function DialogDescription({ className, ...props }: DialogPrimitive.Description.Props) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn(
+        "text-muted-foreground text-sm *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};

package/src/components/ui/drawer.tsx

@@ -0,0 +1,208 @@
+"use client";
+
+import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer";
+import { cn } from "@suphark/ui/lib/utils";
+import * as React from "react";
+
+type DrawerContextProps = {
+  hasSnapPoints: boolean;
+  modal: DrawerPrimitive.Root.Props["modal"];
+  showSwipeHandle: boolean;
+  swipeDirection: NonNullable<DrawerPrimitive.Root.Props["swipeDirection"]>;
+};
+
+const DrawerContext = React.createContext<DrawerContextProps | null>(null);
+
+function useDrawer() {
+  const context = React.useContext(DrawerContext);
+
+  if (!context) {
+    throw new Error("useDrawer must be used within a Drawer.");
+  }
+
+  return context;
+}
+
+function Drawer({
+  modal = true,
+  showSwipeHandle = false,
+  snapPoints,
+  swipeDirection = "down",
+  ...props
+}: DrawerPrimitive.Root.Props & {
+  showSwipeHandle?: boolean;
+}) {
+  const hasSnapPoints = snapPoints != null && snapPoints.length > 0;
+  const contextValue = React.useMemo(
+    () => ({ hasSnapPoints, modal, showSwipeHandle, swipeDirection }),
+    [hasSnapPoints, modal, showSwipeHandle, swipeDirection],
+  );
+
+  return (
+    <DrawerContext.Provider value={contextValue}>
+      <DrawerPrimitive.Root
+        data-slot="drawer"
+        modal={modal}
+        snapPoints={snapPoints}
+        swipeDirection={swipeDirection}
+        {...props}
+      />
+    </DrawerContext.Provider>
+  );
+}
+
+function DrawerTrigger({ ...props }: DrawerPrimitive.Trigger.Props) {
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
+}
+
+function DrawerPortal({ ...props }: DrawerPrimitive.Portal.Props) {
+  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
+}
+
+function DrawerClose({ ...props }: DrawerPrimitive.Close.Props) {
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
+}
+
+function DrawerOverlay({ className, ...props }: DrawerPrimitive.Backdrop.Props) {
+  return (
+    <DrawerPrimitive.Backdrop
+      data-slot="drawer-overlay"
+      className={cn(
+        "fixed inset-0 z-50 min-h-dvh select-none bg-black/10 opacity-[max(var(--drawer-overlay-min-opacity,0),calc(1-var(--drawer-swipe-progress)))] transition-opacity duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] data-ending-style:pointer-events-none data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-swiping:duration-0 supports-[-webkit-touch-callout:none]:absolute supports-backdrop-filter:backdrop-blur-xs data-snap-points:[--drawer-overlay-min-opacity:0.5]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DrawerSwipeHandle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-swipe-handle"
+      aria-hidden="true"
+      className={cn(
+        "relative z-10 flex shrink-0 cursor-grab transition-opacity duration-200 after:block after:shrink-0 after:rounded-full after:bg-muted active:cursor-grabbing group-data-[swipe-direction=left]/drawer-popup:order-last group-data-[swipe-direction=up]/drawer-popup:order-last group-data-[swipe-axis=x]/drawer-popup:h-full group-data-[swipe-axis=y]/drawer-popup:h-3 group-data-[swipe-axis=x]/drawer-popup:w-3 group-data-[swipe-axis=y]/drawer-popup:w-full group-data-[swipe-direction=up]/drawer-popup:items-start group-data-[swipe-direction=down]/drawer-popup:items-end group-data-[swipe-axis=x]/drawer-popup:items-center group-data-[swipe-direction=left]/drawer-popup:justify-start group-data-[swipe-direction=right]/drawer-popup:justify-end group-data-[swipe-axis=y]/drawer-popup:justify-center group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-[swipe-axis=x]/drawer-popup:after:h-24 group-data-[swipe-axis=y]/drawer-popup:after:h-1 group-data-[swipe-axis=x]/drawer-popup:after:w-1 group-data-[swipe-axis=y]/drawer-popup:after:w-24",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DrawerContent({ className, children, ...props }: DrawerPrimitive.Popup.Props) {
+  const { hasSnapPoints, modal, showSwipeHandle, swipeDirection } = useDrawer();
+  const swipeAxis = swipeDirection === "down" || swipeDirection === "up" ? "y" : "x";
+
+  return (
+    <DrawerPortal data-slot="drawer-portal">
+      {modal === true && <DrawerOverlay data-snap-points={hasSnapPoints ? "" : undefined} />}
+      <DrawerPrimitive.Viewport
+        data-slot="drawer-viewport"
+        data-modal={modal}
+        className="pointer-events-none fixed inset-0 z-50 select-none data-[modal=true]:pointer-events-auto"
+      >
+        <DrawerPrimitive.Popup
+          data-slot="drawer-popup"
+          data-swipe-axis={swipeAxis}
+          data-snap-points={hasSnapPoints ? "" : undefined}
+          className={cn(
+            // Base.
+            "group/drawer-popup transform-[translate3d(var(--translate-x,0px),var(--translate-y,0px),0)_scale(var(--stack-scale))] pointer-events-auto fixed z-50 m-(--drawer-inset,0px) flex h-(--drawer-content-height) max-h-(--drawer-content-max-height,none) min-h-0 w-(--drawer-content-width,auto) select-none flex-col bg-popover text-popover-foreground text-sm outline-none transition-[transform,height,opacity,filter] duration-450 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform [interpolate-size:allow-keywords] data-[swipe-direction=down]:rounded-t-xl data-[swipe-direction=left]:rounded-r-xl data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=right]:rounded-l-xl data-[swipe-direction=down]:border-t data-[swipe-direction=left]:border-r data-[swipe-direction=up]:border-b data-[swipe-direction=right]:border-l",
+            // Nested.
+            "data-nested-drawer-open:overflow-hidden data-nested-drawer-open:brightness-95",
+            // Bleed.
+            "after:pointer-events-none after:absolute after:bg-(--drawer-bleed-background,var(--color-popover)) data-[swipe-axis=y]:after:inset-x-0 data-[swipe-axis=x]:after:inset-y-0 data-[swipe-direction=down]:after:top-full data-[swipe-direction=left]:after:right-full data-[swipe-direction=up]:after:bottom-full data-[swipe-direction=right]:after:left-full data-[swipe-axis=y]:after:h-(--bleed) data-[swipe-axis=x]:after:w-(--bleed)",
+            // Sizing.
+            "[--drawer-content-height:var(--drawer-height,auto)] data-[swipe-axis=y]:data-snap-points:[--drawer-content-height:100dvh] data-[swipe-axis=x]:[--drawer-content-width:75%] data-[swipe-axis=y]:[--drawer-content-max-height:calc(100dvh-6rem)] data-[swipe-axis=x]:sm:[--drawer-content-width:24rem]",
+            // Stack.
+            "[--bleed:3rem] [--peek:1rem] [--stack-height:var(--drawer-frontmost-height,var(--drawer-height,0px))] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-scale-base:max(0,calc(1-(var(--nested-drawers)*var(--stack-step))))] [--stack-scale:clamp(0,calc(var(--stack-scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--stack-shrink:calc(1-var(--stack-scale))] [--stack-step:0.05]",
+            // Transitions.
+            "data-ending-style:transform-(--closed-transform) data-starting-style:transform-(--closed-transform) data-ending-style:data-nested-drawer-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-ending-style:data-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-ending-style:opacity-[0.9999] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-nested-drawer-swiping:duration-0 data-swiping:duration-0",
+            // Axis: y.
+            "data-[swipe-axis=y]:data-nested-drawer-open:h-(--stack-height) data-[swipe-axis=y]:inset-x-0",
+            // Axis: x.
+            "data-[swipe-axis=x]:inset-y-0 data-[swipe-axis=x]:flex-row",
+            // Direction: down.
+            "data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:origin-bottom data-[swipe-direction=down]:[--closed-transform:translate3d(0,calc(100%+var(--drawer-inset,0px)+2px),0)] data-[swipe-direction=down]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--stack-shrink)*var(--stack-height)))]",
+            // Direction: up.
+            "data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:origin-top data-[swipe-direction=up]:[--closed-transform:translate3d(0,calc(-100%-var(--drawer-inset,0px)-2px),0)] data-[swipe-direction=up]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)+var(--stack-peek-offset)+(var(--stack-shrink)*var(--stack-height)))]",
+            // Direction: left.
+            "data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:origin-left data-[swipe-direction=left]:[--closed-transform:translate3d(calc(-100%-var(--drawer-inset,0px)-2px),0,0)] data-[swipe-direction=left]:[--translate-x:calc(var(--drawer-swipe-movement-x)+var(--stack-peek-offset)+(var(--stack-shrink)*100%))]",
+            // Direction: right.
+            "data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:origin-right data-[swipe-direction=right]:[--closed-transform:translate3d(calc(100%+var(--drawer-inset,0px)+2px),0,0)] data-[swipe-direction=right]:[--translate-x:calc(var(--drawer-swipe-movement-x)-var(--stack-peek-offset)-(var(--stack-shrink)*100%))]",
+            className,
+          )}
+          {...props}
+        >
+          {showSwipeHandle && <DrawerSwipeHandle />}
+          <DrawerPrimitive.Content
+            data-slot="drawer-content"
+            className={cn(
+              "flex min-h-0 flex-1 select-text flex-col overflow-hidden overscroll-contain rounded-[inherit] transition-opacity duration-300 ease-[cubic-bezier(0.45,1.005,0,1.005)] group-data-swiping/drawer-popup:select-none group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100",
+            )}
+          >
+            {children}
+          </DrawerPrimitive.Content>
+        </DrawerPrimitive.Popup>
+      </DrawerPrimitive.Viewport>
+    </DrawerPortal>
+  );
+}
+
+function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-header"
+      className={cn(
+        "flex shrink-0 flex-col gap-0.5 p-4 pb-0 group-data-[swipe-axis=y]/drawer-popup:text-center md:gap-0.5 md:text-left",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-footer"
+      className={cn("mt-auto flex shrink-0 flex-col gap-2 p-4 pt-0", className)}
+      {...props}
+    />
+  );
+}
+
+function DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props) {
+  return (
+    <DrawerPrimitive.Title
+      data-slot="drawer-title"
+      className={cn("font-medium text-base text-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+function DrawerDescription({ className, ...props }: DrawerPrimitive.Description.Props) {
+  return (
+    <DrawerPrimitive.Description
+      data-slot="drawer-description"
+      className={cn("text-balance text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+  DrawerPortal,
+  DrawerSwipeHandle,
+  DrawerTitle,
+  DrawerTrigger,
+};