motile-ui 1.2.2 → 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';

package/dist/components/Tab/Tab.css

@@ -0,0 +1 @@
+.motile-tab{display:flex;gap:0}.motile-tab--horizontal{flex-direction:column}.motile-tab--vertical{flex-direction:row;align-items:flex-start}.motile-tab--disabled{pointer-events:none;opacity:.5}.motile-tab__list{display:flex;position:relative;border-bottom:1px solid #e5e7eb;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;touch-action:pan-x;overscroll-behavior-x:contain;cursor:grab;scrollbar-width:none;-ms-overflow-style:none}.motile-tab__list:active{cursor:grabbing}.motile-tab__list::-webkit-scrollbar{display:none}.motile-tab__list--horizontal{flex-direction:row;gap:0}.motile-tab__list--vertical{flex-direction:column;overflow-x:hidden;overflow-y:auto;touch-action:pan-y;border-bottom:none;border-right:1px solid #e5e7eb;min-width:200px;max-height:600px}.motile-tab__list--underline{border-bottom:1px solid #e5e7eb}.motile-tab__list--vertical.motile-tab__list--underline{border-bottom:none;border-right:1px solid #e5e7eb}.motile-tab__list--pill{gap:8px;border:none}.motile-tab__list--vertical.motile-tab__list--pill{border:none}.motile-tab__trigger{border:none;background:none;margin:0;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;position:relative;padding:12px 20px;min-width:fit-content;font-size:14px;font-weight:500;color:#6b7280;text-align:center;transition:all .2s cubic-bezier(.4,0,.2,1)}.motile-tab__trigger:focus-visible{outline:none;background-color:color-mix(in srgb,var(--motile-tab-color, var(--motile-ui-tab, var(--motile-theme, #3b82f6))) 5%,transparent)}.motile-tab__trigger--disabled{cursor:not-allowed;opacity:.5}.motile-tab__trigger--underline{border-bottom:2px solid transparent;padding-bottom:10px}.motile-tab__trigger--underline:not(.motile-tab__trigger--disabled):hover{color:#374151}.motile-tab__trigger--underline.motile-tab__trigger--active,.motile-tab__trigger--underline.motile-tab__trigger--active:hover,.motile-tab__trigger--underline.motile-tab__trigger--active:focus,.motile-tab__trigger--underline.motile-tab__trigger--active:active{color:var( --motile-tab-color, var(--motile-ui-tab, var(--motile-theme, #3b82f6)) );border-bottom-color:var( --motile-tab-color, var(--motile-ui-tab, var(--motile-theme, #3b82f6)) )}.motile-tab__trigger--underline[data-orientation=vertical]{border-bottom:none;border-right:2px solid transparent;padding-bottom:12px;padding-right:18px;width:100%;justify-content:flex-start;align-items:flex-start}.motile-tab__trigger--underline[data-orientation=vertical].motile-tab__trigger--active,.motile-tab__trigger--underline[data-orientation=vertical].motile-tab__trigger--active:hover,.motile-tab__trigger--underline[data-orientation=vertical].motile-tab__trigger--active:focus,.motile-tab__trigger--underline[data-orientation=vertical].motile-tab__trigger--active:active{border-right-color:var( --motile-tab-color, var(--motile-ui-tab, var(--motile-theme, #3b82f6)) );border-bottom-color:transparent}.motile-tab__trigger--pill{border-radius:9999px;border:none;background-color:transparent;padding:10px 20px;color:#6b7280;font-weight:500}.motile-tab__trigger--pill:not(.motile-tab__trigger--disabled):hover{background-color:#0000000d;color:#374151}.motile-tab__trigger--pill.motile-tab__trigger--active,.motile-tab__trigger--pill.motile-tab__trigger--active:hover,.motile-tab__trigger--pill.motile-tab__trigger--active:focus,.motile-tab__trigger--pill.motile-tab__trigger--active:active{background-color:var( --motile-tab-color, var(--motile-ui-tab, var(--motile-theme, #3b82f6)) );color:#fff;font-weight:600}.motile-tab__trigger--pill[data-orientation=vertical]{width:100%;justify-content:flex-start;align-items:flex-start}.motile-tab__content{padding:20px 0;outline:none;animation:fadeIn .2s ease}.motile-tab--vertical .motile-tab__content{padding:0 0 0 20px}.motile-tab__content[hidden]{display:none}.motile-tab__content--active{animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.motile-tab__trigger{padding:12px 24px;font-size:15px;transition:color .15s cubic-bezier(.4,0,.2,1),border-bottom-color .15s cubic-bezier(.4,0,.2,1),border-right-color .15s cubic-bezier(.4,0,.2,1),background-color .15s cubic-bezier(.4,0,.2,1),opacity .15s cubic-bezier(.4,0,.2,1)}.motile-tab__trigger--underline{padding-bottom:8px}.motile-tab__trigger--underline[data-orientation=vertical]{padding:10px 14px 10px 16px}.motile-tab__trigger--pill{padding:8px 16px}.motile-tab__list--vertical{min-width:160px}.motile-tab__content{padding:16px 0}.motile-tab--vertical .motile-tab__content{padding:0 0 0 16px}}@media print{.motile-tab__list{border:none}.motile-tab__trigger{display:none}.motile-tab__content[hidden]{display:block}}@media (prefers-color-scheme: dark){.motile-tab__list{border-color:#374151}.motile-tab__list--vertical,.motile-tab__list--vertical.motile-tab__list--underline{border-right-color:#374151;border-bottom-color:transparent}.motile-tab__trigger{color:#9ca3af}.motile-tab__trigger:not(.motile-tab__trigger--disabled):hover{color:#d1d5db}.motile-tab__trigger:focus-visible{background-color:color-mix(in srgb,var( --motile-tab-color, var(--motile-ui-tab, var(--motile-theme, #60a5fa)) ) 8%,transparent)}.motile-tab__trigger--underline.motile-tab__trigger--active,.motile-tab__trigger--underline.motile-tab__trigger--active:hover,.motile-tab__trigger--underline.motile-tab__trigger--active:focus,.motile-tab__trigger--underline.motile-tab__trigger--active:active{color:var( --motile-tab-color, var(--motile-ui-tab, var(--motile-theme, #60a5fa)) )}.motile-tab__trigger--underline[data-orientation=vertical].motile-tab__trigger--active,.motile-tab__trigger--underline[data-orientation=vertical].motile-tab__trigger--active:hover,.motile-tab__trigger--underline[data-orientation=vertical].motile-tab__trigger--active:focus,.motile-tab__trigger--underline[data-orientation=vertical].motile-tab__trigger--active:active{border-right-color:var( --motile-tab-color, var(--motile-ui-tab, var(--motile-theme, #60a5fa)) )}.motile-tab__trigger--pill{color:#9ca3af}.motile-tab__trigger--pill:not(.motile-tab__trigger--disabled):hover{background-color:#ffffff1a;color:#d1d5db}.motile-tab__trigger--pill.motile-tab__trigger--active,.motile-tab__trigger--pill.motile-tab__trigger--active:hover,.motile-tab__trigger--pill.motile-tab__trigger--active:focus,.motile-tab__trigger--pill.motile-tab__trigger--active:active{background-color:var( --motile-tab-color, var(--motile-ui-tab, var(--motile-theme, #60a5fa)) );color:#fff}}@media (prefers-reduced-motion: reduce){.motile-tab__trigger,.motile-tab__content{animation:none;transition:none}.motile-tab__content--active{animation:none}}

package/dist/components/Tab/Tab.d.ts

@@ -0,0 +1,107 @@
+import { default as React } from 'react';
+/**
+ * Tab 스타일 variant
+ * - `underline`: 하단 언더라인 (기본)
+ * - `pill`: 둥근 배경
+ */
+export type TabVariant = "underline" | "pill";
+/**
+ * Tab 방향
+ * - `horizontal`: 좌우 배치 (기본)
+ * - `vertical`: 상하 배치
+ */
+export type TabOrientation = "horizontal" | "vertical";
+/**
+ * Tab 활성화 모드
+ * - `automatic`: 포커스 시 즉시 활성화 (기본)
+ * - `manual`: Enter/Space로 활성화
+ */
+export type TabActivationMode = "automatic" | "manual";
+export interface TabRootProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /**
+     * 선택된 Tab value (controlled)
+     */
+    value?: string;
+    /**
+     * 초기 선택 Tab value (uncontrolled)
+     */
+    defaultValue?: string;
+    /**
+     * 값 변경 콜백
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * Tab 활성화 모드
+     * @default 'automatic'
+     */
+    activationMode?: TabActivationMode;
+    /**
+     * Tab 방향
+     * @default 'horizontal'
+     */
+    orientation?: TabOrientation;
+    /**
+     * Tab 스타일 variant
+     * @default 'underline'
+     */
+    variant?: TabVariant;
+    /**
+     * 비활성화 여부
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 커스텀 색상 (active tab, indicator)
+     * @example '#10b981'
+     */
+    color?: string;
+    /**
+     * children을 wrapper 없이 직접 렌더링
+     * @default false
+     */
+    asChild?: boolean;
+    children: React.ReactNode;
+}
+export interface TabListProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    /**
+     * children을 wrapper 없이 직접 렌더링
+     * @default false
+     */
+    asChild?: boolean;
+}
+export interface TabTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Tab의 고유 값 (필수)
+     */
+    value: string;
+    /**
+     * children을 wrapper 없이 직접 렌더링
+     * @default false
+     */
+    asChild?: boolean;
+    children: React.ReactNode;
+}
+export interface TabContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * 이 Content와 연결된 Tab의 value (필수)
+     */
+    value: string;
+    /**
+     * 선택되지 않아도 항상 DOM에 마운트
+     * @default false
+     */
+    forceMount?: boolean;
+    /**
+     * children을 wrapper 없이 직접 렌더링
+     * @default false
+     */
+    asChild?: boolean;
+    children: React.ReactNode;
+}
+export declare const Tab: React.ForwardRefExoticComponent<TabRootProps & React.RefAttributes<HTMLDivElement>> & {
+    Root: React.ForwardRefExoticComponent<TabRootProps & React.RefAttributes<HTMLDivElement>>;
+    List: React.ForwardRefExoticComponent<TabListProps & React.RefAttributes<HTMLDivElement>>;
+    Trigger: React.ForwardRefExoticComponent<TabTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Content: React.ForwardRefExoticComponent<TabContentProps & React.RefAttributes<HTMLDivElement>>;
+};

package/dist/components/Tab/Tab.js

@@ -0,0 +1,314 @@
+import { jsx as x } from "react/jsx-runtime";
+import { forwardRef as q, useState as et, useCallback as U, useRef as B, useEffect as K, useMemo as nt, createContext as st, useId as ot, useContext as rt } from "react";
+import { Slot as W } from "../../utils/Slot.js";
+import './Tab.css';/* empty css        */
+const g = "motile-tab", J = st(null), G = () => {
+  const e = rt(J);
+  if (!e)
+    throw new Error("Tab 컴포넌트는 Tab.Root 내에서 사용되어야 합니다");
+  return e;
+}, Y = q(
+  ({
+    value: e,
+    defaultValue: M,
+    onValueChange: p,
+    activationMode: y = "automatic",
+    orientation: i = "horizontal",
+    variant: l = "underline",
+    disabled: o = !1,
+    color: b,
+    className: h,
+    children: L,
+    asChild: w = !1,
+    style: P,
+    ...n
+  }, T) => {
+    const [f, R] = et(M), k = e !== void 0, s = k ? e : f, E = U(
+      (t) => {
+        k || R(t), p == null || p(t);
+      },
+      [k, p]
+    ), $ = B(/* @__PURE__ */ new Map()), A = B(/* @__PURE__ */ new Map()), _ = B(/* @__PURE__ */ new Map()), v = U(
+      (t, r, c, m) => {
+        $.current.set(t, r), A.current.set(t, c), _.current.set(t, m);
+      },
+      []
+    ), a = U((t) => {
+      $.current.delete(t), A.current.delete(t), _.current.delete(t);
+    }, []), d = B(!0);
+    K(() => {
+      if (!s || o) return;
+      const t = _.current.get(s);
+      if (!(t != null && t.current)) return;
+      const r = t.current, c = r.parentElement;
+      c && requestAnimationFrame(() => {
+        const m = i === "horizontal", u = m ? r.offsetLeft : r.offsetTop, O = m ? r.offsetWidth : r.offsetHeight, N = m ? c.clientWidth : c.clientHeight;
+        if (d.current) {
+          const D = u - N / 2 + O / 2;
+          setTimeout(() => {
+            const C = {
+              behavior: "smooth",
+              [m ? "left" : "top"]: Math.max(0, D)
+            };
+            c.scrollTo(C);
+          }, 100), d.current = !1;
+        } else {
+          const D = m ? c.scrollLeft : c.scrollTop, C = u + O, X = D + N;
+          if (u >= D && C <= X)
+            return;
+          let j;
+          u < D ? j = u : j = C - N;
+          const I = {
+            behavior: "smooth",
+            [m ? "left" : "top"]: Math.max(0, j)
+          };
+          c.scrollTo(I);
+        }
+      });
+    }, [s, o, i]);
+    const S = nt(
+      () => ({
+        value: s,
+        onValueChange: E,
+        orientation: i,
+        variant: l,
+        activationMode: y,
+        disabled: o,
+        color: b,
+        tabIds: $.current,
+        panelIds: A.current,
+        triggerRefs: _.current,
+        registerTab: v,
+        unregisterTab: a
+      }),
+      [
+        s,
+        E,
+        i,
+        l,
+        y,
+        o,
+        b,
+        v,
+        a
+      ]
+    ), z = [
+      g,
+      `${g}--${i}`,
+      o && `${g}--disabled`,
+      h
+    ].filter(Boolean).join(" "), F = {
+      ...P,
+      ...b && { "--motile-tab-color": b }
+    }, H = {
+      ...n,
+      "data-orientation": i,
+      "data-disabled": o ? "" : void 0
+    };
+    return /* @__PURE__ */ x(J.Provider, { value: S, children: w ? /* @__PURE__ */ x(
+      W,
+      {
+        ref: T,
+        ...H,
+        className: z,
+        style: F,
+        children: L
+      }
+    ) : /* @__PURE__ */ x("div", { ...H, ref: T, className: z, style: F, children: L }) });
+  }
+);
+Y.displayName = "Tab.Root";
+const Q = q(
+  ({ className: e, children: M, asChild: p = !1, ...y }, i) => {
+    const { orientation: l, variant: o } = G(), b = B(null), h = B(l);
+    K(() => {
+      h.current = l;
+    }, [l]);
+    const L = U(
+      (n) => {
+        b.current = n, typeof i == "function" ? i(n) : i && (i.current = n);
+      },
+      [i]
+    );
+    K(() => {
+      const n = b.current;
+      if (!n) return;
+      let T = !1, f = !1, R = 0, k = 0, s = null, E = 0;
+      const $ = (a) => {
+        if (a.button !== 0) return;
+        const d = h.current === "horizontal";
+        T = !0, f = !1, R = d ? a.clientX : a.clientY, k = d ? n.scrollLeft : n.scrollTop, n.style.scrollBehavior = "auto";
+      }, A = (a) => {
+        if (!T) return;
+        const d = h.current === "horizontal", z = (d ? a.clientX : a.clientY) - R;
+        !f && Math.abs(z) > 5 && (f = !0), f && (a.preventDefault(), E = k - z * 1.5, s || (s = requestAnimationFrame(() => {
+          d ? n.scrollLeft = E : n.scrollTop = E, s = null;
+        })));
+      }, _ = () => {
+        if (s && (cancelAnimationFrame(s), s = null), T = !1, n.style.scrollBehavior = "smooth", f) {
+          const a = (d) => {
+            d.preventDefault(), d.stopPropagation(), n.removeEventListener("click", a, !0);
+          };
+          n.addEventListener("click", a, !0);
+        }
+      }, v = () => {
+        s && (cancelAnimationFrame(s), s = null), T = !1, f = !1, n.style.scrollBehavior = "smooth";
+      };
+      return n.addEventListener("mousedown", $), document.addEventListener("mousemove", A), document.addEventListener("mouseup", _), n.addEventListener("mouseleave", v), () => {
+        s && cancelAnimationFrame(s), n.removeEventListener("mousedown", $), document.removeEventListener("mousemove", A), document.removeEventListener("mouseup", _), n.removeEventListener("mouseleave", v);
+      };
+    }, []);
+    const w = [
+      `${g}__list`,
+      `${g}__list--${l}`,
+      `${g}__list--${o}`,
+      e
+    ].filter(Boolean).join(" "), P = {
+      ...y,
+      role: "tablist",
+      "aria-orientation": l,
+      "data-orientation": l,
+      "data-variant": o
+    };
+    return p ? /* @__PURE__ */ x(W, { ref: L, ...P, className: e, children: M }) : /* @__PURE__ */ x("div", { ...P, ref: L, className: w, children: M });
+  }
+);
+Q.displayName = "Tab.List";
+const Z = q(
+  ({
+    value: e,
+    disabled: M,
+    className: p,
+    children: y,
+    asChild: i = !1,
+    ...l
+  }, o) => {
+    const {
+      value: b,
+      onValueChange: h,
+      activationMode: L,
+      disabled: w,
+      orientation: P,
+      variant: n,
+      tabIds: T,
+      panelIds: f,
+      triggerRefs: R,
+      registerTab: k,
+      unregisterTab: s
+    } = G(), E = ot(), $ = `tab-trigger-${E}`, A = `tab-panel-${E}`, _ = B(null), v = w || M;
+    K(() => (k(e, $, A, _), () => {
+      s(e);
+    }), [e, $, A, k, s]);
+    const a = (t) => {
+      var O, N;
+      if (v) return;
+      const r = Array.from(R.keys()), c = r.indexOf(e), m = P === "horizontal";
+      let u = null;
+      switch (t.key) {
+        case "ArrowRight":
+          m && (t.preventDefault(), u = (c + 1) % r.length);
+          break;
+        case "ArrowLeft":
+          m && (t.preventDefault(), u = (c - 1 + r.length) % r.length);
+          break;
+        case "ArrowDown":
+          m || (t.preventDefault(), u = (c + 1) % r.length);
+          break;
+        case "ArrowUp":
+          m || (t.preventDefault(), u = (c - 1 + r.length) % r.length);
+          break;
+        case "Enter":
+        case " ":
+          L === "manual" && (t.preventDefault(), h(e));
+          break;
+      }
+      if (u !== null) {
+        const D = r.length;
+        let C = 0;
+        const X = D;
+        for (; C < X; ) {
+          const j = r[u], I = R.get(j);
+          if (!((O = I == null ? void 0 : I.current) == null ? void 0 : O.disabled) && (I != null && I.current)) {
+            I.current.focus(), L === "automatic" && h(j);
+            break;
+          }
+          const tt = t.key === "ArrowLeft" || t.key === "ArrowUp" ? -1 : 1;
+          u = (u + tt + D) % D, C++;
+        }
+      }
+      (N = l.onKeyDown) == null || N.call(l, t);
+    }, d = () => {
+      v || h(e);
+    }, S = b === e, z = {
+      id: T.get(e) || "",
+      role: "tab",
+      "aria-selected": S,
+      "aria-controls": f.get(e) || "",
+      "aria-disabled": v || void 0,
+      "data-state": S ? "active" : "inactive",
+      tabIndex: S ? 0 : -1
+    }, F = [
+      `${g}__trigger`,
+      `${g}__trigger--${n}`,
+      S && `${g}__trigger--active`,
+      v && `${g}__trigger--disabled`,
+      p
+    ].filter(Boolean).join(" "), H = {
+      ...l,
+      ...z,
+      ref: (t) => {
+        _.current = t, typeof o == "function" ? o(t) : o && (o.current = t);
+      },
+      type: "button",
+      disabled: v,
+      onClick: d,
+      onKeyDown: a,
+      "data-value": e,
+      "data-orientation": P,
+      "data-disabled": v ? "" : void 0
+    };
+    return i ? /* @__PURE__ */ x(W, { ...H, className: F, children: y }) : /* @__PURE__ */ x("button", { ...H, className: F, children: y });
+  }
+);
+Z.displayName = "Tab.Trigger";
+const V = q(
+  ({
+    value: e,
+    forceMount: M = !1,
+    className: p,
+    children: y,
+    asChild: i = !1,
+    ...l
+  }, o) => {
+    const { value: b, tabIds: h, panelIds: L } = G(), w = b === e;
+    if (!(M || w))
+      return null;
+    const n = {
+      id: L.get(e) || "",
+      role: "tabpanel",
+      "aria-labelledby": h.get(e) || "",
+      "data-state": w ? "active" : "inactive",
+      tabIndex: 0
+    }, T = [
+      `${g}__content`,
+      w && `${g}__content--active`,
+      p
+    ].filter(Boolean).join(" "), f = {
+      ...l,
+      ...n,
+      hidden: !w,
+      "data-value": e
+    };
+    return i ? /* @__PURE__ */ x(W, { ref: o, ...f, className: p, children: y }) : /* @__PURE__ */ x("div", { ...f, ref: o, className: T, children: y });
+  }
+);
+V.displayName = "Tab.Content";
+const ft = Object.assign(Y, {
+  Root: Y,
+  List: Q,
+  Trigger: Z,
+  Content: V
+});
+export {
+  ft as Tab
+};

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

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

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

@@ -0,0 +1,2 @@
+export type { TabActivationMode, TabContentProps, TabListProps, TabOrientation, TabRootProps, TabTriggerProps, TabVariant, } from './Tab';
+export { Tab } from './Tab';

package/dist/hooks/index.d.ts

@@ -2,4 +2,5 @@ export type { UseClickOutsideOptions } from './useClickOutside';
 export { useClickOutside } from './useClickOutside';
 export type { UseEscapeKeyOptions } from './useEscapeKey';
 export { useEscapeKey } from './useEscapeKey';
+export { useMediaQuery } from './useMediaQuery';
 export { useScrollLock } from './useScrollLock';

package/dist/hooks/index.js

@@ -1,8 +1,10 @@
 import { useClickOutside as r } from "./useClickOutside.js";
-import { useEscapeKey as c } from "./useEscapeKey.js";
-import { useScrollLock as t } from "./useScrollLock.js";
+import { useEscapeKey as u } from "./useEscapeKey.js";
+import { useMediaQuery as t } from "./useMediaQuery.js";
+import { useScrollLock as f } from "./useScrollLock.js";
 export {
   r as useClickOutside,
-  c as useEscapeKey,
-  t as useScrollLock
+  u as useEscapeKey,
+  t as useMediaQuery,
+  f as useScrollLock
 };

package/dist/hooks/useMediaQuery.d.ts

@@ -0,0 +1,11 @@
+/**
+ * SSR-safe 미디어 쿼리 훅
+ *
+ * @param query - 미디어 쿼리 문자열 (예: "(max-width: 768px)")
+ * @returns 미디어 쿼리 매칭 여부
+ *
+ * @example
+ * const isMobile = useMediaQuery("(max-width: 768px)");
+ * const isDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
+ */
+export declare function useMediaQuery(query: string): boolean;

package/dist/hooks/useMediaQuery.js

@@ -0,0 +1,17 @@
+import { useState as i, useEffect as r } from "react";
+function d(e) {
+  const [s, n] = i(() => typeof window > "u" ? !1 : window.matchMedia(e).matches);
+  return r(() => {
+    const t = window.matchMedia(e);
+    n(t.matches);
+    const a = (c) => {
+      n(c.matches);
+    };
+    return t.addEventListener("change", a), () => {
+      t.removeEventListener("change", a);
+    };
+  }, [e]), s;
+}
+export {
+  d as useMediaQuery
+};

package/dist/index.d.ts

@@ -18,6 +18,8 @@ export type { NumberFlowProps } from './components/NumberFlow';
 export { NumberFlow } from './components/NumberFlow';
 export type { PopoverContentProps, PopoverRootProps, PopoverTriggerProps, } from './components/Popover';
 export { Popover } from './components/Popover';
+export type { SelectContentProps, SelectItemProps, SelectRootProps, SelectTriggerProps, SelectValueProps, } from './components/Select';
+export { Select } from './components/Select';
 export type { SheetBodyProps, SheetCloseProps, SheetContentProps, SheetHeaderProps, SheetOverlayProps, SheetPortalProps, SheetPosition, SheetRootProps, SheetTitleProps, SheetTriggerProps, } from './components/Sheet';
 export { Sheet } from './components/Sheet';
 export type { SkeletonProps } from './components/Skeleton';
@@ -26,6 +28,8 @@ export type { SpeedDialActionProps, SpeedDialActionsProps, SpeedDialDirection, S
 export { SpeedDial } from './components/SpeedDial';
 export type { SwitchProps } from './components/Switch';
 export { Switch } from './components/Switch';
+export type { TabActivationMode, TabContentProps, TabListProps, TabOrientation, TabRootProps, TabTriggerProps, TabVariant, } from './components/Tab';
+export { Tab } from './components/Tab';
 export type { AutoSizeConfig, TextareaProps } from './components/Textarea';
 export { Textarea } from './components/Textarea';
 export type { MinuteStep, TimeFormat, TimePeriod, TimePickerColumnProps, TimePickerHighlightProps, TimePickerRootProps, TimeValue, } from './components/TimePicker';

package/dist/index.js

@@ -2,39 +2,43 @@ import { Accordion as e } from "./components/Accordion/Accordion.js";
 import { Badge as p } from "./components/Badge/Badge.js";
 import { Button as x } from "./components/Button/Button.js";
 import { Checkbox as a } from "./components/Checkbox/Checkbox.js";
-import { Dock as c } from "./components/Dock/Dock.js";
-import { Drawer as l } from "./components/Drawer/Drawer.js";
-import { Input as k } from "./components/Input/Input.js";
-import { Modal as u } from "./components/Modal/Modal.js";
-import { NumberFlow as h } from "./components/NumberFlow/NumberFlow.js";
-import { Popover as w } from "./components/Popover/Popover.js";
-import { Sheet as P } from "./components/Sheet/Sheet.js";
-import { Skeleton as v } from "./components/Skeleton/Skeleton.js";
-import { SpeedDial as g } from "./components/SpeedDial/SpeedDial.js";
-import { Switch as C } from "./components/Switch/Switch.js";
-import { Textarea as I } from "./components/Textarea/Textarea.js";
-import { TimePicker as N } from "./components/TimePicker/TimePicker.js";
-import { ToastProvider as q } from "./components/Toast/Toast.js";
-import { useToast as z } from "./components/Toast/useToast.js";
-import { Tooltip as G } from "./components/Tooltip/Tooltip.js";
+import { Dock as i } from "./components/Dock/Dock.js";
+import { Drawer as T } from "./components/Drawer/Drawer.js";
+import { Input as S } from "./components/Input/Input.js";
+import { Modal as n } from "./components/Modal/Modal.js";
+import { NumberFlow as b } from "./components/NumberFlow/NumberFlow.js";
+import { Popover as s } from "./components/Popover/Popover.js";
+import { Select as D } from "./components/Select/Select.js";
+import { Sheet as v } from "./components/Sheet/Sheet.js";
+import { Skeleton as g } from "./components/Skeleton/Skeleton.js";
+import { SpeedDial as C } from "./components/SpeedDial/SpeedDial.js";
+import { Switch as I } from "./components/Switch/Switch.js";
+import { Tab as N } from "./components/Tab/Tab.js";
+import { Textarea as q } from "./components/Textarea/Textarea.js";
+import { TimePicker as z } from "./components/TimePicker/TimePicker.js";
+import { ToastProvider as G } from "./components/Toast/Toast.js";
+import { useToast as J } from "./components/Toast/useToast.js";
+import { Tooltip as L } from "./components/Tooltip/Tooltip.js";
 export {
   e as Accordion,
   p as Badge,
   x as Button,
   a as Checkbox,
-  c as Dock,
-  l as Drawer,
-  k as Input,
-  u as Modal,
-  h as NumberFlow,
-  w as Popover,
-  P as Sheet,
-  v as Skeleton,
-  g as SpeedDial,
-  C as Switch,
-  I as Textarea,
-  N as TimePicker,
-  q as ToastProvider,
-  G as Tooltip,
-  z as useToast
+  i as Dock,
+  T as Drawer,
+  S as Input,
+  n as Modal,
+  b as NumberFlow,
+  s as Popover,
+  D as Select,
+  v as Sheet,
+  g as Skeleton,
+  C as SpeedDial,
+  I as Switch,
+  N as Tab,
+  q as Textarea,
+  z as TimePicker,
+  G as ToastProvider,
+  L as Tooltip,
+  J as useToast
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "motile-ui",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "type": "module",
   "description": "A modern React component library for webview applications",
   "main": "./dist/index.js",
@@ -51,6 +51,10 @@
       "types": "./dist/components/Popover/Popover.d.ts",
       "import": "./dist/components/Popover/Popover.js"
     },
+    "./Select": {
+      "types": "./dist/components/Select/Select.d.ts",
+      "import": "./dist/components/Select/Select.js"
+    },
     "./Sheet": {
       "types": "./dist/components/Sheet/useSheetNavigation.d.ts",
       "import": "./dist/components/Sheet/useSheetNavigation.js"
@@ -67,6 +71,10 @@
       "types": "./dist/components/Switch/Switch.d.ts",
       "import": "./dist/components/Switch/Switch.js"
     },
+    "./Tab": {
+      "types": "./dist/components/Tab/Tab.d.ts",
+      "import": "./dist/components/Tab/Tab.js"
+    },
     "./Textarea": {
       "types": "./dist/components/Textarea/Textarea.d.ts",
       "import": "./dist/components/Textarea/Textarea.js"