panelui-native 0.1.0 → 0.2.0

package/src/components/alert/index.tsx

@@ -6,36 +6,26 @@ import { Text, type TextProps } from '../../primitives/text';
 
 const alertVariants = tv({
   slots: {
-    root: 'w-full gap-1 rounded-xl border p-4',
-    title: 'font-semibold',
-    description: 'text-sm',
+    root: 'w-full gap-0.5 rounded-xl border px-3.5 py-3',
+    title: 'text-sm font-medium text-card-foreground',
+    description: 'text-sm text-muted-foreground',
   },
   variants: {
     variant: {
       default: {
-        root: 'border-border bg-card',
-        title: 'text-foreground',
-        description: 'text-muted-foreground',
+        root: 'border-border bg-surface',
       },
       info: {
-        root: 'border-info/32 bg-info/4',
-        title: 'text-foreground',
-        description: 'text-muted-foreground',
+        root: 'border-info/32 bg-info/10 dark:bg-info/[0.06]',
       },
       success: {
-        root: 'border-success/32 bg-success/4',
-        title: 'text-foreground',
-        description: 'text-muted-foreground',
+        root: 'border-success/32 bg-success/10 dark:bg-success/[0.06]',
       },
       warning: {
-        root: 'border-warning/32 bg-warning/4',
-        title: 'text-foreground',
-        description: 'text-muted-foreground',
+        root: 'border-warning/32 bg-warning/10 dark:bg-warning/[0.06]',
       },
       destructive: {
-        root: 'border-destructive/32 bg-destructive/4',
-        title: 'text-foreground',
-        description: 'text-muted-foreground',
+        root: 'border-destructive/32 bg-destructive/10 dark:bg-destructive/[0.06]',
       },
     },
   },

package/src/components/avatar/index.tsx

@@ -12,7 +12,7 @@ import { Text } from '../../primitives/text';
 const avatarVariants = tv({
   slots: {
     root: 'items-center justify-center overflow-hidden rounded-full border border-border bg-muted',
-    image: 'h-full w-full',
+    image: 'absolute inset-0 h-full w-full',
     fallback: 'font-medium text-muted-foreground',
   },
   variants: {

package/src/components/bottom-sheet/index.tsx

@@ -111,7 +111,8 @@ function BottomSheetContent({
   children,
   ...props
 }: BottomSheetContentProps) {
-  const { open, setOpen } = useBottomSheet('BottomSheet.Content');
+  const context = useBottomSheet('BottomSheet.Content');
+  const { open, setOpen } = context;
   const { height: screenHeight } = useWindowDimensions();
   const insets = useSafeAreaInsets();
   const translateY = useSharedValue(0);
@@ -145,7 +146,10 @@ function BottomSheetContent({
 
   return (
     <Portal>
-      <View className="absolute inset-0 justify-end">
+      {/* Portal content mounts under PortalHost, outside this provider's
+          subtree — re-provide the context so nested consumers keep working. */}
+      <BottomSheetContext.Provider value={context}>
+        <View className="absolute inset-0 justify-end">
         <Animated.View
           entering={FadeIn.duration(180)}
           exiting={FadeOut.duration(180)}
@@ -175,7 +179,8 @@ function BottomSheetContent({
             {children}
           </Animated.View>
         </GestureDetector>
-      </View>
+        </View>
+      </BottomSheetContext.Provider>
     </Portal>
   );
 }

package/src/components/card/index.tsx

@@ -10,14 +10,14 @@ export interface CardProps extends ViewProps {
 const CardRoot = forwardRef<View, CardProps>(({ className, ...props }, ref) => (
   <View
     ref={ref}
-    className={cn('rounded-xl border border-border bg-card shadow-sm', className)}
+    className={cn('rounded-2xl border border-border bg-card shadow-sm', className)}
     {...props}
   />
 ));
 CardRoot.displayName = 'Card';
 
 const CardHeader = forwardRef<View, CardProps>(({ className, ...props }, ref) => (
-  <View ref={ref} className={cn('gap-1.5 p-4', className)} {...props} />
+  <View ref={ref} className={cn('gap-1.5 p-6', className)} {...props} />
 ));
 CardHeader.displayName = 'Card.Header';
 
@@ -27,7 +27,7 @@ const CardTitle = forwardRef<React.ElementRef<typeof Text>, TextProps>(
       ref={ref}
       size="lg"
       weight="semibold"
-      className={cn('text-card-foreground', className)}
+      className={cn('leading-none text-card-foreground', className)}
       {...props}
     />
   )
@@ -42,14 +42,14 @@ const CardDescription = forwardRef<React.ElementRef<typeof Text>, TextProps>(
 CardDescription.displayName = 'Card.Description';
 
 const CardContent = forwardRef<View, CardProps>(({ className, ...props }, ref) => (
-  <View ref={ref} className={cn('p-4 pt-0', className)} {...props} />
+  <View ref={ref} className={cn('p-6 pt-0', className)} {...props} />
 ));
 CardContent.displayName = 'Card.Content';
 
 const CardFooter = forwardRef<View, CardProps>(({ className, ...props }, ref) => (
   <View
     ref={ref}
-    className={cn('flex-row items-center gap-2 p-4 pt-0', className)}
+    className={cn('flex-row items-center gap-2 p-6 pt-0', className)}
     {...props}
   />
 ));

package/src/components/checkbox/index.tsx

@@ -38,7 +38,7 @@ export const Checkbox = forwardRef<View, CheckboxProps>(
   ({ className, checked, onCheckedChange, disabled, label }, 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

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/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/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',

package/src/index.ts

@@ -27,6 +27,12 @@ export {
   type DialogProps,
   type DialogContentProps,
 } from './components/dialog';
+export { Frame, type FrameProps } from './components/frame';
+export {
+  InlineSelect,
+  type InlineSelectProps,
+  type InlineSelectItemProps,
+} from './components/inline-select';
 export { Select, type SelectProps, type SelectItemProps } from './components/select';
 export {
   Tabs,

package/src/providers/panel-ui-provider.tsx

@@ -1,26 +1,48 @@
 import type { ReactNode } from 'react';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { PortalHost, PortalProvider } from '../primitives/portal';
+import { cn } from '../utils/cn';
 
 export interface PanelUIProviderProps {
   children: ReactNode;
+  /**
+   * Classes for the themed page surface. Defaults to `bg-background`, which
+   * follows the active theme. Pass your own to change the page colour.
+   */
+  className?: string;
+  /**
+   * Set to false to render without the themed page background — do this only
+   * if you paint the app background yourself.
+   */
+  background?: boolean;
 }
 
 /**
- * Root provider for PanelUI. Wraps the app with the gesture handler root and
- * the portal host used by overlay components (Dialog, BottomSheet, Select).
+ * Root provider for PanelUI. Owns three things:
+ * the gesture handler root, the themed page background, and the portal host
+ * used by overlay components (Dialog, BottomSheet, Select).
  *
- * Theme switching is handled natively by Uniwind — use `Uniwind.setTheme()`
- * or the `useTheme()` hook exported from panelui-native.
+ * The background lives here because native wrappers like SafeAreaView do not
+ * accept `className` — putting `bg-background` on one silently does nothing,
+ * leaving the page unthemed while its children follow the theme.
+ *
+ * Theme switching is handled natively by Uniwind — use the `useTheme()` hook
+ * exported from panelui-native.
  */
-export function PanelUIProvider({ children }: PanelUIProviderProps) {
+export function PanelUIProvider({
+  children,
+  className,
+  background = true,
+}: PanelUIProviderProps) {
   return (
     <GestureHandlerRootView style={styles.root}>
-      <PortalProvider>
-        {children}
-        <PortalHost />
-      </PortalProvider>
+      <View className={cn('flex-1', background && 'bg-background', className)}>
+        <PortalProvider>
+          {children}
+          <PortalHost />
+        </PortalProvider>
+      </View>
     </GestureHandlerRootView>
   );
 }