{"version":3,"file":"index_react.js","sourceRoot":"","sources":["../../src/react/index_react.ts"],"names":[],"mappings":";AAAA,8EAA8E;AAC9E,uEAAuE;AACvE,yEAAyE;AACzE,qEAAqE;AACrE,uCAAuC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASvC,kDAAmC;AAGnC,0DAAmD;AAGnD,MAAM,OAAO,GAAuB,IAAA,wBAAS,GAAE,CAAA;AAgHV,yBAAM;AA/G3C,MAAM,MAAM,GA6GR,KAAK,CAAA;AAEU,uBAAK;AACxB,kBAAe,MAAM,CAAA","sourcesContent":["// IMPORTANT: be careful to ensure you don't accidentally add code which has a\n// dependency on Node.js-only modules here, as it will break co-located\n// components. We don't have a test for this yet. Any such code should be\n// conditionally required - see `client` for an example. Reach out in\n// #feat-code-connect if you're unsure.\n\nimport {\n  EnumValue,\n  FigmaConnectAPI,\n  FigmaConnectMeta,\n  ValueOf,\n  ConnectedComponent,\n} from '../connect/api'\nimport * as figma from './external'\nimport * as StorybookTypes from '../storybook/external'\nimport { FigmaConnectClient } from '../client/figma_client'\nimport { getClient } from '../connect/index_common'\nimport { ReactMeta } from './types'\n\nconst _client: FigmaConnectClient = getClient()\nconst _figma: FigmaConnectAPI<ConnectedComponent, React.ReactElement> & {\n  /**\n   * Defines a code snippet that displays in Figma when a component is selected. This function has two signatures:\n   * - When called with a component reference as the first argument, it will infer metadata such as the import statement\n   * and location in source file from the component reference\n   * - When called only with a Figma node URL, this metadata will not be included. This is useful when you want to display a code snippet\n   * for something that isn't a React component, such as a `<button>` element\n   *\n   * @param component A reference to the React component\n   * @param figmaNodeUrl A link to the node in Figma, for example:`https://www.figma.com/file/123abc/My-Component?node-id=123:456`\n   * @param meta {@link FigmaConnectMeta}\n   */\n  connect<P = {}>(component: any, figmaNodeUrl: string, meta?: ReactMeta<P>): void\n\n  /**\n   * Defines a code snippet that displays in Figma when a component is selected. This function has two signatures:\n   * - When called with a component reference as the first argument, it will infer metadata such as the import statement\n   * and location in source file from the component reference\n   * - When called only with a Figma node URL, this metadata will not be included. This is useful when you want to display a code snippet\n   * for something that isn't a React component, such as a `<button>` element\n   *\n   * @param figmaNodeUrl A link to the node in Figma, for example:`https://www.figma.com/file/123abc/My-Component?node-id=123:456`\n   * @param meta {@link FigmaConnectMeta}\n   */\n  connect<P = {}>(figmaNodeUrl: string, meta?: ReactMeta<P>): void\n\n  /**\n   * Maps a Figma property to a boolean value for the connected component. This prop is replaced\n   * with values from the Figma instance when viewed in Dev Mode. For example:\n   * ```ts\n   * props: {\n   *  disabled: figma.boolean('Disabled'),\n   * }\n   * ```\n   * Would show the `disabled` property if the Figma property \"Disabled\" is true.\n   *\n   * @param figmaPropName The name of the property on the Figma component\n   */\n  boolean(figmaPropName: string): boolean\n\n  /**\n   * Maps a Figma boolean property to a set of values for the connected component, providing\n   * a value mapping for `true` and `false`. This prop is replaced with values from the\n   * Figma instance when viewed in Dev Mode. Example:\n   * ```ts\n   * props: {\n   *  label: figma.boolean('Disabled', {\n   *    true: <Label />,\n   *    false: <HiddenLabel />\n   *  }),\n   * }\n   * ```\n   * Would replace `label` with `<Label />` if the Figma property \"Disabled\" is true.\n   *\n   * @param figmaPropName The name of the property on the Figma component\n   * @param valueMapping A mapping of values for `true` and `false`\n   */\n  boolean<TrueT extends EnumValue, FalseT extends EnumValue>(\n    figmaPropName: string,\n    valueMapping?: {\n      true?: TrueT\n      false?: FalseT\n    },\n  ): ValueOf<Record<'true' | 'false', TrueT | FalseT>>\n\n  /**\n   * Maps nested properties from a Figma instance layer. The first argument\n   * should be the layer name of the nested instance. The mapping object passed\n   * in is in the same format as the `props` object in the `connect` function.\n   * For example:\n   * ```ts\n   * props: {\n   *   nested: figma.nestedProps('Nested', {\n   *     label: figma.string('Text'),\n   *     icon: figma.instance('Icon'),\n   *   }),\n   * }\n   * ```\n   *\n   * Which would then allow you to access the nested properties in the `example` function like so:\n   * ```ts\n   * (props) => <Button label={props.nested.label} icon={props.nested.icon} />\n   * ```\n   */\n  nestedProps<V>(layer: string, input: V): V\n\n  /**\n   * Maps a Figma instance-swap property for the connected component. This prop is replaced with\n   * a nested connected component matching the Figma instance when viewed in Dev Mode. For example:\n   * ```ts\n   * props: {\n   *  icon: figma.instance('Icon'),\n   * }\n   * ```\n   * Would show the nested example for the component passed to the \"Icon\" property in Figma.\n   *\n   * If the nested connected component returns something other than JSX in its `example` function,\n   * you can pass a type parameter to `instance` to specify the return type. For example:\n   * ```ts\n   * props: {\n   *  icon: figma.instance<string>('Icon')\n   * }\n   * ```\n   *\n   * @param figmaPropName The name of the property on the Figma component\n   * @returns {ConnectedComponent} The connected component for the instance. The return value\n   * can be modified with helper functions such as `getProps` and `render`\n   */\n  instance<T = ConnectedComponent>(figmaPropName: string): T\n} = figma\n\nexport { _figma as figma, _client as client }\nexport default _figma\n\nexport type StoryParameters<T = {}> = StorybookTypes.StoryParameters<T>\n\n"]}