@bigtablet/design-system 0.1.0

package/dist/index.js

@@ -0,0 +1,487 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { X, ChevronDown, Check } from 'lucide-react';
+import { ToastContainer, Slide, toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+import * as React5 from '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(" ");
+  return /* @__PURE__ */ jsx("div", { className: cls, ...props });
+};
+var Alert = ({
+  variant = "info",
+  title,
+  icon,
+  closable,
+  onClose,
+  className,
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: ["alert", `alert--${variant}`, 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 })
+        ] }),
+        closable && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "alert__close",
+            "aria-label": "\uB2EB\uAE30",
+            onClick: onClose,
+            children: /* @__PURE__ */ jsx(X, { size: 16, "aria-hidden": "true", focusable: "false" })
+          }
+        )
+      ]
+    }
+  );
+};
+var Loading = ({ size = 24 }) => {
+  return /* @__PURE__ */ jsx("span", { className: "loading", style: { width: size, height: size }, "aria-label": "Loading" });
+};
+var ToastProvider = () => /* @__PURE__ */ jsx(
+  ToastContainer,
+  {
+    position: "bottom-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 Checkbox = ({ label, size = "md", indeterminate, className, ...props }) => {
+  const ref = React5.useRef(null);
+  React5.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 = React5.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 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 })
+  ] });
+};
+var Switch = ({ checked, defaultChecked, onChange, size = "md", disabled, className, ...props }) => {
+  const controlled = checked !== void 0;
+  const [inner, setInner] = React5.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 = React5.forwardRef(
+  ({
+    id,
+    label,
+    helperText,
+    error,
+    success,
+    variant = "outline",
+    size = "md",
+    leftIcon,
+    rightIcon,
+    fullWidth,
+    className,
+    ...props
+  }, ref) => {
+    const inputId = id ?? React5.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
+          }
+        ),
+        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 Button = ({
+  variant = "primary",
+  size = "md",
+  className,
+  ...props
+}) => {
+  const classes = ["btn", `btn--${variant}`, `btn--${size}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("button", { className: classes, ...props });
+};
+function Select({
+  id,
+  label,
+  placeholder = "Select\u2026",
+  options,
+  value,
+  onChange,
+  defaultValue = null,
+  disabled,
+  size = "md",
+  variant = "outline",
+  fullWidth,
+  className
+}) {
+  const internalId = React5.useId();
+  const selectId = id ?? internalId;
+  const isControlled = value !== void 0;
+  const [internal, setInternal] = React5.useState(defaultValue);
+  const currentValue = isControlled ? value ?? null : internal;
+  const [open, setOpen] = React5.useState(false);
+  const [activeIndex, setActiveIndex] = React5.useState(-1);
+  const wrapperRef = React5.useRef(null);
+  const listRef = React5.useRef(null);
+  const currentOption = React5.useMemo(
+    () => options.find((o) => o.value === currentValue) ?? null,
+    [options, currentValue]
+  );
+  const setValue = React5.useCallback(
+    (next) => {
+      const opt = options.find((o) => o.value === next) ?? null;
+      if (!isControlled) setInternal(next);
+      onChange?.(next, opt);
+    },
+    [isControlled, onChange, options]
+  );
+  React5.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;
+    }
+  };
+  React5.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 Pagination = ({ page, total, onChange, siblingCount = 1 }) => {
+  const clamp = (n) => Math.max(1, Math.min(total, n));
+  const range = (s, e) => Array.from({ length: e - s + 1 }, (_, i) => s + i);
+  const start = Math.max(2, page - siblingCount);
+  const end = Math.min(total - 1, page + siblingCount);
+  const mid = range(start, end);
+  const pages = [
+    1,
+    ...start > 2 ? ["\u2026"] : [],
+    ...mid,
+    ...end < total - 1 ? ["\u2026"] : [],
+    total
+  ].filter((x, i, arr) => typeof x === "number" ? arr.indexOf(x) === i : true);
+  return /* @__PURE__ */ jsxs("nav", { className: "pagination", "aria-label": "Pagination", children: [
+    /* @__PURE__ */ jsx("button", { className: "pagination__item", onClick: () => onChange(clamp(page - 1)), disabled: page <= 1, children: "Prev" }),
+    pages.map(
+      (p, i) => typeof p === "number" ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: ["pagination__item", p === page && "is-active"].filter(Boolean).join(" "),
+          onClick: () => onChange(p),
+          children: p
+        },
+        i
+      ) : /* @__PURE__ */ jsx("span", { className: "pagination__ellipsis", children: "\u2026" }, i)
+    ),
+    /* @__PURE__ */ jsx("button", { className: "pagination__item", onClick: () => onChange(clamp(page + 1)), disabled: page >= total, children: "Next" })
+  ] });
+};
+var Sidebar = ({
+  items = [],
+  activeKey,
+  onItemSelect,
+  width = 240,
+  collapsible = true,
+  defaultCollapsed,
+  className,
+  style
+}) => {
+  const [collapsed, setCollapsed] = React5.useState(!!defaultCollapsed);
+  const list = Array.isArray(items) ? items : [];
+  return /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      className: ["sidebar", collapsed && "is-collapsed", className].filter(Boolean).join(" "),
+      style: { width: collapsed ? 64 : width, ...style },
+      children: [
+        collapsible && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "sidebar__toggle",
+            onClick: () => setCollapsed((c) => !c),
+            "aria-label": "Toggle sidebar"
+          }
+        ),
+        /* @__PURE__ */ jsx("nav", { className: "sidebar__nav", children: list.map((it) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: ["sidebar__item", activeKey === it.key && "is-active"].filter(Boolean).join(" "),
+            onClick: () => onItemSelect?.(it.key),
+            title: typeof it.label === "string" ? it.label : void 0,
+            children: [
+              it.icon && /* @__PURE__ */ jsx("span", { className: "sidebar__icon", children: React5.createElement(it.icon, { size: 16 }) }),
+              !collapsed && /* @__PURE__ */ jsx("span", { className: "sidebar__label", children: it.label })
+            ]
+          },
+          it.key
+        )) })
+      ]
+    }
+  );
+};
+var Modal = ({
+  open,
+  onClose,
+  closeOnOverlay = true,
+  width = 520,
+  title,
+  children,
+  ...props
+}) => {
+  React5.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 })
+          ]
+        }
+      )
+    }
+  );
+};
+
+export { Alert, Button, Card, Checkbox, FileInput, Loading, Modal, Pagination, Radio, Select, Sidebar, Switch, TextField, ToastProvider, useToast };

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@bigtablet/design-system",
+  "version": "0.1.0",
+  "description": "Bigtablet Design System UI Components",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": [
+    "**/*.scss",
+    "**/*.css"
+  ],
+  "keywords": [
+    "design-system",
+    "react",
+    "storybook",
+    "ui"
+  ],
+  "author": "sangmin",
+  "license": "MIT",
+  "peerDependencies": {
+    "lucide-react": ">=0.552.0",
+    "react": "^19",
+    "react-dom": "^19",
+    "react-toastify": ">=11.0.5"
+  },
+  "devDependencies": {
+    "@storybook/addon-essentials": "8.6.14",
+    "@storybook/react": "8.6.14",
+    "@storybook/react-vite": "8.6.14",
+    "@types/node": "^24",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "esbuild-sass-plugin": "^3",
+    "lucide-react": "^0.552.0",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "react-toastify": "^11.0.5",
+    "sass-embedded": "^1.93.3",
+    "storybook": "8.6.14",
+    "tsup": "^8.5.0",
+    "typescript": "^5",
+    "vite": "^5"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "storybook": "storybook dev -p 6006",
+    "build:sb": "storybook build",
+    "test": "echo \"no tests yet\""
+  }
+}