@jho951/ui-components 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 jho951
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,37 @@
+# @jho951/ui-components
+
+React UI component library.
+
+## Install
+
+```bash
+npm i @jho951/ui-components
+# or
+pnpm add @jho951/ui-components
+```
+
+## Usage
+
+```tsx
+import { Modal, BaseButton } from '@jho951/ui-components';
+
+export function Example() {
+  return (
+    <Modal isOpen title="Hello">
+      <BaseButton>OK</BaseButton>
+    </Modal>
+  );
+}
+```
+
+## Styles (CSS)
+
+```ts
+import '@jho951/ui-components/theme.css';
+import '@jho951/ui-components/reset.css';
+import '@jho951/ui-components/utils.css';
+```
+
+## License
+
+MIT

package/dist/arrow-2URCOGMX.svg

@@ -0,0 +1,11 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <polyline points="6 9 12 15 18 9" />
+</svg>

package/dist/assert/index.d.ts

@@ -0,0 +1,3 @@
+declare const SVG_ASSETS: Record<string, any>;
+
+export { SVG_ASSETS };

package/dist/assert/index.js

@@ -0,0 +1,7 @@
+import "../chunk-DZ3NPY6X.js";
+import {
+  SVG_ASSETS
+} from "../chunk-PLGHTHAJ.js";
+export {
+  SVG_ASSETS
+};

package/dist/chunk-PLGHTHAJ.js

@@ -0,0 +1,23 @@
+// assert/svg/arrow.svg
+var arrow_default = "./arrow-2URCOGMX.svg";
+
+// assert/svg/close.svg
+var close_default = "./close-JPE5H3ZO.svg";
+
+// assert/svg/spinner.svg
+var spinner_default = "./spinner-GIDMICZO.svg";
+
+// assert/svg/required.svg
+var required_default = "./required-TPNMLA3A.svg";
+
+// assert/svg/index.ts
+var SVG_ASSETS = {
+  arrow: arrow_default,
+  close: close_default,
+  spinner: spinner_default,
+  required: required_default
+};
+
+export {
+  SVG_ASSETS
+};

package/dist/chunk-Q55QXUNN.js

@@ -0,0 +1,81 @@
+// lib/deep-freeze.ts
+function deepFreeze(obj, seen = /* @__PURE__ */ new WeakSet()) {
+  if (obj === null || typeof obj !== "object" || seen.has(obj)) {
+    return obj;
+  }
+  seen.add(obj);
+  const keys = [...Object.getOwnPropertyNames(obj), ...Object.getOwnPropertySymbols(obj)];
+  for (const k of keys) {
+    const v = obj[k];
+    if (v && typeof v === "object") {
+      deepFreeze(v, seen);
+    }
+  }
+  return Object.freeze(obj);
+}
+
+// lib/cn.ts
+function cn(...inputs) {
+  const frozenInputs = deepFreeze(inputs);
+  const classList = frozenInputs.filter((item) => typeof item === "string" && item.trim() !== "");
+  return classList.join(" ");
+}
+
+// lib/dom.ts
+function ensurePortalRoot(id) {
+  if (typeof document === "undefined") {
+    return {};
+  }
+  let el = document.getElementById(id);
+  if (!el) {
+    el = document.createElement("div");
+    el.id = id;
+    document.body.appendChild(el);
+  }
+  return el;
+}
+
+// lib/id.ts
+function generateId() {
+  const timestamp = Date.now().toString(36);
+  const randomPart = Math.random().toString(36).slice(2, 9);
+  if (typeof window !== "undefined" && window.crypto?.randomUUID) {
+    return window.crypto.randomUUID();
+  }
+  if (typeof window !== "undefined" && window.crypto?.getRandomValues) {
+    return ("10000000-1000-4000-8000" + -1e11).replace(
+      /[018]/g,
+      (c) => (c ^ window.crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
+    );
+  }
+  return `${timestamp}-${randomPart}`;
+}
+
+// lib/os.ts
+function getUAData() {
+  const nav = navigator;
+  const uad = nav.userAgentData;
+  if (!uad || typeof uad !== "object") return null;
+  return uad;
+}
+function isMac() {
+  if (typeof window === "undefined") return false;
+  const uaData = getUAData();
+  const platforms = uaData?.platforms;
+  if (Array.isArray(platforms)) {
+    const hit = platforms.some((p2) => /mac|ios|iphone|ipad|ipados/i.test(p2.platform));
+    if (hit) return true;
+  }
+  const p = (navigator.platform || "").toLowerCase();
+  const ua = (navigator.userAgent || "").toLowerCase();
+  return /mac|iphone|ipad|ipod/.test(p) || /mac os x|iphone|ipad|ipod/.test(ua);
+}
+var MOD = isMac() ? "Meta" : "Control";
+
+export {
+  deepFreeze,
+  cn,
+  ensurePortalRoot,
+  generateId,
+  MOD
+};

package/dist/chunk-SOIXNSFH.js

@@ -0,0 +1,493 @@
+import {
+  SVG_ASSETS
+} from "./chunk-PLGHTHAJ.js";
+import {
+  useScrollLock
+} from "./chunk-VRIA2QTM.js";
+import {
+  cn,
+  ensurePortalRoot,
+  generateId
+} from "./chunk-Q55QXUNN.js";
+
+// ui/icon/Icon.tsx
+import React2 from "react";
+
+// ui/icon/Icon.module.css
+var Icon_default = {};
+
+// ui/icon/Icon.util.ts
+import React from "react";
+var svgCache = /* @__PURE__ */ new Map();
+function getRegistryIcon(name, registry) {
+  if (!registry) return void 0;
+  return registry[name];
+}
+function isExternalSvgPath(p) {
+  return /^https?:\/\//.test(p) || p.startsWith("/");
+}
+function resolveIconSrc(name, src, basePath = "/assert/icons", ext = "svg") {
+  if (src) return src;
+  if (isExternalSvgPath(name)) return name;
+  return `${basePath}/${name}.${ext}`;
+}
+function getAriaProps(title) {
+  return title ? { role: "img", "aria-label": title } : { "aria-hidden": true };
+}
+function useInlineSvg(src) {
+  const [svgText, setSvgText] = React.useState(null);
+  React.useEffect(() => {
+    let alive = true;
+    if (!src) {
+      setSvgText(null);
+      return;
+    }
+    const cached = svgCache.get(src);
+    if (cached) {
+      setSvgText(cached);
+      return;
+    }
+    fetch(src).then((r) => r.ok ? r.text() : Promise.reject()).then((txt) => {
+      if (!alive) return;
+      svgCache.set(src, txt);
+      setSvgText(txt);
+    }).catch(() => {
+      if (!alive) return;
+      setSvgText(null);
+    });
+    return () => {
+      alive = false;
+    };
+  }, [src]);
+  return svgText;
+}
+function extractSvgInner(svgText) {
+  const m = svgText.match(/<svg[^>]*>([\s\S]*?)<\/svg>/i);
+  return m ? m[1] : svgText;
+}
+function extractViewBox(svgText, fallback = "0 0 24 24") {
+  const m = svgText.match(/viewBox="([^"]+)"/i);
+  return m ? m[1] : fallback;
+}
+
+// ui/icon/Icon.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_ICONS = Object.entries(SVG_ASSETS).reduce(
+  (acc, [name, content]) => {
+    const isString = typeof content === "string";
+    const isSvgContent = isString && content.includes("<svg");
+    acc[name] = {
+      vb: isSvgContent ? extractViewBox(content) : "0 0 24 24",
+      raw: isSvgContent ? extractSvgInner(content) : void 0,
+      src: !isSvgContent ? content : void 0
+      // 문자열이 아니면 경로로 간주
+    };
+    return acc;
+  },
+  {}
+);
+var Icon = ({
+  name,
+  size = 24,
+  title,
+  color,
+  source = "auto",
+  src,
+  basePath = "/assert/svg",
+  ext = "svg",
+  icons,
+  className,
+  style,
+  ...rest
+}) => {
+  const registry = icons ?? DEFAULT_ICONS;
+  const regData = getRegistryIcon(String(name), registry);
+  const shouldUseRegistry = source === "registry" || source === "auto" && !!regData;
+  const ariaProps = getAriaProps(title);
+  const svgCommonProps = {
+    width: size,
+    height: size,
+    focusable: "false",
+    style: { color, ...style },
+    ...ariaProps,
+    ...rest
+  };
+  if (shouldUseRegistry && regData) {
+    if (regData.raw || regData.g) {
+      return /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          viewBox: regData.vb,
+          className: cn(Icon_default.icon, Icon_default.registry, className),
+          ...svgCommonProps,
+          children: [
+            regData.g?.map(
+              ({ el, ...attrs }, i) => React2.createElement(el, { key: i, ...attrs })
+            ),
+            regData.raw && /* @__PURE__ */ jsx("g", { dangerouslySetInnerHTML: { __html: regData.raw } })
+          ]
+        }
+      );
+    }
+  }
+  const finalSrc = regData?.src || resolveIconSrc(String(name), src, basePath, ext);
+  const svgText = useInlineSvg(finalSrc);
+  if (!svgText) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(Icon_default.icon, Icon_default.placeholder, className),
+        style: { width: size, height: size, ...style },
+        "aria-hidden": true
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: extractViewBox(svgText),
+      className: cn(Icon_default.icon, Icon_default.remote, className),
+      ...svgCommonProps,
+      dangerouslySetInnerHTML: { __html: extractSvgInner(svgText) }
+    }
+  );
+};
+
+// ui/arrow/Arrow.constant.ts
+var DIRECTION_MAP = {
+  down: "0deg",
+  right: "90deg",
+  up: "180deg",
+  left: "-90deg"
+};
+
+// ui/arrow/Arrow.module.css
+var Arrow_default = {};
+
+// ui/arrow/Arrow.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Arrow = ({ size = 24, direction = "down", className }) => {
+  return /* @__PURE__ */ jsx2("span", { className: cn(Arrow_default.container, className), style: { "--arrow-rotation": DIRECTION_MAP[direction] }, children: /* @__PURE__ */ jsx2(Icon, { name: "arrow", size }) });
+};
+
+// ui/backdrop/BackDrop.tsx
+import { useEffect, useState } from "react";
+
+// ui/backdrop/BackDrop.module.css
+var BackDrop_default = {};
+
+// ui/backdrop/BackDrop.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var BackDrop = ({
+  visible = false,
+  onClick,
+  className,
+  variant = "blur"
+}) => {
+  const [shouldRender, setRender] = useState(visible);
+  useEffect(() => {
+    if (visible) {
+      setRender(true);
+      document.body.style.overflow = "hidden";
+    } else {
+      const timer = setTimeout(() => {
+        setRender(false);
+        document.body.style.overflow = "auto";
+      }, 300);
+      return () => {
+        clearTimeout(timer);
+        document.body.style.overflow = "auto";
+      };
+    }
+  }, [visible]);
+  if (!shouldRender) return null;
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className: cn(
+        BackDrop_default.backdrop,
+        BackDrop_default[variant],
+        visible && BackDrop_default.isActive,
+        className
+      ),
+      onClick,
+      "aria-hidden": !visible
+    }
+  );
+};
+
+// ui/button/Button.tsx
+import { forwardRef } from "react";
+
+// ui/spinner/Spinner.module.css
+var Spinner_default = {};
+
+// ui/spinner/Spinner.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Spinner = ({ size = 24, className, label = "Loading" }) => {
+  return /* @__PURE__ */ jsx4("span", { className: cn(Spinner_default.spinner, className), role: "status", "aria-label": label, "aria-live": "polite", children: /* @__PURE__ */ jsx4(Icon, { name: "spinner", size }) });
+};
+
+// ui/button/Button.module.css
+var Button_default = {};
+
+// ui/button/Button.tsx
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+var BaseButton = forwardRef(
+  ({ className, children, variant = "primary", size = "m", disabled = false, ...rest }, ref) => {
+    return /* @__PURE__ */ jsx5(
+      "button",
+      {
+        className: cn(Button_default.button, Button_default[variant], Button_default[size], disabled && Button_default.disabled, className),
+        disabled,
+        ...rest,
+        ref,
+        children: /* @__PURE__ */ jsx5("span", { className: Button_default.label, children })
+      }
+    );
+  }
+);
+BaseButton.displayName = "BaseButton";
+var Button = forwardRef(
+  ({ children, isLoading, leftIcon, rightIcon, ...rest }, ref) => {
+    if (isLoading) return /* @__PURE__ */ jsx5(Spinner, {});
+    return /* @__PURE__ */ jsxs2(BaseButton, { ref, ...rest, children: [
+      leftIcon && /* @__PURE__ */ jsx5("span", { className: Button_default.icon, children: leftIcon }),
+      children,
+      rightIcon && /* @__PURE__ */ jsx5("span", { className: Button_default.icon, children: rightIcon })
+    ] });
+  }
+);
+Button.displayName = "Button";
+
+// ui/button/Button.constant.ts
+var BUTTON_SIZES = ["s", "m", "l"];
+var BUTTON_VARIANTS = ["primary", "secondary", "ghost", "text"];
+
+// ui/card/Card.module.css
+var Card_default = {};
+
+// ui/card/Card.utils.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var createCardSection = (name) => {
+  const Section = ({ className, children, ...rest }) => {
+    return /* @__PURE__ */ jsx6("div", { className: cn(Card_default[name.toLowerCase()], className), ...rest, children });
+  };
+  Section.displayName = `Card.${name}`;
+  return Section;
+};
+
+// ui/card/Card.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var CardRoot = forwardRef2(
+  ({ children, className, ...rest }, ref) => {
+    return /* @__PURE__ */ jsx7("section", { className: cn(Card_default.card, className), ...rest, ref, children });
+  }
+);
+var Card = CardRoot;
+Card.Header = createCardSection("Header");
+Card.Body = createCardSection("Body");
+Card.Footer = createCardSection("Footer");
+CardRoot.displayName = "Card";
+
+// ui/checkbox/CheckBox.tsx
+import { forwardRef as forwardRef3, useEffect as useEffect2, useImperativeHandle, useRef } from "react";
+
+// ui/label/Label.module.css
+var Label_default = {};
+
+// ui/label/Label.tsx
+import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+var Label = ({ className, children, htmlFor, required = false, variant = "default", ...rest }) => {
+  return /* @__PURE__ */ jsxs3("label", { htmlFor, className: cn(Label_default.label, Label_default[variant], className), ...rest, children: [
+    children,
+    required && /* @__PURE__ */ jsx8(Icon, { className: Label_default.required, name: "required" })
+  ] });
+};
+
+// ui/checkbox/CheckBox.module.css
+var CheckBox_default = {};
+
+// ui/checkbox/CheckBox.tsx
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+var Checkbox = forwardRef3(
+  ({ label, error, indeterminate, className, ...rest }, ref) => {
+    const id = rest.id || generateId();
+    const inputRef = useRef(null);
+    useImperativeHandle(ref, () => inputRef.current);
+    useEffect2(() => {
+      if (inputRef.current) inputRef.current.indeterminate = !!indeterminate;
+    }, [indeterminate]);
+    return /* @__PURE__ */ jsxs4(Label, { htmlFor: id, className: cn(CheckBox_default.container, rest.disabled && CheckBox_default.disabled, className), children: [
+      /* @__PURE__ */ jsxs4("div", { className: CheckBox_default.wrapper, children: [
+        /* @__PURE__ */ jsx9("input", { id, className: "sr-only", type: "checkbox", ref: inputRef, ...rest }),
+        /* @__PURE__ */ jsx9("div", { className: cn(CheckBox_default.styledBox, error && CheckBox_default.error, rest.checked && CheckBox_default.checked, indeterminate && CheckBox_default.indeterminate), children: (rest.checked || indeterminate) && /* @__PURE__ */ jsx9(Icon, { name: indeterminate ? "indeterminate" : "check" }) })
+      ] }),
+      label && /* @__PURE__ */ jsx9("span", { className: CheckBox_default.labelText, children: label })
+    ] });
+  }
+);
+Checkbox.displayName = "Checkbox";
+
+// ui/divider/Divider.module.css
+var Divider_default = {};
+
+// ui/divider/Divider.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+var Divider = () => {
+  return /* @__PURE__ */ jsx10("section", { className: Divider_default.divider });
+};
+
+// ui/form/Form.module.css
+var Form_default = {};
+
+// ui/form/Form.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+var Form = ({ children, onSubmit, className, ...rest }) => {
+  return /* @__PURE__ */ jsx11("form", { onSubmit, className: cn(Form_default.container, className), noValidate: true, ...rest, children });
+};
+
+// ui/modal/Modal.tsx
+import { useCallback, useEffect as useEffect3, useRef as useRef2, useState as useState2 } from "react";
+import { createPortal } from "react-dom";
+
+// ui/modal/Modal.module.css
+var Modal_default = {};
+
+// ui/modal/Modal.tsx
+import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
+var Modal = ({ isOpen, content, onClose, title = "\uBBF8\uB9AC\uBCF4\uAE30", size = "medium" }) => {
+  const [mounted, setMounted] = useState2(false);
+  const [visible, setVisible] = useState2(false);
+  const [portalElement, setPortalElement] = useState2(null);
+  const modalRef = useRef2(null);
+  useEffect3(() => {
+    if (!isOpen) {
+      setVisible(false);
+      const t = window.setTimeout(() => {
+        setMounted(false);
+      }, 300);
+      return () => window.clearTimeout(t);
+    }
+    setMounted(true);
+    setPortalElement(ensurePortalRoot("modal-root"));
+    const raf = requestAnimationFrame(() => setVisible(true));
+    return () => cancelAnimationFrame(raf);
+  }, [isOpen]);
+  useScrollLock(mounted);
+  const handleClose = useCallback(() => {
+    setVisible(false);
+    setTimeout(onClose, 300);
+  }, [onClose]);
+  useEffect3(() => {
+    if (!visible) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") handleClose();
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    modalRef.current?.focus();
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [visible, handleClose]);
+  if (!mounted || !portalElement) return null;
+  return createPortal(
+    /* @__PURE__ */ jsxs5("div", { className: Modal_default.container, role: "presentation", children: [
+      /* @__PURE__ */ jsx12(BackDrop, { className: Modal_default.overlay, visible, onClick: handleClose }),
+      /* @__PURE__ */ jsxs5(
+        "div",
+        {
+          className: cn(Modal_default.modal, Modal_default[size], visible && Modal_default.show),
+          ref: modalRef,
+          tabIndex: -1,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": "modal-title",
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            /* @__PURE__ */ jsxs5("section", { className: Modal_default.header, children: [
+              /* @__PURE__ */ jsx12("h2", { id: "modal-title", className: Modal_default.title, children: title }),
+              /* @__PURE__ */ jsx12(
+                "button",
+                {
+                  onClick: handleClose,
+                  className: Modal_default.closeBtn,
+                  "aria-label": "\uBAA8\uB2EC \uB2EB\uAE30",
+                  children: /* @__PURE__ */ jsx12("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx12("path", { d: "M18 6L6 18M6 6l12 12" }) })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx12("article", { className: Modal_default.content, children: /* @__PURE__ */ jsx12("div", { dangerouslySetInnerHTML: { __html: content } }) })
+          ]
+        }
+      )
+    ] }),
+    portalElement
+  );
+};
+
+// ui/tag/Tag.module.css
+var Tag_default = {};
+
+// ui/tag/Tag.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+var Tag = ({ active, color = "default", children }) => {
+  return /* @__PURE__ */ jsx13("span", { className: cn(Tag_default.tag, Tag_default[color], active && Tag_default.active), children });
+};
+
+// ui/textarea/Textarea.tsx
+import { forwardRef as forwardRef4, useEffect as useEffect4, useImperativeHandle as useImperativeHandle2, useRef as useRef3 } from "react";
+
+// ui/textarea/Textarea.module.css
+var Textarea_default = {};
+
+// ui/textarea/Textarea.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+var Textarea = forwardRef4(
+  ({ autoResize = true, className, value, ...rest }, ref) => {
+    const innerRef = useRef3(null);
+    useImperativeHandle2(ref, () => innerRef.current, []);
+    useEffect4(() => {
+      if (!autoResize || !innerRef.current) return;
+      const el = innerRef.current;
+      el.style.height = "auto";
+      el.style.height = `${el.scrollHeight}px`;
+    }, [value, autoResize]);
+    return /* @__PURE__ */ jsx14(
+      "textarea",
+      {
+        className: cn(Textarea_default.textarea, autoResize && Textarea_default.autoResize, className),
+        ref: innerRef,
+        value,
+        ...rest
+      }
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+
+export {
+  getRegistryIcon,
+  isExternalSvgPath,
+  resolveIconSrc,
+  getAriaProps,
+  useInlineSvg,
+  extractSvgInner,
+  extractViewBox,
+  Icon,
+  DIRECTION_MAP,
+  Arrow,
+  BackDrop,
+  Spinner,
+  Button,
+  BUTTON_SIZES,
+  BUTTON_VARIANTS,
+  createCardSection,
+  Card,
+  Label,
+  Checkbox,
+  Divider,
+  Form,
+  Modal,
+  Tag,
+  Textarea
+};