@obisoft/ui 0.8.0

package/src/styles/useObiStyles.ts

@@ -0,0 +1,288 @@
+import { useMemo } from 'react';
+import { StyleSheet } from 'react-native';
+import { useObiTheme } from '../provider/ObiUIProvider';
+import { shadow } from '../theme/effects';
+import type { ObiTheme } from '../theme/theme';
+
+/**
+ * Semantic utility layer for application screens.
+ *
+ * This is the React Native equivalent of the layout/utility layer provided by
+ * web frameworks such as Bootstrap. Components should be preferred when a
+ * semantic component exists, while these styles cover composition, form
+ * rhythm and screen-level layout without duplicating StyleSheet objects in
+ * every application.
+ */
+export function createObiStyles(theme: ObiTheme) {
+  const { colors, glass, radius, spacing, type } = theme;
+
+  return StyleSheet.create({
+    flex1: { flex: 1 },
+    pressed: { opacity: 0.75 },
+
+    formScroll: {
+      padding: spacing.lg,
+      gap: spacing.lg,
+      maxWidth: 840,
+      width: '100%',
+      alignSelf: 'center',
+    },
+    formScrollCompact: {
+      padding: spacing.lg,
+      gap: spacing.md,
+      maxWidth: 840,
+      width: '100%',
+      alignSelf: 'center',
+    },
+    wideScroll: {
+      padding: spacing.lg,
+      gap: spacing.md,
+      maxWidth: 1100,
+      width: '100%',
+      alignSelf: 'center',
+    },
+    authScroll: {
+      flexGrow: 1,
+      padding: spacing.xl,
+      justifyContent: 'center',
+      width: '100%',
+      maxWidth: 540,
+      alignSelf: 'center',
+      gap: spacing.xl,
+    },
+
+    cardFlush: { padding: 0, overflow: 'hidden' },
+    alertError: {
+      borderColor: colors.dangerBorder,
+      backgroundColor: colors.dangerSoft,
+    },
+    metricsRow: { flexDirection: 'row', gap: spacing.md },
+    gapSm: { gap: spacing.sm },
+    gapMd: { gap: spacing.md },
+    formSection: { gap: spacing.md },
+    formHero: { gap: spacing.md },
+    chipWrap: { flexDirection: 'row', flexWrap: 'wrap', gap: spacing.sm },
+    formRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      gap: spacing.md,
+    },
+    formFields: { flexDirection: 'row', gap: spacing.md },
+    formLineSelected: { borderColor: colors.primary, borderWidth: 1 },
+    headingRow: { flexDirection: 'row', alignItems: 'center', gap: spacing.md },
+    paginationRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: spacing.md,
+    },
+    toggleRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      gap: spacing.lg,
+    },
+    toggleCopy: { flex: 1, gap: spacing.xs },
+
+    paymentRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: spacing.md,
+      minHeight: 48,
+      paddingHorizontal: spacing.md,
+      paddingVertical: spacing.sm,
+      borderRadius: radius.md,
+      backgroundColor: glass.surfaceStrong,
+      borderWidth: StyleSheet.hairlineWidth,
+      borderColor: glass.border,
+      ...shadow.glassSm,
+    },
+    paymentLabel: { flex: 1 },
+    amountField: {
+      width: '100%',
+      minHeight: 40,
+      margin: 0,
+      paddingHorizontal: spacing.sm,
+      textAlign: 'right',
+      fontWeight: '700',
+      color: colors.text,
+      backgroundColor: glass.input,
+      borderWidth: StyleSheet.hairlineWidth,
+      borderColor: glass.borderSoft,
+      borderRadius: radius.sm,
+    },
+    input: {
+      minHeight: 48,
+      borderWidth: StyleSheet.hairlineWidth,
+      borderColor: glass.border,
+      borderRadius: radius.md,
+      backgroundColor: glass.input,
+      paddingHorizontal: spacing.md,
+      color: colors.text,
+      fontSize: type.body,
+      ...shadow.glassSm,
+    },
+    sectionLabel: {
+      fontSize: 11,
+      fontWeight: '700',
+      color: colors.textMuted,
+      letterSpacing: 0.8,
+      textTransform: 'uppercase',
+    },
+
+    listItemPressed: { backgroundColor: colors.surfacePressed },
+    emptyState: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: spacing.xxl,
+      gap: spacing.md,
+    },
+    filterRow: {
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      gap: spacing.sm,
+    },
+    headerActions: { flexDirection: 'row', gap: spacing.md, alignItems: 'center' },
+    headerLink: { color: colors.primary, fontWeight: '700', fontSize: 13 },
+    headerLinkDisabled: { opacity: 0.45 },
+
+    filterWrap: { gap: spacing.sm },
+    filterRowInner: {
+      flexDirection: 'row',
+      gap: spacing.sm,
+      alignItems: 'center',
+    },
+    filterSearch: { flex: 1 },
+    filterBtn: {
+      width: 48,
+      height: 48,
+      borderRadius: radius.md,
+      borderWidth: StyleSheet.hairlineWidth,
+      borderColor: glass.border,
+      backgroundColor: glass.control,
+      alignItems: 'center',
+      justifyContent: 'center',
+      ...shadow.glassSm,
+    },
+    filterBtnActive: {
+      backgroundColor: glass.primaryTintStrong,
+      borderColor: colors.primary,
+    },
+    filterIcon: { gap: 3, alignItems: 'flex-start' },
+    filterBarMark: {
+      height: 2,
+      borderRadius: 1,
+      backgroundColor: colors.textMuted,
+    },
+    filterBarMarkActive: { backgroundColor: colors.primary },
+    dateRangeField: { justifyContent: 'center', paddingVertical: 0 },
+    dateRangeFieldText: {
+      color: colors.text,
+      fontSize: type.body,
+      fontWeight: '600',
+    },
+    dateRangeSheetSection: { marginTop: spacing.md, marginBottom: spacing.xs },
+    dateRangeSheetCaption: {
+      fontSize: type.caption,
+      color: colors.textMuted,
+      fontWeight: '700',
+      marginBottom: 2,
+      textTransform: 'uppercase',
+      letterSpacing: 0.6,
+    },
+    filterSheetContent: {
+      gap: spacing.xs,
+      paddingTop: spacing.sm,
+      paddingBottom: spacing.lg,
+      flexGrow: 1,
+    },
+    sheetOption: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      paddingVertical: spacing.lg,
+      minHeight: 56,
+      borderBottomWidth: StyleSheet.hairlineWidth,
+      borderBottomColor: glass.separator,
+    },
+    sheetOptionLabel: { fontSize: type.body, color: colors.text, fontWeight: '600' },
+    sheetOptionLabelSelected: { color: colors.primary, fontWeight: '800' },
+
+    loginBrand: { gap: spacing.sm },
+    loginLogo: {
+      width: 68,
+      height: 68,
+      borderRadius: 18,
+      backgroundColor: colors.primary,
+      alignItems: 'center',
+      justifyContent: 'center',
+      ...shadow.floating,
+    },
+    detailCenter: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: spacing.lg,
+      padding: spacing.xl,
+    },
+    scanInputWrap: { flex: 1, gap: spacing.xs },
+    scanInputRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: spacing.sm,
+      flex: 1,
+    },
+    printerDevice: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      gap: spacing.md,
+      paddingVertical: spacing.sm,
+    },
+    tenantCard: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: spacing.md,
+    },
+
+    scannerRoot: { flex: 1, backgroundColor: '#000' },
+    scannerPermission: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: spacing.lg,
+      padding: spacing.xl,
+      backgroundColor: colors.background,
+    },
+    scannerText: { textAlign: 'center', maxWidth: 420 },
+    scannerScrim: {
+      paddingTop: spacing.xl,
+      paddingHorizontal: spacing.lg,
+      paddingBottom: spacing.xl,
+      backgroundColor: 'rgba(0,0,0,0.38)',
+      gap: spacing.sm,
+    },
+    scannerWhite: { color: colors.onPrimary, textAlign: 'center' },
+    scannerSheet: {
+      position: 'absolute',
+      left: spacing.md,
+      right: spacing.md,
+      bottom: spacing.md,
+      backgroundColor: glass.chromeStrong,
+      borderRadius: radius.xl,
+      padding: spacing.lg,
+      gap: spacing.md,
+      borderWidth: StyleSheet.hairlineWidth,
+      borderColor: glass.border,
+      ...shadow.lg,
+    },
+  });
+}
+
+export type ObiStyles = ReturnType<typeof createObiStyles>;
+
+export function useObiStyles(): ObiStyles {
+  const theme = useObiTheme();
+  return useMemo(() => createObiStyles(theme), [theme]);
+}

package/src/theme/effects.ts

@@ -0,0 +1,219 @@
+import type { AppColors } from "./tokens";
+import { Platform, type ViewStyle } from "react-native";
+
+/**
+ * Liquid Glass material tokens.
+ *
+ * These values intentionally use lower alpha than a traditional
+ * glassmorphism theme. Native blur/refraction should provide most of the
+ * perceived surface; tint, border and elevation only define its edge.
+ */
+function isDarkPalette(colors: AppColors) {
+  const hex = colors.background.replace("#", "");
+  if (hex.length !== 6) return false;
+
+  const r = parseInt(hex.slice(0, 2), 16) / 255;
+  const g = parseInt(hex.slice(2, 4), 16) / 255;
+  const b = parseInt(hex.slice(4, 6), 16) / 255;
+
+  const linearize = (value: number) =>
+    value <= 0.03928 ? value / 12.92 : Math.pow((value + 0.055) / 1.055, 2.4);
+
+  const luminance =
+    0.2126 * linearize(r) +
+    0.7152 * linearize(g) +
+    0.0722 * linearize(b);
+
+  return luminance < 0.22;
+}
+
+export function createGlass(colors: AppColors) {
+  if (isDarkPalette(colors)) {
+    return {
+      surface: "rgba(25,30,42,0.30)",
+      surfaceStrong: "rgba(25,30,42,0.40)",
+      surfaceDense: "rgba(25,30,42,0.58)",
+      surfaceSoft: "rgba(39,45,61,0.20)",
+
+      chrome: "rgba(18,22,32,0.18)",
+      chromeStrong: "rgba(18,22,32,0.30)",
+      control: "rgba(49,56,74,0.22)",
+      controlPressed: "rgba(71,79,102,0.34)",
+      input: "rgba(28,34,47,0.34)",
+
+      border: "rgba(255,255,255,0.15)",
+      borderSoft: "rgba(255,255,255,0.09)",
+      innerStroke: "rgba(255,255,255,0.10)",
+      highlight: "rgba(255,255,255,0.16)",
+      highlightSoft: "rgba(255,255,255,0.075)",
+      separator: "rgba(255,255,255,0.075)",
+
+      backdrop: "rgba(3,7,18,0.24)",
+      backdropStrong: "rgba(3,7,18,0.40)",
+
+      /** Paneles laterales (sidebar / checkout) — casi opacos, sin BlurView. */
+      panel: "rgba(18,22,32,0.96)",
+
+      primaryTint: "rgba(123,124,240,0.14)",
+      primaryTintStrong: "rgba(123,124,240,0.24)",
+      dangerTint: "rgba(249,112,102,0.12)",
+      successTint: "rgba(60,203,127,0.11)",
+      darkSurface: "rgba(6,9,15,0.66)",
+      darkBorder: "rgba(255,255,255,0.14)",
+    } as const;
+  }
+
+  return {
+    surface: "rgba(255,255,255,0.28)",
+    surfaceStrong: "rgba(255,255,255,0.38)",
+    surfaceDense: "rgba(255,255,255,0.52)",
+    surfaceSoft: "rgba(255,255,255,0.16)",
+
+    chrome: "rgba(255,255,255,0.22)",
+    chromeStrong: "rgba(255,255,255,0.36)",
+    control: "rgba(255,255,255,0.28)",
+    controlPressed: "rgba(255,255,255,0.42)",
+    input: "rgba(255,255,255,0.40)",
+
+    border: "rgba(255,255,255,0.70)",
+    borderSoft: "rgba(255,255,255,0.42)",
+    innerStroke: "rgba(255,255,255,0.55)",
+    highlight: "rgba(255,255,255,0.85)",
+    highlightSoft: "rgba(255,255,255,0.45)",
+    separator: "rgba(15,23,42,0.07)",
+
+    backdrop: "rgba(15,23,42,0.28)",
+    backdropStrong: "rgba(15,23,42,0.42)",
+
+    /** Paneles laterales (sidebar / checkout) — casi opacos, sin BlurView. */
+    panel: "rgba(248,250,255,0.96)",
+
+    primaryTint: "rgba(91,92,230,0.10)",
+    primaryTintStrong: "rgba(91,92,230,0.18)",
+    dangerTint: "rgba(217,45,32,0.09)",
+    successTint: "rgba(22,132,91,0.09)",
+    darkSurface: "rgba(17,24,39,0.64)",
+    darkBorder: "rgba(255,255,255,0.14)",
+  } as const;
+}
+
+export const liquidGlassPresets = {
+  chrome: {
+    glassType: "clear" as const,
+    glassOpacity: 0.10,
+    blurAmount: 30,
+  },
+  dock: {
+    glassType: "clear" as const,
+    glassOpacity: 0.12,
+    blurAmount: 34,
+  },
+  control: {
+    glassType: "clear" as const,
+    glassOpacity: 0.08,
+    blurAmount: 22,
+  },
+  surface: {
+    glassType: "regular" as const,
+    glassOpacity: 0.14,
+    blurAmount: 30,
+  },
+  sheet: {
+    glassType: "regular" as const,
+    glassOpacity: 0.20,
+    blurAmount: 38,
+  },
+  modal: {
+    glassType: "regular" as const,
+    glassOpacity: 0.22,
+    blurAmount: 40,
+  },
+  scanner: {
+    glassType: "clear" as const,
+    glassOpacity: 0.14,
+    blurAmount: 34,
+  },
+} as const;
+
+/**
+ * Android `elevation` pinta una silueta opaca detrás de views translúcidos
+ * y rompe el glass. Usamos boxShadow (RN moderno) en ambas plataformas;
+ * en iOS también shadow* por compatibilidad visual.
+ */
+function glassDepth(
+  ios: Pick<ViewStyle, "shadowColor" | "shadowOffset" | "shadowOpacity" | "shadowRadius">,
+  box: string,
+): ViewStyle {
+  return Platform.select<ViewStyle>({
+    ios: { ...ios },
+    android: {
+      elevation: 0,
+      // @ts-expect-error boxShadow is supported in RN 0.76+
+      boxShadow: box,
+    },
+    default: { elevation: 0 },
+  })!;
+}
+
+export const shadow = {
+  xs: {
+    shadowColor: "#0F172A",
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.025,
+    shadowRadius: 2,
+    elevation: 1,
+  },
+  sm: {
+    shadowColor: "#0F172A",
+    shadowOffset: { width: 0, height: 3 },
+    shadowOpacity: 0.05,
+    shadowRadius: 8,
+    elevation: 2,
+  },
+  md: {
+    shadowColor: "#0F172A",
+    shadowOffset: { width: 0, height: 7 },
+    shadowOpacity: 0.075,
+    shadowRadius: 18,
+    elevation: 4,
+  },
+  lg: {
+    shadowColor: "#0F172A",
+    shadowOffset: { width: 0, height: 16 },
+    shadowOpacity: 0.115,
+    shadowRadius: 34,
+    elevation: 8,
+  },
+  floating: {
+    shadowColor: "#25245F",
+    shadowOffset: { width: 0, height: 10 },
+    shadowOpacity: 0.16,
+    shadowRadius: 24,
+    elevation: 9,
+  },
+  top: {
+    shadowColor: "#0F172A",
+    shadowOffset: { width: 0, height: -6 },
+    shadowOpacity: 0.06,
+    shadowRadius: 18,
+    elevation: 7,
+  },
+  glass: glassDepth(
+    {
+      shadowColor: "#0F172A",
+      shadowOffset: { width: 0, height: 8 },
+      shadowOpacity: 0.12,
+      shadowRadius: 18,
+    },
+    "0px 6px 18px rgba(15, 23, 42, 0.12)",
+  ),
+  glassSm: glassDepth(
+    {
+      shadowColor: "#0F172A",
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 0.08,
+      shadowRadius: 12,
+    },
+    "0px 3px 12px rgba(15, 23, 42, 0.09)",
+  ),
+} as const;

package/src/theme/index.ts

@@ -0,0 +1,3 @@
+export * from './tokens';
+export * from './effects';
+export * from './theme';

package/src/theme/theme.ts

@@ -0,0 +1,53 @@
+import { createGlass } from './effects';
+import {
+  darkColors,
+  lightColors,
+  radius,
+  spacing,
+  type,
+  type AppColors,
+} from './tokens';
+
+export type ObiThemeMode = 'light' | 'dark';
+export type ObiSpacingKey = keyof typeof spacing;
+export type ObiRadiusKey = keyof typeof radius;
+
+export type ObiTheme = {
+  mode: ObiThemeMode;
+  isDark: boolean;
+  colors: AppColors;
+  spacing: typeof spacing;
+  radius: typeof radius;
+  type: typeof type;
+  glass: ReturnType<typeof createGlass>;
+  navigation: {
+    bottomBarHeight: number;
+    headerMinHeight: number;
+  };
+};
+
+export type ObiThemeOverrides = {
+  colors?: Partial<AppColors>;
+  navigation?: Partial<ObiTheme['navigation']>;
+};
+
+export function createObiTheme(mode: ObiThemeMode, overrides?: ObiThemeOverrides): ObiTheme {
+  const baseColors = mode === 'dark' ? darkColors : lightColors;
+  const colors: AppColors = { ...baseColors, ...(overrides?.colors ?? {}) };
+  const navigation = {
+    bottomBarHeight: 56,
+    headerMinHeight: 56,
+    ...(overrides?.navigation ?? {}),
+  };
+
+  return {
+    mode,
+    isDark: mode === 'dark',
+    colors,
+    spacing,
+    radius,
+    type,
+    glass: createGlass(colors),
+    navigation,
+  };
+}

package/src/theme/tokens.ts

@@ -0,0 +1,133 @@
+export type AppColors = {
+  primary: string;
+  primaryDark: string;
+  primarySoft: string;
+  primaryFaint: string;
+  secondary: string;
+  secondarySoft: string;
+
+  background: string;
+  backgroundElevated: string;
+  surface: string;
+  surfaceMuted: string;
+  surfacePressed: string;
+
+  text: string;
+  textStrong: string;
+  textMuted: string;
+  textSubtle: string;
+
+  border: string;
+  borderStrong: string;
+  separator: string;
+
+  danger: string;
+  success: string;
+  warning: string;
+  info: string;
+
+  onPrimary: string;
+  onPrimaryMuted: string;
+  onPrimarySoft: string;
+
+  warningSoft: string;
+  warningBorder: string;
+  dangerSoft: string;
+  dangerBorder: string;
+};
+
+export const lightColors: AppColors = {
+  primary: "#5B5CE6",
+  primaryDark: "#4446C8",
+  primarySoft: "#EEEDFF",
+  primaryFaint: "#F6F5FF",
+  secondary: "#0EA596",
+  secondarySoft: "#EAFBF7",
+
+  background: "#EEF3FA",
+  backgroundElevated: "#F8F9FC",
+  surface: "#FFFFFF",
+  surfaceMuted: "#F6F7FA",
+  surfacePressed: "#EEF0F5",
+
+  text: "#111827",
+  textStrong: "#0B1220",
+  textMuted: "#667085",
+  textSubtle: "#98A2B3",
+
+  border: "#E3E7EE",
+  borderStrong: "#D5DAE3",
+  separator: "rgba(15, 23, 42, 0.075)",
+
+  danger: "#D92D20",
+  success: "#16845B",
+  warning: "#B54708",
+  info: "#2563EB",
+
+  onPrimary: "#FFFFFF",
+  onPrimaryMuted: "rgba(255,255,255,0.78)",
+  onPrimarySoft: "rgba(255,255,255,0.16)",
+
+  warningSoft: "#FFFAEB",
+  warningBorder: "#FEC84B",
+  dangerSoft: "#FEF3F2",
+  dangerBorder: "#FDA29B",
+};
+
+export const darkColors: AppColors = {
+  primary: "#7B7CF0",
+  primaryDark: "#6263DC",
+  primarySoft: "#29294D",
+  primaryFaint: "#1B1B2E",
+  secondary: "#2DD4BF",
+  secondarySoft: "#123733",
+
+  background: "#0F1219",
+  backgroundElevated: "#131823",
+  surface: "#1A1F2B",
+  surfaceMuted: "#242A38",
+  surfacePressed: "#2B3241",
+
+  text: "#F3F5F9",
+  textStrong: "#FFFFFF",
+  textMuted: "#9AA3B5",
+  textSubtle: "#727D91",
+
+  border: "#2E3545",
+  borderStrong: "#3C4558",
+  separator: "rgba(255,255,255,0.075)",
+
+  danger: "#F97066",
+  success: "#3CCB7F",
+  warning: "#FDB022",
+  info: "#60A5FA",
+
+  onPrimary: "#FFFFFF",
+  onPrimaryMuted: "rgba(255,255,255,0.78)",
+  onPrimarySoft: "rgba(255,255,255,0.16)",
+
+  warningSoft: "#2A2110",
+  warningBorder: "#854D0E",
+  dangerSoft: "#2A1215",
+  dangerBorder: "#912018",
+};
+
+export const spacing = {
+  xs: 4,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 24,
+  xxl: 32,
+} as const;
+
+// Rounded, but restrained so the POS keeps a professional, non-generic look.
+export const radius = { sm: 8, md: 12, lg: 16, xl: 22, pill: 999 } as const;
+
+export const type = {
+  caption: 12,
+  body: 15,
+  subtitle: 18,
+  title: 24,
+  display: 32,
+} as const;