panelui-native 0.2.0 → 0.5.1

package/src/components/frame/index.tsx

@@ -1,5 +1,28 @@
-import { forwardRef } from 'react';
-import { View, type ViewProps } from 'react-native';
+/**
+ * Frame — a widget shell: a titled surface wrapping an inset panel of rows,
+ * with an optional action on the header row and a caption underneath.
+ *
+ * Layout follows the nested-radius rule (inner radius = outer radius minus the
+ * gap between them), which is why the panel is `rounded-xl` inside a
+ * `rounded-2xl` shell. Since v0.4.0 the radius scale is theme-scoped, so this
+ * relationship holds while the absolute values change per theme.
+ *
+ * ```tsx
+ * <Frame>
+ *   <Frame.Header>
+ *     <Frame.Title>Usage Type</Frame.Title>
+ *     <Frame.Action>Amount</Frame.Action>
+ *   </Frame.Header>
+ *   <Frame.Panel>
+ *     <Frame.Row>…</Frame.Row>
+ *     <Frame.Row divided>…</Frame.Row>
+ *   </Frame.Panel>
+ *   <Frame.Footer>Updated 2 minutes ago</Frame.Footer>
+ * </Frame>
+ * ```
+ */
+import { forwardRef, type ReactNode } from 'react';
+import { View, type Text as RNText, type ViewProps } from 'react-native';
 import { Text, type TextProps } from '../../primitives/text';
 import { cn } from '../../utils/cn';
 
@@ -7,39 +30,73 @@ export interface FrameProps extends ViewProps {
   className?: string;
 }
 
-/**
- * Grouping container (Coss UI's CardFrame): a tinted, rounded surface that
- * holds a header, one or more inset panels, and a footer. Use it to group
- * related settings or list sections under a single title.
- */
 const FrameRoot = forwardRef<View, FrameProps>(({ className, ...props }, ref) => (
   <View
     ref={ref}
-    className={cn('gap-2 rounded-2xl border border-border bg-surface py-2', className)}
+    className={cn('rounded-2xl border border-border bg-surface p-1.5', className)}
     {...props}
   />
 ));
 FrameRoot.displayName = 'Frame';
 
-const FrameHeader = forwardRef<View, FrameProps>(({ className, ...props }, ref) => (
-  <View ref={ref} className={cn('gap-1 px-5 py-2', className)} {...props} />
-));
-FrameHeader.displayName = 'Frame.Header';
+export interface FrameHeaderProps extends FrameProps {
+  children?: ReactNode;
+}
 
-const FrameTitle = forwardRef<React.ElementRef<typeof Text>, TextProps>(
+/**
+ * The header row: title on the left, `Frame.Action` on the right. Add
+ * `className="flex-col items-start"` when you want a description underneath.
+ */
+const FrameHeader = forwardRef<View, FrameHeaderProps>(
   ({ className, ...props }, ref) => (
-    <Text
+    <View
       ref={ref}
-      size="base"
-      weight="semibold"
-      className={cn('text-foreground', className)}
+      className={cn(
+        'flex-row items-center justify-between gap-3 px-3 pb-2.5 pt-2',
+        className
+      )}
       {...props}
     />
   )
 );
+FrameHeader.displayName = 'Frame.Header';
+
+const FrameTitle = forwardRef<RNText, TextProps>(({ className, ...props }, ref) => (
+  <Text
+    ref={ref}
+    size="base"
+    weight="medium"
+    className={cn('text-foreground', className)}
+    {...props}
+  />
+));
 FrameTitle.displayName = 'Frame.Title';
 
-const FrameDescription = forwardRef<React.ElementRef<typeof Text>, TextProps>(
+export interface FrameActionProps extends FrameProps {
+  children?: ReactNode;
+}
+
+/**
+ * Trailing slot on the header row — a column label, a count, a button, a badge.
+ * Plain strings render as muted text; anything else renders as-is.
+ */
+const FrameAction = forwardRef<View, FrameActionProps>(
+  ({ className, children, ...props }, ref) => (
+    <View ref={ref} className={cn('flex-row items-center gap-2', className)} {...props}>
+      {typeof children === 'string' ? (
+        <Text size="base" muted>
+          {children}
+        </Text>
+      ) : (
+        children
+      )}
+    </View>
+  )
+);
+FrameAction.displayName = 'Frame.Action';
+
+/** Secondary line under the title, inside a column-wrapped header. */
+const FrameDescription = forwardRef<RNText, TextProps>(
   ({ className, ...props }, ref) => (
     <Text ref={ref} size="sm" muted className={className} {...props} />
   )
@@ -47,16 +104,13 @@ const FrameDescription = forwardRef<React.ElementRef<typeof Text>, TextProps>(
 FrameDescription.displayName = 'Frame.Description';
 
 /**
- * An inset card surface inside a Frame — the raised panel that holds the
- * frame's actual content, sitting slightly in from the frame's edges.
+ * The inset card holding the frame's content — the raised surface sitting in
+ * from the shell's edges, with its own smaller radius.
  */
 const FramePanel = forwardRef<View, FrameProps>(({ className, ...props }, ref) => (
   <View
     ref={ref}
-    className={cn(
-      'mx-1.5 overflow-hidden rounded-xl border border-border bg-card',
-      className
-    )}
+    className={cn('overflow-hidden rounded-xl border border-border bg-card', className)}
     {...props}
   />
 ));
@@ -85,18 +139,34 @@ const FrameRow = forwardRef<View, FrameRowProps>(
 );
 FrameRow.displayName = 'Frame.Row';
 
-const FrameFooter = forwardRef<View, FrameProps>(({ className, ...props }, ref) => (
-  <View
-    ref={ref}
-    className={cn('flex-row items-center gap-2 px-5 py-2', className)}
-    {...props}
-  />
-));
+export interface FrameFooterProps extends FrameProps {
+  children?: ReactNode;
+}
+
+/** Muted caption under the panel. Strings are wrapped for you. */
+const FrameFooter = forwardRef<View, FrameFooterProps>(
+  ({ className, children, ...props }, ref) => (
+    <View
+      ref={ref}
+      className={cn('flex-row items-center gap-2 px-3 pb-1.5 pt-2.5', className)}
+      {...props}
+    >
+      {typeof children === 'string' ? (
+        <Text size="sm" muted>
+          {children}
+        </Text>
+      ) : (
+        children
+      )}
+    </View>
+  )
+);
 FrameFooter.displayName = 'Frame.Footer';
 
 export const Frame = Object.assign(FrameRoot, {
   Header: FrameHeader,
   Title: FrameTitle,
+  Action: FrameAction,
   Description: FrameDescription,
   Panel: FramePanel,
   Row: FrameRow,

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,
+});

package/src/components/label/index.tsx

@@ -0,0 +1,128 @@
+/**
+ * Label — text that names a form field.
+ *
+ * Adapted from: heroui-inc/heroui-native src/components/label/ (root +
+ * Label.Text anatomy, string children auto-wrapping, the required asterisk,
+ * and the isInvalid / isDisabled recolouring).
+ */
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useMemo,
+  type ReactNode,
+} from 'react';
+import { View, type Text as RNText, type ViewProps } from 'react-native';
+import { tv } from 'tailwind-variants';
+import { Text, type TextProps } from '../../primitives/text';
+
+const labelVariants = tv({
+  slots: {
+    root: 'flex-row items-center gap-1',
+    text: 'text-sm font-medium text-foreground',
+    asterisk: 'text-sm font-medium text-destructive',
+  },
+  variants: {
+    isDisabled: {
+      true: {
+        root: 'opacity-[0.64]',
+        asterisk: 'text-muted-foreground',
+      },
+    },
+    isInvalid: {
+      true: { text: 'text-destructive' },
+    },
+  },
+});
+
+interface LabelState {
+  isRequired: boolean;
+  isInvalid: boolean;
+  isDisabled: boolean;
+}
+
+const LabelContext = createContext<LabelState>({
+  isRequired: false,
+  isInvalid: false,
+  isDisabled: false,
+});
+
+export interface LabelProps extends ViewProps {
+  className?: string;
+  /** Appends an asterisk marking the field as required. */
+  isRequired?: boolean;
+  /** Recolours the label to signal a validation error. */
+  isInvalid?: boolean;
+  isDisabled?: boolean;
+  children?: ReactNode;
+}
+
+const LabelRoot = forwardRef<View, LabelProps>(
+  (
+    {
+      className,
+      isRequired = false,
+      isInvalid = false,
+      isDisabled = false,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const { root } = labelVariants({ isDisabled, isInvalid });
+    const state = useMemo(
+      () => ({ isRequired, isInvalid, isDisabled }),
+      [isRequired, isInvalid, isDisabled]
+    );
+
+    return (
+      <LabelContext.Provider value={state}>
+        <View
+          ref={ref}
+          className={root({ className })}
+          accessibilityState={{ disabled: isDisabled }}
+          {...props}
+        >
+          {/* Bare strings are the common case — wrap them so callers don't have to. */}
+          {typeof children === 'string' ? <LabelText>{children}</LabelText> : children}
+        </View>
+      </LabelContext.Provider>
+    );
+  }
+);
+LabelRoot.displayName = 'Label';
+
+export interface LabelTextProps extends TextProps {
+  className?: string;
+  /** Classes for the required asterisk. */
+  asteriskClassName?: string;
+}
+
+const LabelText = forwardRef<RNText, LabelTextProps>(
+  ({ className, asteriskClassName, children, ...props }, ref) => {
+    const { isRequired, isInvalid, isDisabled } = useContext(LabelContext);
+    const { text, asterisk } = labelVariants({ isDisabled, isInvalid });
+
+    return (
+      <>
+        <Text ref={ref} className={text({ className })} {...props}>
+          {children}
+        </Text>
+        {isRequired ? (
+          <Text
+            accessibilityElementsHidden
+            importantForAccessibility="no-hide-descendants"
+            className={asterisk({ className: asteriskClassName })}
+          >
+            *
+          </Text>
+        ) : null}
+      </>
+    );
+  }
+);
+LabelText.displayName = 'Label.Text';
+
+export const Label = Object.assign(LabelRoot, {
+  Text: LabelText,
+});

package/src/components/progress/index.tsx

@@ -0,0 +1,147 @@
+import { forwardRef, useEffect } from 'react';
+import { View, type LayoutChangeEvent, type ViewProps } from 'react-native';
+import Animated, {
+  Easing,
+  cancelAnimation,
+  interpolate,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withSpring,
+  withTiming,
+} from 'react-native-reanimated';
+import { tv, type VariantProps } from 'tailwind-variants';
+
+const SPRING = { damping: 20, stiffness: 180, mass: 0.6 } as const;
+/** Fraction of the track covered by the sliding bar in indeterminate mode. */
+const INDETERMINATE_WIDTH = 0.4;
+
+const progressVariants = tv({
+  slots: {
+    track: 'w-full overflow-hidden rounded-full',
+    indicator: 'h-full rounded-full',
+  },
+  variants: {
+    color: {
+      primary: { track: 'bg-primary/16', indicator: 'bg-primary' },
+      success: { track: 'bg-success/16', indicator: 'bg-success' },
+      warning: { track: 'bg-warning/16', indicator: 'bg-warning' },
+      destructive: { track: 'bg-destructive/16', indicator: 'bg-destructive' },
+      info: { track: 'bg-info/16', indicator: 'bg-info' },
+    },
+    size: {
+      sm: { track: 'h-1.5' },
+      md: { track: 'h-2' },
+      lg: { track: 'h-3' },
+    },
+  },
+  defaultVariants: {
+    color: 'primary',
+    size: 'md',
+  },
+});
+
+type ProgressVariantProps = VariantProps<typeof progressVariants>;
+
+export interface ProgressProps
+  extends Omit<ViewProps, 'children'>,
+    ProgressVariantProps {
+  className?: string;
+  /** Progress value, 0–100. Ignored when `indeterminate` is set. */
+  value?: number;
+  /** Show a looping animation for unknown-duration work. */
+  indeterminate?: boolean;
+  /** Extra classes for the moving indicator. */
+  indicatorClassName?: string;
+}
+
+function clamp(value: number) {
+  'worklet';
+  if (value < 0) return 0;
+  if (value > 100) return 100;
+  return value;
+}
+
+/**
+ * Determinate or indeterminate progress bar. The fill width (determinate) and
+ * the sliding bar (indeterminate) are both driven on the UI thread, so updates
+ * never re-render past the value change itself.
+ */
+export const Progress = forwardRef<View, ProgressProps>(
+  (
+    {
+      className,
+      indicatorClassName,
+      value = 0,
+      indeterminate = false,
+      color,
+      size,
+      ...props
+    },
+    ref
+  ) => {
+    const slots = progressVariants({ color, size });
+    const trackWidth = useSharedValue(0);
+    const progress = useSharedValue(clamp(value) / 100);
+    const slide = useSharedValue(0);
+
+    const target = clamp(value) / 100;
+
+    useEffect(() => {
+      if (indeterminate) {
+        slide.value = withRepeat(
+          withTiming(1, { duration: 1100, easing: Easing.inOut(Easing.ease) }),
+          -1,
+          false
+        );
+        return () => cancelAnimation(slide);
+      }
+      progress.value = withSpring(target, SPRING);
+      return undefined;
+    }, [indeterminate, target, progress, slide]);
+
+    const onLayout = (event: LayoutChangeEvent) => {
+      trackWidth.value = event.nativeEvent.layout.width;
+    };
+
+    const determinateStyle = useAnimatedStyle(() => ({
+      width: trackWidth.value * progress.value,
+    }));
+
+    const indeterminateStyle = useAnimatedStyle(() => {
+      const barWidth = trackWidth.value * INDETERMINATE_WIDTH;
+      return {
+        width: barWidth,
+        transform: [
+          {
+            translateX: interpolate(
+              slide.value,
+              [0, 1],
+              [-barWidth, trackWidth.value]
+            ),
+          },
+        ],
+      };
+    });
+
+    return (
+      <View
+        ref={ref}
+        accessibilityRole="progressbar"
+        accessibilityValue={
+          indeterminate ? undefined : { min: 0, max: 100, now: clamp(value) }
+        }
+        className={slots.track({ className })}
+        onLayout={onLayout}
+        {...props}
+      >
+        <Animated.View
+          style={indeterminate ? indeterminateStyle : determinateStyle}
+          className={slots.indicator({ className: indicatorClassName })}
+        />
+      </View>
+    );
+  }
+);
+
+Progress.displayName = 'Progress';