@sarunyu/system-one 4.1.1 → 4.2.0

package/AGENTS.md

@@ -17,6 +17,8 @@ in this package.** This file is the short version: the rules you must follow.
    - Custom checkbox/radio → use `<Checkbox>` / `<Radio>`.
    - Custom date/time pickers → use `<DateInput>` / `<TimeInput>`.
    - Custom tables → use `<Table>` + `<TableRow>` + `<TableHeaderCell>` + `<TableCell>`.
+   - Custom modals/dialogs/alerts → use `<Modal>` (wrap it in your own `fixed inset-0` backdrop).
+   - Custom bottom sheets / drawers from the bottom → use `<BottomSheet>` (it ships its own backdrop via Vaul).
 
 2. **Use token-backed Tailwind classes for color.** Never emit hard-coded colors:
    - Hex (`#3b82f6`), arbitrary (`bg-[#...]`), and palette utilities
@@ -38,6 +40,19 @@ in this package.** This file is the short version: the rules you must follow.
    - Checkbox/Radio take their `label` as a prop. Don't wrap them in `<label>`.
    - All tabs in one `TabGroup` must share the same `size`.
    - One `<Button variant="primary">` per context.
+   - `Modal` renders the panel only — provide your own `fixed inset-0` backdrop + open/close state. One primary action per modal.
+   - `BottomSheet` is mobile-only. On desktop, use `Modal` instead.
+
+6. **Mobile forms and action-heavy modals MUST use `<BottomSheet>`, not `<Modal>`.**
+   Login, signup, settings panels, profile editors, any multi-field form,
+   multi-step flow, long picker list, or action menu — on mobile (< 768px)
+   these render as `<BottomSheet>`. Only simple `variant="alert"` and short
+   `variant="dialog"` confirmations (no form) may stay as `<Modal>` on mobile.
+   Desktop (≥ 768px) always uses `<Modal>`. Branch with the library's
+   `useIsMobile()` hook — do not build a custom "ResponsiveModal" wrapper;
+   put the `if (isMobile) return <BottomSheet>… / return <Modal>…` inline and
+   share one `const body = …` between the two branches. See the `LoginSheet`
+   recipe in `llms.txt`.
 
 ## Setup check
 

package/dist/index.cjs

@@ -1192,6 +1192,11 @@ function DrawerPortal({
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(vaul.Drawer.Portal, { "data-slot": "drawer-portal", ...props });
 }
+function DrawerClose({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(vaul.Drawer.Close, { "data-slot": "drawer-close", ...props });
+}
 function DrawerOverlay({
   className,
   ...props
@@ -1249,6 +1254,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__ */ jsxRuntime.jsxs(Drawer, { direction: "bottom", open, onOpenChange, children: [
+    trigger ? /* @__PURE__ */ jsxRuntime.jsx(DrawerTrigger, { asChild: true, children: trigger }) : null,
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      DrawerContent,
+      {
+        className: cn(
+          "[&>div:first-child]:hidden rounded-t-[24px] border-t-0 px-4 pb-6 pt-2",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(DrawerTitle, { className: "sr-only", children: title }),
+          showHandle ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1 w-10 rounded-full bg-muted" }) }) : null,
+          showHeader ? /* @__PURE__ */ jsxRuntime.jsx(
+            Header,
+            {
+              headerType,
+              rightSide,
+              title,
+              actionLabel,
+              imageSrc,
+              leftIcon,
+              rightIcon,
+              onActionClick
+            }
+          ) : null,
+          children ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("pt-2", contentClassName), children }) : null
+        ]
+      }
+    )
+  ] });
+}
+function Header({
+  headerType,
+  rightSide,
+  title,
+  actionLabel,
+  imageSrc,
+  leftIcon,
+  rightIcon,
+  onActionClick
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-3", rightSide === "action" ? "pr-2" : void 0), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Leading, { headerType, imageSrc, leftIcon }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-base leading-6 font-bold text-foreground", children: title })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Trailing,
+      {
+        rightSide,
+        actionLabel,
+        rightIcon,
+        onActionClick
+      }
+    )
+  ] });
+}
+function Leading({
+  headerType,
+  imageSrc,
+  leftIcon
+}) {
+  if (headerType === "image") {
+    return imageSrc ? /* @__PURE__ */ jsxRuntime.jsx("img", { alt: "", className: "size-8 shrink-0 rounded-md object-cover", src: imageSrc }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-8 shrink-0 rounded-md bg-muted" });
+  }
+  if (headerType === "icon") {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "text-foreground", children: leftIcon ?? /* @__PURE__ */ jsxRuntime.jsx(react.Circle, { size: 22 }) });
+  }
+  return null;
+}
+function Trailing({
+  rightSide,
+  actionLabel,
+  rightIcon,
+  onActionClick
+}) {
+  if (rightSide === "action") {
+    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(DrawerClose, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        "aria-label": "Close bottom sheet",
+        className: "text-foreground",
+        size: "icon-xs",
+        variant: "plain-black",
+        children: rightIcon ?? /* @__PURE__ */ jsxRuntime.jsx(react.Circle, { size: 22 })
+      }
+    ) });
+  }
+  return null;
+}
 const THAI_MONTHS_SHORT = [
   "ม.ค.",
   "ก.พ.",
@@ -2179,16 +2304,22 @@ const DateInput = React.forwardRef(
         ref,
         className: cn("flex flex-col gap-[4px] w-full", className),
         children: [
-          isMobile ? /* @__PURE__ */ jsxRuntime.jsxs(Drawer, { open, onOpenChange: handleOpenChange, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(DrawerTrigger, { asChild: true, children: triggerButton }),
-            /* @__PURE__ */ jsxRuntime.jsxs(DrawerContent, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(DrawerTitle, { className: "sr-only", children: "เลือกวันที่" }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "overflow-auto px-4 pt-2 pb-8 w-full", children: [
+          isMobile ? /* @__PURE__ */ jsxRuntime.jsx(
+            BottomSheet,
+            {
+              open,
+              onOpenChange: handleOpenChange,
+              trigger: triggerButton,
+              title: "เลือกวันที่",
+              showHeader: false,
+              rightSide: "none",
+              contentClassName: "pt-0",
+              children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "overflow-auto px-4 pt-2 pb-8 w-full", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(DrawerRangeCtx.Provider, { value: mode === "range", children: calendarContent }),
                 actionButtons
               ] })
-            ] })
-          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsxs(
             Popover__namespace.Root,
             {
               open,
@@ -3294,6 +3425,139 @@ const Input = React.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center px-4 pt-4", isAlert ? "justify-end" : "justify-between gap-4"), children: [
+          !isAlert ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[18px] leading-7 font-bold text-foreground", children: title }) : null,
+          showClose ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(react.X, { size: 20, weight: "regular" })
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("px-4 pb-6", isAlert ? "pt-0" : "pt-4"), children: isAlert ? /* @__PURE__ */ jsxRuntime.jsx(AlertBody, { config: alert, title, description }) : isContent ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children: children ?? null }) : children ?? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm leading-5 text-muted-foreground", children: description }) }),
+        actionLayout !== "none" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 pb-4", children: /* @__PURE__ */ jsxRuntime.jsx(
+          ModalActions,
+          {
+            layout: actionLayout,
+            isContent,
+            isDesktop,
+            primaryLabel,
+            secondaryLabel,
+            onPrimaryClick,
+            onSecondaryClick
+          }
+        ) }) : null
+      ]
+    }
+  );
+}
+function AlertBody({
+  config,
+  title,
+  description
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-4 text-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative size-[100px]", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("img", { alt: "", className: "absolute inset-0 size-full", src: config.background }),
+      config.layers.map((layer) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute", style: { inset: layer.inset }, children: /* @__PURE__ */ jsxRuntime.jsx("img", { alt: "", className: "absolute inset-0 size-full", src: layer.src }) }, layer.src))
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[18px] leading-7 font-bold", style: { color: config.titleColor }, children: title }),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: cn(desktopInline ? "flex justify-end" : void 0), children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: containerClass, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Button, { className: buttonClass, onClick: onSecondaryClick, size: "xl", variant: "outline", children: secondaryLabel }),
+    /* @__PURE__ */ jsxRuntime.jsx(Button, { className: buttonClass, onClick: onPrimaryClick, size: "xl", variant: "primary", children: primaryLabel })
+  ] });
+}
 const OptionList = React.forwardRef(
   function OptionList2({
     options,
@@ -4876,16 +5140,22 @@ const TimeInput = React.forwardRef(
           className
         ),
         children: [
-          isMobile ? /* @__PURE__ */ jsxRuntime.jsxs(Drawer, { open, onOpenChange: handleOpenChange, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(DrawerTrigger, { asChild: true, children: triggerButton }),
-            /* @__PURE__ */ jsxRuntime.jsxs(DrawerContent, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(DrawerTitle, { className: "sr-only", children: "เลือกเวลา" }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "overflow-auto px-4 pt-2 pb-8 w-full", children: [
+          isMobile ? /* @__PURE__ */ jsxRuntime.jsx(
+            BottomSheet,
+            {
+              open,
+              onOpenChange: handleOpenChange,
+              trigger: triggerButton,
+              title: "เลือกเวลา",
+              showHeader: false,
+              rightSide: "none",
+              contentClassName: "pt-0",
+              children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "overflow-auto px-4 pt-2 pb-8 w-full", children: [
                 pickerContent,
                 actionButtons
               ] })
-            ] })
-          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsxs(
             Popover__namespace.Root,
             {
               open,
@@ -4920,6 +5190,7 @@ const TimeInput = React.forwardRef(
   }
 );
 TimeInput.displayName = "TimeInput";
+exports.BottomSheet = BottomSheet;
 exports.Button = Button;
 exports.Card = Card;
 exports.Checkbox = Checkbox;
@@ -4928,6 +5199,7 @@ exports.DateInput = DateInput;
 exports.Dropdown = Dropdown;
 exports.DropdownMultiple = DropdownMultiple;
 exports.Input = Input;
+exports.Modal = Modal;
 exports.OptionList = OptionList;
 exports.Radio = Radio;
 exports.SearchInput = SearchInput;
@@ -4942,4 +5214,5 @@ exports.Tag = Tag;
 exports.TextArea = TextArea;
 exports.TimeInput = TimeInput;
 exports.cn = cn;
+exports.useIsMobile = useIsMobile;
 //# sourceMappingURL=index.cjs.map