motile-ui 1.2.1 → 1.3.0

package/README.md

@@ -37,7 +37,7 @@
 
 ## ✨ 주요 기능
 
-- 🎨 **18개의 고품질 컴포넌트** - 웹뷰 애플리케이션을 위해 세심하게 제작
+- 🎨 **20개의 고품질 컴포넌트** - 웹뷰 애플리케이션을 위해 세심하게 제작
 - 💪 **TypeScript 우선** - 포괄적인 타입 정의 완벽 지원
 - 🎭 **커스터마이징 가능** - CSS 변수로 쉬운 테마 설정
 - 📱 **모바일 최적화** - 터치 친화적 인터랙션과 반응형 디자인
@@ -176,6 +176,7 @@ color props > --motile-ui-btn > --motile-theme > #3b82f6 (기본값)
 - **Textarea** - 여러 줄 텍스트 입력 필드
 - **Checkbox** - 체크박스 입력
 - **Switch** - 토글 스위치
+- **Select** - 드롭다운 선택 메뉴
 - **Badge** - 상태 표시 배지
 - **Toast** - 알림 메시지
 - **Skeleton** - 로딩 상태 플레이스홀더
@@ -185,6 +186,7 @@ color props > --motile-ui-btn > --motile-theme > #3b82f6 (기본값)
 - **Sheet** - 좌우에서 슬라이드되는 사이드 패널
 - **Popover** - 팝오버 메뉴
 - **Tooltip** - 툴팁
+- **Tab** - 콘텐츠 전환 탭
 - **Accordion** - 접을 수 있는 패널
 - **Dock** - 독 스타일 네비게이션 바
 - **NumberFlow** - 숫자 애니메이션 컴포넌트
@@ -219,7 +221,7 @@ MIT © [Innopers](https://github.com/Innopers)
 
 ## ✨ Features
 
-- 🎨 **18 High-Quality Components** - Carefully crafted for webview applications
+- 🎨 **20 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
@@ -358,6 +360,7 @@ color props > --motile-ui-btn > --motile-theme > #3b82f6 (default)
 - **Textarea** - Multi-line text input field
 - **Checkbox** - Checkbox input
 - **Switch** - Toggle switch
+- **Select** - Dropdown selection menu
 - **Badge** - Status badge indicator
 - **Toast** - Notification message
 - **Skeleton** - Loading state placeholder
@@ -367,6 +370,7 @@ color props > --motile-ui-btn > --motile-theme > #3b82f6 (default)
 - **Sheet** - Side panel that slides from left or right
 - **Popover** - Popover menu
 - **Tooltip** - Tooltip
+- **Tab** - Content switching tabs
 - **Accordion** - Collapsible panel
 - **Dock** - Dock-style navigation bar
 - **NumberFlow** - Animated number transition component

package/dist/components/Select/Select.css

@@ -0,0 +1 @@
+.motile-select__trigger{position:relative;box-sizing:border-box;width:100%;min-height:48px;padding:12px 40px 12px 16px;display:flex;align-items:center;background-color:#fff;border:1px solid #d1d5db;border-radius:8px;font-size:16px;color:#1f2937;text-align:left;cursor:pointer;transition:border-color .2s ease}.motile-select__trigger[aria-expanded=true]{border-color:color-mix(in srgb,var( --motile-select-color, var(--motile-ui-select, var(--motile-theme, #3b82f6)) ) 60%,transparent);background-color:#e5e7eb80;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);filter:blur(1.5px);color:#1f293780}.motile-select__trigger:disabled,.motile-select__trigger[disabled]{background-color:#f9fafb;color:#9ca3af;border-color:#e5e7eb;cursor:not-allowed}.motile-select__icon{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;transition:transform .2s}.motile-select__trigger[aria-expanded=true] .motile-select__icon{transform:translateY(-50%) rotate(180deg)}.motile-select__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.motile-select__content{position:absolute;top:calc(100% + 4px);left:0;width:100%;box-sizing:border-box;max-height:300px;overflow-y:auto;background-color:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;transform-origin:top center;visibility:hidden;opacity:0;transform:translateY(-12px) scaleY(.85);pointer-events:none;transition:opacity .45s cubic-bezier(.34,1.56,.64,1),transform .45s cubic-bezier(.34,1.56,.64,1),visibility 0s linear .45s}.motile-select__content--open{visibility:visible;opacity:1;transform:translateY(0) scaleY(1);pointer-events:auto;transition:opacity .45s cubic-bezier(.34,1.56,.64,1),transform .45s cubic-bezier(.34,1.56,.64,1),visibility 0s linear 0s}.motile-select__content::-webkit-scrollbar{width:8px}.motile-select__content::-webkit-scrollbar-track{background:transparent}.motile-select__content::-webkit-scrollbar-thumb{background-color:#d1d5db;border-radius:4px}.motile-select__content::-webkit-scrollbar-thumb:hover{background-color:#9ca3af}.motile-select__item{position:relative;box-sizing:border-box;min-height:44px;padding:12px 40px 12px 16px;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:16px;line-height:1.5;color:#1f2937;cursor:pointer;transition:background-color .15s;-webkit-tap-highlight-color:transparent}.motile-select__item:hover:not(.motile-select__item--disabled){background-color:#f9fafb}.motile-select__item--selected{font-weight:500}.motile-select__item--selected:not(.motile-select__item--disabled){background-color:color-mix(in srgb,var( --motile-select-color, var(--motile-ui-select, var(--motile-theme, #3b82f6)) ) 5%,transparent)}.motile-select__item--disabled{color:#d1d5db;cursor:not-allowed}.motile-select__check{position:absolute;right:12px;color:var( --motile-select-color, var(--motile-ui-select, var(--motile-theme, #3b82f6)) )}@media (prefers-color-scheme: dark){.motile-select__trigger:disabled,.motile-select__trigger[disabled]{background-color:#1f2937;color:#6b7280;border-color:#374151}.motile-select__content{background-color:#1f2937;border-color:#374151}.motile-select__item{color:#f9fafb}.motile-select__item:hover:not(.motile-select__item--disabled){background-color:#374151}.motile-select__item--selected:not(.motile-select__item--disabled){background-color:#3b82f626}.motile-select__item--disabled{color:#4b5563}}.motile-select__mobile-list{width:100%;box-sizing:border-box;padding-bottom:16px;padding-bottom:max(16px,env(safe-area-inset-bottom))}@media (prefers-reduced-motion: reduce){.motile-select__content,.motile-select__item{transition:none}}

package/dist/components/Select/Select.d.ts

@@ -0,0 +1,220 @@
+import { default as React } from 'react';
+/**
+ * Select Value Type
+ */
+export type SelectValue = string | number;
+/**
+ * 백드롭 인터랙션으로 닫기 옵션
+ * - boolean: ESC 키와 외부 클릭 모두 제어
+ * - object: 각각 독립적으로 제어
+ */
+export type CloseOnBackdropOptions = boolean | {
+    /**
+     * ESC 키로 닫기 허용
+     * @default false (object 사용 시)
+     */
+    escapeKey?: boolean;
+    /**
+     * 외부 클릭으로 닫기 허용
+     * @default false (object 사용 시)
+     */
+    clickOutside?: boolean;
+};
+/**
+ * SelectRoot Props
+ */
+export interface SelectRootProps {
+    /**
+     * 선택된 값 (Controlled)
+     * @remarks string | number를 지원합니다
+     */
+    value?: SelectValue;
+    /**
+     * 초기 선택 값 (Uncontrolled)
+     */
+    defaultValue?: SelectValue;
+    /**
+     * 값 변경 콜백
+     */
+    onValueChange?: (value: SelectValue) => void;
+    /**
+     * 열림/닫힘 상태 (Controlled)
+     * @remarks open prop을 제공하면 외부에서 열림 상태를 제어할 수 있습니다
+     */
+    open?: boolean;
+    /**
+     * 열림/닫힘 상태 변경 콜백
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * 비활성화 여부
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * z-index 값
+     * @default 40
+     *
+     * @example
+     * // 다른 오버레이보다 위에 표시
+     * <Select.Root zIndex={60}>
+     */
+    zIndex?: number;
+    /**
+     * 체크 아이콘 숨김 여부
+     * @default false
+     *
+     * @example
+     * // 커스텀 레이아웃 사용 시 체크 아이콘 숨기기
+     * <Select.Root hideCheckIcon>
+     */
+    hideCheckIcon?: boolean;
+    /**
+     * Select의 breakpoint (모바일/데스크톱 전환점)
+     * @default 768
+     *
+     * @example
+     * // 600px 이하: Drawer, 초과: Floating dropdown
+     * <Select.Root maxWidth="600px">
+     *
+     * // 1024px 이하: Drawer, 초과: Floating dropdown
+     * <Select.Root maxWidth={1024}>
+     *
+     * @remarks
+     * - maxWidth는 오직 mobile/desktop 전환 breakpoint로만 사용됩니다
+     * - viewport <= maxWidth: Drawer 사용 (전체 화면)
+     * - viewport > maxWidth: Floating dropdown 사용 (Trigger 너비와 동일)
+     * - Content 너비는 항상 Trigger 너비를 따라갑니다
+     * - 기본값: 768px breakpoint
+     */
+    maxWidth?: string | number;
+    /**
+     * 백드롭 인터랙션으로 닫기 제어
+     *
+     * - `true`: 외부 클릭과 ESC 키 모두 허용
+     * - `false`: 외부 클릭과 ESC 키 모두 비활성화
+     * - `{ escapeKey: true }`: ESC 키만 허용
+     * - `{ clickOutside: true }`: 외부 클릭만 허용
+     * - `{ escapeKey: true, clickOutside: true }`: 모두 허용 (명시적)
+     *
+     * @default true
+     *
+     * @example
+     * // 외부 클릭과 ESC 키 모두 허용
+     * <Select.Root closeOnBackdrop={true}>
+     *
+     * // ESC 키만 허용
+     * <Select.Root closeOnBackdrop={{ escapeKey: true }}>
+     *
+     * // 외부 클릭만 허용
+     * <Select.Root closeOnBackdrop={{ clickOutside: true }}>
+     *
+     * // 모두 비활성화
+     * <Select.Root closeOnBackdrop={false}>
+     */
+    closeOnBackdrop?: CloseOnBackdropOptions;
+    /**
+     * 커스텀 색상
+     * @example '#10b981'
+     *
+     * @remarks
+     * Trigger, Content, Item 전체에 적용되는 테마 색상을 설정합니다.
+     * CSS 변수 `--motile-select-color`로 적용됩니다.
+     */
+    color?: string;
+    /**
+     * 자식 컴포넌트
+     */
+    children: React.ReactNode;
+}
+/**
+ * SelectRoot - Context Provider
+ */
+export declare const SelectRoot: React.FC<SelectRootProps>;
+/**
+ * SelectTrigger Props
+ */
+export interface SelectTriggerProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+    /**
+     * 자식 컴포넌트
+     */
+    children: React.ReactNode;
+    /**
+     * 자식 요소를 렌더링할지 여부 (Slot 패턴)
+     * @default false
+     */
+    asChild?: boolean;
+}
+/**
+ * SelectTrigger - 버튼
+ */
+export declare const SelectTrigger: React.ForwardRefExoticComponent<SelectTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * SelectValue Props
+ */
+export interface SelectValueProps {
+    /**
+     * 값이 없을 때 표시할 placeholder
+     */
+    placeholder?: string;
+}
+/**
+ * SelectValue - 선택된 값 표시
+ */
+export declare const SelectValue: React.FC<SelectValueProps>;
+/**
+ * SelectContent Props
+ */
+export interface SelectContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * 자식 컴포넌트 (SelectItem들)
+     */
+    children: React.ReactNode;
+}
+/**
+ * SelectContent - 드롭다운 컨테이너 (Portal)
+ * 모바일에서는 Drawer로, 데스크톱에서는 floating dropdown으로 렌더링
+ */
+export declare const SelectContent: React.ForwardRefExoticComponent<SelectContentProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * SelectItem Props
+ */
+export interface SelectItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /**
+     * 옵션 값 (선택적)
+     * @remarks
+     * - value prop을 제공하면 SelectValue가 자동으로 label을 표시합니다
+     * - value prop이 없으면 onClick으로 완전히 제어할 수 있습니다
+     */
+    value?: SelectValue;
+    /**
+     * 선택 상태 (선택적)
+     * @remarks
+     * - selected prop을 제공하면 value 비교보다 우선합니다
+     * - 객체 데이터를 사용할 때 유용합니다
+     */
+    selected?: boolean;
+    /**
+     * 비활성화 여부
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 표시할 내용
+     */
+    children: React.ReactNode;
+}
+/**
+ * SelectItem - 개별 옵션
+ */
+export declare const SelectItem: React.ForwardRefExoticComponent<SelectItemProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Select Namespace
+ */
+export declare const Select: {
+    Root: React.FC<SelectRootProps>;
+    Trigger: React.ForwardRefExoticComponent<SelectTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Value: React.FC<SelectValueProps>;
+    Content: React.ForwardRefExoticComponent<SelectContentProps & React.RefAttributes<HTMLDivElement>>;
+    Item: React.ForwardRefExoticComponent<SelectItemProps & React.RefAttributes<HTMLDivElement>>;
+};

package/dist/components/Select/Select.js

@@ -0,0 +1,323 @@
+import { jsxs as L, jsx as n } from "react/jsx-runtime";
+import M, { useEffect as j, useState as R, useRef as P, useId as ee, useCallback as $, createContext as te, useContext as oe } from "react";
+import { Drawer as C } from "../Drawer/Drawer.js";
+import { useClickOutside as se } from "../../hooks/useClickOutside.js";
+import { useEscapeKey as ne } from "../../hooks/useEscapeKey.js";
+import { useMediaQuery as le } from "../../hooks/useMediaQuery.js";
+import { Slot as ie } from "../../utils/Slot.js";
+import './Select.css';/* empty css           */
+const O = te(null), z = () => {
+  const e = oe(O);
+  if (!e)
+    throw new Error("Select components must be used within Select.Root");
+  return e;
+}, Q = ({
+  value: e,
+  defaultValue: c,
+  onValueChange: l,
+  open: i,
+  onOpenChange: o,
+  disabled: a = !1,
+  zIndex: u = 40,
+  hideCheckIcon: g = !1,
+  maxWidth: r = 768,
+  closeOnBackdrop: s = !0,
+  color: S,
+  children: w
+}) => {
+  const [d, _] = R(c), [y, p] = R(!1), f = P(null), v = P(null), m = e !== void 0, h = m ? e : d, E = i !== void 0, b = E ? i : y, K = P(b);
+  K.current = b;
+  const [D, T] = R(/* @__PURE__ */ new Map()), F = `select-content-${ee()}`, G = r ? `(max-width: ${typeof r == "number" ? `${r}px` : r})` : "(max-width: 768px)", k = le(G), J = typeof s == "boolean" ? s : s.clickOutside ?? !1, X = typeof s == "boolean" ? s : s.escapeKey ?? !1, x = $(
+    (t) => {
+      E || p(t), o == null || o(t);
+    },
+    [E, o]
+  ), Y = (t) => {
+    var I;
+    m || _(t), l == null || l(t), x(!1), (I = f.current) == null || I.focus();
+  }, Z = $(
+    (t, I) => {
+      T((N) => {
+        const H = new Map(N);
+        return H.set(t, I), H;
+      });
+    },
+    []
+  ), V = $((t) => {
+    T((I) => {
+      const N = new Map(I);
+      return N.delete(t), N;
+    });
+  }, []);
+  se({
+    refs: [v, f],
+    handler: () => {
+      b && J && x(!1);
+    },
+    enabled: b && !k
+  }), ne({
+    handler: () => {
+      var t;
+      b && X && (x(!1), (t = f.current) == null || t.focus());
+    },
+    enabled: b && !k
+  }), j(() => {
+    if (!b) return;
+    const t = () => {
+      x(!1);
+    };
+    return window.addEventListener("resize", t), () => window.removeEventListener("resize", t);
+  }, [b, x]), j(() => {
+    K.current && x(!1);
+  }, [k, x]);
+  const W = {
+    open: b,
+    setOpen: x,
+    value: h,
+    onValueChange: Y,
+    disabled: a,
+    triggerRef: f,
+    contentRef: v,
+    contentId: F,
+    itemLabels: D,
+    registerItem: Z,
+    unregisterItem: V,
+    zIndex: u,
+    hideCheckIcon: g,
+    isMobile: k,
+    maxWidth: r,
+    closeOnBackdrop: s,
+    color: S
+  };
+  return /* @__PURE__ */ n(O.Provider, { value: W, children: /* @__PURE__ */ n("div", { style: { position: "relative" }, children: w }) });
+};
+Q.displayName = "Select.Root";
+const B = M.forwardRef(({ children: e, className: c, style: l, asChild: i = !1, ...o }, a) => {
+  const { open: u, setOpen: g, disabled: r, triggerRef: s, contentId: S, zIndex: w, color: d } = z(), _ = () => {
+    r || g(!u);
+  }, y = M.useCallback(
+    (h) => {
+      s.current = h, typeof a == "function" ? a(h) : a && (a.current = h);
+    },
+    [a, s]
+  ), p = ["motile-select__trigger", c].filter(Boolean).join(" "), f = {
+    zIndex: w,
+    ...l,
+    ...d && { "--motile-select-color": d }
+  }, v = {
+    ref: y,
+    type: "button",
+    role: "combobox",
+    "aria-controls": S,
+    "aria-expanded": u,
+    "aria-haspopup": "listbox",
+    disabled: r,
+    className: p,
+    style: f,
+    onClick: _,
+    ...o
+  }, m = /* @__PURE__ */ n(
+    "svg",
+    {
+      className: "motile-select__icon",
+      width: "20",
+      height: "20",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ n(
+        "path",
+        {
+          d: "M5 7.5L10 12.5L15 7.5",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+  return i ? /* @__PURE__ */ n(ie, { ...v, children: e }) : /* @__PURE__ */ L("button", { ...v, children: [
+    e,
+    m
+  ] });
+});
+B.displayName = "Select.Trigger";
+const U = ({
+  placeholder: e = "선택하세요"
+}) => {
+  const { value: c, itemLabels: l } = z(), i = c ? l.get(c) : void 0;
+  return /* @__PURE__ */ n("span", { className: "motile-select__value", children: i || e });
+};
+U.displayName = "Select.Value";
+const q = M.forwardRef(({ children: e, className: c, style: l, ...i }, o) => {
+  const {
+    open: a,
+    setOpen: u,
+    contentRef: g,
+    contentId: r,
+    zIndex: s,
+    isMobile: S,
+    closeOnBackdrop: w,
+    color: d
+  } = z(), [_, y] = R(!1);
+  j(() => {
+    y(!0);
+  }, []);
+  const p = M.useCallback(
+    (m) => {
+      g.current = m, typeof o == "function" ? o(m) : o && (o.current = m);
+    },
+    [o, g]
+  );
+  if (!_)
+    return null;
+  if (S)
+    return /* @__PURE__ */ L(
+      C.Root,
+      {
+        open: a,
+        onOpenChange: u,
+        closeOnBackdrop: w,
+        closeOnDrag: !0,
+        maxHeight: "70dvh",
+        zIndex: 9999,
+        children: [
+          /* @__PURE__ */ L(C.Portal, { children: [
+            /* @__PURE__ */ n(C.Overlay, {}),
+            /* @__PURE__ */ L(C.Content, { children: [
+              /* @__PURE__ */ n(C.Handle, {}),
+              /* @__PURE__ */ n(
+                C.Body,
+                {
+                  style: { padding: 0 },
+                  children: /* @__PURE__ */ n(
+                    "div",
+                    {
+                      id: r,
+                      role: "listbox",
+                      className: `motile-select__mobile-list ${c || ""}`,
+                      ...i,
+                      children: e
+                    }
+                  )
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ n("div", { style: { display: "none" }, "aria-hidden": "true", children: e })
+        ]
+      }
+    );
+  const f = [
+    "motile-select__content",
+    a && "motile-select__content--open",
+    c
+  ].filter(Boolean).join(" "), v = {
+    zIndex: s,
+    ...l,
+    ...d && { "--motile-select-color": d }
+  };
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      ref: p,
+      id: r,
+      role: "listbox",
+      className: f,
+      style: v,
+      tabIndex: -1,
+      ...i,
+      children: e
+    }
+  );
+});
+q.displayName = "Select.Content";
+const A = M.forwardRef(
+  ({
+    value: e,
+    selected: c,
+    disabled: l = !1,
+    children: i,
+    className: o,
+    style: a,
+    onClick: u,
+    ...g
+  }, r) => {
+    const {
+      value: s,
+      onValueChange: S,
+      setOpen: w,
+      registerItem: d,
+      hideCheckIcon: _,
+      color: y
+    } = z(), p = c !== void 0 ? c : e !== void 0 && s === e;
+    j(() => {
+      e !== void 0 && d(e, i);
+    }, [e, i, d]);
+    const f = (h) => {
+      l || (u == null || u(h), !h.defaultPrevented && (e !== void 0 ? S(e) : w(!1)));
+    }, v = [
+      "motile-select__item",
+      p && "motile-select__item--selected",
+      l && "motile-select__item--disabled",
+      o
+    ].filter(Boolean).join(" "), m = {
+      ...a,
+      ...y && { "--motile-select-color": y }
+    };
+    return /* @__PURE__ */ L(
+      "div",
+      {
+        ref: r,
+        role: "option",
+        "aria-selected": p,
+        "aria-disabled": l,
+        className: v,
+        style: m,
+        onClick: f,
+        ...g,
+        children: [
+          i,
+          p && !_ && /* @__PURE__ */ n(
+            "svg",
+            {
+              className: "motile-select__check",
+              width: "16",
+              height: "16",
+              viewBox: "0 0 16 16",
+              fill: "none",
+              xmlns: "http://www.w3.org/2000/svg",
+              children: /* @__PURE__ */ n(
+                "path",
+                {
+                  d: "M13.3334 4L6.00008 11.3333L2.66675 8",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+A.displayName = "Select.Item";
+const be = {
+  Root: Q,
+  Trigger: B,
+  Value: U,
+  Content: q,
+  Item: A
+};
+export {
+  be as Select,
+  q as SelectContent,
+  A as SelectItem,
+  Q as SelectRoot,
+  B as SelectTrigger,
+  U as SelectValue
+};

package/dist/components/Select/Select.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+export type { SelectContentProps, SelectItemProps, SelectRootProps, SelectTriggerProps, SelectValueProps, } from './Select';
+export { Select } from './Select';