@sincpro/mobile-ui 0.7.1 → 1.0.1

package/README.md

@@ -1,6 +1,6 @@
 # @sincpro/mobile-ui
 
-**Sincpro Mobile Design System** — the UI contract between design and engineering for React Native / Expo SDK 56 applications.
+**Sincpro Mobile Design System** — the UI contract between design and engineering for React Native / Expo SDK 57 applications.
 
 This package is maintained by Sincpro as part of the mobile framework ecosystem. Anyone can read the source and use the components. What Sincpro provides is the commitment behind it: stable APIs, predictable behavior, long-term support, and a team that ensures this keeps working as platforms evolve. Build on it knowing it will still be there.
 
@@ -29,6 +29,7 @@ module.exports = {
 ```
 
 ```tsx
+import { Actions } from "@sincpro/mobile-ui/Actions";
 import { Display } from "@sincpro/mobile-ui/Display";
 import { Form }    from "@sincpro/mobile-ui/Form";
 import { useToast, ToastProvider } from "@sincpro/mobile-ui/Feedback";
@@ -39,9 +40,9 @@ export default function InvoiceScreen() {
     <Display.Card>
       <Display.KeyValue label="Invoice #" value="INV-0042" copyable />
       <Display.Monetary amount={1500.00} variant="dataLarge" />
-      <Form.Button onPress={() => toast.success("Invoice sent")}>
+      <Actions.Button onPress={() => toast.success("Invoice sent")}>
         Send Invoice
-      </Form.Button>
+      </Actions.Button>
     </Display.Card>
   );
 }
@@ -153,7 +154,7 @@ import { ConfirmationProvider, useConfirmationContext } from "@sincpro/mobile-ui
 
 // Controlled sheet — built on RN Modal, no native peer deps
 <Sheet visible={open} onClose={() => setOpen(false)} title="Options">
-  <Form.Button onPress={confirm}>Confirm</Form.Button>
+  <Actions.Button onPress={confirm}>Confirm</Actions.Button>
 </Sheet>
 
 // Imperative confirmation
@@ -257,7 +258,7 @@ import { Display } from "@sincpro/mobile-ui/Display";
 | `Form.ControlledCheckbox` | `Checkbox` + react-hook-form |
 | `Form.ControlledDropdown` | `Dropdown` + react-hook-form |
 | `Form.ControlledMonetaryInput` | `MonetaryInput` + react-hook-form |
-| `Form.Button` / `IconButton` / `FAB` | Action components in Form namespace |
+| `Actions.Button` / `IconButton` / `FAB` | Action components (preferred over deprecated `Form.Button` aliases) |
 
 ### Feedback
 
@@ -338,6 +339,7 @@ import { Display } from "@sincpro/mobile-ui/Display";
 | `FormViewV2` | Dynamic form view with field management |
 | `AuthFormView` | Authentication form layout |
 | `Wizard` / `useWizard` | Multi-step wizard with guards and lifecycle hooks |
+| `AppSplashView` | Branded splash screen with logo and loading state |
 
 ### Widgets
 

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

@@ -1,133 +1,133 @@
-import { type VariantProps } from "../theme/tw";
+import { type VariantProps } from "../theme/tw.js";
 import type React from "react";
 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>>;
+}, undefined>>;
 export interface ButtonProps extends VariantProps<typeof button> {
     title: string;
     onPress?: () => void;

package/dist/Actions/Actions.Button.js

@@ -1,22 +1,21 @@
 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 +38,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 +69,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 +103,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 +119,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 +133,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;
@@ -179,11 +178,8 @@ const Button = ({ title, onPress, confirm, variant = "primary", size = "medium",
     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.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, 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, className: textColorClass, ellipsizeMode: "tail", numberOfLines: 1, semibold: emphasize, variant: textVariantValue, children: title })] })) }));
 };
 const ButtonIcon = ({ icon, onPress, confirm, variant = "primary", size = "medium", loading = false, disabled = false, className, }) => {
     const { show, hide } = useConfirmationContext();
@@ -208,9 +204,6 @@ const ButtonIcon = ({ icon, onPress, confirm, variant = "primary", size = "mediu
             runOnJS(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 })) }));
 };
 const ButtonWithIcon = Object.assign(Button, { Icon: ButtonIcon });

package/dist/Actions/Actions.FAB.js

@@ -1,9 +1,9 @@
 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, }) {
     const insets = useSafeAreaInsets();

package/dist/Actions/Actions.FilterButton.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
-import { tv } from "../theme/tw";
-import { Typography } from "../Typography";
+import { tv } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
 import { TouchableOpacity, View } from "react-native";
 const filterButton = tv({
     base: "rounded-lg items-center justify-center py-2 px-3 min-h-[36px]",
@@ -17,7 +17,7 @@ const filterText = tv({
     variants: {
         active: {
             true: "text-white",
-            false: "text-primary",
+            false: "text-text-accent",
         },
     },
     defaultVariants: { active: false },

package/dist/Actions/Actions.IconButton.d.ts

@@ -1,60 +1,60 @@
-import { type VariantProps } from "../theme/tw";
-import { IconType } from "../utils/icon";
+import { type VariantProps } from "../theme/tw.js";
+import { IconType } from "../utils/icon.js";
 declare const iconButton: import("tailwind-variants").TVReturnType<{
     variant: {
-        primary: string;
-        secondary: string;
-        tertiary: string;
-        ghost: string;
+        primary: "bg-primary";
+        secondary: "bg-bg-card border border-primary";
+        tertiary: "bg-accent";
+        ghost: "bg-transparent";
     };
     size: {
-        small: string;
-        medium: string;
-        large: string;
+        small: "w-8 h-8";
+        medium: "w-10 h-10";
+        large: "w-12 h-12";
     };
     rounded: {
-        true: string;
+        true: "rounded-full";
     };
     disabled: {
-        true: string;
+        true: "opacity-50";
     };
 }, undefined, "rounded-lg items-center justify-center", {
     variant: {
-        primary: string;
-        secondary: string;
-        tertiary: string;
-        ghost: string;
+        primary: "bg-primary";
+        secondary: "bg-bg-card border border-primary";
+        tertiary: "bg-accent";
+        ghost: "bg-transparent";
     };
     size: {
-        small: string;
-        medium: string;
-        large: string;
+        small: "w-8 h-8";
+        medium: "w-10 h-10";
+        large: "w-12 h-12";
     };
     rounded: {
-        true: string;
+        true: "rounded-full";
     };
     disabled: {
-        true: string;
+        true: "opacity-50";
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        primary: string;
-        secondary: string;
-        tertiary: string;
-        ghost: string;
+        primary: "bg-primary";
+        secondary: "bg-bg-card border border-primary";
+        tertiary: "bg-accent";
+        ghost: "bg-transparent";
     };
     size: {
-        small: string;
-        medium: string;
-        large: string;
+        small: "w-8 h-8";
+        medium: "w-10 h-10";
+        large: "w-12 h-12";
     };
     rounded: {
-        true: string;
+        true: "rounded-full";
     };
     disabled: {
-        true: string;
+        true: "opacity-50";
     };
-}, undefined, "rounded-lg items-center justify-center", unknown, unknown, undefined>>;
+}, undefined>>;
 export interface IconButtonProps extends VariantProps<typeof iconButton> {
     icon?: string;
     type?: IconType;

package/dist/Actions/Actions.IconButton.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
-import { Display } from "../Display";
-import { theme } from "../theme";
-import { tv } from "../theme/tw";
+import { Display } from "../Display/index.js";
+import { theme } from "../theme/index.js";
+import { tv } from "../theme/tw.js";
 import { ActivityIndicator, TouchableOpacity } from "react-native";
 const iconButton = tv({
     base: "rounded-lg items-center justify-center",
@@ -32,7 +32,7 @@ const iconButton = tv({
     },
 });
 function IconButton({ icon, type = "feather", onPress, variant = "ghost", size = "medium", loading = false, disabled = false, rounded = false, iconColor, className, }) {
-    const resolvedColor = iconColor ?? theme.primary;
+    const resolvedColor = iconColor ?? theme.text.accent;
     return (_jsx(TouchableOpacity, { activeOpacity: 0.7, className: iconButton({ variant, size, rounded, disabled, className }), disabled: disabled || loading, onPress: onPress, children: loading ? (_jsx(ActivityIndicator, { color: resolvedColor, size: "small" })) : (_jsx(Display.Icon, { color: resolvedColor, name: icon, size: 24, type: type })) }));
 }
 export default IconButton;

package/dist/Actions/index.d.ts

@@ -1,22 +1,22 @@
-import FAB from "../Actions/Actions.FAB";
-import { FilterButtonGroup } from "../Actions/Actions.FilterButton";
-import IconButton from "../Actions/Actions.IconButton";
+import FAB from "./Actions.FAB.js";
+import { FilterButtonGroup } from "./Actions.FilterButton.js";
+import IconButton from "./Actions.IconButton.js";
 export declare const Actions: {
-    /** Primary action button — gradient, outline, flat, link variants. Supports confirm dialog. */
-    Button: import("react").FC<import("../Actions/Actions.Button").ButtonProps> & {
-        Icon: import("react").FC<import("../Actions/Actions.Button").ButtonIconProps>;
+    /** Primary action button. The filled one is gold; navy is text. Supports confirm dialog. */
+    Button: import("react").FC<import("./Actions.Button.js").ButtonProps> & {
+        Icon: import("react").FC<import("./Actions.Button.js").ButtonIconProps>;
     };
     /** Small icon-only tap target — ghost, primary, secondary, tertiary variants. */
     IconButton: typeof IconButton;
     /** Floating Action Button — fixed bottom-right/left, label-optional. */
     FAB: typeof FAB;
     /** Chip-style active/inactive toggle — use inside `Actions.FilterButtonGroup`. */
-    FilterButton: import("react").FC<import("../Actions/Actions.FilterButton").FilterButtonProps>;
+    FilterButton: import("react").FC<import("./Actions.FilterButton.js").FilterButtonProps>;
     /** Horizontal scroll container for `Actions.FilterButton` chips. */
     FilterButtonGroup: typeof FilterButtonGroup;
 };
-export type { ButtonIconProps, ButtonProps } from "../Actions/Actions.Button";
-export type { FABProps } from "../Actions/Actions.FAB";
-export type { FilterButtonProps } from "../Actions/Actions.FilterButton";
-export type { IconButtonProps } from "../Actions/Actions.IconButton";
+export type { ButtonIconProps, ButtonProps } from "./Actions.Button.js";
+export type { FABProps } from "./Actions.FAB.js";
+export type { FilterButtonProps } from "./Actions.FilterButton.js";
+export type { IconButtonProps } from "./Actions.IconButton.js";
 export default Actions;

package/dist/Actions/index.js

@@ -1,9 +1,9 @@
-import ButtonWithIcon from "../Actions/Actions.Button";
-import FAB from "../Actions/Actions.FAB";
-import { FilterButton, FilterButtonGroup, } from "../Actions/Actions.FilterButton";
-import IconButton from "../Actions/Actions.IconButton";
+import ButtonWithIcon from "./Actions.Button.js";
+import FAB from "./Actions.FAB.js";
+import { FilterButton, FilterButtonGroup, } from "./Actions.FilterButton.js";
+import IconButton from "./Actions.IconButton.js";
 export const Actions = {
-    /** Primary action button — gradient, outline, flat, link variants. Supports confirm dialog. */
+    /** Primary action button. The filled one is gold; navy is text. Supports confirm dialog. */
     Button: ButtonWithIcon,
     /** Small icon-only tap target — ghost, primary, secondary, tertiary variants. */
     IconButton,