@bigtablet/design-system 1.1.3 → 1.2.2

package/dist/index.js

@@ -1,12 +1,612 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React4 from 'react';
+import { createContext } from 'react';
+import '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
-var Card = ({ shadow = "sm", padding = "md", bordered, className, ...props }) => {
-  const cls = ["card", `card--shadow-${shadow}`, `card--p-${padding}`, bordered && "card--bordered", className].filter(Boolean).join(" ");
+var Card = ({
+  shadow = "sm",
+  padding = "md",
+  bordered,
+  className,
+  ...props
+}) => {
+  const cls = [
+    "card",
+    `card--shadow-${shadow}`,
+    `card--p-${padding}`,
+    bordered && "card--bordered",
+    className
+  ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsx("div", { className: cls, ...props });
 };
+createContext(null);
+var Alert = ({
+  variant = "info",
+  title,
+  icon,
+  closable,
+  onClose,
+  showActions = false,
+  onConfirm,
+  onCancel,
+  confirmText = "\uD655\uC778",
+  cancelText = "\uCDE8\uC18C",
+  actionsAlign = "left",
+  className,
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: ["alert", `alert--${variant}`, closable && "alert--closable", className].filter(Boolean).join(" "),
+      role: "alert",
+      "aria-live": "polite",
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "alert__icon", "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ jsxs("div", { className: "alert__content", children: [
+          title && /* @__PURE__ */ jsx("div", { className: "alert__title", children: title }),
+          children && /* @__PURE__ */ jsx("div", { className: "alert__desc", children }),
+          showActions && /* @__PURE__ */ jsxs("div", { className: `alert__actions alert__actions--${actionsAlign}`, children: [
+            onCancel && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "alert__button alert__button--cancel",
+                onClick: onCancel,
+                children: cancelText
+              }
+            ),
+            onConfirm && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "alert__button alert__button--confirm",
+                onClick: onConfirm,
+                children: confirmText
+              }
+            )
+          ] })
+        ] }),
+        closable && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "alert__close",
+            "aria-label": "\uB2EB\uAE30",
+            onClick: onClose,
+            children: /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                width: "16",
+                height: "16",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                children: [
+                  /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                  /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
 var Loading = ({ size = 24 }) => {
-  return /* @__PURE__ */ jsx("span", { className: "loading", style: { width: size, height: size }, "aria-label": "Loading" });
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "loading",
+      style: { width: size, height: size },
+      "aria-label": "Loading"
+    }
+  );
+};
+var ToastProvider = () => /* @__PURE__ */ jsx(
+  ToastContainer,
+  {
+    position: "top-right",
+    autoClose: 2e3,
+    hideProgressBar: false,
+    newestOnTop: false,
+    closeOnClick: true,
+    rtl: false,
+    pauseOnFocusLoss: true,
+    draggable: true,
+    pauseOnHover: true,
+    theme: "light",
+    transition: Slide
+  }
+);
+var useToast = () => {
+  return {
+    success: (msg) => toast.success(msg),
+    error: (msg) => toast.error(msg),
+    warning: (msg) => toast.warning(msg),
+    info: (msg) => toast.info(msg),
+    message: (msg) => toast(msg)
+  };
+};
+var Button = ({
+  variant = "primary",
+  size = "md",
+  className,
+  style,
+  ...props
+}) => {
+  const classes = ["btn", `btn--${variant}`, `btn--${size}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("button", { className: classes, ...props });
+};
+var Checkbox = ({
+  label,
+  size = "md",
+  indeterminate,
+  className,
+  ...props
+}) => {
+  const ref = React4.useRef(null);
+  React4.useEffect(() => {
+    if (ref.current) ref.current.indeterminate = !!indeterminate;
+  }, [indeterminate]);
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      className: ["checkbox", `checkbox--${size}`, className].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ jsx("input", { ref, type: "checkbox", className: "checkbox__input", ...props }),
+        /* @__PURE__ */ jsx("span", { className: "checkbox__box", "aria-hidden": true }),
+        label && /* @__PURE__ */ jsx("span", { className: "checkbox__label", children: label })
+      ]
+    }
+  );
+};
+var FileInput = ({
+  label = "Choose file",
+  onFiles,
+  className,
+  ...props
+}) => {
+  const id = React4.useId();
+  return /* @__PURE__ */ jsxs("div", { className: ["file", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        id,
+        type: "file",
+        className: "file__input",
+        onChange: (e) => onFiles?.(e.currentTarget.files),
+        ...props
+      }
+    ),
+    /* @__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",
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      className: ["radio", `radio--${size}`, className].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ jsx("input", { type: "radio", className: "radio__input", ...props }),
+        /* @__PURE__ */ jsx("span", { className: "radio__dot", "aria-hidden": true }),
+        label && /* @__PURE__ */ jsx("span", { className: "radio__label", children: label })
+      ]
+    }
+  );
+};
+function Select({
+  id,
+  label,
+  placeholder = "Select\u2026",
+  options,
+  value,
+  onChange,
+  defaultValue = null,
+  disabled,
+  size = "md",
+  variant = "outline",
+  fullWidth,
+  className
+}) {
+  const internalId = React4.useId();
+  const selectId = id ?? internalId;
+  const isControlled = value !== void 0;
+  const [internal, setInternal] = React4.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(
+    () => options.find((o) => o.value === currentValue) ?? null,
+    [options, currentValue]
+  );
+  const setValue = React4.useCallback(
+    (next) => {
+      const opt = options.find((o) => o.value === next) ?? null;
+      if (!isControlled) setInternal(next);
+      onChange?.(next, opt);
+    },
+    [isControlled, onChange, options]
+  );
+  React4.useEffect(() => {
+    const onDocClick = (e) => {
+      if (!wrapperRef.current) return;
+      if (!wrapperRef.current.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener("mousedown", onDocClick);
+    return () => document.removeEventListener("mousedown", onDocClick);
+  }, []);
+  const moveActive = (dir) => {
+    if (!open) {
+      setOpen(true);
+      return;
+    }
+    let i = activeIndex;
+    const len = options.length;
+    for (let step = 0; step < len; step++) {
+      i = (i + dir + len) % len;
+      if (!options[i].disabled) {
+        setActiveIndex(i);
+        break;
+      }
+    }
+  };
+  const commitActive = () => {
+    if (activeIndex < 0 || activeIndex >= options.length) return;
+    const opt = options[activeIndex];
+    if (!opt.disabled) {
+      setValue(opt.value);
+      setOpen(false);
+    }
+  };
+  const onKeyDown = (e) => {
+    if (disabled) return;
+    switch (e.key) {
+      case " ":
+      case "Enter":
+        e.preventDefault();
+        if (!open) setOpen(true);
+        else commitActive();
+        break;
+      case "ArrowDown":
+        e.preventDefault();
+        moveActive(1);
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        moveActive(-1);
+        break;
+      case "Home":
+        e.preventDefault();
+        setOpen(true);
+        setActiveIndex(options.findIndex((o) => !o.disabled));
+        break;
+      case "End":
+        e.preventDefault();
+        setOpen(true);
+        for (let i = options.length - 1; i >= 0; i--) {
+          if (!options[i].disabled) {
+            setActiveIndex(i);
+            break;
+          }
+        }
+        break;
+      case "Escape":
+        e.preventDefault();
+        setOpen(false);
+        break;
+    }
+  };
+  React4.useEffect(() => {
+    if (open) {
+      const idx = Math.max(
+        0,
+        options.findIndex((o) => o.value === currentValue && !o.disabled)
+      );
+      setActiveIndex(idx === -1 ? 0 : idx);
+    }
+  }, [open, options, currentValue]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: wrapperRef,
+      className: `select${className ? ` ${className}` : ""}`,
+      style: fullWidth ? { width: "100%" } : void 0,
+      children: [
+        label && /* @__PURE__ */ jsx("label", { htmlFor: selectId, className: "select__label", children: label }),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            id: selectId,
+            type: "button",
+            className: [
+              "select__control",
+              `select__control--${variant}`,
+              `select__control--${size}`,
+              open && "is-open",
+              disabled && "is-disabled"
+            ].filter(Boolean).join(" "),
+            "aria-haspopup": "listbox",
+            "aria-expanded": open,
+            "aria-controls": `${selectId}-listbox`,
+            onClick: () => !disabled && setOpen((o) => !o),
+            onKeyDown,
+            disabled,
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: currentOption ? "select__value" : "select__placeholder",
+                  children: currentOption ? currentOption.label : placeholder
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "select__icon", "aria-hidden": true, children: /* @__PURE__ */ jsx(ChevronDown, { size: 16 }) })
+            ]
+          }
+        ),
+        open && /* @__PURE__ */ jsx(
+          "ul",
+          {
+            ref: listRef,
+            id: `${selectId}-listbox`,
+            role: "listbox",
+            className: "select__list",
+            children: options.map((opt, i) => {
+              const selected = currentValue === opt.value;
+              const active = i === activeIndex;
+              return /* @__PURE__ */ jsxs(
+                "li",
+                {
+                  role: "option",
+                  "aria-selected": selected,
+                  className: [
+                    "select__option",
+                    selected && "is-selected",
+                    active && "is-active",
+                    opt.disabled && "is-disabled"
+                  ].filter(Boolean).join(" "),
+                  onMouseEnter: () => !opt.disabled && setActiveIndex(i),
+                  onClick: () => {
+                    if (opt.disabled) return;
+                    setValue(opt.value);
+                    setOpen(false);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx("span", { children: opt.label }),
+                    selected && /* @__PURE__ */ jsx(Check, { size: 16, "aria-hidden": true })
+                  ]
+                },
+                opt.value
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
+}
+var Switch = ({
+  checked,
+  defaultChecked,
+  onChange,
+  size = "md",
+  disabled,
+  className,
+  ...props
+}) => {
+  const controlled = checked !== void 0;
+  const [inner, setInner] = React4.useState(!!defaultChecked);
+  const on = controlled ? !!checked : inner;
+  const toggle = () => {
+    if (disabled) return;
+    const next = !on;
+    if (!controlled) setInner(next);
+    onChange?.(next);
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      "aria-checked": on,
+      disabled,
+      onClick: toggle,
+      className: [
+        "switch",
+        `switch--${size}`,
+        on && "is-on",
+        disabled && "is-disabled",
+        className
+      ].filter(Boolean).join(" "),
+      ...props,
+      children: /* @__PURE__ */ jsx("span", { className: "switch__thumb" })
+    }
+  );
+};
+var TextField = React4.forwardRef(
+  ({
+    id,
+    label,
+    helperText,
+    error,
+    success,
+    variant = "outline",
+    size = "md",
+    leftIcon,
+    rightIcon,
+    fullWidth,
+    className,
+    onChangeAction,
+    ...props
+  }, ref) => {
+    const inputId = id ?? React4.useId();
+    const helperId = helperText ? `${inputId}-help` : void 0;
+    const classNames = [
+      "tf__input",
+      `tf__input--${variant}`,
+      `tf__input--${size}`,
+      leftIcon && "tf__input--with-left",
+      rightIcon && "tf__input--with-right",
+      error && "tf__input--error",
+      success && "tf__input--success",
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs("div", { className: "tf", style: fullWidth ? { width: "100%" } : void 0, children: [
+      label && /* @__PURE__ */ jsx("label", { className: "tf__label", htmlFor: inputId, children: label }),
+      /* @__PURE__ */ jsxs("div", { className: "tf__wrapper", children: [
+        leftIcon && /* @__PURE__ */ jsx("span", { className: "tf__icon tf__icon--left", children: leftIcon }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: inputId,
+            ref,
+            className: classNames,
+            "aria-invalid": !!error,
+            "aria-describedby": helperId,
+            ...props,
+            onChange: onChangeAction
+          }
+        ),
+        rightIcon && /* @__PURE__ */ jsx("span", { className: "tf__icon tf__icon--right", children: rightIcon })
+      ] }),
+      helperText && /* @__PURE__ */ jsx(
+        "div",
+        {
+          id: helperId,
+          className: `tf__helper ${error ? "tf__helper--error" : ""}`,
+          children: helperText
+        }
+      )
+    ] });
+  }
+);
+TextField.displayName = "TextField";
+var Pagination = ({ page, hasNext, onChange }) => {
+  const prevDisabled = page <= 1;
+  const nextDisabled = !hasNext;
+  return /* @__PURE__ */ jsxs("nav", { className: "pagination", "aria-label": "Pagination", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: "pagination__item",
+        onClick: () => !prevDisabled && onChange(page - 1),
+        disabled: prevDisabled,
+        children: "Prev"
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "pagination__page", children: page }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: "pagination__item",
+        onClick: () => !nextDisabled && onChange(page + 1),
+        disabled: nextDisabled,
+        children: "Next"
+      }
+    )
+  ] });
+};
+var Modal = ({
+  open,
+  onClose,
+  closeOnOverlay = true,
+  width = 520,
+  title,
+  children,
+  ...props
+}) => {
+  React4.useEffect(() => {
+    const onKey = (e) => e.key === "Escape" && onClose?.();
+    if (open) document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "modal",
+      role: "dialog",
+      "aria-modal": "true",
+      onClick: () => closeOnOverlay && onClose?.(),
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "modal__panel",
+          style: { width },
+          onClick: (e) => e.stopPropagation(),
+          ...props,
+          children: [
+            title && /* @__PURE__ */ jsx("div", { className: "modal__header", children: title }),
+            /* @__PURE__ */ jsx("div", { className: "modal__body", children })
+          ]
+        }
+      )
+    }
+  );
 };
+var SkeletonCard = () => /* @__PURE__ */ jsxs("div", { className: "card-skeleton", children: [
+  /* @__PURE__ */ jsx("div", { className: "card-skeleton__thumb" }),
+  /* @__PURE__ */ jsxs("div", { className: "card-skeleton__text", children: [
+    /* @__PURE__ */ jsx("div", { className: "card-skeleton__line short" }),
+    /* @__PURE__ */ jsx("div", { className: "card-skeleton__line" })
+  ] })
+] });
+var card_default = SkeletonCard;
+var SkeletonList = () => /* @__PURE__ */ jsxs("div", { className: "request-item skeleton", children: [
+  /* @__PURE__ */ jsxs("div", { className: "request-item__left", children: [
+    /* @__PURE__ */ jsx("div", { className: "skeleton__title" }),
+    /* @__PURE__ */ jsxs("div", { className: "request-item__tags", children: [
+      /* @__PURE__ */ jsx("span", { className: "skeleton__tag" }),
+      /* @__PURE__ */ jsx("span", { className: "skeleton__tag" }),
+      /* @__PURE__ */ jsx("span", { className: "skeleton__tag" })
+    ] })
+  ] }),
+  /* @__PURE__ */ jsx("div", { className: "request-item__dday", children: /* @__PURE__ */ jsx("span", { className: "skeleton__dday" }) })
+] });
 
-export { Card, Loading };
+export { Alert, Button, Card, Checkbox, FileInput, Loading, MarkdownEditor, Modal, Pagination, Radio, Select, card_default as SkeletonCard, SkeletonList, Switch, TextField, ToastProvider, useToast };

package/dist/next.css

@@ -0,0 +1,87 @@
+/* src/ui/navigation/sidebar/style.scss */
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: #ffffff;
+  border-right: 1px solid #e5e5e5;
+  padding: 0.5rem;
+  gap: 0.5rem;
+}
+.sidebar__brand {
+  padding: 0.5rem 0.5rem;
+  margin-bottom: 0.5rem;
+  border-bottom: 1px solid #e5e5e5;
+}
+.sidebar__brand-link {
+  display: block;
+  width: 100%;
+}
+.sidebar__brand-img {
+  display: block;
+  width: 100%;
+  height: auto;
+  object-fit: contain;
+}
+.sidebar__nav {
+  display: grid;
+  gap: 0.25rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+.sidebar__item {
+  display: grid;
+  grid-template-columns: 24px 1fr;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: 8px;
+  color: #3B3B3B;
+  background: transparent;
+  border: 1px solid transparent;
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  cursor: pointer;
+  transition:
+    background-color 0.2s ease-out,
+    color 0.2s ease-out,
+    border-color 0.2s ease-out;
+}
+.sidebar__item:hover {
+  background: #fafafa;
+  color: #1F2937;
+}
+.sidebar__item:hover .sidebar__icon {
+  color: #1F2937;
+}
+.sidebar__item.is-active {
+  position: relative;
+  background: #ffffff;
+  border-color: #e5e5e5;
+  color: #1F2937;
+  box-shadow: inset 0 0 0 1px #e5e5e5;
+}
+.sidebar__item.is-active::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 6px;
+  bottom: 6px;
+  width: 3px;
+  border-radius: 9999px;
+  background: #000000;
+}
+.sidebar__item.is-active .sidebar__icon {
+  color: #1F2937;
+}
+.sidebar__icon {
+  display: inline-grid;
+  place-items: center;
+  color: #6B7280;
+  transition: color 0.2s ease-out;
+}
+.sidebar__label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}