@nori-ui/core 0.0.5 → 1.0.2

package/dist/chunk-DDGMLLS3.js

@@ -0,0 +1,188 @@
+import { defaultSemanticIcons } from './chunk-7Z4NMNX6.js';
+import { px } from './chunk-5A2QOOVN.js';
+import { cn } from './chunk-CHXHRJNZ.js';
+import { useThemeColors, useColorScheme } from './chunk-R5JMDDCB.js';
+import { __name } from './chunk-WCQVDF3K.js';
+import { View, Text, Pressable } from 'react-native';
+import { jsxs, jsx } from 'nativewind/jsx-runtime';
+
+function tonePalettes(scheme, primary, success, warning, danger) {
+  if (scheme === "dark") {
+    return {
+      info: {
+        bg: primary["900"],
+        border: primary["700"],
+        fg: primary["100"],
+        iconBg: primary["200"],
+        defaultIcon: defaultSemanticIcons.info
+      },
+      success: {
+        bg: "#052e16",
+        border: "#14532d",
+        fg: "#bbf7d0",
+        iconBg: success,
+        defaultIcon: defaultSemanticIcons.checkmark
+      },
+      warning: {
+        bg: "#422006",
+        border: "#78350f",
+        fg: "#fef3c7",
+        iconBg: warning,
+        defaultIcon: defaultSemanticIcons.alertTriangle
+      },
+      danger: {
+        bg: "#450a0a",
+        border: "#7f1d1d",
+        fg: "#fecaca",
+        iconBg: danger,
+        defaultIcon: defaultSemanticIcons.alertTriangle
+      }
+    };
+  }
+  return {
+    info: {
+      bg: primary["50"],
+      border: primary["200"],
+      fg: primary["800"],
+      iconBg: primary["700"],
+      defaultIcon: defaultSemanticIcons.info
+    },
+    success: {
+      bg: "#f0fdf4",
+      border: "#bbf7d0",
+      fg: "#166534",
+      iconBg: success,
+      defaultIcon: defaultSemanticIcons.checkmark
+    },
+    warning: {
+      bg: "#fefce8",
+      border: "#fde68a",
+      fg: "#92400e",
+      iconBg: warning,
+      defaultIcon: defaultSemanticIcons.alertTriangle
+    },
+    danger: {
+      bg: "#fef2f2",
+      border: "#fecaca",
+      fg: "#991b1b",
+      iconBg: danger,
+      defaultIcon: defaultSemanticIcons.alertTriangle
+    }
+  };
+}
+__name(tonePalettes, "tonePalettes");
+var CONTAINER_LAYOUT_BASE = {
+  flexDirection: "row",
+  alignItems: "flex-start",
+  borderWidth: 1
+};
+var Alert = /* @__PURE__ */ __name(({
+  tone = "info",
+  title,
+  description,
+  onDismiss,
+  icon,
+  children,
+  className,
+  testID
+}) => {
+  const colors = useThemeColors();
+  const scheme = useColorScheme();
+  const palette = tonePalettes(
+    scheme,
+    colors.color.primary,
+    colors.color.success,
+    colors.color.warning,
+    colors.color.danger
+  )[tone];
+  const IconComponent = palette.defaultIcon;
+  const containerStyle = {
+    ...CONTAINER_LAYOUT_BASE,
+    gap: px(colors.spacing["3"]),
+    padding: px(colors.spacing["3"]),
+    // closest token to legacy 14px
+    borderRadius: px(colors.radius.lg),
+    backgroundColor: palette.bg,
+    borderColor: palette.border
+  };
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      ...testID !== void 0 ? { testID } : {},
+      role: "alert",
+      accessibilityRole: "alert",
+      className: cn("flex-row items-start gap-3 rounded-md border p-3.5", className),
+      style: containerStyle,
+      children: [
+        icon === null ? null : icon !== void 0 ? icon : /* @__PURE__ */ jsx(
+          View,
+          {
+            "aria-hidden": true,
+            style: {
+              // 20×20 icon hit area — component-density literal — not from theme
+              width: 20,
+              height: 20,
+              alignItems: "center",
+              justifyContent: "center",
+              marginTop: 2
+            },
+            children: /* @__PURE__ */ jsx(IconComponent, { size: 20, color: palette.iconBg })
+          }
+        ),
+        /* @__PURE__ */ jsxs(View, { style: { flex: 1, gap: 2 }, children: [
+          title !== void 0 ? /* @__PURE__ */ jsx(
+            Text,
+            {
+              style: {
+                color: palette.fg,
+                fontFamily: colors.fontFamily.body,
+                fontSize: px(colors.fontSize.sm),
+                fontWeight: colors.fontWeight.semibold,
+                lineHeight: px(colors.fontSize.sm) * Number(colors.lineHeight.normal)
+              },
+              children: title
+            }
+          ) : null,
+          description !== void 0 ? /* @__PURE__ */ jsx(
+            Text,
+            {
+              style: {
+                color: palette.fg,
+                fontFamily: colors.fontFamily.body,
+                fontSize: px(colors.fontSize.sm),
+                lineHeight: px(colors.fontSize.sm) * Number(colors.lineHeight.normal),
+                opacity: 0.85
+              },
+              children: description
+            }
+          ) : null,
+          children
+        ] }),
+        onDismiss !== void 0 ? /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            onPress: onDismiss,
+            role: "button",
+            accessibilityRole: "button",
+            accessibilityLabel: "Dismiss",
+            "aria-label": "Dismiss",
+            style: {
+              // 24×24 close button hit area — component-density literal — not from theme
+              width: 24,
+              height: 24,
+              alignItems: "center",
+              justifyContent: "center",
+              borderRadius: px(colors.radius.sm),
+              marginTop: -2
+            },
+            children: /* @__PURE__ */ jsx(defaultSemanticIcons.close, { size: 16, color: palette.fg })
+          }
+        ) : null
+      ]
+    }
+  );
+}, "Alert");
+
+export { Alert };
+//# sourceMappingURL=chunk-DDGMLLS3.js.map
+//# sourceMappingURL=chunk-DDGMLLS3.js.map

package/dist/chunk-DDGMLLS3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Alert/Alert.tsx"],"names":["RNText"],"mappings":"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","file":"chunk-DDGMLLS3.js","sourcesContent":["'use client';\n\nimport type { ComponentType, ReactNode } from 'react';\nimport type { ViewStyle } from 'react-native';\nimport { Pressable, Text as RNText, View } from 'react-native';\nimport { defaultSemanticIcons } from '../../icons/default-semantic-icons';\nimport { px } from '../../theme/px';\nimport { useColorScheme } from '../../theme/use-color-scheme';\nimport { useThemeColors } from '../../theme/use-theme-colors';\nimport { cn } from '../../utils/cn';\n\nexport type AlertTone = 'info' | 'success' | 'warning' | 'danger';\n\nexport type AlertProps = {\n    /**\n     * Severity of the alert. Drives the color tone and the default icon.\n     * @defaultValue 'info'\n     */\n    tone?: AlertTone;\n    /** Bolded heading line. Optional — provide one of title or description. */\n    title?: string;\n    /** Body text below the title. */\n    description?: string;\n    /**\n     * When provided, renders a close button in the top-right that calls back\n     * when pressed. The Alert itself doesn't track dismissed state — the\n     * parent decides whether to keep rendering.\n     */\n    onDismiss?: () => void;\n    /**\n     * Override the tone's default icon. Pass `null` to render no icon at\n     * all (rare — the icon doubles as the visual severity cue).\n     */\n    icon?: ReactNode;\n    /** Additional content below title/description. */\n    children?: ReactNode;\n    className?: string;\n    testID?: string;\n};\n\ntype IconType = ComponentType<{ size?: number; color?: string }>;\ntype TonePalette = { bg: string; border: string; fg: string; iconBg: string; defaultIcon: IconType };\n\n// Light/dark soft palettes per tone. Light variants use the familiar\n// pastel scale (Tailwind 50/200/800); dark variants use the deep 950/700/100\n// scale so the alert reads as a calm, on-tone surface against either\n// background — never a harsh white card on a dark page.\nfunction tonePalettes(\n    scheme: 'light' | 'dark',\n    primary: { '50': string; '200': string; '700': string; '800': string; '900': string; '100': string },\n    success: string,\n    warning: string,\n    danger: string\n): Record<AlertTone, TonePalette> {\n    if (scheme === 'dark') {\n        return {\n            info: {\n                bg: primary['900'],\n                border: primary['700'],\n                fg: primary['100'],\n                iconBg: primary['200'],\n                defaultIcon: defaultSemanticIcons.info,\n            },\n            success: {\n                bg: '#052e16',\n                border: '#14532d',\n                fg: '#bbf7d0',\n                iconBg: success,\n                defaultIcon: defaultSemanticIcons.checkmark,\n            },\n            warning: {\n                bg: '#422006',\n                border: '#78350f',\n                fg: '#fef3c7',\n                iconBg: warning,\n                defaultIcon: defaultSemanticIcons.alertTriangle,\n            },\n            danger: {\n                bg: '#450a0a',\n                border: '#7f1d1d',\n                fg: '#fecaca',\n                iconBg: danger,\n                defaultIcon: defaultSemanticIcons.alertTriangle,\n            },\n        };\n    }\n    return {\n        info: {\n            bg: primary['50'],\n            border: primary['200'],\n            fg: primary['800'],\n            iconBg: primary['700'],\n            defaultIcon: defaultSemanticIcons.info,\n        },\n        success: {\n            bg: '#f0fdf4',\n            border: '#bbf7d0',\n            fg: '#166534',\n            iconBg: success,\n            defaultIcon: defaultSemanticIcons.checkmark,\n        },\n        warning: {\n            bg: '#fefce8',\n            border: '#fde68a',\n            fg: '#92400e',\n            iconBg: warning,\n            defaultIcon: defaultSemanticIcons.alertTriangle,\n        },\n        danger: {\n            bg: '#fef2f2',\n            border: '#fecaca',\n            fg: '#991b1b',\n            iconBg: danger,\n            defaultIcon: defaultSemanticIcons.alertTriangle,\n        },\n    };\n}\n\n// Layout-only base; theme-driven dimensions (gap/padding/radius) are merged\n// inside the component so a custom theme reshapes the alert.\nconst CONTAINER_LAYOUT_BASE: ViewStyle = {\n    flexDirection: 'row',\n    alignItems: 'flex-start',\n    borderWidth: 1,\n};\n\n/**\n * Status banner with an icon, title, optional description, optional dismiss.\n * Use for inline messages that the reader should notice but doesn't need to\n * action immediately (use a Dialog when you need a forced acknowledgement).\n *\n * Color tone flips automatically with the active color scheme — light\n * pastel surface in light mode, deep on-tone surface in dark.\n */\nexport const Alert = ({\n    tone = 'info',\n    title,\n    description,\n    onDismiss,\n    icon,\n    children,\n    className,\n    testID,\n}: AlertProps) => {\n    const colors = useThemeColors();\n    const scheme = useColorScheme();\n    const palette = tonePalettes(\n        scheme,\n        colors.color.primary,\n        colors.color.success,\n        colors.color.warning,\n        colors.color.danger\n    )[tone];\n    const IconComponent = palette.defaultIcon;\n    const containerStyle: ViewStyle = {\n        ...CONTAINER_LAYOUT_BASE,\n        gap: px(colors.spacing['3']),\n        padding: px(colors.spacing['3']), // closest token to legacy 14px\n        borderRadius: px(colors.radius.lg),\n        backgroundColor: palette.bg,\n        borderColor: palette.border,\n    };\n    return (\n        <View\n            {...(testID !== undefined ? { testID } : {})}\n            role=\"alert\"\n            accessibilityRole=\"alert\"\n            className={cn('flex-row items-start gap-3 rounded-md border p-3.5', className)}\n            style={containerStyle}\n        >\n            {icon === null ? null : icon !== undefined ? (\n                icon\n            ) : (\n                <View\n                    aria-hidden={true}\n                    style={{\n                        // 20×20 icon hit area — component-density literal — not from theme\n                        width: 20,\n                        height: 20,\n                        alignItems: 'center',\n                        justifyContent: 'center',\n                        marginTop: 2,\n                    }}\n                >\n                    <IconComponent size={20} color={palette.iconBg} />\n                </View>\n            )}\n            <View style={{ flex: 1, gap: 2 }}>\n                {title !== undefined ? (\n                    <RNText\n                        style={{\n                            color: palette.fg,\n                            fontFamily: colors.fontFamily.body,\n                            fontSize: px(colors.fontSize.sm),\n                            fontWeight: colors.fontWeight.semibold as '600',\n                            lineHeight: px(colors.fontSize.sm) * Number(colors.lineHeight.normal),\n                        }}\n                    >\n                        {title}\n                    </RNText>\n                ) : null}\n                {description !== undefined ? (\n                    <RNText\n                        style={{\n                            color: palette.fg,\n                            fontFamily: colors.fontFamily.body,\n                            fontSize: px(colors.fontSize.sm),\n                            lineHeight: px(colors.fontSize.sm) * Number(colors.lineHeight.normal),\n                            opacity: 0.85,\n                        }}\n                    >\n                        {description}\n                    </RNText>\n                ) : null}\n                {children}\n            </View>\n            {onDismiss !== undefined ? (\n                <Pressable\n                    onPress={onDismiss}\n                    role=\"button\"\n                    accessibilityRole=\"button\"\n                    accessibilityLabel=\"Dismiss\"\n                    aria-label=\"Dismiss\"\n                    style={{\n                        // 24×24 close button hit area — component-density literal — not from theme\n                        width: 24,\n                        height: 24,\n                        alignItems: 'center',\n                        justifyContent: 'center',\n                        borderRadius: px(colors.radius.sm),\n                        marginTop: -2,\n                    }}\n                >\n                    <defaultSemanticIcons.close size={16} color={palette.fg} />\n                </Pressable>\n            ) : null}\n        </View>\n    );\n};\n"]}