react-native-terra-ui 0.5.1 → 0.7.0

package/src/components/chip/Chip.tsx

@@ -1,26 +1,14 @@
-import {
-  Children,
-  type ComponentRef,
-  createContext,
-  forwardRef,
-  type ReactNode,
-  useContext,
-} from 'react';
-import { Text as RNText, View, type ViewProps } from 'react-native';
-
-import {
-  StyleSheet,
-  useUnistyles,
-  withUnistyles,
-} from 'react-native-unistyles';
-
-import type { ColorToken, RoleTextVariant, TerraIconName } from '#theme/types';
-import { resolveThemeColor } from '#utils/resolve-theme-color';
-import { FONT_WEIGHT_VALUE, SYSTEM_FONT } from '#utils/typography';
-
-import { Icon } from '../icon';
-import type { ChipColor, ChipSize, ChipVariant } from './types';
-import { type CustomChipColors, getCustomColorColors } from './utils';
+import { Children, type ComponentRef, createContext, forwardRef, type ReactNode, useContext } from "react";
+import { Text as RNText, View, type ViewProps } from "react-native";
+
+import { StyleSheet, useUnistyles, withUnistyles } from "react-native-unistyles";
+
+import type { ColorToken, RoleTextVariant, TerraIconName } from "#theme/types";
+import { resolveThemeColor } from "#utils/resolve-theme-color";
+import { FONT_WEIGHT_VALUE, SYSTEM_FONT } from "#utils/typography";
+import { Icon } from "../icon";
+import type { ChipColor, ChipSize, ChipVariant } from "./types";
+import { type CustomChipColors, getCustomColorColors } from "./utils";
 
 export interface ChipProps extends ViewProps {
   size?: ChipSize;
@@ -43,8 +31,8 @@ interface ChipContextValue {
 }
 
 const ChipContext = createContext<ChipContextValue>({
-  color: 'text.default',
-  size: 'md',
+  color: "text.default",
+  size: "md",
 });
 
 // ─── Colors ─────────────────────────────────────────────────────────────────
@@ -63,50 +51,44 @@ const ChipContext = createContext<ChipContextValue>({
 // can't be a compound variant condition — see `getCustomColorColors` in
 // `utils.ts` for how it's derived instead.
 
-const SCHEME_NAMES = new Set([
-  'primary',
-  'secondary',
-  'success',
-  'warning',
-  'danger',
-]);
+const SCHEME_NAMES = new Set(["primary", "secondary", "success", "warning", "danger"]);
 
-type ChipScheme = 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
-type ChipPaintedVariant = Exclude<ChipVariant, 'ghost'>;
+type ChipScheme = "primary" | "secondary" | "success" | "warning" | "danger";
+type ChipPaintedVariant = Exclude<ChipVariant, "ghost">;
 
 // `ghost` is `outline` with its border taken away, so it has no colors of its
 // own — it borrows outline's foreground. Only the *paint* differs, and that
 // comes from the `ghost` style variant, never from here.
 function paintedVariant(variant: ChipVariant): ChipPaintedVariant {
-  return variant === 'ghost' ? 'outline' : variant;
+  return variant === "ghost" ? "outline" : variant;
 }
 
 /** Foreground token per (scheme, variant) — mirrors the spec's token table. */
 const FG_TOKEN: Record<ChipScheme, Record<ChipPaintedVariant, ColorToken>> = {
   primary: {
-    solid: 'action.fg.primary',
-    soft: 'action.fg.primary.subtle',
-    outline: 'text.accent',
+    solid: "action.fg.primary",
+    soft: "action.fg.primary.subtle",
+    outline: "text.accent",
   },
   secondary: {
-    solid: 'action.fg.secondary',
-    soft: 'action.fg.secondary.subtle',
-    outline: 'text.default',
+    solid: "action.fg.secondary",
+    soft: "action.fg.secondary.subtle",
+    outline: "text.default",
   },
   success: {
-    solid: 'status.success.fg',
-    soft: 'status.success.fg.subtle',
-    outline: 'status.success.fg.subtle',
+    solid: "status.success.fg",
+    soft: "status.success.fg.subtle",
+    outline: "status.success.fg.subtle",
   },
   warning: {
-    solid: 'status.warning.fg',
-    soft: 'status.warning.fg.subtle',
-    outline: 'status.warning.fg.subtle',
+    solid: "status.warning.fg",
+    soft: "status.warning.fg.subtle",
+    outline: "status.warning.fg.subtle",
   },
   danger: {
-    solid: 'status.danger.fg',
-    soft: 'status.danger.fg.subtle',
-    outline: 'status.danger.fg.subtle',
+    solid: "status.danger.fg",
+    soft: "status.danger.fg.subtle",
+    outline: "status.danger.fg.subtle",
   },
 };
 
@@ -123,9 +105,9 @@ function resolveForeground(
 // ─── Label sub-component ───────────────────────────────────────────────────────
 
 const LABEL_VARIANT: Record<ChipSize, RoleTextVariant> = {
-  sm: 'label-sm',
-  md: 'label-md',
-  lg: 'label-lg',
+  sm: "label-sm",
+  md: "label-md",
+  lg: "label-lg",
 };
 
 // Renders through React Native's `Text` rather than the `Text` primitive: a
@@ -143,9 +125,7 @@ const ChipLabel = ({ children }: { children: ReactNode }) => {
   return (
     <RNText
       style={[styles.label, { color: resolveThemeColor(color, theme) }]}
-      maxFontSizeMultiplier={
-        theme.typography.variants[LABEL_VARIANT[size]].maxFontSizeMultiplier
-      }
+      maxFontSizeMultiplier={theme.typography.variants[LABEL_VARIANT[size]].maxFontSizeMultiplier}
     >
       {children}
     </RNText>
@@ -160,21 +140,14 @@ const ICON_SIZE: Record<ChipSize, number> = {
   lg: 20,
 };
 
-export interface ChipIconProps extends Omit<ViewProps, 'children'> {
+export interface ChipIconProps extends Omit<ViewProps, "children"> {
   name: TerraIconName;
   size?: number;
   color?: ColorToken;
   strokeWidth?: number;
 }
 
-const ChipIcon = ({
-  name,
-  size: sizeProp,
-  color,
-  strokeWidth,
-  style,
-  ...rest
-}: ChipIconProps) => {
+const ChipIcon = ({ name, size: sizeProp, color, strokeWidth, style, ...rest }: ChipIconProps) => {
   const { color: contextColor, size } = useContext(ChipContext);
 
   return (
@@ -191,10 +164,10 @@ const ChipIcon = ({
 
 function renderChildren(children: ReactNode): ReactNode {
   return Children.map(children, (child) => {
-    if (typeof child === 'string') {
+    if (typeof child === "string") {
       return child.trim().length > 0 ? <ChipLabel>{child}</ChipLabel> : null;
     }
-    if (typeof child === 'number') {
+    if (typeof child === "number") {
       return <ChipLabel>{child}</ChipLabel>;
     }
     return child;
@@ -204,14 +177,7 @@ function renderChildren(children: ReactNode): ReactNode {
 // ─── Component ────────────────────────────────────────────────────────────────
 
 const ChipRoot = forwardRef<ComponentRef<typeof View>, ChipProps>(function Chip(
-  {
-    size = 'md',
-    variant = 'soft',
-    color = 'secondary',
-    children,
-    style,
-    ...rest
-  },
+  { size = "md", variant = "soft", color = "secondary", children, style, ...rest },
   ref
 ) {
   // Compound variants only match the 5 named schemes above — an arbitrary
@@ -220,16 +186,14 @@ const ChipRoot = forwardRef<ComponentRef<typeof View>, ChipProps>(function Chip(
   styles.useVariants({ color: color as ChipScheme, variant, size });
 
   const isCustomColor = !SCHEME_NAMES.has(color);
-  const customColors = isCustomColor
-    ? getCustomColorColors(color, paintedVariant(variant))
-    : null;
+  const customColors = isCustomColor ? getCustomColorColors(color, paintedVariant(variant)) : null;
 
   const fg = resolveForeground(color, variant, customColors);
   // Ghost takes outline's foreground but none of its paint — its transparent
   // background and absent border come from the `ghost` style variant, so
   // applying the derived paint here would hand it outline's border back.
   const customPaint =
-    customColors && variant !== 'ghost'
+    customColors && variant !== "ghost"
       ? {
           backgroundColor: customColors.bg,
           borderColor: customColors.border,
@@ -297,27 +261,27 @@ const styles = StyleSheet.create((theme) => {
       variants: {
         size: {
           sm: {
-            fontSize: theme.typography.variants['label-sm'].fontSize,
-            lineHeight: theme.typography.variants['label-sm'].lineHeight,
-            letterSpacing: theme.typography.variants['label-sm'].letterSpacing,
+            fontSize: theme.typography.variants["label-sm"].fontSize,
+            lineHeight: theme.typography.variants["label-sm"].lineHeight,
+            letterSpacing: theme.typography.variants["label-sm"].letterSpacing,
           },
           md: {
-            fontSize: theme.typography.variants['label-md'].fontSize,
-            lineHeight: theme.typography.variants['label-md'].lineHeight,
-            letterSpacing: theme.typography.variants['label-md'].letterSpacing,
+            fontSize: theme.typography.variants["label-md"].fontSize,
+            lineHeight: theme.typography.variants["label-md"].lineHeight,
+            letterSpacing: theme.typography.variants["label-md"].letterSpacing,
           },
           lg: {
-            fontSize: theme.typography.variants['label-lg'].fontSize,
-            lineHeight: theme.typography.variants['label-lg'].lineHeight,
-            letterSpacing: theme.typography.variants['label-lg'].letterSpacing,
+            fontSize: theme.typography.variants["label-lg"].fontSize,
+            lineHeight: theme.typography.variants["label-lg"].lineHeight,
+            letterSpacing: theme.typography.variants["label-lg"].letterSpacing,
           },
         },
       },
     },
     base: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      alignSelf: 'flex-start',
+      flexDirection: "row",
+      alignItems: "center",
+      alignSelf: "flex-start",
       borderRadius: theme.radius.full,
       variants: {
         size: {
@@ -352,135 +316,135 @@ const styles = StyleSheet.create((theme) => {
           soft: {},
           outline: {},
           ghost: {
-            backgroundColor: 'transparent',
-            borderColor: 'transparent',
+            backgroundColor: "transparent",
+            borderColor: "transparent",
             borderWidth: 0,
           },
         },
       },
       compoundVariants: [
         {
-          color: 'primary',
-          variant: 'solid',
+          color: "primary",
+          variant: "solid",
           styles: {
-            backgroundColor: c['action.bg.primary'],
+            backgroundColor: c["action.bg.primary"],
             borderWidth: 0,
           },
         },
         {
-          color: 'primary',
-          variant: 'soft',
+          color: "primary",
+          variant: "soft",
           styles: {
-            backgroundColor: c['action.bg.primary.subtle'],
+            backgroundColor: c["action.bg.primary.subtle"],
             borderWidth: 0,
           },
         },
         {
-          color: 'primary',
-          variant: 'outline',
+          color: "primary",
+          variant: "outline",
           styles: {
-            backgroundColor: 'transparent',
-            borderColor: c['action.bg.primary.subtle'],
+            backgroundColor: "transparent",
+            borderColor: c["action.bg.primary.subtle"],
             borderWidth: 1,
           },
         },
         {
-          color: 'secondary',
-          variant: 'solid',
+          color: "secondary",
+          variant: "solid",
           styles: {
-            backgroundColor: c['action.bg.secondary'],
+            backgroundColor: c["action.bg.secondary"],
             borderWidth: 0,
           },
         },
         {
-          color: 'secondary',
-          variant: 'soft',
+          color: "secondary",
+          variant: "soft",
           styles: {
-            backgroundColor: c['action.bg.secondary.subtle'],
+            backgroundColor: c["action.bg.secondary.subtle"],
             borderWidth: 0,
           },
         },
         {
-          color: 'secondary',
-          variant: 'outline',
+          color: "secondary",
+          variant: "outline",
           styles: {
-            backgroundColor: 'transparent',
-            borderColor: c['action.bg.secondary.subtle'],
+            backgroundColor: "transparent",
+            borderColor: c["action.bg.secondary.subtle"],
             borderWidth: 1,
           },
         },
         {
-          color: 'success',
-          variant: 'solid',
+          color: "success",
+          variant: "solid",
           styles: {
-            backgroundColor: c['status.success.bg'],
+            backgroundColor: c["status.success.bg"],
             borderWidth: 0,
           },
         },
         {
-          color: 'success',
-          variant: 'soft',
+          color: "success",
+          variant: "soft",
           styles: {
-            backgroundColor: c['status.success.bg.subtle'],
+            backgroundColor: c["status.success.bg.subtle"],
             borderWidth: 0,
           },
         },
         {
-          color: 'success',
-          variant: 'outline',
+          color: "success",
+          variant: "outline",
           styles: {
-            backgroundColor: 'transparent',
-            borderColor: c['status.success.bg.subtle'],
+            backgroundColor: "transparent",
+            borderColor: c["status.success.bg.subtle"],
             borderWidth: 1,
           },
         },
         {
-          color: 'warning',
-          variant: 'solid',
+          color: "warning",
+          variant: "solid",
           styles: {
-            backgroundColor: c['status.warning.bg'],
+            backgroundColor: c["status.warning.bg"],
             borderWidth: 0,
           },
         },
         {
-          color: 'warning',
-          variant: 'soft',
+          color: "warning",
+          variant: "soft",
           styles: {
-            backgroundColor: c['status.warning.bg.subtle'],
+            backgroundColor: c["status.warning.bg.subtle"],
             borderWidth: 0,
           },
         },
         {
-          color: 'warning',
-          variant: 'outline',
+          color: "warning",
+          variant: "outline",
           styles: {
-            backgroundColor: 'transparent',
-            borderColor: c['status.warning.bg.subtle'],
+            backgroundColor: "transparent",
+            borderColor: c["status.warning.bg.subtle"],
             borderWidth: 1,
           },
         },
         {
-          color: 'danger',
-          variant: 'solid',
+          color: "danger",
+          variant: "solid",
           styles: {
-            backgroundColor: c['status.danger.bg'],
+            backgroundColor: c["status.danger.bg"],
             borderWidth: 0,
           },
         },
         {
-          color: 'danger',
-          variant: 'soft',
+          color: "danger",
+          variant: "soft",
           styles: {
-            backgroundColor: c['status.danger.bg.subtle'],
+            backgroundColor: c["status.danger.bg.subtle"],
             borderWidth: 0,
           },
         },
         {
-          color: 'danger',
-          variant: 'outline',
+          color: "danger",
+          variant: "outline",
           styles: {
-            backgroundColor: 'transparent',
-            borderColor: c['status.danger.bg.subtle'],
+            backgroundColor: "transparent",
+            borderColor: c["status.danger.bg.subtle"],
             borderWidth: 1,
           },
         },

package/src/components/chip/index.ts

@@ -1,3 +1,3 @@
-export type { ChipIconProps, ChipProps } from './Chip';
-export { Chip } from './Chip';
-export type { ChipColor, ChipSize, ChipVariant } from './types';
+export type { ChipIconProps, ChipProps } from "./Chip";
+export { Chip } from "./Chip";
+export type { ChipColor, ChipSize, ChipVariant } from "./types";

package/src/components/chip/types.ts

@@ -1,15 +1,15 @@
-export type ChipSize = 'sm' | 'md' | 'lg';
-export type ChipVariant = 'solid' | 'soft' | 'outline' | 'ghost';
+export type ChipSize = "sm" | "md" | "lg";
+export type ChipVariant = "solid" | "soft" | "outline" | "ghost";
 
 /**
  * Semantic color scheme, or a raw CSS color literal (`#fff`, `rgb(...)`, `hsl(...)`).
  * Has no effect when `variant="ghost"` — ghost always renders `text.default`.
  */
 export type ChipColor =
-  | 'primary'
-  | 'secondary'
-  | 'success'
-  | 'warning'
-  | 'danger'
+  | "primary"
+  | "secondary"
+  | "success"
+  | "warning"
+  | "danger"
   // literals last so scheme-name autocomplete still surfaces
   | (string & {});

package/src/components/chip/utils.ts

@@ -1,4 +1,4 @@
-import { readableOn, withAlpha } from '#utils/color-utils';
+import { readableOn, withAlpha } from "#utils/color-utils";
 
 // A custom color literal (hex/rgb/hsl) can't be a unistyles compound variant
 // condition (it's not a bounded set of options), so it's derived here
@@ -16,19 +16,19 @@ const CUSTOM_COLOR_SOFT_ALPHA = 0.16;
 
 export function getCustomColorColors(
   literal: string,
-  variant: 'solid' | 'soft' | 'outline'
+  variant: "solid" | "soft" | "outline"
 ): CustomChipColors {
   // Outline borrows the `soft` background as its border, so the two variants
   // read as the same weight of colour — one filled, one drawn.
-  if (variant === 'outline') {
+  if (variant === "outline") {
     return {
-      bg: 'transparent',
+      bg: "transparent",
       border: withAlpha(literal, CUSTOM_COLOR_SOFT_ALPHA),
       borderWidth: 1,
       fg: literal,
     };
   }
-  if (variant === 'soft') {
+  if (variant === "soft") {
     const bg = withAlpha(literal, CUSTOM_COLOR_SOFT_ALPHA);
     return { bg, border: bg, borderWidth: 0, fg: literal };
   }