@wecareu/icons 1.0.2 → 1.0.3

package/dist/index.js

@@ -37,6 +37,632 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
+// ../theme/lib/module/index.js
+var React = __toESM(require("react"));
+
+// ../tokens/lib/module/index.js
+var themeColors = {
+  dark: {
+    accent: {
+      hover: "#5e318e",
+      pressed: "#3c1c6e",
+      primary: "#4d267e"
+    },
+    background: {
+      card: "#231639",
+      elevated: "#181829",
+      primary: "#0b0c13",
+      quaternary: "#100e1c",
+      secondary: "#1e1d34",
+      tertiary: "#13141b"
+    },
+    border: {
+      disabled: "#333445",
+      light: "#292a39",
+      secondary: "#292a39"
+    },
+    interactive: {
+      primary: "#803ed0",
+      primaryDisabled: "#333445",
+      primaryHover: "#9148e0",
+      primaryPressed: "#6f34b8",
+      secondary: "#494681",
+      secondaryHover: "#5a5691",
+      secondaryPressed: "#3a3669"
+    },
+    rating: {
+      primary: "#FFB000"
+    },
+    status: {
+      available: "#4d267e",
+      busy: "#FFB74D",
+      offline: "#6f6c70",
+      online: "#81C784"
+    },
+    surface: {
+      card: "#231639",
+      cardSecondary: "#1e1d34",
+      disabled: "#100e1c",
+      elevated: "#231639",
+      header: "#13141b",
+      input: "#1e1d34",
+      modal: "#181829",
+      primary: "#1e1d34",
+      secondary: "#13141b",
+      tabBar: "#100e1c",
+      tertiary: "#181829"
+    },
+    text: {
+      badge: "#0b0c13",
+      disabled: "#6f6c70",
+      placeholder: "#9b989c",
+      primary: "#e8e5e9",
+      secondary: "#c8c5c9",
+      tertiary: "#9b989c"
+    }
+  },
+  light: {
+    accent: {
+      hover: "#9670c7",
+      pressed: "#835fa5",
+      primary: "#a981d9"
+    },
+    background: {
+      card: "#d4c7ea",
+      elevated: "#cccbe2",
+      primary: "#ecedf4",
+      quaternary: "#d7d7e8",
+      secondary: "#e4e5ec",
+      tertiary: "#e6e3f2"
+    },
+    border: {
+      disabled: "#e4e5ec",
+      light: "#e6e3f2",
+      secondary: "#d7d7e8"
+    },
+    interactive: {
+      primary: "#712fc1",
+      primaryDisabled: "#b8b5bb",
+      primaryHover: "#5f2399",
+      primaryPressed: "#4d1a7a",
+      secondary: "#817eb9",
+      secondaryHover: "#6f6b9a",
+      secondaryPressed: "#5d597b"
+    },
+    rating: {
+      primary: "#FFD700"
+    },
+    status: {
+      available: "#a981d9",
+      busy: "#FF9800",
+      offline: "#adadb0",
+      online: "#4CAF50"
+    },
+    surface: {
+      card: "#d4c7ea",
+      cardSecondary: "#e6e3f2",
+      disabled: "#e4e5ec",
+      header: "#e4e5ec",
+      input: "#e6e3f2",
+      modal: "#cccbe2",
+      secondary: "#e6e3f2",
+      tabBar: "#d7d7e8",
+      tertiary: "#d7d7e8"
+    },
+    text: {
+      badge: "#ecedf4",
+      disabled: "#adadb0",
+      placeholder: "#8b888c",
+      primary: "#2a282b",
+      secondary: "#4b484c",
+      tertiary: "#6b686c"
+    }
+  }
+};
+var neutralColors = {
+  black: "#000000",
+  gray50: "#FAFAFA",
+  gray100: "#F5F4F5",
+  gray200: "#EDEAEE",
+  gray300: "#E0DCE1",
+  gray400: "#D0CDD1",
+  gray500: "#B6B3B7",
+  gray600: "#9B989C",
+  gray700: "#6F6C70",
+  gray800: "#4B484C",
+  gray900: "#2A282B",
+  transparent: "transparent",
+  white: "#FFFFFF"
+};
+var semanticColors = {
+  dark: {
+    error: "#EF5350",
+    info: "#64B5F6",
+    success: "#81C784",
+    warning: "#FFB74D"
+  },
+  light: {
+    error: "#F44336",
+    info: "#2196F3",
+    success: "#4CAF50",
+    warning: "#FF9800"
+  }
+};
+var gradientColors = {
+  dark: {
+    primary: [themeColors.dark.interactive.primary, themeColors.dark.accent.primary],
+    secondary: [themeColors.dark.interactive.secondary, themeColors.dark.interactive.primary],
+    button: ["#BC4CF7", "#7873EE"],
+    buttonDisabled: ["#BC4CF760", "#7873EE60"]
+  },
+  light: {
+    primary: [themeColors.light.interactive.primary, themeColors.light.accent.primary],
+    secondary: [themeColors.light.interactive.secondary, themeColors.light.interactive.primary],
+    button: ["#BC4CF7", "#7873EE"],
+    buttonDisabled: ["#BC4CF760", "#7873EE60"]
+  }
+};
+var alphaColors = {
+  dark: {
+    border: "rgba(182, 179, 183, 0.3)",
+    overlay: "rgba(0, 0, 0, 0.7)",
+    surface: "rgba(182, 179, 183, 0.1)"
+  },
+  light: {
+    border: "rgba(75, 72, 76, 0.2)",
+    overlay: "rgba(0, 0, 0, 0.5)",
+    surface: "rgba(255, 255, 255, 0.8)"
+  }
+};
+var shadowColors = {
+  dark: {
+    button: "rgba(128, 62, 208, 0.3)",
+    card: "rgba(0, 0, 0, 0.3)",
+    primary: themeColors.dark.interactive.primary,
+    primaryFull: `0 20px 80px -10px ${themeColors.dark.interactive.primary}`,
+    secondary: "rgba(0, 0, 0, 0.5)"
+  },
+  light: {
+    button: "rgba(113, 47, 193, 0.25)",
+    card: "rgba(75, 72, 76, 0.03)",
+    primary: themeColors.light.interactive.primary,
+    primaryFull: `0 20px 80px -10px ${themeColors.light.interactive.primary}`,
+    secondary: "rgba(75, 72, 76, 0.06)"
+  }
+};
+var shadowStyles = {
+  dark: {
+    card: {
+      elevation: 1,
+      shadowColor: shadowColors.dark.card,
+      shadowOffset: {
+        height: 1,
+        width: 0
+      },
+      shadowOpacity: 1,
+      shadowRadius: 3
+    },
+    primary: {
+      elevation: 20,
+      shadowColor: shadowColors.dark.primary,
+      shadowOffset: {
+        height: 20,
+        width: 0
+      },
+      shadowOpacity: 1,
+      shadowRadius: 35
+    },
+    secondary: {
+      elevation: 2,
+      shadowColor: shadowColors.dark.secondary,
+      shadowOffset: {
+        height: 2,
+        width: 0
+      },
+      shadowOpacity: 1,
+      shadowRadius: 4
+    }
+  },
+  light: {
+    card: {
+      elevation: 1,
+      shadowColor: shadowColors.light.card,
+      shadowOffset: {
+        height: 1,
+        width: 0
+      },
+      shadowOpacity: 1,
+      shadowRadius: 3
+    },
+    primary: {
+      elevation: 20,
+      shadowColor: shadowColors.light.primary,
+      shadowOffset: {
+        height: 20,
+        width: 0
+      },
+      shadowOpacity: 1,
+      shadowRadius: 35
+    },
+    secondary: {
+      elevation: 2,
+      shadowColor: shadowColors.light.secondary,
+      shadowOffset: {
+        height: 2,
+        width: 0
+      },
+      shadowOpacity: 1,
+      shadowRadius: 4
+    }
+  }
+};
+var fontFamilies = {
+  regular: "Livvic",
+  semibold: "LivvicSemiBold",
+  bold: "LivvicBold",
+  heading: "LivvicBold",
+  body: "Livvic",
+  caption: "Livvic",
+  button: "LivvicSemiBold"
+};
+var fontSizes = {
+  xs: 12,
+  sm: 14,
+  md: 16,
+  lg: 18,
+  xl: 20,
+  xxl: 24,
+  huge: 32,
+  caption: 12,
+  body: 16,
+  subtitle: 18,
+  title: 20,
+  heading: 24,
+  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
+};
+var fontWeights = {
+  regular: "400",
+  medium: "500",
+  semibold: "600",
+  bold: "700"
+};
+var textStyles = {
+  displayLarge: {
+    fontFamily: fontFamilies.bold,
+    fontSize: fontSizes.huge,
+    lineHeight: lineHeights.tight,
+    fontWeight: fontWeights.bold
+  },
+  displayMedium: {
+    fontFamily: fontFamilies.bold,
+    fontSize: fontSizes.heading,
+    lineHeight: lineHeights.tight,
+    fontWeight: fontWeights.bold
+  },
+  headingLarge: {
+    fontFamily: fontFamilies.bold,
+    fontSize: fontSizes.title,
+    lineHeight: lineHeights.normal,
+    fontWeight: fontWeights.bold
+  },
+  headingMedium: {
+    fontFamily: fontFamilies.semibold,
+    fontSize: fontSizes.subtitle,
+    lineHeight: lineHeights.normal,
+    fontWeight: fontWeights.semibold
+  },
+  headingSmall: {
+    fontFamily: fontFamilies.semibold,
+    fontSize: fontSizes.md,
+    lineHeight: lineHeights.normal,
+    fontWeight: fontWeights.semibold
+  },
+  bodyLarge: {
+    fontFamily: fontFamilies.regular,
+    fontSize: fontSizes.lg,
+    lineHeight: lineHeights.relaxed,
+    fontWeight: fontWeights.regular
+  },
+  bodyMedium: {
+    fontFamily: fontFamilies.regular,
+    fontSize: fontSizes.body,
+    lineHeight: lineHeights.normal,
+    fontWeight: fontWeights.regular
+  },
+  bodySmall: {
+    fontFamily: fontFamilies.regular,
+    fontSize: fontSizes.sm,
+    lineHeight: lineHeights.normal,
+    fontWeight: fontWeights.regular
+  },
+  labelLarge: {
+    fontFamily: fontFamilies.semibold,
+    fontSize: fontSizes.md,
+    lineHeight: lineHeights.normal,
+    fontWeight: fontWeights.semibold
+  },
+  labelMedium: {
+    fontFamily: fontFamilies.semibold,
+    fontSize: fontSizes.sm,
+    lineHeight: lineHeights.normal,
+    fontWeight: fontWeights.semibold
+  },
+  labelSmall: {
+    fontFamily: fontFamilies.regular,
+    fontSize: fontSizes.xs,
+    lineHeight: lineHeights.normal,
+    fontWeight: fontWeights.regular
+  },
+  buttonLarge: {
+    fontFamily: fontFamilies.semibold,
+    fontSize: fontSizes.md,
+    lineHeight: lineHeights.normal,
+    fontWeight: fontWeights.semibold
+  },
+  buttonMedium: {
+    fontFamily: fontFamilies.semibold,
+    fontSize: fontSizes.sm,
+    lineHeight: lineHeights.normal,
+    fontWeight: fontWeights.semibold
+  },
+  caption: {
+    fontFamily: fontFamilies.regular,
+    fontSize: fontSizes.caption,
+    lineHeight: lineHeights.caption,
+    fontWeight: fontWeights.regular
+  }
+};
+var spacing = {
+  xs: 4,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 24,
+  xxl: 32,
+  xxxl: 48,
+  headerHeight: 56,
+  tabBarHeight: 80
+};
+var radius = {
+  xs: 4,
+  sm: 6,
+  md: 8,
+  lg: 12,
+  xl: 16,
+  xxl: 24,
+  round: 9999
+};
+var tokens = {
+  dark: {
+    colors: {
+      background: themeColors.dark.background.primary,
+      error: semanticColors.dark.error,
+      onBackground: themeColors.dark.text.primary,
+      onError: neutralColors.white,
+      onPrimary: neutralColors.white,
+      onSecondary: neutralColors.black,
+      onSurface: themeColors.dark.text.primary,
+      primary: themeColors.dark.interactive.primary,
+      primaryVariant: themeColors.dark.accent.primary,
+      secondary: themeColors.dark.interactive.secondary,
+      surface: themeColors.dark.surface.primary
+    }
+  },
+  light: {
+    colors: {
+      background: themeColors.light.background.primary,
+      error: semanticColors.light.error,
+      onBackground: themeColors.light.text.primary,
+      onError: neutralColors.white,
+      onPrimary: neutralColors.white,
+      onSecondary: neutralColors.white,
+      onSurface: themeColors.light.text.primary,
+      primary: themeColors.light.interactive.primary,
+      primaryVariant: themeColors.light.accent.primary,
+      secondary: themeColors.light.interactive.secondary,
+      surface: themeColors.light.surface.card
+    }
+  },
+  radius,
+  spacing,
+  typography: {
+    fontSize: fontSizes,
+    fontWeightBold: fontWeights.bold,
+    fontWeightMedium: fontWeights.medium,
+    fontWeightRegular: fontWeights.regular,
+    fontWeightSemibold: fontWeights.semibold
+  }
+};
+
+// ../theme/lib/module/index.js
+var createTheme = (scheme) => {
+  const colorTokens = scheme === "dark" ? themeColors.dark : themeColors.light;
+  const semanticTokens = scheme === "dark" ? semanticColors.dark : semanticColors.light;
+  const alphaTokens = scheme === "dark" ? alphaColors.dark : alphaColors.light;
+  const gradientTokens = scheme === "dark" ? gradientColors.dark : gradientColors.light;
+  const shadowColorTokens = scheme === "dark" ? shadowColors.dark : shadowColors.light;
+  const shadowStyleTokens = scheme === "dark" ? shadowStyles.dark : shadowStyles.light;
+  return {
+    scheme,
+    colors: {
+      background: {
+        card: colorTokens.background.card,
+        elevated: colorTokens.background.elevated,
+        modal: colorTokens.surface.modal,
+        overlay: alphaTokens.overlay,
+        primary: colorTokens.background.primary,
+        quaternary: colorTokens.background.quaternary,
+        secondary: colorTokens.background.secondary,
+        tertiary: colorTokens.background.tertiary
+      },
+      surface: {
+        card: colorTokens.surface.card,
+        cardSecondary: colorTokens.surface.cardSecondary,
+        disabled: colorTokens.surface.disabled,
+        elevated: colorTokens.background.elevated,
+        header: colorTokens.surface.header,
+        input: colorTokens.surface.input,
+        modal: colorTokens.surface.modal,
+        primary: colorTokens.surface.card,
+        secondary: colorTokens.surface.secondary,
+        tabBar: colorTokens.surface.tabBar,
+        tertiary: colorTokens.surface.tertiary
+      },
+      text: {
+        badge: colorTokens.text.badge,
+        black: neutralColors.black,
+        disabled: colorTokens.text.disabled,
+        inverse: scheme === "dark" ? neutralColors.black : neutralColors.white,
+        link: colorTokens.interactive.primary,
+        placeholder: colorTokens.text.placeholder,
+        primary: colorTokens.text.primary,
+        secondary: colorTokens.text.secondary,
+        tertiary: colorTokens.text.tertiary,
+        white: neutralColors.white
+      },
+      brand: {
+        accent: colorTokens.accent.primary,
+        primary: colorTokens.interactive.primary,
+        secondary: colorTokens.interactive.secondary
+      },
+      interactive: {
+        accent: colorTokens.accent.primary,
+        accentHover: colorTokens.accent.hover,
+        accentPressed: colorTokens.accent.pressed,
+        primary: colorTokens.interactive.primary,
+        primaryDisabled: colorTokens.interactive.primaryDisabled,
+        primaryHover: colorTokens.interactive.primaryHover,
+        primaryPressed: colorTokens.interactive.primaryPressed,
+        secondary: colorTokens.interactive.secondary,
+        secondaryHover: colorTokens.interactive.secondaryHover,
+        secondaryPressed: colorTokens.interactive.secondaryPressed
+      },
+      status: {
+        available: colorTokens.status.available,
+        busy: colorTokens.status.busy,
+        error: semanticTokens.error,
+        info: semanticTokens.info,
+        offline: colorTokens.status.offline,
+        online: colorTokens.status.online,
+        success: semanticTokens.success,
+        warning: semanticTokens.warning
+      },
+      rating: {
+        primary: colorTokens.rating.primary
+      },
+      border: {
+        disabled: colorTokens.border.disabled,
+        error: semanticTokens.error,
+        focus: colorTokens.interactive.primary,
+        ...scheme === "light" && {
+          light: colorTokens.border.light
+        },
+        primary: alphaTokens.border,
+        secondary: colorTokens.border.secondary
+      },
+      shadow: {
+        card: shadowColorTokens.card,
+        primary: shadowColorTokens.primary,
+        primaryFull: shadowColorTokens.primaryFull,
+        secondary: shadowColorTokens.secondary
+      },
+      shadowStyles: {
+        card: shadowStyleTokens.card,
+        primary: shadowStyleTokens.primary,
+        secondary: shadowStyleTokens.secondary
+      },
+      gradient: {
+        primary: gradientTokens.primary,
+        secondary: gradientTokens.secondary,
+        button: gradientTokens.button,
+        buttonDisabled: gradientTokens.buttonDisabled
+      },
+      alpha: {
+        border: alphaTokens.border,
+        overlay: alphaTokens.overlay,
+        surface: alphaTokens.surface
+      }
+    },
+    spacing,
+    typography: {
+      fontFamily: fontFamilies,
+      fontSize: fontSizes,
+      fontWeight: fontWeights,
+      lineHeight: lineHeights,
+      textStyles
+    },
+    radius,
+    components: {
+      button: {
+        borderRadius: radius.md,
+        paddingHorizontal: spacing.lg,
+        paddingVertical: spacing.sm,
+        ...shadowStyleTokens.primary
+      },
+      input: {
+        backgroundColor: colorTokens.surface.input,
+        borderColor: colorTokens.surface.input,
+        borderRadius: radius.md,
+        borderWidth: 1,
+        paddingHorizontal: spacing.md,
+        paddingVertical: spacing.sm
+      },
+      card: {
+        backgroundColor: colorTokens.surface.card,
+        borderRadius: radius.lg,
+        padding: spacing.md,
+        ...shadowStyleTokens.card
+      },
+      cardSecondary: {
+        backgroundColor: colorTokens.surface.cardSecondary,
+        borderRadius: radius.lg,
+        padding: spacing.md,
+        ...shadowStyleTokens.card
+      },
+      modal: {
+        backgroundColor: colorTokens.surface.modal,
+        borderRadius: radius.xl,
+        overlayColor: alphaTokens.overlay
+      },
+      header: {
+        backgroundColor: colorTokens.surface.header,
+        borderBottomColor: scheme === "light" ? colorTokens.border.light : colorTokens.border.secondary
+      },
+      tabBar: {
+        backgroundColor: colorTokens.surface.tabBar,
+        borderTopColor: scheme === "light" ? colorTokens.border.light : colorTokens.border.secondary
+      }
+    },
+    layout: {
+      headerHeight: spacing.headerHeight,
+      tabBarHeight: spacing.tabBarHeight,
+      safeAreaPadding: spacing.md,
+      screenPadding: spacing.lg
+    },
+    setScheme: () => {
+    },
+    toggleScheme: () => {
+    }
+  };
+};
+var ThemeContext = /* @__PURE__ */ React.createContext(createTheme("light"));
+function useTheme() {
+  const context = React.useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme deve ser usado dentro de um ThemeProvider");
+  }
+  return context;
+}
+
 // src/generated/ArrowDown.tsx
 var import_react_native_svg = __toESM(require("react-native-svg"));
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -607,18 +1233,18 @@ var ICONS = {
 
 // src/Icon.tsx
 var import_jsx_runtime70 = require("react/jsx-runtime");
-var Icon = ({ name, size, color, ...rest }) => {
+var Icon = ({ name, size, color, testID = "icon", ...rest }) => {
+  const theme = useTheme();
   const Cmp = ICONS[name];
   const extra = {};
   if (size != null) {
     extra.width = size;
     extra.height = size;
   }
-  if (color) {
-    extra.fill = color;
-    extra.color = color;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Cmp, { ...extra, ...rest });
+  const iconColor = color || theme.colors.text.primary || "#000000";
+  extra.fill = iconColor;
+  extra.color = iconColor;
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Cmp, { ...extra, testID, ...rest });
 };
 
 // src/index.tsx

package/dist/index.mjs

@@ -1,3 +1,629 @@
+// ../theme/lib/module/index.js
+import * as React from "react";
+
+// ../tokens/lib/module/index.js
+var themeColors = {
+  dark: {
+    accent: {
+      hover: "#5e318e",
+      pressed: "#3c1c6e",
+      primary: "#4d267e"
+    },
+    background: {
+      card: "#231639",
+      elevated: "#181829",
+      primary: "#0b0c13",
+      quaternary: "#100e1c",
+      secondary: "#1e1d34",
+      tertiary: "#13141b"
+    },
+    border: {
+      disabled: "#333445",
+      light: "#292a39",
+      secondary: "#292a39"
+    },
+    interactive: {
+      primary: "#803ed0",
+      primaryDisabled: "#333445",
+      primaryHover: "#9148e0",
+      primaryPressed: "#6f34b8",
+      secondary: "#494681",
+      secondaryHover: "#5a5691",
+      secondaryPressed: "#3a3669"
+    },
+    rating: {
+      primary: "#FFB000"
+    },
+    status: {
+      available: "#4d267e",
+      busy: "#FFB74D",
+      offline: "#6f6c70",
+      online: "#81C784"
+    },
+    surface: {
+      card: "#231639",
+      cardSecondary: "#1e1d34",
+      disabled: "#100e1c",
+      elevated: "#231639",
+      header: "#13141b",
+      input: "#1e1d34",
+      modal: "#181829",
+      primary: "#1e1d34",
+      secondary: "#13141b",
+      tabBar: "#100e1c",
+      tertiary: "#181829"
+    },
+    text: {
+      badge: "#0b0c13",
+      disabled: "#6f6c70",
+      placeholder: "#9b989c",
+      primary: "#e8e5e9",
+      secondary: "#c8c5c9",
+      tertiary: "#9b989c"
+    }
+  },
+  light: {
+    accent: {
+      hover: "#9670c7",
+      pressed: "#835fa5",
+      primary: "#a981d9"
+    },
+    background: {
+      card: "#d4c7ea",
+      elevated: "#cccbe2",
+      primary: "#ecedf4",
+      quaternary: "#d7d7e8",
+      secondary: "#e4e5ec",
+      tertiary: "#e6e3f2"
+    },
+    border: {
+      disabled: "#e4e5ec",
+      light: "#e6e3f2",
+      secondary: "#d7d7e8"
+    },
+    interactive: {
+      primary: "#712fc1",
+      primaryDisabled: "#b8b5bb",
+      primaryHover: "#5f2399",
+      primaryPressed: "#4d1a7a",
+      secondary: "#817eb9",
+      secondaryHover: "#6f6b9a",
+      secondaryPressed: "#5d597b"
+    },
+    rating: {
+      primary: "#FFD700"
+    },
+    status: {
+      available: "#a981d9",
+      busy: "#FF9800",
+      offline: "#adadb0",
+      online: "#4CAF50"
+    },
+    surface: {
+      card: "#d4c7ea",
+      cardSecondary: "#e6e3f2",
+      disabled: "#e4e5ec",
+      header: "#e4e5ec",
+      input: "#e6e3f2",
+      modal: "#cccbe2",
+      secondary: "#e6e3f2",
+      tabBar: "#d7d7e8",
+      tertiary: "#d7d7e8"
+    },
+    text: {
+      badge: "#ecedf4",
+      disabled: "#adadb0",
+      placeholder: "#8b888c",
+      primary: "#2a282b",
+      secondary: "#4b484c",
+      tertiary: "#6b686c"
+    }
+  }
+};
+var neutralColors = {
+  black: "#000000",
+  gray50: "#FAFAFA",
+  gray100: "#F5F4F5",
+  gray200: "#EDEAEE",
+  gray300: "#E0DCE1",
+  gray400: "#D0CDD1",
+  gray500: "#B6B3B7",
+  gray600: "#9B989C",
+  gray700: "#6F6C70",
+  gray800: "#4B484C",
+  gray900: "#2A282B",
+  transparent: "transparent",
+  white: "#FFFFFF"
+};
+var semanticColors = {
+  dark: {
+    error: "#EF5350",
+    info: "#64B5F6",
+    success: "#81C784",
+    warning: "#FFB74D"
+  },
+  light: {
+    error: "#F44336",
+    info: "#2196F3",
+    success: "#4CAF50",
+    warning: "#FF9800"
+  }
+};
+var gradientColors = {
+  dark: {
+    primary: [themeColors.dark.interactive.primary, themeColors.dark.accent.primary],
+    secondary: [themeColors.dark.interactive.secondary, themeColors.dark.interactive.primary],
+    button: ["#BC4CF7", "#7873EE"],
+    buttonDisabled: ["#BC4CF760", "#7873EE60"]
+  },
+  light: {
+    primary: [themeColors.light.interactive.primary, themeColors.light.accent.primary],
+    secondary: [themeColors.light.interactive.secondary, themeColors.light.interactive.primary],
+    button: ["#BC4CF7", "#7873EE"],
+    buttonDisabled: ["#BC4CF760", "#7873EE60"]
+  }
+};
+var alphaColors = {
+  dark: {
+    border: "rgba(182, 179, 183, 0.3)",
+    overlay: "rgba(0, 0, 0, 0.7)",
+    surface: "rgba(182, 179, 183, 0.1)"
+  },
+  light: {
+    border: "rgba(75, 72, 76, 0.2)",
+    overlay: "rgba(0, 0, 0, 0.5)",
+    surface: "rgba(255, 255, 255, 0.8)"
+  }
+};
+var shadowColors = {
+  dark: {
+    button: "rgba(128, 62, 208, 0.3)",
+    card: "rgba(0, 0, 0, 0.3)",
+    primary: themeColors.dark.interactive.primary,
+    primaryFull: `0 20px 80px -10px ${themeColors.dark.interactive.primary}`,
+    secondary: "rgba(0, 0, 0, 0.5)"
+  },
+  light: {
+    button: "rgba(113, 47, 193, 0.25)",
+    card: "rgba(75, 72, 76, 0.03)",
+    primary: themeColors.light.interactive.primary,
+    primaryFull: `0 20px 80px -10px ${themeColors.light.interactive.primary}`,
+    secondary: "rgba(75, 72, 76, 0.06)"
+  }
+};
+var shadowStyles = {
+  dark: {
+    card: {
+      elevation: 1,
+      shadowColor: shadowColors.dark.card,
+      shadowOffset: {
+        height: 1,
+        width: 0
+      },
+      shadowOpacity: 1,
+      shadowRadius: 3
+    },
+    primary: {
+      elevation: 20,
+      shadowColor: shadowColors.dark.primary,
+      shadowOffset: {
+        height: 20,
+        width: 0
+      },
+      shadowOpacity: 1,
+      shadowRadius: 35
+    },
+    secondary: {
+      elevation: 2,
+      shadowColor: shadowColors.dark.secondary,
+      shadowOffset: {
+        height: 2,
+        width: 0
+      },
+      shadowOpacity: 1,
+      shadowRadius: 4
+    }
+  },
+  light: {
+    card: {
+      elevation: 1,
+      shadowColor: shadowColors.light.card,
+      shadowOffset: {
+        height: 1,
+        width: 0
+      },
+      shadowOpacity: 1,
+      shadowRadius: 3
+    },
+    primary: {
+      elevation: 20,
+      shadowColor: shadowColors.light.primary,
+      shadowOffset: {
+        height: 20,
+        width: 0
+      },
+      shadowOpacity: 1,
+      shadowRadius: 35
+    },
+    secondary: {
+      elevation: 2,
+      shadowColor: shadowColors.light.secondary,
+      shadowOffset: {
+        height: 2,
+        width: 0
+      },
+      shadowOpacity: 1,
+      shadowRadius: 4
+    }
+  }
+};
+var fontFamilies = {
+  regular: "Livvic",
+  semibold: "LivvicSemiBold",
+  bold: "LivvicBold",
+  heading: "LivvicBold",
+  body: "Livvic",
+  caption: "Livvic",
+  button: "LivvicSemiBold"
+};
+var fontSizes = {
+  xs: 12,
+  sm: 14,
+  md: 16,
+  lg: 18,
+  xl: 20,
+  xxl: 24,
+  huge: 32,
+  caption: 12,
+  body: 16,
+  subtitle: 18,
+  title: 20,
+  heading: 24,
+  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
+};
+var fontWeights = {
+  regular: "400",
+  medium: "500",
+  semibold: "600",
+  bold: "700"
+};
+var textStyles = {
+  displayLarge: {
+    fontFamily: fontFamilies.bold,
+    fontSize: fontSizes.huge,
+    lineHeight: lineHeights.tight,
+    fontWeight: fontWeights.bold
+  },
+  displayMedium: {
+    fontFamily: fontFamilies.bold,
+    fontSize: fontSizes.heading,
+    lineHeight: lineHeights.tight,
+    fontWeight: fontWeights.bold
+  },
+  headingLarge: {
+    fontFamily: fontFamilies.bold,
+    fontSize: fontSizes.title,
+    lineHeight: lineHeights.normal,
+    fontWeight: fontWeights.bold
+  },
+  headingMedium: {
+    fontFamily: fontFamilies.semibold,
+    fontSize: fontSizes.subtitle,
+    lineHeight: lineHeights.normal,
+    fontWeight: fontWeights.semibold
+  },
+  headingSmall: {
+    fontFamily: fontFamilies.semibold,
+    fontSize: fontSizes.md,
+    lineHeight: lineHeights.normal,
+    fontWeight: fontWeights.semibold
+  },
+  bodyLarge: {
+    fontFamily: fontFamilies.regular,
+    fontSize: fontSizes.lg,
+    lineHeight: lineHeights.relaxed,
+    fontWeight: fontWeights.regular
+  },
+  bodyMedium: {
+    fontFamily: fontFamilies.regular,
+    fontSize: fontSizes.body,
+    lineHeight: lineHeights.normal,
+    fontWeight: fontWeights.regular
+  },
+  bodySmall: {
+    fontFamily: fontFamilies.regular,
+    fontSize: fontSizes.sm,
+    lineHeight: lineHeights.normal,
+    fontWeight: fontWeights.regular
+  },
+  labelLarge: {
+    fontFamily: fontFamilies.semibold,
+    fontSize: fontSizes.md,
+    lineHeight: lineHeights.normal,
+    fontWeight: fontWeights.semibold
+  },
+  labelMedium: {
+    fontFamily: fontFamilies.semibold,
+    fontSize: fontSizes.sm,
+    lineHeight: lineHeights.normal,
+    fontWeight: fontWeights.semibold
+  },
+  labelSmall: {
+    fontFamily: fontFamilies.regular,
+    fontSize: fontSizes.xs,
+    lineHeight: lineHeights.normal,
+    fontWeight: fontWeights.regular
+  },
+  buttonLarge: {
+    fontFamily: fontFamilies.semibold,
+    fontSize: fontSizes.md,
+    lineHeight: lineHeights.normal,
+    fontWeight: fontWeights.semibold
+  },
+  buttonMedium: {
+    fontFamily: fontFamilies.semibold,
+    fontSize: fontSizes.sm,
+    lineHeight: lineHeights.normal,
+    fontWeight: fontWeights.semibold
+  },
+  caption: {
+    fontFamily: fontFamilies.regular,
+    fontSize: fontSizes.caption,
+    lineHeight: lineHeights.caption,
+    fontWeight: fontWeights.regular
+  }
+};
+var spacing = {
+  xs: 4,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 24,
+  xxl: 32,
+  xxxl: 48,
+  headerHeight: 56,
+  tabBarHeight: 80
+};
+var radius = {
+  xs: 4,
+  sm: 6,
+  md: 8,
+  lg: 12,
+  xl: 16,
+  xxl: 24,
+  round: 9999
+};
+var tokens = {
+  dark: {
+    colors: {
+      background: themeColors.dark.background.primary,
+      error: semanticColors.dark.error,
+      onBackground: themeColors.dark.text.primary,
+      onError: neutralColors.white,
+      onPrimary: neutralColors.white,
+      onSecondary: neutralColors.black,
+      onSurface: themeColors.dark.text.primary,
+      primary: themeColors.dark.interactive.primary,
+      primaryVariant: themeColors.dark.accent.primary,
+      secondary: themeColors.dark.interactive.secondary,
+      surface: themeColors.dark.surface.primary
+    }
+  },
+  light: {
+    colors: {
+      background: themeColors.light.background.primary,
+      error: semanticColors.light.error,
+      onBackground: themeColors.light.text.primary,
+      onError: neutralColors.white,
+      onPrimary: neutralColors.white,
+      onSecondary: neutralColors.white,
+      onSurface: themeColors.light.text.primary,
+      primary: themeColors.light.interactive.primary,
+      primaryVariant: themeColors.light.accent.primary,
+      secondary: themeColors.light.interactive.secondary,
+      surface: themeColors.light.surface.card
+    }
+  },
+  radius,
+  spacing,
+  typography: {
+    fontSize: fontSizes,
+    fontWeightBold: fontWeights.bold,
+    fontWeightMedium: fontWeights.medium,
+    fontWeightRegular: fontWeights.regular,
+    fontWeightSemibold: fontWeights.semibold
+  }
+};
+
+// ../theme/lib/module/index.js
+var createTheme = (scheme) => {
+  const colorTokens = scheme === "dark" ? themeColors.dark : themeColors.light;
+  const semanticTokens = scheme === "dark" ? semanticColors.dark : semanticColors.light;
+  const alphaTokens = scheme === "dark" ? alphaColors.dark : alphaColors.light;
+  const gradientTokens = scheme === "dark" ? gradientColors.dark : gradientColors.light;
+  const shadowColorTokens = scheme === "dark" ? shadowColors.dark : shadowColors.light;
+  const shadowStyleTokens = scheme === "dark" ? shadowStyles.dark : shadowStyles.light;
+  return {
+    scheme,
+    colors: {
+      background: {
+        card: colorTokens.background.card,
+        elevated: colorTokens.background.elevated,
+        modal: colorTokens.surface.modal,
+        overlay: alphaTokens.overlay,
+        primary: colorTokens.background.primary,
+        quaternary: colorTokens.background.quaternary,
+        secondary: colorTokens.background.secondary,
+        tertiary: colorTokens.background.tertiary
+      },
+      surface: {
+        card: colorTokens.surface.card,
+        cardSecondary: colorTokens.surface.cardSecondary,
+        disabled: colorTokens.surface.disabled,
+        elevated: colorTokens.background.elevated,
+        header: colorTokens.surface.header,
+        input: colorTokens.surface.input,
+        modal: colorTokens.surface.modal,
+        primary: colorTokens.surface.card,
+        secondary: colorTokens.surface.secondary,
+        tabBar: colorTokens.surface.tabBar,
+        tertiary: colorTokens.surface.tertiary
+      },
+      text: {
+        badge: colorTokens.text.badge,
+        black: neutralColors.black,
+        disabled: colorTokens.text.disabled,
+        inverse: scheme === "dark" ? neutralColors.black : neutralColors.white,
+        link: colorTokens.interactive.primary,
+        placeholder: colorTokens.text.placeholder,
+        primary: colorTokens.text.primary,
+        secondary: colorTokens.text.secondary,
+        tertiary: colorTokens.text.tertiary,
+        white: neutralColors.white
+      },
+      brand: {
+        accent: colorTokens.accent.primary,
+        primary: colorTokens.interactive.primary,
+        secondary: colorTokens.interactive.secondary
+      },
+      interactive: {
+        accent: colorTokens.accent.primary,
+        accentHover: colorTokens.accent.hover,
+        accentPressed: colorTokens.accent.pressed,
+        primary: colorTokens.interactive.primary,
+        primaryDisabled: colorTokens.interactive.primaryDisabled,
+        primaryHover: colorTokens.interactive.primaryHover,
+        primaryPressed: colorTokens.interactive.primaryPressed,
+        secondary: colorTokens.interactive.secondary,
+        secondaryHover: colorTokens.interactive.secondaryHover,
+        secondaryPressed: colorTokens.interactive.secondaryPressed
+      },
+      status: {
+        available: colorTokens.status.available,
+        busy: colorTokens.status.busy,
+        error: semanticTokens.error,
+        info: semanticTokens.info,
+        offline: colorTokens.status.offline,
+        online: colorTokens.status.online,
+        success: semanticTokens.success,
+        warning: semanticTokens.warning
+      },
+      rating: {
+        primary: colorTokens.rating.primary
+      },
+      border: {
+        disabled: colorTokens.border.disabled,
+        error: semanticTokens.error,
+        focus: colorTokens.interactive.primary,
+        ...scheme === "light" && {
+          light: colorTokens.border.light
+        },
+        primary: alphaTokens.border,
+        secondary: colorTokens.border.secondary
+      },
+      shadow: {
+        card: shadowColorTokens.card,
+        primary: shadowColorTokens.primary,
+        primaryFull: shadowColorTokens.primaryFull,
+        secondary: shadowColorTokens.secondary
+      },
+      shadowStyles: {
+        card: shadowStyleTokens.card,
+        primary: shadowStyleTokens.primary,
+        secondary: shadowStyleTokens.secondary
+      },
+      gradient: {
+        primary: gradientTokens.primary,
+        secondary: gradientTokens.secondary,
+        button: gradientTokens.button,
+        buttonDisabled: gradientTokens.buttonDisabled
+      },
+      alpha: {
+        border: alphaTokens.border,
+        overlay: alphaTokens.overlay,
+        surface: alphaTokens.surface
+      }
+    },
+    spacing,
+    typography: {
+      fontFamily: fontFamilies,
+      fontSize: fontSizes,
+      fontWeight: fontWeights,
+      lineHeight: lineHeights,
+      textStyles
+    },
+    radius,
+    components: {
+      button: {
+        borderRadius: radius.md,
+        paddingHorizontal: spacing.lg,
+        paddingVertical: spacing.sm,
+        ...shadowStyleTokens.primary
+      },
+      input: {
+        backgroundColor: colorTokens.surface.input,
+        borderColor: colorTokens.surface.input,
+        borderRadius: radius.md,
+        borderWidth: 1,
+        paddingHorizontal: spacing.md,
+        paddingVertical: spacing.sm
+      },
+      card: {
+        backgroundColor: colorTokens.surface.card,
+        borderRadius: radius.lg,
+        padding: spacing.md,
+        ...shadowStyleTokens.card
+      },
+      cardSecondary: {
+        backgroundColor: colorTokens.surface.cardSecondary,
+        borderRadius: radius.lg,
+        padding: spacing.md,
+        ...shadowStyleTokens.card
+      },
+      modal: {
+        backgroundColor: colorTokens.surface.modal,
+        borderRadius: radius.xl,
+        overlayColor: alphaTokens.overlay
+      },
+      header: {
+        backgroundColor: colorTokens.surface.header,
+        borderBottomColor: scheme === "light" ? colorTokens.border.light : colorTokens.border.secondary
+      },
+      tabBar: {
+        backgroundColor: colorTokens.surface.tabBar,
+        borderTopColor: scheme === "light" ? colorTokens.border.light : colorTokens.border.secondary
+      }
+    },
+    layout: {
+      headerHeight: spacing.headerHeight,
+      tabBarHeight: spacing.tabBarHeight,
+      safeAreaPadding: spacing.md,
+      screenPadding: spacing.lg
+    },
+    setScheme: () => {
+    },
+    toggleScheme: () => {
+    }
+  };
+};
+var ThemeContext = /* @__PURE__ */ React.createContext(createTheme("light"));
+function useTheme() {
+  const context = React.useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme deve ser usado dentro de um ThemeProvider");
+  }
+  return context;
+}
+
 // src/generated/ArrowDown.tsx
 import Svg, { Path } from "react-native-svg";
 import { jsx } from "react/jsx-runtime";
@@ -568,18 +1194,18 @@ var ICONS = {
 
 // src/Icon.tsx
 import { jsx as jsx70 } from "react/jsx-runtime";
-var Icon = ({ name, size, color, ...rest }) => {
+var Icon = ({ name, size, color, testID = "icon", ...rest }) => {
+  const theme = useTheme();
   const Cmp = ICONS[name];
   const extra = {};
   if (size != null) {
     extra.width = size;
     extra.height = size;
   }
-  if (color) {
-    extra.fill = color;
-    extra.color = color;
-  }
-  return /* @__PURE__ */ jsx70(Cmp, { ...extra, ...rest });
+  const iconColor = color || theme.colors.text.primary || "#000000";
+  extra.fill = iconColor;
+  extra.color = iconColor;
+  return /* @__PURE__ */ jsx70(Cmp, { ...extra, testID, ...rest });
 };
 
 // src/index.tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wecareu/icons",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Sistema de ícones SVG para WeCareU Design System",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/Icon.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { SvgProps } from 'react-native-svg';
+import { useTheme } from '@wecareu/theme';
 import { ICONS, type IconName } from './icons-map';
 
 type Props = SvgProps & {
@@ -8,7 +9,8 @@ type Props = SvgProps & {
   color?: string;
 };
 
-export const Icon: React.FC<Props> = ({ name, size, color, ...rest }) => {
+export const Icon: React.FC<Props> = ({ name, size, color, testID = 'icon', ...rest }) => {
+  const theme = useTheme();
   const Cmp = ICONS[name];
 
   const extra: SvgProps = {};
@@ -16,12 +18,12 @@ export const Icon: React.FC<Props> = ({ name, size, color, ...rest }) => {
     extra.width = size;
     extra.height = size;
   }
-  if (color) {
-    extra.fill = color;
-    extra.color = color;
-  }
 
-  return <Cmp {...extra} {...rest} />;
+  const iconColor = color || theme.colors.text.primary || '#000000';
+  extra.fill = iconColor;
+  extra.color = iconColor;
+
+  return <Cmp {...extra} testID={testID} {...rest} />;
 };
 
 export type { IconName };