@transferwise/components 0.0.0-experimental-b3b1d01 → 0.0.0-experimental-d953b10

package/build/common/circle/Circle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Circle.js","sources":["../../../src/common/circle/Circle.tsx"],"sourcesContent":["import { HTMLAttributes, forwardRef } from 'react';\nimport { clsx } from 'clsx';\n\nexport type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72;\n\nexport type Props = {\n  as?: React.ElementType;\n  size?: ShapeSize;\n  fixedSize?: boolean;\n} & HTMLAttributes<HTMLDivElement>;\n\nconst Circle = forwardRef(function Circle(\n  {\n    as: Element = 'div',\n    children,\n    size = 48,\n    fixedSize = false,\n    className,\n    style,\n    ...props\n  }: Props,\n  ref,\n) {\n  return (\n    <Element\n      {...props}\n      ref={ref}\n      style={{ ...style, '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})` }}\n      className={clsx('np-circle', 'd-flex align-items-center justify-content-center', className)}\n    >\n      {children}\n    </Element>\n  );\n});\n\nexport default Circle;\n"],"names":["Circle","forwardRef","as","Element","children","size","fixedSize","className","style","props","ref","_jsx","clsx"],"mappings":";;;;;;AAWA,MAAMA,MAAM,gBAAGC,gBAAU,CAAC,SAASD,MAAMA,CACvC;EACEE,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,QAAQ;AACRC,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,SAAS,GAAG,KAAK;EACjBC,SAAS;EACTC,KAAK;EACL,GAAGC,KAAAA;AAAK,CACF,EACRC,GAAG,EAAA;EAEH,oBACEC,cAAA,CAACR,OAAO,EAAA;AAAA,IAAA,GACFM,KAAK;AACTC,IAAAA,GAAG,EAAEA,GAAI;AACTF,IAAAA,KAAK,EAAE;AAAE,MAAA,GAAGA,KAAK;MAAE,eAAe,EAAEF,SAAS,GAAG,CAAA,EAAGD,IAAI,CAAI,EAAA,CAAA,GAAG,cAAcA,IAAI,CAAA,CAAA,CAAA;KAAM;IACtFE,SAAS,EAAEK,SAAI,CAAC,WAAW,EAAE,kDAAkD,EAAEL,SAAS,CAAE;AAAAH,IAAAA,QAAA,EAE3FA,QAAAA;AAAQ,GACF,CAAC,CAAA;AAEd,CAAC;;;;"}
+{"version":3,"file":"Circle.js","sources":["../../../src/common/circle/Circle.tsx"],"sourcesContent":["import { HTMLAttributes, forwardRef } from 'react';\nimport { clsx } from 'clsx';\n\nexport type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72;\n\nexport type Props = {\n  /**\n   * Modify underlying element, `div` by default\n   */\n  as?: React.ElementType;\n  /**\n   * Set size of the circle in px, `48` by default\n   */\n  size?: ShapeSize;\n  /**\n   * When `true` will use the fixed size (`48px`) instead of the CSS spacing variable (`--size-*`)\n   * as those can be dynamic a at certain viewport sizes\n   */\n  fixedSize?: boolean;\n} & HTMLAttributes<HTMLDivElement>;\n\nconst Circle = forwardRef(function Circle(\n  {\n    as: Element = 'div',\n    children,\n    size = 48,\n    fixedSize = false,\n    className,\n    style,\n    ...props\n  }: Props,\n  ref,\n) {\n  return (\n    <Element\n      {...props}\n      ref={ref}\n      style={{ ...style, '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})` }}\n      className={clsx('np-circle', 'd-flex align-items-center justify-content-center', className)}\n    >\n      {children}\n    </Element>\n  );\n});\n\nexport default Circle;\n"],"names":["Circle","forwardRef","as","Element","children","size","fixedSize","className","style","props","ref","_jsx","clsx"],"mappings":";;;;;;AAqBA,MAAMA,MAAM,gBAAGC,gBAAU,CAAC,SAASD,MAAMA,CACvC;EACEE,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,QAAQ;AACRC,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,SAAS,GAAG,KAAK;EACjBC,SAAS;EACTC,KAAK;EACL,GAAGC,KAAAA;AAAK,CACF,EACRC,GAAG,EAAA;EAEH,oBACEC,cAAA,CAACR,OAAO,EAAA;AAAA,IAAA,GACFM,KAAK;AACTC,IAAAA,GAAG,EAAEA,GAAI;AACTF,IAAAA,KAAK,EAAE;AAAE,MAAA,GAAGA,KAAK;MAAE,eAAe,EAAEF,SAAS,GAAG,CAAA,EAAGD,IAAI,CAAI,EAAA,CAAA,GAAG,cAAcA,IAAI,CAAA,CAAA,CAAA;KAAM;IACtFE,SAAS,EAAEK,SAAI,CAAC,WAAW,EAAE,kDAAkD,EAAEL,SAAS,CAAE;AAAAH,IAAAA,QAAA,EAE3FA,QAAAA;AAAQ,GACF,CAAC,CAAA;AAEd,CAAC;;;;"}

package/build/common/circle/Circle.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Circle.mjs","sources":["../../../src/common/circle/Circle.tsx"],"sourcesContent":["import { HTMLAttributes, forwardRef } from 'react';\nimport { clsx } from 'clsx';\n\nexport type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72;\n\nexport type Props = {\n  as?: React.ElementType;\n  size?: ShapeSize;\n  fixedSize?: boolean;\n} & HTMLAttributes<HTMLDivElement>;\n\nconst Circle = forwardRef(function Circle(\n  {\n    as: Element = 'div',\n    children,\n    size = 48,\n    fixedSize = false,\n    className,\n    style,\n    ...props\n  }: Props,\n  ref,\n) {\n  return (\n    <Element\n      {...props}\n      ref={ref}\n      style={{ ...style, '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})` }}\n      className={clsx('np-circle', 'd-flex align-items-center justify-content-center', className)}\n    >\n      {children}\n    </Element>\n  );\n});\n\nexport default Circle;\n"],"names":["Circle","forwardRef","as","Element","children","size","fixedSize","className","style","props","ref","_jsx","clsx"],"mappings":";;;;AAWA,MAAMA,MAAM,gBAAGC,UAAU,CAAC,SAASD,MAAMA,CACvC;EACEE,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,QAAQ;AACRC,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,SAAS,GAAG,KAAK;EACjBC,SAAS;EACTC,KAAK;EACL,GAAGC,KAAAA;AAAK,CACF,EACRC,GAAG,EAAA;EAEH,oBACEC,GAAA,CAACR,OAAO,EAAA;AAAA,IAAA,GACFM,KAAK;AACTC,IAAAA,GAAG,EAAEA,GAAI;AACTF,IAAAA,KAAK,EAAE;AAAE,MAAA,GAAGA,KAAK;MAAE,eAAe,EAAEF,SAAS,GAAG,CAAA,EAAGD,IAAI,CAAI,EAAA,CAAA,GAAG,cAAcA,IAAI,CAAA,CAAA,CAAA;KAAM;IACtFE,SAAS,EAAEK,IAAI,CAAC,WAAW,EAAE,kDAAkD,EAAEL,SAAS,CAAE;AAAAH,IAAAA,QAAA,EAE3FA,QAAAA;AAAQ,GACF,CAAC,CAAA;AAEd,CAAC;;;;"}
+{"version":3,"file":"Circle.mjs","sources":["../../../src/common/circle/Circle.tsx"],"sourcesContent":["import { HTMLAttributes, forwardRef } from 'react';\nimport { clsx } from 'clsx';\n\nexport type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72;\n\nexport type Props = {\n  /**\n   * Modify underlying element, `div` by default\n   */\n  as?: React.ElementType;\n  /**\n   * Set size of the circle in px, `48` by default\n   */\n  size?: ShapeSize;\n  /**\n   * When `true` will use the fixed size (`48px`) instead of the CSS spacing variable (`--size-*`)\n   * as those can be dynamic a at certain viewport sizes\n   */\n  fixedSize?: boolean;\n} & HTMLAttributes<HTMLDivElement>;\n\nconst Circle = forwardRef(function Circle(\n  {\n    as: Element = 'div',\n    children,\n    size = 48,\n    fixedSize = false,\n    className,\n    style,\n    ...props\n  }: Props,\n  ref,\n) {\n  return (\n    <Element\n      {...props}\n      ref={ref}\n      style={{ ...style, '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})` }}\n      className={clsx('np-circle', 'd-flex align-items-center justify-content-center', className)}\n    >\n      {children}\n    </Element>\n  );\n});\n\nexport default Circle;\n"],"names":["Circle","forwardRef","as","Element","children","size","fixedSize","className","style","props","ref","_jsx","clsx"],"mappings":";;;;AAqBA,MAAMA,MAAM,gBAAGC,UAAU,CAAC,SAASD,MAAMA,CACvC;EACEE,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,QAAQ;AACRC,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,SAAS,GAAG,KAAK;EACjBC,SAAS;EACTC,KAAK;EACL,GAAGC,KAAAA;AAAK,CACF,EACRC,GAAG,EAAA;EAEH,oBACEC,GAAA,CAACR,OAAO,EAAA;AAAA,IAAA,GACFM,KAAK;AACTC,IAAAA,GAAG,EAAEA,GAAI;AACTF,IAAAA,KAAK,EAAE;AAAE,MAAA,GAAGA,KAAK;MAAE,eAAe,EAAEF,SAAS,GAAG,CAAA,EAAGD,IAAI,CAAI,EAAA,CAAA,GAAG,cAAcA,IAAI,CAAA,CAAA,CAAA;KAAM;IACtFE,SAAS,EAAEK,IAAI,CAAC,WAAW,EAAE,kDAAkD,EAAEL,SAAS,CAAE;AAAAH,IAAAA,QAAA,EAE3FA,QAAAA;AAAQ,GACF,CAAC,CAAA;AAEd,CAAC;;;;"}

package/build/types/common/circle/Circle.d.ts

@@ -1,13 +1,33 @@
 import { HTMLAttributes } from 'react';
 export type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72;
 export type Props = {
+    /**
+     * Modify underlying element, `div` by default
+     */
     as?: React.ElementType;
+    /**
+     * Set size of the circle in px, `48` by default
+     */
     size?: ShapeSize;
+    /**
+     * When `true` will use the fixed size (`48px`) instead of the CSS spacing variable (`--size-*`)
+     * as those can be dynamic a at certain viewport sizes
+     */
     fixedSize?: boolean;
 } & HTMLAttributes<HTMLDivElement>;
 declare const Circle: import("react").ForwardRefExoticComponent<{
+    /**
+     * Modify underlying element, `div` by default
+     */
     as?: React.ElementType;
+    /**
+     * Set size of the circle in px, `48` by default
+     */
     size?: ShapeSize;
+    /**
+     * When `true` will use the fixed size (`48px`) instead of the CSS spacing variable (`--size-*`)
+     * as those can be dynamic a at certain viewport sizes
+     */
     fixedSize?: boolean;
 } & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<unknown>>;
 export default Circle;

package/build/types/common/circle/Circle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Circle.d.ts","sourceRoot":"","sources":["../../../../src/common/circle/Circle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAc,MAAM,OAAO,CAAC;AAGnD,MAAM,MAAM,SAAS,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAE9D,MAAM,MAAM,KAAK,GAAG;IAClB,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC,QAAA,MAAM,MAAM;SALL,KAAK,CAAC,WAAW;WACf,SAAS;gBACJ,OAAO;4EAyBnB,CAAC;AAEH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Circle.d.ts","sourceRoot":"","sources":["../../../../src/common/circle/Circle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAc,MAAM,OAAO,CAAC;AAGnD,MAAM,MAAM,SAAS,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAE9D,MAAM,MAAM,KAAK,GAAG;IAClB;;OAEG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC,QAAA,MAAM,MAAM;IAfV;;OAEG;SACE,KAAK,CAAC,WAAW;IACtB;;OAEG;WACI,SAAS;IAChB;;;OAGG;gBACS,OAAO;4EAyBnB,CAAC;AAEH,eAAe,MAAM,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-b3b1d01",
+  "version": "0.0.0-experimental-d953b10",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -92,12 +92,12 @@
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
     "@transferwise/less-config": "3.1.0",
-    "@transferwise/neptune-css": "0.0.0-experimental-b3b1d01",
+    "@transferwise/neptune-css": "0.0.0-experimental-d953b10",
     "@wise/components-theming": "1.6.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.13.1",
-    "@transferwise/neptune-css": "0.0.0-experimental-b3b1d01",
+    "@transferwise/neptune-css": "0.0.0-experimental-d953b10",
     "@wise/art": "^2.7.0",
     "@wise/components-theming": "^1.0.0",
     "react": ">=18",

package/src/common/circle/Circle.story.tsx

@@ -5,6 +5,7 @@ import { Profile } from '@transferwise/icons';
 
 export default {
   title: 'Internal/Circle',
+  tags: ['autodocs'],
 } satisfies Meta<typeof Circle>;
 
 type Story = StoryObj<typeof Circle>;

package/src/common/circle/Circle.tsx

@@ -4,8 +4,18 @@ import { clsx } from 'clsx';
 export type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72;
 
 export type Props = {
+  /**
+   * Modify underlying element, `div` by default
+   */
   as?: React.ElementType;
+  /**
+   * Set size of the circle in px, `48` by default
+   */
   size?: ShapeSize;
+  /**
+   * When `true` will use the fixed size (`48px`) instead of the CSS spacing variable (`--size-*`)
+   * as those can be dynamic a at certain viewport sizes
+   */
   fixedSize?: boolean;
 } & HTMLAttributes<HTMLDivElement>;