@app-studio/components 0.10.17

package/dist/native/components/Background/Background/Background.view.native.js

@@ -0,0 +1,79 @@
+import React, { createContext } from 'react';
+import { View } from 'app-studio';
+import { DefaultBackgroundStyles } from './Background.style';
+import { Gradient } from '../../Gradient/Gradient';
+// React Native version of Background. Most of the web background variants
+// (Aurora, Meteors, Wall, Particles, Grid, Ripples) rely on CSS gradients,
+// keyframe animations, mask-images and video tags that have no equivalent on
+// RN. We render simplified, animation-less placeholders so the component tree
+// at least mounts cleanly. Apps wanting these effects on native should swap
+// in dedicated implementations.
+const BackgroundContext = createContext({});
+const AuroraBackground = ({ children, views, themeMode: elementMode, ...props }) => {
+    return (<View backgroundColor="color-gray-900" overflow="hidden" {...views?.container} {...props}>
+      {children}
+    </View>);
+};
+const Meteors = ({ children, ...props }) => {
+    return (<View width="100%" height="100%" backgroundColor="black" position="relative" overflow="hidden" {...props}>
+      {children && (<View position="relative" zIndex={1} width="100%" height="100%">
+          {children}
+        </View>)}
+    </View>);
+};
+const Wall = ({ ...props }) => {
+    return (<View width={400} height={300} backgroundColor="color-gray-50" {...props}/>);
+};
+const Particles = ({ ...props }) => {
+    return (<View width={400} height={300} backgroundColor="color-gray-900" {...props}/>);
+};
+const Grid = ({ ...props }) => {
+    return (<View width={400} height={300} backgroundColor="color-gray-900" {...props}/>);
+};
+const Ripples = ({ ...props }) => {
+    return (<View width={400} height={300} backgroundColor="color-gray-100" {...props}/>);
+};
+const BackgroundImage = ({ children, overlay = null, views, themeMode: elementMode, ...props }) => {
+    return (<View {...views?.container} {...props}>
+      {overlay}
+      {children && <View {...views?.content}>{children}</View>}
+    </View>);
+};
+const BackgroundVideo = ({ children, overlay = null, views, themeMode: elementMode, ...props }) => {
+    return (<View {...views?.container} {...props}>
+      {overlay}
+      {children && <View {...views?.content}>{children}</View>}
+    </View>);
+};
+const BackgroundGradient = ({ children, ...gradientProps }) => {
+    return <Gradient {...gradientProps}>{children}</Gradient>;
+};
+const BackgroundOverlay = ({ backgroundColor = 'color-black-900', ...props }) => {
+    return (<View position="absolute" top={0} left={0} width="100%" height="100%" backgroundColor={backgroundColor} opacity={0.4} pointerEvents="none" zIndex={1} {...props}/>);
+};
+const BackgroundViewBase = ({ children, views, ...props }) => {
+    return (<BackgroundContext.Provider value={{}}>
+      <View {...DefaultBackgroundStyles.container} {...views?.container} {...props}>
+        {children}
+      </View>
+    </BackgroundContext.Provider>);
+};
+export const BackgroundLayout = React.forwardRef(({ children, views, ...props }, ref) => {
+    return (<View ref={ref} position="relative" {...views?.container} {...props}>
+        <View {...views?.content}>{children}</View>
+      </View>);
+});
+BackgroundLayout.displayName = 'Background.Layout';
+export const BackgroundView = BackgroundViewBase;
+BackgroundView.Aurora = AuroraBackground;
+BackgroundView.Meteors = Meteors;
+BackgroundView.Wall = Wall;
+BackgroundView.Particles = Particles;
+BackgroundView.Grid = Grid;
+BackgroundView.Ripples = Ripples;
+BackgroundView.Image = BackgroundImage;
+BackgroundView.Video = BackgroundVideo;
+BackgroundView.Gradient = BackgroundGradient;
+BackgroundView.Overlay = BackgroundOverlay;
+BackgroundView.Layout = BackgroundLayout;
+//# sourceMappingURL=Background.view.native.js.map

package/dist/native/components/Background/Background/Background.view.native.js.map

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

package/dist/native/components/Background/Background.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { BackgroundProps } from './Background/Background.props';
+export declare const Background: React.ForwardRefExoticComponent<BackgroundProps & React.RefAttributes<HTMLDivElement>> & {
+    Layout: React.FC<import("./Background/Background.props").BackgroundLayoutProps>;
+    Aurora: React.FC<import("./Background/Background.props").AuroraBackgroundProps>;
+    Meteors: React.FC<import("./Background/Background.props").MeteorsProps>;
+    Wall: React.FC<import("./Background/Background.props").WallProps>;
+    Particles: React.FC<import("./Background/Background.props").ParticlesProps>;
+    Grid: React.FC<import("./Background/Background.props").GridProps>;
+    Ripples: React.FC<import("./Background/Background.props").RipplesProps>;
+    Image: React.FC<import("./Background/Background.props").BackgroundImageProps>;
+    Video: React.FC<import("./Background/Background.props").BackgroundVideoProps>;
+    Gradient: React.FC<import("./Background/Background.props").BackgroundGradientProps>;
+    Overlay: React.FC<import("./Background/Background.props").BackgroundOverlayProps>;
+};

package/dist/native/components/Background/Background.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { BackgroundView } from './Background/Background.view';
+const BackgroundComponent = React.forwardRef((props, ref) => <BackgroundView {...props} ref={ref}/>);
+BackgroundComponent.displayName = 'Background';
+// This file defines the main `Background` component, which utilizes `React.forwardRef` to pass a ref to its underlying view. It then statically extends the `Background` component by attaching various specialized background variants (such as `Layout`, `Aurora`, `Meteors`, etc.) directly from `BackgroundView`, making them accessible as `Background.VariantName` properties.
+export const Background = Object.assign(BackgroundComponent, {
+    Layout: BackgroundView.Layout,
+    Aurora: BackgroundView.Aurora,
+    Meteors: BackgroundView.Meteors,
+    Wall: BackgroundView.Wall,
+    Particles: BackgroundView.Particles,
+    Grid: BackgroundView.Grid,
+    Ripples: BackgroundView.Ripples,
+    Image: BackgroundView.Image,
+    Video: BackgroundView.Video,
+    Gradient: BackgroundView.Gradient,
+    Overlay: BackgroundView.Overlay,
+});
+Background.displayName = 'Background';
+//# sourceMappingURL=Background.js.map

package/dist/native/components/Background/Background.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Background.js","sourceRoot":"","sources":["../../../../src/components/Background/Background.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9D,MAAM,mBAAmB,GAAG,KAAK,CAAC,UAAU,CAC1C,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,CAAC,cAAc,CAAC,IAAK,KAAa,CAAC,CAAC,GAAG,CAAC,CAAC,GAAU,CAAC,EAAG,CACxE,CAAC;AACF,mBAAmB,CAAC,WAAW,GAAG,YAAY,CAAC;AAC/C,qXAAqX;AACrX,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,mBAAmB,EAAE;IAC3D,MAAM,EAAE,cAAc,CAAC,MAAM;IAC7B,MAAM,EAAE,cAAc,CAAC,MAAM;IAC7B,OAAO,EAAE,cAAc,CAAC,OAAO;IAC/B,IAAI,EAAE,cAAc,CAAC,IAAI;IACzB,SAAS,EAAE,cAAc,CAAC,SAAS;IACnC,IAAI,EAAE,cAAc,CAAC,IAAI;IACzB,OAAO,EAAE,cAAc,CAAC,OAAO;IAC/B,KAAK,EAAE,cAAc,CAAC,KAAK;IAC3B,KAAK,EAAE,cAAc,CAAC,KAAK;IAC3B,QAAQ,EAAE,cAAc,CAAC,QAAQ;IACjC,OAAO,EAAE,cAAc,CAAC,OAAO;CAChC,CAAC,CAAC;AACH,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC"}

package/dist/native/components/Background/index.d.ts

@@ -0,0 +1,3 @@
+export { Background } from './Background';
+export type { BackgroundProps, AuroraBackgroundProps, MeteorsProps, WallProps, ParticlesProps, GridProps, RipplesProps, BackgroundImageProps, BackgroundVideoProps, BackgroundGradientProps, BackgroundStyles, } from './Background/Background.props';
+export type { BackgroundEffect, AuroraDirection, MeteorTiming, BorderAnimationStyles, StrokeAnimationStyles, BackgroundContextType, BackgroundSize, BackgroundPosition, BackgroundRepeat, BlendMode, } from './Background/Background.type';

package/dist/native/components/Background/index.js

@@ -0,0 +1,3 @@
+// Serves as the main entry point for the Background component module, exporting the primary component and all associated types for external use.
+export { Background } from './Background';
+//# sourceMappingURL=index.js.map

package/dist/native/components/Background/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Background/index.ts"],"names":[],"mappings":"AAAA,iJAAiJ;AACjJ,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC"}

package/dist/native/components/Badge/Badge/Badge.props.d.ts

@@ -0,0 +1,21 @@
+import { Size, Variant, Shape, Position, BadgeStyles } from './Badge.type';
+import { ViewProps } from 'app-studio';
+export interface BadgeProps extends Omit<ViewProps, 'content' | 'position'> {
+    content?: string | number;
+    children?: React.ReactNode;
+    icon?: React.ReactNode;
+    pastil?: boolean | string;
+    pastilContent?: React.ReactNode;
+    action?: React.ReactNode;
+    variant?: Variant;
+    position?: Position;
+    size?: Size;
+    shape?: Shape;
+    views?: BadgeStyles;
+    /**
+     * Auto-derive a foreground color from the badge's background color
+     * (used by examples that loop over theme tokens for the `content` prop).
+     */
+    isAuto?: boolean;
+    config?: Record<string, unknown>;
+}

package/dist/native/components/Badge/Badge/Badge.props.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Badge.props.js.map

package/dist/native/components/Badge/Badge/Badge.props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.props.js","sourceRoot":"","sources":["../../../../../src/components/Badge/Badge/Badge.props.ts"],"names":[],"mappings":""}

package/dist/native/components/Badge/Badge/Badge.style.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Badge Styles
+ *
+ * Defines the styles for the Badge component following the design guidelines:
+ * - Typography: Inter/Geist font, specific sizes/weights
+ * - Spacing: 4px grid system
+ * - Colors: Neutral palette with semantic colors
+ * - Rounded corners: Consistent border radius
+ * - Transitions: Subtle animations
+ */
+import { ViewProps } from 'app-studio';
+import { Shape, Size, Variant } from './Badge.type';
+/**
+ * Badge sizes following the 4px grid system
+ */
+export declare const BadgeSizes: Record<Size, ViewProps>;
+export declare const BadgeAnnouncementSizes: Record<Size, ViewProps>;
+export declare const BadgePastilContentSizes: Record<Size, ViewProps>;
+export declare const BadgeAnnouncementTextSizes: Record<Size, ViewProps>;
+/**
+ * Badge shapes with consistent border radius
+ */
+export declare const BadgeShapes: Record<Shape, number | string>;
+/**
+ * Badge positions for absolute positioning
+ */
+export declare const PositionStyles: {
+    [key: string]: React.CSSProperties;
+};
+export declare const getBadgeAnnouncementVariant: (themeMode: string) => ViewProps;
+/**
+ * Get badge variants with consistent styling based on theme mode
+ */
+export declare const getBadgeVariants: (themeMode: string) => Record<Variant, ViewProps>;
+/**
+ * Default badge variants for backward compatibility
+ */
+export declare const BadgeVariants: Record<Variant, ViewProps>;

package/dist/native/components/Badge/Badge/Badge.style.js

@@ -0,0 +1,240 @@
+/**
+ * Badge Styles
+ *
+ * Defines the styles for the Badge component following the design guidelines:
+ * - Typography: Inter/Geist font, specific sizes/weights
+ * - Spacing: 4px grid system
+ * - Colors: Neutral palette with semantic colors
+ * - Rounded corners: Consistent border radius
+ * - Transitions: Subtle animations
+ */
+/**
+ * Badge sizes following the 4px grid system
+ */
+export const BadgeSizes = {
+    xs: {
+        minWidth: '20px',
+        height: '20px',
+        padding: '0 6px',
+        fontSize: '10px',
+        fontWeight: '600',
+        lineHeight: '12px',
+        letterSpacing: '-0.01em',
+    },
+    sm: {
+        minWidth: '24px',
+        height: '24px',
+        padding: '0 8px',
+        fontSize: '12px',
+        fontWeight: '600',
+        lineHeight: '16px',
+        letterSpacing: '-0.01em',
+    },
+    md: {
+        minWidth: '28px',
+        height: '28px',
+        padding: '0 10px',
+        fontSize: '14px',
+        fontWeight: '600',
+        lineHeight: '20px',
+        letterSpacing: '-0.01em',
+    },
+    lg: {
+        minWidth: '32px',
+        height: '32px',
+        padding: '0 12px',
+        fontSize: '16px',
+        fontWeight: '600',
+        lineHeight: '24px',
+        letterSpacing: '-0.01em',
+    },
+    xl: {
+        minWidth: '36px',
+        height: '36px',
+        padding: '0 14px',
+        fontSize: '20px',
+        fontWeight: '600',
+        lineHeight: '28px',
+        letterSpacing: '-0.01em',
+    },
+};
+export const BadgeAnnouncementSizes = {
+    xs: {
+        gap: '6px',
+        padding: '3px 8px 3px 3px',
+    },
+    sm: {
+        gap: '8px',
+        padding: '4px 10px 4px 4px',
+    },
+    md: {
+        gap: '12px',
+        padding: '6px 16px 6px 6px',
+    },
+    lg: {
+        gap: '12px',
+        padding: '7px 18px 7px 7px',
+    },
+    xl: {
+        gap: '14px',
+        padding: '8px 20px 8px 8px',
+    },
+};
+export const BadgePastilContentSizes = {
+    xs: {
+        padding: '2px 6px',
+        fontSize: '9px',
+        lineHeight: '12px',
+    },
+    sm: {
+        padding: '3px 8px',
+        fontSize: '10px',
+        lineHeight: '14px',
+    },
+    md: {
+        padding: '6px 12px',
+        fontSize: '11px',
+        lineHeight: '14px',
+    },
+    lg: {
+        padding: '7px 14px',
+        fontSize: '12px',
+        lineHeight: '16px',
+    },
+    xl: {
+        padding: '8px 16px',
+        fontSize: '13px',
+        lineHeight: '18px',
+    },
+};
+export const BadgeAnnouncementTextSizes = {
+    xs: {
+        fontSize: '11px',
+        lineHeight: '14px',
+    },
+    sm: {
+        fontSize: '12px',
+        lineHeight: '16px',
+    },
+    md: {
+        fontSize: '13px',
+        lineHeight: '18px',
+    },
+    lg: {
+        fontSize: '14px',
+        lineHeight: '20px',
+    },
+    xl: {
+        fontSize: '15px',
+        lineHeight: '22px',
+    },
+};
+/**
+ * Badge shapes with consistent border radius
+ */
+export const BadgeShapes = {
+    square: 0,
+    rounded: '8px', // Consistent with design system (rounded-md)
+    pill: '9999px', // Full rounded for pill shape
+};
+/**
+ * Badge positions for absolute positioning
+ */
+export const PositionStyles = {
+    'top-right': { top: '4px', right: '4px', position: 'absolute' }, // 4px offset (1 × 4px grid)
+    'top-left': { top: '4px', left: '4px', position: 'absolute' },
+    'bottom-right': { bottom: '4px', right: '4px', position: 'absolute' },
+    'bottom-left': { bottom: '4px', left: '4px', position: 'absolute' },
+};
+export const getBadgeAnnouncementVariant = (themeMode) => {
+    const isDark = themeMode === 'dark';
+    return {
+        display: 'inline-flex',
+        height: 'auto',
+        minWidth: 'auto',
+        backgroundColor: isDark
+            ? 'rgba(39, 39, 42, 0.68)'
+            : 'rgba(255, 255, 255, 0.6)',
+        color: isDark ? 'color-white' : 'color-gray-900',
+        borderWidth: '1px',
+        borderStyle: 'solid',
+        borderColor: isDark ? 'rgba(255, 255, 255, 0.16)' : 'color-white',
+        backdropFilter: 'blur(12px)',
+        boxShadow: '0 1px 2px rgba(15, 23, 42, 0.08)',
+        transition: 'background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease',
+        _hover: {
+            backgroundColor: isDark
+                ? 'rgba(63, 63, 70, 0.76)'
+                : 'rgba(255, 255, 255, 0.8)',
+            boxShadow: '0 2px 8px rgba(15, 23, 42, 0.1)',
+        },
+    };
+};
+/**
+ * Get badge variants with consistent styling based on theme mode
+ */
+export const getBadgeVariants = (themeMode) => {
+    const isDark = themeMode === 'dark';
+    return {
+        filled: {
+            backgroundColor: 'theme-primary',
+            color: 'color-white',
+            borderWidth: '1px',
+            borderStyle: 'solid',
+            borderColor: 'theme-primary',
+            transition: 'background-color 0.2s ease, opacity 0.2s ease',
+            _hover: {
+                opacity: 0.9,
+            },
+            _active: {
+                opacity: 0.95,
+            },
+        },
+        outline: {
+            borderWidth: '1px',
+            borderStyle: 'solid',
+            borderColor: 'theme-primary',
+            color: 'theme-primary',
+            style: { backgroundColor: 'transparent' },
+            transition: 'border-color 0.2s ease, opacity 0.2s ease',
+            _hover: {
+                opacity: 0.9,
+            },
+            _active: {
+                opacity: 0.95,
+            },
+        },
+        link: {
+            borderWidth: 0,
+            borderStyle: 'none',
+            borderColor: 'theme-primary',
+            color: 'theme-primary',
+            textDecoration: 'underline',
+            style: {
+                backgroundColor: 'transparent',
+                textUnderlineOffset: '2px',
+                textDecorationThickness: '1px',
+            },
+            transition: 'opacity 0.2s ease',
+            _hover: {
+                opacity: 0.8,
+            },
+        },
+        ghost: {
+            color: isDark ? 'color-gray-300' : 'color-gray-500',
+            borderWidth: 0,
+            borderStyle: 'solid',
+            borderColor: isDark ? 'color-gray-300' : 'color-gray-500',
+            style: { backgroundColor: 'transparent' },
+            transition: 'background-color 0.2s ease, color 0.2s ease',
+            _hover: {
+                backgroundColor: isDark ? 'color-gray-800' : 'color-gray-100',
+            },
+        },
+    };
+};
+/**
+ * Default badge variants for backward compatibility
+ */
+export const BadgeVariants = getBadgeVariants('light');
+//# sourceMappingURL=Badge.style.js.map

package/dist/native/components/Badge/Badge/Badge.style.js.map

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

package/dist/native/components/Badge/Badge/Badge.type.d.ts

@@ -0,0 +1,13 @@
+import { ViewProps } from 'app-studio';
+export type Shape = 'square' | 'rounded' | 'pill';
+export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type Variant = 'filled' | 'outline' | 'link' | 'ghost';
+export type Position = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+export type BadgeStyles = {
+    container?: ViewProps;
+    text?: ViewProps;
+    icon?: ViewProps;
+    pastil?: ViewProps;
+    pastilContent?: ViewProps;
+    action?: ViewProps;
+};

package/dist/native/components/Badge/Badge/Badge.type.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Badge.type.js.map

package/dist/native/components/Badge/Badge/Badge.type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.type.js","sourceRoot":"","sources":["../../../../../src/components/Badge/Badge/Badge.type.ts"],"names":[],"mappings":""}

package/dist/native/components/Badge/Badge/Badge.view.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Badge View Component
+ *
+ * Renders a badge with various styles and states according to the design guidelines.
+ */
+import React from 'react';
+import { BadgeProps } from './Badge.props';
+/**
+ * Badge View Component
+ */
+declare const BadgeView: React.FC<BadgeProps>;
+export default BadgeView;

package/dist/native/components/Badge/Badge/Badge.view.js

@@ -0,0 +1,115 @@
+/**
+ * Badge View Component
+ *
+ * Renders a badge with various styles and states according to the design guidelines.
+ */
+import React, { useMemo } from 'react';
+import { BadgeAnnouncementSizes, BadgeAnnouncementTextSizes, BadgePastilContentSizes, BadgeShapes, BadgeSizes, PositionStyles, getBadgeAnnouncementVariant, getBadgeVariants, } from './Badge.style';
+import { Center, useTheme, View } from 'app-studio';
+import { Text } from 'app-studio';
+import { getThemes } from '../../StatusIndicator/StatusIndicator/StatusIndicator.style';
+// No need to import ViewProps as it's not used directly
+/**
+ * Badge View Component
+ */
+const BadgeView = React.memo(({ content, children, icon, pastil, pastilContent, action, position, shape = 'pill', variant = 'filled', size = 'md', views, themeMode: elementMode, ...props }) => {
+    const { themeMode } = useTheme();
+    const currentThemeMode = elementMode || themeMode;
+    const variantStyles = useMemo(() => getBadgeVariants(currentThemeMode)[variant], [currentThemeMode, variant]);
+    const announcementVariantStyles = useMemo(() => getBadgeAnnouncementVariant(currentThemeMode), [currentThemeMode]);
+    const statusThemes = useMemo(() => getThemes(currentThemeMode), [currentThemeMode]);
+    const hasPastilContent = pastilContent !== undefined && pastilContent !== null;
+    const hasAction = action !== undefined && action !== null;
+    const hasAnnouncementLayout = hasPastilContent || hasAction;
+    const contentNode = children !== undefined && children !== null ? children : content;
+    const hasContent = contentNode !== undefined && contentNode !== null;
+    // Combine styles for the badge (memoized to avoid recreation on every render)
+    // For non-filled variants (outline/ghost/link), reapply the variant's color
+    // and background AFTER the brand container styles so the variant wins —
+    // otherwise a brand container.color set for filled badges (e.g. white)
+    // would also paint outline badge text white on a white surface.
+    const combinedStyles = useMemo(() => {
+        const base = {
+            width: 'fit-content',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: '6px',
+            borderRadius: BadgeShapes[shape],
+            ...BadgeSizes[size],
+            ...variantStyles,
+            ...(hasAnnouncementLayout ? BadgeAnnouncementSizes[size] : {}),
+            ...(hasAnnouncementLayout ? announcementVariantStyles : {}),
+            ...(position ? PositionStyles[position] : {}),
+            ...views?.container,
+        };
+        if (variant !== 'filled' && !hasAnnouncementLayout) {
+            if (variantStyles.color !== undefined) {
+                base.color = variantStyles.color;
+            }
+            if (variantStyles.borderColor !== undefined) {
+                base.borderColor = variantStyles.borderColor;
+            }
+            if (variantStyles.backgroundColor !== undefined) {
+                base.backgroundColor = variantStyles.backgroundColor;
+            }
+            if (variantStyles && variantStyles.style) {
+                base.style = {
+                    ...(base.style || {}),
+                    ...variantStyles.style,
+                };
+            }
+        }
+        return base;
+    }, [
+        shape,
+        size,
+        variant,
+        variantStyles,
+        hasAnnouncementLayout,
+        announcementVariantStyles,
+        position,
+        views?.container,
+    ]);
+    // Determine pastil color
+    let pastilColor = 'currentColor';
+    if (typeof pastil === 'string') {
+        if (pastil in statusThemes) {
+            pastilColor = statusThemes[pastil].indicator.backgroundColor;
+        }
+        else {
+            pastilColor = pastil;
+        }
+    }
+    else if (pastil === true) {
+        // Default pastil color if simply true
+        pastilColor = 'color-green-500'; // Example default or inherit
+        if (variant === 'filled')
+            pastilColor = 'color-white';
+    }
+    return (<Center role="badge" {...combinedStyles} {...props}>
+        {icon && (<View role="badge-icon" {...views?.icon}>
+            {icon}
+          </View>)}
+
+        {hasPastilContent && (<Text role="badge-pastil-content" backgroundColor={currentThemeMode === 'dark' ? 'color-white' : 'color-gray-900'} borderRadius="9999px" color={currentThemeMode === 'dark' ? 'color-gray-900' : 'color-white'} fontWeight="700" letterSpacing={0} textTransform="uppercase" whiteSpace="nowrap" {...BadgePastilContentSizes[size]} {...views?.pastilContent}>
+            {pastilContent}
+          </Text>)}
+
+        {pastil && (<View role="badge-pastil" width="6px" height="6px" borderRadius="50%" backgroundColor={pastilColor} {...views?.pastil}/>)}
+
+        {hasContent && (<Text role="badgeText" color={hasAnnouncementLayout
+                ? currentThemeMode === 'dark'
+                    ? 'color-gray-50'
+                    : 'color-gray-900'
+                : combinedStyles.color} fontWeight={hasAnnouncementLayout ? '700' : '600'} textAlign="center" letterSpacing={hasAnnouncementLayout ? 0 : '0.02em'} whiteSpace={hasAnnouncementLayout ? 'nowrap' : undefined} {...(hasAnnouncementLayout ? BadgeAnnouncementTextSizes[size] : {})} {...views?.text}>
+            {contentNode}
+          </Text>)}
+
+        {hasAction && (<Text role="badge-action" color="color-gray-400" fontWeight="500" letterSpacing={0} whiteSpace="nowrap" {...BadgeAnnouncementTextSizes[size]} {...views?.action}>
+            {action}
+          </Text>)}
+      </Center>);
+});
+export default BadgeView;
+//# sourceMappingURL=Badge.view.js.map

package/dist/native/components/Badge/Badge/Badge.view.js.map

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

package/dist/native/components/Badge/Badge.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { BadgeProps } from './Badge/Badge.props';
+export declare const Badge: (props: BadgeProps) => React.JSX.Element;

package/dist/native/components/Badge/Badge.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import BadgeView from './Badge/Badge.view';
+import { useMergedDesignSystemComponentProps } from '../../design-system';
+// Badge component that displays a small indicator, typically used for counts or status
+export const Badge = (props) => {
+    const mergedProps = useMergedDesignSystemComponentProps('badge', props);
+    return <BadgeView {...mergedProps}/>;
+};
+//# sourceMappingURL=Badge.js.map

package/dist/native/components/Badge/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,SAAS,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,mCAAmC,EAAE,MAAM,mBAAmB,CAAC;AACxE,uFAAuF;AACvF,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,KAAiB,EAAE,EAAE;IACzC,MAAM,WAAW,GAAG,mCAAmC,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IACxE,OAAO,CAAC,SAAS,CAAC,IAAI,WAAW,CAAC,EAAG,CAAC;AACxC,CAAC,CAAC"}