@bacon-pos/ui 0.2.1 → 0.3.0

package/lib/module/components/_internal/ScrollArea.js

@@ -0,0 +1,92 @@
+"use strict";
+
+import { useRef, useState } from 'react';
+import { Animated } from 'react-native';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ScrollView with an elegant custom vertical indicator: thin, rounded, colored,
+ * and only visible while scrolling (fades out when idle). The native indicator
+ * is hidden so it looks the same on iOS, Android and web.
+ */
+export function ScrollArea({
+  children,
+  indicatorColor,
+  indicatorWidth = 4,
+  keyboardShouldPersistTaps,
+  keyboardDismissMode,
+  style,
+  contentContainerStyle
+}) {
+  const [viewportH, setViewportH] = useState(0);
+  const [contentH, setContentH] = useState(0);
+  const scrollY = useRef(new Animated.Value(0)).current;
+  const opacity = useRef(new Animated.Value(0)).current;
+  const hideTimer = useRef(null);
+  const scrollable = contentH > viewportH + 1;
+  const thumbH = scrollable ? Math.max(24, viewportH / contentH * viewportH) : 0;
+  const maxScroll = Math.max(1, contentH - viewportH);
+  const translateY = scrollY.interpolate({
+    inputRange: [0, maxScroll],
+    outputRange: [0, viewportH - thumbH],
+    extrapolate: 'clamp'
+  });
+  const reveal = () => {
+    Animated.timing(opacity, {
+      toValue: 1,
+      duration: 120,
+      useNativeDriver: true
+    }).start();
+    if (hideTimer.current) clearTimeout(hideTimer.current);
+    hideTimer.current = setTimeout(() => {
+      Animated.timing(opacity, {
+        toValue: 0,
+        duration: 400,
+        useNativeDriver: true
+      }).start();
+    }, 900);
+  };
+  return /*#__PURE__*/_jsxs(Animated.View, {
+    style: [{
+      position: 'relative'
+    }, style],
+    children: [/*#__PURE__*/_jsx(Animated.ScrollView, {
+      style: {
+        flexShrink: 1
+      },
+      contentContainerStyle: contentContainerStyle,
+      showsVerticalScrollIndicator: false,
+      scrollEventThrottle: 16,
+      keyboardShouldPersistTaps: keyboardShouldPersistTaps,
+      keyboardDismissMode: keyboardDismissMode,
+      onLayout: e => setViewportH(e.nativeEvent.layout.height),
+      onContentSizeChange: (_w, h) => setContentH(h),
+      onScroll: Animated.event([{
+        nativeEvent: {
+          contentOffset: {
+            y: scrollY
+          }
+        }
+      }], {
+        useNativeDriver: true,
+        listener: _e => reveal()
+      }),
+      children: children
+    }), scrollable ? /*#__PURE__*/_jsx(Animated.View, {
+      pointerEvents: "none",
+      style: {
+        position: 'absolute',
+        top: 0,
+        right: 2,
+        width: indicatorWidth,
+        height: thumbH,
+        borderRadius: indicatorWidth / 2,
+        backgroundColor: indicatorColor,
+        opacity,
+        transform: [{
+          translateY
+        }]
+      }
+    }) : null]
+  });
+}
+//# sourceMappingURL=ScrollArea.js.map

package/lib/module/components/_internal/ScrollArea.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useRef","useState","Animated","jsx","_jsx","jsxs","_jsxs","ScrollArea","children","indicatorColor","indicatorWidth","keyboardShouldPersistTaps","keyboardDismissMode","style","contentContainerStyle","viewportH","setViewportH","contentH","setContentH","scrollY","Value","current","opacity","hideTimer","scrollable","thumbH","Math","max","maxScroll","translateY","interpolate","inputRange","outputRange","extrapolate","reveal","timing","toValue","duration","useNativeDriver","start","clearTimeout","setTimeout","View","position","ScrollView","flexShrink","showsVerticalScrollIndicator","scrollEventThrottle","onLayout","e","nativeEvent","layout","height","onContentSizeChange","_w","h","onScroll","event","contentOffset","y","listener","_e","pointerEvents","top","right","width","borderRadius","backgroundColor","transform"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/_internal/ScrollArea.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/index.js

@@ -8,6 +8,7 @@ export * from "./Checkbox/index.js";
 export * from "./Chip/index.js";
 export * from "./CodeField/index.js";
 export * from "./CodeInput/index.js";
+export * from "./Dialog/index.js";
 export * from "./Icon/index.js";
 export * from "./IconButton/index.js";
 export * from "./Input/index.js";

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

@@ -1 +1 @@
-{"version":3,"names":[],"sourceRoot":"..\\..\\..\\src","sources":["components/index.ts"],"mappings":";;AAAA,cAAc,mBAAU;AACxB,cAAc,kBAAS;AACvB,cAAc,mBAAU;AACxB,cAAc,iBAAQ;AACtB,cAAc,qBAAY;AAC1B,cAAc,iBAAQ;AACtB,cAAc,sBAAa;AAC3B,cAAc,sBAAa;AAC3B,cAAc,iBAAQ;AACtB,cAAc,uBAAc;AAC5B,cAAc,kBAAS;AACvB,cAAc,uBAAc;AAC5B,cAAc,wBAAe;AAC7B,cAAc,4BAAmB;AACjC,cAAc,kBAAS;AACvB,cAAc,oBAAW;AACzB,cAAc,oBAAW;AACzB,cAAc,mBAAU;AACxB,cAAc,iBAAQ","ignoreList":[]}
+{"version":3,"names":[],"sourceRoot":"..\\..\\..\\src","sources":["components/index.ts"],"mappings":";;AAAA,cAAc,mBAAU;AACxB,cAAc,kBAAS;AACvB,cAAc,mBAAU;AACxB,cAAc,iBAAQ;AACtB,cAAc,qBAAY;AAC1B,cAAc,iBAAQ;AACtB,cAAc,sBAAa;AAC3B,cAAc,sBAAa;AAC3B,cAAc,mBAAU;AACxB,cAAc,iBAAQ;AACtB,cAAc,uBAAc;AAC5B,cAAc,kBAAS;AACvB,cAAc,uBAAc;AAC5B,cAAc,wBAAe;AAC7B,cAAc,4BAAmB;AACjC,cAAc,kBAAS;AACvB,cAAc,oBAAW;AACzB,cAAc,oBAAW;AACzB,cAAc,mBAAU;AACxB,cAAc,iBAAQ","ignoreList":[]}

package/lib/typescript/commonjs/components/Dialog/Dialog.d.ts

@@ -0,0 +1,75 @@
+import { type ReactNode } from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import { type ButtonVariant } from '../Button/Button';
+export interface DialogAction {
+    label: string;
+    onPress?: () => void;
+    /** Button variant. Defaults to `default` (lime). Pass another for other colors. */
+    variant?: ButtonVariant;
+    loading?: boolean;
+    disabled?: boolean;
+}
+export interface DialogCancelConfig {
+    /** Cancel label. Defaults to "Cancel". */
+    label?: string;
+    /** Handler. Defaults to `onClose`. */
+    onPress?: () => void;
+    /** Use the destructive style (subtle red) instead of the neutral secondary. */
+    destructive?: boolean;
+}
+export interface DialogProps {
+    /** Whether the dialog is shown. */
+    visible: boolean;
+    /** Called on backdrop press, close button, or Android back. */
+    onClose: () => void;
+    /** Required title. */
+    title: string;
+    /** Optional subtitle. */
+    subtitle?: string;
+    /** Any content — from text to a full form. */
+    children?: ReactNode;
+    /** Primary/secondary action buttons (right side). Keep total buttons ≤ 3. */
+    actions?: DialogAction[];
+    /** Optional cancel button (left side). */
+    cancel?: DialogCancelConfig;
+    /** Show the top-right close (×). Defaults to true. */
+    showClose?: boolean;
+    /** Render the close (×) in the destructive color. */
+    closeDestructive?: boolean;
+    /** Dismiss when the backdrop (overlay) is pressed. Defaults to false. */
+    dismissOnBackdrop?: boolean;
+    /**
+     * `inner` (default): the card caps at the screen height and its content
+     * scrolls inside. `page`: the card grows to its content and the whole modal
+     * scrolls (nothing behind moves) — better for short screens.
+     */
+    scrollMode?: 'inner' | 'page';
+    /** Keep the header pinned while content scrolls (inner mode). Defaults to true. */
+    stickyHeader?: boolean;
+    /** Keep the footer pinned while content scrolls (inner mode). Defaults to true. */
+    stickyFooter?: boolean;
+    /** Inner padding. Defaults to 24. */
+    padding?: number;
+    /** Vertical space between header↔content and content↔footer. Defaults to 24. */
+    contentSpacing?: number;
+    /** Corner radius. Defaults to 24. */
+    radius?: number;
+    /** Max width of the dialog card. Defaults to 560. */
+    maxWidth?: number;
+    /** Fraction of screen height the card may occupy (inner mode). Defaults to 0.9. */
+    maxHeightRatio?: number;
+    /** Scroll indicator color (a design-system color). Defaults to a subtle neutral. */
+    scrollbarColor?: string;
+    /** Override the card style. */
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Dialog — an accessible, keyboard-aware modal that can hold anything from a
+ * short message to a full form (selects, date pickers, etc. keep working thanks
+ * to `keyboardShouldPersistTaps`). Content scrolls with an elegant thin,
+ * auto-hiding indicator. `scrollMode="page"` scrolls the whole modal on short
+ * screens instead of scrolling inside the card. Footer composes the
+ * design-system `Button`.
+ */
+export declare function Dialog({ visible, onClose, title, subtitle, children, actions, cancel, showClose, closeDestructive, dismissOnBackdrop, scrollMode, stickyHeader, stickyFooter, padding, contentSpacing, radius, maxWidth, maxHeightRatio, scrollbarColor, style, }: DialogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Dialog.d.ts.map

package/lib/typescript/commonjs/components/Dialog/Dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EASL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAU,KAAK,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAK9D,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mFAAmF;IACnF,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,kBAAkB;IACjC,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,+EAA+E;IAC/E,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,WAAW;IAC1B,mCAAmC;IACnC,OAAO,EAAE,OAAO,CAAC;IACjB,+DAA+D;IAC/D,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,yBAAyB;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,6EAA6E;IAC7E,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,sDAAsD;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qDAAqD;IACrD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,yEAAyE;IACzE,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC9B,mFAAmF;IACnF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,mFAAmF;IACnF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,qCAAqC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gFAAgF;IAChF,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,qCAAqC;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mFAAmF;IACnF,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oFAAoF;IACpF,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;;;;;GAOG;AACH,wBAAgB,MAAM,CAAC,EACrB,OAAO,EACP,OAAO,EACP,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,OAAY,EACZ,MAAM,EACN,SAAgB,EAChB,gBAAwB,EACxB,iBAAyB,EACzB,UAAoB,EACpB,YAAmB,EACnB,YAAmB,EACnB,OAAY,EACZ,cAAmB,EACnB,MAAW,EACX,QAAc,EACd,cAAoB,EACpB,cAAc,EACd,KAAK,GACN,EAAE,WAAW,2CA2Jb"}

package/lib/typescript/commonjs/components/Dialog/index.d.ts

@@ -0,0 +1,2 @@
+export { Dialog, type DialogProps, type DialogAction, type DialogCancelConfig, } from './Dialog';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/commonjs/components/Dialog/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EACN,KAAK,WAAW,EAChB,KAAK,YAAY,EACjB,KAAK,kBAAkB,GACxB,MAAM,UAAU,CAAC"}

package/lib/typescript/commonjs/components/_internal/ScrollArea.d.ts

@@ -0,0 +1,20 @@
+import { type ReactNode } from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+export interface ScrollAreaProps {
+    children: ReactNode;
+    /** Thin indicator color (a design-system color). */
+    indicatorColor: string;
+    /** Indicator thickness. Defaults to 4. */
+    indicatorWidth?: number;
+    keyboardShouldPersistTaps?: 'always' | 'never' | 'handled';
+    keyboardDismissMode?: 'none' | 'on-drag' | 'interactive';
+    style?: StyleProp<ViewStyle>;
+    contentContainerStyle?: StyleProp<ViewStyle>;
+}
+/**
+ * ScrollView with an elegant custom vertical indicator: thin, rounded, colored,
+ * and only visible while scrolling (fades out when idle). The native indicator
+ * is hidden so it looks the same on iOS, Android and web.
+ */
+export declare function ScrollArea({ children, indicatorColor, indicatorWidth, keyboardShouldPersistTaps, keyboardDismissMode, style, contentContainerStyle, }: ScrollAreaProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ScrollArea.d.ts.map

package/lib/typescript/commonjs/components/_internal/ScrollArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollArea.d.ts","sourceRoot":"","sources":["../../../../../src/components/_internal/ScrollArea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,SAAS,CAAC;IACpB,oDAAoD;IACpD,cAAc,EAAE,MAAM,CAAC;IACvB,0CAA0C;IAC1C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,yBAAyB,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;IAC3D,mBAAmB,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,aAAa,CAAC;IACzD,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,qBAAqB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9C;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,cAAc,EACd,cAAkB,EAClB,yBAAyB,EACzB,mBAAmB,EACnB,KAAK,EACL,qBAAqB,GACtB,EAAE,eAAe,2CA4DjB"}

package/lib/typescript/commonjs/components/index.d.ts

@@ -6,6 +6,7 @@ export * from './Checkbox';
 export * from './Chip';
 export * from './CodeField';
 export * from './CodeInput';
+export * from './Dialog';
 export * from './Icon';
 export * from './IconButton';
 export * from './Input';

package/lib/typescript/commonjs/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AAEvB,YAAY,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AAEvB,YAAY,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC"}

package/lib/typescript/module/components/Dialog/Dialog.d.ts

@@ -0,0 +1,75 @@
+import { type ReactNode } from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import { type ButtonVariant } from '../Button/Button';
+export interface DialogAction {
+    label: string;
+    onPress?: () => void;
+    /** Button variant. Defaults to `default` (lime). Pass another for other colors. */
+    variant?: ButtonVariant;
+    loading?: boolean;
+    disabled?: boolean;
+}
+export interface DialogCancelConfig {
+    /** Cancel label. Defaults to "Cancel". */
+    label?: string;
+    /** Handler. Defaults to `onClose`. */
+    onPress?: () => void;
+    /** Use the destructive style (subtle red) instead of the neutral secondary. */
+    destructive?: boolean;
+}
+export interface DialogProps {
+    /** Whether the dialog is shown. */
+    visible: boolean;
+    /** Called on backdrop press, close button, or Android back. */
+    onClose: () => void;
+    /** Required title. */
+    title: string;
+    /** Optional subtitle. */
+    subtitle?: string;
+    /** Any content — from text to a full form. */
+    children?: ReactNode;
+    /** Primary/secondary action buttons (right side). Keep total buttons ≤ 3. */
+    actions?: DialogAction[];
+    /** Optional cancel button (left side). */
+    cancel?: DialogCancelConfig;
+    /** Show the top-right close (×). Defaults to true. */
+    showClose?: boolean;
+    /** Render the close (×) in the destructive color. */
+    closeDestructive?: boolean;
+    /** Dismiss when the backdrop (overlay) is pressed. Defaults to false. */
+    dismissOnBackdrop?: boolean;
+    /**
+     * `inner` (default): the card caps at the screen height and its content
+     * scrolls inside. `page`: the card grows to its content and the whole modal
+     * scrolls (nothing behind moves) — better for short screens.
+     */
+    scrollMode?: 'inner' | 'page';
+    /** Keep the header pinned while content scrolls (inner mode). Defaults to true. */
+    stickyHeader?: boolean;
+    /** Keep the footer pinned while content scrolls (inner mode). Defaults to true. */
+    stickyFooter?: boolean;
+    /** Inner padding. Defaults to 24. */
+    padding?: number;
+    /** Vertical space between header↔content and content↔footer. Defaults to 24. */
+    contentSpacing?: number;
+    /** Corner radius. Defaults to 24. */
+    radius?: number;
+    /** Max width of the dialog card. Defaults to 560. */
+    maxWidth?: number;
+    /** Fraction of screen height the card may occupy (inner mode). Defaults to 0.9. */
+    maxHeightRatio?: number;
+    /** Scroll indicator color (a design-system color). Defaults to a subtle neutral. */
+    scrollbarColor?: string;
+    /** Override the card style. */
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Dialog — an accessible, keyboard-aware modal that can hold anything from a
+ * short message to a full form (selects, date pickers, etc. keep working thanks
+ * to `keyboardShouldPersistTaps`). Content scrolls with an elegant thin,
+ * auto-hiding indicator. `scrollMode="page"` scrolls the whole modal on short
+ * screens instead of scrolling inside the card. Footer composes the
+ * design-system `Button`.
+ */
+export declare function Dialog({ visible, onClose, title, subtitle, children, actions, cancel, showClose, closeDestructive, dismissOnBackdrop, scrollMode, stickyHeader, stickyFooter, padding, contentSpacing, radius, maxWidth, maxHeightRatio, scrollbarColor, style, }: DialogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Dialog.d.ts.map

package/lib/typescript/module/components/Dialog/Dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EASL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAU,KAAK,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAK9D,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mFAAmF;IACnF,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,kBAAkB;IACjC,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,+EAA+E;IAC/E,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,WAAW;IAC1B,mCAAmC;IACnC,OAAO,EAAE,OAAO,CAAC;IACjB,+DAA+D;IAC/D,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,yBAAyB;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,6EAA6E;IAC7E,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,sDAAsD;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qDAAqD;IACrD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,yEAAyE;IACzE,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC9B,mFAAmF;IACnF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,mFAAmF;IACnF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,qCAAqC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gFAAgF;IAChF,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,qCAAqC;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mFAAmF;IACnF,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oFAAoF;IACpF,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;;;;;GAOG;AACH,wBAAgB,MAAM,CAAC,EACrB,OAAO,EACP,OAAO,EACP,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,OAAY,EACZ,MAAM,EACN,SAAgB,EAChB,gBAAwB,EACxB,iBAAyB,EACzB,UAAoB,EACpB,YAAmB,EACnB,YAAmB,EACnB,OAAY,EACZ,cAAmB,EACnB,MAAW,EACX,QAAc,EACd,cAAoB,EACpB,cAAc,EACd,KAAK,GACN,EAAE,WAAW,2CA2Jb"}

package/lib/typescript/module/components/Dialog/index.d.ts

@@ -0,0 +1,2 @@
+export { Dialog, type DialogProps, type DialogAction, type DialogCancelConfig, } from './Dialog';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/components/Dialog/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EACN,KAAK,WAAW,EAChB,KAAK,YAAY,EACjB,KAAK,kBAAkB,GACxB,MAAM,UAAU,CAAC"}

package/lib/typescript/module/components/_internal/ScrollArea.d.ts

@@ -0,0 +1,20 @@
+import { type ReactNode } from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+export interface ScrollAreaProps {
+    children: ReactNode;
+    /** Thin indicator color (a design-system color). */
+    indicatorColor: string;
+    /** Indicator thickness. Defaults to 4. */
+    indicatorWidth?: number;
+    keyboardShouldPersistTaps?: 'always' | 'never' | 'handled';
+    keyboardDismissMode?: 'none' | 'on-drag' | 'interactive';
+    style?: StyleProp<ViewStyle>;
+    contentContainerStyle?: StyleProp<ViewStyle>;
+}
+/**
+ * ScrollView with an elegant custom vertical indicator: thin, rounded, colored,
+ * and only visible while scrolling (fades out when idle). The native indicator
+ * is hidden so it looks the same on iOS, Android and web.
+ */
+export declare function ScrollArea({ children, indicatorColor, indicatorWidth, keyboardShouldPersistTaps, keyboardDismissMode, style, contentContainerStyle, }: ScrollAreaProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ScrollArea.d.ts.map

package/lib/typescript/module/components/_internal/ScrollArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollArea.d.ts","sourceRoot":"","sources":["../../../../../src/components/_internal/ScrollArea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,SAAS,CAAC;IACpB,oDAAoD;IACpD,cAAc,EAAE,MAAM,CAAC;IACvB,0CAA0C;IAC1C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,yBAAyB,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;IAC3D,mBAAmB,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,aAAa,CAAC;IACzD,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,qBAAqB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9C;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,cAAc,EACd,cAAkB,EAClB,yBAAyB,EACzB,mBAAmB,EACnB,KAAK,EACL,qBAAqB,GACtB,EAAE,eAAe,2CA4DjB"}

package/lib/typescript/module/components/index.d.ts

@@ -6,6 +6,7 @@ export * from './Checkbox';
 export * from './Chip';
 export * from './CodeField';
 export * from './CodeInput';
+export * from './Dialog';
 export * from './Icon';
 export * from './IconButton';
 export * from './Input';

package/lib/typescript/module/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AAEvB,YAAY,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AAEvB,YAAY,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bacon-pos/ui",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Bacon POS design system — React Native component library",
   "main": "./lib/commonjs/index.js",
   "module": "./lib/module/index.js",

package/src/components/Dialog/Dialog.tsx

@@ -0,0 +1,269 @@
+import { type ReactNode } from 'react';
+import {
+  KeyboardAvoidingView,
+  Modal,
+  Platform,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  useWindowDimensions,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { useTheme } from '../../theme';
+import { Button, type ButtonVariant } from '../Button/Button';
+import { Icon } from '../Icon/Icon';
+import { Text } from '../Text/Text';
+import { ScrollArea } from '../_internal/ScrollArea';
+
+export interface DialogAction {
+  label: string;
+  onPress?: () => void;
+  /** Button variant. Defaults to `default` (lime). Pass another for other colors. */
+  variant?: ButtonVariant;
+  loading?: boolean;
+  disabled?: boolean;
+}
+
+export interface DialogCancelConfig {
+  /** Cancel label. Defaults to "Cancel". */
+  label?: string;
+  /** Handler. Defaults to `onClose`. */
+  onPress?: () => void;
+  /** Use the destructive style (subtle red) instead of the neutral secondary. */
+  destructive?: boolean;
+}
+
+export interface DialogProps {
+  /** Whether the dialog is shown. */
+  visible: boolean;
+  /** Called on backdrop press, close button, or Android back. */
+  onClose: () => void;
+  /** Required title. */
+  title: string;
+  /** Optional subtitle. */
+  subtitle?: string;
+  /** Any content — from text to a full form. */
+  children?: ReactNode;
+  /** Primary/secondary action buttons (right side). Keep total buttons ≤ 3. */
+  actions?: DialogAction[];
+  /** Optional cancel button (left side). */
+  cancel?: DialogCancelConfig;
+  /** Show the top-right close (×). Defaults to true. */
+  showClose?: boolean;
+  /** Render the close (×) in the destructive color. */
+  closeDestructive?: boolean;
+  /** Dismiss when the backdrop (overlay) is pressed. Defaults to false. */
+  dismissOnBackdrop?: boolean;
+  /**
+   * `inner` (default): the card caps at the screen height and its content
+   * scrolls inside. `page`: the card grows to its content and the whole modal
+   * scrolls (nothing behind moves) — better for short screens.
+   */
+  scrollMode?: 'inner' | 'page';
+  /** Keep the header pinned while content scrolls (inner mode). Defaults to true. */
+  stickyHeader?: boolean;
+  /** Keep the footer pinned while content scrolls (inner mode). Defaults to true. */
+  stickyFooter?: boolean;
+  /** Inner padding. Defaults to 24. */
+  padding?: number;
+  /** Vertical space between header↔content and content↔footer. Defaults to 24. */
+  contentSpacing?: number;
+  /** Corner radius. Defaults to 24. */
+  radius?: number;
+  /** Max width of the dialog card. Defaults to 560. */
+  maxWidth?: number;
+  /** Fraction of screen height the card may occupy (inner mode). Defaults to 0.9. */
+  maxHeightRatio?: number;
+  /** Scroll indicator color (a design-system color). Defaults to a subtle neutral. */
+  scrollbarColor?: string;
+  /** Override the card style. */
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * Dialog — an accessible, keyboard-aware modal that can hold anything from a
+ * short message to a full form (selects, date pickers, etc. keep working thanks
+ * to `keyboardShouldPersistTaps`). Content scrolls with an elegant thin,
+ * auto-hiding indicator. `scrollMode="page"` scrolls the whole modal on short
+ * screens instead of scrolling inside the card. Footer composes the
+ * design-system `Button`.
+ */
+export function Dialog({
+  visible,
+  onClose,
+  title,
+  subtitle,
+  children,
+  actions = [],
+  cancel,
+  showClose = true,
+  closeDestructive = false,
+  dismissOnBackdrop = false,
+  scrollMode = 'inner',
+  stickyHeader = true,
+  stickyFooter = true,
+  padding = 24,
+  contentSpacing = 24,
+  radius = 24,
+  maxWidth = 560,
+  maxHeightRatio = 0.9,
+  scrollbarColor,
+  style,
+}: DialogProps) {
+  const theme = useTheme();
+  const { height } = useWindowDimensions();
+  const indicatorColor = scrollbarColor ?? theme.colors.text.tertiary;
+
+  const closeBtn = showClose ? (
+    <Pressable
+      onPress={onClose}
+      hitSlop={8}
+      accessibilityRole="button"
+      accessibilityLabel="Close"
+      style={{ position: 'absolute', top: padding, right: padding, padding: 4, zIndex: 1 }}
+    >
+      <Icon
+        name="close"
+        size={24}
+        color={closeDestructive ? theme.colors.feedback.error : theme.colors.text.secondary}
+      />
+    </Pressable>
+  ) : null;
+
+  const header = (
+    <View style={{ paddingHorizontal: padding, paddingTop: padding, paddingBottom: contentSpacing }}>
+      <View style={{ paddingRight: showClose ? 40 : 0, gap: 4 }}>
+        <Text variant="h3" weight="semibold" color="primary">
+          {title}
+        </Text>
+        {subtitle ? (
+          <Text variant="bodyLarge" color="secondary">
+            {subtitle}
+          </Text>
+        ) : null}
+      </View>
+    </View>
+  );
+
+  const contentBody = <View style={{ paddingHorizontal: padding }}>{children}</View>;
+
+  const hasFooter = cancel != null || actions.length > 0;
+  const footer = hasFooter ? (
+    <View
+      style={{
+        flexDirection: 'row',
+        gap: 12,
+        paddingHorizontal: padding,
+        paddingBottom: padding,
+        paddingTop: contentSpacing,
+      }}
+    >
+      {cancel ? (
+        <View style={{ flex: 1 }}>
+          <Button
+            fullWidth
+            variant={cancel.destructive ? 'destructive' : 'secondary'}
+            label={cancel.label ?? 'Cancel'}
+            onPress={cancel.onPress ?? onClose}
+          />
+        </View>
+      ) : null}
+      {actions.map((action, i) => (
+        <View key={i} style={{ flex: 1 }}>
+          <Button
+            fullWidth
+            variant={action.variant ?? 'default'}
+            label={action.label}
+            onPress={action.onPress}
+            loading={action.loading}
+            disabled={action.disabled}
+          />
+        </View>
+      ))}
+    </View>
+  ) : null;
+
+  const cardBase: ViewStyle = {
+    width: '100%',
+    maxWidth,
+    backgroundColor: theme.colors.background.default,
+    borderRadius: radius,
+    overflow: 'hidden',
+  };
+
+  const card =
+    scrollMode === 'page' ? (
+      <View accessibilityViewIsModal style={[cardBase, style]}>
+        {closeBtn}
+        {header}
+        {contentBody}
+        {footer}
+      </View>
+    ) : (
+      <View
+        accessibilityViewIsModal
+        style={[cardBase, { maxHeight: height * maxHeightRatio }, style]}
+      >
+        {closeBtn}
+        {stickyHeader ? header : null}
+        <ScrollArea
+          indicatorColor={indicatorColor}
+          style={{ flexShrink: 1 }}
+          keyboardShouldPersistTaps="handled"
+          keyboardDismissMode="interactive"
+        >
+          {!stickyHeader ? header : null}
+          {contentBody}
+          {!stickyFooter ? footer : null}
+        </ScrollArea>
+        {stickyFooter ? footer : null}
+      </View>
+    );
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="fade"
+      statusBarTranslucent
+      onRequestClose={onClose}
+    >
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+        style={{ flex: 1 }}
+      >
+        <View style={{ flex: 1, backgroundColor: 'rgba(16, 18, 20, 0.55)' }}>
+          {scrollMode === 'page' ? (
+            <ScrollView
+              style={{ flex: 1 }}
+              contentContainerStyle={{ flexGrow: 1, padding: 16 }}
+              keyboardShouldPersistTaps="handled"
+              showsVerticalScrollIndicator={false}
+            >
+              <Pressable
+                style={{ flexGrow: 1, justifyContent: 'center', alignItems: 'center' }}
+                onPress={dismissOnBackdrop ? onClose : undefined}
+              >
+                <Pressable style={{ width: '100%', alignItems: 'center' }} onPress={() => {}}>
+                  {card}
+                </Pressable>
+              </Pressable>
+            </ScrollView>
+          ) : (
+            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', padding: 16 }}>
+              <Pressable
+                style={StyleSheet.absoluteFill}
+                onPress={dismissOnBackdrop ? onClose : undefined}
+                accessibilityElementsHidden
+                importantForAccessibility="no-hide-descendants"
+              />
+              {card}
+            </View>
+          )}
+        </View>
+      </KeyboardAvoidingView>
+    </Modal>
+  );
+}