@transferwise/components 0.0.0-experimental-8bc11c4 → 0.0.0-experimental-151e673

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/build/SegmentedControl/SegmentedControl.js +9 -2
  2. package/build/SegmentedControl/SegmentedControl.js.map +1 -1
  3. package/build/SegmentedControl/SegmentedControl.mjs +9 -2
  4. package/build/SegmentedControl/SegmentedControl.mjs.map +1 -1
  5. package/build/main.css +28 -10
  6. package/build/styles/AvatarLayout/AvatarLayout.css +26 -9
  7. package/build/styles/SegmentedControl/SegmentedControl.css +2 -1
  8. package/build/styles/main.css +28 -10
  9. package/build/types/SegmentedControl/SegmentedControl.d.ts.map +1 -1
  10. package/package.json +1 -1
  11. package/src/AvatarLayout/AvatarLayout.css +26 -9
  12. package/src/AvatarLayout/AvatarLayout.less +46 -22
  13. package/src/AvatarLayout/_stories/AvatarLayout.test.story.tsx +17 -42
  14. package/src/Field/_stories/Field.test.story.tsx +48 -37
  15. package/src/FlowNavigation/_stories/FlowNavigation.rtl.test.story.tsx +78 -0
  16. package/src/FlowNavigation/_stories/FlowNavigation.test.story.tsx +0 -44
  17. package/src/Label/_stories/Label.test.story.tsx +35 -22
  18. package/src/Popover/_stories/Popover.rtl.test.story.tsx +40 -50
  19. package/src/SegmentedControl/SegmentedControl.css +2 -1
  20. package/src/SegmentedControl/SegmentedControl.less +4 -2
  21. package/src/SegmentedControl/SegmentedControl.tsx +8 -2
  22. package/src/SegmentedControl/_stories/SegmentedControl.test.story.tsx +16 -8
  23. package/src/main.css +28 -10
package/build/SegmentedControl/SegmentedControl.js CHANGED
@@ -29,6 +29,8 @@ require('@transferwise/icons');
29
29
  require('react-intl');
30
30
  require('../common/CloseButton/CloseButton.messages.js');
31
31
  var jsxRuntime = require('react/jsx-runtime');
32
+ require('@transferwise/neptune-validation');
33
+ var useDirection = require('../common/hooks/useDirection/useDirection.js');
32
34
 
33
35
  const SegmentedControl = ({
34
36
  name,
@@ -39,6 +41,9 @@ const SegmentedControl = ({
39
41
  }) => {
40
42
  const isMountedRef = React.useRef(false);
41
43
  const [animate, setAnimate] = React.useState(false);
44
+ const {
45
+ isRTL
46
+ } = useDirection.useDirection();
42
47
  const segmentsRef = React.useRef(null);
43
48
  if (segments.length > 3) {
44
49
  throw new Error('SegmentedControl only supports up to 3 segments. Please refer to: https://docs.wise.design/components/segmented-control');
@@ -56,8 +61,10 @@ const SegmentedControl = ({
56
61
  const {
57
62
  style
58
63
  } = segmentsRef.current;
59
- style.setProperty('--segment-highlight-width', `${selectedSegmentRef.current.offsetWidth}px`);
60
- style.setProperty('--segment-highlight-x', `${selectedSegmentRef.current.offsetLeft}px`);
64
+ const segment = selectedSegmentRef.current;
65
+ const inlineOffset = isRTL ? segmentsRef.current.offsetWidth - segment.offsetLeft - segment.offsetWidth : segment.offsetLeft;
66
+ style.setProperty('--segment-highlight-width', `${segment.offsetWidth}px`);
67
+ style.setProperty('--segment-highlight-x', `${inlineOffset}px`);
61
68
  }
62
69
  };
63
70
  React.useEffect(() => {
package/build/SegmentedControl/SegmentedControl.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SegmentedControl.js","sources":["../../src/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { createRef, useEffect, useRef, useState } from 'react';\n\nimport Body from '../Body';\nimport { Typography } from '../common';\n\ntype SegmentBase = { id: string; label: string; value: string };\n\ntype Segment = SegmentBase & { controls?: never };\ntype SegmentWithControls = SegmentBase & { controls: string };\n\nexport type Segments = readonly Segment[] | readonly SegmentWithControls[];\n\ntype SegmentedControlPropsBase = {\n name: string;\n value: string;\n mode: 'input' | 'view';\n onChange: (value: string) => void;\n};\n\ntype SegmentedControlViewProps = {\n mode: 'view';\n segments: readonly SegmentWithControls[];\n};\n\ntype SegmentedControlInputProps = {\n mode: 'input';\n segments: readonly Segment[];\n};\n\nexport type SegmentedControlProps = SegmentedControlPropsBase &\n (SegmentedControlViewProps | SegmentedControlInputProps);\n\nconst SegmentedControl = ({\n name,\n value,\n mode = 'input',\n segments,\n onChange,\n}: SegmentedControlProps) => {\n const isMountedRef = useRef(false);\n const [animate, setAnimate] = useState(false);\n\n const segmentsRef = useRef<HTMLDivElement>(null);\n\n if (segments.length > 3) {\n throw new Error(\n 'SegmentedControl only supports up to 3 segments. Please refer to: https://docs.wise.design/components/segmented-control',\n );\n }\n\n const segmentsWithRefs = segments.map((segment) => ({\n ...segment,\n ref: createRef<HTMLLabelElement | HTMLButtonElement>(),\n }));\n\n const updateSegmentPosition = () => {\n const selectedSegmentRef = segmentsWithRefs.find((segment) => segment.value === value)?.ref;\n\n // We grab the active segments style object from the ref\n // and set the css variables to the selected segments width and x position.\n // This is so we can animate the highlight to the selected segment\n if (selectedSegmentRef?.current && segmentsRef.current) {\n const { style } = segmentsRef.current;\n style.setProperty('--segment-highlight-width', `${selectedSegmentRef.current.offsetWidth}px`);\n style.setProperty('--segment-highlight-x', `${selectedSegmentRef.current.offsetLeft}px`);\n }\n };\n\n useEffect(() => {\n if (isMountedRef.current) {\n setAnimate(true);\n } else {\n isMountedRef.current = true;\n }\n\n updateSegmentPosition();\n\n const handleWindowSizeChange = () => {\n setAnimate(false);\n updateSegmentPosition();\n };\n\n window.addEventListener('resize', handleWindowSizeChange);\n return () => {\n window.removeEventListener('resize', handleWindowSizeChange);\n };\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [segmentsWithRefs, value]);\n\n return (\n <div\n ref={segmentsRef}\n data-testid=\"segmented-control\"\n className={clsx('segmented-control', {\n 'segmented-control--input': mode === 'input',\n })}\n >\n <div\n className={clsx('segmented-control__segments', {\n 'segmented-control__segments--no-animate': !animate,\n })}\n role={mode !== 'input' ? 'tablist' : undefined}\n >\n {segmentsWithRefs.map((segment) => {\n const onSelect = () => {\n setAnimate(true);\n onChange(segment.value);\n };\n return mode === 'input' ? (\n <label\n ref={segment.ref as React.MutableRefObject<HTMLLabelElement | null>}\n key={segment.id}\n htmlFor={segment.id}\n className={clsx('segmented-control__segment', {\n 'segmented-control__selected-segment': value === segment.value,\n })}\n >\n <input\n type=\"radio\"\n className=\"segmented-control__radio-input\"\n id={segment.id}\n name={name}\n value={segment.value}\n checked={value === segment.value}\n onChange={onSelect}\n />\n <Body\n className=\"segmented-control__text\"\n as=\"span\"\n type={\n value === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT\n }\n >\n {segment.label}\n </Body>\n </label>\n ) : (\n <button\n ref={segment.ref as React.MutableRefObject<HTMLButtonElement | null>}\n key={segment.id}\n type=\"button\"\n role=\"tab\"\n id={segment.id}\n aria-controls={segment.controls}\n aria-selected={value === segment.value}\n className={clsx('segmented-control__segment', 'segmented-control__button', {\n 'segmented-control__selected-segment': value === segment.value,\n })}\n onClick={onSelect}\n >\n <Body\n as=\"span\"\n className=\"segmented-control__text\"\n type={\n value === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT\n }\n >\n {segment.label}\n </Body>\n </button>\n );\n })}\n </div>\n </div>\n );\n};\n\nexport default SegmentedControl;\n"],"names":["SegmentedControl","name","value","mode","segments","onChange","isMountedRef","useRef","animate","setAnimate","useState","segmentsRef","length","Error","segmentsWithRefs","map","segment","ref","createRef","updateSegmentPosition","selectedSegmentRef","find","current","style","setProperty","offsetWidth","offsetLeft","useEffect","handleWindowSizeChange","window","addEventListener","removeEventListener","_jsx","className","clsx","children","role","undefined","onSelect","_jsxs","htmlFor","id","type","checked","Body","as","Typography","BODY_DEFAULT_BOLD","BODY_DEFAULT","label","controls","onClick"],"mappings":"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"}
1
+ {"version":3,"file":"SegmentedControl.js","sources":["../../src/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { createRef, useEffect, useRef, useState } from 'react';\n\nimport Body from '../Body';\nimport { Typography } from '../common';\nimport { useDirection } from '../common/hooks';\n\ntype SegmentBase = { id: string; label: string; value: string };\n\ntype Segment = SegmentBase & { controls?: never };\ntype SegmentWithControls = SegmentBase & { controls: string };\n\nexport type Segments = readonly Segment[] | readonly SegmentWithControls[];\n\ntype SegmentedControlPropsBase = {\n name: string;\n value: string;\n mode: 'input' | 'view';\n onChange: (value: string) => void;\n};\n\ntype SegmentedControlViewProps = {\n mode: 'view';\n segments: readonly SegmentWithControls[];\n};\n\ntype SegmentedControlInputProps = {\n mode: 'input';\n segments: readonly Segment[];\n};\n\nexport type SegmentedControlProps = SegmentedControlPropsBase &\n (SegmentedControlViewProps | SegmentedControlInputProps);\n\nconst SegmentedControl = ({\n name,\n value,\n mode = 'input',\n segments,\n onChange,\n}: SegmentedControlProps) => {\n const isMountedRef = useRef(false);\n const [animate, setAnimate] = useState(false);\n const { isRTL } = useDirection();\n\n const segmentsRef = useRef<HTMLDivElement>(null);\n\n if (segments.length > 3) {\n throw new Error(\n 'SegmentedControl only supports up to 3 segments. Please refer to: https://docs.wise.design/components/segmented-control',\n );\n }\n\n const segmentsWithRefs = segments.map((segment) => ({\n ...segment,\n ref: createRef<HTMLLabelElement | HTMLButtonElement>(),\n }));\n\n const updateSegmentPosition = () => {\n const selectedSegmentRef = segmentsWithRefs.find((segment) => segment.value === value)?.ref;\n\n // We grab the active segments style object from the ref\n // and set the css variables to the selected segments width and x position.\n // This is so we can animate the highlight to the selected segment\n if (selectedSegmentRef?.current && segmentsRef.current) {\n const { style } = segmentsRef.current;\n const segment = selectedSegmentRef.current;\n const inlineOffset = isRTL\n ? segmentsRef.current.offsetWidth - segment.offsetLeft - segment.offsetWidth\n : segment.offsetLeft;\n style.setProperty('--segment-highlight-width', `${segment.offsetWidth}px`);\n style.setProperty('--segment-highlight-x', `${inlineOffset}px`);\n }\n };\n\n useEffect(() => {\n if (isMountedRef.current) {\n setAnimate(true);\n } else {\n isMountedRef.current = true;\n }\n\n updateSegmentPosition();\n\n const handleWindowSizeChange = () => {\n setAnimate(false);\n updateSegmentPosition();\n };\n\n window.addEventListener('resize', handleWindowSizeChange);\n return () => {\n window.removeEventListener('resize', handleWindowSizeChange);\n };\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [segmentsWithRefs, value]);\n\n return (\n <div\n ref={segmentsRef}\n data-testid=\"segmented-control\"\n className={clsx('segmented-control', {\n 'segmented-control--input': mode === 'input',\n })}\n >\n <div\n className={clsx('segmented-control__segments', {\n 'segmented-control__segments--no-animate': !animate,\n })}\n role={mode !== 'input' ? 'tablist' : undefined}\n >\n {segmentsWithRefs.map((segment) => {\n const onSelect = () => {\n setAnimate(true);\n onChange(segment.value);\n };\n return mode === 'input' ? (\n <label\n ref={segment.ref as React.MutableRefObject<HTMLLabelElement | null>}\n key={segment.id}\n htmlFor={segment.id}\n className={clsx('segmented-control__segment', {\n 'segmented-control__selected-segment': value === segment.value,\n })}\n >\n <input\n type=\"radio\"\n className=\"segmented-control__radio-input\"\n id={segment.id}\n name={name}\n value={segment.value}\n checked={value === segment.value}\n onChange={onSelect}\n />\n <Body\n className=\"segmented-control__text\"\n as=\"span\"\n type={\n value === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT\n }\n >\n {segment.label}\n </Body>\n </label>\n ) : (\n <button\n ref={segment.ref as React.MutableRefObject<HTMLButtonElement | null>}\n key={segment.id}\n type=\"button\"\n role=\"tab\"\n id={segment.id}\n aria-controls={segment.controls}\n aria-selected={value === segment.value}\n className={clsx('segmented-control__segment', 'segmented-control__button', {\n 'segmented-control__selected-segment': value === segment.value,\n })}\n onClick={onSelect}\n >\n <Body\n as=\"span\"\n className=\"segmented-control__text\"\n type={\n value === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT\n }\n >\n {segment.label}\n </Body>\n </button>\n );\n })}\n </div>\n </div>\n );\n};\n\nexport default SegmentedControl;\n"],"names":["SegmentedControl","name","value","mode","segments","onChange","isMountedRef","useRef","animate","setAnimate","useState","isRTL","useDirection","segmentsRef","length","Error","segmentsWithRefs","map","segment","ref","createRef","updateSegmentPosition","selectedSegmentRef","find","current","style","inlineOffset","offsetWidth","offsetLeft","setProperty","useEffect","handleWindowSizeChange","window","addEventListener","removeEventListener","_jsx","className","clsx","children","role","undefined","onSelect","_jsxs","htmlFor","id","type","checked","Body","as","Typography","BODY_DEFAULT_BOLD","BODY_DEFAULT","label","controls","onClick"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA,MAAMA,gBAAgB,GAAGA,CAAC;EACxBC,IAAI;EACJC,KAAK;AACLC,EAAAA,IAAI,GAAG,OAAO;EACdC,QAAQ;AACRC,EAAAA;AAAQ,CACc,KAAI;AAC1B,EAAA,MAAMC,YAAY,GAAGC,YAAM,CAAC,KAAK,CAAC;EAClC,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC;EAC7C,MAAM;AAAEC,IAAAA;GAAO,GAAGC,yBAAY,EAAE;AAEhC,EAAA,MAAMC,WAAW,GAAGN,YAAM,CAAiB,IAAI,CAAC;AAEhD,EAAA,IAAIH,QAAQ,CAACU,MAAM,GAAG,CAAC,EAAE;AACvB,IAAA,MAAM,IAAIC,KAAK,CACb,yHAAyH,CAC1H;AACH,EAAA;AAEA,EAAA,MAAMC,gBAAgB,GAAGZ,QAAQ,CAACa,GAAG,CAAEC,OAAO,KAAM;AAClD,IAAA,GAAGA,OAAO;IACVC,GAAG,eAAEC,eAAS;AACf,GAAA,CAAC,CAAC;EAEH,MAAMC,qBAAqB,GAAGA,MAAK;AACjC,IAAA,MAAMC,kBAAkB,GAAGN,gBAAgB,CAACO,IAAI,CAAEL,OAAO,IAAKA,OAAO,CAAChB,KAAK,KAAKA,KAAK,CAAC,EAAEiB,GAAG;AAE3F;AACA;AACA;AACA,IAAA,IAAIG,kBAAkB,EAAEE,OAAO,IAAIX,WAAW,CAACW,OAAO,EAAE;MACtD,MAAM;AAAEC,QAAAA;OAAO,GAAGZ,WAAW,CAACW,OAAO;AACrC,MAAA,MAAMN,OAAO,GAAGI,kBAAkB,CAACE,OAAO;MAC1C,MAAME,YAAY,GAAGf,KAAK,GACtBE,WAAW,CAACW,OAAO,CAACG,WAAW,GAAGT,OAAO,CAACU,UAAU,GAAGV,OAAO,CAACS,WAAW,GAC1ET,OAAO,CAACU,UAAU;MACtBH,KAAK,CAACI,WAAW,CAAC,2BAA2B,EAAE,GAAGX,OAAO,CAACS,WAAW,CAAA,EAAA,CAAI,CAAC;MAC1EF,KAAK,CAACI,WAAW,CAAC,uBAAuB,EAAE,CAAA,EAAGH,YAAY,IAAI,CAAC;AACjE,IAAA;EACF,CAAC;AAEDI,EAAAA,eAAS,CAAC,MAAK;IACb,IAAIxB,YAAY,CAACkB,OAAO,EAAE;MACxBf,UAAU,CAAC,IAAI,CAAC;AAClB,IAAA,CAAC,MAAM;MACLH,YAAY,CAACkB,OAAO,GAAG,IAAI;AAC7B,IAAA;AAEAH,IAAAA,qBAAqB,EAAE;IAEvB,MAAMU,sBAAsB,GAAGA,MAAK;MAClCtB,UAAU,CAAC,KAAK,CAAC;AACjBY,MAAAA,qBAAqB,EAAE;IACzB,CAAC;AAEDW,IAAAA,MAAM,CAACC,gBAAgB,CAAC,QAAQ,EAAEF,sBAAsB,CAAC;AACzD,IAAA,OAAO,MAAK;AACVC,MAAAA,MAAM,CAACE,mBAAmB,CAAC,QAAQ,EAAEH,sBAAsB,CAAC;IAC9D,CAAC;AAED;AACF,EAAA,CAAC,EAAE,CAACf,gBAAgB,EAAEd,KAAK,CAAC,CAAC;AAE7B,EAAA,oBACEiC,cAAA,CAAA,KAAA,EAAA;AACEhB,IAAAA,GAAG,EAAEN,WAAY;AACjB,IAAA,aAAA,EAAY,mBAAmB;AAC/BuB,IAAAA,SAAS,EAAEC,SAAI,CAAC,mBAAmB,EAAE;MACnC,0BAA0B,EAAElC,IAAI,KAAK;AACtC,KAAA,CAAE;AAAAmC,IAAAA,QAAA,eAEHH,cAAA,CAAA,KAAA,EAAA;AACEC,MAAAA,SAAS,EAAEC,SAAI,CAAC,6BAA6B,EAAE;AAC7C,QAAA,yCAAyC,EAAE,CAAC7B;AAC7C,OAAA,CAAE;AACH+B,MAAAA,IAAI,EAAEpC,IAAI,KAAK,OAAO,GAAG,SAAS,GAAGqC,SAAU;AAAAF,MAAAA,QAAA,EAE9CtB,gBAAgB,CAACC,GAAG,CAAEC,OAAO,IAAI;QAChC,MAAMuB,QAAQ,GAAGA,MAAK;UACpBhC,UAAU,CAAC,IAAI,CAAC;AAChBJ,UAAAA,QAAQ,CAACa,OAAO,CAAChB,KAAK,CAAC;QACzB,CAAC;AACD,QAAA,OAAOC,IAAI,KAAK,OAAO,gBACrBuC,eAAA,CAAA,OAAA,EAAA;UACEvB,GAAG,EAAED,OAAO,CAACC,GAAuD;UAEpEwB,OAAO,EAAEzB,OAAO,CAAC0B,EAAG;AACpBR,UAAAA,SAAS,EAAEC,SAAI,CAAC,4BAA4B,EAAE;AAC5C,YAAA,qCAAqC,EAAEnC,KAAK,KAAKgB,OAAO,CAAChB;AAC1D,WAAA,CAAE;AAAAoC,UAAAA,QAAA,gBAEHH,cAAA,CAAA,OAAA,EAAA;AACEU,YAAAA,IAAI,EAAC,OAAO;AACZT,YAAAA,SAAS,EAAC,gCAAgC;YAC1CQ,EAAE,EAAE1B,OAAO,CAAC0B,EAAG;AACf3C,YAAAA,IAAI,EAAEA,IAAK;YACXC,KAAK,EAAEgB,OAAO,CAAChB,KAAM;AACrB4C,YAAAA,OAAO,EAAE5C,KAAK,KAAKgB,OAAO,CAAChB,KAAM;AACjCG,YAAAA,QAAQ,EAAEoC;AAAS,WAAA,CAErB,eAAAN,cAAA,CAACY,YAAI,EAAA;AACHX,YAAAA,SAAS,EAAC,yBAAyB;AACnCY,YAAAA,EAAE,EAAC,MAAM;AACTH,YAAAA,IAAI,EACF3C,KAAK,KAAKgB,OAAO,CAAChB,KAAK,GAAG+C,qBAAU,CAACC,iBAAiB,GAAGD,qBAAU,CAACE,YACrE;YAAAb,QAAA,EAEApB,OAAO,CAACkC;AAAK,WACV,CACR;AAAA,SAAA,EAxBOlC,OAAO,CAAC0B,EAwBR,CAAC,gBAERT,cAAA,CAAA,QAAA,EAAA;UACEhB,GAAG,EAAED,OAAO,CAACC,GAAwD;AAErE0B,UAAAA,IAAI,EAAC,QAAQ;AACbN,UAAAA,IAAI,EAAC,KAAK;UACVK,EAAE,EAAE1B,OAAO,CAAC0B,EAAG;UACf,eAAA,EAAe1B,OAAO,CAACmC,QAAS;AAChC,UAAA,eAAA,EAAenD,KAAK,KAAKgB,OAAO,CAAChB,KAAM;AACvCkC,UAAAA,SAAS,EAAEC,SAAI,CAAC,4BAA4B,EAAE,2BAA2B,EAAE;AACzE,YAAA,qCAAqC,EAAEnC,KAAK,KAAKgB,OAAO,CAAChB;AAC1D,WAAA,CAAE;AACHoD,UAAAA,OAAO,EAAEb,QAAS;UAAAH,QAAA,eAElBH,cAAA,CAACY,YAAI,EAAA;AACHC,YAAAA,EAAE,EAAC,MAAM;AACTZ,YAAAA,SAAS,EAAC,yBAAyB;AACnCS,YAAAA,IAAI,EACF3C,KAAK,KAAKgB,OAAO,CAAChB,KAAK,GAAG+C,qBAAU,CAACC,iBAAiB,GAAGD,qBAAU,CAACE,YACrE;YAAAb,QAAA,EAEApB,OAAO,CAACkC;WACL;SACR,EApBOlC,OAAO,CAAC0B,EAoBP,CACT;MACH,CAAC;KACE;AACP,GAAK,CAAC;AAEV;;;;"}
package/build/SegmentedControl/SegmentedControl.mjs CHANGED
@@ -25,6 +25,8 @@ import '@transferwise/icons';
25
25
  import 'react-intl';
26
26
  import '../common/CloseButton/CloseButton.messages.mjs';
27
27
  import { jsx, jsxs } from 'react/jsx-runtime';
28
+ import '@transferwise/neptune-validation';
29
+ import { useDirection } from '../common/hooks/useDirection/useDirection.mjs';
28
30
 
29
31
  const SegmentedControl = ({
30
32
  name,
@@ -35,6 +37,9 @@ const SegmentedControl = ({
35
37
  }) => {
36
38
  const isMountedRef = useRef(false);
37
39
  const [animate, setAnimate] = useState(false);
40
+ const {
41
+ isRTL
42
+ } = useDirection();
38
43
  const segmentsRef = useRef(null);
39
44
  if (segments.length > 3) {
40
45
  throw new Error('SegmentedControl only supports up to 3 segments. Please refer to: https://docs.wise.design/components/segmented-control');
@@ -52,8 +57,10 @@ const SegmentedControl = ({
52
57
  const {
53
58
  style
54
59
  } = segmentsRef.current;
55
- style.setProperty('--segment-highlight-width', `${selectedSegmentRef.current.offsetWidth}px`);
56
- style.setProperty('--segment-highlight-x', `${selectedSegmentRef.current.offsetLeft}px`);
60
+ const segment = selectedSegmentRef.current;
61
+ const inlineOffset = isRTL ? segmentsRef.current.offsetWidth - segment.offsetLeft - segment.offsetWidth : segment.offsetLeft;
62
+ style.setProperty('--segment-highlight-width', `${segment.offsetWidth}px`);
63
+ style.setProperty('--segment-highlight-x', `${inlineOffset}px`);
57
64
  }
58
65
  };
59
66
  useEffect(() => {
package/build/SegmentedControl/SegmentedControl.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SegmentedControl.mjs","sources":["../../src/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { createRef, useEffect, useRef, useState } from 'react';\n\nimport Body from '../Body';\nimport { Typography } from '../common';\n\ntype SegmentBase = { id: string; label: string; value: string };\n\ntype Segment = SegmentBase & { controls?: never };\ntype SegmentWithControls = SegmentBase & { controls: string };\n\nexport type Segments = readonly Segment[] | readonly SegmentWithControls[];\n\ntype SegmentedControlPropsBase = {\n name: string;\n value: string;\n mode: 'input' | 'view';\n onChange: (value: string) => void;\n};\n\ntype SegmentedControlViewProps = {\n mode: 'view';\n segments: readonly SegmentWithControls[];\n};\n\ntype SegmentedControlInputProps = {\n mode: 'input';\n segments: readonly Segment[];\n};\n\nexport type SegmentedControlProps = SegmentedControlPropsBase &\n (SegmentedControlViewProps | SegmentedControlInputProps);\n\nconst SegmentedControl = ({\n name,\n value,\n mode = 'input',\n segments,\n onChange,\n}: SegmentedControlProps) => {\n const isMountedRef = useRef(false);\n const [animate, setAnimate] = useState(false);\n\n const segmentsRef = useRef<HTMLDivElement>(null);\n\n if (segments.length > 3) {\n throw new Error(\n 'SegmentedControl only supports up to 3 segments. Please refer to: https://docs.wise.design/components/segmented-control',\n );\n }\n\n const segmentsWithRefs = segments.map((segment) => ({\n ...segment,\n ref: createRef<HTMLLabelElement | HTMLButtonElement>(),\n }));\n\n const updateSegmentPosition = () => {\n const selectedSegmentRef = segmentsWithRefs.find((segment) => segment.value === value)?.ref;\n\n // We grab the active segments style object from the ref\n // and set the css variables to the selected segments width and x position.\n // This is so we can animate the highlight to the selected segment\n if (selectedSegmentRef?.current && segmentsRef.current) {\n const { style } = segmentsRef.current;\n style.setProperty('--segment-highlight-width', `${selectedSegmentRef.current.offsetWidth}px`);\n style.setProperty('--segment-highlight-x', `${selectedSegmentRef.current.offsetLeft}px`);\n }\n };\n\n useEffect(() => {\n if (isMountedRef.current) {\n setAnimate(true);\n } else {\n isMountedRef.current = true;\n }\n\n updateSegmentPosition();\n\n const handleWindowSizeChange = () => {\n setAnimate(false);\n updateSegmentPosition();\n };\n\n window.addEventListener('resize', handleWindowSizeChange);\n return () => {\n window.removeEventListener('resize', handleWindowSizeChange);\n };\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [segmentsWithRefs, value]);\n\n return (\n <div\n ref={segmentsRef}\n data-testid=\"segmented-control\"\n className={clsx('segmented-control', {\n 'segmented-control--input': mode === 'input',\n })}\n >\n <div\n className={clsx('segmented-control__segments', {\n 'segmented-control__segments--no-animate': !animate,\n })}\n role={mode !== 'input' ? 'tablist' : undefined}\n >\n {segmentsWithRefs.map((segment) => {\n const onSelect = () => {\n setAnimate(true);\n onChange(segment.value);\n };\n return mode === 'input' ? (\n <label\n ref={segment.ref as React.MutableRefObject<HTMLLabelElement | null>}\n key={segment.id}\n htmlFor={segment.id}\n className={clsx('segmented-control__segment', {\n 'segmented-control__selected-segment': value === segment.value,\n })}\n >\n <input\n type=\"radio\"\n className=\"segmented-control__radio-input\"\n id={segment.id}\n name={name}\n value={segment.value}\n checked={value === segment.value}\n onChange={onSelect}\n />\n <Body\n className=\"segmented-control__text\"\n as=\"span\"\n type={\n value === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT\n }\n >\n {segment.label}\n </Body>\n </label>\n ) : (\n <button\n ref={segment.ref as React.MutableRefObject<HTMLButtonElement | null>}\n key={segment.id}\n type=\"button\"\n role=\"tab\"\n id={segment.id}\n aria-controls={segment.controls}\n aria-selected={value === segment.value}\n className={clsx('segmented-control__segment', 'segmented-control__button', {\n 'segmented-control__selected-segment': value === segment.value,\n })}\n onClick={onSelect}\n >\n <Body\n as=\"span\"\n className=\"segmented-control__text\"\n type={\n value === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT\n }\n >\n {segment.label}\n </Body>\n </button>\n );\n })}\n </div>\n </div>\n );\n};\n\nexport default SegmentedControl;\n"],"names":["SegmentedControl","name","value","mode","segments","onChange","isMountedRef","useRef","animate","setAnimate","useState","segmentsRef","length","Error","segmentsWithRefs","map","segment","ref","createRef","updateSegmentPosition","selectedSegmentRef","find","current","style","setProperty","offsetWidth","offsetLeft","useEffect","handleWindowSizeChange","window","addEventListener","removeEventListener","_jsx","className","clsx","children","role","undefined","onSelect","_jsxs","htmlFor","id","type","checked","Body","as","Typography","BODY_DEFAULT_BOLD","BODY_DEFAULT","label","controls","onClick"],"mappings":"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"}
1
+ {"version":3,"file":"SegmentedControl.mjs","sources":["../../src/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { createRef, useEffect, useRef, useState } from 'react';\n\nimport Body from '../Body';\nimport { Typography } from '../common';\nimport { useDirection } from '../common/hooks';\n\ntype SegmentBase = { id: string; label: string; value: string };\n\ntype Segment = SegmentBase & { controls?: never };\ntype SegmentWithControls = SegmentBase & { controls: string };\n\nexport type Segments = readonly Segment[] | readonly SegmentWithControls[];\n\ntype SegmentedControlPropsBase = {\n name: string;\n value: string;\n mode: 'input' | 'view';\n onChange: (value: string) => void;\n};\n\ntype SegmentedControlViewProps = {\n mode: 'view';\n segments: readonly SegmentWithControls[];\n};\n\ntype SegmentedControlInputProps = {\n mode: 'input';\n segments: readonly Segment[];\n};\n\nexport type SegmentedControlProps = SegmentedControlPropsBase &\n (SegmentedControlViewProps | SegmentedControlInputProps);\n\nconst SegmentedControl = ({\n name,\n value,\n mode = 'input',\n segments,\n onChange,\n}: SegmentedControlProps) => {\n const isMountedRef = useRef(false);\n const [animate, setAnimate] = useState(false);\n const { isRTL } = useDirection();\n\n const segmentsRef = useRef<HTMLDivElement>(null);\n\n if (segments.length > 3) {\n throw new Error(\n 'SegmentedControl only supports up to 3 segments. Please refer to: https://docs.wise.design/components/segmented-control',\n );\n }\n\n const segmentsWithRefs = segments.map((segment) => ({\n ...segment,\n ref: createRef<HTMLLabelElement | HTMLButtonElement>(),\n }));\n\n const updateSegmentPosition = () => {\n const selectedSegmentRef = segmentsWithRefs.find((segment) => segment.value === value)?.ref;\n\n // We grab the active segments style object from the ref\n // and set the css variables to the selected segments width and x position.\n // This is so we can animate the highlight to the selected segment\n if (selectedSegmentRef?.current && segmentsRef.current) {\n const { style } = segmentsRef.current;\n const segment = selectedSegmentRef.current;\n const inlineOffset = isRTL\n ? segmentsRef.current.offsetWidth - segment.offsetLeft - segment.offsetWidth\n : segment.offsetLeft;\n style.setProperty('--segment-highlight-width', `${segment.offsetWidth}px`);\n style.setProperty('--segment-highlight-x', `${inlineOffset}px`);\n }\n };\n\n useEffect(() => {\n if (isMountedRef.current) {\n setAnimate(true);\n } else {\n isMountedRef.current = true;\n }\n\n updateSegmentPosition();\n\n const handleWindowSizeChange = () => {\n setAnimate(false);\n updateSegmentPosition();\n };\n\n window.addEventListener('resize', handleWindowSizeChange);\n return () => {\n window.removeEventListener('resize', handleWindowSizeChange);\n };\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [segmentsWithRefs, value]);\n\n return (\n <div\n ref={segmentsRef}\n data-testid=\"segmented-control\"\n className={clsx('segmented-control', {\n 'segmented-control--input': mode === 'input',\n })}\n >\n <div\n className={clsx('segmented-control__segments', {\n 'segmented-control__segments--no-animate': !animate,\n })}\n role={mode !== 'input' ? 'tablist' : undefined}\n >\n {segmentsWithRefs.map((segment) => {\n const onSelect = () => {\n setAnimate(true);\n onChange(segment.value);\n };\n return mode === 'input' ? (\n <label\n ref={segment.ref as React.MutableRefObject<HTMLLabelElement | null>}\n key={segment.id}\n htmlFor={segment.id}\n className={clsx('segmented-control__segment', {\n 'segmented-control__selected-segment': value === segment.value,\n })}\n >\n <input\n type=\"radio\"\n className=\"segmented-control__radio-input\"\n id={segment.id}\n name={name}\n value={segment.value}\n checked={value === segment.value}\n onChange={onSelect}\n />\n <Body\n className=\"segmented-control__text\"\n as=\"span\"\n type={\n value === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT\n }\n >\n {segment.label}\n </Body>\n </label>\n ) : (\n <button\n ref={segment.ref as React.MutableRefObject<HTMLButtonElement | null>}\n key={segment.id}\n type=\"button\"\n role=\"tab\"\n id={segment.id}\n aria-controls={segment.controls}\n aria-selected={value === segment.value}\n className={clsx('segmented-control__segment', 'segmented-control__button', {\n 'segmented-control__selected-segment': value === segment.value,\n })}\n onClick={onSelect}\n >\n <Body\n as=\"span\"\n className=\"segmented-control__text\"\n type={\n value === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT\n }\n >\n {segment.label}\n </Body>\n </button>\n );\n })}\n </div>\n </div>\n );\n};\n\nexport default SegmentedControl;\n"],"names":["SegmentedControl","name","value","mode","segments","onChange","isMountedRef","useRef","animate","setAnimate","useState","isRTL","useDirection","segmentsRef","length","Error","segmentsWithRefs","map","segment","ref","createRef","updateSegmentPosition","selectedSegmentRef","find","current","style","inlineOffset","offsetWidth","offsetLeft","setProperty","useEffect","handleWindowSizeChange","window","addEventListener","removeEventListener","_jsx","className","clsx","children","role","undefined","onSelect","_jsxs","htmlFor","id","type","checked","Body","as","Typography","BODY_DEFAULT_BOLD","BODY_DEFAULT","label","controls","onClick"],"mappings":"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"}
package/build/main.css CHANGED
@@ -20354,36 +20354,53 @@ a[data-toggle="tooltip"] {
20354
20354
  block-size: var(--np-avatar-layout-size);
20355
20355
  }
20356
20356
  .np-avatar-layout-diagonal-mask {
20357
+ --np-avatar-layout-mask-direction: right;
20357
20358
  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20358
20359
  mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20360
+ -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) var(--np-avatar-layout-mask-direction) calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20361
+ mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) var(--np-avatar-layout-mask-direction) calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20359
20362
  }
20360
20363
  [dir="rtl"] .np-avatar-layout-diagonal-mask {
20361
- -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) left calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20362
- mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) left calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20364
+ --np-avatar-layout-mask-direction: left;
20365
+ margin-inline-start: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
20366
+ margin-inline-end: unset;
20363
20367
  }
20364
20368
  .np-avatar-layout-diagonal-child {
20365
20369
  margin-inline-start: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
20366
20370
  margin-block-start: calc(var(--np-avatar-layout-size) - var(--np-avatar-size));
20367
20371
  }
20368
20372
  [dir="rtl"] .np-avatar-layout-diagonal-child {
20369
- margin-inline-start: 0;
20370
- margin-inline-end: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
20373
+ -webkit-mask-image: initial;
20374
+ mask-image: initial;
20371
20375
  }
20372
20376
  .np-avatar-layout-horizontal {
20377
+ --np-avatar-layout-mask-direction: left;
20373
20378
  inline-size: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - (var(--np-avatar-offset) * (var(--np-avatar-avatars-count) - 1)));
20374
20379
  inline-size: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - calc(var(--np-avatar-offset) * calc(var(--np-avatar-avatars-count) - 1)));
20375
20380
  block-size: var(--np-avatar-layout-size);
20376
20381
  }
20377
- .np-avatar-layout-horizontal-mask {
20378
- -webkit-mask-image: radial-gradient(circle at top calc(100% - (var(--np-avatar-size) / 2)) left calc(100% + (var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20379
- mask-image: radial-gradient(circle at top calc(100% - (var(--np-avatar-size) / 2)) left calc(100% + (var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20380
- -webkit-mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) left calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20381
- mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) left calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20382
+ [dir="rtl"] .np-avatar-layout-horizontal {
20383
+ --np-avatar-layout-mask-direction: right;
20384
+ }
20385
+ .np-avatar-layout-horizontal-mask,
20386
+ [dir="rtl"] .np-avatar-layout-horizontal-child {
20387
+ -webkit-mask-image: radial-gradient(circle at top calc(100% - (var(--np-avatar-size) / 2)) var(--np-avatar-layout-mask-direction) calc(100% + (var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20388
+ mask-image: radial-gradient(circle at top calc(100% - (var(--np-avatar-size) / 2)) var(--np-avatar-layout-mask-direction) calc(100% + (var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20389
+ -webkit-mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) var(--np-avatar-layout-mask-direction) calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20390
+ mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) var(--np-avatar-layout-mask-direction) calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20391
+ }
20392
+ [dir="rtl"] .np-avatar-layout-horizontal-mask {
20393
+ margin-inline-end: calc(var(--np-avatar-offset) * -1);
20394
+ }
20395
+ [dir="rtl"] .np-avatar-layout-horizontal-mask:last-child {
20396
+ -webkit-mask-image: initial;
20397
+ mask-image: initial;
20382
20398
  }
20383
20399
  .np-avatar-layout-horizontal-child {
20384
20400
  margin-inline-start: calc(var(--np-avatar-offset) * -1);
20385
20401
  }
20386
20402
  [dir="rtl"] .np-avatar-layout-horizontal-child {
20403
+ margin-inline-start: unset;
20387
20404
  margin-inline-end: calc(var(--np-avatar-offset) * -1);
20388
20405
  }
20389
20406
  .np-icon-button {
@@ -25809,7 +25826,8 @@ button.np-link {
25809
25826
  background: var(--color-background-screen);
25810
25827
  border-radius: 24px;
25811
25828
  border-radius: var(--size-24);
25812
- transition: left 300ms;
25829
+ transition: left 300ms,
25830
+ right 300ms;
25813
25831
  }
25814
25832
  .segmented-control__segments--no-animate::after {
25815
25833
  transition: none !important;
package/build/styles/AvatarLayout/AvatarLayout.css CHANGED
@@ -8,35 +8,52 @@
8
8
  block-size: var(--np-avatar-layout-size);
9
9
  }
10
10
  .np-avatar-layout-diagonal-mask {
11
+ --np-avatar-layout-mask-direction: right;
11
12
  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
12
13
  mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
14
+ -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) var(--np-avatar-layout-mask-direction) calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
15
+ mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) var(--np-avatar-layout-mask-direction) calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
13
16
  }
14
17
  [dir="rtl"] .np-avatar-layout-diagonal-mask {
15
- -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) left calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
16
- mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) left calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
18
+ --np-avatar-layout-mask-direction: left;
19
+ margin-inline-start: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
20
+ margin-inline-end: unset;
17
21
  }
18
22
  .np-avatar-layout-diagonal-child {
19
23
  margin-inline-start: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
20
24
  margin-block-start: calc(var(--np-avatar-layout-size) - var(--np-avatar-size));
21
25
  }
22
26
  [dir="rtl"] .np-avatar-layout-diagonal-child {
23
- margin-inline-start: 0;
24
- margin-inline-end: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
27
+ -webkit-mask-image: initial;
28
+ mask-image: initial;
25
29
  }
26
30
  .np-avatar-layout-horizontal {
31
+ --np-avatar-layout-mask-direction: left;
27
32
  inline-size: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - (var(--np-avatar-offset) * (var(--np-avatar-avatars-count) - 1)));
28
33
  inline-size: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - calc(var(--np-avatar-offset) * calc(var(--np-avatar-avatars-count) - 1)));
29
34
  block-size: var(--np-avatar-layout-size);
30
35
  }
31
- .np-avatar-layout-horizontal-mask {
32
- -webkit-mask-image: radial-gradient(circle at top calc(100% - (var(--np-avatar-size) / 2)) left calc(100% + (var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
33
- mask-image: radial-gradient(circle at top calc(100% - (var(--np-avatar-size) / 2)) left calc(100% + (var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
34
- -webkit-mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) left calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
35
- mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) left calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
36
+ [dir="rtl"] .np-avatar-layout-horizontal {
37
+ --np-avatar-layout-mask-direction: right;
38
+ }
39
+ .np-avatar-layout-horizontal-mask,
40
+ [dir="rtl"] .np-avatar-layout-horizontal-child {
41
+ -webkit-mask-image: radial-gradient(circle at top calc(100% - (var(--np-avatar-size) / 2)) var(--np-avatar-layout-mask-direction) calc(100% + (var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
42
+ mask-image: radial-gradient(circle at top calc(100% - (var(--np-avatar-size) / 2)) var(--np-avatar-layout-mask-direction) calc(100% + (var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
43
+ -webkit-mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) var(--np-avatar-layout-mask-direction) calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
44
+ mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) var(--np-avatar-layout-mask-direction) calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
45
+ }
46
+ [dir="rtl"] .np-avatar-layout-horizontal-mask {
47
+ margin-inline-end: calc(var(--np-avatar-offset) * -1);
48
+ }
49
+ [dir="rtl"] .np-avatar-layout-horizontal-mask:last-child {
50
+ -webkit-mask-image: initial;
51
+ mask-image: initial;
36
52
  }
37
53
  .np-avatar-layout-horizontal-child {
38
54
  margin-inline-start: calc(var(--np-avatar-offset) * -1);
39
55
  }
40
56
  [dir="rtl"] .np-avatar-layout-horizontal-child {
57
+ margin-inline-start: unset;
41
58
  margin-inline-end: calc(var(--np-avatar-offset) * -1);
42
59
  }
package/build/styles/SegmentedControl/SegmentedControl.css CHANGED
@@ -35,7 +35,8 @@
35
35
  background: var(--color-background-screen);
36
36
  border-radius: 24px;
37
37
  border-radius: var(--size-24);
38
- transition: left 300ms;
38
+ transition: left 300ms,
39
+ right 300ms;
39
40
  }
40
41
  .segmented-control__segments--no-animate::after {
41
42
  transition: none !important;
package/build/styles/main.css CHANGED
@@ -20354,36 +20354,53 @@ a[data-toggle="tooltip"] {
20354
20354
  block-size: var(--np-avatar-layout-size);
20355
20355
  }
20356
20356
  .np-avatar-layout-diagonal-mask {
20357
+ --np-avatar-layout-mask-direction: right;
20357
20358
  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20358
20359
  mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20360
+ -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) var(--np-avatar-layout-mask-direction) calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20361
+ mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) var(--np-avatar-layout-mask-direction) calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20359
20362
  }
20360
20363
  [dir="rtl"] .np-avatar-layout-diagonal-mask {
20361
- -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) left calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20362
- mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) left calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20364
+ --np-avatar-layout-mask-direction: left;
20365
+ margin-inline-start: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
20366
+ margin-inline-end: unset;
20363
20367
  }
20364
20368
  .np-avatar-layout-diagonal-child {
20365
20369
  margin-inline-start: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
20366
20370
  margin-block-start: calc(var(--np-avatar-layout-size) - var(--np-avatar-size));
20367
20371
  }
20368
20372
  [dir="rtl"] .np-avatar-layout-diagonal-child {
20369
- margin-inline-start: 0;
20370
- margin-inline-end: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
20373
+ -webkit-mask-image: initial;
20374
+ mask-image: initial;
20371
20375
  }
20372
20376
  .np-avatar-layout-horizontal {
20377
+ --np-avatar-layout-mask-direction: left;
20373
20378
  inline-size: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - (var(--np-avatar-offset) * (var(--np-avatar-avatars-count) - 1)));
20374
20379
  inline-size: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - calc(var(--np-avatar-offset) * calc(var(--np-avatar-avatars-count) - 1)));
20375
20380
  block-size: var(--np-avatar-layout-size);
20376
20381
  }
20377
- .np-avatar-layout-horizontal-mask {
20378
- -webkit-mask-image: radial-gradient(circle at top calc(100% - (var(--np-avatar-size) / 2)) left calc(100% + (var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20379
- mask-image: radial-gradient(circle at top calc(100% - (var(--np-avatar-size) / 2)) left calc(100% + (var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20380
- -webkit-mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) left calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20381
- mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) left calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20382
+ [dir="rtl"] .np-avatar-layout-horizontal {
20383
+ --np-avatar-layout-mask-direction: right;
20384
+ }
20385
+ .np-avatar-layout-horizontal-mask,
20386
+ [dir="rtl"] .np-avatar-layout-horizontal-child {
20387
+ -webkit-mask-image: radial-gradient(circle at top calc(100% - (var(--np-avatar-size) / 2)) var(--np-avatar-layout-mask-direction) calc(100% + (var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20388
+ mask-image: radial-gradient(circle at top calc(100% - (var(--np-avatar-size) / 2)) var(--np-avatar-layout-mask-direction) calc(100% + (var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20389
+ -webkit-mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) var(--np-avatar-layout-mask-direction) calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20390
+ mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) var(--np-avatar-layout-mask-direction) calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20391
+ }
20392
+ [dir="rtl"] .np-avatar-layout-horizontal-mask {
20393
+ margin-inline-end: calc(var(--np-avatar-offset) * -1);
20394
+ }
20395
+ [dir="rtl"] .np-avatar-layout-horizontal-mask:last-child {
20396
+ -webkit-mask-image: initial;
20397
+ mask-image: initial;
20382
20398
  }
20383
20399
  .np-avatar-layout-horizontal-child {
20384
20400
  margin-inline-start: calc(var(--np-avatar-offset) * -1);
20385
20401
  }
20386
20402
  [dir="rtl"] .np-avatar-layout-horizontal-child {
20403
+ margin-inline-start: unset;
20387
20404
  margin-inline-end: calc(var(--np-avatar-offset) * -1);
20388
20405
  }
20389
20406
  .np-icon-button {
@@ -25809,7 +25826,8 @@ button.np-link {
25809
25826
  background: var(--color-background-screen);
25810
25827
  border-radius: 24px;
25811
25828
  border-radius: var(--size-24);
25812
- transition: left 300ms;
25829
+ transition: left 300ms,
25830
+ right 300ms;
25813
25831
  }
25814
25832
  .segmented-control__segments--no-animate::after {
25815
25833
  transition: none !important;
package/build/types/SegmentedControl/SegmentedControl.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAMA,KAAK,WAAW,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAEhE,KAAK,OAAO,GAAG,WAAW,GAAG;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAClD,KAAK,mBAAmB,GAAG,WAAW,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAA;CAAE,CAAC;AAE9D,MAAM,MAAM,QAAQ,GAAG,SAAS,OAAO,EAAE,GAAG,SAAS,mBAAmB,EAAE,CAAC;AAE3E,KAAK,yBAAyB,GAAG;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,KAAK,yBAAyB,GAAG;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,SAAS,mBAAmB,EAAE,CAAC;CAC1C,CAAC;AAEF,KAAK,0BAA0B,GAAG;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,SAAS,OAAO,EAAE,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,yBAAyB,GAC3D,CAAC,yBAAyB,GAAG,0BAA0B,CAAC,CAAC;AAE3D,QAAA,MAAM,gBAAgB,GAAI,4CAMvB,qBAAqB,gCAgIvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
1
+ {"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAOA,KAAK,WAAW,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAEhE,KAAK,OAAO,GAAG,WAAW,GAAG;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAClD,KAAK,mBAAmB,GAAG,WAAW,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAA;CAAE,CAAC;AAE9D,MAAM,MAAM,QAAQ,GAAG,SAAS,OAAO,EAAE,GAAG,SAAS,mBAAmB,EAAE,CAAC;AAE3E,KAAK,yBAAyB,GAAG;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,KAAK,yBAAyB,GAAG;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,SAAS,mBAAmB,EAAE,CAAC;CAC1C,CAAC;AAEF,KAAK,0BAA0B,GAAG;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,SAAS,OAAO,EAAE,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,yBAAyB,GAC3D,CAAC,yBAAyB,GAAG,0BAA0B,CAAC,CAAC;AAE3D,QAAA,MAAM,gBAAgB,GAAI,4CAMvB,qBAAqB,gCAqIvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-8bc11c4",
3
+ "version": "0.0.0-experimental-151e673",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
package/src/AvatarLayout/AvatarLayout.css CHANGED
@@ -8,35 +8,52 @@
8
8
  block-size: var(--np-avatar-layout-size);
9
9
  }
10
10
  .np-avatar-layout-diagonal-mask {
11
+ --np-avatar-layout-mask-direction: right;
11
12
  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
12
13
  mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
14
+ -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) var(--np-avatar-layout-mask-direction) calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
15
+ mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) var(--np-avatar-layout-mask-direction) calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
13
16
  }
14
17
  [dir="rtl"] .np-avatar-layout-diagonal-mask {
15
- -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) left calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
16
- mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) left calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
18
+ --np-avatar-layout-mask-direction: left;
19
+ margin-inline-start: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
20
+ margin-inline-end: unset;
17
21
  }
18
22
  .np-avatar-layout-diagonal-child {
19
23
  margin-inline-start: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
20
24
  margin-block-start: calc(var(--np-avatar-layout-size) - var(--np-avatar-size));
21
25
  }
22
26
  [dir="rtl"] .np-avatar-layout-diagonal-child {
23
- margin-inline-start: 0;
24
- margin-inline-end: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
27
+ -webkit-mask-image: initial;
28
+ mask-image: initial;
25
29
  }
26
30
  .np-avatar-layout-horizontal {
31
+ --np-avatar-layout-mask-direction: left;
27
32
  inline-size: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - (var(--np-avatar-offset) * (var(--np-avatar-avatars-count) - 1)));
28
33
  inline-size: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - calc(var(--np-avatar-offset) * calc(var(--np-avatar-avatars-count) - 1)));
29
34
  block-size: var(--np-avatar-layout-size);
30
35
  }
31
- .np-avatar-layout-horizontal-mask {
32
- -webkit-mask-image: radial-gradient(circle at top calc(100% - (var(--np-avatar-size) / 2)) left calc(100% + (var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
33
- mask-image: radial-gradient(circle at top calc(100% - (var(--np-avatar-size) / 2)) left calc(100% + (var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
34
- -webkit-mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) left calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
35
- mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) left calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
36
+ [dir="rtl"] .np-avatar-layout-horizontal {
37
+ --np-avatar-layout-mask-direction: right;
38
+ }
39
+ .np-avatar-layout-horizontal-mask,
40
+ [dir="rtl"] .np-avatar-layout-horizontal-child {
41
+ -webkit-mask-image: radial-gradient(circle at top calc(100% - (var(--np-avatar-size) / 2)) var(--np-avatar-layout-mask-direction) calc(100% + (var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
42
+ mask-image: radial-gradient(circle at top calc(100% - (var(--np-avatar-size) / 2)) var(--np-avatar-layout-mask-direction) calc(100% + (var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
43
+ -webkit-mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) var(--np-avatar-layout-mask-direction) calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
44
+ mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) var(--np-avatar-layout-mask-direction) calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
45
+ }
46
+ [dir="rtl"] .np-avatar-layout-horizontal-mask {
47
+ margin-inline-end: calc(var(--np-avatar-offset) * -1);
48
+ }
49
+ [dir="rtl"] .np-avatar-layout-horizontal-mask:last-child {
50
+ -webkit-mask-image: initial;
51
+ mask-image: initial;
36
52
  }
37
53
  .np-avatar-layout-horizontal-child {
38
54
  margin-inline-start: calc(var(--np-avatar-offset) * -1);
39
55
  }
40
56
  [dir="rtl"] .np-avatar-layout-horizontal-child {
57
+ margin-inline-start: unset;
41
58
  margin-inline-end: calc(var(--np-avatar-offset) * -1);
42
59
  }
package/src/AvatarLayout/AvatarLayout.less CHANGED
@@ -8,18 +8,20 @@
8
8
  height: var(--np-avatar-layout-size);
9
9
 
10
10
  &-mask {
11
- mask-image:
12
- radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)),
13
- transparent 0,
14
- transparent calc(var(--np-avatar-size) / 2 + 2px),
15
- black 0);
16
-
17
- :dir(rtl) & {
18
- mask-image:
19
- radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) left calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)),
20
- transparent 0,
21
- transparent calc(var(--np-avatar-size) / 2 + 2px),
22
- black 0);
11
+ --np-avatar-layout-mask-direction: right;
12
+ mask-image: radial-gradient(
13
+ circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset))
14
+ var(--np-avatar-layout-mask-direction)
15
+ calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)),
16
+ transparent 0,
17
+ transparent calc(var(--np-avatar-size) / 2 + 2px),
18
+ black 0
19
+ );
20
+
21
+ [dir="rtl"] & {
22
+ --np-avatar-layout-mask-direction: left;
23
+ margin-left: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
24
+ margin-right: unset;
23
25
  }
24
26
  }
25
27
 
@@ -27,30 +29,52 @@
27
29
  margin-left: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
28
30
  margin-top: calc(var(--np-avatar-layout-size) - var(--np-avatar-size));
29
31
 
30
- :dir(rtl) & {
31
- margin-left: 0;
32
- margin-right: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
32
+ [dir="rtl"] & {
33
+ mask-image: unset;
33
34
  }
34
35
  }
35
36
  }
36
37
 
37
38
  &-horizontal {
38
- width: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - calc(var(--np-avatar-offset) * calc(var(--np-avatar-avatars-count) - 1)));
39
+ --np-avatar-layout-mask-direction: left;
40
+ width: calc(
41
+ var(--np-avatar-size) * var(--np-avatar-avatars-count) -
42
+ calc(var(--np-avatar-offset) * calc(var(--np-avatar-avatars-count) - 1))
43
+ );
39
44
  height: var(--np-avatar-layout-size);
40
45
 
46
+ [dir="rtl"] & {
47
+ --np-avatar-layout-mask-direction: right;
48
+ }
49
+
50
+ &-mask,
51
+ [dir="rtl"] &-child {
52
+ mask-image: radial-gradient(
53
+ circle at top calc(100% - calc(var(--np-avatar-size) / 2))
54
+ var(--np-avatar-layout-mask-direction)
55
+ calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)),
56
+ transparent,
57
+ transparent calc(var(--np-avatar-size) / 2 + 2px),
58
+ black 0
59
+ );
60
+ }
61
+
41
62
  &-mask {
42
- mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) left calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)),
43
- transparent,
44
- transparent calc(var(--np-avatar-size) / 2 + 2px),
45
- black 0);
63
+ [dir="rtl"] & {
64
+ &:last-child {
65
+ mask-image: unset;
66
+ }
67
+ margin-right: calc(var(--np-avatar-offset) * -1);
68
+ }
46
69
  }
47
70
 
48
71
  &-child {
49
72
  margin-left: calc(var(--np-avatar-offset) * -1);
50
73
 
51
- :dir(rtl) & {
74
+ [dir="rtl"] & {
75
+ margin-left: unset;
52
76
  margin-right: calc(var(--np-avatar-offset) * -1);
53
77
  }
54
78
  }
55
79
  }
56
- }
80
+ }