panelui-native 0.1.0 → 0.4.0

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,13 +34,15 @@ 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('--primary-foreground');
+    const checkColor = useCSSVariable('--color-primary-foreground');
 
     useEffect(() => {
       progress.value = checked
@@ -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/dialog/index.tsx

@@ -91,13 +91,17 @@ function DialogContent({
   children,
   ...props
 }: DialogContentProps) {
-  const { open, setOpen } = useDialog('Dialog.Content');
+  const context = useDialog('Dialog.Content');
+  const { open, setOpen } = context;
 
   if (!open) return null;
 
   return (
     <Portal>
-      <Animated.View
+      {/* Portal content mounts under PortalHost, outside this provider's
+          subtree — re-provide the context so Dialog.Close etc. keep working. */}
+      <DialogContext.Provider value={context}>
+        <Animated.View
         entering={FadeIn.duration(150)}
         exiting={FadeOut.duration(150)}
         className="absolute inset-0 items-center justify-center p-6"
@@ -116,10 +120,11 @@ function DialogContent({
             className
           )}
           {...props}
-        >
-          {children}
+          >
+            {children}
+          </Animated.View>
         </Animated.View>
-      </Animated.View>
+      </DialogContext.Provider>
     </Portal>
   );
 }

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/frame/index.tsx

@@ -0,0 +1,104 @@
+import { forwardRef } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { Text, type TextProps } from '../../primitives/text';
+import { cn } from '../../utils/cn';
+
+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)}
+    {...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';
+
+const FrameTitle = forwardRef<React.ElementRef<typeof Text>, TextProps>(
+  ({ className, ...props }, ref) => (
+    <Text
+      ref={ref}
+      size="base"
+      weight="semibold"
+      className={cn('text-foreground', className)}
+      {...props}
+    />
+  )
+);
+FrameTitle.displayName = 'Frame.Title';
+
+const FrameDescription = forwardRef<React.ElementRef<typeof Text>, TextProps>(
+  ({ className, ...props }, ref) => (
+    <Text ref={ref} size="sm" muted className={className} {...props} />
+  )
+);
+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.
+ */
+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
+    )}
+    {...props}
+  />
+));
+FramePanel.displayName = 'Frame.Panel';
+
+/**
+ * A row inside a Frame.Panel. Pass `divided` on every row after the first to
+ * draw a hairline separator above it (React Native has no :first-child).
+ */
+export interface FrameRowProps extends FrameProps {
+  divided?: boolean;
+}
+
+const FrameRow = forwardRef<View, FrameRowProps>(
+  ({ className, divided, ...props }, ref) => (
+    <View
+      ref={ref}
+      className={cn(
+        'flex-row items-center gap-3 px-4 py-3.5',
+        divided && 'border-t border-border',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+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}
+  />
+));
+FrameFooter.displayName = 'Frame.Footer';
+
+export const Frame = Object.assign(FrameRoot, {
+  Header: FrameHeader,
+  Title: FrameTitle,
+  Description: FrameDescription,
+  Panel: FramePanel,
+  Row: FrameRow,
+  Footer: FrameFooter,
+});

package/src/components/inline-select/index.tsx

@@ -0,0 +1,185 @@
+import {
+  Children,
+  createContext,
+  isValidElement,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+  type ReactNode,
+} from 'react';
+import { Pressable, View } from 'react-native';
+import Animated, {
+  FadeIn,
+  FadeOut,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { tv } from 'tailwind-variants';
+import { useCSSVariable } from 'uniwind';
+import { CheckIcon, ChevronDownIcon } from '../../icons';
+import { Text } from '../../primitives/text';
+
+const inlineSelectVariants = tv({
+  slots: {
+    trigger:
+      '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',
+    list: 'mt-2 overflow-hidden rounded-2xl border border-border bg-popover p-2 shadow-sm',
+    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' },
+    },
+    disabled: {
+      true: { trigger: 'opacity-[0.64]' },
+    },
+  },
+});
+
+interface InlineSelectContextValue {
+  value: string | undefined;
+  onSelect: (value: string) => void;
+}
+
+const InlineSelectContext = createContext<InlineSelectContextValue | null>(null);
+
+export interface InlineSelectItemProps {
+  value: string;
+  label: string;
+}
+
+/** Option row. Rendered inline beneath the trigger — no overlay involved. */
+function InlineSelectItem({ value, label }: InlineSelectItemProps) {
+  const context = useContext(InlineSelectContext);
+  if (!context) {
+    throw new Error('InlineSelect.Item must be used within an <InlineSelect>');
+  }
+
+  const selected = context.value === value;
+  const { item, itemLabel, itemIndicator } = inlineSelectVariants({ selected });
+  const checkColor = useCSSVariable('--color-muted-foreground');
+
+  return (
+    <Pressable
+      accessibilityRole="menuitem"
+      accessibilityState={{ selected }}
+      onPress={() => context.onSelect(value)}
+      className={item()}
+    >
+      <Text className={itemLabel()}>{label}</Text>
+      <View className={itemIndicator()}>
+        {selected ? (
+          <CheckIcon
+            size={16}
+            color={typeof checkColor === 'string' ? checkColor : '#737373'}
+          />
+        ) : null}
+      </View>
+    </Pressable>
+  );
+}
+
+export interface InlineSelectProps {
+  className?: string;
+  value?: string;
+  onValueChange: (value: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  children: ReactNode;
+}
+
+/**
+ * A select that expands its options inline instead of opening a bottom sheet.
+ * Useful inside forms and scroll views where an overlay would be disruptive.
+ */
+function InlineSelectRoot({
+  className,
+  value,
+  onValueChange,
+  placeholder = 'Select an option',
+  disabled,
+  children,
+}: InlineSelectProps) {
+  const [open, setOpen] = useState(false);
+  const chevron = useSharedValue(0);
+
+  const selectedLabel = useMemo(() => {
+    let label: string | undefined;
+    Children.forEach(children, (child) => {
+      if (isValidElement<InlineSelectItemProps>(child) && child.props.value === value) {
+        label = child.props.label;
+      }
+    });
+    return label;
+  }, [children, value]);
+
+  const toggle = useCallback(() => {
+    setOpen((current) => {
+      chevron.value = withTiming(current ? 0 : 1, { duration: 160 });
+      return !current;
+    });
+  }, [chevron]);
+
+  const context = useMemo<InlineSelectContextValue>(
+    () => ({
+      value,
+      onSelect: (next) => {
+        onValueChange(next);
+        chevron.value = withTiming(0, { duration: 160 });
+        setOpen(false);
+      },
+    }),
+    [value, onValueChange, chevron]
+  );
+
+  const slots = inlineSelectVariants({ disabled: !!disabled });
+  const chevronColor = useCSSVariable('--color-muted-foreground');
+
+  const chevronStyle = useAnimatedStyle(() => ({
+    transform: [{ rotate: `${chevron.value * 180}deg` }],
+  }));
+
+  return (
+    <InlineSelectContext.Provider value={context}>
+      <View className={className}>
+        <Pressable
+          accessibilityRole="button"
+          accessibilityState={{ disabled: !!disabled, expanded: open }}
+          disabled={disabled}
+          onPress={toggle}
+          className={slots.trigger()}
+        >
+          {selectedLabel ? (
+            <Text className={slots.triggerLabel()}>{selectedLabel}</Text>
+          ) : (
+            <Text className={slots.placeholder()}>{placeholder}</Text>
+          )}
+          <Animated.View style={chevronStyle}>
+            <ChevronDownIcon
+              color={typeof chevronColor === 'string' ? chevronColor : '#737373'}
+            />
+          </Animated.View>
+        </Pressable>
+        {open ? (
+          <Animated.View
+            entering={FadeIn.duration(140)}
+            exiting={FadeOut.duration(120)}
+            className={slots.list()}
+          >
+            {children}
+          </Animated.View>
+        ) : null}
+      </View>
+    </InlineSelectContext.Provider>
+  );
+}
+
+export const InlineSelect = Object.assign(InlineSelectRoot, {
+  Item: InlineSelectItem,
+});

package/src/components/input/index.tsx

@@ -52,7 +52,7 @@ export const Input = forwardRef<TextInput, InputProps>(
     ref
   ) => {
     const [focused, setFocused] = useState(false);
-    const placeholderColor = useCSSVariable('--muted-foreground');
+    const placeholderColor = useCSSVariable('--color-muted-foreground');
     const slots = inputVariants({
       focused,
       invalid: !!errorMessage,

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