@sarunyu/system-one 4.1.1 → 4.2.0

package/dist/index.js

@@ -4,7 +4,7 @@ import * as React from "react";
 import React__default, { forwardRef, useState, useRef, useEffect, useCallback, useMemo, useLayoutEffect, useContext, createContext } from "react";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
-import { BookmarkSimpleIcon, BroadcastIcon, CalendarBlank, MapPin, Users, XCircle, CheckCircle, Lock, Check, Plus, Minus, CaretLeft, CaretRight, CaretDoubleLeft, CaretDoubleRight, CaretUp, CaretDown, X, MagnifyingGlass, Circle, ArrowUp, ArrowDown, ArrowsDownUp, Clock } from "@phosphor-icons/react";
+import { BookmarkSimpleIcon, BroadcastIcon, CalendarBlank, MapPin, Users, XCircle, CheckCircle, Lock, Check, Plus, Circle, Minus, CaretLeft, CaretRight, CaretDoubleLeft, CaretDoubleRight, CaretUp, CaretDown, X, MagnifyingGlass, ArrowUp, ArrowDown, ArrowsDownUp, Clock } from "@phosphor-icons/react";
 import { DayPicker, useNavigation } from "react-day-picker";
 import * as Popover from "@radix-ui/react-popover";
 import { Drawer as Drawer$1 } from "vaul";
@@ -1173,6 +1173,11 @@ function DrawerPortal({
 }) {
   return /* @__PURE__ */ jsx(Drawer$1.Portal, { "data-slot": "drawer-portal", ...props });
 }
+function DrawerClose({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Drawer$1.Close, { "data-slot": "drawer-close", ...props });
+}
 function DrawerOverlay({
   className,
   ...props
@@ -1230,6 +1235,126 @@ function DrawerTitle({
     }
   );
 }
+function BottomSheet({
+  open,
+  onOpenChange,
+  trigger,
+  headerType = "text",
+  showHeader = true,
+  rightSide = "icon",
+  title = "Title",
+  actionLabel = "Action",
+  imageSrc,
+  leftIcon,
+  rightIcon,
+  onActionClick,
+  showHandle = true,
+  children,
+  className,
+  contentClassName
+}) {
+  return /* @__PURE__ */ jsxs(Drawer, { direction: "bottom", open, onOpenChange, children: [
+    trigger ? /* @__PURE__ */ jsx(DrawerTrigger, { asChild: true, children: trigger }) : null,
+    /* @__PURE__ */ jsxs(
+      DrawerContent,
+      {
+        className: cn(
+          "[&>div:first-child]:hidden rounded-t-[24px] border-t-0 px-4 pb-6 pt-2",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(DrawerTitle, { className: "sr-only", children: title }),
+          showHandle ? /* @__PURE__ */ jsx("div", { className: "mb-2 flex justify-center", children: /* @__PURE__ */ jsx("div", { className: "h-1 w-10 rounded-full bg-muted" }) }) : null,
+          showHeader ? /* @__PURE__ */ jsx(
+            Header,
+            {
+              headerType,
+              rightSide,
+              title,
+              actionLabel,
+              imageSrc,
+              leftIcon,
+              rightIcon,
+              onActionClick
+            }
+          ) : null,
+          children ? /* @__PURE__ */ jsx("div", { className: cn("pt-2", contentClassName), children }) : null
+        ]
+      }
+    )
+  ] });
+}
+function Header({
+  headerType,
+  rightSide,
+  title,
+  actionLabel,
+  imageSrc,
+  leftIcon,
+  rightIcon,
+  onActionClick
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-3", rightSide === "action" ? "pr-2" : void 0), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+      /* @__PURE__ */ jsx(Leading, { headerType, imageSrc, leftIcon }),
+      /* @__PURE__ */ jsx("p", { className: "truncate text-base leading-6 font-bold text-foreground", children: title })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Trailing,
+      {
+        rightSide,
+        actionLabel,
+        rightIcon,
+        onActionClick
+      }
+    )
+  ] });
+}
+function Leading({
+  headerType,
+  imageSrc,
+  leftIcon
+}) {
+  if (headerType === "image") {
+    return imageSrc ? /* @__PURE__ */ jsx("img", { alt: "", className: "size-8 shrink-0 rounded-md object-cover", src: imageSrc }) : /* @__PURE__ */ jsx("div", { className: "size-8 shrink-0 rounded-md bg-muted" });
+  }
+  if (headerType === "icon") {
+    return /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-foreground", children: leftIcon ?? /* @__PURE__ */ jsx(Circle, { size: 22 }) });
+  }
+  return null;
+}
+function Trailing({
+  rightSide,
+  actionLabel,
+  rightIcon,
+  onActionClick
+}) {
+  if (rightSide === "action") {
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        className: "px-0 py-0 text-base leading-6 font-bold",
+        onClick: onActionClick,
+        size: "md",
+        variant: "plain",
+        children: actionLabel
+      }
+    );
+  }
+  if (rightSide === "icon") {
+    return /* @__PURE__ */ jsx(DrawerClose, { asChild: true, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        "aria-label": "Close bottom sheet",
+        className: "text-foreground",
+        size: "icon-xs",
+        variant: "plain-black",
+        children: rightIcon ?? /* @__PURE__ */ jsx(Circle, { size: 22 })
+      }
+    ) });
+  }
+  return null;
+}
 const THAI_MONTHS_SHORT = [
   "ม.ค.",
   "ก.พ.",
@@ -2160,16 +2285,22 @@ const DateInput = forwardRef(
         ref,
         className: cn("flex flex-col gap-[4px] w-full", className),
         children: [
-          isMobile ? /* @__PURE__ */ jsxs(Drawer, { open, onOpenChange: handleOpenChange, children: [
-            /* @__PURE__ */ jsx(DrawerTrigger, { asChild: true, children: triggerButton }),
-            /* @__PURE__ */ jsxs(DrawerContent, { children: [
-              /* @__PURE__ */ jsx(DrawerTitle, { className: "sr-only", children: "เลือกวันที่" }),
-              /* @__PURE__ */ jsxs("div", { className: "overflow-auto px-4 pt-2 pb-8 w-full", children: [
+          isMobile ? /* @__PURE__ */ jsx(
+            BottomSheet,
+            {
+              open,
+              onOpenChange: handleOpenChange,
+              trigger: triggerButton,
+              title: "เลือกวันที่",
+              showHeader: false,
+              rightSide: "none",
+              contentClassName: "pt-0",
+              children: /* @__PURE__ */ jsxs("div", { className: "overflow-auto px-4 pt-2 pb-8 w-full", children: [
                 /* @__PURE__ */ jsx(DrawerRangeCtx.Provider, { value: mode === "range", children: calendarContent }),
                 actionButtons
               ] })
-            ] })
-          ] }) : /* @__PURE__ */ jsxs(
+            }
+          ) : /* @__PURE__ */ jsxs(
             Popover.Root,
             {
               open,
@@ -3275,6 +3406,139 @@ const Input = forwardRef(function Input2({
   ] });
 });
 Input.displayName = "Input";
+const ALERT_CONFIG = {
+  warning: {
+    titleColor: "var(--accent-orange)",
+    background: "https://www.figma.com/api/mcp/asset/f4ca68ad-5732-4124-9ff4-cfb69330cc02",
+    layers: [
+      { inset: "12.5%", src: "https://www.figma.com/api/mcp/asset/7052a092-a432-4e8c-b559-6b51d28d878f" },
+      { inset: "22.5%", src: "https://www.figma.com/api/mcp/asset/a291a1b2-06c8-455c-8e21-29755aa05c57" },
+      { inset: "28.57% 30.71% 32.86% 30.71%", src: "https://www.figma.com/api/mcp/asset/a22c7520-55fe-4003-ba78-65dab40b9e23" }
+    ]
+  },
+  success: {
+    titleColor: "var(--success)",
+    background: "https://www.figma.com/api/mcp/asset/2a865e6f-8a92-4496-88b5-71ac99e2c385",
+    layers: [
+      { inset: "12.77%", src: "https://www.figma.com/api/mcp/asset/5878ce35-4f9a-4203-97a8-70a2f17b182c" },
+      { inset: "22.55%", src: "https://www.figma.com/api/mcp/asset/cea74180-b261-4db7-8712-6d32c4ccdeaf" }
+    ]
+  },
+  danger: {
+    titleColor: "var(--destructive)",
+    background: "https://www.figma.com/api/mcp/asset/c7a65595-684e-4a04-b7fd-d443951f680a",
+    layers: [
+      { inset: "12.77%", src: "https://www.figma.com/api/mcp/asset/10090345-ae32-4fc4-aff6-cba04ea93700" },
+      { inset: "22.55%", src: "https://www.figma.com/api/mcp/asset/3aa1156e-e48b-411f-ab98-93e1da98ecc1" }
+    ]
+  }
+};
+function Modal({
+  variant = "dialog",
+  actionLayout = "none",
+  responsive = "mobile",
+  alertStatus = "warning",
+  showClose = true,
+  title = "Text label",
+  description = "Lorem ipsum dolor sit amet consectetur. Mi id nunc ac tempus turpis. Ipsum consectetur dictum volutpat viverra arcu rhoncus sit arcu.",
+  primaryLabel = "Accept",
+  secondaryLabel = "Cancel",
+  children,
+  className,
+  onClose,
+  onPrimaryClick,
+  onSecondaryClick
+}) {
+  const isContent = variant === "content";
+  const isAlert = variant === "alert";
+  const isDesktop = responsive === "desktop";
+  const alert = ALERT_CONFIG[alertStatus];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "max-w-full overflow-hidden border border-border bg-background",
+        isAlert ? "w-[343px] rounded-2xl" : "rounded-xl",
+        isContent ? "w-[343px]" : isAlert ? void 0 : "w-[375px]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: cn("flex items-center px-4 pt-4", isAlert ? "justify-end" : "justify-between gap-4"), children: [
+          !isAlert ? /* @__PURE__ */ jsx("p", { className: "text-[18px] leading-7 font-bold text-foreground", children: title }) : null,
+          showClose ? /* @__PURE__ */ jsx(
+            Button,
+            {
+              "aria-label": "Close dialog",
+              className: "h-5 w-5 shrink-0 rounded-none text-subtle-text",
+              onClick: onClose,
+              size: "icon-xs",
+              variant: "plain-black",
+              children: /* @__PURE__ */ jsx(X, { size: 20, weight: "regular" })
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: cn("px-4 pb-6", isAlert ? "pt-0" : "pt-4"), children: isAlert ? /* @__PURE__ */ jsx(AlertBody, { config: alert, title, description }) : isContent ? /* @__PURE__ */ jsx("div", { className: "w-full", children: children ?? null }) : children ?? /* @__PURE__ */ jsx("p", { className: "text-sm leading-5 text-muted-foreground", children: description }) }),
+        actionLayout !== "none" ? /* @__PURE__ */ jsx("div", { className: "px-4 pb-4", children: /* @__PURE__ */ jsx(
+          ModalActions,
+          {
+            layout: actionLayout,
+            isContent,
+            isDesktop,
+            primaryLabel,
+            secondaryLabel,
+            onPrimaryClick,
+            onSecondaryClick
+          }
+        ) }) : null
+      ]
+    }
+  );
+}
+function AlertBody({
+  config,
+  title,
+  description
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4 text-center", children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative size-[100px]", children: [
+      /* @__PURE__ */ jsx("img", { alt: "", className: "absolute inset-0 size-full", src: config.background }),
+      config.layers.map((layer) => /* @__PURE__ */ jsx("div", { className: "absolute", style: { inset: layer.inset }, children: /* @__PURE__ */ jsx("img", { alt: "", className: "absolute inset-0 size-full", src: layer.src }) }, layer.src))
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-[18px] leading-7 font-bold", style: { color: config.titleColor }, children: title }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm leading-5 text-muted-foreground", children: description })
+    ] })
+  ] });
+}
+function ModalActions({
+  layout,
+  isContent,
+  isDesktop,
+  primaryLabel,
+  secondaryLabel,
+  onPrimaryClick,
+  onSecondaryClick
+}) {
+  const desktopInline = isContent && isDesktop;
+  if (layout === "single") {
+    return /* @__PURE__ */ jsx("div", { className: cn(desktopInline ? "flex justify-end" : void 0), children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        className: cn(desktopInline ? void 0 : "w-full"),
+        onClick: onPrimaryClick,
+        size: "xl",
+        variant: "primary",
+        children: primaryLabel
+      }
+    ) });
+  }
+  const containerClass = isContent ? cn("flex gap-4", isDesktop ? "justify-end" : "flex-col") : "flex items-center gap-4";
+  const buttonClass = isContent ? isDesktop ? void 0 : "w-full" : "min-w-0 flex-1";
+  return /* @__PURE__ */ jsxs("div", { className: containerClass, children: [
+    /* @__PURE__ */ jsx(Button, { className: buttonClass, onClick: onSecondaryClick, size: "xl", variant: "outline", children: secondaryLabel }),
+    /* @__PURE__ */ jsx(Button, { className: buttonClass, onClick: onPrimaryClick, size: "xl", variant: "primary", children: primaryLabel })
+  ] });
+}
 const OptionList = forwardRef(
   function OptionList2({
     options,
@@ -4857,16 +5121,22 @@ const TimeInput = forwardRef(
           className
         ),
         children: [
-          isMobile ? /* @__PURE__ */ jsxs(Drawer, { open, onOpenChange: handleOpenChange, children: [
-            /* @__PURE__ */ jsx(DrawerTrigger, { asChild: true, children: triggerButton }),
-            /* @__PURE__ */ jsxs(DrawerContent, { children: [
-              /* @__PURE__ */ jsx(DrawerTitle, { className: "sr-only", children: "เลือกเวลา" }),
-              /* @__PURE__ */ jsxs("div", { className: "overflow-auto px-4 pt-2 pb-8 w-full", children: [
+          isMobile ? /* @__PURE__ */ jsx(
+            BottomSheet,
+            {
+              open,
+              onOpenChange: handleOpenChange,
+              trigger: triggerButton,
+              title: "เลือกเวลา",
+              showHeader: false,
+              rightSide: "none",
+              contentClassName: "pt-0",
+              children: /* @__PURE__ */ jsxs("div", { className: "overflow-auto px-4 pt-2 pb-8 w-full", children: [
                 pickerContent,
                 actionButtons
               ] })
-            ] })
-          ] }) : /* @__PURE__ */ jsxs(
+            }
+          ) : /* @__PURE__ */ jsxs(
             Popover.Root,
             {
               open,
@@ -4902,6 +5172,7 @@ const TimeInput = forwardRef(
 );
 TimeInput.displayName = "TimeInput";
 export {
+  BottomSheet,
   Button,
   Card,
   Checkbox,
@@ -4910,6 +5181,7 @@ export {
   Dropdown,
   DropdownMultiple,
   Input,
+  Modal,
   OptionList,
   Radio,
   SearchInput,
@@ -4923,6 +5195,7 @@ export {
   Tag,
   TextArea,
   TimeInput,
-  cn
+  cn,
+  useIsMobile
 };
 //# sourceMappingURL=index.js.map