@mapples/components 1.1.2 → 1.2.0

package/README.md

@@ -1 +1,100 @@
 # @mapples/components
+
+A neutral, theme-driven component library for Mapples apps — the widgets a
+real product needs (actions, inputs, content, navigation, feedback and
+overlays) on top of the `@mapples/ui` primitives. Every component paints
+itself from the project theme, works on iOS, Android and the web, is placed
+from the Creator palette, and is described to the AI assistant.
+
+## Installation
+
+```bash
+npm install @mapples/components
+```
+
+Peers: `react`, `react-native`, `react-native-svg`, `expo-image`,
+`react-native-gesture-handler` (drag input for `Slider` and `BottomSheet`;
+wrap the app in `GestureHandlerRootView` — `MapplesApp` does).
+
+## Usage
+
+```tsx
+import { Components } from '@mapples/components';
+import { RenderProvider } from '@mapples/render';
+import { UIComponents } from '@mapples/ui';
+
+<RenderProvider components={{ ...Components, ...UIComponents }} assets={assets}>
+  {children}
+</RenderProvider>;
+```
+
+Or directly:
+
+```tsx
+import { InputField, Switch, Card } from '@mapples/components';
+
+<Card variant="outlined">
+  <InputField label="Email" value={email} onChangeText={setEmail} />
+  <Switch label="Remember me" value={remember} onValueChange={setRemember} />
+</Card>;
+```
+
+## Inventory
+
+| Area | Components |
+| --- | --- |
+| Actions | `Fab`, `Chip`, `ChipGroup`, `SegmentedControl`, `ButtonGroup`, `BottomActionBar` (plus the themed `Button` / `IconButton` of `@mapples/ui`) |
+| Inputs | `InputField`, `SearchBar`, `PinInput`, `SelectField`, `Checkbox`, `RadioGroup`, `Switch`, `Slider`, `NumberStepper`, `Rating`, `ChatComposer` |
+| Content | `Card`, `MediaCard`, `ListItem`, `List`, `SectionHeader`, `Divider`, `Avatar`, `AvatarGroup`, `Accordion`, `StatTile`, `Table`, `Timeline`, `MessageBubble`, `ImageCarousel` |
+| Navigation | `TopAppBar`, `BottomNavigationBar`, `Tabs`, `Breadcrumbs`, `PageControl`, `Steps`, `TextLink` |
+| Feedback | `Badge`, `ProgressBar`, `ProgressCircle`, `Spinner`, `Skeleton`, `Banner`, `Snackbar`, `EmptyState` |
+| Overlays | `Dialog`, `BottomSheet`, `ActionSheet` |
+
+## Conventions
+
+- **Theme first.** Colours come from the project theme through the palette
+  contract (`primary`, `accent`, `background`, `text`, `system`); neutral
+  surfaces (outlines, fills, dividers, scrims) derive from the text colour at
+  an alpha so they read on light and dark themes alike. Sizes and radii come
+  from `CONTROL_SIZES` and `RADII` in `@mapples/ui`.
+- **Defaults live in the component.** `styled` slots (`style`, `styleLabel`,
+  `styleTrack`, …) merge over the runtime defaults; delete an override and
+  the default is back.
+- **One state contract.** Form-like controls take `value` and report
+  `onValueChange(next)`; text controls use `onChangeText`; toggles
+  `selected` / `onSelectedChange`; `Accordion` `expanded` /
+  `onExpandedChange`; overlays `visible` / `onVisibleChange`. The new value
+  is always the first handler argument, so a Creator two-way binding needs no
+  configuration. Omit the value prop and the component keeps its own state;
+  pass `fieldName` inside a `FormView` and the value binds to the form.
+- **Lists are literal.** Selectable lists take `options: [{label, value,
+  iconName?, disabled?, destructive?}]`; display lists take `items` with a
+  fixed shape per component; only `Table` and `ImageCarousel` remap external
+  data through `keyMap`.
+- **Icons.** `…IconName` props render a glyph from the project's icon family
+  (`Icon` from `@mapples/ui`); the check marks, chevrons and other structural
+  glyphs are built in.
+- **Overlays are in-tree.** `Dialog`, `BottomSheet`, `ActionSheet` and
+  `Snackbar` cover the parent they are placed in — put them last in the page
+  root and drive `visible` from state.
+- **Accessible by default.** Roles, states and values are set; small
+  controls carry a 44 pt hit area; loops and transitions respect the
+  reduce-motion setting.
+- **Non-goals (for now).** Date/time pickers, anchored menus, tooltips,
+  drawers, range sliders and charts.
+
+## Development
+
+```bash
+npm run build
+npm run type-check
+npm run lint
+```
+
+## License
+
+MIT
+
+## Author
+
+Oleksandr Soloviov – [mapples.org](https://mapples.org/people/olek_soloviov)

package/dist/components/actions/BottomActionBar/defaults.d.ts

@@ -0,0 +1,15 @@
+/** Runtime defaults — author slots merge over these. */
+export declare const defaults: {
+    root: {
+        padding: number;
+        gap: number;
+        zIndex: number;
+    };
+    sticky: {
+        position: "absolute";
+        left: number;
+        right: number;
+        bottom: number;
+    };
+};
+//# sourceMappingURL=defaults.d.ts.map

package/dist/components/actions/BottomActionBar/defaults.d.ts.map

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

package/dist/components/actions/BottomActionBar/defaults.js

@@ -0,0 +1,16 @@
+import { Styler } from '@mapples/style';
+/** Runtime defaults — author slots merge over these. */
+export const defaults = Styler.create({
+    root: {
+        padding: 16,
+        gap: 12,
+        zIndex: 10,
+    },
+    sticky: {
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        bottom: 0,
+    },
+});
+//# sourceMappingURL=defaults.js.map

package/dist/components/actions/BottomActionBar/defaults.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaults.js","sourceRoot":"","sources":["../../../../src/components/actions/BottomActionBar/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,OAAO,EAAE,EAAE;QACX,GAAG,EAAE,EAAE;QACP,MAAM,EAAE,EAAE;KACX;IACD,MAAM,EAAE;QACN,QAAQ,EAAE,UAAU;QACpB,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,CAAC;KACV;CACF,CAAC,CAAC"}

package/dist/components/actions/BottomActionBar/index.d.ts

@@ -0,0 +1,47 @@
+import { StyledProp } from '@mapples/style';
+import { View, ViewProps, ViewStyle } from 'react-native';
+import { BottomActionBarDirection } from './types';
+/** Props for {@link BottomActionBar}. */
+export interface BottomActionBarProps extends ViewProps {
+    /** Pins the bar to the bottom edge of its parent. Defaults to `true`. */
+    sticky?: boolean;
+    /** Main axis of the actions. Defaults to `row`. */
+    direction?: BottomActionBarDirection;
+    /** Pads the bottom for the home indicator (34 on iOS, 16 elsewhere). Defaults to `true`. */
+    safeArea?: boolean;
+    /** Draws a top hairline and a shadow above the bar. Defaults to `true`. */
+    elevated?: boolean;
+    /** Styled slots. */
+    styled?: {
+        /** The bar. */
+        style?: StyledProp<ViewStyle>;
+    };
+}
+/**
+ * A surface pinned to the bottom of the screen for the primary actions — a
+ * price beside "Add to cart", "Continue" under a form. Children (Buttons, a
+ * `ButtonGroup`, text) lay out on the chosen axis. `sticky` pins the bar to
+ * the parent's bottom edge, so it belongs near the end of the page root with
+ * the content padded to clear it.
+ *
+ * @example
+ * ```tsx
+ * <BottomActionBar>
+ *   <Typography variant="Subtitle">$24.00</Typography>
+ *   <Button
+ *     label="Add to cart"
+ *     variant="filled"
+ *     size="lg"
+ *     onPress={add}
+ *     styled={{ style: { flex: 1 } }}
+ *   />
+ * </BottomActionBar>
+ * ```
+ *
+ * @public
+ */
+declare const BottomActionBar: import("react").ForwardRefExoticComponent<BottomActionBarProps & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<View>>;
+export default BottomActionBar;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/actions/BottomActionBar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/BottomActionBar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAc,MAAM,gBAAgB,CAAC;AAExD,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG1D,OAAO,EAEL,wBAAwB,EACzB,MAAM,SAAS,CAAC;AAEjB,yCAAyC;AACzC,MAAM,WAAW,oBAAqB,SAAQ,SAAS;IACrD,yEAAyE;IACzE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mDAAmD;IACnD,SAAS,CAAC,EAAE,wBAAwB,CAAC;IACrC,4FAA4F;IAC5F,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,MAAM,CAAC,EAAE;QACP,eAAe;QACf,KAAK,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;KAC/B,CAAC;CACH;AAKD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,QAAA,MAAM,eAAe;;wCA8CpB,CAAC;AAGF,eAAe,eAAe,CAAC"}

package/dist/components/actions/BottomActionBar/index.js

@@ -0,0 +1,56 @@
+import { forwardRef } from 'react';
+import { StyledView } from '@mapples/style';
+import { ELEVATION_SHADOW, Tokens, useTones } from '@mapples/ui';
+import { defaults } from './defaults';
+import { BOTTOM_ACTION_BAR_SAFE_INSET, } from './types';
+/** The one elevation level, cast upwards for a bar that sits on the bottom edge. */
+const SHADOW_UP = `${ELEVATION_SHADOW.x}px ${-ELEVATION_SHADOW.y}px ${ELEVATION_SHADOW.radius}px ${ELEVATION_SHADOW.color}`;
+/**
+ * A surface pinned to the bottom of the screen for the primary actions — a
+ * price beside "Add to cart", "Continue" under a form. Children (Buttons, a
+ * `ButtonGroup`, text) lay out on the chosen axis. `sticky` pins the bar to
+ * the parent's bottom edge, so it belongs near the end of the page root with
+ * the content padded to clear it.
+ *
+ * @example
+ * ```tsx
+ * <BottomActionBar>
+ *   <Typography variant="Subtitle">$24.00</Typography>
+ *   <Button
+ *     label="Add to cart"
+ *     variant="filled"
+ *     size="lg"
+ *     onPress={add}
+ *     styled={{ style: { flex: 1 } }}
+ *   />
+ * </BottomActionBar>
+ * ```
+ *
+ * @public
+ */
+const BottomActionBar = forwardRef(({ sticky = true, direction = 'row', safeArea = true, elevated = true, styled, children, ...rest }, ref) => {
+    const tones = useTones();
+    return (<StyledView ref={ref} accessibilityRole="toolbar" styled={{
+            style: [
+                defaults.root,
+                {
+                    flexDirection: direction,
+                    alignItems: direction === 'row' ? 'center' : 'stretch',
+                    backgroundColor: tones.resolve(Tokens.color.surface),
+                },
+                sticky ? defaults.sticky : { alignSelf: 'stretch' },
+                safeArea && { paddingBottom: BOTTOM_ACTION_BAR_SAFE_INSET },
+                elevated && {
+                    borderTopWidth: 1,
+                    borderTopColor: tones.divider,
+                    boxShadow: SHADOW_UP,
+                },
+                styled?.style,
+            ],
+        }} {...rest}>
+        {children}
+      </StyledView>);
+});
+BottomActionBar.displayName = 'BottomActionBar';
+export default BottomActionBar;
+//# sourceMappingURL=index.js.map

package/dist/components/actions/BottomActionBar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/actions/BottomActionBar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAqB,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAc,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAGjE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EACL,4BAA4B,GAE7B,MAAM,SAAS,CAAC;AAmBjB,oFAAoF;AACpF,MAAM,SAAS,GAAG,GAAG,gBAAgB,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,MAAM,gBAAgB,CAAC,MAAM,MAAM,gBAAgB,CAAC,KAAK,EAAE,CAAC;AAE5H;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,eAAe,GAAG,UAAU,CAIhC,CACE,EACE,MAAM,GAAG,IAAI,EACb,SAAS,GAAG,KAAK,EACjB,QAAQ,GAAG,IAAI,EACf,QAAQ,GAAG,IAAI,EACf,MAAM,EACN,QAAQ,EACR,GAAG,IAAI,EACR,EACD,GAAG,EACH,EAAE;IACF,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,OAAO,CACL,CAAC,UAAU,CACT,GAAG,CAAC,CAAC,GAAG,CAAC,CACT,iBAAiB,CAAC,SAAS,CAC3B,MAAM,CAAC,CAAC;YACN,KAAK,EAAE;gBACL,QAAQ,CAAC,IAAI;gBACb;oBACE,aAAa,EAAE,SAAS;oBACxB,UAAU,EAAE,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;oBACtD,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC;iBACrD;gBACD,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE;gBACnD,QAAQ,IAAI,EAAE,aAAa,EAAE,4BAA4B,EAAE;gBAC3D,QAAQ,IAAI;oBACV,cAAc,EAAE,CAAC;oBACjB,cAAc,EAAE,KAAK,CAAC,OAAO;oBAC7B,SAAS,EAAE,SAAS;iBACrB;gBACD,MAAM,EAAE,KAAK;aACd;SACF,CAAC,CACF,IAAI,IAAI,CAAC,CAET;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,UAAU,CAAC,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AACF,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC;AAEhD,eAAe,eAAe,CAAC"}

package/dist/components/actions/BottomActionBar/schematic.d.ts

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

package/dist/components/actions/BottomActionBar/schematic.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"schematic.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/BottomActionBar/schematic.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAIrD,gFAAgF;AAChF,eAAO,MAAM,wBAAwB,EAAE,mBAGtC,CAAC"}

package/dist/components/actions/BottomActionBar/schematic.js

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

package/dist/components/actions/BottomActionBar/schematic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"schematic.js","sourceRoot":"","sources":["../../../../src/components/actions/BottomActionBar/schematic.ts"],"names":[],"mappings":"AAEA,OAAO,eAAe,MAAM,SAAS,CAAC;AAEtC,gFAAgF;AAChF,MAAM,CAAC,MAAM,wBAAwB,GAAwB;IAC3D,IAAI,EAAE,iBAAiB;IACvB,SAAS,EAAE,eAAe;CAC3B,CAAC"}

package/dist/components/actions/BottomActionBar/types.d.ts

@@ -0,0 +1,6 @@
+/** Main axis of a BottomActionBar. */
+export declare const BOTTOM_ACTION_BAR_DIRECTIONS: readonly ["row", "column"];
+export type BottomActionBarDirection = (typeof BOTTOM_ACTION_BAR_DIRECTIONS)[number];
+/** Bottom inset with `safeArea`: the home indicator on iOS, the bar's own padding elsewhere. */
+export declare const BOTTOM_ACTION_BAR_SAFE_INSET: number;
+//# sourceMappingURL=types.d.ts.map

package/dist/components/actions/BottomActionBar/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/BottomActionBar/types.ts"],"names":[],"mappings":"AAEA,sCAAsC;AACtC,eAAO,MAAM,4BAA4B,4BAA6B,CAAC;AACvE,MAAM,MAAM,wBAAwB,GAClC,CAAC,OAAO,4BAA4B,CAAC,CAAC,MAAM,CAAC,CAAC;AAEhD,gGAAgG;AAChG,eAAO,MAAM,4BAA4B,EAAE,MAGzC,CAAC"}

package/dist/components/actions/BottomActionBar/types.js

@@ -0,0 +1,9 @@
+import { Platform } from 'react-native';
+/** Main axis of a BottomActionBar. */
+export const BOTTOM_ACTION_BAR_DIRECTIONS = ['row', 'column'];
+/** Bottom inset with `safeArea`: the home indicator on iOS, the bar's own padding elsewhere. */
+export const BOTTOM_ACTION_BAR_SAFE_INSET = Platform.select({
+    ios: 34,
+    default: 16,
+});
+//# sourceMappingURL=types.js.map

package/dist/components/actions/BottomActionBar/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/actions/BottomActionBar/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,sCAAsC;AACtC,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,KAAK,EAAE,QAAQ,CAAU,CAAC;AAIvE,gGAAgG;AAChG,MAAM,CAAC,MAAM,4BAA4B,GAAW,QAAQ,CAAC,MAAM,CAAC;IAClE,GAAG,EAAE,EAAE;IACP,OAAO,EAAE,EAAE;CACZ,CAAC,CAAC"}

package/dist/components/actions/ButtonGroup/index.d.ts

@@ -0,0 +1,39 @@
+import { StyledProp } from '@mapples/style';
+import { View, ViewProps, ViewStyle } from 'react-native';
+import { ButtonGroupDirection } from './types';
+/** Props for {@link ButtonGroup}. */
+export interface ButtonGroupProps extends ViewProps {
+    /** Main axis. Defaults to `row`. */
+    direction?: ButtonGroupDirection;
+    /** Gives each of two or more children the same share of the group; a child fills its share with `fullWidth`. Defaults to `true`. */
+    equal?: boolean;
+    /** Space between children in points. Defaults to `8`. */
+    gap?: number;
+    /** Spans the parent's width. Defaults to `true`. */
+    fullWidth?: boolean;
+    /** Styled slots. */
+    styled?: {
+        /** The group. */
+        style?: StyledProp<ViewStyle>;
+    };
+}
+/**
+ * A row or column of `Button` children with a shared gap and, by default,
+ * equal shares of the width ("Cancel" / "Confirm", "Sign in" / "Sign up").
+ * Buttons inside set `fullWidth` to fill their share.
+ *
+ * @example
+ * ```tsx
+ * <ButtonGroup>
+ *   <Button label="Cancel" variant="outlined" fullWidth onPress={close} />
+ *   <Button label="Confirm" variant="filled" fullWidth onPress={confirm} />
+ * </ButtonGroup>
+ * ```
+ *
+ * @public
+ */
+declare const ButtonGroup: import("react").ForwardRefExoticComponent<ButtonGroupProps & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<View>>;
+export default ButtonGroup;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/actions/ButtonGroup/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/ButtonGroup/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAc,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAE/C,qCAAqC;AACrC,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD,oCAAoC;IACpC,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC,oIAAoI;IACpI,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yDAAyD;IACzD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,oDAAoD;IACpD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oBAAoB;IACpB,MAAM,CAAC,EAAE;QACP,iBAAiB;QACjB,KAAK,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;KAC/B,CAAC;CACH;AAED;;;;;;;;;;;;;;GAcG;AACH,QAAA,MAAM,WAAW;;wCAyDhB,CAAC;AAGF,eAAe,WAAW,CAAC"}

package/dist/components/actions/ButtonGroup/index.js

@@ -0,0 +1,54 @@
+import { Children, forwardRef } from 'react';
+import { StyledView } from '@mapples/style';
+/**
+ * A row or column of `Button` children with a shared gap and, by default,
+ * equal shares of the width ("Cancel" / "Confirm", "Sign in" / "Sign up").
+ * Buttons inside set `fullWidth` to fill their share.
+ *
+ * @example
+ * ```tsx
+ * <ButtonGroup>
+ *   <Button label="Cancel" variant="outlined" fullWidth onPress={close} />
+ *   <Button label="Confirm" variant="filled" fullWidth onPress={confirm} />
+ * </ButtonGroup>
+ * ```
+ *
+ * @public
+ */
+const ButtonGroup = forwardRef(({ direction = 'row', equal = true, gap = 8, fullWidth = true, styled, children, ...rest }, ref) => {
+    const row = direction === 'row';
+    // Every child sits in its own cell that mirrors the group's axis: on
+    // device each Button gets an equal share; on the canvas the single
+    // drop-area child still lays its elements out along the same axis.
+    const cell = row
+        ? {
+            flexGrow: 1,
+            flexShrink: 1,
+            flexBasis: fullWidth ? 0 : 'auto',
+            minWidth: 0,
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap,
+        }
+        : { alignSelf: 'stretch', flexDirection: 'column', gap };
+    return (<StyledView ref={ref} styled={{
+            style: [
+                {
+                    flexDirection: direction,
+                    alignItems: row ? 'center' : 'stretch',
+                    alignSelf: fullWidth ? 'stretch' : 'flex-start',
+                    gap,
+                },
+                styled?.style,
+            ],
+        }} {...rest}>
+        {equal
+            ? Children.map(children, (child) => child === null ||
+                child === undefined ||
+                typeof child === 'boolean' ? null : (<StyledView styled={{ style: cell }}>{child}</StyledView>))
+            : children}
+      </StyledView>);
+});
+ButtonGroup.displayName = 'ButtonGroup';
+export default ButtonGroup;
+//# sourceMappingURL=index.js.map

package/dist/components/actions/ButtonGroup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/actions/ButtonGroup/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAqB,MAAM,OAAO,CAAC;AAEhE,OAAO,EAAc,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAsBxD;;;;;;;;;;;;;;GAcG;AACH,MAAM,WAAW,GAAG,UAAU,CAC5B,CACE,EACE,SAAS,GAAG,KAAK,EACjB,KAAK,GAAG,IAAI,EACZ,GAAG,GAAG,CAAC,EACP,SAAS,GAAG,IAAI,EAChB,MAAM,EACN,QAAQ,EACR,GAAG,IAAI,EACR,EACD,GAAG,EACH,EAAE;IACF,MAAM,GAAG,GAAG,SAAS,KAAK,KAAK,CAAC;IAChC,qEAAqE;IACrE,mEAAmE;IACnE,mEAAmE;IACnE,MAAM,IAAI,GAAc,GAAG;QACzB,CAAC,CAAC;YACE,QAAQ,EAAE,CAAC;YACX,UAAU,EAAE,CAAC;YACb,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM;YACjC,QAAQ,EAAE,CAAC;YACX,aAAa,EAAE,KAAK;YACpB,UAAU,EAAE,QAAQ;YACpB,GAAG;SACJ;QACH,CAAC,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC;IAE3D,OAAO,CACL,CAAC,UAAU,CACT,GAAG,CAAC,CAAC,GAAG,CAAC,CACT,MAAM,CAAC,CAAC;YACN,KAAK,EAAE;gBACL;oBACE,aAAa,EAAE,SAAS;oBACxB,UAAU,EAAE,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;oBACtC,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY;oBAC/C,GAAG;iBACJ;gBACD,MAAM,EAAE,KAAK;aACd;SACF,CAAC,CACF,IAAI,IAAI,CAAC,CAET;QAAA,CAAC,KAAK;YACJ,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAC/B,KAAK,KAAK,IAAI;gBACd,KAAK,KAAK,SAAS;gBACnB,OAAO,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAClC,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,CAC1D,CACF;YACH,CAAC,CAAC,QAAQ,CACd;MAAA,EAAE,UAAU,CAAC,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AACF,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC;AAExC,eAAe,WAAW,CAAC"}

package/dist/components/actions/ButtonGroup/schematic.d.ts

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

package/dist/components/actions/ButtonGroup/schematic.d.ts.map

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

package/dist/components/actions/ButtonGroup/schematic.js

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

package/dist/components/actions/ButtonGroup/schematic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"schematic.js","sourceRoot":"","sources":["../../../../src/components/actions/ButtonGroup/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/actions/ButtonGroup/types.d.ts

@@ -0,0 +1,4 @@
+/** Main axis of a ButtonGroup. */
+export declare const BUTTON_GROUP_DIRECTIONS: readonly ["row", "column"];
+export type ButtonGroupDirection = (typeof BUTTON_GROUP_DIRECTIONS)[number];
+//# sourceMappingURL=types.d.ts.map

package/dist/components/actions/ButtonGroup/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/ButtonGroup/types.ts"],"names":[],"mappings":"AAAA,kCAAkC;AAClC,eAAO,MAAM,uBAAuB,4BAA6B,CAAC;AAClE,MAAM,MAAM,oBAAoB,GAAG,CAAC,OAAO,uBAAuB,CAAC,CAAC,MAAM,CAAC,CAAC"}

package/dist/components/actions/ButtonGroup/types.js

@@ -0,0 +1,3 @@
+/** Main axis of a ButtonGroup. */
+export const BUTTON_GROUP_DIRECTIONS = ['row', 'column'];
+//# sourceMappingURL=types.js.map

package/dist/components/actions/ButtonGroup/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/actions/ButtonGroup/types.ts"],"names":[],"mappings":"AAAA,kCAAkC;AAClC,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,KAAK,EAAE,QAAQ,CAAU,CAAC"}

package/dist/components/actions/Chip/defaults.d.ts

@@ -0,0 +1,26 @@
+/** Runtime defaults — author slots merge over these. */
+export declare const defaults: {
+    root: {
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "center";
+        alignSelf: "flex-start";
+        gap: number;
+        borderWidth: number;
+        overflow: "hidden";
+    };
+    close: {
+        marginStart: number;
+        marginEnd: number;
+        alignItems: "center";
+        justifyContent: "center";
+    };
+    stateLayer: {
+        position: "absolute";
+        top: number;
+        left: number;
+        right: number;
+        bottom: number;
+    };
+};
+//# sourceMappingURL=defaults.d.ts.map

package/dist/components/actions/Chip/defaults.d.ts.map

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

package/dist/components/actions/Chip/defaults.js

@@ -0,0 +1,27 @@
+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: 'flex-start',
+        gap: 6,
+        borderWidth: 1,
+        overflow: 'hidden',
+    },
+    close: {
+        marginStart: 2,
+        marginEnd: -4,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    stateLayer: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+    },
+});
+//# sourceMappingURL=defaults.js.map

package/dist/components/actions/Chip/defaults.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaults.js","sourceRoot":"","sources":["../../../../src/components/actions/Chip/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,YAAY;QACvB,GAAG,EAAE,CAAC;QACN,WAAW,EAAE,CAAC;QACd,QAAQ,EAAE,QAAQ;KACnB;IACD,KAAK,EAAE;QACL,WAAW,EAAE,CAAC;QACd,SAAS,EAAE,CAAC,CAAC;QACb,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;KACzB;IACD,UAAU,EAAE;QACV,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,CAAC;QACN,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,CAAC;KACV;CACF,CAAC,CAAC"}

package/dist/components/actions/Chip/index.d.ts

@@ -0,0 +1,60 @@
+import { StyledProp } from '@mapples/style';
+import { Tone } from '@mapples/ui';
+import { PressableProps, TextStyle, View, ViewStyle } from 'react-native';
+import { ChipSize, ChipVariant } from './types';
+/** Props for {@link Chip}. */
+export interface ChipProps extends Omit<PressableProps, 'children' | 'style'> {
+    /** Visible text. */
+    label?: string;
+    /** Role of the chip. Defaults to `assist`. */
+    variant?: ChipVariant;
+    /** Selected state (controlled). Omit to let the chip keep its own state. */
+    selected?: boolean;
+    /** Initial state while uncontrolled. Defaults to `false`. */
+    defaultSelected?: boolean;
+    /** Fires with the next selected state after a press. */
+    onSelectedChange?: (selected: boolean) => void;
+    /** Glyph before the label (project icon family). */
+    leadingIconName?: string;
+    /** Shows a close glyph that fires `onClose`. */
+    closable?: boolean;
+    /** Fires when the close glyph is pressed. */
+    onClose?: () => void;
+    /** Height. Defaults to `md`. */
+    size?: ChipSize;
+    /** Colour role of the selected state. Defaults to `primary`. */
+    tone?: Tone;
+    /** Styled slots for every visual part. */
+    styled?: {
+        /** The pill. */
+        style?: StyledProp<ViewStyle>;
+        /** The pill while selected. */
+        styleSelected?: StyledProp<ViewStyle>;
+        /** The label text. */
+        styleLabel?: StyledProp<TextStyle>;
+        /** The label text while selected. */
+        styleLabelSelected?: StyledProp<TextStyle>;
+        /** The leading glyph (`color`). */
+        styleIcon?: StyledProp<ViewStyle & {
+            color?: string;
+        }>;
+    };
+}
+/**
+ * A compact, content-sized pill for a filter, tag or choice. `filter` chips
+ * toggle through `selected ↔ onSelectedChange` and show a check while
+ * selected; `input` chips add a close glyph. Rows of chips belong in
+ * `ChipGroup`.
+ *
+ * @example
+ * ```tsx
+ * <Chip label="Vegan" variant="filter" selected={vegan} onSelectedChange={setVegan} />
+ * ```
+ *
+ * @public
+ */
+declare const Chip: import("react").ForwardRefExoticComponent<ChipProps & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<View>>;
+export default Chip;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/actions/Chip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/Chip/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,UAAU,EAGX,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAKL,IAAI,EAEL,MAAM,aAAa,CAAC;AACrB,OAAO,EAEL,cAAc,EACd,SAAS,EACT,IAAI,EACJ,SAAS,EACV,MAAM,cAAc,CAAC;AAUtB,OAAO,EAAiB,QAAQ,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE/D,8BAA8B;AAC9B,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,OAAO,CAAC;IAC3E,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6DAA6D;IAC7D,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,wDAAwD;IACxD,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C,oDAAoD;IACpD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,gCAAgC;IAChC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,gEAAgE;IAChE,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,0CAA0C;IAC1C,MAAM,CAAC,EAAE;QACP,gBAAgB;QAChB,KAAK,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;QAC9B,+BAA+B;QAC/B,aAAa,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;QACtC,sBAAsB;QACtB,UAAU,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;QACnC,qCAAqC;QACrC,kBAAkB,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;QAC3C,mCAAmC;QACnC,SAAS,CAAC,EAAE,UAAU,CAAC,SAAS,GAAG;YAAE,KAAK,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC,CAAC;KACxD,CAAC;CACH;AAED;;;;;;;;;;;;GAYG;AACH,QAAA,MAAM,IAAI;;wCAyIT,CAAC;AAGF,eAAe,IAAI,CAAC"}