@atlure/ui 0.4.0 → 0.6.0

package/README.md

@@ -42,7 +42,7 @@ export function SitterCard({ sitter, onOpen, openLabel }) {
   return (
     <Card onPress={onOpen} accessibilityLabel={openLabel}>
       <CardContent className="flex-row items-center gap-md">
-        <Avatar name={sitter.displayName} uri={sitter.avatarUrl} />
+        <Avatar name={sitter.displayName} src={sitter.avatarUrl} presence="online" />
         <Text variant="title">{sitter.displayName}</Text>
       </CardContent>
     </Card>
@@ -51,9 +51,42 @@ export function SitterCard({ sitter, onOpen, openLabel }) {
 ```
 
 Components: `Text`, `Button`, `Card` (`CardHeader`, `CardContent`, `CardFooter`), `Input`, `Label`,
-`Badge`, `Avatar`, `Separator`, `Skeleton`, `Switch`, `Checkbox`.
+`Badge`, `Avatar` (`AvatarGroup`), `Separator`, `Skeleton`, `Switch`, `Checkbox`, `Sheet`, `Select` (`SelectItem`),
+`Picker`, `Dialog`, `AlertDialog`, `Toast`, `MoneyLabel`, `DistanceLabel`, `DurationLabel`, `DateLabel`, `DateRangeLabel`.
+
+Overlays queue through a host, so the app root mounts it once, above the navigator:
+
+```tsx
+<PortalHost>
+  <ToastProvider bottomInset={insets.bottom}>
+    <Navigator />
+  </ToastProvider>
+</PortalHost>
+```
+
+`Dialog`, `AlertDialog` and `Toast` throw a named error if that host is missing, rather than
+rendering nothing and leaving you to guess why.
+
+`Avatar` accepts the image as either `src` or the older `uri`; `src` wins when both are set. `uri` is
+kept only so 0.3.0 consumers do not break, and goes away before 1.0.
 
 Every user-facing string is a prop. This package contains no display copy, so i18n stays in the app.
+The one exception is `MoneyLabel`'s `per` suffix, which renders the English words `per hour`, `per
+night` or `per walk`; a message catalogue is out of scope for v1, so this is the single string that
+must be revisited when translation lands.
+
+## Locale and number formatting
+
+`LocaleProvider` carries a BCP-47 locale and a measurement system (`metric` by default, `imperial`
+opt-in); `useLocale()` reads it. Without a provider the defaults are `en-IE` and `metric`.
+
+Every unit, currency symbol, separator and date order comes from `Intl`, never from a literal — so
+a price renders in its own currency regardless of the reader's locale, and `1 hr 30 mins` becomes
+`1 Std. 30 Min.` in `de-DE`. Money carries minor units, and the number of decimal places is read back
+from `Intl` for that currency rather than assumed to be two.
+
+This requires `Intl` to be present. Hermes needs it switched on explicitly in the app's
+`app.config.ts`; that change belongs to the app, not to this package.
 
 ## Variant recipes are shared, render layers are not
 
@@ -105,10 +138,10 @@ changing how it looks.
 `pnpm test` runs Vitest with React Testing Library. `react-native` is aliased to `react-native-web`
 so components render into jsdom and can be queried by role and accessible name.
 
-`@atlure/tokens` is resolved to `../tokens/src` for typechecking and testing, via `paths` in
-`tsconfig.json` and an alias in `vitest.config.ts`. Published consumers still get `dist` through that
-package's `exports`; resolving to source here means this package's checks do not depend on tokens having
-been built first, and can never read a stale `dist`.
+`@atlure/tokens` and `@atlure/types` are resolved to `../tokens/src` and `../types/src` for
+typechecking and testing, via `paths` in `tsconfig.json` and aliases in `vitest.config.ts`. Published
+consumers still get `dist` through those packages' `exports`; resolving to source here means this
+package's checks do not depend on either having been built first, and can never read a stale `dist`.
 
 What that proves: press handling, disabled and loading behaviour, controlled toggle state, change
 propagation, accessible roles and names, and the barrel generator's output.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlure/ui",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "Atlure React Native component library: NativeWind primitives built on @atlure/tokens, shipped as untranspiled TypeScript source",
   "license": "MIT",
   "author": "David Moreira",
@@ -37,22 +37,21 @@
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "tailwind-merge": "2.6.0",
-    "@atlure/icons": "0.4.0",
-    "@atlure/tokens": "0.4.0"
+    "@atlure/icons": "0.6.0",
+    "@atlure/tokens": "0.6.0",
+    "@atlure/types": "0.6.0"
   },
   "peerDependencies": {
     "nativewind": "^4.2.6",
     "react": ">=18.3.0",
     "react-native": ">=0.81.0",
+    "react-native-gesture-handler": ">=2.16.0",
     "react-native-reanimated": ">=3.16.0",
     "react-native-safe-area-context": ">=4.10.0",
     "react-native-svg": ">=15.0.0",
     "tailwindcss": "^3.4.19"
   },
   "peerDependenciesMeta": {
-    "react-native-reanimated": {
-      "optional": true
-    },
     "react-native-safe-area-context": {
       "optional": true
     }

package/src/components/alert-dialog/alert-dialog.tsx

@@ -0,0 +1,59 @@
+import { Button } from "../button/button";
+import {
+  Dialog,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "../dialog/dialog";
+import { alertDialogConfirmVariant } from "./utils";
+
+export interface AlertDialogProps {
+  isOpen: boolean;
+  title: string;
+  description?: string;
+  confirmLabel: string;
+  cancelLabel: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+  isDestructive?: boolean;
+  isConfirmLoading?: boolean;
+  className?: string;
+}
+
+export function AlertDialog({
+  isOpen,
+  title,
+  description,
+  confirmLabel,
+  cancelLabel,
+  onConfirm,
+  onCancel,
+  isDestructive = false,
+  isConfirmLoading = false,
+  className,
+}: AlertDialogProps) {
+  return (
+    <Dialog
+      isOpen={isOpen}
+      onClose={onCancel}
+      isDismissible={false}
+      accessibilityLabel={title}
+      className={className}
+    >
+      <DialogHeader>
+        <DialogTitle>{title}</DialogTitle>
+        {description ? <DialogDescription>{description}</DialogDescription> : null}
+      </DialogHeader>
+      <DialogFooter>
+        <Button label={cancelLabel} variant="outline" onPress={onCancel} />
+        <Button
+          label={confirmLabel}
+          variant={alertDialogConfirmVariant(isDestructive)}
+          isLoading={isConfirmLoading}
+          onPress={onConfirm}
+        />
+      </DialogFooter>
+    </Dialog>
+  );
+}

package/src/components/alert-dialog/utils.ts

@@ -0,0 +1,5 @@
+import type { ButtonVariant } from "../button/types";
+
+export function alertDialogConfirmVariant(isDestructive: boolean): ButtonVariant {
+  return isDestructive ? "destructive" : "primary";
+}

package/src/components/avatar/avatar-group.tsx

@@ -0,0 +1,52 @@
+import { Children, type ReactNode } from "react";
+import { View, type ViewProps } from "react-native";
+
+import { cn } from "../../lib/cn";
+import {
+  avatarFallbackVariants,
+  avatarGroupItemVariants,
+  avatarGroupVariants,
+  avatarVariants,
+  type AvatarVariantProps,
+} from "../../variants/avatar-variants";
+import { Text } from "../text/text";
+
+export interface AvatarGroupProps extends Omit<ViewProps, "children"> {
+  children: ReactNode;
+  max?: number;
+  size?: NonNullable<AvatarVariantProps["size"]>;
+  overflowAccessibilityLabel?: string;
+}
+
+export function AvatarGroup({
+  children,
+  max = 4,
+  size = "md",
+  overflowAccessibilityLabel,
+  className,
+  ...viewProps
+}: AvatarGroupProps) {
+  const avatars = Children.toArray(children);
+  const visibleAvatars = avatars.slice(0, max);
+  const overflowCount = avatars.length - visibleAvatars.length;
+
+  return (
+    <View accessibilityRole="list" className={cn(avatarGroupVariants(), className)} {...viewProps}>
+      {visibleAvatars.map((avatar, index) => (
+        <View key={index} className={avatarGroupItemVariants({ size, isFirst: index === 0 })}>
+          {avatar}
+        </View>
+      ))}
+      {overflowCount > 0 ? (
+        <View
+          accessibilityLabel={overflowAccessibilityLabel ?? `+${overflowCount}`}
+          className={avatarGroupItemVariants({ size, isFirst: false })}
+        >
+          <View className={avatarVariants({ size })}>
+            <Text className={avatarFallbackVariants({ size })}>{`+${overflowCount}`}</Text>
+          </View>
+        </View>
+      ) : null}
+    </View>
+  );
+}

package/src/components/avatar/avatar.tsx

@@ -1,42 +1,85 @@
+import { useState } from "react";
 import { Image, View, type ViewProps } from "react-native";
 
 import { cn } from "../../lib/cn";
 import {
   avatarFallbackVariants,
+  avatarPresenceVariants,
+  avatarRootVariants,
   avatarVariants,
   type AvatarVariantProps,
 } from "../../variants/avatar-variants";
+import { Skeleton } from "../skeleton/skeleton";
 import { Text } from "../text/text";
 import { toInitials } from "./utils";
 
+export type AvatarPresence = "online" | "offline" | "none";
+
 export interface AvatarProps extends ViewProps {
   name: string;
+  src?: string | null;
   uri?: string | null;
   size?: NonNullable<AvatarVariantProps["size"]>;
+  shape?: NonNullable<AvatarVariantProps["shape"]>;
+  presence?: AvatarPresence;
+  presenceAccessibilityLabel?: string;
+  loadingAccessibilityLabel?: string;
   hasRing?: boolean;
 }
 
 export function Avatar({
   name,
+  src = null,
   uri = null,
   size = "md",
+  shape = "circle",
+  presence = "none",
+  presenceAccessibilityLabel,
+  loadingAccessibilityLabel,
   hasRing = false,
   className,
   ...viewProps
 }: AvatarProps) {
-  const initials = toInitials(name);
+  const [failedUri, setFailedUri] = useState<string | null>(null);
+  const [loadedUri, setLoadedUri] = useState<string | null>(null);
+
+  const requestedUri = src ?? uri;
+  const imageUri = requestedUri && requestedUri !== failedUri ? requestedUri : null;
+  const isLoading = imageUri !== null && imageUri !== loadedUri;
 
   return (
-    <View
-      accessibilityRole="image"
-      accessibilityLabel={name}
-      className={cn(avatarVariants({ size, hasRing }), className)}
-      {...viewProps}
-    >
-      {uri ? (
-        <Image source={{ uri }} accessibilityLabel={name} className="h-full w-full" />
-      ) : (
-        <Text className={avatarFallbackVariants({ size })}>{initials}</Text>
+    <View className={avatarRootVariants()} {...viewProps}>
+      <View
+        accessibilityRole={imageUri ? undefined : "image"}
+        accessibilityLabel={imageUri ? undefined : name}
+        className={cn(avatarVariants({ size, shape, hasRing }), className)}
+      >
+        {imageUri ? (
+          <>
+            <Image
+              source={{ uri: imageUri }}
+              accessibilityLabel={name}
+              className="h-full w-full"
+              onLoadEnd={() => setLoadedUri(imageUri)}
+              onError={() => setFailedUri(imageUri)}
+            />
+            {isLoading ? (
+              <Skeleton
+                shape="circle"
+                accessibilityLabel={loadingAccessibilityLabel ?? name}
+                className="absolute inset-0 h-full w-full"
+              />
+            ) : null}
+          </>
+        ) : (
+          <Text className={avatarFallbackVariants({ size })}>{toInitials(name)}</Text>
+        )}
+      </View>
+      {presence === "none" ? null : (
+        <View
+          accessibilityLabel={presenceAccessibilityLabel ?? `${name} ${presence}`}
+          className={avatarPresenceVariants({ size, presence })}
+        />
       )}
     </View>
   );

package/src/components/badge/urgency-badge.tsx

@@ -0,0 +1,21 @@
+import type { Urgency } from "@atlure/types";
+
+import type { BadgeVariantProps } from "../../variants/badge-variants";
+import { Badge, type BadgeProps } from "./badge";
+
+type BadgeVariant = NonNullable<BadgeVariantProps["variant"]>;
+
+export const urgencyBadgeVariant: Record<Urgency, BadgeVariant> = {
+  low: "secondary",
+  medium: "warning",
+  high: "destructive",
+};
+
+export interface UrgencyBadgeProps extends Omit<BadgeProps, "label" | "variant"> {
+  urgency: Urgency;
+  label: string;
+}
+
+export function UrgencyBadge({ urgency, ...badgeProps }: UrgencyBadgeProps) {
+  return <Badge variant={urgencyBadgeVariant[urgency]} {...badgeProps} />;
+}

package/src/components/calendar/calendar.tsx

@@ -0,0 +1,189 @@
+import { ChevronLeft, ChevronRight, iconSize } from "@atlure/icons";
+import { useEffect, useMemo, useState } from "react";
+import { Pressable, View } from "react-native";
+
+import {
+  addMonths,
+  buildMonthGrid,
+  firstDayOfWeek,
+  formatFullDate,
+  formatMonthLabel,
+  formatWeekdayShort,
+  isDateInRange,
+} from "../../lib/calendar";
+import { cn } from "../../lib/cn";
+import { useLocale } from "../../lib/locale";
+import {
+  calendarContainerClassName,
+  calendarDayCellClassName,
+  calendarDayCellDisabledClassName,
+  calendarDayCellInRangeClassName,
+  calendarDayCellRangeEndClassName,
+  calendarDayCellRangeStartClassName,
+  calendarDayCellSelectedClassName,
+  calendarDayLabelClassName,
+  calendarDayLabelOutsideMonthClassName,
+  calendarDayLabelSelectedClassName,
+  calendarHeaderClassName,
+  calendarMarkerDotClassName,
+  calendarMonthLabelClassName,
+  calendarNavButtonClassName,
+  calendarWeekRowClassName,
+  calendarWeekdayCellClassName,
+  calendarWeekdayLabelClassName,
+  calendarWeekdayRowClassName,
+} from "../../variants/calendar-variants";
+import { Text } from "../text/text";
+
+export interface CalendarHighlight {
+  start?: string;
+  end?: string;
+  inProgressStart?: string;
+}
+
+export interface CalendarProps {
+  yearMonth: string;
+  selected?: string;
+  onSelect?: (iso: string) => void;
+  onMonthChange?: (yearMonth: string) => void;
+  disabledDates?: (iso: string) => boolean;
+  minDate?: string;
+  maxDate?: string;
+  markers?: readonly string[];
+  highlight?: CalendarHighlight;
+  accessibilityLabel?: string;
+  previousMonthAccessibilityLabel?: string;
+  nextMonthAccessibilityLabel?: string;
+  className?: string;
+}
+
+export function Calendar({
+  yearMonth,
+  selected,
+  onSelect,
+  onMonthChange,
+  disabledDates,
+  minDate,
+  maxDate,
+  markers,
+  highlight,
+  accessibilityLabel,
+  previousMonthAccessibilityLabel = "Previous month",
+  nextMonthAccessibilityLabel = "Next month",
+  className,
+}: CalendarProps) {
+  const { locale } = useLocale();
+  const [displayYearMonth, setDisplayYearMonth] = useState(yearMonth);
+
+  useEffect(() => setDisplayYearMonth(yearMonth), [yearMonth]);
+
+  const firstDow = useMemo(() => firstDayOfWeek(locale), [locale]);
+  const weeks = useMemo(
+    () => buildMonthGrid(displayYearMonth, firstDow),
+    [displayYearMonth, firstDow],
+  );
+  const weekdayLabels = useMemo(
+    () => Array.from({ length: 7 }, (_, i) => formatWeekdayShort((firstDow + i) % 7, locale)),
+    [firstDow, locale],
+  );
+  const markerSet = useMemo(() => new Set(markers ?? []), [markers]);
+
+  const changeMonth = (delta: number) => {
+    const next = addMonths(displayYearMonth, delta);
+    setDisplayYearMonth(next);
+    onMonthChange?.(next);
+  };
+
+  return (
+    <View
+      accessibilityLabel={accessibilityLabel}
+      className={cn(calendarContainerClassName, className)}
+    >
+      <View className={calendarHeaderClassName}>
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel={previousMonthAccessibilityLabel}
+          className={calendarNavButtonClassName}
+          onPress={() => changeMonth(-1)}
+        >
+          <ChevronLeft size={iconSize.md} />
+        </Pressable>
+        <Text className={calendarMonthLabelClassName}>
+          {formatMonthLabel(displayYearMonth, locale)}
+        </Text>
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel={nextMonthAccessibilityLabel}
+          className={calendarNavButtonClassName}
+          onPress={() => changeMonth(1)}
+        >
+          <ChevronRight size={iconSize.md} />
+        </Pressable>
+      </View>
+
+      <View className={calendarWeekdayRowClassName}>
+        {weekdayLabels.map((label, weekdayIndex) => (
+          <View key={weekdayIndex} className={calendarWeekdayCellClassName}>
+            <Text className={calendarWeekdayLabelClassName}>{label}</Text>
+          </View>
+        ))}
+      </View>
+
+      {weeks.map((week, weekIndex) => (
+        <View key={weekIndex} className={calendarWeekRowClassName}>
+          {week.map((cell) => {
+            const isDisabled =
+              disabledDates?.(cell.iso) === true || !isDateInRange(cell.iso, minDate, maxDate);
+            const isSelected = selected === cell.iso;
+            const isRangeStart = highlight?.start === cell.iso;
+            const isRangeEnd = highlight?.end === cell.iso;
+            const isInProgressStart = highlight?.inProgressStart === cell.iso;
+            const isInRange =
+              highlight?.start !== undefined &&
+              highlight.end !== undefined &&
+              cell.iso > highlight.start &&
+              cell.iso < highlight.end;
+            const isHighlighted =
+              isSelected || isRangeStart || isRangeEnd || isInProgressStart;
+            const hasMarker = markerSet.has(cell.iso);
+
+            return (
+              <Pressable
+                key={cell.iso}
+                accessibilityRole="button"
+                accessibilityLabel={formatFullDate(cell.iso, locale)}
+                accessibilityState={{ disabled: isDisabled, selected: isHighlighted }}
+                aria-disabled={isDisabled}
+                aria-selected={isHighlighted}
+                disabled={isDisabled}
+                onPress={() => {
+                  if (isDisabled) return;
+                  onSelect?.(cell.iso);
+                }}
+                className={cn(
+                  calendarDayCellClassName,
+                  isInRange && calendarDayCellInRangeClassName,
+                  isRangeStart && calendarDayCellRangeStartClassName,
+                  isRangeEnd && calendarDayCellRangeEndClassName,
+                  (isSelected || isInProgressStart) && calendarDayCellSelectedClassName,
+                  isDisabled && calendarDayCellDisabledClassName,
+                )}
+              >
+                <Text
+                  className={cn(
+                    calendarDayLabelClassName,
+                    !cell.isCurrentMonth && calendarDayLabelOutsideMonthClassName,
+                    isHighlighted && calendarDayLabelSelectedClassName,
+                  )}
+                >
+                  {cell.dayNumber}
+                </Text>
+                {hasMarker && <View className={calendarMarkerDotClassName} />}
+              </Pressable>
+            );
+          })}
+        </View>
+      ))}
+    </View>
+  );
+}

package/src/components/checkbox/checkbox.tsx

@@ -1,10 +1,12 @@
+import { Check, iconSize, Minus } from "@atlure/icons";
 import { Pressable, type PressableProps, View } from "react-native";
 
 import { cn } from "../../lib/cn";
-import { touchTargetHitSlop } from "../../lib/touch-target";
+import { touchTargetHitSlopForSize } from "../../lib/touch-target";
 import {
+  checkboxBoxSize,
   checkboxBoxVariants,
-  checkboxIndicatorVariants,
+  checkboxIndicatorClassName,
   checkboxRowVariants,
 } from "../../variants/checkbox-variants";
 import { Label } from "../label/label";
@@ -14,6 +16,7 @@ export interface CheckboxProps
   isChecked: boolean;
   onValueChange: (isChecked: boolean) => void;
   label?: string;
+  isIndeterminate?: boolean;
   isDisabled?: boolean;
   isInvalid?: boolean;
 }
@@ -22,29 +25,43 @@ export function Checkbox({
   isChecked,
   onValueChange,
   label,
+  isIndeterminate = false,
   isDisabled = false,
   isInvalid = false,
   accessibilityLabel,
   className,
   ...pressableProps
 }: CheckboxProps) {
+  const checkedState = isIndeterminate ? "mixed" : isChecked;
+
   return (
     <Pressable
       accessibilityRole="checkbox"
       accessibilityLabel={accessibilityLabel ?? label}
-      accessibilityState={{ checked: isChecked, disabled: isDisabled }}
-      aria-checked={isChecked}
+      accessibilityState={{ checked: checkedState, disabled: isDisabled }}
+      aria-checked={checkedState}
       aria-disabled={isDisabled}
       disabled={isDisabled}
-      hitSlop={touchTargetHitSlop("md")}
-      onPress={() => onValueChange(!isChecked)}
+      hitSlop={touchTargetHitSlopForSize(checkboxBoxSize)}
+      onPress={() => onValueChange(isIndeterminate ? true : !isChecked)}
       className={cn(checkboxRowVariants({ isDisabled }), className)}
       {...pressableProps}
     >
-      <View className={checkboxBoxVariants({ isChecked, isInvalid })}>
-        <View className={checkboxIndicatorVariants({ isChecked })} />
+      <View
+        className={checkboxBoxVariants({ isSelected: isIndeterminate || isChecked, isInvalid })}
+      >
+        {isIndeterminate ? (
+          <Minus size={iconSize.sm} className={checkboxIndicatorClassName} />
+        ) : null}
+        {!isIndeterminate && isChecked ? (
+          <Check size={iconSize.sm} className={checkboxIndicatorClassName} />
+        ) : null}
       </View>
-      {label ? <Label isDisabled={isDisabled} isInvalid={isInvalid}>{label}</Label> : null}
+      {label ? (
+        <Label isDisabled={isDisabled} isInvalid={isInvalid}>
+          {label}
+        </Label>
+      ) : null}
     </Pressable>
   );
 }

package/src/components/chip/chip.tsx

@@ -0,0 +1,66 @@
+import { iconSize, X } from "@atlure/icons";
+import { Pressable, type PressableProps, View, type ViewProps } from "react-native";
+
+import { cn } from "../../lib/cn";
+import { touchTargetHitSlopForSize } from "../../lib/touch-target";
+import {
+  chipBodyClassName,
+  chipDismissClassName,
+  chipHeight,
+  chipLabelVariants,
+  chipVariants,
+} from "../../variants/chip-variants";
+import { Text } from "../text/text";
+
+export interface ChipProps
+  extends Omit<PressableProps, "children" | "disabled" | "accessibilityState" | "style"> {
+  label: string;
+  isSelected?: boolean;
+  isDisabled?: boolean;
+  onDismiss?: () => void;
+  dismissAccessibilityLabel?: string;
+  containerClassName?: ViewProps["className"];
+}
+
+export function Chip({
+  label,
+  isSelected = false,
+  isDisabled = false,
+  onDismiss,
+  dismissAccessibilityLabel,
+  accessibilityLabel,
+  className,
+  containerClassName,
+  ...pressableProps
+}: ChipProps) {
+  return (
+    <View className={cn(chipVariants({ isSelected, isDisabled }), containerClassName)}>
+      <Pressable
+        accessibilityRole="button"
+        accessibilityLabel={accessibilityLabel ?? label}
+        accessibilityState={{ selected: isSelected, disabled: isDisabled }}
+        aria-selected={isSelected}
+        aria-disabled={isDisabled}
+        disabled={isDisabled}
+        hitSlop={touchTargetHitSlopForSize(chipHeight)}
+        className={cn(chipBodyClassName, className)}
+        {...pressableProps}
+      >
+        <Text className={chipLabelVariants({ isSelected })}>{label}</Text>
+      </Pressable>
+      {onDismiss ? (
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel={dismissAccessibilityLabel ?? `Remove ${label}`}
+          aria-disabled={isDisabled}
+          disabled={isDisabled}
+          hitSlop={touchTargetHitSlopForSize(chipHeight)}
+          onPress={onDismiss}
+          className={chipDismissClassName}
+        >
+          <X className={chipLabelVariants({ isSelected })} size={iconSize.sm} />
+        </Pressable>
+      ) : null}
+    </View>
+  );
+}