@atlure/ui 0.6.1 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlure/ui",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "Atlure React Native component library: NativeWind primitives built on @atlure/tokens, shipped as untranspiled TypeScript source",
   "license": "MIT",
   "author": "David Moreira",
@@ -37,9 +37,9 @@
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "tailwind-merge": "2.6.0",
-    "@atlure/icons": "0.6.1",
-    "@atlure/tokens": "0.6.1",
-    "@atlure/types": "0.6.1"
+    "@atlure/icons": "0.7.0",
+    "@atlure/tokens": "0.7.0",
+    "@atlure/types": "0.7.0"
   },
   "peerDependencies": {
     "nativewind": "^4.2.6",

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

@@ -11,11 +11,23 @@ export const urgencyBadgeVariant: Record<Urgency, BadgeVariant> = {
   high: "destructive",
 };
 
+export const DEFAULT_URGENCY_LABELS: Record<Urgency, string> = {
+  low: "Low priority",
+  medium: "Normal",
+  high: "High priority",
+};
+
 export interface UrgencyBadgeProps extends Omit<BadgeProps, "label" | "variant"> {
   urgency: Urgency;
-  label: string;
+  label?: string;
 }
 
-export function UrgencyBadge({ urgency, ...badgeProps }: UrgencyBadgeProps) {
-  return <Badge variant={urgencyBadgeVariant[urgency]} {...badgeProps} />;
+export function UrgencyBadge({ urgency, label, ...badgeProps }: UrgencyBadgeProps) {
+  return (
+    <Badge
+      variant={urgencyBadgeVariant[urgency]}
+      label={label ?? DEFAULT_URGENCY_LABELS[urgency]}
+      {...badgeProps}
+    />
+  );
 }

package/src/components/error-state/error-state.tsx

@@ -12,19 +12,21 @@ import { Button } from "../button/button";
 import { Text } from "../text/text";
 
 export interface ErrorStateProps extends Omit<ViewProps, "children"> {
-  title: string;
-  message: string;
-  retryLabel: string;
+  title?: string;
+  message?: string;
+  retryLabel?: string;
   onRetry: () => void;
   icon?: ReactNode;
+  retryTestID?: string;
 }
 
 export function ErrorState({
-  title,
+  title = "Something went wrong",
   message,
-  retryLabel,
+  retryLabel = "Retry",
   onRetry,
   icon,
+  retryTestID,
   className,
   ...viewProps
 }: ErrorStateProps) {
@@ -34,11 +36,13 @@ export function ErrorState({
       <Text accessibilityRole="header" variant="h3" className={stateTextClassName}>
         {title}
       </Text>
-      <Text variant="bodySm" tone="muted" className={stateTextClassName}>
-        {message}
-      </Text>
+      {message !== undefined ? (
+        <Text variant="bodySm" tone="muted" className={stateTextClassName}>
+          {message}
+        </Text>
+      ) : null}
       <View className={stateActionClassName}>
-        <Button variant="secondary" label={retryLabel} onPress={onRetry} />
+        <Button variant="secondary" label={retryLabel} onPress={onRetry} testID={retryTestID} />
       </View>
     </View>
   );

package/src/components/search-bar/search-bar.tsx

@@ -1,4 +1,5 @@
 import { iconSize, Search, X } from "@atlure/icons";
+import { useState } from "react";
 import { Pressable } from "react-native";
 
 import { touchTargetHitSlop } from "../../lib/touch-target";
@@ -8,42 +9,57 @@ import { useDebouncedCallback } from "./hooks/use-debounced-callback";
 
 export interface SearchBarProps
   extends Omit<InputProps, "leadingIcon" | "trailingIcon" | "isMultiline" | "value"> {
-  value: string;
-  onChangeText: (value: string) => void;
+  value?: string;
+  defaultValue?: string;
+  onChangeText?: (value: string) => void;
   onChangeDebounced?: (value: string) => void;
+  onCommit?: (value: string) => void;
   debounceMs?: number;
   clearAccessibilityLabel: string;
 }
 
 export function SearchBar({
   value,
+  defaultValue,
   onChangeText,
   onChangeDebounced,
+  onCommit,
   debounceMs = 300,
   clearAccessibilityLabel,
   ...inputProps
 }: SearchBarProps) {
-  const { schedule, flush } = useDebouncedCallback(onChangeDebounced, debounceMs);
+  const isUncontrolled = defaultValue !== undefined;
+  const [draft, setDraft] = useState(defaultValue ?? "");
+  const currentValue = isUncontrolled ? draft : (value ?? "");
+
+  const debouncedTarget = isUncontrolled ? onCommit : onChangeDebounced;
+  const { schedule, flush } = useDebouncedCallback(debouncedTarget, debounceMs);
 
   const handleChangeText = (nextValue: string) => {
-    onChangeText(nextValue);
+    if (isUncontrolled) {
+      setDraft(nextValue);
+    }
+    onChangeText?.(nextValue);
     schedule(nextValue);
   };
 
   const handleClear = () => {
-    onChangeText("");
+    if (isUncontrolled) {
+      setDraft("");
+    }
+    onChangeText?.("");
     flush("");
   };
 
   return (
     <Input
-      value={value}
+      value={currentValue}
       onChangeText={handleChangeText}
       returnKeyType="search"
       clearButtonMode="never"
       leadingIcon={<Search size={iconSize.md} className={searchBarIconClassName} />}
       trailingIcon={
-        value.length > 0 ? (
+        currentValue.length > 0 ? (
           <Pressable
             accessibilityRole="button"
             accessibilityLabel={clearAccessibilityLabel}

package/src/components/sheet/sheet.tsx

@@ -27,21 +27,61 @@ import {
   SHEET_PAN_ACTIVATION_DISTANCE,
 } from "./utils";
 
+export type SheetVariant = "snap" | "modal-slide";
+
 export interface SheetProps {
   isOpen: boolean;
   onClose: () => void;
-  backdropAccessibilityLabel: string;
+  backdropAccessibilityLabel?: string;
   accessibilityLabel?: string;
   snapPoints?: readonly number[];
   bottomInset?: number;
+  variant?: SheetVariant;
   className?: string;
   children: ReactNode;
 }
 
-export function Sheet({
+export function Sheet(props: SheetProps) {
+  if (props.variant === "modal-slide") {
+    return <ModalSlideSheet {...props} />;
+  }
+
+  return <SnapSheet {...props} />;
+}
+
+function ModalSlideSheet({
+  isOpen,
+  onClose,
+  backdropAccessibilityLabel = "Close sheet",
+  accessibilityLabel,
+  className,
+  children,
+}: SheetProps) {
+  return (
+    <Modal visible={isOpen} transparent animationType="slide" onRequestClose={onClose}>
+      <View className={sheetContainerClassName}>
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel={backdropAccessibilityLabel}
+          className={sheetBackdropClassName}
+          onPress={onClose}
+        />
+        <View
+          accessibilityViewIsModal
+          accessibilityLabel={accessibilityLabel}
+          className={cn(sheetContentClassName, className)}
+        >
+          {children}
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+function SnapSheet({
   isOpen,
   onClose,
-  backdropAccessibilityLabel,
+  backdropAccessibilityLabel = "Close sheet",
   accessibilityLabel,
   snapPoints = DEFAULT_SHEET_SNAP_POINTS,
   bottomInset = 0,

package/src/components/star-rating/star-rating.tsx

@@ -26,10 +26,11 @@ export function starFillAt(starNumber: number, value: number): StarFill {
 }
 
 export interface StarRatingProps extends Omit<ViewProps, "children"> {
-  value: number;
+  value: number | null;
   max?: number;
   size?: StarRatingSize;
   showValue?: boolean;
+  count?: number;
   isInteractive?: boolean;
   onChange?: (value: number) => void;
   rateAccessibilityLabel?: (starNumber: number, max: number) => string;
@@ -40,6 +41,7 @@ export function StarRating({
   max = 5,
   size = "md",
   showValue = false,
+  count,
   isInteractive = false,
   onChange,
   rateAccessibilityLabel = (starNumber, total) => `Rate ${starNumber} out of ${total}`,
@@ -49,15 +51,18 @@ export function StarRating({
 }: StarRatingProps) {
   const starNumbers = Array.from({ length: max }, (_, index) => index + 1);
   const pixelSize = starRatingIconSize[size];
+  const hasValue = value !== null;
+  const effectiveValue = hasValue ? value : 0;
+  const showCount = hasValue && typeof count === "number" && count >= 0;
 
   return (
     <View
-      accessibilityLabel={accessibilityLabel ?? `${value} out of ${max}`}
+      accessibilityLabel={accessibilityLabel ?? (hasValue ? `${value} out of ${max}` : "Not rated")}
       className={cn(starRatingClassName, className)}
       {...viewProps}
     >
       {starNumbers.map((starNumber) => {
-        const fill = starFillAt(starNumber, value);
+        const fill = starFillAt(starNumber, effectiveValue);
         const isPainted = fill !== "empty";
         const StarGlyph = fill === "half" ? StarHalf : Star;
 
@@ -90,9 +95,12 @@ export function StarRating({
           </Pressable>
         );
       })}
-      {showValue ? (
+      {showValue && hasValue ? (
         <Text className={starRatingValueVariants({ size })}>{value.toFixed(1)}</Text>
       ) : null}
+      {showCount ? (
+        <Text className={starRatingValueVariants({ size })}>{`(${count})`}</Text>
+      ) : null}
     </View>
   );
 }