@preply/ds-docs 5.2.0 → 5.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/{00.LayoutFlex.stories-CU_PBheh.js → 00.LayoutFlex.stories-DziNsvND.js} +1 -1
- package/dist/assets/{00.applications-k4E6Kp9W.js → 00.applications-CfdAX6zp.js} +1 -1
- package/dist/assets/{00.favicons.guide-li3I_F6g.js → 00.favicons.guide-TFQ_QGH8.js} +1 -1
- package/dist/assets/{00.token-explorer-DPyy8Qse.js → 00.token-explorer-Dih-Pw-i.js} +1 -1
- package/dist/assets/{00.using-responsive-props-DvJjPn4l.js → 00.using-responsive-props-CiPSgnLs.js} +1 -1
- package/dist/assets/{01.semantic-tokens-BJFCWksP.js → 01.semantic-tokens-BilArNNI.js} +1 -1
- package/dist/assets/{01.using-shorthand-props-7TTqmP-1.js → 01.using-shorthand-props-Sbq3I8ie.js} +1 -1
- package/dist/assets/{10.Combinations.stories-DSSBuYKH.js → 10.Combinations.stories-BA2P_--4.js} +1 -1
- package/dist/assets/{10.fonts.guide-DkLccLAL.js → 10.fonts.guide-6c2twxLe.js} +1 -1
- package/dist/assets/{10.ssr-CefkGBfp.js → 10.ssr-DsFrbjyY.js} +1 -1
- package/dist/assets/{11.ssr.app-router-Dl5IwciZ.js → 11.ssr.app-router-Bq0XjlUK.js} +1 -1
- package/dist/assets/{20.libraries-Df17azd4.js → 20.libraries-DuLqrS-7.js} +1 -1
- package/dist/assets/{30.icons.explorer-BcmjbQML.js → 30.icons.explorer-DZ7hOOqz.js} +1 -1
- package/dist/assets/{30.storybook-Bj0tQN0r.js → 30.storybook-C6QKDTCh.js} +1 -1
- package/dist/assets/{40.illustrations.explorer-DuUnaQJ6.js → 40.illustrations.explorer-CEF2Fc0h.js} +1 -1
- package/dist/assets/{90.advanced-DMVmfSdF.js → 90.advanced-DXMNWOcI.js} +1 -1
- package/dist/assets/{Accordion-D1vIqcq0.js → Accordion-VvNDKvME.js} +3 -3
- package/dist/assets/{Accordion.stories-DRHVlfh4.js → Accordion.stories-D8YFD-5m.js} +1 -1
- package/dist/assets/{Accordion.tests.stories-D0LPcnLm.js → Accordion.tests.stories-BMXcHw7d.js} +1 -1
- package/dist/assets/{AlertDialog.stories-t7rvOrIt.js → AlertDialog.stories-soyDmIgZ.js} +1 -1
- package/dist/assets/{Avatar-pYo4pD9f.js → Avatar-CDcgvepQ.js} +1 -1
- package/dist/assets/{Avatar.stories-DW2TYQqg.js → Avatar.stories-Bk7IcP2V.js} +1 -1
- package/dist/assets/{AvatarWithStatus.stories-DJHFLq1b.js → AvatarWithStatus.stories-ChuxFeXX.js} +4 -4
- package/dist/assets/{Badge.stories-BDgXsOQ3.js → Badge.stories-BlE7-5jC.js} +2 -2
- package/dist/assets/{Box.stories-CvBcavQ9.js → Box.stories-D3HsHvGa.js} +1 -1
- package/dist/assets/{BubbleCounter.stories-DRndNMcM.js → BubbleCounter.stories-CSP0211x.js} +1 -1
- package/dist/assets/{Button-r7N6Ff_n.js → Button-CV3MrNle.js} +2 -2
- package/dist/assets/{Button.stories-Cbyv5GRx.js → Button.stories-EH59ZSFw.js} +1 -1
- package/dist/assets/{ButtonBase-zwYgfoSw.js → ButtonBase-BpIWpxNP.js} +1 -1
- package/dist/assets/{Checkbox.stories-eRtAlYcC.js → Checkbox.stories-CmK5oHX3.js} +1 -1
- package/dist/assets/{Chips.stories-BR1h8Ayk.js → Chips.stories-CM5mElYE.js} +1 -1
- package/dist/assets/{Color-YHDXOIA2-9NBVO4CO.js → Color-YHDXOIA2-BjHwp_w2.js} +1 -1
- package/dist/assets/{ComposingPopovers.stories-CKLHzgB4.js → ComposingPopovers.stories-OVc6plo8.js} +1 -1
- package/dist/assets/{CountryFlag-ykx10eak.js → CountryFlag-DeifQHMo.js} +5 -5
- package/dist/assets/{CountryFlag.stories-Dsk1y884.js → CountryFlag.stories-8PMPd0Et.js} +1 -1
- package/dist/assets/{CountryFlag.test.stories-kaPfZDPu.js → CountryFlag.test.stories-CnmUo893.js} +1 -1
- package/dist/assets/{Dialog.stories-BgVBHEFn.js → Dialog.stories-e9MB7jV5.js} +1 -1
- package/dist/assets/DismissibleChips-gzmntal_.js +1 -0
- package/dist/assets/{DismissibleChips.stories-BDH4JLAT.js → DismissibleChips.stories-Cv9T1z5x.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-CrRewIwS.js → DocsRenderer-CFRXHY34-CJvyJnri.js} +1 -1
- package/dist/assets/{DropdownMenu-BVJcXVVs.js → DropdownMenu-CB-FxkIk.js} +95 -95
- package/dist/assets/{DropdownMenu.stories-DDZTqgtd.js → DropdownMenu.stories-DQ9Anz0c.js} +1 -1
- package/dist/assets/{FormControl.stories-By_j4CEK.js → FormControl.stories-BuYWW2sc.js} +1 -1
- package/dist/assets/{Heading-D-ou4j7h.js → Heading-CTiQg0ko.js} +2 -2
- package/dist/assets/{Heading.stories-DBQ5k_Gi.js → Heading.stories-CdaUOFTO.js} +1 -1
- package/dist/assets/{Icon-C9LCNP6i.js → Icon-5QESEDp5.js} +1 -1
- package/dist/assets/{Icon-RSC-CV1ghZyJ.js → Icon-RSC-CY2tw9Wa.js} +1 -1
- package/dist/assets/{Icon.stories-BY7I3NYo.js → Icon.stories-BDsCeC5v.js} +1 -1
- package/dist/assets/IconButton-DSKTwXgX.js +8 -0
- package/dist/assets/{Input-CkgW02B0.js → Input-CBd7qXZ8.js} +3 -3
- package/dist/assets/{IntegrationWithReactHookForm.stories-CBT754Nh.js → IntegrationWithReactHookForm.stories-CAgsKvvy.js} +1 -1
- package/dist/assets/{IntlFormattedCurrency.stories-DFu7hp1T.js → IntlFormattedCurrency.stories-a__ae3r7.js} +1 -1
- package/dist/assets/{IntlFormattedDateTime.stories-BNffxVaH.js → IntlFormattedDateTime.stories-BhfMf2LB.js} +1 -1
- package/dist/assets/{LayoutFlex-CnhOGGxA.js → LayoutFlex--W1D5e-w.js} +1 -1
- package/dist/assets/{LayoutFlexItem-BLtc7R2u.js → LayoutFlexItem-ZIv-8Mnt.js} +1 -1
- package/dist/assets/{LayoutGrid-CMfLnkDN.js → LayoutGrid-C__NlCjJ.js} +1 -1
- package/dist/assets/{LayoutGrid.stories-BeDPVs_l.js → LayoutGrid.stories-D9GOaVZa.js} +1 -1
- package/dist/assets/{LayoutGridItem-BTIocUYE.js → LayoutGridItem-BntIYIDx.js} +1 -1
- package/dist/assets/{Link-8C9V_O3w.js → Link-CLsuYZJn.js} +1 -1
- package/dist/assets/{Link.stories-Bvgdk63v.js → Link.stories-Bm06h16e.js} +1 -1
- package/dist/assets/MultiSelectChips-Dmul2me6.js +2 -0
- package/dist/assets/{MultiSelectChips.stories-CJG_1hO1.js → MultiSelectChips.stories-BIwP1d4r.js} +1 -1
- package/dist/assets/{NumberField-DfV-lQqS.js → NumberField-D5dekhTb.js} +3 -3
- package/dist/assets/{NumberField.stories-DcvvImGB.js → NumberField.stories-Bc9Kjkqe.js} +1 -1
- package/dist/assets/{ObserveIntersection-BUhLMAXT.js → ObserveIntersection-Br5mb_ve.js} +1 -1
- package/dist/assets/{ObserveIntersection.stories-D8LWmltK.js → ObserveIntersection.stories-DTWHq7aC.js} +1 -1
- package/dist/assets/{OnboardingTooltip-B_kaIqZr.js → OnboardingTooltip-DcTHydZd.js} +1 -1
- package/dist/assets/{OnboardingTooltip.stories-Bbi-solo.js → OnboardingTooltip.stories-DtaV_dGv.js} +1 -1
- package/dist/assets/{OnboardingTooltip.tests.stories-CYJGgVQH.js → OnboardingTooltip.tests.stories-DqEJ2MTQ.js} +1 -1
- package/dist/assets/{OnboardingTour-Es9ODo5R.js → OnboardingTour-CrSpwDGC.js} +1 -1
- package/dist/assets/{OnboardingTour.stories-DguX1Np1.js → OnboardingTour.stories-D4yQxcXy.js} +2 -2
- package/dist/assets/{OnboardingTour.tests.stories-DBl43DS_.js → OnboardingTour.tests.stories-DDBfv2IC.js} +1 -1
- package/dist/assets/{PasswordField-BDzBq_8p.js → PasswordField-Lp2RJZ3t.js} +3 -3
- package/dist/assets/{PasswordField.stories-Bq-oxqio.js → PasswordField.stories-D3KsJza4.js} +1 -1
- package/dist/assets/{ProgressBar.stories-69KylHTx.js → ProgressBar.stories-CqUc5VLs.js} +1 -1
- package/dist/assets/{ProgressSteps.stories-DsPOksS0.js → ProgressSteps.stories-BLE6dvhX.js} +1 -1
- package/dist/assets/{PromoDialog-CKvE5moH.js → PromoDialog-RBlASd4W.js} +1 -1
- package/dist/assets/{Rating.stories-CC-5R6ut.js → Rating.stories-byG85-k9.js} +1 -1
- package/dist/assets/{RatingInput.stories-f1yAaZGs.js → RatingInput.stories-C9V8kWiR.js} +4 -4
- package/dist/assets/{SelectField-x9rQw_qg.js → SelectField-B4nF6kxi.js} +7 -7
- package/dist/assets/{SelectField.stories-9fJay7bY.js → SelectField.stories-Bgx9QjPD.js} +1 -1
- package/dist/assets/{ShowOnIntersection.stories-CxzKz2ZJ.js → ShowOnIntersection.stories-B4Kohl7q.js} +1 -1
- package/dist/assets/SingleSelectChips-lFqKstcf.js +2 -0
- package/dist/assets/{SingleSelectChips.stories-DfIbVrTi.js → SingleSelectChips.stories-CT8m0Khv.js} +1 -1
- package/dist/assets/{Steps-B7JLI9QK.js → Steps-hoco_XFq.js} +1 -1
- package/dist/assets/{Steps.stories-BcrOvHDe.js → Steps.stories-BLjFxkm8.js} +1 -1
- package/dist/assets/{Switch.stories-Cacj1dlb.js → Switch.stories-BrXh5o7h.js} +1 -1
- package/dist/assets/{Text-Buodaus4.js → Text-DiDZp_C4.js} +1 -1
- package/dist/assets/{Text.stories-C4F4F5Y-.js → Text.stories-CHanMmn2.js} +1 -1
- package/dist/assets/{TextField-C027_iFa.js → TextField-I1Ozm_fM.js} +4 -4
- package/dist/assets/{TextField.stories-CFdxit85.js → TextField.stories-DzmVCGmV.js} +1 -1
- package/dist/assets/{TextHighlighted.stories-DXCnsEZ4.js → TextHighlighted.stories-SE_qwldO.js} +1 -1
- package/dist/assets/{TextInline.stories-CPQmYfGF.js → TextInline.stories-XOqnn55z.js} +1 -1
- package/dist/assets/{TextareaField-BRiidKHZ.js → TextareaField-DZaZgXE3.js} +7 -7
- package/dist/assets/{TextareaField.stories-B-fLDxxr.js → TextareaField.stories-Bop1BBMR.js} +1 -1
- package/dist/assets/{Toast.stories-Dbx35nSt.js → Toast.stories-DjwfNkJX.js} +1 -1
- package/dist/assets/{Tooltip.stories-BSZlgXSs.js → Tooltip.stories-X2KKbRdJ.js} +1 -1
- package/dist/assets/{Tooltip.tests.stories-DnDi6-EL.js → Tooltip.tests.stories-BSKY5lTA.js} +1 -1
- package/dist/assets/{breakpoints-Bah-hNxA.js → breakpoints-CRoLRYm8.js} +1 -1
- package/dist/assets/{breakpoints-Do1NjSIT.js → breakpoints-CSXuAMje.js} +1 -1
- package/dist/assets/{breakpoints-Dfsi11Gg.js → breakpoints-s1hUa0ib.js} +1 -1
- package/dist/assets/{changelog-Bvah7OoK.js → changelog-CCRp7HoV.js} +103 -98
- package/dist/assets/{createRequiredContext-WvHlx5O0.js → createRequiredContext-lKWDx2_a.js} +16 -16
- package/dist/assets/{entry-preview-RKdecZOE.js → entry-preview-B0kLH5we.js} +1 -1
- package/dist/assets/{getTokenVar-1iagfhaI.js → getTokenVar-BoTPwDbX.js} +1 -1
- package/dist/assets/{hover-Cxyn84A5.js → hover-Ci0ZRqat.js} +1 -1
- package/dist/assets/{hover-CO_99kGU.js → hover-DJXL0vF9.js} +1 -1
- package/dist/assets/{hover-BVO949eG.js → hover-DdQpVUkU.js} +1 -1
- package/dist/assets/{iframe-DQObBSoc.js → iframe-DD8HN-R1.js} +2 -2
- package/dist/assets/{index-DxHKJR-z.js → index-BHMtmy2B.js} +1 -1
- package/dist/assets/{index-CTTzR4gE.js → index-CBngXnat.js} +6 -6
- package/dist/assets/{index-xzr6a2UN.js → index-GU-yTW76.js} +3 -3
- package/dist/assets/{intro-BzWH3M5J.js → intro-_Rp3da5v.js} +1 -1
- package/dist/assets/{migrating-from-less-XegNzzRn.js → migrating-from-less-7B_k9xkW.js} +1 -1
- package/dist/assets/{playground.stories-C74S27QD.js → playground.stories-_pKinBuZ.js} +3 -3
- package/dist/assets/{preview-Ce0VhXT1.js → preview-BHe8pYRs.js} +1 -1
- package/dist/assets/{preview-Qml5zPPk.js → preview-BgJF9ES2.js} +1 -1
- package/dist/assets/{preview-BiTm_q9n.js → preview-oumS3SOc.js} +2 -2
- package/dist/assets/{tokens-8Z2xvrm4.js → tokens-BAlLdf8n.js} +1 -1
- package/dist/assets/{tokens-CUGnBuZf.js → tokens-CU9aPd3t.js} +1 -1
- package/dist/assets/{tokens-CNLWJPB5.js → tokens-DFy6-Ct0.js} +1 -1
- package/dist/assets/{usePortalElement-uiGuyCei.js → usePortalElement-BYgT_G5d.js} +1 -1
- package/dist/assets/{welcome-QbRFW5S1.js → welcome-DZoOoKok.js} +1 -1
- package/dist/assets/{zeroheight-DsJLIFDJ.js → zeroheight-T8hJ2BSR.js} +1 -1
- package/dist/iframe.html +1 -1
- package/dist/preview-stats.json +11623 -11623
- package/dist/project.json +1 -1
- package/package.json +3 -3
- package/dist/assets/DismissibleChips-CHGpXEIb.js +0 -1
- package/dist/assets/IconButton-DN6fzHUD.js +0 -8
- package/dist/assets/MultiSelectChips-mwYseEmZ.js +0 -2
- package/dist/assets/SingleSelectChips-Cnz0IZSs.js +0 -2
|
@@ -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-DiDZp_C4.js";import{N as A}from"./NumberField-D5dekhTb.js";import{L as b}from"./LayoutFlex--W1D5e-w.js";import{L as rt}from"./LayoutGrid-C__NlCjJ.js";import{H as ot}from"./Heading-CTiQg0ko.js";import{B as nt}from"./Button-CV3MrNle.js";import{C as st}from"./Checkbox-DQjB3F7F.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-BEOVVHxt.js";import"./index-Cc-bXjHe.js";import"./message-CSdaKtIj.js";import"./Input-CBd7qXZ8.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-BpIWpxNP.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-DQObBSoc.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-Buodaus4.js";import{L as Et}from"./LayoutGrid-CMfLnkDN.js";import{H as xt}from"./Heading-D-ou4j7h.js";import{L as j}from"./LayoutFlex-CnhOGGxA.js";import{T as yt}from"./TextField-C027_iFa.js";import{S as M,a as R}from"./SelectField-x9rQw_qg.js";import{N as At}from"./NumberField-DfV-lQqS.js";import{C as wt}from"./Checkbox-DQjB3F7F.js";import{L as It}from"./Link-8C9V_O3w.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-BEOVVHxt.js";import"./index-Cc-bXjHe.js";import"./message-CSdaKtIj.js";import"./Input-CkgW02B0.js";import"./InputContainer-B1hqJyx0.js";import"./TokyoUIExpand-oMdXmNcg.js";import"./Icon-C9LCNP6i.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-joZWsBRl.js");return{default:t}},[],import.meta.url)).default,es:async()=>(await r(async()=>{const{default:t}=await import("./es-B9tG9n6i.js");return{default:t}},[],import.meta.url)).default,fr:async()=>(await r(async()=>{const{default:t}=await import("./fr-BaSXdqD9.js");return{default:t}},[],import.meta.url)).default,de:async()=>(await r(async()=>{const{default:t}=await import("./de-DbHw1QtI.js");return{default:t}},[],import.meta.url)).default,it:async()=>(await r(async()=>{const{default:t}=await import("./it-C-rsBVgl.js");return{default:t}},[],import.meta.url)).default,ua:async()=>(await r(async()=>{const{default:t}=await import("./ua-DFy0CJs5.js");return{default:t}},[],import.meta.url)).default,pl:async()=>(await r(async()=>{const{default:t}=await import("./pl-ZnMXWP-Q.js");return{default:t}},[],import.meta.url)).default,pt:async()=>(await r(async()=>{const{default:t}=await import("./pt-CbvAFNZg.js");return{default:t}},[],import.meta.url)).default,tr:async()=>(await r(async()=>{const{default:t}=await import("./tr-DfylRxW5.js");return{default:t}},[],import.meta.url)).default,id:async()=>(await r(async()=>{const{default:t}=await import("./id-DCfyHSgy.js");return{default:t}},[],import.meta.url)).default,zh:async()=>(await r(async()=>{const{default:t}=await import("./zh-CiLo7YKr.js");return{default:t}},[],import.meta.url)).default,ja:async()=>(await r(async()=>{const{default:t}=await import("./ja-BrUxPOGY.js");return{default:t}},[],import.meta.url)).default,ko:async()=>(await r(async()=>{const{default:t}=await import("./ko-DqEKoPUX.js");return{default:t}},[],import.meta.url)).default,ar:async()=>(await r(async()=>{const{default:t}=await import("./ar-D6uT0qOp.js");return{default:t}},[],import.meta.url)).default,nl:async()=>(await r(async()=>{const{default:t}=await import("./nl-CFrQdOjv.js");return{default:t}},[],import.meta.url)).default,ro:async()=>(await r(async()=>{const{default:t}=await import("./ro-CgINAtak.js");return{default:t}},[],import.meta.url)).default,ru:async()=>(await r(async()=>{const{default:t}=await import("./ru-CXOBULvP.js");return{default:t}},[],import.meta.url)).default,sv:async()=>(await r(async()=>{const{default:t}=await import("./sv-WBpAWS9X.js");return{default:t}},[],import.meta.url)).default,th:async()=>(await r(async()=>{const{default:t}=await import("./th-R54nFIQY.js");return{default:t}},[],import.meta.url)).default,cs:async()=>(await r(async()=>{const{default:t}=await import("./cs-DyaNZxlz.js");return{default:t}},[],import.meta.url)).default,tw:async()=>(await r(async()=>{const{default:t}=await import("./tw-DyaNZxlz.js");return{default:t}},[],import.meta.url)).default,hk:async()=>(await r(async()=>{const{default:t}=await import("./hk-DyaNZxlz.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-DD8HN-R1.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-DiDZp_C4.js";import{L as Et}from"./LayoutGrid-C__NlCjJ.js";import{H as xt}from"./Heading-CTiQg0ko.js";import{L as j}from"./LayoutFlex--W1D5e-w.js";import{T as yt}from"./TextField-I1Ozm_fM.js";import{S as M,a as R}from"./SelectField-B4nF6kxi.js";import{N as At}from"./NumberField-D5dekhTb.js";import{C as wt}from"./Checkbox-DQjB3F7F.js";import{L as It}from"./Link-CLsuYZJn.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-BEOVVHxt.js";import"./index-Cc-bXjHe.js";import"./message-CSdaKtIj.js";import"./Input-CBd7qXZ8.js";import"./InputContainer-B1hqJyx0.js";import"./TokyoUIExpand-oMdXmNcg.js";import"./Icon-5QESEDp5.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-joZWsBRl.js");return{default:t}},[],import.meta.url)).default,es:async()=>(await r(async()=>{const{default:t}=await import("./es-B9tG9n6i.js");return{default:t}},[],import.meta.url)).default,fr:async()=>(await r(async()=>{const{default:t}=await import("./fr-BaSXdqD9.js");return{default:t}},[],import.meta.url)).default,de:async()=>(await r(async()=>{const{default:t}=await import("./de-DbHw1QtI.js");return{default:t}},[],import.meta.url)).default,it:async()=>(await r(async()=>{const{default:t}=await import("./it-C-rsBVgl.js");return{default:t}},[],import.meta.url)).default,ua:async()=>(await r(async()=>{const{default:t}=await import("./ua-DFy0CJs5.js");return{default:t}},[],import.meta.url)).default,pl:async()=>(await r(async()=>{const{default:t}=await import("./pl-ZnMXWP-Q.js");return{default:t}},[],import.meta.url)).default,pt:async()=>(await r(async()=>{const{default:t}=await import("./pt-CbvAFNZg.js");return{default:t}},[],import.meta.url)).default,tr:async()=>(await r(async()=>{const{default:t}=await import("./tr-DfylRxW5.js");return{default:t}},[],import.meta.url)).default,id:async()=>(await r(async()=>{const{default:t}=await import("./id-DCfyHSgy.js");return{default:t}},[],import.meta.url)).default,zh:async()=>(await r(async()=>{const{default:t}=await import("./zh-CiLo7YKr.js");return{default:t}},[],import.meta.url)).default,ja:async()=>(await r(async()=>{const{default:t}=await import("./ja-BrUxPOGY.js");return{default:t}},[],import.meta.url)).default,ko:async()=>(await r(async()=>{const{default:t}=await import("./ko-DqEKoPUX.js");return{default:t}},[],import.meta.url)).default,ar:async()=>(await r(async()=>{const{default:t}=await import("./ar-D6uT0qOp.js");return{default:t}},[],import.meta.url)).default,nl:async()=>(await r(async()=>{const{default:t}=await import("./nl-CFrQdOjv.js");return{default:t}},[],import.meta.url)).default,ro:async()=>(await r(async()=>{const{default:t}=await import("./ro-CgINAtak.js");return{default:t}},[],import.meta.url)).default,ru:async()=>(await r(async()=>{const{default:t}=await import("./ru-CXOBULvP.js");return{default:t}},[],import.meta.url)).default,sv:async()=>(await r(async()=>{const{default:t}=await import("./sv-WBpAWS9X.js");return{default:t}},[],import.meta.url)).default,th:async()=>(await r(async()=>{const{default:t}=await import("./th-R54nFIQY.js");return{default:t}},[],import.meta.url)).default,cs:async()=>(await r(async()=>{const{default:t}=await import("./cs-DyaNZxlz.js");return{default:t}},[],import.meta.url)).default,tw:async()=>(await r(async()=>{const{default:t}=await import("./tw-DyaNZxlz.js");return{default:t}},[],import.meta.url)).default,hk:async()=>(await r(async()=>{const{default:t}=await import("./hk-DyaNZxlz.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:'"none"'},{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:'"none"'},{value:'"2xs"'},{value:'"xs"'},{value:'"s"'},{value:'"m"'},{value:'"l"'},{value:'"16"'},{value:'"24"'},{value:'"32"'},{value:'"48"'},{value:'"xl"'},{value:'"3xs"'},{value:"ResponsiveProp<LayoutGap>"},{value:'"0"'},{value:'"1"'},{value:'"2"'},{value:'"4"'},{value:'"6"'},{value:'"8"'},{value:'"12"'},{value:'"20"'},{value:'"64"'},{value:'"96"'},{value:'"160"'},{value:"ResponsiveProp<Spacing>"}]}},padding:{defaultValue:null,description:"",name:"padding",required:!1,type:{name:"enum",value:[{value:'"none"'},{value:'"2xs"'},{value:'"xs"'},{value:'"s"'},{value:'"m"'},{value:'"l"'},{value:'"16"'},{value:'"24"'},{value:'"32"'},{value:'"48"'},{value:'"xl"'},{value:'"3xs"'},{value:'"0"'},{value:'"1"'},{value:'"2"'},{value:'"4"'},{value:'"6"'},{value:'"8"'},{value:'"12"'},{value:'"20"'},{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>>"}]}},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:'"row"'},{value:'"column"'},{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:'"article"'},{value:'"figure"'},{value:'"main"'},{value:'"table"'},{value:'"div"'},{value:'"header"'},{value:'"footer"'},{value:'"section"'},{value:'"ul"'},{value:'"ol"'},{value:'"p"'},{value:'"span"'},{value:'"fieldset"'},{value:'"thead"'},{value:'"tfoot"'},{value:'"tbody"'},{value:'"caption"'},{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:'"article"'},{value:'"figure"'},{value:'"main"'},{value:'"table"'},{value:'"div"'},{value:'"header"'},{value:'"footer"'},{value:'"section"'},{value:'"ul"'},{value:'"ol"'},{value:'"p"'},{value:'"span"'},{value:'"fieldset"'},{value:'"thead"'},{value:'"tfoot"'},{value:'"tbody"'},{value:'"caption"'},{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:'"div"'},{value:'"main"'},{value:'"header"'},{value:'"footer"'},{value:'"article"'},{value:'"section"'},{value:'"ul"'},{value:'"ol"'},{value:'"li"'},{value:'"p"'},{value:'"span"'},{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:'"none"'},{value:'"2xs"'},{value:'"xs"'},{value:'"s"'},{value:'"m"'},{value:'"l"'},{value:'"16"'},{value:'"24"'},{value:'"32"'},{value:'"48"'},{value:'"xl"'},{value:'"3xs"'},{value:"ResponsiveProp<LayoutGap>"},{value:'"0"'},{value:'"1"'},{value:'"2"'},{value:'"4"'},{value:'"6"'},{value:'"8"'},{value:'"12"'},{value:'"20"'},{value:'"64"'},{value:'"96"'},{value:'"160"'},{value:"ResponsiveProp<Spacing>"}]}},padding:{defaultValue:null,description:"",name:"padding",required:!1,type:{name:"enum",value:[{value:'"none"'},{value:'"2xs"'},{value:'"xs"'},{value:'"s"'},{value:'"m"'},{value:'"l"'},{value:'"16"'},{value:'"24"'},{value:'"32"'},{value:'"48"'},{value:'"xl"'},{value:'"3xs"'},{value:'"0"'},{value:'"1"'},{value:'"2"'},{value:'"4"'},{value:'"6"'},{value:'"8"'},{value:'"12"'},{value:'"20"'},{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:'"td"'},{value:'"li"'},{value:'"th"'},{value:'"tr"'},{value:'"article"'},{value:'"figure"'},{value:'"main"'},{value:'"table"'},{value:'"div"'},{value:'"header"'},{value:'"footer"'},{value:'"section"'},{value:'"ul"'},{value:'"ol"'},{value:'"p"'},{value:'"span"'},{value:'"fieldset"'},{value:'"thead"'},{value:'"tfoot"'},{value:'"tbody"'},{value:'"caption"'},{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-BntIYIDx.js";import{L as m}from"./LayoutGrid-C__NlCjJ.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:'"article"'},{value:'"figure"'},{value:'"main"'},{value:'"table"'},{value:'"div"'},{value:'"header"'},{value:'"footer"'},{value:'"section"'},{value:'"ul"'},{value:'"ol"'},{value:'"p"'},{value:'"span"'},{value:'"fieldset"'},{value:'"thead"'},{value:'"tfoot"'},{value:'"tbody"'},{value:'"caption"'},{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:{onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLAnchorElement>"}]}},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"}},variant:{defaultValue:null,description:"",name:"variant",required:!1,type:{name:"enum",value:[{value:'"accentDark"'},{value:'"
|
|
4
|
+
component.`,displayName:"Link",props:{onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLAnchorElement>"}]}},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"}},variant:{defaultValue:null,description:"",name:"variant",required:!1,type:{name:"enum",value:[{value:'"accentDark"'},{value:'"accentDarkInverted"'},{value:'"neutral"'},{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-DiDZp_C4.js";import{L as r}from"./Link-CLsuYZJn.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-lKWDx2_a.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:{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"'}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},items:{defaultValue:null,description:"",name:"items",required:!1,type:{name:"enum",value:[{value:'(Omit<ChipsItemProps, "value" | "children" | "dsInternalSimulation"> & { 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:'"id"'},{value:'"is"'},{value:'"af"'},{value:'"ax"'},{value:'"al"'},{value:'"dz"'},{value:'"as"'},{value:'"ad"'},{value:'"ao"'},{value:'"ai"'},{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-CJG_1hO1.js → MultiSelectChips.stories-BIwP1d4r.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-mwYseEmZ.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-CnhOGGxA.js";import{T as E}from"./Text-Buodaus4.js";import{L as sa}from"./Link-8C9V_O3w.js";import{d as oa}from"./styled-components.browser.esm-COuAnjOv.js";import{H as la}from"./Heading-D-ou4j7h.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-VpC3ybJe.js";import{B as ca}from"./Button-r7N6Ff_n.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./useControllableState-DKskwY-e.js";import"./createRequiredContext-WvHlx5O0.js";import"./Icon-C9LCNP6i.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-ykx10eak.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"./index-B2TaWKj4.js";import"./index-CBNx_T-u.js";import"./index-s7KTOhR7.js";import"./index-BPCsOyHr.js";import"./index-Cc-bXjHe.js";import"./PortalElementProvider-C7eyjaTY.js";import"./index-DPv9hOkP.js";import"./index-CAVIhQtL.js";import"./ButtonBase-zwYgfoSw.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-Dmul2me6.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--W1D5e-w.js";import{T as E}from"./Text-DiDZp_C4.js";import{L as sa}from"./Link-CLsuYZJn.js";import{d as oa}from"./styled-components.browser.esm-COuAnjOv.js";import{H as la}from"./Heading-CTiQg0ko.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-VpC3ybJe.js";import{B as ca}from"./Button-CV3MrNle.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./useControllableState-DKskwY-e.js";import"./createRequiredContext-lKWDx2_a.js";import"./Icon-5QESEDp5.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-DeifQHMo.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"./index-B2TaWKj4.js";import"./index-CBNx_T-u.js";import"./index-s7KTOhR7.js";import"./index-BPCsOyHr.js";import"./index-Cc-bXjHe.js";import"./PortalElementProvider-C7eyjaTY.js";import"./index-DPv9hOkP.js";import"./index-CAVIhQtL.js";import"./ButtonBase-BpIWpxNP.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;
|
|
@@ -1,6 +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-BEOVVHxt.js";import{w as H}from"./componentNames-k0j3gHgH.js";import{I as L}from"./Input-
|
|
2
|
-
If not provided, will be generated for accessibility purposes.`,name:"id",required:!1,type:{name:"enum",value:[{value:"string"}]}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLDivElement> & MouseEventHandler<HTMLInputElement>"}]}},
|
|
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"}]}},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"
|
|
1
|
+
import{j as u}from"./jsx-runtime-BTJTZTIL.js";import{r as V}from"./index-Cb9e4tly.js";import{F as g}from"./FormControl-BEOVVHxt.js";import{w as H}from"./componentNames-k0j3gHgH.js";import{I as L}from"./Input-CBd7qXZ8.js";const t=V.forwardRef(function({id:i,label:d,description:s,error:o,required:m,inputDataset:p,dataset:v,hideLabel:f,onClick:c,onValueChange:e,onChange:a,hasError:y,useLegacyRequiredLabel:b,className:I,style:R,...h},q){const E=l=>{a==null||a(l);const n=l.target.value;e==null||e(n?Number(n):void 0)};return u.jsx(g,{id:i,label:d,description:s,error:o,hasError:y,required:m,dataset:v,hideLabel:f,onClick:c,useLegacyRequiredLabel:b,preplyDsComponent:H.NumberField,children:u.jsx(L,{...h,type:"number",ref:q,dataset:p,onChange:E})})});try{t.displayName="NumberField",t.__docgenInfo={description:"",displayName:"NumberField",props:{id:{defaultValue:null,description:`The id to be passed to the input element.
|
|
2
|
+
If not provided, will be generated for accessibility purposes.`,name:"id",required:!1,type:{name:"enum",value:[{value:"string"}]}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLDivElement> & MouseEventHandler<HTMLInputElement>"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},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"}]}},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"}]}},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
4
|
indicator next to the label.`,name:"required",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},useLegacyRequiredLabel:{defaultValue:null,description:`When true, adds a "Required" indicator next to the label for the required fields.
|
|
5
5
|
When false, adds a "Optional" indicator next to the label for the optional fields instead.
|
|
6
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"}]}},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>"}]}},onKeyDown:{defaultValue:null,description:"",name:"onKeyDown",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<HTMLInputElement>"}]}},onKeyUp:{defaultValue:null,description:"",name:"onKeyUp",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<HTMLInputElement>"}]}},icon:{defaultValue:null,description:"",name:"icon",required:!1,type:{name:"enum",value:[{value:"ReactElement<any, string | JSXElementConstructor<any>>"}]}},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};
|