@thewhileloop/whileui 2.0.0 → 4.0.0

package/dist/components/card/card.d.ts

@@ -1,104 +1,60 @@
-import React from 'react';
-import { View, type ViewProps, type TextProps } from 'react-native';
+import { type ViewInstance, type ViewProps, type TextInstance, type TextProps } from 'react-native';
 import { type VariantProps } from '../../lib/tv';
 import { type FrostedSurfaceProps } from '../../lib/frosted-surface';
 import { type ShadowTier } from '../../lib/recipes';
+import type { ForwardRefComponent } from '../../lib/ref-types';
 declare const cardVariants: import("tailwind-variants").TVReturnType<{
     padding: {
-        none: string;
-        sm: string;
-        default: string;
-        lg: string;
+        none: "";
+        sm: "";
+        default: "";
+        lg: "";
     };
     unstyled: {
-        true: string;
-        false: string;
+        true: "rounded-none border-0 bg-transparent shadow-none";
+        false: "";
     };
-}, undefined, "border border-border bg-card", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "border border-border bg-card", {
     padding: {
-        none: string;
-        sm: string;
-        default: string;
-        lg: string;
+        none: "";
+        sm: "";
+        default: "";
+        lg: "";
     };
     unstyled: {
-        true: string;
-        false: string;
+        true: "rounded-none border-0 bg-transparent shadow-none";
+        false: "";
     };
-}, {
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     padding: {
-        none: string;
-        sm: string;
-        default: string;
-        lg: string;
+        none: "";
+        sm: "";
+        default: "";
+        lg: "";
     };
     unstyled: {
-        true: string;
-        false: string;
+        true: "rounded-none border-0 bg-transparent shadow-none";
+        false: "";
     };
-}>, {
-    padding: {
-        none: string;
-        sm: string;
-        default: string;
-        lg: string;
-    };
-    unstyled: {
-        true: string;
-        false: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    padding: {
-        none: string;
-        sm: string;
-        default: string;
-        lg: string;
-    };
-    unstyled: {
-        true: string;
-        false: string;
-    };
-}, undefined, "border border-border bg-card", import("tailwind-variants/dist/config.js").TVConfig<{
-    padding: {
-        none: string;
-        sm: string;
-        default: string;
-        lg: string;
-    };
-    unstyled: {
-        true: string;
-        false: string;
-    };
-}, {
-    padding: {
-        none: string;
-        sm: string;
-        default: string;
-        lg: string;
-    };
-    unstyled: {
-        true: string;
-        false: string;
-    };
-}>, unknown, unknown, undefined>>;
+}, undefined>>;
 export interface CardProps extends ViewProps, VariantProps<typeof cardVariants>, FrostedSurfaceProps {
     /** Elevation tier; 'sm' by default, 'none' for flat cards. */
     shadow?: ShadowTier;
 }
-declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<View>>;
+declare const Card: ForwardRefComponent<ViewInstance, CardProps>;
 export interface CardHeaderProps extends ViewProps {
 }
-declare const CardHeader: React.ForwardRefExoticComponent<CardHeaderProps & React.RefAttributes<View>>;
+declare const CardHeader: ForwardRefComponent<ViewInstance, CardHeaderProps>;
 export interface CardTitleProps extends TextProps {
 }
-declare const CardTitle: React.ForwardRefExoticComponent<CardTitleProps & React.RefAttributes<import("react-native").Text>>;
+declare const CardTitle: ForwardRefComponent<TextInstance, CardTitleProps>;
 export interface CardDescriptionProps extends TextProps {
 }
-declare const CardDescription: React.ForwardRefExoticComponent<CardDescriptionProps & React.RefAttributes<import("react-native").Text>>;
+declare const CardDescription: ForwardRefComponent<TextInstance, CardDescriptionProps>;
 export interface CardContentProps extends ViewProps {
 }
-declare const CardContent: React.ForwardRefExoticComponent<CardContentProps & React.RefAttributes<View>>;
+declare const CardContent: ForwardRefComponent<ViewInstance, CardContentProps>;
 export interface CardFooterProps extends ViewProps {
 }
-declare const CardFooter: React.ForwardRefExoticComponent<CardFooterProps & React.RefAttributes<View>>;
+declare const CardFooter: ForwardRefComponent<ViewInstance, CardFooterProps>;
 export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, cardVariants };

package/dist/components/card/card.js

@@ -1,6 +1,6 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import { View } from 'react-native';
+import { View, } from 'react-native';
 import { Text } from '../text';
 import { cn } from '../../lib/cn';
 import { tv } from '../../lib/tv';

package/dist/components/container/container.d.ts

@@ -15,130 +15,58 @@ import { type VariantProps } from '../../lib/tv';
 declare const containerVariants: import("tailwind-variants").TVReturnType<{
     size: {
         /** Forms, auth, single-column reading. */
-        sm: string;
+        sm: "max-w-xl";
         /** Default. Feeds, dashboards, most app screens. */
-        md: string;
+        md: "max-w-3xl";
         /** Multi-column dashboards and wide tables. */
-        lg: string;
+        lg: "max-w-5xl";
         /** Near-full width, still stops short of an ultrawide monitor. */
-        xl: string;
+        xl: "max-w-7xl";
         /** Opt out — edge-to-edge at every width. */
-        full: string;
+        full: "max-w-none";
     };
     /** Fill the available height, for a container used as a screen root. */
     fill: {
-        true: string;
-        false: string;
+        true: "flex-1";
+        false: "";
     };
-}, undefined, "w-full self-center", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "w-full self-center", {
     size: {
         /** Forms, auth, single-column reading. */
-        sm: string;
+        sm: "max-w-xl";
         /** Default. Feeds, dashboards, most app screens. */
-        md: string;
+        md: "max-w-3xl";
         /** Multi-column dashboards and wide tables. */
-        lg: string;
+        lg: "max-w-5xl";
         /** Near-full width, still stops short of an ultrawide monitor. */
-        xl: string;
+        xl: "max-w-7xl";
         /** Opt out — edge-to-edge at every width. */
-        full: string;
+        full: "max-w-none";
     };
     /** Fill the available height, for a container used as a screen root. */
     fill: {
-        true: string;
-        false: string;
+        true: "flex-1";
+        false: "";
     };
-}, {
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     size: {
         /** Forms, auth, single-column reading. */
-        sm: string;
+        sm: "max-w-xl";
         /** Default. Feeds, dashboards, most app screens. */
-        md: string;
+        md: "max-w-3xl";
         /** Multi-column dashboards and wide tables. */
-        lg: string;
+        lg: "max-w-5xl";
         /** Near-full width, still stops short of an ultrawide monitor. */
-        xl: string;
+        xl: "max-w-7xl";
         /** Opt out — edge-to-edge at every width. */
-        full: string;
+        full: "max-w-none";
     };
     /** Fill the available height, for a container used as a screen root. */
     fill: {
-        true: string;
-        false: string;
+        true: "flex-1";
+        false: "";
     };
-}>, {
-    size: {
-        /** Forms, auth, single-column reading. */
-        sm: string;
-        /** Default. Feeds, dashboards, most app screens. */
-        md: string;
-        /** Multi-column dashboards and wide tables. */
-        lg: string;
-        /** Near-full width, still stops short of an ultrawide monitor. */
-        xl: string;
-        /** Opt out — edge-to-edge at every width. */
-        full: string;
-    };
-    /** Fill the available height, for a container used as a screen root. */
-    fill: {
-        true: string;
-        false: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    size: {
-        /** Forms, auth, single-column reading. */
-        sm: string;
-        /** Default. Feeds, dashboards, most app screens. */
-        md: string;
-        /** Multi-column dashboards and wide tables. */
-        lg: string;
-        /** Near-full width, still stops short of an ultrawide monitor. */
-        xl: string;
-        /** Opt out — edge-to-edge at every width. */
-        full: string;
-    };
-    /** Fill the available height, for a container used as a screen root. */
-    fill: {
-        true: string;
-        false: string;
-    };
-}, undefined, "w-full self-center", import("tailwind-variants/dist/config.js").TVConfig<{
-    size: {
-        /** Forms, auth, single-column reading. */
-        sm: string;
-        /** Default. Feeds, dashboards, most app screens. */
-        md: string;
-        /** Multi-column dashboards and wide tables. */
-        lg: string;
-        /** Near-full width, still stops short of an ultrawide monitor. */
-        xl: string;
-        /** Opt out — edge-to-edge at every width. */
-        full: string;
-    };
-    /** Fill the available height, for a container used as a screen root. */
-    fill: {
-        true: string;
-        false: string;
-    };
-}, {
-    size: {
-        /** Forms, auth, single-column reading. */
-        sm: string;
-        /** Default. Feeds, dashboards, most app screens. */
-        md: string;
-        /** Multi-column dashboards and wide tables. */
-        lg: string;
-        /** Near-full width, still stops short of an ultrawide monitor. */
-        xl: string;
-        /** Opt out — edge-to-edge at every width. */
-        full: string;
-    };
-    /** Fill the available height, for a container used as a screen root. */
-    fill: {
-        true: string;
-        false: string;
-    };
-}>, unknown, unknown, undefined>>;
+}, undefined>>;
 export interface ContainerProps extends ViewProps, VariantProps<typeof containerVariants> {
     className?: string;
 }

package/dist/components/data-row/data-row.d.ts

@@ -1,41 +1,21 @@
-import React from 'react';
-import { Text, View, type TextProps, type ViewProps } from 'react-native';
+import { type TextInstance, type TextProps, type ViewInstance, type ViewProps } from 'react-native';
+import type { ForwardRefComponent } from '../../lib/ref-types';
 declare const dataRowVariants: import("tailwind-variants").TVReturnType<{
     size: {
-        default: string;
-        compact: string;
+        default: "";
+        compact: "";
     };
-}, undefined, "w-full flex-row items-center gap-3", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "w-full flex-row items-center gap-3", {
     size: {
-        default: string;
-        compact: string;
+        default: "";
+        compact: "";
     };
-}, {
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     size: {
-        default: string;
-        compact: string;
+        default: "";
+        compact: "";
     };
-}>, {
-    size: {
-        default: string;
-        compact: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    size: {
-        default: string;
-        compact: string;
-    };
-}, undefined, "w-full flex-row items-center gap-3", import("tailwind-variants/dist/config.js").TVConfig<{
-    size: {
-        default: string;
-        compact: string;
-    };
-}, {
-    size: {
-        default: string;
-        compact: string;
-    };
-}>, unknown, unknown, undefined>>;
+}, undefined>>;
 export interface DataRowProps extends ViewProps {
     size?: 'default' | 'compact';
     className?: string;
@@ -58,11 +38,11 @@ export interface DataRowDescriptionProps extends TextProps {
 export interface DataRowValueProps extends TextProps {
     className?: string;
 }
-declare const DataRow: React.ForwardRefExoticComponent<DataRowProps & React.RefAttributes<View>>;
-declare const DataRowLeft: React.ForwardRefExoticComponent<DataRowLeftProps & React.RefAttributes<View>>;
-declare const DataRowCenter: React.ForwardRefExoticComponent<DataRowCenterProps & React.RefAttributes<View>>;
-declare const DataRowRight: React.ForwardRefExoticComponent<DataRowRightProps & React.RefAttributes<View>>;
-declare const DataRowLabel: React.ForwardRefExoticComponent<DataRowLabelProps & React.RefAttributes<Text>>;
-declare const DataRowDescription: React.ForwardRefExoticComponent<DataRowDescriptionProps & React.RefAttributes<Text>>;
-declare const DataRowValue: React.ForwardRefExoticComponent<DataRowValueProps & React.RefAttributes<Text>>;
+declare const DataRow: ForwardRefComponent<ViewInstance, DataRowProps>;
+declare const DataRowLeft: ForwardRefComponent<ViewInstance, DataRowLeftProps>;
+declare const DataRowCenter: ForwardRefComponent<ViewInstance, DataRowCenterProps>;
+declare const DataRowRight: ForwardRefComponent<ViewInstance, DataRowRightProps>;
+declare const DataRowLabel: ForwardRefComponent<TextInstance, DataRowLabelProps>;
+declare const DataRowDescription: ForwardRefComponent<TextInstance, DataRowDescriptionProps>;
+declare const DataRowValue: ForwardRefComponent<TextInstance, DataRowValueProps>;
 export { DataRow, DataRowLeft, DataRowCenter, DataRowRight, DataRowLabel, DataRowDescription, DataRowValue, dataRowVariants, };

package/dist/components/data-row/data-row.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { createContext, useContext, useMemo } from 'react';
-import { Text, View } from 'react-native';
+import { Text, View, } from 'react-native';
 import { cn } from '../../lib/cn';
 import { tv } from '../../lib/tv';
 import { useVisualTokens } from '../../lib/visual-tokens';

package/dist/components/fab/fab.d.ts

@@ -0,0 +1,87 @@
+import React from 'react';
+import { View, type PressableInstance, type ViewProps } from 'react-native';
+import { type PressableProps } from '../pressable';
+import { type VariantProps } from '../../lib/tv';
+import type { ForwardRefComponent } from '../../lib/ref-types';
+declare const fabVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: "bg-primary";
+        secondary: "bg-secondary";
+        destructive: "bg-destructive";
+        surface: "border border-border bg-card";
+    };
+    size: {
+        default: "h-14 w-14";
+        sm: "h-12 w-12";
+        lg: "h-16 w-16";
+    };
+    placement: {
+        /** Positioned by the caller — inside a toolbar, a row, anywhere. */
+        inline: "";
+        /** Floating over the nearest positioned ancestor, bottom-right. */
+        floating: "absolute bottom-6 right-6";
+        'floating-left': "absolute bottom-6 left-6";
+    };
+}, undefined, "items-center justify-center rounded-full", {
+    variant: {
+        default: "bg-primary";
+        secondary: "bg-secondary";
+        destructive: "bg-destructive";
+        surface: "border border-border bg-card";
+    };
+    size: {
+        default: "h-14 w-14";
+        sm: "h-12 w-12";
+        lg: "h-16 w-16";
+    };
+    placement: {
+        /** Positioned by the caller — inside a toolbar, a row, anywhere. */
+        inline: "";
+        /** Floating over the nearest positioned ancestor, bottom-right. */
+        floating: "absolute bottom-6 right-6";
+        'floating-left': "absolute bottom-6 left-6";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    variant: {
+        default: "bg-primary";
+        secondary: "bg-secondary";
+        destructive: "bg-destructive";
+        surface: "border border-border bg-card";
+    };
+    size: {
+        default: "h-14 w-14";
+        sm: "h-12 w-12";
+        lg: "h-16 w-16";
+    };
+    placement: {
+        /** Positioned by the caller — inside a toolbar, a row, anywhere. */
+        inline: "";
+        /** Floating over the nearest positioned ancestor, bottom-right. */
+        floating: "absolute bottom-6 right-6";
+        'floating-left': "absolute bottom-6 left-6";
+    };
+}, undefined>>;
+export interface FabProps extends Omit<PressableProps, 'children'>, VariantProps<typeof fabVariants> {
+    /**
+     * What the action does, for screen readers. Required: a FAB is an icon with no
+     * text, so without this it announces as an unlabelled button.
+     */
+    label: string;
+    /** The glyph. Icon libraries need a concrete colour, so read it from `useIconColors`. */
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * A floating action button: one primary action, raised above the content.
+ *
+ * It owns no icon dependency. `@expo/vector-icons` and friends need hex colours
+ * rather than classes, so the caller passes the glyph and colours it from
+ * `useIconColors()` or `useThemeColors()`.
+ */
+declare const FAB: ForwardRefComponent<PressableInstance, FabProps>;
+export interface FabGroupProps extends ViewProps {
+    className?: string;
+}
+/** Stacks secondary actions above a FAB, bottom-aligned. */
+declare const FABGroup: ForwardRefComponent<React.ComponentRef<typeof View>, FabGroupProps>;
+export { FAB, FABGroup, fabVariants };

package/dist/components/fab/fab.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { View } from 'react-native';
+import { Pressable } from '../pressable';
+import { cn } from '../../lib/cn';
+import { tv } from '../../lib/tv';
+import { useVisualTokens } from '../../lib/visual-tokens';
+import { shadowStyle } from '../../lib/recipes';
+import { useThemeColors } from '../../lib/theme-colors';
+const fabVariants = tv({
+    base: 'items-center justify-center rounded-full',
+    variants: {
+        variant: {
+            default: 'bg-primary',
+            secondary: 'bg-secondary',
+            destructive: 'bg-destructive',
+            surface: 'border border-border bg-card',
+        },
+        size: {
+            // 56 and 40 are Material's FAB and small-FAB sizes. Both clear the iOS 44pt
+            // and Android 48dp minimums on their own, so a FAB never needs hitSlop.
+            default: 'h-14 w-14',
+            sm: 'h-12 w-12',
+            lg: 'h-16 w-16',
+        },
+        placement: {
+            /** Positioned by the caller — inside a toolbar, a row, anywhere. */
+            inline: '',
+            /** Floating over the nearest positioned ancestor, bottom-right. */
+            floating: 'absolute bottom-6 right-6',
+            'floating-left': 'absolute bottom-6 left-6',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'default',
+        placement: 'floating',
+    },
+});
+/**
+ * A floating action button: one primary action, raised above the content.
+ *
+ * It owns no icon dependency. `@expo/vector-icons` and friends need hex colours
+ * rather than classes, so the caller passes the glyph and colours it from
+ * `useIconColors()` or `useThemeColors()`.
+ */
+const FAB = React.forwardRef(({ className, variant, size, placement, label, children, style, ...props }, ref) => {
+    const visual = useVisualTokens();
+    const colors = useThemeColors();
+    return (_jsx(Pressable, { ref: ref, accessibilityRole: "button", accessibilityLabel: label, className: cn(fabVariants({ variant, size, placement }), className), style: (state) => [
+            shadowStyle(visual, colors, 'lg'),
+            typeof style === 'function' ? style(state) : style,
+        ], ...props, children: children }));
+});
+FAB.displayName = 'FAB';
+/** Stacks secondary actions above a FAB, bottom-aligned. */
+const FABGroup = React.forwardRef(({ className, ...props }, ref) => (_jsx(View, { ref: ref, className: cn('absolute bottom-6 right-6 items-end gap-3', className), ...props })));
+FABGroup.displayName = 'FABGroup';
+export { FAB, FABGroup, fabVariants };

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

@@ -0,0 +1 @@
+export { FAB, FABGroup, fabVariants, type FabProps, type FabGroupProps } from './fab';

package/dist/components/fab/index.js

@@ -0,0 +1 @@
+export { FAB, FABGroup, fabVariants } from './fab';