@bubbasfw/ui 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Howeth and Harp
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,72 @@
-# Temporary Holding Version
+# @bubbasfw/ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Bubba’s universal React Native design system scaffold. The same NativeWind
+Button uses `Pressable`, `Text`, and `ActivityIndicator` on native platforms and
+React Native Web. This initial package contains the Button and foundation tokens.
+
+```tsx
+import { Button } from '@bubbasfw/ui';
+
+<Button onPress={save} loading={saving} loadingLabel="Saving…">
+  Save changes
+</Button>
+```
+
+Variants: `primary`, `secondary`, `outline`, `ghost`. Sizes: `sm`, `md`, `lg`.
+Use `className` for the Pressable and `textClassName` for the label. Native
+Pressable props and refs are forwarded. Loading and disabled states block presses
+and expose accessibility state. Label content should be text or inline native Text.
+
+## Consumer setup
+
+Baseline: React 19.2.3, React Native 0.86.3, React Native Web 0.21.4,
+NativeWind 4.2.7, Tailwind 3.4.17. Configure the host app for NativeWind and scan
+this package’s source so its utilities are generated:
+
+```sh
+pnpm add @bubbasfw/ui nativewind@4.2.7
+pnpm add -D tailwindcss@3.4.17
+```
+
+Expo apps must also declare NativeWind 4's Babel runtime directly:
+
+```sh
+pnpm add react-native-css-interop@0.2.7
+npx expo install react-native-reanimated react-native-worklets react-native-safe-area-context
+```
+
+The Babel preset emits `react-native-css-interop` imports into app files. Its
+transitive dependency through NativeWind does not resolve from those files in
+pnpm's isolated dependency layout.
+
+```js
+const path = require('node:path');
+const uiRoot = path.dirname(require.resolve('@bubbasfw/ui/package.json'));
+
+module.exports = {
+  content: [
+    './App.{js,jsx,ts,tsx}',
+    './app/**/*.{js,jsx,ts,tsx}',
+    './pages/**/*.{js,jsx,ts,tsx}',
+    path.join(uiRoot, 'src/**/*.{ts,tsx}'),
+  ],
+  presets: [
+    require('nativewind/preset'),
+    require('@bubbasfw/ui/tailwind-preset'),
+  ],
+};
+```
+
+Expo requires NativeWind’s Metro/Babel setup and compatible native dependencies.
+Next.js requires React Native Web aliasing, NativeWind’s JSX import source,
+Tailwind 3/PostCSS, and runtime transpilation. App Router interactive consumers
+need a client boundary. See the repository’s
+[complete setup and runnable examples](https://github.com/handh-dev/bubbas-ui#readme).
+
+The package exports `@bubbasfw/ui/tokens` without React runtime imports and
+`@bubbasfw/ui/tailwind-preset` for shared color/radius utilities. Platform peers
+are external; React Native Web is optional for native-only consumers.
+
+Published releases use public npm access. The code is licensed under
+[MIT](LICENSE). Font and artwork binaries are excluded and retain
+their separate distribution rights. No trademark license is granted.

package/dist/index.cjs

@@ -0,0 +1,110 @@
+"use client";
+'use strict';
+
+var react = require('react');
+var reactNative = require('react-native');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('nativewind/jsx-runtime');
+
+// src/tokens.ts
+var tokens = {
+  brandVersion: "1.0.0",
+  colors: {
+    blue: "#007CE8",
+    red: "#CC0000",
+    redHover: "#A80000",
+    navy: "#03256C",
+    night: "#001845",
+    ink: "#131B23",
+    muted: "#526075",
+    line: "#D9E8FB",
+    white: "#FFFFFF",
+    gold: "#FED766",
+    disabled: "#F0F2F5",
+    disabledText: "#6B727E"
+  },
+  spacing: { 1: 4, 2: 8, 3: 12, 4: 16, 6: 24, 8: 32, 12: 48, 16: 64 },
+  radius: { control: 4, panel: 12 },
+  touchTarget: { minimum: 44, default: 48 }
+};
+var containerVariants = {
+  primary: "border-bubba-red bg-bubba-red",
+  secondary: "border-bubba-navy bg-bubba-navy",
+  outline: "border-bubba-navy bg-transparent",
+  ghost: "border-transparent bg-transparent"
+};
+var textVariants = {
+  primary: "text-bubba-white",
+  secondary: "text-bubba-white",
+  outline: "text-bubba-navy",
+  ghost: "text-bubba-navy"
+};
+var containerSizes = {
+  sm: "min-h-[44px] px-3 py-2",
+  md: "min-h-[48px] px-5 py-3",
+  lg: "min-h-[56px] px-6 py-4"
+};
+var textSizes = {
+  sm: "text-sm",
+  md: "text-base",
+  lg: "text-lg"
+};
+var Button = react.forwardRef(
+  function Button2({
+    children,
+    variant = "primary",
+    size = "md",
+    loading = false,
+    loadingLabel,
+    disabled = false,
+    className,
+    textClassName,
+    accessibilityState,
+    "aria-busy": ariaBusy,
+    "aria-disabled": ariaDisabled,
+    ...props
+  }, ref) {
+    const explicitlyDisabled = disabled || (ariaDisabled ?? accessibilityState?.disabled ?? false);
+    const isDisabled = explicitlyDisabled || loading;
+    const isBusy = loading || (ariaBusy ?? accessibilityState?.busy ?? false);
+    const spinnerColor = explicitlyDisabled ? tokens.colors.disabledText : variant === "primary" || variant === "secondary" ? tokens.colors.white : tokens.colors.navy;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      reactNative.Pressable,
+      {
+        ...props,
+        ref,
+        accessibilityRole: "button",
+        accessibilityState: { ...accessibilityState, disabled: isDisabled, busy: isBusy },
+        "aria-busy": isBusy,
+        "aria-disabled": isDisabled,
+        disabled: isDisabled,
+        className: tailwindMerge.twMerge(
+          "min-w-[44px] flex-row items-center justify-center gap-2 rounded-[4px] border active:opacity-80 web:focus-visible:outline web:focus-visible:outline-2 web:focus-visible:outline-offset-2 web:focus-visible:outline-bubba-navy",
+          containerVariants[variant],
+          containerSizes[size],
+          explicitlyDisabled && "border-bubba-disabled bg-bubba-disabled",
+          className
+        ),
+        children: [
+          loading ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.ActivityIndicator, { size: "small", color: spinnerColor, accessible: false }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.Text,
+            {
+              className: tailwindMerge.twMerge(
+                "font-bold text-center",
+                textVariants[variant],
+                textSizes[size],
+                explicitlyDisabled && "text-bubba-disabledText",
+                textClassName
+              ),
+              children: loading && loadingLabel ? loadingLabel : children
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+exports.Button = Button;
+exports.tokens = tokens;

package/dist/index.d.cts

@@ -0,0 +1,22 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import * as react_native from 'react-native';
+import { PressableProps } from 'react-native';
+export { BubbaTokens, tokens } from './tokens.cjs';
+
+type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost';
+type ButtonSize = 'sm' | 'md' | 'lg';
+interface ButtonProps extends Omit<PressableProps, 'children' | 'className'> {
+    /** Text content, or inline React Native Text content. */
+    children: ReactNode;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    loading?: boolean;
+    loadingLabel?: string;
+    className?: string;
+    textClassName?: string;
+}
+/** One native Pressable and Text implementation on iOS, Android, and web. */
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<react_native.View>>;
+
+export { Button, type ButtonProps, type ButtonSize, type ButtonVariant };

package/dist/index.d.ts

@@ -0,0 +1,22 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import * as react_native from 'react-native';
+import { PressableProps } from 'react-native';
+export { BubbaTokens, tokens } from './tokens.js';
+
+type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost';
+type ButtonSize = 'sm' | 'md' | 'lg';
+interface ButtonProps extends Omit<PressableProps, 'children' | 'className'> {
+    /** Text content, or inline React Native Text content. */
+    children: ReactNode;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    loading?: boolean;
+    loadingLabel?: string;
+    className?: string;
+    textClassName?: string;
+}
+/** One native Pressable and Text implementation on iOS, Android, and web. */
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<react_native.View>>;
+
+export { Button, type ButtonProps, type ButtonSize, type ButtonVariant };

package/dist/index.js

@@ -0,0 +1,107 @@
+"use client";
+import { forwardRef } from 'react';
+import { Pressable, ActivityIndicator, Text } from 'react-native';
+import { twMerge } from 'tailwind-merge';
+import { jsxs, jsx } from 'nativewind/jsx-runtime';
+
+// src/tokens.ts
+var tokens = {
+  brandVersion: "1.0.0",
+  colors: {
+    blue: "#007CE8",
+    red: "#CC0000",
+    redHover: "#A80000",
+    navy: "#03256C",
+    night: "#001845",
+    ink: "#131B23",
+    muted: "#526075",
+    line: "#D9E8FB",
+    white: "#FFFFFF",
+    gold: "#FED766",
+    disabled: "#F0F2F5",
+    disabledText: "#6B727E"
+  },
+  spacing: { 1: 4, 2: 8, 3: 12, 4: 16, 6: 24, 8: 32, 12: 48, 16: 64 },
+  radius: { control: 4, panel: 12 },
+  touchTarget: { minimum: 44, default: 48 }
+};
+var containerVariants = {
+  primary: "border-bubba-red bg-bubba-red",
+  secondary: "border-bubba-navy bg-bubba-navy",
+  outline: "border-bubba-navy bg-transparent",
+  ghost: "border-transparent bg-transparent"
+};
+var textVariants = {
+  primary: "text-bubba-white",
+  secondary: "text-bubba-white",
+  outline: "text-bubba-navy",
+  ghost: "text-bubba-navy"
+};
+var containerSizes = {
+  sm: "min-h-[44px] px-3 py-2",
+  md: "min-h-[48px] px-5 py-3",
+  lg: "min-h-[56px] px-6 py-4"
+};
+var textSizes = {
+  sm: "text-sm",
+  md: "text-base",
+  lg: "text-lg"
+};
+var Button = forwardRef(
+  function Button2({
+    children,
+    variant = "primary",
+    size = "md",
+    loading = false,
+    loadingLabel,
+    disabled = false,
+    className,
+    textClassName,
+    accessibilityState,
+    "aria-busy": ariaBusy,
+    "aria-disabled": ariaDisabled,
+    ...props
+  }, ref) {
+    const explicitlyDisabled = disabled || (ariaDisabled ?? accessibilityState?.disabled ?? false);
+    const isDisabled = explicitlyDisabled || loading;
+    const isBusy = loading || (ariaBusy ?? accessibilityState?.busy ?? false);
+    const spinnerColor = explicitlyDisabled ? tokens.colors.disabledText : variant === "primary" || variant === "secondary" ? tokens.colors.white : tokens.colors.navy;
+    return /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        ...props,
+        ref,
+        accessibilityRole: "button",
+        accessibilityState: { ...accessibilityState, disabled: isDisabled, busy: isBusy },
+        "aria-busy": isBusy,
+        "aria-disabled": isDisabled,
+        disabled: isDisabled,
+        className: twMerge(
+          "min-w-[44px] flex-row items-center justify-center gap-2 rounded-[4px] border active:opacity-80 web:focus-visible:outline web:focus-visible:outline-2 web:focus-visible:outline-offset-2 web:focus-visible:outline-bubba-navy",
+          containerVariants[variant],
+          containerSizes[size],
+          explicitlyDisabled && "border-bubba-disabled bg-bubba-disabled",
+          className
+        ),
+        children: [
+          loading ? /* @__PURE__ */ jsx(ActivityIndicator, { size: "small", color: spinnerColor, accessible: false }) : null,
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              className: twMerge(
+                "font-bold text-center",
+                textVariants[variant],
+                textSizes[size],
+                explicitlyDisabled && "text-bubba-disabledText",
+                textClassName
+              ),
+              children: loading && loadingLabel ? loadingLabel : children
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+export { Button, tokens };

package/dist/tokens.cjs

@@ -0,0 +1,25 @@
+'use strict';
+
+// src/tokens.ts
+var tokens = {
+  brandVersion: "1.0.0",
+  colors: {
+    blue: "#007CE8",
+    red: "#CC0000",
+    redHover: "#A80000",
+    navy: "#03256C",
+    night: "#001845",
+    ink: "#131B23",
+    muted: "#526075",
+    line: "#D9E8FB",
+    white: "#FFFFFF",
+    gold: "#FED766",
+    disabled: "#F0F2F5",
+    disabledText: "#6B727E"
+  },
+  spacing: { 1: 4, 2: 8, 3: 12, 4: 16, 6: 24, 8: 32, 12: 48, 16: 64 },
+  radius: { control: 4, panel: 12 },
+  touchTarget: { minimum: 44, default: 48 }
+};
+
+exports.tokens = tokens;

package/dist/tokens.d.cts

@@ -0,0 +1,39 @@
+/** Pinned foundations from Bubba's Brand Studio brand release 1.0.0. */
+declare const tokens: {
+    readonly brandVersion: "1.0.0";
+    readonly colors: {
+        readonly blue: "#007CE8";
+        readonly red: "#CC0000";
+        readonly redHover: "#A80000";
+        readonly navy: "#03256C";
+        readonly night: "#001845";
+        readonly ink: "#131B23";
+        readonly muted: "#526075";
+        readonly line: "#D9E8FB";
+        readonly white: "#FFFFFF";
+        readonly gold: "#FED766";
+        readonly disabled: "#F0F2F5";
+        readonly disabledText: "#6B727E";
+    };
+    readonly spacing: {
+        readonly 1: 4;
+        readonly 2: 8;
+        readonly 3: 12;
+        readonly 4: 16;
+        readonly 6: 24;
+        readonly 8: 32;
+        readonly 12: 48;
+        readonly 16: 64;
+    };
+    readonly radius: {
+        readonly control: 4;
+        readonly panel: 12;
+    };
+    readonly touchTarget: {
+        readonly minimum: 44;
+        readonly default: 48;
+    };
+};
+type BubbaTokens = typeof tokens;
+
+export { type BubbaTokens, tokens };

package/dist/tokens.d.ts

@@ -0,0 +1,39 @@
+/** Pinned foundations from Bubba's Brand Studio brand release 1.0.0. */
+declare const tokens: {
+    readonly brandVersion: "1.0.0";
+    readonly colors: {
+        readonly blue: "#007CE8";
+        readonly red: "#CC0000";
+        readonly redHover: "#A80000";
+        readonly navy: "#03256C";
+        readonly night: "#001845";
+        readonly ink: "#131B23";
+        readonly muted: "#526075";
+        readonly line: "#D9E8FB";
+        readonly white: "#FFFFFF";
+        readonly gold: "#FED766";
+        readonly disabled: "#F0F2F5";
+        readonly disabledText: "#6B727E";
+    };
+    readonly spacing: {
+        readonly 1: 4;
+        readonly 2: 8;
+        readonly 3: 12;
+        readonly 4: 16;
+        readonly 6: 24;
+        readonly 8: 32;
+        readonly 12: 48;
+        readonly 16: 64;
+    };
+    readonly radius: {
+        readonly control: 4;
+        readonly panel: 12;
+    };
+    readonly touchTarget: {
+        readonly minimum: 44;
+        readonly default: 48;
+    };
+};
+type BubbaTokens = typeof tokens;
+
+export { type BubbaTokens, tokens };

package/dist/tokens.js

@@ -0,0 +1,23 @@
+// src/tokens.ts
+var tokens = {
+  brandVersion: "1.0.0",
+  colors: {
+    blue: "#007CE8",
+    red: "#CC0000",
+    redHover: "#A80000",
+    navy: "#03256C",
+    night: "#001845",
+    ink: "#131B23",
+    muted: "#526075",
+    line: "#D9E8FB",
+    white: "#FFFFFF",
+    gold: "#FED766",
+    disabled: "#F0F2F5",
+    disabledText: "#6B727E"
+  },
+  spacing: { 1: 4, 2: 8, 3: 12, 4: 16, 6: 24, 8: 32, 12: 48, 16: 64 },
+  radius: { control: 4, panel: 12 },
+  touchTarget: { minimum: 44, default: 48 }
+};
+
+export { tokens };

package/package.json

@@ -1,6 +1,87 @@
 {
   "name": "@bubbasfw/ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "Bubba\u2019s universal React Native and web design system, styled with NativeWind.",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "react-native": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "react-native": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      },
+      "default": "./dist/index.js"
+    },
+    "./tokens": {
+      "import": {
+        "types": "./dist/tokens.d.ts",
+        "default": "./dist/tokens.js"
+      },
+      "require": {
+        "types": "./dist/tokens.d.cts",
+        "default": "./dist/tokens.cjs"
+      },
+      "default": "./dist/tokens.js"
+    },
+    "./tailwind-preset": "./tailwind-preset.cjs",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src",
+    "tailwind-preset.cjs",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/handh-dev/bubbas-ui.git",
+    "directory": "packages/ui"
+  },
+  "homepage": "https://github.com/handh-dev/bubbas-ui#readme",
+  "keywords": [
+    "react-native",
+    "react-native-web",
+    "expo",
+    "nextjs",
+    "nativewind",
+    "design-system",
+    "bubbas"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc --noEmit",
+    "prepack": "pnpm build"
+  },
+  "dependencies": {
+    "tailwind-merge": "^2.6.1"
+  },
+  "peerDependencies": {
+    "react": "^19.2.3",
+    "react-native": "^0.86.3",
+    "react-native-web": "^0.21.4",
+    "nativewind": "^4.2.7",
+    "tailwindcss": "^3.4.17"
+  },
+  "peerDependenciesMeta": {
+    "react-native-web": {
+      "optional": true
+    }
+  }
+}

package/src/components/Button.tsx

@@ -0,0 +1,105 @@
+'use client';
+
+import { forwardRef, type ElementRef, type ReactNode } from 'react';
+import { ActivityIndicator, Pressable, Text, type PressableProps } from 'react-native';
+import { twMerge } from 'tailwind-merge';
+import { tokens } from '../tokens';
+
+export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+
+export interface ButtonProps extends Omit<PressableProps, 'children' | 'className'> {
+  /** Text content, or inline React Native Text content. */
+  children: ReactNode;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  loading?: boolean;
+  loadingLabel?: string;
+  className?: string;
+  textClassName?: string;
+}
+
+const containerVariants: Record<ButtonVariant, string> = {
+  primary: 'border-bubba-red bg-bubba-red',
+  secondary: 'border-bubba-navy bg-bubba-navy',
+  outline: 'border-bubba-navy bg-transparent',
+  ghost: 'border-transparent bg-transparent',
+};
+const textVariants: Record<ButtonVariant, string> = {
+  primary: 'text-bubba-white',
+  secondary: 'text-bubba-white',
+  outline: 'text-bubba-navy',
+  ghost: 'text-bubba-navy',
+};
+const containerSizes: Record<ButtonSize, string> = {
+  sm: 'min-h-[44px] px-3 py-2',
+  md: 'min-h-[48px] px-5 py-3',
+  lg: 'min-h-[56px] px-6 py-4',
+};
+const textSizes: Record<ButtonSize, string> = {
+  sm: 'text-sm',
+  md: 'text-base',
+  lg: 'text-lg',
+};
+
+/** One native Pressable and Text implementation on iOS, Android, and web. */
+export const Button = forwardRef<ElementRef<typeof Pressable>, ButtonProps>(
+  function Button(
+    {
+      children,
+      variant = 'primary',
+      size = 'md',
+      loading = false,
+      loadingLabel,
+      disabled = false,
+      className,
+      textClassName,
+      accessibilityState,
+      'aria-busy': ariaBusy,
+      'aria-disabled': ariaDisabled,
+      ...props
+    },
+    ref,
+  ) {
+    const explicitlyDisabled = disabled || (ariaDisabled ?? accessibilityState?.disabled ?? false);
+    const isDisabled = explicitlyDisabled || loading;
+    const isBusy = loading || (ariaBusy ?? accessibilityState?.busy ?? false);
+    const spinnerColor = explicitlyDisabled
+      ? tokens.colors.disabledText
+      : variant === 'primary' || variant === 'secondary'
+        ? tokens.colors.white
+        : tokens.colors.navy;
+
+    return (
+      <Pressable
+        {...props}
+        ref={ref}
+        accessibilityRole="button"
+        accessibilityState={{ ...accessibilityState, disabled: isDisabled, busy: isBusy }}
+        aria-busy={isBusy}
+        aria-disabled={isDisabled}
+        disabled={isDisabled}
+        className={twMerge(
+          'min-w-[44px] flex-row items-center justify-center gap-2 rounded-[4px] border active:opacity-80 web:focus-visible:outline web:focus-visible:outline-2 web:focus-visible:outline-offset-2 web:focus-visible:outline-bubba-navy',
+          containerVariants[variant],
+          containerSizes[size],
+          explicitlyDisabled && 'border-bubba-disabled bg-bubba-disabled',
+          className,
+        )}
+      >
+        {loading ? <ActivityIndicator size="small" color={spinnerColor} accessible={false} /> : null}
+        <Text
+          className={twMerge(
+            'font-bold text-center',
+            textVariants[variant],
+            textSizes[size],
+            explicitlyDisabled && 'text-bubba-disabledText',
+            textClassName,
+          )}
+        >
+          {loading && loadingLabel ? loadingLabel : children}
+        </Text>
+      </Pressable>
+    );
+  },
+);

package/src/index.ts

@@ -0,0 +1,6 @@
+'use client';
+
+export { Button } from './components/Button';
+export type { ButtonProps, ButtonSize, ButtonVariant } from './components/Button';
+export { tokens } from './tokens';
+export type { BubbaTokens } from './tokens';

package/src/tokens.ts

@@ -0,0 +1,23 @@
+/** Pinned foundations from Bubba's Brand Studio brand release 1.0.0. */
+export const tokens = {
+  brandVersion: '1.0.0',
+  colors: {
+    blue: '#007CE8',
+    red: '#CC0000',
+    redHover: '#A80000',
+    navy: '#03256C',
+    night: '#001845',
+    ink: '#131B23',
+    muted: '#526075',
+    line: '#D9E8FB',
+    white: '#FFFFFF',
+    gold: '#FED766',
+    disabled: '#F0F2F5',
+    disabledText: '#6B727E',
+  },
+  spacing: { 1: 4, 2: 8, 3: 12, 4: 16, 6: 24, 8: 32, 12: 48, 16: 64 },
+  radius: { control: 4, panel: 12 },
+  touchTarget: { minimum: 44, default: 48 },
+} as const;
+
+export type BubbaTokens = typeof tokens;

package/tailwind-preset.cjs

@@ -0,0 +1,14 @@
+const { tokens } = require('./dist/tokens.cjs');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  theme: {
+    extend: {
+      colors: { bubba: tokens.colors },
+      borderRadius: {
+        'bubba-control': `${tokens.radius.control}px`,
+        'bubba-panel': `${tokens.radius.panel}px`,
+      },
+    },
+  },
+};