@mapples/components 1.1.2 → 1.2.1

package/dist/components/navigation/BottomNavigationBar/schematic.d.ts

@@ -0,0 +1,4 @@
+import { RegisteredComponent } from '@mapples/types';
+/** Registers {@link BottomNavigationBar} under the `'BottomNavigationBar'` type key. */
+export declare const BottomNavigationBarSchematic: RegisteredComponent;
+//# sourceMappingURL=schematic.d.ts.map

package/dist/components/navigation/BottomNavigationBar/schematic.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"schematic.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/BottomNavigationBar/schematic.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAIrD,wFAAwF;AACxF,eAAO,MAAM,4BAA4B,EAAE,mBAG1C,CAAC"}

package/dist/components/navigation/BottomNavigationBar/schematic.js

@@ -0,0 +1,7 @@
+import BottomNavigationBar from './index';
+/** Registers {@link BottomNavigationBar} under the `'BottomNavigationBar'` type key. */
+export const BottomNavigationBarSchematic = {
+    type: 'BottomNavigationBar',
+    Component: BottomNavigationBar,
+};
+//# sourceMappingURL=schematic.js.map

package/dist/components/navigation/BottomNavigationBar/schematic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"schematic.js","sourceRoot":"","sources":["../../../../src/components/navigation/BottomNavigationBar/schematic.ts"],"names":[],"mappings":"AAEA,OAAO,mBAAmB,MAAM,SAAS,CAAC;AAE1C,wFAAwF;AACxF,MAAM,CAAC,MAAM,4BAA4B,GAAwB;IAC/D,IAAI,EAAE,qBAAqB;IAC3B,SAAS,EAAE,mBAAmB;CAC/B,CAAC"}

package/dist/components/navigation/BottomNavigationBar/types.d.ts

@@ -0,0 +1,43 @@
+/** When item labels show. */
+export declare const BOTTOM_NAVIGATION_LABEL_VISIBILITIES: readonly ["always", "selected", "never"];
+export type BottomNavigationLabelVisibility = (typeof BOTTOM_NAVIGATION_LABEL_VISIBILITIES)[number];
+/** Bar treatments: flush with the bottom edge, or a floating pill. */
+export declare const BOTTOM_NAVIGATION_VARIANTS: readonly ["plain", "floating"];
+export type BottomNavigationVariant = (typeof BOTTOM_NAVIGATION_VARIANTS)[number];
+/** One destination of the bar. */
+export interface BottomNavigationItem {
+    /** Visible text under the glyph. */
+    label: string;
+    /** The value the bar reports. */
+    value: string;
+    /** Glyph from the project icon family. */
+    iconName: string;
+    /** Glyph while active (the filled twin); defaults to `iconName`. */
+    activeIconName?: string;
+    /** Count pinned to the glyph; hidden at 0. */
+    badgeCount?: number;
+}
+/** Fewest destinations a bar holds. */
+export declare const BOTTOM_NAVIGATION_MIN_ITEMS = 3;
+/** Most destinations a bar holds. */
+export declare const BOTTOM_NAVIGATION_MAX_ITEMS = 5;
+/** Bar height without the safe area. */
+export declare const BOTTOM_NAVIGATION_HEIGHT = 64;
+/** Outer margin of the floating variant. */
+export declare const BOTTOM_NAVIGATION_FLOATING_MARGIN = 16;
+/** The active pill behind the glyph. */
+export declare const BOTTOM_NAVIGATION_INDICATOR: {
+    readonly width: 64;
+    readonly height: 32;
+};
+/** Glyph size. */
+export declare const BOTTOM_NAVIGATION_ICON_SIZE = 24;
+/** `true` when `value` is a well-formed destination. */
+export declare const isBottomNavigationItem: (value: unknown) => value is BottomNavigationItem;
+/**
+ * The destinations a bar renders. A malformed entry or a count outside 3–5
+ * is a data error — it is reported, never silently fixed, so an author sees
+ * what to change.
+ */
+export declare const readBottomNavigationItems: (items: unknown) => BottomNavigationItem[];
+//# sourceMappingURL=types.d.ts.map

package/dist/components/navigation/BottomNavigationBar/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/BottomNavigationBar/types.ts"],"names":[],"mappings":"AAAA,6BAA6B;AAC7B,eAAO,MAAM,oCAAoC,0CAIvC,CAAC;AACX,MAAM,MAAM,+BAA+B,GACzC,CAAC,OAAO,oCAAoC,CAAC,CAAC,MAAM,CAAC,CAAC;AAExD,sEAAsE;AACtE,eAAO,MAAM,0BAA0B,gCAAiC,CAAC;AACzE,MAAM,MAAM,uBAAuB,GACjC,CAAC,OAAO,0BAA0B,CAAC,CAAC,MAAM,CAAC,CAAC;AAE9C,kCAAkC;AAClC,MAAM,WAAW,oBAAoB;IACnC,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,QAAQ,EAAE,MAAM,CAAC;IACjB,oEAAoE;IACpE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,8CAA8C;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,uCAAuC;AACvC,eAAO,MAAM,2BAA2B,IAAI,CAAC;AAE7C,qCAAqC;AACrC,eAAO,MAAM,2BAA2B,IAAI,CAAC;AAE7C,wCAAwC;AACxC,eAAO,MAAM,wBAAwB,KAAK,CAAC;AAE3C,4CAA4C;AAC5C,eAAO,MAAM,iCAAiC,KAAK,CAAC;AAEpD,wCAAwC;AACxC,eAAO,MAAM,2BAA2B;;;CAAqC,CAAC;AAE9E,kBAAkB;AAClB,eAAO,MAAM,2BAA2B,KAAK,CAAC;AAE9C,wDAAwD;AACxD,eAAO,MAAM,sBAAsB,GACjC,OAAO,OAAO,KACb,KAAK,IAAI,oBASuD,CAAC;AAEpE;;;;GAIG;AACH,eAAO,MAAM,yBAAyB,GACpC,OAAO,OAAO,KACb,oBAAoB,EAsBtB,CAAC"}

package/dist/components/navigation/BottomNavigationBar/types.js

@@ -0,0 +1,51 @@
+/** When item labels show. */
+export const BOTTOM_NAVIGATION_LABEL_VISIBILITIES = [
+    'always',
+    'selected',
+    'never',
+];
+/** Bar treatments: flush with the bottom edge, or a floating pill. */
+export const BOTTOM_NAVIGATION_VARIANTS = ['plain', 'floating'];
+/** Fewest destinations a bar holds. */
+export const BOTTOM_NAVIGATION_MIN_ITEMS = 3;
+/** Most destinations a bar holds. */
+export const BOTTOM_NAVIGATION_MAX_ITEMS = 5;
+/** Bar height without the safe area. */
+export const BOTTOM_NAVIGATION_HEIGHT = 64;
+/** Outer margin of the floating variant. */
+export const BOTTOM_NAVIGATION_FLOATING_MARGIN = 16;
+/** The active pill behind the glyph. */
+export const BOTTOM_NAVIGATION_INDICATOR = { width: 64, height: 32 };
+/** Glyph size. */
+export const BOTTOM_NAVIGATION_ICON_SIZE = 24;
+/** `true` when `value` is a well-formed destination. */
+export const isBottomNavigationItem = (value) => typeof value === 'object' &&
+    value !== null &&
+    typeof value.label === 'string' &&
+    typeof value.value === 'string' &&
+    typeof value.iconName === 'string' &&
+    (value.activeIconName === undefined ||
+        typeof value.activeIconName === 'string') &&
+    (value.badgeCount === undefined ||
+        typeof value.badgeCount === 'number');
+/**
+ * The destinations a bar renders. A malformed entry or a count outside 3–5
+ * is a data error — it is reported, never silently fixed, so an author sees
+ * what to change.
+ */
+export const readBottomNavigationItems = (items) => {
+    if (!Array.isArray(items)) {
+        throw new Error('BottomNavigationBar: items must be an array of {label, value, iconName, activeIconName?, badgeCount?}');
+    }
+    if (items.length < BOTTOM_NAVIGATION_MIN_ITEMS ||
+        items.length > BOTTOM_NAVIGATION_MAX_ITEMS) {
+        throw new Error(`BottomNavigationBar: between ${BOTTOM_NAVIGATION_MIN_ITEMS} and ${BOTTOM_NAVIGATION_MAX_ITEMS} items are required (got ${items.length})`);
+    }
+    items.forEach((item, index) => {
+        if (!isBottomNavigationItem(item)) {
+            throw new Error(`BottomNavigationBar: items[${index}] must be {label: string, value: string, iconName: string, activeIconName?: string, badgeCount?: number}`);
+        }
+    });
+    return items;
+};
+//# sourceMappingURL=types.js.map

package/dist/components/navigation/BottomNavigationBar/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/navigation/BottomNavigationBar/types.ts"],"names":[],"mappings":"AAAA,6BAA6B;AAC7B,MAAM,CAAC,MAAM,oCAAoC,GAAG;IAClD,QAAQ;IACR,UAAU;IACV,OAAO;CACC,CAAC;AAIX,sEAAsE;AACtE,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,OAAO,EAAE,UAAU,CAAU,CAAC;AAkBzE,uCAAuC;AACvC,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,CAAC;AAE7C,qCAAqC;AACrC,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,CAAC;AAE7C,wCAAwC;AACxC,MAAM,CAAC,MAAM,wBAAwB,GAAG,EAAE,CAAC;AAE3C,4CAA4C;AAC5C,MAAM,CAAC,MAAM,iCAAiC,GAAG,EAAE,CAAC;AAEpD,wCAAwC;AACxC,MAAM,CAAC,MAAM,2BAA2B,GAAG,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAW,CAAC;AAE9E,kBAAkB;AAClB,MAAM,CAAC,MAAM,2BAA2B,GAAG,EAAE,CAAC;AAE9C,wDAAwD;AACxD,MAAM,CAAC,MAAM,sBAAsB,GAAG,CACpC,KAAc,EACiB,EAAE,CACjC,OAAO,KAAK,KAAK,QAAQ;IACzB,KAAK,KAAK,IAAI;IACd,OAAQ,KAA8B,CAAC,KAAK,KAAK,QAAQ;IACzD,OAAQ,KAA8B,CAAC,KAAK,KAAK,QAAQ;IACzD,OAAQ,KAA8B,CAAC,QAAQ,KAAK,QAAQ;IAC5D,CAAE,KAA8B,CAAC,cAAc,KAAK,SAAS;QAC3D,OAAQ,KAA8B,CAAC,cAAc,KAAK,QAAQ,CAAC;IACrE,CAAE,KAA8B,CAAC,UAAU,KAAK,SAAS;QACvD,OAAQ,KAA8B,CAAC,UAAU,KAAK,QAAQ,CAAC,CAAC;AAEpE;;;;GAIG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CACvC,KAAc,EACU,EAAE;IAC1B,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;QAC1B,MAAM,IAAI,KAAK,CACb,uGAAuG,CACxG,CAAC;IACJ,CAAC;IACD,IACE,KAAK,CAAC,MAAM,GAAG,2BAA2B;QAC1C,KAAK,CAAC,MAAM,GAAG,2BAA2B,EAC1C,CAAC;QACD,MAAM,IAAI,KAAK,CACb,gCAAgC,2BAA2B,QAAQ,2BAA2B,4BAA4B,KAAK,CAAC,MAAM,GAAG,CAC1I,CAAC;IACJ,CAAC;IACD,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;QAC5B,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC;YAClC,MAAM,IAAI,KAAK,CACb,8BAA8B,KAAK,0GAA0G,CAC9I,CAAC;QACJ,CAAC;IACH,CAAC,CAAC,CAAC;IACH,OAAO,KAA+B,CAAC;AACzC,CAAC,CAAC"}

package/dist/components/navigation/Breadcrumbs/defaults.d.ts

@@ -0,0 +1,17 @@
+/** Runtime defaults — author slots merge over these. */
+export declare const defaults: {
+    root: {
+        flexDirection: "row";
+        flexWrap: "wrap";
+        alignItems: "center";
+        alignSelf: "flex-start";
+        columnGap: number;
+        rowGap: number;
+    };
+    mirrored: {
+        transform: {
+            scaleX: number;
+        }[];
+    };
+};
+//# sourceMappingURL=defaults.d.ts.map

package/dist/components/navigation/Breadcrumbs/defaults.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/Breadcrumbs/defaults.ts"],"names":[],"mappings":"AAEA,wDAAwD;AACxD,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;CAYnB,CAAC"}

package/dist/components/navigation/Breadcrumbs/defaults.js

@@ -0,0 +1,16 @@
+import { Styler } from '@mapples/style';
+/** Runtime defaults — author slots merge over these. */
+export const defaults = Styler.create({
+    root: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        alignItems: 'center',
+        alignSelf: 'flex-start',
+        columnGap: 6,
+        rowGap: 4,
+    },
+    mirrored: {
+        transform: [{ scaleX: -1 }],
+    },
+});
+//# sourceMappingURL=defaults.js.map

package/dist/components/navigation/Breadcrumbs/defaults.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaults.js","sourceRoot":"","sources":["../../../../src/components/navigation/Breadcrumbs/defaults.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAExC,wDAAwD;AACxD,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,CAAC;IACpC,IAAI,EAAE;QACJ,aAAa,EAAE,KAAK;QACpB,QAAQ,EAAE,MAAM;QAChB,UAAU,EAAE,QAAQ;QACpB,SAAS,EAAE,YAAY;QACvB,SAAS,EAAE,CAAC;QACZ,MAAM,EAAE,CAAC;KACV;IACD,QAAQ,EAAE;QACR,SAAS,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC;KAC5B;CACF,CAAC,CAAC"}

package/dist/components/navigation/Breadcrumbs/index.d.ts

@@ -0,0 +1,51 @@
+import { StyledProp } from '@mapples/style';
+import { Tone } from '@mapples/ui';
+import { TextStyle, View, ViewProps, ViewStyle } from 'react-native';
+import { BreadcrumbItem, BreadcrumbSeparator } from './types';
+/** Props for {@link Breadcrumbs}. */
+export interface BreadcrumbsProps extends Omit<ViewProps, 'children'> {
+    /** The trail, first ancestor first; the last item is the current page. */
+    items?: BreadcrumbItem[];
+    /** Glyph between crumbs. Defaults to `chevron`. */
+    separator?: BreadcrumbSeparator;
+    /** Most crumbs shown before the middle collapses to an ellipsis; `0` shows all. Defaults to `0`. */
+    maxItems?: number;
+    /** Fires with the pressed crumb's `value` and its index in `items`. */
+    onItemPress?: (value: string, index: number) => void;
+    /** Colour role of the ancestor links. Defaults to `primary`. */
+    tone?: Tone;
+    /** Styled slots for every visual part. */
+    styled?: {
+        /** The wrapping row. */
+        style?: StyledProp<ViewStyle>;
+        /** An ancestor link's text. */
+        styleItem?: StyledProp<TextStyle>;
+        /** The current page's text. */
+        styleItemCurrent?: StyledProp<TextStyle>;
+        /** The separator glyph or slash (`color`). */
+        styleSeparator?: StyledProp<TextStyle>;
+    };
+}
+/**
+ * A wrapping trail of ancestor links ending in the current page. Ancestors
+ * are pressable and report their `value`; the last crumb is plain text.
+ *
+ * @example
+ * ```tsx
+ * <Breadcrumbs
+ *   items={[
+ *     { label: 'Home', value: 'home' },
+ *     { label: 'Shoes', value: 'shoes' },
+ *     { label: 'Runners', value: 'runners' },
+ *   ]}
+ *   onItemPress={(value) => navigate(value)}
+ * />
+ * ```
+ *
+ * @public
+ */
+declare const Breadcrumbs: import("react").ForwardRefExoticComponent<BreadcrumbsProps & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<View>>;
+export default Breadcrumbs;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/navigation/Breadcrumbs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/Breadcrumbs/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAA0B,MAAM,gBAAgB,CAAC;AACpE,OAAO,EAAU,IAAI,EAA8B,MAAM,aAAa,CAAC;AACvE,OAAO,EAGL,SAAS,EACT,IAAI,EACJ,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AAKtB,OAAO,EAEL,cAAc,EACd,mBAAmB,EAEpB,MAAM,SAAS,CAAC;AAEjB,qCAAqC;AACrC,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACnE,0EAA0E;IAC1E,KAAK,CAAC,EAAE,cAAc,EAAE,CAAC;IACzB,mDAAmD;IACnD,SAAS,CAAC,EAAE,mBAAmB,CAAC;IAChC,oGAAoG;IACpG,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uEAAuE;IACvE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,gEAAgE;IAChE,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,0CAA0C;IAC1C,MAAM,CAAC,EAAE;QACP,wBAAwB;QACxB,KAAK,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;QAC9B,+BAA+B;QAC/B,SAAS,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;QAClC,+BAA+B;QAC/B,gBAAgB,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;QACzC,8CAA8C;QAC9C,cAAc,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;KACxC,CAAC;CACH;AAsBD;;;;;;;;;;;;;;;;;GAiBG;AACH,QAAA,MAAM,WAAW;;wCAoGhB,CAAC;AAGF,eAAe,WAAW,CAAC"}

package/dist/components/navigation/Breadcrumbs/index.js

@@ -0,0 +1,73 @@
+import { forwardRef, Fragment } from 'react';
+import { StyledView, Typography } from '@mapples/style';
+import { Tokens, TYPOGRAPHY_PARTS, useTones } from '@mapples/ui';
+import { I18nManager, Pressable, } from 'react-native';
+import { Glyph, useSlotColor } from '../../../internal';
+import { defaults } from './defaults';
+import { BREADCRUMB_GLYPH_SIZE, readBreadcrumbItems, } from './types';
+/**
+ * The visible crumbs. Past `maxItems` the trail keeps the first crumb, an
+ * ellipsis and the last `maxItems - 2` crumbs (at least the current page).
+ */
+const collapse = (items, maxItems) => {
+    const all = items.map((item, index) => ({
+        kind: 'item',
+        item,
+        index,
+    }));
+    if (maxItems <= 0 || items.length <= maxItems)
+        return all;
+    const tail = Math.max(maxItems - 2, 1);
+    return [all[0], { kind: 'ellipsis' }, ...all.slice(items.length - tail)];
+};
+/**
+ * A wrapping trail of ancestor links ending in the current page. Ancestors
+ * are pressable and report their `value`; the last crumb is plain text.
+ *
+ * @example
+ * ```tsx
+ * <Breadcrumbs
+ *   items={[
+ *     { label: 'Home', value: 'home' },
+ *     { label: 'Shoes', value: 'shoes' },
+ *     { label: 'Runners', value: 'runners' },
+ *   ]}
+ *   onItemPress={(value) => navigate(value)}
+ * />
+ * ```
+ *
+ * @public
+ */
+const Breadcrumbs = forwardRef(({ items, separator = 'chevron', maxItems = 0, onItemPress, tone = 'primary', styled, 
+// The canvas injects a drop area as children; leaf components ignore them.
+children: _children, ...rest }, ref) => {
+    const tones = useTones();
+    const crumbs = readBreadcrumbItems(items);
+    const visible = collapse(crumbs, maxItems);
+    const lastIndex = crumbs.length - 1;
+    const linkColor = useSlotColor(styled?.styleItem, 'color', tones.tone(tone).main);
+    const currentColor = useSlotColor(styled?.styleItemCurrent, 'color', tones.resolve(Tokens.color.text));
+    const separatorColor = useSlotColor(styled?.styleSeparator, 'color', tones.resolve(Tokens.color.textTertiary));
+    const divider = separator === 'chevron' ? (<Glyph name="chevronRight" size={BREADCRUMB_GLYPH_SIZE} color={separatorColor} style={I18nManager.isRTL ? defaults.mirrored : undefined}/>) : (<Typography variant={TYPOGRAPHY_PARTS.label} style={[{ color: separatorColor }, styled?.styleSeparator]}>
+          /
+        </Typography>);
+    return (<StyledView ref={ref} accessibilityRole="none" styled={{ style: [defaults.root, styled?.style] }} {...rest}>
+        {visible.map((crumb, position) => (<Fragment key={crumb.kind === 'item' ? crumb.item.value : 'ellipsis'}>
+            {position > 0 ? divider : null}
+            {crumb.kind === 'ellipsis' ? (<Glyph name="more" size={BREADCRUMB_GLYPH_SIZE} color={separatorColor}/>) : crumb.index === lastIndex ? (<Typography variant={TYPOGRAPHY_PARTS.label} accessibilityRole="text" style={[
+                    { color: currentColor },
+                    styled?.styleItem,
+                    styled?.styleItemCurrent,
+                ]}>
+                {crumb.item.label}
+              </Typography>) : (<Pressable accessibilityRole="link" hitSlop={{ top: 8, bottom: 8, left: 2, right: 2 }} onPress={() => onItemPress?.(crumb.item.value, crumb.index)}>
+                <Typography variant={TYPOGRAPHY_PARTS.label} style={[{ color: linkColor }, styled?.styleItem]}>
+                  {crumb.item.label}
+                </Typography>
+              </Pressable>)}
+          </Fragment>))}
+      </StyledView>);
+});
+Breadcrumbs.displayName = 'Breadcrumbs';
+export default Breadcrumbs;
+//# sourceMappingURL=index.js.map

package/dist/components/navigation/Breadcrumbs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/navigation/Breadcrumbs/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/navigation/Breadcrumbs/schematic.d.ts

@@ -0,0 +1,4 @@
+import { RegisteredComponent } from '@mapples/types';
+/** Registers {@link Breadcrumbs} under the `'Breadcrumbs'` type key. */
+export declare const BreadcrumbsSchematic: RegisteredComponent;
+//# sourceMappingURL=schematic.d.ts.map

package/dist/components/navigation/Breadcrumbs/schematic.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"schematic.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/Breadcrumbs/schematic.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAIrD,wEAAwE;AACxE,eAAO,MAAM,oBAAoB,EAAE,mBAGlC,CAAC"}

package/dist/components/navigation/Breadcrumbs/schematic.js

@@ -0,0 +1,7 @@
+import Breadcrumbs from './index';
+/** Registers {@link Breadcrumbs} under the `'Breadcrumbs'` type key. */
+export const BreadcrumbsSchematic = {
+    type: 'Breadcrumbs',
+    Component: Breadcrumbs,
+};
+//# sourceMappingURL=schematic.js.map

package/dist/components/navigation/Breadcrumbs/schematic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"schematic.js","sourceRoot":"","sources":["../../../../src/components/navigation/Breadcrumbs/schematic.ts"],"names":[],"mappings":"AAEA,OAAO,WAAW,MAAM,SAAS,CAAC;AAElC,wEAAwE;AACxE,MAAM,CAAC,MAAM,oBAAoB,GAAwB;IACvD,IAAI,EAAE,aAAa;IACnB,SAAS,EAAE,WAAW;CACvB,CAAC"}

package/dist/components/navigation/Breadcrumbs/types.d.ts

@@ -0,0 +1,20 @@
+/** Separator glyph between crumbs. */
+export declare const BREADCRUMB_SEPARATORS: readonly ["chevron", "slash"];
+export type BreadcrumbSeparator = (typeof BREADCRUMB_SEPARATORS)[number];
+/** One crumb of the trail. */
+export interface BreadcrumbItem {
+    /** Visible text. */
+    label: string;
+    /** The value reported by `onItemPress`. */
+    value: string;
+}
+/** Separator and ellipsis glyph size in points. */
+export declare const BREADCRUMB_GLYPH_SIZE = 16;
+/** `true` when `value` is a well-formed crumb. */
+export declare const isBreadcrumbItem: (value: unknown) => value is BreadcrumbItem;
+/**
+ * The crumbs a trail renders. A malformed entry is a data error — it is
+ * reported, never silently skipped, so an author sees which item is wrong.
+ */
+export declare const readBreadcrumbItems: (items: unknown) => BreadcrumbItem[];
+//# sourceMappingURL=types.d.ts.map

package/dist/components/navigation/Breadcrumbs/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/Breadcrumbs/types.ts"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,eAAO,MAAM,qBAAqB,+BAAgC,CAAC;AACnE,MAAM,MAAM,mBAAmB,GAAG,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEzE,8BAA8B;AAC9B,MAAM,WAAW,cAAc;IAC7B,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;CACf;AAED,mDAAmD;AACnD,eAAO,MAAM,qBAAqB,KAAK,CAAC;AAExC,kDAAkD;AAClD,eAAO,MAAM,gBAAgB,GAAI,OAAO,OAAO,KAAG,KAAK,IAAI,cAIN,CAAC;AAEtD;;;GAGG;AACH,eAAO,MAAM,mBAAmB,GAAI,OAAO,OAAO,KAAG,cAAc,EAalE,CAAC"}

package/dist/components/navigation/Breadcrumbs/types.js

@@ -0,0 +1,27 @@
+/** Separator glyph between crumbs. */
+export const BREADCRUMB_SEPARATORS = ['chevron', 'slash'];
+/** Separator and ellipsis glyph size in points. */
+export const BREADCRUMB_GLYPH_SIZE = 16;
+/** `true` when `value` is a well-formed crumb. */
+export const isBreadcrumbItem = (value) => typeof value === 'object' &&
+    value !== null &&
+    typeof value.label === 'string' &&
+    typeof value.value === 'string';
+/**
+ * The crumbs a trail renders. A malformed entry is a data error — it is
+ * reported, never silently skipped, so an author sees which item is wrong.
+ */
+export const readBreadcrumbItems = (items) => {
+    if (items === undefined || items === null)
+        return [];
+    if (!Array.isArray(items)) {
+        throw new Error('Breadcrumbs: items must be an array of {label, value}');
+    }
+    items.forEach((item, index) => {
+        if (!isBreadcrumbItem(item)) {
+            throw new Error(`Breadcrumbs: items[${index}] must be {label: string, value: string}`);
+        }
+    });
+    return items;
+};
+//# sourceMappingURL=types.js.map

package/dist/components/navigation/Breadcrumbs/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/navigation/Breadcrumbs/types.ts"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,SAAS,EAAE,OAAO,CAAU,CAAC;AAWnE,mDAAmD;AACnD,MAAM,CAAC,MAAM,qBAAqB,GAAG,EAAE,CAAC;AAExC,kDAAkD;AAClD,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAAc,EAA2B,EAAE,CAC1E,OAAO,KAAK,KAAK,QAAQ;IACzB,KAAK,KAAK,IAAI;IACd,OAAQ,KAAwB,CAAC,KAAK,KAAK,QAAQ;IACnD,OAAQ,KAAwB,CAAC,KAAK,KAAK,QAAQ,CAAC;AAEtD;;;GAGG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,KAAc,EAAoB,EAAE;IACtE,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI;QAAE,OAAO,EAAE,CAAC;IACrD,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;QAC1B,MAAM,IAAI,KAAK,CAAC,uDAAuD,CAAC,CAAC;IAC3E,CAAC;IACD,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;QAC5B,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC;YAC5B,MAAM,IAAI,KAAK,CACb,sBAAsB,KAAK,0CAA0C,CACtE,CAAC;QACJ,CAAC;IACH,CAAC,CAAC,CAAC;IACH,OAAO,KAAyB,CAAC;AACnC,CAAC,CAAC"}

package/dist/components/navigation/PageControl/defaults.d.ts

@@ -0,0 +1,11 @@
+/** Runtime defaults — author slots merge over these. */
+export declare const defaults: {
+    root: {
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "center";
+        alignSelf: "center";
+        minHeight: number;
+    };
+};
+//# sourceMappingURL=defaults.d.ts.map

package/dist/components/navigation/PageControl/defaults.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/PageControl/defaults.ts"],"names":[],"mappings":"AAEA,wDAAwD;AACxD,eAAO,MAAM,QAAQ;;;;;;;;CAQnB,CAAC"}

package/dist/components/navigation/PageControl/defaults.js

@@ -0,0 +1,12 @@
+import { Styler } from '@mapples/style';
+/** Runtime defaults — author slots merge over these. */
+export const defaults = Styler.create({
+    root: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        alignSelf: 'center',
+        minHeight: 20,
+    },
+});
+//# sourceMappingURL=defaults.js.map

package/dist/components/navigation/PageControl/defaults.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaults.js","sourceRoot":"","sources":["../../../../src/components/navigation/PageControl/defaults.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAExC,wDAAwD;AACxD,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,CAAC;IACpC,IAAI,EAAE;QACJ,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;QACxB,SAAS,EAAE,QAAQ;QACnB,SAAS,EAAE,EAAE;KACd;CACF,CAAC,CAAC"}

package/dist/components/navigation/PageControl/index.d.ts

@@ -0,0 +1,51 @@
+import { StyledProp } from '@mapples/style';
+import { Tone } from '@mapples/ui';
+import { TextStyle, View, ViewProps, ViewStyle } from 'react-native';
+import { PageControlSize, PageControlVariant } from './types';
+/** Props for {@link PageControl}. */
+export interface PageControlProps extends Omit<ViewProps, 'children'> {
+    /** Number of pages. Defaults to `3`. */
+    count?: number;
+    /** Index of the current page (controlled). Omit to let the control keep its own state. */
+    value?: number;
+    /** Initial index while uncontrolled. Defaults to `0`. */
+    defaultValue?: number;
+    /** Fires with the next index — the new value is the first argument. */
+    onValueChange?: (value: number) => void;
+    /** Dot size: `sm` 6, `md` 8. Defaults to `md`. */
+    size?: PageControlSize;
+    /** Colour role of the active indicator. Defaults to `primary`. */
+    tone?: Tone;
+    /** Indicator style: round dots, a stretched active bar, or '1 / 3'. Defaults to `dots`. */
+    variant?: PageControlVariant;
+    /** Disables interaction and dims the control. */
+    disabled?: boolean;
+    /** Styled slots for every visual part. */
+    styled?: {
+        /** The row. */
+        style?: StyledProp<ViewStyle>;
+        /** An inactive indicator. */
+        styleDot?: StyledProp<ViewStyle>;
+        /** The active indicator. */
+        styleDotActive?: StyledProp<ViewStyle>;
+        /** The numeric label. */
+        styleLabel?: StyledProp<TextStyle>;
+    };
+}
+/**
+ * Page indicators under a carousel or onboarding pager. `value` is the
+ * current index, two-way bindable so it can mirror a carousel; dots are
+ * pressable and screen readers step through the pages as an adjustable.
+ *
+ * @example
+ * ```tsx
+ * <PageControl count={slides.length} value={index} onValueChange={setIndex} />
+ * ```
+ *
+ * @public
+ */
+declare const PageControl: import("react").ForwardRefExoticComponent<PageControlProps & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<View>>;
+export default PageControl;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/navigation/PageControl/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/PageControl/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAA0B,MAAM,gBAAgB,CAAC;AACpE,OAAO,EAIL,IAAI,EAGL,MAAM,aAAa,CAAC;AACrB,OAAO,EAGL,SAAS,EACT,IAAI,EACJ,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AAKtB,OAAO,EAEL,eAAe,EACf,kBAAkB,EACnB,MAAM,SAAS,CAAC;AAEjB,qCAAqC;AACrC,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACnE,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0FAA0F;IAC1F,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yDAAyD;IACzD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uEAAuE;IACvE,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,kDAAkD;IAClD,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,kEAAkE;IAClE,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,2FAA2F;IAC3F,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,iDAAiD;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,MAAM,CAAC,EAAE;QACP,eAAe;QACf,KAAK,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;QAC9B,6BAA6B;QAC7B,QAAQ,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;QACjC,4BAA4B;QAC5B,cAAc,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;QACvC,yBAAyB;QACzB,UAAU,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;KACpC,CAAC;CACH;AAKD;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,WAAW;;wCAiHhB,CAAC;AAGF,eAAe,WAAW,CAAC"}

package/dist/components/navigation/PageControl/index.js

@@ -0,0 +1,79 @@
+import { forwardRef } from 'react';
+import { StyledView, Typography } from '@mapples/style';
+import { DISABLED_OPACITY, RADII, Tokens, TYPOGRAPHY_PARTS, useTones, } from '@mapples/ui';
+import { Pressable, } from 'react-native';
+import { useControllableState, useSlotColor } from '../../../internal';
+import { defaults } from './defaults';
+import { PAGE_CONTROL_GEOMETRY, } from './types';
+const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+/**
+ * Page indicators under a carousel or onboarding pager. `value` is the
+ * current index, two-way bindable so it can mirror a carousel; dots are
+ * pressable and screen readers step through the pages as an adjustable.
+ *
+ * @example
+ * ```tsx
+ * <PageControl count={slides.length} value={index} onValueChange={setIndex} />
+ * ```
+ *
+ * @public
+ */
+const PageControl = forwardRef(({ count = 3, value, defaultValue = 0, onValueChange, size = 'md', tone = 'primary', variant = 'dots', disabled = false, styled, 
+// The canvas injects a drop area as children; leaf components ignore them.
+children: _children, ...rest }, ref) => {
+    const tones = useTones();
+    const geometry = PAGE_CONTROL_GEOMETRY[size];
+    const [current, setCurrent] = useControllableState({
+        value,
+        defaultValue,
+        onChange: onValueChange,
+    });
+    const pages = Math.max(0, Math.floor(count));
+    const last = Math.max(pages - 1, 0);
+    const index = clamp(current, 0, last);
+    const inactiveColor = useSlotColor(styled?.styleDot, 'backgroundColor', tones.outlineStrong);
+    const activeColor = useSlotColor(styled?.styleDotActive, 'backgroundColor', tones.tone(tone).main);
+    const onAccessibilityAction = (event) => {
+        if (disabled)
+            return;
+        const direction = event.nativeEvent.actionName === 'increment' ? 1 : -1;
+        setCurrent(clamp(index + direction, 0, last));
+    };
+    const label = `${pages === 0 ? 0 : index + 1} / ${pages}`;
+    return (<StyledView ref={ref} accessibilityRole="adjustable" accessibilityValue={{ min: 0, max: last, now: index, text: label }} accessibilityActions={[{ name: 'increment' }, { name: 'decrement' }]} accessibilityState={{ disabled }} onAccessibilityAction={onAccessibilityAction} styled={{
+            style: [
+                defaults.root,
+                { gap: geometry.gap },
+                styled?.style,
+                disabled && { opacity: DISABLED_OPACITY },
+            ],
+        }} {...rest}>
+        {variant === 'numeric' ? (<Typography variant={TYPOGRAPHY_PARTS.helper} style={[
+                { color: tones.resolve(Tokens.color.textSecondary) },
+                styled?.styleLabel,
+            ]}>
+            {label}
+          </Typography>) : (Array.from({ length: pages }, (_, page) => {
+            const active = page === index;
+            return (<Pressable key={page} accessibilityRole="button" accessibilityLabel={`Page ${page + 1}`} accessibilityState={{ selected: active, disabled }} disabled={disabled} hitSlop={6} onPress={() => setCurrent(page)}>
+                <StyledView styled={{
+                    style: [
+                        {
+                            width: variant === 'bars' && active
+                                ? geometry.bar
+                                : geometry.dot,
+                            height: geometry.dot,
+                            borderRadius: RADII.pill,
+                            backgroundColor: active ? activeColor : inactiveColor,
+                        },
+                        styled?.styleDot,
+                        active && styled?.styleDotActive,
+                    ],
+                }}/>
+              </Pressable>);
+        }))}
+      </StyledView>);
+});
+PageControl.displayName = 'PageControl';
+export default PageControl;
+//# sourceMappingURL=index.js.map

package/dist/components/navigation/PageControl/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/navigation/PageControl/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/navigation/PageControl/schematic.d.ts

@@ -0,0 +1,4 @@
+import { RegisteredComponent } from '@mapples/types';
+/** Registers {@link PageControl} under the `'PageControl'` type key. */
+export declare const PageControlSchematic: RegisteredComponent;
+//# sourceMappingURL=schematic.d.ts.map

package/dist/components/navigation/PageControl/schematic.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"schematic.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/PageControl/schematic.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAIrD,wEAAwE;AACxE,eAAO,MAAM,oBAAoB,EAAE,mBAGlC,CAAC"}

package/dist/components/navigation/PageControl/schematic.js

@@ -0,0 +1,7 @@
+import PageControl from './index';
+/** Registers {@link PageControl} under the `'PageControl'` type key. */
+export const PageControlSchematic = {
+    type: 'PageControl',
+    Component: PageControl,
+};
+//# sourceMappingURL=schematic.js.map

package/dist/components/navigation/PageControl/schematic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"schematic.js","sourceRoot":"","sources":["../../../../src/components/navigation/PageControl/schematic.ts"],"names":[],"mappings":"AAEA,OAAO,WAAW,MAAM,SAAS,CAAC;AAElC,wEAAwE;AACxE,MAAM,CAAC,MAAM,oBAAoB,GAAwB;IACvD,IAAI,EAAE,aAAa;IACnB,SAAS,EAAE,WAAW;CACvB,CAAC"}

package/dist/components/navigation/PageControl/types.d.ts

@@ -0,0 +1,17 @@
+/** Dot sizes. */
+export declare const PAGE_CONTROL_SIZES: readonly ["sm", "md"];
+export type PageControlSize = (typeof PAGE_CONTROL_SIZES)[number];
+/** Indicator styles. */
+export declare const PAGE_CONTROL_VARIANTS: readonly ["dots", "bars", "numeric"];
+export type PageControlVariant = (typeof PAGE_CONTROL_VARIANTS)[number];
+export interface PageControlGeometry {
+    /** Dot diameter (and bar height). */
+    dot: number;
+    /** Width of the active bar. */
+    bar: number;
+    /** Space between indicators. */
+    gap: number;
+}
+/** Geometry per size. */
+export declare const PAGE_CONTROL_GEOMETRY: Record<PageControlSize, PageControlGeometry>;
+//# sourceMappingURL=types.d.ts.map

package/dist/components/navigation/PageControl/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/PageControl/types.ts"],"names":[],"mappings":"AAAA,iBAAiB;AACjB,eAAO,MAAM,kBAAkB,uBAAwB,CAAC;AACxD,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAC;AAElE,wBAAwB;AACxB,eAAO,MAAM,qBAAqB,sCAAuC,CAAC;AAC1E,MAAM,MAAM,kBAAkB,GAAG,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,CAAC,CAAC;AAExE,MAAM,WAAW,mBAAmB;IAClC,qCAAqC;IACrC,GAAG,EAAE,MAAM,CAAC;IACZ,+BAA+B;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,gCAAgC;IAChC,GAAG,EAAE,MAAM,CAAC;CACb;AAED,yBAAyB;AACzB,eAAO,MAAM,qBAAqB,EAAE,MAAM,CACxC,eAAe,EACf,mBAAmB,CAIpB,CAAC"}