@bigtablet/design-system 1.2.1 → 1.2.3

package/dist/index.d.ts

@@ -11,6 +11,24 @@ declare const Card: ({ shadow, padding, bordered, className, ...props }: CardPro
 
 type AlertVariant = "info" | "success" | "warning" | "error";
 type AlertActionsAlign = "left" | "center" | "right";
+interface AlertOptions {
+    variant?: AlertVariant;
+    title?: React.ReactNode;
+    message?: React.ReactNode;
+    confirmText?: string;
+    cancelText?: string;
+    showCancel?: boolean;
+    actionsAlign?: AlertActionsAlign;
+    onConfirm?: () => void;
+    onCancel?: () => void;
+}
+interface AlertContextValue {
+    showAlert: (options: AlertOptions) => void;
+}
+declare const useAlert: () => AlertContextValue;
+declare const AlertProvider: React.FC<{
+    children: React.ReactNode;
+}>;
 interface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
     variant?: AlertVariant;
     title?: React.ReactNode;
@@ -147,4 +165,4 @@ declare const SkeletonCard: () => react_jsx_runtime.JSX.Element;
 
 declare const SkeletonList: () => react_jsx_runtime.JSX.Element;
 
-export { Alert, Button, Card, Checkbox, FileInput, Loading, MarkdownEditor, Modal, Pagination, Radio, Select, SkeletonCard, SkeletonList, Switch, TextField, ToastProvider, useToast };
+export { Alert, AlertProvider, Button, Card, Checkbox, FileInput, Loading, MarkdownEditor, Modal, Pagination, Radio, Select, SkeletonCard, SkeletonList, Switch, TextField, ToastProvider, useAlert, useToast };

package/dist/index.js

@@ -1,7 +1,9 @@
+"use client";
+import './index.css';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import * as React4 from 'react';
-import { createContext } from 'react';
-import 'react-dom';
+import { createContext, useContext, useState, useCallback } from 'react';
+import { createPortal } from 'react-dom';
 import { ToastContainer, Slide, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import ReactMarkdown from 'react-markdown';
@@ -25,7 +27,101 @@ var Card = ({
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsx("div", { className: cls, ...props });
 };
-createContext(null);
+var AlertContext = createContext(null);
+var useAlert = () => {
+  const context = useContext(AlertContext);
+  if (!context) {
+    throw new Error("useAlert must be used within AlertProvider");
+  }
+  return context;
+};
+var AlertProvider = ({
+  children
+}) => {
+  const [alertState, setAlertState] = useState({
+    isOpen: false
+  });
+  const showAlert = useCallback((options) => {
+    setAlertState({
+      ...options,
+      isOpen: true
+    });
+  }, []);
+  const handleClose = useCallback(() => {
+    setAlertState((prev) => ({ ...prev, isOpen: false }));
+  }, []);
+  const handleConfirm = useCallback(() => {
+    alertState.onConfirm?.();
+    handleClose();
+  }, [alertState.onConfirm, handleClose]);
+  const handleCancel = useCallback(() => {
+    alertState.onCancel?.();
+    handleClose();
+  }, [alertState.onCancel, handleClose]);
+  return /* @__PURE__ */ jsxs(AlertContext.Provider, { value: { showAlert }, children: [
+    children,
+    alertState.isOpen && createPortal(
+      /* @__PURE__ */ jsx(
+        AlertModal,
+        {
+          ...alertState,
+          onConfirm: handleConfirm,
+          onCancel: handleCancel,
+          onClose: handleClose
+        }
+      ),
+      document.body
+    )
+  ] });
+};
+var AlertModal = ({
+  variant = "info",
+  title,
+  message,
+  confirmText = "\uD655\uC778",
+  cancelText = "\uCDE8\uC18C",
+  showCancel = false,
+  actionsAlign = "right",
+  onConfirm,
+  onCancel,
+  onClose
+}) => {
+  return /* @__PURE__ */ jsx("div", { className: "alert-overlay", onClick: onClose, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `alert-modal alert-modal--${variant}`,
+      onClick: (e) => e.stopPropagation(),
+      role: "alertdialog",
+      "aria-modal": "true",
+      "aria-labelledby": "alert-title",
+      "aria-describedby": "alert-message",
+      children: [
+        title && /* @__PURE__ */ jsx("div", { className: "alert-modal__title", id: "alert-title", children: title }),
+        message && /* @__PURE__ */ jsx("div", { className: "alert-modal__message", id: "alert-message", children: message }),
+        /* @__PURE__ */ jsxs("div", { className: `alert-modal__actions alert-modal__actions--${actionsAlign}`, children: [
+          showCancel && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "alert-modal__button alert-modal__button--cancel",
+              onClick: onCancel,
+              children: cancelText
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "alert-modal__button alert-modal__button--confirm",
+              onClick: onConfirm,
+              children: confirmText
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
+};
 var Alert = ({
   variant = "info",
   title,
@@ -609,4 +705,4 @@ var SkeletonList = () => /* @__PURE__ */ jsxs("div", { className: "request-item
   /* @__PURE__ */ jsx("div", { className: "request-item__dday", children: /* @__PURE__ */ jsx("span", { className: "skeleton__dday" }) })
 ] });
 
-export { Alert, Button, Card, Checkbox, FileInput, Loading, MarkdownEditor, Modal, Pagination, Radio, Select, card_default as SkeletonCard, SkeletonList, Switch, TextField, ToastProvider, useToast };
+export { Alert, AlertProvider, Button, Card, Checkbox, FileInput, Loading, MarkdownEditor, Modal, Pagination, Radio, Select, card_default as SkeletonCard, SkeletonList, Switch, TextField, ToastProvider, useAlert, useToast };

package/dist/next.js

@@ -1,3 +1,5 @@
+"use client";
+import './next.css';
 import * as React from 'react';
 import Link from 'next/link';
 import Image from 'next/image';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigtablet/design-system",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "description": "Bigtablet Design System UI Components",
   "type": "module",
   "types": "dist/index.d.ts",
@@ -14,7 +14,7 @@
       "types": "./dist/next.d.ts",
       "import": "./dist/next.js"
     },
-    "./styles.css": "./dist/index.css"
+    "./style.css": "./dist/index.css"
   },
   "files": [
     "dist",
@@ -22,7 +22,9 @@
     "LICENSE"
   ],
   "sideEffects": [
-    "*.css"
+    "**/*.css",
+    "**/*.scss",
+    "./dist/next.css"
   ],
   "scripts": {
     "build": "tsup",