panelui-native 0.2.0 → 0.5.1

package/lib/module/components/checkbox/index.js

@@ -13,14 +13,40 @@ 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',
-    label: 'text-sm text-foreground'
+    content: 'flex-1 gap-0.5',
+    label: 'text-sm text-foreground',
+    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 const Checkbox = /*#__PURE__*/forwardRef(({
@@ -28,10 +54,14 @@ export const Checkbox = /*#__PURE__*/forwardRef(({
   checked,
   onCheckedChange,
   disabled,
-  label
+  label,
+  description,
+  variant
 }, ref) => {
   const progress = useSharedValue(checked ? 1 : 0);
   const slots = checkboxVariants({
+    variant,
+    checked,
     disabled: !!disabled
   });
   const checkColor = useCSSVariable('--color-primary-foreground');
@@ -50,6 +80,17 @@ export const Checkbox = /*#__PURE__*/forwardRef(({
       scale: 0.6 + progress.value * 0.4
     }]
   }));
+  const box = /*#__PURE__*/_jsx(View, {
+    className: slots.box(),
+    children: /*#__PURE__*/_jsx(Animated.View, {
+      style: fillStyle,
+      className: slots.fill(),
+      children: /*#__PURE__*/_jsx(CheckIcon, {
+        size: 12,
+        color: typeof checkColor === 'string' ? checkColor : '#fff'
+      })
+    })
+  });
   return /*#__PURE__*/_jsxs(Pressable, {
     ref: ref,
     accessibilityRole: "checkbox",
@@ -58,26 +99,26 @@ export const Checkbox = /*#__PURE__*/forwardRef(({
       disabled: !!disabled
     },
     accessibilityLabel: label,
+    accessibilityHint: description,
     disabled: disabled,
     onPress: () => onCheckedChange?.(!checked),
-    hitSlop: 8,
+    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
+      className: description && variant !== 'card' ? `items-start ${className ?? ''}` : className
     }),
-    children: [/*#__PURE__*/_jsx(View, {
-      className: slots.box(),
-      children: /*#__PURE__*/_jsx(Animated.View, {
-        style: fillStyle,
-        className: slots.fill(),
-        children: /*#__PURE__*/_jsx(CheckIcon, {
-          size: 12,
-          color: typeof checkColor === 'string' ? checkColor : '#fff'
-        })
-      })
-    }), label ? /*#__PURE__*/_jsx(Text, {
-      className: slots.label(),
-      children: label
-    }) : null]
+    children: [variant === 'card' ? null : box, label || description ? /*#__PURE__*/_jsxs(View, {
+      className: slots.content(),
+      children: [label ? /*#__PURE__*/_jsx(Text, {
+        className: slots.label(),
+        children: label
+      }) : null, description ? /*#__PURE__*/_jsx(Text, {
+        className: slots.description(),
+        children: description
+      }) : null]
+    }) : null, variant === 'card' ? box : null]
   });
 });
 Checkbox.displayName = 'Checkbox';

package/lib/module/components/checkbox/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["forwardRef","useEffect","Pressable","View","Animated","useAnimatedStyle","useSharedValue","withSpring","withTiming","tv","useCSSVariable","CheckIcon","Text","jsx","_jsx","jsxs","_jsxs","checkboxVariants","slots","row","box","fill","label","variants","disabled","true","Checkbox","className","checked","onCheckedChange","ref","progress","checkColor","value","damping","stiffness","mass","duration","fillStyle","opacity","transform","scale","accessibilityRole","accessibilityState","accessibilityLabel","onPress","hitSlop","children","style","size","color","displayName"],"sourceRoot":"../../../../src","sources":["components/checkbox/index.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["forwardRef","useEffect","Pressable","View","Animated","useAnimatedStyle","useSharedValue","withSpring","withTiming","tv","useCSSVariable","CheckIcon","Text","jsx","_jsx","jsxs","_jsxs","checkboxVariants","slots","row","box","fill","content","label","description","variants","variant","default","card","checked","true","disabled","compoundVariants","class","defaultVariants","Checkbox","className","onCheckedChange","ref","progress","checkColor","value","damping","stiffness","mass","duration","fillStyle","opacity","transform","scale","children","style","size","color","accessibilityRole","accessibilityState","accessibilityLabel","accessibilityHint","onPress","hitSlop","displayName"],"sourceRoot":"../../../../src","sources":["components/checkbox/index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/empty-state/index.js

@@ -0,0 +1,178 @@
+"use strict";
+
+/**
+ * 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 } from 'react';
+import { View } from 'react-native';
+import { tv } from 'tailwind-variants';
+import { Text } from "../../primitives/text.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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'
+  }
+});
+const EmptyStateRoot = /*#__PURE__*/forwardRef(({
+  className,
+  ...props
+}, ref) => {
+  const {
+    root
+  } = emptyStateVariants();
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    className: root({
+      className
+    }),
+    ...props
+  });
+});
+EmptyStateRoot.displayName = 'EmptyState';
+
+/** Groups Media, Title and Description into one centered column. */
+const EmptyStateHeader = /*#__PURE__*/forwardRef(({
+  className,
+  ...props
+}, ref) => {
+  const {
+    header
+  } = emptyStateVariants();
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    className: header({
+      className
+    }),
+    ...props
+  });
+});
+EmptyStateHeader.displayName = 'EmptyState.Header';
+/**
+ * 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 = /*#__PURE__*/forwardRef(({
+  className,
+  variant = 'default',
+  children,
+  ...props
+}, ref) => {
+  const {
+    wrapper,
+    card,
+    ghost
+  } = mediaVariants({
+    variant
+  });
+  return /*#__PURE__*/_jsxs(View, {
+    ref: ref,
+    className: wrapper({
+      className: `mb-4 ${className ?? ''}`
+    }),
+    ...props,
+    children: [variant === 'icon' ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(View, {
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no-hide-descendants",
+        className: `${ghost()} -translate-x-2 -rotate-[10deg] scale-90`
+      }), /*#__PURE__*/_jsx(View, {
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no-hide-descendants",
+        className: `${ghost()} translate-x-2 rotate-[10deg] scale-90`
+      })]
+    }) : null, /*#__PURE__*/_jsx(View, {
+      className: card(),
+      children: children
+    })]
+  });
+});
+EmptyStateMedia.displayName = 'EmptyState.Media';
+const EmptyStateTitle = /*#__PURE__*/forwardRef(({
+  className,
+  ...props
+}, ref) => {
+  const {
+    title
+  } = emptyStateVariants();
+  return /*#__PURE__*/_jsx(Text, {
+    ref: ref,
+    className: title({
+      className
+    }),
+    ...props
+  });
+});
+EmptyStateTitle.displayName = 'EmptyState.Title';
+const EmptyStateDescription = /*#__PURE__*/forwardRef(({
+  className,
+  ...props
+}, ref) => {
+  const {
+    description
+  } = emptyStateVariants();
+  return /*#__PURE__*/_jsx(Text, {
+    ref: ref,
+    className: description({
+      className
+    }),
+    ...props
+  });
+});
+EmptyStateDescription.displayName = 'EmptyState.Description';
+
+/** Slot below the header, for actions such as a primary button. */
+const EmptyStateContent = /*#__PURE__*/forwardRef(({
+  className,
+  ...props
+}, ref) => {
+  const {
+    content
+  } = emptyStateVariants();
+  return /*#__PURE__*/_jsx(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
+});
+//# sourceMappingURL=index.js.map

package/lib/module/components/empty-state/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["forwardRef","View","tv","Text","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","emptyStateVariants","slots","root","header","title","description","content","mediaVariants","wrapper","card","ghost","variants","variant","default","icon","defaultVariants","EmptyStateRoot","className","props","ref","displayName","EmptyStateHeader","EmptyStateMedia","children","accessibilityElementsHidden","importantForAccessibility","EmptyStateTitle","EmptyStateDescription","EmptyStateContent","EmptyState","Object","assign","Header","Media","Title","Description","Content"],"sourceRoot":"../../../../src","sources":["components/empty-state/index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/frame/index.js

@@ -1,30 +1,52 @@
 "use strict";
 
+/**
+ * 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 } from 'react';
 import { View } from 'react-native';
 import { Text } from "../../primitives/text.js";
 import { cn } from "../../utils/cn.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * 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 = /*#__PURE__*/forwardRef(({
   className,
   ...props
 }, ref) => /*#__PURE__*/_jsx(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';
+/**
+ * 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 = /*#__PURE__*/forwardRef(({
   className,
   ...props
 }, ref) => /*#__PURE__*/_jsx(View, {
   ref: ref,
-  className: cn('gap-1 px-5 py-2', className),
+  className: cn('flex-row items-center justify-between gap-3 px-3 pb-2.5 pt-2', className),
   ...props
 }));
 FrameHeader.displayName = 'Frame.Header';
@@ -34,11 +56,32 @@ const FrameTitle = /*#__PURE__*/forwardRef(({
 }, ref) => /*#__PURE__*/_jsx(Text, {
   ref: ref,
   size: "base",
-  weight: "semibold",
+  weight: "medium",
   className: cn('text-foreground', className),
   ...props
 }));
 FrameTitle.displayName = 'Frame.Title';
+/**
+ * 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 = /*#__PURE__*/forwardRef(({
+  className,
+  children,
+  ...props
+}, ref) => /*#__PURE__*/_jsx(View, {
+  ref: ref,
+  className: cn('flex-row items-center gap-2', className),
+  ...props,
+  children: typeof children === 'string' ? /*#__PURE__*/_jsx(Text, {
+    size: "base",
+    muted: true,
+    children: children
+  }) : children
+}));
+FrameAction.displayName = 'Frame.Action';
+
+/** Secondary line under the title, inside a column-wrapped header. */
 const FrameDescription = /*#__PURE__*/forwardRef(({
   className,
   ...props
@@ -52,15 +95,15 @@ const FrameDescription = /*#__PURE__*/forwardRef(({
 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 = /*#__PURE__*/forwardRef(({
   className,
   ...props
 }, ref) => /*#__PURE__*/_jsx(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
 }));
 FramePanel.displayName = 'Frame.Panel';
@@ -80,18 +123,26 @@ const FrameRow = /*#__PURE__*/forwardRef(({
   ...props
 }));
 FrameRow.displayName = 'Frame.Row';
+/** Muted caption under the panel. Strings are wrapped for you. */
 const FrameFooter = /*#__PURE__*/forwardRef(({
   className,
+  children,
   ...props
 }, ref) => /*#__PURE__*/_jsx(View, {
   ref: ref,
-  className: cn('flex-row items-center gap-2 px-5 py-2', className),
-  ...props
+  className: cn('flex-row items-center gap-2 px-3 pb-1.5 pt-2.5', className),
+  ...props,
+  children: typeof children === 'string' ? /*#__PURE__*/_jsx(Text, {
+    size: "sm",
+    muted: true,
+    children: children
+  }) : children
 }));
 FrameFooter.displayName = 'Frame.Footer';
 export const Frame = Object.assign(FrameRoot, {
   Header: FrameHeader,
   Title: FrameTitle,
+  Action: FrameAction,
   Description: FrameDescription,
   Panel: FramePanel,
   Row: FrameRow,

package/lib/module/components/frame/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["forwardRef","View","Text","cn","jsx","_jsx","FrameRoot","className","props","ref","displayName","FrameHeader","FrameTitle","size","weight","FrameDescription","muted","FramePanel","FrameRow","divided","FrameFooter","Frame","Object","assign","Header","Title","Description","Panel","Row","Footer"],"sourceRoot":"../../../../src","sources":["components/frame/index.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["forwardRef","View","Text","cn","jsx","_jsx","FrameRoot","className","props","ref","displayName","FrameHeader","FrameTitle","size","weight","FrameAction","children","muted","FrameDescription","FramePanel","FrameRow","divided","FrameFooter","Frame","Object","assign","Header","Title","Action","Description","Panel","Row","Footer"],"sourceRoot":"../../../../src","sources":["components/frame/index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/input-group/index.js

@@ -0,0 +1,132 @@
+"use strict";
+
+/**
+ * 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 } from 'react';
+import { View } from 'react-native';
+import { tv } from 'tailwind-variants';
+import { Input } from "../input/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+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]'
+      }
+    }
+  }
+});
+const InputGroupContext = /*#__PURE__*/createContext(null);
+function useInputGroup() {
+  return useContext(InputGroupContext);
+}
+const InputGroupRoot = /*#__PURE__*/forwardRef(({
+  className,
+  isDisabled = false,
+  children,
+  ...props
+}, ref) => {
+  const {
+    root
+  } = inputGroupVariants();
+  const [prefixWidth, setPrefixWidth] = useState(0);
+  const [suffixWidth, setSuffixWidth] = useState(0);
+  const value = useMemo(() => ({
+    isDisabled,
+    prefixWidth,
+    suffixWidth,
+    setPrefixWidth,
+    setSuffixWidth
+  }), [isDisabled, prefixWidth, suffixWidth]);
+  return /*#__PURE__*/_jsx(InputGroupContext.Provider, {
+    value: value,
+    children: /*#__PURE__*/_jsx(View, {
+      ref: ref,
+      className: root({
+        className
+      }),
+      ...props,
+      children: children
+    })
+  });
+});
+InputGroupRoot.displayName = 'InputGroup';
+/** Builds Prefix/Suffix, which differ only in which side they measure. */
+function createDecorator(side) {
+  const Decorator = /*#__PURE__*/forwardRef(({
+    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 => {
+      setWidth?.(event.nativeEvent.layout.width);
+      onLayout?.(event);
+    }, [setWidth, onLayout]);
+    return /*#__PURE__*/_jsx(View, {
+      ref: ref,
+      onLayout: handleLayout,
+      pointerEvents: isDecorative ? 'none' : 'auto',
+      accessibilityElementsHidden: isDecorative,
+      importantForAccessibility: isDecorative ? 'no-hide-descendants' : 'auto',
+      className: slots[side]({
+        className
+      }),
+      ...props,
+      children: children
+    });
+  });
+  Decorator.displayName = side === 'prefix' ? 'InputGroup.Prefix' : 'InputGroup.Suffix';
+  return Decorator;
+}
+const InputGroupPrefix = createDecorator('prefix');
+const InputGroupSuffix = createDecorator('suffix');
+/**
+ * The Input itself. Receives left/right padding matching the measured
+ * decorator widths, so its text always clears them.
+ */
+const InputGroupInput = /*#__PURE__*/forwardRef(({
+  style,
+  disabled,
+  ...props
+}, ref) => {
+  const group = useInputGroup();
+  return /*#__PURE__*/_jsx(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
+});
+//# sourceMappingURL=index.js.map

package/lib/module/components/input-group/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createContext","forwardRef","useCallback","useContext","useMemo","useState","View","tv","Input","jsx","_jsx","inputGroupVariants","slots","root","prefix","suffix","variants","isDisabled","true","InputGroupContext","useInputGroup","InputGroupRoot","className","children","props","ref","prefixWidth","setPrefixWidth","suffixWidth","setSuffixWidth","value","Provider","displayName","createDecorator","side","Decorator","isDecorative","onLayout","group","setWidth","handleLayout","event","nativeEvent","layout","width","pointerEvents","accessibilityElementsHidden","importantForAccessibility","InputGroupPrefix","InputGroupSuffix","InputGroupInput","style","disabled","paddingLeft","paddingRight","InputGroup","Object","assign","Prefix","Suffix"],"sourceRoot":"../../../../src","sources":["components/input-group/index.tsx"],"mappings":"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","ignoreList":[]}