@preply/ds-docs 11.0.0 → 11.1.0

package/dist/assets/TextField.stories-BUVrLpus.js

@@ -0,0 +1,254 @@
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Icon-CfZyHxyH.js";import{n as o,t as s}from"./FieldButton-lc__KGvz.js";import{n as c,t as l}from"./TextField-zS8J7vJP.js";import{n as u,t as d}from"./TokyoUIAttach-CJ32NKTG.js";import{n as f,t as p}from"./TokyoUIUser-BxbKTbW_.js";var m,h,g,_,v,y,b,x,S,C,w,T,E,D,O,k,A,j,M;t((()=>{m=e(n(),1),c(),f(),u(),i(),o(),h=r(),{action:g}=__STORYBOOK_MODULE_ACTIONS__,{expect:_,userEvent:v,within:y,fn:b}=__STORYBOOK_MODULE_TEST__,x={title:`components/TextField`,component:l,args:{name:`fullName`,label:`Full name`,defaultValue:``,placeholder:`John Doe`,dataset:{testid:`field`,foo:`bar`},inputDataset:{testid:`input`,foo:`bar`},onChange:b(),onValueChange:b(),onBlur:b(),onFocus:b(),onClick:b(),onCopy:b(),onKeyDown:b(),onKeyUp:b(),onPaste:b()}},S={play:async({canvasElement:e,step:t,args:n})=>{let r=y(e),i=r.getByTestId(`field`),a=r.getByTestId(`input`);await t(`it should render correct label`,async()=>{_(y(i).getByTestId(`label`)).toHaveTextContent(`Full name • Optional`),_(a).toHaveAccessibleName(`Full name`)}),await t(`it should call onFocus when the input is focused`,async()=>{a.focus(),_(n.onFocus).toHaveBeenCalled()}),await t(`it should call callback when the value changes`,async()=>{await v.type(a,`John Doe`),_(n.onValueChange).toHaveBeenCalledWith(`John Doe`),_(n.onChange).toHaveBeenCalled()}),await t(`it should call onBlur when the input is blurred`,async()=>{await v.keyboard(`{tab}`),_(n.onBlur).toHaveBeenCalled()}),await t(`it should render the dataset props`,async()=>{_(i).toHaveAttribute(`data-testid`,`field`),_(i).toHaveAttribute(`data-foo`,`bar`),_(a).toHaveAttribute(`data-testid`,`input`),_(a).toHaveAttribute(`data-foo`,`bar`)})}},C={render:function(e){let[t,n]=(0,m.useState)(e.value);return(0,h.jsx)(l,{...e,value:t,onChange:t=>{n(t.target.value),e.onChange?.(t)}})},args:{label:`Controlled TextField`,placeholder:`Type something...`,value:`Initial value`,defaultValue:void 0},play:async({canvas:e,step:t})=>{await t(`it should render the correct initial value`,async()=>{await _(e.getByTestId(`input`)).toHaveValue(`Initial value`)}),await t(`it should update the value when the user types`,async()=>{let t=e.getByTestId(`input`);await v.type(t,` - New controlled value`),_(t).toHaveValue(`Initial value - New controlled value`)})}},w={args:{icon:(0,h.jsx)(a,{svg:p,dataset:{testid:`icon`}})},play:async({canvas:e,step:t})=>{await t(`it should render the icon`,async()=>{_(e.getByTestId(`icon`)).toBeInTheDocument()})}},T={args:{description:`Enter your full legal name`},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`),r=e.getByTestId(`description`);await t(`it should render the description`,async()=>{_(n).toHaveAccessibleDescription(`Enter your full legal name`),_(r).toHaveTextContent(`Enter your full legal name`)})}},E={args:{required:!0},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`),r=e.getByTestId(`label`);await t(`it should render correct label`,async()=>{_(n).toHaveAccessibleName(`Full name`),_(r).toHaveTextContent(`Full name`)}),await t(`it should render required attribute`,async()=>{_(n).toHaveAttribute(`required`)})}},D={args:{hideLabel:!0},play:async({canvas:e,step:t})=>{await t(`it should render correct a11y label`,async()=>{_(e.getByTestId(`input`)).toHaveAccessibleName(`Full name`)})}},O={args:{error:`This is an error message`},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`),r=e.getByTestId(`error`);await t(`it should render the error message`,async()=>{_(n).toHaveAccessibleErrorMessage(`This is an error message`),_(r).toHaveTextContent(`This is an error message`)})}},k={args:{disabled:!0},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`);await t(`it should render the disabled input`,async()=>{_(n).toHaveAttribute(`disabled`)})}},A={args:{readOnly:!0},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`);await t(`it should render the read only input`,async()=>{_(n).toHaveAttribute(`readonly`)})}},j={parameters:{chromatic:{disableSnapshot:!0}},args:{label:`Full name`,placeholder:`John Doe`,description:`Enter your full legal name`},argTypes:{label:{control:`text`},placeholder:{control:`text`},description:{control:`text`},error:{control:`text`},value:{control:`text`},defaultValue:{control:`text`},inputDataset:{control:`object`},dataset:{control:`object`},id:{control:`text`},required:{control:`boolean`},hideLabel:{control:`boolean`},name:{control:`text`},disabled:{control:`boolean`},icon:{options:[`None`,`With Icon`],mapping:{None:void 0,"With Icon":p},control:`select`},button:{options:[`None`,`With Button`],mapping:{None:void 0,"With Button":(0,h.jsx)(s,{svg:d,assistiveText:`Do the thing`,onClick:g(`field button clicked`)})},control:`select`},readOnly:{control:`boolean`},maxLength:{control:`number`},hasError:{table:{disable:!0}}}},S.parameters={...S.parameters,docs:{...S.parameters?.docs,source:{originalSource:`{
+  play: async ({
+    canvasElement,
+    step,
+    args
+  }) => {
+    const canvas = within(canvasElement);
+    const field = canvas.getByTestId('field');
+    const input = canvas.getByTestId('input');
+    await step('it should render correct label', async () => {
+      const label = within(field).getByTestId('label');
+      expect(label).toHaveTextContent('Full name • Optional');
+      expect(input).toHaveAccessibleName('Full name');
+    });
+    await step('it should call onFocus when the input is focused', async () => {
+      input.focus();
+      expect(args.onFocus).toHaveBeenCalled();
+    });
+    await step('it should call callback when the value changes', async () => {
+      await userEvent.type(input, 'John Doe');
+      expect(args.onValueChange).toHaveBeenCalledWith('John Doe');
+
+      // I've tried to use \`expect(...).toHaveBeenCalledWith(expect.objectContaining({}))\`
+      // but it doesn't work for some reason.
+      expect(args.onChange).toHaveBeenCalled();
+    });
+    await step('it should call onBlur when the input is blurred', async () => {
+      await userEvent.keyboard('{tab}');
+      expect(args.onBlur).toHaveBeenCalled();
+    });
+    await step('it should render the dataset props', async () => {
+      expect(field).toHaveAttribute('data-testid', 'field');
+      expect(field).toHaveAttribute('data-foo', 'bar');
+      expect(input).toHaveAttribute('data-testid', 'input');
+      expect(input).toHaveAttribute('data-foo', 'bar');
+    });
+  }
+}`,...S.parameters?.docs?.source},description:{story:"An empty field with a `label` and a `placeholder`.",...S.parameters?.docs?.description}}},C.parameters={...C.parameters,docs:{...C.parameters?.docs,source:{originalSource:`{
+  render: function ControlledTextField(args) {
+    const [value, setValue] = useState(args.value);
+    return <TextField {...args} value={value} onChange={e => {
+      setValue(e.target.value);
+      args.onChange?.(e);
+    }} />;
+  },
+  args: {
+    label: 'Controlled TextField',
+    placeholder: 'Type something...',
+    value: 'Initial value',
+    defaultValue: undefined
+  },
+  play: async ({
+    canvas,
+    step
+  }) => {
+    await step('it should render the correct initial value', async () => {
+      const input = canvas.getByTestId('input');
+      await expect(input).toHaveValue('Initial value');
+    });
+    await step('it should update the value when the user types', async () => {
+      const input = canvas.getByTestId('input');
+      await userEvent.type(input, ' - New controlled value');
+      expect(input).toHaveValue('Initial value - New controlled value');
+    });
+  }
+}`,...C.parameters?.docs?.source},description:{story:`A controlled component where the value is managed by React state.`,...C.parameters?.docs?.description}}},w.parameters={...w.parameters,docs:{...w.parameters?.docs,source:{originalSource:`{
+  args: {
+    icon: <Icon svg={UserSvg} dataset={{
+      testid: 'icon'
+    }} />
+  },
+  play: async ({
+    canvas,
+    step
+  }) => {
+    await step('it should render the icon', async () => {
+      const icon = canvas.getByTestId('icon');
+      expect(icon).toBeInTheDocument();
+    });
+  }
+}`,...w.parameters?.docs?.source}}},T.parameters={...T.parameters,docs:{...T.parameters?.docs,source:{originalSource:`{
+  args: {
+    description: 'Enter your full legal name'
+  },
+  play: async ({
+    canvas,
+    step
+  }) => {
+    const input = canvas.getByTestId('input');
+    const description = canvas.getByTestId('description');
+    await step('it should render the description', async () => {
+      expect(input).toHaveAccessibleDescription('Enter your full legal name');
+      expect(description).toHaveTextContent('Enter your full legal name');
+    });
+  }
+}`,...T.parameters?.docs?.source}}},E.parameters={...E.parameters,docs:{...E.parameters?.docs,source:{originalSource:`{
+  args: {
+    required: true
+  },
+  play: async ({
+    canvas,
+    step
+  }) => {
+    const input = canvas.getByTestId('input');
+    const label = canvas.getByTestId('label');
+    await step('it should render correct label', async () => {
+      expect(input).toHaveAccessibleName('Full name');
+      expect(label).toHaveTextContent('Full name');
+    });
+    await step('it should render required attribute', async () => {
+      expect(input).toHaveAttribute('required');
+    });
+  }
+}`,...E.parameters?.docs?.source}}},D.parameters={...D.parameters,docs:{...D.parameters?.docs,source:{originalSource:`{
+  args: {
+    hideLabel: true
+  },
+  play: async ({
+    canvas,
+    step
+  }) => {
+    // Not working for some reason (false positive)
+    // await step('it should hide the label', async () => {
+    //     const label = canvas.getByTestId('label');
+    //     expect(label).not.toBeVisible();
+    // });
+
+    await step('it should render correct a11y label', async () => {
+      const input = canvas.getByTestId('input');
+      expect(input).toHaveAccessibleName('Full name');
+    });
+  }
+}`,...D.parameters?.docs?.source}}},O.parameters={...O.parameters,docs:{...O.parameters?.docs,source:{originalSource:`{
+  args: {
+    error: 'This is an error message'
+  },
+  play: async ({
+    canvas,
+    step
+  }) => {
+    const input = canvas.getByTestId('input');
+    const error = canvas.getByTestId('error');
+    await step('it should render the error message', async () => {
+      expect(input).toHaveAccessibleErrorMessage('This is an error message');
+      expect(error).toHaveTextContent('This is an error message');
+    });
+  }
+}`,...O.parameters?.docs?.source}}},k.parameters={...k.parameters,docs:{...k.parameters?.docs,source:{originalSource:`{
+  args: {
+    disabled: true
+  },
+  play: async ({
+    canvas,
+    step
+  }) => {
+    const input = canvas.getByTestId('input');
+    await step('it should render the disabled input', async () => {
+      expect(input).toHaveAttribute('disabled');
+    });
+  }
+}`,...k.parameters?.docs?.source}}},A.parameters={...A.parameters,docs:{...A.parameters?.docs,source:{originalSource:`{
+  args: {
+    readOnly: true
+  },
+  play: async ({
+    canvas,
+    step
+  }) => {
+    const input = canvas.getByTestId('input');
+    await step('it should render the read only input', async () => {
+      expect(input).toHaveAttribute('readonly');
+    });
+  }
+}`,...A.parameters?.docs?.source}}},j.parameters={...j.parameters,docs:{...j.parameters?.docs,source:{originalSource:`{
+  parameters: {
+    chromatic: {
+      disableSnapshot: true
+    }
+  },
+  args: {
+    label: 'Full name',
+    placeholder: 'John Doe',
+    description: 'Enter your full legal name'
+  },
+  argTypes: {
+    label: {
+      control: 'text'
+    },
+    placeholder: {
+      control: 'text'
+    },
+    description: {
+      control: 'text'
+    },
+    error: {
+      control: 'text'
+    },
+    value: {
+      control: 'text'
+    },
+    defaultValue: {
+      control: 'text'
+    },
+    inputDataset: {
+      control: 'object'
+    },
+    dataset: {
+      control: 'object'
+    },
+    id: {
+      control: 'text'
+    },
+    required: {
+      control: 'boolean'
+    },
+    hideLabel: {
+      control: 'boolean'
+    },
+    name: {
+      control: 'text'
+    },
+    disabled: {
+      control: 'boolean'
+    },
+    icon: {
+      options: ['None', 'With Icon'],
+      mapping: {
+        None: undefined,
+        'With Icon': UserSvg
+      },
+      control: 'select'
+    },
+    button: {
+      options: ['None', 'With Button'],
+      mapping: {
+        None: undefined,
+        'With Button': <FieldButton svg={AttachSvg} assistiveText="Do the thing" onClick={action('field button clicked')} />
+      },
+      control: 'select'
+    },
+    readOnly: {
+      control: 'boolean'
+    },
+    maxLength: {
+      control: 'number'
+    },
+    // Disable deprecated props
+    hasError: {
+      table: {
+        disable: true
+      }
+    }
+  }
+}`,...j.parameters?.docs?.source}}},M=[`Basic`,`Controlled`,`WithIcon`,`WithDescription`,`Required`,`WithHiddenLabel`,`WithErrorMessage`,`Disabled`,`ReadOnly`,`Playground`]}))();export{S as Basic,C as Controlled,k as Disabled,j as Playground,A as ReadOnly,E as Required,T as WithDescription,O as WithErrorMessage,D as WithHiddenLabel,w as WithIcon,M as __namedExportsOrder,x as default};

package/dist/assets/{TextHighlighted-CzbRMqIZ.css → TextHighlighted-C53ygX_A.css}

@@ -1 +1 @@
-.TextHighlighted__ErxU-{display:inline-block;padding-left:var(--58c1e5);padding-right:var(--58c1e5);margin:0;font-style:normal;border-radius:var(--330e49);font-weight:var(--5ea101)}.TextHighlighted--highlight-blue__3H-tS{color:var(--68bd17);background-color:var(--2d51ae)}.TextHighlighted--highlight-green__PXiKm{color:var(--c50238);background-color:var(--292009)}.TextHighlighted--highlight-primary__cKWhc{color:var(--977d1a);background-color:var(--df6b06)}.TextHighlighted--highlight-secondary__24A04{color:var(--6c2ddf);background-color:var(--e5b0a4)}.TextHighlighted--highlight-tertiary__gkbLj{color:var(--8da8cb);background-color:var(--aa7c4d)}.TextHighlighted--highlight-accent__DsZKF{color:var(--1da698);background-color:var(--301ea7)}.TextHighlighted--highlight-positive__Tag8x{color:var(--ad48d7);background-color:var(--a2a233)}.TextHighlighted--highlight-info__Qqv0l{color:var(--2be49e);background-color:var(--86df85)}.TextHighlighted--highlight-warning__--U9g{color:var(--98c505);background-color:var(--d908ab)}.TextHighlighted--highlight-critical__D9jbb{color:var(--802584);background-color:var(--0c251f)}
+.TextHighlighted__ErxU-{padding-left:var(--58c1e5);padding-right:var(--58c1e5);border-radius:var(--330e49);font-style:normal;font-weight:var(--5ea101);margin:0;display:inline-block}.TextHighlighted--highlight-blue__3H-tS{color:var(--68bd17);background-color:var(--2d51ae)}.TextHighlighted--highlight-green__PXiKm{color:var(--c50238);background-color:var(--292009)}.TextHighlighted--highlight-primary__cKWhc{color:var(--977d1a);background-color:var(--df6b06)}.TextHighlighted--highlight-secondary__24A04{color:var(--6c2ddf);background-color:var(--e5b0a4)}.TextHighlighted--highlight-tertiary__gkbLj{color:var(--8da8cb);background-color:var(--aa7c4d)}.TextHighlighted--highlight-accent__DsZKF{color:var(--1da698);background-color:var(--301ea7)}.TextHighlighted--highlight-positive__Tag8x{color:var(--ad48d7);background-color:var(--a2a233)}.TextHighlighted--highlight-info__Qqv0l{color:var(--2be49e);background-color:var(--86df85)}.TextHighlighted--highlight-warning__--U9g{color:var(--98c505);background-color:var(--d908ab)}.TextHighlighted--highlight-critical__D9jbb{color:var(--802584);background-color:var(--0c251f)}

package/dist/assets/TextHighlighted-DF3lEelY.js

@@ -0,0 +1 @@
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{ht as r,lt as i,t as a,ut as o,w as s,x as c,y as l}from"./dist-DtfJeYQK.js";import{t as u}from"./jsx-runtime-C2wGStra.js";import{n as d,t as f}from"./dist-Cc1j9Pjk.js";import{n as p,t as m}from"./filterAttributesPassedByRadixUIAtRuntime-CGiuUnR2.js";var h,g,_=t((()=>{h=`TextHighlighted__ErxU-`,g={TextHighlighted:h,"TextHighlighted--highlight-blue":`TextHighlighted--highlight-blue__3H-tS`,"TextHighlighted--highlight-green":`TextHighlighted--highlight-green__PXiKm`,"TextHighlighted--highlight-primary":`TextHighlighted--highlight-primary__cKWhc`,"TextHighlighted--highlight-secondary":`TextHighlighted--highlight-secondary__24A04`,"TextHighlighted--highlight-tertiary":`TextHighlighted--highlight-tertiary__gkbLj`,"TextHighlighted--highlight-accent":`TextHighlighted--highlight-accent__DsZKF`,"TextHighlighted--highlight-positive":`TextHighlighted--highlight-positive__Tag8x`,"TextHighlighted--highlight-info":`TextHighlighted--highlight-info__Qqv0l`,"TextHighlighted--highlight-warning":`TextHighlighted--highlight-warning__--U9g`,"TextHighlighted--highlight-critical":`TextHighlighted--highlight-critical__D9jbb`}})),v,y,b,x=t((()=>{s(),f(),a(),v=e(n(),1),p(),_(),y=u(),b=(0,v.forwardRef)(function({children:e,highlight:t=i,tag:n=o,dataset:a,...s},u){let f=l(g,d.TextHighlighted,[c(`highlight`,t)]);return(0,y.jsx)(n,{...m(s),ref:u,className:f.join(` `),...r(a,{preplyDsComponent:d.TextHighlighted}),children:e})});try{b.displayName=`TextHighlighted`,b.__docgenInfo={description:``,displayName:`TextHighlighted`,props:{highlight:{defaultValue:{value:`green`},description:``,name:`highlight`,required:!1,type:{name:`enum`,value:[{value:`"accent"`},{value:`"primary"`},{value:`"secondary"`},{value:`"tertiary"`},{value:`"positive"`},{value:`"info"`},{value:`"warning"`},{value:`"critical"`},{value:`"blue"`},{value:`"green"`}]}},tag:{defaultValue:{value:`span`},description:``,name:`tag`,required:!1,type:{name:`enum`,value:[{value:`"em"`},{value:`"span"`},{value:`"strong"`}]}},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: HTMLSpanElement | null) => void`},{value:`RefObject<HTMLSpanElement>`}]}},key:{defaultValue:null,description:``,name:`key`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`number`},{value:`bigint`}]}}}}}catch{}}));export{x as n,b as t};

package/dist/assets/TextHighlighted.stories-CqDVxX79.js

@@ -0,0 +1,32 @@
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{q as r,w as i}from"./dist-DtfJeYQK.js";import{t as a}from"./jsx-runtime-C2wGStra.js";import{n as o,t as s}from"./Text-bm2vnOS2.js";import{n as c,t as l}from"./TextHighlighted-DF3lEelY.js";var u,d,f,p,m,h;t((()=>{i(),e(n(),1),c(),o(),u=a(),d={title:`components/TextHighlighted`,component:l},f=()=>(0,u.jsx)(l,{children:`Lorem ipsum`}),f.tags=[`!test`],f.parameters={chromatic:{disableSnapshot:!0}},p=()=>(0,u.jsx)(`div`,{style:{display:`flex`,flexDirection:`column`,gap:`0.25rem`,width:`fit-content`},children:r.map(({id:e})=>(0,u.jsx)(l,{highlight:e,children:e},e))}),m={parameters:{chromatic:{disableSnapshot:!0}},render:e=>(0,u.jsxs)(s,{children:[`Lorem ipsum `,(0,u.jsx)(l,{...e})]}),args:{children:`dolor sit amet`,dataset:{qaid:`text-highlighted`}},argTypes:{dataset:{control:`object`}}},f.parameters={...f.parameters,docs:{...f.parameters?.docs,source:{originalSource:`() => <TextHighlighted>Lorem ipsum</TextHighlighted>`,...f.parameters?.docs?.source}}},p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`() => <div style={{
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '0.25rem',
+  width: 'fit-content'
+}}>
+        {TEXT_HIGHLIGHT_OPTIONS.map(({
+    id
+  }) => <TextHighlighted key={id} highlight={id}>
+                {id}
+            </TextHighlighted>)}
+    </div>`,...p.parameters?.docs?.source}}},m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
+  parameters: {
+    chromatic: {
+      disableSnapshot: true
+    }
+  },
+  render: args => <Text>
+            Lorem ipsum <TextHighlighted {...args} />
+        </Text>,
+  args: {
+    children: 'dolor sit amet',
+    dataset: {
+      qaid: 'text-highlighted'
+    }
+  },
+  argTypes: {
+    dataset: {
+      control: 'object'
+    }
+  }
+}`,...m.parameters?.docs?.source}}},h=[`Base`,`Options`,`Playground`]}))();export{f as Base,p as Options,m as Playground,h as __namedExportsOrder,d as default};

package/dist/assets/{TextInline-CNIzsRbS.css → TextInline-BDaxjuE1.css}

@@ -1 +1 @@
-.TextWeight__tMRbd.TextWeight--weight-normal__M5PxM{font-weight:var(--5ea101)}.TextWeight__tMRbd.TextWeight--weight-medium__8f3CD{font-weight:var(--2734e9)}.TextWeight__tMRbd.TextWeight--weight-bold__MG-yF{font-weight:var(--800787)}.TextInline__fMaqi{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;margin:0;font-style:normal}.TextInline--italic__yG-Qj{font-style:italic}
+.TextWeight__tMRbd.TextWeight--weight-normal__M5PxM{font-weight:var(--5ea101)}.TextWeight__tMRbd.TextWeight--weight-medium__8f3CD{font-weight:var(--2734e9)}.TextWeight__tMRbd.TextWeight--weight-bold__MG-yF{font-weight:var(--800787)}.TextInline__fMaqi{-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;margin:0;font-style:normal}.TextInline--italic__yG-Qj{font-style:italic}

package/dist/assets/TextInline-CHB850A5.js

@@ -0,0 +1 @@
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{_ as r,ft as i,ht as a,t as o,ut as s,w as c,x as l,y as u}from"./dist-DtfJeYQK.js";import{t as d}from"./jsx-runtime-C2wGStra.js";import{n as f,t as p}from"./dist-Cc1j9Pjk.js";import{n as m,t as h}from"./text-accent-CfNKCcRq.js";import{n as g,t as _}from"./filterAttributesPassedByRadixUIAtRuntime-CGiuUnR2.js";var v,y,b=t((()=>{v=`TextWeight__tMRbd`,y={TextWeight:v,"TextWeight--weight-normal":`TextWeight--weight-normal__M5PxM`,"TextWeight--weight-medium":`TextWeight--weight-medium__8f3CD`,"TextWeight--weight-bold":`TextWeight--weight-bold__MG-yF`}})),x,S,C=t((()=>{o(),b(),x=`TextWeight`,S=e=>u(y,x,[l(`weight`,e)])})),w,T,E=t((()=>{w=`TextInline__fMaqi`,T={TextInline:w,"TextInline--italic":`TextInline--italic__yG-Qj`}})),D,O,k,A=t((()=>{c(),p(),o(),D=e(n(),1),m(),C(),g(),E(),O=d(),k=(0,D.forwardRef)(function({children:e,accent:t,italic:n=!1,weight:o=i,tag:c=s,dataset:l,...d},p){let m=u(T,f.TextInline,[r(`italic`,void 0,n)]),g=h(!t,t),v=S(o),y=[...m,...g,...v];return(0,O.jsx)(c,{..._(d),ref:p,className:y.join(` `),...a(l,{preplyDsComponent:f.TextInline}),children:e})});try{k.displayName=`TextInline`,k.__docgenInfo={description:``,displayName:`TextInline`,props:{accent:{defaultValue:null,description:``,name:`accent`,required:!1,type:{name:`enum`,value:[{value:`"placeholder"`},{value:`"primary"`},{value:`"secondary"`},{value:`"tertiary"`},{value:`"accentDark"`},{value:`"inverted"`},{value:`"positive"`},{value:`"info"`},{value:`"warning"`},{value:`"critical"`}]}},weight:{defaultValue:{value:`normal`},description:``,name:`weight`,required:!1,type:{name:`enum`,value:[{value:`"bold"`},{value:`"medium"`},{value:`"normal"`}]}},italic:{defaultValue:{value:`false`},description:``,name:`italic`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},tag:{defaultValue:{value:`span`},description:``,name:`tag`,required:!1,type:{name:`enum`,value:[{value:`"em"`},{value:`"span"`},{value:`"strong"`}]}},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: HTMLSpanElement | null) => void`},{value:`RefObject<HTMLSpanElement>`}]}},key:{defaultValue:null,description:``,name:`key`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`number`},{value:`bigint`}]}}}}}catch{}}));export{A as n,k as t};

package/dist/assets/TextInline.stories-CN5P8M-t.js

@@ -0,0 +1,50 @@
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{C as r,K as i,Y as a,t as o,w as s}from"./dist-DtfJeYQK.js";import{t as c}from"./jsx-runtime-C2wGStra.js";import{n as l,t as u}from"./Text-bm2vnOS2.js";import{n as d,t as f}from"./TextInline-CHB850A5.js";var p,m,h,g,_,v,y;t((()=>{e(n(),1),d(),l(),o(),s(),p=c(),m={title:`components/TextInline`,component:f},h=()=>(0,p.jsxs)(`p`,{children:[`Lorem `,(0,p.jsx)(f,{children:`ipsum`})]}),h.storyName=`TextInline`,g=()=>{let e=r(a.background.primaryInverted);return(0,p.jsx)(p.Fragment,{children:i.map(({id:t})=>(0,p.jsx)(`div`,{style:{backgroundColor:[`inverted`,`branded`,`selected`].includes(t)?e:void 0},children:(0,p.jsxs)(u,{accent:[`inverted`,`branded`,`selected`].includes(t)?`accentDark`:void 0,children:[`Lorem ipsum `,(0,p.jsx)(f,{accent:t,children:t})]})},t))})},_=()=>(0,p.jsx)(p.Fragment,{children:(0,p.jsxs)(u,{children:[`Lorem ipsum `,(0,p.jsx)(f,{italic:!0,children:`dolor sit amet`}),`.`]})}),v={parameters:{chromatic:{disableSnapshot:!0}},render:e=>(0,p.jsxs)(u,{children:[`Lorem ipsum `,(0,p.jsx)(f,{...e})]}),args:{children:`dolor sit amet`,accent:`accentDark`,tag:`span`,dataset:{qaid:`text-inline`}},argTypes:{dataset:{control:`object`},children:{control:`text`},italic:{control:`boolean`}}},h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`() => <p>
+        Lorem <TextInline>ipsum</TextInline>
+    </p>`,...h.parameters?.docs?.source}}},g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`() => {
+  const grey = getTokenVar(color.background.primaryInverted);
+  return <>
+            {TEXT_ACCENT_OPTIONS.map(({
+      id
+    }) => <div key={id} style={{
+      backgroundColor: ['inverted', 'branded', 'selected'].includes(id) ? grey : undefined
+    }}>
+                    <Text accent={['inverted', 'branded', 'selected'].includes(id) ? 'accentDark' : undefined}>
+                        Lorem ipsum <TextInline accent={id}>{id}</TextInline>
+                    </Text>
+                </div>)}
+        </>;
+}`,...g.parameters?.docs?.source}}},_.parameters={..._.parameters,docs:{..._.parameters?.docs,source:{originalSource:`() => {
+  return <>
+            <Text>
+                Lorem ipsum <TextInline italic>dolor sit amet</TextInline>.
+            </Text>
+        </>;
+}`,..._.parameters?.docs?.source}}},v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`{
+  parameters: {
+    chromatic: {
+      disableSnapshot: true
+    }
+  },
+  render: args => <Text>
+            Lorem ipsum <TextInline {...args} />
+        </Text>,
+  args: {
+    children: 'dolor sit amet',
+    accent: 'accentDark',
+    tag: 'span',
+    dataset: {
+      qaid: 'text-inline'
+    }
+  },
+  argTypes: {
+    dataset: {
+      control: 'object'
+    },
+    children: {
+      control: 'text'
+    },
+    italic: {
+      control: 'boolean'
+    }
+  }
+}`,...v.parameters?.docs?.source}}},y=[`Base`,`Accents`,`Italic`,`Playground`]}))();export{g as Accents,h as Base,_ as Italic,v as Playground,y as __namedExportsOrder,m as default};

package/dist/assets/TextareaField-D-D245Qp.js

@@ -0,0 +1,6 @@
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./dist-Cc1j9Pjk.js";import{n as o,t as s}from"./FormControl-cSvM3XwI.js";import{n as c,t as l}from"./Input-DXnvG-Wl.js";var u,d,f,p=t((()=>{u=e(n(),1),o(),l(),a(),d=r(),f=(0,u.forwardRef)(function({id:e,label:t,description:n,error:r,required:a,inputDataset:o,dataset:l,hideLabel:u,onClick:f,hasError:p,useLegacyRequiredLabel:m,className:h,style:g,..._},v){return(0,d.jsx)(s,{id:e,label:t,description:n,error:r,hasError:p,required:a,dataset:l,hideLabel:u,onClick:f,useLegacyRequiredLabel:m,preplyDsComponent:i.TextareaField,children:(0,d.jsx)(c,{..._,ref:v,dataset:o})})});try{f.displayName=`TextareaField`,f.__docgenInfo={description:``,displayName:`TextareaField`,props:{id:{defaultValue:null,description:`The id to be passed to the input element.
+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<HTMLTextAreaElement>`}]}},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`}]}},required:{defaultValue:null,description:`Indicates if the field is required. When false, adds a "Optional"
+indicator next to the label.`,name:`required`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},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
+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`}]}},useLegacyRequiredLabel:{defaultValue:null,description:`When true, adds a "Required" indicator next to the label for the required fields.
+When false, adds a "Optional" indicator next to the label for the optional fields instead.
+@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`}]}},onCopy:{defaultValue:null,description:``,name:`onCopy`,required:!1,type:{name:`enum`,value:[{value:`ClipboardEventHandler<HTMLTextAreaElement>`}]}},onCut:{defaultValue:null,description:``,name:`onCut`,required:!1,type:{name:`enum`,value:[{value:`ClipboardEventHandler<HTMLTextAreaElement>`}]}},onPaste:{defaultValue:null,description:``,name:`onPaste`,required:!1,type:{name:`enum`,value:[{value:`ClipboardEventHandler<HTMLTextAreaElement>`}]}},onFocus:{defaultValue:null,description:``,name:`onFocus`,required:!1,type:{name:`enum`,value:[{value:`FocusEventHandler<HTMLTextAreaElement>`}]}},onBlur:{defaultValue:null,description:``,name:`onBlur`,required:!1,type:{name:`enum`,value:[{value:`FocusEventHandler<HTMLTextAreaElement>`}]}},onChange:{defaultValue:null,description:``,name:`onChange`,required:!1,type:{name:`enum`,value:[{value:`ChangeEventHandler<HTMLTextAreaElement>`}]}},onKeyDown:{defaultValue:null,description:``,name:`onKeyDown`,required:!1,type:{name:`enum`,value:[{value:`KeyboardEventHandler<HTMLTextAreaElement>`}]}},onKeyUp:{defaultValue:null,description:``,name:`onKeyUp`,required:!1,type:{name:`enum`,value:[{value:`KeyboardEventHandler<HTMLTextAreaElement>`}]}},name:{defaultValue:null,description:``,name:`name`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},disabled:{defaultValue:null,description:``,name:`disabled`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},maxLength:{defaultValue:null,description:``,name:`maxLength`,required:!1,type:{name:`enum`,value:[{value:`number`}]}},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`}]}},rows:{defaultValue:null,description:``,name:`rows`,required:!1,type:{name:`enum`,value:[{value:`number`}]}},onValueChange:{defaultValue:null,description:``,name:`onValueChange`,required:!1,type:{name:`enum`,value:[{value:`(value: string) => void`}]}},resize:{defaultValue:null,description:``,name:`resize`,required:!1,type:{name:`enum`,value:[{value:`"none"`},{value:`"horizontal"`},{value:`"vertical"`},{value:`"both"`}]}},defaultValue:{defaultValue:null,description:``,name:`defaultValue`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},value:{defaultValue:null,description:``,name:`value`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},autoComplete:{defaultValue:null,description:``,name:`autoComplete`,required:!1,type:{name:`enum`,value:[{value:`"off"`},{value:`"on"`}]}},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: HTMLTextAreaElement | null) => void`},{value:`RefObject<HTMLTextAreaElement>`}]}},key:{defaultValue:null,description:``,name:`key`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`number`},{value:`bigint`}]}}}}}catch{}}));export{p as n,f as t};