@bigtablet/design-system 1.2.2 → 1.2.4

package/dist/index.css

@@ -409,145 +409,6 @@
   border-color: #000000;
 }
 
-/* src/ui/form/markdown/style.scss */
-.md {
-  display: grid;
-  gap: 0.5rem;
-}
-.md__label {
-  font-size: 0.875rem;
-  font-weight: 400;
-  line-height: 1.5;
-  color: #6B7280;
-}
-.md__grid {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-  align-items: stretch;
-  column-gap: 1.5rem;
-  row-gap: 0.75rem;
-}
-@media (max-width: 960px) {
-  .md__grid {
-    grid-template-columns: 1fr;
-  }
-}
-.md__input,
-.md__preview {
-  min-width: 0;
-  box-sizing: border-box;
-  max-width: 100%;
-  overflow: auto;
-}
-.md__input {
-  width: 100%;
-  min-height: 300px;
-  border: 1px solid #e5e5e5;
-  border-radius: 8px;
-  padding: 0.75rem;
-  background: #ffffff;
-  font-size: 0.9375rem;
-  font-weight: 400;
-  line-height: 1.5;
-  color: #3B3B3B;
-  line-height: 1.75;
-  resize: vertical;
-  transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
-}
-.md__input:hover {
-  border-color: rgba(0, 0, 0, 0.08);
-}
-.md__input:focus {
-  border-color: #000000;
-  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
-  outline: none;
-}
-.md__preview {
-  min-height: 300px;
-  border: 1px solid #e5e5e5;
-  border-radius: 8px;
-  background: #ffffff;
-  padding: 0.75rem;
-}
-.markdown-body {
-  font-size: 0.9375rem;
-  font-weight: 400;
-  line-height: 1.5;
-  color: #3B3B3B;
-  line-height: 1.7;
-  word-break: break-word;
-  overflow-wrap: anywhere;
-}
-.markdown-body img,
-.markdown-body video {
-  max-width: 100%;
-  height: auto;
-  display: block;
-}
-.markdown-body h1,
-.markdown-body h2,
-.markdown-body h3,
-.markdown-body h4,
-.markdown-body h5,
-.markdown-body h6 {
-  font-size: 1.25rem;
-  font-weight: 600;
-  line-height: 1.3;
-  color: #1F2937;
-  margin: 1rem 0 0.5rem;
-}
-.markdown-body p {
-  margin: 0.5rem 0;
-}
-.markdown-body a {
-  color: #000000;
-  text-decoration: underline;
-}
-.markdown-body ul,
-.markdown-body ol {
-  margin: 0.5rem 0 0.5rem 1rem;
-}
-.markdown-body blockquote {
-  border-left: 4px solid #e5e5e5;
-  padding-left: 0.75rem;
-  color: #6B7280;
-  margin: 0.5rem 0;
-}
-.markdown-body table {
-  width: 100%;
-  border-collapse: collapse;
-  margin: 0.75rem 0;
-}
-.markdown-body table th,
-.markdown-body table td {
-  border: 1px solid #e5e5e5;
-  padding: 0.5rem 0.75rem;
-  text-align: left;
-}
-.markdown-body table th {
-  background: #fafafa;
-}
-.markdown-body code {
-  background: #fafafa;
-  padding: 2px 6px;
-  border-radius: 6px;
-  font-family:
-    ui-monospace,
-    SFMono-Regular,
-    Menlo,
-    monospace;
-}
-.markdown-body pre {
-  background: #fafafa;
-  padding: 0.75rem;
-  border-radius: 8px;
-  overflow: auto;
-}
-.markdown-body pre code {
-  background: transparent;
-  padding: 0;
-}
-
 /* src/ui/form/radio/style.scss */
 .radio {
   display: inline-flex;

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;
@@ -63,15 +81,6 @@ interface FileInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
 }
 declare const FileInput: ({ label, onFiles, className, ...props }: FileInputProps) => react_jsx_runtime.JSX.Element;
 
-type MarkdownEditorProps = {
-    label?: string;
-    placeholder?: string;
-    value: string;
-    onChangeAction: (val: string) => void;
-    rows?: number;
-};
-declare const MarkdownEditor: ({ label, placeholder, value, onChangeAction, rows, }: MarkdownEditorProps) => react_jsx_runtime.JSX.Element;
-
 interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
     label?: React.ReactNode;
     size?: "sm" | "md" | "lg";
@@ -147,4 +156,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, Modal, Pagination, Radio, Select, SkeletonCard, SkeletonList, Switch, TextField, ToastProvider, useAlert, useToast };

package/dist/index.js

@@ -1,11 +1,11 @@
+"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 * as React3 from 'react';
+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';
-import remarkGfm from 'remark-gfm';
 import { ChevronDown, Check } from 'lucide-react';
 
 // src/ui/display/card/index.tsx
@@ -25,7 +25,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,
@@ -157,8 +251,8 @@ var Checkbox = ({
   className,
   ...props
 }) => {
-  const ref = React4.useRef(null);
-  React4.useEffect(() => {
+  const ref = React3.useRef(null);
+  React3.useEffect(() => {
     if (ref.current) ref.current.indeterminate = !!indeterminate;
   }, [indeterminate]);
   return /* @__PURE__ */ jsxs(
@@ -179,7 +273,7 @@ var FileInput = ({
   className,
   ...props
 }) => {
-  const id = React4.useId();
+  const id = React3.useId();
   return /* @__PURE__ */ jsxs("div", { className: ["file", className].filter(Boolean).join(" "), children: [
     /* @__PURE__ */ jsx(
       "input",
@@ -194,32 +288,6 @@ var FileInput = ({
     /* @__PURE__ */ jsx("label", { htmlFor: id, className: "file__label", children: label })
   ] });
 };
-var MarkdownEditor = ({
-  label,
-  placeholder,
-  value,
-  onChangeAction,
-  rows = 14
-}) => {
-  const id = React4.useId();
-  return /* @__PURE__ */ jsxs("div", { className: "md", children: [
-    label && /* @__PURE__ */ jsx("label", { className: "md__label", htmlFor: id, children: label }),
-    /* @__PURE__ */ jsxs("div", { className: "md__grid", children: [
-      /* @__PURE__ */ jsx(
-        "textarea",
-        {
-          id,
-          className: "md__input",
-          rows,
-          value,
-          placeholder,
-          onChange: (e) => onChangeAction(e.target.value)
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { className: "md__preview markdown-body", children: /* @__PURE__ */ jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], children: value || "\uBBF8\uB9AC\uBCF4\uAE30 \uC601\uC5ED\uC785\uB2C8\uB2E4. \uB9C8\uD06C\uB2E4\uC6B4\uC744 \uC785\uB825\uD558\uC138\uC694." }) })
-    ] })
-  ] });
-};
 var Radio = ({
   label,
   size = "md",
@@ -252,20 +320,20 @@ function Select({
   fullWidth,
   className
 }) {
-  const internalId = React4.useId();
+  const internalId = React3.useId();
   const selectId = id ?? internalId;
   const isControlled = value !== void 0;
-  const [internal, setInternal] = React4.useState(defaultValue);
+  const [internal, setInternal] = React3.useState(defaultValue);
   const currentValue = isControlled ? value ?? null : internal;
-  const [open, setOpen] = React4.useState(false);
-  const [activeIndex, setActiveIndex] = React4.useState(-1);
-  const wrapperRef = React4.useRef(null);
-  const listRef = React4.useRef(null);
-  const currentOption = React4.useMemo(
+  const [open, setOpen] = React3.useState(false);
+  const [activeIndex, setActiveIndex] = React3.useState(-1);
+  const wrapperRef = React3.useRef(null);
+  const listRef = React3.useRef(null);
+  const currentOption = React3.useMemo(
     () => options.find((o) => o.value === currentValue) ?? null,
     [options, currentValue]
   );
-  const setValue = React4.useCallback(
+  const setValue = React3.useCallback(
     (next) => {
       const opt = options.find((o) => o.value === next) ?? null;
       if (!isControlled) setInternal(next);
@@ -273,7 +341,7 @@ function Select({
     },
     [isControlled, onChange, options]
   );
-  React4.useEffect(() => {
+  React3.useEffect(() => {
     const onDocClick = (e) => {
       if (!wrapperRef.current) return;
       if (!wrapperRef.current.contains(e.target)) setOpen(false);
@@ -342,7 +410,7 @@ function Select({
         break;
     }
   };
-  React4.useEffect(() => {
+  React3.useEffect(() => {
     if (open) {
       const idx = Math.max(
         0,
@@ -440,7 +508,7 @@ var Switch = ({
   ...props
 }) => {
   const controlled = checked !== void 0;
-  const [inner, setInner] = React4.useState(!!defaultChecked);
+  const [inner, setInner] = React3.useState(!!defaultChecked);
   const on = controlled ? !!checked : inner;
   const toggle = () => {
     if (disabled) return;
@@ -468,7 +536,7 @@ var Switch = ({
     }
   );
 };
-var TextField = React4.forwardRef(
+var TextField = React3.forwardRef(
   ({
     id,
     label,
@@ -484,7 +552,7 @@ var TextField = React4.forwardRef(
     onChangeAction,
     ...props
   }, ref) => {
-    const inputId = id ?? React4.useId();
+    const inputId = id ?? React3.useId();
     const helperId = helperText ? `${inputId}-help` : void 0;
     const classNames = [
       "tf__input",
@@ -560,7 +628,7 @@ var Modal = ({
   children,
   ...props
 }) => {
-  React4.useEffect(() => {
+  React3.useEffect(() => {
     const onKey = (e) => e.key === "Escape" && onClose?.();
     if (open) document.addEventListener("keydown", onKey);
     return () => document.removeEventListener("keydown", onKey);
@@ -609,4 +677,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, 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,20 +1,20 @@
 {
   "name": "@bigtablet/design-system",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "description": "Bigtablet Design System UI Components",
   "type": "module",
-  "types": "dist/next.d.ts",
-  "style": "dist/next.css",
+  "types": "dist/index.d.ts",
+  "style": "dist/index.css",
   "exports": {
     ".": {
-      "types": "./dist/next.d.ts",
-      "import": "./dist/next.js"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
     },
     "./next": {
       "types": "./dist/next.d.ts",
       "import": "./dist/next.js"
     },
-    "./style.css": "./dist/next.css"
+    "./style.css": "./dist/index.css"
   },
   "files": [
     "dist",
@@ -67,14 +67,13 @@
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "chromatic": "^13.3.3",
+    "conventional-changelog-conventionalcommits": "^9.1.0",
     "esbuild-sass-plugin": "^3",
     "lucide-react": "^0.552.0",
     "next": "16.0.1",
     "react": "19.2.0",
     "react-dom": "19.2.0",
-    "react-markdown": "^10.1.0",
     "react-toastify": "^11.0.5",
-    "remark-gfm": "^4.0.1",
     "sass-embedded": "^1.93.3",
     "semantic-release": "^25.0.1",
     "storybook": "8.6.14",