@titan-design/react-ui 0.12.1 → 0.14.0

package/src/components/ui/badge/Badge.stories.tsx

@@ -5,7 +5,8 @@ import { Badge, BadgeText } from './Badge'
 const meta: Meta<typeof Badge> = {
   title: 'Components/Atoms/Badge',
   component: Badge,
-  tags: ['autodocs'],
+  parameters: { docs: { description: { component: 'Composes **Indicator**.' } } },
+  tags: ['autodocs', 'status:stable', '!status:review'],
   argTypes: {
     variant: {
       control: 'select',
@@ -40,9 +41,15 @@ export const Default: Story = {
 export const AllVariants: Story = {
   render: () => (
     <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
-      <Badge variant="solid" color="primary">Solid</Badge>
-      <Badge variant="subtle" color="primary">Subtle</Badge>
-      <Badge variant="outline" color="primary">Outline</Badge>
+      <Badge variant="solid" color="primary">
+        Solid
+      </Badge>
+      <Badge variant="subtle" color="primary">
+        Subtle
+      </Badge>
+      <Badge variant="outline" color="primary">
+        Outline
+      </Badge>
     </View>
   ),
 }
@@ -51,31 +58,73 @@ export const AllColors: Story = {
   render: () => (
     <View style={{ gap: 12 }}>
       <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
-        <Badge variant="solid" color="default">Default</Badge>
-        <Badge variant="solid" color="primary">Primary</Badge>
-        <Badge variant="solid" color="secondary">Secondary</Badge>
-        <Badge variant="solid" color="success">Success</Badge>
-        <Badge variant="solid" color="error">Error</Badge>
-        <Badge variant="solid" color="warning">Warning</Badge>
-        <Badge variant="solid" color="info">Info</Badge>
+        <Badge variant="solid" color="default">
+          Default
+        </Badge>
+        <Badge variant="solid" color="primary">
+          Primary
+        </Badge>
+        <Badge variant="solid" color="secondary">
+          Secondary
+        </Badge>
+        <Badge variant="solid" color="success">
+          Success
+        </Badge>
+        <Badge variant="solid" color="error">
+          Error
+        </Badge>
+        <Badge variant="solid" color="warning">
+          Warning
+        </Badge>
+        <Badge variant="solid" color="info">
+          Info
+        </Badge>
       </View>
       <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
-        <Badge variant="subtle" color="default">Default</Badge>
-        <Badge variant="subtle" color="primary">Primary</Badge>
-        <Badge variant="subtle" color="secondary">Secondary</Badge>
-        <Badge variant="subtle" color="success">Success</Badge>
-        <Badge variant="subtle" color="error">Error</Badge>
-        <Badge variant="subtle" color="warning">Warning</Badge>
-        <Badge variant="subtle" color="info">Info</Badge>
+        <Badge variant="subtle" color="default">
+          Default
+        </Badge>
+        <Badge variant="subtle" color="primary">
+          Primary
+        </Badge>
+        <Badge variant="subtle" color="secondary">
+          Secondary
+        </Badge>
+        <Badge variant="subtle" color="success">
+          Success
+        </Badge>
+        <Badge variant="subtle" color="error">
+          Error
+        </Badge>
+        <Badge variant="subtle" color="warning">
+          Warning
+        </Badge>
+        <Badge variant="subtle" color="info">
+          Info
+        </Badge>
       </View>
       <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
-        <Badge variant="outline" color="default">Default</Badge>
-        <Badge variant="outline" color="primary">Primary</Badge>
-        <Badge variant="outline" color="secondary">Secondary</Badge>
-        <Badge variant="outline" color="success">Success</Badge>
-        <Badge variant="outline" color="error">Error</Badge>
-        <Badge variant="outline" color="warning">Warning</Badge>
-        <Badge variant="outline" color="info">Info</Badge>
+        <Badge variant="outline" color="default">
+          Default
+        </Badge>
+        <Badge variant="outline" color="primary">
+          Primary
+        </Badge>
+        <Badge variant="outline" color="secondary">
+          Secondary
+        </Badge>
+        <Badge variant="outline" color="success">
+          Success
+        </Badge>
+        <Badge variant="outline" color="error">
+          Error
+        </Badge>
+        <Badge variant="outline" color="warning">
+          Warning
+        </Badge>
+        <Badge variant="outline" color="info">
+          Info
+        </Badge>
       </View>
     </View>
   ),
@@ -84,9 +133,15 @@ export const AllColors: Story = {
 export const AllSizes: Story = {
   render: () => (
     <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
-      <Badge size="sm" color="primary">Small</Badge>
-      <Badge size="md" color="primary">Medium</Badge>
-      <Badge size="lg" color="primary">Large</Badge>
+      <Badge size="sm" color="primary">
+        Small
+      </Badge>
+      <Badge size="md" color="primary">
+        Medium
+      </Badge>
+      <Badge size="lg" color="primary">
+        Large
+      </Badge>
     </View>
   ),
 }

package/src/components/ui/badge/Badge.test.tsx

@@ -33,7 +33,15 @@ describe('Badge', () => {
   })
 
   it('renders with all color options', () => {
-    const colors = ['default', 'primary', 'secondary', 'success', 'error', 'warning', 'info'] as const
+    const colors = [
+      'default',
+      'primary',
+      'secondary',
+      'success',
+      'error',
+      'warning',
+      'info',
+    ] as const
     colors.forEach((color) => {
       const { unmount } = render(<Badge color={color}>Test</Badge>)
       expect(screen.getByText('Test')).toBeInTheDocument()
@@ -74,12 +82,20 @@ describe('Badge', () => {
 
   describe('dot indicator', () => {
     it('renders dot when dot prop is true', () => {
-      const { container } = render(<Badge dot color="success">Active</Badge>)
+      const { container } = render(
+        <Badge dot color="success">
+          Active
+        </Badge>
+      )
       expect(container.firstChild).toBeInTheDocument()
     })
 
     it('renders dot with explicit dotColor', () => {
-      const { container } = render(<Badge dot dotColor="warning">Pending</Badge>)
+      const { container } = render(
+        <Badge dot dotColor="warning">
+          Pending
+        </Badge>
+      )
       expect(container.firstChild).toBeInTheDocument()
     })
 

package/src/components/ui/badge/Badge.tsx

@@ -1,10 +1,18 @@
 import React from 'react'
-import { View, Text, type ViewProps } from 'react-native'
+import { Text, type ViewProps } from 'react-native'
 import { cn } from '../../../utils/cn'
 import { Indicator, type IndicatorColor } from '../indicator'
+import { Pill, type PillTone, type PillVariant } from '../pill'
 
 export type BadgeVariant = 'solid' | 'subtle' | 'outline'
-export type BadgeColor = 'default' | 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info'
+export type BadgeColor =
+  | 'default'
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'error'
+  | 'warning'
+  | 'info'
 export type BadgeSize = 'sm' | 'md' | 'lg'
 
 export interface BadgeProps extends ViewProps {
@@ -23,44 +31,36 @@ export interface BadgeProps extends ViewProps {
   children?: React.ReactNode
 }
 
-const variantColorStyles: Record<BadgeVariant, Record<BadgeColor, string>> = {
-  solid: {
-    default: 'bg-hairline-strong text-text-inverse',
-    primary: 'bg-brand-primary text-text-inverse',
-    secondary: 'bg-brand-secondary text-text-inverse',
-    success: 'bg-status-success text-text-inverse',
-    error: 'bg-status-error text-text-inverse',
-    warning: 'bg-status-warning text-text-inverse',
-    info: 'bg-status-info text-text-inverse',
-  },
-  subtle: {
-    default: 'bg-surface-raised text-text-secondary',
-    primary: 'bg-brand-primary-subtle text-brand-primary',
-    secondary: 'bg-brand-secondary-subtle text-brand-secondary',
-    success: 'bg-status-success-subtle text-status-success',
-    error: 'bg-status-error-subtle text-status-error',
-    warning: 'bg-status-warning-subtle text-status-warning',
-    info: 'bg-status-info-subtle text-status-info',
-  },
-  outline: {
-    default: 'border border-hairline-strong text-text-secondary',
-    primary: 'border border-brand-primary text-brand-primary',
-    secondary: 'border border-brand-secondary text-brand-secondary',
-    success: 'border border-status-success text-status-success',
-    error: 'border border-status-error text-status-error',
-    warning: 'border border-status-warning text-status-warning',
-    info: 'border border-status-info text-status-info',
-  },
+const colorToTone: Record<BadgeColor, PillTone> = {
+  default: 'neutral',
+  primary: 'brand',
+  secondary: 'brand-secondary',
+  success: 'success',
+  error: 'error',
+  warning: 'warning',
+  info: 'info',
 }
 
+/** Badge keeps its own geometry; Pill supplies structure, tone and the slots. */
 const sizeStyles: Record<BadgeSize, string> = {
-  sm: 'px-1.5 py-0.5 text-xs',
-  md: 'px-2 py-0.5 text-xs',
-  lg: 'px-2.5 py-1 text-sm',
+  sm: 'px-1.5 py-0.5',
+  md: 'px-2 py-0.5',
+  lg: 'px-2.5 py-1',
+}
+
+const textSizeStyles: Record<BadgeSize, string> = {
+  sm: 'text-xs',
+  md: 'text-xs',
+  lg: 'text-sm',
+}
+
+function dotIndicatorColor(color: BadgeColor, dotColor?: IndicatorColor): IndicatorColor {
+  if (dotColor) return dotColor
+  return color === 'default' || color === 'secondary' ? 'default' : (color as IndicatorColor)
 }
 
 /**
- * Badge component for status indicators and labels.
+ * Badge — a `Pill` preset for status indicators and labels.
  *
  * @example
  * <Badge color="success">Active</Badge>
@@ -77,28 +77,25 @@ export function Badge({
   ...props
 }: BadgeProps) {
   return (
-    <View
+    <Pill
+      variant={variant as PillVariant}
+      tone={colorToTone[color]}
+      leading={
+        dot ? (
+          <Indicator size="xs" color={dotIndicatorColor(color, dotColor)} className="mr-0.5" />
+        ) : undefined
+      }
       className={cn(
-        'inline-flex items-center justify-center rounded-full font-medium',
-        variantColorStyles[variant][color],
+        'justify-center self-auto gap-0',
+        variant === 'outline' ? 'border' : 'border-0',
         sizeStyles[size],
         className
       )}
+      textClassName={cn('font-sans font-medium', textSizeStyles[size])}
       {...props}
     >
-      {dot && (
-        <Indicator
-          size="xs"
-          color={dotColor ?? (color === 'default' || color === 'secondary' ? 'default' : color as IndicatorColor)}
-          className="mr-0.5"
-        />
-      )}
-      {typeof children === 'string' ? (
-        <Text className="text-inherit font-medium">{children}</Text>
-      ) : (
-        children
-      )}
-    </View>
+      {children}
+    </Pill>
   )
 }
 
@@ -111,9 +108,5 @@ export interface BadgeTextProps {
  * Text component for Badge content.
  */
 export function BadgeText({ children, className }: BadgeTextProps) {
-  return (
-    <Text className={cn('text-inherit font-medium', className)}>
-      {children}
-    </Text>
-  )
+  return <Text className={cn('text-inherit font-medium', className)}>{children}</Text>
 }

package/src/components/ui/breadcrumbs/Breadcrumbs.stories.tsx

@@ -5,7 +5,7 @@ import { Breadcrumbs, BreadcrumbItem } from './Breadcrumbs'
 const meta: Meta<typeof Breadcrumbs> = {
   title: 'Components/Molecules/Breadcrumbs',
   component: Breadcrumbs,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'status:stable', '!status:review'],
   argTypes: {
     maxItems: {
       control: 'number',

package/src/components/ui/breadcrumbs/Breadcrumbs.tsx

@@ -36,11 +36,7 @@ export function Breadcrumbs({
   if (maxItems && items.length > maxItems) {
     const firstItem = items[0]
     const lastItems = items.slice(-Math.floor(maxItems / 2))
-    displayItems = [
-      firstItem,
-      <BreadcrumbEllipsis key="ellipsis" />,
-      ...lastItems,
-    ]
+    displayItems = [firstItem, <BreadcrumbEllipsis key="ellipsis" />, ...lastItems]
   }
 
   return (
@@ -53,9 +49,7 @@ export function Breadcrumbs({
         <View key={index} className="flex-row items-center">
           {child}
           {index < displayItems.length - 1 && (
-            <Text className="mx-2 text-text-tertiary text-sm">
-              {separator}
-            </Text>
+            <Text className="mx-2 text-text-tertiary text-sm">{separator}</Text>
           )}
         </View>
       ))}
@@ -98,11 +92,7 @@ export function BreadcrumbItem({
   }
 
   return (
-    <Pressable
-      onPress={onPress}
-      accessibilityRole="link"
-      accessibilityHint={href}
-    >
+    <Pressable onPress={onPress} accessibilityRole="link" accessibilityHint={href}>
       <Text
         className={cn(
           'text-sm text-text-secondary',
@@ -121,7 +111,5 @@ export function BreadcrumbItem({
  * Ellipsis for collapsed breadcrumbs.
  */
 function BreadcrumbEllipsis() {
-  return (
-    <Text className="text-sm text-text-tertiary">...</Text>
-  )
+  return <Text className="text-sm text-text-tertiary">...</Text>
 }

package/src/components/ui/button/Button.stories.tsx

@@ -5,7 +5,7 @@ import { Button, ButtonText, ButtonIcon } from './Button'
 const meta: Meta<typeof Button> = {
   title: 'Components/Molecules/Button',
   component: Button,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'status:stable', '!status:review'],
   argTypes: {
     variant: {
       control: 'select',
@@ -158,12 +158,24 @@ export const AllColors: Story = {
   render: () => (
     <View style={{ gap: 8 }}>
       <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
-        <Button color="primary"><ButtonText>Primary</ButtonText></Button>
-        <Button color="secondary"><ButtonText>Secondary</ButtonText></Button>
-        <Button color="success"><ButtonText>Success</ButtonText></Button>
-        <Button color="error"><ButtonText>Error</ButtonText></Button>
-        <Button color="warning"><ButtonText>Warning</ButtonText></Button>
-        <Button color="info"><ButtonText>Info</ButtonText></Button>
+        <Button color="primary">
+          <ButtonText>Primary</ButtonText>
+        </Button>
+        <Button color="secondary">
+          <ButtonText>Secondary</ButtonText>
+        </Button>
+        <Button color="success">
+          <ButtonText>Success</ButtonText>
+        </Button>
+        <Button color="error">
+          <ButtonText>Error</ButtonText>
+        </Button>
+        <Button color="warning">
+          <ButtonText>Warning</ButtonText>
+        </Button>
+        <Button color="info">
+          <ButtonText>Info</ButtonText>
+        </Button>
       </View>
     </View>
   ),
@@ -172,9 +184,15 @@ export const AllColors: Story = {
 export const AllSizes: Story = {
   render: () => (
     <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
-      <Button size="sm"><ButtonText>Small</ButtonText></Button>
-      <Button size="md"><ButtonText>Medium</ButtonText></Button>
-      <Button size="lg"><ButtonText>Large</ButtonText></Button>
+      <Button size="sm">
+        <ButtonText>Small</ButtonText>
+      </Button>
+      <Button size="md">
+        <ButtonText>Medium</ButtonText>
+      </Button>
+      <Button size="lg">
+        <ButtonText>Large</ButtonText>
+      </Button>
     </View>
   ),
 }
@@ -183,8 +201,24 @@ export const AllSizes: Story = {
 function PlusIcon({ size = 16 }: { size?: number }) {
   return (
     <View style={{ width: size, height: size, justifyContent: 'center', alignItems: 'center' }}>
-      <View style={{ position: 'absolute', width: size * 0.6, height: 2, backgroundColor: 'currentColor', borderRadius: 1 }} />
-      <View style={{ position: 'absolute', width: 2, height: size * 0.6, backgroundColor: 'currentColor', borderRadius: 1 }} />
+      <View
+        style={{
+          position: 'absolute',
+          width: size * 0.6,
+          height: 2,
+          backgroundColor: 'currentColor',
+          borderRadius: 1,
+        }}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          width: 2,
+          height: size * 0.6,
+          backgroundColor: 'currentColor',
+          borderRadius: 1,
+        }}
+      />
     </View>
   )
 }

package/src/components/ui/button/Button.tsx

@@ -10,12 +10,12 @@ export type ButtonColor = 'primary' | 'secondary' | 'success' | 'error' | 'warni
 /** Inline color map for RNW where Tailwind text classes get dropped */
 const textColorMap: Record<ButtonVariant, Record<ButtonColor, string>> = {
   solid: {
-    primary: '#FFFFFF',
-    secondary: '#FFFFFF',
-    success: '#FFFFFF',
-    error: '#FFFFFF',
-    warning: '#FFFFFF',
-    info: '#FFFFFF',
+    primary: semanticColorsDark['on-brand-primary'],
+    secondary: semanticColorsDark['on-brand-secondary'],
+    success: semanticColorsDark['on-status-success'],
+    error: semanticColorsDark['on-status-error'],
+    warning: semanticColorsDark['on-status-warning'],
+    info: semanticColorsDark['on-status-info'],
   },
   outline: {
     primary: semanticColorsDark['brand-primary'],
@@ -78,27 +78,42 @@ export interface ButtonProps extends Omit<PressableProps, 'children'> {
 
 const variantStyles: Record<ButtonVariant, Record<ButtonColor, string>> = {
   solid: {
-    primary: 'bg-brand-primary active:bg-brand-primary-dark active:scale-[0.98] web:hover:bg-brand-primary-dark web:active:scale-[0.98]',
-    secondary: 'bg-brand-secondary active:bg-brand-secondary-dark active:scale-[0.98] web:hover:bg-brand-secondary-dark web:active:scale-[0.98]',
-    success: 'bg-status-success active:opacity-90 active:scale-[0.98] web:hover:opacity-90 web:active:scale-[0.98]',
-    error: 'bg-status-error active:opacity-90 active:scale-[0.98] web:hover:opacity-90 web:active:scale-[0.98]',
-    warning: 'bg-status-warning active:opacity-90 active:scale-[0.98] web:hover:opacity-90 web:active:scale-[0.98]',
+    primary:
+      'bg-brand-primary active:bg-brand-primary-dark active:scale-[0.98] web:hover:bg-brand-primary-dark web:active:scale-[0.98]',
+    secondary:
+      'bg-brand-secondary active:bg-brand-secondary-dark active:scale-[0.98] web:hover:bg-brand-secondary-dark web:active:scale-[0.98]',
+    success:
+      'bg-status-success active:opacity-90 active:scale-[0.98] web:hover:opacity-90 web:active:scale-[0.98]',
+    error:
+      'bg-status-error active:opacity-90 active:scale-[0.98] web:hover:opacity-90 web:active:scale-[0.98]',
+    warning:
+      'bg-status-warning active:opacity-90 active:scale-[0.98] web:hover:opacity-90 web:active:scale-[0.98]',
     info: 'bg-status-info active:opacity-90 active:scale-[0.98] web:hover:opacity-90 web:active:scale-[0.98]',
   },
   outline: {
-    primary: 'border-2 border-brand-primary bg-transparent active:bg-brand-primary-subtle active:scale-[0.98] web:hover:bg-brand-primary-subtle web:active:scale-[0.98]',
-    secondary: 'border-2 border-brand-secondary bg-transparent active:bg-brand-secondary-subtle active:scale-[0.98] web:hover:bg-brand-secondary-subtle web:active:scale-[0.98]',
-    success: 'border-2 border-status-success bg-transparent active:bg-status-success-subtle active:scale-[0.98] web:hover:bg-status-success-subtle web:active:scale-[0.98]',
-    error: 'border-2 border-status-error bg-transparent active:bg-status-error-subtle active:scale-[0.98] web:hover:bg-status-error-subtle web:active:scale-[0.98]',
-    warning: 'border-2 border-status-warning bg-transparent active:bg-status-warning-subtle active:scale-[0.98] web:hover:bg-status-warning-subtle web:active:scale-[0.98]',
+    primary:
+      'border-2 border-brand-primary bg-transparent active:bg-brand-primary-subtle active:scale-[0.98] web:hover:bg-brand-primary-subtle web:active:scale-[0.98]',
+    secondary:
+      'border-2 border-brand-secondary bg-transparent active:bg-brand-secondary-subtle active:scale-[0.98] web:hover:bg-brand-secondary-subtle web:active:scale-[0.98]',
+    success:
+      'border-2 border-status-success bg-transparent active:bg-status-success-subtle active:scale-[0.98] web:hover:bg-status-success-subtle web:active:scale-[0.98]',
+    error:
+      'border-2 border-status-error bg-transparent active:bg-status-error-subtle active:scale-[0.98] web:hover:bg-status-error-subtle web:active:scale-[0.98]',
+    warning:
+      'border-2 border-status-warning bg-transparent active:bg-status-warning-subtle active:scale-[0.98] web:hover:bg-status-warning-subtle web:active:scale-[0.98]',
     info: 'border-2 border-status-info bg-transparent active:bg-status-info-subtle active:scale-[0.98] web:hover:bg-status-info-subtle web:active:scale-[0.98]',
   },
   ghost: {
-    primary: 'bg-transparent active:bg-brand-primary-subtle active:scale-[0.98] web:hover:bg-brand-primary-subtle web:active:scale-[0.98]',
-    secondary: 'bg-transparent active:bg-brand-secondary-subtle active:scale-[0.98] web:hover:bg-brand-secondary-subtle web:active:scale-[0.98]',
-    success: 'bg-transparent active:bg-status-success-subtle active:scale-[0.98] web:hover:bg-status-success-subtle web:active:scale-[0.98]',
-    error: 'bg-transparent active:bg-status-error-subtle active:scale-[0.98] web:hover:bg-status-error-subtle web:active:scale-[0.98]',
-    warning: 'bg-transparent active:bg-status-warning-subtle active:scale-[0.98] web:hover:bg-status-warning-subtle web:active:scale-[0.98]',
+    primary:
+      'bg-transparent active:bg-brand-primary-subtle active:scale-[0.98] web:hover:bg-brand-primary-subtle web:active:scale-[0.98]',
+    secondary:
+      'bg-transparent active:bg-brand-secondary-subtle active:scale-[0.98] web:hover:bg-brand-secondary-subtle web:active:scale-[0.98]',
+    success:
+      'bg-transparent active:bg-status-success-subtle active:scale-[0.98] web:hover:bg-status-success-subtle web:active:scale-[0.98]',
+    error:
+      'bg-transparent active:bg-status-error-subtle active:scale-[0.98] web:hover:bg-status-error-subtle web:active:scale-[0.98]',
+    warning:
+      'bg-transparent active:bg-status-warning-subtle active:scale-[0.98] web:hover:bg-status-warning-subtle web:active:scale-[0.98]',
     info: 'bg-transparent active:bg-status-info-subtle active:scale-[0.98] web:hover:bg-status-info-subtle web:active:scale-[0.98]',
   },
   link: {
@@ -113,12 +128,12 @@ const variantStyles: Record<ButtonVariant, Record<ButtonColor, string>> = {
 
 const textStyles: Record<ButtonVariant, Record<ButtonColor, string>> = {
   solid: {
-    primary: 'text-white',
-    secondary: 'text-white',
-    success: 'text-white',
-    error: 'text-white',
-    warning: 'text-white',
-    info: 'text-white',
+    primary: 'text-on-brand-primary',
+    secondary: 'text-on-brand-secondary',
+    success: 'text-on-status-success',
+    error: 'text-on-status-error',
+    warning: 'text-on-status-warning',
+    info: 'text-on-status-info',
   },
   outline: {
     primary: 'text-brand-primary',
@@ -237,11 +252,7 @@ export const Button = forwardRef<View, ButtonProps>(function Button(
       )}
       {isLoading && loadingText ? (
         <Text
-          className={cn(
-            'font-semibold',
-            textSizeStyles[size],
-            textStyles[variant][color]
-          )}
+          className={cn('font-semibold', textSizeStyles[size], textStyles[variant][color])}
           style={{ color: textColorMap[variant][color] }}
         >
           {loadingText}
@@ -262,11 +273,7 @@ export interface ButtonTextProps {
  * Text component for Button. Use inside Button for consistent styling.
  */
 export function ButtonText({ children, className }: ButtonTextProps) {
-  return (
-    <Text className={cn('font-semibold text-inherit', className)}>
-      {children}
-    </Text>
-  )
+  return <Text className={cn('font-semibold text-inherit', className)}>{children}</Text>
 }
 
 export interface ButtonIconProps {