@preply/ds-docs 6.1.0 → 6.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/{00.LayoutFlex.stories-Czuzrjrk.js → 00.LayoutFlex.stories-CFA_TqiB.js} +1 -1
- package/dist/assets/{00.applications-LrxGyYUD.js → 00.applications-CBHIYP5V.js} +1 -1
- package/dist/assets/{00.favicons.guide-BGmNrnkW.js → 00.favicons.guide-DES91oFw.js} +1 -1
- package/dist/assets/{00.token-explorer-C9RjGd2m.js → 00.token-explorer-CB_W5xDw.js} +1 -1
- package/dist/assets/{00.using-responsive-props-B5Hf_zhg.js → 00.using-responsive-props-BlNxgh6e.js} +1 -1
- package/dist/assets/{01.semantic-tokens-LE_URlku.js → 01.semantic-tokens-57w9hsId.js} +1 -1
- package/dist/assets/{01.using-shorthand-props-B6ZHTEKI.js → 01.using-shorthand-props-B4ptLiFF.js} +1 -1
- package/dist/assets/{10.Combinations.stories-crFMqWYW.js → 10.Combinations.stories-BoSshDz-.js} +1 -1
- package/dist/assets/{10.fonts.guide-BvsFakA0.js → 10.fonts.guide-CChndGR6.js} +1 -1
- package/dist/assets/{10.ssr-CvzytiB2.js → 10.ssr-DLi856r9.js} +1 -1
- package/dist/assets/{11.languageFont.explorer.stories-D74Fnx-9.js → 11.languageFont.explorer.stories-B768GtgD.js} +1 -1
- package/dist/assets/{11.ssr.app-router-6gm8LtbX.js → 11.ssr.app-router-D_15gE8t.js} +1 -1
- package/dist/assets/{20.libraries-DK289zy7.js → 20.libraries-DQTTSvsY.js} +1 -1
- package/dist/assets/{30.icons.explorer-Beh39C6t.js → 30.icons.explorer-aVpQ43do.js} +8 -8
- package/dist/assets/{30.storybook-DOaJn8iY.js → 30.storybook-YIHgueDX.js} +1 -1
- package/dist/assets/{40.illustrations.explorer-B_EKmaEw.js → 40.illustrations.explorer-DDcxoN1B.js} +1 -1
- package/dist/assets/{90.advanced-CSPomJZ9.js → 90.advanced-B439yxZO.js} +1 -1
- package/dist/assets/{Accordion-D6ZH-DjE.js → Accordion-C0QrA-6c.js} +5 -5
- package/dist/assets/{Accordion.stories-BeDqFMEq.js → Accordion.stories-CCwJvBCB.js} +1 -1
- package/dist/assets/{Accordion.tests.stories-WqwXlFhP.js → Accordion.tests.stories-BrRH9_Sj.js} +1 -1
- package/dist/assets/{AlertDialog.stories-wkxHjKFk.js → AlertDialog.stories-CCjaPjvg.js} +1 -1
- package/dist/assets/{Avatar-pYo4pD9f.js → Avatar-CUIDF2Uz.js} +1 -1
- package/dist/assets/{Avatar.stories-DW2TYQqg.js → Avatar.stories-W6dpZqal.js} +1 -1
- package/dist/assets/{AvatarWithStatus.stories-DJHFLq1b.js → AvatarWithStatus.stories-DKnIlANz.js} +3 -3
- package/dist/assets/{Badge.stories-nc4ge1vK.js → Badge.stories-BPJPq1Zm.js} +2 -2
- package/dist/assets/{Box.stories-DDa-aSBM.js → Box.stories-DHzuH0q4.js} +1 -1
- package/dist/assets/{BubbleCounter.stories-BbmHv_wr.js → BubbleCounter.stories-Bl92FUMb.js} +1 -1
- package/dist/assets/{Button-C0ATLgoL.js → Button-DixvkhBo.js} +1 -1
- package/dist/assets/Button-Dpx1oUXU.css +1 -0
- package/dist/assets/{Button.stories-CPyl_2HB.js → Button.stories-BajPN_9k.js} +1 -1
- package/dist/assets/ButtonBase-CAzN2xsB.css +1 -0
- package/dist/assets/{ButtonBase-6aCRtC4n.js → ButtonBase-DTqpenrU.js} +1 -1
- package/dist/assets/{Checkbox-B4QnbKjr.js → Checkbox-D0qeA3OO.js} +3 -3
- package/dist/assets/{Checkbox.stories-BoDx-Aqb.js → Checkbox.stories-B8jPRdZg.js} +1 -1
- package/dist/assets/{Checkbox.tests.stories-0pTjaycC.js → Checkbox.tests.stories-DwOcteiI.js} +1 -1
- package/dist/assets/{Chips.stories-DHJLxAwi.js → Chips.stories-DvEyddmS.js} +1 -1
- package/dist/assets/{Color-YHDXOIA2-DtSlX6y8.js → Color-YHDXOIA2-BtW6qOVR.js} +1 -1
- package/dist/assets/{ComposingPopovers.stories-Buhcez-K.js → ComposingPopovers.stories-DBJFjhzX.js} +1 -1
- package/dist/assets/CountryFlag-BhibdOJ2.js +49 -0
- package/dist/assets/{CountryFlag.stories-BAoq9f11.js → CountryFlag.stories-DfJhWYOz.js} +1 -1
- package/dist/assets/{CountryFlag.test.stories-BQOn25VR.js → CountryFlag.test.stories-BmLRxSj2.js} +1 -1
- package/dist/assets/{Dialog.stories-wddpMYPZ.js → Dialog.stories-DuVAp1uh.js} +1 -1
- package/dist/assets/DismissibleChips-D8qOUNl1.js +1 -0
- package/dist/assets/{DismissibleChips.stories-DJjBWEal.js → DismissibleChips.stories-Bggm2Uu_.js} +1 -1
- package/dist/assets/{Divider-BPgGsji3.js → Divider-nt4GwjWS.js} +1 -1
- package/dist/assets/{Divider.stories-D0XhMPpe.js → Divider.stories-DD0t6A5Y.js} +1 -1
- package/dist/assets/{DocsRenderer-CFRXHY34-BRe85de1.js → DocsRenderer-CFRXHY34-BF4-7Bvz.js} +1 -1
- package/dist/assets/{DropdownMenu-BjXJi9hq.js → DropdownMenu-D0HlOrIY.js} +180 -180
- package/dist/assets/{DropdownMenu.stories-Br_YQdnZ.js → DropdownMenu.stories-BjlS3fvQ.js} +1 -1
- package/dist/assets/{FormControl.stories-Do6Ag_mi.js → FormControl.stories-Dwh6RVsg.js} +1 -1
- package/dist/assets/{Heading-AcDVTZ-_.js → Heading-O7e38RDd.js} +2 -2
- package/dist/assets/{Heading.stories-Dq8LtEfG.js → Heading.stories-DUy8mOqK.js} +1 -1
- package/dist/assets/{Icon-wspFbxjK.js → Icon-Dh4gq7rV.js} +1 -1
- package/dist/assets/{Icon-RSC-COhGavBW.js → Icon-RSC-Dcn5sZ3U.js} +1 -1
- package/dist/assets/{Icon.stories-BNA7Bui8.js → Icon.stories-YNDb1uxz.js} +1 -1
- package/dist/assets/IconButton-BpsZ_i0D.js +8 -0
- package/dist/assets/{Input-BAXGCyfY.js → Input-p1USf21q.js} +3 -3
- package/dist/assets/{IntegrationWithReactHookForm.stories-B0wzkRUy.js → IntegrationWithReactHookForm.stories-C7rkP74I.js} +1 -1
- package/dist/assets/{IntlFormattedCurrency.stories-DXgF0fgL.js → IntlFormattedCurrency.stories-DKCbye_s.js} +1 -1
- package/dist/assets/{IntlFormattedDateTime.stories-1kBqMLSv.js → IntlFormattedDateTime.stories-C7ql1fzH.js} +1 -1
- package/dist/assets/{LayoutFlex-DaVVk5XW.js → LayoutFlex-BQNwfAZ8.js} +1 -1
- package/dist/assets/{LayoutFlexItem-CbD8uHkr.js → LayoutFlexItem-Cnu7TJMT.js} +1 -1
- package/dist/assets/{LayoutGrid-BIeryQor.js → LayoutGrid-DKo6LloH.js} +1 -1
- package/dist/assets/{LayoutGrid.stories-pQ5UReWz.js → LayoutGrid.stories-d8Uh7SyS.js} +1 -1
- package/dist/assets/{LayoutGridItem-DhK3Bywt.js → LayoutGridItem-C3Sbj_zb.js} +1 -1
- package/dist/assets/{Link-Cc9tpbxA.js → Link-DNHygNgT.js} +1 -1
- package/dist/assets/{Link.stories-Drp_umWZ.js → Link.stories-C8G914wS.js} +1 -1
- package/dist/assets/MultiSelectChips-x8-aNb7S.js +2 -0
- package/dist/assets/{MultiSelectChips.stories-dUDp4Xc_.js → MultiSelectChips.stories-C-itbYdR.js} +1 -1
- package/dist/assets/NumberField-D2w4cJKT.js +6 -0
- package/dist/assets/{NumberField.stories-ZxFHRJyU.js → NumberField.stories-K0G1eZYP.js} +1 -1
- package/dist/assets/{ObserveIntersection-CBPJ0vGf.js → ObserveIntersection-CJD9SPB4.js} +1 -1
- package/dist/assets/{ObserveIntersection.stories-Bj8cybzJ.js → ObserveIntersection.stories-BZxt8NB9.js} +1 -1
- package/dist/assets/{OnboardingTooltip-BKRWp9Pq.js → OnboardingTooltip-DGGIkrYL.js} +1 -1
- package/dist/assets/{OnboardingTooltip.stories-DU8mHci-.js → OnboardingTooltip.stories-CqHYAi6H.js} +1 -1
- package/dist/assets/{OnboardingTooltip.tests.stories-CkbP5Ipu.js → OnboardingTooltip.tests.stories-nFV51x-_.js} +1 -1
- package/dist/assets/{OnboardingTour-BV2VCN_i.js → OnboardingTour-BglC71Ta.js} +1 -1
- package/dist/assets/{OnboardingTour.stories-K9VvH40P.js → OnboardingTour.stories-DBshcJ0B.js} +2 -2
- package/dist/assets/{OnboardingTour.tests.stories-D7L1eKyZ.js → OnboardingTour.tests.stories-CSVFsDnS.js} +1 -1
- package/dist/assets/PasswordField-CxIkNFsF.js +6 -0
- package/dist/assets/{PasswordField.stories-D9iudzST.js → PasswordField.stories-Dco0ovJg.js} +1 -1
- package/dist/assets/{PreplyLogo.stories-eJP4lbLQ.js → PreplyLogo.stories-DQVXMPIz.js} +1 -1
- package/dist/assets/{ProgressBar.stories-uUJTq2by.js → ProgressBar.stories-D3jz1ZQP.js} +1 -1
- package/dist/assets/{ProgressSteps.stories-b7cdUZmK.js → ProgressSteps.stories-1KAWRZVd.js} +1 -1
- package/dist/assets/{PromoDialog-DZI6CpQc.js → PromoDialog-DmE1Ox6z.js} +1 -1
- package/dist/assets/{Rating.stories-CC-5R6ut.js → Rating.stories-byG85-k9.js} +1 -1
- package/dist/assets/{RatingInput.stories-BO7jyUpI.js → RatingInput.stories-BmyAcN2r.js} +1 -1
- package/dist/assets/{SelectField-D9Fok9XR.js → SelectField-BygRJ7mA.js} +8 -8
- package/dist/assets/{SelectField.stories-DQTnk9Os.js → SelectField.stories-DgBLde_T.js} +1 -1
- package/dist/assets/{ShowOnIntersection.stories-CtV5r2Kn.js → ShowOnIntersection.stories-Dgh5DwVX.js} +1 -1
- package/dist/assets/SingleSelectChips-D3BHVGfe.js +2 -0
- package/dist/assets/{SingleSelectChips.stories-BQFZDkdR.js → SingleSelectChips.stories-Dh4SjJCK.js} +1 -1
- package/dist/assets/{Steps-BUMjNhaw.js → Steps-DhH69dIM.js} +1 -1
- package/dist/assets/{Steps.stories-BIrAAKzK.js → Steps.stories-BYZWWBHf.js} +1 -1
- package/dist/assets/{Switch.stories-DS5KnbfD.js → Switch.stories-CaMAnd_b.js} +1 -1
- package/dist/assets/{Text-BeTVFZDV.js → Text-Bj4lCtRc.js} +1 -1
- package/dist/assets/{Text.stories-BTK0-cRF.js → Text.stories-Dx9I8yq7.js} +1 -1
- package/dist/assets/TextField-CpqUV3nE.js +6 -0
- package/dist/assets/{TextField.stories-DkdS2Mfb.js → TextField.stories-DVcFAmI_.js} +1 -1
- package/dist/assets/{TextHighlighted.stories-C75NoH2M.js → TextHighlighted.stories-Ddkb0Eic.js} +1 -1
- package/dist/assets/{TextInline.stories-0r8wshPV.js → TextInline.stories-TF8QL7dO.js} +1 -1
- package/dist/assets/{TextareaField-Drzk_csF.js → TextareaField-BllgUips.js} +8 -8
- package/dist/assets/{TextareaField.stories-BEBK6RZT.js → TextareaField.stories-CCqlnPe_.js} +1 -1
- package/dist/assets/{Toast.stories-6u3p4VaR.js → Toast.stories-DIdoJeJF.js} +1 -1
- package/dist/assets/{Tooltip.stories-DIt2icPQ.js → Tooltip.stories-CNov-gkX.js} +1 -1
- package/dist/assets/{Tooltip.tests.stories-D4UUXvaG.js → Tooltip.tests.stories-CJh9LT0Y.js} +1 -1
- package/dist/assets/{breakpoints-__JDXoVV.js → breakpoints-CXCZFL5D.js} +1 -1
- package/dist/assets/{breakpoints-D1NuJ1Ck.js → breakpoints-D198lovo.js} +1 -1
- package/dist/assets/{breakpoints-DQ0cE-7v.js → breakpoints-D9Y6r7Wa.js} +1 -1
- package/dist/assets/{changelog-B-7o4UyI.js → changelog-C1ld2nDc.js} +240 -230
- package/dist/assets/createRequiredContext-ChMx7FdN.js +241 -0
- package/dist/assets/{entry-preview-B_etxKYS.js → entry-preview-C6CnKIuC.js} +1 -1
- package/dist/assets/{getTokenVar-BrRxg7Sd.js → getTokenVar-Kl4fQ1Kj.js} +1 -1
- package/dist/assets/{hover-BRL3-ew5.js → hover-CZpvGpBh.js} +1 -1
- package/dist/assets/{hover-QZ-mRtAD.js → hover-DxOyTM6D.js} +1 -1
- package/dist/assets/{hover-D6DPls7K.js → hover-deiWDZRE.js} +1 -1
- package/dist/assets/{iframe-HVWDRYwU.js → iframe-DaGDN8RV.js} +2 -2
- package/dist/assets/{index-BVD8Q_yH.js → index-B2Dfubap.js} +1 -1
- package/dist/assets/{index-HAWm7lpA.js → index-DutI5zZq.js} +4 -4
- package/dist/assets/{index-D2OeATJc.js → index-DzhQa_UD.js} +3 -3
- package/dist/assets/{intro-CCOnfVV-.js → intro-BE4s0K_N.js} +1 -1
- package/dist/assets/{migrating-from-less-CGTLe5iR.js → migrating-from-less-CtULEQ8m.js} +1 -1
- package/dist/assets/{preview-Cm45ft8v.js → preview-ByHXCScc.js} +2 -2
- package/dist/assets/{preview-45qDei97.js → preview-V9rP4WZc.js} +1 -1
- package/dist/assets/{preview-Dh5Xn-6N.js → preview-oSwaWaKi.js} +1 -1
- package/dist/assets/{tokens-CLEDQ2NI.js → tokens-8ofWrKCO.js} +1 -1
- package/dist/assets/{tokens-DLLmUmoT.js → tokens-BZHfgJsO.js} +1 -1
- package/dist/assets/{tokens-0vMwrKfg.js → tokens-DhYlNiT9.js} +1 -1
- package/dist/assets/{usePortalElement--_bF-XXu.js → usePortalElement-_10aM_bu.js} +1 -1
- package/dist/assets/{welcome-BeM9AkPY.js → welcome-BE7qPLxT.js} +1 -1
- package/dist/assets/{zeroheight-ot2J4ixf.js → zeroheight-CNXUtlRH.js} +1 -1
- package/dist/iframe.html +1 -1
- package/dist/preview-stats.json +9228 -9210
- package/dist/project.json +1 -1
- package/package.json +3 -3
- package/dist/assets/Button-DWJn1UPq.css +0 -1
- package/dist/assets/ButtonBase-B_NzLahR.css +0 -1
- package/dist/assets/CountryFlag-B0HpjQWe.js +0 -49
- package/dist/assets/DismissibleChips-DQhE_0Ll.js +0 -1
- package/dist/assets/IconButton-Uj306zax.js +0 -8
- package/dist/assets/MultiSelectChips-BqFtbDlW.js +0 -2
- package/dist/assets/NumberField-D5QfH9e7.js +0 -6
- package/dist/assets/PasswordField-IOfkl1f_.js +0 -6
- package/dist/assets/SingleSelectChips-CSrlgJ4x.js +0 -2
- package/dist/assets/TextField-DNQO5hjo.js +0 -6
- package/dist/assets/createRequiredContext-xfj07Y2n.js +0 -241
- /package/dist/assets/{Button-CiNYQcxX.js → Button-RI9aMQG7.js} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
import{j as t}from"./jsx-runtime-BTJTZTIL.js";import{r as u,e as G}from"./index-Cb9e4tly.js";import"./index-DWSmmBvQ.js";import{a as z,b as J,L as K,W as I,T as Q,c as X,l as $,d as N,e as Y,f as v,I as Z,u as tt}from"./constants-DFIBNoDe.js";import{u as et}from"./index-C5uDgNEj.js";import{T as D}from"./Text-
|
|
1
|
+
import{j as t}from"./jsx-runtime-BTJTZTIL.js";import{r as u,e as G}from"./index-Cb9e4tly.js";import"./index-DWSmmBvQ.js";import{a as z,b as J,L as K,W as I,T as Q,c as X,l as $,d as N,e as Y,f as v,I as Z,u as tt}from"./constants-DFIBNoDe.js";import{u as et}from"./index-C5uDgNEj.js";import{T as D}from"./Text-Bj4lCtRc.js";import{N as A}from"./NumberField-D2w4cJKT.js";import{L as b}from"./LayoutFlex-BQNwfAZ8.js";import{L as rt}from"./LayoutGrid-DKo6LloH.js";import{H as ot}from"./Heading-O7e38RDd.js";import{B as nt}from"./Button-DixvkhBo.js";import{C as st}from"./Checkbox-D0qeA3OO.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./tslib.es6-C7pnyCjR.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./styled-components.browser.esm-COuAnjOv.js";import"./getTokenVar-4Jlty0xz.js";import"./constants-DTpaCXm6.js";import"./tokens-B6goZRPa.js";import"./text-accent-DvyJpEME.js";import"./classNames-9hsFPPZv.js";import"./text-centered-BFb64PJw.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./componentNames-k0j3gHgH.js";import"./index-qlqSh81O.js";import"./defaults-czRWsFkX.js";import"./FormControl-BIPOTQBb.js";import"./message-CSdaKtIj.js";import"./index-Cc-bXjHe.js";import"./Input-p1USf21q.js";import"./InputContainer-B1hqJyx0.js";import"./layout-relative.module-uOnIKnjS.js";import"./breakpoints-BfMlrtxE.js";import"./layout-relative-C9i8Tz-b.js";import"./constants-DYYVurUY.js";import"./render-icon-BT0Aq7PA.js";import"./ButtonBase-DTqpenrU.js";import"./Spinner-CUtAzzFK.js";import"./useMergeRefs-SFH7Mw4x.js";import"./useHostname-PsilflFC.js";import"./index-CC6DAVyL.js";const at={rounded:{currencyDisplay:"narrowSymbol",maximumFractionDigits:0},short:{currencyDisplay:"narrowSymbol"},explicit:{currencyDisplay:"code",compactDisplay:"long"}},T=({currency:n,variant:r})=>({...{style:"currency",currency:n,currencySign:"standard",numberingSystem:"latn"},...at[r]}),_={id:"-",ja:"~",ko:"~",th:" – ",zh:"–"},it="–",j=({formattedString:n,locale:r,showPlusSign:a})=>{const m=a?z(n):n;return K.includes(r)?J(m):m},F=()=>{const{formatNumber:n,locale:r}=et(),a=({value:o,currency:i,showPlusSign:c=!1})=>{const s=n(o,T({currency:i,variant:"short"}));return j({formattedString:s,locale:r,showPlusSign:c})},m=({value:o,currency:i,showPlusSign:c=!1})=>{const s=n(o,T({currency:i,variant:"rounded"}));return j({formattedString:s,locale:r,showPlusSign:c})},p=({value:o,currency:i,showPlusSign:c=!1})=>{const s=n(o,T({currency:i,variant:"explicit"}));return j({formattedString:s,locale:r,showPlusSign:c})},f=({value:o,currency:i,variant:c="short",showPlusSign:s=!1})=>{switch(c){case"rounded":return m({value:o,currency:i,showPlusSign:s});case"explicit":return p({value:o,currency:i,showPlusSign:s});case"short":default:return a({value:o,currency:i,showPlusSign:s})}},h=({startValue:o,endValue:i,currency:c,variant:s="short",showPlusSign:d=!1})=>{if(o===i)return f({value:o,currency:c,variant:s,showPlusSign:d});const g=Object.keys(_).includes(r)?_[r]:it,y=f({value:o,currency:c,variant:s}),x=f({value:i,currency:c,variant:s}),L=`${y}${g}${x}`;return j({formattedString:L,locale:r,showPlusSign:d})};return{formatCurrencyShort:a,formatCurrencyRounded:m,formatCurrencyExplicit:p,formatCurrencyRange:({startValue:o,endValue:i,currency:c,variant:s="short",showPlusSign:d=!1})=>{const g=T({currency:c,variant:s});if("formatRange"in Intl.NumberFormat.prototype){const x=new Intl.NumberFormat(r,g).formatRange(o,i);return j({formattedString:x,locale:r,showPlusSign:d})}return h({startValue:o,endValue:i,currency:c,variant:s,showPlusSign:d})}}};function ct(...n){const{formatCurrencyShort:r}=F(),a=r(...n);return t.jsx(I,{children:a})}function lt(...n){const{formatCurrencyRounded:r}=F(),a=r(...n);return t.jsx(I,{children:a})}function dt(...n){const{formatCurrencyExplicit:r}=F(),a=r(...n);return t.jsx(I,{children:a})}function mt(...n){const{formatCurrencyRange:r}=F(),a=r(...n);return t.jsx(I,{children:a})}const E={CurrencyShort:ct,CurrencyRounded:lt,CurrencyExplicit:dt,CurrencyRange:mt},k=["rounded","short","explicit","range"],H=["BRL","GBP","EUR","PLN","USD","UAH"],M=()=>{const[n,r]=u.useState(""),[a,m]=u.useState(""),[p,f]=u.useState(!1),[h,w]=u.useState(12.34),[o,i]=u.useState(10),[c,s]=u.useState(20),[d,g]=u.useState(!1),y=e=>{e!==void 0&&w(e)},x=e=>{e!==void 0&&i(e)},L=e=>{e!==void 0&&s(e)},B=(e,l)=>e==="range"?t.jsx(E.CurrencyRange,{currency:l,startValue:o,endValue:c,variant:"short",showPlusSign:d}):e==="rounded"?t.jsx(E.CurrencyRounded,{currency:l,value:h,showPlusSign:d}):e==="explicit"?t.jsx(E.CurrencyExplicit,{currency:l,value:h,showPlusSign:d}):t.jsx(E.CurrencyShort,{currency:l,value:h,showPlusSign:d}),W=({variant:e,currency:l,isEvenGroup:C,isFirstRow:O})=>t.jsxs("tr",{onMouseEnter:()=>m(`${e}-${l}`),children:[O?t.jsx(v,{"data-iscentered":!0,"data-isevengroup":C,rowSpan:k.length,"data-ishighlighted":a.includes(l),children:t.jsx(D,{variant:"large-semibold",children:l})}):null,t.jsx(v,{"data-isevengroup":C,"data-ishighlighted":`${e}-${l}`===a,children:e}),$.map(R=>t.jsx(v,{onMouseEnter:()=>{r(R),m(`${e}-${l}`)},"data-ishighlighted":R===n||`${e}-${l}`===a,"data-isevengroup":C,children:t.jsx(Z,{textComponent:"span",locale:tt[R],children:B(e,l)})},`${e}-${l}-${R}`))]},`${e}-${l}`),q=()=>t.jsxs(t.Fragment,{children:[t.jsxs("tr",{children:[t.jsx(N,{}),t.jsx(N,{}),$.map(e=>t.jsx(N,{onMouseEnter:()=>r(e),children:e},e))]}),H.map((e,l)=>t.jsxs(G.Fragment,{children:[k.map((C,O)=>W({variant:C,currency:e,isEvenGroup:l%2===1,isFirstRow:O===0})),l<H.length-1&&t.jsx("tr",{children:t.jsx(Y,{colSpan:$.length+2})})]},e))]});return t.jsxs(rt,{padding:"12",gap:"16",columns:["1fr"],children:[t.jsx(ot,{variant:"medium",tag:"h3",children:"Currency formatting using Intl.NumberFormat"}),t.jsxs(b,{direction:"row",gap:"12",alignItems:"center",children:[t.jsx(A,{label:"Value",value:h,onValueChange:y,useLegacyRequiredLabel:!0}),t.jsx(A,{label:"Range start",value:o,onValueChange:x,useLegacyRequiredLabel:!0}),t.jsx(A,{label:"Range end",value:c,onValueChange:L,useLegacyRequiredLabel:!0})]}),t.jsxs(b,{direction:"row",gap:"12",alignItems:"center",children:[t.jsx(st,{checked:d,onCheckedChange:()=>g(!d)}),t.jsx("label",{htmlFor:"show-plus-sign",children:t.jsx(D,{variant:"default-semibold",accent:"primary",children:'Show "+" sign'})})]}),t.jsx(b,{direction:"row",children:t.jsx(nt,{size:"small",onClick:()=>f(!p),children:p?"Hide Options":"Show my browser options"})}),p?t.jsx("pre",{children:JSON.stringify(new Intl.NumberFormat().resolvedOptions(),null,2)}):null,t.jsx(b,{direction:"column",gap:"4",children:t.jsx(Q,{children:t.jsx(X,{onMouseLeave:()=>{r(""),m("")},children:t.jsx("tbody",{children:q()})})})})]})},ee={title:"IntlFormatted/IntlFormattedCurrency",component:M,parameters:{layout:"fullscreen",chromatic:{disableSnapshot:!0}}},ut=()=>t.jsx(M,{}),S=ut.bind({});S.tags=["!autodocs","!a11y-test"];var U,P,V;S.parameters={...S.parameters,docs:{...(U=S.parameters)==null?void 0:U.docs,source:{originalSource:"() => <CurrencyTable />",...(V=(P=S.parameters)==null?void 0:P.docs)==null?void 0:V.source}}};const re=["Default"];export{S as Default,re as __namedExportsOrder,ee as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{_ as r}from"./iframe-HVWDRYwU.js";import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{r as D,e as O}from"./index-Cb9e4tly.js";import{L as lt,b as ut,g as _t,W as k,h as G,i as K,j as z,k as Y,T as ct,c as ft,m as pt,l as b,d as S,f as Tt,I as Dt,u as gt,C as vt,t as ht,n as V,o as P}from"./constants-DFIBNoDe.js";import{T as y}from"./Text-BeTVFZDV.js";import{L as Et}from"./LayoutGrid-BIeryQor.js";import{H as xt}from"./Heading-AcDVTZ-_.js";import{L as j}from"./LayoutFlex-DaVVk5XW.js";import{T as yt}from"./TextField-DNQO5hjo.js";import{S as M,a as R}from"./SelectField-D9Fok9XR.js";import{N as At}from"./NumberField-D5QfH9e7.js";import{C as wt}from"./Checkbox-B4QnbKjr.js";import{L as It}from"./Link-Cc9tpbxA.js";import"./index-DWSmmBvQ.js";import{u as jt,d as Rt}from"./index-C5uDgNEj.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./tslib.es6-C7pnyCjR.js";import"./styled-components.browser.esm-COuAnjOv.js";import"./getTokenVar-4Jlty0xz.js";import"./constants-DTpaCXm6.js";import"./tokens-B6goZRPa.js";import"./text-accent-DvyJpEME.js";import"./classNames-9hsFPPZv.js";import"./text-centered-BFb64PJw.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./componentNames-k0j3gHgH.js";import"./index-qlqSh81O.js";import"./defaults-czRWsFkX.js";import"./breakpoints-BfMlrtxE.js";import"./layout-relative.module-uOnIKnjS.js";import"./layout-relative-C9i8Tz-b.js";import"./constants-DYYVurUY.js";import"./FormControl-BIPOTQBb.js";import"./message-CSdaKtIj.js";import"./index-Cc-bXjHe.js";import"./Input-BAXGCyfY.js";import"./InputContainer-B1hqJyx0.js";import"./TokyoUIChevronDown-CEw5hWWz.js";import"./Icon-wspFbxjK.js";import"./render-icon-BT0Aq7PA.js";import"./useMergeRefs-SFH7Mw4x.js";import"./useHostname-PsilflFC.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";const N=Rt({dateAndTime:{id:"preply-ds.intl_formatted.date_and_time.v3.text",defaultMessage:"{date} • {time}",description:"Formerly intl_formatted.date_and_time.v3.text"},dateAndTimeRange:{id:"preply-ds.intl_formatted.date_and_time_range.v3.text",defaultMessage:"{date} • {timeRange}",description:"Formerly intl_formatted.date_and_time_range.v3.text"},dateTimeAndDateTime:{id:"preply-ds.intl_formatted.date_time_and_date_time.text",defaultMessage:"{dateTimeStart} - {dateTimeEnd}",description:"Formerly intl_formatted.date_time_and_date_time.text"}}),H=({formattedDate:t,locale:a,isCapitalized:i})=>lt.includes(a)?ut(t):i?_t(t):t,L=()=>{const{formatMessage:t,locale:a}=jt();return{formatDateAndTime:({date:m,time:d,isCapitalized:l})=>{const n=t(N.dateAndTime,{date:m,time:d});return H({formattedDate:n,locale:a,isCapitalized:l})},formatDateAndTimeRange:({date:m,timeRange:d,isCapitalized:l})=>{const n=t(N.dateAndTimeRange,{date:m,timeRange:d});return H({formattedDate:n,locale:a,isCapitalized:l})},formatDateTimeAndDateTime:({dateTimeStart:m,dateTimeEnd:d,isCapitalized:l})=>{const n=t(N.dateTimeAndDateTime,{dateTimeStart:m,dateTimeEnd:d});return H({formattedDate:n,locale:a,isCapitalized:l})}}};function Lt(...t){const{formatDateAndTime:a}=L(),i=a(...t);return e.jsx(k,{children:i})}function Ft(...t){const{formatDateAndTimeRange:a}=L(),i=a(...t);return e.jsx(k,{children:i})}function Ot(...t){const{formatDateTimeAndDateTime:a}=L(),i=a(...t);return e.jsx(k,{children:i})}const C={DateAndTime:Lt,DateAndTimeRange:Ft,DateTimeAndDateTime:Ot},bt=60,St=60*1e3,Vt="https://preply.atlassian.net/wiki/spaces/PKB/pages/4410572869/How+to+format+a+date+and+time+in+the+WEB",Pt=[{Formatter:({date:t,dateStart:a,dateEnd:i,countryCode:_,isCapitalized:o,dateFormatterName:m,timeFormatterName:d})=>{const l=V(),n=P(),f=l[m??""]({date:t,dateStart:a,dateEnd:i,isCapitalized:o}),v=n[d??""]({date:t,dateStart:a,dateEnd:i,countryCode:_});return e.jsx(C.DateAndTime,{date:f,time:v,isCapitalized:o})},labels:["DateAndTime","formatDateAndTime"],tags:["✅ all-usages"],timeFormatterName:"formatTime"},{Formatter:({date:t,dateStart:a,dateEnd:i,countryCode:_,isCapitalized:o,dateFormatterName:m,timeFormatterName:d})=>{const l=V(),n=P(),f=l[m??""]({date:t,dateStart:a,dateEnd:i,isCapitalized:o}),v=n[d??""]({date:t,dateStart:a,dateEnd:i,countryCode:_});return e.jsx(C.DateAndTimeRange,{date:f,timeRange:v,isCapitalized:o})},labels:["DateAndTimeRange","formatDateAndTimeRange"],tags:["✅ all-usages"],timeFormatterName:"formatTimeRange"},{Formatter:({date:t,dateStart:a,dateEnd:i,countryCode:_,isCapitalized:o,dateFormatterName:m,timeFormatterName:d})=>{const l=V(),n=P(),{formatDateAndTime:f}=L(),v=l[m??""]({date:t,dateStart:a,dateEnd:i,isCapitalized:o}),x=l[m??""]({date:t,dateStart:a,dateEnd:i,isCapitalized:o}),F=n[d??""]({date:t,countryCode:_}),A=n[d??""]({date:i,countryCode:_}),h=f({date:v,time:F,isCapitalized:o}),w=f({date:x,time:A,isCapitalized:o});return e.jsx(C.DateTimeAndDateTime,{dateTimeStart:h,dateTimeEnd:w,isCapitalized:o})},labels:["DateTimeAndDateTime","formatDateTimeAndDateTime"],tags:["✅ all-usages"],timeFormatterName:"formatTime"}],Mt=t=>!Number.isNaN(t.getTime()),Z=(t,a)=>new Date(t.getTime()+a*bt*St),J=t=>/^[A-Z]/.test(t),Nt={en:async()=>(await r(async()=>{const{default:t}=await import("./en-G84BH_1n.js");return{default:t}},[],import.meta.url)).default,es:async()=>(await r(async()=>{const{default:t}=await import("./es-DQVkemFv.js");return{default:t}},[],import.meta.url)).default,fr:async()=>(await r(async()=>{const{default:t}=await import("./fr-BcLiTgq7.js");return{default:t}},[],import.meta.url)).default,de:async()=>(await r(async()=>{const{default:t}=await import("./de-Dlbpp59k.js");return{default:t}},[],import.meta.url)).default,it:async()=>(await r(async()=>{const{default:t}=await import("./it-pZyEaQWA.js");return{default:t}},[],import.meta.url)).default,ua:async()=>(await r(async()=>{const{default:t}=await import("./ua-bj7Aexlc.js");return{default:t}},[],import.meta.url)).default,pl:async()=>(await r(async()=>{const{default:t}=await import("./pl-BOFPBVWX.js");return{default:t}},[],import.meta.url)).default,pt:async()=>(await r(async()=>{const{default:t}=await import("./pt-BkmYyzxs.js");return{default:t}},[],import.meta.url)).default,tr:async()=>(await r(async()=>{const{default:t}=await import("./tr-Bf_b0nAs.js");return{default:t}},[],import.meta.url)).default,id:async()=>(await r(async()=>{const{default:t}=await import("./id-Bocjc-Mv.js");return{default:t}},[],import.meta.url)).default,zh:async()=>(await r(async()=>{const{default:t}=await import("./zh-C1Fh0tbO.js");return{default:t}},[],import.meta.url)).default,ja:async()=>(await r(async()=>{const{default:t}=await import("./ja-D8fyyfh5.js");return{default:t}},[],import.meta.url)).default,ko:async()=>(await r(async()=>{const{default:t}=await import("./ko-wYJn68A1.js");return{default:t}},[],import.meta.url)).default,ar:async()=>(await r(async()=>{const{default:t}=await import("./ar-DkMEkT7-.js");return{default:t}},[],import.meta.url)).default,nl:async()=>(await r(async()=>{const{default:t}=await import("./nl-jR5jW0y1.js");return{default:t}},[],import.meta.url)).default,ro:async()=>(await r(async()=>{const{default:t}=await import("./ro-C7ZMV5Oi.js");return{default:t}},[],import.meta.url)).default,ru:async()=>(await r(async()=>{const{default:t}=await import("./ru-BQ8nnmSG.js");return{default:t}},[],import.meta.url)).default,sv:async()=>(await r(async()=>{const{default:t}=await import("./sv-DHqzGn-P.js");return{default:t}},[],import.meta.url)).default,th:async()=>(await r(async()=>{const{default:t}=await import("./th-DBBwcwZx.js");return{default:t}},[],import.meta.url)).default,cs:async()=>(await r(async()=>{const{default:t}=await import("./cs-CumF8En8.js");return{default:t}},[],import.meta.url)).default,tw:async()=>(await r(async()=>{const{default:t}=await import("./tw-CumF8En8.js");return{default:t}},[],import.meta.url)).default,hk:async()=>(await r(async()=>{const{default:t}=await import("./hk-CumF8En8.js");return{default:t}},[],import.meta.url)).default},et=()=>{const[t,a]=D.useState(""),[i,_]=D.useState(""),[o,m]=D.useState({en:{},es:{},fr:{},de:{},it:{},uk:{},pl:{},pt:{},tr:{},id:{},zh:{},ja:{},ko:{},ar:{},nl:{},ro:{},ru:{},sv:{},th:{},cs:{},"zh-TW":{},"zh-HK":{}});D.useEffect(()=>{(async()=>{try{const c=await Promise.all(Object.entries(Nt).map(async([p,g])=>{const T=await g();return[p,T]}));m(Object.fromEntries(c))}catch(c){console.error("Failed to load locale messages:",c)}})()},[]);const d=Object.keys(o.en).length!==0,n=new Date().toISOString().slice(0,16),f=1,v=G,[x,F]=D.useState(n),A=Mt(new Date(x)),h=new Date(A?x:n),[w,at]=D.useState(f),U=w??f,rt=Z(h,U),[W,it]=D.useState(v),ot=W===Y?vt[0]:"",[B,nt]=D.useState(!1),[$,st]=D.useState("formatDateShort"),mt=[...K.flatMap(u=>u.labels.filter(c=>!J(c))),...z.flatMap(u=>u.labels.filter(c=>!J(c)))],dt=u=>{var q;const c=U===f&&((q=u.extraData)!=null&&q.defaultDurationHours)?Z(h,u.extraData.defaultDurationHours):rt,p=u.labels,g=p[0],T=u.timeFormatterName;return e.jsxs("tr",{onMouseEnter:()=>_(g),children:[e.jsxs(S,{children:[p.map(s=>e.jsxs(O.Fragment,{children:[e.jsx(y,{variant:"small-regular-italic",children:s}),e.jsx("br",{})]},s)),e.jsx(y,{variant:"small-regular",children:u.tags.map(s=>e.jsxs(O.Fragment,{children:[s,e.jsx("br",{})]},s))}),T?e.jsxs(O.Fragment,{children:[e.jsx(M,{label:"Date formatter",value:$,onValueChange:st,children:mt.map(s=>e.jsx(R,{value:s,children:s},s))}),e.jsx(M,{label:"Time formatter",value:T,children:e.jsx(R,{value:T,children:T},T)})]},`${g}-${T}`):null]}),b.map(s=>e.jsx(Tt,{onMouseEnter:()=>{a(s),_(g)},"data-ishighlighted":s===t||g===i,"data-iscentered":!0,children:e.jsx(Dt,{locale:gt[s],messages:o[s],textComponent:"span",children:e.jsx(u.Formatter,{date:h,dateEnd:c,dateStart:h,countryCode:ot,isCapitalized:B,dateFormatterName:$,timeFormatterName:T})})},`${g}-${s}`))]},g)},I=({title:u,variations:c})=>e.jsxs(e.Fragment,{children:[e.jsx("tr",{children:e.jsx(pt,{colSpan:b.length+1,children:e.jsx(y,{variant:"large-semibold",children:u})})}),e.jsxs("tr",{children:[e.jsx(S,{}),b.map(p=>e.jsx(S,{onMouseEnter:()=>a(p),children:p},p))]}),c.map(p=>dt(p))]});return d?e.jsxs(Et,{padding:"12",gap:"16",columns:["1fr"],children:[e.jsx(xt,{variant:"medium",tag:"h3",children:"Date and Time formatting tool"}),e.jsxs(j,{direction:"row",gap:"12",children:[e.jsx(yt,{label:"Date time",value:x,onValueChange:F,hasError:!A,useLegacyRequiredLabel:!0}),e.jsx(At,{label:"Range duration (hours)",value:w,onValueChange:at,useLegacyRequiredLabel:!0}),e.jsxs(M,{label:"Time Format",value:W,onValueChange:it,useLegacyRequiredLabel:!0,children:[e.jsx(R,{value:Y,children:"12h format (AM/PM)"}),e.jsx(R,{value:G,children:"24h format"})]}),e.jsxs(j,{direction:"column",gap:"16",children:[e.jsx(y,{variant:"default-regular",children:"Is Capitalized?"}),e.jsx(wt,{checked:B,onCheckedChange:nt})]})]}),e.jsx(j,{direction:"row",children:e.jsx(It,{href:Vt,opensInNewTab:!0,children:e.jsx(y,{variant:"default-semibold",accent:"info",children:"Confluence article with more examples and rules"})})}),e.jsx(j,{direction:"column",gap:"4",children:e.jsx(ct,{children:e.jsx(ft,{onMouseLeave:()=>{a(""),_("")},children:e.jsxs("tbody",{children:[I({title:"Abbreviated Dates (IntlFormattedDate)",variations:K}),I({title:"Extended Dates (IntlFormattedDate)",variations:z}),I({title:"Time (IntlFormattedTime)",variations:ht}),I({title:"Date and Time Aggregators (IntlFormattedAggregatedDateTime)",variations:Pt})]})})})})]}):"Loading..."},Le={title:"IntlFormatted/IntlFormattedDateTime",component:et,parameters:{layout:"fullscreen",chromatic:{disableSnapshot:!0}}},Ht=()=>e.jsx(et,{}),E=Ht.bind({});E.args={};E.tags=["!autodocs","!a11y-test"];var Q,X,tt;E.parameters={...E.parameters,docs:{...(Q=E.parameters)==null?void 0:Q.docs,source:{originalSource:"() => <DateTable />",...(tt=(X=E.parameters)==null?void 0:X.docs)==null?void 0:tt.source}}};const Fe=["Default"];export{E as Default,Fe as __namedExportsOrder,Le as default};
|
|
1
|
+
import{_ as r}from"./iframe-DaGDN8RV.js";import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{r as D,e as O}from"./index-Cb9e4tly.js";import{L as lt,b as ut,g as _t,W as k,h as G,i as K,j as z,k as Y,T as ct,c as ft,m as pt,l as b,d as S,f as Tt,I as Dt,u as gt,C as vt,t as ht,n as V,o as P}from"./constants-DFIBNoDe.js";import{T as y}from"./Text-Bj4lCtRc.js";import{L as Et}from"./LayoutGrid-DKo6LloH.js";import{H as xt}from"./Heading-O7e38RDd.js";import{L as j}from"./LayoutFlex-BQNwfAZ8.js";import{T as yt}from"./TextField-CpqUV3nE.js";import{S as M,a as R}from"./SelectField-BygRJ7mA.js";import{N as At}from"./NumberField-D2w4cJKT.js";import{C as wt}from"./Checkbox-D0qeA3OO.js";import{L as It}from"./Link-DNHygNgT.js";import"./index-DWSmmBvQ.js";import{u as jt,d as Rt}from"./index-C5uDgNEj.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./tslib.es6-C7pnyCjR.js";import"./styled-components.browser.esm-COuAnjOv.js";import"./getTokenVar-4Jlty0xz.js";import"./constants-DTpaCXm6.js";import"./tokens-B6goZRPa.js";import"./text-accent-DvyJpEME.js";import"./classNames-9hsFPPZv.js";import"./text-centered-BFb64PJw.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./componentNames-k0j3gHgH.js";import"./index-qlqSh81O.js";import"./defaults-czRWsFkX.js";import"./breakpoints-BfMlrtxE.js";import"./layout-relative.module-uOnIKnjS.js";import"./layout-relative-C9i8Tz-b.js";import"./constants-DYYVurUY.js";import"./FormControl-BIPOTQBb.js";import"./message-CSdaKtIj.js";import"./index-Cc-bXjHe.js";import"./Input-p1USf21q.js";import"./InputContainer-B1hqJyx0.js";import"./TokyoUIChevronDown-CEw5hWWz.js";import"./Icon-Dh4gq7rV.js";import"./render-icon-BT0Aq7PA.js";import"./useMergeRefs-SFH7Mw4x.js";import"./useHostname-PsilflFC.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";const N=Rt({dateAndTime:{id:"preply-ds.intl_formatted.date_and_time.v3.text",defaultMessage:"{date} • {time}",description:"Formerly intl_formatted.date_and_time.v3.text"},dateAndTimeRange:{id:"preply-ds.intl_formatted.date_and_time_range.v3.text",defaultMessage:"{date} • {timeRange}",description:"Formerly intl_formatted.date_and_time_range.v3.text"},dateTimeAndDateTime:{id:"preply-ds.intl_formatted.date_time_and_date_time.text",defaultMessage:"{dateTimeStart} - {dateTimeEnd}",description:"Formerly intl_formatted.date_time_and_date_time.text"}}),H=({formattedDate:t,locale:a,isCapitalized:i})=>lt.includes(a)?ut(t):i?_t(t):t,L=()=>{const{formatMessage:t,locale:a}=jt();return{formatDateAndTime:({date:m,time:d,isCapitalized:l})=>{const n=t(N.dateAndTime,{date:m,time:d});return H({formattedDate:n,locale:a,isCapitalized:l})},formatDateAndTimeRange:({date:m,timeRange:d,isCapitalized:l})=>{const n=t(N.dateAndTimeRange,{date:m,timeRange:d});return H({formattedDate:n,locale:a,isCapitalized:l})},formatDateTimeAndDateTime:({dateTimeStart:m,dateTimeEnd:d,isCapitalized:l})=>{const n=t(N.dateTimeAndDateTime,{dateTimeStart:m,dateTimeEnd:d});return H({formattedDate:n,locale:a,isCapitalized:l})}}};function Lt(...t){const{formatDateAndTime:a}=L(),i=a(...t);return e.jsx(k,{children:i})}function Ft(...t){const{formatDateAndTimeRange:a}=L(),i=a(...t);return e.jsx(k,{children:i})}function Ot(...t){const{formatDateTimeAndDateTime:a}=L(),i=a(...t);return e.jsx(k,{children:i})}const C={DateAndTime:Lt,DateAndTimeRange:Ft,DateTimeAndDateTime:Ot},bt=60,St=60*1e3,Vt="https://preply.atlassian.net/wiki/spaces/PKB/pages/4410572869/How+to+format+a+date+and+time+in+the+WEB",Pt=[{Formatter:({date:t,dateStart:a,dateEnd:i,countryCode:_,isCapitalized:o,dateFormatterName:m,timeFormatterName:d})=>{const l=V(),n=P(),f=l[m??""]({date:t,dateStart:a,dateEnd:i,isCapitalized:o}),v=n[d??""]({date:t,dateStart:a,dateEnd:i,countryCode:_});return e.jsx(C.DateAndTime,{date:f,time:v,isCapitalized:o})},labels:["DateAndTime","formatDateAndTime"],tags:["✅ all-usages"],timeFormatterName:"formatTime"},{Formatter:({date:t,dateStart:a,dateEnd:i,countryCode:_,isCapitalized:o,dateFormatterName:m,timeFormatterName:d})=>{const l=V(),n=P(),f=l[m??""]({date:t,dateStart:a,dateEnd:i,isCapitalized:o}),v=n[d??""]({date:t,dateStart:a,dateEnd:i,countryCode:_});return e.jsx(C.DateAndTimeRange,{date:f,timeRange:v,isCapitalized:o})},labels:["DateAndTimeRange","formatDateAndTimeRange"],tags:["✅ all-usages"],timeFormatterName:"formatTimeRange"},{Formatter:({date:t,dateStart:a,dateEnd:i,countryCode:_,isCapitalized:o,dateFormatterName:m,timeFormatterName:d})=>{const l=V(),n=P(),{formatDateAndTime:f}=L(),v=l[m??""]({date:t,dateStart:a,dateEnd:i,isCapitalized:o}),x=l[m??""]({date:t,dateStart:a,dateEnd:i,isCapitalized:o}),F=n[d??""]({date:t,countryCode:_}),A=n[d??""]({date:i,countryCode:_}),h=f({date:v,time:F,isCapitalized:o}),w=f({date:x,time:A,isCapitalized:o});return e.jsx(C.DateTimeAndDateTime,{dateTimeStart:h,dateTimeEnd:w,isCapitalized:o})},labels:["DateTimeAndDateTime","formatDateTimeAndDateTime"],tags:["✅ all-usages"],timeFormatterName:"formatTime"}],Mt=t=>!Number.isNaN(t.getTime()),Z=(t,a)=>new Date(t.getTime()+a*bt*St),J=t=>/^[A-Z]/.test(t),Nt={en:async()=>(await r(async()=>{const{default:t}=await import("./en-G84BH_1n.js");return{default:t}},[],import.meta.url)).default,es:async()=>(await r(async()=>{const{default:t}=await import("./es-DQVkemFv.js");return{default:t}},[],import.meta.url)).default,fr:async()=>(await r(async()=>{const{default:t}=await import("./fr-BcLiTgq7.js");return{default:t}},[],import.meta.url)).default,de:async()=>(await r(async()=>{const{default:t}=await import("./de-Dlbpp59k.js");return{default:t}},[],import.meta.url)).default,it:async()=>(await r(async()=>{const{default:t}=await import("./it-pZyEaQWA.js");return{default:t}},[],import.meta.url)).default,ua:async()=>(await r(async()=>{const{default:t}=await import("./ua-bj7Aexlc.js");return{default:t}},[],import.meta.url)).default,pl:async()=>(await r(async()=>{const{default:t}=await import("./pl-BOFPBVWX.js");return{default:t}},[],import.meta.url)).default,pt:async()=>(await r(async()=>{const{default:t}=await import("./pt-BkmYyzxs.js");return{default:t}},[],import.meta.url)).default,tr:async()=>(await r(async()=>{const{default:t}=await import("./tr-Bf_b0nAs.js");return{default:t}},[],import.meta.url)).default,id:async()=>(await r(async()=>{const{default:t}=await import("./id-Bocjc-Mv.js");return{default:t}},[],import.meta.url)).default,zh:async()=>(await r(async()=>{const{default:t}=await import("./zh-C1Fh0tbO.js");return{default:t}},[],import.meta.url)).default,ja:async()=>(await r(async()=>{const{default:t}=await import("./ja-D8fyyfh5.js");return{default:t}},[],import.meta.url)).default,ko:async()=>(await r(async()=>{const{default:t}=await import("./ko-wYJn68A1.js");return{default:t}},[],import.meta.url)).default,ar:async()=>(await r(async()=>{const{default:t}=await import("./ar-DkMEkT7-.js");return{default:t}},[],import.meta.url)).default,nl:async()=>(await r(async()=>{const{default:t}=await import("./nl-jR5jW0y1.js");return{default:t}},[],import.meta.url)).default,ro:async()=>(await r(async()=>{const{default:t}=await import("./ro-C7ZMV5Oi.js");return{default:t}},[],import.meta.url)).default,ru:async()=>(await r(async()=>{const{default:t}=await import("./ru-BQ8nnmSG.js");return{default:t}},[],import.meta.url)).default,sv:async()=>(await r(async()=>{const{default:t}=await import("./sv-DHqzGn-P.js");return{default:t}},[],import.meta.url)).default,th:async()=>(await r(async()=>{const{default:t}=await import("./th-DBBwcwZx.js");return{default:t}},[],import.meta.url)).default,cs:async()=>(await r(async()=>{const{default:t}=await import("./cs-CumF8En8.js");return{default:t}},[],import.meta.url)).default,tw:async()=>(await r(async()=>{const{default:t}=await import("./tw-CumF8En8.js");return{default:t}},[],import.meta.url)).default,hk:async()=>(await r(async()=>{const{default:t}=await import("./hk-CumF8En8.js");return{default:t}},[],import.meta.url)).default},et=()=>{const[t,a]=D.useState(""),[i,_]=D.useState(""),[o,m]=D.useState({en:{},es:{},fr:{},de:{},it:{},uk:{},pl:{},pt:{},tr:{},id:{},zh:{},ja:{},ko:{},ar:{},nl:{},ro:{},ru:{},sv:{},th:{},cs:{},"zh-TW":{},"zh-HK":{}});D.useEffect(()=>{(async()=>{try{const c=await Promise.all(Object.entries(Nt).map(async([p,g])=>{const T=await g();return[p,T]}));m(Object.fromEntries(c))}catch(c){console.error("Failed to load locale messages:",c)}})()},[]);const d=Object.keys(o.en).length!==0,n=new Date().toISOString().slice(0,16),f=1,v=G,[x,F]=D.useState(n),A=Mt(new Date(x)),h=new Date(A?x:n),[w,at]=D.useState(f),U=w??f,rt=Z(h,U),[W,it]=D.useState(v),ot=W===Y?vt[0]:"",[B,nt]=D.useState(!1),[$,st]=D.useState("formatDateShort"),mt=[...K.flatMap(u=>u.labels.filter(c=>!J(c))),...z.flatMap(u=>u.labels.filter(c=>!J(c)))],dt=u=>{var q;const c=U===f&&((q=u.extraData)!=null&&q.defaultDurationHours)?Z(h,u.extraData.defaultDurationHours):rt,p=u.labels,g=p[0],T=u.timeFormatterName;return e.jsxs("tr",{onMouseEnter:()=>_(g),children:[e.jsxs(S,{children:[p.map(s=>e.jsxs(O.Fragment,{children:[e.jsx(y,{variant:"small-regular-italic",children:s}),e.jsx("br",{})]},s)),e.jsx(y,{variant:"small-regular",children:u.tags.map(s=>e.jsxs(O.Fragment,{children:[s,e.jsx("br",{})]},s))}),T?e.jsxs(O.Fragment,{children:[e.jsx(M,{label:"Date formatter",value:$,onValueChange:st,children:mt.map(s=>e.jsx(R,{value:s,children:s},s))}),e.jsx(M,{label:"Time formatter",value:T,children:e.jsx(R,{value:T,children:T},T)})]},`${g}-${T}`):null]}),b.map(s=>e.jsx(Tt,{onMouseEnter:()=>{a(s),_(g)},"data-ishighlighted":s===t||g===i,"data-iscentered":!0,children:e.jsx(Dt,{locale:gt[s],messages:o[s],textComponent:"span",children:e.jsx(u.Formatter,{date:h,dateEnd:c,dateStart:h,countryCode:ot,isCapitalized:B,dateFormatterName:$,timeFormatterName:T})})},`${g}-${s}`))]},g)},I=({title:u,variations:c})=>e.jsxs(e.Fragment,{children:[e.jsx("tr",{children:e.jsx(pt,{colSpan:b.length+1,children:e.jsx(y,{variant:"large-semibold",children:u})})}),e.jsxs("tr",{children:[e.jsx(S,{}),b.map(p=>e.jsx(S,{onMouseEnter:()=>a(p),children:p},p))]}),c.map(p=>dt(p))]});return d?e.jsxs(Et,{padding:"12",gap:"16",columns:["1fr"],children:[e.jsx(xt,{variant:"medium",tag:"h3",children:"Date and Time formatting tool"}),e.jsxs(j,{direction:"row",gap:"12",children:[e.jsx(yt,{label:"Date time",value:x,onValueChange:F,hasError:!A,useLegacyRequiredLabel:!0}),e.jsx(At,{label:"Range duration (hours)",value:w,onValueChange:at,useLegacyRequiredLabel:!0}),e.jsxs(M,{label:"Time Format",value:W,onValueChange:it,useLegacyRequiredLabel:!0,children:[e.jsx(R,{value:Y,children:"12h format (AM/PM)"}),e.jsx(R,{value:G,children:"24h format"})]}),e.jsxs(j,{direction:"column",gap:"16",children:[e.jsx(y,{variant:"default-regular",children:"Is Capitalized?"}),e.jsx(wt,{checked:B,onCheckedChange:nt})]})]}),e.jsx(j,{direction:"row",children:e.jsx(It,{href:Vt,opensInNewTab:!0,children:e.jsx(y,{variant:"default-semibold",accent:"info",children:"Confluence article with more examples and rules"})})}),e.jsx(j,{direction:"column",gap:"4",children:e.jsx(ct,{children:e.jsx(ft,{onMouseLeave:()=>{a(""),_("")},children:e.jsxs("tbody",{children:[I({title:"Abbreviated Dates (IntlFormattedDate)",variations:K}),I({title:"Extended Dates (IntlFormattedDate)",variations:z}),I({title:"Time (IntlFormattedTime)",variations:ht}),I({title:"Date and Time Aggregators (IntlFormattedAggregatedDateTime)",variations:Pt})]})})})})]}):"Loading..."},Le={title:"IntlFormatted/IntlFormattedDateTime",component:et,parameters:{layout:"fullscreen",chromatic:{disableSnapshot:!0}}},Ht=()=>e.jsx(et,{}),E=Ht.bind({});E.args={};E.tags=["!autodocs","!a11y-test"];var Q,X,tt;E.parameters={...E.parameters,docs:{...(Q=E.parameters)==null?void 0:Q.docs,source:{originalSource:"() => <DateTable />",...(tt=(X=E.parameters)==null?void 0:X.docs)==null?void 0:tt.source}}};const Fe=["Default"];export{E as Default,Fe as __namedExportsOrder,Le as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{j as F}from"./jsx-runtime-BTJTZTIL.js";import{r as U}from"./index-Cb9e4tly.js";import{f as C}from"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import{g as f,b as j,s as E,a as H}from"./layout-relative.module-uOnIKnjS.js";import{f as $,g as k,L as G}from"./defaults-czRWsFkX.js";import{g as J}from"./index-qlqSh81O.js";import{w as B}from"./componentNames-k0j3gHgH.js";const t=void 0;function Y(a){const{nowrap:e}=a;return e?!0:t}function r(a){return JSON.stringify(a)}function M(a){const{direction:e,column:u,reverse:n}=a;return e===void 0?!n&&!u?{applyThrough:"direction",directionAttr:$}:{applyThrough:"columnReverse",columnReverseAttr:`${u?"column":"row"}-${n?"rev":"fwd"}`}:typeof e=="string"?{applyThrough:"direction",directionAttr:e}:{applyThrough:"direction",directionAttr:r(e)}}function z(a){const{justifyContent:e}=a;return e===void 0?t:typeof e=="string"?e:r(e)}function W(a){const{alignItems:e}=a;return e===void 0?t:typeof e=="string"?e:r(e)}function X(a){const{gap:e}=a;return e===void 0?t:typeof e=="string"?e:r(e)}function K(a){const{padding:e}=a;return e===void 0?{applyThrough:"attr",attr:k}:typeof e=="string"||typeof e=="number"?{applyThrough:"attr",attr:e}:Array.isArray(e)?{applyThrough:"classnames",classNames:f(e)}:r(e).includes("[")?{applyThrough:"classnames",classNames:f(e)}:{applyThrough:"attr",attr:JSON.stringify(e)}}function Q(a){const{hide:e,inline:u}=a;if(e===void 0)return t;const n=u?"inline-flex":"flex";if(typeof e=="boolean")return e?"hide":n;let l=r(e);return l=l.replace(/true/g,'"hide"'),l=l.replace(/false/g,`"${n}"`),l}function Z(a){const{relative:e}=a;return e===void 0?t:e===!0?!0:e===!1?t:r(e)}const ee={},m=U.forwardRef(function(e,u){const{gap:n,hide:l,column:o,nowrap:g,inline:y,dataset:h,reverse:A,padding:L,children:x,relative:R,direction:T,alignItems:P,justifyContent:w,tag:S=G,..._}=e,d=[ee.LayoutFlex,j.LayoutGap,E.LayoutHide,H.LayoutRelative],D=X({gap:n}),b=Y({nowrap:g}),q=Z({relative:R}),V=Q({hide:l,inline:y}),I=W({alignItems:P}),N=z({justifyContent:w});let v=t,p=t;const i=M({direction:T,column:o,reverse:A});i.applyThrough==="columnReverse"?p=i.columnReverseAttr:v=i.directionAttr;let c=t;const s=K({padding:L});s.applyThrough==="classnames"?d.push(...s.classNames):c=s.attr;const O={...C(_),ref:u,className:d.join(" "),"data-ds-gap":D,"data-ds-nowrap":b,"data-ds-padding":c,"data-ds-display":V,"data-ds-relative":q,"data-ds-direction":v,"data-ds-alignitems":I,"data-ds-columnreverse":p,"data-ds-justifycontent":N,...J(h,{preplyDsComponent:B.LayoutFlex})};return F.jsx(S,{...O,children:x})});try{m.displayName="LayoutFlex",m.__docgenInfo={description:"A component for rendering flex layout",displayName:"LayoutFlex",props:{gap:{defaultValue:null,description:"The `gap` property is used to set the spacing between flex items.\n\nNumeric values correspond to the `px` unit.\n\nT-shirt size values like `xs`, `sm`, `md`, `lg`, `xl` are deprecated.",name:"gap",required:!1,type:{name:"enum",value:[{value:'"
|
|
1
|
+
import{j as F}from"./jsx-runtime-BTJTZTIL.js";import{r as U}from"./index-Cb9e4tly.js";import{f as C}from"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import{g as f,b as j,s as E,a as H}from"./layout-relative.module-uOnIKnjS.js";import{f as $,g as k,L as G}from"./defaults-czRWsFkX.js";import{g as J}from"./index-qlqSh81O.js";import{w as B}from"./componentNames-k0j3gHgH.js";const t=void 0;function Y(a){const{nowrap:e}=a;return e?!0:t}function r(a){return JSON.stringify(a)}function M(a){const{direction:e,column:u,reverse:n}=a;return e===void 0?!n&&!u?{applyThrough:"direction",directionAttr:$}:{applyThrough:"columnReverse",columnReverseAttr:`${u?"column":"row"}-${n?"rev":"fwd"}`}:typeof e=="string"?{applyThrough:"direction",directionAttr:e}:{applyThrough:"direction",directionAttr:r(e)}}function z(a){const{justifyContent:e}=a;return e===void 0?t:typeof e=="string"?e:r(e)}function W(a){const{alignItems:e}=a;return e===void 0?t:typeof e=="string"?e:r(e)}function X(a){const{gap:e}=a;return e===void 0?t:typeof e=="string"?e:r(e)}function K(a){const{padding:e}=a;return e===void 0?{applyThrough:"attr",attr:k}:typeof e=="string"||typeof e=="number"?{applyThrough:"attr",attr:e}:Array.isArray(e)?{applyThrough:"classnames",classNames:f(e)}:r(e).includes("[")?{applyThrough:"classnames",classNames:f(e)}:{applyThrough:"attr",attr:JSON.stringify(e)}}function Q(a){const{hide:e,inline:u}=a;if(e===void 0)return t;const n=u?"inline-flex":"flex";if(typeof e=="boolean")return e?"hide":n;let l=r(e);return l=l.replace(/true/g,'"hide"'),l=l.replace(/false/g,`"${n}"`),l}function Z(a){const{relative:e}=a;return e===void 0?t:e===!0?!0:e===!1?t:r(e)}const ee={},m=U.forwardRef(function(e,u){const{gap:n,hide:l,column:o,nowrap:g,inline:y,dataset:h,reverse:A,padding:L,children:x,relative:R,direction:T,alignItems:P,justifyContent:w,tag:S=G,..._}=e,d=[ee.LayoutFlex,j.LayoutGap,E.LayoutHide,H.LayoutRelative],D=X({gap:n}),b=Y({nowrap:g}),q=Z({relative:R}),V=Q({hide:l,inline:y}),I=W({alignItems:P}),N=z({justifyContent:w});let v=t,p=t;const i=M({direction:T,column:o,reverse:A});i.applyThrough==="columnReverse"?p=i.columnReverseAttr:v=i.directionAttr;let c=t;const s=K({padding:L});s.applyThrough==="classnames"?d.push(...s.classNames):c=s.attr;const O={...C(_),ref:u,className:d.join(" "),"data-ds-gap":D,"data-ds-nowrap":b,"data-ds-padding":c,"data-ds-display":V,"data-ds-relative":q,"data-ds-direction":v,"data-ds-alignitems":I,"data-ds-columnreverse":p,"data-ds-justifycontent":N,...J(h,{preplyDsComponent:B.LayoutFlex})};return F.jsx(S,{...O,children:x})});try{m.displayName="LayoutFlex",m.__docgenInfo={description:"A component for rendering flex layout",displayName:"LayoutFlex",props:{gap:{defaultValue:null,description:"The `gap` property is used to set the spacing between flex items.\n\nNumeric values correspond to the `px` unit.\n\nT-shirt size values like `xs`, `sm`, `md`, `lg`, `xl` are deprecated.",name:"gap",required:!1,type:{name:"enum",value:[{value:'"2xs"'},{value:'"xs"'},{value:'"m"'},{value:'"xl"'},{value:'"64"'},{value:'"96"'},{value:'"160"'},{value:'"none"'},{value:'"3xs"'},{value:'"s"'},{value:'"l"'},{value:"ResponsiveProp<LayoutGap>"},{value:'"0"'},{value:'"1"'},{value:'"2"'},{value:'"4"'},{value:'"6"'},{value:'"8"'},{value:'"12"'},{value:'"16"'},{value:'"20"'},{value:'"24"'},{value:'"32"'},{value:'"48"'},{value:"ResponsiveProp<Spacing>"}]}},padding:{defaultValue:null,description:"",name:"padding",required:!1,type:{name:"enum",value:[{value:'"2xs"'},{value:'"xs"'},{value:'"m"'},{value:'"xl"'},{value:'"64"'},{value:'"96"'},{value:'"160"'},{value:'"none"'},{value:'"3xs"'},{value:'"s"'},{value:'"l"'},{value:'"0"'},{value:'"1"'},{value:'"2"'},{value:'"4"'},{value:'"6"'},{value:'"8"'},{value:'"12"'},{value:'"16"'},{value:'"20"'},{value:'"24"'},{value:'"32"'},{value:'"48"'},{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>>"}]}},nowrap:{defaultValue:null,description:"",name:"nowrap",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},column:{defaultValue:null,description:"@deprecated Use `direction` instead.",name:"column",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},reverse:{defaultValue:null,description:"@deprecated Use `direction` instead.",name:"reverse",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},direction:{defaultValue:null,description:"",name:"direction",required:!1,type:{name:"enum",value:[{value:'"column"'},{value:'"row"'},{value:'"row-reverse"'},{value:'"column-reverse"'},{value:"ResponsiveProp<LayoutFlexDirection>"}]}},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>"}]}},tag:{defaultValue:null,description:"",name:"tag",required:!1,type:{name:"enum",value:[{value:'"td"'},{value:'"li"'},{value:'"th"'},{value:'"tr"'},{value:'"div"'},{value:'"main"'},{value:'"header"'},{value:'"footer"'},{value:'"article"'},{value:'"section"'},{value:'"ul"'},{value:'"ol"'},{value:'"p"'},{value:'"span"'},{value:'"fieldset"'},{value:'"table"'},{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>"}]}},inline:{defaultValue:null,description:"",name:"inline",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},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{m as L};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{j as x}from"./jsx-runtime-BTJTZTIL.js";import{r as I}from"./index-Cb9e4tly.js";import{g as _}from"./align-self-Cj4aclWl.js";import{g as F,a as g}from"./layout-relative-C9i8Tz-b.js";import{f as w}from"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import{m as b,b as R}from"./classNames-9hsFPPZv.js";import{w as e}from"./componentNames-k0j3gHgH.js";import{g as C}from"./index-qlqSh81O.js";import{L as N}from"./defaults-czRWsFkX.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:r,relative:n,dataset:m,...i},c){const d=b(q,e.LayoutFlexItem,R("stretch","no-stretch",u)),v=_(s),p=F(r),f=g(n),y=[...d,...v,...p,...f],L=o??N,h={...w(i),ref:c,className:y.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:'"
|
|
1
|
+
import{j as x}from"./jsx-runtime-BTJTZTIL.js";import{r as I}from"./index-Cb9e4tly.js";import{g as _}from"./align-self-Cj4aclWl.js";import{g as F,a as g}from"./layout-relative-C9i8Tz-b.js";import{f as w}from"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import{m as b,b as R}from"./classNames-9hsFPPZv.js";import{w as e}from"./componentNames-k0j3gHgH.js";import{g as C}from"./index-qlqSh81O.js";import{L as N}from"./defaults-czRWsFkX.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:r,relative:n,dataset:m,...i},c){const d=b(q,e.LayoutFlexItem,R("stretch","no-stretch",u)),v=_(s),p=F(r),f=g(n),y=[...d,...v,...p,...f],L=o??N,h={...w(i),ref:c,className:y.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:'"td"'},{value:'"li"'},{value:'"th"'},{value:'"tr"'},{value:'"div"'},{value:'"main"'},{value:'"header"'},{value:'"footer"'},{value:'"article"'},{value:'"section"'},{value:'"ul"'},{value:'"ol"'},{value:'"p"'},{value:'"span"'},{value:'"fieldset"'},{value:'"table"'},{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{t as L};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{j as p}from"./jsx-runtime-BTJTZTIL.js";import{r as j}from"./index-Cb9e4tly.js";import{a as g,m as G,s as r}from"./classNames-9hsFPPZv.js";import{B as w}from"./breakpoints-BfMlrtxE.js";import{b,g as h}from"./layout-relative.module-uOnIKnjS.js";import{g as C,a as A}from"./layout-relative-C9i8Tz-b.js";import{j as T,g as P,L as R}from"./defaults-czRWsFkX.js";import{f as N}from"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import{g as O}from"./index-qlqSh81O.js";import{w as S}from"./componentNames-k0j3gHgH.js";const U="LayoutGrid__SRDdo",_={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-"},V="LayoutGrid",I=Object.keys(w),c=e=>typeof e=="number"?`repeat(${e}, 1fr)`:e.join(" "),D=e=>typeof e=="object"&&!Array.isArray(e)?Object.entries(e).reduce((i,[u,t])=>({...i,...t?{[u]:c(t)}:{}}),{_:c(e._)}):{_:c(e)},q=e=>{if(!e)return{classNames:[],style:{}};const i=D(e),u=I.filter(a=>i[a]),t=g(_,V,["columns",...u.map(a=>`columns-${a}`)]),n=u.reduce((a,s)=>({...a,[`--columns-${s}`]:i[s]}),{"--columns":i._});return{classNames:t,style:n}},x="LayoutGap",E=e=>G(b,x,[r("gap",e)]),H="LayoutGrid",z=(e,i)=>{const{gap:u=T,padding:t=P,justifyContent:n,alignItems:a,justifyItems:s,hide:o,relative:d}=i||{},l=G(_,H,[r("justify-content",n),r("align-items",a),r("justify-items",s)]),y=E(u),m=h(t),f=C(o,"grid"),v=A(d);return[...l,...y,...m,...f,...v]},L=j.forwardRef(function({dataset:i,children:u,...t},n){const{tag:a=R,columns:s}=t,o=z("grid",t),{style:d,classNames:l}=q(s),y=[...o,...l],m={...N(t),ref:n,className:y.join(" "),style:d,...O(i,{preplyDsComponent:S.LayoutGrid})};return p.jsx(a,{...m,children:u})});try{L.displayName="LayoutGrid",L.__docgenInfo={description:"A CSS `grid` wrapper.",displayName:"LayoutGrid",props:{gap:{defaultValue:null,description:"",name:"gap",required:!1,type:{name:"enum",value:[{value:'"none"'},{value:'"3xs"'},{value:'"2xs"'},{value:'"xs"'},{value:'"s"'},{value:'"m"'},{value:'"l"'},{value:'"xl"'},{value:"ResponsiveProp<LayoutGap>"},{value:'"0"'},{value:'"1"'},{value:'"2"'},{value:'"4"'},{value:'"6"'},{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:'"none"'},{value:'"3xs"'},{value:'"2xs"'},{value:'"xs"'},{value:'"s"'},{value:'"m"'},{value:'"l"'},{value:'"xl"'},{value:'"0"'},{value:'"1"'},{value:'"2"'},{value:'"4"'},{value:'"6"'},{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:'"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{L};
|
|
1
|
+
import{j as p}from"./jsx-runtime-BTJTZTIL.js";import{r as j}from"./index-Cb9e4tly.js";import{a as g,m as G,s as r}from"./classNames-9hsFPPZv.js";import{B as w}from"./breakpoints-BfMlrtxE.js";import{b,g as h}from"./layout-relative.module-uOnIKnjS.js";import{g as C,a as A}from"./layout-relative-C9i8Tz-b.js";import{j as T,g as P,L as R}from"./defaults-czRWsFkX.js";import{f as N}from"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import{g as O}from"./index-qlqSh81O.js";import{w as S}from"./componentNames-k0j3gHgH.js";const U="LayoutGrid__SRDdo",_={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-"},V="LayoutGrid",I=Object.keys(w),c=e=>typeof e=="number"?`repeat(${e}, 1fr)`:e.join(" "),D=e=>typeof e=="object"&&!Array.isArray(e)?Object.entries(e).reduce((i,[u,t])=>({...i,...t?{[u]:c(t)}:{}}),{_:c(e._)}):{_:c(e)},q=e=>{if(!e)return{classNames:[],style:{}};const i=D(e),u=I.filter(a=>i[a]),t=g(_,V,["columns",...u.map(a=>`columns-${a}`)]),n=u.reduce((a,s)=>({...a,[`--columns-${s}`]:i[s]}),{"--columns":i._});return{classNames:t,style:n}},x="LayoutGap",E=e=>G(b,x,[r("gap",e)]),H="LayoutGrid",z=(e,i)=>{const{gap:u=T,padding:t=P,justifyContent:n,alignItems:a,justifyItems:s,hide:o,relative:d}=i||{},l=G(_,H,[r("justify-content",n),r("align-items",a),r("justify-items",s)]),y=E(u),m=h(t),f=C(o,"grid"),v=A(d);return[...l,...y,...m,...f,...v]},L=j.forwardRef(function({dataset:i,children:u,...t},n){const{tag:a=R,columns:s}=t,o=z("grid",t),{style:d,classNames:l}=q(s),y=[...o,...l],m={...N(t),ref:n,className:y.join(" "),style:d,...O(i,{preplyDsComponent:S.LayoutGrid})};return p.jsx(a,{...m,children:u})});try{L.displayName="LayoutGrid",L.__docgenInfo={description:"A CSS `grid` wrapper.",displayName:"LayoutGrid",props:{gap:{defaultValue:null,description:"",name:"gap",required:!1,type:{name:"enum",value:[{value:'"2xs"'},{value:'"xs"'},{value:'"m"'},{value:'"xl"'},{value:'"64"'},{value:'"96"'},{value:'"160"'},{value:'"none"'},{value:'"3xs"'},{value:'"s"'},{value:'"l"'},{value:"ResponsiveProp<LayoutGap>"},{value:'"0"'},{value:'"1"'},{value:'"2"'},{value:'"4"'},{value:'"6"'},{value:'"8"'},{value:'"12"'},{value:'"16"'},{value:'"20"'},{value:'"24"'},{value:'"32"'},{value:'"48"'},{value:"ResponsiveProp<Spacing>"}]}},padding:{defaultValue:null,description:"",name:"padding",required:!1,type:{name:"enum",value:[{value:'"2xs"'},{value:'"xs"'},{value:'"m"'},{value:'"xl"'},{value:'"64"'},{value:'"96"'},{value:'"160"'},{value:'"none"'},{value:'"3xs"'},{value:'"s"'},{value:'"l"'},{value:'"0"'},{value:'"1"'},{value:'"2"'},{value:'"4"'},{value:'"6"'},{value:'"8"'},{value:'"12"'},{value:'"16"'},{value:'"20"'},{value:'"24"'},{value:'"32"'},{value:'"48"'},{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:'"td"'},{value:'"li"'},{value:'"th"'},{value:'"tr"'},{value:'"div"'},{value:'"main"'},{value:'"header"'},{value:'"footer"'},{value:'"article"'},{value:'"section"'},{value:'"ul"'},{value:'"ol"'},{value:'"p"'},{value:'"span"'},{value:'"fieldset"'},{value:'"table"'},{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{L};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as t}from"./jsx-runtime-BTJTZTIL.js";import{L as e}from"./LayoutGridItem-
|
|
1
|
+
import{j as t}from"./jsx-runtime-BTJTZTIL.js";import{L as e}from"./LayoutGridItem-C3Sbj_zb.js";import{L as m}from"./LayoutGrid-DKo6LloH.js";import{S as o,a as p}from"./consts-KAYct7Gj.js";import"./index-ChsGqxH_.js";import"./index-Cb9e4tly.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./align-self-Cj4aclWl.js";import"./classNames-9hsFPPZv.js";import"./layout-relative-C9i8Tz-b.js";import"./layout-relative.module-uOnIKnjS.js";import"./constants-DYYVurUY.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./index-qlqSh81O.js";import"./defaults-czRWsFkX.js";import"./componentNames-k0j3gHgH.js";import"./breakpoints-BfMlrtxE.js";const P={title:"components/LayoutGrid",component:m,subcomponents:{LayoutGridItem:e},argTypes:{gap:{description:o},padding:{description:p},columns:{description:o},justifyContent:{description:o},alignItems:{description:o},justifyItems:{description:o},hide:{description:o},relative:{description:o}}},n=()=>t.jsxs(m,{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"}})]});n.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;n.parameters={...n.parameters,docs:{...(r=n.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 L}from"./jsx-runtime-BTJTZTIL.js";import{r as h}from"./index-Cb9e4tly.js";import{g as _}from"./align-self-Cj4aclWl.js";import{g as C,a as G}from"./layout-relative-C9i8Tz-b.js";import{f as I}from"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import{m as N}from"./classNames-9hsFPPZv.js";import{g as R}from"./index-qlqSh81O.js";import{L as b}from"./defaults-czRWsFkX.js";import{w as e}from"./componentNames-k0j3gHgH.js";const A="LayoutGridItem__GF0yx",q={LayoutGridItem:A},a=h.forwardRef(function({children:l,alignSelf:u,tag:s,hide:n,relative:r,dataset:o,...i},m){const v=N(q,e.LayoutGridItem,[]),d=_(u),p=C(n),f=G(r),c=[...v,...d,...p,...f],y=s??b,g={...I(i),ref:m,className:c.join(" "),...R(o,{preplyDsComponent:e.LayoutGridItem})};return L.jsx(y,{...g,children:l})});try{a.displayName="LayoutGridItem",a.__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:'"
|
|
1
|
+
import{j as L}from"./jsx-runtime-BTJTZTIL.js";import{r as h}from"./index-Cb9e4tly.js";import{g as _}from"./align-self-Cj4aclWl.js";import{g as C,a as G}from"./layout-relative-C9i8Tz-b.js";import{f as I}from"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import{m as N}from"./classNames-9hsFPPZv.js";import{g as R}from"./index-qlqSh81O.js";import{L as b}from"./defaults-czRWsFkX.js";import{w as e}from"./componentNames-k0j3gHgH.js";const A="LayoutGridItem__GF0yx",q={LayoutGridItem:A},a=h.forwardRef(function({children:l,alignSelf:u,tag:s,hide:n,relative:r,dataset:o,...i},m){const v=N(q,e.LayoutGridItem,[]),d=_(u),p=C(n),f=G(r),c=[...v,...d,...p,...f],y=s??b,g={...I(i),ref:m,className:c.join(" "),...R(o,{preplyDsComponent:e.LayoutGridItem})};return L.jsx(y,{...g,children:l})});try{a.displayName="LayoutGridItem",a.__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:'"td"'},{value:'"li"'},{value:'"th"'},{value:'"tr"'},{value:'"div"'},{value:'"main"'},{value:'"header"'},{value:'"footer"'},{value:'"article"'},{value:'"section"'},{value:'"ul"'},{value:'"ol"'},{value:'"p"'},{value:'"span"'},{value:'"fieldset"'},{value:'"table"'},{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{a as L};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import{j as b}from"./jsx-runtime-BTJTZTIL.js";import{r as i}from"./index-Cb9e4tly.js";import{f as T}from"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import{c as q}from"./defaults-czRWsFkX.js";import{u as V}from"./useHostname-PsilflFC.js";import{m as N,s as r,b as s}from"./classNames-9hsFPPZv.js";import{w as u}from"./componentNames-k0j3gHgH.js";import{a as E,g as U}from"./index-qlqSh81O.js";const R="Link__Jw0hc",A={Link:R,"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"},o=i.forwardRef(function(v,m){const{variant:n=q,href:c,download:f,opensInNewTab:p,nofollow:k,assistiveText:L,onClick:I,as:a,url:h,dataset:_,children:t,inline:y,dsInternalSimulation:w,noUnderline:S,...g}=v,C=V(),D=N(A,u.Link,[r(`variant-${n}--dsInternalSimulation`,w),r("variant",n),s("inline",void 0,y),s("noUnderline",void 0,S)]),e=c||h,x=e?E(C,e,p,k):{},l={...T(g),ref:m,href:e,download:f,"aria-label":L,onClick:I,className:D.join(" "),...U(_,{preplyDsComponent:u.Link})};return a?i.cloneElement(a,{...l},t):b.jsx("a",{...l,...x,children:t})});try{o.displayName="Link",o.__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:{href:{defaultValue:null,description:"",name:"href",required:!1,type:{name:"enum",value:[{value:"string"}]}},download:{defaultValue:null,description:"",name:"download",required:!1,type:{name:"any"}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLAnchorElement>"}]}},variant:{defaultValue:null,description:"",name:"variant",required:!1,type:{name:"enum",value:[{value:'"
|
|
4
|
+
component.`,displayName:"Link",props:{href:{defaultValue:null,description:"",name:"href",required:!1,type:{name:"enum",value:[{value:"string"}]}},download:{defaultValue:null,description:"",name:"download",required:!1,type:{name:"any"}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLAnchorElement>"}]}},variant:{defaultValue:null,description:"",name:"variant",required:!1,type:{name:"enum",value:[{value:'"neutral"'},{value:'"accentDark"'},{value:'"accentDarkInverted"'},{value:'"neutralInverted"'},{value:'"unsetColors"'}]}},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"}]}},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.
|
|
5
5
|
@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{}export{o as L};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{T as t}from"./Text-
|
|
1
|
+
import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{T as t}from"./Text-Bj4lCtRc.js";import{L as r}from"./Link-DNHygNgT.js";import{g as c}from"./getTokenVar-4Jlty0xz.js";import{c as d}from"./tokens-B6goZRPa.js";import"./index-ChsGqxH_.js";import"./index-Cb9e4tly.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./text-accent-DvyJpEME.js";import"./classNames-9hsFPPZv.js";import"./text-centered-BFb64PJw.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./componentNames-k0j3gHgH.js";import"./index-qlqSh81O.js";import"./defaults-czRWsFkX.js";import"./useHostname-PsilflFC.js";import"./constants-DTpaCXm6.js";const G={title:"components/Link",component:r},n=()=>{const a=c(d.background.primaryInverted);return e.jsxs("div",{style:{display:"flex",gap:"16px"},children:[e.jsx(r,{href:"https://preply.com",variant:"neutral",children:"neutral"}),e.jsx("span",{style:{backgroundColor:a},children:e.jsx(r,{href:"https://preply.com",variant:"neutralInverted",children:"neutralInverted"})}),e.jsx(r,{href:"https://preply.com",variant:"accentDark",children:"accentDark"}),e.jsx("span",{style:{backgroundColor:a},children:e.jsx(r,{href:"https://preply.com",variant:"accentDarkInverted",children:"accentDarkInverted"})}),e.jsx(r,{href:"https://preply.com",variant:"unsetColors",children:"unsetColors"})]})},i=()=>{const a=c(d.background.primaryInverted);return e.jsxs("div",{style:{display:"flex",gap:"16px",flexDirection:"column"},children:[e.jsx(t,{variant:"default-regular-italic",children:"(use the `unsetColors` variant)"}),e.jsxs("div",{children:[e.jsx(t,{variant:"large-semibold-italic",children:"primary"}),e.jsx(t,{variant:"default-regular-italic",children:"normal"}),e.jsxs(t,{accent:"primary",children:["Lorem ipsum ",e.jsx(r,{variant:"unsetColors",children:"dolor sit amet"})," amet."]}),e.jsx(t,{variant:"default-regular-italic",children:"active"}),e.jsxs(t,{accent:"primary",children:["Lorem ipsum"," ",e.jsx(r,{variant:"unsetColors",dsInternalSimulation:"active",children:"dolor sit amet"})," ","amet."]})]}),e.jsxs("div",{style:{backgroundColor:a},children:[e.jsx(t,{variant:"large-semibold-italic",accent:"inverted",children:"inverted"}),e.jsx(t,{variant:"default-regular-italic",accent:"inverted",children:"normal"}),e.jsxs(t,{accent:"inverted",children:["Lorem ipsum ",e.jsx(r,{variant:"unsetColors",children:"dolor sit amet"})," amet."]}),e.jsx(t,{variant:"default-regular-italic",accent:"inverted",children:"active"}),e.jsxs(t,{accent:"inverted",children:["Lorem ipsum"," ",e.jsx(r,{variant:"unsetColors",dsInternalSimulation:"active",children:"dolor sit amet"})," ","amet."]})]}),e.jsxs("div",{children:[e.jsx(t,{variant:"large-semibold-italic",children:"positive"}),e.jsx(t,{variant:"default-regular-italic",children:"normal"}),e.jsxs(t,{accent:"positive",children:["Lorem ipsum ",e.jsx(r,{variant:"unsetColors",children:"dolor sit amet"})," amet."]}),e.jsx(t,{variant:"default-regular-italic",children:"active"}),e.jsxs(t,{accent:"positive",children:["Lorem ipsum"," ",e.jsx(r,{variant:"unsetColors",dsInternalSimulation:"active",children:"dolor sit amet"})," ","amet."]})]}),e.jsxs("div",{children:[e.jsx(t,{variant:"large-semibold-italic",children:"critical"}),e.jsx(t,{variant:"default-regular-italic",children:"normal"}),e.jsxs(t,{accent:"critical",children:["Lorem ipsum ",e.jsx(r,{variant:"unsetColors",children:"dolor sit amet"})," amet."]}),e.jsx(t,{variant:"default-regular-italic",children:"active"}),e.jsxs(t,{accent:"critical",children:["Lorem ipsum"," ",e.jsx(r,{variant:"unsetColors",dsInternalSimulation:"active",children:"dolor sit amet"})," ","amet."]})]})]})},l=()=>{const a=c(d.background.primaryInverted);return e.jsxs("div",{style:{display:"flex",gap:"16px",flexDirection:"column"},children:[e.jsx(t,{variant:"default-regular-italic",children:"normal"}),e.jsxs("div",{style:{display:"flex",gap:"16px"},children:[e.jsx(r,{href:"https://preply.com",variant:"neutral",children:"neutral"}),e.jsx("span",{style:{backgroundColor:a},children:e.jsx(r,{href:"https://preply.com",variant:"neutralInverted",children:"neutralInverted"})}),e.jsx(r,{href:"https://preply.com",variant:"accentDark",children:"accentDark"}),e.jsx("span",{style:{backgroundColor:a},children:e.jsx(r,{href:"https://preply.com",variant:"accentDarkInverted",children:"accentDarkInverted"})}),e.jsx(r,{href:"https://preply.com",variant:"unsetColors",children:"unsetColors"})]}),e.jsx(t,{variant:"default-regular-italic",children:"hover"}),e.jsxs("div",{style:{display:"flex",gap:"16px"},children:[e.jsx(r,{href:"https://preply.com",variant:"neutral",dsInternalSimulation:"hover",children:"neutral"}),e.jsx("span",{style:{backgroundColor:a},children:e.jsx(r,{href:"https://preply.com",variant:"neutralInverted",dsInternalSimulation:"hover",children:"neutralInverted"})}),e.jsx(r,{href:"https://preply.com",variant:"accentDark",dsInternalSimulation:"hover",children:"accentDark"}),e.jsx("span",{style:{backgroundColor:a},children:e.jsx(r,{href:"https://preply.com",variant:"accentDarkInverted",dsInternalSimulation:"hover",children:"accentDarkInverted"})}),e.jsx(r,{href:"https://preply.com",variant:"unsetColors",dsInternalSimulation:"hover",children:"unsetColors"})]}),e.jsx(t,{variant:"default-regular-italic",children:"active"}),e.jsxs("div",{style:{display:"flex",gap:"16px"},children:[e.jsx(r,{href:"https://preply.com",variant:"neutral",dsInternalSimulation:"active",children:"neutral"}),e.jsx("span",{style:{backgroundColor:a},children:e.jsx(r,{href:"https://preply.com",variant:"neutralInverted",dsInternalSimulation:"active",children:"neutralInverted"})}),e.jsx(r,{href:"https://preply.com",variant:"accentDark",dsInternalSimulation:"active",children:"accentDark"}),e.jsx("span",{style:{backgroundColor:a},children:e.jsx(r,{href:"https://preply.com",variant:"accentDarkInverted",dsInternalSimulation:"active",children:"accentDarkInverted"})}),e.jsx(r,{href:"https://preply.com",variant:"unsetColors",dsInternalSimulation:"active",children:"unsetColors"})]})]})},o=()=>e.jsxs("p",{style:{width:"12ch"},children:["Unlock your potential;"," ",e.jsx(r,{href:"https://preply.com",variant:"unsetColors",inline:!0,children:"visit Preply"}),"."]}),s={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 p,u,v;n.parameters={...n.parameters,docs:{...(p=n.parameters)==null?void 0:p.docs,source:{originalSource:`() => {
|
|
2
2
|
const grey = getTokenVar(color.background.primaryInverted);
|
|
3
3
|
return <div style={{
|
|
4
4
|
display: 'flex',
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{r as C}from"./index-Cb9e4tly.js";import{u as j}from"./useControllableState-DKskwY-e.js";import{c as x,C as R,a as M,b as I,d as _,D as z,e as E}from"./createRequiredContext-ChMx7FdN.js";import{f as k}from"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import{g as V}from"./index-qlqSh81O.js";import{w as q}from"./componentNames-k0j3gHgH.js";const[T,L]=x("MultiSelectChips"),y=C.forwardRef(function({items:a,children:r,orientation:l=z,"aria-label":s,"aria-controls":o,value:c,onValueChange:m,defaultValue:d,dataset:p,...f},h){const[u,v]=j({value:c,onValueChange:m,defaultValue:d??[]}),w=(t,n)=>{v(n?u.filter(g=>g!==t):[...u,t])},S=a?a.map(({label:t,value:n,...g})=>e.jsx(b,{value:n,...g,children:t},n)):r;return e.jsx(T,{value:{values:u,onToggle:w},children:e.jsx(_,{orientation:l,children:e.jsx(E,{...k(f),ref:h,orientation:l,"aria-orientation":l,"aria-label":s,"aria-controls":o,role:"listbox","aria-multiselectable":"true",...V(p,{preplyDsComponent:q.MultiSelectChips}),children:S})})})}),b=C.forwardRef(function({value:a,children:r,icon:l,countryFlagCode:s,disabled:o,counter:c,dataset:m,dsInternalSimulation:d,...p},f){const{values:h,onToggle:u}=L(),v=h.includes(a);return e.jsx(R,{role:"presentation",children:e.jsx(M,{...k(p),ref:f,role:"option","aria-selected":v,onClick:()=>u(a,v),icon:l,countryFlagCode:s,disabled:o,dsInternalSimulation:d,...V(m,{preplyDsComponent:q.MultiSelectChipsItem}),children:e.jsx(I,{counter:c,children:r})})})});try{y.displayName="MultiSelectChips",y.__docgenInfo={description:`A chips component that allows selection of multiple options from a group.
|
|
2
|
+
Users can select multiple chips, and clicking a selected chip will deselect it.`,displayName:"MultiSelectChips",props:{dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},value:{defaultValue:null,description:"Current value of the chips. When provided, the component operates in controlled mode",name:"value",required:!1,type:{name:"enum",value:[{value:"T[]"}]}},defaultValue:{defaultValue:null,description:"Default value for uncontrolled usage. Will be ignored if `value` is provided",name:"defaultValue",required:!1,type:{name:"enum",value:[{value:"T[]"}]}},"aria-controls":{defaultValue:null,description:"If the chips control other elements on the page, use `aria-controls` with the target element's ID.",name:"aria-controls",required:!1,type:{name:"enum",value:[{value:"string"}]}},"aria-label":{defaultValue:null,description:"Accessible label for the chips group. Required for screen reader users",name:"aria-label",required:!0,type:{name:"string"}},onValueChange:{defaultValue:null,description:"Callback fired when the value changes. Receives the new value as an argument",name:"onValueChange",required:!1,type:{name:"enum",value:[{value:"(value: T[]) => void"}]}},orientation:{defaultValue:{value:"'horizontal'"},description:"Layout orientation of the chips group.",name:"orientation",required:!1,type:{name:"enum",value:[{value:'"horizontal"'},{value:'"vertical"'}]}},items:{defaultValue:null,description:"",name:"items",required:!1,type:{name:"enum",value:[{value:'(Omit<ChipsItemProps, "children" | "dsInternalSimulation" | "value"> & { value: NonNullable<T>; label: ReactNode; })[]'}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}},ref:{defaultValue:null,description:"",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"(instance: HTMLUListElement | null) => void"},{value:"RefObject<HTMLUListElement>"}]}}}}}catch{}try{b.displayName="MultiSelectChipsItem",b.__docgenInfo={description:"Individual chip item for use within MultiSelectChips.",displayName:"MultiSelectChipsItem",props:{disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},icon:{defaultValue:null,description:"",name:"icon",required:!1,type:{name:"enum",value:[{value:"ComponentClass<SVGAttributes<SVGElement>, any>"},{value:"FunctionComponent<SVGAttributes<SVGElement>>"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"}]}},countryFlagCode:{defaultValue:null,description:"",name:"countryFlagCode",required:!1,type:{name:"enum",value:[{value:'"ai"'},{value:'"id"'},{value:'"as"'},{value:'"is"'},{value:'"af"'},{value:'"ax"'},{value:'"al"'},{value:'"dz"'},{value:'"ad"'},{value:'"ao"'},{value:'"aq"'},{value:'"ag"'},{value:'"ar"'},{value:'"am"'},{value:'"aw"'},{value:'"sh-ac"'},{value:'"asean"'},{value:'"au"'},{value:'"at"'},{value:'"az"'},{value:'"bs"'},{value:'"bh"'},{value:'"bd"'},{value:'"bb"'},{value:'"es-pv"'},{value:'"by"'},{value:'"be"'},{value:'"bz"'},{value:'"bj"'},{value:'"bm"'},{value:'"bt"'},{value:'"bo"'},{value:'"bq"'},{value:'"ba"'},{value:'"bw"'},{value:'"bv"'},{value:'"br"'},{value:'"io"'},{value:'"bn"'},{value:'"bg"'},{value:'"bf"'},{value:'"bi"'},{value:'"cv"'},{value:'"kh"'},{value:'"cm"'},{value:'"ca"'},{value:'"ic"'},{value:'"es-ct"'},{value:'"ky"'},{value:'"cf"'},{value:'"cefta"'},{value:'"td"'},{value:'"cl"'},{value:'"cn"'},{value:'"cx"'},{value:'"cp"'},{value:'"cc"'},{value:'"co"'},{value:'"km"'},{value:'"ck"'},{value:'"cr"'},{value:'"hr"'},{value:'"cu"'},{value:'"cw"'},{value:'"cy"'},{value:'"cz"'},{value:'"ci"'},{value:'"cd"'},{value:'"dk"'},{value:'"dg"'},{value:'"dj"'},{value:'"dm"'},{value:'"do"'},{value:'"eac"'},{value:'"ec"'},{value:'"eg"'},{value:'"sv"'},{value:'"gb-eng"'},{value:'"gq"'},{value:'"er"'},{value:'"ee"'},{value:'"sz"'},{value:'"et"'},{value:'"eu"'},{value:'"fk"'},{value:'"fo"'},{value:'"fm"'},{value:'"fj"'},{value:'"fi"'},{value:'"fr"'},{value:'"gf"'},{value:'"pf"'},{value:'"tf"'},{value:'"ga"'},{value:'"es-ga"'},{value:'"gm"'},{value:'"ge"'},{value:'"de"'},{value:'"gh"'},{value:'"gi"'},{value:'"gr"'},{value:'"gl"'},{value:'"gd"'},{value:'"gp"'},{value:'"gu"'},{value:'"gt"'},{value:'"gg"'},{value:'"gn"'},{value:'"gw"'},{value:'"gy"'},{value:'"ht"'},{value:'"hm"'},{value:'"va"'},{value:'"hn"'},{value:'"hk"'},{value:'"hu"'},{value:'"in"'},{value:'"ir"'},{value:'"iq"'},{value:'"ie"'},{value:'"im"'},{value:'"il"'},{value:'"it"'},{value:'"jm"'},{value:'"jp"'},{value:'"je"'},{value:'"jo"'},{value:'"kz"'},{value:'"ke"'},{value:'"ki"'},{value:'"xk"'},{value:'"kw"'},{value:'"kg"'},{value:'"la"'},{value:'"lv"'},{value:'"arab"'},{value:'"lb"'},{value:'"ls"'},{value:'"lr"'},{value:'"ly"'},{value:'"li"'},{value:'"lt"'},{value:'"lu"'},{value:'"mo"'},{value:'"mg"'},{value:'"mw"'},{value:'"my"'},{value:'"mv"'},{value:'"ml"'},{value:'"mt"'},{value:'"mh"'},{value:'"mq"'},{value:'"mr"'},{value:'"mu"'},{value:'"yt"'},{value:'"mx"'},{value:'"md"'},{value:'"mc"'},{value:'"mn"'},{value:'"me"'},{value:'"ms"'},{value:'"ma"'},{value:'"mz"'},{value:'"mm"'},{value:'"na"'},{value:'"nr"'},{value:'"np"'},{value:'"nl"'},{value:'"nc"'},{value:'"nz"'},{value:'"ni"'},{value:'"ne"'},{value:'"ng"'},{value:'"nu"'},{value:'"nf"'},{value:'"kp"'},{value:'"mk"'},{value:'"gb-nir"'},{value:'"mp"'},{value:'"no"'},{value:'"om"'},{value:'"pc"'},{value:'"pk"'},{value:'"pw"'},{value:'"pa"'},{value:'"pg"'},{value:'"py"'},{value:'"pe"'},{value:'"ph"'},{value:'"pn"'},{value:'"pl"'},{value:'"pt"'},{value:'"pr"'},{value:'"qa"'},{value:'"cg"'},{value:'"ro"'},{value:'"ru"'},{value:'"rw"'},{value:'"re"'},{value:'"bl"'},{value:'"sh-hl"'},{value:'"sh"'},{value:'"kn"'},{value:'"lc"'},{value:'"mf"'},{value:'"pm"'},{value:'"vc"'},{value:'"ws"'},{value:'"sm"'},{value:'"st"'},{value:'"sa"'},{value:'"gb-sct"'},{value:'"sn"'},{value:'"rs"'},{value:'"sc"'},{value:'"sl"'},{value:'"sg"'},{value:'"sx"'},{value:'"sk"'},{value:'"si"'},{value:'"sb"'},{value:'"so"'},{value:'"za"'},{value:'"gs"'},{value:'"kr"'},{value:'"ss"'},{value:'"es"'},{value:'"lk"'},{value:'"ps"'},{value:'"sd"'},{value:'"sr"'},{value:'"sj"'},{value:'"se"'},{value:'"ch"'},{value:'"sy"'},{value:'"tw"'},{value:'"tj"'},{value:'"tz"'},{value:'"th"'},{value:'"tl"'},{value:'"tg"'},{value:'"tk"'},{value:'"to"'},{value:'"tt"'},{value:'"sh-ta"'},{value:'"tn"'},{value:'"tm"'},{value:'"tc"'},{value:'"tv"'},{value:'"tr"'},{value:'"ug"'},{value:'"ua"'},{value:'"ae"'},{value:'"gb"'},{value:'"un"'},{value:'"um"'},{value:'"us"'},{value:'"uy"'},{value:'"uz"'},{value:'"vu"'},{value:'"ve"'},{value:'"vn"'},{value:'"vg"'},{value:'"vi"'},{value:'"gb-wls"'},{value:'"wf"'},{value:'"eh"'},{value:'"ye"'},{value:'"zm"'},{value:'"zw"'}]}},value:{defaultValue:null,description:"Unique identifier for this chip. Used for selection tracking",name:"value",required:!0,type:{name:"string"}},children:{defaultValue:null,description:"Content to display inside the chip",name:"children",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"}]}},counter:{defaultValue:null,description:"Optional numeric counter to display alongside the chip label",name:"counter",required:!1,type:{name:"enum",value:[{value:"number"}]}},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: HTMLButtonElement | null) => void"},{value:"RefObject<HTMLButtonElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}export{b as M,y as a};
|
package/dist/assets/{MultiSelectChips.stories-dUDp4Xc_.js → MultiSelectChips.stories-C-itbYdR.js}
RENAMED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as a}from"./jsx-runtime-BTJTZTIL.js";import{r as Ye}from"./index-Cb9e4tly.js";import{M as p,a as h}from"./MultiSelectChips-BqFtbDlW.js";import{F as T,a as Je,b as Qe,c as ta}from"./TokyoUIAvailability7LateNight-TgMFD5Or.js";import{F as na}from"./TokyoUIEmojiFrowning-DwuiVRut.js";import{F as ia}from"./index-DWSmmBvQ.js";import{L as g}from"./LayoutFlex-DaVVk5XW.js";import{T as E}from"./Text-BeTVFZDV.js";import{L as sa}from"./Link-Cc9tpbxA.js";import{d as oa}from"./styled-components.browser.esm-COuAnjOv.js";import{H as la}from"./Heading-AcDVTZ-_.js";import{f as ra,r as Xe,w as u,e,u as r,a as V}from"./index-Dk_MCKuE.js";import{T as B}from"./Tooltip-_f_f-kTL.js";import{B as ca}from"./Button-C0ATLgoL.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./useControllableState-DKskwY-e.js";import"./createRequiredContext-xfj07Y2n.js";import"./Icon-wspFbxjK.js";import"./text-accent-DvyJpEME.js";import"./classNames-9hsFPPZv.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-BT0Aq7PA.js";import"./componentNames-k0j3gHgH.js";import"./index-qlqSh81O.js";import"./defaults-czRWsFkX.js";import"./CountryFlag-B0HpjQWe.js";import"./useMergeRefs-D_RfOOSs.js";import"./tslib.es6-C7pnyCjR.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./layout-relative.module-uOnIKnjS.js";import"./text-centered-BFb64PJw.js";import"./useHostname-PsilflFC.js";import"./PortalElementProvider-BAqvxZzH.js";import"./index-Cc-bXjHe.js";import"./index-BqT8peiM.js";import"./index-s7KTOhR7.js";import"./index-BPCsOyHr.js";import"./index-BV2iXjxm.js";import"./index-2TVOn9du.js";import"./index-DR63UjCN.js";import"./ButtonBase-6aCRtC4n.js";import"./Spinner-CUtAzzFK.js";import"./useMergeRefs-SFH7Mw4x.js";import"./index-CC6DAVyL.js";const it={title:"components/Chips/MultiSelectChips",component:h,subcomponents:{MultiSelectChipsItem:p},parameters:{layout:"padded"},args:{"aria-label":"Select skills",defaultValue:["vocabulary"],onValueChange:ra(),items:[{value:"vocabulary",label:"Vocabulary"},{value:"speaking",label:"Speaking"},{value:"listening",label:"Listening"},{value:"reading",label:"Reading"}]},beforeEach:()=>{Xe()}},v={play:async({canvasElement:i,step:t,args:n})=>{const s=u(i),o=s.getByRole("option",{name:"Vocabulary"}),l=s.getByRole("option",{name:"Speaking"}),c=s.getByRole("option",{name:"Listening"}),d=s.getByRole("option",{name:"Reading"});await t("Render chips with default value",async()=>{e(o).toHaveAttribute("aria-selected","true"),e(l).toHaveAttribute("aria-selected","false"),e(c).toHaveAttribute("aria-selected","false"),e(d).toHaveAttribute("aria-selected","false")}),await t("Click on the chip to select it",async()=>{await r.click(l),e(n.onValueChange).toHaveBeenCalledWith(["vocabulary","speaking"]),e(o).toHaveAttribute("aria-selected","true"),e(l).toHaveAttribute("aria-selected","true"),e(c).toHaveAttribute("aria-selected","false"),e(d).toHaveAttribute("aria-selected","false")}),await t("Click on the chip to deselect it",async()=>{await r.click(o),e(n.onValueChange).toHaveBeenCalledWith(["speaking"]),e(o).toHaveAttribute("aria-selected","false"),e(l).toHaveAttribute("aria-selected","true"),e(c).toHaveAttribute("aria-selected","false"),e(d).toHaveAttribute("aria-selected","false")})}};let L;const y={render:function({defaultValue:t,...n}){const[s,o]=Ye.useState(t);L=o;const l=c=>{var d;o(c),(d=n.onValueChange)==null||d.call(n,c)};return a.jsx(h,{...n,value:s,onValueChange:l})},play:async({canvasElement:i,step:t,args:n})=>{const s=u(i),o=s.getByRole("option",{name:"Vocabulary"}),l=s.getByRole("option",{name:"Speaking"}),c=s.getByRole("option",{name:"Listening"}),d=s.getByRole("option",{name:"Reading"});await t("Render chips with default value",async()=>{e(o).toHaveAttribute("aria-selected","true"),e(l).toHaveAttribute("aria-selected","false"),e(c).toHaveAttribute("aria-selected","false"),e(d).toHaveAttribute("aria-selected","false")}),await t("Click on the chip to select it",async()=>{await r.click(l),e(n.onValueChange).toHaveBeenCalledWith(["vocabulary","speaking"]),e(o).toHaveAttribute("aria-selected","true"),e(l).toHaveAttribute("aria-selected","true"),e(c).toHaveAttribute("aria-selected","false"),e(d).toHaveAttribute("aria-selected","false")}),await t("Click on the chip to deselect it",async()=>{await r.click(o),e(n.onValueChange).toHaveBeenCalledWith(["speaking"]),e(o).toHaveAttribute("aria-selected","false"),e(l).toHaveAttribute("aria-selected","true"),e(c).toHaveAttribute("aria-selected","false"),e(d).toHaveAttribute("aria-selected","false")}),await t("Change the value externally",async()=>{Xe(),L(["vocabulary","reading"]),await V(()=>{e(n.onValueChange).not.toHaveBeenCalled(),e(o).toHaveAttribute("aria-selected","true"),e(l).toHaveAttribute("aria-selected","false"),e(c).toHaveAttribute("aria-selected","false"),e(d).toHaveAttribute("aria-selected","true")})})}},m={args:{items:[{value:"vocabulary",label:"Vocabulary"},{value:"speaking",label:"Speaking",disabled:!0},{value:"listening",label:"Listening",disabled:!0},{value:"reading",label:"Reading"}]},play:async({canvasElement:i,step:t,args:n})=>{const s=u(i),o=s.getByRole("option",{name:"Speaking"}),l=s.getByRole("option",{name:"Vocabulary"});await t("Disabled chip must have disabled attribute",async()=>{e(o).toBeDisabled()}),await t("Disabled chip must not be selectable",async()=>{await r.click(o),e(n.onValueChange).not.toHaveBeenCalled(),e(l).toHaveAttribute("aria-selected","true")})}},b={args:{"aria-label":"Select availabilities",defaultValue:["morning"],items:[{value:"morning",label:"Morning",icon:a.jsx(T,{})},{value:"afternoon",label:"Afternoon",icon:a.jsx(Je,{})},{value:"evening",label:"Evening",icon:a.jsx(Qe,{})}]},play:async({canvasElement:i,step:t})=>{const s=u(i).getByRole("option",{name:"Morning"}),o=u(s).getByTestId("chip-icon");await t("Chip should render an icon when `icon` prop is passed",async()=>{e(o).toBeVisible()})}},w={args:{"aria-label":"Select languages to learn",defaultValue:["english"],items:[{value:"english",label:"English",counter:1247},{value:"spanish",label:"Spanish",counter:892},{value:"french",label:"French",counter:534},{value:"german",label:"German",counter:421},{value:"italian",label:"Italian",counter:287},{value:"portuguese",label:"Portuguese",counter:156}]},play:async({canvasElement:i,step:t})=>{const s=u(i).getByRole("option",{name:/^English/}),o=u(s).getByTestId("chip-counter");await t("Chip should render a counter when `counter` prop is passed",async()=>{e(o).toBeVisible(),e(o).toHaveTextContent("1247")})}},f={args:{"aria-label":"Select countries",defaultValue:["ua"],items:[{value:"ua",label:"Ukraine",countryFlagCode:"ua"},{value:"gb",label:"United Kingdom",countryFlagCode:"gb"},{value:"it",label:"Italy",countryFlagCode:"it"},{value:"es",label:"Spain",countryFlagCode:"es"},{value:"au",label:"Australia",countryFlagCode:"au"},{value:"br",label:"Brazil",countryFlagCode:"br"},{value:"eg",label:"Egypt",countryFlagCode:"eg"}]},play:async({canvasElement:i,step:t})=>{const s=u(i).getByRole("option",{name:"Ukraine"}),o=u(s).getByTestId("chip-country-flag");await t("Chip should render a flag when `flagCountryCode` prop is passed",async()=>{e(o).toBeVisible()})}},k={args:{"aria-label":"Fancy chips",items:[{value:"counter+icon",label:"Icon + Counter",icon:a.jsx(T,{}),counter:1247},{value:"counter+flag",label:"Flag + Counter",countryFlagCode:"ua",counter:1247},{value:"icon+flag",label:"Icon + Flag",icon:a.jsx(T,{}),countryFlagCode:"ua"}]},play:async({canvasElement:i})=>{const t=u(i),n=u(t.getByRole("option",{name:"Icon + Flag"}));e(n.getByTestId("chip-icon")).toBeVisible(),e(n.queryByTestId("chip-country-flag")).not.toBeInTheDocument()}},x=["2025-08-15T10:00Z","2025-08-16T12:00Z","2025-08-17T14:00Z"],C={args:{orientation:"vertical","aria-label":"Select time slots",defaultValue:x,items:x.map(i=>({value:i,label:a.jsx(ia,{weekday:"short",day:"numeric",month:"short",hour:"2-digit",minute:"2-digit",value:i}),dataset:{testid:i}}))},decorators:[i=>a.jsx("div",{style:{width:300,margin:"0 auto"},children:a.jsx(i,{})})],play:async({canvasElement:i,step:t})=>{const n=u(i),s=n.getByRole("listbox",{name:"Select time slots"}),o=n.getByTestId(x[0]),l=n.getByTestId(x[1]),c=n.getByTestId(x[2]);await t('Vertical chips should have `aria-orientation="vertical"`',async()=>{e(s).toHaveAttribute("aria-orientation","vertical")}),await t("Focus first chip",async()=>{o.focus()}),await t("Arrow down should focus second chip",async()=>{await r.keyboard("{ArrowDown}"),e(l).toHaveFocus()}),await t("Arrow down should focus third chip",async()=>{await r.keyboard("{ArrowDown}"),e(c).toHaveFocus()}),await t("Arrow down should focus first chip",async()=>{await r.keyboard("{ArrowDown}"),e(o).toHaveFocus()}),await t("Arrow up should focus third chip",async()=>{await r.keyboard("{ArrowUp}"),e(c).toHaveFocus()})}},S={render:i=>a.jsxs(g,{gap:"12",children:[a.jsx(h,{...i}),a.jsx(ca,{variant:"tertiary",size:"small",onClick:()=>alert("Show all"),children:"Show all"})]})},ea=[{value:"vocabulary",label:"Vocabulary"},{value:"speaking",label:"Speaking"},{value:"listening",label:"Listening"},{value:"reading",label:"Reading"},{value:"writing",label:"Writing"},{value:"grammar",label:"Grammar"}],ua=[{value:"monday",label:"Monday"},{value:"tuesday",label:"Tuesday"},{value:"wednesday",label:"Wednesday"},{value:"thursday",label:"Thursday"},{value:"friday",label:"Friday"},{value:"saturday",label:"Saturday"},{value:"sunday",label:"Sunday"}],da=[{value:"morning",label:"Morning (6-12)",icon:a.jsx(T,{})},{value:"afternoon",label:"Afternoon (12-18)",icon:a.jsx(Je,{})},{value:"evening",label:"Evening (18-0)",icon:a.jsx(Qe,{})},{value:"night",label:"Night (0-6)",icon:a.jsx(ta,{})}],I={render:function(t){return a.jsxs(g,{direction:"column",alignItems:"stretch",gap:"64",children:[a.jsxs(g,{direction:"column",alignItems:"stretch",gap:"16",children:[a.jsx(E,{variant:"large-semibold",children:"What skills do you want to focus on?"}),a.jsx(h,{"aria-label":"Selected skills",items:ea})]}),a.jsxs(g,{direction:"column",alignItems:"stretch",gap:"16",children:[a.jsx(E,{variant:"large-semibold",children:"Which days work best for you?"}),a.jsx(h,{"aria-label":"Selected days of the week",items:ua})]}),a.jsxs(g,{direction:"column",alignItems:"stretch",gap:"16",children:[a.jsx(E,{variant:"large-semibold",children:"What times of day work for you?"}),a.jsx(h,{"aria-label":"Selected times of day",items:da})]})]})},play:async({canvasElement:i,step:t})=>{const n=u(i),s=u(n.getByRole("listbox",{name:"Selected skills"})),o=u(n.getByRole("listbox",{name:"Selected days of the week"})),l=s.getByRole("option",{name:"Vocabulary"}),c=s.getByRole("option",{name:"Speaking"}),d=s.getByRole("option",{name:"Grammar"}),aa=o.getByRole("option",{name:"Monday"});await t("Tab once to enter the component",async()=>{await r.tab(),e(l).toHaveFocus()}),await t("Next tab should focus second chip",async()=>{await r.tab(),e(aa).toHaveFocus()}),await t("Shift+Tab should focus first chips group again",async()=>{await r.tab({shift:!0}),e(l).toHaveFocus()}),await t("Right arrow should focus next chip in the group",async()=>{await r.keyboard("{ArrowRight}"),e(c).toHaveFocus()}),await t("Left arrow should focus previous chip in the group",async()=>{await r.keyboard("{ArrowLeft}"),e(l).toHaveFocus()}),await t("Left arrow should focus last chip if first chip is focused",async()=>{await r.keyboard("{ArrowLeft}"),e(d).toHaveFocus()}),await t("Right arrow should focus first chip if last chip is focused",async()=>{await r.keyboard("{ArrowRight}"),e(l).toHaveFocus()}),await t("Focus last chip",async()=>{await r.keyboard("{ArrowLeft}")}),await t("Tab to the next group",async()=>{await r.tab()}),await t("Shift+Tab to return to the first group, the last focused chip should be focused",async()=>{await r.tab({shift:!0}),e(d).toHaveFocus()})}},pa=oa.ul`
|
|
1
|
+
import{j as a}from"./jsx-runtime-BTJTZTIL.js";import{r as Ye}from"./index-Cb9e4tly.js";import{M as p,a as h}from"./MultiSelectChips-x8-aNb7S.js";import{F as T,a as Je,b as Qe,c as ta}from"./TokyoUIAvailability7LateNight-TgMFD5Or.js";import{F as na}from"./TokyoUIEmojiFrowning-DwuiVRut.js";import{F as ia}from"./index-DWSmmBvQ.js";import{L as g}from"./LayoutFlex-BQNwfAZ8.js";import{T as E}from"./Text-Bj4lCtRc.js";import{L as sa}from"./Link-DNHygNgT.js";import{d as oa}from"./styled-components.browser.esm-COuAnjOv.js";import{H as la}from"./Heading-O7e38RDd.js";import{f as ra,r as Xe,w as u,e,u as r,a as V}from"./index-Dk_MCKuE.js";import{T as B}from"./Tooltip-_f_f-kTL.js";import{B as ca}from"./Button-DixvkhBo.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./useControllableState-DKskwY-e.js";import"./createRequiredContext-ChMx7FdN.js";import"./Icon-Dh4gq7rV.js";import"./text-accent-DvyJpEME.js";import"./classNames-9hsFPPZv.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-BT0Aq7PA.js";import"./componentNames-k0j3gHgH.js";import"./index-qlqSh81O.js";import"./defaults-czRWsFkX.js";import"./CountryFlag-BhibdOJ2.js";import"./useMergeRefs-D_RfOOSs.js";import"./tslib.es6-C7pnyCjR.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./layout-relative.module-uOnIKnjS.js";import"./text-centered-BFb64PJw.js";import"./useHostname-PsilflFC.js";import"./PortalElementProvider-BAqvxZzH.js";import"./index-Cc-bXjHe.js";import"./index-BqT8peiM.js";import"./index-s7KTOhR7.js";import"./index-BPCsOyHr.js";import"./index-BV2iXjxm.js";import"./index-2TVOn9du.js";import"./index-DR63UjCN.js";import"./ButtonBase-DTqpenrU.js";import"./Spinner-CUtAzzFK.js";import"./useMergeRefs-SFH7Mw4x.js";import"./index-CC6DAVyL.js";const it={title:"components/Chips/MultiSelectChips",component:h,subcomponents:{MultiSelectChipsItem:p},parameters:{layout:"padded"},args:{"aria-label":"Select skills",defaultValue:["vocabulary"],onValueChange:ra(),items:[{value:"vocabulary",label:"Vocabulary"},{value:"speaking",label:"Speaking"},{value:"listening",label:"Listening"},{value:"reading",label:"Reading"}]},beforeEach:()=>{Xe()}},v={play:async({canvasElement:i,step:t,args:n})=>{const s=u(i),o=s.getByRole("option",{name:"Vocabulary"}),l=s.getByRole("option",{name:"Speaking"}),c=s.getByRole("option",{name:"Listening"}),d=s.getByRole("option",{name:"Reading"});await t("Render chips with default value",async()=>{e(o).toHaveAttribute("aria-selected","true"),e(l).toHaveAttribute("aria-selected","false"),e(c).toHaveAttribute("aria-selected","false"),e(d).toHaveAttribute("aria-selected","false")}),await t("Click on the chip to select it",async()=>{await r.click(l),e(n.onValueChange).toHaveBeenCalledWith(["vocabulary","speaking"]),e(o).toHaveAttribute("aria-selected","true"),e(l).toHaveAttribute("aria-selected","true"),e(c).toHaveAttribute("aria-selected","false"),e(d).toHaveAttribute("aria-selected","false")}),await t("Click on the chip to deselect it",async()=>{await r.click(o),e(n.onValueChange).toHaveBeenCalledWith(["speaking"]),e(o).toHaveAttribute("aria-selected","false"),e(l).toHaveAttribute("aria-selected","true"),e(c).toHaveAttribute("aria-selected","false"),e(d).toHaveAttribute("aria-selected","false")})}};let L;const y={render:function({defaultValue:t,...n}){const[s,o]=Ye.useState(t);L=o;const l=c=>{var d;o(c),(d=n.onValueChange)==null||d.call(n,c)};return a.jsx(h,{...n,value:s,onValueChange:l})},play:async({canvasElement:i,step:t,args:n})=>{const s=u(i),o=s.getByRole("option",{name:"Vocabulary"}),l=s.getByRole("option",{name:"Speaking"}),c=s.getByRole("option",{name:"Listening"}),d=s.getByRole("option",{name:"Reading"});await t("Render chips with default value",async()=>{e(o).toHaveAttribute("aria-selected","true"),e(l).toHaveAttribute("aria-selected","false"),e(c).toHaveAttribute("aria-selected","false"),e(d).toHaveAttribute("aria-selected","false")}),await t("Click on the chip to select it",async()=>{await r.click(l),e(n.onValueChange).toHaveBeenCalledWith(["vocabulary","speaking"]),e(o).toHaveAttribute("aria-selected","true"),e(l).toHaveAttribute("aria-selected","true"),e(c).toHaveAttribute("aria-selected","false"),e(d).toHaveAttribute("aria-selected","false")}),await t("Click on the chip to deselect it",async()=>{await r.click(o),e(n.onValueChange).toHaveBeenCalledWith(["speaking"]),e(o).toHaveAttribute("aria-selected","false"),e(l).toHaveAttribute("aria-selected","true"),e(c).toHaveAttribute("aria-selected","false"),e(d).toHaveAttribute("aria-selected","false")}),await t("Change the value externally",async()=>{Xe(),L(["vocabulary","reading"]),await V(()=>{e(n.onValueChange).not.toHaveBeenCalled(),e(o).toHaveAttribute("aria-selected","true"),e(l).toHaveAttribute("aria-selected","false"),e(c).toHaveAttribute("aria-selected","false"),e(d).toHaveAttribute("aria-selected","true")})})}},m={args:{items:[{value:"vocabulary",label:"Vocabulary"},{value:"speaking",label:"Speaking",disabled:!0},{value:"listening",label:"Listening",disabled:!0},{value:"reading",label:"Reading"}]},play:async({canvasElement:i,step:t,args:n})=>{const s=u(i),o=s.getByRole("option",{name:"Speaking"}),l=s.getByRole("option",{name:"Vocabulary"});await t("Disabled chip must have disabled attribute",async()=>{e(o).toBeDisabled()}),await t("Disabled chip must not be selectable",async()=>{await r.click(o),e(n.onValueChange).not.toHaveBeenCalled(),e(l).toHaveAttribute("aria-selected","true")})}},b={args:{"aria-label":"Select availabilities",defaultValue:["morning"],items:[{value:"morning",label:"Morning",icon:a.jsx(T,{})},{value:"afternoon",label:"Afternoon",icon:a.jsx(Je,{})},{value:"evening",label:"Evening",icon:a.jsx(Qe,{})}]},play:async({canvasElement:i,step:t})=>{const s=u(i).getByRole("option",{name:"Morning"}),o=u(s).getByTestId("chip-icon");await t("Chip should render an icon when `icon` prop is passed",async()=>{e(o).toBeVisible()})}},w={args:{"aria-label":"Select languages to learn",defaultValue:["english"],items:[{value:"english",label:"English",counter:1247},{value:"spanish",label:"Spanish",counter:892},{value:"french",label:"French",counter:534},{value:"german",label:"German",counter:421},{value:"italian",label:"Italian",counter:287},{value:"portuguese",label:"Portuguese",counter:156}]},play:async({canvasElement:i,step:t})=>{const s=u(i).getByRole("option",{name:/^English/}),o=u(s).getByTestId("chip-counter");await t("Chip should render a counter when `counter` prop is passed",async()=>{e(o).toBeVisible(),e(o).toHaveTextContent("1247")})}},f={args:{"aria-label":"Select countries",defaultValue:["ua"],items:[{value:"ua",label:"Ukraine",countryFlagCode:"ua"},{value:"gb",label:"United Kingdom",countryFlagCode:"gb"},{value:"it",label:"Italy",countryFlagCode:"it"},{value:"es",label:"Spain",countryFlagCode:"es"},{value:"au",label:"Australia",countryFlagCode:"au"},{value:"br",label:"Brazil",countryFlagCode:"br"},{value:"eg",label:"Egypt",countryFlagCode:"eg"}]},play:async({canvasElement:i,step:t})=>{const s=u(i).getByRole("option",{name:"Ukraine"}),o=u(s).getByTestId("chip-country-flag");await t("Chip should render a flag when `flagCountryCode` prop is passed",async()=>{e(o).toBeVisible()})}},k={args:{"aria-label":"Fancy chips",items:[{value:"counter+icon",label:"Icon + Counter",icon:a.jsx(T,{}),counter:1247},{value:"counter+flag",label:"Flag + Counter",countryFlagCode:"ua",counter:1247},{value:"icon+flag",label:"Icon + Flag",icon:a.jsx(T,{}),countryFlagCode:"ua"}]},play:async({canvasElement:i})=>{const t=u(i),n=u(t.getByRole("option",{name:"Icon + Flag"}));e(n.getByTestId("chip-icon")).toBeVisible(),e(n.queryByTestId("chip-country-flag")).not.toBeInTheDocument()}},x=["2025-08-15T10:00Z","2025-08-16T12:00Z","2025-08-17T14:00Z"],C={args:{orientation:"vertical","aria-label":"Select time slots",defaultValue:x,items:x.map(i=>({value:i,label:a.jsx(ia,{weekday:"short",day:"numeric",month:"short",hour:"2-digit",minute:"2-digit",value:i}),dataset:{testid:i}}))},decorators:[i=>a.jsx("div",{style:{width:300,margin:"0 auto"},children:a.jsx(i,{})})],play:async({canvasElement:i,step:t})=>{const n=u(i),s=n.getByRole("listbox",{name:"Select time slots"}),o=n.getByTestId(x[0]),l=n.getByTestId(x[1]),c=n.getByTestId(x[2]);await t('Vertical chips should have `aria-orientation="vertical"`',async()=>{e(s).toHaveAttribute("aria-orientation","vertical")}),await t("Focus first chip",async()=>{o.focus()}),await t("Arrow down should focus second chip",async()=>{await r.keyboard("{ArrowDown}"),e(l).toHaveFocus()}),await t("Arrow down should focus third chip",async()=>{await r.keyboard("{ArrowDown}"),e(c).toHaveFocus()}),await t("Arrow down should focus first chip",async()=>{await r.keyboard("{ArrowDown}"),e(o).toHaveFocus()}),await t("Arrow up should focus third chip",async()=>{await r.keyboard("{ArrowUp}"),e(c).toHaveFocus()})}},S={render:i=>a.jsxs(g,{gap:"12",children:[a.jsx(h,{...i}),a.jsx(ca,{variant:"tertiary",size:"small",onClick:()=>alert("Show all"),children:"Show all"})]})},ea=[{value:"vocabulary",label:"Vocabulary"},{value:"speaking",label:"Speaking"},{value:"listening",label:"Listening"},{value:"reading",label:"Reading"},{value:"writing",label:"Writing"},{value:"grammar",label:"Grammar"}],ua=[{value:"monday",label:"Monday"},{value:"tuesday",label:"Tuesday"},{value:"wednesday",label:"Wednesday"},{value:"thursday",label:"Thursday"},{value:"friday",label:"Friday"},{value:"saturday",label:"Saturday"},{value:"sunday",label:"Sunday"}],da=[{value:"morning",label:"Morning (6-12)",icon:a.jsx(T,{})},{value:"afternoon",label:"Afternoon (12-18)",icon:a.jsx(Je,{})},{value:"evening",label:"Evening (18-0)",icon:a.jsx(Qe,{})},{value:"night",label:"Night (0-6)",icon:a.jsx(ta,{})}],I={render:function(t){return a.jsxs(g,{direction:"column",alignItems:"stretch",gap:"64",children:[a.jsxs(g,{direction:"column",alignItems:"stretch",gap:"16",children:[a.jsx(E,{variant:"large-semibold",children:"What skills do you want to focus on?"}),a.jsx(h,{"aria-label":"Selected skills",items:ea})]}),a.jsxs(g,{direction:"column",alignItems:"stretch",gap:"16",children:[a.jsx(E,{variant:"large-semibold",children:"Which days work best for you?"}),a.jsx(h,{"aria-label":"Selected days of the week",items:ua})]}),a.jsxs(g,{direction:"column",alignItems:"stretch",gap:"16",children:[a.jsx(E,{variant:"large-semibold",children:"What times of day work for you?"}),a.jsx(h,{"aria-label":"Selected times of day",items:da})]})]})},play:async({canvasElement:i,step:t})=>{const n=u(i),s=u(n.getByRole("listbox",{name:"Selected skills"})),o=u(n.getByRole("listbox",{name:"Selected days of the week"})),l=s.getByRole("option",{name:"Vocabulary"}),c=s.getByRole("option",{name:"Speaking"}),d=s.getByRole("option",{name:"Grammar"}),aa=o.getByRole("option",{name:"Monday"});await t("Tab once to enter the component",async()=>{await r.tab(),e(l).toHaveFocus()}),await t("Next tab should focus second chip",async()=>{await r.tab(),e(aa).toHaveFocus()}),await t("Shift+Tab should focus first chips group again",async()=>{await r.tab({shift:!0}),e(l).toHaveFocus()}),await t("Right arrow should focus next chip in the group",async()=>{await r.keyboard("{ArrowRight}"),e(c).toHaveFocus()}),await t("Left arrow should focus previous chip in the group",async()=>{await r.keyboard("{ArrowLeft}"),e(l).toHaveFocus()}),await t("Left arrow should focus last chip if first chip is focused",async()=>{await r.keyboard("{ArrowLeft}"),e(d).toHaveFocus()}),await t("Right arrow should focus first chip if last chip is focused",async()=>{await r.keyboard("{ArrowRight}"),e(l).toHaveFocus()}),await t("Focus last chip",async()=>{await r.keyboard("{ArrowLeft}")}),await t("Tab to the next group",async()=>{await r.tab()}),await t("Shift+Tab to return to the first group, the last focused chip should be focused",async()=>{await r.tab({shift:!0}),e(d).toHaveFocus()})}},pa=oa.ul`
|
|
2
2
|
all: unset;
|
|
3
3
|
list-style: none;
|
|
4
4
|
display: flex;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import{j as u}from"./jsx-runtime-BTJTZTIL.js";import{r as V}from"./index-Cb9e4tly.js";import{F as g}from"./FormControl-BIPOTQBb.js";import{w as H}from"./componentNames-k0j3gHgH.js";import{I as L}from"./Input-p1USf21q.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:{dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},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"}]}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLDivElement> & MouseEventHandler<HTMLInputElement>"}]}},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"}]}},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"}]}},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"}]}},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"}]}},hasError:{defaultValue:null,description:"Whether the field has an error.\n@deprecated Use `error` prop to explicitly 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
|
+
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"}]}},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>"}]}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},name:{defaultValue:null,description:"",name:"name",required:!1,type:{name:"enum",value:[{value:"string"}]}},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>"}]}},icon:{defaultValue:null,description:"",name:"icon",required:!1,type:{name:"enum",value:[{value:"ReactElement<any, string | JSXElementConstructor<any>>"}]}},button:{defaultValue:null,description:"",name:"button",required:!1,type:{name:"enum",value:[{value:"ReactElement<any, string | JSXElementConstructor<any>>"}]}},placeholder:{defaultValue:null,description:"",name:"placeholder",required:!1,type:{name:"enum",value:[{value:"string"}]}},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-BTJTZTIL.js";import{r as re}from"./index-Cb9e4tly.js";import{a as se}from"./index-B-lxVbXh.js";import{f as r,w as x,e as n,u as w}from"./index-Dk_MCKuE.js";import{F as te}from"./TokyoUIPhone-CvuBM6jb.js";import{F as ie}from"./TokyoUIAttach-BWl7Jkq1.js";import{I as ne}from"./Icon-
|
|
1
|
+
import{j as g}from"./jsx-runtime-BTJTZTIL.js";import{r as re}from"./index-Cb9e4tly.js";import{a as se}from"./index-B-lxVbXh.js";import{f as r,w as x,e as n,u as w}from"./index-Dk_MCKuE.js";import{F as te}from"./TokyoUIPhone-CvuBM6jb.js";import{F as ie}from"./TokyoUIAttach-BWl7Jkq1.js";import{I as ne}from"./Icon-Dh4gq7rV.js";import{N as ae}from"./NumberField-D2w4cJKT.js";import{F as ce}from"./FieldButton-BgIvx-8D.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./v4-CtRu48qb.js";import"./text-accent-DvyJpEME.js";import"./classNames-9hsFPPZv.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-BT0Aq7PA.js";import"./componentNames-k0j3gHgH.js";import"./index-qlqSh81O.js";import"./defaults-czRWsFkX.js";import"./FormControl-BIPOTQBb.js";import"./index-DWSmmBvQ.js";import"./tslib.es6-C7pnyCjR.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./message-CSdaKtIj.js";import"./index-Cc-bXjHe.js";import"./Input-p1USf21q.js";import"./InputContainer-B1hqJyx0.js";const qe={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,
|