@react-native-ohos/native-base 3.4.29-rc.1

package/lib/module/theme/base/typography.js

@@ -0,0 +1,134 @@
+const typography = {
+  letterSpacings: {
+    'xs': '-0.05em',
+    'sm': '-0.025em',
+    'md': 0,
+    'lg': '0.025em',
+    'xl': '0.05em',
+    '2xl': '0.1em'
+  },
+  lineHeights: {
+    '2xs': '1em',
+    'xs': '1.125em',
+    'sm': '1.25em',
+    'md': '1.375em',
+    'lg': '1.5em',
+    'xl': '1.75em',
+    '2xl': '2em',
+    '3xl': '2.5em',
+    '4xl': '3em',
+    '5xl': '4em'
+  },
+  fontConfig: {//   Roboto: {
+    //     100: {
+    //       normal: 'Roboto-Light',
+    //       italic: 'Roboto-LightItalic',
+    //     },
+    //     200: {
+    //       normal: 'Roboto-Light',
+    //       italic: 'Roboto-LightItalic',
+    //     },
+    //     300: {
+    //       normal: 'Roboto-Light',
+    //       italic: 'Roboto-LightItalic',
+    //     },
+    //     400: {
+    //       normal: 'Roboto-Regular',
+    //       italic: 'Roboto-Italic',
+    //     },
+    //     500: {
+    //       normal: 'Roboto-Medium',
+    //       italic: 'Roboto-MediumItalic',
+    //     },
+    //     600: {
+    //       normal: 'Roboto-Medium',
+    //       italic: 'Roboto-MediumItalic',
+    //     },
+    //     700: {
+    //       normal: 'Roboto-Bold',
+    //       italic: 'Roboto-BoldItalic',
+    //     },
+    //     800: {
+    //       normal: 'Roboto-Bold',
+    //       italic: 'Roboto-BoldItalic',
+    //     },
+    //     900: {
+    //       normal: 'Roboto-Bold',
+    //       italic: 'Roboto-BoldItalic',
+    //     },
+    //   },
+    //   Montserrat: {
+    //     100: {
+    //       normal: 'Montserrat-Light',
+    //       italic: 'Montserrat-LightItalic',
+    //     },
+    //     200: {
+    //       normal: 'Montserrat-Light',
+    //       italic: 'Montserrat-LightItalic',
+    //     },
+    //     300: {
+    //       normal: 'Montserrat-Light',
+    //       italic: 'Montserrat-LightItalic',
+    //     },
+    //     400: {
+    //       normal: 'Montserrat-Regular',
+    //       italic: 'Montserrat-Italic',
+    //     },
+    //     500: {
+    //       normal: 'Montserrat-Medium',
+    //       italic: 'Montserrat-MediumItalic',
+    //     },
+    //     600: {
+    //       normal: 'Montserrat-SemiBold',
+    //       italic: 'Montserrat-SemiBoldItalic',
+    //     },
+    //     700: {
+    //       normal: 'Montserrat-Bold',
+    //       italic: 'Montserrat-BoldItalic',
+    //     },
+    //     800: {
+    //       normal: 'Montserrat-ExtraBold',
+    //       italic: 'Montserrat-ExtraBoldItalic',
+    //     },
+    //     900: {
+    //       normal: 'Montserrat-Black',
+    //       italic: 'Montserrat-BlackItalic',
+    //     },
+    //   },
+  },
+  fontWeights: {
+    hairline: 100,
+    thin: 200,
+    light: 300,
+    normal: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700,
+    extrabold: 800,
+    black: 900,
+    extraBlack: 950
+  },
+  fonts: {
+    heading: undefined,
+    body: undefined,
+    mono: undefined
+  },
+  fontSizes: {
+    '2xs': 10,
+    'xs': 12,
+    'sm': 14,
+    'md': 16,
+    'lg': 18,
+    'xl': 20,
+    '2xl': 24,
+    '3xl': 30,
+    '4xl': 36,
+    '5xl': 48,
+    '6xl': 60,
+    '7xl': 72,
+    '8xl': 96,
+    '9xl': 128
+  }
+};
+export default typography;
+//# sourceMappingURL=typography.js.map

package/lib/module/theme/base/typography.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["typography.ts"],"names":["typography","letterSpacings","lineHeights","fontConfig","fontWeights","hairline","thin","light","normal","medium","semibold","bold","extrabold","black","extraBlack","fonts","heading","undefined","body","mono","fontSizes"],"mappings":"AAAA,MAAMA,UAAU,GAAG;AACjBC,EAAAA,cAAc,EAAE;AACd,UAAM,SADQ;AAEd,UAAM,UAFQ;AAGd,UAAM,CAHQ;AAId,UAAM,SAJQ;AAKd,UAAM,QALQ;AAMd,WAAO;AANO,GADC;AASjBC,EAAAA,WAAW,EAAE;AACX,WAAO,KADI;AAEX,UAAM,SAFK;AAGX,UAAM,QAHK;AAIX,UAAM,SAJK;AAKX,UAAM,OALK;AAMX,UAAM,QANK;AAOX,WAAO,KAPI;AAQX,WAAO,OARI;AASX,WAAO,KATI;AAUX,WAAO;AAVI,GATI;AAqBjBC,EAAAA,UAAU,EAAE,CACV;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AA5EU,GArBK;AAmGjBC,EAAAA,WAAW,EAAE;AACXC,IAAAA,QAAQ,EAAE,GADC;AAEXC,IAAAA,IAAI,EAAE,GAFK;AAGXC,IAAAA,KAAK,EAAE,GAHI;AAIXC,IAAAA,MAAM,EAAE,GAJG;AAKXC,IAAAA,MAAM,EAAE,GALG;AAMXC,IAAAA,QAAQ,EAAE,GANC;AAOXC,IAAAA,IAAI,EAAE,GAPK;AAQXC,IAAAA,SAAS,EAAE,GARA;AASXC,IAAAA,KAAK,EAAE,GATI;AAUXC,IAAAA,UAAU,EAAE;AAVD,GAnGI;AA+GjBC,EAAAA,KAAK,EAAE;AACLC,IAAAA,OAAO,EAAEC,SADJ;AAELC,IAAAA,IAAI,EAAED,SAFD;AAGLE,IAAAA,IAAI,EAAEF;AAHD,GA/GU;AAoHjBG,EAAAA,SAAS,EAAE;AACT,WAAO,EADE;AAET,UAAM,EAFG;AAGT,UAAM,EAHG;AAIT,UAAM,EAJG;AAKT,UAAM,EALG;AAMT,UAAM,EANG;AAOT,WAAO,EAPE;AAQT,WAAO,EARE;AAST,WAAO,EATE;AAUT,WAAO,EAVE;AAWT,WAAO,EAXE;AAYT,WAAO,EAZE;AAaT,WAAO,EAbE;AAcT,WAAO;AAdE;AApHM,CAAnB;AAkJA,eAAepB,UAAf","sourcesContent":["const typography = {\r\n  letterSpacings: {\r\n    'xs': '-0.05em',\r\n    'sm': '-0.025em',\r\n    'md': 0,\r\n    'lg': '0.025em',\r\n    'xl': '0.05em',\r\n    '2xl': '0.1em',\r\n  },\r\n  lineHeights: {\r\n    '2xs': '1em',\r\n    'xs': '1.125em',\r\n    'sm': '1.25em',\r\n    'md': '1.375em',\r\n    'lg': '1.5em',\r\n    'xl': '1.75em',\r\n    '2xl': '2em',\r\n    '3xl': '2.5em',\r\n    '4xl': '3em',\r\n    '5xl': '4em',\r\n  },\r\n  fontConfig: {\r\n    //   Roboto: {\r\n    //     100: {\r\n    //       normal: 'Roboto-Light',\r\n    //       italic: 'Roboto-LightItalic',\r\n    //     },\r\n    //     200: {\r\n    //       normal: 'Roboto-Light',\r\n    //       italic: 'Roboto-LightItalic',\r\n    //     },\r\n    //     300: {\r\n    //       normal: 'Roboto-Light',\r\n    //       italic: 'Roboto-LightItalic',\r\n    //     },\r\n    //     400: {\r\n    //       normal: 'Roboto-Regular',\r\n    //       italic: 'Roboto-Italic',\r\n    //     },\r\n    //     500: {\r\n    //       normal: 'Roboto-Medium',\r\n    //       italic: 'Roboto-MediumItalic',\r\n    //     },\r\n    //     600: {\r\n    //       normal: 'Roboto-Medium',\r\n    //       italic: 'Roboto-MediumItalic',\r\n    //     },\r\n    //     700: {\r\n    //       normal: 'Roboto-Bold',\r\n    //       italic: 'Roboto-BoldItalic',\r\n    //     },\r\n    //     800: {\r\n    //       normal: 'Roboto-Bold',\r\n    //       italic: 'Roboto-BoldItalic',\r\n    //     },\r\n    //     900: {\r\n    //       normal: 'Roboto-Bold',\r\n    //       italic: 'Roboto-BoldItalic',\r\n    //     },\r\n    //   },\r\n    //   Montserrat: {\r\n    //     100: {\r\n    //       normal: 'Montserrat-Light',\r\n    //       italic: 'Montserrat-LightItalic',\r\n    //     },\r\n    //     200: {\r\n    //       normal: 'Montserrat-Light',\r\n    //       italic: 'Montserrat-LightItalic',\r\n    //     },\r\n    //     300: {\r\n    //       normal: 'Montserrat-Light',\r\n    //       italic: 'Montserrat-LightItalic',\r\n    //     },\r\n    //     400: {\r\n    //       normal: 'Montserrat-Regular',\r\n    //       italic: 'Montserrat-Italic',\r\n    //     },\r\n    //     500: {\r\n    //       normal: 'Montserrat-Medium',\r\n    //       italic: 'Montserrat-MediumItalic',\r\n    //     },\r\n    //     600: {\r\n    //       normal: 'Montserrat-SemiBold',\r\n    //       italic: 'Montserrat-SemiBoldItalic',\r\n    //     },\r\n    //     700: {\r\n    //       normal: 'Montserrat-Bold',\r\n    //       italic: 'Montserrat-BoldItalic',\r\n    //     },\r\n    //     800: {\r\n    //       normal: 'Montserrat-ExtraBold',\r\n    //       italic: 'Montserrat-ExtraBoldItalic',\r\n    //     },\r\n    //     900: {\r\n    //       normal: 'Montserrat-Black',\r\n    //       italic: 'Montserrat-BlackItalic',\r\n    //     },\r\n    //   },\r\n  },\r\n  fontWeights: {\r\n    hairline: 100,\r\n    thin: 200,\r\n    light: 300,\r\n    normal: 400,\r\n    medium: 500,\r\n    semibold: 600,\r\n    bold: 700,\r\n    extrabold: 800,\r\n    black: 900,\r\n    extraBlack: 950,\r\n  },\r\n  fonts: {\r\n    heading: undefined,\r\n    body: undefined,\r\n    mono: undefined,\r\n  },\r\n  fontSizes: {\r\n    '2xs': 10,\r\n    'xs': 12,\r\n    'sm': 14,\r\n    'md': 16,\r\n    'lg': 18,\r\n    'xl': 20,\r\n    '2xl': 24,\r\n    '3xl': 30,\r\n    '4xl': 36,\r\n    '5xl': 48,\r\n    '6xl': 60,\r\n    '7xl': 72,\r\n    '8xl': 96,\r\n    '9xl': 128,\r\n  },\r\n};\r\n\r\nexport type ITypography = typeof typography;\r\nexport type IFontSize = keyof typeof typography.fontSizes;\r\nexport type ILetterSpacing = keyof typeof typography.letterSpacings;\r\nexport type ILineHeight = keyof typeof typography.lineHeights;\r\nexport type IFontWeight = keyof typeof typography.fontWeights;\r\n// export type IFont = typeof typography.fonts;\r\nexport interface IFont {\r\n  heading?: string;\r\n  body?: string;\r\n  mono?: string;\r\n}\r\n\r\nexport default typography;\r\n"]}

package/lib/module/theme/components/accordion.js

@@ -0,0 +1,50 @@
+import { mode } from '../tools/colors'; // Accordion
+
+const accordionBaseStyle = props => {
+  return {
+    borderWidth: 1,
+    borderColor: mode('gray.300', 'gray.600')(props),
+    borderRadius: 'lg'
+  };
+};
+
+export const Accordion = {
+  baseStyle: accordionBaseStyle
+}; // AccordionItem
+
+export const AccordionItem = {}; // AccordionIcon
+
+export const AccordionIcon = {}; // AccordionSummary
+
+const accordionSummaryBaseStyle = props => {
+  return {
+    borderTopWidth: 1,
+    borderTopColor: mode('gray.300', 'gray.600')(props),
+    p: 3,
+    _hover: {
+      bg: mode('primary.200', 'primary.300')(props)
+    },
+    _expanded: {
+      bg: 'primary.600',
+      borderBottomColor: mode('gray.300', 'gray.600')(props),
+      _text: {
+        color: 'white'
+      }
+    },
+    _disabled: {
+      bg: mode('gray.200', 'gray.700')(props)
+    }
+  };
+};
+
+export const AccordionSummary = {
+  baseStyle: accordionSummaryBaseStyle
+}; // AccordionDetails
+
+const accordionPanelBaseStyle = {
+  p: 3
+};
+export const AccordionDetails = {
+  baseStyle: accordionPanelBaseStyle
+};
+//# sourceMappingURL=accordion.js.map

package/lib/module/theme/components/accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["accordion.ts"],"names":["mode","accordionBaseStyle","props","borderWidth","borderColor","borderRadius","Accordion","baseStyle","AccordionItem","AccordionIcon","accordionSummaryBaseStyle","borderTopWidth","borderTopColor","p","_hover","bg","_expanded","borderBottomColor","_text","color","_disabled","AccordionSummary","accordionPanelBaseStyle","AccordionDetails"],"mappings":"AAAA,SAASA,IAAT,QAAqB,iBAArB,C,CAEA;;AACA,MAAMC,kBAAkB,GAAIC,KAAD,IAAgC;AACzD,SAAO;AACLC,IAAAA,WAAW,EAAE,CADR;AAELC,IAAAA,WAAW,EAAEJ,IAAI,CAAC,UAAD,EAAa,UAAb,CAAJ,CAA6BE,KAA7B,CAFR;AAGLG,IAAAA,YAAY,EAAE;AAHT,GAAP;AAKD,CAND;;AAOA,OAAO,MAAMC,SAAS,GAAG;AACvBC,EAAAA,SAAS,EAAEN;AADY,CAAlB,C,CAIP;;AACA,OAAO,MAAMO,aAAa,GAAG,EAAtB,C,CAEP;;AACA,OAAO,MAAMC,aAAa,GAAG,EAAtB,C,CAEP;;AACA,MAAMC,yBAAyB,GAAIR,KAAD,IAAgC;AAChE,SAAO;AACLS,IAAAA,cAAc,EAAE,CADX;AAELC,IAAAA,cAAc,EAAEZ,IAAI,CAAC,UAAD,EAAa,UAAb,CAAJ,CAA6BE,KAA7B,CAFX;AAGLW,IAAAA,CAAC,EAAE,CAHE;AAILC,IAAAA,MAAM,EAAE;AACNC,MAAAA,EAAE,EAAEf,IAAI,CAAC,aAAD,EAAgB,aAAhB,CAAJ,CAAmCE,KAAnC;AADE,KAJH;AAOLc,IAAAA,SAAS,EAAE;AACTD,MAAAA,EAAE,EAAE,aADK;AAETE,MAAAA,iBAAiB,EAAEjB,IAAI,CAAC,UAAD,EAAa,UAAb,CAAJ,CAA6BE,KAA7B,CAFV;AAGTgB,MAAAA,KAAK,EAAE;AAAEC,QAAAA,KAAK,EAAE;AAAT;AAHE,KAPN;AAYLC,IAAAA,SAAS,EAAE;AACTL,MAAAA,EAAE,EAAEf,IAAI,CAAC,UAAD,EAAa,UAAb,CAAJ,CAA6BE,KAA7B;AADK;AAZN,GAAP;AAgBD,CAjBD;;AAkBA,OAAO,MAAMmB,gBAAgB,GAAG;AAC9Bd,EAAAA,SAAS,EAAEG;AADmB,CAAzB,C,CAIP;;AACA,MAAMY,uBAAuB,GAAG;AAC9BT,EAAAA,CAAC,EAAE;AAD2B,CAAhC;AAIA,OAAO,MAAMU,gBAAgB,GAAG;AAC9BhB,EAAAA,SAAS,EAAEe;AADmB,CAAzB","sourcesContent":["import { mode } from '../tools/colors';\r\n\r\n// Accordion\r\nconst accordionBaseStyle = (props: Record<string, any>) => {\r\n  return {\r\n    borderWidth: 1,\r\n    borderColor: mode('gray.300', 'gray.600')(props),\r\n    borderRadius: 'lg',\r\n  };\r\n};\r\nexport const Accordion = {\r\n  baseStyle: accordionBaseStyle,\r\n};\r\n\r\n// AccordionItem\r\nexport const AccordionItem = {};\r\n\r\n// AccordionIcon\r\nexport const AccordionIcon = {};\r\n\r\n// AccordionSummary\r\nconst accordionSummaryBaseStyle = (props: Record<string, any>) => {\r\n  return {\r\n    borderTopWidth: 1,\r\n    borderTopColor: mode('gray.300', 'gray.600')(props),\r\n    p: 3,\r\n    _hover: {\r\n      bg: mode('primary.200', 'primary.300')(props),\r\n    },\r\n    _expanded: {\r\n      bg: 'primary.600',\r\n      borderBottomColor: mode('gray.300', 'gray.600')(props),\r\n      _text: { color: 'white' },\r\n    },\r\n    _disabled: {\r\n      bg: mode('gray.200', 'gray.700')(props),\r\n    },\r\n  };\r\n};\r\nexport const AccordionSummary = {\r\n  baseStyle: accordionSummaryBaseStyle,\r\n};\r\n\r\n// AccordionDetails\r\nconst accordionPanelBaseStyle = {\r\n  p: 3,\r\n};\r\n\r\nexport const AccordionDetails = {\r\n  baseStyle: accordionPanelBaseStyle,\r\n};\r\n"]}

package/lib/module/theme/components/actionsheet.js

@@ -0,0 +1,108 @@
+// Actionsheet
+export const Actionsheet = {
+  defaultProps: {
+    size: 'full',
+    justifyContent: 'flex-end',
+    animationPreset: 'slide'
+  }
+}; // ActionsheetContent
+
+export const ActionsheetContent = {
+  baseStyle: () => ({
+    alignItems: 'center',
+    px: 2,
+    py: 2,
+    borderRadius: 'none',
+    roundedTop: 20,
+    _web: {
+      userSelect: 'none'
+    },
+    _dragIndicator: {
+      height: 1,
+      width: 10,
+      borderRadius: 2,
+      bg: 'muted.500'
+    },
+    _dark: {
+      _dragIndicator: {
+        bg: 'muted.400'
+      }
+    },
+    _dragIndicatorWrapper: {
+      pt: 3,
+      pb: 3,
+      mt: -2,
+      width: '100%',
+      alignItems: 'center',
+      collapsable: false
+    },
+    _dragIndicatorWrapperOffSet: {
+      py: 2,
+      collapsable: false
+    }
+  })
+}; // ActionsheetItem
+
+export const ActionsheetItem = {
+  baseStyle: () => ({
+    width: '100%',
+    justifyContent: 'flex-start',
+    _stack: {
+      space: 4
+    },
+    p: 4,
+    _text: {
+      color: 'text.900',
+      fontSize: 'md',
+      fontWeight: 'normal'
+    },
+    _disabled: {
+      opacity: 40
+    },
+    bg: 'muted.50',
+    _icon: {
+      color: 'muted.500'
+    },
+    _hover: {
+      bg: 'muted.200'
+    },
+    _pressed: {
+      bg: 'muted.400'
+    },
+    _focusVisible: {
+      _web: {
+        outlineWidth: '0',
+        style: {
+          boxShadow: "none"
+        },
+        bg: 'muted.300'
+      },
+      bg: 'muted.300'
+    },
+    _dark: {
+      bg: 'muted.800',
+      _icon: {
+        color: 'muted.400'
+      },
+      _text: {
+        color: 'muted.50'
+      },
+      _hover: {
+        bg: 'muted.700'
+      },
+      _pressed: {
+        bg: 'muted.500'
+      },
+      _focusVisible: {
+        _web: {
+          outlineWidth: '0',
+          style: {
+            boxShadow: "none"
+          },
+          bg: 'muted.600'
+        }
+      }
+    }
+  })
+};
+//# sourceMappingURL=actionsheet.js.map

package/lib/module/theme/components/actionsheet.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["actionsheet.ts"],"names":["Actionsheet","defaultProps","size","justifyContent","animationPreset","ActionsheetContent","baseStyle","alignItems","px","py","borderRadius","roundedTop","_web","userSelect","_dragIndicator","height","width","bg","_dark","_dragIndicatorWrapper","pt","pb","mt","collapsable","_dragIndicatorWrapperOffSet","ActionsheetItem","_stack","space","p","_text","color","fontSize","fontWeight","_disabled","opacity","_icon","_hover","_pressed","_focusVisible","outlineWidth","style","boxShadow"],"mappings":"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","sourcesContent":["// Actionsheet\r\nexport const Actionsheet = {\r\n  defaultProps: {\r\n    size: 'full',\r\n    justifyContent: 'flex-end',\r\n    animationPreset: 'slide',\r\n  },\r\n};\r\n\r\n// ActionsheetContent\r\nexport const ActionsheetContent = {\r\n  baseStyle: () => ({\r\n    alignItems: 'center',\r\n    px: 2,\r\n    py: 2,\r\n    borderRadius: 'none',\r\n    roundedTop: 20,\r\n    _web: {\r\n      userSelect: 'none',\r\n    },\r\n    _dragIndicator: {\r\n      height: 1,\r\n      width: 10,\r\n      borderRadius: 2,\r\n      bg: 'muted.500',\r\n    },\r\n\r\n    _dark: {\r\n      _dragIndicator: {\r\n        bg: 'muted.400',\r\n      },\r\n    },\r\n\r\n    _dragIndicatorWrapper: {\r\n      pt: 3,\r\n      pb: 3,\r\n      mt: -2,\r\n      width: '100%',\r\n      alignItems: 'center',\r\n      collapsable: false,\r\n    },\r\n    _dragIndicatorWrapperOffSet: {\r\n      py: 2,\r\n      collapsable: false,\r\n    },\r\n  }),\r\n};\r\n\r\n// ActionsheetItem\r\nexport const ActionsheetItem = {\r\n  baseStyle: () => ({\r\n    width: '100%',\r\n    justifyContent: 'flex-start',\r\n    _stack: {\r\n      space: 4,\r\n    },\r\n    p: 4,\r\n    _text: {\r\n      color: 'text.900',\r\n      fontSize: 'md',\r\n      fontWeight: 'normal',\r\n    },\r\n    _disabled: {\r\n      opacity: 40,\r\n    },\r\n\r\n    bg: 'muted.50',\r\n    _icon: {\r\n      color: 'muted.500',\r\n    },\r\n\r\n    _hover: {\r\n      bg: 'muted.200',\r\n    },\r\n    _pressed: {\r\n      bg: 'muted.400',\r\n    },\r\n    _focusVisible: {\r\n      _web: {\r\n        outlineWidth: '0',\r\n        style: { boxShadow: `none` },\r\n        bg: 'muted.300',\r\n      },\r\n      bg: 'muted.300',\r\n    },\r\n\r\n    _dark: {\r\n      bg: 'muted.800',\r\n      _icon: {\r\n        color: 'muted.400',\r\n      },\r\n      _text: {\r\n        color: 'muted.50',\r\n      },\r\n      _hover: {\r\n        bg: 'muted.700',\r\n      },\r\n      _pressed: {\r\n        bg: 'muted.500',\r\n      },\r\n      _focusVisible: {\r\n        _web: {\r\n          outlineWidth: '0',\r\n          style: { boxShadow: `none` },\r\n          bg: 'muted.600',\r\n        },\r\n      },\r\n    },\r\n  }),\r\n};\r\n"]}

package/lib/module/theme/components/alert-dialog.js

@@ -0,0 +1,193 @@
+import { Dimensions } from 'react-native';
+const sizes = {
+  xs: {
+    contentSize: {
+      width: '60%',
+      maxWidth: '280'
+    }
+  },
+  sm: {
+    contentSize: {
+      width: '65%',
+      maxWidth: '320'
+    }
+  },
+  md: {
+    contentSize: {
+      width: '75%',
+      maxWidth: '380'
+    }
+  },
+  lg: {
+    contentSize: {
+      width: '80%',
+      maxWidth: '520'
+    }
+  },
+  xl: {
+    contentSize: {
+      width: '90%',
+      maxWidth: '580'
+    }
+  },
+  full: {
+    contentSize: {
+      width: '100%'
+    }
+  }
+};
+export const AlertDialog = {
+  baseStyle: {
+    width: '100%',
+    height: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    _web: {
+      pointerEvents: 'box-none'
+    },
+    _backdropFade: {
+      exitDuration: 150,
+      entryDuration: 200
+    },
+    _fade: {
+      exitDuration: 100,
+      entryDuration: 200
+    },
+    _slide: {
+      duration: 200,
+      overlay: false
+    },
+    _overlay: {
+      unmountOnExit: true
+    }
+  },
+  sizes,
+  defaultProps: {
+    size: 'md',
+    closeOnOverlayClick: true
+  }
+};
+export const AlertDialogContent = {
+  baseStyle: () => {
+    return {
+      shadow: 1,
+      rounded: 'lg',
+      maxHeight: "".concat(Dimensions.get('window').height - 150, "px"),
+      overflow: 'hidden',
+      bg: 'muted.50',
+      _text: {
+        color: 'text.900'
+      },
+      _dark: {
+        bg: 'muted.800',
+        color: 'text.50'
+      }
+    };
+  }
+};
+export const AlertDialogCloseButton = {
+  baseStyle: () => {
+    return {
+      position: 'absolute',
+      right: '3',
+      top: '3',
+      zIndex: '1',
+      p: '2',
+      bg: 'transparent',
+      borderRadius: 'sm',
+      _web: {
+        outlineWidth: 0,
+        cursor: 'pointer'
+      },
+      _icon: {
+        size: '4',
+        color: 'muted.500'
+      },
+      _hover: {
+        bg: 'muted.200'
+      },
+      _pressed: {
+        bg: 'muted.300'
+      },
+      _dark: {
+        _icon: {
+          color: 'muted.400'
+        },
+        _hover: {
+          bg: 'muted.700'
+        },
+        _pressed: {
+          bg: 'muted.600'
+        }
+      }
+    };
+  }
+};
+export const AlertDialogHeader = {
+  baseStyle: () => {
+    return {
+      p: '4',
+      borderBottomWidth: '1',
+      _text: {
+        color: 'text.900',
+        fontSize: 'md',
+        fontWeight: 'semibold',
+        lineHeight: 'sm'
+      },
+      bg: 'muted.50',
+      borderColor: 'muted.300',
+      _dark: {
+        bg: 'muted.800',
+        borderColor: 'muted.700',
+        _text: {
+          color: 'text.50'
+        }
+      }
+    };
+  }
+};
+export const AlertDialogBody = {
+  baseStyle: () => {
+    return {
+      p: '4',
+      bg: 'muted.50',
+      _text: {
+        color: 'text.900'
+      },
+      _dark: {
+        bg: 'muted.800',
+        _text: {
+          color: 'text.50'
+        }
+      }
+    };
+  }
+};
+export const AlertDialogFooter = {
+  baseStyle: () => {
+    return {
+      p: '4',
+      flexDirection: 'row',
+      justifyContent: 'flex-end',
+      flexWrap: 'wrap',
+      borderTopWidth: '1',
+      bg: 'muted.50',
+      borderColor: 'muted.300',
+      _dark: {
+        bg: 'muted.800',
+        borderColor: 'muted.700'
+      }
+    };
+  }
+};
+export const AlertDialogOverlay = {
+  baseStyle: {
+    position: 'absolute',
+    left: '0',
+    top: '0',
+    opacity: '50',
+    right: '0',
+    bottom: '0'
+  }
+};
+//# sourceMappingURL=alert-dialog.js.map

package/lib/module/theme/components/alert-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["alert-dialog.ts"],"names":["Dimensions","sizes","xs","contentSize","width","maxWidth","sm","md","lg","xl","full","AlertDialog","baseStyle","height","justifyContent","alignItems","_web","pointerEvents","_backdropFade","exitDuration","entryDuration","_fade","_slide","duration","overlay","_overlay","unmountOnExit","defaultProps","size","closeOnOverlayClick","AlertDialogContent","shadow","rounded","maxHeight","get","overflow","bg","_text","color","_dark","AlertDialogCloseButton","position","right","top","zIndex","p","borderRadius","outlineWidth","cursor","_icon","_hover","_pressed","AlertDialogHeader","borderBottomWidth","fontSize","fontWeight","lineHeight","borderColor","AlertDialogBody","AlertDialogFooter","flexDirection","flexWrap","borderTopWidth","AlertDialogOverlay","left","opacity","bottom"],"mappings":"AAAA,SAASA,UAAT,QAA2B,cAA3B;AAEA,MAAMC,KAAK,GAAG;AACZC,EAAAA,EAAE,EAAE;AACFC,IAAAA,WAAW,EAAE;AACXC,MAAAA,KAAK,EAAE,KADI;AAEXC,MAAAA,QAAQ,EAAE;AAFC;AADX,GADQ;AAOZC,EAAAA,EAAE,EAAE;AACFH,IAAAA,WAAW,EAAE;AACXC,MAAAA,KAAK,EAAE,KADI;AAEXC,MAAAA,QAAQ,EAAE;AAFC;AADX,GAPQ;AAaZE,EAAAA,EAAE,EAAE;AACFJ,IAAAA,WAAW,EAAE;AACXC,MAAAA,KAAK,EAAE,KADI;AAEXC,MAAAA,QAAQ,EAAE;AAFC;AADX,GAbQ;AAmBZG,EAAAA,EAAE,EAAE;AACFL,IAAAA,WAAW,EAAE;AACXC,MAAAA,KAAK,EAAE,KADI;AAEXC,MAAAA,QAAQ,EAAE;AAFC;AADX,GAnBQ;AAyBZI,EAAAA,EAAE,EAAE;AACFN,IAAAA,WAAW,EAAE;AACXC,MAAAA,KAAK,EAAE,KADI;AAEXC,MAAAA,QAAQ,EAAE;AAFC;AADX,GAzBQ;AA+BZK,EAAAA,IAAI,EAAE;AACJP,IAAAA,WAAW,EAAE;AACXC,MAAAA,KAAK,EAAE;AADI;AADT;AA/BM,CAAd;AAsCA,OAAO,MAAMO,WAAW,GAAG;AACzBC,EAAAA,SAAS,EAAE;AACTR,IAAAA,KAAK,EAAE,MADE;AAETS,IAAAA,MAAM,EAAE,MAFC;AAGTC,IAAAA,cAAc,EAAE,QAHP;AAITC,IAAAA,UAAU,EAAE,QAJH;AAKTC,IAAAA,IAAI,EAAE;AAAEC,MAAAA,aAAa,EAAE;AAAjB,KALG;AAMTC,IAAAA,aAAa,EAAE;AAAEC,MAAAA,YAAY,EAAE,GAAhB;AAAqBC,MAAAA,aAAa,EAAE;AAApC,KANN;AAOTC,IAAAA,KAAK,EAAE;AAAEF,MAAAA,YAAY,EAAE,GAAhB;AAAqBC,MAAAA,aAAa,EAAE;AAApC,KAPE;AAQTE,IAAAA,MAAM,EAAE;AAAEC,MAAAA,QAAQ,EAAE,GAAZ;AAAiBC,MAAAA,OAAO,EAAE;AAA1B,KARC;AASTC,IAAAA,QAAQ,EAAE;AACRC,MAAAA,aAAa,EAAE;AADP;AATD,GADc;AAczBzB,EAAAA,KAdyB;AAezB0B,EAAAA,YAAY,EAAE;AACZC,IAAAA,IAAI,EAAE,IADM;AAEZC,IAAAA,mBAAmB,EAAE;AAFT;AAfW,CAApB;AAqBP,OAAO,MAAMC,kBAAkB,GAAG;AAChClB,EAAAA,SAAS,EAAE,MAAM;AACf,WAAO;AACLmB,MAAAA,MAAM,EAAE,CADH;AAELC,MAAAA,OAAO,EAAE,IAFJ;AAGLC,MAAAA,SAAS,YAAKjC,UAAU,CAACkC,GAAX,CAAe,QAAf,EAAyBrB,MAAzB,GAAkC,GAAvC,OAHJ;AAILsB,MAAAA,QAAQ,EAAE,QAJL;AAKLC,MAAAA,EAAE,EAAE,UALC;AAMLC,MAAAA,KAAK,EAAE;AACLC,QAAAA,KAAK,EAAE;AADF,OANF;AAULC,MAAAA,KAAK,EAAE;AACLH,QAAAA,EAAE,EAAE,WADC;AAELE,QAAAA,KAAK,EAAE;AAFF;AAVF,KAAP;AAeD;AAjB+B,CAA3B;AAmBP,OAAO,MAAME,sBAAsB,GAAG;AACpC5B,EAAAA,SAAS,EAAE,MAAM;AACf,WAAO;AACL6B,MAAAA,QAAQ,EAAE,UADL;AAELC,MAAAA,KAAK,EAAE,GAFF;AAGLC,MAAAA,GAAG,EAAE,GAHA;AAILC,MAAAA,MAAM,EAAE,GAJH;AAKLC,MAAAA,CAAC,EAAE,GALE;AAMLT,MAAAA,EAAE,EAAE,aANC;AAOLU,MAAAA,YAAY,EAAE,IAPT;AAQL9B,MAAAA,IAAI,EAAE;AACJ+B,QAAAA,YAAY,EAAE,CADV;AAEJC,QAAAA,MAAM,EAAE;AAFJ,OARD;AAYLC,MAAAA,KAAK,EAAE;AACLrB,QAAAA,IAAI,EAAE,GADD;AAELU,QAAAA,KAAK,EAAE;AAFF,OAZF;AAiBLY,MAAAA,MAAM,EAAE;AACNd,QAAAA,EAAE,EAAE;AADE,OAjBH;AAoBLe,MAAAA,QAAQ,EAAE;AACRf,QAAAA,EAAE,EAAE;AADI,OApBL;AAwBLG,MAAAA,KAAK,EAAE;AACLU,QAAAA,KAAK,EAAE;AACLX,UAAAA,KAAK,EAAE;AADF,SADF;AAILY,QAAAA,MAAM,EAAE;AACNd,UAAAA,EAAE,EAAE;AADE,SAJH;AAOLe,QAAAA,QAAQ,EAAE;AACRf,UAAAA,EAAE,EAAE;AADI;AAPL;AAxBF,KAAP;AAoCD;AAtCmC,CAA/B;AAwCP,OAAO,MAAMgB,iBAAiB,GAAG;AAC/BxC,EAAAA,SAAS,EAAE,MAAM;AACf,WAAO;AACLiC,MAAAA,CAAC,EAAE,GADE;AAELQ,MAAAA,iBAAiB,EAAE,GAFd;AAGLhB,MAAAA,KAAK,EAAE;AACLC,QAAAA,KAAK,EAAE,UADF;AAELgB,QAAAA,QAAQ,EAAE,IAFL;AAGLC,QAAAA,UAAU,EAAE,UAHP;AAILC,QAAAA,UAAU,EAAE;AAJP,OAHF;AASLpB,MAAAA,EAAE,EAAE,UATC;AAULqB,MAAAA,WAAW,EAAE,WAVR;AAYLlB,MAAAA,KAAK,EAAE;AACLH,QAAAA,EAAE,EAAE,WADC;AAELqB,QAAAA,WAAW,EAAE,WAFR;AAGLpB,QAAAA,KAAK,EAAE;AACLC,UAAAA,KAAK,EAAE;AADF;AAHF;AAZF,KAAP;AAoBD;AAtB8B,CAA1B;AAwBP,OAAO,MAAMoB,eAAe,GAAG;AAC7B9C,EAAAA,SAAS,EAAE,MAAM;AACf,WAAO;AACLiC,MAAAA,CAAC,EAAE,GADE;AAGLT,MAAAA,EAAE,EAAE,UAHC;AAILC,MAAAA,KAAK,EAAE;AACLC,QAAAA,KAAK,EAAE;AADF,OAJF;AAQLC,MAAAA,KAAK,EAAE;AACLH,QAAAA,EAAE,EAAE,WADC;AAELC,QAAAA,KAAK,EAAE;AACLC,UAAAA,KAAK,EAAE;AADF;AAFF;AARF,KAAP;AAeD;AAjB4B,CAAxB;AAmBP,OAAO,MAAMqB,iBAAiB,GAAG;AAC/B/C,EAAAA,SAAS,EAAE,MAAM;AACf,WAAO;AACLiC,MAAAA,CAAC,EAAE,GADE;AAELe,MAAAA,aAAa,EAAE,KAFV;AAGL9C,MAAAA,cAAc,EAAE,UAHX;AAIL+C,MAAAA,QAAQ,EAAE,MAJL;AAKLC,MAAAA,cAAc,EAAE,GALX;AAML1B,MAAAA,EAAE,EAAE,UANC;AAOLqB,MAAAA,WAAW,EAAE,WAPR;AASLlB,MAAAA,KAAK,EAAE;AACLH,QAAAA,EAAE,EAAE,WADC;AAELqB,QAAAA,WAAW,EAAE;AAFR;AATF,KAAP;AAcD;AAhB8B,CAA1B;AAkBP,OAAO,MAAMM,kBAAkB,GAAG;AAChCnD,EAAAA,SAAS,EAAE;AACT6B,IAAAA,QAAQ,EAAE,UADD;AAETuB,IAAAA,IAAI,EAAE,GAFG;AAGTrB,IAAAA,GAAG,EAAE,GAHI;AAITsB,IAAAA,OAAO,EAAE,IAJA;AAKTvB,IAAAA,KAAK,EAAE,GALE;AAMTwB,IAAAA,MAAM,EAAE;AANC;AADqB,CAA3B","sourcesContent":["import { Dimensions } from 'react-native';\r\n\r\nconst sizes = {\r\n  xs: {\r\n    contentSize: {\r\n      width: '60%',\r\n      maxWidth: '280',\r\n    },\r\n  },\r\n  sm: {\r\n    contentSize: {\r\n      width: '65%',\r\n      maxWidth: '320',\r\n    },\r\n  },\r\n  md: {\r\n    contentSize: {\r\n      width: '75%',\r\n      maxWidth: '380',\r\n    },\r\n  },\r\n  lg: {\r\n    contentSize: {\r\n      width: '80%',\r\n      maxWidth: '520',\r\n    },\r\n  },\r\n  xl: {\r\n    contentSize: {\r\n      width: '90%',\r\n      maxWidth: '580',\r\n    },\r\n  },\r\n  full: {\r\n    contentSize: {\r\n      width: '100%',\r\n    },\r\n  },\r\n};\r\n\r\nexport const AlertDialog = {\r\n  baseStyle: {\r\n    width: '100%',\r\n    height: '100%',\r\n    justifyContent: 'center',\r\n    alignItems: 'center',\r\n    _web: { pointerEvents: 'box-none' },\r\n    _backdropFade: { exitDuration: 150, entryDuration: 200 },\r\n    _fade: { exitDuration: 100, entryDuration: 200 },\r\n    _slide: { duration: 200, overlay: false },\r\n    _overlay: {\r\n      unmountOnExit: true,\r\n    },\r\n  },\r\n  sizes,\r\n  defaultProps: {\r\n    size: 'md',\r\n    closeOnOverlayClick: true,\r\n  },\r\n};\r\n\r\nexport const AlertDialogContent = {\r\n  baseStyle: () => {\r\n    return {\r\n      shadow: 1,\r\n      rounded: 'lg',\r\n      maxHeight: `${Dimensions.get('window').height - 150}px`,\r\n      overflow: 'hidden',\r\n      bg: 'muted.50',\r\n      _text: {\r\n        color: 'text.900',\r\n      },\r\n\r\n      _dark: {\r\n        bg: 'muted.800',\r\n        color: 'text.50',\r\n      },\r\n    };\r\n  },\r\n};\r\nexport const AlertDialogCloseButton = {\r\n  baseStyle: () => {\r\n    return {\r\n      position: 'absolute',\r\n      right: '3',\r\n      top: '3',\r\n      zIndex: '1',\r\n      p: '2',\r\n      bg: 'transparent',\r\n      borderRadius: 'sm',\r\n      _web: {\r\n        outlineWidth: 0,\r\n        cursor: 'pointer',\r\n      },\r\n      _icon: {\r\n        size: '4',\r\n        color: 'muted.500',\r\n      },\r\n\r\n      _hover: {\r\n        bg: 'muted.200',\r\n      },\r\n      _pressed: {\r\n        bg: 'muted.300',\r\n      },\r\n\r\n      _dark: {\r\n        _icon: {\r\n          color: 'muted.400',\r\n        },\r\n        _hover: {\r\n          bg: 'muted.700',\r\n        },\r\n        _pressed: {\r\n          bg: 'muted.600',\r\n        },\r\n      },\r\n    };\r\n  },\r\n};\r\nexport const AlertDialogHeader = {\r\n  baseStyle: () => {\r\n    return {\r\n      p: '4',\r\n      borderBottomWidth: '1',\r\n      _text: {\r\n        color: 'text.900',\r\n        fontSize: 'md',\r\n        fontWeight: 'semibold',\r\n        lineHeight: 'sm',\r\n      },\r\n      bg: 'muted.50',\r\n      borderColor: 'muted.300',\r\n\r\n      _dark: {\r\n        bg: 'muted.800',\r\n        borderColor: 'muted.700',\r\n        _text: {\r\n          color: 'text.50',\r\n        },\r\n      },\r\n    };\r\n  },\r\n};\r\nexport const AlertDialogBody = {\r\n  baseStyle: () => {\r\n    return {\r\n      p: '4',\r\n\r\n      bg: 'muted.50',\r\n      _text: {\r\n        color: 'text.900',\r\n      },\r\n\r\n      _dark: {\r\n        bg: 'muted.800',\r\n        _text: {\r\n          color: 'text.50',\r\n        },\r\n      },\r\n    };\r\n  },\r\n};\r\nexport const AlertDialogFooter = {\r\n  baseStyle: () => {\r\n    return {\r\n      p: '4',\r\n      flexDirection: 'row',\r\n      justifyContent: 'flex-end',\r\n      flexWrap: 'wrap',\r\n      borderTopWidth: '1',\r\n      bg: 'muted.50',\r\n      borderColor: 'muted.300',\r\n\r\n      _dark: {\r\n        bg: 'muted.800',\r\n        borderColor: 'muted.700',\r\n      },\r\n    };\r\n  },\r\n};\r\nexport const AlertDialogOverlay = {\r\n  baseStyle: {\r\n    position: 'absolute',\r\n    left: '0',\r\n    top: '0',\r\n    opacity: '50',\r\n    right: '0',\r\n    bottom: '0',\r\n  },\r\n};\r\n"]}