@jho951/ui-components 0.1.0

package/dist/chunk-VRIA2QTM.js

@@ -0,0 +1,81 @@
+// hook/useScroll.ts
+import { useEffect, useState } from "react";
+function useScrollY() {
+  const [scrollY, setScrollY] = useState(0);
+  useEffect(() => {
+    const handleScroll = () => setScrollY(window.scrollY);
+    handleScroll();
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+  return scrollY;
+}
+function useScrollThresholdReached(threshold) {
+  const [reached, setReached] = useState(false);
+  useEffect(() => {
+    const handler = () => {
+      setReached(window.scrollY >= threshold);
+    };
+    window.addEventListener("scroll", handler, { passive: true });
+    return () => window.removeEventListener("scroll", handler);
+  }, [threshold]);
+  return reached;
+}
+function useScrollLock(lock) {
+  useEffect(() => {
+    const originalStyle = document.body.style.overflow;
+    if (lock) {
+      document.body.style.overflow = "hidden";
+    }
+    return () => {
+      document.body.style.overflow = originalStyle;
+    };
+  }, [lock]);
+}
+function useScrollSyncIndex(containerRef, setIndex, debounceMs = 100) {
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    let timeoutId;
+    const handleScroll = () => {
+      if (timeoutId) clearTimeout(timeoutId);
+      timeoutId = window.setTimeout(() => {
+        if (!container) return;
+        const newIndex = Math.round(container.scrollLeft / container.offsetWidth);
+        setIndex(newIndex);
+      }, debounceMs);
+    };
+    container.addEventListener("scroll", handleScroll);
+    return () => {
+      container.removeEventListener("scroll", handleScroll);
+      if (timeoutId) clearTimeout(timeoutId);
+    };
+  }, [containerRef, setIndex, debounceMs]);
+}
+function useScrollDetect(delay = 100) {
+  const [isScrolling, setIsScrolling] = useState(false);
+  useEffect(() => {
+    let timeout;
+    const handleScroll = () => {
+      setIsScrolling(true);
+      clearTimeout(timeout);
+      timeout = setTimeout(() => {
+        setIsScrolling(false);
+      }, delay);
+    };
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+      clearTimeout(timeout);
+    };
+  }, [delay]);
+  return isScrolling;
+}
+
+export {
+  useScrollY,
+  useScrollThresholdReached,
+  useScrollLock,
+  useScrollSyncIndex,
+  useScrollDetect
+};

package/dist/close-JPE5H3ZO.svg

@@ -0,0 +1,10 @@
+<svg
+  viewBox="0 0 32 32"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  aria-hidden="true"
+  focusable="false"
+>
+  <line x1="8" y1="8" x2="24" y2="24" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
+  <line x1="24" y1="8" x2="8" y2="24" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
+</svg>

package/dist/hook/index.d.ts

@@ -0,0 +1,11 @@
+declare function useScrollY(): number;
+declare function useScrollThresholdReached(threshold: number): boolean;
+/**
+ * 스크롤 잠금 훅
+ * @param lock - true일 때 document.body의 스크롤을 막습니다.
+ */
+declare function useScrollLock(lock: boolean): void;
+declare function useScrollSyncIndex(containerRef: React.RefObject<HTMLElement | null>, setIndex: (index: number) => void, debounceMs?: number): void;
+declare function useScrollDetect(delay?: number): boolean;
+
+export { useScrollDetect, useScrollLock, useScrollSyncIndex, useScrollThresholdReached, useScrollY };

package/dist/hook/index.js

@@ -0,0 +1,14 @@
+import {
+  useScrollDetect,
+  useScrollLock,
+  useScrollSyncIndex,
+  useScrollThresholdReached,
+  useScrollY
+} from "../chunk-VRIA2QTM.js";
+export {
+  useScrollDetect,
+  useScrollLock,
+  useScrollSyncIndex,
+  useScrollThresholdReached,
+  useScrollY
+};

package/dist/index.css

@@ -0,0 +1,401 @@
+/* ui/icon/Icon.module.css */
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+  flex: 0 0 auto;
+}
+.registry {
+}
+.remote {
+}
+.placeholder {
+  border-radius: 6px;
+  background: currentColor;
+  opacity: 0.12;
+}
+
+/* ui/arrow/Arrow.module.css */
+.container {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.3s ease-in-out;
+  transform: rotate(var(--arrow-rotation, 0deg));
+}
+.rotate {
+  transform: rotate(180deg);
+}
+
+/* ui/backdrop/BackDrop.module.css */
+.backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: calc(var(--z-index, 1000) + 5);
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.3s ease, visibility 0.3s ease;
+  will-change: opacity, backdrop-filter;
+}
+.backdrop.is-active {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+}
+.blur {
+  background-color: rgba(var(--color-black-rgb, 0, 0, 0), 0.4);
+  -webkit-backdrop-filter: blur(var(--blur, 8px)) saturate(160%);
+  backdrop-filter: blur(var(--blur, 8px)) saturate(160%);
+}
+.transparent {
+  background-color: transparent;
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
+
+/* ui/spinner/Spinner.module.css */
+.spinner {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  animation: spin 1s linear infinite;
+}
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .spinner {
+    animation-duration: 2s;
+  }
+}
+
+/* ui/button/Button.module.css */
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: var(--border-radius, 2rem);
+  color: var(--color-white, #ffffff);
+  transition: background-color 0.3s ease, transform 0.2s ease;
+  cursor: pointer;
+}
+.primary {
+  background-color: var(--color-primary, #f0f0f0);
+}
+.secondary {
+  background-color: var(--color-second-gray, #f0f0f0);
+  color: var(--color-white, #ffffff);
+}
+.ghost {
+  background-color: transparent;
+  color: var(--color-primary, #f0f0f0);
+  border: 1px solid var(--color-primary, #f0f0f0);
+}
+.text {
+  background-color: transparent;
+  color: var(--color-black, #f0f0f0);
+}
+.disabled {
+  background-color: var(--color-gray, #e6e9ef);
+  cursor: not-allowed;
+}
+.s {
+  font-size: var(--font-s, 1.4rem);
+  padding: var(--button-size-s, 0.5rem 1rem);
+}
+.m {
+  font-size: var(--font-m, 1.6rem);
+  padding: var(--button-size-m, 0.7rem 1.8rem);
+}
+.l {
+  font-size: var(--font-l, 1.8rem);
+  padding: var(--button-size-l, 0.9rem 2.5rem);
+}
+
+/* ui/card/Card.module.css */
+.card {
+  display: flex;
+  flex-direction: column;
+  padding: 2rem;
+  border-radius: 1.2rem;
+}
+.header {
+  margin-bottom: 1rem;
+  font-weight: bold;
+  font-size: 1.8rem;
+}
+.footer {
+  margin-top: 1.5rem;
+  display: flex;
+  justify-content: flex-end;
+  gap: 1rem;
+}
+
+/* ui/label/Label.module.css */
+.label {
+  display: block;
+  font-size: 0.95rem;
+  font-weight: 500;
+  color: var(--color-text);
+  margin-bottom: 0.4rem;
+}
+.required {
+  color: var(--color-danger);
+  margin-left: 0.25rem;
+}
+.default {
+  text-align: left;
+}
+.inline {
+  display: inline-block;
+  margin-bottom: 0;
+  margin-right: 0.5rem;
+  vertical-align: middle;
+}
+.capsule {
+  display: inline-block;
+  background: rgba(var(--color-primary-rgb), 0.1);
+  color: var(--color-primary);
+  padding: 0.2rem 0.6rem;
+  border-radius: 999px;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+.error {
+  color: var(--color-danger);
+}
+.floating {
+  position: absolute;
+  top: 0.5rem;
+  left: 1rem;
+  font-size: 0.75rem;
+  color: var(--color-secondary-gray);
+  pointer-events: none;
+  transition: 0.2s ease;
+}
+.filled {
+  display: block;
+  background: var(--color-surface, #f5f7fb);
+  color: var(--color-primary, #414e92);
+  border-radius: 0.5rem 0.5rem 0 0;
+  padding: 0.5rem 1rem 0.25rem 1rem;
+  font-weight: 600;
+}
+.outlined {
+  display: block;
+  color: var(--color-primary, #414e92);
+  border: 1.5px solid var(--color-primary, #414e92);
+  border-radius: 0.5rem;
+  padding: 0.45rem 1rem 0.3rem 1rem;
+  background: transparent;
+  font-weight: 600;
+}
+
+/* ui/checkbox/CheckBox.module.css */
+.container {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  gap: 1rem;
+}
+.checkBox {
+  width: 18px;
+  height: 18px;
+  border: 2px solid #d9d9d9;
+  border-radius: 2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+  background-color: #fff;
+}
+.checked + .checkBox,
+.indeterminate + .checkBox {
+  background-color: #1890ff;
+  border-color: #1890ff;
+}
+.error {
+  border-color: var(--error-color);
+}
+.disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+/* ui/divider/Divider.module.css */
+.divider {
+  height: 0.1rem;
+  background: var(--color-border, 0.1rem);
+  margin: 0.2rem 0.6rem;
+  opacity: 0.7;
+}
+
+/* ui/form/Form.module.css */
+.container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap);
+}
+
+/* ui/modal/Modal.module.css */
+.container {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: calc(var(--z-index) + 100);
+  pointer-events: none;
+}
+.overlay {
+  pointer-events: auto;
+}
+.modal {
+  width: 90%;
+  max-height: 85vh;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--color-bg);
+  border-radius: var(--radius);
+  box-shadow: 0 20px 25px -5px rgba(var(--color-text), 0.1), 0 10px 10px -5px rgba(var(--color-text), 0.04);
+  opacity: 0;
+  transform: scale(0.95) translateY(10px);
+  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
+  pointer-events: auto;
+}
+.modal.show {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+}
+.small {
+  max-width: 400px;
+}
+.medium {
+  max-width: 640px;
+}
+.large {
+  max-width: 1024px;
+}
+.full {
+  width: 100vw;
+  height: 100vh;
+  max-height: 100vh;
+  border-radius: 0;
+}
+.header {
+  padding: 1rem 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--color-border);
+}
+.title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin: 0;
+}
+.content {
+  padding: 1.5rem;
+  overflow-y: auto;
+  flex: 1;
+}
+.closeBtn {
+  padding: 4px;
+  border-radius: 6px;
+  transition: background 0.2s;
+}
+.closeBtn:hover {
+  background-color: var(--color-gray-hover);
+}
+
+/* ui/tag/Tag.module.css */
+.tag {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.2em 0.8em;
+  font-size: 0.88rem;
+  font-weight: 500;
+  border-radius: 1em;
+  background: var(--color-tag-bg, #f3f4f7);
+  color: var(--color-tag-text, #444);
+  margin: 0 0.2em 0.2em 0;
+  transition: background 0.18s, color 0.18s;
+  cursor: default;
+}
+.default {
+  background: var(--color-tag-bg, #f3f4f7);
+  color: var(--color-tag-text, #444);
+}
+.primary {
+  background: var(--color-primary-bg, #eaf1fb);
+  color: var(--color-primary, #2955c7);
+}
+.secondary {
+  background: var(--color-secondary-bg, #f1eaff);
+  color: var(--color-secondary, #6f3ed4);
+}
+.danger {
+  background: var(--color-danger-bg, #ffe7e7);
+  color: var(--color-danger, #e74c3c);
+}
+.active {
+  box-shadow: 0 0 0 2px var(--color-primary, #2955c7);
+  background: var(--color-active-bg, #e3edfd);
+  color: var(--color-primary-dark, #1a305d);
+}
+
+/* ui/textarea/Textarea.module.css */
+.textarea {
+  width: 100%;
+  padding: 0.6rem 1.5rem;
+  border: 1px solid var(--color-bg);
+  background-color: rgba(var(--color-gray-rgb), 0.4);
+  border-radius: var(--base-radius);
+  outline: none;
+  transition: border-color 0.2s ease;
+  font-family: inherit;
+  font-size: 1.2rem;
+  resize: vertical;
+}
+.textarea:focus {
+  border: 1px solid var(--color-primary);
+  background: #fff;
+}
+.textarea.error {
+  border-color: var(--color-danger);
+  outline-color: var(--color-danger);
+}
+.textarea:disabled {
+  background: #f5f5f5;
+  color: #bbb;
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+.textarea::placeholder {
+  color: var(--color-secondary-gray);
+  font-size: inherit;
+}
+.textarea.sm {
+  font-size: 1.2rem;
+}
+.textarea.md {
+  font-size: 1.6rem;
+}
+.textarea.lg {
+  font-size: 2rem;
+}
+.autoResize {
+  resize: none;
+}

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { Arrow, ArrowDirection, ArrowProps, BUTTON_SIZES, BUTTON_VARIANTS, BackDrop, BackDropProps, BaseButtonProps, Button, ButtonProps, ButtonSize, ButtonVariant, Card, CardComponent, CardProps, CardSectionType, Checkbox, CheckboxProps, DIRECTION_MAP, Divider, Form, FormCardProps, FormProps, Icon, IconData, IconElement, IconName, IconProps, IconRegistry, IconSource, Label, LabelProps, LabelVariant, Modal, ModalProps, SectionProps, Spinner, SpinnerProps, SvgTag, Tag, TagColor, TagProps, Textarea, TextareaProps, createCardSection, extractSvgInner, extractViewBox, getAriaProps, getRegistryIcon, isExternalSvgPath, resolveIconSrc, useInlineSvg } from './ui/index.js';
+export { SVG_ASSETS } from './assert/index.js';
+export { MOD, cn, deepFreeze, ensurePortalRoot, generateId } from './lib/index.js';
+export { useScrollDetect, useScrollLock, useScrollSyncIndex, useScrollThresholdReached, useScrollY } from './hook/index.js';
+import 'react/jsx-runtime';
+import 'react';

package/dist/index.js

@@ -0,0 +1,81 @@
+import "./chunk-DZ3NPY6X.js";
+import {
+  Arrow,
+  BUTTON_SIZES,
+  BUTTON_VARIANTS,
+  BackDrop,
+  Button,
+  Card,
+  Checkbox,
+  DIRECTION_MAP,
+  Divider,
+  Form,
+  Icon,
+  Label,
+  Modal,
+  Spinner,
+  Tag,
+  Textarea,
+  createCardSection,
+  extractSvgInner,
+  extractViewBox,
+  getAriaProps,
+  getRegistryIcon,
+  isExternalSvgPath,
+  resolveIconSrc,
+  useInlineSvg
+} from "./chunk-SOIXNSFH.js";
+import {
+  SVG_ASSETS
+} from "./chunk-PLGHTHAJ.js";
+import {
+  useScrollDetect,
+  useScrollLock,
+  useScrollSyncIndex,
+  useScrollThresholdReached,
+  useScrollY
+} from "./chunk-VRIA2QTM.js";
+import {
+  MOD,
+  cn,
+  deepFreeze,
+  ensurePortalRoot,
+  generateId
+} from "./chunk-Q55QXUNN.js";
+export {
+  Arrow,
+  BUTTON_SIZES,
+  BUTTON_VARIANTS,
+  BackDrop,
+  Button,
+  Card,
+  Checkbox,
+  DIRECTION_MAP,
+  Divider,
+  Form,
+  Icon,
+  Label,
+  MOD,
+  Modal,
+  SVG_ASSETS,
+  Spinner,
+  Tag,
+  Textarea,
+  cn,
+  createCardSection,
+  deepFreeze,
+  ensurePortalRoot,
+  extractSvgInner,
+  extractViewBox,
+  generateId,
+  getAriaProps,
+  getRegistryIcon,
+  isExternalSvgPath,
+  resolveIconSrc,
+  useInlineSvg,
+  useScrollDetect,
+  useScrollLock,
+  useScrollSyncIndex,
+  useScrollThresholdReached,
+  useScrollY
+};

package/dist/lib/index.d.ts

@@ -0,0 +1,20 @@
+/**
+ * 전달받은 인자들 중 유효한 문자열만 합쳐서 하나의 클래스 문자열로 반환합니다.
+ * deepFreeze를 사용하여 처리 과정의 안정성을 높였습니다.
+ */
+declare function cn(...inputs: (string | undefined | null | boolean | object)[]): string;
+
+/** 객체를 재귀적으로 동결하여 완전한 읽기 전용 상태로 만듭니다. */
+declare function deepFreeze<T>(obj: T, seen?: WeakSet<object>): T;
+
+declare function ensurePortalRoot(id: string): HTMLElement;
+
+/**
+ * 전역 유니크 ID 생성 함수
+ */
+declare function generateId(): string;
+
+type MOD_TYPE = "Meta" | "Control";
+declare const MOD: MOD_TYPE;
+
+export { MOD, cn, deepFreeze, ensurePortalRoot, generateId };

package/dist/lib/index.js

@@ -0,0 +1,14 @@
+import {
+  MOD,
+  cn,
+  deepFreeze,
+  ensurePortalRoot,
+  generateId
+} from "../chunk-Q55QXUNN.js";
+export {
+  MOD,
+  cn,
+  deepFreeze,
+  ensurePortalRoot,
+  generateId
+};

package/dist/required-TPNMLA3A.svg

@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"
+          fill="currentColor"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linejoin="round"/>
+</svg>

package/dist/spinner-GIDMICZO.svg

@@ -0,0 +1,24 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="3"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <circle
+    cx="12"
+    cy="12"
+    r="10"
+    stroke="currentColor"
+    opacity="0.25"
+    fill="none"
+  />
+  <path
+    d="M12 2a10 10 0 0 1 10 10"
+    stroke="currentColor"
+  />
+</svg>