@frosted-ui/react-native 0.0.1-canary.91

package/dist/components/text.js

@@ -0,0 +1,33 @@
+import { useThemeVars } from '../lib/use-theme-vars';
+import { cn } from '../lib/utils';
+import * as Slot from '@rn-primitives/slot';
+import * as React from 'react';
+import { Text as RNText } from 'react-native';
+const TextClassContext = React.createContext(undefined);
+const TextStyleContext = React.createContext(undefined);
+function Text({ className, asChild = false, size, weight, color, role, style, ...props }) {
+    const { colors, typography, fontWeights } = useThemeVars();
+    const textStyleContext = React.useContext(TextStyleContext);
+    const Component = asChild ? Slot.Text : RNText;
+    const effectiveSize = size ?? textStyleContext?.size;
+    const effectiveWeight = weight ?? textStyleContext?.weight;
+    // Use direct color values from Frosted colors on all platforms.
+    // Priority: explicit color prop > context color override > default gray-12.
+    const resolvedColor = (color && colors.palettes[color]['11']) ??
+        textStyleContext?.color ??
+        colors.palettes.gray['12'];
+    const typo = effectiveSize ? typography[effectiveSize] : undefined;
+    const fontWeightValue = effectiveWeight ? fontWeights[effectiveWeight] : undefined;
+    const typographyStyle = typo
+        ? {
+            fontSize: typo.fontSize,
+            lineHeight: typo.lineHeight,
+            letterSpacing: typo.letterSpacing,
+        }
+        : undefined;
+    const colorStyle = { color: resolvedColor };
+    const weightStyle = fontWeightValue ? { fontWeight: fontWeightValue } : undefined;
+    return (<Component className={cn(className)} style={[typographyStyle, weightStyle, colorStyle, style]} role={role} {...props}/>);
+}
+export { Text, TextClassContext, TextStyleContext };
+//# sourceMappingURL=text.js.map

package/dist/components/text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.js","sourceRoot":"","sources":["../../src/components/text.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,KAAK,IAAI,MAAM,qBAAqB,CAAC;AAC5C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,IAAI,MAAM,EAAE,MAAM,cAAc,CAAC;AAY9C,MAAM,gBAAgB,GAAG,KAAK,CAAC,aAAa,CAAqB,SAAS,CAAC,CAAC;AAO5E,MAAM,gBAAgB,GAAG,KAAK,CAAC,aAAa,CAAoC,SAAS,CAAC,CAAC;AAE3F,SAAS,IAAI,CAAC,EACZ,SAAS,EACT,OAAO,GAAG,KAAK,EACf,IAAI,EACJ,MAAM,EACN,KAAK,EACL,IAAI,EACJ,KAAK,EACL,GAAG,KAAK,EACE;IACV,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,GAAG,YAAY,EAAE,CAAC;IAC3D,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAC;IAC5D,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;IAE/C,MAAM,aAAa,GAAG,IAAI,IAAI,gBAAgB,EAAE,IAAI,CAAC;IACrD,MAAM,eAAe,GAAG,MAAM,IAAI,gBAAgB,EAAE,MAAM,CAAC;IAE3D,gEAAgE;IAChE,4EAA4E;IAC5E,MAAM,aAAa,GACjB,CAAC,KAAK,IAAI,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC;QACvC,gBAAgB,EAAE,KAAK;QACvB,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAE7B,MAAM,IAAI,GAAG,aAAa,CAAC,CAAC,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IACnE,MAAM,eAAe,GAAG,eAAe,CAAC,CAAC,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAEnF,MAAM,eAAe,GAAG,IAAI;QAC1B,CAAC,CAAC;YACE,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,aAAa,EAAE,IAAI,CAAC,aAAa;SAClC;QACH,CAAC,CAAC,SAAS,CAAC;IAEd,MAAM,UAAU,GAAG,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC;IAC5C,MAAM,WAAW,GAAG,eAAe,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,eAAe,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;IAElF,OAAO,CACL,CAAC,SAAS,CACR,SAAS,CAAC,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CACzB,KAAK,CAAC,CAAC,CAAC,eAAe,EAAE,WAAW,EAAE,UAAU,EAAE,KAAK,CAAC,CAAC,CACzD,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,IAAI,KAAK,CAAC,EACV,CACH,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,IAAI,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/tooltip.d.ts

@@ -0,0 +1,24 @@
+import * as TooltipPrimitive from '@rn-primitives/tooltip';
+import * as React from 'react';
+interface TooltipProps extends Omit<TooltipPrimitive.RootProps, 'delayDuration'> {
+    /** The content to display in the tooltip */
+    content: React.ReactNode;
+    /** The trigger element */
+    children: React.ReactNode;
+    /** Delay before showing tooltip (ms) */
+    delayDuration?: number;
+    /** Side offset from trigger */
+    sideOffset?: number;
+    /** Which side to show tooltip */
+    side?: 'top' | 'bottom' | 'left' | 'right';
+    /** Portal host name */
+    portalHost?: string;
+}
+/**
+ * Tooltip component matching web version.
+ * Uses reversed theme appearance (light mode shows dark tooltip, dark mode shows light tooltip).
+ */
+declare function Tooltip({ children, content, delayDuration, sideOffset, side, portalHost, ...rootProps }: TooltipProps): React.JSX.Element;
+export { Tooltip };
+export type { TooltipProps };
+//# sourceMappingURL=tooltip.d.ts.map

package/dist/components/tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../src/components/tooltip.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,gBAAgB,MAAM,wBAAwB,CAAC;AAC3D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,UAAU,YAAa,SAAQ,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,eAAe,CAAC;IAC9E,4CAA4C;IAC5C,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,0BAA0B;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,wCAAwC;IACxC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,+BAA+B;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iCAAiC;IACjC,IAAI,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAC3C,uBAAuB;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;GAGG;AACH,iBAAS,OAAO,CAAC,EACf,QAAQ,EACR,OAAO,EACP,aAAmB,EACnB,UAAc,EACd,IAAY,EACZ,UAAU,EACV,GAAG,SAAS,EACb,EAAE,YAAY,qBAqDd;AAED,OAAO,EAAE,OAAO,EAAE,CAAC;AACnB,YAAY,EAAE,YAAY,EAAE,CAAC"}

package/dist/components/tooltip.js

@@ -0,0 +1,63 @@
+import { NativeOnlyAnimatedView } from '../components/native-only-animated-view';
+import { Text } from '../components/text';
+import { useThemeVars } from '../lib/use-theme-vars';
+import * as TooltipPrimitive from '@rn-primitives/tooltip';
+import * as React from 'react';
+import { Platform, StyleSheet, View } from 'react-native';
+import { FadeIn, FadeOut } from 'react-native-reanimated';
+import { FullWindowOverlay as RNFullWindowOverlay } from 'react-native-screens';
+const FullWindowOverlay = Platform.OS === 'ios' ? RNFullWindowOverlay : React.Fragment;
+/**
+ * Tooltip component matching web version.
+ * Uses reversed theme appearance (light mode shows dark tooltip, dark mode shows light tooltip).
+ */
+function Tooltip({ children, content, delayDuration = 400, sideOffset = 4, side = 'top', portalHost, ...rootProps }) {
+    const { invertedColors } = useThemeVars();
+    // Use inverted theme colors - tooltip shows opposite of current theme
+    const backgroundColor = invertedColors.background;
+    const textColor = invertedColors.palettes.gray['12'];
+    // Shadow style
+    const shadowStyle = Platform.select({
+        web: {
+            boxShadow: `
+        0 4px 16px -8px rgba(0, 0, 0, 0.08),
+        0 3px 12px -4px rgba(0, 0, 0, 0.05),
+        0 2px 3px -2px rgba(0, 0, 61, 0.05)
+      `.trim(),
+        },
+        default: {
+            shadowColor: '#000',
+            shadowOffset: { width: 0, height: 2 },
+            shadowOpacity: 0.1,
+            shadowRadius: 8,
+            elevation: 4,
+        },
+    });
+    const contentStyle = {
+        backgroundColor,
+        paddingVertical: 4, // space-1
+        paddingHorizontal: 8, // space-2
+        borderRadius: 10, // radius-4
+        ...shadowStyle,
+    };
+    return (<TooltipPrimitive.Root delayDuration={delayDuration} {...rootProps}>
+      <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
+      <TooltipPrimitive.Portal hostName={portalHost}>
+        <FullWindowOverlay>
+          <TooltipPrimitive.Overlay style={Platform.select({ native: StyleSheet.absoluteFill })}>
+            <NativeOnlyAnimatedView entering={FadeIn.duration(100)} exiting={FadeOut.duration(100)}>
+              <TooltipPrimitive.Content sideOffset={sideOffset} side={side}>
+                <View style={contentStyle}>
+                  <Text size="2" style={{ color: textColor }}>
+                    {content}
+                  </Text>
+                </View>
+              </TooltipPrimitive.Content>
+            </NativeOnlyAnimatedView>
+          </TooltipPrimitive.Overlay>
+        </FullWindowOverlay>
+      </TooltipPrimitive.Portal>
+    </TooltipPrimitive.Root>);
+}
+export { Tooltip };
+//# sourceMappingURL=tooltip.js.map

package/dist/components/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../src/components/tooltip.tsx"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from './components';
+export * from './lib/types';
+export * from './lib/use-theme-vars';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,cAAc,cAAc,CAAC;AAI7B,cAAc,aAAa,CAAC;AAC5B,cAAc,sBAAsB,CAAC"}

package/dist/index.js

@@ -0,0 +1,8 @@
+// COMPONENTS
+//------------------------------------------------------------------------------
+export * from './components';
+// UTILITIES
+//------------------------------------------------------------------------------
+export * from './lib/types';
+export * from './lib/use-theme-vars';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,aAAa;AACb,gFAAgF;AAChF,cAAc,cAAc,CAAC;AAE7B,YAAY;AACZ,gFAAgF;AAChF,cAAc,aAAa,CAAC;AAC5B,cAAc,sBAAsB,CAAC"}

package/dist/lib/button-styles.d.ts

@@ -0,0 +1,13 @@
+import type { AccentColor, Color } from '../lib/types';
+import { useThemeVars } from '../lib/use-theme-vars';
+import type { ViewStyle } from 'react-native';
+export type ButtonSize = '1' | '2' | '3' | '4';
+export type ButtonVariant = 'solid' | 'soft' | 'surface' | 'ghost';
+export declare function resolveAccentFromColor(color?: Color): AccentColor;
+export declare function getButtonSizeStyle(size: ButtonSize, isIconButton?: boolean): ViewStyle;
+export declare function getButtonVariantStyle(variant: ButtonVariant, colors: ReturnType<typeof useThemeVars>['colors'], palette: ReturnType<typeof useThemeVars>['colors']['palettes'][AccentColor], gray: ReturnType<typeof useThemeVars>['colors']['palettes']['gray'], disabled: boolean, pressed: boolean, hovered: boolean): ViewStyle;
+export declare function getButtonShadowStyle(variant: ButtonVariant, disabled: boolean, pressed: boolean): ViewStyle | undefined;
+export declare function getButtonFocusStyle(palette: ReturnType<typeof useThemeVars>['colors']['palettes'][AccentColor], focused: boolean, disabled: boolean): ViewStyle | undefined;
+export declare function getButtonPressedFilter(variant: ButtonVariant, pressed: boolean, disabled: boolean): ViewStyle | undefined;
+export declare function getButtonTextColor(variant: ButtonVariant, palette: ReturnType<typeof useThemeVars>['colors']['palettes'][AccentColor], gray: ReturnType<typeof useThemeVars>['colors']['palettes']['gray'], disabled: boolean): string;
+//# sourceMappingURL=button-styles.d.ts.map

package/dist/lib/button-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-styles.d.ts","sourceRoot":"","sources":["../../src/lib/button-styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG9C,MAAM,MAAM,UAAU,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAC/C,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;AAEnE,wBAAgB,sBAAsB,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,WAAW,CAcjE;AAED,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,UAAU,EAAE,YAAY,UAAQ,GAAG,SAAS,CA+BpF;AAED,wBAAgB,qBAAqB,CACnC,OAAO,EAAE,aAAa,EACtB,MAAM,EAAE,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC,QAAQ,CAAC,EACjD,OAAO,EAAE,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC,QAAQ,CAAC,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC,EAC3E,IAAI,EAAE,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC,QAAQ,CAAC,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,EACnE,QAAQ,EAAE,OAAO,EACjB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,GACf,SAAS,CA+CX;AAED,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,aAAa,EACtB,QAAQ,EAAE,OAAO,EACjB,OAAO,EAAE,OAAO,GACf,SAAS,GAAG,SAAS,CAWvB;AAED,wBAAgB,mBAAmB,CACjC,OAAO,EAAE,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC,QAAQ,CAAC,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC,EAC3E,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,OAAO,GAChB,SAAS,GAAG,SAAS,CAUvB;AAED,wBAAgB,sBAAsB,CACpC,OAAO,EAAE,aAAa,EACtB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,OAAO,GAChB,SAAS,GAAG,SAAS,CAKvB;AAED,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,aAAa,EACtB,OAAO,EAAE,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC,QAAQ,CAAC,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC,EAC3E,IAAI,EAAE,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC,QAAQ,CAAC,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,EACnE,QAAQ,EAAE,OAAO,GAChB,MAAM,CAQR"}

package/dist/lib/button-styles.js

@@ -0,0 +1,131 @@
+import { Platform } from 'react-native';
+export function resolveAccentFromColor(color) {
+    if (!color)
+        return 'blue';
+    switch (color) {
+        case 'danger':
+            return 'red';
+        case 'warning':
+            return 'amber';
+        case 'success':
+            return 'green';
+        case 'info':
+            return 'blue';
+        default:
+            return color;
+    }
+}
+export function getButtonSizeStyle(size, isIconButton = false) {
+    // Based on web CSS:
+    // Size 1: height=space-5(24), gap=space-1(4), padding=space-2(8), radius=6
+    // Size 2: height=space-6(32), gap=space-1*1.5(6), padding=space-3(12), radius=8
+    // Size 3: height=space-7(40), gap=space-2(8), padding=space-4(16), radius=10
+    // Size 4: height=space-8(48), gap=space-3(12), padding=space-4(16), radius=14
+    const baseSize = size === '1'
+        ? { height: 24, borderRadius: 6, gap: 4 }
+        : size === '2'
+            ? { height: 32, borderRadius: 8, gap: 6 }
+            : size === '3'
+                ? { height: 40, borderRadius: 10, gap: 8 }
+                : { height: 48, borderRadius: 14, gap: 12 };
+    if (isIconButton) {
+        // IconButton: square (width = height), no horizontal padding
+        return {
+            ...baseSize,
+            width: baseSize.height,
+            paddingHorizontal: 0,
+        };
+    }
+    // Regular Button: horizontal padding based on size
+    const paddingHorizontal = size === '1' ? 8 : size === '2' ? 12 : size === '3' ? 16 : 16;
+    return {
+        ...baseSize,
+        paddingHorizontal,
+    };
+}
+export function getButtonVariantStyle(variant, colors, palette, gray, disabled, pressed, hovered) {
+    let backgroundColor;
+    let borderColor;
+    let borderWidth;
+    if (disabled) {
+        switch (variant) {
+            case 'solid':
+            case 'soft':
+                backgroundColor = gray.a3;
+                break;
+            case 'surface':
+                backgroundColor = gray.a2;
+                borderColor = gray.a6;
+                borderWidth = 1;
+                break;
+            case 'ghost':
+                backgroundColor = 'transparent';
+                break;
+        }
+    }
+    else {
+        switch (variant) {
+            case 'solid':
+                backgroundColor = pressed ? palette['10'] : hovered ? palette['10'] : palette['9'];
+                break;
+            case 'soft':
+                backgroundColor = pressed ? palette.a5 : hovered ? palette.a4 : palette.a3;
+                break;
+            case 'surface':
+                // Default: panelSolid bg, gray-a5 border (stroke), outer shadow
+                // Hover: same bg, gray-a7 border, outer shadow
+                // Pressed: gray-a3 bg, gray-a6 border, no outer shadow
+                backgroundColor = pressed ? gray.a3 : colors.panelSolid;
+                borderColor = pressed ? gray.a6 : hovered ? gray.a7 : gray.a5;
+                borderWidth = 1;
+                break;
+            case 'ghost':
+                backgroundColor = pressed ? palette.a4 : hovered ? palette.a3 : undefined;
+                break;
+        }
+    }
+    return {
+        backgroundColor,
+        borderColor,
+        borderWidth,
+    };
+}
+export function getButtonShadowStyle(variant, disabled, pressed) {
+    if (!disabled && !pressed && variant === 'surface') {
+        return {
+            shadowColor: '#000000',
+            shadowOpacity: 0.05,
+            shadowOffset: { width: 0, height: 1 },
+            shadowRadius: 2,
+            elevation: 2,
+        };
+    }
+    return undefined;
+}
+export function getButtonFocusStyle(palette, focused, disabled) {
+    if (focused && !disabled) {
+        return {
+            outlineWidth: 2,
+            outlineStyle: 'solid',
+            outlineColor: palette.a8,
+            outlineOffset: 2,
+        };
+    }
+    return undefined;
+}
+export function getButtonPressedFilter(variant, pressed, disabled) {
+    if (Platform.OS === 'web' && pressed && !disabled && variant === 'solid') {
+        return { filter: 'brightness(0.92) saturate(1.1)' };
+    }
+    return undefined;
+}
+export function getButtonTextColor(variant, palette, gray, disabled) {
+    if (disabled) {
+        return gray.a8;
+    }
+    if (variant === 'solid') {
+        return palette['9-contrast'];
+    }
+    return palette.a11 || palette['11'];
+}
+//# sourceMappingURL=button-styles.js.map

package/dist/lib/button-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-styles.js","sourceRoot":"","sources":["../../src/lib/button-styles.ts"],"names":[],"mappings":"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"}

package/dist/lib/color-utils.d.ts

@@ -0,0 +1,21 @@
+import { vars } from 'nativewind';
+import type { AccentColor } from './types';
+/**
+ * Pre-defined color themes for all accent colors.
+ * Similar to the theme pattern, but for color variants.
+ * This allows components to use text-accent-11, bg-accent-9, etc.
+ * and have them automatically map to the specified color.
+ */
+export declare const colorThemes: Record<AccentColor, ReturnType<typeof vars>>;
+/**
+ * Gets the accent color theme for a given color.
+ * Returns the pre-defined vars object for that color.
+ *
+ * @example
+ * const theme = getAccentColorTheme('yellow');
+ * <View style={theme}>
+ *   <Text className="text-accent-11">This will be yellow-11</Text>
+ * </View>
+ */
+export declare function getAccentColorTheme(color: AccentColor): Record<string, string>;
+//# sourceMappingURL=color-utils.d.ts.map

package/dist/lib/color-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-utils.d.ts","sourceRoot":"","sources":["../../src/lib/color-utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAClC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAoC3C;;;;;GAKG;AACH,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,WAAW,EAAE,UAAU,CAAC,OAAO,IAAI,CAAC,CA6BpE,CAAC;AAEF;;;;;;;;;GASG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,WAAW,0BAErD"}

package/dist/lib/color-utils.js

@@ -0,0 +1,84 @@
+import { vars } from 'nativewind';
+/**
+ * Creates a vars object for a given color name.
+ * This maps all accent color variables to the specified color's variables.
+ */
+function createColorTheme(colorName) {
+    return vars({
+        '--accent-1': `var(--${colorName}-1)`,
+        '--accent-2': `var(--${colorName}-2)`,
+        '--accent-3': `var(--${colorName}-3)`,
+        '--accent-4': `var(--${colorName}-4)`,
+        '--accent-5': `var(--${colorName}-5)`,
+        '--accent-6': `var(--${colorName}-6)`,
+        '--accent-7': `var(--${colorName}-7)`,
+        '--accent-8': `var(--${colorName}-8)`,
+        '--accent-9': `var(--${colorName}-9)`,
+        '--accent-9-contrast': `var(--${colorName}-9-contrast)`,
+        '--accent-10': `var(--${colorName}-10)`,
+        '--accent-11': `var(--${colorName}-11)`,
+        '--accent-12': `var(--${colorName}-12)`,
+        '--accent-a1': `var(--${colorName}-a1)`,
+        '--accent-a2': `var(--${colorName}-a2)`,
+        '--accent-a3': `var(--${colorName}-a3)`,
+        '--accent-a4': `var(--${colorName}-a4)`,
+        '--accent-a5': `var(--${colorName}-a5)`,
+        '--accent-a6': `var(--${colorName}-a6)`,
+        '--accent-a7': `var(--${colorName}-a7)`,
+        '--accent-a8': `var(--${colorName}-a8)`,
+        '--accent-a9': `var(--${colorName}-a9)`,
+        '--accent-a10': `var(--${colorName}-a10)`,
+        '--accent-a11': `var(--${colorName}-a11)`,
+        '--accent-a12': `var(--${colorName}-a12)`,
+    });
+}
+/**
+ * Pre-defined color themes for all accent colors.
+ * Similar to the theme pattern, but for color variants.
+ * This allows components to use text-accent-11, bg-accent-9, etc.
+ * and have them automatically map to the specified color.
+ */
+export const colorThemes = {
+    tomato: createColorTheme('tomato'),
+    red: createColorTheme('red'),
+    ruby: createColorTheme('ruby'),
+    crimson: createColorTheme('crimson'),
+    pink: createColorTheme('pink'),
+    plum: createColorTheme('plum'),
+    purple: createColorTheme('purple'),
+    violet: createColorTheme('violet'),
+    iris: createColorTheme('iris'),
+    cyan: createColorTheme('cyan'),
+    teal: createColorTheme('teal'),
+    jade: createColorTheme('jade'),
+    green: createColorTheme('green'),
+    grass: createColorTheme('grass'),
+    brown: createColorTheme('brown'),
+    sky: createColorTheme('sky'),
+    mint: createColorTheme('mint'),
+    yellow: createColorTheme('yellow'),
+    amber: createColorTheme('amber'),
+    gold: createColorTheme('gold'),
+    bronze: createColorTheme('bronze'),
+    gray: createColorTheme('gray'),
+    blue: createColorTheme('blue'),
+    orange: createColorTheme('orange'),
+    indigo: createColorTheme('indigo'),
+    magenta: createColorTheme('magenta'),
+    lemon: createColorTheme('lemon'),
+    lime: createColorTheme('lime'),
+};
+/**
+ * Gets the accent color theme for a given color.
+ * Returns the pre-defined vars object for that color.
+ *
+ * @example
+ * const theme = getAccentColorTheme('yellow');
+ * <View style={theme}>
+ *   <Text className="text-accent-11">This will be yellow-11</Text>
+ * </View>
+ */
+export function getAccentColorTheme(color) {
+    return colorThemes[color];
+}
+//# sourceMappingURL=color-utils.js.map

package/dist/lib/color-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-utils.js","sourceRoot":"","sources":["../../src/lib/color-utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAGlC;;;GAGG;AACH,SAAS,gBAAgB,CAAC,SAAiB;IACzC,OAAO,IAAI,CAAC;QACV,YAAY,EAAE,SAAS,SAAS,KAAK;QACrC,YAAY,EAAE,SAAS,SAAS,KAAK;QACrC,YAAY,EAAE,SAAS,SAAS,KAAK;QACrC,YAAY,EAAE,SAAS,SAAS,KAAK;QACrC,YAAY,EAAE,SAAS,SAAS,KAAK;QACrC,YAAY,EAAE,SAAS,SAAS,KAAK;QACrC,YAAY,EAAE,SAAS,SAAS,KAAK;QACrC,YAAY,EAAE,SAAS,SAAS,KAAK;QACrC,YAAY,EAAE,SAAS,SAAS,KAAK;QACrC,qBAAqB,EAAE,SAAS,SAAS,cAAc;QACvD,aAAa,EAAE,SAAS,SAAS,MAAM;QACvC,aAAa,EAAE,SAAS,SAAS,MAAM;QACvC,aAAa,EAAE,SAAS,SAAS,MAAM;QACvC,aAAa,EAAE,SAAS,SAAS,MAAM;QACvC,aAAa,EAAE,SAAS,SAAS,MAAM;QACvC,aAAa,EAAE,SAAS,SAAS,MAAM;QACvC,aAAa,EAAE,SAAS,SAAS,MAAM;QACvC,aAAa,EAAE,SAAS,SAAS,MAAM;QACvC,aAAa,EAAE,SAAS,SAAS,MAAM;QACvC,aAAa,EAAE,SAAS,SAAS,MAAM;QACvC,aAAa,EAAE,SAAS,SAAS,MAAM;QACvC,aAAa,EAAE,SAAS,SAAS,MAAM;QACvC,cAAc,EAAE,SAAS,SAAS,OAAO;QACzC,cAAc,EAAE,SAAS,SAAS,OAAO;QACzC,cAAc,EAAE,SAAS,SAAS,OAAO;KAC1C,CAAC,CAAC;AACL,CAAC;AAED;;;;;GAKG;AACH,MAAM,CAAC,MAAM,WAAW,GAAiD;IACvE,MAAM,EAAE,gBAAgB,CAAC,QAAQ,CAAC;IAClC,GAAG,EAAE,gBAAgB,CAAC,KAAK,CAAC;IAC5B,IAAI,EAAE,gBAAgB,CAAC,MAAM,CAAC;IAC9B,OAAO,EAAE,gBAAgB,CAAC,SAAS,CAAC;IACpC,IAAI,EAAE,gBAAgB,CAAC,MAAM,CAAC;IAC9B,IAAI,EAAE,gBAAgB,CAAC,MAAM,CAAC;IAC9B,MAAM,EAAE,gBAAgB,CAAC,QAAQ,CAAC;IAClC,MAAM,EAAE,gBAAgB,CAAC,QAAQ,CAAC;IAClC,IAAI,EAAE,gBAAgB,CAAC,MAAM,CAAC;IAC9B,IAAI,EAAE,gBAAgB,CAAC,MAAM,CAAC;IAC9B,IAAI,EAAE,gBAAgB,CAAC,MAAM,CAAC;IAC9B,IAAI,EAAE,gBAAgB,CAAC,MAAM,CAAC;IAC9B,KAAK,EAAE,gBAAgB,CAAC,OAAO,CAAC;IAChC,KAAK,EAAE,gBAAgB,CAAC,OAAO,CAAC;IAChC,KAAK,EAAE,gBAAgB,CAAC,OAAO,CAAC;IAChC,GAAG,EAAE,gBAAgB,CAAC,KAAK,CAAC;IAC5B,IAAI,EAAE,gBAAgB,CAAC,MAAM,CAAC;IAC9B,MAAM,EAAE,gBAAgB,CAAC,QAAQ,CAAC;IAClC,KAAK,EAAE,gBAAgB,CAAC,OAAO,CAAC;IAChC,IAAI,EAAE,gBAAgB,CAAC,MAAM,CAAC;IAC9B,MAAM,EAAE,gBAAgB,CAAC,QAAQ,CAAC;IAClC,IAAI,EAAE,gBAAgB,CAAC,MAAM,CAAC;IAC9B,IAAI,EAAE,gBAAgB,CAAC,MAAM,CAAC;IAC9B,MAAM,EAAE,gBAAgB,CAAC,QAAQ,CAAC;IAClC,MAAM,EAAE,gBAAgB,CAAC,QAAQ,CAAC;IAClC,OAAO,EAAE,gBAAgB,CAAC,SAAS,CAAC;IACpC,KAAK,EAAE,gBAAgB,CAAC,OAAO,CAAC;IAChC,IAAI,EAAE,gBAAgB,CAAC,MAAM,CAAC;CAC/B,CAAC;AAEF;;;;;;;;;GASG;AACH,MAAM,UAAU,mBAAmB,CAAC,KAAkB;IACpD,OAAO,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,CAAC"}

package/dist/lib/dialog-styles.d.ts

@@ -0,0 +1,42 @@
+import { type StyleProp, type ViewStyle } from 'react-native';
+export type DialogSize = '1' | '2' | '3' | '4';
+interface ThemeColors {
+    panelSolid: string;
+    palettes: {
+        gray: {
+            a3: string;
+            a6: string;
+            a7: string;
+        };
+        black: {
+            a3: string;
+            a4: string;
+            a6: string;
+            a11: string;
+        };
+    };
+}
+export declare function getDialogSizeStyles(size: DialogSize): {
+    padding: number;
+    borderRadius: number;
+    titleMarginBottom: number;
+    descriptionMarginBottom: number;
+    minWidth: number;
+};
+export declare function getDialogTitleSize(size: DialogSize): '3' | '5' | '6';
+export declare function getDialogDescriptionSize(size: DialogSize): '1' | '2' | '3';
+export declare function getDialogShadowStyle(gray: {
+    a3: string;
+    a6: string;
+    a7: string;
+}, black: {
+    a3: string;
+    a4: string;
+    a6: string;
+    a11: string;
+}, isDark: boolean): ViewStyle;
+export declare function getDialogOverlayStyle(): ViewStyle;
+export declare function getDialogBackdropStyle(): ViewStyle;
+export declare function getDialogContentStyle(size: DialogSize, colors: ThemeColors, isDark: boolean, windowWidth: number, userStyle?: StyleProp<ViewStyle>): ViewStyle;
+export {};
+//# sourceMappingURL=dialog-styles.d.ts.map

package/dist/lib/dialog-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-styles.d.ts","sourceRoot":"","sources":["../../src/lib/dialog-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAMxE,MAAM,MAAM,UAAU,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAE/C,UAAU,WAAW;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,EAAE,EAAE,MAAM,CAAC;YACX,EAAE,EAAE,MAAM,CAAC;YACX,EAAE,EAAE,MAAM,CAAC;SACZ,CAAC;QACF,KAAK,EAAE;YACL,EAAE,EAAE,MAAM,CAAC;YACX,EAAE,EAAE,MAAM,CAAC;YACX,EAAE,EAAE,MAAM,CAAC;YACX,GAAG,EAAE,MAAM,CAAC;SACb,CAAC;KACH,CAAC;CACH;AAMD,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,UAAU;;;;;;EAmCnD;AAED,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,UAAU,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAUpE;AAED,wBAAgB,wBAAwB,CAAC,IAAI,EAAE,UAAU,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAU1E;AAMD,wBAAgB,oBAAoB,CAClC,IAAI,EAAE;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,EAC5C,KAAK,EAAE;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,EAC1D,MAAM,EAAE,OAAO,GACd,SAAS,CAoBX;AAMD,wBAAgB,qBAAqB,IAAI,SAAS,CAejD;AAED,wBAAgB,sBAAsB,IAAI,SAAS,CAsBlD;AAMD,wBAAgB,qBAAqB,CACnC,IAAI,EAAE,UAAU,EAChB,MAAM,EAAE,WAAW,EACnB,MAAM,EAAE,OAAO,EACf,WAAW,EAAE,MAAM,EACnB,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,GAC/B,SAAS,CAsCX"}

package/dist/lib/dialog-styles.js

@@ -0,0 +1,162 @@
+import { Platform } from 'react-native';
+// ============================================================================
+// Size helpers
+// ============================================================================
+export function getDialogSizeStyles(size) {
+    switch (size) {
+        case '1':
+            return {
+                padding: 12, // space-3
+                borderRadius: 8,
+                titleMarginBottom: 4, // space-1
+                descriptionMarginBottom: 12, // space-3
+                minWidth: 200,
+            };
+        case '2':
+            return {
+                padding: 16, // space-4
+                borderRadius: 12,
+                titleMarginBottom: 8, // space-2
+                descriptionMarginBottom: 16, // space-4
+                minWidth: 240,
+            };
+        case '3':
+            return {
+                padding: 20,
+                borderRadius: 16,
+                titleMarginBottom: 12, // space-3
+                descriptionMarginBottom: 20,
+                minWidth: 280,
+            };
+        case '4':
+            return {
+                padding: 24, // space-5
+                borderRadius: 20,
+                titleMarginBottom: 12, // space-3
+                descriptionMarginBottom: 24, // space-5
+                minWidth: 320,
+            };
+    }
+}
+export function getDialogTitleSize(size) {
+    switch (size) {
+        case '1':
+            return '3';
+        case '2':
+        case '3':
+            return '5';
+        case '4':
+            return '6';
+    }
+}
+export function getDialogDescriptionSize(size) {
+    switch (size) {
+        case '1':
+            return '1';
+        case '2':
+        case '3':
+            return '2';
+        case '4':
+            return '3';
+    }
+}
+// ============================================================================
+// Shadow helper (shadow-6)
+// ============================================================================
+export function getDialogShadowStyle(gray, black, isDark) {
+    if (Platform.OS === 'web') {
+        const boxShadow = isDark
+            ? `0 0 0 1px ${gray.a6}, 0 12px 60px ${black.a4}, 0 16px 64px ${black.a6}, 0 16px 36px -20px ${black.a11}`
+            : `0 0 0 1px ${gray.a3}, 0 12px 60px ${black.a3}, 0 16px 64px ${gray.a3}, 0 16px 36px -20px ${gray.a7}`;
+        return { boxShadow };
+    }
+    // Native shadow approximation
+    return {
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 16 },
+        shadowOpacity: isDark ? 0.5 : 0.25,
+        shadowRadius: 32,
+        elevation: 24,
+        // Add border for native
+        borderWidth: 1,
+        borderColor: isDark ? gray.a6 : gray.a3,
+    };
+}
+// ============================================================================
+// Overlay styles
+// ============================================================================
+export function getDialogOverlayStyle() {
+    return {
+        position: Platform.OS === 'web' ? 'fixed' : 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        zIndex: 50,
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingTop: 16, // space-4
+        paddingBottom: 32, // max(space-4, 4vh) approximation
+        paddingLeft: 16, // space-4
+        paddingRight: 16, // space-4
+    };
+}
+export function getDialogBackdropStyle() {
+    if (Platform.OS === 'web') {
+        return {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backdropFilter: 'blur(3px) brightness(0.7)',
+            WebkitBackdropFilter: 'blur(3px) brightness(0.7)',
+        };
+    }
+    // Native: semi-transparent black backdrop
+    return {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    };
+}
+// ============================================================================
+// Content styles
+// ============================================================================
+export function getDialogContentStyle(size, colors, isDark, windowWidth, userStyle) {
+    const sizeStyles = getDialogSizeStyles(size);
+    const gray = colors.palettes.gray;
+    const black = colors.palettes.black;
+    const shadowStyle = getDialogShadowStyle(gray, black, isDark);
+    // Calculate available width (screen width minus overlay padding)
+    const overlayPadding = 16; // space-4
+    const availableWidth = windowWidth - overlayPadding * 2;
+    const defaultMaxWidth = 580;
+    // Extract maxWidth from style prop if provided
+    const flatStyle = userStyle
+        ? Array.isArray(userStyle)
+            ? Object.assign({}, ...userStyle.filter((s) => s != null && typeof s === 'object'))
+            : typeof userStyle === 'object' && userStyle != null
+                ? userStyle
+                : {}
+        : {};
+    const userMaxWidth = flatStyle.maxWidth;
+    const effectiveMaxWidth = typeof userMaxWidth === 'number' ? userMaxWidth : defaultMaxWidth;
+    return {
+        // On web, width: '100%' works with flexbox centering
+        // On native, we calculate a fixed width based on available space and maxWidth
+        width: Platform.OS === 'web' ? '100%' : Math.min(availableWidth, effectiveMaxWidth),
+        minWidth: sizeStyles.minWidth,
+        maxWidth: defaultMaxWidth,
+        backgroundColor: colors.panelSolid,
+        padding: sizeStyles.padding,
+        borderRadius: sizeStyles.borderRadius,
+        overflow: Platform.OS === 'web' ? 'auto' : 'hidden',
+        zIndex: 1,
+        ...shadowStyle,
+    };
+}
+//# sourceMappingURL=dialog-styles.js.map