@jho951/ui-components 0.1.0

package/dist/ui/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/ui/index.d.ts

@@ -0,0 +1,211 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React$1 from 'react';
+import React__default, { ButtonHTMLAttributes, ReactNode, HTMLAttributes, ForwardRefExoticComponent, RefAttributes, FC, SVGAttributes, LabelHTMLAttributes, TextareaHTMLAttributes } from 'react';
+export { SVG_ASSETS } from '../assert/index.js';
+
+type ArrowDirection = 'up' | 'down' | 'left' | 'right';
+interface ArrowProps {
+    size?: number;
+    direction?: ArrowDirection;
+    className?: string;
+}
+
+declare const Arrow: ({ size, direction, className }: ArrowProps) => react_jsx_runtime.JSX.Element;
+
+declare const DIRECTION_MAP: Record<ArrowDirection, string>;
+
+declare const BackDrop: ({ visible, onClick, className, variant }: BackDropProps) => react_jsx_runtime.JSX.Element | null;
+
+interface BackDropProps {
+    /** 백드롭 표시 여부 */
+    visible?: boolean;
+    /** 클릭 시 실행될 핸들러 (보통 닫기 기능) */
+    onClick?: (event: React__default.MouseEvent<HTMLDivElement>) => void;
+    /** 커스텀 클래스 */
+    className?: string;
+    /** 투명도 조절 여부 (선택 사항) */
+    variant?: 'dark' | 'transparent' | 'blur';
+}
+
+/** 버튼 타입 정의 */
+type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'text';
+/** 버튼 크기 정의 */
+type ButtonSize = 's' | 'm' | 'l';
+/**
+ * 공통 버튼 속성 정의 (버튼/링크 모두 공유)
+ * 실제 button 엘리먼트에 필요한 props까지 확장
+ */
+interface BaseButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** 버튼의 텍스트 또는 요소 */
+    children: ReactNode;
+    /** 버튼의 시각적 스타일 지정 */
+    variant?: ButtonVariant;
+    /** 버튼의 크기 선택 */
+    size?: ButtonSize;
+    /** 커스텀 클래스 이름을 추가하여 스타일을 확장합니다. */
+    className?: string;
+    /** 버튼 활성화 여부 */
+    disabled?: boolean;
+}
+interface ButtonProps extends BaseButtonProps {
+    isLoading?: boolean;
+    loadingText?: string;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+}
+
+/**
+ * Button (실제 사용될 인터페이스 컴포넌트)
+ * 비즈니스 로직(로딩 시 Spinner 렌더링)을 캡슐화합니다.
+ */
+declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+declare const BUTTON_SIZES: ButtonSize[];
+declare const BUTTON_VARIANTS: ButtonVariant[];
+
+/**
+ * 카드 섹션을 생성하는 팩토리 함수입니다. (캡슐화)
+ * @param name 섹션의 이름 (Header, Body, Footer 등)
+ */
+declare const createCardSection: (name: CardSectionType) => React__default.FC<SectionProps>;
+
+declare const Card: CardComponent;
+
+type CardSectionType = 'Header' | 'Body' | 'Footer';
+type SectionProps = HTMLAttributes<HTMLElement> & {
+    className?: string;
+    children?: ReactNode;
+};
+interface CardProps extends HTMLAttributes<HTMLElement> {
+    className?: string;
+    children?: ReactNode;
+}
+interface CardComponent extends ForwardRefExoticComponent<CardProps & RefAttributes<HTMLElement>> {
+    Header: FC<SectionProps>;
+    Body: FC<SectionProps>;
+    Footer: FC<SectionProps>;
+}
+interface FormCardProps extends CardProps {
+    onSubmit?: (e: React.FormEvent) => void;
+}
+
+declare const Checkbox: React__default.ForwardRefExoticComponent<CheckboxProps & React__default.RefAttributes<HTMLInputElement>>;
+
+interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    error?: boolean;
+    indeterminate?: boolean;
+}
+
+declare const Divider: () => react_jsx_runtime.JSX.Element;
+
+declare const Form: ({ children, onSubmit, className, ...rest }: FormProps) => react_jsx_runtime.JSX.Element;
+
+interface FormProps extends React__default.FormHTMLAttributes<HTMLFormElement> {
+    children: React__default.ReactNode;
+    onSubmit: (e: React__default.FormEvent<HTMLFormElement>) => void;
+    className?: string;
+}
+
+type IconSource = "registry" | "url" | "auto";
+type IconName = string;
+type SvgTag = "path" | "rect" | "circle" | "ellipse" | "line" | "polyline" | "polygon";
+type IconElement = {
+    el: SvgTag;
+} & SVGAttributes<SVGElement>;
+interface IconData {
+    vb: string;
+    g?: IconElement[];
+    raw?: string;
+    src?: string;
+}
+type IconRegistry = Record<string, IconData>;
+type IconProps = {
+    name: IconName;
+    size?: number;
+    title?: string;
+    color?: string;
+    /** registry/url/auto */
+    source?: IconSource;
+    /** url 모드에서 직접 경로 지정 */
+    src?: string;
+    /** 기본: "/assert/icons" (프로젝트가 assert에 svg 넣는 컨벤션) */
+    basePath?: string;
+    ext?: string;
+    /** (옵션) 레지스트리 주입 */
+    icons?: IconRegistry;
+} & Omit<SVGAttributes<SVGSVGElement>, "children">;
+
+declare const Icon: ({ name, size, title, color, source, src, basePath, ext, icons, className, style, ...rest }: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare function getRegistryIcon(name: string, registry?: IconRegistry | null): IconData | undefined;
+declare function isExternalSvgPath(p: string): boolean;
+declare function resolveIconSrc(name: string, src?: string, basePath?: string, ext?: string): string;
+declare function getAriaProps(title?: string): {
+    readonly role: "img";
+    readonly "aria-label": string;
+    readonly "aria-hidden"?: undefined;
+} | {
+    readonly "aria-hidden": true;
+    readonly role?: undefined;
+    readonly "aria-label"?: undefined;
+};
+declare function useInlineSvg(src?: string): string | null;
+declare function extractSvgInner(svgText: string): string;
+declare function extractViewBox(svgText: string, fallback?: string): string;
+
+declare const Label: ({ className, children, htmlFor, required, variant, ...rest }: LabelProps) => react_jsx_runtime.JSX.Element;
+
+type LabelVariant = 'default' | 'inline' | 'capsule' | 'error' | 'floating' | 'filled' | 'outlined';
+interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+    required?: boolean;
+    variant?: LabelVariant;
+}
+
+interface ModalProps {
+    isOpen: boolean;
+    content: string;
+    onClose: () => void;
+    title?: string;
+    size?: 'small' | 'medium' | 'large' | 'full';
+}
+
+declare const Modal: ({ isOpen, content, onClose, title, size }: ModalProps) => React$1.ReactPortal | null;
+
+/**
+ * `Spinner` 컴포넌트는 시스템의 로딩 상태를 시각적으로 나타냅니다.
+ * - `Icon` 컴포넌트의 'spinner' 아이콘을 기반으로 작동합니다.
+ * - CSS 애니메이션을 통해 무한 회전하며, 접근성을 고려하여 `role="status"`를 포함합니다.
+ *
+ * ### 사용 예시
+ * ```tsx
+ * <Spinner size={32} label="데이터 불러오는 중" />
+ * ```
+ */
+declare const Spinner: ({ size, className, label }: SpinnerProps) => react_jsx_runtime.JSX.Element;
+
+interface SpinnerProps {
+    /** 아이콘 크기(px) */
+    size?: number;
+    /** 추가 클래스명 */
+    className?: string;
+    /** 스크린리더용 라벨 (기본: "Loading") */
+    label?: string;
+}
+
+declare const Tag: ({ active, color, children }: TagProps) => react_jsx_runtime.JSX.Element;
+
+type TagColor = 'default' | 'primary' | 'secondary' | 'danger';
+interface TagProps {
+    children: React__default.ReactNode;
+    active?: boolean;
+    color?: TagColor;
+}
+
+declare const Textarea: React__default.ForwardRefExoticComponent<TextareaProps & React__default.RefAttributes<HTMLTextAreaElement>>;
+
+interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    autoResize?: boolean;
+}
+
+export { Arrow, type ArrowDirection, type ArrowProps, BUTTON_SIZES, BUTTON_VARIANTS, BackDrop, type BackDropProps, type BaseButtonProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardComponent, type CardProps, type CardSectionType, Checkbox, type CheckboxProps, DIRECTION_MAP, Divider, Form, type FormCardProps, type FormProps, Icon, type IconData, type IconElement, type IconName, type IconProps, type IconRegistry, type IconSource, Label, type LabelProps, type LabelVariant, Modal, type ModalProps, type SectionProps, Spinner, type SpinnerProps, type SvgTag, Tag, type TagColor, type TagProps, Textarea, type TextareaProps, createCardSection, extractSvgInner, extractViewBox, getAriaProps, getRegistryIcon, isExternalSvgPath, resolveIconSrc, useInlineSvg };

package/dist/ui/index.js

@@ -0,0 +1,58 @@
+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 "../chunk-VRIA2QTM.js";
+import "../chunk-Q55QXUNN.js";
+export {
+  Arrow,
+  BUTTON_SIZES,
+  BUTTON_VARIANTS,
+  BackDrop,
+  Button,
+  Card,
+  Checkbox,
+  DIRECTION_MAP,
+  Divider,
+  Form,
+  Icon,
+  Label,
+  Modal,
+  SVG_ASSETS,
+  Spinner,
+  Tag,
+  Textarea,
+  createCardSection,
+  extractSvgInner,
+  extractViewBox,
+  getAriaProps,
+  getRegistryIcon,
+  isExternalSvgPath,
+  resolveIconSrc,
+  useInlineSvg
+};

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@jho951/ui-components",
+  "version": "0.1.0",
+  "private": false,
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/**",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./ui": {
+      "types": "./dist/ui/index.d.ts",
+      "import": "./dist/ui/index.js"
+    },
+    "./assert": {
+      "types": "./dist/assert/index.d.ts",
+      "import": "./dist/assert/index.js"
+    },
+    "./theme.css": "./dist/assert/style/theme.css",
+    "./reset.css": "./dist/assert/style/reset.css",
+    "./utils.css": "./dist/assert/style/class.css"
+  },
+  "peerDependencies": {
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "scripts": {
+    "build": "tsup",
+    "prepublishOnly": "pnpm run build"
+  },
+  "devDependencies": {
+    "@types/node": "^20.11.30",
+    "@types/react": "^18.3.27",
+    "@types/react-dom": "^18.3.1",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
+  },
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  }
+}