@sincpro/mobile-ui 0.7.2 → 1.1.0

package/dist/Actions/Actions.Button.d.ts

@@ -1,134 +1,135 @@
-import { type VariantProps } from "../theme/tw";
+import { type VariantProps } from "../theme/tw.js";
 import type React from "react";
+import type { AccessibilityProps } from "react-native";
 declare const button: import("tailwind-variants").TVReturnType<{
     variant: {
-        primary: string;
-        accent: string;
-        cta: string;
-        secondary: string;
-        outline: string;
-        outlineDanger: string;
-        outlineBlack: string;
-        flat: string;
-        link: string;
-        transparent: string;
+        primary: "bg-accent";
+        accent: "bg-transparent";
+        cta: "bg-accent";
+        secondary: "bg-bg-muted border border-border-strong";
+        outline: "bg-transparent border border-primary";
+        outlineDanger: "bg-transparent border border-danger";
+        outlineBlack: "bg-transparent border border-border-strong";
+        flat: "bg-text-primary/10";
+        link: "bg-transparent min-h-0";
+        transparent: "bg-transparent border border-border-light";
     };
     size: {
-        small: string;
-        medium: string;
-        large: string;
+        small: "py-1.5 px-3 min-h-[36px]";
+        medium: "py-2.5 px-4 min-h-[44px]";
+        large: "py-3 px-5 min-h-[48px]";
     };
     disabled: {
-        true: string;
+        true: "opacity-70";
     };
-}, undefined, "rounded-[13px] items-center justify-center flex-row min-h-[44px]", {
+}, undefined, "rounded-md items-center justify-center flex-row min-h-[44px]", {
     variant: {
-        primary: string;
-        accent: string;
-        cta: string;
-        secondary: string;
-        outline: string;
-        outlineDanger: string;
-        outlineBlack: string;
-        flat: string;
-        link: string;
-        transparent: string;
+        primary: "bg-accent";
+        accent: "bg-transparent";
+        cta: "bg-accent";
+        secondary: "bg-bg-muted border border-border-strong";
+        outline: "bg-transparent border border-primary";
+        outlineDanger: "bg-transparent border border-danger";
+        outlineBlack: "bg-transparent border border-border-strong";
+        flat: "bg-text-primary/10";
+        link: "bg-transparent min-h-0";
+        transparent: "bg-transparent border border-border-light";
     };
     size: {
-        small: string;
-        medium: string;
-        large: string;
+        small: "py-1.5 px-3 min-h-[36px]";
+        medium: "py-2.5 px-4 min-h-[44px]";
+        large: "py-3 px-5 min-h-[48px]";
     };
     disabled: {
-        true: string;
+        true: "opacity-70";
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        primary: string;
-        accent: string;
-        cta: string;
-        secondary: string;
-        outline: string;
-        outlineDanger: string;
-        outlineBlack: string;
-        flat: string;
-        link: string;
-        transparent: string;
+        primary: "bg-accent";
+        accent: "bg-transparent";
+        cta: "bg-accent";
+        secondary: "bg-bg-muted border border-border-strong";
+        outline: "bg-transparent border border-primary";
+        outlineDanger: "bg-transparent border border-danger";
+        outlineBlack: "bg-transparent border border-border-strong";
+        flat: "bg-text-primary/10";
+        link: "bg-transparent min-h-0";
+        transparent: "bg-transparent border border-border-light";
     };
     size: {
-        small: string;
-        medium: string;
-        large: string;
+        small: "py-1.5 px-3 min-h-[36px]";
+        medium: "py-2.5 px-4 min-h-[44px]";
+        large: "py-3 px-5 min-h-[48px]";
     };
     disabled: {
-        true: string;
+        true: "opacity-70";
     };
-}, undefined, "rounded-[13px] items-center justify-center flex-row min-h-[44px]", unknown, unknown, undefined>>;
+}, undefined>>;
 declare const buttonIcon: import("tailwind-variants").TVReturnType<{
     variant: {
-        primary: string;
-        accent: string;
-        cta: string;
-        secondary: string;
-        outline: string;
-        outlineDanger: string;
-        outlineBlack: string;
-        flat: string;
-        link: string;
-        transparent: string;
+        primary: "bg-accent";
+        accent: "bg-transparent";
+        cta: "bg-accent";
+        secondary: "bg-bg-muted border border-border-strong";
+        outline: "bg-transparent border border-primary";
+        outlineDanger: "bg-transparent border border-danger";
+        outlineBlack: "bg-transparent border border-border-strong";
+        flat: "bg-text-primary/10";
+        link: "bg-transparent";
+        transparent: "bg-transparent border border-border-light";
     };
     size: {
-        small: string;
-        medium: string;
-        large: string;
+        small: "w-9 h-9";
+        medium: "w-11 h-11";
+        large: "w-[52px] h-[52px]";
     };
     disabled: {
-        true: string;
+        true: "opacity-70";
     };
-}, undefined, "rounded-[13px] items-center justify-center aspect-square", {
+}, undefined, "rounded-md items-center justify-center aspect-square", {
     variant: {
-        primary: string;
-        accent: string;
-        cta: string;
-        secondary: string;
-        outline: string;
-        outlineDanger: string;
-        outlineBlack: string;
-        flat: string;
-        link: string;
-        transparent: string;
+        primary: "bg-accent";
+        accent: "bg-transparent";
+        cta: "bg-accent";
+        secondary: "bg-bg-muted border border-border-strong";
+        outline: "bg-transparent border border-primary";
+        outlineDanger: "bg-transparent border border-danger";
+        outlineBlack: "bg-transparent border border-border-strong";
+        flat: "bg-text-primary/10";
+        link: "bg-transparent";
+        transparent: "bg-transparent border border-border-light";
     };
     size: {
-        small: string;
-        medium: string;
-        large: string;
+        small: "w-9 h-9";
+        medium: "w-11 h-11";
+        large: "w-[52px] h-[52px]";
     };
     disabled: {
-        true: string;
+        true: "opacity-70";
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        primary: string;
-        accent: string;
-        cta: string;
-        secondary: string;
-        outline: string;
-        outlineDanger: string;
-        outlineBlack: string;
-        flat: string;
-        link: string;
-        transparent: string;
+        primary: "bg-accent";
+        accent: "bg-transparent";
+        cta: "bg-accent";
+        secondary: "bg-bg-muted border border-border-strong";
+        outline: "bg-transparent border border-primary";
+        outlineDanger: "bg-transparent border border-danger";
+        outlineBlack: "bg-transparent border border-border-strong";
+        flat: "bg-text-primary/10";
+        link: "bg-transparent";
+        transparent: "bg-transparent border border-border-light";
     };
     size: {
-        small: string;
-        medium: string;
-        large: string;
+        small: "w-9 h-9";
+        medium: "w-11 h-11";
+        large: "w-[52px] h-[52px]";
     };
     disabled: {
-        true: string;
+        true: "opacity-70";
     };
-}, undefined, "rounded-[13px] items-center justify-center aspect-square", unknown, unknown, undefined>>;
-export interface ButtonProps extends VariantProps<typeof button> {
+}, undefined>>;
+export interface ButtonProps extends VariantProps<typeof button>, AccessibilityProps {
     title: string;
     onPress?: () => void;
     confirm?: string;
@@ -136,14 +137,18 @@ export interface ButtonProps extends VariantProps<typeof button> {
     disabled?: boolean;
     className?: string;
     icon?: React.ReactNode;
+    testID?: string;
+    accessibleSizing?: boolean;
 }
-export interface ButtonIconProps extends VariantProps<typeof buttonIcon> {
+export interface ButtonIconProps extends VariantProps<typeof buttonIcon>, AccessibilityProps {
     icon: string;
     onPress?: () => void;
     confirm?: string;
     loading?: boolean;
     disabled?: boolean;
     className?: string;
+    testID?: string;
+    accessibleSizing?: boolean;
 }
 declare const ButtonWithIcon: React.FC<ButtonProps> & {
     Icon: React.FC<ButtonIconProps>;

package/dist/Actions/Actions.Button.js

@@ -1,22 +1,20 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { useConfirmationContext } from "../Dialog/Confirmation.context";
-import Icon from "../Display/Display.Icon";
-import { theme } from "../theme";
-import { tv } from "../theme/tw";
-import { Typography } from "../Typography";
-import { LinearGradient } from "expo-linear-gradient";
+import { useConfirmationContext } from "../Dialog/Confirmation.context.js";
+import Icon from "../Display/Display.Icon.js";
+import { theme } from "../theme/index.js";
+import { tv } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
 import { useCallback } from "react";
 import { ActivityIndicator, TouchableOpacity, View } from "react-native";
-import { runOnJS } from "react-native-reanimated";
 // ─── Style variants ───────────────────────────────────────────────────────────
 const button = tv({
-    base: "rounded-[13px] items-center justify-center flex-row min-h-[44px]",
+    base: "rounded-md items-center justify-center flex-row min-h-[44px]",
     variants: {
         variant: {
-            primary: "shadow-sm",
-            accent: "shadow-sm",
-            cta: "shadow-sm",
-            secondary: "bg-bg-muted",
+            primary: "bg-accent",
+            accent: "bg-transparent",
+            cta: "bg-accent",
+            secondary: "bg-bg-muted border border-border-strong",
             outline: "bg-transparent border border-primary",
             outlineDanger: "bg-transparent border border-danger",
             outlineBlack: "bg-transparent border border-border-strong",
@@ -39,13 +37,13 @@ const button = tv({
     },
 });
 const buttonIcon = tv({
-    base: "rounded-[13px] items-center justify-center aspect-square",
+    base: "rounded-md items-center justify-center aspect-square",
     variants: {
         variant: {
-            primary: "shadow-sm",
-            accent: "shadow-sm",
-            cta: "shadow-sm",
-            secondary: "bg-bg-muted",
+            primary: "bg-accent",
+            accent: "bg-transparent",
+            cta: "bg-accent",
+            secondary: "bg-bg-muted border border-border-strong",
             outline: "bg-transparent border border-primary",
             outlineDanger: "bg-transparent border border-danger",
             outlineBlack: "bg-transparent border border-border-strong",
@@ -70,26 +68,26 @@ const buttonIcon = tv({
 const textColor = tv({
     variants: {
         variant: {
-            primary: "text-white",
-            accent: "text-text-on-accent",
+            primary: "text-text-on-accent",
+            accent: "text-text-accent",
             cta: "text-text-on-accent",
             secondary: "text-text-primary",
-            outline: "text-primary",
+            outline: "text-text-accent",
             outlineDanger: "text-danger",
             outlineBlack: "text-text-primary",
             flat: "text-text-primary",
-            link: "text-primary",
-            transparent: "text-white",
+            link: "text-text-accent",
+            transparent: "text-text-inverse",
         },
         disabled: {
             true: "opacity-50",
         },
     },
     compoundVariants: [
-        { variant: "primary", disabled: true, className: "text-white/70" },
-        { variant: "accent", disabled: true, className: "text-text-on-accent" },
+        { variant: "primary", disabled: true, className: "text-text-on-accent" },
+        { variant: "accent", disabled: true, className: "text-text-accent" },
         { variant: "cta", disabled: true, className: "text-text-on-accent" },
-        { variant: "transparent", disabled: true, className: "text-white/70" },
+        { variant: "transparent", disabled: true, className: "text-text-inverse/70" },
         {
             variant: ["secondary", "outline", "link"],
             disabled: true,
@@ -104,15 +102,15 @@ const textColor = tv({
 // ─── Color / size helpers ─────────────────────────────────────────────────────
 function getLoadingColor(variant) {
     const map = {
-        primary: theme.text.inverse,
-        accent: theme.text.inverse,
-        cta: theme.text.inverse,
+        primary: theme.text.onAccent,
+        accent: theme.text.accent,
+        cta: theme.text.onAccent,
         secondary: theme.text.primary,
-        outline: theme.primary,
+        outline: theme.text.accent,
         outlineDanger: theme.danger,
         outlineBlack: theme.text.primary,
         flat: theme.text.primary,
-        link: theme.primary,
+        link: theme.text.accent,
         transparent: theme.text.inverse,
     };
     return map[variant] ?? theme.text.inverse;
@@ -120,8 +118,8 @@ function getLoadingColor(variant) {
 function getIconColor(variant, disabled) {
     if (disabled) {
         const map = {
-            primary: theme.icon.inverse + "70",
-            accent: theme.text.onAccent + "70",
+            primary: theme.text.onAccent + "70",
+            accent: theme.text.accent + "70",
             cta: theme.text.onAccent + "70",
             secondary: theme.text.disabled,
             outline: theme.icon.disabled,
@@ -134,15 +132,15 @@ function getIconColor(variant, disabled) {
         return map[variant] ?? theme.icon.disabled;
     }
     const map = {
-        primary: theme.icon.inverse,
-        accent: theme.text.onAccent,
+        primary: theme.text.onAccent,
+        accent: theme.text.accent,
         cta: theme.text.onAccent,
         secondary: theme.text.primary,
-        outline: theme.primary,
+        outline: theme.text.accent,
         outlineDanger: theme.danger,
         outlineBlack: theme.text.primary,
         flat: theme.text.primary,
-        link: theme.primary,
+        link: theme.text.accent,
         transparent: theme.icon.inverse,
     };
     return map[variant] ?? theme.icon.inverse;
@@ -153,7 +151,7 @@ const textVariantMap = {
     medium: "button",
     large: "buttonLarge",
 };
-const Button = ({ title, onPress, confirm, variant = "primary", size = "medium", loading = false, disabled = false, className, icon, }) => {
+const Button = ({ title, onPress, confirm, variant = "primary", size = "medium", loading = false, disabled = false, className, icon, testID, accessibleSizing = false, accessibilityLabel, accessibilityState, ...accessibilityProps }) => {
     const { show, hide } = useConfirmationContext();
     const textColorClass = textColor({ variant: variant, disabled });
     const loadingColorValue = getLoadingColor(variant);
@@ -167,25 +165,32 @@ const Button = ({ title, onPress, confirm, variant = "primary", size = "medium",
                 cancelText: "Cancelar",
                 onConfirm: () => {
                     hide();
-                    runOnJS(onPress)();
+                    onPress();
                 },
                 onCancel: () => hide(),
             });
         }
         else if (onPress) {
-            runOnJS(onPress)();
+            onPress();
         }
     }, [onPress, confirm, show, hide]);
     if (variant === "link") {
-        return (_jsx(TouchableOpacity, { activeOpacity: 0.7, className: className, disabled: disabled || loading, onPress: handlePress, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Typography.Text, { className: textColorClass, variant: textVariantValue, children: title })) }));
-    }
-    if (variant === "primary" || variant === "accent" || variant === "cta") {
-        const gradientColors = variant === "primary" ? theme.gradient.primary : theme.gradient.accent;
-        return (_jsx(LinearGradient, { colors: gradientColors, end: { x: 1, y: 1 }, start: { x: 0, y: 0 }, style: { borderRadius: 13, opacity: disabled ? 0.7 : 1 }, children: _jsx(TouchableOpacity, { activeOpacity: 0.8, disabled: disabled || loading, onPress: handlePress, children: _jsx(View, { className: button({ size, disabled }), style: { backgroundColor: "transparent" }, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsxs(_Fragment, { children: [icon ? _jsx(View, { className: "mr-2", children: icon }) : null, _jsx(Typography.Text, { allowFontScaling: false, bold: true, className: textColorClass, ellipsizeMode: "tail", numberOfLines: 1, variant: textVariantValue, children: title })] })) }) }) }));
+        return (_jsx(TouchableOpacity, { activeOpacity: 0.7, className: className, disabled: disabled || loading, onPress: handlePress, ...accessibilityProps, accessibilityLabel: accessibilityLabel ?? title, accessibilityRole: "button", accessibilityState: {
+                ...accessibilityState,
+                disabled: disabled || loading,
+                busy: loading,
+            }, style: accessibleSizing
+                ? { minHeight: 48, minWidth: 48, justifyContent: "center" }
+                : undefined, testID: testID, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Typography.Text, { className: textColorClass, variant: textVariantValue, children: title })) }));
     }
-    return (_jsx(TouchableOpacity, { activeOpacity: 0.8, className: button({ variant, size, disabled, className }), disabled: disabled || loading, onPress: handlePress, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsxs(_Fragment, { children: [icon ? _jsx(View, { className: "mr-2", children: icon }) : null, _jsx(Typography.Text, { allowFontScaling: false, bold: true, className: textColorClass, ellipsizeMode: "tail", numberOfLines: 1, variant: textVariantValue, children: title })] })) }));
+    const emphasize = variant === "primary" || variant === "cta";
+    return (_jsx(TouchableOpacity, { activeOpacity: 0.8, className: button({ variant, size, disabled, className }), disabled: disabled || loading, onPress: handlePress, ...accessibilityProps, accessibilityLabel: accessibilityLabel ?? title, accessibilityRole: "button", accessibilityState: {
+            ...accessibilityState,
+            disabled: disabled || loading,
+            busy: loading,
+        }, style: accessibleSizing ? { minHeight: 48, minWidth: 48 } : undefined, testID: testID, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsxs(_Fragment, { children: [icon ? _jsx(View, { className: "mr-2", children: icon }) : null, _jsx(Typography.Text, { allowFontScaling: accessibleSizing, className: textColorClass, ellipsizeMode: "tail", numberOfLines: accessibleSizing ? undefined : 1, semibold: emphasize, variant: textVariantValue, children: title })] })) }));
 };
-const ButtonIcon = ({ icon, onPress, confirm, variant = "primary", size = "medium", loading = false, disabled = false, className, }) => {
+const ButtonIcon = ({ icon, onPress, confirm, variant = "primary", size = "medium", loading = false, disabled = false, className, testID, accessibleSizing = false, accessibilityState, ...accessibilityProps }) => {
     const { show, hide } = useConfirmationContext();
     const iconColorValue = getIconColor(variant, disabled);
     const iconSizeValue = iconSizeMap[size] ?? 20;
@@ -199,19 +204,20 @@ const ButtonIcon = ({ icon, onPress, confirm, variant = "primary", size = "mediu
                 cancelText: "Cancelar",
                 onConfirm: () => {
                     hide();
-                    runOnJS(onPress)();
+                    onPress();
                 },
                 onCancel: () => hide(),
             });
         }
         else if (onPress) {
-            runOnJS(onPress)();
+            onPress();
         }
     }, [onPress, confirm, show, hide]);
-    if (variant === "primary") {
-        return (_jsx(LinearGradient, { colors: theme.gradient.primary, end: { x: 1, y: 1 }, start: { x: 0, y: 0 }, style: { borderRadius: 13, opacity: disabled ? 0.7 : 1 }, children: _jsx(TouchableOpacity, { activeOpacity: 0.8, disabled: disabled || loading, onPress: handlePress, children: _jsx(View, { className: buttonIcon({ size, disabled }), style: { backgroundColor: "transparent" }, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Icon, { color: iconColorValue, name: icon, size: iconSizeValue })) }) }) }));
-    }
-    return (_jsx(TouchableOpacity, { activeOpacity: 0.8, className: buttonIcon({ variant, size, disabled, className }), disabled: disabled || loading, onPress: handlePress, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Icon, { color: iconColorValue, name: icon, size: iconSizeValue })) }));
+    return (_jsx(TouchableOpacity, { activeOpacity: 0.8, className: buttonIcon({ variant, size, disabled, className }), disabled: disabled || loading, onPress: handlePress, ...accessibilityProps, accessibilityRole: "button", accessibilityState: {
+            ...accessibilityState,
+            disabled: disabled || loading,
+            busy: loading,
+        }, style: accessibleSizing ? { minHeight: 48, minWidth: 48 } : undefined, testID: testID, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Icon, { color: iconColorValue, name: icon, size: iconSizeValue })) }));
 };
 const ButtonWithIcon = Object.assign(Button, { Icon: ButtonIcon });
 export default ButtonWithIcon;

package/dist/Actions/Actions.FAB.d.ts

@@ -5,6 +5,8 @@ export interface FABProps {
     position?: "bottom-right" | "bottom-left";
     className?: string;
     testID?: string;
+    accessibilityLabel?: string;
+    accessibleSizing?: boolean;
 }
-declare function FAB({ icon, onPress, label, position, className, testID, }: FABProps): import("react").JSX.Element;
+declare function FAB({ icon, onPress, label, position, className, testID, accessibilityLabel, accessibleSizing, }: FABProps): import("react").JSX.Element;
 export default FAB;

package/dist/Actions/Actions.FAB.js

@@ -1,17 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import Icon from "../Display/Display.Icon";
-import Pressable from "../primitives/Pressable";
-import { theme } from "../theme";
-import { cn } from "../theme/tw";
-import { Typography } from "../Typography";
+import Icon from "../Display/Display.Icon.js";
+import Pressable from "../primitives/Pressable.js";
+import { theme } from "../theme/index.js";
+import { cn } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-function FAB({ icon, onPress, label, position = "bottom-right", className, testID, }) {
+function FAB({ icon, onPress, label, position = "bottom-right", className, testID, accessibilityLabel, accessibleSizing = false, }) {
     const insets = useSafeAreaInsets();
-    return (_jsxs(Pressable, { accessibilityLabel: label ?? "Acción", accessibilityRole: "button", className: cn("absolute flex-row items-center justify-center rounded-full bg-primary", label ? "h-14 px-5 gap-2" : "w-14 h-14", className), onPress: onPress, style: {
+    return (_jsxs(Pressable, { accessibilityLabel: accessibilityLabel ?? label ?? "Acción", accessibilityRole: "button", className: cn("absolute flex-row items-center justify-center rounded-full bg-primary", label
+            ? accessibleSizing
+                ? "min-h-14 px-5 py-3 gap-2"
+                : "h-14 px-5 gap-2"
+            : "w-14 h-14", className), onPress: onPress, style: {
             bottom: insets.bottom + 16,
             right: position === "bottom-right" ? 16 : undefined,
             left: position === "bottom-left" ? 16 : undefined,
             ...theme.shadow.lg,
-        }, testID: testID, children: [_jsx(Icon, { color: theme.icon.inverse, name: icon, size: 24 }), label ? (_jsx(Typography.Text, { className: "text-text-on-primary font-semibold", children: label })) : null] }));
+        }, testID: testID, children: [_jsx(Icon, { color: theme.icon.inverse, name: icon, size: 24 }), label ? (_jsx(Typography.Text, { className: "text-text-on-primary font-semibold", style: accessibleSizing ? { flexShrink: 1 } : undefined, children: label })) : null] }));
 }
 export default FAB;

package/dist/Actions/Actions.FilterButton.d.ts

@@ -3,8 +3,16 @@ export interface FilterButtonProps {
     title: string;
     active: boolean;
     onPress: () => void;
+    variant?: "default" | "mobile";
+    disabled?: boolean;
+    className?: string;
+    testID?: string;
 }
 export declare const FilterButton: FC<FilterButtonProps>;
-export declare function FilterButtonGroup({ children }: {
+export interface FilterButtonGroupProps {
     children: ReactNode;
-}): import("react").JSX.Element;
+    layout?: "row" | "scroll" | "wrap";
+    className?: string;
+    testID?: string;
+}
+export declare function FilterButtonGroup({ children, layout, className, testID, }: FilterButtonGroupProps): import("react").JSX.Element;

package/dist/Actions/Actions.FilterButton.js

@@ -1,7 +1,10 @@
-import { jsx as _jsx } from "nativewind/jsx-runtime";
-import { tv } from "../theme/tw";
-import { Typography } from "../Typography";
-import { TouchableOpacity, View } from "react-native";
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import Icon from "../Display/Display.Icon.js";
+import Pressable from "../primitives/Pressable.js";
+import { useTheme } from "../theme/index.js";
+import { cn, tv } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
+import { ScrollView, TouchableOpacity, View } from "react-native";
 const filterButton = tv({
     base: "rounded-lg items-center justify-center py-2 px-3 min-h-[36px]",
     variants: {
@@ -17,12 +20,24 @@ const filterText = tv({
     variants: {
         active: {
             true: "text-white",
-            false: "text-primary",
+            false: "text-text-accent",
         },
     },
     defaultVariants: { active: false },
 });
-export const FilterButton = ({ title, active, onPress }) => (_jsx(TouchableOpacity, { activeOpacity: 0.8, className: filterButton({ active }), onPress: onPress, children: _jsx(Typography.Text, { className: filterText({ active }), variant: "buttonSmall", children: title }) }));
-export function FilterButtonGroup({ children }) {
-    return _jsx(View, { className: "flex-row gap-2 p-3", children: children });
+export const FilterButton = ({ title, active, onPress, variant = "default", disabled = false, className, testID, }) => {
+    const theme = useTheme();
+    if (variant === "mobile") {
+        return (_jsxs(Pressable, { accessibilityLabel: title, accessibilityRole: "button", accessibilityState: { selected: active, disabled }, activeOpacity: 1 - theme.state.press, className: cn("flex-row items-center self-start rounded-full px-3 py-2 gap-2 max-w-full", active ? "bg-container-primary" : "bg-bg-muted", className), disabled: disabled, onPress: onPress, style: {
+                minHeight: 48,
+                minWidth: 48,
+            }, testID: testID, children: [active ? (_jsx(View, { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", children: _jsx(Icon, { color: theme.container.onPrimary, name: "checkmark", size: 18 }) })) : null, _jsx(Typography.Text, { className: cn("flex-shrink", active ? "text-container-on-primary" : "text-text-primary"), variant: "bodyLarge", children: title })] }));
+    }
+    return (_jsx(TouchableOpacity, { accessibilityLabel: title, accessibilityRole: "button", accessibilityState: { selected: active, disabled }, activeOpacity: 0.8, className: filterButton({ active, className }), disabled: disabled, onPress: onPress, testID: testID, children: _jsx(Typography.Text, { className: filterText({ active }), variant: "buttonSmall", children: title }) }));
+};
+export function FilterButtonGroup({ children, layout = "row", className, testID, }) {
+    if (layout === "scroll") {
+        return (_jsx(ScrollView, { className: cn("py-1", className), contentContainerStyle: { gap: 8 }, horizontal: true, keyboardShouldPersistTaps: "handled", showsHorizontalScrollIndicator: false, testID: testID, children: children }));
+    }
+    return (_jsx(View, { className: cn("flex-row gap-2 p-3", layout === "wrap" && "flex-wrap", className), testID: testID, children: children }));
 }