@preply/ds-docs 3.5.1 → 3.6.0

package/dist/assets/MultiSelectChips.stories-DmtbSk6N.js

@@ -0,0 +1,618 @@
+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-CwiPSabU.js";import{F as ta,a as V,b as Je,c as Qe,d as na}from"./TokyoUIEmojiFrowning-DTIcabpJ.js";import{F as ia}from"./index-DSVnVYmz.js";import{L as g}from"./LayoutFlex-C3k4b85b.js";import{T}from"./Text-CykvSLVe.js";import{L as sa}from"./Link-ppzJSCTf.js";import{d as oa}from"./styled-components.browser.esm-BgpGX317.js";import{H as la}from"./Heading-BLxyLk9f.js";import{f as ra,r as Xe,w as u,e,u as r,a as E}from"./index-Ctq3gFTp.js";import{a as ca}from"./react.esm-BJ_b8t-Z.js";import{T as B}from"./Tooltip-UjXQy5k6.js";import{B as ua}from"./Button-C5gzVt4K.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./createRequiredContext-BW3-EdwI.js";import"./Icon-CsnSNslb.js";import"./text-accent-DZDDtpIt.js";import"./classNames-BUL1Zq7e.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-BT0Aq7PA.js";import"./componentNames-NXEPEzbR.js";import"./index-DdzHuZ-Y.js";import"./defaults-Clr6nbGc.js";import"./CountryFlag-DNvfZC7z.js";import"./getCountryFlagUrl-CP-PpZV_.js";import"./useMergeRefs-D_RfOOSs.js";import"./tslib.es6-BntfKcQG.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./layout-relative.module-ChaXrVQQ.js";import"./text-centered-CznToR0o.js";import"./useHostname-Y3PlXofY.js";import"./test-utils-DCJN9LZk.js";import"./index-C7hTFOIV.js";import"./index-BPrLDK9Y.js";import"./client-C1fTPCwG.js";import"./index-BrBqb5Q4.js";import"./PortalElementProvider-CgL8vj5o.js";import"./index-C6wF8VM1.js";import"./index-QwIMrChO.js";import"./ButtonBase-D5O3MkG2.js";import"./Spinner-T-vTyHiv.js";import"./useMergeRefs-SFH7Mw4x.js";import"./index-CC6DAVyL.js";const st={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()}},y={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 v={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(),await ca(async()=>{L(["vocabulary","reading"])}),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(V,{})},{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(V,{}),counter:1247},{value:"counter+flag",label:"Flag + Counter",countryFlagCode:"ua",counter:1247},{value:"icon+flag",label:"Icon + Flag",icon:a.jsx(V,{}),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(ua,{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"}],da=[{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"}],pa=[{value:"morning",label:"Morning (6-12)",icon:a.jsx(V,{})},{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(na,{})}],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(T,{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(T,{variant:"large-semibold",children:"Which days work best for you?"}),a.jsx(h,{"aria-label":"Selected days of the week",items:da})]}),a.jsxs(g,{direction:"column",alignItems:"stretch",gap:"16",children:[a.jsx(T,{variant:"large-semibold",children:"What times of day work for you?"}),a.jsx(h,{"aria-label":"Selected times of day",items:pa})]})]})},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()})}},ga=oa.ul`
+    all: unset;
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    gap: 8px;
+
+    > li {
+        display: contents;
+    }
+`,j=[{id:1,title:"Building Your First Vocabulary List",skills:["vocabulary"]},{id:2,title:"Effective Speaking Practice Techniques",skills:["speaking"]},{id:3,title:"Active Listening Strategies",skills:["listening"]},{id:4,title:"Speed Reading Methods",skills:["reading"]},{id:5,title:"Grammar Rules Made Simple",skills:["grammar"]},{id:6,title:"Combining Speaking and Vocabulary",skills:["speaking","vocabulary"]},{id:7,title:"Reading Comprehension and Vocabulary Building",skills:["reading","vocabulary"]},{id:8,title:"Listening and Speaking Integration",skills:["listening","speaking"]}],A={render:function(t){const[n,s]=Ye.useState([]),o=n.length>0?j.filter(l=>n.some(c=>l.skills.includes(c))):j;return a.jsxs(g,{direction:"column",gap:"24",children:[a.jsxs(g,{direction:"column",gap:"8",children:[a.jsx(la,{tag:"h2",variant:"large",children:"Articles"}),a.jsx(h,{"aria-label":"Filter by skills","aria-controls":"results",value:n,onValueChange:s,items:ea})]}),a.jsx("section",{id:"results","aria-label":"Filtered articles",children:a.jsx(ga,{children:o.map(l=>a.jsx("li",{children:a.jsx(sa,{href:"#",children:l.title})},l.id))})})]})},play:async({canvasElement:i,step:t})=>{const s=u(i).getByRole("listbox",{name:"Filter by skills"});await t("Chips element should have aria attributes forwarded",async()=>{e(s).toHaveAttribute("aria-label","Filter by skills"),e(s).toHaveAttribute("aria-controls","results")})}},F={parameters:{a11y:{config:{rules:[{id:"color-contrast",enabled:!1}]}}},args:{"aria-label":"Select skills",items:void 0,children:a.jsxs(a.Fragment,{children:[a.jsx(B,{content:"I want to learn vocabulary",dataset:{testid:"vocabulary-tooltip"},children:a.jsx(p,{value:"vocabulary",children:"Vocabulary"})}),a.jsx(B,{content:"I want to improve my speaking skills",dataset:{testid:"speaking-tooltip"},children:a.jsx(p,{value:"speaking",children:"Speaking"})}),a.jsx(B,{content:"I want to improve my listening skills",dataset:{testid:"listening-tooltip"},children:a.jsx(p,{value:"listening",children:"Listening"})}),a.jsx(B,{content:"I want to improve my reading skills",dataset:{testid:"reading-tooltip"},children:a.jsx(p,{value:"reading",children:"Reading"})})]})},play:async({canvasElement:i,step:t})=>{const n=u(i);await t("Tab to the first chip",async()=>{await r.tab(),await E(()=>{e(n.getByTestId("vocabulary-tooltip")).toBeVisible()})}),await t("Arrow right to focus next chip",async()=>{await r.keyboard("{ArrowRight}"),await E(()=>{e(n.getByTestId("speaking-tooltip")).toBeVisible()})}),await t("Hover third chip",async()=>{await r.hover(n.getByRole("option",{name:"Listening"})),await E(()=>{e(n.getByTestId("listening-tooltip")).toBeVisible()})})}},R={tags:["!autodocs"],args:{"aria-label":"Chips states",value:["selected","selected-hover","selected-active","selected-focus"],items:void 0,children:a.jsxs(a.Fragment,{children:[a.jsx(p,{value:"rest",children:"Rest"}),a.jsx(p,{value:"focus",dsInternalSimulation:"focus",children:"Focus"}),a.jsx(p,{value:"hover",dsInternalSimulation:"hover",children:"Hover"}),a.jsx(p,{value:"active",dsInternalSimulation:"active",children:"Active"}),a.jsx(p,{value:"disabled",disabled:!0,children:"Disabled"}),a.jsx(p,{value:"selected",children:"Selected"}),a.jsx(p,{value:"selected-focus",dsInternalSimulation:"focus",children:"Selected focus"}),a.jsx(p,{value:"selected-hover",dsInternalSimulation:"hover",children:"Selected hover"}),a.jsx(p,{value:"selected-active",dsInternalSimulation:"active",children:"Selected active"})]})}},H={decorators:[i=>a.jsx("div",{style:{maxWidth:150,margin:"0 auto"},children:a.jsx(i,{})})],args:{"aria-label":"Long label",items:[{value:"long",icon:ta,label:"I'm way too long to be a chip label, I don't know what to do with myself"}]}};var M,W,D,U,G;y.parameters={...y.parameters,docs:{...(M=y.parameters)==null?void 0:M.docs,source:{originalSource:`{
+  play: async ({
+    canvasElement,
+    step,
+    args
+  }) => {
+    const canvas = within(canvasElement);
+    const vocabulary = canvas.getByRole('option', {
+      name: 'Vocabulary'
+    });
+    const speaking = canvas.getByRole('option', {
+      name: 'Speaking'
+    });
+    const listening = canvas.getByRole('option', {
+      name: 'Listening'
+    });
+    const reading = canvas.getByRole('option', {
+      name: 'Reading'
+    });
+    await step('Render chips with default value', async () => {
+      expect(vocabulary).toHaveAttribute('aria-selected', 'true');
+      expect(speaking).toHaveAttribute('aria-selected', 'false');
+      expect(listening).toHaveAttribute('aria-selected', 'false');
+      expect(reading).toHaveAttribute('aria-selected', 'false');
+    });
+    await step('Click on the chip to select it', async () => {
+      await userEvent.click(speaking);
+      expect(args.onValueChange).toHaveBeenCalledWith(['vocabulary', 'speaking']);
+      expect(vocabulary).toHaveAttribute('aria-selected', 'true');
+      expect(speaking).toHaveAttribute('aria-selected', 'true');
+      expect(listening).toHaveAttribute('aria-selected', 'false');
+      expect(reading).toHaveAttribute('aria-selected', 'false');
+    });
+    await step('Click on the chip to deselect it', async () => {
+      await userEvent.click(vocabulary);
+      expect(args.onValueChange).toHaveBeenCalledWith(['speaking']);
+      expect(vocabulary).toHaveAttribute('aria-selected', 'false');
+      expect(speaking).toHaveAttribute('aria-selected', 'true');
+      expect(listening).toHaveAttribute('aria-selected', 'false');
+      expect(reading).toHaveAttribute('aria-selected', 'false');
+    });
+  }
+}`,...(D=(W=y.parameters)==null?void 0:W.docs)==null?void 0:D.source},description:{story:"Basic usage with default values. The component manages its own state internally.",...(G=(U=y.parameters)==null?void 0:U.docs)==null?void 0:G.description}}};var q,O,_,P,z;v.parameters={...v.parameters,docs:{...(q=v.parameters)==null?void 0:q.docs,source:{originalSource:`{
+  render: function StoryRender({
+    defaultValue,
+    ...args
+  }) {
+    const [value, setValue] = useState(defaultValue);
+    setValueFromPlayFunction = setValue;
+    const handleValueChange = (value: string[]) => {
+      setValue(value);
+      args.onValueChange?.(value);
+    };
+    return <MultiSelectChips {...args} value={value} onValueChange={handleValueChange} />;
+  },
+  play: async ({
+    canvasElement,
+    step,
+    args
+  }) => {
+    const canvas = within(canvasElement);
+    const vocabulary = canvas.getByRole('option', {
+      name: 'Vocabulary'
+    });
+    const speaking = canvas.getByRole('option', {
+      name: 'Speaking'
+    });
+    const listening = canvas.getByRole('option', {
+      name: 'Listening'
+    });
+    const reading = canvas.getByRole('option', {
+      name: 'Reading'
+    });
+    await step('Render chips with default value', async () => {
+      expect(vocabulary).toHaveAttribute('aria-selected', 'true');
+      expect(speaking).toHaveAttribute('aria-selected', 'false');
+      expect(listening).toHaveAttribute('aria-selected', 'false');
+      expect(reading).toHaveAttribute('aria-selected', 'false');
+    });
+    await step('Click on the chip to select it', async () => {
+      await userEvent.click(speaking);
+      expect(args.onValueChange).toHaveBeenCalledWith(['vocabulary', 'speaking']);
+      expect(vocabulary).toHaveAttribute('aria-selected', 'true');
+      expect(speaking).toHaveAttribute('aria-selected', 'true');
+      expect(listening).toHaveAttribute('aria-selected', 'false');
+      expect(reading).toHaveAttribute('aria-selected', 'false');
+    });
+    await step('Click on the chip to deselect it', async () => {
+      await userEvent.click(vocabulary);
+      expect(args.onValueChange).toHaveBeenCalledWith(['speaking']);
+      expect(vocabulary).toHaveAttribute('aria-selected', 'false');
+      expect(speaking).toHaveAttribute('aria-selected', 'true');
+      expect(listening).toHaveAttribute('aria-selected', 'false');
+      expect(reading).toHaveAttribute('aria-selected', 'false');
+    });
+    await step('Change the value externally', async () => {
+      resetAllMocks();
+      await act(async () => {
+        setValueFromPlayFunction(['vocabulary', 'reading']);
+      });
+      expect(args.onValueChange).not.toHaveBeenCalled();
+      expect(vocabulary).toHaveAttribute('aria-selected', 'true');
+      expect(speaking).toHaveAttribute('aria-selected', 'false');
+      expect(listening).toHaveAttribute('aria-selected', 'false');
+      expect(reading).toHaveAttribute('aria-selected', 'true');
+    });
+  }
+}`,...(_=(O=v.parameters)==null?void 0:O.docs)==null?void 0:_.source},description:{story:"Controlled usage where you manage the state externally.",...(z=(P=v.parameters)==null?void 0:P.docs)==null?void 0:z.description}}};var $,N,Z,K,Y;m.parameters={...m.parameters,docs:{...($=m.parameters)==null?void 0:$.docs,source:{originalSource:`{
+  args: {
+    items: [{
+      value: 'vocabulary',
+      label: 'Vocabulary'
+    }, {
+      value: 'speaking',
+      label: 'Speaking',
+      disabled: true
+    }, {
+      value: 'listening',
+      label: 'Listening',
+      disabled: true
+    }, {
+      value: 'reading',
+      label: 'Reading'
+    }]
+  },
+  play: async ({
+    canvasElement,
+    step,
+    args
+  }) => {
+    const canvas = within(canvasElement);
+    const speaking = canvas.getByRole('option', {
+      name: 'Speaking'
+    });
+    const vocabulary = canvas.getByRole('option', {
+      name: 'Vocabulary'
+    });
+    await step('Disabled chip must have disabled attribute', async () => {
+      expect(speaking).toBeDisabled();
+    });
+    await step('Disabled chip must not be selectable', async () => {
+      await userEvent.click(speaking);
+      expect(args.onValueChange).not.toHaveBeenCalled();
+      expect(vocabulary).toHaveAttribute('aria-selected', 'true');
+    });
+  }
+}`,...(Z=(N=m.parameters)==null?void 0:N.docs)==null?void 0:Z.source},description:{story:"Some chips can be disabled to prevent user interaction.",...(Y=(K=m.parameters)==null?void 0:K.docs)==null?void 0:Y.description}}};var J,Q,X,ee,ae;b.parameters={...b.parameters,docs:{...(J=b.parameters)==null?void 0:J.docs,source:{originalSource:`{
+  args: {
+    'aria-label': 'Select availabilities',
+    defaultValue: ['morning'],
+    items: [{
+      value: 'morning',
+      label: 'Morning',
+      icon: <TokyoUIAvailability1EarlyMorning />
+    }, {
+      value: 'afternoon',
+      label: 'Afternoon',
+      icon: <TokyoUIAvailability3Day />
+    }, {
+      value: 'evening',
+      label: 'Evening',
+      icon: <TokyoUIAvailability6LateEvening />
+    }]
+  },
+  play: async ({
+    canvasElement,
+    step
+  }) => {
+    const canvas = within(canvasElement);
+    const morning = canvas.getByRole('option', {
+      name: 'Morning'
+    });
+    const morningIcon = within(morning).getByTestId('chip-icon');
+    await step('Chip should render an icon when \`icon\` prop is passed', async () => {
+      expect(morningIcon).toBeVisible();
+    });
+  }
+}`,...(X=(Q=b.parameters)==null?void 0:Q.docs)==null?void 0:X.source},description:{story:`Chips can include icons to provide visual context and improve scannability.
+Icons appear on the left side of the chip label and help users quickly identify options.`,...(ae=(ee=b.parameters)==null?void 0:ee.docs)==null?void 0:ae.description}}};var te,ne,ie,se,oe;w.parameters={...w.parameters,docs:{...(te=w.parameters)==null?void 0:te.docs,source:{originalSource:`{
+  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,
+    step
+  }) => {
+    const canvas = within(canvasElement);
+    const english = canvas.getByRole('option', {
+      name: /^English/
+    });
+    const englishCounter = within(english).getByTestId('chip-counter');
+    await step('Chip should render a counter when \`counter\` prop is passed', async () => {
+      expect(englishCounter).toBeVisible();
+      expect(englishCounter).toHaveTextContent('1247');
+    });
+  }
+}`,...(ie=(ne=w.parameters)==null?void 0:ne.docs)==null?void 0:ie.source},description:{story:`Chips can display numeric counters to show quantities, popularity, or other metrics.
+Counters appear on the right side of the chip label and are useful for
+showing search results count, available tutors, or similar quantitative data.`,...(oe=(se=w.parameters)==null?void 0:se.docs)==null?void 0:oe.description}}};var le,re,ce,ue,de;f.parameters={...f.parameters,docs:{...(le=f.parameters)==null?void 0:le.docs,source:{originalSource:`{
+  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,
+    step
+  }) => {
+    const canvas = within(canvasElement);
+    const ua = canvas.getByRole('option', {
+      name: 'Ukraine'
+    });
+    const uaFlag = within(ua).getByTestId('chip-country-flag');
+    await step('Chip should render a flag when \`flagCountryCode\` prop is passed', async () => {
+      expect(uaFlag).toBeVisible();
+    });
+  }
+}`,...(ce=(re=f.parameters)==null?void 0:re.docs)==null?void 0:ce.source},description:{story:`Chips can display country flags using ISO country codes.
+Flags appear on the left side and provide instant visual recognition
+for country or language selection interfaces.`,...(de=(ue=f.parameters)==null?void 0:ue.docs)==null?void 0:de.description}}};var pe,ge,he,ye,ve;k.parameters={...k.parameters,docs:{...(pe=k.parameters)==null?void 0:pe.docs,source:{originalSource:`{
+  args: {
+    'aria-label': 'Fancy chips',
+    items: [{
+      value: 'counter+icon',
+      label: 'Icon + Counter',
+      icon: <TokyoUIAvailability1EarlyMorning />,
+      counter: 1247
+    }, {
+      value: 'counter+flag',
+      label: 'Flag + Counter',
+      countryFlagCode: 'ua',
+      counter: 1247
+    }, {
+      value: 'icon+flag',
+      label: 'Icon + Flag',
+      icon: <TokyoUIAvailability1EarlyMorning />,
+      countryFlagCode: 'ua'
+    }]
+  },
+  play: async ({
+    canvasElement
+  }) => {
+    const canvas = within(canvasElement);
+    const chip = within(canvas.getByRole('option', {
+      name: 'Icon + Flag'
+    }));
+    expect(chip.getByTestId('chip-icon')).toBeVisible();
+    expect(chip.queryByTestId('chip-country-flag')).not.toBeInTheDocument();
+  }
+}`,...(he=(ge=k.parameters)==null?void 0:ge.docs)==null?void 0:he.source},description:{story:`Counter can be combined with icon or flag.
+However, if you pass icon and flag together, only icon will be displayed.`,...(ve=(ye=k.parameters)==null?void 0:ye.docs)==null?void 0:ve.description}}};var me,be,we,fe,ke;C.parameters={...C.parameters,docs:{...(me=C.parameters)==null?void 0:me.docs,source:{originalSource:`{
+  args: {
+    orientation: 'vertical',
+    'aria-label': 'Select time slots',
+    defaultValue: dates,
+    items: dates.map(date => ({
+      value: date,
+      label: <FormattedDate weekday="short" day="numeric" month="short" hour="2-digit" minute="2-digit" value={date} />,
+      dataset: {
+        testid: date
+      }
+    }))
+  },
+  decorators: [Story => <div style={{
+    width: 300,
+    margin: '0 auto'
+  }}>
+                <Story />
+            </div>],
+  play: async ({
+    canvasElement,
+    step
+  }) => {
+    const canvas = within(canvasElement);
+    const chipsList = canvas.getByRole('listbox', {
+      name: 'Select time slots'
+    });
+    const firstChip = canvas.getByTestId(dates[0]);
+    const secondChip = canvas.getByTestId(dates[1]);
+    const thirdChip = canvas.getByTestId(dates[2]);
+    await step('Vertical chips should have \`aria-orientation="vertical"\`', async () => {
+      expect(chipsList).toHaveAttribute('aria-orientation', 'vertical');
+    });
+    await step('Focus first chip', async () => {
+      firstChip.focus();
+    });
+    await step('Arrow down should focus second chip', async () => {
+      await userEvent.keyboard('{ArrowDown}');
+      expect(secondChip).toHaveFocus();
+    });
+    await step('Arrow down should focus third chip', async () => {
+      await userEvent.keyboard('{ArrowDown}');
+      expect(thirdChip).toHaveFocus();
+    });
+    await step('Arrow down should focus first chip', async () => {
+      await userEvent.keyboard('{ArrowDown}');
+      expect(firstChip).toHaveFocus();
+    });
+    await step('Arrow up should focus third chip', async () => {
+      await userEvent.keyboard('{ArrowUp}');
+      expect(thirdChip).toHaveFocus();
+    });
+  }
+}`,...(we=(be=C.parameters)==null?void 0:be.docs)==null?void 0:we.source},description:{story:`Chips can be arranged vertically instead of horizontally.
+This layout works well in narrow containers or when you want
+to emphasize a vertical flow in your design.`,...(ke=(fe=C.parameters)==null?void 0:fe.docs)==null?void 0:ke.description}}};var xe,Ce,Se,Ie,Ae;S.parameters={...S.parameters,docs:{...(xe=S.parameters)==null?void 0:xe.docs,source:{originalSource:`{
+  render: args => <LayoutFlex gap="12">
+            <MultiSelectChips {...args} />
+            <Button variant="tertiary" size="small" onClick={() => alert('Show all')}>
+                Show all
+            </Button>
+        </LayoutFlex>
+}`,...(Se=(Ce=S.parameters)==null?void 0:Ce.docs)==null?void 0:Se.source},description:{story:"Chips are intended only for selection. To assign secondary actions, combine chips with a button.",...(Ae=(Ie=S.parameters)==null?void 0:Ie.docs)==null?void 0:Ae.description}}};var Fe,He,Be,Re,Ve;I.parameters={...I.parameters,docs:{...(Fe=I.parameters)==null?void 0:Fe.docs,source:{originalSource:`{
+  // unused \`args\` makes story source code readable 🤷‍♂️
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  render: function StoryRender(_args) {
+    return <LayoutFlex direction="column" alignItems="stretch" gap="64">
+                <LayoutFlex direction="column" alignItems="stretch" gap="16">
+                    <Text variant="large-semibold">What skills do you want to focus on?</Text>
+                    <MultiSelectChips aria-label="Selected skills" items={skillsItems} />
+                </LayoutFlex>
+
+                <LayoutFlex direction="column" alignItems="stretch" gap="16">
+                    <Text variant="large-semibold">Which days work best for you?</Text>
+                    <MultiSelectChips aria-label="Selected days of the week" items={daysOfWeekItems} />
+                </LayoutFlex>
+
+                <LayoutFlex direction="column" alignItems="stretch" gap="16">
+                    <Text variant="large-semibold">What times of day work for you?</Text>
+                    <MultiSelectChips aria-label="Selected times of day" items={timeOfDayItems} />
+                </LayoutFlex>
+            </LayoutFlex>;
+  },
+  play: async ({
+    canvasElement,
+    step
+  }) => {
+    const canvas = within(canvasElement);
+    const skillsChips = within(canvas.getByRole('listbox', {
+      name: 'Selected skills'
+    }));
+    const daysChips = within(canvas.getByRole('listbox', {
+      name: 'Selected days of the week'
+    }));
+    const skillVocabulary = skillsChips.getByRole('option', {
+      name: 'Vocabulary'
+    });
+    const skillSpeaking = skillsChips.getByRole('option', {
+      name: 'Speaking'
+    });
+    const skillGrammar = skillsChips.getByRole('option', {
+      name: 'Grammar'
+    });
+    const dayMonday = daysChips.getByRole('option', {
+      name: 'Monday'
+    });
+    await step('Tab once to enter the component', async () => {
+      await userEvent.tab();
+      expect(skillVocabulary).toHaveFocus();
+    });
+    await step('Next tab should focus second chip', async () => {
+      await userEvent.tab();
+      expect(dayMonday).toHaveFocus();
+    });
+    await step('Shift+Tab should focus first chips group again', async () => {
+      await userEvent.tab({
+        shift: true
+      });
+      expect(skillVocabulary).toHaveFocus();
+    });
+    await step('Right arrow should focus next chip in the group', async () => {
+      await userEvent.keyboard('{ArrowRight}');
+      expect(skillSpeaking).toHaveFocus();
+    });
+    await step('Left arrow should focus previous chip in the group', async () => {
+      await userEvent.keyboard('{ArrowLeft}');
+      expect(skillVocabulary).toHaveFocus();
+    });
+    await step('Left arrow should focus last chip if first chip is focused', async () => {
+      await userEvent.keyboard('{ArrowLeft}');
+      expect(skillGrammar).toHaveFocus();
+    });
+    await step('Right arrow should focus first chip if last chip is focused', async () => {
+      await userEvent.keyboard('{ArrowRight}');
+      expect(skillVocabulary).toHaveFocus();
+    });
+    await step('Focus last chip', async () => {
+      await userEvent.keyboard('{ArrowLeft}');
+    });
+    await step('Tab to the next group', async () => {
+      await userEvent.tab();
+    });
+    await step('Shift+Tab to return to the first group, the last focused chip should be focused', async () => {
+      await userEvent.tab({
+        shift: true
+      });
+      expect(skillGrammar).toHaveFocus();
+    });
+  }
+}`,...(Be=(He=I.parameters)==null?void 0:He.docs)==null?void 0:Be.source},description:{story:`The **roving tabindex pattern** is a keyboard navigation technique for grouped interactive elements. Instead of tabbing through each item individually, users:
+
+- **Tab once** to enter the component
+- **Use arrow keys** to navigate between items within the group
+- **Tab again** to exit to the next component
+
+This creates a smooth, efficient navigation experience - especially useful for components like chip groups where you want to browse options quickly without getting stuck in a "tab trap."
+
+{@link https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex Learn more about roving tabindex pattern}`,...(Ve=(Re=I.parameters)==null?void 0:Re.docs)==null?void 0:Ve.description}}};var Te,Ee,Le,je,Me;A.parameters={...A.parameters,docs:{...(Te=A.parameters)==null?void 0:Te.docs,source:{originalSource:`{
+  // unused \`args\` makes story source code readable 🤷‍♂️
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  render: function StoryRender(_args) {
+    const [selectedSkills, setSelectedSkills] = useState<string[]>([]);
+    const filteredArticles = selectedSkills.length > 0 ? tutorialArticles.filter(article => selectedSkills.some(skill => article.skills.includes(skill))) : tutorialArticles;
+    return <LayoutFlex direction="column" gap="24">
+                <LayoutFlex direction="column" gap="8">
+                    <Heading tag="h2" variant="large">
+                        Articles
+                    </Heading>
+                    <MultiSelectChips aria-label="Filter by skills" aria-controls="results" value={selectedSkills} onValueChange={setSelectedSkills} items={skillsItems} />
+                </LayoutFlex>
+                <section id="results" aria-label="Filtered articles">
+                    <List>
+                        {filteredArticles.map(article => <li key={article.id}>
+                                <Link href="#">{article.title}</Link>
+                            </li>)}
+                    </List>
+                </section>
+            </LayoutFlex>;
+  },
+  play: async ({
+    canvasElement,
+    step
+  }) => {
+    const canvas = within(canvasElement);
+    const chipsList = canvas.getByRole('listbox', {
+      name: 'Filter by skills'
+    });
+    await step('Chips element should have aria attributes forwarded', async () => {
+      expect(chipsList).toHaveAttribute('aria-label', 'Filter by skills');
+      expect(chipsList).toHaveAttribute('aria-controls', 'results');
+    });
+  }
+}`,...(Le=(Ee=A.parameters)==null?void 0:Ee.docs)==null?void 0:Le.source},description:{story:"For accessibility, always provide an `aria-label` to describe the chip group's purpose.\nIf the chips control other elements on the page, use `aria-controls` with the target element's ID.",...(Me=(je=A.parameters)==null?void 0:je.docs)==null?void 0:Me.description}}};var We,De,Ue,Ge,qe;F.parameters={...F.parameters,docs:{...(We=F.parameters)==null?void 0:We.docs,source:{originalSource:`{
+  parameters: {
+    a11y: {
+      config: {
+        rules: [{
+          id: 'color-contrast',
+          enabled: false
+        }]
+      }
+    }
+  },
+  args: {
+    'aria-label': 'Select skills',
+    items: undefined,
+    children: <>
+                <Tooltip content="I want to learn vocabulary" dataset={{
+        testid: 'vocabulary-tooltip'
+      }}>
+                    <MultiSelectChipsItem value="vocabulary">Vocabulary</MultiSelectChipsItem>
+                </Tooltip>
+                <Tooltip content="I want to improve my speaking skills" dataset={{
+        testid: 'speaking-tooltip'
+      }}>
+                    <MultiSelectChipsItem value="speaking">Speaking</MultiSelectChipsItem>
+                </Tooltip>
+                <Tooltip content="I want to improve my listening skills" dataset={{
+        testid: 'listening-tooltip'
+      }}>
+                    <MultiSelectChipsItem value="listening">Listening</MultiSelectChipsItem>
+                </Tooltip>
+                <Tooltip content="I want to improve my reading skills" dataset={{
+        testid: 'reading-tooltip'
+      }}>
+                    <MultiSelectChipsItem value="reading">Reading</MultiSelectChipsItem>
+                </Tooltip>
+            </>
+  },
+  play: async ({
+    canvasElement,
+    step
+  }) => {
+    const canvas = within(canvasElement);
+    await step('Tab to the first chip', async () => {
+      await userEvent.tab();
+      await waitFor(() => {
+        expect(canvas.getByTestId('vocabulary-tooltip')).toBeVisible();
+      });
+    });
+    await step('Arrow right to focus next chip', async () => {
+      await userEvent.keyboard('{ArrowRight}');
+      await waitFor(() => {
+        expect(canvas.getByTestId('speaking-tooltip')).toBeVisible();
+      });
+    });
+    await step('Hover third chip', async () => {
+      await userEvent.hover(canvas.getByRole('option', {
+        name: 'Listening'
+      }));
+      await waitFor(() => {
+        expect(canvas.getByTestId('listening-tooltip')).toBeVisible();
+      });
+    });
+  }
+}`,...(Ue=(De=F.parameters)==null?void 0:De.docs)==null?void 0:Ue.source},description:{story:"If you need to wrap individual chips in a component like [\\<Tooltip/>](/docs/components-tooltip--docs),\nyou can use render `<MultiSelectChipsItem/>` as children.",...(qe=(Ge=F.parameters)==null?void 0:Ge.docs)==null?void 0:qe.description}}};var Oe,_e,Pe;R.parameters={...R.parameters,docs:{...(Oe=R.parameters)==null?void 0:Oe.docs,source:{originalSource:`{
+  tags: ['!autodocs'],
+  args: {
+    'aria-label': 'Chips states',
+    value: ['selected', 'selected-hover', 'selected-active', 'selected-focus'],
+    items: undefined,
+    children: <>
+                <MultiSelectChipsItem value="rest">Rest</MultiSelectChipsItem>
+                <MultiSelectChipsItem value="focus" dsInternalSimulation="focus">
+                    Focus
+                </MultiSelectChipsItem>
+                <MultiSelectChipsItem value="hover" dsInternalSimulation="hover">
+                    Hover
+                </MultiSelectChipsItem>
+                <MultiSelectChipsItem value="active" dsInternalSimulation="active">
+                    Active
+                </MultiSelectChipsItem>
+                <MultiSelectChipsItem value="disabled" disabled>
+                    Disabled
+                </MultiSelectChipsItem>
+                <MultiSelectChipsItem value="selected">Selected</MultiSelectChipsItem>
+                <MultiSelectChipsItem value="selected-focus" dsInternalSimulation="focus">
+                    Selected focus
+                </MultiSelectChipsItem>
+                <MultiSelectChipsItem value="selected-hover" dsInternalSimulation="hover">
+                    Selected hover
+                </MultiSelectChipsItem>
+                <MultiSelectChipsItem value="selected-active" dsInternalSimulation="active">
+                    Selected active
+                </MultiSelectChipsItem>
+            </>
+  }
+}`,...(Pe=(_e=R.parameters)==null?void 0:_e.docs)==null?void 0:Pe.source}}};var ze,$e,Ne,Ze,Ke;H.parameters={...H.parameters,docs:{...(ze=H.parameters)==null?void 0:ze.docs,source:{originalSource:`{
+  decorators: [Story => <div style={{
+    maxWidth: 150,
+    margin: '0 auto'
+  }}>
+                <Story />
+            </div>],
+  args: {
+    'aria-label': 'Long label',
+    items: [{
+      value: 'long',
+      icon: TokyoUIEmojiFrowning,
+      label: "I'm way too long to be a chip label, I don't know what to do with myself"
+    }]
+  }
+}`,...(Ne=($e=H.parameters)==null?void 0:$e.docs)==null?void 0:Ne.source},description:{story:"Please, don't use long labels for chips.",...(Ke=(Ze=H.parameters)==null?void 0:Ze.docs)==null?void 0:Ke.description}}};const ot=["Uncontrolled","Controlled","Disabled","WithIcons","WithCounter","WithFlags","CombiningCounterWithIconOrFlag","Vertical","CombinationWithButton","RovingTabindex","Accessibility","WithTooltips","States","LongLabel"];export{A as Accessibility,S as CombinationWithButton,k as CombiningCounterWithIconOrFlag,v as Controlled,m as Disabled,H as LongLabel,I as RovingTabindex,R as States,y as Uncontrolled,C as Vertical,w as WithCounter,f as WithFlags,b as WithIcons,F as WithTooltips,ot as __namedExportsOrder,st as default};