@thewhileloop/whileui 1.2.3 → 3.0.0

package/dist/components/select/select.js

@@ -1,27 +1,50 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import { Platform, ScrollView, StyleSheet, View } from 'react-native';
+import { Platform, ScrollView, StyleSheet, View, } from 'react-native';
 import * as SelectPrimitive from '@rn-primitives/select';
 import { FullWindowOverlay as RNFullWindowOverlay } from 'react-native-screens';
+import { Text } from '../text';
 import { cn } from '../../lib/cn';
+import { focusRing } from '../../lib/focus-ring';
 import { useInteractionTokens } from '../../lib/interaction-tokens';
 import { useFrostedSurface } from '../../lib/frosted-surface';
+import { useVisualTokens } from '../../lib/visual-tokens';
+import { useThemeColors } from '../../lib/theme-colors';
+import { fieldRecipe, shadowStyle, surfaceRadius, typographyStyle } from '../../lib/recipes';
 // iOS needs FullWindowOverlay to render above everything
 const FullWindowOverlay = Platform.OS === 'ios' ? RNFullWindowOverlay : React.Fragment;
-// ─── Components ──────────────────────────────────────────────
 const Select = SelectPrimitive.Root;
 const SelectGroup = SelectPrimitive.Group;
 const SelectTrigger = React.forwardRef(({ className, children, style: styleProp, ...props }, ref) => {
     const interaction = useInteractionTokens();
-    return (_jsxs(SelectPrimitive.Trigger, { ref: ref, className: cn('border-border bg-muted flex min-h-12 w-full flex-row items-center justify-between gap-2 rounded-lg border px-4 shadow-sm active:bg-state-pressed', props.disabled && '', className), style: [
+    const visual = useVisualTokens();
+    return (_jsxs(SelectPrimitive.Trigger, { ref: ref, className: cn('border-border bg-muted flex w-full flex-row items-center justify-between gap-2 shadow-sm active:bg-state-pressed', focusRing, props.disabled && '', className), 
+        // Pass an array unless the caller actually gave a callback. On web this primitive
+        // is wrapped in a Slot that merges `style` by object spread, which turns a
+        // function into `{}` and silently drops every style — the trigger rendered 24px
+        // tall with no padding, border or radius. A callback is still honoured on native,
+        // where dropping it was the original bug.
+        // Flattened, not an array. On web this primitive is merged through a Slot that
+        // spreads `style`, and spreading an array yields { 0: …, 1: … } — numeric keys
+        // that reach the DOM as indexed style properties and throw. The Select rendered
+        // nothing at all on web because of this.
+        style: StyleSheet.flatten([
+            fieldRecipe(visual, 'default'),
             styleProp,
             props.disabled ? { opacity: interaction.disabledOpacity } : null,
-        ], ...props, children: [_jsx(_Fragment, { children: children }), _jsx(View, { className: "border-muted-foreground h-2 w-2 rotate-45 border-b-2 border-r-2" })] }));
+        ]), ...props, children: [_jsx(_Fragment, { children: children }), _jsx(View, { className: "border-muted-foreground h-2 w-2 rotate-45 border-b-2 border-r-2" })] }));
 });
 SelectTrigger.displayName = 'SelectTrigger';
-function SelectValue({ className, placeholder = 'Select...', ...props }) {
+function SelectValue({ className, placeholder = 'Select...' }) {
     const { value } = SelectPrimitive.useRootContext();
-    return (_jsx(SelectPrimitive.Value, { className: cn('text-foreground text-base', !value && 'text-muted-foreground', className), placeholder: placeholder, ...props }));
+    const visual = useVisualTokens();
+    // The colour is set on a wrapper and inherited, rather than on the primitive itself.
+    // Its web build wraps a Radix span in a `Slot.Text` that drops React Native props, so
+    // neither `className` nor `style` reached the DOM and the text fell back to the
+    // user-agent default black — 1.2:1 on a dark surface. Rendering the label ourselves
+    // instead would fix the colour and lose the value: Radix owns the selection on web,
+    // and `useRootContext().value` is not populated there.
+    return (_jsx(Text, { className: cn('text-foreground', !value && 'text-muted-foreground', className), style: typographyStyle(visual, 'body'), numberOfLines: 1, children: _jsx(SelectPrimitive.Value, { placeholder: placeholder }) }));
 }
 const SelectContent = React.forwardRef(({ className, children, portalHost, position = 'popper', insets, style: styleProp, frosted = false, blurIntensity, blurTintToken, ...props }, ref) => {
     const frostedSurface = useFrostedSurface({
@@ -31,7 +54,17 @@ const SelectContent = React.forwardRef(({ className, children, portalHost, posit
         defaultTintToken: 'popover',
         defaultBlurPreset: 'subtle',
     });
-    return (_jsx(SelectPrimitive.Portal, { hostName: portalHost, children: _jsx(FullWindowOverlay, { children: _jsx(SelectPrimitive.Overlay, { style: Platform.select({ native: StyleSheet.absoluteFill }), children: _jsxs(SelectPrimitive.Content, { ref: ref, position: position, insets: insets, style: StyleSheet.flatten([styleProp, frostedSurface.surfaceStyle]), className: cn('border-border relative z-50 min-w-32 rounded-xl border shadow-lg overflow-hidden', frosted ? 'bg-transparent' : 'bg-popover', Platform.select({
+    const visual = useVisualTokens();
+    const colors = useThemeColors();
+    return (_jsx(SelectPrimitive.Portal, { hostName: portalHost, children: _jsx(FullWindowOverlay, { children: _jsx(SelectPrimitive.Overlay, { style: Platform.select({ native: StyleSheet.absoluteFill }), children: _jsxs(SelectPrimitive.Content, { ref: ref, position: position, insets: insets, style: StyleSheet.flatten([
+                        {
+                            borderRadius: surfaceRadius(visual, 'lg'),
+                            borderWidth: visual.borderWidthHairline,
+                        },
+                        shadowStyle(visual, colors, 'md'),
+                        frostedSurface.surfaceStyle,
+                        styleProp,
+                    ]), className: cn('border-border relative z-50 min-w-32 overflow-hidden', frosted ? 'bg-transparent' : 'bg-popover', Platform.select({
                         web: cn('max-h-96 overflow-y-auto overflow-x-hidden', props.side === 'bottom' && 'translate-y-1', props.side === 'top' && '-translate-y-1'),
                         native: 'p-1',
                     }), className), ...props, children: [frostedSurface.overlay, _jsx(SelectPrimitive.Viewport, { className: cn('p-1', position === 'popper' &&
@@ -42,19 +75,29 @@ const SelectContent = React.forwardRef(({ className, children, portalHost, posit
 SelectContent.displayName = 'SelectContent';
 const SelectItem = React.forwardRef(({ className, children, style: styleProp, ...props }, ref) => {
     const interaction = useInteractionTokens();
-    return (_jsxs(SelectPrimitive.Item, { ref: ref, className: cn('active:bg-accent group relative flex w-full flex-row items-center gap-2 rounded-lg py-3 pl-3 pr-8', Platform.select({
+    const visual = useVisualTokens();
+    return (_jsxs(SelectPrimitive.Item, { ref: ref, className: cn('active:bg-accent group relative flex w-full flex-row items-center gap-2 pr-8', Platform.select({
             web: 'focus:bg-accent focus:text-accent-foreground cursor-default outline-none',
-        }), props.disabled && '', className), style: [
+        }), props.disabled && '', className), style: StyleSheet.flatten([
+            {
+                borderRadius: visual.radiusSm,
+                minHeight: visual.touchTargetMinSize,
+                paddingVertical: visual.controlPaddingYSm,
+                paddingLeft: visual.controlPaddingXSm,
+            },
             styleProp,
             props.disabled ? { opacity: interaction.disabledOpacity } : null,
-        ], ...props, children: [_jsx(View, { className: "absolute right-3 flex h-4 w-4 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(View, { className: "border-foreground h-2.5 w-1.5 rotate-45 border-b-2 border-r-2 -mt-0.5" }) }) }), children, _jsx(SelectPrimitive.ItemText, { className: "text-foreground group-active:text-accent-foreground text-base" })] }));
+        ]), ...props, children: [_jsx(View, { className: "absolute right-3 flex h-4 w-4 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(View, { className: "border-foreground h-2.5 w-1.5 rotate-45 border-b-2 border-r-2 -mt-0.5" }) }) }), children, _jsx(SelectPrimitive.ItemText, { className: "text-foreground group-active:text-accent-foreground", style: typographyStyle(visual, 'body') })] }));
 });
 SelectItem.displayName = 'SelectItem';
 function SelectItemIcon({ className, children }) {
     return _jsx(View, { className: cn('items-center justify-center', className), children: children });
 }
 SelectItemIcon.displayName = 'SelectItemIcon';
-const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Label, { ref: ref, className: cn('text-muted-foreground px-2 py-2 text-xs', className), ...props })));
+const SelectLabel = React.forwardRef(({ className, style: styleProp, ...props }, ref) => {
+    const visual = useVisualTokens();
+    return (_jsx(SelectPrimitive.Label, { ref: ref, className: cn('text-muted-foreground px-2 py-2', className), style: StyleSheet.flatten([typographyStyle(visual, 'caption'), styleProp]), ...props }));
+});
 SelectLabel.displayName = 'SelectLabel';
 const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Separator, { ref: ref, className: cn('bg-border -mx-1 my-1 h-px', Platform.select({ web: 'pointer-events-none' }), className), ...props })));
 SelectSeparator.displayName = 'SelectSeparator';
@@ -69,4 +112,3 @@ function NativeSelectScrollView({ className, children, ...props }) {
     return (_jsx(ScrollView, { className: cn('max-h-52', className), ...props, children: children }));
 }
 export { NativeSelectScrollView, Select, SelectContent, SelectGroup, SelectItem, SelectItemIcon, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, };
-//# sourceMappingURL=select.js.map

package/dist/components/separator/index.d.ts

@@ -1,2 +1 @@
 export { Separator, type SeparatorProps } from './separator';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/separator/index.js

@@ -1,2 +1 @@
 export { Separator } from './separator';
-//# sourceMappingURL=index.js.map

package/dist/components/separator/separator.d.ts

@@ -1,8 +1,7 @@
-import React from 'react';
-import { View, type ViewProps } from 'react-native';
+import { type ViewInstance, type ViewProps } from 'react-native';
+import type { ForwardRefComponent } from '../../lib/ref-types';
 export interface SeparatorProps extends ViewProps {
     orientation?: 'horizontal' | 'vertical';
 }
-declare const Separator: React.ForwardRefExoticComponent<SeparatorProps & React.RefAttributes<View>>;
+declare const Separator: ForwardRefComponent<ViewInstance, SeparatorProps>;
 export { Separator };
-//# sourceMappingURL=separator.d.ts.map

package/dist/components/separator/separator.js

@@ -7,4 +7,3 @@ const Separator = React.forwardRef(({ className, orientation = 'horizontal', ...
 });
 Separator.displayName = 'Separator';
 export { Separator };
-//# sourceMappingURL=separator.js.map

package/dist/components/skeleton/index.d.ts

@@ -1,2 +1 @@
 export { Skeleton, skeletonVariants, type SkeletonProps } from './skeleton';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/skeleton/index.js

@@ -1,2 +1 @@
 export { Skeleton, skeletonVariants } from './skeleton';
-//# sourceMappingURL=index.js.map

package/dist/components/skeleton/skeleton.d.ts

@@ -2,46 +2,25 @@ import { type ViewProps } from 'react-native';
 import { type VariantProps } from '../../lib/tv';
 declare const skeletonVariants: import("tailwind-variants").TVReturnType<{
     variant: {
-        pulse: string;
-        shimmer: string;
+        pulse: "";
+        shimmer: "";
     };
-}, undefined, "rounded-md bg-muted", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "bg-muted", {
     variant: {
-        pulse: string;
-        shimmer: string;
+        pulse: "";
+        shimmer: "";
     };
-}, {
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        pulse: string;
-        shimmer: string;
+        pulse: "";
+        shimmer: "";
     };
-}>, {
-    variant: {
-        pulse: string;
-        shimmer: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    variant: {
-        pulse: string;
-        shimmer: string;
-    };
-}, undefined, "rounded-md bg-muted", import("tailwind-variants/dist/config.js").TVConfig<{
-    variant: {
-        pulse: string;
-        shimmer: string;
-    };
-}, {
-    variant: {
-        pulse: string;
-        shimmer: string;
-    };
-}>, unknown, unknown, undefined>>;
+}, undefined>>;
 export interface SkeletonProps extends ViewProps, VariantProps<typeof skeletonVariants> {
     className?: string;
 }
-declare function Skeleton({ className, variant, ...props }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+declare function Skeleton({ className, variant, style, ...props }: SkeletonProps): import("react").JSX.Element;
 declare namespace Skeleton {
     var displayName: string;
 }
 export { Skeleton, skeletonVariants };
-//# sourceMappingURL=skeleton.d.ts.map

package/dist/components/skeleton/skeleton.js

@@ -6,9 +6,8 @@ import { cn } from '../../lib/cn';
 import { tv } from '../../lib/tv';
 import { useThemeColors } from '../../lib/theme-colors';
 import { useVisualTokens } from '../../lib/visual-tokens';
-// ─── Variants ─────────────────────────────────────────────────
 const skeletonVariants = tv({
-    base: 'rounded-md bg-muted',
+    base: 'bg-muted',
     variants: {
         variant: {
             pulse: '',
@@ -17,11 +16,13 @@ const skeletonVariants = tv({
     },
     defaultVariants: { variant: 'pulse' },
 });
-// ─── Component ───────────────────────────────────────────────
-function Skeleton({ className, variant = 'pulse', ...props }) {
+function Skeleton({ className, variant = 'pulse', style, ...props }) {
     const progress = useSharedValue(0);
     const colors = useThemeColors();
     const visual = useVisualTokens();
+    // Circular skeletons keep their class-driven radius; everything else gets the token radius.
+    const isCircular = className?.includes('rounded-full') ?? false;
+    const radiusStyle = isCircular ? null : { borderRadius: visual.radiusMd };
     useEffect(() => {
         progress.value = withRepeat(withTiming(1, { duration: variant === 'shimmer' ? 1400 : 1500, easing: Easing.linear }), -1, false);
     }, [progress, variant]);
@@ -37,7 +38,7 @@ function Skeleton({ className, variant = 'pulse', ...props }) {
         };
     });
     if (variant === 'shimmer') {
-        return (_jsx(View, { className: cn(skeletonVariants({ variant }), 'overflow-hidden', className), ...props, children: _jsx(Animated.View, { style: [
+        return (_jsx(View, { className: cn(skeletonVariants({ variant }), 'overflow-hidden', className), style: [radiusStyle, style], ...props, children: _jsx(Animated.View, { style: [
                     shimmerStyle,
                     {
                         position: 'absolute',
@@ -49,9 +50,7 @@ function Skeleton({ className, variant = 'pulse', ...props }) {
                     },
                 ] }) }));
     }
-    return (_jsx(Animated.View, { style: pulseStyle, className: cn(skeletonVariants({ variant }), className), ...props }));
+    return (_jsx(Animated.View, { style: [pulseStyle, radiusStyle, style], className: cn(skeletonVariants({ variant }), className), ...props }));
 }
 Skeleton.displayName = 'Skeleton';
-// ─── Exports ─────────────────────────────────────────────────
 export { Skeleton, skeletonVariants };
-//# sourceMappingURL=skeleton.js.map

package/dist/components/spinner/index.d.ts

@@ -1,2 +1 @@
 export { Spinner, spinnerVariants, type SpinnerProps } from './spinner';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/spinner/index.js

@@ -1,2 +1 @@
 export { Spinner, spinnerVariants } from './spinner';
-//# sourceMappingURL=index.js.map

package/dist/components/spinner/spinner.d.ts

@@ -2,53 +2,28 @@ import { type ActivityIndicatorProps } from 'react-native';
 import { type VariantProps } from '../../lib/tv';
 declare const spinnerVariants: import("tailwind-variants").TVReturnType<{
     size: {
-        sm: string;
-        default: string;
-        lg: string;
+        sm: "";
+        default: "";
+        lg: "";
     };
-}, undefined, "", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "", {
     size: {
-        sm: string;
-        default: string;
-        lg: string;
+        sm: "";
+        default: "";
+        lg: "";
     };
-}, {
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     size: {
-        sm: string;
-        default: string;
-        lg: string;
+        sm: "";
+        default: "";
+        lg: "";
     };
-}>, {
-    size: {
-        sm: string;
-        default: string;
-        lg: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    size: {
-        sm: string;
-        default: string;
-        lg: string;
-    };
-}, undefined, "", import("tailwind-variants/dist/config.js").TVConfig<{
-    size: {
-        sm: string;
-        default: string;
-        lg: string;
-    };
-}, {
-    size: {
-        sm: string;
-        default: string;
-        lg: string;
-    };
-}>, unknown, unknown, undefined>>;
+}, undefined>>;
 export interface SpinnerProps extends Omit<ActivityIndicatorProps, 'size'>, VariantProps<typeof spinnerVariants> {
     className?: string;
 }
-declare function Spinner({ className, size, color, ...props }: SpinnerProps): import("react/jsx-runtime").JSX.Element;
+declare function Spinner({ className, size, color, ...props }: SpinnerProps): import("react").JSX.Element;
 declare namespace Spinner {
     var displayName: string;
 }
 export { Spinner, spinnerVariants };
-//# sourceMappingURL=spinner.d.ts.map

package/dist/components/spinner/spinner.js

@@ -24,8 +24,10 @@ const sizeMap = {
 function Spinner({ className, size, color, ...props }) {
     const colors = useThemeColors();
     const activityIndicatorSize = size && size in sizeMap ? sizeMap[size] : 'small';
-    return (_jsx(ActivityIndicator, { size: activityIndicatorSize, color: color ?? colors.foreground, className: cn(spinnerVariants({ size }), className), ...props }));
+    return (_jsx(ActivityIndicator, { size: activityIndicatorSize, color: color ?? colors.foreground, className: cn(spinnerVariants({ size }), className), 
+        // `ActivityIndicator` renders `role="progressbar"`, and a progressbar with no name
+        // fails WCAG 4.1.2. Override with what is loading when you know it.
+        accessibilityLabel: "Loading", ...props }));
 }
 Spinner.displayName = 'Spinner';
 export { Spinner, spinnerVariants };
-//# sourceMappingURL=spinner.js.map

package/dist/components/stack/index.d.ts

@@ -1,2 +1 @@
 export { Stack, stackVariants, type StackProps } from './stack';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/stack/index.js

@@ -1,2 +1 @@
 export { Stack, stackVariants } from './stack';
-//# sourceMappingURL=index.js.map

package/dist/components/stack/stack.d.ts

@@ -1,185 +1,84 @@
-import React from 'react';
-import { View, type ViewProps } from 'react-native';
+import { type ViewInstance, type ViewProps } from 'react-native';
 import { type VariantProps } from '../../lib/tv';
+import type { ForwardRefComponent } from '../../lib/ref-types';
 declare const stackVariants: import("tailwind-variants").TVReturnType<{
     gap: {
-        none: string;
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        '2xl': string;
+        none: "gap-0";
+        xs: "gap-1";
+        sm: "gap-2";
+        md: "gap-3";
+        lg: "gap-4";
+        xl: "gap-6";
+        '2xl': "gap-8";
     };
     align: {
-        start: string;
-        center: string;
-        end: string;
-        stretch: string;
-        baseline: string;
+        start: "items-start";
+        center: "items-center";
+        end: "items-end";
+        stretch: "items-stretch";
+        baseline: "items-baseline";
     };
     justify: {
-        start: string;
-        center: string;
-        end: string;
-        between: string;
-        around: string;
-        evenly: string;
-    };
-}, undefined, "flex-col", import("tailwind-variants/dist/config.js").TVConfig<{
-    gap: {
-        none: string;
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        '2xl': string;
-    };
-    align: {
-        start: string;
-        center: string;
-        end: string;
-        stretch: string;
-        baseline: string;
-    };
-    justify: {
-        start: string;
-        center: string;
-        end: string;
-        between: string;
-        around: string;
-        evenly: string;
-    };
-}, {
+        start: "justify-start";
+        center: "justify-center";
+        end: "justify-end";
+        between: "justify-between";
+        around: "justify-around";
+        evenly: "justify-evenly";
+    };
+}, undefined, "flex-col", {
     gap: {
-        none: string;
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        '2xl': string;
+        none: "gap-0";
+        xs: "gap-1";
+        sm: "gap-2";
+        md: "gap-3";
+        lg: "gap-4";
+        xl: "gap-6";
+        '2xl': "gap-8";
     };
     align: {
-        start: string;
-        center: string;
-        end: string;
-        stretch: string;
-        baseline: string;
+        start: "items-start";
+        center: "items-center";
+        end: "items-end";
+        stretch: "items-stretch";
+        baseline: "items-baseline";
     };
     justify: {
-        start: string;
-        center: string;
-        end: string;
-        between: string;
-        around: string;
-        evenly: string;
-    };
-}>, {
-    gap: {
-        none: string;
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        '2xl': string;
-    };
-    align: {
-        start: string;
-        center: string;
-        end: string;
-        stretch: string;
-        baseline: string;
-    };
-    justify: {
-        start: string;
-        center: string;
-        end: string;
-        between: string;
-        around: string;
-        evenly: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
+        start: "justify-start";
+        center: "justify-center";
+        end: "justify-end";
+        between: "justify-between";
+        around: "justify-around";
+        evenly: "justify-evenly";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     gap: {
-        none: string;
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        '2xl': string;
+        none: "gap-0";
+        xs: "gap-1";
+        sm: "gap-2";
+        md: "gap-3";
+        lg: "gap-4";
+        xl: "gap-6";
+        '2xl': "gap-8";
     };
     align: {
-        start: string;
-        center: string;
-        end: string;
-        stretch: string;
-        baseline: string;
+        start: "items-start";
+        center: "items-center";
+        end: "items-end";
+        stretch: "items-stretch";
+        baseline: "items-baseline";
     };
     justify: {
-        start: string;
-        center: string;
-        end: string;
-        between: string;
-        around: string;
-        evenly: string;
-    };
-}, undefined, "flex-col", import("tailwind-variants/dist/config.js").TVConfig<{
-    gap: {
-        none: string;
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        '2xl': string;
-    };
-    align: {
-        start: string;
-        center: string;
-        end: string;
-        stretch: string;
-        baseline: string;
-    };
-    justify: {
-        start: string;
-        center: string;
-        end: string;
-        between: string;
-        around: string;
-        evenly: string;
-    };
-}, {
-    gap: {
-        none: string;
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        '2xl': string;
-    };
-    align: {
-        start: string;
-        center: string;
-        end: string;
-        stretch: string;
-        baseline: string;
-    };
-    justify: {
-        start: string;
-        center: string;
-        end: string;
-        between: string;
-        around: string;
-        evenly: string;
-    };
-}>, unknown, unknown, undefined>>;
+        start: "justify-start";
+        center: "justify-center";
+        end: "justify-end";
+        between: "justify-between";
+        around: "justify-around";
+        evenly: "justify-evenly";
+    };
+}, undefined>>;
 export interface StackProps extends Omit<ViewProps, 'className'>, VariantProps<typeof stackVariants> {
     className?: string;
 }
-declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<View>>;
+declare const Stack: ForwardRefComponent<ViewInstance, StackProps>;
 export { Stack, stackVariants };
-//# sourceMappingURL=stack.d.ts.map

package/dist/components/stack/stack.js

@@ -42,4 +42,3 @@ const Stack = React.forwardRef(({ className, gap, align, justify, ...props }, re
 });
 Stack.displayName = 'Stack';
 export { Stack, stackVariants };
-//# sourceMappingURL=stack.js.map

package/dist/components/switch/index.d.ts

@@ -1,2 +1 @@
 export { Switch, type SwitchProps } from './switch';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/switch/index.js

@@ -1,2 +1 @@
 export { Switch } from './switch';
-//# sourceMappingURL=index.js.map

package/dist/components/switch/switch.d.ts

@@ -6,9 +6,8 @@ export interface SwitchProps extends Omit<ViewProps, 'children'> {
     disabled?: boolean;
     className?: string;
 }
-declare function Switch({ checked: controlledChecked, defaultChecked, onCheckedChange, disabled, className, ...props }: SwitchProps): import("react/jsx-runtime").JSX.Element;
+declare function Switch({ checked: controlledChecked, defaultChecked, onCheckedChange, disabled, className, ...props }: SwitchProps): import("react").JSX.Element;
 declare namespace Switch {
     var displayName: string;
 }
 export { Switch };
-//# sourceMappingURL=switch.d.ts.map