pixelize-native-library 1.2.0 → 1.3.0

package/lib/module/core/motion/usePressState.js

@@ -0,0 +1,140 @@
+"use strict";
+
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Easing } from 'react-native';
+import { ReduceMotion, useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
+import { springs } from "../../theme/platform/motion.native.js";
+import { STATE_LAYER_OPACITY } from "../../theme/platform/stateLayer.native.js";
+import { pressScaleFor, MOTION_TRANSFORM } from "./config.js";
+import { useMotion } from "./useMotion.js";
+const DEFAULT_WIDTH = 100;
+const PRESS_IN_MS = 100;
+export function usePressState(disabled = false) {
+  const motion = useMotion();
+  const [pressed, setPressed] = useState(false);
+  const [layoutWidth, setLayoutWidth] = useState(DEFAULT_WIDTH);
+  const measuredWidth = useSharedValue(DEFAULT_WIDTH);
+  const scale = useSharedValue(1);
+  const opacity = useSharedValue(1);
+  const overlayOpacity = useSharedValue(0);
+  const onLayout = useCallback(event => {
+    const width = event.nativeEvent.layout.width;
+    if (width > 0) {
+      measuredWidth.value = width;
+      setLayoutWidth(width);
+    }
+  }, [measuredWidth]);
+  const snapPressIn = useCallback(() => {
+    const targetScale = pressScaleFor(measuredWidth.value);
+    scale.value = targetScale;
+    opacity.value = MOTION_TRANSFORM.pressOpacity;
+    overlayOpacity.value = STATE_LAYER_OPACITY.pressed;
+  }, [measuredWidth, opacity, overlayOpacity, scale]);
+  const snapPressOut = useCallback(() => {
+    scale.value = 1;
+    opacity.value = 1;
+    overlayOpacity.value = 0;
+  }, [opacity, overlayOpacity, scale]);
+  const onPressIn = useCallback(() => {
+    if (disabled) return;
+    setPressed(true);
+    if (!motion.enabled) {
+      snapPressIn();
+      return;
+    }
+    const targetScale = pressScaleFor(measuredWidth.value);
+    scale.value = withTiming(targetScale, {
+      duration: PRESS_IN_MS,
+      easing: Easing.out(Easing.quad),
+      reduceMotion: ReduceMotion.System
+    });
+    opacity.value = withTiming(MOTION_TRANSFORM.pressOpacity, {
+      duration: PRESS_IN_MS,
+      easing: Easing.out(Easing.quad),
+      reduceMotion: ReduceMotion.System
+    });
+    overlayOpacity.value = withSpring(STATE_LAYER_OPACITY.pressed, {
+      ...springs.effectsFast,
+      reduceMotion: ReduceMotion.System
+    });
+  }, [disabled, motion.enabled, measuredWidth, opacity, overlayOpacity, scale, snapPressIn]);
+  const onPressOut = useCallback(() => {
+    if (disabled) return;
+    setPressed(false);
+    if (!motion.enabled) {
+      snapPressOut();
+      return;
+    }
+    scale.value = withSpring(1, {
+      ...springs.spatialFast,
+      reduceMotion: ReduceMotion.System
+    });
+    opacity.value = withSpring(1, {
+      ...springs.spatialFast,
+      reduceMotion: ReduceMotion.System
+    });
+    overlayOpacity.value = withSpring(0, {
+      ...springs.effectsFast,
+      reduceMotion: ReduceMotion.System
+    });
+  }, [disabled, motion.enabled, opacity, overlayOpacity, scale, snapPressOut]);
+  const reanimatedPressStyle = useAnimatedStyle(() => ({
+    transform: [{
+      scale: scale.value
+    }],
+    opacity: opacity.value
+  }));
+  const reanimatedOverlayStyle = useAnimatedStyle(() => ({
+    opacity: overlayOpacity.value
+  }));
+  const staticPressStyle = useMemo(() => ({
+    transform: [{
+      scale: pressed ? pressScaleFor(layoutWidth) : 1
+    }],
+    opacity: pressed ? MOTION_TRANSFORM.pressOpacity : 1
+  }), [layoutWidth, pressed]);
+  const staticOverlayStyle = useMemo(() => ({
+    opacity: pressed ? STATE_LAYER_OPACITY.pressed : 0
+  }), [pressed]);
+  const animatedStyle = motion.enabled ? reanimatedPressStyle : staticPressStyle;
+  const overlayStyle = motion.enabled ? reanimatedOverlayStyle : staticOverlayStyle;
+  const handlers = useMemo(() => ({
+    onPressIn,
+    onPressOut,
+    onLayout
+  }), [onPressIn, onPressOut, onLayout]);
+  return {
+    pressed,
+    animatedStyle,
+    overlayStyle,
+    handlers,
+    onLayout
+  };
+}
+export function useFocusRing(focused, disabled = false) {
+  const motion = useMotion();
+  const focusOpacity = useSharedValue(0);
+  const animateFocus = useCallback(isFocused => {
+    if (disabled) return;
+    const target = isFocused ? STATE_LAYER_OPACITY.focus : 0;
+    if (!motion.enabled || target === 0) {
+      focusOpacity.value = target;
+      return;
+    }
+    focusOpacity.value = withSpring(target, {
+      ...springs.effectsFast,
+      reduceMotion: ReduceMotion.System
+    });
+  }, [disabled, focusOpacity, motion.enabled]);
+  useEffect(() => {
+    animateFocus(focused);
+  }, [focused, animateFocus]);
+  const focusRingStyle = useAnimatedStyle(() => ({
+    opacity: focusOpacity.value
+  }));
+  return {
+    focusRingStyle,
+    animateFocus
+  };
+}
+//# sourceMappingURL=usePressState.js.map

package/lib/module/core/overlay/MODULE.md

@@ -0,0 +1,17 @@
+# overlay/ — web portal containment for sheets and modals
+
+`ModalPortalContext` and `renderWebPortal` let an overlay render into a consumer-supplied DOM node
+on web instead of `document.body` — `Modal`, `Drawer`, `Select`, `Menu`, `Combobox`, `MultiSelect`,
+`OrgSwitcher` and `date-picker`'s shell all read them. Native builds use RN's `<Modal>`.
+
+## Files
+
+| File | Role |
+|------|------|
+| `ModalPortalContext.ts` | React context holding the portal container (`unknown` — DOM only on web). |
+| `renderWebPortal.ts` | Native/Jest stub returning `null`. |
+| `renderWebPortal.web.ts` | `ReactDOM.createPortal` implementation. |
+
+`ModalPortalProvider` lives in `modules/modal/` — it is the public opt-in wrapper. `modules/modal`
+also carries `ModalPortalContext.ts` / `renderWebPortal{,.web}.ts` as one-line re-export shims of
+these files, so the context object is shared, not duplicated.

package/lib/module/core/overlay/ModalPortalContext.js

@@ -0,0 +1,8 @@
+"use strict";
+
+/**
+ * Web-only portal container for overlay sheets. See `core/overlay/MODULE.md`.
+ */
+import { createContext } from "react";
+export const ModalPortalContext = /*#__PURE__*/createContext(null);
+//# sourceMappingURL=ModalPortalContext.js.map

package/lib/module/core/overlay/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+export { ModalPortalContext } from "./ModalPortalContext.js";
+export { renderWebPortal } from "./renderWebPortal";
+//# sourceMappingURL=index.js.map

package/lib/module/core/overlay/renderWebPortal.js

@@ -0,0 +1,6 @@
+"use strict";
+
+export function renderWebPortal(_children, _container) {
+  return null;
+}
+//# sourceMappingURL=renderWebPortal.js.map

package/lib/module/core/overlay/renderWebPortal.web.js

@@ -0,0 +1,8 @@
+"use strict";
+
+import { createPortal } from "react-dom";
+export function renderWebPortal(children, container) {
+  if (container == null) return null;
+  return /*#__PURE__*/createPortal(children, container);
+}
+//# sourceMappingURL=renderWebPortal.web.js.map

package/lib/module/core/screen-scroll/ScreenScrollContext.js

@@ -0,0 +1,9 @@
+"use strict";
+
+import { createContext, useContext } from 'react';
+const ScreenScrollContext = /*#__PURE__*/createContext(null);
+export function useScreenScrollY() {
+  return useContext(ScreenScrollContext)?.scrollY ?? null;
+}
+export { ScreenScrollContext };
+//# sourceMappingURL=ScreenScrollContext.js.map

package/lib/module/core/screen-scroll/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { ScreenScrollContext, useScreenScrollY } from "./ScreenScrollContext.js";
+//# sourceMappingURL=index.js.map

package/lib/module/core/slot/MODULE.md

@@ -0,0 +1,9 @@
+# slot/ — bare text inside View-like hosts
+
+Internal helper for `ReactNode` props rendered inside `View`-like hosts.
+
+## `renderNodeSlot(node, style)`
+
+Returns `node` unchanged unless it is a `string` or `number`, in which case it returns `<Text
+style={style}>{node}</Text>`. Not exported from the package root barrel — modules import
+`../../core/slot`.

package/lib/module/core/slot/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { renderNodeSlot } from "./nodeSlot.js";
+//# sourceMappingURL=index.js.map

package/lib/module/core/slot/nodeSlot.js

@@ -0,0 +1,21 @@
+"use strict";
+
+import { Children } from "react";
+import { Text } from "react-native";
+
+/** `ReactNode` allows primitives; RN cannot host a bare text node outside `Text`. */
+import { jsx as _jsx } from "react/jsx-runtime";
+export function renderNodeSlot(node, style) {
+  if (typeof node === "string" || typeof node === "number") {
+    return /*#__PURE__*/_jsx(Text, {
+      style: style,
+      children: node
+    });
+  }
+  // A `children` slot arrives as an array, so the primitives sit one level down.
+  if (Array.isArray(node)) {
+    return Children.map(node, child => renderNodeSlot(child, style));
+  }
+  return node;
+}
+//# sourceMappingURL=nodeSlot.js.map

package/lib/module/core/style/focusRing.js

@@ -0,0 +1,37 @@
+"use strict";
+
+/** Gap between control edge and focus ring — matches Button/Input offset rings. */
+export const FOCUS_RING_WIDTH = 2;
+export const FOCUS_RING_GAP = 2;
+
+/** Outset focus ring on the canvas (WCAG 2.4.11 uses `border.focus` against canvas). */
+export function focusRingOutsetStyle(theme, borderRadius) {
+  const offset = FOCUS_RING_GAP + FOCUS_RING_WIDTH;
+  return {
+    position: "absolute",
+    top: -offset,
+    left: -offset,
+    right: -offset,
+    bottom: -offset,
+    borderWidth: FOCUS_RING_WIDTH,
+    borderColor: theme.colors.border.focus,
+    borderRadius: borderRadius + offset,
+    borderCurve: "continuous"
+  };
+}
+
+/** Inset ring drawn inside the control bounds (tabs, table cells, stage pills). */
+export function focusRingInsetStyle(theme, borderRadius, borderWidth) {
+  return {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderWidth: borderWidth ?? theme.borderWidths.thick,
+    borderColor: theme.colors.border.focus,
+    borderRadius,
+    borderCurve: "continuous"
+  };
+}
+//# sourceMappingURL=focusRing.js.map

package/lib/module/core/style/index.js

@@ -1,6 +1,7 @@
 "use strict";
 
+export { concentric } from "./radius.js";
 export { sx } from "./sx.js";
-export { useThemedStyles } from "./useThemedStyles.js";
+export { FOCUS_RING_GAP, FOCUS_RING_WIDTH, focusRingInsetStyle, focusRingOutsetStyle } from "./focusRing.js";
 export { createVariants, createTextVariants, createThemedVariants, createThemedTextVariants, variantFactory, themedVariantFactory } from "./variants.js";
 //# sourceMappingURL=index.js.map

package/lib/module/core/style/radius.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export const concentric = (outer, padding, floor = 4) => Math.max(floor, outer - padding);
+//# sourceMappingURL=radius.js.map

package/lib/module/index.js

@@ -3,7 +3,7 @@
 /**
  * Import-only barrel. LIGHT primitives only.
  *
- * Heavy modules (charts, date-picker, table, editor) are deliberately ABSENT here and reachable
+ * Heavy modules (charts, date-picker, table, editor, bottom-nav, filter-sheet, reorder, …) are deliberately ABSENT here and reachable
  * only via their subpath — so a lazy barrel import cannot drag a chart engine into an app's
  * bundle, even with every optimizer turned off.
  *
@@ -16,12 +16,15 @@
 export { Accordion } from "./modules/accordion/index.js";
 export { AlertDialog } from "./modules/alert-dialog/index.js";
 export { AppBar } from "./modules/app-bar/index.js";
+export { AppSwitcher } from "./modules/app-switcher/index.js";
+export { AppearanceSettings } from "./modules/appearance-settings/index.js";
 export { Avatar } from "./modules/avatar/index.js";
 export { AvatarGroup } from "./modules/avatar-group/index.js";
+export { Backdrop } from "./modules/backdrop/index.js";
 export { Badge } from "./modules/badge/index.js";
 export { Banner } from "./modules/banner/index.js";
-export { BottomNav } from "./modules/bottom-nav/index.js";
 export { BottomSheet } from "./modules/bottom-sheet/index.js";
+export { Breadcrumbs } from "./modules/breadcrumbs/index.js";
 export { Button } from "./modules/button/index.js";
 export { ButtonGroup } from "./modules/button-group/index.js";
 export { Card } from "./modules/card/index.js";
@@ -30,44 +33,57 @@ export { Chip, ChipGroup } from "./modules/chip/index.js";
 export { Combobox } from "./modules/combobox/index.js";
 export { Composer } from "./modules/composer/index.js";
 export { CopyButton } from "./modules/copy-button/index.js";
+export { DescriptionList } from "./modules/description-list/index.js";
 export { Divider } from "./modules/divider/index.js";
+export { DocumentViewer } from "./modules/document-viewer/index.js";
 export { Drawer } from "./modules/drawer/index.js";
 export { EmptyState } from "./modules/empty-state/index.js";
 export { Fab, FabGroup } from "./modules/fab/index.js";
+export { FieldSelectModal } from "./modules/field-select-modal/index.js";
 export { FileGrid } from "./modules/file-grid/index.js";
 export { FileUpload } from "./modules/file-upload/index.js";
-export { FilterSheet, FilterChip, countActiveFilters } from "./modules/filter-sheet/index.js";
+export { FilterBar } from "./modules/filter-bar/index.js";
 export { FolderRow } from "./modules/folder-row/index.js";
 export { FormField } from "./modules/form-field/index.js";
 export { Input } from "./modules/input/index.js";
+export { KeyValue } from "./modules/key-value/index.js";
 export { LimitReachedModal } from "./modules/limit-reached-modal/index.js";
 export { ListItem } from "./modules/list-item/index.js";
+export { ListScreen } from "./modules/list-screen/index.js";
 export { Markdown, parseMarkdown } from "./modules/markdown/index.js";
 export { Menu } from "./modules/menu/index.js";
 export { MessageBubble } from "./modules/message-bubble/index.js";
 export { Modal, ModalPortalProvider } from "./modules/modal/index.js";
 export { MoreItems } from "./modules/more-items/index.js";
 export { MultiSelect } from "./modules/multi-select/index.js";
+export { NotificationBell } from "./modules/notification-bell/index.js";
 export { NumberInput } from "./modules/number-input/index.js";
 export { OrgSwitcher } from "./modules/org-switcher/index.js";
 export { Pagination, buildPageRange, clampPage } from "./modules/pagination/index.js";
+export { PersonChip } from "./modules/person-chip/index.js";
 export { PinInput } from "./modules/pin-input/index.js";
+export { PlanBadge } from "./modules/plan-badge/index.js";
+export { PlanPill } from "./modules/plan-pill/index.js";
 export { ProgressBar } from "./modules/progress-bar/index.js";
 export { RadioGroup } from "./modules/radio-group/index.js";
-export { Reorder } from "./modules/reorder/index.js";
+export { SaveBar } from "./modules/save-bar/index.js";
 export { Screen } from "./modules/screen/index.js";
 export { SearchBar } from "./modules/search-bar/index.js";
 export { Section } from "./modules/section/index.js";
 export { SectionList } from "./modules/section-list/index.js";
 export { SegmentedControl } from "./modules/segmented-control/index.js";
 export { Select } from "./modules/select/index.js";
+export { SettingRow } from "./modules/setting-row/index.js";
+export { SettingsSection } from "./modules/settings-section/index.js";
 export { Skeleton } from "./modules/skeleton/index.js";
 export { Slider } from "./modules/slider/index.js";
 export { Spinner } from "./modules/spinner/index.js";
 export { StageProgress } from "./modules/stage-progress/index.js";
+export { StatGrid } from "./modules/stat-grid/index.js";
 export { StatTile } from "./modules/stat-tile/index.js";
 export { LoadingState, ErrorState } from "./modules/state-block/index.js";
 export { Stepper } from "./modules/stepper/index.js";
+export { Box, Surface } from "./modules/surface/index.js";
 export { SwipeableRow } from "./modules/swipeable-row/index.js";
 export { Switch } from "./modules/switch/index.js";
 export { Tabs } from "./modules/tabs/index.js";
@@ -78,4 +94,8 @@ export { ToastProvider, useToast } from "./modules/toast/index.js";
 export { Tooltip } from "./modules/tooltip/index.js";
 export { TypingIndicator } from "./modules/typing-indicator/index.js";
 export { UnreadBadge } from "./modules/unread-badge/index.js";
+export { UpgradeButton } from "./modules/upgrade-button/index.js";
+export { setHapticsModule, hasHapticsModule, getHapticsModule } from "./core/haptics/index.js";
+export { setBlurModule, hasBlurModule, getBlurModule } from "./core/blur/index.js";
+export { setDocumentPicker, setImagePicker, getDocumentPicker, getImagePicker, setExpoImage, getExpoImage, hasExpoImage } from "./core/media/index.js";
 //# sourceMappingURL=index.js.map