@factorialco/f0-react-native 0.34.0 → 0.35.0

package/lib/typescript/components/F0Button/F0Button.types.d.ts

@@ -0,0 +1,47 @@
+import type { IconType } from "../primitives/F0Icon";
+import type { PressableFeedbackProps, PressableFeedbackVariant } from "../primitives/PressableFeedback";
+/**
+ * Button variant types
+ */
+export declare const BUTTON_VARIANTS: readonly ["default", "outline", "critical", "neutral", "ghost", "promote"];
+export type ButtonVariant = (typeof BUTTON_VARIANTS)[number];
+export type F0ButtonVariant = ButtonVariant;
+/**
+ * Button size types
+ */
+export declare const BUTTON_SIZES: readonly ["sm", "md", "lg"];
+export type ButtonSize = (typeof BUTTON_SIZES)[number];
+export type F0ButtonSize = ButtonSize;
+/**
+ * Props that are controlled by F0Button and must not be passed through.
+ * This preserves F0Button press-state behavior and accessibility contract.
+ */
+declare const F0_BUTTON_CONTROLLED_PASSTHROUGH_PROPS: readonly ["onPressIn", "onPressOut", "accessibilityLabel", "accessibilityRole", "accessibilityState"];
+export declare const F0_BUTTON_BANNED_PROPS: readonly ["style", "className"];
+export declare const F0_BUTTON_BLOCKED_FORWARD_PROPS: readonly ["onPressIn", "onPressOut", "accessibilityLabel", "accessibilityRole", "accessibilityState", "style", "className"];
+interface F0ButtonPropsInternal extends Omit<PressableFeedbackProps, "children" | "variant" | "disabled" | (typeof F0_BUTTON_CONTROLLED_PASSTHROUGH_PROPS)[number]> {
+    label: string;
+    onPress?: () => void | Promise<unknown>;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    disabled?: boolean;
+    loading?: boolean;
+    icon?: IconType;
+    emoji?: string;
+    hideLabel?: boolean;
+    round?: boolean;
+    showBadge?: boolean;
+    fullWidth?: boolean;
+    accessibilityHint?: string;
+    testID?: string;
+    feedback?: PressableFeedbackVariant;
+}
+/**
+ * Public props for the F0Button component.
+ *
+ * Note: `className` and `style` props are NOT available.
+ * Use semantic props (variant, size, etc.) for styling.
+ */
+export type F0ButtonProps = Omit<F0ButtonPropsInternal, (typeof F0_BUTTON_BANNED_PROPS)[number]>;
+export {};
+//# sourceMappingURL=F0Button.types.d.ts.map

package/lib/typescript/components/F0Button/F0Button.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"F0Button.types.d.ts","sourceRoot":"","sources":["../../../../src/components/F0Button/F0Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AACpD,OAAO,KAAK,EACV,sBAAsB,EACtB,wBAAwB,EACzB,MAAM,iCAAiC,CAAA;AAExC;;GAEG;AACH,eAAO,MAAM,eAAe,4EAOlB,CAAA;AAEV,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAA;AAC5D,MAAM,MAAM,eAAe,GAAG,aAAa,CAAA;AAE3C;;GAEG;AACH,eAAO,MAAM,YAAY,6BAA8B,CAAA;AAEvD,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;AACtD,MAAM,MAAM,YAAY,GAAG,UAAU,CAAA;AAErC;;;GAGG;AACH,QAAA,MAAM,sCAAsC,uGAMlC,CAAA;AAEV,eAAO,MAAM,sBAAsB,iCAAkC,CAAA;AAErE,eAAO,MAAM,+BAA+B,6HAGlC,CAAA;AAEV,UAAU,qBAAsB,SAAQ,IAAI,CAC1C,sBAAsB,EACpB,UAAU,GACV,SAAS,GACT,UAAU,GACV,CAAC,OAAO,sCAAsC,CAAC,CAAC,MAAM,CAAC,CAC1D;IACC,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC,CAAA;IACvC,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,wBAAwB,CAAA;CACpC;AAED;;;;;GAKG;AACH,MAAM,MAAM,aAAa,GAAG,IAAI,CAC9B,qBAAqB,EACrB,CAAC,OAAO,sBAAsB,CAAC,CAAC,MAAM,CAAC,CACxC,CAAA"}

package/lib/typescript/components/F0Button/index.d.ts

@@ -0,0 +1,4 @@
+export { F0Button } from "./F0Button";
+export { BUTTON_VARIANTS, BUTTON_SIZES } from "./F0Button.types";
+export type { F0ButtonProps, F0ButtonVariant, F0ButtonSize, } from "./F0Button.types";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/components/F0Button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/F0Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAChE,YAAY,EACV,aAAa,EACb,eAAe,EACf,YAAY,GACb,MAAM,kBAAkB,CAAA"}

package/lib/typescript/components/Icon/index.d.ts

@@ -27,6 +27,11 @@ declare const iconVariants: import("tailwind-variants").TVReturnType<{
         xs: string;
     };
 }, undefined, "shrink-0", unknown, unknown, undefined>>;
+/**
+ * @deprecated Use `F0IconProps` from `../primitives/F0Icon` instead.
+ * Migration: Replace `IconProps` with `F0IconProps`.
+ * `F0Icon` supports `icon`, `size`, `testID`, and `className`, and adds semantic `color` variants.
+ */
 export interface IconProps extends SvgProps, VariantProps<typeof iconVariants> {
     icon: IconType;
     testID?: string;

package/lib/typescript/components/Icon/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Icon/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAChD,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAGzD,OAAO,EAAoB,KAAK,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAEtE,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;uDAchB,CAAA;AAEF,MAAM,WAAW,SAAU,SAAQ,QAAQ,EAAE,YAAY,CAAC,OAAO,YAAY,CAAC;IAC5E,IAAI,EAAE,QAAQ,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAA;IAC9E,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED;;;;GAIG;AACH,eAAO,MAAM,IAAI,uEAiBf,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Icon/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAChD,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAGzD,OAAO,EAAoB,KAAK,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAEtE,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;uDAchB,CAAA;AAEF;;;;GAIG;AACH,MAAM,WAAW,SAAU,SAAQ,QAAQ,EAAE,YAAY,CAAC,OAAO,YAAY,CAAC;IAC5E,IAAI,EAAE,QAAQ,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAA;IAC9E,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED;;;;GAIG;AACH,eAAO,MAAM,IAAI,uEAiBf,CAAA"}

package/lib/typescript/components/exports.d.ts

@@ -2,6 +2,7 @@ export * from "./Activity/ActivityItem";
 export * from "./Avatars/exports";
 export * from "./Badge";
 export * from "./Button";
+export * from "./F0Button";
 export * from "./F0Badge";
 export * from "./Counter";
 export * from "./ExampleComponent";

package/lib/typescript/components/exports.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"exports.d.ts","sourceRoot":"","sources":["../../../src/components/exports.ts"],"names":[],"mappings":"AACA,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,oBAAoB,CAAA;AAClC,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAA;AAC7C,cAAc,yBAAyB,CAAA;AACvC,cAAc,WAAW,CAAA;AACzB,cAAc,aAAa,CAAA;AAC3B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,+BAA+B,CAAA;AAC7C,cAAc,kCAAkC,CAAA;AAChD,cAAc,uCAAuC,CAAA;AAGrD,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,gCAAgC,CAAA"}
+{"version":3,"file":"exports.d.ts","sourceRoot":"","sources":["../../../src/components/exports.ts"],"names":[],"mappings":"AACA,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,oBAAoB,CAAA;AAClC,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAA;AAC7C,cAAc,yBAAyB,CAAA;AACvC,cAAc,WAAW,CAAA;AACzB,cAAc,aAAa,CAAA;AAC3B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,+BAA+B,CAAA;AAC7C,cAAc,kCAAkC,CAAA;AAChD,cAAc,uCAAuC,CAAA;AAGrD,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,gCAAgC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@factorialco/f0-react-native",
-  "version": "0.34.0",
+  "version": "0.35.0",
   "type": "module",
   "description": "React Native components for F0 Design System",
   "main": "expo-router/entry",

package/src/components/Button/__snapshots__/index.spec.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Button Snapshot - critical variant 1`] = `
 <View
-  className="flex item-start"
+  className="flex items-start"
 >
   <View
     accessibilityLabel="Test Button"
@@ -49,7 +49,7 @@ exports[`Button Snapshot - critical variant 1`] = `
 
 exports[`Button Snapshot - default button 1`] = `
 <View
-  className="flex item-start"
+  className="flex items-start"
 >
   <View
     accessibilityLabel="Test Button"
@@ -96,7 +96,7 @@ exports[`Button Snapshot - default button 1`] = `
 
 exports[`Button Snapshot - different sizes 1`] = `
 <View
-  className="flex item-start"
+  className="flex items-start"
 >
   <View
     accessibilityLabel="Test Button"
@@ -143,7 +143,7 @@ exports[`Button Snapshot - different sizes 1`] = `
 
 exports[`Button Snapshot - different sizes 2`] = `
 <View
-  className="flex item-start"
+  className="flex items-start"
 >
   <View
     accessibilityLabel="Test Button"
@@ -190,7 +190,7 @@ exports[`Button Snapshot - different sizes 2`] = `
 
 exports[`Button Snapshot - different sizes 3`] = `
 <View
-  className="flex item-start"
+  className="flex items-start"
 >
   <View
     accessibilityLabel="Test Button"
@@ -237,7 +237,7 @@ exports[`Button Snapshot - different sizes 3`] = `
 
 exports[`Button Snapshot - disabled state 1`] = `
 <View
-  className="flex item-start"
+  className="flex items-start"
 >
   <View
     accessibilityLabel="Test Button, disabled"
@@ -284,7 +284,7 @@ exports[`Button Snapshot - disabled state 1`] = `
 
 exports[`Button Snapshot - loading state 1`] = `
 <View
-  className="flex item-start"
+  className="flex items-start"
 >
   <View
     accessibilityLabel="Test Button, disabled, loading"
@@ -331,7 +331,7 @@ exports[`Button Snapshot - loading state 1`] = `
 
 exports[`Button Snapshot - outline variant 1`] = `
 <View
-  className="flex item-start"
+  className="flex items-start"
 >
   <View
     accessibilityLabel="Test Button"
@@ -378,7 +378,7 @@ exports[`Button Snapshot - outline variant 1`] = `
 
 exports[`Button Snapshot - round button with hidden label 1`] = `
 <View
-  className="flex item-start"
+  className="flex items-start"
 >
   <View
     accessibilityLabel="Test Button"
@@ -419,7 +419,7 @@ exports[`Button Snapshot - round button with hidden label 1`] = `
 
 exports[`Button Snapshot - with emoji 1`] = `
 <View
-  className="flex item-start"
+  className="flex items-start"
 >
   <View
     accessibilityLabel="Test Button"
@@ -471,7 +471,7 @@ exports[`Button Snapshot - with emoji 1`] = `
 
 exports[`Button Snapshot - with icon 1`] = `
 <View
-  className="flex item-start"
+  className="flex items-start"
 >
   <View
     accessibilityLabel="Test Button"

package/src/components/Button/index.tsx

@@ -3,8 +3,11 @@ import { Pressable, Text, View } from "react-native"
 import { tv, type VariantProps } from "tailwind-variants"
 
 import { cn } from "../../lib/utils"
-import { F0Icon, type IconType, type IconColor } from "../primitives/F0Icon"
+import { F0Icon, type IconColor, type IconType } from "../primitives/F0Icon"
 
+/**
+ * @deprecated Use `F0Button` from `../F0Button` instead.
+ */
 export const variants = [
   "default",
   "outline",
@@ -13,9 +16,20 @@ export const variants = [
   "ghost",
   "promote",
 ] as const
+
+/**
+ * @deprecated Use `F0ButtonVariant` from `../F0Button` instead.
+ */
 export type ButtonVariant = (typeof variants)[number]
 
+/**
+ * @deprecated Use `BUTTON_SIZES` from `../F0Button` instead.
+ */
 export const sizes = ["sm", "md", "lg"] as const
+
+/**
+ * @deprecated Use `F0ButtonSize` from `../F0Button` instead.
+ */
 export type ButtonSize = (typeof sizes)[number]
 
 const buttonVariants = tv({
@@ -115,6 +129,9 @@ const getTextColorClass = (variant: ButtonVariant, isPressed: boolean) => {
   }
 }
 
+/**
+ * @deprecated Use `F0ButtonProps` from `../F0Button` instead.
+ */
 export interface ButtonProps extends VariantProps<typeof buttonVariants> {
   label: string
   onPress?: () => void | Promise<unknown>
@@ -129,6 +146,9 @@ export interface ButtonProps extends VariantProps<typeof buttonVariants> {
   fullWidth?: boolean
 }
 
+/**
+ * @deprecated Use `F0Button` from `../F0Button` instead.
+ */
 export const Button = forwardRef<View, ButtonProps>(function Button(
   {
     label,
@@ -171,7 +191,7 @@ export const Button = forwardRef<View, ButtonProps>(function Button(
   const shouldShowPressed = isPressed && !isDisabled
 
   return (
-    <View className={`flex ${fullWidth ? "flex-1" : "item-start"}`}>
+    <View className={`flex ${fullWidth ? "flex-1" : "items-start"}`}>
       <Pressable
         ref={ref}
         disabled={isDisabled}

package/src/components/F0Button/F0Button.md

@@ -0,0 +1,163 @@
+# F0Button
+
+Primary interactive button component for the F0 Design System.
+
+## Overview
+
+F0Button is the semantic button API for React Native in F0. It supports:
+
+- Visual variants (`default`, `outline`, `critical`, `neutral`, `ghost`, `promote`)
+- Size variants (`sm`, `md`, `lg`)
+- Optional icon / emoji content
+- Icon-only round mode
+- Async press handlers with automatic loading-state handling
+- Visible loading indicator when busy
+- Press feedback control through `PressableFeedback`
+
+## Architecture
+
+- **Pattern:** Props API (Atomic) - element order is fixed: icon -> emoji -> label
+- **Press feedback:** Uses `PressableFeedback` component for smooth animations
+- **Press state:** Tracks pressed state with `useState` for color changes by variant
+- **Loading state:** Supports auto-loading when `onPress` returns a Promise
+- **Styling:** `className` and `style` are blocked in the public API and filtered at runtime
+- **Location:** `src/components/F0Button/`
+
+## Usage
+
+<!-- prettier-ignore -->
+```tsx
+import { F0Button } from "@factorialco/f0-react-native"
+import { Archive } from "@factorialco/f0-react-native/icons/app"
+
+<F0Button label="Submit" onPress={handleSubmit} />
+
+<F0Button label="Delete" variant="critical" icon={Archive} />
+
+<F0Button label="Add" icon={Archive} hideLabel round />
+
+<F0Button label="Save" onPress={async () => await saveData()} />
+
+<F0Button label="Love" emoji="🥰" variant="neutral" />
+
+<F0Button label="Custom" feedback="scale" />
+```
+
+## Props
+
+| Prop                | Type                             | Default     | Description                                                |
+| ------------------- | -------------------------------- | ----------- | ---------------------------------------------------------- |
+| `label`             | `string`                         | required    | Visible label and accessibility base label                 |
+| `onPress`           | `() => void \| Promise<unknown>` | —           | Press handler; async return enables auto-loading           |
+| `variant`           | `F0ButtonVariant`                | `"default"` | Visual style variant                                       |
+| `size`              | `F0ButtonSize`                   | `"md"`      | Control height and radius                                  |
+| `disabled`          | `boolean`                        | `false`     | Disabled state                                             |
+| `loading`           | `boolean`                        | `false`     | External loading control                                   |
+| `icon`              | `IconType`                       | —           | Optional icon                                              |
+| `emoji`             | `string`                         | —           | Optional emoji                                             |
+| `hideLabel`         | `boolean`                        | `false`     | Hide visible label (keeps accessibility label)             |
+| `round`             | `boolean`                        | `false`     | Makes icon-only mode circular                              |
+| `showBadge`         | `boolean`                        | `false`     | Notification badge (outline variant only)                  |
+| `fullWidth`         | `boolean`                        | `false`     | Makes button fill available horizontal space               |
+| `feedback`          | `PressableFeedbackVariant`       | `"both"`    | Press feedback mode (`both`, `scale`, `highlight`, `none`) |
+| `accessibilityHint` | `string`                         | —           | Optional screen-reader hint                                |
+| `testID`            | `string`                         | —           | Test identifier                                            |
+
+### Variants
+
+- `default` - primary/high-emphasis action
+- `outline` - secondary action with border
+- `critical` - destructive action
+- `neutral` - neutral secondary action
+- `ghost` - subtle transparent action
+- `promote` - promotional/highlighted action
+
+### Sizes
+
+- `sm` - compact
+- `md` - default
+- `lg` - large
+
+## Runtime Behavior
+
+### Async onPress auto-loading
+
+If `onPress` returns a Promise, F0Button enters internal loading state until it resolves.
+
+<!-- prettier-ignore -->
+```tsx
+<F0Button
+  label="Save"
+  onPress={async () => {
+    await saveData()
+  }}
+/>
+```
+
+### Loading visuals
+
+When `loading` is `true` (external) or an async `onPress` is pending (internal):
+
+- the button becomes non-interactive (`disabled`)
+- a centered spinner indicator is rendered
+- button content is visually hidden (`opacity`) to keep layout stable
+
+### Press feedback
+
+F0Button delegates touch feedback to `PressableFeedback` and supports semantic control via `feedback`.
+
+<!-- prettier-ignore -->
+```tsx
+<F0Button label="Both" feedback="both" />
+<F0Button label="Scale only" feedback="scale" />
+<F0Button label="Highlight only" feedback="highlight" />
+<F0Button label="No visual feedback" feedback="none" />
+```
+
+## Styling Contract
+
+F0Button is semantic-first:
+
+- `className` is **not** part of `F0ButtonProps`
+- `style` is **not** part of `F0ButtonProps`
+- Both are filtered at runtime before forwarding props to internal pressable primitives
+
+This guarantees semantic variants remain source-of-truth and prevents style overrides from bypassing the API contract.
+
+## Accessibility
+
+- Always sets `accessibilityRole="button"`
+- Auto-builds `accessibilityLabel` from `label` plus state:
+  - `"label, disabled"`
+  - `"label, disabled, loading"`
+- Exposes `accessibilityState` with:
+  - `disabled`
+  - `busy`
+- `hideLabel` does not remove accessibility label
+
+## Testing
+
+Main test suite:
+
+- `src/components/F0Button/__tests__/F0Button.spec.tsx`
+
+Coverage includes:
+
+- snapshots across variants/sizes/states
+- async loading behavior
+- accessibility label/state
+- badge rendering rules
+- runtime blocking of `className`/`style`
+
+## File Structure
+
+```
+src/components/F0Button/
+├── F0Button.tsx
+├── F0Button.types.ts
+├── F0Button.styles.ts
+├── F0Button.md
+├── __tests__/
+│   └── F0Button.spec.tsx
+└── index.ts
+```

package/src/components/F0Button/F0Button.styles.ts

@@ -0,0 +1,141 @@
+import { tv } from "tailwind-variants"
+
+import type { IconColor } from "../primitives/F0Icon"
+import type { TextColor } from "../primitives/F0Text"
+
+import type { ButtonVariant } from "./F0Button.types"
+
+export const buttonVariants = tv({
+  base: "flex-row items-center justify-center rounded border-none grow-0",
+  variants: {
+    variant: {
+      default: "bg-f0-background-accent-bold",
+      outline: "bg-f0-background-inverse-secondary border border-f0-border",
+      neutral: "bg-f0-background-secondary",
+      critical: "bg-f0-background-secondary border border-f0-border",
+      ghost: "bg-transparent",
+      promote: "bg-f0-background-promote border border-f0-border-promote",
+    },
+    size: {
+      sm: "h-6 rounded-sm",
+      md: "h-8 rounded",
+      lg: "h-10 rounded-md",
+    },
+    disabled: {
+      true: "opacity-50",
+      false: "",
+    },
+    round: {
+      true: "aspect-square p-0",
+      false: "gap-1 px-2 sm:px-3 lg:px-4",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "md",
+    disabled: false,
+    round: false,
+  },
+})
+
+export const pressedVariants = tv({
+  base: "",
+  variants: {
+    variant: {
+      default: "bg-f0-background-accent-bold-hover",
+      outline: "bg-f0-background-tertiary border-opacity-70",
+      neutral: "bg-f0-background-secondary-hover",
+      critical: "bg-f0-background-critical-bold border-transparent",
+      ghost: "bg-f0-background-secondary-hover",
+      promote: "bg-f0-background-promote-hover",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+})
+
+export const loadingContentVariants = tv({
+  variants: {
+    loading: {
+      true: "opacity-0",
+      false: "opacity-100",
+    },
+  },
+  defaultVariants: {
+    loading: false,
+  },
+})
+
+export const loadingIndicatorVariants = tv({
+  base: "rounded-full border-solid border-t-transparent",
+  variants: {
+    variant: {
+      default: "border-f0-foreground-inverse",
+      outline: "border-f0-foreground",
+      neutral: "border-f0-foreground",
+      critical: "border-f0-icon-critical",
+      ghost: "border-f0-foreground",
+      promote: "border-f0-icon-promote",
+    },
+    size: {
+      sm: "h-3 w-3 border",
+      md: "h-4 w-4 border-2",
+      lg: "h-5 w-5 border-2",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "md",
+  },
+})
+
+export const getIconColor = (
+  variant: ButtonVariant,
+  isPressed: boolean
+): IconColor => {
+  switch (variant) {
+    case "default":
+      return "inverse"
+    case "critical":
+      return isPressed ? "inverse" : "critical-bold"
+    default:
+      return "default"
+  }
+}
+
+export const getIconOnlyColor = (
+  variant: ButtonVariant,
+  isPressed: boolean
+): IconColor => {
+  switch (variant) {
+    case "critical":
+      return isPressed ? "inverse" : "critical-bold"
+    case "default":
+      return "inverse"
+    case "outline":
+    case "neutral":
+    case "ghost":
+    case "promote":
+    default:
+      return "bold"
+  }
+}
+
+export const getTextColor = (
+  variant: ButtonVariant,
+  isPressed: boolean
+): TextColor => {
+  if (isPressed && variant === "critical") {
+    return "inverse"
+  }
+
+  switch (variant) {
+    case "default":
+      return "inverse"
+    case "critical":
+      return "critical"
+    default:
+      return "default"
+  }
+}