motile-ui 1.2.0 → 1.2.1

package/dist/components/TimePicker/TimePicker.css

@@ -1 +1 @@
-.motile-timepicker{display:flex;position:relative;user-select:none;-webkit-user-select:none;overflow:hidden}.motile-timepicker--disabled{pointer-events:none}.motile-timepicker--full-width{width:100%}.motile-timepicker__column{flex:1;overflow-y:scroll;overflow-x:hidden;scroll-snap-type:none;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;touch-action:pan-y;cursor:grab}@media (hover: none) and (pointer: coarse){.motile-timepicker__column{scroll-snap-type:y mandatory;cursor:default}}.motile-timepicker__column::-webkit-scrollbar{display:none}.motile-timepicker__item{display:flex;align-items:center;justify-content:center;scroll-snap-align:center;font-variant-numeric:tabular-nums;color:#d1d5db}.motile-timepicker__item--selected{color:inherit}.motile-timepicker__spacer{flex-shrink:0;pointer-events:none}.motile-timepicker__highlight{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);pointer-events:none;background-color:#0000000d;border-radius:8px}@media (prefers-reduced-motion: reduce){.motile-timepicker__column{scroll-behavior:auto}}
+.motile-timepicker{display:flex;position:relative;user-select:none;-webkit-user-select:none;overflow:hidden;width:200px;height:120px}.motile-timepicker--disabled{pointer-events:none}.motile-timepicker__column{flex:1;overflow-y:scroll;overflow-x:hidden;scroll-snap-type:none;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;touch-action:pan-y;cursor:grab}@media (hover: none) and (pointer: coarse){.motile-timepicker__column{scroll-snap-type:y mandatory;cursor:default}}.motile-timepicker__column::-webkit-scrollbar{display:none}.motile-timepicker__item{display:flex;align-items:center;justify-content:center;scroll-snap-align:center;font-variant-numeric:tabular-nums;color:#d1d5db}.motile-timepicker__item--selected{color:inherit}.motile-timepicker__spacer{flex-shrink:0;pointer-events:none}.motile-timepicker__highlight{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);pointer-events:none;background-color:#0000000d;border-radius:8px;z-index:0}.motile-timepicker__column{position:relative;z-index:1}@media (prefers-reduced-motion: reduce){.motile-timepicker__column{scroll-behavior:auto}}

package/dist/components/TimePicker/TimePicker.d.ts

@@ -15,7 +15,6 @@ export interface TimePickerRootProps extends Omit<React.HTMLAttributes<HTMLDivEl
     minuteStep?: MinuteStep;
     disabled?: boolean;
     itemHeight?: number;
-    fullWidth?: boolean;
     children: React.ReactNode;
 }
 export declare const TimePickerRoot: React.ForwardRefExoticComponent<TimePickerRootProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/TimePicker/TimePicker.js

@@ -11,188 +11,187 @@ const W = ee(null), q = () => {
 }, z = U(
   ({
     value: t,
-    defaultValue: w,
+    defaultValue: R,
     onChange: v,
-    format: l = "12",
-    minuteStep: a = 5,
+    format: s = "12",
+    minuteStep: l = 5,
     disabled: p = !1,
-    itemHeight: n = 40,
-    fullWidth: g = !1,
-    children: $,
+    itemHeight: o = 40,
+    children: g,
     className: D,
     style: I,
-    ...m
-  }, M) => {
-    const [P, E] = Z(() => t || w || {
-      hour: l === "12" ? 12 : 0,
+    ...$
+  }, a) => {
+    const [x, w] = Z(() => t || R || {
+      hour: s === "12" ? 12 : 0,
       minute: 0,
-      period: l === "12" ? "AM" : void 0
-    }), k = t !== void 0, b = k ? t : P, L = O(() => l === "12" ? Array.from({ length: 12 }, (x, u) => u + 1) : Array.from({ length: 24 }, (x, u) => u), [l]), _ = O(() => {
-      const x = 60 / a;
-      return Array.from({ length: x }, (u, s) => s * a);
-    }, [a]), V = O(() => ["AM", "PM"], []), A = T(
-      (x, u) => {
-        const s = { ...b };
-        x === "hour" ? s.hour = u : x === "minute" ? s.minute = u : s.period = u, k || E(s), v == null || v(s);
+      period: s === "12" ? "AM" : void 0
+    }), M = t !== void 0, k = M ? t : x, E = O(() => s === "12" ? Array.from({ length: 12 }, (n, h) => h + 1) : Array.from({ length: 24 }, (n, h) => h), [s]), L = O(() => {
+      const n = 60 / l;
+      return Array.from({ length: n }, (h, u) => u * l);
+    }, [l]), b = O(() => ["AM", "PM"], []), V = T(
+      (n, h) => {
+        const u = { ...k };
+        n === "hour" ? u.hour = h : n === "minute" ? u.minute = h : u.period = h, M || w(u), v == null || v(u);
       },
-      [b, k, v]
-    ), o = {
-      value: b,
-      format: l,
-      minuteStep: a,
+      [k, M, v]
+    ), A = {
+      value: k,
+      format: s,
+      minuteStep: l,
       disabled: p,
-      itemHeight: n,
-      updateValue: A,
-      hourOptions: L,
-      minuteOptions: _,
-      periodOptions: V
-    }, c = {
-      "--timepicker-item-height": `${n}px`,
+      itemHeight: o,
+      updateValue: V,
+      hourOptions: E,
+      minuteOptions: L,
+      periodOptions: b
+    }, i = {
+      "--timepicker-item-height": `${o}px`,
       ...I
     };
-    return /* @__PURE__ */ S(W.Provider, { value: o, children: /* @__PURE__ */ S(
+    return /* @__PURE__ */ S(W.Provider, { value: A, children: /* @__PURE__ */ S(
       "div",
       {
-        ref: M,
-        className: `motile-timepicker ${p ? "motile-timepicker--disabled" : ""} ${g ? "motile-timepicker--full-width" : ""} ${D || ""}`,
-        style: c,
+        ref: a,
+        className: `motile-timepicker ${p ? "motile-timepicker--disabled" : ""} ${D || ""}`,
+        style: i,
         "aria-disabled": p,
         role: "group",
         "aria-label": "시간 선택",
-        ...m,
-        children: $
+        ...$,
+        children: g
       }
     ) });
   }
 );
 z.displayName = "TimePicker.Root";
-const B = U(({ type: t, className: w, ...v }, l) => {
+const B = U(({ type: t, className: R, ...v }, s) => {
   const {
-    value: a,
+    value: l,
     disabled: p,
-    itemHeight: n,
+    itemHeight: o,
     updateValue: g,
-    hourOptions: $,
-    minuteOptions: D,
-    periodOptions: I
-  } = q(), m = f(null), M = f(null), P = f(!1), E = f(!1), k = f(0), b = f(null), L = f(!0), _ = f(!1), V = f(0), A = f(0), o = O(() => {
+    hourOptions: D,
+    minuteOptions: I,
+    periodOptions: $
+  } = q(), a = f(null), x = f(null), w = f(!1), M = f(!1), k = f(0), E = f(null), L = f(!0), b = f(!1), V = f(0), A = f(0), i = O(() => {
     switch (t) {
       case "hour":
-        return $;
-      case "minute":
         return D;
-      case "period":
+      case "minute":
         return I;
+      case "period":
+        return $;
       default:
         return [];
     }
-  }, [t, $, D, I]), c = O(() => {
+  }, [t, D, I, $]), n = O(() => {
     switch (t) {
       case "hour":
-        return a.hour;
+        return l.hour;
       case "minute":
-        return a.minute;
+        return l.minute;
       case "period":
-        return a.period;
+        return l.period;
       default:
         return;
     }
-  }, [t, a]), x = T(
+  }, [t, l]), h = T(
     (e) => t === "period" ? e : e.toString().padStart(2, "0"),
     [t]
   ), u = T(
     (e, r = !0) => {
-      const i = m.current;
-      if (!i || e === void 0) return;
-      const d = o.indexOf(e);
-      if (d === -1) return;
-      const R = d * n;
-      i.scrollTo({
-        top: R,
+      const c = a.current;
+      if (!c || e === void 0) return;
+      const m = i.indexOf(e);
+      if (m === -1) return;
+      const _ = m * o;
+      c.scrollTo({
+        top: _,
         behavior: r ? "smooth" : "auto"
       });
     },
-    [o, n]
-  ), s = T(() => typeof window < "u" && window.matchMedia("(hover: none) and (pointer: coarse)").matches, []), Y = T(
+    [i, o]
+  ), P = T(() => typeof window < "u" && window.matchMedia("(hover: none) and (pointer: coarse)").matches, []), Y = T(
     (e) => {
-      if (s()) return;
+      if (P()) return;
       e.preventDefault();
-      const r = m.current;
-      r && (k.current += e.deltaY, b.current && clearTimeout(b.current), E.current = !0, b.current = setTimeout(() => {
-        const i = k.current, d = 20, R = 80;
-        let h = 0;
-        if (Math.abs(i) >= d && (h = Math.sign(i) * Math.max(1, Math.round(Math.abs(i) / R))), h !== 0) {
-          const H = o.indexOf(c), j = Math.max(
+      const r = a.current;
+      r && (k.current += e.deltaY, E.current && clearTimeout(E.current), M.current = !0, E.current = setTimeout(() => {
+        const c = k.current, m = 20, _ = 80;
+        let d = 0;
+        if (Math.abs(c) >= m && (d = Math.sign(c) * Math.max(1, Math.round(Math.abs(c) / _))), d !== 0) {
+          const H = i.indexOf(n), j = Math.max(
             0,
-            Math.min(H + h, o.length - 1)
+            Math.min(H + d, i.length - 1)
           );
           if (j !== H) {
-            const K = o[j], Q = j * n;
+            const K = i[j], Q = j * o;
             r.scrollTo({ top: Q, behavior: "smooth" }), g(t, K);
           }
         }
         k.current = 0, setTimeout(() => {
-          E.current = !1;
+          M.current = !1;
         }, 150);
       }, 50));
     },
-    [o, n, c, g, t, s]
+    [i, o, n, g, t, P]
   ), G = T(
     (e) => {
-      if (s() || p) return;
-      const r = m.current;
-      r && (_.current = !0, V.current = e.clientY, A.current = r.scrollTop, r.style.cursor = "grabbing", e.preventDefault());
+      if (P() || p) return;
+      const r = a.current;
+      r && (b.current = !0, V.current = e.clientY, A.current = r.scrollTop, r.style.cursor = "grabbing", e.preventDefault());
     },
-    [s, p]
+    [P, p]
   ), y = T((e) => {
-    if (!_.current) return;
-    const r = m.current;
+    if (!b.current) return;
+    const r = a.current;
     if (!r) return;
-    const i = V.current - e.clientY;
-    r.scrollTop = A.current + i;
+    const c = V.current - e.clientY;
+    r.scrollTop = A.current + c;
   }, []), C = T(() => {
-    if (!_.current) return;
-    _.current = !1;
-    const e = m.current;
+    if (!b.current) return;
+    b.current = !1;
+    const e = a.current;
     if (!e) return;
     e.style.cursor = "grab";
-    const r = e.scrollTop, i = Math.round(r / n), d = Math.max(0, Math.min(i, o.length - 1)), R = d * n;
-    e.scrollTo({ top: R, behavior: "smooth" });
-    const h = o[d];
-    h !== void 0 && h !== c && g(t, h);
-  }, [o, n, c, g, t]), J = T(() => {
-    if (E.current || _.current) return;
-    M.current && clearTimeout(M.current);
-    const e = s() ? 50 : 100;
-    M.current = setTimeout(() => {
-      const r = m.current;
+    const r = e.scrollTop, c = Math.round(r / o), m = Math.max(0, Math.min(c, i.length - 1)), _ = m * o;
+    e.scrollTo({ top: _, behavior: "smooth" });
+    const d = i[m];
+    d !== void 0 && d !== n && g(t, d);
+  }, [i, o, n, g, t]), J = T(() => {
+    if (M.current || b.current) return;
+    x.current && clearTimeout(x.current);
+    const e = P() ? 50 : 100;
+    x.current = setTimeout(() => {
+      const r = a.current;
       if (!r) return;
-      if (P.current) {
-        P.current = !1;
+      if (w.current) {
+        w.current = !1;
         return;
       }
-      const i = r.scrollTop, d = Math.round(i / n), R = Math.max(0, Math.min(d, o.length - 1)), h = o[R];
-      h !== void 0 && h !== c && g(t, h);
+      const c = r.scrollTop, m = Math.round(c / o), _ = Math.max(0, Math.min(m, i.length - 1)), d = i[_];
+      d !== void 0 && d !== n && g(t, d);
     }, e);
-  }, [o, n, c, g, t, s]);
+  }, [i, o, n, g, t, P]);
   return N(() => {
     if (!L.current) return;
     L.current = !1;
     const e = setTimeout(() => {
-      u(c, !1);
+      u(n, !1);
     }, 0);
     return () => clearTimeout(e);
-  }, [u, c]), N(() => {
-    const e = m.current;
-    if (!e || c === void 0) return;
-    const r = o.indexOf(c);
+  }, [u, n]), N(() => {
+    const e = a.current;
+    if (!e || n === void 0) return;
+    const r = i.indexOf(n);
     if (r === -1) return;
-    const i = r * n, d = e.scrollTop;
-    Math.abs(d - i) > 1 && (P.current = !0, u(c, !0), setTimeout(() => {
-      P.current = !1;
+    const c = r * o, m = e.scrollTop;
+    Math.abs(m - c) > 1 && (w.current = !0, u(n, !0), setTimeout(() => {
+      w.current = !1;
     }, 200));
-  }, [c, u, o, n]), N(() => {
-    const e = m.current;
+  }, [n, u, i, o]), N(() => {
+    const e = a.current;
     if (e)
       return e.addEventListener("wheel", Y, { passive: !1 }), () => {
         e.removeEventListener("wheel", Y);
@@ -200,14 +199,14 @@ const B = U(({ type: t, className: w, ...v }, l) => {
   }, [Y]), N(() => (document.addEventListener("mousemove", y), document.addEventListener("mouseup", C), () => {
     document.removeEventListener("mousemove", y), document.removeEventListener("mouseup", C);
   }), [y, C]), N(() => () => {
-    M.current !== null && clearTimeout(M.current);
+    x.current !== null && clearTimeout(x.current);
   }, []), /* @__PURE__ */ X(
     "div",
     {
       ref: (e) => {
-        typeof l == "function" ? l(e) : l && (l.current = e), m.current = e;
+        typeof s == "function" ? s(e) : s && (s.current = e), a.current = e;
       },
-      className: `motile-timepicker__column ${w || ""}`,
+      className: `motile-timepicker__column ${R || ""}`,
       onScroll: J,
       onMouseDown: G,
       role: "listbox",
@@ -219,21 +218,21 @@ const B = U(({ type: t, className: w, ...v }, l) => {
           "div",
           {
             className: "motile-timepicker__spacer",
-            style: { height: n },
+            style: { height: o },
             "aria-hidden": "true"
           }
         ),
-        o.map((e, r) => {
-          const i = e === c;
+        i.map((e, r) => {
+          const c = e === n;
           return /* @__PURE__ */ S(
             "div",
             {
-              className: `motile-timepicker__item ${i ? "motile-timepicker__item--selected" : ""} ${p ? "motile-timepicker__item--disabled" : ""}`,
-              style: { height: n },
+              className: `motile-timepicker__item ${c ? "motile-timepicker__item--selected" : ""} ${p ? "motile-timepicker__item--disabled" : ""}`,
+              style: { height: o },
               role: "option",
-              "aria-selected": i,
+              "aria-selected": c,
               "data-value": e,
-              children: x(e)
+              children: h(e)
             },
             r
           );
@@ -242,7 +241,7 @@ const B = U(({ type: t, className: w, ...v }, l) => {
           "div",
           {
             className: "motile-timepicker__spacer",
-            style: { height: n },
+            style: { height: o },
             "aria-hidden": "true"
           }
         )
@@ -251,15 +250,15 @@ const B = U(({ type: t, className: w, ...v }, l) => {
   );
 });
 B.displayName = "TimePicker.Column";
-const F = U(({ className: t, style: w, ...v }, l) => {
-  const { itemHeight: a } = q(), p = {
-    height: a,
-    ...w
+const F = U(({ className: t, style: R, ...v }, s) => {
+  const { itemHeight: l } = q(), p = {
+    height: l,
+    ...R
   };
   return /* @__PURE__ */ S(
     "div",
     {
-      ref: l,
+      ref: s,
       className: `motile-timepicker__highlight ${t || ""}`,
       style: p,
       "aria-hidden": "true",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "motile-ui",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "type": "module",
   "description": "A modern React component library for webview applications",
   "main": "./dist/index.js",