panelui-native 0.2.0 → 0.4.0

package/src/components/alert/index.tsx

@@ -1,31 +1,50 @@
+/**
+ * Alert — a status message with an optional leading status icon.
+ *
+ * Adapted from: heroui-inc/heroui-native src/components/alert/alert.tsx
+ * (Indicator / Content / Title / Description anatomy, status-driven icon and
+ * title colour), restyled with Coss UI tokens.
+ *
+ * The `variant` prop name is kept from PanelUI v0.2 rather than renamed to
+ * HeroUI's `status`, so existing code keeps working.
+ */
 import { createContext, forwardRef, useContext, type ReactNode } from 'react';
-import { View, type ViewProps } from 'react-native';
+import { View, type Text as RNText, type ViewProps } from 'react-native';
 import { tv, type VariantProps } from 'tailwind-variants';
+import { useCSSVariable } from 'uniwind';
 import { cn } from '../../utils/cn';
 import { Text, type TextProps } from '../../primitives/text';
+import { AlertTriangleIcon, CheckCircleIcon, InfoIcon } from '../../icons';
 
 const alertVariants = tv({
   slots: {
-    root: 'w-full gap-0.5 rounded-xl border px-3.5 py-3',
-    title: 'text-sm font-medium text-card-foreground',
+    root: 'w-full flex-row gap-3 rounded-xl border px-3.5 py-3',
+    indicator: 'pt-px',
+    content: 'flex-1 gap-0.5',
+    title: 'text-sm font-medium',
     description: 'text-sm text-muted-foreground',
   },
   variants: {
     variant: {
       default: {
         root: 'border-border bg-surface',
+        title: 'text-card-foreground',
       },
       info: {
-        root: 'border-info/32 bg-info/10 dark:bg-info/[0.06]',
+        root: 'border-info/32 bg-info-soft',
+        title: 'text-info-foreground',
       },
       success: {
-        root: 'border-success/32 bg-success/10 dark:bg-success/[0.06]',
+        root: 'border-success/32 bg-success-soft',
+        title: 'text-success-foreground',
       },
       warning: {
-        root: 'border-warning/32 bg-warning/10 dark:bg-warning/[0.06]',
+        root: 'border-warning/32 bg-warning-soft',
+        title: 'text-warning-foreground',
       },
       destructive: {
-        root: 'border-destructive/32 bg-destructive/10 dark:bg-destructive/[0.06]',
+        root: 'border-destructive/32 bg-destructive-soft',
+        title: 'text-destructive-foreground',
       },
     },
   },
@@ -34,20 +53,42 @@ const alertVariants = tv({
   },
 });
 
-type AlertVariant = VariantProps<typeof alertVariants>['variant'];
+type AlertVariant = NonNullable<VariantProps<typeof alertVariants>['variant']>;
 
 const AlertContext = createContext<AlertVariant>('default');
 
+/** CSS variable each variant's indicator icon takes its colour from. */
+const INDICATOR_COLOR_VAR: Record<AlertVariant, string> = {
+  default: '--color-muted-foreground',
+  info: '--color-info-foreground',
+  success: '--color-success-foreground',
+  warning: '--color-warning-foreground',
+  destructive: '--color-destructive-foreground',
+};
+
+const INDICATOR_ICON: Record<AlertVariant, typeof InfoIcon> = {
+  default: InfoIcon,
+  info: InfoIcon,
+  success: CheckCircleIcon,
+  warning: AlertTriangleIcon,
+  destructive: AlertTriangleIcon,
+};
+
 export interface AlertProps extends ViewProps, VariantProps<typeof alertVariants> {
   className?: string;
-  /** Optional leading icon rendered before the content. */
+  /**
+   * Leading element rendered before the content.
+   *
+   * @deprecated Prefer `<Alert.Indicator>`, which picks a status icon for you.
+   * Still honoured so v0.2 call sites keep rendering.
+   */
   icon?: ReactNode;
   children?: ReactNode;
 }
 
 const AlertRoot = forwardRef<View, AlertProps>(
   ({ className, variant = 'default', icon, children, ...props }, ref) => {
-    const { root } = alertVariants({ variant });
+    const { root, indicator, content } = alertVariants({ variant });
 
     return (
       <AlertContext.Provider value={variant}>
@@ -58,10 +99,10 @@ const AlertRoot = forwardRef<View, AlertProps>(
           {...props}
         >
           {icon ? (
-            <View className="flex-row items-start gap-3">
-              <View className="mt-0.5">{icon}</View>
-              <View className="flex-1 gap-1">{children}</View>
-            </View>
+            <>
+              <View className={indicator()}>{icon}</View>
+              <View className={content()}>{children}</View>
+            </>
           ) : (
             children
           )}
@@ -72,7 +113,48 @@ const AlertRoot = forwardRef<View, AlertProps>(
 );
 AlertRoot.displayName = 'Alert';
 
-const AlertTitle = forwardRef<React.ElementRef<typeof Text>, TextProps>(
+export interface AlertIndicatorProps extends ViewProps {
+  className?: string;
+  /** Overrides the size/colour of the default status icon. */
+  iconProps?: { size?: number; color?: string };
+  /** Replaces the default status icon entirely. */
+  children?: ReactNode;
+}
+
+/**
+ * Leading status icon. Resolves both the icon and its colour from the parent
+ * Alert's variant, so it follows the active theme.
+ */
+const AlertIndicator = forwardRef<View, AlertIndicatorProps>(
+  ({ className, iconProps, children, ...props }, ref) => {
+    const variant = useContext(AlertContext);
+    const { indicator } = alertVariants({ variant });
+    const themeColor = useCSSVariable(INDICATOR_COLOR_VAR[variant]);
+    const Icon = INDICATOR_ICON[variant];
+
+    const color =
+      iconProps?.color ?? (typeof themeColor === 'string' ? themeColor : undefined);
+
+    return (
+      <View ref={ref} className={indicator({ className })} {...props}>
+        {children ?? <Icon size={iconProps?.size ?? 18} color={color} />}
+      </View>
+    );
+  }
+);
+AlertIndicator.displayName = 'Alert.Indicator';
+
+/** Flex-1 wrapper for Alert.Title and Alert.Description. */
+const AlertContent = forwardRef<View, ViewProps & { className?: string }>(
+  ({ className, ...props }, ref) => {
+    const variant = useContext(AlertContext);
+    const { content } = alertVariants({ variant });
+    return <View ref={ref} className={content({ className })} {...props} />;
+  }
+);
+AlertContent.displayName = 'Alert.Content';
+
+const AlertTitle = forwardRef<RNText, TextProps>(
   ({ className, ...props }, ref) => {
     const variant = useContext(AlertContext);
     const { title } = alertVariants({ variant });
@@ -81,7 +163,7 @@ const AlertTitle = forwardRef<React.ElementRef<typeof Text>, TextProps>(
 );
 AlertTitle.displayName = 'Alert.Title';
 
-const AlertDescription = forwardRef<React.ElementRef<typeof Text>, TextProps>(
+const AlertDescription = forwardRef<RNText, TextProps>(
   ({ className, ...props }, ref) => {
     const variant = useContext(AlertContext);
     const { description } = alertVariants({ variant });
@@ -91,6 +173,10 @@ const AlertDescription = forwardRef<React.ElementRef<typeof Text>, TextProps>(
 AlertDescription.displayName = 'Alert.Description';
 
 export const Alert = Object.assign(AlertRoot, {
+  /** @optional Status icon rendered as the leading visual element. */
+  Indicator: AlertIndicator,
+  /** @optional Wrapper for title and description. */
+  Content: AlertContent,
   Title: AlertTitle,
   Description: AlertDescription,
 });

package/src/components/badge/index.tsx

@@ -14,9 +14,9 @@ const badgeVariants = tv({
       secondary: { root: 'bg-secondary', label: 'text-secondary-foreground' },
       outline: { root: 'border-border bg-transparent', label: 'text-foreground' },
       destructive: { root: 'bg-destructive', label: 'text-white' },
-      success: { root: 'bg-success/8 dark:bg-success/16', label: 'text-success-foreground' },
-      warning: { root: 'bg-warning/8 dark:bg-warning/16', label: 'text-warning-foreground' },
-      info: { root: 'bg-info/8 dark:bg-info/16', label: 'text-info-foreground' },
+      success: { root: 'bg-success-subtle', label: 'text-success-foreground' },
+      warning: { root: 'bg-warning-subtle', label: 'text-warning-foreground' },
+      info: { root: 'bg-info-subtle', label: 'text-info-foreground' },
     },
   },
   defaultVariants: {

package/src/components/button/index.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, isValidElement, type ReactNode } from 'react';
+import { forwardRef, type ReactNode } from 'react';
 import type { View } from 'react-native';
 import { tv, type VariantProps } from 'tailwind-variants';
 import {
@@ -6,33 +6,40 @@ import {
   type AnimatedPressableProps,
 } from '../../primitives/animated-pressable';
 import { Text } from '../../primitives/text';
+import { Spinner } from '../spinner';
 
 const buttonVariants = tv({
   slots: {
     root: 'flex-row items-center justify-center gap-2 rounded-lg border border-transparent',
     label: 'font-medium',
+    spinner: '',
   },
   variants: {
     variant: {
       primary: {
         root: 'border-primary bg-primary shadow-sm',
         label: 'text-primary-foreground',
+        spinner: 'border-primary-foreground/32 border-t-primary-foreground',
       },
       secondary: {
         root: 'bg-secondary',
         label: 'text-secondary-foreground',
+        spinner: 'border-secondary-foreground/24 border-t-secondary-foreground',
       },
       outline: {
         root: 'border-input bg-popover shadow-sm',
         label: 'text-foreground',
+        spinner: 'border-muted border-t-foreground',
       },
       ghost: {
         root: 'bg-transparent',
         label: 'text-foreground',
+        spinner: 'border-muted border-t-foreground',
       },
       destructive: {
         root: 'border-destructive bg-destructive shadow-sm',
         label: 'text-white',
+        spinner: 'border-white/32 border-t-white',
       },
     },
     size: {
@@ -41,6 +48,9 @@ const buttonVariants = tv({
       lg: { root: 'h-12 px-6', label: 'text-lg' },
       icon: { root: 'h-11 w-11 px-0' },
     },
+    fullWidth: {
+      true: { root: 'w-full' },
+    },
     disabled: {
       true: { root: 'opacity-[0.64]' },
     },
@@ -53,38 +63,68 @@ const buttonVariants = tv({
 
 type ButtonVariantProps = VariantProps<typeof buttonVariants>;
 
+const SPINNER_SIZE = { sm: 'sm', md: 'sm', lg: 'md', icon: 'sm' } as const;
+
 export interface ButtonProps
   extends Omit<AnimatedPressableProps, 'children' | 'disabled'>,
     Omit<ButtonVariantProps, 'disabled'> {
   children?: ReactNode;
   disabled?: boolean;
+  /** Show a spinner and block presses while an action is in flight. */
+  loading?: boolean;
+  /** Content rendered before the label (replaced by the spinner while loading). */
+  startContent?: ReactNode;
+  /** Content rendered after the label. */
+  endContent?: ReactNode;
   /** Extra classes for the label when children is a string. */
   labelClassName?: string;
 }
 
 export const Button = forwardRef<View, ButtonProps>(
   (
-    { children, className, labelClassName, variant, size, disabled, ...props },
+    {
+      children,
+      className,
+      labelClassName,
+      variant,
+      size,
+      fullWidth,
+      disabled,
+      loading = false,
+      startContent,
+      endContent,
+      ...props
+    },
     ref
   ) => {
-    const { root, label } = buttonVariants({ variant, size, disabled: !!disabled });
+    const isDisabled = disabled || loading;
+    const { root, label, spinner } = buttonVariants({
+      variant,
+      size,
+      fullWidth,
+      disabled: isDisabled,
+    });
 
     return (
       <AnimatedPressable
         ref={ref}
         accessibilityRole="button"
-        accessibilityState={{ disabled: !!disabled }}
-        disabled={disabled}
+        accessibilityState={{ disabled: isDisabled, busy: loading }}
+        disabled={isDisabled}
         className={root({ className })}
         {...props}
       >
+        {loading ? (
+          <Spinner size={SPINNER_SIZE[size ?? 'md']} className={spinner()} />
+        ) : (
+          startContent
+        )}
         {typeof children === 'string' ? (
           <Text className={label({ className: labelClassName })}>{children}</Text>
-        ) : isValidElement(children) ? (
-          children
         ) : (
           children
         )}
+        {endContent}
       </AnimatedPressable>
     );
   }

package/src/components/checkbox/index.tsx

@@ -16,7 +16,9 @@ const checkboxVariants = tv({
     row: 'flex-row items-center gap-2.5',
     box: 'h-5 w-5 items-center justify-center rounded-md border border-input bg-background',
     fill: 'absolute inset-0 items-center justify-center rounded-md bg-primary',
+    content: 'flex-1 gap-0.5',
     label: 'text-sm text-foreground',
+    description: 'text-sm text-muted-foreground',
   },
   variants: {
     disabled: {
@@ -32,10 +34,12 @@ export interface CheckboxProps extends VariantProps<typeof checkboxVariants> {
   disabled?: boolean;
   /** Optional label rendered next to the box; pressing it also toggles. */
   label?: string;
+  /** Secondary line under the label, for extra context. */
+  description?: string;
 }
 
 export const Checkbox = forwardRef<View, CheckboxProps>(
-  ({ className, checked, onCheckedChange, disabled, label }, ref) => {
+  ({ className, checked, onCheckedChange, disabled, label, description }, ref) => {
     const progress = useSharedValue(checked ? 1 : 0);
     const slots = checkboxVariants({ disabled: !!disabled });
     const checkColor = useCSSVariable('--color-primary-foreground');
@@ -57,10 +61,13 @@ export const Checkbox = forwardRef<View, CheckboxProps>(
         accessibilityRole="checkbox"
         accessibilityState={{ checked, disabled: !!disabled }}
         accessibilityLabel={label}
+        accessibilityHint={description}
         disabled={disabled}
         onPress={() => onCheckedChange?.(!checked)}
         hitSlop={8}
-        className={slots.row({ className })}
+        // A description makes the row two lines tall — align the box to the
+        // label rather than centring it against the whole block.
+        className={slots.row({ className: description ? `items-start ${className ?? ''}` : className })}
       >
         <View className={slots.box()}>
           <Animated.View style={fillStyle} className={slots.fill()}>
@@ -70,7 +77,14 @@ export const Checkbox = forwardRef<View, CheckboxProps>(
             />
           </Animated.View>
         </View>
-        {label ? <Text className={slots.label()}>{label}</Text> : null}
+        {label || description ? (
+          <View className={slots.content()}>
+            {label ? <Text className={slots.label()}>{label}</Text> : null}
+            {description ? (
+              <Text className={slots.description()}>{description}</Text>
+            ) : null}
+          </View>
+        ) : null}
       </Pressable>
     );
   }

package/src/components/empty-state/index.tsx

@@ -0,0 +1,136 @@
+/**
+ * EmptyState — the placeholder shown when a list or view has no content.
+ *
+ * Adapted from: cosscom/coss packages/ui/src/components/empty.tsx
+ * (centered Header / Media / Title / Description / Content anatomy, and the
+ * `icon` media variant that stacks two rotated ghost cards behind the icon).
+ * Coss does that with CSS pseudo-elements; on native it is two absolutely
+ * positioned siblings with static rotate transforms.
+ */
+import { forwardRef, type ReactNode } from 'react';
+import { View, type Text as RNText, type ViewProps } from 'react-native';
+import { tv, type VariantProps } from 'tailwind-variants';
+import { Text, type TextProps } from '../../primitives/text';
+
+const emptyStateVariants = tv({
+  slots: {
+    root: 'w-full flex-1 items-center justify-center gap-6 px-6 py-12',
+    header: 'w-full max-w-sm items-center gap-1',
+    title: 'text-center text-xl font-semibold text-foreground',
+    description: 'text-center text-sm text-muted-foreground',
+    content: 'w-full max-w-sm items-center gap-3',
+  },
+});
+
+const mediaVariants = tv({
+  slots: {
+    wrapper: 'items-center justify-center',
+    card: 'h-9 w-9 shrink-0 items-center justify-center',
+    ghost: 'absolute h-9 w-9 rounded-md border border-border bg-card',
+  },
+  variants: {
+    variant: {
+      default: {
+        card: 'bg-transparent',
+        ghost: 'hidden',
+      },
+      icon: {
+        card: 'rounded-md border border-border bg-card',
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+
+export interface EmptyStateProps extends ViewProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const EmptyStateRoot = forwardRef<View, EmptyStateProps>(
+  ({ className, ...props }, ref) => {
+    const { root } = emptyStateVariants();
+    return <View ref={ref} className={root({ className })} {...props} />;
+  }
+);
+EmptyStateRoot.displayName = 'EmptyState';
+
+/** Groups Media, Title and Description into one centered column. */
+const EmptyStateHeader = forwardRef<View, EmptyStateProps>(
+  ({ className, ...props }, ref) => {
+    const { header } = emptyStateVariants();
+    return <View ref={ref} className={header({ className })} {...props} />;
+  }
+);
+EmptyStateHeader.displayName = 'EmptyState.Header';
+
+export interface EmptyStateMediaProps
+  extends ViewProps,
+    VariantProps<typeof mediaVariants> {
+  className?: string;
+  children?: ReactNode;
+}
+
+/**
+ * Visual anchor above the title. `variant="icon"` frames the child in a small
+ * card with two rotated ghost cards fanned out behind it.
+ */
+const EmptyStateMedia = forwardRef<View, EmptyStateMediaProps>(
+  ({ className, variant = 'default', children, ...props }, ref) => {
+    const { wrapper, card, ghost } = mediaVariants({ variant });
+
+    return (
+      <View ref={ref} className={wrapper({ className: `mb-4 ${className ?? ''}` })} {...props}>
+        {variant === 'icon' ? (
+          <>
+            <View
+              accessibilityElementsHidden
+              importantForAccessibility="no-hide-descendants"
+              className={`${ghost()} -translate-x-2 -rotate-[10deg] scale-90`}
+            />
+            <View
+              accessibilityElementsHidden
+              importantForAccessibility="no-hide-descendants"
+              className={`${ghost()} translate-x-2 rotate-[10deg] scale-90`}
+            />
+          </>
+        ) : null}
+        <View className={card()}>{children}</View>
+      </View>
+    );
+  }
+);
+EmptyStateMedia.displayName = 'EmptyState.Media';
+
+const EmptyStateTitle = forwardRef<RNText, TextProps>(({ className, ...props }, ref) => {
+  const { title } = emptyStateVariants();
+  return <Text ref={ref} className={title({ className })} {...props} />;
+});
+EmptyStateTitle.displayName = 'EmptyState.Title';
+
+const EmptyStateDescription = forwardRef<RNText, TextProps>(
+  ({ className, ...props }, ref) => {
+    const { description } = emptyStateVariants();
+    return <Text ref={ref} className={description({ className })} {...props} />;
+  }
+);
+EmptyStateDescription.displayName = 'EmptyState.Description';
+
+/** Slot below the header, for actions such as a primary button. */
+const EmptyStateContent = forwardRef<View, EmptyStateProps>(
+  ({ className, ...props }, ref) => {
+    const { content } = emptyStateVariants();
+    return <View ref={ref} className={content({ className })} {...props} />;
+  }
+);
+EmptyStateContent.displayName = 'EmptyState.Content';
+
+export const EmptyState = Object.assign(EmptyStateRoot, {
+  Header: EmptyStateHeader,
+  Media: EmptyStateMedia,
+  Title: EmptyStateTitle,
+  Description: EmptyStateDescription,
+  Content: EmptyStateContent,
+});

package/src/components/input-group/index.tsx

@@ -0,0 +1,164 @@
+/**
+ * InputGroup — an Input with leading and/or trailing decorators.
+ *
+ * Adapted from: heroui-inc/heroui-native src/components/input-group/
+ * Prefix and Suffix are absolutely positioned and their measured widths become
+ * padding on the Input, so text never runs underneath a decorator regardless
+ * of how wide that decorator turns out to be.
+ */
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+  type ReactNode,
+} from 'react';
+import {
+  View,
+  type LayoutChangeEvent,
+  type TextInput,
+  type ViewProps,
+} from 'react-native';
+import { tv } from 'tailwind-variants';
+import { Input, type InputProps } from '../input';
+
+const inputGroupVariants = tv({
+  slots: {
+    root: 'w-full',
+    prefix: 'absolute bottom-0 left-0 top-0 z-10 flex-row items-center justify-center gap-2 px-3',
+    suffix: 'absolute bottom-0 right-0 top-0 z-10 flex-row items-center justify-center gap-2 px-3',
+  },
+  variants: {
+    isDisabled: {
+      true: { prefix: 'opacity-[0.64]', suffix: 'opacity-[0.64]' },
+    },
+  },
+});
+
+interface InputGroupState {
+  isDisabled: boolean;
+  prefixWidth: number;
+  suffixWidth: number;
+  setPrefixWidth: (width: number) => void;
+  setSuffixWidth: (width: number) => void;
+}
+
+const InputGroupContext = createContext<InputGroupState | null>(null);
+
+function useInputGroup() {
+  return useContext(InputGroupContext);
+}
+
+export interface InputGroupProps extends ViewProps {
+  className?: string;
+  /** Disables the input and dims both decorators. */
+  isDisabled?: boolean;
+  children?: ReactNode;
+}
+
+const InputGroupRoot = forwardRef<View, InputGroupProps>(
+  ({ className, isDisabled = false, children, ...props }, ref) => {
+    const { root } = inputGroupVariants();
+    const [prefixWidth, setPrefixWidth] = useState(0);
+    const [suffixWidth, setSuffixWidth] = useState(0);
+
+    const value = useMemo<InputGroupState>(
+      () => ({ isDisabled, prefixWidth, suffixWidth, setPrefixWidth, setSuffixWidth }),
+      [isDisabled, prefixWidth, suffixWidth]
+    );
+
+    return (
+      <InputGroupContext.Provider value={value}>
+        <View ref={ref} className={root({ className })} {...props}>
+          {children}
+        </View>
+      </InputGroupContext.Provider>
+    );
+  }
+);
+InputGroupRoot.displayName = 'InputGroup';
+
+export interface InputGroupDecoratorProps extends ViewProps {
+  className?: string;
+  /**
+   * Marks the decorator as presentation-only: touches fall through to the
+   * Input and screen readers skip it. Leave it off when the decorator holds
+   * something interactive, such as a show-password toggle.
+   */
+  isDecorative?: boolean;
+  children?: ReactNode;
+}
+
+/** Builds Prefix/Suffix, which differ only in which side they measure. */
+function createDecorator(side: 'prefix' | 'suffix') {
+  const Decorator = forwardRef<View, InputGroupDecoratorProps>(
+    ({ className, isDecorative = false, onLayout, children, ...props }, ref) => {
+      const group = useInputGroup();
+      const slots = inputGroupVariants({ isDisabled: group?.isDisabled ?? false });
+      const setWidth = side === 'prefix' ? group?.setPrefixWidth : group?.setSuffixWidth;
+
+      const handleLayout = useCallback(
+        (event: LayoutChangeEvent) => {
+          setWidth?.(event.nativeEvent.layout.width);
+          onLayout?.(event);
+        },
+        [setWidth, onLayout]
+      );
+
+      return (
+        <View
+          ref={ref}
+          onLayout={handleLayout}
+          pointerEvents={isDecorative ? 'none' : 'auto'}
+          accessibilityElementsHidden={isDecorative}
+          importantForAccessibility={isDecorative ? 'no-hide-descendants' : 'auto'}
+          className={slots[side]({ className })}
+          {...props}
+        >
+          {children}
+        </View>
+      );
+    }
+  );
+  Decorator.displayName = side === 'prefix' ? 'InputGroup.Prefix' : 'InputGroup.Suffix';
+  return Decorator;
+}
+
+const InputGroupPrefix = createDecorator('prefix');
+const InputGroupSuffix = createDecorator('suffix');
+
+export type InputGroupInputProps = InputProps;
+
+/**
+ * The Input itself. Receives left/right padding matching the measured
+ * decorator widths, so its text always clears them.
+ */
+const InputGroupInput = forwardRef<TextInput, InputGroupInputProps>(
+  ({ style, disabled, ...props }, ref) => {
+    const group = useInputGroup();
+
+    return (
+      <Input
+        ref={ref}
+        disabled={disabled ?? group?.isDisabled}
+        style={[
+          // Only override padding on the side that actually has a decorator —
+          // a 0 here would wipe out the field's default horizontal padding.
+          group?.prefixWidth ? { paddingLeft: group.prefixWidth } : null,
+          group?.suffixWidth ? { paddingRight: group.suffixWidth } : null,
+          style,
+        ]}
+        {...props}
+      />
+    );
+  }
+);
+InputGroupInput.displayName = 'InputGroup.Input';
+
+export const InputGroup = Object.assign(InputGroupRoot, {
+  Prefix: InputGroupPrefix,
+  Input: InputGroupInput,
+  Suffix: InputGroupSuffix,
+});