panelui-native 0.12.0 → 0.14.0

package/lib/module/primitives/keyboard-avoider.js

@@ -1,11 +1,26 @@
 "use strict";
 
 /**
- * KeyboardAvoider — a view that lifts itself just clear of the keyboard.
+ * KeyboardAvoider — a view that keeps itself clear of the keyboard.
  *
  * A thin wrapper over `useKeyboardAvoidance` for the common case of "keep this
  * box visible", so a form does not have to wire the ref, layout handler and
  * animated style by hand.
+ *
+ * ```tsx
+ * // In the flow of a scrolling page: lifts by the overlap, follows the scroll.
+ * <KeyboardAvoider active={focused}>…</KeyboardAvoider>
+ *
+ * // Pinned to the bottom edge: rides the keyboard up and back down.
+ * <KeyboardAvoider
+ *   mode="dock"
+ *   bottomInset={insets.bottom}
+ *   className="absolute left-0 right-0"
+ *   style={{ bottom: insets.bottom + 16 }}
+ * >
+ *   …
+ * </KeyboardAvoider>
+ * ```
  */
 
 import Animated from 'react-native-reanimated';
@@ -15,7 +30,9 @@ export function KeyboardAvoider({
   className,
   enabled = true,
   active = true,
+  mode = 'lift',
   offset = 16,
+  bottomInset = 0,
   children,
   style,
   onLayout,
@@ -24,7 +41,9 @@ export function KeyboardAvoider({
   const avoidance = useKeyboardAvoidance({
     enabled,
     active,
-    offset
+    mode,
+    offset,
+    bottomInset
   });
   return /*#__PURE__*/_jsx(Animated.View, {
     ...props,

package/lib/module/primitives/keyboard-avoider.js.map

@@ -1 +1 @@
-{"version":3,"names":["Animated","useKeyboardAvoidance","jsx","_jsx","KeyboardAvoider","className","enabled","active","offset","children","style","onLayout","props","avoidance","View","ref","event","animatedStyle","displayName"],"sourceRoot":"../../../src","sources":["primitives/keyboard-avoider.tsx"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA,OAAOA,QAAQ,MAAM,yBAAyB;AAC9C,SAASC,oBAAoB,QAAQ,oCAAiC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAkBvE,OAAO,SAASC,eAAeA,CAAC;EAC9BC,SAAS;EACTC,OAAO,GAAG,IAAI;EACdC,MAAM,GAAG,IAAI;EACbC,MAAM,GAAG,EAAE;EACXC,QAAQ;EACRC,KAAK;EACLC,QAAQ;EACR,GAAGC;AACiB,CAAC,EAAE;EACvB,MAAMC,SAAS,GAAGZ,oBAAoB,CAAC;IAAEK,OAAO;IAAEC,MAAM;IAAEC;EAAO,CAAC,CAAC;EAEnE,oBACEL,IAAA,CAACH,QAAQ,CAACc,IAAI;IAAA,GACRF,KAAK;IACTG,GAAG,EAAEF,SAAS,CAACE,GAAI;IACnBJ,QAAQ,EAAGK,KAAK,IAAK;MACnBH,SAAS,CAACF,QAAQ,CAACK,KAAK,CAAC;MACzBL,QAAQ,GAAGK,KAAK,CAAC;IACnB,CAAE;IACFX,SAAS,EAAEA,SAAU;IACrBK,KAAK,EAAE,CAACA,KAAK,EAAEG,SAAS,CAACI,aAAa,CAAE;IAAAR,QAAA,EAEvCA;EAAQ,CACI,CAAC;AAEpB;AAEAL,eAAe,CAACc,WAAW,GAAG,iBAAiB","ignoreList":[]}
+{"version":3,"names":["Animated","useKeyboardAvoidance","jsx","_jsx","KeyboardAvoider","className","enabled","active","mode","offset","bottomInset","children","style","onLayout","props","avoidance","View","ref","event","animatedStyle","displayName"],"sourceRoot":"../../../src","sources":["primitives/keyboard-avoider.tsx"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA,OAAOA,QAAQ,MAAM,yBAAyB;AAC9C,SACEC,oBAAoB,QAEf,oCAAiC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AA6BzC,OAAO,SAASC,eAAeA,CAAC;EAC9BC,SAAS;EACTC,OAAO,GAAG,IAAI;EACdC,MAAM,GAAG,IAAI;EACbC,IAAI,GAAG,MAAM;EACbC,MAAM,GAAG,EAAE;EACXC,WAAW,GAAG,CAAC;EACfC,QAAQ;EACRC,KAAK;EACLC,QAAQ;EACR,GAAGC;AACiB,CAAC,EAAE;EACvB,MAAMC,SAAS,GAAGd,oBAAoB,CAAC;IACrCK,OAAO;IACPC,MAAM;IACNC,IAAI;IACJC,MAAM;IACNC;EACF,CAAC,CAAC;EAEF,oBACEP,IAAA,CAACH,QAAQ,CAACgB,IAAI;IAAA,GACRF,KAAK;IACTG,GAAG,EAAEF,SAAS,CAACE,GAAI;IACnBJ,QAAQ,EAAGK,KAAK,IAAK;MACnBH,SAAS,CAACF,QAAQ,CAACK,KAAK,CAAC;MACzBL,QAAQ,GAAGK,KAAK,CAAC;IACnB,CAAE;IACFb,SAAS,EAAEA,SAAU;IACrBO,KAAK,EAAE,CAACA,KAAK,EAAEG,SAAS,CAACI,aAAa,CAAE;IAAAR,QAAA,EAEvCA;EAAQ,CACI,CAAC;AAEpB;AAEAP,eAAe,CAACgB,WAAW,GAAG,iBAAiB","ignoreList":[]}

package/lib/module/primitives/scroll-progress.js

@@ -0,0 +1,114 @@
+"use strict";
+
+/**
+ * ScrollProgress — publishes a scroll container's position so children can
+ * animate against it.
+ *
+ * Scroll-driven effects all need the same two numbers: where the scroller is,
+ * and how tall its viewport is. Every component that wanted them measuring for
+ * itself would mean one scroll listener per effect and one measurement pass per
+ * effect per frame, for two values that are the same for all of them.
+ *
+ * It wraps the scroll view you already have rather than replacing it — the
+ * child is cloned with an animated scroll handler composed onto it, the same
+ * way `ScrollFade` does — so a `FlatList`, a `SectionList` or your own
+ * scrollable all work, and nothing has to be rewritten to adopt it.
+ *
+ * ```tsx
+ * <ScrollProgress>
+ *   <ScrollView>
+ *     <ScrollText>…</ScrollText>
+ *   </ScrollView>
+ * </ScrollProgress>
+ * ```
+ *
+ * Both values are shared values, so the whole chain from scroll event to
+ * animated style stays on the UI thread and nothing re-renders as you scroll.
+ */
+import { Children, createContext, isValidElement, useContext, useMemo, useRef } from 'react';
+import { View } from 'react-native';
+import Animated, { useAnimatedScrollHandler, useComposedEventHandler, useSharedValue } from 'react-native-reanimated';
+import { jsx as _jsx } from "react/jsx-runtime";
+const ScrollProgressContext = /*#__PURE__*/createContext(null);
+
+/**
+ * The nearest enclosing scroll container's position, or `null` outside one.
+ *
+ * It returns null rather than throwing because every consumer of this also
+ * takes an explicit `progress` prop — a component that can be driven by hand
+ * should not insist on a provider it does not need.
+ */
+export function useScrollProgress() {
+  return useContext(ScrollProgressContext);
+}
+export function ScrollProgress({
+  className,
+  children,
+  ...props
+}) {
+  const offset = useSharedValue(0);
+  const viewport = useSharedValue(0);
+  const content = useSharedValue(0);
+  const top = useSharedValue(0);
+  const hostRef = useRef(null);
+  const child = Children.only(children);
+
+  // Reanimated can only drive a scroll handler on an animated component, and
+  // what was passed in is not necessarily `Animated.ScrollView`. Keyed on the
+  // element *type*, not the element: rebuilding the wrapper would remount the
+  // list and lose its scroll position.
+  const childType = /*#__PURE__*/isValidElement(child) ? child.type : null;
+  const AnimatedScrollable = useMemo(() => childType ? Animated.createAnimatedComponent(childType) : null, [childType]);
+  const scrollHandler = useAnimatedScrollHandler({
+    onScroll: event => {
+      offset.value = event.contentOffset.y;
+      viewport.value = event.layoutMeasurement.height;
+      content.value = event.contentSize.height;
+    }
+  });
+
+  // A consumer's own `onScroll` is composed rather than dropped — but since the
+  // child is now an animated component, it has to be an animated handler too.
+  const onScroll = useComposedEventHandler([scrollHandler, child.props.onScroll ?? null]);
+
+  // Taken up front as well as on scroll, so anything already on screen animates
+  // from the first frame instead of waiting for the first scroll event.
+  const onLayout = event => {
+    viewport.value = event.nativeEvent.layout.height;
+    // A frame later than onLayout on both platforms, because measureInWindow
+    // is only meaningful once the view is attached and positioned.
+    requestAnimationFrame(() => {
+      hostRef.current?.measureInWindow((_x, y) => {
+        if (y >= 0) top.value = y;
+      });
+    });
+    child.props.onLayout?.(event);
+  };
+  const onContentSizeChange = (width, height) => {
+    content.value = height;
+    child.props.onContentSizeChange?.(width, height);
+  };
+  const value = useMemo(() => ({
+    offset,
+    viewport,
+    content,
+    top
+  }), [offset, viewport, content, top]);
+  return /*#__PURE__*/_jsx(ScrollProgressContext.Provider, {
+    value: value,
+    children: /*#__PURE__*/_jsx(View, {
+      ...props,
+      ref: hostRef,
+      className: className,
+      children: AnimatedScrollable && /*#__PURE__*/isValidElement(child) ? /*#__PURE__*/_jsx(AnimatedScrollable, {
+        ...child.props,
+        onScroll: onScroll,
+        onLayout: onLayout,
+        onContentSizeChange: onContentSizeChange,
+        scrollEventThrottle: child.props.scrollEventThrottle ?? 16
+      }) : child
+    })
+  });
+}
+ScrollProgress.displayName = 'ScrollProgress';
+//# sourceMappingURL=scroll-progress.js.map

package/lib/module/primitives/scroll-progress.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Children","createContext","isValidElement","useContext","useMemo","useRef","View","Animated","useAnimatedScrollHandler","useComposedEventHandler","useSharedValue","jsx","_jsx","ScrollProgressContext","useScrollProgress","ScrollProgress","className","children","props","offset","viewport","content","top","hostRef","child","only","childType","type","AnimatedScrollable","createAnimatedComponent","scrollHandler","onScroll","event","value","contentOffset","y","layoutMeasurement","height","contentSize","onLayout","nativeEvent","layout","requestAnimationFrame","current","measureInWindow","_x","onContentSizeChange","width","Provider","ref","scrollEventThrottle","displayName"],"sourceRoot":"../../../src","sources":["primitives/scroll-progress.tsx"],"mappings":"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","ignoreList":[]}

package/lib/typescript/src/components/button/index.d.ts

@@ -220,10 +220,9 @@ export interface ButtonProps extends Omit<AnimatedPressableProps, 'children' | '
      * `primary`/`destructive` → filled, `outline` → outlined, everything else
      * → text; `size` sets the height.
      *
-     * A native button **fills the width it is given**, because the host is told
-     * its size rather than left to measure the platform's content — which is
-     * what made it collapse and then jump on first press. Put it in a row to
-     * share the width, or in a narrower parent to shrink it.
+     * A native button **sizes itself to its label**, the way a platform button
+     * is supposed to. It does not stretch to fill its container, and `fullWidth`
+     * has no effect on it.
      */
     native?: boolean;
 }

package/lib/typescript/src/components/button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE1D,OAAO,EAEL,KAAK,sBAAsB,EAC5B,MAAM,wCAAqC,CAAC;AAM7C,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;QAiCd,6EAA6E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAA7E,6EAA6E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAA7E,6EAA6E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAwBjF,CAAC;AAEH,KAAK,kBAAkB,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC;AAsB9D,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,sBAAsB,EAAE,UAAU,GAAG,UAAU,CAAC,EAC3D,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC;IACtC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qEAAqE;IACrE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iFAAiF;IACjF,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,wCAAwC;IACxC,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,6DAA6D;IAC7D,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;;;;;;;;;;;OAcG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AA+BD,eAAO,MAAM,MAAM,8FA4FlB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE1D,OAAO,EAEL,KAAK,sBAAsB,EAC5B,MAAM,wCAAqC,CAAC;AAM7C,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;QAiCd,6EAA6E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAA7E,6EAA6E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAA7E,6EAA6E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAwBjF,CAAC;AAEH,KAAK,kBAAkB,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC;AAsB9D,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,sBAAsB,EAAE,UAAU,GAAG,UAAU,CAAC,EAC3D,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC;IACtC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qEAAqE;IACrE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iFAAiF;IACjF,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,wCAAwC;IACxC,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,6DAA6D;IAC7D,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;;;;;;;;;;OAaG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAiCD,eAAO,MAAM,MAAM,8FA6FlB,CAAC"}

package/lib/typescript/src/components/chip/index.d.ts

@@ -0,0 +1,304 @@
+/**
+ * Chip — a compact, interactive token.
+ *
+ * Where Badge only shows and ToggleButton owns a stateful toolbar, Chip is the
+ * thing in between: a small pill you can *press*, mark as *selected*, or
+ * *remove*. It is the filter in a filter bar, the tag on a photo, the removable
+ * recipient in a "To:" field — small, dense, and touchable.
+ *
+ * The close button is its own hit target nested inside the pill, so tapping the
+ * ✕ removes the chip without also firing the chip's own `onPress`. That split
+ * is the whole reason a removable chip needs a component and not just a styled
+ * Badge.
+ *
+ * ```tsx
+ * <Chip>Design</Chip>
+ *
+ * <Chip variant="info" onClose={() => remove('design')}>Design</Chip>
+ *
+ * <Chip selected={on} onPress={() => setOn(!on)}>
+ *   <CheckIcon size={14} />
+ *   <Chip.Label>Available</Chip.Label>
+ * </Chip>
+ * ```
+ */
+import { type ReactNode } from 'react';
+import { View } from 'react-native';
+import { type VariantProps } from 'tailwind-variants';
+import { type AnimatedPressableProps } from '../../primitives/animated-pressable.js';
+declare const chipVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        /** The resting tag — a quiet neutral fill. */
+        default: {
+            root: string;
+            label: string;
+        };
+        /** The accent fill, for the one chip that leads. */
+        primary: {
+            root: string;
+            label: string;
+        };
+        /** Just an outline — the lightest a chip gets while still being a shape. */
+        outline: {
+            root: string;
+            label: string;
+        };
+        success: {
+            root: string;
+            label: string;
+        };
+        warning: {
+            root: string;
+            label: string;
+        };
+        info: {
+            root: string;
+            label: string;
+        };
+        destructive: {
+            root: string;
+            label: string;
+        };
+    };
+    size: {
+        sm: {
+            root: string;
+            label: string;
+        };
+        md: {
+            root: string;
+            label: string;
+        };
+        lg: {
+            root: string;
+            label: string;
+        };
+    };
+    /**
+     * The filter "on" state — a loud accent surface that wins over the resting
+     * variant, so any chip can be a filter without picking a second colour.
+     */
+    selected: {
+        true: {
+            root: string;
+            label: string;
+        };
+    };
+    /** Trims the trailing padding so the close target hugs the right edge. */
+    closable: {
+        true: {
+            root: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    label: string;
+    close: string;
+}, undefined, {
+    variant: {
+        /** The resting tag — a quiet neutral fill. */
+        default: {
+            root: string;
+            label: string;
+        };
+        /** The accent fill, for the one chip that leads. */
+        primary: {
+            root: string;
+            label: string;
+        };
+        /** Just an outline — the lightest a chip gets while still being a shape. */
+        outline: {
+            root: string;
+            label: string;
+        };
+        success: {
+            root: string;
+            label: string;
+        };
+        warning: {
+            root: string;
+            label: string;
+        };
+        info: {
+            root: string;
+            label: string;
+        };
+        destructive: {
+            root: string;
+            label: string;
+        };
+    };
+    size: {
+        sm: {
+            root: string;
+            label: string;
+        };
+        md: {
+            root: string;
+            label: string;
+        };
+        lg: {
+            root: string;
+            label: string;
+        };
+    };
+    /**
+     * The filter "on" state — a loud accent surface that wins over the resting
+     * variant, so any chip can be a filter without picking a second colour.
+     */
+    selected: {
+        true: {
+            root: string;
+            label: string;
+        };
+    };
+    /** Trims the trailing padding so the close target hugs the right edge. */
+    closable: {
+        true: {
+            root: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    label: string;
+    close: string;
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        /** The resting tag — a quiet neutral fill. */
+        default: {
+            root: string;
+            label: string;
+        };
+        /** The accent fill, for the one chip that leads. */
+        primary: {
+            root: string;
+            label: string;
+        };
+        /** Just an outline — the lightest a chip gets while still being a shape. */
+        outline: {
+            root: string;
+            label: string;
+        };
+        success: {
+            root: string;
+            label: string;
+        };
+        warning: {
+            root: string;
+            label: string;
+        };
+        info: {
+            root: string;
+            label: string;
+        };
+        destructive: {
+            root: string;
+            label: string;
+        };
+    };
+    size: {
+        sm: {
+            root: string;
+            label: string;
+        };
+        md: {
+            root: string;
+            label: string;
+        };
+        lg: {
+            root: string;
+            label: string;
+        };
+    };
+    /**
+     * The filter "on" state — a loud accent surface that wins over the resting
+     * variant, so any chip can be a filter without picking a second colour.
+     */
+    selected: {
+        true: {
+            root: string;
+            label: string;
+        };
+    };
+    /** Trims the trailing padding so the close target hugs the right edge. */
+    closable: {
+        true: {
+            root: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    label: string;
+    close: string;
+}, undefined, unknown, unknown, undefined>>;
+type ChipVariantProps = VariantProps<typeof chipVariants>;
+export type ChipVariant = NonNullable<ChipVariantProps['variant']>;
+export type ChipSize = NonNullable<ChipVariantProps['size']>;
+interface ChipStateValue {
+    selected: boolean;
+    disabled: boolean;
+}
+/**
+ * The chip's own state, for anything rendered inside it — an icon that swaps
+ * when the chip is selected, a count that only shows when it is on.
+ */
+export declare function useChip(): ChipStateValue;
+export interface ChipProps extends Omit<AnimatedPressableProps, 'children' | 'disabled'>, Omit<ChipVariantProps, 'selected' | 'disabled' | 'closable'> {
+    children?: ReactNode;
+    className?: string;
+    /** Extra classes for the label when `children` is a string. */
+    labelClassName?: string;
+    /**
+     * The filter "on" state. Setting it (even to `false`) makes the chip a
+     * toggle, announced as such — pair it with `onPress` to flip it.
+     */
+    selected?: boolean;
+    disabled?: boolean;
+    /** A leading icon or avatar, before the label. */
+    start?: ReactNode;
+    /**
+     * Shows a trailing ✕ and calls this when it is pressed. The ✕ is its own hit
+     * target, so removing a chip never also fires its `onPress`.
+     */
+    onClose?: () => void;
+    /** Accessibility label for the ✕. Defaults to "Remove". */
+    closeLabel?: string;
+    /**
+     * A tick under the finger when the chip is pressed or removed. Off by
+     * default — needs the optional `expo-haptics`, and is silent without it.
+     */
+    haptics?: boolean;
+}
+export interface ChipLabelProps {
+    className?: string;
+    children: ReactNode;
+}
+/**
+ * The label, when the chip holds more than a string — an icon beside text. It
+ * reads the selected state itself, so composing the two does not mean threading
+ * the colour through by hand.
+ */
+declare function ChipLabel({ className, children }: ChipLabelProps): import("react").JSX.Element;
+declare namespace ChipLabel {
+    var displayName: string;
+}
+export declare const Chip: import("react").ForwardRefExoticComponent<ChipProps & import("react").RefAttributes<View>> & {
+    Label: typeof ChipLabel;
+};
+export {};
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/components/chip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/chip/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAAa,IAAI,EAAkB,MAAM,cAAc,CAAC;AAC/D,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAG1D,OAAO,EAEL,KAAK,sBAAsB,EAC5B,MAAM,wCAAqC,CAAC;AAK7C,QAAA,MAAM,YAAY;;QASZ,8CAA8C;;;;;QAE9C,oDAAoD;;;;;QAEpD,4EAA4E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAqB9E;;;OAGG;;;;;;;IAOH,0EAA0E;;;;;;;;;;;;;;;;;QAnCxE,8CAA8C;;;;;QAE9C,oDAAoD;;;;;QAEpD,4EAA4E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAqB9E;;;OAGG;;;;;;;IAOH,0EAA0E;;;;;;;;;;;;;;;;;QAnCxE,8CAA8C;;;;;QAE9C,oDAAoD;;;;;QAEpD,4EAA4E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAqB9E;;;OAGG;;;;;;;IAOH,0EAA0E;;;;;;;;;;;;;;;2CAiB5E,CAAC;AAEH,KAAK,gBAAgB,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC;AAC1D,MAAM,MAAM,WAAW,GAAG,WAAW,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC,CAAC;AACnE,MAAM,MAAM,QAAQ,GAAG,WAAW,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,CAAC;AAoB7D,UAAU,cAAc;IACtB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;CACnB;AASD;;;GAGG;AACH,wBAAgB,OAAO,IAAI,cAAc,CAMxC;AAMD,MAAM,WAAW,SACf,SAAQ,IAAI,CAAC,sBAAsB,EAAE,UAAU,GAAG,UAAU,CAAC,EAC3D,IAAI,CAAC,gBAAgB,EAAE,UAAU,GAAG,UAAU,GAAG,UAAU,CAAC;IAC9D,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+DAA+D;IAC/D,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kDAAkD;IAClD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,2DAA2D;IAC3D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AA+HD,MAAM,WAAW,cAAc;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;GAIG;AACH,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,cAAc,+BAMzD;kBANQ,SAAS;;;AASlB,eAAO,MAAM,IAAI;;CAEf,CAAC"}

package/lib/typescript/src/components/frame/index.d.ts

@@ -1,23 +1,29 @@
 /**
- * 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.
+ * Frame — a widget shell: a card of rows sitting in a tray, with the tray's
+ * one exposed strip along the top carrying the title.
  *
- * 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.
+ * The two surfaces are nested rather than stacked, and only one edge of the
+ * outer one is ever visible. The panel is flush to the shell's left, right and
+ * bottom, so the shell reads as something the card is *sitting in* rather than
+ * as a border around it — and the strip left at the top is the header, which
+ * is why the header needs no rule under it and no background of its own.
+ *
+ * The shell's radius is the larger of the two, and the panel's top corners are
+ * tighter. That is the reverse of the usual nested-radius rule, and it is
+ * deliberate: with only the top corners free, matching them would make the two
+ * surfaces read as one misdrawn shape. The panel's bottom corners are not set
+ * at all — the shell clips them, so they take its radius exactly.
  *
  * ```tsx
  * <Frame>
  *   <Frame.Header>
- *     <Frame.Title>Usage Type</Frame.Title>
- *     <Frame.Action>Amount</Frame.Action>
+ *     <Frame.Title>Agent monitor</Frame.Title>
+ *     <Frame.Action>All agents under 25% token limit</Frame.Action>
  *   </Frame.Header>
  *   <Frame.Panel>
  *     <Frame.Row>…</Frame.Row>
  *     <Frame.Row>…</Frame.Row>
  *   </Frame.Panel>
- *   <Frame.Footer>Updated 2 minutes ago</Frame.Footer>
  * </Frame>
  * ```
  *
@@ -78,9 +84,6 @@ export interface FrameSectionProps extends FrameProps, Dividable {
     divided?: boolean;
     children?: ReactNode;
 }
-export interface FrameFooterProps extends FrameProps {
-    children?: ReactNode;
-}
 export declare const Frame: import("react").ForwardRefExoticComponent<FrameRootProps & import("react").RefAttributes<View>> & {
     Header: import("react").ForwardRefExoticComponent<FrameHeaderProps & import("react").RefAttributes<View>>;
     Title: import("react").ForwardRefExoticComponent<TextProps & import("react").RefAttributes<RNText>>;
@@ -89,7 +92,6 @@ export declare const Frame: import("react").ForwardRefExoticComponent<FrameRootP
     Panel: import("react").ForwardRefExoticComponent<FramePanelProps & import("react").RefAttributes<View>>;
     Section: import("react").ForwardRefExoticComponent<FrameSectionProps & import("react").RefAttributes<View>>;
     Row: import("react").ForwardRefExoticComponent<FrameRowProps & import("react").RefAttributes<View>>;
-    Footer: import("react").ForwardRefExoticComponent<FrameFooterProps & import("react").RefAttributes<View>>;
 };
 export {};
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/components/frame/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/frame/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,OAAO,EAAsD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3F,OAAO,EAEL,IAAI,EACJ,KAAK,cAAc,EACnB,KAAK,IAAI,IAAI,MAAM,EACnB,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,0BAAuB,CAAC;AAsB7D,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,OAAO,CAAC;AAE/C,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,cAAe,SAAQ,UAAU;IAChD;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AASD,MAAM,WAAW,gBAAiB,SAAQ,UAAU;IAClD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA+BD,MAAM,WAAW,gBAAiB,SAAQ,UAAU;IAClD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA6BD;;;;GAIG;AACH,UAAU,SAAS;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAkBD,MAAM,WAAW,eAAgB,SAAQ,UAAU;IACjD;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAeD,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,cAAc,EAAE,UAAU,CAAC,EAAE,SAAS;IAChF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6DAA6D;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA8CD,MAAM,WAAW,iBAAkB,SAAQ,UAAU,EAAE,SAAS;IAC9D,2DAA2D;IAC3D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAkCD,MAAM,WAAW,gBAAiB,SAAQ,UAAU;IAClD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAsBD,eAAO,MAAM,KAAK;;;;;;;;;CAShB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/frame/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,OAAO,EAAsD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3F,OAAO,EAEL,IAAI,EACJ,KAAK,cAAc,EACnB,KAAK,IAAI,IAAI,MAAM,EACnB,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,0BAAuB,CAAC;AA+B7D,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,OAAO,CAAC;AAE/C,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,cAAe,SAAQ,UAAU;IAChD;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AASD,MAAM,WAAW,gBAAiB,SAAQ,UAAU;IAClD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA8BD,MAAM,WAAW,gBAAiB,SAAQ,UAAU;IAClD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA6BD;;;;GAIG;AACH,UAAU,SAAS;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAkBD,MAAM,WAAW,eAAgB,SAAQ,UAAU;IACjD;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAeD,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,cAAc,EAAE,UAAU,CAAC,EAAE,SAAS;IAChF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6DAA6D;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA8CD,MAAM,WAAW,iBAAkB,SAAQ,UAAU,EAAE,SAAS;IAC9D,2DAA2D;IAC3D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAkCD,eAAO,MAAM,KAAK;;;;;;;;CAQhB,CAAC"}