@sincpro/mobile-ui 0.1.3 → 0.1.4

package/lib/theme/globals.css

@@ -0,0 +1,67 @@
+/**
+ * AUTO-GENERATED from apk/domains/index.ts
+ * Active Domain: distribution
+ */
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  /* Primary Colors */
+  --primary: 37 99 235;
+  --secondary: 107 114 128;
+  --accent: 249 115 22;
+
+  /* Backgrounds */
+  --bg-page: 249 250 251;
+  --bg-card: 255 255 255;
+  --bg-popover: 255 255 255;
+  --bg-muted: 243 244 246;
+  --bg-accent: 219 234 254;
+  --bg-hover: 243 244 246;
+  --bg-disabled: 249 250 251;
+
+  /* Text */
+  --text-primary: 17 24 39;
+  --text-secondary: 107 114 128;
+  --text-tertiary: 156 163 175;
+  --text-muted: 107 114 128;
+  --text-accent: 30 64 175;
+  --text-inverse: 255 255 255;
+  --text-disabled: 209 213 219;
+  --text-on-primary: 255 255 255;
+  --text-on-secondary: 255 255 255;
+  --text-on-accent: 255 255 255;
+  --text-on-danger: 255 255 255;
+  --text-on-success: 255 255 255;
+
+  /* Icons */
+  --icon-primary: 17 24 39;
+  --icon-secondary: 107 114 128;
+  --icon-tertiary: 156 163 175;
+  --icon-inverse: 255 255 255;
+  --icon-disabled: 209 213 219;
+
+  /* Borders */
+  --border-default: 229 231 235;
+  --border-light: 243 244 246;
+  --border-strong: 209 213 219;
+  --border-focus: 37 99 235;
+
+  /* Focus & Input */
+  --ring: 37 99 235;
+  --input: 229 231 235;
+
+  /* Semantic */
+  --success: 16 185 129;
+  --warning: 249 115 22;
+  --danger: 239 68 68;
+  --info: 37 99 235;
+
+  /* Semantic Light */
+  --success-light: 209 250 229;
+  --warning-light: 255 237 213;
+  --danger-light: 254 226 226;
+  --info-light: 219 234 254;
+}

package/lib/theme/index.d.ts

@@ -1,4 +1,7 @@
 export { getActiveTheme, setActiveTheme } from "../theme/active";
 export { ThemedActivityIndicator } from "../theme/components";
+export { themeToVars } from "../theme/css-vars";
+export { DEFAULT_THEME } from "../theme/default";
+export { type DeepPartial, defineTheme, extendTheme, mergeTheme, } from "../theme/define";
 export { theme } from "../theme/theme";
-export type { ThemeTokens } from "../theme/types";
+export type { ShadowStyle, ThemeTokens } from "../theme/types";

package/lib/theme/index.js

@@ -1,3 +1,6 @@
 export { getActiveTheme, setActiveTheme } from "../theme/active";
 export { ThemedActivityIndicator } from "../theme/components";
+export { themeToVars } from "../theme/css-vars";
+export { DEFAULT_THEME } from "../theme/default";
+export { defineTheme, extendTheme, mergeTheme, } from "../theme/define";
 export { theme } from "../theme/theme";

package/lib/views/AuthFormView.d.ts

@@ -1,9 +1,11 @@
 import { ReactNode } from "react";
+import { type ImageSourcePropType } from "react-native";
 interface AuthFormProps {
     title?: string;
     description?: string;
+    logoSource?: ImageSourcePropType;
     onBack?: () => void;
     FormNode: ReactNode;
 }
-declare function AuthFormView({ title, description, onBack, FormNode }: AuthFormProps): import("react/jsx-runtime").JSX.Element;
+declare function AuthFormView({ title, description, logoSource, onBack, FormNode }: AuthFormProps): import("react/jsx-runtime").JSX.Element;
 export default AuthFormView;

package/lib/views/AuthFormView.js

@@ -1,11 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 import { Display } from "../Display";
 import AuthContainer from "../layouts/AuthContainer";
 import { Typography } from "../Typography";
 import { View } from "react-native";
 const Logo = Display.Logo;
 const Text = Typography.Text;
-function AuthFormView({ title, description, onBack, FormNode }) {
+function AuthFormView({ title, description, logoSource, onBack, FormNode }) {
     const renderTitle = () => {
         if (!title)
             return null;
@@ -16,6 +16,6 @@ function AuthFormView({ title, description, onBack, FormNode }) {
             return null;
         return _jsx(Text, { variant: "body", children: description });
     };
-    return (_jsx(AuthContainer, { header: _jsx(Logo, { size: "large" }), onBackPress: onBack, children: _jsxs(View, { className: "m-4", children: [_jsxs(View, { className: "mb-5", children: [renderTitle(), renderDescription()] }), FormNode] }) }));
+    return (_jsx(AuthContainer, { header: _jsx(Logo, { size: "large", source: logoSource }), onBackPress: onBack, children: _jsxs(View, { className: "m-4", children: [_jsxs(View, { className: "mb-5", children: [renderTitle(), renderDescription()] }), FormNode] }) }));
 }
 export default AuthFormView;

package/lib/views/FormViewV2.context.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "nativewind/jsx-runtime";
 import { createContext, useContext, useState } from "react";
 const Context = createContext(null);
 export function FormViewProvider({ name, description, item, isLoading = false, isEmpty = false, hasError = false, errorMessage, readonly = false, onRefresh, onRetry, onBack, children, }) {

package/lib/views/FormViewV2.d.ts

@@ -1,5 +1,6 @@
 import { EVariantScreenHeader } from "../widgets/ScreenHeader";
 import { ReactNode } from "react";
+import { type ImageSourcePropType } from "react-native";
 interface FormViewProps<T> {
     name: string;
     description?: string;
@@ -16,8 +17,9 @@ interface FormViewProps<T> {
     children: ReactNode;
 }
 declare function FormViewRoot<T>({ name, description, item, isLoading, isEmpty, hasError, errorMessage, readonly, onRefresh, onRetry, onBack, withContainer, children, }: FormViewProps<T>): import("react/jsx-runtime").JSX.Element;
-declare function Header({ variant, children, }: {
+declare function Header({ variant, logoSource, children, }: {
     variant?: EVariantScreenHeader;
+    logoSource?: ImageSourcePropType;
     children?: ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
 declare function HeaderActions({ children }: {

package/lib/views/FormViewV2.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "nativewind/jsx-runtime";
 import { ErrorBoundary, Feedback } from "../Feedback";
 import Container from "../layouts/Container";
 import { theme } from "../theme";
@@ -12,9 +12,9 @@ function FormViewRoot({ name, description, item, isLoading = false, isEmpty = fa
     const wrapperProps = withContainer ? {} : { style: { flex: 1 } };
     return (_jsx(FormViewProvider, { description: description, errorMessage: errorMessage, hasError: hasError, isEmpty: isEmpty, isLoading: isLoading, item: item, name: name, onBack: onBack, onRefresh: onRefresh, onRetry: onRetry, readonly: readonly, children: _jsx(ErrorBoundary, { children: _jsx(Wrapper, { ...wrapperProps, children: children }) }) }));
 }
-function Header({ variant = "FLAT_HEADER" /* EVariantScreenHeader.FLAT_HEADER */, children, }) {
+function Header({ variant = "FLAT_HEADER" /* EVariantScreenHeader.FLAT_HEADER */, logoSource, children, }) {
     const { name, description, onBack } = useFormView();
-    return (_jsx(_Fragment, { children: _jsx(ScreenHeader, { onBack: onBack, subtitle: description ? description : `Seleccionar ${name}`, title: name, variant: variant, children: children }) }));
+    return (_jsx(_Fragment, { children: _jsx(ScreenHeader, { logoSource: logoSource, onBack: onBack, subtitle: description ? description : `Seleccionar ${name}`, title: name, variant: variant, children: children }) }));
 }
 function HeaderActions({ children }) {
     return (_jsx(View, { className: "flex-row px-4 my-4 items-center justify-between flex-1 gap-2", children: children }));

package/lib/views/ListViewV2.context.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "nativewind/jsx-runtime";
 import { createContext, useContext, useState } from "react";
 const Context = createContext(null);
 export function ListViewProvider({ name, description, items, isLoading = false, hasError = false, errorMessage, readonly = false, onRefresh, onRetry, onPressItem, onDeleteItem, onSearch, onBack, children, }) {

package/lib/views/ListViewV2.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "nativewind/jsx-runtime";
 import { Display } from "../Display";
 import { ErrorBoundary, Feedback } from "../Feedback";
 import { Form } from "../Form";

package/lib/views/Wizard/Wizard.context.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 import { ErrorBoundary } from "../../Feedback";
 import { createContext, useCallback, useContext, useMemo, useState } from "react";
 import { ActivityIndicator, Text, View } from "react-native";

package/lib/views/Wizard/Wizard.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "nativewind/jsx-runtime";
 import { useWizard, WizardProvider } from "../../views/Wizard/Wizard.context";
 import { useEffect } from "react";
 import { TouchableOpacity } from "react-native";

package/lib/widgets/CircleButton.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "nativewind/jsx-runtime";
 import { Display } from "../Display";
 import { theme } from "../theme";
 import { cn } from "../theme/tw";

package/lib/widgets/GeoPermissionCard.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 import { Display, Form } from "../index";
 import { theme } from "../theme";
 import { Typography } from "../Typography";

package/lib/widgets/HomeHeader.d.ts

@@ -1,7 +1,9 @@
 import React, { ReactNode } from "react";
+import { type ImageSourcePropType } from "react-native";
 interface HomeHeaderProps {
     readonly title?: string;
     readonly logo?: ReactNode;
+    readonly logoSource?: ImageSourcePropType;
     readonly backButton?: boolean;
     readonly onBack?: () => void;
 }

package/lib/widgets/HomeHeader.js

@@ -1,9 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 import { Display, Typography } from "../index";
 import GradientContainer from "../layouts/GradientContainer";
 import { theme } from "../theme";
 import { TouchableOpacity, View } from "react-native";
-export const HomeHeader = ({ title = "Distribución", logo, backButton = false, onBack, }) => {
+export const HomeHeader = ({ title = "Distribución", logo, logoSource, backButton = false, onBack, }) => {
     const handleBackPress = onBack ?? (() => { });
-    return (_jsx(GradientContainer, { className: "pt-10 pb-4 px-4", children: _jsxs(View, { className: "relative items-center justify-center", children: [backButton && (_jsx(TouchableOpacity, { className: "absolute top-0 left-0 z-10 border border-text-inverse p-1.5 rounded", onPress: handleBackPress, children: _jsx(Display.Icon, { color: theme.text.inverse, name: "chevron-back", size: 25, type: "ionicons" }) })), _jsxs(View, { className: "items-center justify-center", children: [logo || _jsx(Display.Logo, { size: "medium" }), !!title && (_jsx(Typography.Text, { className: "text-text-inverse", variant: "h4", children: title }))] })] }) }));
+    return (_jsx(GradientContainer, { className: "pt-10 pb-4 px-4", children: _jsxs(View, { className: "relative items-center justify-center", children: [backButton && (_jsx(TouchableOpacity, { className: "absolute top-0 left-0 z-10 border border-text-inverse p-1.5 rounded", onPress: handleBackPress, children: _jsx(Display.Icon, { color: theme.text.inverse, name: "chevron-back", size: 25, type: "ionicons" }) })), _jsxs(View, { className: "items-center justify-center", children: [logo || _jsx(Display.Logo, { size: "medium", source: logoSource }), !!title && (_jsx(Typography.Text, { className: "text-text-inverse", variant: "h4", children: title }))] })] }) }));
 };

package/lib/widgets/JSONViewer.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 import { ThemedActivityIndicator } from "../theme";
 import { useMemo, useState } from "react";
 import { Platform, Text, View } from "react-native";

package/lib/widgets/MenuCard.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 import { theme } from "../theme/useTheme";
 import { Typography } from "../Typography";
 import { CircleButton } from "../widgets/CircleButton";

package/lib/widgets/MenuGrid.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "nativewind/jsx-runtime";
 import { MenuCard } from "../widgets/MenuCard";
 import { View } from "react-native";
 export const MenuGrid = ({ items }) => {

package/lib/widgets/ScreenHeader.d.ts

@@ -1,3 +1,4 @@
+import { type ImageSourcePropType } from "react-native";
 export declare const enum EVariantScreenHeader {
     FLAT_HEADER = "FLAT_HEADER",
     ROUNDED_HEADER = "ROUNDED_HEADER",
@@ -10,10 +11,11 @@ interface ScreenHeaderProps {
     centerTitle?: boolean;
     subtitle?: string;
     logo?: boolean;
+    logoSource?: ImageSourcePropType;
     rightComponent?: React.ReactNode;
     children?: React.ReactNode;
     withGradientContainer?: boolean;
     onBack?: () => void;
 }
-declare function ScreenHeader({ variant, title, subtitle, onBack, children, }: ScreenHeaderProps): import("react/jsx-runtime").JSX.Element | null;
+declare function ScreenHeader({ variant, title, subtitle, logoSource, onBack, children, }: ScreenHeaderProps): import("react/jsx-runtime").JSX.Element | null;
 export default ScreenHeader;

package/lib/widgets/ScreenHeader.js

@@ -1,19 +1,19 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "nativewind/jsx-runtime";
 import GradientContainer from "../layouts/GradientContainer";
 import { Navigation } from "../Navigation";
 import { View } from "react-native";
 const Header = Navigation.Header;
 const HeaderToolbar = Navigation.HeaderToolbar;
-function ScreenHeader({ variant, title = "Distribución", subtitle, onBack, children, }) {
+function ScreenHeader({ variant, title = "Distribución", subtitle, logoSource, onBack, children, }) {
     switch (variant) {
         case "FLAT_HEADER" /* EVariantScreenHeader.FLAT_HEADER */:
             return (_jsxs(_Fragment, { children: [_jsx(HeaderToolbar, { flat: true, onBack: onBack, subtitle: subtitle, title: title, withBackground: true }), _jsx(View, { children: children })] }));
         case "ROUNDED_HEADER" /* EVariantScreenHeader.ROUNDED_HEADER */:
             return (_jsx(GradientContainer, { className: "pt-0.5 shadow-lg shadow-black/70 rounded-b-[18px] pb-6", children: _jsx(HeaderToolbar, { flat: true, onBack: onBack, subtitle: subtitle, title: title, withBackground: false, children: children }) }));
         case "LOGO_WITH_BACK_BUTTON" /* EVariantScreenHeader.LOGO_WITH_BACK_BUTTON */:
-            return _jsx(Header, { backButton: true, handleBackButton: onBack, title: "Distribución" });
+            return (_jsx(Header, { backButton: true, handleBackButton: onBack, logoSource: logoSource, title: "" }));
         case "ONLY_LOGO" /* EVariantScreenHeader.ONLY_LOGO */:
-            return _jsx(Header, { title: title });
+            return _jsx(Header, { logoSource: logoSource, title: title });
         default:
             return null;
     }

package/lib/widgets/TimeZoneSelector.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "nativewind/jsx-runtime";
 import { Display, Form } from "../index";
 import { theme } from "../theme/useTheme";
 import { Typography } from "../Typography";

package/lib/widgets/TimeZoneSelectorModal.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 import { BottomSheet } from "../Dialog/BottomSheet";
 import { Display, Form } from "../index";
 import { theme } from "../theme";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sincpro/mobile-ui",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Sincpro Mobile design system: generic, presentational React Native components (no domain logic)",
   "main": "./lib/index.js",
   "module": "./lib/index.js",
@@ -35,6 +35,7 @@
     "expo-clipboard": "*",
     "expo-linear-gradient": "*",
     "expo-localization": "*",
+    "nativewind": ">=4",
     "react": "*",
     "react-hook-form": ">=7",
     "react-native": "*",