@wecareu/icons 1.0.5 → 1.0.7

package/dist/index.js

@@ -323,13 +323,20 @@ var fontSizes = {
   display: 32
 };
 var lineHeights = {
-  tight: 1.2,
-  normal: 1.4,
-  relaxed: 1.6,
-  loose: 1.8,
-  caption: 1.4,
-  body: 1.5,
-  heading: 1.2
+  displayLarge: 38,
+  displayMedium: 29,
+  headingLarge: 28,
+  headingMedium: 25,
+  headingSmall: 22,
+  bodyLarge: 29,
+  bodyMedium: 22,
+  bodySmall: 20,
+  labelLarge: 22,
+  labelMedium: 20,
+  labelSmall: 17,
+  buttonLarge: 22,
+  buttonMedium: 20,
+  caption: 17
 };
 var fontWeights = {
   regular: "400",
@@ -341,86 +348,86 @@ var textStyles = {
   displayLarge: {
     fontFamily: fontFamilies.bold,
     fontSize: fontSizes.huge,
-    lineHeight: lineHeights.tight,
-    fontWeight: fontWeights.bold
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights.displayLarge
   },
   displayMedium: {
     fontFamily: fontFamilies.bold,
     fontSize: fontSizes.heading,
-    lineHeight: lineHeights.tight,
-    fontWeight: fontWeights.bold
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights.displayMedium
   },
   headingLarge: {
     fontFamily: fontFamilies.bold,
     fontSize: fontSizes.title,
-    lineHeight: lineHeights.normal,
-    fontWeight: fontWeights.bold
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights.headingLarge
   },
   headingMedium: {
     fontFamily: fontFamilies.semibold,
     fontSize: fontSizes.subtitle,
-    lineHeight: lineHeights.normal,
-    fontWeight: fontWeights.semibold
+    fontWeight: fontWeights.semibold,
+    lineHeight: lineHeights.headingMedium
   },
   headingSmall: {
     fontFamily: fontFamilies.semibold,
     fontSize: fontSizes.md,
-    lineHeight: lineHeights.normal,
-    fontWeight: fontWeights.semibold
+    fontWeight: fontWeights.semibold,
+    lineHeight: lineHeights.headingSmall
   },
   bodyLarge: {
     fontFamily: fontFamilies.regular,
     fontSize: fontSizes.lg,
-    lineHeight: lineHeights.relaxed,
-    fontWeight: fontWeights.regular
+    fontWeight: fontWeights.regular,
+    lineHeight: lineHeights.bodyLarge
   },
   bodyMedium: {
     fontFamily: fontFamilies.regular,
     fontSize: fontSizes.body,
-    lineHeight: lineHeights.normal,
-    fontWeight: fontWeights.regular
+    fontWeight: fontWeights.regular,
+    lineHeight: lineHeights.bodyMedium
   },
   bodySmall: {
     fontFamily: fontFamilies.regular,
     fontSize: fontSizes.sm,
-    lineHeight: lineHeights.normal,
-    fontWeight: fontWeights.regular
+    fontWeight: fontWeights.regular,
+    lineHeight: lineHeights.bodySmall
   },
   labelLarge: {
     fontFamily: fontFamilies.semibold,
     fontSize: fontSizes.md,
-    lineHeight: lineHeights.normal,
-    fontWeight: fontWeights.semibold
+    fontWeight: fontWeights.semibold,
+    lineHeight: lineHeights.labelLarge
   },
   labelMedium: {
     fontFamily: fontFamilies.semibold,
     fontSize: fontSizes.sm,
-    lineHeight: lineHeights.normal,
-    fontWeight: fontWeights.semibold
+    fontWeight: fontWeights.semibold,
+    lineHeight: lineHeights.labelMedium
   },
   labelSmall: {
     fontFamily: fontFamilies.regular,
     fontSize: fontSizes.xs,
-    lineHeight: lineHeights.normal,
-    fontWeight: fontWeights.regular
+    fontWeight: fontWeights.regular,
+    lineHeight: lineHeights.labelSmall
   },
   buttonLarge: {
     fontFamily: fontFamilies.semibold,
     fontSize: fontSizes.md,
-    lineHeight: lineHeights.normal,
-    fontWeight: fontWeights.semibold
+    fontWeight: fontWeights.semibold,
+    lineHeight: lineHeights.buttonLarge
   },
   buttonMedium: {
     fontFamily: fontFamilies.semibold,
     fontSize: fontSizes.sm,
-    lineHeight: lineHeights.normal,
-    fontWeight: fontWeights.semibold
+    fontWeight: fontWeights.semibold,
+    lineHeight: lineHeights.buttonMedium
   },
   caption: {
     fontFamily: fontFamilies.regular,
     fontSize: fontSizes.caption,
-    lineHeight: lineHeights.caption,
-    fontWeight: fontWeights.regular
+    fontWeight: fontWeights.regular,
+    lineHeight: lineHeights.caption
   }
 };
 var spacing = {
@@ -1238,16 +1245,24 @@ var import_jsx_runtime70 = require("react/jsx-runtime");
 var Icon = ({ name, size, color, testID = "icon", ...rest }) => {
   const theme = useTheme();
   const Cmp = ICONS[name];
-  const extra = {};
+  const { fill: fillProp, stroke: strokeProp, ...svgRest } = rest;
+  const iconColor = color || strokeProp || theme.colors.text.primary || "#000000";
+  const dimensions = {};
   if (size != null) {
-    extra.width = size;
-    extra.height = size;
+    dimensions.height = size;
+    dimensions.width = size;
   }
-  const iconColor = color || theme.colors.text.primary || "#000000";
-  extra.color = iconColor;
-  extra.fill = iconColor;
-  extra.stroke = iconColor;
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Cmp, { ...extra, testID, ...rest });
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+    Cmp,
+    {
+      ...dimensions,
+      color: iconColor,
+      fill: fillProp ?? "none",
+      stroke: strokeProp ?? iconColor,
+      testID,
+      ...svgRest
+    }
+  );
 };
 
 // src/assets/lottie/dots.json

package/dist/index.mjs

@@ -287,13 +287,20 @@ var fontSizes = {
   display: 32
 };
 var lineHeights = {
-  tight: 1.2,
-  normal: 1.4,
-  relaxed: 1.6,
-  loose: 1.8,
-  caption: 1.4,
-  body: 1.5,
-  heading: 1.2
+  displayLarge: 38,
+  displayMedium: 29,
+  headingLarge: 28,
+  headingMedium: 25,
+  headingSmall: 22,
+  bodyLarge: 29,
+  bodyMedium: 22,
+  bodySmall: 20,
+  labelLarge: 22,
+  labelMedium: 20,
+  labelSmall: 17,
+  buttonLarge: 22,
+  buttonMedium: 20,
+  caption: 17
 };
 var fontWeights = {
   regular: "400",
@@ -305,86 +312,86 @@ var textStyles = {
   displayLarge: {
     fontFamily: fontFamilies.bold,
     fontSize: fontSizes.huge,
-    lineHeight: lineHeights.tight,
-    fontWeight: fontWeights.bold
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights.displayLarge
   },
   displayMedium: {
     fontFamily: fontFamilies.bold,
     fontSize: fontSizes.heading,
-    lineHeight: lineHeights.tight,
-    fontWeight: fontWeights.bold
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights.displayMedium
   },
   headingLarge: {
     fontFamily: fontFamilies.bold,
     fontSize: fontSizes.title,
-    lineHeight: lineHeights.normal,
-    fontWeight: fontWeights.bold
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights.headingLarge
   },
   headingMedium: {
     fontFamily: fontFamilies.semibold,
     fontSize: fontSizes.subtitle,
-    lineHeight: lineHeights.normal,
-    fontWeight: fontWeights.semibold
+    fontWeight: fontWeights.semibold,
+    lineHeight: lineHeights.headingMedium
   },
   headingSmall: {
     fontFamily: fontFamilies.semibold,
     fontSize: fontSizes.md,
-    lineHeight: lineHeights.normal,
-    fontWeight: fontWeights.semibold
+    fontWeight: fontWeights.semibold,
+    lineHeight: lineHeights.headingSmall
   },
   bodyLarge: {
     fontFamily: fontFamilies.regular,
     fontSize: fontSizes.lg,
-    lineHeight: lineHeights.relaxed,
-    fontWeight: fontWeights.regular
+    fontWeight: fontWeights.regular,
+    lineHeight: lineHeights.bodyLarge
   },
   bodyMedium: {
     fontFamily: fontFamilies.regular,
     fontSize: fontSizes.body,
-    lineHeight: lineHeights.normal,
-    fontWeight: fontWeights.regular
+    fontWeight: fontWeights.regular,
+    lineHeight: lineHeights.bodyMedium
   },
   bodySmall: {
     fontFamily: fontFamilies.regular,
     fontSize: fontSizes.sm,
-    lineHeight: lineHeights.normal,
-    fontWeight: fontWeights.regular
+    fontWeight: fontWeights.regular,
+    lineHeight: lineHeights.bodySmall
   },
   labelLarge: {
     fontFamily: fontFamilies.semibold,
     fontSize: fontSizes.md,
-    lineHeight: lineHeights.normal,
-    fontWeight: fontWeights.semibold
+    fontWeight: fontWeights.semibold,
+    lineHeight: lineHeights.labelLarge
   },
   labelMedium: {
     fontFamily: fontFamilies.semibold,
     fontSize: fontSizes.sm,
-    lineHeight: lineHeights.normal,
-    fontWeight: fontWeights.semibold
+    fontWeight: fontWeights.semibold,
+    lineHeight: lineHeights.labelMedium
   },
   labelSmall: {
     fontFamily: fontFamilies.regular,
     fontSize: fontSizes.xs,
-    lineHeight: lineHeights.normal,
-    fontWeight: fontWeights.regular
+    fontWeight: fontWeights.regular,
+    lineHeight: lineHeights.labelSmall
   },
   buttonLarge: {
     fontFamily: fontFamilies.semibold,
     fontSize: fontSizes.md,
-    lineHeight: lineHeights.normal,
-    fontWeight: fontWeights.semibold
+    fontWeight: fontWeights.semibold,
+    lineHeight: lineHeights.buttonLarge
   },
   buttonMedium: {
     fontFamily: fontFamilies.semibold,
     fontSize: fontSizes.sm,
-    lineHeight: lineHeights.normal,
-    fontWeight: fontWeights.semibold
+    fontWeight: fontWeights.semibold,
+    lineHeight: lineHeights.buttonMedium
   },
   caption: {
     fontFamily: fontFamilies.regular,
     fontSize: fontSizes.caption,
-    lineHeight: lineHeights.caption,
-    fontWeight: fontWeights.regular
+    fontWeight: fontWeights.regular,
+    lineHeight: lineHeights.caption
   }
 };
 var spacing = {
@@ -1202,16 +1209,24 @@ import { jsx as jsx70 } from "react/jsx-runtime";
 var Icon = ({ name, size, color, testID = "icon", ...rest }) => {
   const theme = useTheme();
   const Cmp = ICONS[name];
-  const extra = {};
+  const { fill: fillProp, stroke: strokeProp, ...svgRest } = rest;
+  const iconColor = color || strokeProp || theme.colors.text.primary || "#000000";
+  const dimensions = {};
   if (size != null) {
-    extra.width = size;
-    extra.height = size;
+    dimensions.height = size;
+    dimensions.width = size;
   }
-  const iconColor = color || theme.colors.text.primary || "#000000";
-  extra.color = iconColor;
-  extra.fill = iconColor;
-  extra.stroke = iconColor;
-  return /* @__PURE__ */ jsx70(Cmp, { ...extra, testID, ...rest });
+  return /* @__PURE__ */ jsx70(
+    Cmp,
+    {
+      ...dimensions,
+      color: iconColor,
+      fill: fillProp ?? "none",
+      stroke: strokeProp ?? iconColor,
+      testID,
+      ...svgRest
+    }
+  );
 };
 
 // src/index.tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wecareu/icons",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "Sistema de ícones SVG para WeCareU Design System",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -9,6 +9,18 @@
     "dist",
     "src"
   ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./lottie": {
+      "types": "./dist/lottie.d.ts",
+      "import": "./dist/lottie.mjs",
+      "require": "./dist/lottie.js"
+    }
+  },
   "sideEffects": false,
   "scripts": {
     "icons:gen": "node scripts/build-icons.mjs",
@@ -32,6 +44,7 @@
     "@types/react": "^18.2.0",
     "@types/react-native": "^0.72.0",
     "lottie-react-native": "^7.3.4",
+    "lottie-web": "^5.12.2",
     "react": "^18.2.0",
     "react-native": "^0.72.0",
     "react-native-svg": "^14.1.0",

package/src/Icon.tsx

@@ -13,18 +13,26 @@ export const Icon: React.FC<Props> = ({ name, size, color, testID = 'icon', ...r
   const theme = useTheme();
   const Cmp = ICONS[name];
 
-  const extra: SvgProps = {};
+  const { fill: fillProp, stroke: strokeProp, ...svgRest } = rest;
+
+  const iconColor = color || strokeProp || theme.colors.text.primary || '#000000';
+  const dimensions: Pick<SvgProps, 'height' | 'width'> = {};
+
   if (size != null) {
-    extra.width = size;
-    extra.height = size;
+    dimensions.height = size;
+    dimensions.width = size;
   }
 
-  const iconColor = color || theme.colors.text.primary || '#000000';
-  extra.color = iconColor;
-  extra.fill = iconColor;
-  extra.stroke = iconColor;
-
-  return <Cmp {...extra} testID={testID} {...rest} />;
+  return (
+    <Cmp
+      {...dimensions}
+      color={iconColor}
+      fill={fillProp ?? 'none'}
+      stroke={strokeProp ?? iconColor}
+      testID={testID}
+      {...svgRest}
+    />
+  );
 };
 
 export type { IconName };

package/src/LottieView.web.tsx

@@ -0,0 +1,69 @@
+import lottie, { AnimationItem } from 'lottie-web';
+import React, { useEffect, useRef } from 'react';
+import type { ViewStyle } from 'react-native';
+import { View } from 'react-native';
+
+import { LOTTIE_ANIMATIONS, type LottieAnimationName } from './lottie-map';
+
+interface LottieProps {
+  autoPlay?: boolean;
+  colorFilters?: { keypath: string; color: string }[];
+  loop?: boolean;
+  name: LottieAnimationName;
+  size?: number;
+  speed?: number;
+  style?: ViewStyle;
+  testID?: string;
+}
+
+export function Lottie({
+  name,
+  size,
+  style,
+  autoPlay = true,
+  loop = true,
+  speed = 1,
+  testID
+}: LottieProps): JSX.Element {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const animationRef = useRef<AnimationItem | null>(null);
+  const source = LOTTIE_ANIMATIONS[name];
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    animationRef.current = lottie.loadAnimation({
+      animationData: source,
+      autoplay: autoPlay,
+      container: containerRef.current,
+      loop,
+      renderer: 'svg'
+    });
+
+    if (speed !== 1) {
+      animationRef.current.setSpeed(speed);
+    }
+
+    return () => {
+      animationRef.current?.destroy();
+    };
+  }, [source, autoPlay, loop, speed]);
+
+  const sizeStyle = size != null ? { height: size, width: size } : {};
+
+  return (
+    <View style={[sizeStyle, style]} testID={testID}>
+      <div
+        ref={containerRef}
+        style={{
+          height: '100%',
+          width: '100%'
+        }}
+      />
+    </View>
+  );
+}
+
+export type { LottieAnimationName };
+export { LOTTIE_ANIMATIONS };
+