panelui-native 0.4.0 → 0.5.3

package/src/components/checkbox/index.tsx

@@ -21,10 +21,34 @@ const checkboxVariants = tv({
     description: 'text-sm text-muted-foreground',
   },
   variants: {
+    variant: {
+      default: {},
+      /**
+       * The whole surface is the target — for pickable options where the
+       * checkbox is a confirmation rather than the affordance itself.
+       */
+      card: {
+        row: 'w-full items-start gap-3 rounded-xl border border-border bg-card p-4',
+        label: 'text-base font-medium',
+      },
+    },
+    checked: {
+      true: {},
+    },
     disabled: {
       true: { row: 'opacity-50' },
     },
   },
+  compoundVariants: [
+    {
+      variant: 'card',
+      checked: true,
+      class: { row: 'border-primary bg-accent' },
+    },
+  ],
+  defaultVariants: {
+    variant: 'default',
+  },
 });
 
 export interface CheckboxProps extends VariantProps<typeof checkboxVariants> {
@@ -39,9 +63,12 @@ export interface CheckboxProps extends VariantProps<typeof checkboxVariants> {
 }
 
 export const Checkbox = forwardRef<View, CheckboxProps>(
-  ({ className, checked, onCheckedChange, disabled, label, description }, ref) => {
+  (
+    { className, checked, onCheckedChange, disabled, label, description, variant },
+    ref
+  ) => {
     const progress = useSharedValue(checked ? 1 : 0);
-    const slots = checkboxVariants({ disabled: !!disabled });
+    const slots = checkboxVariants({ variant, checked, disabled: !!disabled });
     const checkColor = useCSSVariable('--color-primary-foreground');
 
     useEffect(() => {
@@ -55,6 +82,17 @@ export const Checkbox = forwardRef<View, CheckboxProps>(
       transform: [{ scale: 0.6 + progress.value * 0.4 }],
     }));
 
+    const box = (
+      <View className={slots.box()}>
+        <Animated.View style={fillStyle} className={slots.fill()}>
+          <CheckIcon
+            size={12}
+            color={typeof checkColor === 'string' ? checkColor : '#fff'}
+          />
+        </Animated.View>
+      </View>
+    );
+
     return (
       <Pressable
         ref={ref}
@@ -67,16 +105,15 @@ export const Checkbox = forwardRef<View, CheckboxProps>(
         hitSlop={8}
         // 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 })}
+        className={slots.row({
+          className:
+            description && variant !== 'card'
+              ? `items-start ${className ?? ''}`
+              : className,
+        })}
       >
-        <View className={slots.box()}>
-          <Animated.View style={fillStyle} className={slots.fill()}>
-            <CheckIcon
-              size={12}
-              color={typeof checkColor === 'string' ? checkColor : '#fff'}
-            />
-          </Animated.View>
-        </View>
+        {/* The card lays out content first so the box sits top-right. */}
+        {variant === 'card' ? null : box}
         {label || description ? (
           <View className={slots.content()}>
             {label ? <Text className={slots.label()}>{label}</Text> : null}
@@ -85,6 +122,7 @@ export const Checkbox = forwardRef<View, CheckboxProps>(
             ) : null}
           </View>
         ) : null}
+        {variant === 'card' ? box : null}
       </Pressable>
     );
   }

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,