@multiplatform.one/components 0.2.17 → 0.7.1

package/dist/jsx/table/Table/index.native.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/table/Table/index.tsx"],
+  "mappings": "AACA,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAC7B,SAAS,QAAQ,QAAQ,gBAAgB,4BAA4B;AAErE,MAAM,mBAAmB,OAAO,gBAAgB;AAAA,EAC9C,MAAM;AAAA,EACN,SAAS;AAAA,EACT,UAAU;AAAA,EACV,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,CAAC,GAEY,aAAa,CAAC,EAAE,SAAS,UAAU,GAAG,MAAM,MAErD,CAAC,iBAAiB,SAAU,aAAqB;AAAA,GAC9C,CAAC,CAAC,WACD,CAAC,UAAU,KAAK,KAAK,GAAG,UAAU,IAAI,MAAM,MAAM,WAC/C,QACH,EAFC;AAAA,EAIH,CAAC,OAAO,SAAS,OAAO,GAAG,WACxB,SACH,EAFC;AAGH,EATC,mBAaQ,QAAQ,qBAAqB,YAAY;AAAA,EACpD,MAAM;AAAA,EACN,KAAK;AACP,CAAC;",
+  "names": []
+}

package/dist/jsx/table/TableCell/index.js

@@ -15,7 +15,7 @@ const TableCell = styled(Paragraph, {
   p: "$2",
   px: "$3",
   size: "$5",
-  ellipse: true,
+  ellipse: !0,
   variants: {
     head: {
       true: {

package/dist/jsx/table/TableCell/{index.mjs → index.native.js}

@@ -15,7 +15,7 @@ const TableCell = styled(Paragraph, {
   p: "$2",
   px: "$3",
   size: "$5",
-  ellipse: true,
+  ellipse: !0,
   variants: {
     head: {
       true: {
@@ -32,4 +32,4 @@ const TableCell = styled(Paragraph, {
 export {
   TableCell
 };
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.js.map

package/dist/jsx/table/TableCol/{index.mjs → index.native.js}

@@ -12,4 +12,4 @@ const TableCol = styled(ThemeableStack, {
 export {
   TableCol
 };
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.js.map

package/dist/jsx/table/{TableContext.mjs → TableContext.native.js}

@@ -3,4 +3,4 @@ const TableContext = createStyledContext({});
 export {
   TableContext
 };
-//# sourceMappingURL=TableContext.mjs.map
+//# sourceMappingURL=TableContext.js.map

package/dist/jsx/table/{index.mjs → index.native.js}

@@ -1,4 +1,4 @@
 export * from "./Table";
 export * from "./TableCell";
 export * from "./TableCol";
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.js.map

package/dist/jsx/utils/setTinted.js

@@ -1,12 +1,9 @@
-let isTinted = true;
+let isTinted = !0;
 const setTinted = (next) => {
-  isTinted = next;
-  listeners.forEach((cb) => cb(next));
-};
-const toggleTinted = () => {
+  isTinted = next, listeners.forEach((cb) => cb(next));
+}, toggleTinted = () => {
   setTinted(!isTinted);
-};
-const listeners = /* @__PURE__ */ new Set();
+}, listeners = /* @__PURE__ */ new Set();
 export {
   isTinted,
   listeners,

package/dist/jsx/utils/setTinted.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../src/utils/setTinted.ts"],
-  "mappings": "AAAO,IAAI,WAAW;AAEf,MAAM,YAAY,CAAC,SAAkB;AAC1C,aAAW;AACX,YAAU,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;AACpC;AAEO,MAAM,eAAe,MAAM;AAChC,YAAU,CAAC,QAAQ;AACrB;AAEO,MAAM,YAAY,oBAAI,IAAc;",
+  "mappings": "AAAO,IAAI,WAAW;AAEf,MAAM,YAAY,CAAC,SAAkB;AAC1C,aAAW,MACX,UAAU,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;AACpC,GAEa,eAAe,MAAM;AAChC,YAAU,CAAC,QAAQ;AACrB,GAEa,YAAY,oBAAI,IAAc;",
   "names": []
 }

package/dist/jsx/utils/setTinted.native.js

@@ -0,0 +1,13 @@
+let isTinted = !0;
+const setTinted = (next) => {
+  isTinted = next, listeners.forEach((cb) => cb(next));
+}, toggleTinted = () => {
+  setTinted(!isTinted);
+}, listeners = /* @__PURE__ */ new Set();
+export {
+  isTinted,
+  listeners,
+  setTinted,
+  toggleTinted
+};
+//# sourceMappingURL=setTinted.js.map

package/dist/jsx/utils/{setTinted.mjs.map → setTinted.native.js.map}

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../src/utils/setTinted.ts"],
-  "mappings": "AAAO,IAAI,WAAW;AAEf,MAAM,YAAY,CAAC,SAAkB;AAC1C,aAAW;AACX,YAAU,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;AACpC;AAEO,MAAM,eAAe,MAAM;AAChC,YAAU,CAAC,QAAQ;AACrB;AAEO,MAAM,YAAY,oBAAI,IAAc;",
+  "mappings": "AAAO,IAAI,WAAW;AAEf,MAAM,YAAY,CAAC,SAAkB;AAC1C,aAAW,MACX,UAAU,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;AACpC,GAEa,eAAe,MAAM;AAChC,YAAU,CAAC,QAAQ;AACrB,GAEa,YAAY,oBAAI,IAAc;",
   "names": []
 }

package/dist/jsx/utils/unwrapText.js

@@ -1,8 +1,6 @@
 import React from "react";
 function unwrapText(children) {
-  return React.Children.toArray(children).map((x) => {
-    return x?.props?.children ? x.props.children : x;
-  });
+  return React.Children.toArray(children).map((x) => x?.props?.children ? x.props.children : x);
 }
 export {
   unwrapText

package/dist/jsx/utils/unwrapText.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../src/utils/unwrapText.ts"],
-  "mappings": "AAAA,OAAO,WAAW;AAEX,SAAS,WAAW,UAAe;AACxC,SAAO,MAAM,SAAS,QAAQ,QAAQ,EAAE,IAAI,CAAC,MAAM;AAEjD,WAAO,GAAG,OAAO,WAAW,EAAE,MAAM,WAAW;AAAA,EACjD,CAAC;AACH;",
+  "mappings": "AAAA,OAAO,WAAW;AAEX,SAAS,WAAW,UAAe;AACxC,SAAO,MAAM,SAAS,QAAQ,QAAQ,EAAE,IAAI,CAAC,MAEpC,GAAG,OAAO,WAAW,EAAE,MAAM,WAAW,CAChD;AACH;",
   "names": []
 }

package/dist/jsx/utils/{unwrapText.mjs → unwrapText.native.js}

@@ -1,10 +1,11 @@
 import React from "react";
 function unwrapText(children) {
   return React.Children.toArray(children).map((x) => {
-    return x?.props?.children ? x.props.children : x;
+    var _a;
+    return (_a = x == null ? void 0 : x.props) != null && _a.children ? x.props.children : x;
   });
 }
 export {
   unwrapText
 };
-//# sourceMappingURL=unwrapText.mjs.map
+//# sourceMappingURL=unwrapText.js.map

package/dist/jsx/utils/{unwrapText.mjs.map → unwrapText.native.js.map}

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../src/utils/unwrapText.ts"],
-  "mappings": "AAAA,OAAO,WAAW;AAEX,SAAS,WAAW,UAAe;AACxC,SAAO,MAAM,SAAS,QAAQ,QAAQ,EAAE,IAAI,CAAC,MAAM;AAEjD,WAAO,GAAG,OAAO,WAAW,EAAE,MAAM,WAAW;AAAA,EACjD,CAAC;AACH;",
+  "mappings": "AAAA,OAAO,WAAW;AAEX,SAAS,WAAW,UAAe;AACxC,SAAO,MAAM,SAAS,QAAQ,QAAQ,EAAE,IAAI,CAAC,MAAM;AAHrD;AAKI,YAAO,4BAAG,UAAH,WAAU,WAAW,EAAE,MAAM,WAAW;AAAA,EACjD,CAAC;AACH;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/components",
-  "version": "0.2.17",
+  "version": "0.7.1",
   "sideEffects": [
     "*.css"
   ],
@@ -40,27 +40,29 @@
   "dependencies": {
     "@mdx-js/mdx": "^2.3.0",
     "@mdx-js/react": "^2.3.0",
-    "@tamagui/font-inter": "^1.31.2",
-    "@tamagui/logo": "^1.31.2",
-    "@tamagui/react-native-media-driver": "^1.31.2",
-    "@tamagui/shorthands": "^1.31.2",
-    "@tamagui/themes": "^1.31.2",
-    "expo-asset": "^8.9.2",
-    "fast-xml-parser": "^4.2.4",
+    "@tamagui/font-inter": "^1.68.1",
+    "@tamagui/logo": "^1.68.1",
+    "@tamagui/react-native-media-driver": "^1.68.1",
+    "@tamagui/shorthands": "^1.68.1",
+    "@tamagui/themes": "^1.68.1",
+    "burnt": "^0.11.7",
+    "expo-asset": "^8.11.0",
+    "expo-image": "^1.4.1",
+    "fast-xml-parser": "^4.2.7",
     "gray-matter": "^4.0.3",
-    "hast-util-to-html": "^8.0.4",
+    "hast-util-to-html": "8.0.4",
     "immer": "^10.0.2",
     "parse-numeric-range": "^1.3.0",
-    "react-hook-form": "^7.44.3",
-    "react-native-svg": "13.9.0",
+    "react-hook-form": "^7.45.4",
+    "react-native-svg": "13.11.0",
     "refractor": "^4.8.1",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-parse": "^8.0.4",
     "rehype-slug": "^5.1.0",
     "remark-frontmatter": "^4.0.1",
     "remark-mdx-frontmatter": "^3.0.0",
-    "tamagui": "^1.31.2",
-    "unist-util-visit": "^4.1.2"
+    "tamagui": "^1.68.1",
+    "unist-util-visit": "^5.0.0"
   },
   "peerDependencies": {
     "moti": "^0.25.3",
@@ -68,11 +70,11 @@
     "solito": "^3.2.6"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.31.2",
-    "moti": "^0.25.3",
-    "react-native-reanimated": "2.14.4",
-    "solito": "^3.2.6",
-    "ui": "*"
+    "@tamagui/build": "^1.68.1",
+    "moti": "^0.26.0",
+    "react-native-reanimated": "3.4.2",
+    "solito": "^4.0.1",
+    "ui": "workspace:^"
   },
   "jest": {
     "testRegex": "((/(tests|__tests__)((/|/[^_.\n][^/\n]*(/[^_.\n][^/\n]+)*/)[^_.\n][^/\n]*))|((/|/.*/)(([^_.\n][^/\n]*.(spec|test))|(spec|test)))).[jt]sx?$",
@@ -80,7 +82,7 @@
     "testPathIgnorePatterns": []
   },
   "jestSonar": {
-    "reportPath": ".mkpm/.tmp/reports",
+    "reportPath": "node_modules",
     "reportFile": "test-report.xml",
     "indent": 4
   }

package/src/code/Code/index.ts

@@ -6,9 +6,11 @@ export const Code = styled(Paragraph, {
   name: 'Code',
   borderRadius: '$4',
   cursor: 'inherit',
+  // @ts-ignore
   fontFamily: Platform.OS === 'web' ? '$mono' : undefined,
   lineHeight: 18,
   padding: '$1',
+  // @ts-ignore
   size: '$3',
   tag: 'code',
   whiteSpace: 'pre',
@@ -28,7 +30,9 @@ export const CodeInline = styled(Paragraph, {
   borderRadius: '$3',
   color: '$colorHover',
   cursor: 'inherit',
+  // @ts-ignore
   fontFamily: Platform.OS === 'web' ? '$mono' : undefined,
+  // @ts-ignore
   fontSize: '85%',
   padding: '$1.5',
   tag: 'code',

package/src/component/SimpleInput/SimpleInput.stories.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { SimpleInput } from '.';
+import { YStack } from 'tamagui';
+import { Key, Eye } from '@tamagui/lucide-icons';
+
+export default {
+  title: 'components/SimpleInput',
+  component: SimpleInput,
+  parameters: { status: { type: 'beta' } },
+};
+
+export const password = () => (
+  <YStack justifyContent="center" alignItems="center">
+    <SimpleInput password size="$3" iconAfter={Key} passwordWithoutIcon />
+  </YStack>
+);
+
+export const iconBefore = () => <SimpleInput password width={800} height={50} iconBefore={Key} />;
+
+export const iconAfter = () => (
+  <SimpleInput width={250} height={50} iconAfter={Eye} placeholder="icon after input box" />
+);
+
+export const circular = () => <SimpleInput placeholder="icon after input box" circular password />;
+
+export const passwordWithoutIcon = () => <SimpleInput password passwordWithoutIcon />;

package/src/component/SimpleInput/index.tsx

@@ -0,0 +1,168 @@
+import type { ButtonProps, ColorTokens, InputProps, SizeTokens, ThemeTokens, XStackProps } from 'tamagui';
+import { Button, Input, XGroup, XStack } from 'tamagui';
+import { Eye, EyeOff } from '@tamagui/lucide-icons';
+import React, { useEffect } from 'react';
+import type { SvgProps } from 'react-native-svg';
+
+export interface BaseIconProps {
+  size?: number | SizeTokens;
+  strokeWidth?: number | SizeTokens;
+  color?: (ColorTokens | ThemeTokens | (string & {})) | null;
+  disableTheme?: boolean;
+  style?: any;
+}
+
+interface CustomProps {
+  password?: boolean;
+  iconBefore?: React.NamedExoticComponent<IconProps>;
+  iconAfter?: React.NamedExoticComponent<IconProps>;
+  iconStyle?: ButtonProps;
+  circular?: boolean;
+  iconBeforeScale?: number;
+  iconAfterScale?: number;
+  iconPasswordScale?: number;
+  iconsAsButton?: boolean;
+  iconBeforeAsButton?: boolean;
+  iconAfterAsButton?: boolean;
+  passwordWithoutIcon?: boolean;
+}
+
+type IconProps = SvgProps & BaseIconProps;
+
+export type SimpleInputProps = InputProps & CustomProps & XStackProps;
+
+export function SimpleInput({
+  value,
+  size,
+  password,
+  iconBefore,
+  iconAfter,
+  height,
+  width,
+  iconStyle,
+  circular,
+  placeholder,
+  iconAfterScale,
+  iconBeforeScale,
+  iconPasswordScale,
+  iconAfterAsButton,
+  iconBeforeAsButton,
+  iconsAsButton,
+  passwordWithoutIcon,
+  paddingHorizontal,
+  onChangeText,
+  ...props
+}: SimpleInputProps) {
+  const [show, setShow] = React.useState(false);
+  const [inputValue, setInputValue] = React.useState<string | undefined>(value ?? '');
+  const [borderWidth, setBorderWidth] = React.useState(1);
+  const [secureTextEntry, setSecureTextEntry] = React.useState(password);
+  const totalIcons = (iconBefore ? 1 : 0) + (iconAfter || (password && !passwordWithoutIcon) ? 1 : 0);
+  const inputValuePadding = iconBefore ? 0 : 24;
+  const iconPercentage = totalIcons === 1 ? '20%' : totalIcons === 2 ? '10%' : undefined;
+  const inputPercentage = iconPercentage ? '80%' : '100%';
+
+  useEffect(() => {
+    if (!inputValue) return;
+    if (onChangeText) onChangeText(inputValue);
+  }, [inputValue]);
+
+  useEffect(() => {
+    if (!password) return;
+    if (show) {
+      setSecureTextEntry(!!false);
+      return;
+    }
+    if (!show && password) {
+      setSecureTextEntry(!!true);
+      return;
+    }
+  }, [password, show]);
+
+  function handleValueChange(text: string) {
+    setInputValue(text);
+    if (onChangeText) onChangeText(text);
+  }
+
+  return (
+    <XStack>
+      <XGroup
+        {...props}
+        height={size}
+        // @ts-ignore
+        borderRadius={circular ? 9999999 : props.borderRadius || size}
+        borderWidth={borderWidth}
+        borderColor="$backgroundFocus"
+        minHeight={height || '$5'}
+        width={width || '$20'}
+      >
+        {iconBefore && (
+          <Button
+            icon={iconBefore}
+            unstyled={!(iconsAsButton || iconBeforeAsButton)}
+            {...iconStyle}
+            jc="center"
+            ai="center"
+            scaleIcon={iconBeforeScale}
+            width={iconPercentage}
+            height="100%"
+            padding={0}
+          />
+        )}
+        <Input
+          onChangeText={handleValueChange}
+          value={inputValue}
+          {...props}
+          size={size}
+          onFocus={(e) => {
+            setBorderWidth(2);
+            props.onFocus?.(e);
+          }}
+          onBlur={(e) => {
+            setBorderWidth(1);
+            props.onBlur?.(e);
+          }}
+          height="100%"
+          placeholder={placeholder}
+          width={inputPercentage}
+          paddingLeft={inputValuePadding}
+          paddingRight={inputValuePadding}
+          unstyled
+          borderWidth={0}
+          paddingHorizontal={paddingHorizontal}
+          secureTextEntry={secureTextEntry}
+        />
+        {!!password && !passwordWithoutIcon && (
+          <Button
+            icon={show ? Eye : EyeOff}
+            scaleIcon={iconPasswordScale}
+            height="100%"
+            {...iconStyle}
+            width={iconPercentage}
+            onPress={(e) => {
+              setShow((prev) => !prev);
+              setBorderWidth(2);
+              props.onPress?.(e);
+            }}
+            jc="center"
+            ai="center"
+            padding={0}
+          />
+        )}
+        {!!iconAfter && (!password || passwordWithoutIcon) && (
+          <Button
+            icon={iconAfter}
+            {...iconStyle}
+            jc="center"
+            ai="center"
+            scaleIcon={iconBeforeScale}
+            width={iconPercentage}
+            unstyled={!(iconsAsButton || iconAfterAsButton)}
+            height="100%"
+            padding={0}
+          />
+        )}
+      </XGroup>
+    </XStack>
+  );
+}

package/src/forms/FormCheckBox/FormCheckBox.stories.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { FormCheckBox } from './index';
-import { Text } from 'tamagui';
+import { YStack } from 'tamagui';
+import { action } from '@storybook/addon-actions';
 
 export default {
   title: 'forms/FormCheckBox',
@@ -9,7 +10,26 @@ export default {
 };
 
 export const main = () => (
-  <FormCheckBox name="checkbox" label="checkbox" checkBoxElement={{ label: 'checkbox', value: 'checkbox' }}>
-    <Text>Hello this is from FormCheckBox</Text>
-  </FormCheckBox>
+  <YStack>
+    <FormCheckBox
+      name="checkbox"
+      checkBoxElement={{ label: 'mango', value: 'mango' }}
+      onCheckedChange={action('onCheckedChange')}
+    />
+    <FormCheckBox
+      name="checkbox"
+      checkBoxElement={{ label: 'orange', value: 'orange' }}
+      onCheckedChange={action('onCheckedChange')}
+    />
+    <FormCheckBox
+      name="checkbox"
+      checkBoxElement={{ label: 'banana', value: 'banana' }}
+      onCheckedChange={action('onCheckedChange')}
+    />
+    <FormCheckBox
+      name="checkbox"
+      checkBoxElement={{ label: 'lemon', value: 'lemon' }}
+      onCheckedChange={action('onCheckedChange')}
+    />
+  </YStack>
 );

package/src/forms/FormProgress/FormProgress.stories.tsx

@@ -0,0 +1,16 @@
+import { FormProgress } from './index';
+import React from 'react';
+
+export default {
+  title: 'forms/FormProgress',
+  component: FormProgress,
+  parameters: {
+    status: {
+      type: 'beta',
+    },
+  },
+};
+
+export const vertical = (args) => <FormProgress value={80} size={3} width={20} vertical name="progress" {...args} />;
+
+export const horizontal = (args) => <FormProgress value={80} size={3} width={20} name="progress" {...args} />;

package/src/forms/FormProgress/index.tsx

@@ -0,0 +1,73 @@
+import React, { useId } from 'react';
+import type { ProgressProps, SizeTokens } from 'tamagui';
+import { Progress } from 'tamagui';
+import { useFormContext, Controller } from 'react-hook-form';
+import type { FormFieldProps } from '../FormField';
+import { FormField } from '../FormField';
+import type { FormControllerProps } from '../types';
+
+export type FormProgressProps = ProgressProps &
+  FormControllerProps & { vertical?: boolean } & {
+    fieldProps?: Omit<FormFieldProps, 'helperText' | 'required' | 'error' | 'label'>;
+  } & Pick<FormFieldProps, 'helperText' | 'required' | 'error' | 'label'>;
+
+export function FormProgress({
+  control,
+  defaultValue,
+  error,
+  fieldProps,
+  helperText,
+  label,
+  name,
+  required,
+  rules,
+  size,
+  vertical,
+  ...progressProps
+}: FormProgressProps) {
+  const formContext = useFormContext();
+  const id = useId();
+  const propSize = typeof size === 'number' ? (`$${size}` as SizeTokens) : (size as SizeTokens);
+  if (!formContext) {
+    return (
+      <FormField id={id} error={!!error} helperText={helperText} label={label} required={required} {...fieldProps}>
+        <Progress
+          mt={vertical ? 86 : undefined}
+          ml={vertical ? -80 : undefined}
+          rotate={vertical ? '270deg' : undefined}
+          {...progressProps}
+          size={propSize}
+        >
+          <Progress.Indicator animation="bouncy" />
+        </Progress>
+      </FormField>
+    );
+  }
+  return (
+    <Controller
+      name={name}
+      control={control}
+      rules={rules}
+      defaultValue={defaultValue}
+      render={({ field: { value }, fieldState: { error } }) => (
+        <FormField
+          id={id}
+          error={!!error}
+          helperText={error ? error.message : helperText}
+          label={label}
+          required={required}
+          {...fieldProps}
+        >
+          <Progress
+            mt={vertical ? 86 : undefined}
+            ml={vertical ? -80 : undefined}
+            rotate={vertical ? '270deg' : undefined}
+            {...progressProps}
+            size={propSize}
+            value={value ?? 0}
+          />
+        </FormField>
+      )}
+    />
+  );
+}

package/src/forms/FormRadioGroup/FormRadioGroup.stories.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { FormRadioGroup } from './index';
+import { action } from '@storybook/addon-actions';
 
 export default {
   title: 'forms/FormRadioGroup',
@@ -18,5 +19,6 @@ export const main = () => (
       { label: 'option 2', value: 'option2' },
       { label: 'option 3', value: 'option3' },
     ]}
+    onValueChange={action('onValueChange')}
   />
 );

package/src/forms/FormSlider/FormSlider.stories.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { FormSlider } from './index';
+import { action } from '@storybook/addon-actions';
 
 export default {
   title: 'forms/FormSlider',
@@ -9,4 +10,4 @@ export default {
   },
 };
 
-export const main = () => <FormSlider name="FormSlider" />;
+export const main = () => <FormSlider name="FormSlider" onValueChange={action(`onValueChange`)} />;

package/src/forms/FormSwitch/FormSwitch.stories.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { FormSwitch } from './index';
+import { action } from '@storybook/addon-actions';
 
 export default {
   title: 'forms/FormSwitch',
@@ -10,5 +11,11 @@ export default {
 };
 
 export const main = () => (
-  <FormSwitch label="Example Switch" name="exampleSwitch" helperText="This is an example switch" defaultValue={false} />
+  <FormSwitch
+    label="Example Switch"
+    name="exampleSwitch"
+    helperText="This is an example switch"
+    defaultValue={false}
+    onCheckedChange={action('onCheckedChange')}
+  />
 );