motile-ui 0.9.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Innopers
+
+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,216 @@
+<div align="center">
+  <img src="https://github.com/Innopers.png" alt="Motile UI Logo" width="200"/>
+
+  # Motile UI
+
+  **웹뷰 애플리케이션을 위한 모던 React 컴포넌트 라이브러리**
+
+  [![npm version](https://img.shields.io/npm/v/motile-ui.svg?style=flat-square)](https://www.npmjs.com/package/motile-ui)
+  [![npm downloads](https://img.shields.io/npm/dm/motile-ui.svg?style=flat-square)](https://www.npmjs.com/package/motile-ui)
+  [![license](https://img.shields.io/npm/l/motile-ui.svg?style=flat-square)](https://github.com/Innopers/motile-ui/blob/main/LICENSE)
+  [![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue?style=flat-square)](https://www.typescriptlang.org/)
+
+  <br/>
+
+  **[🇰🇷 한국어](#-한국어) | [🇺🇸 English](#-english)**
+
+</div>
+
+---
+
+<br/>
+<br/>
+
+# 🇰🇷 한국어
+
+## 📚 목차
+
+- [주요 기능](#-주요-기능)
+- [설치](#-설치)
+- [빠른 시작](#-빠른-시작)
+- [컴포넌트](#-컴포넌트)
+- [라이선스](#-라이선스)
+
+---
+
+## ✨ 주요 기능
+
+- 🎨 **17개의 고품질 컴포넌트** - 웹뷰 애플리케이션을 위해 세심하게 제작
+- 💪 **TypeScript 우선** - 포괄적인 타입 정의 완벽 지원
+- 🎭 **커스터마이징 가능** - CSS 변수로 쉬운 테마 설정
+- 📱 **모바일 최적화** - 터치 친화적 인터랙션과 반응형 디자인
+- ♿ **접근성** - WCAG 2.1 AA 준수 컴포넌트
+- 🎯 **트리쉐이킹 지원** - 필요한 것만 import
+- 📖 **풍부한 문서** - Storybook을 통한 라이브 예제 제공
+
+---
+
+## 📦 설치
+
+```bash
+# npm
+npm install motile-ui
+
+# yarn
+yarn add motile-ui
+
+# pnpm
+pnpm add motile-ui
+```
+
+---
+
+## 🚀 빠른 시작
+
+```tsx
+import { Button, Input, Modal } from 'motile-ui'
+
+function App() {
+  return (
+    <div>
+      <Button variant="primary" size="large">
+        클릭하세요
+      </Button>
+
+      <Input
+        label="이메일"
+        placeholder="이메일을 입력하세요"
+        type="email"
+      />
+
+      <Modal open={true} onClose={() => {}}>
+        <h2>안녕하세요 Motile UI!</h2>
+      </Modal>
+    </div>
+  )
+}
+```
+
+---
+
+## 🎨 컴포넌트
+
+- **Button** - 다양한 variant와 size를 지원하는 버튼
+- **Input** - 라벨과 검증 기능이 있는 텍스트 입력 필드
+- **Textarea** - 여러 줄 텍스트 입력 필드
+- **Checkbox** - 체크박스 입력
+- **Switch** - 토글 스위치
+- **Select** - 드롭다운 선택 메뉴
+- **Badge** - 상태 표시 배지
+- **Toast** - 알림 메시지
+- **Skeleton** - 로딩 상태 플레이스홀더
+- **SpeedDial** - 플로팅 액션 버튼
+- **Modal** - 모달 다이얼로그
+- **Drawer** - 사이드 패널
+- **Sheet** - 하단 시트
+- **Popover** - 팝오버 메뉴
+- **Tooltip** - 툴팁
+- **Accordion** - 접을 수 있는 패널
+- **Dock** - 하단 네비게이션 바
+
+---
+
+## 📄 라이선스
+
+MIT © [Innopers](https://github.com/Innopers)
+
+<br/>
+<br/>
+
+---
+
+<br/>
+<br/>
+
+# 🇺🇸 English
+
+## 📚 Table of Contents
+
+- [Features](#-features)
+- [Installation](#-installation)
+- [Quick Start](#-quick-start)
+- [Components](#-components)
+- [License](#-license)
+
+---
+
+## ✨ Features
+
+- 🎨 **17 High-Quality Components** - Carefully crafted for webview applications
+- 💪 **TypeScript First** - Full TypeScript support with comprehensive type definitions
+- 🎭 **Customizable** - Easy theming with CSS variables
+- 📱 **Mobile Optimized** - Touch-friendly interactions and responsive design
+- ♿ **Accessible** - WCAG 2.1 AA compliant components
+- 🎯 **Tree-shakeable** - Import only what you need
+- 📖 **Well Documented** - Comprehensive docs with live examples via Storybook
+
+---
+
+## 📦 Installation
+
+```bash
+# npm
+npm install motile-ui
+
+# yarn
+yarn add motile-ui
+
+# pnpm
+pnpm add motile-ui
+```
+
+---
+
+## 🚀 Quick Start
+
+```tsx
+import { Button, Input, Modal } from 'motile-ui'
+
+function App() {
+  return (
+    <div>
+      <Button variant="primary" size="large">
+        Click me
+      </Button>
+
+      <Input
+        label="Email"
+        placeholder="Enter your email"
+        type="email"
+      />
+
+      <Modal open={true} onClose={() => {}}>
+        <h2>Hello Motile UI!</h2>
+      </Modal>
+    </div>
+  )
+}
+```
+
+---
+
+## 🎨 Components
+
+- **Button** - Button with various variants and sizes
+- **Input** - Text input field with label and validation
+- **Textarea** - Multi-line text input field
+- **Checkbox** - Checkbox input
+- **Switch** - Toggle switch
+- **Select** - Dropdown select menu
+- **Badge** - Status badge indicator
+- **Toast** - Notification message
+- **Skeleton** - Loading state placeholder
+- **SpeedDial** - Floating action button
+- **Modal** - Modal dialog
+- **Drawer** - Side panel
+- **Sheet** - Bottom sheet
+- **Popover** - Popover menu
+- **Tooltip** - Tooltip
+- **Accordion** - Collapsible panel
+- **Dock** - Bottom navigation bar
+
+---
+
+## 📄 License
+
+MIT © [Innopers](https://github.com/Innopers)

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,36 @@
+import { default as React } from 'react';
+export type AccordionVariant = "default" | "outlined";
+export interface AccordionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    variant?: AccordionVariant;
+    defaultExpanded?: boolean;
+    expanded?: boolean;
+    onChange?: (expanded: boolean) => void;
+    disabled?: boolean;
+    children: React.ReactNode;
+    /**
+     * children을 wrapper 없이 직접 렌더링
+     * @default false
+     */
+    asChild?: boolean;
+}
+export interface AccordionHeaderProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    children: React.ReactNode;
+    /**
+     * children을 wrapper 없이 직접 렌더링
+     * true일 경우, children이 직접 button 역할을 함
+     * @default false
+     */
+    asChild?: boolean;
+}
+export interface AccordionContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    /**
+     * children을 wrapper 없이 직접 렌더링
+     * @default false
+     */
+    asChild?: boolean;
+}
+export declare const Accordion: React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<HTMLDivElement>> & {
+    Header: React.ForwardRefExoticComponent<AccordionHeaderProps & React.RefAttributes<HTMLButtonElement>>;
+    Content: React.ForwardRefExoticComponent<AccordionContentProps & React.RefAttributes<HTMLDivElement>>;
+};

package/dist/components/Accordion/index.d.ts

@@ -0,0 +1,2 @@
+export { Accordion } from './Accordion';
+export type { AccordionProps, AccordionHeaderProps, AccordionContentProps, } from './Accordion';

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+type BadgeVariant = "primary" | "secondary" | "outlined" | "dot" | "shimmer";
+type BadgeSize = "large" | "medium" | "small";
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /**
+     * Badge 스타일 variant
+     */
+    variant?: BadgeVariant;
+    /**
+     * Badge 크기
+     * @default 'medium'
+     */
+    size?: BadgeSize;
+    /**
+     * Badge 배경 색상 (우선순위 1)
+     * @example '#10b981'
+     */
+    color?: string;
+    /**
+     * Badge 내용
+     */
+    children?: React.ReactNode;
+}
+export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
+export {};

package/dist/components/Badge/index.d.ts

@@ -0,0 +1,2 @@
+export { Badge } from './Badge';
+export type { BadgeProps } from './Badge';

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,47 @@
+import { default as React } from 'react';
+type ButtonVariant = "primary" | "secondary" | "default";
+type ButtonSize = "large" | "medium" | "small";
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * 버튼 스타일 variant
+     * @default 'primary'
+     */
+    variant?: ButtonVariant;
+    /**
+     * 버튼 크기
+     * @default 'large'
+     */
+    size?: ButtonSize;
+    /**
+     * 전체 너비 사용 여부
+     * @default size === "large" ? true : false
+     */
+    fullWidth?: boolean;
+    /**
+     * 버튼 배경 색상 (우선순위 1)
+     * @example '#10b981'
+     */
+    color?: string;
+    /**
+     * 터치 디바이스에서도 hover 효과 활성화 여부
+     * @default false
+     */
+    hoverOnTouch?: boolean;
+    /**
+     * 로딩 상태 (로딩 중일 때 버튼 비활성화)
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * children을 wrapper 없이 직접 렌더링
+     * true일 경우, children이 직접 button 역할을 함
+     * @default false
+     */
+    asChild?: boolean;
+    /**
+     * 버튼 내용
+     */
+    children: React.ReactNode;
+}
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/components/Button/index.d.ts

@@ -0,0 +1,2 @@
+export { Button } from './Button';
+export type { ButtonProps } from './Button';

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,31 @@
+import { default as React } from 'react';
+type CheckboxVariant = "default" | "rounded" | "square";
+type CheckboxSize = "large" | "medium" | "small";
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
+    /**
+     * 체크박스 스타일 variant
+     * @default 'default'
+     */
+    variant?: CheckboxVariant;
+    /**
+     * 체크박스 크기
+     * @default 'medium'
+     */
+    size?: CheckboxSize;
+    /**
+     * 체크박스 옆 라벨
+     */
+    label?: string;
+    /**
+     * 체크박스 색상
+     * @example '#10b981'
+     */
+    color?: string;
+    /**
+     * 체크 아이콘을 항상 표시 (회색 배경 → 색상 배경)
+     * @default false
+     */
+    filled?: boolean;
+}
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/dist/components/Checkbox/index.d.ts

@@ -0,0 +1,2 @@
+export { Checkbox } from './Checkbox';
+export type { CheckboxProps } from './Checkbox';

package/dist/components/Dock/Dock.d.ts

@@ -0,0 +1,63 @@
+import { default as React } from 'react';
+/**
+ * Dock Position
+ */
+export type DockPosition = "top" | "bottom" | "left" | "right";
+/**
+ * Dock Root Props
+ */
+export interface DockRootProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * 자식 요소
+     */
+    children: React.ReactNode;
+    /**
+     * Dock 위치
+     * @default "bottom"
+     */
+    position?: DockPosition;
+    /**
+     * z-index 값
+     * @default 1000
+     */
+    zIndex?: number;
+    /**
+     * Glow effect 기본 색상 (모든 Item에 적용)
+     * 우선순위: Item.color > Root.color > --motile-ui-dock > --motile-theme > #3b82f6
+     * @example '#3b82f6'
+     */
+    color?: string;
+}
+/**
+ * Dock Item Props
+ */
+export interface DockItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * 아이콘 (ReactNode)
+     */
+    icon?: React.ReactNode;
+    /**
+     * 라벨 (툴팁)
+     */
+    label?: string;
+    /**
+     * 커스텀 자식 요소 사용
+     */
+    asChild?: boolean;
+    /**
+     * Glow effect 개별 색상 (Root.color를 override)
+     * 우선순위: Item.color > Root.color > --motile-ui-dock > --motile-theme > #3b82f6
+     * @example '#3b82f6'
+     */
+    color?: string;
+}
+export declare const DockRoot: React.ForwardRefExoticComponent<DockRootProps & React.RefAttributes<HTMLDivElement>>;
+export declare const DockItem: React.ForwardRefExoticComponent<DockItemProps & React.RefAttributes<HTMLButtonElement>>;
+export interface DockSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+export declare const DockSeparator: React.ForwardRefExoticComponent<DockSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Dock: {
+    Root: React.ForwardRefExoticComponent<DockRootProps & React.RefAttributes<HTMLDivElement>>;
+    Item: React.ForwardRefExoticComponent<DockItemProps & React.RefAttributes<HTMLButtonElement>>;
+    Separator: React.ForwardRefExoticComponent<DockSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+};

package/dist/components/Dock/index.d.ts

@@ -0,0 +1,2 @@
+export { Dock, DockRoot, DockItem, DockSeparator } from './Dock';
+export type { DockRootProps, DockItemProps, DockSeparatorProps, DockPosition, } from './Dock';

package/dist/components/Drawer/Drawer.d.ts

@@ -0,0 +1,97 @@
+import { default as React } from 'react';
+/**
+ * 백드롭 인터랙션으로 닫기 옵션
+ */
+export type CloseOnBackdropOptions = boolean | {
+    escapeKey?: boolean;
+    clickOutside?: boolean;
+};
+export interface DrawerRootProps {
+    children: React.ReactNode;
+    /**
+     * Drawer 열림/닫힘 상태 (controlled)
+     */
+    open?: boolean;
+    /**
+     * Drawer 기본 열림 상태 (uncontrolled)
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * 상태 변경 시 호출되는 콜백
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * 백드롭 인터랙션으로 닫기 허용
+     * @default true
+     */
+    closeOnBackdrop?: CloseOnBackdropOptions;
+    /**
+     * 드래그로 닫기 허용
+     * @default true
+     */
+    closeOnDrag?: boolean;
+    /**
+     * Drawer 최대 높이
+     * @default '70dvh'
+     */
+    maxHeight?: string;
+    /**
+     * Drawer 너비 (데스크톱)
+     * @default '480px'
+     */
+    width?: string;
+    /**
+     * Drawer 최대 컨테이너 너비 (데스크톱 전용)
+     */
+    maxWidth?: string;
+    /**
+     * z-index 값
+     * @default 9999
+     */
+    zIndex?: number;
+}
+export declare const DrawerRoot: React.FC<DrawerRootProps>;
+export interface DrawerTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    children: React.ReactElement;
+    asChild?: boolean;
+}
+export declare const DrawerTrigger: React.ForwardRefExoticComponent<DrawerTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export interface DrawerPortalProps {
+    children: React.ReactNode;
+    container?: HTMLElement;
+}
+export declare const DrawerPortal: React.FC<DrawerPortalProps>;
+export interface DrawerOverlayProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+export declare const DrawerOverlay: React.ForwardRefExoticComponent<DrawerOverlayProps & React.RefAttributes<HTMLDivElement>>;
+export interface DrawerContentProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+export declare const DrawerContent: React.ForwardRefExoticComponent<DrawerContentProps & React.RefAttributes<HTMLDivElement>>;
+export interface DrawerHandleProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+export declare const DrawerHandle: React.ForwardRefExoticComponent<DrawerHandleProps & React.RefAttributes<HTMLDivElement>>;
+export interface DrawerTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    children: React.ReactNode;
+    asChild?: boolean;
+}
+export declare const DrawerTitle: React.ForwardRefExoticComponent<DrawerTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+export interface DrawerBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+export declare const DrawerBody: React.ForwardRefExoticComponent<DrawerBodyProps & React.RefAttributes<HTMLDivElement>>;
+export interface DrawerCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    children: React.ReactElement;
+    asChild?: boolean;
+}
+export declare const DrawerClose: React.ForwardRefExoticComponent<DrawerCloseProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const Drawer: {
+    Root: React.FC<DrawerRootProps>;
+    Trigger: React.ForwardRefExoticComponent<DrawerTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Portal: React.FC<DrawerPortalProps>;
+    Overlay: React.ForwardRefExoticComponent<DrawerOverlayProps & React.RefAttributes<HTMLDivElement>>;
+    Content: React.ForwardRefExoticComponent<DrawerContentProps & React.RefAttributes<HTMLDivElement>>;
+    Handle: React.ForwardRefExoticComponent<DrawerHandleProps & React.RefAttributes<HTMLDivElement>>;
+    Title: React.ForwardRefExoticComponent<DrawerTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+    Body: React.ForwardRefExoticComponent<DrawerBodyProps & React.RefAttributes<HTMLDivElement>>;
+    Close: React.ForwardRefExoticComponent<DrawerCloseProps & React.RefAttributes<HTMLButtonElement>>;
+};

package/dist/components/Drawer/index.d.ts

@@ -0,0 +1,2 @@
+export { Drawer } from './Drawer';
+export type { CloseOnBackdropOptions, DrawerRootProps, DrawerTriggerProps, DrawerPortalProps, DrawerOverlayProps, DrawerContentProps, DrawerHandleProps, DrawerTitleProps, DrawerBodyProps, DrawerCloseProps, } from './Drawer';

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,53 @@
+import { default as React } from 'react';
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    /**
+     * 자동 포커스 여부
+     * @default false
+     */
+    autoFocus?: boolean;
+    /**
+     * 자동 텍스트 선택 여부 (autoFocus와 함께 사용)
+     * @default false
+     */
+    autoSelect?: boolean;
+    /**
+     * Input 스타일 variant
+     * @default 'default'
+     */
+    variant?: "default" | "underline";
+    /**
+     * 에러 상태
+     * @default false
+     */
+    isError?: boolean;
+    /**
+     * 에러 메시지 (isError가 명시되지 않으면 에러 상태로 표시)
+     */
+    errorMessage?: string;
+    /**
+     * Clear 버튼 클릭 핸들러
+     */
+    onClear?: () => void;
+    /**
+     * 왼쪽 아이콘
+     */
+    leftIcon?: React.ReactNode;
+    /**
+     * 오른쪽 아이콘
+     */
+    rightIcon?: React.ReactNode;
+    /**
+     * Input 테두리/포커스 색상 (우선순위 1)
+     * @example '#10b981'
+     */
+    color?: string;
+    /**
+     * 최대 글자수 (설정 시 자동으로 글자수 카운터 표시)
+     */
+    maxLength?: number;
+    /**
+     * Floating label (focus 전에는 placeholder 위치, focus/값 있을 때 위로 이동)
+     */
+    label?: string;
+}
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/Input/index.d.ts

@@ -0,0 +1,2 @@
+export { Input } from './Input';
+export type { InputProps } from './Input';