@preply/ds-docs 3.5.1 → 3.6.0

package/dist/assets/SingleSelectChips.stories-Dqmrydst.js

@@ -0,0 +1,637 @@
+import{j as a}from"./jsx-runtime-BTJTZTIL.js";import{r as Ze}from"./index-Cb9e4tly.js";import{S as p,a as g}from"./SingleSelectChips-DLCTUr2z.js";import{F as aa,a as T,b as Ye,c as Qe,d as ta}from"./TokyoUIEmojiFrowning-DTIcabpJ.js";import{F as na}from"./index-DSVnVYmz.js";import{L as h}from"./LayoutFlex-C3k4b85b.js";import{T as V}from"./Text-CykvSLVe.js";import{f as ia,r as Xe,w as c,e,u as r,a as L}from"./index-Ctq3gFTp.js";import{a as sa}from"./react.esm-BJ_b8t-Z.js";import{d as oa}from"./styled-components.browser.esm-BgpGX317.js";import{L as la}from"./Link-ppzJSCTf.js";import{H as ra}from"./Heading-BLxyLk9f.js";import{T as B}from"./Tooltip-UjXQy5k6.js";import{B as ca}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"./test-utils-DCJN9LZk.js";import"./index-C7hTFOIV.js";import"./index-BPrLDK9Y.js";import"./client-C1fTPCwG.js";import"./useHostname-Y3PlXofY.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/SingleSelectChips",component:g,subcomponents:{SingleSelectChipsItem:p},parameters:{layout:"padded"},args:{"aria-label":"Choose a skill",defaultValue:"vocabulary",onValueChange:ia(),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=c(i),o=s.getByRole("option",{name:"Vocabulary"}),l=s.getByRole("option",{name:"Speaking"}),u=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(u).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("speaking"),e(o).toHaveAttribute("aria-selected","false"),e(l).toHaveAttribute("aria-selected","true"),e(u).toHaveAttribute("aria-selected","false"),e(d).toHaveAttribute("aria-selected","false")}),await t("Click on the chip to deselect it",async()=>{await r.click(l),e(n.onValueChange).toHaveBeenCalledWith(null),e(o).toHaveAttribute("aria-selected","false"),e(l).toHaveAttribute("aria-selected","false"),e(u).toHaveAttribute("aria-selected","false"),e(d).toHaveAttribute("aria-selected","false")})}};let E;const y={render:function({defaultValue:t,...n}){const[s,o]=Ze.useState(t);E=o;const l=u=>{var d;o(u),(d=n.onValueChange)==null||d.call(n,u)};return a.jsx(g,{...n,value:s,onValueChange:l})},play:async({canvasElement:i,step:t,args:n})=>{const s=c(i),o=s.getByRole("option",{name:"Vocabulary"}),l=s.getByRole("option",{name:"Speaking"}),u=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(u).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("speaking"),e(o).toHaveAttribute("aria-selected","false"),e(l).toHaveAttribute("aria-selected","true"),e(u).toHaveAttribute("aria-selected","false"),e(d).toHaveAttribute("aria-selected","false")}),await t("Click on the chip to deselect it",async()=>{await r.click(l),e(n.onValueChange).toHaveBeenCalledWith(null),e(o).toHaveAttribute("aria-selected","false"),e(l).toHaveAttribute("aria-selected","false"),e(u).toHaveAttribute("aria-selected","false"),e(d).toHaveAttribute("aria-selected","false")}),await t("Change the value externally",async()=>{Xe(),await sa(async()=>{E("vocabulary")}),e(n.onValueChange).not.toHaveBeenCalled(),e(o).toHaveAttribute("aria-selected","true"),e(l).toHaveAttribute("aria-selected","false"),e(u).toHaveAttribute("aria-selected","false"),e(d).toHaveAttribute("aria-selected","false")})}},m={args:{items:[{value:"vocabulary",label:"Vocabulary"},{value:"speaking",label:"Speaking",disabled:!0},{value:"listening",label:"Listening"},{value:"reading",label:"Reading"}]},play:async({canvasElement:i,step:t,args:n})=>{const s=c(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"),e(o).toHaveAttribute("aria-selected","false")})}},b={args:{"aria-label":"Choose an availability",defaultValue:"morning",items:[{value:"morning",label:"Morning",icon:a.jsx(T,{})},{value:"afternoon",label:"Afternoon",icon:a.jsx(Ye,{})},{value:"evening",label:"Evening",icon:a.jsx(Qe,{})}]},play:async({canvasElement:i,step:t})=>{const s=c(i).getByRole("option",{name:"Morning"}),o=c(s).getByTestId("chip-icon");await t("Chip should render an icon when `icon` prop is passed",async()=>{e(o).toBeVisible()})}},w={args:{"aria-label":"Choose a language 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=c(i).getByRole("option",{name:/^English/}),o=c(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":"Choose a country",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=c(i).getByRole("option",{name:"Ukraine"}),o=c(s).getByTestId("chip-country-flag");await t("Chip should render a flag when `flagCountryCode` prop is passed",async()=>{e(o).toBeVisible()})}},C={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=c(i),n=c(t.getByRole("option",{name:"Icon + Flag"}));e(n.getByTestId("chip-icon")).toBeVisible(),e(n.queryByTestId("chip-country-flag")).not.toBeInTheDocument()}},S=["2025-08-15T10:00Z","2025-08-16T12:00Z","2025-08-17T14:00Z"],x={args:{orientation:"vertical","aria-label":"Choose a time slot",defaultValue:S[0],items:S.map(i=>({value:`${i}`,label:a.jsx(na,{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=c(i),s=n.getByRole("listbox",{name:"Choose a time slot"}),o=n.getByTestId(S[0]),l=n.getByTestId(S[1]),u=n.getByTestId(S[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(u).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(u).toHaveFocus()})}},k={render:i=>a.jsxs(h,{gap:"12",children:[a.jsx(g,{...i}),a.jsx(ca,{variant:"tertiary",size:"small",onClick:()=>alert("Show all"),children:"Show all"})]})},ua=[{value:"just-starting",label:"I’m just starting"},{value:"basics",label:"I know the basics"},{value:"dont-know",label:"I don’t know"}],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"},{value:"dont-know",label:"I don’t know"}],pa=[{value:"morning",label:"Morning (6-12)",icon:a.jsx(T,{})},{value:"afternoon",label:"Afternoon (12-18)",icon:a.jsx(Ye,{})},{value:"evening",label:"Evening (18-0)",icon:a.jsx(Qe,{})},{value:"night",label:"Night (0-6)",icon:a.jsx(ta,{})},{value:"dont-know",label:"I don’t know"}],I={render:function(t){return a.jsxs(h,{direction:"column",alignItems:"stretch",gap:"64",children:[a.jsxs(h,{direction:"column",alignItems:"stretch",gap:"16",children:[a.jsx(V,{variant:"large-semibold",children:"What’s your current English level?"}),a.jsx(g,{"aria-label":"Selected English level",items:ua})]}),a.jsxs(h,{direction:"column",alignItems:"stretch",gap:"16",children:[a.jsx(V,{variant:"large-semibold",children:"When can you take lessons?"}),a.jsx(g,{"aria-label":"Selected day of the week",items:da})]}),a.jsxs(h,{direction:"column",alignItems:"stretch",gap:"16",children:[a.jsx(V,{variant:"large-semibold",children:"What time of day works for you?"}),a.jsx(g,{"aria-label":"Selected time of day",items:pa})]})]})},play:async({canvasElement:i,step:t})=>{const n=c(i),s=c(n.getByRole("listbox",{name:"Selected English level"})),o=c(n.getByRole("listbox",{name:"Selected day of the week"})),l=s.getByRole("option",{name:"I’m just starting"}),u=s.getByRole("option",{name:"I know the basics"}),d=s.getByRole("option",{name:"I don’t know"}),ea=o.getByRole("option",{name:"Monday"});await t("Tab once to enter first chips group",async()=>{await r.tab(),e(l).toHaveFocus()}),await t("Next tab should focus second chips group",async()=>{await r.tab(),e(ea).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(u).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()})}},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"]}],ga=oa.ul`
+    all: unset;
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    > li {
+        display: contents;
+    }
+`,A={render:function(t){const[n,s]=Ze.useState(null),o=n?j.filter(l=>l.skills.includes(n)):j;return a.jsxs(h,{direction:"column",gap:"24",children:[a.jsxs(h,{direction:"column",gap:"8",children:[a.jsx(ra,{tag:"h2",variant:"large",children:"Articles"}),a.jsx(g,{"aria-label":"Filter by skill","aria-controls":"results",value:n,onValueChange:s,items:[{value:"vocabulary",label:"Vocabulary"},{value:"speaking",label:"Speaking"},{value:"listening",label:"Listening"},{value:"reading",label:"Reading"},{value:"grammar",label:"Grammar"}]})]}),a.jsx("section",{id:"results","aria-label":"Filtered articles",children:a.jsx(ga,{children:o.map(l=>a.jsx("li",{children:a.jsx(la,{href:"#",children:l.title})},l.id))})})]})},play:async({canvasElement:i,step:t})=>{const s=c(i).getByRole("listbox",{name:"Filter by skill"});await t("Chips element should have aria attributes forwarded",async()=>{e(s).toHaveAttribute("aria-label","Filter by skill"),e(s).toHaveAttribute("aria-controls","results")})}},F={parameters:{a11y:{config:{rules:[{id:"color-contrast",enabled:!1}]}}},args:{"aria-label":"Select a skill",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"})})]}),items:void 0},play:async({canvasElement:i,step:t})=>{const n=c(i);await t("Tab to the first chip",async()=>{await r.tab(),await L(()=>{e(n.getByTestId("vocabulary-tooltip")).toBeVisible()})}),await t("Arrow right to focus next chip",async()=>{await r.keyboard("{ArrowRight}"),await L(()=>{e(n.getByTestId("speaking-tooltip")).toBeVisible()})}),await t("Hover third chip",async()=>{await r.hover(n.getByRole("option",{name:"Listening"})),await L(()=>{e(n.getByTestId("listening-tooltip")).toBeVisible()})})}},R={tags:["!autodocs"],render:function(){return a.jsxs(h,{gap:"12",children:[a.jsxs(g,{"aria-label":"Chips states",value:"selected",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(g,{"aria-label":"Chips states",value:"selected",children:a.jsx(p,{value:"selected",dsInternalSimulation:"focus",children:"Selected focus"})}),a.jsx(g,{"aria-label":"Chips states",value:"selected",children:a.jsx(p,{value:"selected",dsInternalSimulation:"hover",children:"Selected hover"})}),a.jsx(g,{"aria-label":"Chips states",value:"selected",children:a.jsx(p,{value:"selected",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:aa,label:"I'm way too long to be a chip label, I don't know what to do with myself"}]}};var W,D,M,U,O;v.parameters={...v.parameters,docs:{...(W=v.parameters)==null?void 0:W.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('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('Click on the chip to deselect it', async () => {
+      await userEvent.click(speaking);
+      expect(args.onValueChange).toHaveBeenCalledWith(null);
+      expect(vocabulary).toHaveAttribute('aria-selected', 'false');
+      expect(speaking).toHaveAttribute('aria-selected', 'false');
+      expect(listening).toHaveAttribute('aria-selected', 'false');
+      expect(reading).toHaveAttribute('aria-selected', 'false');
+    });
+  }
+}`,...(M=(D=v.parameters)==null?void 0:D.docs)==null?void 0:M.source},description:{story:"Basic usage with default value. The component manages its own state internally.",...(O=(U=v.parameters)==null?void 0:U.docs)==null?void 0:O.description}}};var q,_,P,z,J;y.parameters={...y.parameters,docs:{...(q=y.parameters)==null?void 0:q.docs,source:{originalSource:`{
+  render: function StoryRender({
+    defaultValue,
+    ...args
+  }) {
+    const [value, setValue] = useState(defaultValue);
+    setValueFromPlayFunction = setValue;
+    const handleValueChange = (value: string | null) => {
+      setValue(value);
+      args.onValueChange?.(value);
+    };
+    return <SingleSelectChips {...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('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('Click on the chip to deselect it', async () => {
+      await userEvent.click(speaking);
+      expect(args.onValueChange).toHaveBeenCalledWith(null);
+      expect(vocabulary).toHaveAttribute('aria-selected', 'false');
+      expect(speaking).toHaveAttribute('aria-selected', 'false');
+      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');
+      });
+      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', 'false');
+    });
+  }
+}`,...(P=(_=y.parameters)==null?void 0:_.docs)==null?void 0:P.source},description:{story:"Controlled usage where you manage the state externally.",...(J=(z=y.parameters)==null?void 0:z.docs)==null?void 0:J.description}}};var K,$,G,N,Z;m.parameters={...m.parameters,docs:{...(K=m.parameters)==null?void 0:K.docs,source:{originalSource:`{
+  args: {
+    items: [{
+      value: 'vocabulary',
+      label: 'Vocabulary'
+    }, {
+      value: 'speaking',
+      label: 'Speaking',
+      disabled: true
+    }, {
+      value: 'listening',
+      label: 'Listening'
+    }, {
+      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');
+      expect(speaking).toHaveAttribute('aria-selected', 'false');
+    });
+  }
+}`,...(G=($=m.parameters)==null?void 0:$.docs)==null?void 0:G.source},description:{story:"Some chips can be disabled to prevent user interaction.",...(Z=(N=m.parameters)==null?void 0:N.docs)==null?void 0:Z.description}}};var Y,Q,X,ee,ae;b.parameters={...b.parameters,docs:{...(Y=b.parameters)==null?void 0:Y.docs,source:{originalSource:`{
+  args: {
+    'aria-label': 'Choose an availability',
+    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': 'Choose a language 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': 'Choose a country',
+    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,ve,ye;C.parameters={...C.parameters,docs:{...(pe=C.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=C.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.`,...(ye=(ve=C.parameters)==null?void 0:ve.docs)==null?void 0:ye.description}}};var me,be,we,fe,Ce;x.parameters={...x.parameters,docs:{...(me=x.parameters)==null?void 0:me.docs,source:{originalSource:`{
+  args: {
+    orientation: 'vertical',
+    'aria-label': 'Choose a time slot',
+    defaultValue: dates[0],
+    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: 'Choose a time slot'
+    });
+    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=x.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.`,...(Ce=(fe=x.parameters)==null?void 0:fe.docs)==null?void 0:Ce.description}}};var Se,xe,ke,Ie,Ae;k.parameters={...k.parameters,docs:{...(Se=k.parameters)==null?void 0:Se.docs,source:{originalSource:`{
+  render: args => <LayoutFlex gap="12">
+            <SingleSelectChips {...args} />
+            <Button variant="tertiary" size="small" onClick={() => alert('Show all')}>
+                Show all
+            </Button>
+        </LayoutFlex>
+}`,...(ke=(xe=k.parameters)==null?void 0:xe.docs)==null?void 0:ke.source},description:{story:"Chips are intended only for selection. To assign secondary actions, combine chips with a button.",...(Ae=(Ie=k.parameters)==null?void 0:Ie.docs)==null?void 0:Ae.description}}};var Fe,He,Be,Re,Te;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’s your current English level?</Text>
+                    <SingleSelectChips aria-label="Selected English level" items={englishLevelItems} />
+                </LayoutFlex>
+
+                <LayoutFlex direction="column" alignItems="stretch" gap="16">
+                    <Text variant="large-semibold">When can you take lessons?</Text>
+                    <SingleSelectChips aria-label="Selected day of the week" items={dayOfWeekItems} />
+                </LayoutFlex>
+
+                <LayoutFlex direction="column" alignItems="stretch" gap="16">
+                    <Text variant="large-semibold">What time of day works for you?</Text>
+                    <SingleSelectChips aria-label="Selected time of day" items={timeOfDayItems} />
+                </LayoutFlex>
+            </LayoutFlex>;
+  },
+  play: async ({
+    canvasElement,
+    step
+  }) => {
+    const canvas = within(canvasElement);
+    const englishLevelChips = within(canvas.getByRole('listbox', {
+      name: 'Selected English level'
+    }));
+    const dayOfWeekChips = within(canvas.getByRole('listbox', {
+      name: 'Selected day of the week'
+    }));
+    const levelJustStarting = englishLevelChips.getByRole('option', {
+      name: 'I’m just starting'
+    });
+    const levelBasics = englishLevelChips.getByRole('option', {
+      name: 'I know the basics'
+    });
+    const levelDontKnow = englishLevelChips.getByRole('option', {
+      name: 'I don’t know'
+    });
+    const dayMonday = dayOfWeekChips.getByRole('option', {
+      name: 'Monday'
+    });
+    await step('Tab once to enter first chips group', async () => {
+      await userEvent.tab();
+      expect(levelJustStarting).toHaveFocus();
+    });
+    await step('Next tab should focus second chips group', async () => {
+      await userEvent.tab();
+      expect(dayMonday).toHaveFocus();
+    });
+    await step('Shift+Tab should focus first chips group again', async () => {
+      await userEvent.tab({
+        shift: true
+      });
+      expect(levelJustStarting).toHaveFocus();
+    });
+    await step('Right arrow should focus next chip in the group', async () => {
+      await userEvent.keyboard('{ArrowRight}');
+      expect(levelBasics).toHaveFocus();
+    });
+    await step('Left arrow should focus previous chip in the group', async () => {
+      await userEvent.keyboard('{ArrowLeft}');
+      expect(levelJustStarting).toHaveFocus();
+    });
+    await step('Left arrow should focus last chip if first chip is focused', async () => {
+      await userEvent.keyboard('{ArrowLeft}');
+      expect(levelDontKnow).toHaveFocus();
+    });
+    await step('Right arrow should focus first chip if last chip is focused', async () => {
+      await userEvent.keyboard('{ArrowRight}');
+      expect(levelJustStarting).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(levelDontKnow).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}`,...(Te=(Re=I.parameters)==null?void 0:Re.docs)==null?void 0:Te.description}}};var Ve,Le,Ee,je,We;A.parameters={...A.parameters,docs:{...(Ve=A.parameters)==null?void 0:Ve.docs,source:{originalSource:`{
+  // unused \`args\` makes story source code readable 🤷‍♂️
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  render: function StoryRender(_args) {
+    const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
+    const filteredArticles = selectedCategory ? articles.filter(article => article.skills.includes(selectedCategory)) : articles;
+    return <LayoutFlex direction="column" gap="24">
+                <LayoutFlex direction="column" gap="8">
+                    <Heading tag="h2" variant="large">
+                        Articles
+                    </Heading>
+                    <SingleSelectChips aria-label="Filter by skill" aria-controls="results" value={selectedCategory} onValueChange={setSelectedCategory} items={[{
+          value: 'vocabulary',
+          label: 'Vocabulary'
+        }, {
+          value: 'speaking',
+          label: 'Speaking'
+        }, {
+          value: 'listening',
+          label: 'Listening'
+        }, {
+          value: 'reading',
+          label: 'Reading'
+        }, {
+          value: 'grammar',
+          label: 'Grammar'
+        }]} />
+                </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 skill'
+    });
+    await step('Chips element should have aria attributes forwarded', async () => {
+      expect(chipsList).toHaveAttribute('aria-label', 'Filter by skill');
+      expect(chipsList).toHaveAttribute('aria-controls', 'results');
+    });
+  }
+}`,...(Ee=(Le=A.parameters)==null?void 0:Le.docs)==null?void 0:Ee.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.",...(We=(je=A.parameters)==null?void 0:je.docs)==null?void 0:We.description}}};var De,Me,Ue,Oe,qe;F.parameters={...F.parameters,docs:{...(De=F.parameters)==null?void 0:De.docs,source:{originalSource:`{
+  parameters: {
+    a11y: {
+      config: {
+        rules: [{
+          id: 'color-contrast',
+          enabled: false
+        }]
+      }
+    }
+  },
+  args: {
+    'aria-label': 'Select a skill',
+    children: <>
+                <Tooltip content="I want to learn vocabulary" dataset={{
+        testid: 'vocabulary-tooltip'
+      }}>
+                    <SingleSelectChipsItem value="vocabulary">Vocabulary</SingleSelectChipsItem>
+                </Tooltip>
+                <Tooltip content="I want to improve my speaking skills" dataset={{
+        testid: 'speaking-tooltip'
+      }}>
+                    <SingleSelectChipsItem value="speaking">Speaking</SingleSelectChipsItem>
+                </Tooltip>
+                <Tooltip content="I want to improve my listening skills" dataset={{
+        testid: 'listening-tooltip'
+      }}>
+                    <SingleSelectChipsItem value="listening">Listening</SingleSelectChipsItem>
+                </Tooltip>
+                <Tooltip content="I want to improve my reading skills" dataset={{
+        testid: 'reading-tooltip'
+      }}>
+                    <SingleSelectChipsItem value="reading">Reading</SingleSelectChipsItem>
+                </Tooltip>
+            </>,
+    items: undefined
+  },
+  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=(Me=F.parameters)==null?void 0:Me.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 `<SingleSelectChipsItem/>` as children.",...(qe=(Oe=F.parameters)==null?void 0:Oe.docs)==null?void 0:qe.description}}};var _e,Pe,ze;R.parameters={...R.parameters,docs:{...(_e=R.parameters)==null?void 0:_e.docs,source:{originalSource:`{
+  tags: ['!autodocs'],
+  render: function StoryRender() {
+    return <LayoutFlex gap="12">
+                <SingleSelectChips aria-label="Chips states" value="selected">
+                    <SingleSelectChipsItem value="rest">Rest</SingleSelectChipsItem>
+                    <SingleSelectChipsItem value="focus" dsInternalSimulation="focus">
+                        Focus
+                    </SingleSelectChipsItem>
+                    <SingleSelectChipsItem value="hover" dsInternalSimulation="hover">
+                        Hover
+                    </SingleSelectChipsItem>
+                    <SingleSelectChipsItem value="active" dsInternalSimulation="active">
+                        Active
+                    </SingleSelectChipsItem>
+                    <SingleSelectChipsItem value="disabled" disabled>
+                        Disabled
+                    </SingleSelectChipsItem>
+                    <SingleSelectChipsItem value="selected">Selected</SingleSelectChipsItem>
+                </SingleSelectChips>
+                <SingleSelectChips aria-label="Chips states" value="selected">
+                    <SingleSelectChipsItem value="selected" dsInternalSimulation="focus">
+                        Selected focus
+                    </SingleSelectChipsItem>
+                </SingleSelectChips>
+                <SingleSelectChips aria-label="Chips states" value="selected">
+                    <SingleSelectChipsItem value="selected" dsInternalSimulation="hover">
+                        Selected hover
+                    </SingleSelectChipsItem>
+                </SingleSelectChips>
+                <SingleSelectChips aria-label="Chips states" value="selected">
+                    <SingleSelectChipsItem value="selected" dsInternalSimulation="active">
+                        Selected active
+                    </SingleSelectChipsItem>
+                </SingleSelectChips>
+            </LayoutFlex>;
+  }
+}`,...(ze=(Pe=R.parameters)==null?void 0:Pe.docs)==null?void 0:ze.source}}};var Je,Ke,$e,Ge,Ne;H.parameters={...H.parameters,docs:{...(Je=H.parameters)==null?void 0:Je.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"
+    }]
+  }
+}`,...($e=(Ke=H.parameters)==null?void 0:Ke.docs)==null?void 0:$e.source},description:{story:"Please, don't use long labels for chips.",...(Ne=(Ge=H.parameters)==null?void 0:Ge.docs)==null?void 0:Ne.description}}};const ot=["Uncontrolled","Controlled","Disabled","WithIcons","WithCounter","WithFlags","CombiningCounterWithIconOrFlag","Vertical","CombinationWithButton","RovingTabindex","Accessibility","WithTooltips","States","LongLabel"];export{A as Accessibility,k as CombinationWithButton,C as CombiningCounterWithIconOrFlag,y as Controlled,m as Disabled,H as LongLabel,I as RovingTabindex,R as States,v as Uncontrolled,x as Vertical,w as WithCounter,f as WithFlags,b as WithIcons,F as WithTooltips,ot as __namedExportsOrder,st as default};