@preply/ds-docs 3.5.0 → 3.5.1
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/assets/{00.LayoutFlex.stories-VFXWuwpO.js → 00.LayoutFlex.stories-DsoQ41ru.js} +1 -1
- package/dist/assets/{00.applications-DJvx0k5e.js → 00.applications-CtD17Uvc.js} +1 -1
- package/dist/assets/{00.favicons.guide-C2RnoAYF.js → 00.favicons.guide-rDY-MoXZ.js} +1 -1
- package/dist/assets/{00.token-explorer-CIpc712L.js → 00.token-explorer-CedppzBQ.js} +1 -1
- package/dist/assets/{00.using-responsive-props-Y0FJyksx.js → 00.using-responsive-props-CXXBchqR.js} +1 -1
- package/dist/assets/{01.semantic-tokens-YNMdeVZ4.js → 01.semantic-tokens-DA4N50sn.js} +1 -1
- package/dist/assets/{01.using-shorthand-props-D8C82Ryu.js → 01.using-shorthand-props-eZLJFDHj.js} +1 -1
- package/dist/assets/{10.Combinations.stories-TuIVGMPp.js → 10.Combinations.stories-D5C6zeLo.js} +1 -1
- package/dist/assets/{10.fonts.guide-BK8SPAB4.js → 10.fonts.guide-DW9ufzTF.js} +1 -1
- package/dist/assets/{10.ssr-Cn5ozKrT.js → 10.ssr-DwlffmrT.js} +1 -1
- package/dist/assets/{11.languageFont.explorer-Dgp7vCsc.js → 11.languageFont.explorer.stories-Crh2l5Jm.js} +10 -11
- package/dist/assets/{11.ssr.app-router-Ce4D-wDq.js → 11.ssr.app-router-BZ07Enlf.js} +1 -1
- package/dist/assets/{20.libraries-B4FUgB6M.js → 20.libraries-lbSLR9_7.js} +1 -1
- package/dist/assets/{30.icons.explorer-pAVyuYWo.js → 30.icons.explorer-gDqz6aGC.js} +2 -2
- package/dist/assets/{30.storybook-Cn6Bqenb.js → 30.storybook-C4NNn5Fv.js} +1 -1
- package/dist/assets/{40.illustrations.explorer-DuruGf8M.js → 40.illustrations.explorer-Cw6qUJFV.js} +1 -1
- package/dist/assets/{90.advanced-BJmxitUv.js → 90.advanced-bdiRxPCx.js} +1 -1
- package/dist/assets/{Accordion-C6JcVnAY.js → Accordion-BMkC4Xny.js} +1 -1
- package/dist/assets/{Accordion.stories-BXKov_mh.js → Accordion.stories-SU6sgvYh.js} +1 -1
- package/dist/assets/{Accordion.tests.stories-BQZ2mqSD.js → Accordion.tests.stories-CxVZnGoY.js} +1 -1
- package/dist/assets/{AlertDialog.stories-Dz2XLZcQ.js → AlertDialog.stories-Z5ooiuoO.js} +1 -1
- package/dist/assets/{Avatar-GW6_sGqG.js → Avatar-B2H0W8KL.js} +1 -1
- package/dist/assets/{Avatar.stories-CttBLXpQ.js → Avatar.stories-QILX30d4.js} +1 -1
- package/dist/assets/{AvatarWithStatus.stories-CfiaM_d9.js → AvatarWithStatus.stories-CiIZ7860.js} +4 -4
- package/dist/assets/{Badge.stories-BVl0BEvu.js → Badge.stories-B2OoKd78.js} +2 -2
- package/dist/assets/{Box.stories-CWVndvJn.js → Box.stories-Bj6O093l.js} +1 -1
- package/dist/assets/{Button-w2cr0Ds_.js → Button-BSyqsKC5.js} +3 -3
- package/dist/assets/{Button.stories-Br4H_Yuc.js → Button.stories-Dc9V2OdS.js} +1 -1
- package/dist/assets/{ButtonBase-BagNt7Ga.js → ButtonBase-Bdtn25V2.js} +2 -2
- package/dist/assets/{Checkbox-CCxh0QYX.js → Checkbox-Bq_sNuXJ.js} +2 -2
- package/dist/assets/{Checkbox.stories-BzMhrN0i.js → Checkbox.stories-BI-3q1SR.js} +1 -1
- package/dist/assets/{Checkbox.tests.stories-BWl34t1s.js → Checkbox.tests.stories-Bn3p5No-.js} +1 -1
- package/dist/assets/{Chips.stories-CqKaWr-o.js → Chips.stories-FqjAsoAI.js} +1 -1
- package/dist/assets/{Color-YHDXOIA2-HzCcHNXW.js → Color-YHDXOIA2-Brn_ueLX.js} +1 -1
- package/dist/assets/CountryFlag-ClC7kEHn.js +49 -0
- package/dist/assets/Dialog-B2G1UrP1.css +1 -0
- package/dist/assets/{Dialog.stories-Bcwvngxm.js → Dialog.stories-ColOPVoz.js} +1 -1
- package/dist/assets/{DocsRenderer-CFRXHY34-BjJn6IOv.js → DocsRenderer-CFRXHY34-Drp94F88.js} +1 -1
- package/dist/assets/{Flag.stories-DG0Ba94P.js → Flag.stories-hPDFXFLs.js} +1 -1
- package/dist/assets/{Flag.test.stories-znx57oSY.js → Flag.test.stories-Dn7xe9kp.js} +1 -1
- package/dist/assets/{FormControl.stories-BG7LCJDj.js → FormControl.stories-DekxQG9a.js} +1 -1
- package/dist/assets/{Heading-DLWgmTU5.js → Heading-ese4_5Hg.js} +2 -2
- package/dist/assets/{Heading.stories-BpdvL4Rd.js → Heading.stories-Pcuq78-p.js} +1 -1
- package/dist/assets/{Icon-RSC-Df7EwZUV.js → Icon-RSC-DHJisRIw.js} +1 -1
- package/dist/assets/{Icon-w2ilcPHL.js → Icon-ZIxauYsE.js} +1 -1
- package/dist/assets/{Icon.stories-BRh_hPKp.js → Icon.stories-Cv6aq9BI.js} +1 -1
- package/dist/assets/IconButton-BqwVuKH2.js +8 -0
- package/dist/assets/{Input-nsKLdjO3.js → Input-C1hZX5_o.js} +4 -4
- package/dist/assets/{IntegrationWithReactHookForm.stories-DWoCnPAi.js → IntegrationWithReactHookForm.stories-DjhZzsb9.js} +1 -1
- package/dist/assets/{LayoutFlex-8uO9g6rd.js → LayoutFlex-BBGvSVMb.js} +1 -1
- package/dist/assets/{LayoutFlexItem-DeLvTHsT.js → LayoutFlexItem-C2t_4vHD.js} +1 -1
- package/dist/assets/{LayoutGrid.stories-Ck1Ysspo.js → LayoutGrid.stories-CNvZbuzu.js} +1 -1
- package/dist/assets/{LayoutGridItem-DPLTfQDr.js → LayoutGridItem-CZ6SKl8g.js} +1 -1
- package/dist/assets/{Link.stories-B1fXJUXm.js → Link.stories-DQx9wq8H.js} +2 -2
- package/dist/assets/{NumberField-DTaNQrnr.js → NumberField-D6cbX2hK.js} +5 -5
- package/dist/assets/{NumberField.stories-BBhAsZar.js → NumberField.stories-BHt2ErAX.js} +1 -1
- package/dist/assets/{ObserveIntersection-DIzoqV0M.js → ObserveIntersection-DsqqXq5n.js} +1 -1
- package/dist/assets/{ObserveIntersection.stories-9LGsv3hq.js → ObserveIntersection.stories-BabE9srq.js} +1 -1
- package/dist/assets/{OnboardingTooltip-DL0b2snx.js → OnboardingTooltip-DVNAQjDc.js} +1 -1
- package/dist/assets/{OnboardingTooltip.stories-BL04HmvH.js → OnboardingTooltip.stories-BGQM-hLj.js} +1 -1
- package/dist/assets/{OnboardingTooltip.tests.stories-qaJ7R0VB.js → OnboardingTooltip.tests.stories-4LRVGnuI.js} +1 -1
- package/dist/assets/{OnboardingTour-BEArI5YV.js → OnboardingTour-DdV7TN6M.js} +1 -1
- package/dist/assets/{OnboardingTour.stories-BZLufj9V.js → OnboardingTour.stories-D0ScuFD6.js} +1 -1
- package/dist/assets/{OnboardingTour.tests.stories-CxlMyj8d.js → OnboardingTour.tests.stories-DAxdPYEp.js} +1 -1
- package/dist/assets/{PasswordField-DaMmlpIr.js → PasswordField-C_KRyf9k.js} +5 -5
- package/dist/assets/{PasswordField.stories-tM9nknm7.js → PasswordField.stories-3X4JtcLm.js} +1 -1
- package/dist/assets/{ProgressBar.stories-CL5ifoDb.js → ProgressBar.stories-Dpro8fzG.js} +1 -1
- package/dist/assets/{ProgressSteps.stories-DbZpoKtc.js → ProgressSteps.stories-DDhuAaz0.js} +1 -1
- package/dist/assets/{SelectField-CNhQrH2n.js → SelectField-CuzFFPz0.js} +9 -9
- package/dist/assets/{SelectField.stories-B4CMJsMc.js → SelectField.stories-wb_cAtCV.js} +1 -1
- package/dist/assets/{ShowOnIntersection.stories-CQ4u9OFv.js → ShowOnIntersection.stories-ipu84fct.js} +1 -1
- package/dist/assets/{Steps-BdyOSLSR.js → Steps-CCm9vCgl.js} +1 -1
- package/dist/assets/{Steps.stories-Dz8bq-Yg.js → Steps.stories-BLFM3WRM.js} +1 -1
- package/dist/assets/{Text-BO29RJXG.js → Text-BmdJVr9v.js} +1 -1
- package/dist/assets/{Text.stories-12_yxx51.js → Text.stories-CkC6dvyE.js} +1 -1
- package/dist/assets/{TextField-BQEExuz1.js → TextField-CMgzC3bX.js} +5 -5
- package/dist/assets/{TextField.stories-BCz_05Q2.js → TextField.stories-CAcPkm_s.js} +1 -1
- package/dist/assets/{TextHighlighted.stories-GseXqtvA.js → TextHighlighted.stories-BJsM40kL.js} +1 -1
- package/dist/assets/{TextInline.stories--nFiCnzF.js → TextInline.stories-CL1L2t2-.js} +1 -1
- package/dist/assets/{TextareaField-DctmivNT.js → TextareaField-CCM1C6lK.js} +8 -8
- package/dist/assets/{TextareaField.stories-D9w5_Y9J.js → TextareaField.stories-DKNFN3f4.js} +1 -1
- package/dist/assets/{Toast.stories-C8g_vmi4.js → Toast.stories-BzEpckjh.js} +1 -1
- package/dist/assets/TokyoUIUser-DG6LLnJu.js +1 -0
- package/dist/assets/{Tooltip.stories-CmbG2cCW.js → Tooltip.stories-DHYG0ggY.js} +1 -1
- package/dist/assets/{Tooltip.tests.stories-Dy7PYnuY.js → Tooltip.tests.stories-DWwqRNUM.js} +1 -1
- package/dist/assets/{breakpoints-DobBRp7q.js → breakpoints-3Mi8ztBx.js} +1 -1
- package/dist/assets/{breakpoints-DpTqvyvp.js → breakpoints-BPZAI3l-.js} +1 -1
- package/dist/assets/{breakpoints-CgHpWGUd.js → breakpoints-DxEeOfvq.js} +1 -1
- package/dist/assets/{changelog-D0S8jEky.js → changelog-BvX8uMXW.js} +121 -110
- package/dist/assets/{entry-preview-DFRn2mBg.js → entry-preview-Cgr68VmN.js} +1 -1
- package/dist/assets/{getTokenVar-C5oirQpA.js → getTokenVar-CXvtPVqa.js} +1 -1
- package/dist/assets/{hover-xyA4MvI5.js → hover-BJ9rZrzg.js} +1 -1
- package/dist/assets/{hover-Cvnde29j.js → hover-CeDdAnNA.js} +1 -1
- package/dist/assets/{hover-IWMMjFXu.js → hover-sR2377QI.js} +1 -1
- package/dist/assets/{iframe-CaFg3nAw.js → iframe-BE13K_u-.js} +2 -2
- package/dist/assets/{index-COQ9un1y.js → index-CjMmneJr.js} +3 -3
- package/dist/assets/{index-jR0YS9dx.js → index-DUJ9kiQB.js} +1 -1
- package/dist/assets/{intro-C7f6V7yC.js → intro-BQxazeZ4.js} +1 -1
- package/dist/assets/{migrating-from-less-DyfhpvAY.js → migrating-from-less-_WbBpNno.js} +1 -1
- package/dist/assets/{playground-DJ3kGgB-.css → playground-DJaUjyzx.css} +1 -1
- package/dist/assets/{preview-DcpNo3Ub.js → preview-DFIaQ6pR.js} +2 -2
- package/dist/assets/{preview-Ces97bfw.js → preview-Dlcr0l4_.js} +1 -1
- package/dist/assets/{preview-BEIzUzZL.js → preview-DqZVArh_.js} +1 -1
- package/dist/assets/{tokens-DKSLWP2O.js → tokens-BpVbkeg9.js} +1 -1
- package/dist/assets/{tokens-nPSL-fkF.js → tokens-Do5DDIVZ.js} +1 -1
- package/dist/assets/{tokens-BYaYQ2wS.js → tokens-rA5iljxB.js} +1 -1
- package/dist/assets/{usePortalElement-DH3j5qah.js → usePortalElement-D-MBkGYE.js} +1 -1
- package/dist/assets/{welcome-Plgou2W7.js → welcome-CjdlfIE9.js} +1 -1
- package/dist/assets/{zeroheight-D18qypro.js → zeroheight-COTIl-YQ.js} +1 -1
- package/dist/iframe.html +1 -1
- package/dist/index.json +1 -1
- package/dist/preview-stats.json +995 -995
- package/dist/project.json +1 -1
- package/package.json +3 -3
- package/dist/assets/CountryFlag-BSsWsMSZ.js +0 -49
- package/dist/assets/Dialog-7LK-NRfd.css +0 -1
- package/dist/assets/IconButton-05fPCnaC.js +0 -8
- package/dist/assets/TokyoUIUser-CEt_udNR.js +0 -1
- /package/dist/assets/{playground.stories-BW9_5bcY.js → playground.stories-DNP6DMoh.js} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
import{j as x}from"./jsx-runtime-BYouaCF_.js";import{r as I}from"./index-B3evPFBL.js";import{g as _,a as F,b as g}from"./align-self-BM6l9H5Z.js";import{f as w}from"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import{m as b,b as R}from"./classNames-BUL1Zq7e.js";import{w as e}from"./componentNames-CpCJzpB9.js";import{g as C}from"./index-DdzHuZ-Y.js";import{L as N}from"./defaults-B1rzzf6M.js";const A="LayoutFlexItem__dKOq-",q={LayoutFlexItem:A,"LayoutFlexItem--stretch":"LayoutFlexItem--stretch__iab5M","LayoutFlexItem--no-stretch":"LayoutFlexItem--no-stretch__-1TuH","LayoutFlexItem--narrow-l--stretch":"LayoutFlexItem--narrow-l--stretch__3ll6c","LayoutFlexItem--narrow-l--no-stretch":"LayoutFlexItem--narrow-l--no-stretch__ObDkL","LayoutFlexItem--medium-s--stretch":"LayoutFlexItem--medium-s--stretch__3Ry1a","LayoutFlexItem--medium-s--no-stretch":"LayoutFlexItem--medium-s--no-stretch__KB7hy","LayoutFlexItem--medium-l--stretch":"LayoutFlexItem--medium-l--stretch__roskH","LayoutFlexItem--medium-l--no-stretch":"LayoutFlexItem--medium-l--no-stretch__g5WGB","LayoutFlexItem--wide-s--stretch":"LayoutFlexItem--wide-s--stretch__xMSyv","LayoutFlexItem--wide-s--no-stretch":"LayoutFlexItem--wide-s--no-stretch__3voIB","LayoutFlexItem--wide-l--stretch":"LayoutFlexItem--wide-l--stretch__AfLMQ","LayoutFlexItem--wide-l--no-stretch":"LayoutFlexItem--wide-l--no-stretch__LA45O"},t=I.forwardRef(function({children:l,alignSelf:s,stretch:u=!1,tag:o,hide:n,relative:r,dataset:m,...i},c){const d=b(q,e.LayoutFlexItem,R("stretch","no-stretch",u)),v=_(s),p=F(n),y=g(r),f=[...d,...v,...p,...y],L=o??N,h={...w(i),ref:c,className:f.join(" "),...C(m,{preplyDsComponent:e.LayoutFlexItem})};return x.jsx(L,{...h,children:l})});try{t.displayName="LayoutFlexItem",t.__docgenInfo={description:"",displayName:"LayoutFlexItem",props:{alignSelf:{defaultValue:null,description:"",name:"alignSelf",required:!1,type:{name:"enum",value:[{value:'"center"'},{value:'"start"'},{value:'"end"'},{value:'"stretch"'},{value:"ResponsiveProp<LayoutAlignSelf>"}]}},stretch:{defaultValue:{value:"false"},description:"",name:"stretch",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:"ResponsiveProp<boolean>"}]}},tag:{defaultValue:null,description:"",name:"tag",required:!1,type:{name:"enum",value:[{value:'"p"'},{value:'"div"'},{value:'"span"'},{value:'"
|
|
1
|
+
import{j as x}from"./jsx-runtime-BYouaCF_.js";import{r as I}from"./index-B3evPFBL.js";import{g as _,a as F,b as g}from"./align-self-BM6l9H5Z.js";import{f as w}from"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import{m as b,b as R}from"./classNames-BUL1Zq7e.js";import{w as e}from"./componentNames-CpCJzpB9.js";import{g as C}from"./index-DdzHuZ-Y.js";import{L as N}from"./defaults-B1rzzf6M.js";const A="LayoutFlexItem__dKOq-",q={LayoutFlexItem:A,"LayoutFlexItem--stretch":"LayoutFlexItem--stretch__iab5M","LayoutFlexItem--no-stretch":"LayoutFlexItem--no-stretch__-1TuH","LayoutFlexItem--narrow-l--stretch":"LayoutFlexItem--narrow-l--stretch__3ll6c","LayoutFlexItem--narrow-l--no-stretch":"LayoutFlexItem--narrow-l--no-stretch__ObDkL","LayoutFlexItem--medium-s--stretch":"LayoutFlexItem--medium-s--stretch__3Ry1a","LayoutFlexItem--medium-s--no-stretch":"LayoutFlexItem--medium-s--no-stretch__KB7hy","LayoutFlexItem--medium-l--stretch":"LayoutFlexItem--medium-l--stretch__roskH","LayoutFlexItem--medium-l--no-stretch":"LayoutFlexItem--medium-l--no-stretch__g5WGB","LayoutFlexItem--wide-s--stretch":"LayoutFlexItem--wide-s--stretch__xMSyv","LayoutFlexItem--wide-s--no-stretch":"LayoutFlexItem--wide-s--no-stretch__3voIB","LayoutFlexItem--wide-l--stretch":"LayoutFlexItem--wide-l--stretch__AfLMQ","LayoutFlexItem--wide-l--no-stretch":"LayoutFlexItem--wide-l--no-stretch__LA45O"},t=I.forwardRef(function({children:l,alignSelf:s,stretch:u=!1,tag:o,hide:n,relative:r,dataset:m,...i},c){const d=b(q,e.LayoutFlexItem,R("stretch","no-stretch",u)),v=_(s),p=F(n),y=g(r),f=[...d,...v,...p,...y],L=o??N,h={...w(i),ref:c,className:f.join(" "),...C(m,{preplyDsComponent:e.LayoutFlexItem})};return x.jsx(L,{...h,children:l})});try{t.displayName="LayoutFlexItem",t.__docgenInfo={description:"",displayName:"LayoutFlexItem",props:{alignSelf:{defaultValue:null,description:"",name:"alignSelf",required:!1,type:{name:"enum",value:[{value:'"center"'},{value:'"start"'},{value:'"end"'},{value:'"stretch"'},{value:"ResponsiveProp<LayoutAlignSelf>"}]}},stretch:{defaultValue:{value:"false"},description:"",name:"stretch",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:"ResponsiveProp<boolean>"}]}},tag:{defaultValue:null,description:"",name:"tag",required:!1,type:{name:"enum",value:[{value:'"p"'},{value:'"div"'},{value:'"span"'},{value:'"article"'},{value:'"caption"'},{value:'"fieldset"'},{value:'"figcaption"'},{value:'"figure"'},{value:'"footer"'},{value:'"header"'},{value:'"li"'},{value:'"main"'},{value:'"ol"'},{value:'"section"'},{value:'"table"'},{value:'"tbody"'},{value:'"td"'},{value:'"tfoot"'},{value:'"th"'},{value:'"thead"'},{value:'"tr"'},{value:'"ul"'}]}},hide:{defaultValue:null,description:"",name:"hide",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:"ResponsiveProp<boolean>"}]}},relative:{defaultValue:null,description:"",name:"relative",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:"ResponsiveProp<boolean>"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: HTMLElement | null) => void"},{value:"RefObject<HTMLElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}export{t as L};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as t}from"./jsx-runtime-BYouaCF_.js";import{a as e,L as h}from"./LayoutGridItem-
|
|
1
|
+
import{j as t}from"./jsx-runtime-BYouaCF_.js";import{a as e,L as h}from"./LayoutGridItem-CZ6SKl8g.js";import{S as n,a as m}from"./consts-KAYct7Gj.js";import"./index-B3evPFBL.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./classNames-BUL1Zq7e.js";import"./breakpoints-BfMlrtxE.js";import"./layout-relative.module-ed9bC4H4.js";import"./align-self-BM6l9H5Z.js";import"./constants-DYYVurUY.js";import"./defaults-B1rzzf6M.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./index-DdzHuZ-Y.js";import"./componentNames-CpCJzpB9.js";const G={title:"components/LayoutGrid",component:h,subcomponents:{LayoutGridItem:e},argTypes:{gap:{description:n},padding:{description:m},columns:{description:n},justifyContent:{description:n},alignItems:{description:n},justifyItems:{description:n},hide:{description:n},relative:{description:n}}},o=()=>t.jsxs(h,{columns:4,alignItems:"start",gap:"xs",children:[t.jsx(e,{children:t.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"0.25rem"},children:[t.jsx("div",{style:{height:"2ch",backgroundColor:"hotpink"}}),t.jsx("div",{style:{height:"2ch",backgroundColor:"hotpink"}})]})}),t.jsx(e,{alignSelf:"end",children:t.jsx("div",{style:{height:"2ch",backgroundColor:"hotpink"}})}),t.jsx("div",{style:{height:"2ch",backgroundColor:"hotpink"}}),t.jsx("div",{style:{height:"2ch",backgroundColor:"hotpink"}})]});o.storyName="LayoutGrid";const i={parameters:{chromatic:{disableSnapshot:!0}},args:{gap:"16",columns:3,alignItems:"start",children:t.jsxs(t.Fragment,{children:[t.jsx("div",{style:{minWidth:"100px",minHeight:50,backgroundColor:"hotpink"},children:" "}),t.jsx("div",{style:{minWidth:"100px",minHeight:75,backgroundColor:"hotpink"},children:" "}),t.jsx("div",{style:{minWidth:"100px",minHeight:100,backgroundColor:"hotpink",textAlign:"center"}})]}),dataset:{qaid:"layout-grid"}},argTypes:{dataset:{control:"object"},columns:{control:"number"},justifyItems:{control:"select"},hide:{control:"boolean"},relative:{control:"boolean"},children:{control:!1}}};var r,s,a;o.parameters={...o.parameters,docs:{...(r=o.parameters)==null?void 0:r.docs,source:{originalSource:`() => <LayoutGrid columns={4} alignItems="start" gap="xs">
|
|
2
2
|
<LayoutGridItem>
|
|
3
3
|
<div style={{
|
|
4
4
|
display: 'flex',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{j as g}from"./jsx-runtime-BYouaCF_.js";import{r as j}from"./index-B3evPFBL.js";import{a as I,m as _,s as y}from"./classNames-BUL1Zq7e.js";import{B as P}from"./breakpoints-BfMlrtxE.js";import{s as V,g as S}from"./layout-relative.module-ed9bC4H4.js";import{a as w,b as h,g as q}from"./align-self-BM6l9H5Z.js";import{k as O,f as D,L as b}from"./defaults-B1rzzf6M.js";import{f as C}from"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import{g as N}from"./index-DdzHuZ-Y.js";import{w as G}from"./componentNames-CpCJzpB9.js";const U="LayoutGrid__SRDdo",R={LayoutGrid:U,"LayoutGrid--justify-content-center":"LayoutGrid--justify-content-center__vI9m1","LayoutGrid--justify-content-start":"LayoutGrid--justify-content-start__oyqGC","LayoutGrid--justify-content-end":"LayoutGrid--justify-content-end__RMTO2","LayoutGrid--justify-content-space-between":"LayoutGrid--justify-content-space-between__lvZnD","LayoutGrid--justify-content-space-around":"LayoutGrid--justify-content-space-around__Tl4FE","LayoutGrid--justify-content-space-evenly":"LayoutGrid--justify-content-space-evenly__KzBOQ","LayoutGrid--narrow-l--justify-content-center":"LayoutGrid--narrow-l--justify-content-center__nQPPi","LayoutGrid--narrow-l--justify-content-start":"LayoutGrid--narrow-l--justify-content-start__K7PbL","LayoutGrid--narrow-l--justify-content-end":"LayoutGrid--narrow-l--justify-content-end__UHZNO","LayoutGrid--narrow-l--justify-content-space-between":"LayoutGrid--narrow-l--justify-content-space-between__hgFor","LayoutGrid--narrow-l--justify-content-space-around":"LayoutGrid--narrow-l--justify-content-space-around__Ec1Tu","LayoutGrid--narrow-l--justify-content-space-evenly":"LayoutGrid--narrow-l--justify-content-space-evenly__TjQzB","LayoutGrid--medium-s--justify-content-center":"LayoutGrid--medium-s--justify-content-center__2xRJU","LayoutGrid--medium-s--justify-content-start":"LayoutGrid--medium-s--justify-content-start__5YYfG","LayoutGrid--medium-s--justify-content-end":"LayoutGrid--medium-s--justify-content-end__tNaVV","LayoutGrid--medium-s--justify-content-space-between":"LayoutGrid--medium-s--justify-content-space-between__Yw2DU","LayoutGrid--medium-s--justify-content-space-around":"LayoutGrid--medium-s--justify-content-space-around__GzjIX","LayoutGrid--medium-s--justify-content-space-evenly":"LayoutGrid--medium-s--justify-content-space-evenly__wtV7Y","LayoutGrid--medium-l--justify-content-center":"LayoutGrid--medium-l--justify-content-center__6Z3HK","LayoutGrid--medium-l--justify-content-start":"LayoutGrid--medium-l--justify-content-start__eCE0H","LayoutGrid--medium-l--justify-content-end":"LayoutGrid--medium-l--justify-content-end__WUHhq","LayoutGrid--medium-l--justify-content-space-between":"LayoutGrid--medium-l--justify-content-space-between__dzn5s","LayoutGrid--medium-l--justify-content-space-around":"LayoutGrid--medium-l--justify-content-space-around__1jJy-","LayoutGrid--medium-l--justify-content-space-evenly":"LayoutGrid--medium-l--justify-content-space-evenly__SALxb","LayoutGrid--wide-s--justify-content-center":"LayoutGrid--wide-s--justify-content-center__O2AmA","LayoutGrid--wide-s--justify-content-start":"LayoutGrid--wide-s--justify-content-start__M128c","LayoutGrid--wide-s--justify-content-end":"LayoutGrid--wide-s--justify-content-end__Edf7b","LayoutGrid--wide-s--justify-content-space-between":"LayoutGrid--wide-s--justify-content-space-between__sCWUj","LayoutGrid--wide-s--justify-content-space-around":"LayoutGrid--wide-s--justify-content-space-around__OqKb-","LayoutGrid--wide-s--justify-content-space-evenly":"LayoutGrid--wide-s--justify-content-space-evenly__BqAco","LayoutGrid--wide-l--justify-content-center":"LayoutGrid--wide-l--justify-content-center__WT24m","LayoutGrid--wide-l--justify-content-start":"LayoutGrid--wide-l--justify-content-start__pavdA","LayoutGrid--wide-l--justify-content-end":"LayoutGrid--wide-l--justify-content-end__US-V2","LayoutGrid--wide-l--justify-content-space-between":"LayoutGrid--wide-l--justify-content-space-between__31Ivo","LayoutGrid--wide-l--justify-content-space-around":"LayoutGrid--wide-l--justify-content-space-around__sbmBA","LayoutGrid--wide-l--justify-content-space-evenly":"LayoutGrid--wide-l--justify-content-space-evenly__VBy-1","LayoutGrid--align-items-center":"LayoutGrid--align-items-center__cAn-E","LayoutGrid--align-items-start":"LayoutGrid--align-items-start__iIBPs","LayoutGrid--align-items-end":"LayoutGrid--align-items-end__bi0Vt","LayoutGrid--align-items-stretch":"LayoutGrid--align-items-stretch__vyo1N","LayoutGrid--align-items-baseline":"LayoutGrid--align-items-baseline__iWU1b","LayoutGrid--narrow-l--align-items-center":"LayoutGrid--narrow-l--align-items-center__L5fan","LayoutGrid--narrow-l--align-items-start":"LayoutGrid--narrow-l--align-items-start__EZBkc","LayoutGrid--narrow-l--align-items-end":"LayoutGrid--narrow-l--align-items-end__igLCn","LayoutGrid--narrow-l--align-items-stretch":"LayoutGrid--narrow-l--align-items-stretch__jsoOx","LayoutGrid--narrow-l--align-items-baseline":"LayoutGrid--narrow-l--align-items-baseline__HJvGK","LayoutGrid--medium-s--align-items-center":"LayoutGrid--medium-s--align-items-center__YHCsG","LayoutGrid--medium-s--align-items-start":"LayoutGrid--medium-s--align-items-start__-x5jL","LayoutGrid--medium-s--align-items-end":"LayoutGrid--medium-s--align-items-end__5vxaA","LayoutGrid--medium-s--align-items-stretch":"LayoutGrid--medium-s--align-items-stretch__Oo3Jn","LayoutGrid--medium-s--align-items-baseline":"LayoutGrid--medium-s--align-items-baseline__N5jnU","LayoutGrid--medium-l--align-items-center":"LayoutGrid--medium-l--align-items-center__sOLNh","LayoutGrid--medium-l--align-items-start":"LayoutGrid--medium-l--align-items-start__LlPIM","LayoutGrid--medium-l--align-items-end":"LayoutGrid--medium-l--align-items-end__kMMCT","LayoutGrid--medium-l--align-items-stretch":"LayoutGrid--medium-l--align-items-stretch__R0zx-","LayoutGrid--medium-l--align-items-baseline":"LayoutGrid--medium-l--align-items-baseline__EaOdU","LayoutGrid--wide-s--align-items-center":"LayoutGrid--wide-s--align-items-center__Ve-ZD","LayoutGrid--wide-s--align-items-start":"LayoutGrid--wide-s--align-items-start__28Z74","LayoutGrid--wide-s--align-items-end":"LayoutGrid--wide-s--align-items-end__TDXOu","LayoutGrid--wide-s--align-items-stretch":"LayoutGrid--wide-s--align-items-stretch__nHuLT","LayoutGrid--wide-s--align-items-baseline":"LayoutGrid--wide-s--align-items-baseline__pnhzS","LayoutGrid--wide-l--align-items-center":"LayoutGrid--wide-l--align-items-center__JTXQd","LayoutGrid--wide-l--align-items-start":"LayoutGrid--wide-l--align-items-start__Ghu5o","LayoutGrid--wide-l--align-items-end":"LayoutGrid--wide-l--align-items-end__6ReFW","LayoutGrid--wide-l--align-items-stretch":"LayoutGrid--wide-l--align-items-stretch__O0QQv","LayoutGrid--wide-l--align-items-baseline":"LayoutGrid--wide-l--align-items-baseline__sQjwX","LayoutGrid--justify-items-stretch":"LayoutGrid--justify-items-stretch__M9QcQ","LayoutGrid--justify-items-center":"LayoutGrid--justify-items-center__oTKUc","LayoutGrid--justify-items-start":"LayoutGrid--justify-items-start__VYPnF","LayoutGrid--justify-items-end":"LayoutGrid--justify-items-end__8CwwZ","LayoutGrid--narrow-l--justify-items-stretch":"LayoutGrid--narrow-l--justify-items-stretch__kvCGG","LayoutGrid--narrow-l--justify-items-center":"LayoutGrid--narrow-l--justify-items-center__3ItXk","LayoutGrid--narrow-l--justify-items-start":"LayoutGrid--narrow-l--justify-items-start__Bhi3s","LayoutGrid--narrow-l--justify-items-end":"LayoutGrid--narrow-l--justify-items-end__gc2Ku","LayoutGrid--medium-s--justify-items-stretch":"LayoutGrid--medium-s--justify-items-stretch__tuwxD","LayoutGrid--medium-s--justify-items-center":"LayoutGrid--medium-s--justify-items-center__atoXy","LayoutGrid--medium-s--justify-items-start":"LayoutGrid--medium-s--justify-items-start__TmFN1","LayoutGrid--medium-s--justify-items-end":"LayoutGrid--medium-s--justify-items-end__jfl4-","LayoutGrid--medium-l--justify-items-stretch":"LayoutGrid--medium-l--justify-items-stretch__H23wm","LayoutGrid--medium-l--justify-items-center":"LayoutGrid--medium-l--justify-items-center__U-RzH","LayoutGrid--medium-l--justify-items-start":"LayoutGrid--medium-l--justify-items-start__0UVBd","LayoutGrid--medium-l--justify-items-end":"LayoutGrid--medium-l--justify-items-end__GDL0T","LayoutGrid--wide-s--justify-items-stretch":"LayoutGrid--wide-s--justify-items-stretch__3eMVC","LayoutGrid--wide-s--justify-items-center":"LayoutGrid--wide-s--justify-items-center__i7AtD","LayoutGrid--wide-s--justify-items-start":"LayoutGrid--wide-s--justify-items-start__O80gc","LayoutGrid--wide-s--justify-items-end":"LayoutGrid--wide-s--justify-items-end__IleZr","LayoutGrid--wide-l--justify-items-stretch":"LayoutGrid--wide-l--justify-items-stretch__P8KTm","LayoutGrid--wide-l--justify-items-center":"LayoutGrid--wide-l--justify-items-center__sXqXH","LayoutGrid--wide-l--justify-items-start":"LayoutGrid--wide-l--justify-items-start__QngDX","LayoutGrid--wide-l--justify-items-end":"LayoutGrid--wide-l--justify-items-end__wa8k8","LayoutGrid--columns":"LayoutGrid--columns__rVisq","LayoutGrid--columns-narrow-l":"LayoutGrid--columns-narrow-l__UBDfA","LayoutGrid--columns-medium-s":"LayoutGrid--columns-medium-s__lzA5l","LayoutGrid--columns-medium-l":"LayoutGrid--columns-medium-l__CM0CJ","LayoutGrid--columns-wide-s":"LayoutGrid--columns-wide-s__RUz4B","LayoutGrid--columns-wide-l":"LayoutGrid--columns-wide-l__qXJC-"},x="LayoutGrid",E=Object.keys(P),f=e=>typeof e=="number"?`repeat(${e}, 1fr)`:e.join(" "),H=e=>typeof e=="object"&&!Array.isArray(e)?Object.entries(e).reduce((a,[u,t])=>({...a,...t?{[u]:f(t)}:{}}),{_:f(e._)}):{_:f(e)},k=e=>{if(!e)return{classNames:[],style:{}};const a=H(e),u=E.filter(i=>a[i]),t=I(R,x,["columns",...u.map(i=>`columns-${i}`)]),n=u.reduce((i,s)=>({...i,[`--columns-${s}`]:a[s]}),{"--columns":a._});return{classNames:t,style:n}},z="LayoutGap",M=e=>_(V,z,[y("gap",e)]),Y="LayoutGrid",B=(e,a)=>{const{gap:u=O,padding:t=D,justifyContent:n,alignItems:i,justifyItems:s,hide:l,relative:r}=a||{},o=_(R,Y,[y("justify-content",n),y("align-items",i),y("justify-items",s)]),d=M(u),m=S(t),c=w(l,"grid"),L=h(r);return[...o,...d,...m,...c,...L]},v=j.forwardRef(function({dataset:a,children:u,...t},n){const{tag:i=b,columns:s}=t,l=B("grid",t),{style:r,classNames:o}=k(s),d=[...l,...o],m={...C(t),ref:n,className:d.join(" "),style:r,...N(a,{preplyDsComponent:G.LayoutGrid})};return g.jsx(i,{...m,children:u})});try{v.displayName="LayoutGrid",v.__docgenInfo={description:"A CSS `grid` wrapper.",displayName:"LayoutGrid",props:{gap:{defaultValue:null,description:"",name:"gap",required:!1,type:{name:"enum",value:[{value:'"xs"'},{value:'"s"'},{value:'"m"'},{value:'"l"'},{value:'"xl"'},{value:'"none"'},{value:'"2"'},{value:'"4"'},{value:'"8"'},{value:'"0"'},{value:'"12"'},{value:'"16"'},{value:'"24"'},{value:'"32"'},{value:'"48"'},{value:'"64"'},{value:'"96"'},{value:'"160"'},{value:'"3xs"'},{value:'"2xs"'},{value:'"1"'},{value:'"20"'},{value:"ResponsiveProp<LayoutGap>"},{value:"ResponsiveProp<Spacing>"}]}},padding:{defaultValue:null,description:"",name:"padding",required:!1,type:{name:"enum",value:[{value:'"xs"'},{value:'"s"'},{value:'"m"'},{value:'"l"'},{value:'"xl"'},{value:'"none"'},{value:'"2"'},{value:'"4"'},{value:'"8"'},{value:'"0"'},{value:'"12"'},{value:'"16"'},{value:'"24"'},{value:'"32"'},{value:'"48"'},{value:'"64"'},{value:'"96"'},{value:'"160"'},{value:'"3xs"'},{value:'"2xs"'},{value:'"1"'},{value:'"20"'},{value:"[Spacing, Spacing]"},{value:"[Spacing, Spacing, Spacing]"},{value:"[Spacing, Spacing, Spacing, Spacing]"},{value:"[LayoutPadding, LayoutPadding]"},{value:"[LayoutPadding, LayoutPadding, LayoutPadding]"},{value:"[LayoutPadding, LayoutPadding, LayoutPadding, LayoutPadding]"},{value:"ResponsiveProp<ShortHand<Spacing> | ShortHand<LayoutPadding>>"}]}},columns:{defaultValue:null,description:"The `number` of columns, or a `string[]` of `grid-template-columns`.\n@see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns}",name:"columns",required:!1,type:{name:"enum",value:[{value:"number"},{value:"string[]"},{value:"ResponsiveProp<number | string[]>"}]}},justifyContent:{defaultValue:null,description:"",name:"justifyContent",required:!1,type:{name:"enum",value:[{value:'"center"'},{value:'"start"'},{value:'"end"'},{value:'"space-between"'},{value:'"space-around"'},{value:'"space-evenly"'},{value:"ResponsiveProp<LayoutJustifyContent>"}]}},alignItems:{defaultValue:null,description:"",name:"alignItems",required:!1,type:{name:"enum",value:[{value:'"center"'},{value:'"start"'},{value:'"end"'},{value:'"stretch"'},{value:'"baseline"'},{value:"ResponsiveProp<LayoutAlignItems>"}]}},justifyItems:{defaultValue:null,description:"",name:"justifyItems",required:!1,type:{name:"enum",value:[{value:'"center"'},{value:'"start"'},{value:'"end"'},{value:'"stretch"'},{value:"ResponsiveProp<LayoutJustifyItems>"}]}},tag:{defaultValue:null,description:"",name:"tag",required:!1,type:{name:"enum",value:[{value:'"p"'},{value:'"div"'},{value:'"span"'},{value:'"main"'},{value:'"header"'},{value:'"footer"'},{value:'"article"'},{value:'"section"'},{value:'"ul"'},{value:'"ol"'},{value:'"li"'},{value:'"fieldset"'},{value:'"table"'},{value:'"th"'},{value:'"tr"'},{value:'"td"'},{value:'"thead"'},{value:'"tfoot"'},{value:'"tbody"'},{value:'"caption"'},{value:'"figure"'},{value:'"figcaption"'}]}},hide:{defaultValue:null,description:"",name:"hide",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:"ResponsiveProp<boolean>"}]}},relative:{defaultValue:null,description:"",name:"relative",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:"ResponsiveProp<boolean>"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: HTMLElement | null) => void"},{value:"RefObject<HTMLElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}const K="LayoutGridItem__GF0yx",Q={LayoutGridItem:K},p=j.forwardRef(function({children:a,alignSelf:u,tag:t,hide:n,relative:i,dataset:s,...l},r){const o=_(Q,G.LayoutGridItem,[]),d=q(u),m=w(n),c=h(i),L=[...o,...d,...m,...c],A=t??b,T={...C(l),ref:r,className:L.join(" "),...N(s,{preplyDsComponent:G.LayoutGridItem})};return g.jsx(A,{...T,children:a})});try{p.displayName="LayoutGridItem",p.__docgenInfo={description:"",displayName:"LayoutGridItem",props:{alignSelf:{defaultValue:null,description:"",name:"alignSelf",required:!1,type:{name:"enum",value:[{value:'"center"'},{value:'"start"'},{value:'"end"'},{value:'"stretch"'},{value:"ResponsiveProp<LayoutAlignSelf>"}]}},tag:{defaultValue:null,description:"",name:"tag",required:!1,type:{name:"enum",value:[{value:'"p"'},{value:'"div"'},{value:'"span"'},{value:'"main"'},{value:'"header"'},{value:'"footer"'},{value:'"article"'},{value:'"section"'},{value:'"ul"'},{value:'"ol"'},{value:'"li"'},{value:'"fieldset"'},{value:'"table"'},{value:'"th"'},{value:'"tr"'},{value:'"td"'},{value:'"thead"'},{value:'"tfoot"'},{value:'"tbody"'},{value:'"caption"'},{value:'"figure"'},{value:'"figcaption"'}]}},hide:{defaultValue:null,description:"",name:"hide",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:"ResponsiveProp<boolean>"}]}},relative:{defaultValue:null,description:"",name:"relative",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:"ResponsiveProp<boolean>"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: HTMLElement | null) => void"},{value:"RefObject<HTMLElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}export{v as L,p as a};
|
|
1
|
+
import{j as g}from"./jsx-runtime-BYouaCF_.js";import{r as j}from"./index-B3evPFBL.js";import{a as I,m as _,s as y}from"./classNames-BUL1Zq7e.js";import{B as P}from"./breakpoints-BfMlrtxE.js";import{s as V,g as S}from"./layout-relative.module-ed9bC4H4.js";import{a as w,b as h,g as q}from"./align-self-BM6l9H5Z.js";import{k as O,f as D,L as b}from"./defaults-B1rzzf6M.js";import{f as C}from"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import{g as N}from"./index-DdzHuZ-Y.js";import{w as G}from"./componentNames-CpCJzpB9.js";const U="LayoutGrid__SRDdo",R={LayoutGrid:U,"LayoutGrid--justify-content-center":"LayoutGrid--justify-content-center__vI9m1","LayoutGrid--justify-content-start":"LayoutGrid--justify-content-start__oyqGC","LayoutGrid--justify-content-end":"LayoutGrid--justify-content-end__RMTO2","LayoutGrid--justify-content-space-between":"LayoutGrid--justify-content-space-between__lvZnD","LayoutGrid--justify-content-space-around":"LayoutGrid--justify-content-space-around__Tl4FE","LayoutGrid--justify-content-space-evenly":"LayoutGrid--justify-content-space-evenly__KzBOQ","LayoutGrid--narrow-l--justify-content-center":"LayoutGrid--narrow-l--justify-content-center__nQPPi","LayoutGrid--narrow-l--justify-content-start":"LayoutGrid--narrow-l--justify-content-start__K7PbL","LayoutGrid--narrow-l--justify-content-end":"LayoutGrid--narrow-l--justify-content-end__UHZNO","LayoutGrid--narrow-l--justify-content-space-between":"LayoutGrid--narrow-l--justify-content-space-between__hgFor","LayoutGrid--narrow-l--justify-content-space-around":"LayoutGrid--narrow-l--justify-content-space-around__Ec1Tu","LayoutGrid--narrow-l--justify-content-space-evenly":"LayoutGrid--narrow-l--justify-content-space-evenly__TjQzB","LayoutGrid--medium-s--justify-content-center":"LayoutGrid--medium-s--justify-content-center__2xRJU","LayoutGrid--medium-s--justify-content-start":"LayoutGrid--medium-s--justify-content-start__5YYfG","LayoutGrid--medium-s--justify-content-end":"LayoutGrid--medium-s--justify-content-end__tNaVV","LayoutGrid--medium-s--justify-content-space-between":"LayoutGrid--medium-s--justify-content-space-between__Yw2DU","LayoutGrid--medium-s--justify-content-space-around":"LayoutGrid--medium-s--justify-content-space-around__GzjIX","LayoutGrid--medium-s--justify-content-space-evenly":"LayoutGrid--medium-s--justify-content-space-evenly__wtV7Y","LayoutGrid--medium-l--justify-content-center":"LayoutGrid--medium-l--justify-content-center__6Z3HK","LayoutGrid--medium-l--justify-content-start":"LayoutGrid--medium-l--justify-content-start__eCE0H","LayoutGrid--medium-l--justify-content-end":"LayoutGrid--medium-l--justify-content-end__WUHhq","LayoutGrid--medium-l--justify-content-space-between":"LayoutGrid--medium-l--justify-content-space-between__dzn5s","LayoutGrid--medium-l--justify-content-space-around":"LayoutGrid--medium-l--justify-content-space-around__1jJy-","LayoutGrid--medium-l--justify-content-space-evenly":"LayoutGrid--medium-l--justify-content-space-evenly__SALxb","LayoutGrid--wide-s--justify-content-center":"LayoutGrid--wide-s--justify-content-center__O2AmA","LayoutGrid--wide-s--justify-content-start":"LayoutGrid--wide-s--justify-content-start__M128c","LayoutGrid--wide-s--justify-content-end":"LayoutGrid--wide-s--justify-content-end__Edf7b","LayoutGrid--wide-s--justify-content-space-between":"LayoutGrid--wide-s--justify-content-space-between__sCWUj","LayoutGrid--wide-s--justify-content-space-around":"LayoutGrid--wide-s--justify-content-space-around__OqKb-","LayoutGrid--wide-s--justify-content-space-evenly":"LayoutGrid--wide-s--justify-content-space-evenly__BqAco","LayoutGrid--wide-l--justify-content-center":"LayoutGrid--wide-l--justify-content-center__WT24m","LayoutGrid--wide-l--justify-content-start":"LayoutGrid--wide-l--justify-content-start__pavdA","LayoutGrid--wide-l--justify-content-end":"LayoutGrid--wide-l--justify-content-end__US-V2","LayoutGrid--wide-l--justify-content-space-between":"LayoutGrid--wide-l--justify-content-space-between__31Ivo","LayoutGrid--wide-l--justify-content-space-around":"LayoutGrid--wide-l--justify-content-space-around__sbmBA","LayoutGrid--wide-l--justify-content-space-evenly":"LayoutGrid--wide-l--justify-content-space-evenly__VBy-1","LayoutGrid--align-items-center":"LayoutGrid--align-items-center__cAn-E","LayoutGrid--align-items-start":"LayoutGrid--align-items-start__iIBPs","LayoutGrid--align-items-end":"LayoutGrid--align-items-end__bi0Vt","LayoutGrid--align-items-stretch":"LayoutGrid--align-items-stretch__vyo1N","LayoutGrid--align-items-baseline":"LayoutGrid--align-items-baseline__iWU1b","LayoutGrid--narrow-l--align-items-center":"LayoutGrid--narrow-l--align-items-center__L5fan","LayoutGrid--narrow-l--align-items-start":"LayoutGrid--narrow-l--align-items-start__EZBkc","LayoutGrid--narrow-l--align-items-end":"LayoutGrid--narrow-l--align-items-end__igLCn","LayoutGrid--narrow-l--align-items-stretch":"LayoutGrid--narrow-l--align-items-stretch__jsoOx","LayoutGrid--narrow-l--align-items-baseline":"LayoutGrid--narrow-l--align-items-baseline__HJvGK","LayoutGrid--medium-s--align-items-center":"LayoutGrid--medium-s--align-items-center__YHCsG","LayoutGrid--medium-s--align-items-start":"LayoutGrid--medium-s--align-items-start__-x5jL","LayoutGrid--medium-s--align-items-end":"LayoutGrid--medium-s--align-items-end__5vxaA","LayoutGrid--medium-s--align-items-stretch":"LayoutGrid--medium-s--align-items-stretch__Oo3Jn","LayoutGrid--medium-s--align-items-baseline":"LayoutGrid--medium-s--align-items-baseline__N5jnU","LayoutGrid--medium-l--align-items-center":"LayoutGrid--medium-l--align-items-center__sOLNh","LayoutGrid--medium-l--align-items-start":"LayoutGrid--medium-l--align-items-start__LlPIM","LayoutGrid--medium-l--align-items-end":"LayoutGrid--medium-l--align-items-end__kMMCT","LayoutGrid--medium-l--align-items-stretch":"LayoutGrid--medium-l--align-items-stretch__R0zx-","LayoutGrid--medium-l--align-items-baseline":"LayoutGrid--medium-l--align-items-baseline__EaOdU","LayoutGrid--wide-s--align-items-center":"LayoutGrid--wide-s--align-items-center__Ve-ZD","LayoutGrid--wide-s--align-items-start":"LayoutGrid--wide-s--align-items-start__28Z74","LayoutGrid--wide-s--align-items-end":"LayoutGrid--wide-s--align-items-end__TDXOu","LayoutGrid--wide-s--align-items-stretch":"LayoutGrid--wide-s--align-items-stretch__nHuLT","LayoutGrid--wide-s--align-items-baseline":"LayoutGrid--wide-s--align-items-baseline__pnhzS","LayoutGrid--wide-l--align-items-center":"LayoutGrid--wide-l--align-items-center__JTXQd","LayoutGrid--wide-l--align-items-start":"LayoutGrid--wide-l--align-items-start__Ghu5o","LayoutGrid--wide-l--align-items-end":"LayoutGrid--wide-l--align-items-end__6ReFW","LayoutGrid--wide-l--align-items-stretch":"LayoutGrid--wide-l--align-items-stretch__O0QQv","LayoutGrid--wide-l--align-items-baseline":"LayoutGrid--wide-l--align-items-baseline__sQjwX","LayoutGrid--justify-items-stretch":"LayoutGrid--justify-items-stretch__M9QcQ","LayoutGrid--justify-items-center":"LayoutGrid--justify-items-center__oTKUc","LayoutGrid--justify-items-start":"LayoutGrid--justify-items-start__VYPnF","LayoutGrid--justify-items-end":"LayoutGrid--justify-items-end__8CwwZ","LayoutGrid--narrow-l--justify-items-stretch":"LayoutGrid--narrow-l--justify-items-stretch__kvCGG","LayoutGrid--narrow-l--justify-items-center":"LayoutGrid--narrow-l--justify-items-center__3ItXk","LayoutGrid--narrow-l--justify-items-start":"LayoutGrid--narrow-l--justify-items-start__Bhi3s","LayoutGrid--narrow-l--justify-items-end":"LayoutGrid--narrow-l--justify-items-end__gc2Ku","LayoutGrid--medium-s--justify-items-stretch":"LayoutGrid--medium-s--justify-items-stretch__tuwxD","LayoutGrid--medium-s--justify-items-center":"LayoutGrid--medium-s--justify-items-center__atoXy","LayoutGrid--medium-s--justify-items-start":"LayoutGrid--medium-s--justify-items-start__TmFN1","LayoutGrid--medium-s--justify-items-end":"LayoutGrid--medium-s--justify-items-end__jfl4-","LayoutGrid--medium-l--justify-items-stretch":"LayoutGrid--medium-l--justify-items-stretch__H23wm","LayoutGrid--medium-l--justify-items-center":"LayoutGrid--medium-l--justify-items-center__U-RzH","LayoutGrid--medium-l--justify-items-start":"LayoutGrid--medium-l--justify-items-start__0UVBd","LayoutGrid--medium-l--justify-items-end":"LayoutGrid--medium-l--justify-items-end__GDL0T","LayoutGrid--wide-s--justify-items-stretch":"LayoutGrid--wide-s--justify-items-stretch__3eMVC","LayoutGrid--wide-s--justify-items-center":"LayoutGrid--wide-s--justify-items-center__i7AtD","LayoutGrid--wide-s--justify-items-start":"LayoutGrid--wide-s--justify-items-start__O80gc","LayoutGrid--wide-s--justify-items-end":"LayoutGrid--wide-s--justify-items-end__IleZr","LayoutGrid--wide-l--justify-items-stretch":"LayoutGrid--wide-l--justify-items-stretch__P8KTm","LayoutGrid--wide-l--justify-items-center":"LayoutGrid--wide-l--justify-items-center__sXqXH","LayoutGrid--wide-l--justify-items-start":"LayoutGrid--wide-l--justify-items-start__QngDX","LayoutGrid--wide-l--justify-items-end":"LayoutGrid--wide-l--justify-items-end__wa8k8","LayoutGrid--columns":"LayoutGrid--columns__rVisq","LayoutGrid--columns-narrow-l":"LayoutGrid--columns-narrow-l__UBDfA","LayoutGrid--columns-medium-s":"LayoutGrid--columns-medium-s__lzA5l","LayoutGrid--columns-medium-l":"LayoutGrid--columns-medium-l__CM0CJ","LayoutGrid--columns-wide-s":"LayoutGrid--columns-wide-s__RUz4B","LayoutGrid--columns-wide-l":"LayoutGrid--columns-wide-l__qXJC-"},x="LayoutGrid",E=Object.keys(P),f=e=>typeof e=="number"?`repeat(${e}, 1fr)`:e.join(" "),H=e=>typeof e=="object"&&!Array.isArray(e)?Object.entries(e).reduce((a,[u,t])=>({...a,...t?{[u]:f(t)}:{}}),{_:f(e._)}):{_:f(e)},k=e=>{if(!e)return{classNames:[],style:{}};const a=H(e),u=E.filter(i=>a[i]),t=I(R,x,["columns",...u.map(i=>`columns-${i}`)]),n=u.reduce((i,s)=>({...i,[`--columns-${s}`]:a[s]}),{"--columns":a._});return{classNames:t,style:n}},z="LayoutGap",M=e=>_(V,z,[y("gap",e)]),Y="LayoutGrid",B=(e,a)=>{const{gap:u=O,padding:t=D,justifyContent:n,alignItems:i,justifyItems:s,hide:l,relative:r}=a||{},o=_(R,Y,[y("justify-content",n),y("align-items",i),y("justify-items",s)]),d=M(u),m=S(t),c=w(l,"grid"),L=h(r);return[...o,...d,...m,...c,...L]},v=j.forwardRef(function({dataset:a,children:u,...t},n){const{tag:i=b,columns:s}=t,l=B("grid",t),{style:r,classNames:o}=k(s),d=[...l,...o],m={...C(t),ref:n,className:d.join(" "),style:r,...N(a,{preplyDsComponent:G.LayoutGrid})};return g.jsx(i,{...m,children:u})});try{v.displayName="LayoutGrid",v.__docgenInfo={description:"A CSS `grid` wrapper.",displayName:"LayoutGrid",props:{gap:{defaultValue:null,description:"",name:"gap",required:!1,type:{name:"enum",value:[{value:'"xs"'},{value:'"s"'},{value:'"m"'},{value:'"l"'},{value:'"xl"'},{value:'"2xs"'},{value:'"none"'},{value:'"3xs"'},{value:"ResponsiveProp<LayoutGap>"},{value:'"0"'},{value:'"1"'},{value:'"2"'},{value:'"4"'},{value:'"8"'},{value:'"12"'},{value:'"16"'},{value:'"20"'},{value:'"24"'},{value:'"32"'},{value:'"48"'},{value:'"64"'},{value:'"96"'},{value:'"160"'},{value:"ResponsiveProp<Spacing>"}]}},padding:{defaultValue:null,description:"",name:"padding",required:!1,type:{name:"enum",value:[{value:'"xs"'},{value:'"s"'},{value:'"m"'},{value:'"l"'},{value:'"xl"'},{value:'"2xs"'},{value:'"none"'},{value:'"3xs"'},{value:'"0"'},{value:'"1"'},{value:'"2"'},{value:'"4"'},{value:'"8"'},{value:'"12"'},{value:'"16"'},{value:'"20"'},{value:'"24"'},{value:'"32"'},{value:'"48"'},{value:'"64"'},{value:'"96"'},{value:'"160"'},{value:"[LayoutPadding, LayoutPadding]"},{value:"[LayoutPadding, LayoutPadding, LayoutPadding]"},{value:"[LayoutPadding, LayoutPadding, LayoutPadding, LayoutPadding]"},{value:"[Spacing, Spacing]"},{value:"[Spacing, Spacing, Spacing]"},{value:"[Spacing, Spacing, Spacing, Spacing]"},{value:"ResponsiveProp<ShortHand<LayoutPadding> | ShortHand<Spacing>>"}]}},columns:{defaultValue:null,description:"The `number` of columns, or a `string[]` of `grid-template-columns`.\n@see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns}",name:"columns",required:!1,type:{name:"enum",value:[{value:"number"},{value:"string[]"},{value:"ResponsiveProp<number | string[]>"}]}},justifyContent:{defaultValue:null,description:"",name:"justifyContent",required:!1,type:{name:"enum",value:[{value:'"center"'},{value:'"start"'},{value:'"end"'},{value:'"space-between"'},{value:'"space-around"'},{value:'"space-evenly"'},{value:"ResponsiveProp<LayoutJustifyContent>"}]}},alignItems:{defaultValue:null,description:"",name:"alignItems",required:!1,type:{name:"enum",value:[{value:'"center"'},{value:'"start"'},{value:'"end"'},{value:'"stretch"'},{value:'"baseline"'},{value:"ResponsiveProp<LayoutAlignItems>"}]}},justifyItems:{defaultValue:null,description:"",name:"justifyItems",required:!1,type:{name:"enum",value:[{value:'"center"'},{value:'"start"'},{value:'"end"'},{value:'"stretch"'},{value:"ResponsiveProp<LayoutJustifyItems>"}]}},tag:{defaultValue:null,description:"",name:"tag",required:!1,type:{name:"enum",value:[{value:'"p"'},{value:'"div"'},{value:'"span"'},{value:'"article"'},{value:'"caption"'},{value:'"fieldset"'},{value:'"figcaption"'},{value:'"figure"'},{value:'"footer"'},{value:'"header"'},{value:'"li"'},{value:'"main"'},{value:'"ol"'},{value:'"section"'},{value:'"table"'},{value:'"tbody"'},{value:'"td"'},{value:'"tfoot"'},{value:'"th"'},{value:'"thead"'},{value:'"tr"'},{value:'"ul"'}]}},hide:{defaultValue:null,description:"",name:"hide",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:"ResponsiveProp<boolean>"}]}},relative:{defaultValue:null,description:"",name:"relative",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:"ResponsiveProp<boolean>"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: HTMLElement | null) => void"},{value:"RefObject<HTMLElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}const K="LayoutGridItem__GF0yx",Q={LayoutGridItem:K},p=j.forwardRef(function({children:a,alignSelf:u,tag:t,hide:n,relative:i,dataset:s,...l},r){const o=_(Q,G.LayoutGridItem,[]),d=q(u),m=w(n),c=h(i),L=[...o,...d,...m,...c],A=t??b,T={...C(l),ref:r,className:L.join(" "),...N(s,{preplyDsComponent:G.LayoutGridItem})};return g.jsx(A,{...T,children:a})});try{p.displayName="LayoutGridItem",p.__docgenInfo={description:"",displayName:"LayoutGridItem",props:{alignSelf:{defaultValue:null,description:"",name:"alignSelf",required:!1,type:{name:"enum",value:[{value:'"center"'},{value:'"start"'},{value:'"end"'},{value:'"stretch"'},{value:"ResponsiveProp<LayoutAlignSelf>"}]}},tag:{defaultValue:null,description:"",name:"tag",required:!1,type:{name:"enum",value:[{value:'"p"'},{value:'"div"'},{value:'"span"'},{value:'"article"'},{value:'"caption"'},{value:'"fieldset"'},{value:'"figcaption"'},{value:'"figure"'},{value:'"footer"'},{value:'"header"'},{value:'"li"'},{value:'"main"'},{value:'"ol"'},{value:'"section"'},{value:'"table"'},{value:'"tbody"'},{value:'"td"'},{value:'"tfoot"'},{value:'"th"'},{value:'"thead"'},{value:'"tr"'},{value:'"ul"'}]}},hide:{defaultValue:null,description:"",name:"hide",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:"ResponsiveProp<boolean>"}]}},relative:{defaultValue:null,description:"",name:"relative",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:"ResponsiveProp<boolean>"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: HTMLElement | null) => void"},{value:"RefObject<HTMLElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}export{v as L,p as a};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import{j as e}from"./jsx-runtime-BYouaCF_.js";import{T as n}from"./Text-
|
|
1
|
+
import{j as e}from"./jsx-runtime-BYouaCF_.js";import{T as n}from"./Text-BmdJVr9v.js";import{r as k}from"./index-B3evPFBL.js";import{f as Q}from"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import{g as Z}from"./defaults-B1rzzf6M.js";import{u as ee}from"./useHostname-CH18gHFj.js";import{m as ae,s as x,b as f}from"./classNames-BUL1Zq7e.js";import{w as y}from"./componentNames-CpCJzpB9.js";import{a as ne,g as te}from"./index-DdzHuZ-Y.js";import{g as d}from"./getTokenVar-DU_DEzTd.js";import{c as u}from"./tokens-ZvFzTwDp.js";import"./text-accent-DZDDtpIt.js";import"./text-centered-CznToR0o.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./constants-BgBLeZzp.js";const re="Link__Jw0hc",ie={Link:re,"Link--inline":"Link--inline__aWJxC","Link--noUnderline":"Link--noUnderline__vuCBO","Link--variant-accentDark":"Link--variant-accentDark__5RCSd","Link--variant-accentDark--dsInternalSimulation-hover":"Link--variant-accentDark--dsInternalSimulation-hover__5vv1U","Link--variant-accentDark--dsInternalSimulation-active":"Link--variant-accentDark--dsInternalSimulation-active__-PYgd","Link--variant-accentDarkInverted":"Link--variant-accentDarkInverted__5GVfk","Link--variant-accentDarkInverted--dsInternalSimulation-hover":"Link--variant-accentDarkInverted--dsInternalSimulation-hover__u7g4B","Link--variant-accentDarkInverted--dsInternalSimulation-active":"Link--variant-accentDarkInverted--dsInternalSimulation-active__4bGgk","Link--variant-neutral":"Link--variant-neutral__v0PFp","Link--variant-neutral--dsInternalSimulation-hover":"Link--variant-neutral--dsInternalSimulation-hover__L-hBv","Link--variant-neutral--dsInternalSimulation-active":"Link--variant-neutral--dsInternalSimulation-active__5rs0z","Link--variant-neutralInverted":"Link--variant-neutralInverted__t9Ijl","Link--variant-neutralInverted--dsInternalSimulation-hover":"Link--variant-neutralInverted--dsInternalSimulation-hover__H50Xt","Link--variant-neutralInverted--dsInternalSimulation-active":"Link--variant-neutralInverted--dsInternalSimulation-active__Irr0h","Link--variant-unsetColors":"Link--variant-unsetColors__EEbF5","Link--variant-unsetColors--dsInternalSimulation-hover":"Link--variant-unsetColors--dsInternalSimulation-hover__vMIu6","Link--variant-unsetColors--dsInternalSimulation-active":"Link--variant-unsetColors--dsInternalSimulation-active__wlGTN"},a=k.forwardRef(function(E,P){const{variant:v=Z,href:R,download:A,opensInNewTab:H,nofollow:M,assistiveText:B,onClick:O,as:p,url:F,dataset:G,children:m,inline:J,dsInternalSimulation:z,noUnderline:W,...X}=E,$=ee(),K=ae(ie,y.Link,[x(`variant-${v}--dsInternalSimulation`,z),x("variant",v),f("inline",void 0,J),f("noUnderline",void 0,W)]),c=R||F,Y=c?ne($,c,H,M):{},h={...Q(X),ref:P,href:c,download:A,"aria-label":B,onClick:O,className:K.join(" "),...te(G,{preplyDsComponent:y.Link})};return p?k.cloneElement(p,{...h},m):e.jsx("a",{...h,...Y,children:m})});try{a.displayName="Link",a.__docgenInfo={description:`This is an inline element and will inherit font-size, line-height and
|
|
2
2
|
font-weight from the parent context. If you need to customise any of these
|
|
3
3
|
styles, all you have to do is wrap the <Link> in a Text or TextInline
|
|
4
|
-
component.`,displayName:"Link",props:{variant:{defaultValue:null,description:"",name:"variant",required:!1,type:{name:"enum",value:[{value:'"accentDark"'},{value:'"
|
|
4
|
+
component.`,displayName:"Link",props:{variant:{defaultValue:null,description:"",name:"variant",required:!1,type:{name:"enum",value:[{value:'"accentDark"'},{value:'"accentDarkInverted"'},{value:'"neutral"'},{value:'"neutralInverted"'},{value:'"unsetColors"'}]}},href:{defaultValue:null,description:"",name:"href",required:!1,type:{name:"enum",value:[{value:"string"}]}},download:{defaultValue:null,description:`When provided, instructs the browser to download the target (the file
|
|
5
5
|
specified in the href attribute) when a user clicks on the hyperlink,
|
|
6
6
|
rather than display it in the browser.`,name:"download",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},opensInNewTab:{defaultValue:null,description:"If `true`, forces internal link to open in a new tab.",name:"opensInNewTab",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},nofollow:{defaultValue:null,description:"",name:"nofollow",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},assistiveText:{defaultValue:null,description:"Provide an `aria-label` to the link.\nThis is useful if the link wraps non-textual elements, eg. an `img`.",name:"assistiveText",required:!1,type:{name:"enum",value:[{value:"string"}]}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<Element>"}]}},as:{defaultValue:null,description:"",name:"as",required:!1,type:{name:"enum",value:[{value:"ReactElement<any, string | JSXElementConstructor<any>>"}]}},url:{defaultValue:null,description:"@deprecated Use `href` instead",name:"url",required:!1,type:{name:"enum",value:[{value:"string"}]}},dataset:{defaultValue:null,description:`Sets data attributes on the DOM element.
|
|
7
7
|
@example <Avatar dataset={{ 'qa-id': 'user-avatar' }} /> // will add data-qa-id="user-avatar" to the HTML element`,name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},inline:{defaultValue:null,description:"If `true`, allows the link to wrap within text.",name:"inline",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},noUnderline:{defaultValue:null,description:"",name:"noUnderline",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: HTMLAnchorElement | null) => void"},{value:"RefObject<HTMLAnchorElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}const Le={title:"components/Link",component:a},r=()=>{const t=d(u.background.primaryInverted);return e.jsxs("div",{style:{display:"flex",gap:"16px"},children:[e.jsx(a,{href:"https://preply.com",variant:"neutral",children:"neutral"}),e.jsx("span",{style:{backgroundColor:t},children:e.jsx(a,{href:"https://preply.com",variant:"neutralInverted",children:"neutralInverted"})}),e.jsx(a,{href:"https://preply.com",variant:"accentDark",children:"accentDark"}),e.jsx("span",{style:{backgroundColor:t},children:e.jsx(a,{href:"https://preply.com",variant:"accentDarkInverted",children:"accentDarkInverted"})}),e.jsx(a,{href:"https://preply.com",variant:"unsetColors",children:"unsetColors"})]})},i=()=>{const t=d(u.background.primaryInverted);return e.jsxs("div",{style:{display:"flex",gap:"16px",flexDirection:"column"},children:[e.jsx(n,{variant:"default-regular-italic",children:"(use the `unsetColors` variant)"}),e.jsxs("div",{children:[e.jsx(n,{variant:"large-semibold-italic",children:"primary"}),e.jsx(n,{variant:"default-regular-italic",children:"normal"}),e.jsxs(n,{accent:"primary",children:["Lorem ipsum ",e.jsx(a,{variant:"unsetColors",children:"dolor sit amet"})," amet."]}),e.jsx(n,{variant:"default-regular-italic",children:"active"}),e.jsxs(n,{accent:"primary",children:["Lorem ipsum"," ",e.jsx(a,{variant:"unsetColors",dsInternalSimulation:"active",children:"dolor sit amet"})," ","amet."]})]}),e.jsxs("div",{style:{backgroundColor:t},children:[e.jsx(n,{variant:"large-semibold-italic",accent:"inverted",children:"inverted"}),e.jsx(n,{variant:"default-regular-italic",accent:"inverted",children:"normal"}),e.jsxs(n,{accent:"inverted",children:["Lorem ipsum ",e.jsx(a,{variant:"unsetColors",children:"dolor sit amet"})," amet."]}),e.jsx(n,{variant:"default-regular-italic",accent:"inverted",children:"active"}),e.jsxs(n,{accent:"inverted",children:["Lorem ipsum"," ",e.jsx(a,{variant:"unsetColors",dsInternalSimulation:"active",children:"dolor sit amet"})," ","amet."]})]}),e.jsxs("div",{children:[e.jsx(n,{variant:"large-semibold-italic",children:"positive"}),e.jsx(n,{variant:"default-regular-italic",children:"normal"}),e.jsxs(n,{accent:"positive",children:["Lorem ipsum ",e.jsx(a,{variant:"unsetColors",children:"dolor sit amet"})," amet."]}),e.jsx(n,{variant:"default-regular-italic",children:"active"}),e.jsxs(n,{accent:"positive",children:["Lorem ipsum"," ",e.jsx(a,{variant:"unsetColors",dsInternalSimulation:"active",children:"dolor sit amet"})," ","amet."]})]}),e.jsxs("div",{children:[e.jsx(n,{variant:"large-semibold-italic",children:"critical"}),e.jsx(n,{variant:"default-regular-italic",children:"normal"}),e.jsxs(n,{accent:"critical",children:["Lorem ipsum ",e.jsx(a,{variant:"unsetColors",children:"dolor sit amet"})," amet."]}),e.jsx(n,{variant:"default-regular-italic",children:"active"}),e.jsxs(n,{accent:"critical",children:["Lorem ipsum"," ",e.jsx(a,{variant:"unsetColors",dsInternalSimulation:"active",children:"dolor sit amet"})," ","amet."]})]})]})},l=()=>{const t=d(u.background.primaryInverted);return e.jsxs("div",{style:{display:"flex",gap:"16px",flexDirection:"column"},children:[e.jsx(n,{variant:"default-regular-italic",children:"normal"}),e.jsxs("div",{style:{display:"flex",gap:"16px"},children:[e.jsx(a,{href:"https://preply.com",variant:"neutral",children:"neutral"}),e.jsx("span",{style:{backgroundColor:t},children:e.jsx(a,{href:"https://preply.com",variant:"neutralInverted",children:"neutralInverted"})}),e.jsx(a,{href:"https://preply.com",variant:"accentDark",children:"accentDark"}),e.jsx("span",{style:{backgroundColor:t},children:e.jsx(a,{href:"https://preply.com",variant:"accentDarkInverted",children:"accentDarkInverted"})}),e.jsx(a,{href:"https://preply.com",variant:"unsetColors",children:"unsetColors"})]}),e.jsx(n,{variant:"default-regular-italic",children:"hover"}),e.jsxs("div",{style:{display:"flex",gap:"16px"},children:[e.jsx(a,{href:"https://preply.com",variant:"neutral",dsInternalSimulation:"hover",children:"neutral"}),e.jsx("span",{style:{backgroundColor:t},children:e.jsx(a,{href:"https://preply.com",variant:"neutralInverted",dsInternalSimulation:"hover",children:"neutralInverted"})}),e.jsx(a,{href:"https://preply.com",variant:"accentDark",dsInternalSimulation:"hover",children:"accentDark"}),e.jsx("span",{style:{backgroundColor:t},children:e.jsx(a,{href:"https://preply.com",variant:"accentDarkInverted",dsInternalSimulation:"hover",children:"accentDarkInverted"})}),e.jsx(a,{href:"https://preply.com",variant:"unsetColors",dsInternalSimulation:"hover",children:"unsetColors"})]}),e.jsx(n,{variant:"default-regular-italic",children:"active"}),e.jsxs("div",{style:{display:"flex",gap:"16px"},children:[e.jsx(a,{href:"https://preply.com",variant:"neutral",dsInternalSimulation:"active",children:"neutral"}),e.jsx("span",{style:{backgroundColor:t},children:e.jsx(a,{href:"https://preply.com",variant:"neutralInverted",dsInternalSimulation:"active",children:"neutralInverted"})}),e.jsx(a,{href:"https://preply.com",variant:"accentDark",dsInternalSimulation:"active",children:"accentDark"}),e.jsx("span",{style:{backgroundColor:t},children:e.jsx(a,{href:"https://preply.com",variant:"accentDarkInverted",dsInternalSimulation:"active",children:"accentDarkInverted"})}),e.jsx(a,{href:"https://preply.com",variant:"unsetColors",dsInternalSimulation:"active",children:"unsetColors"})]})]})},s=()=>e.jsxs("p",{style:{width:"12ch"},children:["Unlock your potential;"," ",e.jsx(a,{href:"https://preply.com",variant:"unsetColors",inline:!0,children:"visit Preply"}),"."]}),o={parameters:{chromatic:{disableSnapshot:!0}},args:{children:"Click me",href:"https://preply.com",variant:"neutral",dataset:{qaid:"link"}},argTypes:{dataset:{control:"object"},inline:{control:"boolean"},noUnderline:{control:"boolean"},opensInNewTab:{control:"boolean"},nofollow:{control:"boolean"},download:{control:"boolean"},assistiveText:{control:"text"},href:{control:"text"},url:{table:{disable:!0}}}};var g,L,I;r.parameters={...r.parameters,docs:{...(g=r.parameters)==null?void 0:g.docs,source:{originalSource:`() => {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import{j as u}from"./jsx-runtime-BYouaCF_.js";import{r as V}from"./index-B3evPFBL.js";import{F as g}from"./FormControl-CeIJk4_Z.js";import{w as H}from"./componentNames-CpCJzpB9.js";import{I as L}from"./Input-
|
|
2
|
-
If not provided, will be generated for accessibility purposes.`,name:"id",required:!1,type:{name:"enum",value:[{value:"string"}]}},
|
|
3
|
-
to provide more context or instructions to the user.`,name:"description",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},required:{defaultValue:null,description:`Indicates if the field is required. When false, adds a "Optional"
|
|
4
|
-
indicator next to the label.`,name:"required",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},
|
|
1
|
+
import{j as u}from"./jsx-runtime-BYouaCF_.js";import{r as V}from"./index-B3evPFBL.js";import{F as g}from"./FormControl-CeIJk4_Z.js";import{w as H}from"./componentNames-CpCJzpB9.js";import{I as L}from"./Input-C1hZX5_o.js";const t=V.forwardRef(function({id:i,label:d,description:s,error:o,required:m,inputDataset:p,dataset:v,hideLabel:f,onClick:c,onValueChange:e,onChange:a,hasError:y,useLegacyRequiredLabel:b,className:I,style:R,...h},q){const E=l=>{a==null||a(l);const n=l.target.value;e==null||e(n?Number(n):void 0)};return u.jsx(g,{id:i,label:d,description:s,error:o,hasError:y,required:m,dataset:v,hideLabel:f,onClick:c,useLegacyRequiredLabel:b,preplyDsComponent:H.NumberField,children:u.jsx(L,{...h,type:"number",ref:q,dataset:p,onChange:E})})});try{t.displayName="NumberField",t.__docgenInfo={description:"",displayName:"NumberField",props:{id:{defaultValue:null,description:`The id to be passed to the input element.
|
|
2
|
+
If not provided, will be generated for accessibility purposes.`,name:"id",required:!1,type:{name:"enum",value:[{value:"string"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLDivElement> & MouseEventHandler<HTMLInputElement>"}]}},error:{defaultValue:null,description:"Error message to display when the field has an invalid value.",name:"error",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},label:{defaultValue:null,description:"The field label. This is needed for accessibility purposes, but can be\nhidden using the `hideLabel` prop.",name:"label",required:!0,type:{name:"enum",value:[{value:"undefined"},{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},description:{defaultValue:null,description:`Additional descriptive text that appears below the input field
|
|
3
|
+
to provide more context or instructions to the user.`,name:"description",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},hideLabel:{defaultValue:null,description:"Use this to hide the `label` visually, but keep it in the accessibility\ntree.",name:"hideLabel",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},hasError:{defaultValue:null,description:"Whether the field has an error.\n@deprecated Use `error` prop to exlicitly describe the error to users",name:"hasError",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},required:{defaultValue:null,description:`Indicates if the field is required. When false, adds a "Optional"
|
|
4
|
+
indicator next to the label.`,name:"required",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},useLegacyRequiredLabel:{defaultValue:null,description:`When true, adds a "Required" indicator next to the label for the required fields.
|
|
5
5
|
When false, adds a "Optional" indicator next to the label for the optional fields instead.
|
|
6
|
-
@deprecated This is a temporary solution for gradual migration to the "Optional" label.`,name:"useLegacyRequiredLabel",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},
|
|
6
|
+
@deprecated This is a temporary solution for gradual migration to the "Optional" label.`,name:"useLegacyRequiredLabel",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},name:{defaultValue:null,description:"",name:"name",required:!1,type:{name:"enum",value:[{value:"string"}]}},placeholder:{defaultValue:null,description:"",name:"placeholder",required:!1,type:{name:"enum",value:[{value:"string"}]}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},button:{defaultValue:null,description:"",name:"button",required:!1,type:{name:"enum",value:[{value:"ReactElement<any, string | JSXElementConstructor<any>>"}]}},onCopy:{defaultValue:null,description:"",name:"onCopy",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLInputElement>"}]}},onCut:{defaultValue:null,description:"",name:"onCut",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLInputElement>"}]}},onPaste:{defaultValue:null,description:"",name:"onPaste",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLInputElement>"}]}},onFocus:{defaultValue:null,description:"",name:"onFocus",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<HTMLInputElement>"}]}},onBlur:{defaultValue:null,description:"",name:"onBlur",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<HTMLInputElement>"}]}},onChange:{defaultValue:null,description:"",name:"onChange",required:!1,type:{name:"enum",value:[{value:"ChangeEventHandler<HTMLInputElement>"}]}},onKeyDown:{defaultValue:null,description:"",name:"onKeyDown",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<HTMLInputElement>"}]}},onKeyUp:{defaultValue:null,description:"",name:"onKeyUp",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<HTMLInputElement>"}]}},icon:{defaultValue:null,description:"",name:"icon",required:!1,type:{name:"enum",value:[{value:"ReactElement<any, string | JSXElementConstructor<any>>"}]}},readOnly:{defaultValue:null,description:"",name:"readOnly",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},maxLength:{defaultValue:null,description:"",name:"maxLength",required:!1,type:{name:"enum",value:[{value:"number"}]}},value:{defaultValue:null,description:"",name:"value",required:!1,type:{name:"enum",value:[{value:"number"}]}},defaultValue:{defaultValue:null,description:"",name:"defaultValue",required:!1,type:{name:"enum",value:[{value:"number"}]}},onValueChange:{defaultValue:null,description:"",name:"onValueChange",required:!1,type:{name:"enum",value:[{value:"(value: number | undefined) => void"}]}},min:{defaultValue:null,description:"",name:"min",required:!1,type:{name:"enum",value:[{value:"number"}]}},max:{defaultValue:null,description:"",name:"max",required:!1,type:{name:"enum",value:[{value:"number"}]}},step:{defaultValue:null,description:"",name:"step",required:!1,type:{name:"enum",value:[{value:"number"}]}},inputDataset:{defaultValue:null,description:"",name:"inputDataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: HTMLInputElement | null) => void"},{value:"RefObject<HTMLInputElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}export{t as N};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as g}from"./jsx-runtime-BYouaCF_.js";import{r as re}from"./index-B3evPFBL.js";import{a as se}from"./chunk-D5ZWXAHU-BhFjjRSl.js";import{f as r,w as x,e as n,u as w}from"./index-DDyIDR-R.js";import{F as te}from"./TokyoUIPhone-BHLDT6dz.js";import{F as ie}from"./TokyoUIAttach-BvBvQVx_.js";import{I as ne}from"./Icon-
|
|
1
|
+
import{j as g}from"./jsx-runtime-BYouaCF_.js";import{r as re}from"./index-B3evPFBL.js";import{a as se}from"./chunk-D5ZWXAHU-BhFjjRSl.js";import{f as r,w as x,e as n,u as w}from"./index-DDyIDR-R.js";import{F as te}from"./TokyoUIPhone-BHLDT6dz.js";import{F as ie}from"./TokyoUIAttach-BvBvQVx_.js";import{I as ne}from"./Icon-ZIxauYsE.js";import{N as ae}from"./NumberField-D6cbX2hK.js";import{F as ce}from"./FieldButton-Bsa9_rJB.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./v4-CtRu48qb.js";import"./text-accent-DZDDtpIt.js";import"./classNames-BUL1Zq7e.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-CVTdrNe-.js";import"./componentNames-CpCJzpB9.js";import"./index-DdzHuZ-Y.js";import"./defaults-B1rzzf6M.js";import"./FormControl-CeIJk4_Z.js";import"./index-DRKYGVyc.js";import"./index-BfBdt3zW.js";import"./tslib.es6-BntfKcQG.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./message-BraTJ16C.js";import"./Input-C1hZX5_o.js";import"./InputContainer-Bk0tgFnW.js";const je={title:"components/NumberField",component:ae,args:{name:"number",label:"Number",defaultValue:void 0,placeholder:"Enter a number",dataset:{testid:"field",foo:"bar"},inputDataset:{testid:"input",foo:"bar"},onChange:r(),onValueChange:r(),onBlur:r(),onFocus:r(),onClick:r(),onCopy:r(),onKeyDown:r(),onKeyUp:r(),onPaste:r()}},c={play:async({canvasElement:a,step:e,args:t})=>{const o=x(a),i=o.getByTestId("field"),s=o.getByTestId("input");await e("it should render correct label",async()=>{const oe=x(i).getByTestId("label");n(oe).toHaveTextContent("Number • Optional"),n(s).toHaveAccessibleName("Number")}),await e("it should call onFocus when the input is focused",async()=>{s.focus(),n(t.onFocus).toHaveBeenCalled()}),await e("it should call callback when the value changes",async()=>{await w.type(s,"42"),n(t.onValueChange).toHaveBeenCalledWith(42),n(t.onChange).toHaveBeenCalled()}),await e("it should call onBlur when the input is blurred",async()=>{await w.keyboard("{tab}"),n(t.onBlur).toHaveBeenCalled()}),await e("it should render the dataset props",async()=>{n(i).toHaveAttribute("data-testid","field"),n(i).toHaveAttribute("data-foo","bar"),n(s).toHaveAttribute("data-testid","input"),n(s).toHaveAttribute("data-foo","bar")})}},l={render:function(e){const[t,o]=re.useState(e.value);return g.jsx(ae,{...e,value:t,onChange:i=>{var s;o(Number(i.target.value)),(s=e.onChange)==null||s.call(e,i)}})},args:{label:"Controlled NumberField",placeholder:"Enter a number...",value:42},play:async({canvas:a,step:e})=>{await e("it should render the correct initial value",async()=>{const t=a.getByTestId("input");await n(t).toHaveValue(42)}),await e("it should update the value when the user types",async()=>{const t=a.getByTestId("input");await w.clear(t),await w.type(t,"100"),n(t).toHaveValue(100)})}},u={args:{icon:g.jsx(ne,{svg:te,dataset:{testid:"icon"}})},play:async({canvas:a,step:e})=>{await e("it should render the icon",async()=>{const t=a.getByTestId("icon");n(t).toBeInTheDocument()})}},d={args:{description:"Enter a valid number"},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input"),o=a.getByTestId("description");await e("it should render the description",async()=>{n(t).toHaveAccessibleDescription("Enter a valid number"),n(o).toHaveTextContent("Enter a valid number")})}},p={args:{required:!0},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input"),o=a.getByTestId("label");await e("it should render correct label",async()=>{n(t).toHaveAccessibleName("Number"),n(o).toHaveTextContent("Number")}),await e("it should render required attribute",async()=>{n(t).toHaveAttribute("required")})}},m={args:{hideLabel:!0},play:async({canvas:a,step:e})=>{await e("it should render correct a11y label",async()=>{const t=a.getByTestId("input");n(t).toHaveAccessibleName("Number")})}},b={args:{error:"This is an error message"},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input"),o=a.getByTestId("error");await e("it should render the error message",async()=>{n(t).toHaveAccessibleErrorMessage("This is an error message"),n(o).toHaveTextContent("This is an error message")})}},h={args:{disabled:!0},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input");await e("it should render the disabled input",async()=>{n(t).toHaveAttribute("disabled")})}},y={args:{readOnly:!0},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input");await e("it should render the read only input",async()=>{n(t).toHaveAttribute("readonly")})}},v={parameters:{chromatic:{disableSnapshot:!0}},args:{label:"Number of lessons",placeholder:"How about 3?",description:"These lessons will be scheduled automatically"},argTypes:{label:{control:"text"},placeholder:{control:"text"},description:{control:"text"},error:{control:"text"},value:{control:"number"},defaultValue:{control:"number"},inputDataset:{control:"object"},dataset:{control:"object"},id:{control:"text"},required:{control:"boolean"},hideLabel:{control:"boolean"},name:{control:"text"},disabled:{control:"boolean"},readOnly:{control:"boolean"},min:{control:"number"},max:{control:"number"},step:{control:"number"},icon:{options:["None","With Icon"],mapping:{None:void 0,"With Icon":g.jsx(ne,{svg:te})},control:"select"},button:{options:["None","With Button"],mapping:{None:void 0,"With Button":g.jsx(ce,{svg:ie,assistiveText:"Do the thing",onClick:se("field button clicked")})},control:"select"},maxLength:{control:"number"},hasError:{table:{disable:!0}}}};var B,T,H,f,I;c.parameters={...c.parameters,docs:{...(B=c.parameters)==null?void 0:B.docs,source:{originalSource:`{
|
|
2
2
|
play: async ({
|
|
3
3
|
canvasElement,
|
|
4
4
|
step,
|
|
@@ -5,4 +5,4 @@ Triggers a callback when the wrapped component intersects with the viewport.
|
|
|
5
5
|
This can be useful in several use cases. Examples:
|
|
6
6
|
|
|
7
7
|
- Track an experiment, once a certain component scrolls into view.
|
|
8
|
-
- Trigger an animation, or a feature (e.g.: onboarding instructions).`,displayName:"ObserveIntersection",props:{onIntersect:{defaultValue:null,description:"",name:"onIntersect",required:!0,type:{name:"() => void"}},once:{defaultValue:null,description:"",name:"once",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},threshold:{defaultValue:null,description:"",name:"threshold",required:!1,type:{name:"enum",value:[{value:"number"}]}},tag:{defaultValue:null,description:"",name:"tag",required:!1,type:{name:"enum",value:[{value:'"p"'},{value:'"div"'},{value:'"span"'},{value:'"
|
|
8
|
+
- Trigger an animation, or a feature (e.g.: onboarding instructions).`,displayName:"ObserveIntersection",props:{onIntersect:{defaultValue:null,description:"",name:"onIntersect",required:!0,type:{name:"() => void"}},once:{defaultValue:null,description:"",name:"once",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},threshold:{defaultValue:null,description:"",name:"threshold",required:!1,type:{name:"enum",value:[{value:"number"}]}},tag:{defaultValue:null,description:"",name:"tag",required:!1,type:{name:"enum",value:[{value:'"p"'},{value:'"div"'},{value:'"span"'},{value:'"article"'},{value:'"caption"'},{value:'"fieldset"'},{value:'"figcaption"'},{value:'"figure"'},{value:'"footer"'},{value:'"header"'},{value:'"li"'},{value:'"main"'},{value:'"ol"'},{value:'"section"'},{value:'"table"'},{value:'"tbody"'},{value:'"td"'},{value:'"tfoot"'},{value:'"th"'},{value:'"thead"'},{value:'"tr"'},{value:'"ul"'}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}}}}}catch{}export{o as O};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as t}from"./jsx-runtime-BYouaCF_.js";import{r as a}from"./index-B3evPFBL.js";import{O as i}from"./ObserveIntersection-
|
|
1
|
+
import{j as t}from"./jsx-runtime-BYouaCF_.js";import{r as a}from"./index-B3evPFBL.js";import{O as i}from"./ObserveIntersection-DsqqXq5n.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-DdzHuZ-Y.js";import"./defaults-B1rzzf6M.js";import"./componentNames-CpCJzpB9.js";const h={title:"components/ObserveIntersection",component:i,parameters:{tags:["!test"],chromatic:{disableSnapshot:!0}}},e=()=>{const[o,c]=a.useState(!1);return t.jsxs("div",{tabIndex:0,style:{height:"200px",overflowY:"scroll",position:"relative"},children:[t.jsx("div",{style:{position:"sticky",top:"2px"},children:o?"Intersected":"Scroll down to intersect"}),t.jsx("div",{style:{height:"400px",display:"flex",alignItems:"end"},children:t.jsx(i,{onIntersect:()=>c(!0),children:"Observer"})})]})};e.storyName="ObserveIntersection";var s,n,r;e.parameters={...e.parameters,docs:{...(s=e.parameters)==null?void 0:s.docs,source:{originalSource:`() => {
|
|
2
2
|
const [isIntersecting, setIsIntersecting] = useState(false);
|
|
3
3
|
return (
|
|
4
4
|
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- This element is interactive; it's scrollable.
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as t}from"./jsx-runtime-BYouaCF_.js";import{r as n}from"./index-B3evPFBL.js";import{R as _,A as q,P as x,C as O,a as N,b as E}from"./index-jPlWeKki.js";import{F as k}from"./TokyoUIClose-DFIfVIfy.js";import{I as P}from"./Icon-
|
|
1
|
+
import{j as t}from"./jsx-runtime-BYouaCF_.js";import{r as n}from"./index-B3evPFBL.js";import{R as _,A as q,P as x,C as O,a as N,b as E}from"./index-jPlWeKki.js";import{F as k}from"./TokyoUIClose-DFIfVIfy.js";import{I as P}from"./Icon-ZIxauYsE.js";import{T as j}from"./Text-BmdJVr9v.js";import{B as D}from"./Button-BSyqsKC5.js";import{H as T}from"./Heading-ese4_5Hg.js";import{u as S}from"./index-BfBdt3zW.js";import{g as L}from"./shared-strings-CcWGHelY.js";import{g as M}from"./PortalElementProvider-D4ltrA8j.js";import{g as H}from"./index-DdzHuZ-Y.js";import{w as X}from"./componentNames-CpCJzpB9.js";import{M as J}from"./message-BraTJ16C.js";const B="content__KHgp9",F="header__CaLti",U="close__3s-VD",A="footer__X5qXF",G="arrow__0pg-s",o={content:B,header:F,close:U,footer:A,arrow:G},z=e=>{e.scrollIntoViewIfNeeded?e.scrollIntoViewIfNeeded(!1):e.scrollIntoView({behavior:"auto",block:"nearest",inline:"nearest"})},m=({open:e,onOpenChange:i,disabled:r,title:u,text:s,children:a,side:l,dataset:h,actionLabel:g=t.jsx(J,{id:"preply-ds.onboardingTooltip.actionLabel",defaultMessage:"Got it",description:"Default onboarding tooltip action label. Used to acknowledge and close the tooltip."}),actionOnClick:b,actionHref:y,counter:C,autoScroll:v=!0})=>{const{formatMessage:I}=S(),w=M(),f=n.useId(),V=n.useId(),d=n.useId(),c=n.useRef(null);return n.useEffect(()=>{e&&c.current&&v&&z(c.current)},[v,e]),r?a:t.jsxs(_,{open:e,onOpenChange:i,children:[t.jsx(q,{ref:c,id:d,asChild:!0,children:a}),t.jsx(x,{container:w,children:t.jsxs(O,{onInteractOutside:R=>{R.preventDefault()},side:l,className:o.content,"aria-labelledby":f,"aria-describedby":`${d} ${V}`,...H(h,{preplyDsComponent:X.OnboardingTooltip}),children:[t.jsxs("div",{className:o.header,children:[t.jsx(N,{className:o.close,"aria-label":I(L.close),"data-testid":"close",children:t.jsx(P,{accent:"inverted",svg:k})}),t.jsx(T,{tag:"h1",variant:"small",accent:"inverted",id:f,"aria-describedby":d,children:u})]}),t.jsx(j,{variant:"default-regular",accent:"inverted",children:s}),t.jsxs("div",{className:o.footer,children:[C,t.jsx(D,{variant:"inverted",size:"small",onClick:b,href:y,dataset:{testid:"action"},wrap:!0,children:g})]}),t.jsx(E,{"aria-hidden":!0,className:o.arrow,width:18,height:11})]})})]})},p=e=>{const[i,r]=n.useState(!0),u=a=>{var l;a||(l=e.onClose)==null||l.call(e),r(a)},s=()=>{var a,l;(a=e.actionOnClick)==null||a.call(e),r(!1),(l=e.onClose)==null||l.call(e)};return t.jsx(m,{...e,open:i,onOpenChange:u,actionOnClick:s})};try{m.displayName="InternalOnboardingTooltip",m.__docgenInfo={description:"",displayName:"InternalOnboardingTooltip",props:{title:{defaultValue:null,description:"",name:"title",required:!0,type:{name:"enum",value:[{value:"undefined"},{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},text:{defaultValue:null,description:"",name:"text",required:!0,type:{name:"enum",value:[{value:"undefined"},{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},disabled:{defaultValue:null,description:"Disables tooltip completely",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},onClose:{defaultValue:null,description:"Called when the tooltip is closed",name:"onClose",required:!1,type:{name:"enum",value:[{value:"() => void"}]}},actionLabel:{defaultValue:{value:`(
|
|
2
2
|
<FormattedMessage
|
|
3
3
|
id="preply-ds.onboardingTooltip.actionLabel"
|
|
4
4
|
defaultMessage="Got it"
|
package/dist/assets/{OnboardingTooltip.stories-BL04HmvH.js → OnboardingTooltip.stories-BGQM-hLj.js}
RENAMED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as e}from"./jsx-runtime-BYouaCF_.js";import{O as u}from"./OnboardingTooltip-
|
|
1
|
+
import{j as e}from"./jsx-runtime-BYouaCF_.js";import{O as u}from"./OnboardingTooltip-DVNAQjDc.js";import{I as g}from"./IconButton-BqwVuKH2.js";import{F as x}from"./TokyoUIFav-DGbkVriC.js";import"./index-B3evPFBL.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-jPlWeKki.js";import"./PortalElementProvider-D4ltrA8j.js";import"./index-DRKYGVyc.js";import"./index-jEDObK_5.js";import"./index-C66nt8TK.js";import"./Combination-CCYtWL8C.js";import"./tslib.es6-BntfKcQG.js";import"./index-DbgDZDus.js";import"./TokyoUIClose-DFIfVIfy.js";import"./Icon-ZIxauYsE.js";import"./text-accent-DZDDtpIt.js";import"./classNames-BUL1Zq7e.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-CVTdrNe-.js";import"./componentNames-CpCJzpB9.js";import"./index-DdzHuZ-Y.js";import"./defaults-B1rzzf6M.js";import"./Text-BmdJVr9v.js";import"./text-centered-CznToR0o.js";import"./Button-BSyqsKC5.js";import"./ButtonBase-Bdtn25V2.js";import"./Spinner-BCTJunNM.js";import"./useMergeRefs-CeyIhNgY.js";import"./useHostname-CH18gHFj.js";import"./index-CC6DAVyL.js";import"./Heading-ese4_5Hg.js";import"./index-BfBdt3zW.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./shared-strings-CcWGHelY.js";import"./message-BraTJ16C.js";const te={title:"Components/OnboardingTooltip",component:u,parameters:{docs:{story:{inline:!1,height:250},description:{component:"Are you looking for a step-by-step tour? Check out [OnboardingTour](/docs/components-onboardingtour--docs)"}},a11y:{config:{rules:[{id:"color-contrast",enabled:!1}]}}},decorators:[t=>e.jsx("div",{style:{margin:"auto",width:"max-content"},children:t()})]},f=t=>[!1,!1],h=t=>a=>{},o=()=>{const[t,a]=f(),v=h();return e.jsx(u,{title:"New Feature Available!",text:"We've added an exciting new feature to enhance your experience.",disabled:a||t,onClose:()=>v(!0),children:e.jsx(g,{variant:"ghost",svg:e.jsx(x,{}),assistiveText:"Favorite"})})};o.storyName="OnboardingTooltip";const r={tags:["!autodocs"],args:{title:"New Feature Available!",text:"We've added an exciting new feature to enhance your experience.",disabled:!1,onClose:()=>{},children:e.jsx(g,{variant:"ghost",svg:e.jsx(x,{}),assistiveText:"Favorite"})},argTypes:{title:{control:"text"},text:{control:"text"},actionLabel:{control:"text"},actionOnClick:{control:!1},actionHref:{control:"text"},disabled:{control:"boolean"},dataset:{control:"object"},onClose:{control:!1},children:{control:!1}},parameters:{docs:{story:{height:450}},chromatic:{disableSnapshot:!0}},decorators:[t=>e.jsx("div",{style:{minHeight:"100vh",display:"flex"},children:e.jsx("div",{style:{margin:"auto",width:"max-content"},children:t()})})]};var i,n,s,l,c;o.parameters={...o.parameters,docs:{...(i=o.parameters)==null?void 0:i.docs,source:{originalSource:`() => {
|
|
2
2
|
const [wasTooltipSeen, loading] = useIsFeatureActive('new-feature');
|
|
3
3
|
const setTooltipSeen = useToggleFeature('new-feature');
|
|
4
4
|
return <OnboardingTooltip title="New Feature Available!" text="We've added an exciting new feature to enhance your experience." disabled={loading || wasTooltipSeen} onClose={() => setTooltipSeen(true)}>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as a}from"./jsx-runtime-BYouaCF_.js";import{O as x}from"./OnboardingTooltip-
|
|
1
|
+
import{j as a}from"./jsx-runtime-BYouaCF_.js";import{O as x}from"./OnboardingTooltip-DVNAQjDc.js";import{I}from"./IconButton-BqwVuKH2.js";import{F as f}from"./TokyoUIFav-DGbkVriC.js";import{w as s,a as r,e as n,u as d}from"./index-DDyIDR-R.js";import{B as k}from"./Button-BSyqsKC5.js";import{L as F}from"./LayoutFlex-BBGvSVMb.js";import"./index-B3evPFBL.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-jPlWeKki.js";import"./PortalElementProvider-D4ltrA8j.js";import"./index-DRKYGVyc.js";import"./index-jEDObK_5.js";import"./index-C66nt8TK.js";import"./Combination-CCYtWL8C.js";import"./tslib.es6-BntfKcQG.js";import"./index-DbgDZDus.js";import"./TokyoUIClose-DFIfVIfy.js";import"./Icon-ZIxauYsE.js";import"./text-accent-DZDDtpIt.js";import"./classNames-BUL1Zq7e.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-CVTdrNe-.js";import"./componentNames-CpCJzpB9.js";import"./index-DdzHuZ-Y.js";import"./defaults-B1rzzf6M.js";import"./Text-BmdJVr9v.js";import"./text-centered-CznToR0o.js";import"./Heading-ese4_5Hg.js";import"./index-BfBdt3zW.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./shared-strings-CcWGHelY.js";import"./message-BraTJ16C.js";import"./ButtonBase-Bdtn25V2.js";import"./Spinner-BCTJunNM.js";import"./useMergeRefs-CeyIhNgY.js";import"./useHostname-CH18gHFj.js";import"./index-CC6DAVyL.js";import"./layout-relative.module-ed9bC4H4.js";const mt={title:"Components/OnboardingTooltip/Tests",component:x,parameters:{layout:"centered",controls:{disable:!0},chromatic:{disableSnapshot:!0}},tags:["!autodocs","!a11y-test","test"],decorators:[e=>a.jsx("div",{style:{margin:"100px 0"},children:e()})],args:{title:"Title",text:"Body text",actionLabel:"Action label",disabled:!1,onClose:()=>{},dataset:{testid:"tooltip"},children:a.jsx(I,{svg:a.jsx(f,{}),assistiveText:"Favorite"})}},c={play:async({canvasElement:e,step:o})=>{const i=s(e);await o("wait for tooltip to be visible",async()=>{await r(()=>{const t=i.getByTestId("tooltip");return n(t).toBeVisible()})}),await o("close the tooltip",()=>{const u=s(i.getByTestId("tooltip")).getByTestId("close");return d.click(u)}),await o("wait for tooltip to be hidden",async()=>{await r(()=>{const t=i.queryByTestId("tooltip");return n(t).toBeNull()})})}},l={play:async({canvasElement:e,step:o})=>{const i=s(e);await o("wait for tooltip to be visible",async()=>{await r(()=>{const t=i.getByTestId("tooltip");return n(t).toBeVisible()})}),await o("close the tooltip",()=>{const u=s(i.getByTestId("tooltip")).getByTestId("action");return d.click(u)}),await o("wait for tooltip to be hidden",async()=>{await r(()=>{const t=i.queryByTestId("tooltip");return n(t).toBeNull()})})}};function E(e){return new Promise(o=>setTimeout(o,e))}const p={render:e=>a.jsxs(F,{gap:"24",direction:"column",children:[a.jsx(k,{children:"Click outside the tooltip"}),a.jsx(x,{...e,children:a.jsx(I,{svg:a.jsx(f,{}),assistiveText:"Favorite"})})]}),play:async({canvasElement:e,step:o})=>{const i=s(e);await o("wait for tooltip to be visible",async()=>{await r(()=>{const t=i.getByTestId("tooltip");return n(t).toBeVisible()})}),await o("click outside the tooltip",()=>{const t=i.getByText("Click outside the tooltip");return d.click(t)}),await o("check the tooltip remain open",async()=>{await E(1e3);const t=i.getByTestId("tooltip");return n(t).toBeVisible()})}};var m,y,w;c.parameters={...c.parameters,docs:{...(m=c.parameters)==null?void 0:m.docs,source:{originalSource:`{
|
|
2
2
|
play: async ({
|
|
3
3
|
canvasElement,
|
|
4
4
|
step
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as o}from"./jsx-runtime-BYouaCF_.js";import{r as l}from"./index-B3evPFBL.js";import{I as A}from"./OnboardingTooltip-
|
|
1
|
+
import{j as o}from"./jsx-runtime-BYouaCF_.js";import{r as l}from"./index-B3evPFBL.js";import{I as A}from"./OnboardingTooltip-DVNAQjDc.js";import"./index-BfBdt3zW.js";import{M as f}from"./message-BraTJ16C.js";const T="counter__ArBS-",j={counter:T},v=({totalSteps:n,nextActionLabel:e=o.jsx(f,{id:"preply-ds.onboardingTour.nextActionLabel",defaultMessage:"Next",description:"Onboarding tour next action label"}),completeActionLabel:a=o.jsx(f,{id:"preply-ds.onboardingTour.completeActionLabel",defaultMessage:"Got it",description:"Onboarding tour complete action label"}),onClose:t,onComplete:r,onStepChange:i,disabled:s,children:p,ctx:x})=>{const[b,u]=l.useState(!0),[d,g]=l.useState(0),c={totalSteps:n,nextActionLabel:e,completeActionLabel:a,onClose:()=>{u(!1),t==null||t()},active:!s&&b,currentStep:d,onActionClick:()=>{if(d===n-1)r==null||r(),u(!1);else{const h=d+1;g(h),i==null||i(h)}}};return o.jsx(x.Provider,{value:c,children:p})},_=({ctx:n,...e})=>{const a=l.useContext(n);if(!a)throw new Error("OnboardingTourContext not found");const{currentStep:t,totalSteps:r,onActionClick:i,onClose:s,active:p,nextActionLabel:x,completeActionLabel:b}=a,u=e.step===r-1,d=e.step===t,g=u?b:x,m=()=>{var c;(c=e.actionOnClick)==null||c.call(e),i()},O=c=>{c||s==null||s()};return o.jsx(A,{...e,counter:o.jsx("p",{className:j.counter,children:o.jsx(f,{id:"preply-ds.onboardingTour.counter",defaultMessage:"{currentStep} of {totalSteps}",description:"Onboarding tour step counter, e.g. '1 of 3'",values:{currentStep:t+1,totalSteps:r}})}),open:p&&d,onOpenChange:O,actionLabel:g,actionOnClick:m})},S=()=>{const n=l.createContext(null);return{Provider:t=>o.jsx(v,{...t,ctx:n}),Step:t=>o.jsx(_,{...t,ctx:n})}};try{S.displayName="createOnboardingTour",S.__docgenInfo={description:`Creates a new onboarding tour.
|
|
2
2
|
|
|
3
3
|
This factory pattern allows multiple independent tours to be nested within each other
|
|
4
4
|
without context conflicts, as each tour maintains its own separate context and state.`,displayName:"createOnboardingTour",props:{}}}catch{}export{S as c};
|
package/dist/assets/{OnboardingTour.stories-BZLufj9V.js → OnboardingTour.stories-D0ScuFD6.js}
RENAMED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as e}from"./jsx-runtime-BYouaCF_.js";import{r as b}from"./index-B3evPFBL.js";import{c as x}from"./OnboardingTour-
|
|
1
|
+
import{j as e}from"./jsx-runtime-BYouaCF_.js";import{r as b}from"./index-B3evPFBL.js";import{c as x}from"./OnboardingTour-DdV7TN6M.js";import{T as n}from"./Text-BmdJVr9v.js";import{L as y}from"./LayoutFlex-BBGvSVMb.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./OnboardingTooltip-DVNAQjDc.js";import"./index-jPlWeKki.js";import"./PortalElementProvider-D4ltrA8j.js";import"./index-DRKYGVyc.js";import"./index-jEDObK_5.js";import"./index-C66nt8TK.js";import"./Combination-CCYtWL8C.js";import"./tslib.es6-BntfKcQG.js";import"./index-DbgDZDus.js";import"./TokyoUIClose-DFIfVIfy.js";import"./Icon-ZIxauYsE.js";import"./text-accent-DZDDtpIt.js";import"./classNames-BUL1Zq7e.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-CVTdrNe-.js";import"./componentNames-CpCJzpB9.js";import"./index-DdzHuZ-Y.js";import"./defaults-B1rzzf6M.js";import"./Button-BSyqsKC5.js";import"./ButtonBase-Bdtn25V2.js";import"./Spinner-BCTJunNM.js";import"./useMergeRefs-CeyIhNgY.js";import"./useHostname-CH18gHFj.js";import"./index-CC6DAVyL.js";import"./Heading-ese4_5Hg.js";import"./text-centered-CznToR0o.js";import"./index-BfBdt3zW.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./shared-strings-CcWGHelY.js";import"./message-BraTJ16C.js";import"./layout-relative.module-ed9bC4H4.js";const l=t=>null,s=t=>null;try{l.displayName="OnboardingTourProvider",l.__docgenInfo={description:`For some reason, storybook fails to render arg tables for the components
|
|
2
2
|
when they're created with the \`createOnboardingTour\` function.
|
|
3
3
|
|
|
4
4
|
As a workaround, we're manually defining fake components with the same
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as e}from"./jsx-runtime-BYouaCF_.js";import{r as h}from"./index-B3evPFBL.js";import{c as I}from"./OnboardingTour-
|
|
1
|
+
import{j as e}from"./jsx-runtime-BYouaCF_.js";import{r as h}from"./index-B3evPFBL.js";import{c as I}from"./OnboardingTour-DdV7TN6M.js";import{T as u}from"./Text-BmdJVr9v.js";import{B as m}from"./Button-BSyqsKC5.js";import{f as v,w as p,a as c,e as n,u as l}from"./index-DDyIDR-R.js";import{L as C}from"./LayoutFlex-BBGvSVMb.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./OnboardingTooltip-DVNAQjDc.js";import"./index-jPlWeKki.js";import"./PortalElementProvider-D4ltrA8j.js";import"./index-DRKYGVyc.js";import"./index-jEDObK_5.js";import"./index-C66nt8TK.js";import"./Combination-CCYtWL8C.js";import"./tslib.es6-BntfKcQG.js";import"./index-DbgDZDus.js";import"./TokyoUIClose-DFIfVIfy.js";import"./Icon-ZIxauYsE.js";import"./text-accent-DZDDtpIt.js";import"./classNames-BUL1Zq7e.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-CVTdrNe-.js";import"./componentNames-CpCJzpB9.js";import"./index-DdzHuZ-Y.js";import"./defaults-B1rzzf6M.js";import"./Heading-ese4_5Hg.js";import"./text-centered-CznToR0o.js";import"./index-BfBdt3zW.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./shared-strings-CcWGHelY.js";import"./message-BraTJ16C.js";import"./ButtonBase-Bdtn25V2.js";import"./Spinner-BCTJunNM.js";import"./useMergeRefs-CeyIhNgY.js";import"./useHostname-CH18gHFj.js";import"./index-CC6DAVyL.js";import"./layout-relative.module-ed9bC4H4.js";const d=I(),kt={title:"Components/OnboardingTour/Tests",parameters:{layout:"centered",controls:{disable:!0},chromatic:{disableSnapshot:!0}},tags:["!autodocs","!a11y-test","test"],decorators:[i=>e.jsx("div",{style:{margin:"100px 0"},children:i()})],args:{onComplete:v(),onClose:v(),onStepChange:v()}},y={render:({onComplete:i,onStepChange:s})=>e.jsx(d.Provider,{totalSteps:3,nextActionLabel:"Next",completeActionLabel:"Got it",onComplete:i,onStepChange:s,children:e.jsxs(C,{gap:"24",direction:"column",children:[e.jsx(d.Step,{step:0,title:"Title",text:"Text",dataset:{testid:"step-1"},children:e.jsx(u,{children:"Step 1 Content"})}),e.jsx(d.Step,{step:1,title:"Title",text:"Text",dataset:{testid:"step-2"},children:e.jsx(u,{children:"Step 2 Content"})}),e.jsx(d.Step,{step:2,title:"Title",text:"Text",dataset:{testid:"step-3"},children:e.jsx(u,{children:"Step 3 Content"})})]})}),play:async({canvasElement:i,step:s,args:t})=>{const a=p(i);await s("First step should be visible initially",async()=>{await c(()=>{const o=a.getByTestId("step-1");n(o).toBeVisible()})}),await s("Click Next to advance to second step",async()=>{const r=p(a.getByTestId("step-1")).getByTestId("action");await l.click(r),await c(()=>{const T=a.getByTestId("step-2");n(T).toBeVisible(),n(t.onStepChange).toHaveBeenCalledWith(1)})}),await s("Click Next to advance to final step",async()=>{const r=p(a.getByTestId("step-2")).getByTestId("action");await l.click(r),await c(()=>{const T=a.getByTestId("step-3");n(T).toBeVisible(),n(t.onStepChange).toHaveBeenCalledWith(2)})}),await s("Complete tour",async()=>{const r=p(a.getByTestId("step-3")).getByTestId("action");await l.click(r),await c(()=>{const T=a.queryByTestId("step",{exact:!1});n(T).toBeNull(),n(t.onComplete).toHaveBeenCalled()})})}},x={render:({onClose:i})=>e.jsx(d.Provider,{totalSteps:2,nextActionLabel:"Next",completeActionLabel:"Got it",onClose:i,children:e.jsx(d.Step,{step:0,title:"First step",text:"Try closing this step",dataset:{testid:"step-1"},children:e.jsx(u,{children:"Step 1 Content"})})}),play:async({canvasElement:i,step:s})=>{const t=p(i);await s("Step should be initially visible",async()=>{await c(()=>{const a=t.getByTestId("step-1");n(a).toBeVisible()})}),await s("Click close button to close tour",async({args:a})=>{const r=p(t.getByTestId("step-1")).getByTestId("close");await l.click(r),await c(()=>{const T=t.queryByTestId("step",{exact:!1});n(T).toBeNull(),n(a.onClose).toHaveBeenCalled()})})}},B={render:function(){const[s,t]=h.useState(!0);return e.jsxs(C,{gap:"24",direction:"column",children:[e.jsx(m,{onClick:()=>t(!s),dataset:{testid:"toggle-button"},children:s?"Enable Tour":"Disable Tour"}),e.jsx(d.Provider,{totalSteps:2,nextActionLabel:"Next",completeActionLabel:"Got it",disabled:s,children:e.jsx(d.Step,{step:0,title:"First step",text:"This step should be hidden when disabled",dataset:{testid:"step-1"},children:e.jsx(u,{children:"Step 1 Content"})})})]})},play:async({canvasElement:i,step:s})=>{const t=p(i);await s("Tour should be initially disabled",async()=>{const a=t.queryByTestId("step-1");n(a).toBeNull()}),await s("Click enable button to show tour",async()=>{const a=t.getByTestId("toggle-button");await l.click(a),await c(()=>{const o=t.getByTestId("step-1");n(o).toBeVisible()})})}},g=I(),S=I(),w={render:function(){const[s,t]=h.useState(!1),[a,o]=h.useState(!1);return e.jsxs(g.Provider,{totalSteps:2,disabled:!s,nextActionLabel:"Next",completeActionLabel:"Got it",children:[e.jsx(g.Step,{step:0,title:"Title",text:"Text",dataset:{testid:"outer-step-1"},children:e.jsx(m,{onClick:()=>t(!0),dataset:{testid:"start-outer-tour"},children:"Start outer tour"})}),e.jsxs(S.Provider,{totalSteps:2,disabled:!a,nextActionLabel:"Next",completeActionLabel:"Done",children:[e.jsx(g.Step,{step:1,title:"Title",text:"Text",dataset:{testid:"outer-step-2"},children:e.jsx(u,{children:"Outer Tour Step"})}),e.jsx(S.Step,{step:0,title:"Title",text:"Text",dataset:{testid:"inner-step-1"},children:e.jsx(m,{onClick:()=>o(!0),dataset:{testid:"start-inner-tour"},children:"Start inner tour"})}),e.jsx(S.Step,{step:1,title:"Title",text:"Text",dataset:{testid:"inner-step-2"},children:e.jsx(u,{children:"Inner Tour Step"})})]})]})},play:async({canvasElement:i,step:s})=>{const t=p(i);await s("Start inner tour, step 1 should be visible",async()=>{const a=t.getByTestId("start-inner-tour");await l.click(a),await c(async()=>{const o=t.queryByTestId("inner-step-1");n(o).toBeVisible()})}),await s("Advance inner tour, step 2 should be visible",async()=>{const o=p(t.getByTestId("inner-step-1")).getByTestId("action");await l.click(o),await c(async()=>{const r=t.queryByTestId("inner-step-2");n(r).toBeVisible()})}),await s("Complete inner tour",async()=>{const o=p(t.getByTestId("inner-step-2")).getByTestId("action");await l.click(o),await c(async()=>{const r=t.queryByTestId("inner-step-1",{exact:!1});n(r).toBeNull()})}),await s("Start outer tour, step 1 should be visible",async()=>{const a=t.getByTestId("start-outer-tour");await l.click(a),await c(async()=>{const o=t.queryByTestId("outer-step-1");n(o).toBeVisible()})}),await s("Advance outer tour, step 2 should be visible",async()=>{const o=p(t.getByTestId("outer-step-1")).getByTestId("action");await l.click(o),await c(async()=>{const r=t.queryByTestId("outer-step-2");n(r).toBeVisible()})}),await s("Complete outer tour",async()=>{const o=p(t.getByTestId("outer-step-2")).getByTestId("action");await l.click(o),await c(async()=>{const r=t.queryByTestId("-step-",{exact:!1});n(r).toBeNull()})})}};function W(i){return new Promise(s=>setTimeout(s,i))}const b={render:()=>e.jsxs(C,{gap:"24",direction:"column",children:[e.jsx(m,{children:"Click outside the tooltip"}),e.jsx(d.Provider,{totalSteps:1,nextActionLabel:"Next",completeActionLabel:"Got it",children:e.jsx(d.Step,{step:0,title:"Title",text:"Text",dataset:{testid:"step-1"},children:e.jsx(u,{children:"Step 1 Content"})})})]}),play:async({canvasElement:i,step:s})=>{const t=p(i);await s("Step should be initially visible",async()=>{await c(()=>{const a=t.getByTestId("step-1");n(a).toBeVisible()})}),await s("Click outside the tooltip",()=>{const a=t.getByText("Click outside the tooltip");return l.click(a)}),await s("Wait for tooltip to be hidden",async()=>{await W(1e3);const a=t.getByTestId("step-1");n(a).toBeVisible()})}};var k,j,L;y.parameters={...y.parameters,docs:{...(k=y.parameters)==null?void 0:k.docs,source:{originalSource:`{
|
|
2
2
|
render: ({
|
|
3
3
|
onComplete,
|
|
4
4
|
onStepChange
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import{j as a}from"./jsx-runtime-BYouaCF_.js";import{r as l}from"./index-B3evPFBL.js";import{F as H}from"./FormControl-CeIJk4_Z.js";import{F as L,a as I}from"./TokyoUIEye-BsOt8ZdC.js";import{F as M}from"./FieldButton-Bsa9_rJB.js";import{u as x,d as T}from"./index-BfBdt3zW.js";import{u as F}from"./useMergeRefs-BKVZOB6R.js";import{w as P}from"./componentNames-CpCJzpB9.js";import{I as k}from"./Input-
|
|
2
|
-
If not provided, will be generated for accessibility purposes.`,name:"id",required:!1,type:{name:"enum",value:[{value:"string"}]}},
|
|
3
|
-
to provide more context or instructions to the user.`,name:"description",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},required:{defaultValue:null,description:`Indicates if the field is required. When false, adds a "Optional"
|
|
4
|
-
indicator next to the label.`,name:"required",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},
|
|
1
|
+
import{j as a}from"./jsx-runtime-BYouaCF_.js";import{r as l}from"./index-B3evPFBL.js";import{F as H}from"./FormControl-CeIJk4_Z.js";import{F as L,a as I}from"./TokyoUIEye-BsOt8ZdC.js";import{F as M}from"./FieldButton-Bsa9_rJB.js";import{u as x,d as T}from"./index-BfBdt3zW.js";import{u as F}from"./useMergeRefs-BKVZOB6R.js";import{w as P}from"./componentNames-CpCJzpB9.js";import{I as k}from"./Input-C1hZX5_o.js";const r=T({reveal:{id:"preply-ds.password-field.reveal.button",defaultMessage:"Reveal password",description:'A11y label for the "reveal password" button. Will be announced by screen reader.'},conceal:{id:"preply-ds.password-field.conceal.button",defaultMessage:"Conceal password",description:'A11y label for the "conceal password" button. Will be announced by screen reader.'}}),s=l.forwardRef(function({id:o,label:d,description:m,error:p,required:c,inputDataset:f,dataset:v,hideLabel:y,onClick:h,hasError:b,useLegacyRequiredLabel:g,className:D,style:_,...q},E){const{formatMessage:n}=x(),[e,V]=l.useState(!1),t=l.useRef(null),w=F(t,E),C=e?"text":"password",R=()=>{var u;V(!e),(u=t.current)==null||u.focus()};return a.jsx(H,{id:o,label:d,description:m,error:p,hasError:b,required:c,dataset:v,hideLabel:y,onClick:h,useLegacyRequiredLabel:g,preplyDsComponent:P.PasswordField,children:a.jsx(k,{...q,type:C,ref:w,dataset:f,button:a.jsx(M,{onClick:R,svg:e?L:I,assistiveText:n(e?r.conceal:r.reveal),dataset:{testid:"toggle-password-button"}})})})});try{s.displayName="PasswordField",s.__docgenInfo={description:"",displayName:"PasswordField",props:{id:{defaultValue:null,description:`The id to be passed to the input element.
|
|
2
|
+
If not provided, will be generated for accessibility purposes.`,name:"id",required:!1,type:{name:"enum",value:[{value:"string"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLDivElement> & MouseEventHandler<HTMLInputElement>"}]}},error:{defaultValue:null,description:"Error message to display when the field has an invalid value.",name:"error",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},label:{defaultValue:null,description:"The field label. This is needed for accessibility purposes, but can be\nhidden using the `hideLabel` prop.",name:"label",required:!0,type:{name:"enum",value:[{value:"undefined"},{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},description:{defaultValue:null,description:`Additional descriptive text that appears below the input field
|
|
3
|
+
to provide more context or instructions to the user.`,name:"description",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},hideLabel:{defaultValue:null,description:"Use this to hide the `label` visually, but keep it in the accessibility\ntree.",name:"hideLabel",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},hasError:{defaultValue:null,description:"Whether the field has an error.\n@deprecated Use `error` prop to exlicitly describe the error to users",name:"hasError",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},required:{defaultValue:null,description:`Indicates if the field is required. When false, adds a "Optional"
|
|
4
|
+
indicator next to the label.`,name:"required",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},useLegacyRequiredLabel:{defaultValue:null,description:`When true, adds a "Required" indicator next to the label for the required fields.
|
|
5
5
|
When false, adds a "Optional" indicator next to the label for the optional fields instead.
|
|
6
|
-
@deprecated This is a temporary solution for gradual migration to the "Optional" label.`,name:"useLegacyRequiredLabel",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},
|
|
6
|
+
@deprecated This is a temporary solution for gradual migration to the "Optional" label.`,name:"useLegacyRequiredLabel",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},name:{defaultValue:null,description:"",name:"name",required:!1,type:{name:"enum",value:[{value:"string"}]}},placeholder:{defaultValue:null,description:"",name:"placeholder",required:!1,type:{name:"enum",value:[{value:"string"}]}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},onCopy:{defaultValue:null,description:"",name:"onCopy",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLInputElement>"}]}},onCut:{defaultValue:null,description:"",name:"onCut",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLInputElement>"}]}},onPaste:{defaultValue:null,description:"",name:"onPaste",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLInputElement>"}]}},onFocus:{defaultValue:null,description:"",name:"onFocus",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<HTMLInputElement>"}]}},onBlur:{defaultValue:null,description:"",name:"onBlur",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<HTMLInputElement>"}]}},onChange:{defaultValue:null,description:"",name:"onChange",required:!1,type:{name:"enum",value:[{value:"ChangeEventHandler<HTMLInputElement>"}]}},onKeyDown:{defaultValue:null,description:"",name:"onKeyDown",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<HTMLInputElement>"}]}},onKeyUp:{defaultValue:null,description:"",name:"onKeyUp",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<HTMLInputElement>"}]}},icon:{defaultValue:null,description:"",name:"icon",required:!1,type:{name:"enum",value:[{value:"ReactElement<any, string | JSXElementConstructor<any>>"}]}},readOnly:{defaultValue:null,description:"",name:"readOnly",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},maxLength:{defaultValue:null,description:"",name:"maxLength",required:!1,type:{name:"enum",value:[{value:"number"}]}},onValueChange:{defaultValue:null,description:"",name:"onValueChange",required:!1,type:{name:"enum",value:[{value:"(value: string) => void"}]}},value:{defaultValue:null,description:"",name:"value",required:!1,type:{name:"enum",value:[{value:"string"}]}},defaultValue:{defaultValue:null,description:"",name:"defaultValue",required:!1,type:{name:"enum",value:[{value:"string"}]}},autoComplete:{defaultValue:null,description:"",name:"autoComplete",required:!1,type:{name:"enum",value:[{value:'"off"'},{value:'"new-password"'},{value:'"current-password"'}]}},inputDataset:{defaultValue:null,description:"",name:"inputDataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: HTMLInputElement | null) => void"},{value:"RefObject<HTMLInputElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}export{s as P};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as X}from"./jsx-runtime-BYouaCF_.js";import{r as $}from"./index-B3evPFBL.js";import{P as Y}from"./PasswordField-
|
|
1
|
+
import{j as X}from"./jsx-runtime-BYouaCF_.js";import{r as $}from"./index-B3evPFBL.js";import{P as Y}from"./PasswordField-C_KRyf9k.js";import{f as o,w,e as n,u as v}from"./index-DDyIDR-R.js";import{F as ee}from"./TokyoUILock-C_glX9Ec.js";import{I as te}from"./Icon-ZIxauYsE.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./FormControl-CeIJk4_Z.js";import"./index-DRKYGVyc.js";import"./index-BfBdt3zW.js";import"./tslib.es6-BntfKcQG.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./index-DdzHuZ-Y.js";import"./message-BraTJ16C.js";import"./componentNames-CpCJzpB9.js";import"./TokyoUIEye-BsOt8ZdC.js";import"./FieldButton-Bsa9_rJB.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./classNames-BUL1Zq7e.js";import"./useMergeRefs-BKVZOB6R.js";import"./Input-C1hZX5_o.js";import"./InputContainer-Bk0tgFnW.js";import"./text-accent-DZDDtpIt.js";import"./render-icon-CVTdrNe-.js";import"./defaults-B1rzzf6M.js";const Ae={title:"components/PasswordField",component:Y,args:{name:"password",label:"Password",placeholder:"Enter a password",defaultValue:"",dataset:{testid:"field",foo:"bar"},inputDataset:{testid:"input",foo:"bar"},onChange:o(),onValueChange:o(),onBlur:o(),onFocus:o(),onClick:o(),onCopy:o(),onKeyDown:o(),onKeyUp:o(),onPaste:o()}},c={play:async({canvasElement:a,step:e,args:t})=>{const s=w(a),i=s.getByTestId("field"),r=s.getByTestId("input");await e("it should render correct label",async()=>{const Z=w(i).getByTestId("label");n(Z).toHaveTextContent("Password • Optional"),n(r).toHaveAccessibleName("Password")}),await e("it should call onFocus when the input is focused",async()=>{r.focus(),n(t.onFocus).toHaveBeenCalled()}),await e("it should call callback when the value changes",async()=>{await v.type(r,"secret123"),n(t.onValueChange).toHaveBeenCalledWith("secret123"),n(t.onChange).toHaveBeenCalled()}),await e("it should call onBlur when the input is blurred",async()=>{await v.keyboard("{tab}"),n(t.onBlur).toHaveBeenCalled()}),await e("it should render the dataset props",async()=>{n(i).toHaveAttribute("data-testid","field"),n(i).toHaveAttribute("data-foo","bar"),n(r).toHaveAttribute("data-testid","input"),n(r).toHaveAttribute("data-foo","bar")}),await e("it should have password type by default",async()=>{n(r).toHaveAttribute("type","password")})}},l={render:function(e){const[t,s]=$.useState(e.value);return X.jsx(Y,{...e,value:t,onChange:i=>{var r;s(i.target.value),(r=e.onChange)==null||r.call(e,i)}})},args:{label:"Controlled PasswordField",placeholder:"Enter your password...",value:"secret123"},play:async({canvas:a,step:e})=>{await e("it should render the correct initial value",async()=>{const t=a.getByTestId("input");await n(t).toHaveValue("secret123")}),await e("it should update the value when the user types",async()=>{const t=a.getByTestId("input");await v.clear(t),await v.type(t,"newpassword"),n(t).toHaveValue("newpassword")})}},d={args:{description:"Include letters, numbers and symbols"},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input"),s=a.getByTestId("description");await e("it should render the description",async()=>{n(t).toHaveAccessibleDescription("Include letters, numbers and symbols"),n(s).toHaveTextContent("Include letters, numbers and symbols")})}},p={args:{required:!0},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input"),s=a.getByTestId("label");await e("it should render correct label",async()=>{n(t).toHaveAccessibleName("Password"),n(s).toHaveTextContent("Password")}),await e("it should render required attribute",async()=>{n(t).toHaveAttribute("required")})}},u={args:{hideLabel:!0},play:async({canvas:a,step:e})=>{await e("it should render correct a11y label",async()=>{const t=a.getByTestId("input");n(t).toHaveAccessibleName("Password")})}},y={args:{error:"This is an error message"},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input"),s=a.getByTestId("error");await e("it should render the error message",async()=>{n(t).toHaveAccessibleErrorMessage("This is an error message"),n(s).toHaveTextContent("This is an error message")})}},b={args:{disabled:!0},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input");await e("it should render the disabled input",async()=>{n(t).toHaveAttribute("disabled")})}},m={args:{readOnly:!0},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input");await e("it should render the read only input",async()=>{n(t).toHaveAttribute("readonly")})}},h={parameters:{chromatic:{disableSnapshot:!0}},args:{label:"Password",placeholder:"e.g.: abc123%pt0!",description:"Include letters, numbers and symbols"},argTypes:{label:{control:"text"},placeholder:{control:"text"},description:{control:"text"},error:{control:"text"},value:{control:"text"},defaultValue:{control:"text"},inputDataset:{control:"object"},dataset:{control:"object"},id:{control:"text"},required:{control:"boolean"},hideLabel:{control:"boolean"},name:{control:"text"},disabled:{control:"boolean"},readOnly:{control:"boolean"},maxLength:{control:"number"},icon:{options:["None","With Icon"],mapping:{None:void 0,"With Icon":X.jsx(te,{svg:ee})},control:"select"},autoComplete:{control:"select"},hasError:{table:{disable:!0}}}};var g,x,H,T,I;c.parameters={...c.parameters,docs:{...(g=c.parameters)==null?void 0:g.docs,source:{originalSource:`{
|
|
2
2
|
play: async ({
|
|
3
3
|
canvasElement,
|
|
4
4
|
step,
|