@v-miniapp/ui-react 1.0.40 → 1.0.45

package/dist-storybook/assets/uploader.stories-B2wW9qVy.js

@@ -0,0 +1,65 @@
+import{j as o,r as g}from"./iframe-CQAwSt4E.js";import{U as d}from"./chip-kG4p82WT.js";import{t as e}from"./store-D2RudmNr.js";import{T as b,S as h,M as u,P as v,a as y}from"./blocks-BuaOUtiH.js";import"./preload-helper-PPVm8Dsz.js";import"./classname-CUR_zgkh.js";import"./icon-DdQsMyRa.js";import"./colors-_6nFGM3e.js";import"./navigation-bar-vI-FPasP.js";import"./visibility-sensor-CwrzJO06.js";import"./index-B-Ksafg0.js";import"./store-CPumdfcU.js";import"./_setToString-CbM921C9.js";import"./react-hufnxGVs.js";import"./omit-Bsx5nTI0.js";import"./pick-BhmhLmLe.js";import"./button-CL7GeC23.js";import"./typography-DEpAJl_i.js";import"./image-C3EsNRhz.js";import"./bottom-tab-bar-CtcTAxuI.js";import"./toast-provider-DurnMJhd.js";import"./carousel-1Kww3hIz.js";import"./embla-carousel-react.esm-BYjpaHZ9.js";import"./pagination-DZHoBs_4.js";import"./section-content-DGNB4eLN.js";import"./option-item-LRh_OyV4.js";import"./index-BV0AJWP6.js";import"./alert-DLW8CoyB.js";import"./skeleton-C91JgehG.js";import"./label-DV2iCDmN.js";import"./input-wrapper-BKHgnPy6.js";import"./text-field-jK6rpOo2.js";import"./number-field-CXKmnfKe.js";import"./checkbox-MGytNNRt.js";import"./radio-B5NJxG_l.js";import"./date-Cg-Uk_pp.js";import"./date-picker-Dnq_-0Md.js";import"./calendar-dOCsjhVU.js";import"./search-field-CQqgFbfg.js";import"./text-area-DwSXyqOe.js";import"./avatar-GxcYPA1p.js";import"./badge-D_LzMVtw.js";import"./switch-p-aXI-ev.js";import"./tab-bar-CSeCmtIZ.js";import"./rating-BdXViYBv.js";import"./tooltip-QDdel5My.js";import"./index-DHiZ-gXR.js";const w=()=>{const r=`
+## ${e("common.table.title")}
+| ${e("common.table.name")} | ${e("common.table.type")} | ${e("common.table.required")} | ${e("common.table.description")} |
+| :--- | :--- | :---: | :--- |
+| \`value\` | \`IFileUpload[]\` | ${e("common.table.no")} | ${e("components.uploader.argTypes.valueDescription")} |
+| \`onChange\` | \`(files: IFileUpload[]) => void\` | ${e("common.table.no")} | ${e("components.uploader.argTypes.onChangeDescription")} |
+| \`limit\` | \`number\` | ${e("common.table.no")} | ${e("components.uploader.argTypes.limitDescription")} |
+| \`disabled\` | \`boolean\` | ${e("common.table.no")} | ${e("components.uploader.argTypes.disabledDescription")} |
+| \`showPreview\` | \`boolean\` | ${e("common.table.no")} | ${e("components.uploader.argTypes.showPreviewDescription")} |
+| \`includeBase64\` | \`boolean\` | ${e("common.table.no")} | ${e("components.uploader.argTypes.includeBase64Description")} |
+| \`className\` | \`string\` | ${e("common.table.no")} | ${e("components.uploader.argTypes.classNameDescription")} |
+| \`...props\` | \`ComponentPropsWithRef<'div'>\` | ${e("common.table.no")} | ${e("components.uploader.argTypes.propsDescription")} |
+`;return o.jsxs(o.Fragment,{children:[o.jsx(b,{}),o.jsx(h,{}),o.jsx(u,{children:e("components.uploader.description")}),o.jsx(v,{}),o.jsx(u,{children:r}),o.jsx(y,{})]})},ue={title:"Components/Uploader",component:d,parameters:{layout:"padded",docs:{page:w}},tags:["autodocs"],argTypes:{value:{control:!1,description:e("components.uploader.argTypes.valueDescription"),table:{type:{summary:"IFileUpload[]"}}},onChange:{action:"changed",description:e("components.uploader.argTypes.onChangeDescription"),table:{type:{summary:"(files: IFileUpload[]) => void"}}},limit:{control:{type:"number",min:1,max:10,step:1},description:e("components.uploader.argTypes.limitDescription"),table:{type:{summary:"number"}}},disabled:{control:"boolean",description:e("components.uploader.argTypes.disabledDescription"),table:{type:{summary:"boolean"}}},showPreview:{control:"boolean",description:e("components.uploader.argTypes.showPreviewDescription"),table:{type:{summary:"boolean"}}},includeBase64:{control:"boolean",description:e("components.uploader.argTypes.includeBase64Description"),table:{type:{summary:"boolean"}}},className:{control:"text",description:e("components.uploader.argTypes.classNameDescription"),table:{type:{summary:"string"}}}}},t={name:e("components.uploader.stories.default.name"),args:{}},s={name:e("components.uploader.stories.controlled.name"),render:()=>{const[r,c]=g.useState([]);return o.jsx(d,{value:r,onChange:c})}},n={name:e("components.uploader.stories.withLimit.name"),args:{limit:3}},a={name:e("components.uploader.stories.withPreview.name"),args:{showPreview:!0}},i={name:e("components.uploader.stories.disabled.name"),args:{disabled:!0}},p={name:e("components.uploader.stories.singleFile.name"),args:{limit:1,showPreview:!0}},m={name:e("components.uploader.stories.multipleFiles.name"),args:{limit:5,showPreview:!0}},l={name:e("components.uploader.stories.interactive.name"),render:()=>{const[r,c]=g.useState([]);return o.jsxs("div",{children:[o.jsx(d,{value:r,onChange:c,showPreview:!0,limit:3}),o.jsx("p",{style:{marginTop:"16px",fontSize:"14px"},children:e("components.uploader.stories.interactive.filesUploaded",{count:r.length})})]})}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
+  name: t('components.uploader.stories.default.name'),
+  args: {}
+}`,...t.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
+  name: t('components.uploader.stories.controlled.name'),
+  render: () => {
+    const [files, setFiles] = useState<IFileUpload[]>([]);
+    return <Uploader value={files} onChange={setFiles} />;
+  }
+}`,...s.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
+  name: t('components.uploader.stories.withLimit.name'),
+  args: {
+    limit: 3
+  }
+}`,...n.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
+  name: t('components.uploader.stories.withPreview.name'),
+  args: {
+    showPreview: true
+  }
+}`,...a.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
+  name: t('components.uploader.stories.disabled.name'),
+  args: {
+    disabled: true
+  }
+}`,...i.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
+  name: t('components.uploader.stories.singleFile.name'),
+  args: {
+    limit: 1,
+    showPreview: true
+  }
+}`,...p.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
+  name: t('components.uploader.stories.multipleFiles.name'),
+  args: {
+    limit: 5,
+    showPreview: true
+  }
+}`,...m.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
+  name: t('components.uploader.stories.interactive.name'),
+  render: () => {
+    const [files, setFiles] = useState<IFileUpload[]>([]);
+    return <div>
+        <Uploader value={files} onChange={setFiles} showPreview limit={3} />
+        <p style={{
+        marginTop: '16px',
+        fontSize: '14px'
+      }}>
+          {t('components.uploader.stories.interactive.filesUploaded', {
+          count: files.length
+        })}
+        </p>
+      </div>;
+  }
+}`,...l.parameters?.docs?.source}}};const ge=["Default","Controlled","WithLimit","WithPreview","Disabled","SingleFile","MultipleFiles","Interactive"];export{s as Controlled,t as Default,i as Disabled,l as Interactive,m as MultipleFiles,p as SingleFile,n as WithLimit,a as WithPreview,ge as __namedExportsOrder,ue as default};

package/dist-storybook/assets/use-app-pause-B_tWHKJK.js

@@ -0,0 +1,29 @@
+import{j as e}from"./iframe-CQAwSt4E.js";import{useMDXComponents as t}from"./index-CgMRTj-o.js";import{b as i,M as p}from"./blocks-BuaOUtiH.js";import{t as o}from"./store-D2RudmNr.js";import"./preload-helper-PPVm8Dsz.js";import"./index-DHiZ-gXR.js";function r(s){const n={code:"code",h1:"h1",h2:"h2",pre:"pre",...t(),...s.components};return e.jsxs(e.Fragment,{children:[`
+`,`
+`,e.jsx(i,{title:"Hooks/useAppPause"}),`
+`,e.jsx(n.h1,{id:"useapppause",children:"useAppPause"}),`
+`,e.jsx(p,{children:o("hooks.useAppPause.description")}),`
+`,e.jsx(n.h2,{id:"import",children:"Import"}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-typescript",children:`import { useAppPause } from '@v-miniapp/ui-react'
+`})}),`
+`,e.jsx(n.h2,{id:"props",children:"Props"}),`
+`,e.jsx(p,{children:`
+| Name      | Type         | Required | Default | Description                                                             |
+| --------- | ------------ | -------- | ------- | ----------------------------------------------------------------------- |
+| onPause   | () => void   | Yes      | -       | ${o("hooks.useAppPause.onPauseDescription")} |
+`}),`
+`,e.jsx(n.h2,{id:"",children:o("hooks.usageExample")}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-typescript",children:`import { useAppPause } from '@v-miniapp/ui-react';
+
+function MyComponent() {
+  useAppPause(() => {
+    console.log('App paused!');
+  });
+
+  return (
+    <div>
+      <h1>My Component</h1>
+    </div>
+  );
+}
+`})})]})}function l(s={}){const{wrapper:n}={...t(),...s.components};return n?e.jsx(n,{...s,children:e.jsx(r,{...s})}):r(s)}export{l as default};

package/dist-storybook/assets/use-app-resume--900G-dV.js

@@ -0,0 +1,29 @@
+import{j as e}from"./iframe-CQAwSt4E.js";import{useMDXComponents as t}from"./index-CgMRTj-o.js";import{b as i,M as r}from"./blocks-BuaOUtiH.js";import{t as o}from"./store-D2RudmNr.js";import"./preload-helper-PPVm8Dsz.js";import"./index-DHiZ-gXR.js";function p(s){const n={code:"code",h1:"h1",h2:"h2",pre:"pre",...t(),...s.components};return e.jsxs(e.Fragment,{children:[`
+`,`
+`,e.jsx(i,{title:"Hooks/useAppResume"}),`
+`,e.jsx(n.h1,{id:"useappresume",children:"useAppResume"}),`
+`,e.jsx(r,{children:o("hooks.useAppResume.description")}),`
+`,e.jsx(n.h2,{id:"import",children:"Import"}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-typescript",children:`import { useAppResume } from '@v-miniapp/ui-react'
+`})}),`
+`,e.jsx(n.h2,{id:"props",children:"Props"}),`
+`,e.jsx(r,{children:`
+| Name      | Type         | Required | Default | Description                                                             |
+| --------- | ------------ | -------- | ------- | ----------------------------------------------------------------------- |
+| onResume  | () => void   | Yes      | -       | ${o("hooks.useAppResume.onResumeDescription")} |
+`}),`
+`,e.jsx(n.h2,{id:"",children:o("hooks.usageExample")}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-typescript",children:`import { useAppResume } from '@v-miniapp/ui-react';
+
+function MyComponent() {
+  useAppResume(() => {
+    console.log('App resumed!');
+  });
+
+  return (
+    <div>
+      <h1>My Component</h1>
+    </div>
+  );
+}
+`})})]})}function l(s={}){const{wrapper:n}={...t(),...s.components};return n?e.jsx(n,{...s,children:e.jsx(p,{...s})}):p(s)}export{l as default};

package/dist-storybook/assets/use-custom-icon-event-3VExRzvC.js

@@ -0,0 +1,29 @@
+import{j as n}from"./iframe-CQAwSt4E.js";import{useMDXComponents as r}from"./index-CgMRTj-o.js";import{b as c,M as s}from"./blocks-BuaOUtiH.js";import{t}from"./store-D2RudmNr.js";import"./preload-helper-PPVm8Dsz.js";import"./index-DHiZ-gXR.js";function i(o){const e={code:"code",h1:"h1",h2:"h2",pre:"pre",...r(),...o.components};return n.jsxs(n.Fragment,{children:[`
+`,`
+`,n.jsx(c,{title:"Hooks/useCustomIconEvent"}),`
+`,n.jsx(e.h1,{id:"usecustomiconevent",children:"useCustomIconEvent"}),`
+`,n.jsx(s,{children:t("hooks.useCustomIconEvent.description")}),`
+`,n.jsx(e.h2,{id:"import",children:"Import"}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-typescript",children:`import { useCustomIconEvent } from '@v-miniapp/ui-react'
+`})}),`
+`,n.jsx(e.h2,{id:"props",children:"Props"}),`
+`,n.jsx(s,{children:`
+| Name              | Type                     | Required | Default | Description |
+| ----------------- | ------------------------ | -------- | ------- | ----------- |
+| onCustomIconEvent | (index: number) => void  | Yes      | -       | ${t("hooks.useCustomIconEvent.onCustomIconEventDescription")} |
+`}),`
+`,n.jsx(e.h2,{id:"",children:t("hooks.usageExample")}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-typescript",children:`import { useCustomIconEvent } from '@v-miniapp/ui-react';
+
+function MyComponent() {
+  useCustomIconEvent((index) => {
+    console.log(\`Custom icon at index \${index} was clicked\`);
+  });
+
+  return (
+    <div>
+      <h1>My Component</h1>
+    </div>
+  );
+}
+`})})]})}function l(o={}){const{wrapper:e}={...r(),...o.components};return e?n.jsx(e,{...o,children:n.jsx(i,{...o})}):i(o)}export{l as default};

package/dist-storybook/assets/use-did-hide-BUsL73ab.js

@@ -0,0 +1,48 @@
+import{j as e}from"./iframe-CQAwSt4E.js";import{useMDXComponents as s}from"./index-CgMRTj-o.js";import{b as c}from"./blocks-BuaOUtiH.js";import"./preload-helper-PPVm8Dsz.js";import"./index-DHiZ-gXR.js";function d(i){const n={code:"code",h1:"h1",h2:"h2",li:"li",p:"p",pre:"pre",ul:"ul",...s(),...i.components};return e.jsxs(e.Fragment,{children:[`
+`,`
+`,e.jsx(c,{title:"Hooks/useDidHide"}),`
+`,e.jsx(n.h1,{id:"usedidhide",children:"useDidHide"}),`
+`,e.jsx(n.p,{children:"Hook để xử lý khi page bị ẩn (hide)."}),`
+`,e.jsx(n.h2,{id:"import",children:"Import"}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-typescript",children:`import { useDidHide } from '@v-miniapp/ui-react'
+`})}),`
+`,e.jsx(n.h2,{id:"parameters",children:"Parameters"}),`
+`,e.jsxs(n.ul,{children:[`
+`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"func?: () => void"}),": Callback function được gọi khi page hide"]}),`
+`]}),`
+`,e.jsx(n.h2,{id:"returns",children:"Returns"}),`
+`,e.jsxs(n.ul,{children:[`
+`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"didHide"}),": ",e.jsx(n.code,{children:"boolean"})," - Cho biết page có đang bị ẩn không"]}),`
+`]}),`
+`,e.jsx(n.h2,{id:"usage",children:"Usage"}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { useDidHide } from '@v-miniapp/ui-react'
+import { useEffect } from 'react'
+
+const MyPage = () => {
+  const didHide = useDidHide(() => {
+    console.log('Page is hidden')
+    // Cleanup, pause timers, etc.
+  })
+  
+  useEffect(() => {
+    if (didHide) {
+      // Page is hidden, cleanup
+      pauseTimers()
+    }
+  }, [didHide])
+  
+  return <div>Page is {didHide ? 'hidden' : 'visible'}</div>
+}
+`})}),`
+`,e.jsx(n.h2,{id:"lifecycle",children:"Lifecycle"}),`
+`,e.jsx(n.p,{children:"Hook này trigger callback khi:"}),`
+`,e.jsxs(n.ul,{children:[`
+`,e.jsx(n.li,{children:"Page bị navigate đi (navigate đến page khác)"}),`
+`,e.jsx(n.li,{children:"Page bị ẩn do keep-alive (page khác được show)"}),`
+`]}),`
+`,e.jsx(n.h2,{id:"notes",children:"Notes"}),`
+`,e.jsxs(n.ul,{children:[`
+`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"didHide"})," sẽ là ",e.jsx(n.code,{children:"true"})," khi page bị ẩn, ",e.jsx(n.code,{children:"false"})," khi được hiển thị"]}),`
+`,e.jsxs(n.li,{children:["Sử dụng ",e.jsx(n.code,{children:"navigationEventEmitter"})," với event ",e.jsx(n.code,{children:"beforeLocationChangeP1"})," để detect page hide"]}),`
+`,e.jsx(n.li,{children:"Hữu ích cho cleanup, pause timers, hoặc save state"}),`
+`]})]})}function a(i={}){const{wrapper:n}={...s(),...i.components};return n?e.jsx(n,{...i,children:e.jsx(d,{...i})}):d(i)}export{a as default};

package/dist-storybook/assets/use-did-show-C1-VLDxi.js

@@ -0,0 +1,49 @@
+import{j as n}from"./iframe-CQAwSt4E.js";import{useMDXComponents as c}from"./index-CgMRTj-o.js";import{b as o}from"./blocks-BuaOUtiH.js";import"./preload-helper-PPVm8Dsz.js";import"./index-DHiZ-gXR.js";function s(i){const e={code:"code",h1:"h1",h2:"h2",li:"li",p:"p",pre:"pre",ul:"ul",...c(),...i.components};return n.jsxs(n.Fragment,{children:[`
+`,`
+`,n.jsx(o,{title:"Hooks/useDidShow"}),`
+`,n.jsx(e.h1,{id:"usedidshow",children:"useDidShow"}),`
+`,n.jsx(e.p,{children:"Hook để xử lý khi page được hiển thị (show)."}),`
+`,n.jsx(e.h2,{id:"import",children:"Import"}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-typescript",children:`import { useDidShow } from '@v-miniapp/ui-react'
+`})}),`
+`,n.jsx(e.h2,{id:"parameters",children:"Parameters"}),`
+`,n.jsxs(e.ul,{children:[`
+`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"func?: () => void"}),": Callback function được gọi khi page show"]}),`
+`]}),`
+`,n.jsx(e.h2,{id:"returns",children:"Returns"}),`
+`,n.jsxs(e.ul,{children:[`
+`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"didShow"}),": ",n.jsx(e.code,{children:"boolean"})," - Cho biết page có đang được hiển thị không"]}),`
+`]}),`
+`,n.jsx(e.h2,{id:"usage",children:"Usage"}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`import { useDidShow } from '@v-miniapp/ui-react'
+import { useEffect } from 'react'
+
+const MyPage = () => {
+  const didShow = useDidShow(() => {
+    console.log('Page is shown')
+    // Fetch data, track analytics, etc.
+  })
+  
+  useEffect(() => {
+    if (didShow) {
+      // Page is visible, do something
+      fetchData()
+    }
+  }, [didShow])
+  
+  return <div>Page is {didShow ? 'visible' : 'hidden'}</div>
+}
+`})}),`
+`,n.jsx(e.h2,{id:"lifecycle",children:"Lifecycle"}),`
+`,n.jsx(e.p,{children:"Hook này trigger callback khi:"}),`
+`,n.jsxs(e.ul,{children:[`
+`,n.jsx(e.li,{children:"Page được mount lần đầu"}),`
+`,n.jsx(e.li,{children:"Page được navigate đến (từ page khác)"}),`
+`,n.jsx(e.li,{children:"Page được show lại sau khi bị ẩn (navigate back)"}),`
+`]}),`
+`,n.jsx(e.h2,{id:"notes",children:"Notes"}),`
+`,n.jsxs(e.ul,{children:[`
+`,n.jsx(e.li,{children:"Callback được gọi ngay khi component mount"}),`
+`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"didShow"})," sẽ là ",n.jsx(e.code,{children:"true"})," khi page được hiển thị, ",n.jsx(e.code,{children:"false"})," khi bị ẩn"]}),`
+`,n.jsxs(e.li,{children:["Sử dụng ",n.jsx(e.code,{children:"navigationEventEmitter"})," với event ",n.jsx(e.code,{children:"beforeLocationChangeP2"})," để detect page show"]}),`
+`]})]})}function a(i={}){const{wrapper:e}={...c(),...i.components};return e?n.jsx(e,{...i,children:n.jsx(s,{...i})}):s(i)}export{a as default};

package/dist-storybook/assets/use-histories-E4E2jJEY.js

@@ -0,0 +1,50 @@
+import{j as n}from"./iframe-CQAwSt4E.js";import{useMDXComponents as t}from"./index-CgMRTj-o.js";import{b as o}from"./blocks-BuaOUtiH.js";import"./preload-helper-PPVm8Dsz.js";import"./index-DHiZ-gXR.js";function s(e){const i={code:"code",h1:"h1",h2:"h2",li:"li",p:"p",pre:"pre",ul:"ul",...t(),...e.components};return n.jsxs(n.Fragment,{children:[`
+`,`
+`,n.jsx(o,{title:"Hooks/useHistories"}),`
+`,n.jsx(i.h1,{id:"usehistories",children:"useHistories"}),`
+`,n.jsx(i.p,{children:"Hook để lấy toàn bộ history stack."}),`
+`,n.jsx(i.h2,{id:"import",children:"Import"}),`
+`,n.jsx(i.pre,{children:n.jsx(i.code,{className:"language-typescript",children:`import { useHistories } from '@v-miniapp/ui-react'
+`})}),`
+`,n.jsx(i.h2,{id:"returns",children:"Returns"}),`
+`,n.jsxs(i.ul,{children:[`
+`,n.jsxs(i.li,{children:[n.jsx(i.code,{children:"histories"}),": ",n.jsx(i.code,{children:"IHistory[]"})," - Mảng các history entries trong navigation stack"]}),`
+`]}),`
+`,n.jsx(i.h2,{id:"type-definitions",children:"Type Definitions"}),`
+`,n.jsx(i.pre,{children:n.jsx(i.code,{className:"language-typescript",children:`type IHistory = {
+  action: IHistoryAction
+  location: ILocation
+}
+
+type IHistory[] = IHistory[]
+`})}),`
+`,n.jsx(i.h2,{id:"usage",children:"Usage"}),`
+`,n.jsx(i.pre,{children:n.jsx(i.code,{className:"language-tsx",children:`import { useHistories } from '@v-miniapp/ui-react'
+
+const MyPage = () => {
+  const histories = useHistories()
+  
+  console.log(histories.length) // Số lượng pages trong stack
+  console.log(histories[0])     // First history entry
+  console.log(histories[histories.length - 1]) // Last history entry (current)
+  
+  return (
+    <div>
+      <p>History stack length: {histories.length}</p>
+      <ul>
+        {histories.map((history, index) => (
+          <li key={history.location.key}>
+            {index + 1}. {history.location.pathname} ({history.action})
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+`})}),`
+`,n.jsx(i.h2,{id:"notes",children:"Notes"}),`
+`,n.jsxs(i.ul,{children:[`
+`,n.jsx(i.li,{children:"History stack được quản lý bởi browser history API"}),`
+`,n.jsxs(i.li,{children:["Mỗi history entry có unique ",n.jsx(i.code,{children:"location.key"})]}),`
+`,n.jsx(i.li,{children:"Stack được update khi navigate (push/replace/pop)"}),`
+`]})]})}function d(e={}){const{wrapper:i}={...t(),...e.components};return i?n.jsx(i,{...e,children:n.jsx(s,{...e})}):s(e)}const p=[];export{p as __namedExportsOrder,d as default};

package/dist-storybook/assets/use-history-o1im8IDj.js

@@ -0,0 +1,67 @@
+import{j as n}from"./iframe-CQAwSt4E.js";import{useMDXComponents as t}from"./index-CgMRTj-o.js";import{b as s}from"./blocks-BuaOUtiH.js";import"./preload-helper-PPVm8Dsz.js";import"./index-DHiZ-gXR.js";function o(i){const e={code:"code",h1:"h1",h2:"h2",li:"li",p:"p",pre:"pre",ul:"ul",...t(),...i.components};return n.jsxs(n.Fragment,{children:[`
+`,`
+`,n.jsx(s,{title:"Hooks/useHistory"}),`
+`,n.jsx(e.h1,{id:"usehistory",children:"useHistory"}),`
+`,n.jsx(e.p,{children:"Hook để lấy history entry hiện tại của page."}),`
+`,n.jsx(e.h2,{id:"import",children:"Import"}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-typescript",children:`import { useHistory } from '@v-miniapp/ui-react'
+`})}),`
+`,n.jsx(e.h2,{id:"returns",children:"Returns"}),`
+`,n.jsxs(e.ul,{children:[`
+`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"history"}),": ",n.jsx(e.code,{children:"IHistory"})," object hoặc ",n.jsx(e.code,{children:"undefined"})," chứa:",`
+`,n.jsxs(e.ul,{children:[`
+`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"action"}),": ",n.jsx(e.code,{children:"'PUSH' | 'REPLACE' | 'POP'"})," - Navigation action type"]}),`
+`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"location"}),": ",n.jsx(e.code,{children:"ILocation"})," object chứa:",`
+`,n.jsxs(e.ul,{children:[`
+`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"key"}),": ",n.jsx(e.code,{children:"string"})," - Unique key cho location này"]}),`
+`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"pathname"}),": ",n.jsx(e.code,{children:"string"})," - Pathname của page"]}),`
+`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"params?"}),": ",n.jsx(e.code,{children:"Record<string, string>"})," - Query parameters"]}),`
+`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"state?"}),": ",n.jsx(e.code,{children:"any"})," - State object"]}),`
+`]}),`
+`]}),`
+`]}),`
+`]}),`
+`]}),`
+`,n.jsx(e.h2,{id:"type-definitions",children:"Type Definitions"}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-typescript",children:`type IHistory = {
+  action: IHistoryAction
+  location: ILocation
+}
+
+type IHistoryAction = 'POP' | 'REPLACE' | 'PUSH'
+
+type ILocation = {
+  key: string
+  pathname: string
+  params?: Record&lt;string, string&gt;
+  state?: any
+}
+`})}),`
+`,n.jsx(e.h2,{id:"usage",children:"Usage"}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`import { useHistory } from '@v-miniapp/ui-react'
+
+const MyPage = () => {
+  const history = useHistory()
+  
+  if (!history) return null
+  
+  console.log(history.location.pathname) // '/home'
+  console.log(history.location.params)   // { id: '123' }
+  console.log(history.location.state)    // { from: 'home' }
+  console.log(history.location.key)      // Unique key
+  console.log(history.action)            // 'PUSH' | 'REPLACE' | 'POP'
+  
+  return (
+    <div>
+      <p>Current path: {history.location.pathname}</p>
+      <p>Action: {history.action}</p>
+    </div>
+  )
+}
+`})}),`
+`,n.jsx(e.h2,{id:"notes",children:"Notes"}),`
+`,n.jsxs(e.ul,{children:[`
+`,n.jsxs(e.li,{children:["Hook này sử dụng ",n.jsx(e.code,{children:"LocationKeyContext"})," để lấy history entry tương ứng với page hiện tại"]}),`
+`,n.jsxs(e.li,{children:["Nếu không có ",n.jsx(e.code,{children:"locationKey"})," trong context, sẽ trả về last history entry"]}),`
+`,n.jsx(e.li,{children:"History entry được tạo mới mỗi khi navigate (với unique key)"}),`
+`]})]})}function a(i={}){const{wrapper:e}={...t(),...i.components};return e?n.jsx(e,{...i,children:n.jsx(o,{...i})}):o(i)}const x=[];export{x as __namedExportsOrder,a as default};

package/dist-storybook/assets/use-location-CUEaBO4P.js

@@ -0,0 +1,56 @@
+import{j as n}from"./iframe-CQAwSt4E.js";import{useMDXComponents as s}from"./index-CgMRTj-o.js";import{b as c}from"./blocks-BuaOUtiH.js";import"./preload-helper-PPVm8Dsz.js";import"./index-DHiZ-gXR.js";function o(i){const e={code:"code",h1:"h1",h2:"h2",li:"li",p:"p",pre:"pre",ul:"ul",...s(),...i.components};return n.jsxs(n.Fragment,{children:[`
+`,`
+`,n.jsx(c,{title:"Hooks/useLocation"}),`
+`,n.jsx(e.h1,{id:"uselocation",children:"useLocation"}),`
+`,n.jsx(e.p,{children:"Hook để lấy location object hiện tại (pathname, params, state, key)."}),`
+`,n.jsx(e.h2,{id:"import",children:"Import"}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-typescript",children:`import { useLocation } from '@v-miniapp/ui-react'
+`})}),`
+`,n.jsx(e.h2,{id:"returns",children:"Returns"}),`
+`,n.jsxs(e.ul,{children:[`
+`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"location"}),": ",n.jsx(e.code,{children:"ILocation"})," object hoặc ",n.jsx(e.code,{children:"undefined"})," chứa:",`
+`,n.jsxs(e.ul,{children:[`
+`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"key"}),": ",n.jsx(e.code,{children:"string"})," - Unique key cho location này"]}),`
+`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"pathname"}),": ",n.jsx(e.code,{children:"string"})," - Pathname của page"]}),`
+`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"params?"}),": ",n.jsx(e.code,{children:"Record<string, string>"})," - Query parameters"]}),`
+`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"state?"}),": ",n.jsx(e.code,{children:"any"})," - State object"]}),`
+`]}),`
+`]}),`
+`]}),`
+`,n.jsx(e.h2,{id:"type-definitions",children:"Type Definitions"}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-typescript",children:`type ILocation = {
+  key: string
+  pathname: string
+  params?: Record&lt;string, string&gt;
+  state?: any
+}
+`})}),`
+`,n.jsx(e.h2,{id:"usage",children:"Usage"}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`import { useLocation } from '@v-miniapp/ui-react'
+
+const MyPage = () => {
+  const location = useLocation()
+  
+  if (!location) return null
+  
+  console.log(location.pathname) // '/home'
+  console.log(location.params)   // { id: '123' }
+  console.log(location.state)    // { from: 'home' }
+  console.log(location.key)      // Unique key
+  
+  return (
+    <div>
+      <p>Path: {location.pathname}</p>
+      {location.params && (
+        <p>Params: {JSON.stringify(location.params)}</p>
+      )}
+    </div>
+  )
+}
+`})}),`
+`,n.jsx(e.h2,{id:"notes",children:"Notes"}),`
+`,n.jsxs(e.ul,{children:[`
+`,n.jsxs(e.li,{children:["Hook này là wrapper của ",n.jsx(e.code,{children:"useHistory().location"})]}),`
+`,n.jsxs(e.li,{children:["Có thể trả về ",n.jsx(e.code,{children:"undefined"})," nếu không có history entry"]}),`
+`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"location.key"})," là unique identifier cho mỗi navigation instance"]}),`
+`]})]})}function h(i={}){const{wrapper:e}={...s(),...i.components};return e?n.jsx(e,{...i,children:n.jsx(o,{...i})}):o(i)}export{h as default};

package/dist-storybook/assets/use-navigate-C4CTuFSZ.js

@@ -0,0 +1,84 @@
+import{j as n}from"./iframe-CQAwSt4E.js";import{useMDXComponents as o}from"./index-CgMRTj-o.js";import{b as s,M as t}from"./blocks-BuaOUtiH.js";import"./preload-helper-PPVm8Dsz.js";import"./index-DHiZ-gXR.js";function i(a){const e={code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...o(),...a.components};return n.jsxs(n.Fragment,{children:[`
+`,`
+`,n.jsx(s,{title:"Hooks/useNavigate"}),`
+`,n.jsx(e.h1,{id:"usenavigate",children:"useNavigate"}),`
+`,n.jsxs(e.p,{children:["Hook để lấy function ",n.jsx(e.code,{children:"navigate"})," để điều hướng giữa các pages."]}),`
+`,n.jsx(e.h2,{id:"import",children:"Import"}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-typescript",children:`import { useNavigate } from '@v-miniapp/ui-react'
+`})}),`
+`,n.jsx(e.h2,{id:"returns",children:"Returns"}),`
+`,n.jsxs(e.ul,{children:[`
+`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"navigate"}),": Function để điều hướng với type ",n.jsx(e.code,{children:"INavigate"}),":",`
+`,n.jsxs(e.ul,{children:[`
+`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"navigate(pathname: string, options?: INavigatePathnameOptions): void"})," - Navigate bằng pathname"]}),`
+`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"navigate(delta: number, options?: INavigateDeltaOptions): void"})," - Navigate bằng delta (back/forward)"]}),`
+`]}),`
+`]}),`
+`]}),`
+`,n.jsx(e.h2,{id:"type-definitions",children:"Type Definitions"}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-typescript",children:`type INavigate = {
+  (to: string, options?: INavigatePathnameOptions): void
+  (to: number, options?: INavigateDeltaOptions): void
+}
+
+type INavigatePathnameOptions = {
+  replace?: boolean
+  params?: Record<string, string>
+  state?: any
+} & IPageState
+
+type INavigateDeltaOptions = {
+  animation?: IAppAnimationState
+}
+`})}),`
+`,n.jsx(e.h2,{id:"usage",children:"Usage"}),`
+`,n.jsx(e.h3,{id:"navigate-bằng-pathname",children:"Navigate bằng pathname"}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`import { useNavigate } from '@v-miniapp/ui-react'
+
+const MyPage = () => {
+  const navigate = useNavigate()
+
+  const handleClick = () => {
+    navigate('/settings', {
+      params: { id: '123' },
+      state: { from: 'home' },
+      replace: false,
+    })
+  }
+
+  return <button onClick={handleClick}>Go to Settings</button>
+}
+`})}),`
+`,n.jsx(e.h3,{id:"navigate-với-page-level-config",children:"Navigate với page-level config"}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`const navigate = useNavigate()
+
+navigate('/detail', {
+  params: { id: '123' },
+  navigationBar: {
+    title: 'Detail Page',
+  },
+  animation: {
+    type: 'fade_in',
+  },
+})
+`})}),`
+`,n.jsx(e.h3,{id:"navigate-backforward",children:"Navigate back/forward"}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`const navigate = useNavigate()
+
+// Navigate back 1 page
+navigate(-1)
+
+// Navigate forward 1 page
+navigate(1)
+
+// Navigate back với custom animation
+navigate(-1, {
+  animation: { type: 'none' },
+})
+`})}),`
+`,n.jsx(e.h2,{id:"options",children:"Options"}),`
+`,n.jsx(e.h3,{id:"inavigatepathnameoptions",children:"INavigatePathnameOptions"}),`
+`,n.jsx(t,{children:"\n| Option | Type | Mô tả |\n| :--- | :--- | :--- |\n| `replace` | `boolean` | Nếu `true`, replace history entry thay vì push mới |\n| `params` | `Record&lt;string, string&gt;` | Query parameters (sẽ được thêm vào URL) |\n| `state` | `any` | State object (không hiển thị trong URL, lưu trong history) |\n| `animation` | `IAppAnimationState` | Override animation cho navigation này |\n| `navigationBar` | `IAppNavigationBarState` | Override navigation bar cho page này |\n| `bottomTabBar` | `IAppBottomTabBarState` | Override bottom tab bar cho page này |\n| `keepAlive` | `boolean | IAppKeepAliveState` | Override keep-alive cho page này |\n| `pageLayout` | `IAppPageLayoutState` | Override page layout cho page này |\n"}),`
+`,n.jsxs(e.p,{children:[n.jsx(e.strong,{children:"Lưu ý:"})," `INavigatePathnameOptions` extends `IPageState`, nên bạn có thể truyền các page-level config trong navigate options để override config cho page mới."]}),`
+`,n.jsx(e.h3,{id:"inavigatedeltaoptions",children:"INavigateDeltaOptions"}),`
+`,n.jsx(t,{children:"\n| Option | Type | Mô tả |\n| :--- | :--- | :--- |\n| `animation` | `IAppAnimationState` | Override animation cho navigation này |\n"})]})}function d(a={}){const{wrapper:e}={...o(),...a.components};return e?n.jsx(e,{...a,children:n.jsx(i,{...a})}):i(a)}export{d as default};

package/dist-storybook/assets/use-navigation-type-Dcz4hgKo.js

@@ -0,0 +1,44 @@
+import{j as n}from"./iframe-CQAwSt4E.js";import{useMDXComponents as s}from"./index-CgMRTj-o.js";import{b as r}from"./blocks-BuaOUtiH.js";import"./preload-helper-PPVm8Dsz.js";import"./index-DHiZ-gXR.js";function t(i){const e={code:"code",h1:"h1",h2:"h2",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...s(),...i.components};return n.jsxs(n.Fragment,{children:[`
+`,`
+`,n.jsx(r,{title:"Hooks/useNavigationType"}),`
+`,n.jsx(e.h1,{id:"usenavigationtype",children:"useNavigationType"}),`
+`,n.jsx(e.p,{children:"Hook để lấy navigation action type (PUSH, REPLACE, POP)."}),`
+`,n.jsx(e.h2,{id:"import",children:"Import"}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-typescript",children:`import { useNavigationType } from '@v-miniapp/ui-react'
+`})}),`
+`,n.jsx(e.h2,{id:"returns",children:"Returns"}),`
+`,n.jsxs(e.ul,{children:[`
+`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"action"}),": ",n.jsx(e.code,{children:"'PUSH' | 'REPLACE' | 'POP'"})," hoặc ",n.jsx(e.code,{children:"undefined"})]}),`
+`]}),`
+`,n.jsx(e.h2,{id:"type-definitions",children:"Type Definitions"}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-typescript",children:`type IHistoryAction = 'POP' | 'REPLACE' | 'PUSH'
+`})}),`
+`,n.jsx(e.h2,{id:"usage",children:"Usage"}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`import { useNavigationType } from '@v-miniapp/ui-react'
+
+const MyPage = () => {
+  const action = useNavigationType()
+  
+  console.log(action) // 'PUSH' | 'REPLACE' | 'POP'
+  
+  return (
+    <div>
+      <p>Navigation type: {action}</p>
+      {action === 'PUSH' && <p>New page pushed to stack</p>}
+      {action === 'REPLACE' && <p>Current page replaced</p>}
+      {action === 'POP' && <p>Navigated back/forward</p>}
+    </div>
+  )
+}
+`})}),`
+`,n.jsx(e.h2,{id:"action-types",children:"Action Types"}),`
+`,n.jsxs(e.ul,{children:[`
+`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"PUSH"}),": Navigate đến page mới (push vào history stack)"]}),`
+`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"REPLACE"}),": Replace current page (thay thế history entry hiện tại)"]}),`
+`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"POP"}),": Navigate back/forward trong history stack (browser back/forward button)"]}),`
+`]}),`
+`,n.jsx(e.h2,{id:"notes",children:"Notes"}),`
+`,n.jsxs(e.ul,{children:[`
+`,n.jsxs(e.li,{children:["Hook này là wrapper của ",n.jsx(e.code,{children:"useHistory().action"})]}),`
+`,n.jsxs(e.li,{children:["Có thể trả về ",n.jsx(e.code,{children:"undefined"})," nếu không có history entry"]}),`
+`]})]})}function p(i={}){const{wrapper:e}={...s(),...i.components};return e?n.jsx(e,{...i,children:n.jsx(t,{...i})}):t(i)}export{p as default};

package/dist-storybook/assets/use-page-config-DSJBVQbq.js

@@ -0,0 +1,48 @@
+import{j as n}from"./iframe-CQAwSt4E.js";import{useMDXComponents as a}from"./index-CgMRTj-o.js";import{b as t}from"./blocks-BuaOUtiH.js";import"./preload-helper-PPVm8Dsz.js";import"./index-DHiZ-gXR.js";function o(i){const e={code:"code",h1:"h1",h2:"h2",li:"li",p:"p",pre:"pre",ul:"ul",...a(),...i.components};return n.jsxs(n.Fragment,{children:[`
+`,`
+`,n.jsx(t,{title:"Hooks/usePageConfig"}),`
+`,n.jsx(e.h1,{id:"usepageconfig",children:"usePageConfig"}),`
+`,n.jsx(e.p,{children:"Hook để lấy config của page hiện tại."}),`
+`,n.jsx(e.h2,{id:"import",children:"Import"}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-typescript",children:`import { usePageConfig } from '@v-miniapp/ui-react'
+`})}),`
+`,n.jsx(e.h2,{id:"returns",children:"Returns"}),`
+`,n.jsxs(e.ul,{children:[`
+`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"pageConfig"}),": ",n.jsx(e.code,{children:"IPageConfig"})," của page hiện tại hoặc ",n.jsx(e.code,{children:"undefined"})]}),`
+`]}),`
+`,n.jsx(e.h2,{id:"type-definitions",children:"Type Definitions"}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-typescript",children:`type IPageConfig = {
+  pathname: string
+  Component: ComponentType
+  Layouts?: IPageLayout[]
+  bottomTabBarId?: string
+} & IPageState
+`})}),`
+`,n.jsx(e.h2,{id:"usage",children:"Usage"}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`import { usePageConfig } from '@v-miniapp/ui-react'
+
+const MyPage = () => {
+  const pageConfig = usePageConfig()
+  
+  if (!pageConfig) return null
+  
+  console.log(pageConfig.pathname)      // '/home'
+  console.log(pageConfig.Component)      // Component của page
+  console.log(pageConfig.navigationBar) // Navigation bar config
+  console.log(pageConfig.animation)      // Animation config
+  console.log(pageConfig.Layouts)       // Layouts array
+  
+  return (
+    <div>
+      <p>Page: {pageConfig.pathname}</p>
+      <p>Title: {pageConfig.navigationBar?.title}</p>
+    </div>
+  )
+}
+`})}),`
+`,n.jsx(e.h2,{id:"notes",children:"Notes"}),`
+`,n.jsxs(e.ul,{children:[`
+`,n.jsxs(e.li,{children:["Hook này tìm page config dựa trên ",n.jsx(e.code,{children:"pathname"})," hiện tại"]}),`
+`,n.jsxs(e.li,{children:["Trả về ",n.jsx(e.code,{children:"undefined"})," nếu không tìm thấy page config"]}),`
+`,n.jsxs(e.li,{children:["Page config chứa tất cả thông tin được định nghĩa trong ",n.jsx(e.code,{children:"IAppConfig.pages"})]}),`
+`]})]})}function l(i={}){const{wrapper:e}={...a(),...i.components};return e?n.jsx(e,{...i,children:n.jsx(o,{...i})}):o(i)}export{l as default};