@reni-corp/reni-2c-ui 0.4.12 → 0.4.13

package/dist/{useAppDialogGuidance-Bs1h3YmP.js → useAppDialogGuidance-CVHevNgf.js}

@@ -1,4 +1,33 @@
-import { pushScopeId as Kt, popScopeId as Jt, defineComponent as Re, nextTick as Ue, ref as R, createApp as Qt, h as Zt, resolveComponent as me, openBlock as Y, createBlock as ze, mergeProps as _t, withCtx as Te, createVNode as St, normalizeClass as Ye, createElementBlock as ge, toDisplayString as eo, renderSlot as Pe, normalizeProps as to, guardReactiveProps as oo, withKeys as no, normalizeStyle as De, createElementVNode as ie, Fragment as io, createCommentVNode as tt, withScopeId as so, onMounted as Tt, unref as ro, getCurrentScope as lo, onScopeDispose as ao, getCurrentInstance as Xe, isRef as co, toRef as uo, readonly as po, customRef as ho, watch as we, computed as ee, reactive as ot, watchEffect as fo } from "vue";
+import { ref as R, pushScopeId as Kt, popScopeId as Jt, defineComponent as Re, nextTick as Ue, createApp as Qt, h as Zt, resolveComponent as me, openBlock as Y, createBlock as ze, mergeProps as _t, withCtx as Te, createVNode as St, normalizeClass as Ye, createElementBlock as ge, toDisplayString as eo, renderSlot as Pe, normalizeProps as to, guardReactiveProps as oo, withKeys as no, normalizeStyle as De, createElementVNode as ie, Fragment as io, createCommentVNode as tt, withScopeId as so, onMounted as Tt, unref as ro, getCurrentScope as lo, onScopeDispose as ao, getCurrentInstance as Xe, isRef as co, toRef as uo, readonly as po, customRef as ho, watch as we, computed as ee, reactive as ot, watchEffect as fo } from "vue";
+function Hn(e = 5e3) {
+  const t = R([]);
+  let o = 1;
+  return {
+    notifications: t,
+    addNotification: (s) => {
+      const r = { ...s, id: o++ };
+      t.value.push(r), setTimeout(() => {
+        const l = t.value.indexOf(r);
+        l !== -1 && t.value.splice(l, 1);
+      }, e);
+    },
+    removeNotificationById: (s) => {
+      const r = t.value.findIndex(
+        (l) => l.id === s
+      );
+      r !== -1 && t.value.splice(r, 1);
+    }
+  };
+}
+function Mn() {
+  const e = R(0);
+  return {
+    tabIndex: e,
+    updateTabIndex: (o) => {
+      e.value = o;
+    }
+  };
+}
 const mo = ["top", "right", "bottom", "left"], nt = ["start", "end"], it = /* @__PURE__ */ mo.reduce((e, t) => e.concat(t, t + "-" + nt[0], t + "-" + nt[1]), []), ve = Math.min, ne = Math.max, go = {
   left: "right",
   right: "left",
@@ -616,7 +645,7 @@ let be;
 function Nt() {
   if (be) return be;
   const e = navigator.userAgentData;
-  return e && Array.isArray(e.brands) ? (be = e.brands.map((t) => t.brand + "/" + t.version).join(" "), be) : navigator.userAgent;
+  return e && Array.isArray(e.brands) ? (be = e.brands.map(((t) => t.brand + "/" + t.version)).join(" "), be) : navigator.userAgent;
 }
 function q(e) {
   return e instanceof D(e).HTMLElement;
@@ -639,10 +668,10 @@ function ko(e) {
 }
 function Ve(e) {
   const t = /firefox/i.test(Nt()), o = V(e), n = o.backdropFilter || o.WebkitBackdropFilter;
-  return o.transform !== "none" || o.perspective !== "none" || !!n && n !== "none" || t && o.willChange === "filter" || t && !!o.filter && o.filter !== "none" || ["transform", "perspective"].some((i) => o.willChange.includes(i)) || ["paint", "layout", "strict", "content"].some((i) => {
+  return o.transform !== "none" || o.perspective !== "none" || !!n && n !== "none" || t && o.willChange === "filter" || t && !!o.filter && o.filter !== "none" || ["transform", "perspective"].some(((i) => o.willChange.includes(i))) || ["paint", "layout", "strict", "content"].some(((i) => {
     const s = o.contain;
     return s != null && s.includes(i);
-  });
+  }));
 }
 function Rt() {
   return !/^((?!chrome|android).)*safari/i.test(Nt());
@@ -704,7 +733,7 @@ function Ne(e, t) {
   return i ? t.concat(s, s.visualViewport || [], Le(n) ? n : []) : t.concat(n, Ne(n));
 }
 function dt(e, t, o) {
-  return t === "viewport" ? ue(function(n, i) {
+  return t === "viewport" ? ue((function(n, i) {
     const s = D(n), r = Z(n), l = s.visualViewport;
     let p = r.clientWidth, u = r.clientHeight, c = 0, a = 0;
     if (l) {
@@ -713,15 +742,15 @@ function dt(e, t, o) {
       (d || !d && i === "fixed") && (c = l.offsetLeft, a = l.offsetTop);
     }
     return { width: p, height: u, x: c, y: a };
-  }(e, o)) : Q(t) ? ue(function(n, i) {
+  })(e, o)) : Q(t) ? ue((function(n, i) {
     const s = ye(n, !0, i === "fixed"), r = s.top + n.clientTop, l = s.left + n.clientLeft, p = q(n) ? ae(n) : { x: 1, y: 1 };
     return { width: n.clientWidth * p.x, height: n.clientHeight * p.y, x: l * p.x, y: r * p.y };
-  }(t, o)) : ue(function(n) {
+  })(t, o)) : ue((function(n) {
     const i = Z(n), s = ke(n), r = n.ownerDocument.body, l = pe(i.scrollWidth, i.clientWidth, r.scrollWidth, r.clientWidth), p = pe(i.scrollHeight, i.clientHeight, r.scrollHeight, r.clientHeight);
     let u = -s.scrollLeft + kt(n);
     const c = -s.scrollTop;
     return V(r).direction === "rtl" && (u += pe(i.clientWidth, r.clientWidth) - l), { width: l, height: p, x: u, y: c };
-  }(Z(e)));
+  })(Z(e)));
 }
 function ut(e) {
   return q(e) && V(e).position !== "fixed" ? e.offsetParent : null;
@@ -730,14 +759,14 @@ function pt(e) {
   const t = D(e);
   let o = ut(e);
   for (; o && ko(o) && V(o).position === "static"; ) o = ut(o);
-  return o && (te(o) === "html" || te(o) === "body" && V(o).position === "static" && !Ve(o)) ? t : o || function(n) {
+  return o && (te(o) === "html" || te(o) === "body" && V(o).position === "static" && !Ve(o)) ? t : o || (function(n) {
     let i = $e(n);
     for (; q(i) && !Qe(i); ) {
       if (Ve(i)) return i;
       i = $e(i);
     }
     return null;
-  }(e) || t;
+  })(e) || t;
 }
 function Ho(e, t, o) {
   const n = q(t), i = Z(t), s = ye(e, !0, o === "fixed", t);
@@ -751,21 +780,21 @@ function Ho(e, t, o) {
 }
 const Mo = { getClippingRect: function(e) {
   let { element: t, boundary: o, rootBoundary: n, strategy: i } = e;
-  const s = o === "clippingAncestors" ? function(u, c) {
+  const s = o === "clippingAncestors" ? (function(u, c) {
     const a = c.get(u);
     if (a) return a;
-    let d = Ne(u).filter((w) => Q(w) && te(w) !== "body"), h = null;
+    let d = Ne(u).filter(((w) => Q(w) && te(w) !== "body")), h = null;
     const f = V(u).position === "fixed";
     let m = f ? $e(u) : u;
     for (; Q(m) && !Qe(m); ) {
       const w = V(m), g = Ve(m);
-      (f ? g || h : g || w.position !== "static" || !h || !["absolute", "fixed"].includes(h.position)) ? h = w : d = d.filter((v) => v !== m), m = $e(m);
+      (f ? g || h : g || w.position !== "static" || !h || !["absolute", "fixed"].includes(h.position)) ? h = w : d = d.filter(((v) => v !== m)), m = $e(m);
     }
     return c.set(u, d), d;
-  }(t, this._c) : [].concat(o), r = [...s, n], l = r[0], p = r.reduce((u, c) => {
+  })(t, this._c) : [].concat(o), r = [...s, n], l = r[0], p = r.reduce(((u, c) => {
     const a = dt(t, c, i);
     return u.top = pe(a.top, u.top), u.right = at(a.right, u.right), u.bottom = at(a.bottom, u.bottom), u.left = pe(a.left, u.left), u;
-  }, dt(t, l, i));
+  }), dt(t, l, i));
   return { width: p.right - p.left, height: p.bottom - p.top, x: p.left, y: p.top };
 }, convertOffsetParentRelativeRectToViewportRelativeRect: function(e) {
   let { rect: t, offsetParent: o, strategy: n } = e;
@@ -2257,7 +2286,7 @@ function $n(e) {
   }
   e.classList && e.classList.remove(Vt);
 }
-const Hn = cn, We = typeof window < "u";
+const Dn = cn;
 function et(e) {
   return lo() ? (ao(e), !0) : !1;
 }
@@ -2270,7 +2299,7 @@ const xn = (e) => typeof e < "u", bn = Object.prototype.toString, _n = (e) => bn
 }, Sn = /* @__PURE__ */ Tn();
 function Tn() {
   var e, t;
-  return qt && ((e = window == null ? void 0 : window.navigator) == null ? void 0 : e.userAgent) && (/iP(?:ad|hone|od)/.test(window.navigator.userAgent) || ((t = window == null ? void 0 : window.navigator) == null ? void 0 : t.maxTouchPoints) > 2 && /iPad|Macintosh/.test(window == null ? void 0 : window.navigator.userAgent));
+  return qt && ((e = window?.navigator) == null ? void 0 : e.userAgent) && (/iP(?:ad|hone|od)/.test(window.navigator.userAgent) || ((t = window?.navigator) == null ? void 0 : t.maxTouchPoints) > 2 && /iPad|Macintosh/.test(window?.navigator.userAgent));
 }
 function Gt(e, t) {
   function o(...n) {
@@ -2311,7 +2340,7 @@ function An(...e) {
     })), !p && !o && (o = setTimeout(() => n = !0, h)), n = !1, s);
   };
 }
-const Mn = {
+const Bn = {
   mounted: "mounted"
 };
 function Cn(e, t) {
@@ -2324,7 +2353,7 @@ function Cn(e, t) {
 function On(e) {
   return Xe();
 }
-function Dn(...e) {
+function Fn(...e) {
   if (e.length !== 1)
     return uo(...e);
   const t = e[0];
@@ -2348,7 +2377,7 @@ function Ut(e, t = !0, o) {
 function B(e) {
   var t;
   const o = k(e);
-  return (t = o == null ? void 0 : o.$el) != null ? t : o;
+  return (t = o?.$el) != null ? t : o;
 }
 const le = qt ? window : void 0;
 function j(...e) {
@@ -2375,7 +2404,7 @@ function j(...e) {
   return et(u), u;
 }
 let xt = !1;
-function Bn(e, t, o = {}) {
+function In(e, t, o = {}) {
   const { window: n = le, ignore: i = [], capture: s = !0, detectIframe: r = !1 } = o;
   if (!n)
     return W;
@@ -2407,7 +2436,7 @@ function Bn(e, t, o = {}) {
       setTimeout(() => {
         var h;
         const f = B(e);
-        ((h = n.document.activeElement) == null ? void 0 : h.tagName) === "IFRAME" && !(f != null && f.contains(n.document.activeElement)) && t(d);
+        ((h = n.document.activeElement) == null ? void 0 : h.tagName) === "IFRAME" && !f?.contains(n.document.activeElement) && t(d);
       }, 0);
     })
   ].filter(Boolean);
@@ -2437,14 +2466,14 @@ function de(e, t = {}) {
     p(), l(), i = void 0;
   }), s;
 }
-const Fn = {
+const Wn = {
   sm: 640,
   md: 768,
   lg: 1024,
   xl: 1280,
   "2xl": 1536
 };
-function In(e, t = {}) {
+function jn(e, t = {}) {
   function o(c, a) {
     let d = k(e[k(c)]);
     return a != null && (d = Cn(d, a)), typeof d == "number" && (d = `${d}px`), d;
@@ -2522,7 +2551,7 @@ function Ln(e, t, o = {}) {
     stop: c
   };
 }
-function Wn(e, t = { width: 0, height: 0 }, o = {}) {
+function Vn(e, t = { width: 0, height: 0 }, o = {}) {
   const { window: n = le, box: i = "content-box" } = o, s = ee(() => {
     var a, d;
     return (d = (a = B(e)) == null ? void 0 : a.namespaceURI) == null ? void 0 : d.includes("svg");
@@ -2564,7 +2593,7 @@ function Wn(e, t = { width: 0, height: 0 }, o = {}) {
   };
 }
 const bt = 1;
-function jn(e, t = {}) {
+function qn(e, t = {}) {
   const {
     throttle: o = 0,
     idle: n = 200,
@@ -2612,7 +2641,7 @@ function jn(e, t = {}) {
       left: (_ = k(y)) != null ? _ : h.value,
       behavior: k(p)
     });
-    const O = ((C = A == null ? void 0 : A.document) == null ? void 0 : C.documentElement) || (A == null ? void 0 : A.documentElement) || A;
+    const O = ((C = A?.document) == null ? void 0 : C.documentElement) || A?.documentElement || A;
     h != null && (a.value = O.scrollLeft), f != null && (d.value = O.scrollTop);
   }
   const w = R(!1), g = ot({
@@ -2631,7 +2660,7 @@ function jn(e, t = {}) {
     var E;
     if (!u)
       return;
-    const P = ((E = y == null ? void 0 : y.document) == null ? void 0 : E.documentElement) || (y == null ? void 0 : y.documentElement) || B(y), { display: _, flexDirection: N } = getComputedStyle(P), C = P.scrollLeft;
+    const P = ((E = y?.document) == null ? void 0 : E.documentElement) || y?.documentElement || B(y), { display: _, flexDirection: N } = getComputedStyle(P), C = P.scrollLeft;
     v.left = C < a.value, v.right = C > a.value;
     const A = Math.abs(C) <= (r.left || 0), O = Math.abs(C) + P.clientWidth >= P.scrollWidth - (r.right || 0) - bt;
     _ === "flex" && N === "row-reverse" ? (g.left = O, g.right = A) : (g.left = A, g.right = O), a.value = C;
@@ -2677,7 +2706,7 @@ function jn(e, t = {}) {
     }
   };
 }
-function Vn(e, t, o, n = {}) {
+function Gn(e, t, o, n = {}) {
   var i, s, r;
   const {
     clone: l = !1,
@@ -2686,7 +2715,7 @@ function Vn(e, t, o, n = {}) {
     deep: c = !1,
     defaultValue: a,
     shouldEmit: d
-  } = n, h = Xe(), f = o || (h == null ? void 0 : h.emit) || ((i = h == null ? void 0 : h.$emit) == null ? void 0 : i.bind(h)) || ((r = (s = h == null ? void 0 : h.proxy) == null ? void 0 : s.$emit) == null ? void 0 : r.bind(h == null ? void 0 : h.proxy));
+  } = n, h = Xe(), f = o || h?.emit || ((i = h?.$emit) == null ? void 0 : i.bind(h)) || ((r = (s = h?.proxy) == null ? void 0 : s.$emit) == null ? void 0 : r.bind(h?.proxy));
   let m = u;
   m = m || `update:${t.toString()}`;
   const w = ($) => l ? typeof l == "function" ? l($) : zn($) : $, g = () => xn(e[t]) ? w(e[t]) : a, v = ($) => {
@@ -2717,35 +2746,7 @@ function Vn(e, t, o, n = {}) {
       }
     });
 }
-function qn(e = 5e3) {
-  const t = R([]);
-  let o = 1;
-  return {
-    notifications: t,
-    addNotification: (s) => {
-      const r = { ...s, id: o++ };
-      t.value.push(r), setTimeout(() => {
-        const l = t.value.indexOf(r);
-        l !== -1 && t.value.splice(l, 1);
-      }, e);
-    },
-    removeNotificationById: (s) => {
-      const r = t.value.findIndex(
-        (l) => l.id === s
-      );
-      r !== -1 && t.value.splice(r, 1);
-    }
-  };
-}
-function Gn() {
-  const e = R(0);
-  return {
-    tabIndex: e,
-    updateTabIndex: (o) => {
-      e.value = o;
-    }
-  };
-}
+const We = typeof window < "u";
 function Un() {
   const e = (i) => new Promise((s) => setTimeout(s, i)), o = "RN-ui-tool-chip";
   return {
@@ -2822,13 +2823,13 @@ function Yn() {
   };
 }
 export {
-  Hn as W,
-  qn as a,
-  Gn as b,
+  Dn as W,
+  Hn as a,
+  Mn as b,
   Un as c,
-  In as d,
-  Fn as e,
-  Mn as f,
+  jn as d,
+  Wn as e,
+  Bn as f,
   En as g,
   Ut as h,
   We as i,
@@ -2837,13 +2838,13 @@ export {
   et as l,
   Nn as m,
   W as n,
-  Bn as o,
-  Dn as p,
+  In as o,
+  Fn as p,
   Sn as q,
-  Vn as r,
-  jn as s,
+  Gn as r,
+  qn as s,
   k as t,
   Yn as u,
-  Wn as v,
+  Vn as v,
   Ln as w
 };

package/dist/valueObjects-XKjx9Hu_.js

@@ -0,0 +1,66 @@
+class c {
+  _value;
+  constructor(t) {
+    this._value = a(t), this.init();
+  }
+  init() {
+  }
+  get value() {
+    return this._value;
+  }
+  toString() {
+    return String(this.value);
+  }
+  toJSON() {
+    return this.value;
+  }
+}
+function a(r) {
+  return r instanceof c ? r.value : r;
+}
+const u = "ja-JP", o = "JPY";
+class i extends c {
+  locale;
+  currency;
+  constructor(t, {
+    locale: e = u,
+    currency: s = o
+  } = {}) {
+    super(t), this.locale = e, this.currency = s;
+  }
+  toString() {
+    let e = new Intl.NumberFormat(this.locale, {
+      style: "currency",
+      currency: this.currency
+    }).format(this.value);
+    return this.currency === "JPY" && (e = e.replace(/\uFFE5|\u00A5/g, "¥")), e;
+  }
+}
+const l = "ja-JP";
+class n extends c {
+  locale;
+  constructor(t, { locale: e = l } = {}) {
+    super(t), this.locale = e;
+  }
+  add(t) {
+    return new n(this.value + a(t));
+  }
+  subtract(t) {
+    return new n(this.value - a(t));
+  }
+  toString() {
+    return new Intl.NumberFormat(this.locale).format(this.value);
+  }
+  toPercentageString() {
+    return new Intl.NumberFormat(this.locale, {
+      style: "percent",
+      maximumSignificantDigits: 3
+    }).format(this.value);
+  }
+}
+export {
+  i as C,
+  n as N,
+  c as V,
+  a as g
+};

package/dist/valueObjects.es.js

@@ -1,4 +1,4 @@
-import { C as a, N as u } from "./valueObjects-CvF0zaqR.js";
+import { C as a, N as u } from "./valueObjects-XKjx9Hu_.js";
 export {
   a as CurrencyValue,
   u as NumberValue

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reni-corp/reni-2c-ui",
-  "version": "0.4.12",
+  "version": "0.4.13",
   "type": "module",
   "main": "./dist/script.umd.js",
   "module": "./dist/index.es.js",
@@ -96,7 +96,7 @@
     "@types/lz-string": "^1.5.0",
     "@typescript-eslint/eslint-plugin": "^8.8.1",
     "@typescript-eslint/parser": "^8.8.1",
-    "@vitejs/plugin-vue": "^5.2.4",
+    "@vitejs/plugin-vue": "^6.0.7",
     "@vue/babel-plugin-jsx": "^1.1.5",
     "@vue/test-utils": "^2.4.6",
     "eslint": "^9.12.0",
@@ -116,7 +116,7 @@
     "prettier": "^3.3.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rollup-plugin-visualizer": "^5.11.0",
+    "rollup-plugin-visualizer": "^7.0.1",
     "sass": "^1.66.1",
     "storybook": "^10.2.10",
     "stylelint": "^16.9.0",
@@ -127,9 +127,9 @@
     "stylelint-config-standard-scss": "^13.1.0",
     "stylelint-scss": "^6.11.1",
     "typescript": "^5.0.2",
-    "vite": "^5.4.21",
+    "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4",
-    "vitest": "^4.0.18",
+    "vitest": "^4.1.7",
     "vue-eslint-parser": "^10.2.0",
     "vue-tsc": "^1.8.5"
   },

package/src/stories/AnnounceBar.stories.ts

@@ -46,6 +46,15 @@ const meta: Meta<typeof AnnounceBar> = {
     dense: {
       control: 'boolean',
     },
+    icon: {
+      control: 'text',
+    },
+    // 自動生成されるスロット制御ボタンを非表示
+    body: { table: { disable: true } },
+    bodyText: {
+      control: 'text',
+      table: { category: 'slots' },
+    },
   },
   args: {
     title: 'title',
@@ -57,6 +66,8 @@ const meta: Meta<typeof AnnounceBar> = {
     url: '',
     isTargetBlank: false,
     dense: false,
+    icon: '',
+    bodyText: '',
   },
   render: (args) => ({
     components: { 'rn-announce-bar': AnnounceBar },
@@ -75,7 +86,11 @@ const meta: Meta<typeof AnnounceBar> = {
           :url=args.url
           :isTargetBlank=args.isTargetBlank
           :dense=args.dense
+          :icon=args.icon
         >
+          <template #body>
+            <span v-if="args.bodyText">{{ args.bodyText }}</span>
+          </template>
         </rn-announce-bar>
       </div>
     `,
@@ -83,7 +98,7 @@ const meta: Meta<typeof AnnounceBar> = {
 }
 
 export default meta
-type StoryArgs = AnnounceBarProps & { slotText: string }
+type StoryArgs = AnnounceBarProps & { slotText: string; bodyText: string }
 type Story = StoryObj<StoryArgs>
 type OverridesStory = Omit<Story, 'argTypes'> & {
   argTypes?: Record<string, any>
@@ -136,3 +151,39 @@ export const 応用2: OverridesStory = {
     },
   },
 }
+
+export const アイコン付きタイトル: OverridesStory = {
+  args: {
+    slotText: 'AnnounceBar',
+    icon: 'circle-info-outline',
+  },
+  argTypes: {
+    default: { table: { disable: true } },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'iconプロップにアイコン名を渡すとタイトルの左側にアイコンが表示される。未指定または空文字の場合はアイコンが非表示になる。',
+      },
+    },
+  },
+}
+
+export const ボディスロット: OverridesStory = {
+  args: {
+    slotText: 'AnnounceBar',
+    bodyText: 'ボディエリアに任意のコンテンツを配置できます。',
+  },
+  argTypes: {
+    default: { table: { disable: true } },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'bodyTextコントロールでボディの内容を変更できる。空欄にするとボディスロットが非表示になる。',
+      },
+    },
+  },
+}

package/src/stories/SwipeConfirm.stories.ts

@@ -0,0 +1,144 @@
+import { ref } from 'vue'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import SwipeConfirm, {
+  type SwipeConfirmProps,
+} from '@/components/interactive/SwipeConfirm.vue'
+import { Color } from '@/types'
+import { ColorOptions } from '@/constants'
+
+const meta: Meta<typeof SwipeConfirm> = {
+  title: 'Interactive/SwipeConfirm',
+  component: SwipeConfirm,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'ハンドルを最後までスライドさせると確定するスワイプ確定バー。決済確定・申込確定・入場処理など、誤タップを避けたい「取り消しにくい確定操作」に利用する。確定は一方向（解除は親が v-model で制御）。',
+      },
+    },
+  },
+  argTypes: {
+    color: {
+      control: 'select',
+      options: Object.keys(ColorOptions) as Color[],
+      description: '確定時の塗り色',
+    },
+    label: { control: 'text', description: '未確定時のラベル' },
+    confirmedLabel: { control: 'text', description: '確定後のラベル' },
+    threshold: {
+      control: { type: 'range', min: 0.1, max: 1, step: 0.05 },
+      description: '確定とみなすドラッグ割合',
+    },
+    disabled: { control: 'boolean' },
+    reversed: { control: 'boolean', description: '180° 回転（向かい側操作向け）' },
+  },
+  args: {
+    label: 'スワイプでチェックイン',
+    confirmedLabel: '入場済み',
+    color: 'success',
+    threshold: 0.9,
+    disabled: false,
+    reversed: false,
+  },
+  render: (args) => ({
+    components: { 'rn-swipe-confirm': SwipeConfirm },
+    setup() {
+      const confirmed = ref(false)
+      return { args, confirmed }
+    },
+    template: /* html */ `
+      <div class='sb-canvas' style='max-width: 360px;'>
+        <rn-swipe-confirm
+          v-model:confirmed='confirmed'
+          :label='args.label'
+          :confirmedLabel='args.confirmedLabel'
+          :color='args.color'
+          :threshold='args.threshold'
+          :disabled='args.disabled'
+          :reversed='args.reversed'
+          @confirm="() => {}"
+        />
+        <p style='margin-top: 24px;'>confirmed：{{ confirmed }}</p>
+      </div>
+    `,
+  }),
+}
+
+export default meta
+type StoryArgs = SwipeConfirmProps
+type Story = StoryObj<StoryArgs>
+
+export const 基本: Story = {
+  args: {},
+}
+
+export const 確定済み: Story = {
+  render: (args) => ({
+    components: { 'rn-swipe-confirm': SwipeConfirm },
+    setup() {
+      const confirmed = ref(true)
+      return { args, confirmed }
+    },
+    template: /* html */ `
+      <div class='sb-canvas' style='max-width: 360px;'>
+        <rn-swipe-confirm
+          v-model:confirmed='confirmed'
+          :label='args.label'
+          :confirmedLabel='args.confirmedLabel'
+          :color='args.color'
+        />
+      </div>
+    `,
+  }),
+}
+
+export const 無効: Story = {
+  args: { disabled: true },
+}
+
+export const 反転: Story = {
+  args: { reversed: true },
+}
+
+export const 一覧: Story = {
+  render: () => ({
+    components: { 'rn-swipe-confirm': SwipeConfirm },
+    setup() {
+      const a = ref(false)
+      const b = ref(true)
+      const c = ref(false)
+      const d = ref(false)
+      return { a, b, c, d }
+    },
+    template: /* html */ `
+      <div
+        class='sb-canvas'
+        style='display: flex; flex-direction: column; gap: 24px; max-width: 360px;'
+      >
+        <rn-swipe-confirm
+          v-model:confirmed='a'
+          label='スワイプでチェックイン'
+          confirmedLabel='入場済み'
+        />
+        <rn-swipe-confirm
+          v-model:confirmed='b'
+          label='スワイプでチェックイン'
+          confirmedLabel='入場済み'
+        />
+        <rn-swipe-confirm
+          v-model:confirmed='c'
+          label='スワイプで決済確定'
+          confirmedLabel='決済完了'
+          color='primary'
+        />
+        <rn-swipe-confirm
+          v-model:confirmed='d'
+          label='無効状態'
+          confirmedLabel='確定済み'
+          disabled
+        />
+      </div>
+    `,
+  }),
+}