datocms-react-ui 0.3.6 → 0.3.10

package/dist/esm/Canvas/index.js

@@ -17,6 +17,484 @@ function camelToDash(str) {
     }
     return str;
 }
+/**
+ * @example Color variables
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <Section title="Text colors">
+ *     <table>
+ *       <tbody>
+ *         <tr>
+ *           <td>
+ *             <code>--base-body-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--base-body-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *         <tr>
+ *           <td>
+ *             <code>--light-body-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--light-body-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *         <tr>
+ *           <td>
+ *             <code>--placeholder-body-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--placeholder-body-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *       </tbody>
+ *     </table>
+ *   </Section>
+ *   <Section title="UI colors">
+ *     <table>
+ *       <tbody>
+ *         <tr>
+ *           <td>
+ *             <code>--light-bg-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--light-bg-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *         <tr>
+ *           <td>
+ *             <code>--lighter-bg-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--lighter-bg-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *         <tr>
+ *           <td>
+ *             <code>--disabled-bg-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--disabled-bg-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *         <tr>
+ *           <td>
+ *             <code>--border-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--border-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *         <tr>
+ *           <td>
+ *             <code>--darker-border-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--darker-border-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *         <tr>
+ *           <td>
+ *             <code>--alert-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--alert-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *         <tr>
+ *           <td>
+ *             <code>--warning-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--warning-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *         <tr>
+ *           <td>
+ *             <code>--notice-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--notice-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *         <tr>
+ *           <td>
+ *             <code>--warning-bg-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--warning-bg-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *         <tr>
+ *           <td>
+ *             <code>--add-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--add-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *         <tr>
+ *           <td>
+ *             <code>--remove-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--remove-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *       </tbody>
+ *     </table>
+ *   </Section>
+ *   <Section title="Project-specific colors">
+ *     <table>
+ *       <tbody>
+ *         <tr>
+ *           <td>
+ *             <code>--accent-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--accent-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *         <tr>
+ *           <td>
+ *             <code>--primary-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--primary-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *         <tr>
+ *           <td>
+ *             <code>--light-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--light-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *         <tr>
+ *           <td>
+ *             <code>--dark-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--dark-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *       </tbody>
+ *     </table>
+ *   </Section>
+ * </Canvas>;
+ * ```
+ *
+ * @example Typography variables
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <table>
+ *     <tbody>
+ *       <tr>
+ *         <td>
+ *           <code>--font-size-xxs</code>
+ *         </td>
+ *         <td>
+ *           <div style={{ fontSize: 'var(--font-size-xxs)' }}>
+ *             Size XXS
+ *           </div>
+ *         </td>
+ *       </tr>
+ *       <tr>
+ *         <td>
+ *           <code>--font-size-xs</code>
+ *         </td>
+ *         <td>
+ *           <div style={{ fontSize: 'var(--font-size-xs)' }}>Size XS</div>
+ *         </td>
+ *       </tr>
+ *       <tr>
+ *         <td>
+ *           <code>--font-size-s</code>
+ *         </td>
+ *         <td>
+ *           <div style={{ fontSize: 'var(--font-size-s)' }}>Size S</div>
+ *         </td>
+ *       </tr>
+ *       <tr>
+ *         <td>
+ *           <code>--font-size-m</code>
+ *         </td>
+ *         <td>
+ *           <div style={{ fontSize: 'var(--font-size-m)' }}>Size M</div>
+ *         </td>
+ *       </tr>
+ *       <tr>
+ *         <td>
+ *           <code>--font-size-l</code>
+ *         </td>
+ *         <td>
+ *           <div
+ *             style={{
+ *               fontSize: 'var(--font-size-l)',
+ *               fontWeight: 'var(--font-weight-bold)',
+ *             }}
+ *           >
+ *             Size L
+ *           </div>
+ *         </td>
+ *       </tr>
+ *       <tr>
+ *         <td>
+ *           <code>--font-size-xl</code>
+ *         </td>
+ *         <td>
+ *           <div
+ *             style={{
+ *               fontSize: 'var(--font-size-xl)',
+ *               fontWeight: 'var(--font-weight-bold)',
+ *             }}
+ *           >
+ *             Size XL
+ *           </div>
+ *         </td>
+ *       </tr>
+ *       <tr>
+ *         <td>
+ *           <code>--font-size-xxl</code>
+ *         </td>
+ *         <td>
+ *           <div
+ *             style={{
+ *               fontSize: 'var(--font-size-xxl)',
+ *               fontWeight: 'var(--font-weight-bold)',
+ *             }}
+ *           >
+ *             Size XXL
+ *           </div>
+ *         </td>
+ *       </tr>
+ *       <tr>
+ *         <td>
+ *           <code>--font-size-xxxl</code>
+ *         </td>
+ *         <td>
+ *           <div
+ *             style={{
+ *               fontSize: 'var(--font-size-xxxl)',
+ *               fontWeight: 'var(--font-weight-bold)',
+ *             }}
+ *           >
+ *             Size XXXL
+ *           </div>
+ *         </td>
+ *       </tr>
+ *     </tbody>
+ *   </table>
+ * </Canvas>;
+ * ```
+ *
+ * @example Spacing variables
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <table>
+ *     <tbody>
+ *       <tr>
+ *         <td>
+ *           <code>--spacing-s</code>
+ *         </td>
+ *         <td>
+ *           <div
+ *             style={{
+ *               background: 'var(--accent-color)',
+ *               width: 'var(--spacing-s)',
+ *               height: 'var(--spacing-s)',
+ *             }}
+ *           />
+ *         </td>
+ *       </tr>
+ *       <tr>
+ *         <td>
+ *           <code>--spacing-m</code>
+ *         </td>
+ *         <td>
+ *           <div
+ *             style={{
+ *               background: 'var(--accent-color)',
+ *               width: 'var(--spacing-m)',
+ *               height: 'var(--spacing-m)',
+ *             }}
+ *           />
+ *         </td>
+ *       </tr>
+ *       <tr>
+ *         <td>
+ *           <code>--spacing-l</code>
+ *         </td>
+ *         <td>
+ *           <div
+ *             style={{
+ *               background: 'var(--accent-color)',
+ *               width: 'var(--spacing-l)',
+ *               height: 'var(--spacing-l)',
+ *             }}
+ *           />
+ *         </td>
+ *       </tr>
+ *       <tr>
+ *         <td>
+ *           <code>--spacing-xl</code>
+ *         </td>
+ *         <td>
+ *           <div
+ *             style={{
+ *               background: 'var(--accent-color)',
+ *               width: 'var(--spacing-xl)',
+ *               height: 'var(--spacing-xl)',
+ *             }}
+ *           />
+ *         </td>
+ *       </tr>
+ *       <tr>
+ *         <td>
+ *           <code>--spacing-xxl</code>
+ *         </td>
+ *         <td>
+ *           <div
+ *             style={{
+ *               background: 'var(--accent-color)',
+ *               width: 'var(--spacing-xxl)',
+ *               height: 'var(--spacing-xxl)',
+ *             }}
+ *           />
+ *         </td>
+ *       </tr>
+ *       <tr>
+ *         <td>
+ *           <code>--spacing-xxxl</code>
+ *         </td>
+ *         <td>
+ *           <div
+ *             style={{
+ *               background: 'var(--accent-color)',
+ *               width: 'var(--spacing-xxxl)',
+ *               height: 'var(--spacing-xxxl)',
+ *             }}
+ *           />
+ *         </td>
+ *       </tr>
+ *     </tbody>
+ *   </table>
+ * </Canvas>;
+ * ```
+ */
 export function Canvas(_a) {
     var ctx = _a.ctx, children = _a.children, noAutoResizer = _a.noAutoResizer;
     var mode = ctx.mode;
@@ -29,12 +507,14 @@ export function Canvas(_a) {
             });
         }
     }, [mode, noAutoResizer]);
-    return (React.createElement("div", { className: styles.canvas, style: Object.entries(ctx.theme).reduce(function (acc, _a) {
-            var _b;
-            var k = _a[0], v = _a[1];
-            return (__assign(__assign({}, acc), (_b = {}, _b["--" + camelToDash(k)] = v, _b)));
-        }, {
-            padding: ctx.bodyPadding.map(function (p) { return p + "px"; }).join(' '),
-        }) }, children));
+    var style = Object.entries(ctx.theme).reduce(function (acc, _a) {
+        var _b;
+        var _c;
+        var k = _a[0], v = _a[1];
+        return __assign(__assign({}, acc), (_b = {}, _b["--" + camelToDash(k)] = v, _b["--" + camelToDash(k + "RgbComponents")] = ((_c = v.match(/rgb\((\d+, \d+, \d+)\)/)) === null || _c === void 0 ? void 0 : _c[1]) || undefined, _b));
+    }, {
+        padding: ctx.bodyPadding.map(function (p) { return p + "px"; }).join(' '),
+    });
+    return (React.createElement("div", { className: styles.canvas, style: style }, children));
 }
 //# sourceMappingURL=index.js.map

package/dist/esm/Canvas/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Canvas/index.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAa,SAAS,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,MAAM,MAAM,0BAA0B,CAAC;AAE9C,SAAS,WAAW,CAAC,GAAW;IAC9B,IAAI,GAAG,IAAI,GAAG,CAAC,WAAW,EAAE,EAAE;QAC5B,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC,QAAQ,EAAE,UAAC,CAAC,IAAK,OAAA,GAAG,GAAG,CAAC,CAAC,WAAW,EAAE,EAArB,CAAqB,CAAC,CAAC;KAC3D;IACD,OAAO,GAAG,CAAC;AACb,CAAC;AAQD,MAAM,UAAU,MAAM,CAAC,EAA6C;QAA3C,GAAG,SAAA,EAAE,QAAQ,cAAA,EAAE,aAAa,mBAAA;IAC3C,IAAA,IAAI,GAAM,GAAmC,KAAzC,CAA0C;IAEtD,SAAS,CAAC;QACR,IAAI,IAAI,KAAK,YAAY,IAAI,CAAC,aAAa,EAAE;YAC3C,IAAM,oBAAkB,GAAI,GAAkC,CAAC;YAC/D,oBAAkB,CAAC,gBAAgB,EAAE,CAAC;YAEtC,CAAA;gBACE,oBAAkB,CAAC,eAAe,EAAE,CAAC;YACvC,CAAC,CAAA,CAAC;SACH;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC;IAE1B,OAAO,CACL,6BACE,SAAS,EAAE,MAAM,CAAC,MAAM,EACxB,KAAK,EAAE,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,MAAM,CACrC,UAAC,GAAG,EAAE,EAAM;;gBAAL,CAAC,QAAA,EAAE,CAAC,QAAA;YAAM,OAAA,uBAAM,GAAG,gBAAG,OAAK,WAAW,CAAC,CAAC,CAAG,IAAG,CAAC,OAAG;QAAxC,CAAwC,EACzD;YACE,OAAO,EAAE,GAAG,CAAC,WAAW,CAAC,GAAG,CAAC,UAAC,CAAC,IAAK,OAAG,CAAC,OAAI,EAAR,CAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;SACxD,CACF,IAEA,QAAQ,CACL,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Canvas/index.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAa,SAAS,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,MAAM,MAAM,0BAA0B,CAAC;AAE9C,SAAS,WAAW,CAAC,GAAW;IAC9B,IAAI,GAAG,IAAI,GAAG,CAAC,WAAW,EAAE,EAAE;QAC5B,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC,QAAQ,EAAE,UAAC,CAAC,IAAK,OAAA,GAAG,GAAG,CAAC,CAAC,WAAW,EAAE,EAArB,CAAqB,CAAC,CAAC;KAC3D;IACD,OAAO,GAAG,CAAC;AACb,CAAC;AAQD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6dG;AAEH,MAAM,UAAU,MAAM,CAAC,EAIT;QAHZ,GAAG,SAAA,EACH,QAAQ,cAAA,EACR,aAAa,mBAAA;IAEL,IAAA,IAAI,GAAM,GAAmC,KAAzC,CAA0C;IAEtD,SAAS,CAAC;QACR,IAAI,IAAI,KAAK,YAAY,IAAI,CAAC,aAAa,EAAE;YAC3C,IAAM,oBAAkB,GAAI,GAAkC,CAAC;YAC/D,oBAAkB,CAAC,gBAAgB,EAAE,CAAC;YAEtC,CAAA;gBACE,oBAAkB,CAAC,eAAe,EAAE,CAAC;YACvC,CAAC,CAAA,CAAC;SACH;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC;IAE1B,IAAM,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,MAAM,CAC5C,UAAC,GAAG,EAAE,EAAM;;;YAAL,CAAC,QAAA,EAAE,CAAC,QAAA;QACT,6BACK,GAAG,gBACL,OAAK,WAAW,CAAC,CAAC,CAAG,IAAG,CAAC,KACzB,OAAK,WAAW,CAAI,CAAC,kBAAe,CAAG,IACtC,CAAA,MAAA,CAAC,CAAC,KAAK,CAAC,wBAAwB,CAAC,0CAAG,CAAC,CAAC,KAAI,SAAS,OACrD;IACJ,CAAC,EACD;QACE,OAAO,EAAE,GAAG,CAAC,WAAW,CAAC,GAAG,CAAC,UAAC,CAAC,IAAK,OAAG,CAAC,OAAI,EAAR,CAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;KACxD,CACF,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,IACxC,QAAQ,CACL,CACP,CAAC;AACJ,CAAC"}

package/dist/esm/Canvas/styles.module.css.json

@@ -1 +1 @@
-{ "canvas": "_canvas_1kptt_1" }
+{ "canvas": "_canvas_1es76_1" }

package/dist/esm/ContextInspector/styles.module.css.json

@@ -1 +1 @@
-{ "inspector": "_inspector_1n8fb_1", "panel": "_panel_1n8fb_5", "panelHandle": "_panelHandle_1n8fb_9", "panelBody": "_panelBody_1n8fb_25", "groupDescription": "_groupDescription_1n8fb_31", "propertyGroup": "_propertyGroup_1n8fb_37", "propertyOrMethod": "_propertyOrMethod_1n8fb_42", "propertyOrMethodBody": "_propertyOrMethodBody_1n8fb_51", "propertyOrMethodExample": "_propertyOrMethodExample_1n8fb_55", "propertyOrMethodName": "_propertyOrMethodName_1n8fb_68", "propertyOrMethodExampleActions": "_propertyOrMethodExampleActions_1n8fb_82" }
+{ "inspector": "_inspector_u6041_1", "panel": "_panel_u6041_5", "panelHandle": "_panelHandle_u6041_9", "panelBody": "_panelBody_u6041_25", "groupDescription": "_groupDescription_u6041_31", "propertyGroup": "_propertyGroup_u6041_37", "propertyOrMethod": "_propertyOrMethod_u6041_42", "propertyOrMethodBody": "_propertyOrMethodBody_u6041_51", "propertyOrMethodExample": "_propertyOrMethodExample_u6041_55", "propertyOrMethodName": "_propertyOrMethodName_u6041_68", "propertyOrMethodExampleActions": "_propertyOrMethodExampleActions_u6041_82" }

package/dist/esm/Form/index.d.ts

@@ -6,4 +6,76 @@ export interface FormProps {
     className?: string;
     children: ReactNode;
 }
+/**
+ * @example Full example
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <Form onSubmit={() => console.log('onSubmit')}>
+ *     <FieldGroup>
+ *       <TextField
+ *         required
+ *         name="name"
+ *         id="name"
+ *         label="Name"
+ *         value="Mark Smith"
+ *         placeholder="Enter full name"
+ *         hint="Provide a full name"
+ *         onChange={(newValue) => console.log(newValue)}
+ *       />
+ *       <TextField
+ *         required
+ *         name="email"
+ *         id="email"
+ *         label="Email"
+ *         type="email"
+ *         value=""
+ *         placeholder="your@email.com"
+ *         error="Please enter an email!"
+ *         hint="Enter email address"
+ *         onChange={(newValue) => console.log(newValue)}
+ *       />
+ *       <TextField
+ *         required
+ *         name="apiToken"
+ *         id="apiToken"
+ *         label="API Token"
+ *         value="XXXYYY123"
+ *         hint="Enter a valid API token"
+ *         textInputProps={{ monospaced: true }}
+ *         onChange={(newValue) => console.log(newValue)}
+ *       />
+ *       <SelectField
+ *         name="option"
+ *         id="option"
+ *         label="Option"
+ *         hint="Select one of the options"
+ *         value={{ label: 'Option 1', value: 'option1' }}
+ *         selectInputProps={{
+ *           options: [
+ *             { label: 'Option 1', value: 'option1' },
+ *             { label: 'Option 2', value: 'option2' },
+ *             { label: 'Option 3', value: 'option3' },
+ *           ],
+ *         }}
+ *         onChange={(newValue) => console.log(newValue)}
+ *       />
+ *       <SwitchField
+ *         name="debugMode"
+ *         id="debugMode"
+ *         label="Debug mode active?"
+ *         hint="Logs messages to console"
+ *         value={true}
+ *         onChange={(newValue) => console.log(newValue)}
+ *       />
+ *     </FieldGroup>
+ *     <FieldGroup>
+ *       <Button fullWidth buttonType="primary">
+ *         Submit
+ *       </Button>
+ *     </FieldGroup>
+ *   </Form>
+ * </Canvas>;
+ * ```
+ */
 export declare const Form: ({ children, className, onSubmit, spacing, ...otherProps }: FormProps) => JSX.Element;

package/dist/esm/Form/index.js

@@ -23,6 +23,78 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { Children, useCallback, } from 'react';
 import cn from 'classnames';
 import styles from './styles.module.css.json';
+/**
+ * @example Full example
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <Form onSubmit={() => console.log('onSubmit')}>
+ *     <FieldGroup>
+ *       <TextField
+ *         required
+ *         name="name"
+ *         id="name"
+ *         label="Name"
+ *         value="Mark Smith"
+ *         placeholder="Enter full name"
+ *         hint="Provide a full name"
+ *         onChange={(newValue) => console.log(newValue)}
+ *       />
+ *       <TextField
+ *         required
+ *         name="email"
+ *         id="email"
+ *         label="Email"
+ *         type="email"
+ *         value=""
+ *         placeholder="your@email.com"
+ *         error="Please enter an email!"
+ *         hint="Enter email address"
+ *         onChange={(newValue) => console.log(newValue)}
+ *       />
+ *       <TextField
+ *         required
+ *         name="apiToken"
+ *         id="apiToken"
+ *         label="API Token"
+ *         value="XXXYYY123"
+ *         hint="Enter a valid API token"
+ *         textInputProps={{ monospaced: true }}
+ *         onChange={(newValue) => console.log(newValue)}
+ *       />
+ *       <SelectField
+ *         name="option"
+ *         id="option"
+ *         label="Option"
+ *         hint="Select one of the options"
+ *         value={{ label: 'Option 1', value: 'option1' }}
+ *         selectInputProps={{
+ *           options: [
+ *             { label: 'Option 1', value: 'option1' },
+ *             { label: 'Option 2', value: 'option2' },
+ *             { label: 'Option 3', value: 'option3' },
+ *           ],
+ *         }}
+ *         onChange={(newValue) => console.log(newValue)}
+ *       />
+ *       <SwitchField
+ *         name="debugMode"
+ *         id="debugMode"
+ *         label="Debug mode active?"
+ *         hint="Logs messages to console"
+ *         value={true}
+ *         onChange={(newValue) => console.log(newValue)}
+ *       />
+ *     </FieldGroup>
+ *     <FieldGroup>
+ *       <Button fullWidth buttonType="primary">
+ *         Submit
+ *       </Button>
+ *     </FieldGroup>
+ *   </Form>
+ * </Canvas>;
+ * ```
+ */
 export var Form = function (_a) {
     var children = _a.children, className = _a.className, onSubmit = _a.onSubmit, _b = _a.spacing, spacing = _b === void 0 ? 'default' : _b, otherProps = __rest(_a, ["children", "className", "onSubmit", "spacing"]);
     var classNames = cn(styles.Form, className);

package/dist/esm/Form/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Form/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EACZ,QAAQ,EACR,WAAW,GAKZ,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,MAAM,MAAM,0BAA0B,CAAC;AAU9C,MAAM,CAAC,IAAM,IAAI,GAAG,UAAC,EAMT;IALV,IAAA,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,eAAmB,EAAnB,OAAO,mBAAG,SAAS,KAAA,EAChB,UAAU,cALM,gDAMpB,CADc;IAEb,IAAM,UAAU,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAE9C,IAAM,kBAAkB,GAAG,EAAE,CAAC,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,iBAAe,OAAS,CAAC,CAAC,CAAC;IAEnF,IAAM,YAAY,GAAG,WAAW,CAC9B,UAAC,KAAgB;QACf,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,KAAK,CAAC,CAAC;SACjB;IACH,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,OAAO,CACL,uCAAM,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,YAAY,IAAM,UAAU,GAChE,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAC,KAAK;QAC5B,IAAI,KAAK,EAAE;YACT,OAAO,6BAAK,SAAS,EAAE,kBAAkB,IAAG,KAAK,CAAO,CAAC;SAC1D;QACD,OAAO,IAAI,CAAC;IACd,CAAC,CAAC,CACG,CACR,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Form/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EACZ,QAAQ,EACR,WAAW,GAKZ,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,MAAM,MAAM,0BAA0B,CAAC;AAU9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuEG;AACH,MAAM,CAAC,IAAM,IAAI,GAAG,UAAC,EAMT;IALV,IAAA,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,eAAmB,EAAnB,OAAO,mBAAG,SAAS,KAAA,EAChB,UAAU,cALM,gDAMpB,CADc;IAEb,IAAM,UAAU,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAE9C,IAAM,kBAAkB,GAAG,EAAE,CAC3B,MAAM,CAAC,UAAU,EACjB,MAAM,CAAC,iBAAe,OAAS,CAAC,CACjC,CAAC;IAEF,IAAM,YAAY,GAAG,WAAW,CAC9B,UAAC,KAAgB;QACf,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,KAAK,CAAC,CAAC;SACjB;IACH,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,OAAO,CACL,uCAAM,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,YAAY,IAAM,UAAU,GAChE,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAC,KAAK;QAC5B,IAAI,KAAK,EAAE;YACT,OAAO,6BAAK,SAAS,EAAE,kBAAkB,IAAG,KAAK,CAAO,CAAC;SAC1D;QACD,OAAO,IAAI,CAAC;IACd,CAAC,CAAC,CACG,CACR,CAAC;AACJ,CAAC,CAAC"}