panelui-native 0.1.0 → 0.4.0

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';

package/src/components/select/index.tsx

@@ -18,15 +18,16 @@ import { BottomSheet } from '../bottom-sheet';
 const selectVariants = tv({
   slots: {
     trigger:
-      'h-11 w-full flex-row items-center justify-between rounded-lg border border-input bg-background px-3',
-    triggerLabel: 'text-base text-foreground',
-    placeholder: 'text-base text-muted-foreground',
-    item: 'flex-row items-center justify-between rounded-lg px-3 py-3.5',
-    itemLabel: 'text-base text-foreground',
+      'w-full flex-row items-center justify-between gap-3 rounded-2xl border border-input bg-background px-4 py-3.5',
+    triggerLabel: 'flex-1 text-base font-medium text-foreground',
+    placeholder: 'flex-1 text-base text-muted-foreground',
+    item: 'flex-row items-center gap-2 rounded-xl px-3 py-3',
+    itemLabel: 'flex-1 text-base font-medium text-foreground',
+    itemIndicator: 'h-5 w-5 items-center justify-center',
   },
   variants: {
     selected: {
-      true: { item: 'bg-accent', itemLabel: 'font-medium' },
+      true: { item: 'bg-accent' },
     },
     disabled: {
       true: { trigger: 'opacity-50' },
@@ -54,8 +55,8 @@ function SelectItem({ value, label }: SelectItemProps) {
   }
 
   const selected = context.value === value;
-  const { item, itemLabel } = selectVariants({ selected });
-  const checkColor = useCSSVariable('--muted-foreground');
+  const { item, itemLabel, itemIndicator } = selectVariants({ selected });
+  const checkColor = useCSSVariable('--color-muted-foreground');
 
   return (
     <Pressable
@@ -65,12 +66,14 @@ function SelectItem({ value, label }: SelectItemProps) {
       className={item()}
     >
       <Text className={itemLabel()}>{label}</Text>
-      {selected ? (
-        <CheckIcon
-          size={16}
-          color={typeof checkColor === 'string' ? checkColor : '#737373'}
-        />
-      ) : null}
+      <View className={itemIndicator()}>
+        {selected ? (
+          <CheckIcon
+            size={16}
+            color={typeof checkColor === 'string' ? checkColor : '#737373'}
+          />
+        ) : null}
+      </View>
     </Pressable>
   );
 }
@@ -124,7 +127,7 @@ function SelectRoot({
   const { trigger, triggerLabel, placeholder: placeholderSlot } = selectVariants({
     disabled: !!disabled,
   });
-  const chevronColor = useCSSVariable('--muted-foreground');
+  const chevronColor = useCSSVariable('--color-muted-foreground');
 
   return (
     <SelectContext.Provider value={context}>
@@ -146,14 +149,18 @@ function SelectRoot({
       </Pressable>
       <BottomSheet open={open} onOpenChange={setOpen}>
         <BottomSheet.Content>
-          {title ? (
-            <Text size="lg" weight="semibold" className="mb-2 px-3">
-              {title}
-            </Text>
-          ) : null}
-          <ScrollView bounces={false} className="max-h-96">
-            <View className="gap-1 pb-2">{children}</View>
-          </ScrollView>
+          {/* BottomSheet.Content portals its children out of this subtree —
+              re-provide the select context so Select.Item keeps working. */}
+          <SelectContext.Provider value={context}>
+            {title ? (
+              <Text size="lg" weight="semibold" className="mb-2 px-3">
+                {title}
+              </Text>
+            ) : null}
+            <ScrollView bounces={false} className="max-h-96">
+              <View className="gap-1 pb-2">{children}</View>
+            </ScrollView>
+          </SelectContext.Provider>
         </BottomSheet.Content>
       </BottomSheet>
     </SelectContext.Provider>

package/src/components/skeleton/index.tsx

@@ -28,7 +28,7 @@ export const Skeleton = memo(function Skeleton({ className }: SkeletonProps) {
   return (
     <Animated.View
       style={animatedStyle}
-      className={cn('rounded-md bg-foreground/8', className)}
+      className={cn('rounded-md bg-skeleton', className)}
     />
   );
 });

package/src/components/spinner/index.tsx

@@ -10,7 +10,7 @@ import Animated, {
 import { tv, type VariantProps } from 'tailwind-variants';
 
 const spinnerVariants = tv({
-  base: 'rounded-full border-2 border-foreground/15 border-t-primary',
+  base: 'rounded-full border-2 border-muted border-t-primary',
   variants: {
     size: {
       sm: 'h-4 w-4',