@multiplatform.one/components 6.4.3 → 6.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/Avatar/index.cjs +4 -0
- package/dist/cjs/Avatar/index.native.js +4 -0
- package/dist/cjs/Avatar/index.native.js.map +1 -1
- package/dist/cjs/Badge/index.cjs +3 -0
- package/dist/cjs/Badge/index.native.js +3 -0
- package/dist/cjs/Badge/index.native.js.map +1 -1
- package/dist/cjs/Carousel/index.cjs +28 -15
- package/dist/cjs/Carousel/index.native.js +34 -17
- package/dist/cjs/Carousel/index.native.js.map +1 -1
- package/dist/cjs/DotIndicator/index.cjs +92 -35
- package/dist/cjs/DotIndicator/index.native.js +93 -35
- package/dist/cjs/DotIndicator/index.native.js.map +1 -1
- package/dist/cjs/Pagination.cjs +112 -167
- package/dist/cjs/Pagination.native.js +125 -180
- package/dist/cjs/Pagination.native.js.map +1 -1
- package/dist/cjs/ProgressSteps/index.cjs +2 -1
- package/dist/cjs/ProgressSteps/index.native.js +2 -1
- package/dist/cjs/ProgressSteps/index.native.js.map +1 -1
- package/dist/cjs/charts/PieChart.cjs +1 -1
- package/dist/cjs/charts/PieChart.native.js +7 -2
- package/dist/cjs/charts/PieChart.native.js.map +1 -1
- package/dist/cjs/feedback/ConfirmDialog.cjs +1 -3
- package/dist/cjs/feedback/ConfirmDialog.native.js +1 -3
- package/dist/cjs/feedback/ConfirmDialog.native.js.map +1 -1
- package/dist/cjs/index.cjs +1 -0
- package/dist/cjs/index.native.js +1 -0
- package/dist/cjs/index.native.js.map +1 -1
- package/dist/cjs/layouts/ViewSwitcher.cjs +4 -5
- package/dist/cjs/layouts/ViewSwitcher.native.js +13 -7
- package/dist/cjs/layouts/ViewSwitcher.native.js.map +1 -1
- package/dist/cjs/layouts/attachments.cjs +4 -8
- package/dist/cjs/layouts/attachments.native.js +5 -8
- package/dist/cjs/layouts/attachments.native.js.map +1 -1
- package/dist/cjs/layouts/page.cjs +1 -0
- package/dist/cjs/layouts/page.native.js +4 -1
- package/dist/cjs/layouts/page.native.js.map +1 -1
- package/dist/cjs/layouts/tags.cjs +1 -0
- package/dist/cjs/layouts/tags.native.js +2 -0
- package/dist/cjs/layouts/tags.native.js.map +1 -1
- package/dist/cjs/layouts/timeline.cjs +0 -6
- package/dist/cjs/layouts/timeline.native.js +0 -6
- package/dist/cjs/layouts/timeline.native.js.map +1 -1
- package/dist/cjs/surfaces.cjs +21 -0
- package/dist/cjs/surfaces.native.js +22 -0
- package/dist/cjs/surfaces.native.js.map +1 -1
- package/dist/cjs/views/Calendar.cjs +2 -0
- package/dist/cjs/views/Calendar.native.js +8 -2
- package/dist/cjs/views/Calendar.native.js.map +1 -1
- package/dist/cjs/views/Kanban.cjs +22 -13
- package/dist/cjs/views/Kanban.native.js +1 -0
- package/dist/cjs/views/Kanban.native.js.map +1 -1
- package/dist/cjs/views/ReportBuilder.cjs +12 -2
- package/dist/cjs/views/ReportBuilder.native.js +12 -2
- package/dist/cjs/views/ReportBuilder.native.js.map +1 -1
- package/dist/esm/Avatar/index.mjs +5 -1
- package/dist/esm/Avatar/index.mjs.map +1 -1
- package/dist/esm/Avatar/index.native.js +5 -1
- package/dist/esm/Avatar/index.native.js.map +1 -1
- package/dist/esm/Badge/index.mjs +4 -1
- package/dist/esm/Badge/index.mjs.map +1 -1
- package/dist/esm/Badge/index.native.js +4 -1
- package/dist/esm/Badge/index.native.js.map +1 -1
- package/dist/esm/Carousel/index.mjs +28 -15
- package/dist/esm/Carousel/index.mjs.map +1 -1
- package/dist/esm/Carousel/index.native.js +34 -17
- package/dist/esm/Carousel/index.native.js.map +1 -1
- package/dist/esm/DotIndicator/index.mjs +93 -36
- package/dist/esm/DotIndicator/index.mjs.map +1 -1
- package/dist/esm/DotIndicator/index.native.js +94 -36
- package/dist/esm/DotIndicator/index.native.js.map +1 -1
- package/dist/esm/Pagination.mjs +113 -168
- package/dist/esm/Pagination.mjs.map +1 -1
- package/dist/esm/Pagination.native.js +126 -181
- package/dist/esm/Pagination.native.js.map +1 -1
- package/dist/esm/ProgressSteps/index.mjs +2 -1
- package/dist/esm/ProgressSteps/index.mjs.map +1 -1
- package/dist/esm/ProgressSteps/index.native.js +2 -1
- package/dist/esm/ProgressSteps/index.native.js.map +1 -1
- package/dist/esm/charts/PieChart.mjs +1 -1
- package/dist/esm/charts/PieChart.mjs.map +1 -1
- package/dist/esm/charts/PieChart.native.js +7 -2
- package/dist/esm/charts/PieChart.native.js.map +1 -1
- package/dist/esm/feedback/ConfirmDialog.mjs +2 -4
- package/dist/esm/feedback/ConfirmDialog.mjs.map +1 -1
- package/dist/esm/feedback/ConfirmDialog.native.js +2 -4
- package/dist/esm/feedback/ConfirmDialog.native.js.map +1 -1
- package/dist/esm/index.mjs +2 -2
- package/dist/esm/index.mjs.map +1 -1
- package/dist/esm/index.native.js +2 -2
- package/dist/esm/index.native.js.map +1 -1
- package/dist/esm/layouts/ViewSwitcher.mjs +4 -5
- package/dist/esm/layouts/ViewSwitcher.mjs.map +1 -1
- package/dist/esm/layouts/ViewSwitcher.native.js +13 -7
- package/dist/esm/layouts/ViewSwitcher.native.js.map +1 -1
- package/dist/esm/layouts/attachments.mjs +4 -8
- package/dist/esm/layouts/attachments.mjs.map +1 -1
- package/dist/esm/layouts/attachments.native.js +5 -8
- package/dist/esm/layouts/attachments.native.js.map +1 -1
- package/dist/esm/layouts/page.mjs +2 -1
- package/dist/esm/layouts/page.mjs.map +1 -1
- package/dist/esm/layouts/page.native.js +5 -2
- package/dist/esm/layouts/page.native.js.map +1 -1
- package/dist/esm/layouts/tags.mjs +1 -0
- package/dist/esm/layouts/tags.mjs.map +1 -1
- package/dist/esm/layouts/tags.native.js +2 -0
- package/dist/esm/layouts/tags.native.js.map +1 -1
- package/dist/esm/layouts/timeline.mjs +0 -6
- package/dist/esm/layouts/timeline.mjs.map +1 -1
- package/dist/esm/layouts/timeline.native.js +0 -6
- package/dist/esm/layouts/timeline.native.js.map +1 -1
- package/dist/esm/surfaces.mjs +21 -1
- package/dist/esm/surfaces.mjs.map +1 -1
- package/dist/esm/surfaces.native.js +22 -1
- package/dist/esm/surfaces.native.js.map +1 -1
- package/dist/esm/views/Calendar.mjs +3 -1
- package/dist/esm/views/Calendar.mjs.map +1 -1
- package/dist/esm/views/Calendar.native.js +9 -3
- package/dist/esm/views/Calendar.native.js.map +1 -1
- package/dist/esm/views/Kanban.mjs +23 -14
- package/dist/esm/views/Kanban.mjs.map +1 -1
- package/dist/esm/views/Kanban.native.js +2 -1
- package/dist/esm/views/Kanban.native.js.map +1 -1
- package/dist/esm/views/ReportBuilder.mjs +13 -3
- package/dist/esm/views/ReportBuilder.mjs.map +1 -1
- package/dist/esm/views/ReportBuilder.native.js +13 -3
- package/dist/esm/views/ReportBuilder.native.js.map +1 -1
- package/dist/jsx/Avatar/index.mjs +5 -1
- package/dist/jsx/Avatar/index.mjs.map +1 -1
- package/dist/jsx/Avatar/index.native.js +4 -0
- package/dist/jsx/Avatar/index.native.js.map +1 -1
- package/dist/jsx/Badge/index.mjs +4 -1
- package/dist/jsx/Badge/index.mjs.map +1 -1
- package/dist/jsx/Badge/index.native.js +3 -0
- package/dist/jsx/Badge/index.native.js.map +1 -1
- package/dist/jsx/Carousel/index.mjs +28 -15
- package/dist/jsx/Carousel/index.mjs.map +1 -1
- package/dist/jsx/Carousel/index.native.js +34 -17
- package/dist/jsx/Carousel/index.native.js.map +1 -1
- package/dist/jsx/DotIndicator/index.mjs +93 -36
- package/dist/jsx/DotIndicator/index.mjs.map +1 -1
- package/dist/jsx/DotIndicator/index.native.js +93 -35
- package/dist/jsx/DotIndicator/index.native.js.map +1 -1
- package/dist/jsx/Pagination.mjs +113 -168
- package/dist/jsx/Pagination.mjs.map +1 -1
- package/dist/jsx/Pagination.native.js +125 -180
- package/dist/jsx/Pagination.native.js.map +1 -1
- package/dist/jsx/ProgressSteps/index.mjs +2 -1
- package/dist/jsx/ProgressSteps/index.mjs.map +1 -1
- package/dist/jsx/ProgressSteps/index.native.js +2 -1
- package/dist/jsx/ProgressSteps/index.native.js.map +1 -1
- package/dist/jsx/charts/PieChart.mjs +1 -1
- package/dist/jsx/charts/PieChart.mjs.map +1 -1
- package/dist/jsx/charts/PieChart.native.js +7 -2
- package/dist/jsx/charts/PieChart.native.js.map +1 -1
- package/dist/jsx/feedback/ConfirmDialog.mjs +2 -4
- package/dist/jsx/feedback/ConfirmDialog.mjs.map +1 -1
- package/dist/jsx/feedback/ConfirmDialog.native.js +1 -3
- package/dist/jsx/feedback/ConfirmDialog.native.js.map +1 -1
- package/dist/jsx/index.js +2 -2
- package/dist/jsx/index.js.map +1 -1
- package/dist/jsx/index.mjs +2 -2
- package/dist/jsx/index.mjs.map +1 -1
- package/dist/jsx/index.native.js +1 -0
- package/dist/jsx/index.native.js.map +1 -1
- package/dist/jsx/layouts/ViewSwitcher.mjs +4 -5
- package/dist/jsx/layouts/ViewSwitcher.mjs.map +1 -1
- package/dist/jsx/layouts/ViewSwitcher.native.js +13 -7
- package/dist/jsx/layouts/ViewSwitcher.native.js.map +1 -1
- package/dist/jsx/layouts/attachments.mjs +4 -8
- package/dist/jsx/layouts/attachments.mjs.map +1 -1
- package/dist/jsx/layouts/attachments.native.js +5 -8
- package/dist/jsx/layouts/attachments.native.js.map +1 -1
- package/dist/jsx/layouts/page.mjs +2 -1
- package/dist/jsx/layouts/page.mjs.map +1 -1
- package/dist/jsx/layouts/page.native.js +4 -1
- package/dist/jsx/layouts/page.native.js.map +1 -1
- package/dist/jsx/layouts/tags.mjs +1 -0
- package/dist/jsx/layouts/tags.mjs.map +1 -1
- package/dist/jsx/layouts/tags.native.js +2 -0
- package/dist/jsx/layouts/tags.native.js.map +1 -1
- package/dist/jsx/layouts/timeline.mjs +0 -6
- package/dist/jsx/layouts/timeline.mjs.map +1 -1
- package/dist/jsx/layouts/timeline.native.js +0 -6
- package/dist/jsx/layouts/timeline.native.js.map +1 -1
- package/dist/jsx/surfaces.mjs +21 -1
- package/dist/jsx/surfaces.mjs.map +1 -1
- package/dist/jsx/surfaces.native.js +22 -0
- package/dist/jsx/surfaces.native.js.map +1 -1
- package/dist/jsx/views/Calendar.mjs +3 -1
- package/dist/jsx/views/Calendar.mjs.map +1 -1
- package/dist/jsx/views/Calendar.native.js +8 -2
- package/dist/jsx/views/Calendar.native.js.map +1 -1
- package/dist/jsx/views/Kanban.mjs +23 -14
- package/dist/jsx/views/Kanban.mjs.map +1 -1
- package/dist/jsx/views/Kanban.native.js +1 -0
- package/dist/jsx/views/Kanban.native.js.map +1 -1
- package/dist/jsx/views/ReportBuilder.mjs +13 -3
- package/dist/jsx/views/ReportBuilder.mjs.map +1 -1
- package/dist/jsx/views/ReportBuilder.native.js +12 -2
- package/dist/jsx/views/ReportBuilder.native.js.map +1 -1
- package/package.json +10 -10
- package/src/Accordion/Accordion.stories.tsx +7 -2
- package/src/Avatar/Avatar.spec.tsx +31 -0
- package/src/Avatar/index.tsx +19 -1
- package/src/Badge/Badge.stories.tsx +3 -1
- package/src/Badge/index.tsx +4 -1
- package/src/Carousel/Carousel.spec.tsx +271 -0
- package/src/Carousel/Carousel.stories.tsx +35 -0
- package/src/Carousel/index.tsx +45 -20
- package/src/DialogContent.stories.tsx +2 -2
- package/src/DotIndicator/dotIndicator.spec.tsx +43 -1
- package/src/DotIndicator/index.tsx +169 -35
- package/src/Pagination.api.spec.tsx +345 -0
- package/src/Pagination.tsx +138 -176
- package/src/Panel.stories.tsx +4 -4
- package/src/ProgressSteps/ProgressSteps.spec.tsx +40 -1
- package/src/ProgressSteps/ProgressSteps.stories.tsx +3 -1
- package/src/ProgressSteps/index.tsx +6 -1
- package/src/charts/PieChart.tsx +4 -1
- package/src/feedback/ConfirmDialog.tsx +2 -2
- package/src/index.ts +1 -0
- package/src/layouts/PageHeader.stories.tsx +21 -3
- package/src/layouts/ScreenToolbar.stories.tsx +12 -5
- package/src/layouts/ViewSwitcher.tsx +25 -6
- package/src/layouts/attachments.tsx +4 -1
- package/src/layouts/layouts.spec.tsx +77 -1
- package/src/layouts/page.tsx +5 -1
- package/src/layouts/pageTitleScale.spec.tsx +70 -0
- package/src/layouts/tags.tsx +2 -0
- package/src/layouts/timeline-radius.spec.tsx +21 -0
- package/src/layouts/timeline.tsx +7 -18
- package/src/shared/t.spec.ts +47 -0
- package/src/surfaces.tsx +33 -0
- package/src/views/Calendar.stories.tsx +4 -2
- package/src/views/Calendar.tsx +6 -1
- package/src/views/Gantt.stories.tsx +2 -2
- package/src/views/Kanban.native.tsx +8 -2
- package/src/views/Kanban.stories.tsx +3 -1
- package/src/views/Kanban.tsx +42 -13
- package/src/views/ReportBuilder.tsx +15 -2
- package/types/Avatar/index.d.ts.map +1 -1
- package/types/Badge/index.d.ts.map +1 -1
- package/types/Carousel/index.d.ts.map +1 -1
- package/types/DotIndicator/index.d.ts +44 -3
- package/types/DotIndicator/index.d.ts.map +1 -1
- package/types/Pagination.d.ts +6 -1
- package/types/Pagination.d.ts.map +1 -1
- package/types/ProgressSteps/index.d.ts.map +1 -1
- package/types/charts/PieChart.d.ts.map +1 -1
- package/types/index.d.ts +1 -1
- package/types/index.d.ts.map +1 -1
- package/types/layouts/ViewSwitcher.d.ts.map +1 -1
- package/types/layouts/attachments.d.ts.map +1 -1
- package/types/layouts/page.d.ts.map +1 -1
- package/types/layouts/tags.d.ts.map +1 -1
- package/types/layouts/timeline.d.ts.map +1 -1
- package/types/surfaces.d.ts +17 -0
- package/types/surfaces.d.ts.map +1 -1
- package/types/views/Calendar.d.ts.map +1 -1
- package/types/views/Kanban.d.ts +13 -1
- package/types/views/Kanban.d.ts.map +1 -1
- package/types/views/ReportBuilder.d.ts.map +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","Badge_exports","Badge","module","exports","import_jsx_runtime","require","import_theme","import_tamagui","import_componentColors","import_AsyncBoundary","colorMap","red","bg","componentColors","badge","text","blue","green","orange","gray","badgeGeometryMap","$3","capsule","font","dot","$4","$5","positionMap","top","right","left","bottom","BadgeWrapper","styled","View","position","display","BadgeIndicator","alignItems","justifyContent","borderRadius","minWidth","height","paddingHorizontal","zIndex","variants","true","width"],"sources":["../../../src/Badge/index.tsx"],"sourcesContent":[null],"mappings":"AACA,YAAS;;AAET,IAAAA,SAAS,GAAMC,MAAM,CAAAC,cAAc;AACnC,IAAAC,gBAAS,GAAAF,MAAA,CAAAG,wBAAuB;AAChC,IAAAC,iBAAS,GAAAJ,MAAA,CAAAK,mBAAwB;
|
|
1
|
+
{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","Badge_exports","Badge","module","exports","import_jsx_runtime","require","import_theme","import_tamagui","import_componentColors","import_AsyncBoundary","colorMap","red","bg","componentColors","badge","text","blue","green","orange","gray","badgeGeometryMap","$3","capsule","font","dot","$4","$5","positionMap","top","right","left","bottom","BadgeWrapper","styled","View","position","display","BadgeIndicator","radiusClassProps","alignItems","justifyContent","borderRadius","minWidth","height","paddingHorizontal","zIndex","variants","true","width"],"sources":["../../../src/Badge/index.tsx"],"sourcesContent":[null],"mappings":"AACA,YAAS;;AAET,IAAAA,SAAS,GAAMC,MAAM,CAAAC,cAAc;AACnC,IAAAC,gBAAS,GAAAF,MAAA,CAAAG,wBAAuB;AAChC,IAAAC,iBAAS,GAAAJ,MAAA,CAAAK,mBAAwB;AA2I7B,IAAAC,YAAA,GAAAN,MAAA,CAAAO,SAAA,CAAAC,cAAA;AA1GJ,IAAAC,QAAM,GAAAA,CAAAC,MAAuE,EAAAC,GAAA;EAC3E,KAAK,IAAEC,IAAI,IAAAD,GAAA,EACXZ,SAAQ,CAAIW,MAAA,EAAAE,IAAA;IAAgBC,GAAA,EAAAF,GAAM,CAAAC,IAAM;IAAAE,UAAM,EAAU;EAAA;AAAA;AACE,IAC1DC,WAAU,GAAIA,CAAAC,EAAA,EAAAC,IAAA,EAAAC,MAAgB,EAAAC,IAAM,KAAQ;EAC5C,IAAAF,IAAQ,IAAI,OAAAA,IAAA,KAAgB,QAAM,IAAM,OAAMA,IAAA,KAAU;IAC1D,SAAAG,GAAA,IAAAhB,iBAAA,CAAAa,IAAA,GAMM,KAAAX,YAAA,CAAAe,IAAmF,CAAAL,EAAA,EAAAI,GAAA,KAAAA,GAAA,KAAAF,MAAA,EACjFnB,SAAS,CAAAiB,EAAA,EAAII,GAAA,EAAM;MAAAP,GAAI,EAAAA,CAAA,KAAOI,IAAA,CAAAG,GAAA;MAAAN,UAAA,IAAAK,IAAA,GAAAjB,gBAAA,CAAAe,IAAA,EAAAG,GAAA,MAAAD,IAAA,CAAAL;IAAA;EACpC;EACA,OAAME,EAAA;AACR;AAIA,IAAAM,YAAM,GAGFC,GAAA,IAAAR,WAAA,CAAAhB,SAAA;EAAAyB,KAAA;AAAA,IAAAD,GAAA;AAAA,IACFE,aAAe,KAAK;AAAYhB,QAChC,CAAAgB,aAAmB,EAAG;EACtBC,KAAA,EAAAA,CAAA,KAAAA;AAAsC,EACtC;AACFC,MAAA,CAAAC,OAAA,GAAAN,YAAA,CAAAG,aAAA;AAIA,IAAAI,kBAAqB,GAAAC,OAAO,oBAAM;AAAA,IAChCC,YAAM,GAAAD,OAAA;AAAA,IACNE,cAAU,GAAAF,OAAA;AAAA,IACVG,sBAAS,GAAAH,OAAA;AACX,IAACI,oBAAA,GAAAJ,OAAA;AAED,IAAAK,QAAM;EACJC,GAAA;IAAMC,EAAA,EAAAJ,sBAAA,CAAAK,eAAA,CAAAC,KAAA,CAAAH,GAAA;IAAAI,IAAA;EAGN;EACAC,IAAA;IACAJ,EAAA,EAAAJ,sBAAY,CAAAK,eAAA,CAAAC,KAAA,CAAAE,IAAA;IACZD,IAAA;EACA;EACAE,KAAA;IACAL,EAAA,EAAAJ,sBAAQ,CAAAK,eAAA,CAAAC,KAAA,CAAAG,KAAA;IACRF,IAAA;EACA;EAEAG,MAAA;IACEN,EAAA,EAAAJ,sBAAK,CAAAK,eAAA,CAAAC,KAAA,CAAAI,MAAA;IAAAH,IACH;EAAM;EACMI,IAAA,EACV;IAAOP,EAAA,EACPJ,sBAAQ,CAAAK,eAAA,CAAAC,KAAA,CAAAK,IAAA;IAAAJ,IACR;EAAmB;AACrB;AACF,IACFK,gBAAA;EACDC,EAAA;IAEDC,OAAM;IACJC,IAAM;IACNC,GAAA;EACA;EACAC,EAAA;IACAH,OAAA,EAAW;IACZC,IAAA;IAIMC,GAAA,EAAS;EACd;EACAE,EAAA;IACAJ,OAAM;IACNC,IAAA;IACAC,GAAA,EAAM;EACN;AAAQ;AACG,IACXG,WAAa,GAAC;EACd,WAAU;IACGC,GAAA;IACbC,KAAM,EAAE;EACR;EACA,UAAM;IACND,GAAA,EAAM;IAENE,IAAM;EACN;EACA,cAAM;IAGNC,MAAM;IAINF,KAAM;EAIN;EAEA,aACE;IACGE,MAAA;IACAD,IAAA;EACC;AAAC;AAAA,IAAAE,YACC,OAAAzB,cAAA,CAAA0B,MAAA,EAAA1B,cAAA,CAAA2B,IAAA;EAAA/C,IAAA,EACA;EAAwBgD,QACvB,EAAI,UACC;EACqDC,OAC3D;AAAO;AACF,IAAAC,cACH,GAAW,IAAA9B,cAAA,CAAA0B,MAAA,EAAA1B,cAAA,CAAA2B,IAAA;EAAA/C,IAAA,kBACP;EAA4D;EACF;EAC9D,OACFmB,YAAA,CAAAgC,gBAAA;EAAAH,QAGC,YAAC;EACAI,UAAC;EAAAC,cAAA;EAAAC,YACE,EAAG;EAAUC,QAAA,EACd;EAAWC,MAAA,IACX;EAAmBC,iBACnB,MAAY;EAASC,MAAA;EACPC,QAAA,EAEb;IAAAtB,GAAA;MAAAuB,IACH;QAAAL,QAAA;QAEJM,KAAA;QAEJL,MAAA;QAEJC,iBAAA","ignoreList":[]}
|
|
@@ -49,7 +49,6 @@ const ArrowButton = styled(View, {
|
|
|
49
49
|
});
|
|
50
50
|
const ArrowVisual = styled(View, {
|
|
51
51
|
name: "CarouselArrowVisual",
|
|
52
|
-
borderRadius: 1e3,
|
|
53
52
|
backgroundColor: "$background",
|
|
54
53
|
alignItems: "center",
|
|
55
54
|
justifyContent: "center",
|
|
@@ -80,24 +79,26 @@ function Carousel({
|
|
|
80
79
|
control
|
|
81
80
|
} = useResolvedKnobs();
|
|
82
81
|
const gap = gapProp ?? knobProps.gap.gap;
|
|
82
|
+
const gapPx = typeof gap === "number" ? gap : getTokens().space?.[gap]?.val ?? 0;
|
|
83
83
|
const arrowSize = getTokens().size?.[knobProps.sizeToken]?.val ?? 40;
|
|
84
84
|
const arrowGlyphSize = Math.round(arrowSize / 2);
|
|
85
|
+
const arrowRadius = knobProps.pointy ? 0 : 1e3;
|
|
85
86
|
const arrowTargetSize = Math.max(arrowSize, MIN_PRESS_TARGET);
|
|
86
87
|
const arrowEdgeInset = Math.max(0, 8 - Math.round((arrowTargetSize - arrowSize) / 2));
|
|
87
88
|
const [activeIndex, setActiveIndex] = useState(initialSlide);
|
|
88
89
|
const trackRef = useRef(null);
|
|
89
90
|
const slideCount = Children.count(children);
|
|
90
|
-
const
|
|
91
|
+
const [slideWidth, setSlideWidth] = useState(0);
|
|
91
92
|
const autoPlayRef = useRef(null);
|
|
92
93
|
const scrollToSlide = useCallback(index => {
|
|
93
94
|
if (!trackRef.current) return;
|
|
94
95
|
if (index < 0 || index >= slideCount) return;
|
|
95
|
-
const offset = index *
|
|
96
|
+
const offset = index * (slideWidth + gapPx);
|
|
96
97
|
trackRef.current.scrollTo({
|
|
97
98
|
x: offset,
|
|
98
99
|
animated: true
|
|
99
100
|
});
|
|
100
|
-
}, [slideCount]);
|
|
101
|
+
}, [slideCount, slideWidth, gapPx]);
|
|
101
102
|
const goToSlide = useCallback(index => {
|
|
102
103
|
let targetIndex = index;
|
|
103
104
|
if (loop) {
|
|
@@ -114,14 +115,13 @@ function Carousel({
|
|
|
114
115
|
const goPrev = useCallback(() => goToSlide(activeIndex - 1), [activeIndex, goToSlide]);
|
|
115
116
|
const handleScroll = useCallback(event => {
|
|
116
117
|
const scrollX = event.nativeEvent.contentOffset.x;
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
const newIndex = Math.round(scrollX / width);
|
|
118
|
+
if (!slideWidth) return;
|
|
119
|
+
const newIndex = Math.round(scrollX / (slideWidth + gapPx));
|
|
120
120
|
if (newIndex !== activeIndex && newIndex >= 0 && newIndex < slideCount) {
|
|
121
121
|
setActiveIndex(newIndex);
|
|
122
122
|
onSlideChange?.(newIndex);
|
|
123
123
|
}
|
|
124
|
-
}, [activeIndex, slideCount, onSlideChange]);
|
|
124
|
+
}, [activeIndex, slideCount, onSlideChange, slideWidth, gapPx]);
|
|
125
125
|
useEffect(() => {
|
|
126
126
|
if (autoPlay > 0) {
|
|
127
127
|
autoPlayRef.current = setInterval(() => {
|
|
@@ -134,11 +134,16 @@ function Carousel({
|
|
|
134
134
|
};
|
|
135
135
|
}
|
|
136
136
|
}, [autoPlay, goNext]);
|
|
137
|
+
const activeIndexRef = useRef(activeIndex);
|
|
138
|
+
activeIndexRef.current = activeIndex;
|
|
137
139
|
useEffect(() => {
|
|
138
|
-
if (
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
140
|
+
if (!slideWidth || slideCount === 0 || !trackRef.current) return;
|
|
141
|
+
const index = Math.max(0, Math.min(activeIndexRef.current, slideCount - 1));
|
|
142
|
+
trackRef.current.scrollTo({
|
|
143
|
+
x: index * (slideWidth + gapPx),
|
|
144
|
+
animated: false
|
|
145
|
+
});
|
|
146
|
+
}, [slideWidth, gapPx, slideCount]);
|
|
142
147
|
const canGoPrev = loop || activeIndex > 0;
|
|
143
148
|
const canGoNext = loop || activeIndex < slideCount - 1;
|
|
144
149
|
const isRTL = useDirection() === "rtl";
|
|
@@ -158,16 +163,22 @@ function Carousel({
|
|
|
158
163
|
},
|
|
159
164
|
onScroll: handleScroll,
|
|
160
165
|
scrollEventThrottle: 16,
|
|
161
|
-
onLayout: e =>
|
|
162
|
-
|
|
166
|
+
onLayout: e => setSlideWidth(e.nativeEvent.layout.width),
|
|
167
|
+
...{
|
|
168
|
+
dataSet: {
|
|
169
|
+
carouselTrack: "true"
|
|
170
|
+
}
|
|
163
171
|
},
|
|
164
172
|
children: /* @__PURE__ */jsx(XStack, {
|
|
165
173
|
gap,
|
|
166
174
|
children: Children.map(children, (child, index) => /* @__PURE__ */jsx(CarouselSlide, {
|
|
167
|
-
width:
|
|
175
|
+
width: slideWidth > 0 ? slideWidth : void 0,
|
|
168
176
|
style: {
|
|
169
177
|
scrollSnapAlign: "start"
|
|
170
178
|
},
|
|
179
|
+
...{
|
|
180
|
+
"data-carousel-slide": index
|
|
181
|
+
},
|
|
171
182
|
children: child
|
|
172
183
|
}, index))
|
|
173
184
|
})
|
|
@@ -199,6 +210,7 @@ function Carousel({
|
|
|
199
210
|
children: /* @__PURE__ */jsx(ArrowVisual, {
|
|
200
211
|
width: arrowSize,
|
|
201
212
|
height: arrowSize,
|
|
213
|
+
borderRadius: arrowRadius,
|
|
202
214
|
children: /* @__PURE__ */jsx(PrevGlyph, {
|
|
203
215
|
size: arrowGlyphSize
|
|
204
216
|
})
|
|
@@ -230,6 +242,7 @@ function Carousel({
|
|
|
230
242
|
children: /* @__PURE__ */jsx(ArrowVisual, {
|
|
231
243
|
width: arrowSize,
|
|
232
244
|
height: arrowSize,
|
|
245
|
+
borderRadius: arrowRadius,
|
|
233
246
|
children: /* @__PURE__ */jsx(NextGlyph, {
|
|
234
247
|
size: arrowGlyphSize
|
|
235
248
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useState","useRef","useCallback","useEffect","Children","useTranslation","CaretLeftIcon","CaretRightIcon","zIndex","MIN_PRESS_TARGET","useResolvedKnobs","View","XStack","ScrollView","getTokens","styled","DotIndicator","useDirection","Fragment","jsx","jsxs","CarouselContainer","name","position","width","overflow","CarouselSlide","flexShrink","ArrowButton","top","transform","translateY","localTop","alignItems","justifyContent","backgroundColor","cursor","opacity","hoverStyle","scale","pressStyle","variants","disabled","true","ArrowVisual","
|
|
1
|
+
{"version":3,"names":["useState","useRef","useCallback","useEffect","Children","useTranslation","CaretLeftIcon","CaretRightIcon","zIndex","MIN_PRESS_TARGET","useResolvedKnobs","View","XStack","ScrollView","getTokens","styled","DotIndicator","useDirection","Fragment","jsx","jsxs","CarouselContainer","name","position","width","overflow","CarouselSlide","flexShrink","ArrowButton","top","transform","translateY","localTop","alignItems","justifyContent","backgroundColor","cursor","opacity","hoverStyle","scale","pressStyle","variants","disabled","true","ArrowVisual","shadowColor","shadowRadius","shadowOpacity","DotsWrapper","paddingVertical","Carousel","children","showArrows","showDots","autoPlay","loop","gap","gapProp","onSlideChange","initialSlide","t","knobProps","control","gapPx","space","val","arrowSize","size","sizeToken","arrowGlyphSize","Math","round","arrowRadius","pointy","arrowTargetSize","max","arrowEdgeInset","activeIndex","setActiveIndex","trackRef","slideCount","count","slideWidth","setSlideWidth","autoPlayRef","scrollToSlide","index","current","offset","scrollTo","x","animated","goToSlide","targetIndex","min","goNext","goPrev","handleScroll","event","scrollX","nativeEvent","contentOffset","newIndex","setInterval","clearInterval","activeIndexRef","canGoPrev","canGoNext","isRTL","prevSide","nextSide","PrevGlyph","NextGlyph","containerRadius","ref","horizontal","showsHorizontalScrollIndicator","style","scrollSnapType","onScroll","scrollEventThrottle","onLayout","e","layout","dataSet","carouselTrack","map","child","scrollSnapAlign","height","transition","onPress","role","tabIndex","focusVisibleStyle","focusVisibleKnobProps","onKeyDown","key","preventDefault","borderRadius","total","onChange","Slide"],"sources":["../../../src/Carousel/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
|
|
@@ -78,7 +78,6 @@ var ArrowButton = (0, import_tamagui.styled)(import_tamagui.View, {
|
|
|
78
78
|
});
|
|
79
79
|
var ArrowVisual = (0, import_tamagui.styled)(import_tamagui.View, {
|
|
80
80
|
name: "CarouselArrowVisual",
|
|
81
|
-
borderRadius: 1e3,
|
|
82
81
|
backgroundColor: "$background",
|
|
83
82
|
alignItems: "center",
|
|
84
83
|
justifyContent: "center",
|
|
@@ -102,8 +101,8 @@ function Carousel(param) {
|
|
|
102
101
|
onSlideChange,
|
|
103
102
|
initialSlide = 0
|
|
104
103
|
} = param;
|
|
105
|
-
var _ref;
|
|
106
|
-
var _getTokens_size_knobProps_sizeToken, _getTokens_size;
|
|
104
|
+
var _ref, _ref1;
|
|
105
|
+
var _getTokens_space_gap, _getTokens_space, _getTokens_size_knobProps_sizeToken, _getTokens_size;
|
|
107
106
|
var {
|
|
108
107
|
t
|
|
109
108
|
} = (0, import_react_i18next.useTranslation)();
|
|
@@ -112,24 +111,26 @@ function Carousel(param) {
|
|
|
112
111
|
control
|
|
113
112
|
} = (0, import_theme.useResolvedKnobs)();
|
|
114
113
|
var gap = gapProp !== null && gapProp !== void 0 ? gapProp : knobProps.gap.gap;
|
|
115
|
-
var
|
|
114
|
+
var gapPx = typeof gap === "number" ? gap : (_ref = (_getTokens_space = (0, import_tamagui.getTokens)().space) === null || _getTokens_space === void 0 ? void 0 : (_getTokens_space_gap = _getTokens_space[gap]) === null || _getTokens_space_gap === void 0 ? void 0 : _getTokens_space_gap.val) !== null && _ref !== void 0 ? _ref : 0;
|
|
115
|
+
var arrowSize = (_ref1 = (_getTokens_size = (0, import_tamagui.getTokens)().size) === null || _getTokens_size === void 0 ? void 0 : (_getTokens_size_knobProps_sizeToken = _getTokens_size[knobProps.sizeToken]) === null || _getTokens_size_knobProps_sizeToken === void 0 ? void 0 : _getTokens_size_knobProps_sizeToken.val) !== null && _ref1 !== void 0 ? _ref1 : 40;
|
|
116
116
|
var arrowGlyphSize = Math.round(arrowSize / 2);
|
|
117
|
+
var arrowRadius = knobProps.pointy ? 0 : 1e3;
|
|
117
118
|
var arrowTargetSize = Math.max(arrowSize, import_theme.MIN_PRESS_TARGET);
|
|
118
119
|
var arrowEdgeInset = Math.max(0, 8 - Math.round((arrowTargetSize - arrowSize) / 2));
|
|
119
120
|
var [activeIndex, setActiveIndex] = (0, import_react.useState)(initialSlide);
|
|
120
121
|
var trackRef = (0, import_react.useRef)(null);
|
|
121
122
|
var slideCount = import_react.Children.count(children);
|
|
122
|
-
var
|
|
123
|
+
var [slideWidth, setSlideWidth] = (0, import_react.useState)(0);
|
|
123
124
|
var autoPlayRef = (0, import_react.useRef)(null);
|
|
124
125
|
var scrollToSlide = (0, import_react.useCallback)(function (index) {
|
|
125
126
|
if (!trackRef.current) return;
|
|
126
127
|
if (index < 0 || index >= slideCount) return;
|
|
127
|
-
var offset = index *
|
|
128
|
+
var offset = index * (slideWidth + gapPx);
|
|
128
129
|
trackRef.current.scrollTo({
|
|
129
130
|
x: offset,
|
|
130
131
|
animated: true
|
|
131
132
|
});
|
|
132
|
-
}, [slideCount]);
|
|
133
|
+
}, [slideCount, slideWidth, gapPx]);
|
|
133
134
|
var goToSlide = (0, import_react.useCallback)(function (index) {
|
|
134
135
|
var targetIndex = index;
|
|
135
136
|
if (loop) {
|
|
@@ -150,14 +151,13 @@ function Carousel(param) {
|
|
|
150
151
|
}, [activeIndex, goToSlide]);
|
|
151
152
|
var handleScroll = (0, import_react.useCallback)(function (event) {
|
|
152
153
|
var scrollX = event.nativeEvent.contentOffset.x;
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
var newIndex = Math.round(scrollX / width);
|
|
154
|
+
if (!slideWidth) return;
|
|
155
|
+
var newIndex = Math.round(scrollX / (slideWidth + gapPx));
|
|
156
156
|
if (newIndex !== activeIndex && newIndex >= 0 && newIndex < slideCount) {
|
|
157
157
|
setActiveIndex(newIndex);
|
|
158
158
|
onSlideChange === null || onSlideChange === void 0 ? void 0 : onSlideChange(newIndex);
|
|
159
159
|
}
|
|
160
|
-
}, [activeIndex, slideCount, onSlideChange]);
|
|
160
|
+
}, [activeIndex, slideCount, onSlideChange, slideWidth, gapPx]);
|
|
161
161
|
(0, import_react.useEffect)(function () {
|
|
162
162
|
if (autoPlay > 0) {
|
|
163
163
|
autoPlayRef.current = setInterval(function () {
|
|
@@ -170,11 +170,16 @@ function Carousel(param) {
|
|
|
170
170
|
};
|
|
171
171
|
}
|
|
172
172
|
}, [autoPlay, goNext]);
|
|
173
|
+
var activeIndexRef = (0, import_react.useRef)(activeIndex);
|
|
174
|
+
activeIndexRef.current = activeIndex;
|
|
173
175
|
(0, import_react.useEffect)(function () {
|
|
174
|
-
if (
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
176
|
+
if (!slideWidth || slideCount === 0 || !trackRef.current) return;
|
|
177
|
+
var index = Math.max(0, Math.min(activeIndexRef.current, slideCount - 1));
|
|
178
|
+
trackRef.current.scrollTo({
|
|
179
|
+
x: index * (slideWidth + gapPx),
|
|
180
|
+
animated: false
|
|
181
|
+
});
|
|
182
|
+
}, [slideWidth, gapPx, slideCount]);
|
|
178
183
|
var canGoPrev = loop || activeIndex > 0;
|
|
179
184
|
var canGoNext = loop || activeIndex < slideCount - 1;
|
|
180
185
|
var isRTL = (0, import_useDirection.useDirection)() === "rtl";
|
|
@@ -195,16 +200,26 @@ function Carousel(param) {
|
|
|
195
200
|
onScroll: handleScroll,
|
|
196
201
|
scrollEventThrottle: 16,
|
|
197
202
|
onLayout: function onLayout(e) {
|
|
198
|
-
|
|
203
|
+
return setSlideWidth(e.nativeEvent.layout.width);
|
|
204
|
+
},
|
|
205
|
+
...{
|
|
206
|
+
dataSet: {
|
|
207
|
+
carouselTrack: "true"
|
|
208
|
+
}
|
|
199
209
|
},
|
|
200
210
|
children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
|
|
201
211
|
gap,
|
|
202
212
|
children: import_react.Children.map(children, function (child, index) {
|
|
203
213
|
return /* @__PURE__ */(0, import_jsx_runtime.jsx)(CarouselSlide, {
|
|
204
|
-
width
|
|
214
|
+
// Measured-viewport width (LC-62), never a percentage; slides
|
|
215
|
+
// stay content-sized only for the pre-measure frame.
|
|
216
|
+
width: slideWidth > 0 ? slideWidth : void 0,
|
|
205
217
|
style: {
|
|
206
218
|
scrollSnapAlign: "start"
|
|
207
219
|
},
|
|
220
|
+
...{
|
|
221
|
+
"data-carousel-slide": index
|
|
222
|
+
},
|
|
208
223
|
children: child
|
|
209
224
|
}, index);
|
|
210
225
|
})
|
|
@@ -237,6 +252,7 @@ function Carousel(param) {
|
|
|
237
252
|
children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ArrowVisual, {
|
|
238
253
|
width: arrowSize,
|
|
239
254
|
height: arrowSize,
|
|
255
|
+
borderRadius: arrowRadius,
|
|
240
256
|
children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(PrevGlyph, {
|
|
241
257
|
size: arrowGlyphSize
|
|
242
258
|
})
|
|
@@ -266,6 +282,7 @@ function Carousel(param) {
|
|
|
266
282
|
children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ArrowVisual, {
|
|
267
283
|
width: arrowSize,
|
|
268
284
|
height: arrowSize,
|
|
285
|
+
borderRadius: arrowRadius,
|
|
269
286
|
children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(NextGlyph, {
|
|
270
287
|
size: arrowGlyphSize
|
|
271
288
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","Carousel_exports","Carousel","module","exports","import_jsx_runtime","require","import_react","import_react_i18next","import_react2","import_forms","import_theme","import_tamagui","import_DotIndicator","import_useDirection","CarouselContainer","styled","View","position","width","overflow","CarouselSlide","flexShrink","ArrowButton","top","transform","translateY","zIndex","localTop","alignItems","justifyContent","backgroundColor","cursor","opacity","hoverStyle","scale","pressStyle","variants","disabled","true","ArrowVisual","
|
|
1
|
+
{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","Carousel_exports","Carousel","module","exports","import_jsx_runtime","require","import_react","import_react_i18next","import_react2","import_forms","import_theme","import_tamagui","import_DotIndicator","import_useDirection","CarouselContainer","styled","View","position","width","overflow","CarouselSlide","flexShrink","ArrowButton","top","transform","translateY","zIndex","localTop","alignItems","justifyContent","backgroundColor","cursor","opacity","hoverStyle","scale","pressStyle","variants","disabled","true","ArrowVisual","shadowColor","shadowRadius","shadowOpacity","DotsWrapper","paddingVertical","param","children","showArrows","showDots","autoPlay","loop","gap","gapProp","onSlideChange","initialSlide","_ref","_ref1","_getTokens_space_gap","_getTokens_space","_getTokens_size_knobProps_sizeToken","_getTokens_size","t","useTranslation","knobProps","control","useResolvedKnobs","gapPx","getTokens","space","val","arrowSize","size","sizeToken","arrowGlyphSize","Math","round","arrowRadius","pointy","arrowTargetSize","max","MIN_PRESS_TARGET","arrowEdgeInset","activeIndex","setActiveIndex","useState","trackRef","useRef","slideCount","Children","count","slideWidth","setSlideWidth","autoPlayRef","scrollToSlide","useCallback","index","current","offset","scrollTo","x","animated","goToSlide","targetIndex","min","goNext","goPrev","handleScroll","event","scrollX","nativeEvent","contentOffset","newIndex","useEffect","setInterval","clearInterval","activeIndexRef","canGoPrev","canGoNext","isRTL","useDirection","prevSide","nextSide","PrevGlyph","CaretRightIcon","CaretLeftIcon","NextGlyph","jsxs","containerRadius","jsx","ScrollView","ref","horizontal","showsHorizontalScrollIndicator","style","scrollSnapType","onScroll","scrollEventThrottle","onLayout","e","layout","dataSet","carouselTrack","XStack","map","child"],"sources":["../../../src/Carousel/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { MIN_PRESS_TARGET, useResolvedKnobs } from "@multiplatform.one/theme";
|
|
1
|
+
import { MIN_PRESS_TARGET, radiusClassProps, useResolvedKnobs } from "@multiplatform.one/theme";
|
|
2
|
+
import { CheckIcon } from "@phosphor-icons/react";
|
|
2
3
|
import { useTranslation } from "react-i18next";
|
|
3
4
|
import { View, XStack, getTokens, styled } from "tamagui";
|
|
4
5
|
import { componentColors } from "../componentColors.mjs";
|
|
@@ -26,11 +27,36 @@ const dotGeometryMap = {
|
|
|
26
27
|
active: 30
|
|
27
28
|
}
|
|
28
29
|
};
|
|
30
|
+
const CHECK_MIN_DOT = 8;
|
|
31
|
+
function sizePx(value, fallback) {
|
|
32
|
+
if (typeof value === "number") return value;
|
|
33
|
+
if (typeof value === "string") {
|
|
34
|
+
const token = getTokens().size?.[value]?.val;
|
|
35
|
+
if (typeof token === "number") return token;
|
|
36
|
+
}
|
|
37
|
+
return fallback;
|
|
38
|
+
}
|
|
29
39
|
const DotsContainer = styled(XStack, {
|
|
30
40
|
name: "DotIndicator",
|
|
31
41
|
alignItems: "center",
|
|
32
42
|
justifyContent: "center",
|
|
33
|
-
gap: "$2"
|
|
43
|
+
gap: "$2",
|
|
44
|
+
variants: {
|
|
45
|
+
// A rail seats the strip on a filled capsule instead of the page. It is a
|
|
46
|
+
// variant of the strip rather than host chrome because the rail and the
|
|
47
|
+
// idle dot color are ONE decision: idle dots have to step up the ramp to
|
|
48
|
+
// stay visible on the rail's fill, and split across two files that pairing
|
|
49
|
+
// drifts (LC-16).
|
|
50
|
+
rail: {
|
|
51
|
+
true: {
|
|
52
|
+
backgroundColor: componentColors.interactive.background,
|
|
53
|
+
// R-PILL (D-09 / LC-60): the rail is a capsule at every radius value,
|
|
54
|
+
// like the dots it holds.
|
|
55
|
+
...radiusClassProps("R-PILL", "DotIndicator rail"),
|
|
56
|
+
borderRadius: "$10"
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
}
|
|
34
60
|
});
|
|
35
61
|
const DotTarget = styled(View, {
|
|
36
62
|
name: "DotTarget",
|
|
@@ -46,6 +72,13 @@ const DotTarget = styled(View, {
|
|
|
46
72
|
});
|
|
47
73
|
const Dot = styled(View, {
|
|
48
74
|
name: "Dot",
|
|
75
|
+
// R-PILL (D-09 / LC-60): an ornamental dot is a circle at every radius
|
|
76
|
+
// value — the knob moves its size, never its shape — so it declares the
|
|
77
|
+
// class the `radius:none` sweep licenses it under.
|
|
78
|
+
...radiusClassProps("R-PILL", "DotIndicator dot"),
|
|
79
|
+
// Centers the completion checkmark; inert for the empty dots.
|
|
80
|
+
alignItems: "center",
|
|
81
|
+
justifyContent: "center",
|
|
49
82
|
borderRadius: 1e3,
|
|
50
83
|
backgroundColor: componentColors.indicator.inactive,
|
|
51
84
|
hoverStyle: {
|
|
@@ -59,31 +92,11 @@ const Dot = styled(View, {
|
|
|
59
92
|
backgroundColor: componentColors.indicator.selected
|
|
60
93
|
}
|
|
61
94
|
},
|
|
62
|
-
variant:
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
bars: {
|
|
68
|
-
width: 6,
|
|
69
|
-
height: 6
|
|
70
|
-
},
|
|
71
|
-
pills: {
|
|
72
|
-
width: 8,
|
|
73
|
-
height: 8
|
|
74
|
-
}
|
|
75
|
-
},
|
|
76
|
-
activeVariant: {
|
|
77
|
-
dots: {
|
|
78
|
-
width: 24
|
|
79
|
-
},
|
|
80
|
-
bars: {
|
|
81
|
-
width: 24
|
|
82
|
-
},
|
|
83
|
-
pills: {
|
|
84
|
-
width: 24
|
|
85
|
-
}
|
|
86
|
-
},
|
|
95
|
+
// No `variant` geometry here: the mark's width/height are always passed
|
|
96
|
+
// explicitly from the one size channel below, so a per-variant pixel table
|
|
97
|
+
// on the styled component could only ever be a second, silently-losing
|
|
98
|
+
// definition of the same thing (it already disagreed with the scale at
|
|
99
|
+
// size knob `$3`, where a tick is 5px, not 6).
|
|
87
100
|
disabled: {
|
|
88
101
|
true: {
|
|
89
102
|
opacity: 0.5
|
|
@@ -97,7 +110,14 @@ function DotIndicator({
|
|
|
97
110
|
onChange,
|
|
98
111
|
variant = "dots",
|
|
99
112
|
gap: gapProp,
|
|
100
|
-
disabled = false
|
|
113
|
+
disabled = false,
|
|
114
|
+
completedSteps,
|
|
115
|
+
idiom = "item",
|
|
116
|
+
rail = false,
|
|
117
|
+
dotSize,
|
|
118
|
+
activeDotSize,
|
|
119
|
+
transition,
|
|
120
|
+
dotStateAttribute = "data-dot-state"
|
|
101
121
|
}) {
|
|
102
122
|
const {
|
|
103
123
|
t
|
|
@@ -107,18 +127,36 @@ function DotIndicator({
|
|
|
107
127
|
} = useResolvedKnobs();
|
|
108
128
|
const gap = gapProp ?? dotGapMap[knobProps.space] ?? "$2";
|
|
109
129
|
const geometry = dotGeometryMap[knobProps.sizeToken] ?? dotGeometryMap.$4;
|
|
110
|
-
const
|
|
130
|
+
const isTick = variant === "bars";
|
|
131
|
+
const itemSize = sizePx(dotSize, isTick ? geometry.bar : geometry.dot);
|
|
132
|
+
const activeSize = sizePx(activeDotSize, geometry.active);
|
|
111
133
|
const gapPx = typeof gap === "number" ? gap : getTokens().space?.[gap]?.val ?? 7;
|
|
112
134
|
const slopX = Math.max(0, Math.floor((gapPx - 1) / 2));
|
|
113
|
-
const outsetY = Math.ceil((MIN_PRESS_TARGET - itemSize) / 2);
|
|
135
|
+
const outsetY = Math.max(0, Math.ceil((MIN_PRESS_TARGET - itemSize) / 2));
|
|
114
136
|
const interactive = !disabled && !!onChange;
|
|
137
|
+
const isStep = idiom === "step";
|
|
138
|
+
const label = isStep ? t("Go to step {{number}}") : t("Go to item {{number}}");
|
|
139
|
+
const currentValue = isStep ? "step" : "true";
|
|
140
|
+
const motionStyle = transition ? {
|
|
141
|
+
transition: "width var(--mp-transition, 100ms) ease, height var(--mp-transition, 100ms) ease, background-color var(--mp-transition, 100ms) ease"
|
|
142
|
+
} : void 0;
|
|
115
143
|
return /* @__PURE__ */jsx(DotsContainer, {
|
|
116
144
|
gap,
|
|
145
|
+
rail,
|
|
146
|
+
...(rail ? {
|
|
147
|
+
paddingHorizontal: knobProps.panelPadding.padding,
|
|
148
|
+
height: knobProps.sizeToken
|
|
149
|
+
} : void 0),
|
|
117
150
|
children: Array.from({
|
|
118
151
|
length: total
|
|
119
152
|
}).map((_, index) => {
|
|
120
153
|
const isActive = index === activeIndex;
|
|
121
|
-
const
|
|
154
|
+
const isCompleted = !isActive && !!completedSteps?.has(index);
|
|
155
|
+
const dotWidth = isActive ? activeSize : itemSize;
|
|
156
|
+
const restingFill = isCompleted ? componentColors.indicator.completed : rail ?
|
|
157
|
+
// Idle chrome steps up the ramp on a rail so the dot still
|
|
158
|
+
// separates from the capsule fill it sits on.
|
|
159
|
+
componentColors.indicator.track : componentColors.indicator.inactive;
|
|
122
160
|
return /* @__PURE__ */jsx(DotTarget, {
|
|
123
161
|
width: dotWidth + slopX * 2,
|
|
124
162
|
minHeight: MIN_PRESS_TARGET,
|
|
@@ -126,11 +164,11 @@ function DotIndicator({
|
|
|
126
164
|
marginVertical: -outsetY,
|
|
127
165
|
cursor: interactive ? "pointer" : disabled ? "not-allowed" : "default",
|
|
128
166
|
onPress: interactive ? () => onChange?.(index) : void 0,
|
|
129
|
-
"aria-label": withInterp(
|
|
167
|
+
"aria-label": withInterp(label, {
|
|
130
168
|
number: index + 1
|
|
131
169
|
}),
|
|
132
170
|
...(isActive ? {
|
|
133
|
-
"aria-current":
|
|
171
|
+
"aria-current": currentValue
|
|
134
172
|
} : void 0),
|
|
135
173
|
...(interactive ? {
|
|
136
174
|
role: "button",
|
|
@@ -145,12 +183,31 @@ function DotIndicator({
|
|
|
145
183
|
role: "button"
|
|
146
184
|
} : void 0),
|
|
147
185
|
children: /* @__PURE__ */jsx(Dot, {
|
|
148
|
-
variant,
|
|
149
186
|
active: isActive,
|
|
150
|
-
|
|
187
|
+
...(isActive ? void 0 : {
|
|
188
|
+
backgroundColor: restingFill,
|
|
189
|
+
// A completed dot and a rail dot both hold their fill on
|
|
190
|
+
// hover: the neutral hover step is PALER than either, so
|
|
191
|
+
// the page-level hover would read as a dim.
|
|
192
|
+
...(isCompleted || rail ? {
|
|
193
|
+
hoverStyle: {
|
|
194
|
+
backgroundColor: restingFill
|
|
195
|
+
}
|
|
196
|
+
} : void 0)
|
|
197
|
+
}),
|
|
151
198
|
width: dotWidth,
|
|
152
199
|
height: itemSize,
|
|
153
|
-
disabled
|
|
200
|
+
disabled,
|
|
201
|
+
transition,
|
|
202
|
+
style: motionStyle,
|
|
203
|
+
...{
|
|
204
|
+
[dotStateAttribute]: isActive ? "active" : "idle"
|
|
205
|
+
},
|
|
206
|
+
children: isCompleted && !isTick && itemSize >= CHECK_MIN_DOT && /* @__PURE__ */jsx(CheckIcon, {
|
|
207
|
+
size: 8,
|
|
208
|
+
color: "white",
|
|
209
|
+
weight: "bold"
|
|
210
|
+
})
|
|
154
211
|
})
|
|
155
212
|
}, index);
|
|
156
213
|
})
|