@mapples/ui 1.1.3 → 1.5.0

package/dist/components/form/SubmitButton/SubmitButton.d.ts

@@ -1,37 +1,24 @@
-import { StyledProp, StyledProps } from '@mapples/style';
-import { PressableProps, TextStyle, View } from 'react-native';
+import { View } from 'react-native';
+import { ButtonProps } from '../../inputs/Button/Button';
 /**
- * Props for the SubmitButton component.
+ * Props for the SubmitButton component — every `Button` prop except
+ * `onPress`, which the form owns.
  *
  * @public
  */
-export interface SubmitButtonProps extends PressableProps {
-    /** The text label to display on the button */
-    label?: string;
-    /** Styling configuration for the button and its typography */
-    styled?: StyledProps<PressableProps> & {
-        /** Typography-specific styling for the button label */
-        styleTypography?: StyledProp<TextStyle>;
-    };
-    /** Typography variant to apply to the button label */
-    typographyVariant?: string;
-}
+export type SubmitButtonProps = Omit<ButtonProps, 'onPress'>;
 /**
- * A customizable button component with built-in styling support.
- *
- * The SubmitButton component extends React Native's Pressable with additional styling
- * capabilities and typography support. It can display a text label and supports
- * all standard pressable interactions.
+ * A `Button` that submits the nearest `FormView`. Shares every appearance
+ * prop with `Button` (`variant`, `size`, `tone`, glyphs, `fullWidth`); while
+ * the form is submitting it shows the loading state unless `loading` is set
+ * explicitly.
  *
  * @example
  * ```tsx
- * <SubmitButton
- *   label="Click me"
- *   styled={{
- *     style: { backgroundColor: 'blue', padding: 16 },
- *     styleTypography: { color: 'white', fontSize: 16 }
- *   }}
- * />
+ * <FormView initialValues={{ email: '' }} onSubmit={signIn}>
+ *   <TextField fieldName="email" placeholder="Email" />
+ *   <SubmitButton label="Sign in" variant="filled" size="lg" fullWidth />
+ * </FormView>
  * ```
  *
  * @public

package/dist/components/form/SubmitButton/SubmitButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SubmitButton.d.ts","sourceRoot":"","sources":["../../../../src/components/form/SubmitButton/SubmitButton.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,UAAU,EACV,WAAW,EAEZ,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAE/D;;;;GAIG;AACH,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACvD,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,MAAM,CAAC,EAAE,WAAW,CAAC,cAAc,CAAC,GAAG;QACrC,uDAAuD;QACvD,eAAe,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;KACzC,CAAC;IACF,sDAAsD;IACtD,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,QAAA,MAAM,YAAY;;wCAuBjB,CAAC;AAGF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"SubmitButton.d.ts","sourceRoot":"","sources":["../../../../src/components/form/SubmitButton/SubmitButton.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAe,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAEjE;;;;;GAKG;AACH,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;AAE7D;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,YAAY;;wCAajB,CAAC;AAGF,eAAe,YAAY,CAAC"}

package/dist/components/form/SubmitButton/SubmitButton.js

@@ -1,34 +1,25 @@
 import { forwardRef } from 'react';
 import { useFormSubmit } from '@mapples/form';
-import { StyledPressable, Typography, } from '@mapples/style';
+import Button from '../../inputs/Button/Button';
 /**
- * A customizable button component with built-in styling support.
- *
- * The SubmitButton component extends React Native's Pressable with additional styling
- * capabilities and typography support. It can display a text label and supports
- * all standard pressable interactions.
+ * A `Button` that submits the nearest `FormView`. Shares every appearance
+ * prop with `Button` (`variant`, `size`, `tone`, glyphs, `fullWidth`); while
+ * the form is submitting it shows the loading state unless `loading` is set
+ * explicitly.
  *
  * @example
  * ```tsx
- * <SubmitButton
- *   label="Click me"
- *   styled={{
- *     style: { backgroundColor: 'blue', padding: 16 },
- *     styleTypography: { color: 'white', fontSize: 16 }
- *   }}
- * />
+ * <FormView initialValues={{ email: '' }} onSubmit={signIn}>
+ *   <TextField fieldName="email" placeholder="Email" />
+ *   <SubmitButton label="Sign in" variant="filled" size="lg" fullWidth />
+ * </FormView>
  * ```
  *
  * @public
  */
-const SubmitButton = forwardRef(({ label, styled = {}, typographyVariant, ...props }, ref) => {
-    const { styleTypography, ...styledPressableProps } = styled;
-    const { submitForm } = useFormSubmit();
-    return (<StyledPressable ref={ref} styled={styledPressableProps} {...props} onPress={submitForm}>
-        {label && (<Typography style={styled?.styleTypography} variant={typographyVariant}>
-            {label}
-          </Typography>)}
-      </StyledPressable>);
+const SubmitButton = forwardRef(({ loading, ...props }, ref) => {
+    const { submitForm, submitting } = useFormSubmit();
+    return (<Button ref={ref} loading={loading ?? submitting} {...props} onPress={submitForm}/>);
 });
 SubmitButton.displayName = 'SubmitButton';
 export default SubmitButton;

package/dist/components/form/SubmitButton/SubmitButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SubmitButton.js","sourceRoot":"","sources":["../../../../src/components/form/SubmitButton/SubmitButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAqB,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EACL,eAAe,EAGf,UAAU,GACX,MAAM,gBAAgB,CAAC;AAoBxB;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,YAAY,GAAG,UAAU,CAC7B,CAAC,EAAE,KAAK,EAAE,MAAM,GAAG,EAAE,EAAE,iBAAiB,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC3D,MAAM,EAAE,eAAe,EAAE,GAAG,oBAAoB,EAAE,GAAG,MAAM,CAAC;IAC5D,MAAM,EAAE,UAAU,EAAE,GAAG,aAAa,EAAE,CAAC;IAEvC,OAAO,CACL,CAAC,eAAe,CACd,GAAG,CAAC,CAAC,GAAG,CAAC,CACT,MAAM,CAAC,CAAC,oBAAoB,CAAC,CAC7B,IAAI,KAAK,CAAC,CACV,OAAO,CAAC,CAAC,UAAU,CAAC,CAEpB;QAAA,CAAC,KAAK,IAAI,CACR,CAAC,UAAU,CACT,KAAK,CAAC,CAAC,MAAM,EAAE,eAAe,CAAC,CAC/B,OAAO,CAAC,CAAC,iBAAiB,CAAC,CAE3B;YAAA,CAAC,KAAK,CACR;UAAA,EAAE,UAAU,CAAC,CACd,CACH;MAAA,EAAE,eAAe,CAAC,CACnB,CAAC;AACJ,CAAC,CACF,CAAC;AACF,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC;AAE1C,eAAe,YAAY,CAAC"}
+{"version":3,"file":"SubmitButton.js","sourceRoot":"","sources":["../../../../src/components/form/SubmitButton/SubmitButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAqB,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAG9C,OAAO,MAAuB,MAAM,4BAA4B,CAAC;AAUjE;;;;;;;;;;;;;;;GAeG;AACH,MAAM,YAAY,GAAG,UAAU,CAC7B,CAAC,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC7B,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,GAAG,aAAa,EAAE,CAAC;IAEnD,OAAO,CACL,CAAC,MAAM,CACL,GAAG,CAAC,CAAC,GAAG,CAAC,CACT,OAAO,CAAC,CAAC,OAAO,IAAI,UAAU,CAAC,CAC/B,IAAI,KAAK,CAAC,CACV,OAAO,CAAC,CAAC,UAAU,CAAC,EACpB,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AACF,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC;AAE1C,eAAe,YAAY,CAAC"}

package/dist/components/inputs/Button/Button.d.ts

@@ -1,5 +1,6 @@
-import { StyledProp, StyledProps } from '@mapples/style';
+import { StyledProp, StyledProps, SvgStyle } from '@mapples/style';
 import { PressableProps, TextStyle, View } from 'react-native';
+import { ButtonVariant, ControlSize, Tone } from '../../../tokens';
 /**
  * Props for the Button component.
  *
@@ -12,22 +13,58 @@ export interface ButtonProps extends PressableProps {
     styled?: StyledProps<PressableProps> & {
         /** Typography-specific styling for the button label */
         styleTypography?: StyledProp<TextStyle>;
+        /** Glyph styling for the leading/trailing icons (themed variants) */
+        styleIcon?: StyledProp<SvgStyle>;
     };
     /** Typography variant to apply to the button label */
     typographyVariant?: string;
+    /**
+     * Themed appearance. Unset renders the bare pressable exactly as before —
+     * the label takes the typography document's colour and every colour comes
+     * from `styled`. Set, the button paints itself from the project theme:
+     * `filled` (tone fill), `tonal` (tinted container), `outlined`, `text` and
+     * `elevated` (surface + shadow).
+     */
+    variant?: ButtonVariant;
+    /** Control size (themed variants): `sm` 36, `md` 44, `lg` 52 points tall. */
+    size?: ControlSize;
+    /** Colour role of the themed variants. Defaults to `primary`. */
+    tone?: Tone;
+    /** Glyph shown before the label (project icon family). */
+    leadingIconName?: string;
+    /** Glyph shown after the label (project icon family). */
+    trailingIconName?: string;
+    /** Shows an activity indicator in place of the leading glyph and ignores presses. */
+    loading?: boolean;
+    /** Stretches the button across its parent (themed variants). */
+    fullWidth?: boolean;
 }
 /**
  * A customizable button component with built-in styling support.
  *
- * The Button component extends React Native's Pressable with additional styling
- * capabilities and typography support. It can display a text label and supports
- * all standard pressable interactions.
+ * Without `variant` the Button is React Native's Pressable plus a label —
+ * every colour comes from `styled`. With `variant` it is a themed control:
+ * the fill, label colour, outline and elevation follow the project theme and
+ * the chosen `tone`, `size` sets the height and label scale, and glyphs,
+ * loading and disabled states are built in. Author styles in `styled` still
+ * override every part.
  *
  * @example
  * ```tsx
  * <Button
- *   label="Click me"
+ *   label="Continue"
+ *   variant="filled"
+ *   size="lg"
+ *   trailingIconName="arrow-forward"
  *   onPress={() => console.log('Button pressed')}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Bare pressable — the legacy render
+ * <Button
+ *   label="Click me"
  *   styled={{
  *     style: { backgroundColor: 'blue', padding: 16 },
  *     styleTypography: { color: 'white', fontSize: 16 }

package/dist/components/inputs/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/Button/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,UAAU,EACV,WAAW,EAEZ,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAE/D;;;;GAIG;AACH,MAAM,WAAW,WAAY,SAAQ,cAAc;IACjD,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,MAAM,CAAC,EAAE,WAAW,CAAC,cAAc,CAAC,GAAG;QACrC,uDAAuD;QACvD,eAAe,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;KACzC,CAAC;IACF,sDAAsD;IACtD,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,QAAA,MAAM,MAAM;;wCAiBX,CAAC;AAGF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/Button/Button.tsx"],"names":[],"mappings":"AAQA,OAAO,EAEL,UAAU,EACV,WAAW,EAGX,QAAQ,EAET,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAIL,cAAc,EACd,SAAS,EACT,IAAI,EAEL,MAAM,cAAc,CAAC;AAGtB,OAAO,EACL,aAAa,EAEb,WAAW,EAIX,IAAI,EACL,MAAM,iBAAiB,CAAC;AAQzB;;;;GAIG;AACH,MAAM,WAAW,WAAY,SAAQ,cAAc;IACjD,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,MAAM,CAAC,EAAE,WAAW,CAAC,cAAc,CAAC,GAAG;QACrC,uDAAuD;QACvD,eAAe,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;QACxC,qEAAqE;QACrE,SAAS,CAAC,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;KAClC,CAAC;IACF,sDAAsD;IACtD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,6EAA6E;IAC7E,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,iEAAiE;IACjE,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,0DAA0D;IAC1D,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,yDAAyD;IACzD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,qFAAqF;IACrF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gEAAgE;IAChE,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AA0DD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,QAAA,MAAM,MAAM;;wCAmLX,CAAC;AA8BF,eAAe,MAAM,CAAC"}

package/dist/components/inputs/Button/Button.js

@@ -1,17 +1,80 @@
-import { forwardRef } from 'react';
-import { StyledPressable, Typography, } from '@mapples/style';
+import { forwardRef, useCallback, useContext, useState, } from 'react';
+import { StyledPressable, StyledView, Styler, Typography, } from '@mapples/style';
+import { ActivityIndicator, } from 'react-native';
+import useTones from '../../../hooks/useTones';
+import { CONTROL_SIZES, DISABLED_OPACITY, ELEVATION, Tokens, } from '../../../tokens';
+import Icon from '../../media/Icon';
+import { ButtonGroupContext, } from './ButtonGroupContext';
+const variantColors = (variant, palette, tones) => {
+    switch (variant) {
+        case 'filled':
+            return { background: palette.main, label: palette.contrast };
+        case 'tonal':
+            return { background: palette.container, label: palette.onContainer };
+        case 'outlined':
+            return {
+                background: 'transparent',
+                label: palette.main,
+                border: tones.outlineStrong,
+            };
+        case 'text':
+            return { background: 'transparent', label: palette.main };
+        case 'elevated':
+            return {
+                background: tones.resolve(Tokens.color.surface),
+                label: palette.main,
+                // Shadows vanish on dark surfaces — a hairline keeps the edge.
+                border: tones.isDark ? tones.outline : undefined,
+                elevated: true,
+            };
+    }
+};
+/**
+ * How a button sizes itself inside a group: an equal share of a row (the
+ * row's width when the group spans its parent, the labels' otherwise), the
+ * full width of a column.
+ */
+const groupStyle = (group) => {
+    if (!group)
+        return null;
+    if (group.direction === 'column')
+        return { alignSelf: 'stretch' };
+    if (!group.equal)
+        return null;
+    return {
+        flexGrow: 1,
+        flexShrink: 1,
+        flexBasis: group.fill ? 0 : 'auto',
+        minWidth: 0,
+        alignSelf: 'auto',
+    };
+};
 /**
  * A customizable button component with built-in styling support.
  *
- * The Button component extends React Native's Pressable with additional styling
- * capabilities and typography support. It can display a text label and supports
- * all standard pressable interactions.
+ * Without `variant` the Button is React Native's Pressable plus a label —
+ * every colour comes from `styled`. With `variant` it is a themed control:
+ * the fill, label colour, outline and elevation follow the project theme and
+ * the chosen `tone`, `size` sets the height and label scale, and glyphs,
+ * loading and disabled states are built in. Author styles in `styled` still
+ * override every part.
  *
  * @example
  * ```tsx
  * <Button
- *   label="Click me"
+ *   label="Continue"
+ *   variant="filled"
+ *   size="lg"
+ *   trailingIconName="arrow-forward"
  *   onPress={() => console.log('Button pressed')}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Bare pressable — the legacy render
+ * <Button
+ *   label="Click me"
  *   styled={{
  *     style: { backgroundColor: 'blue', padding: 16 },
  *     styleTypography: { color: 'white', fontSize: 16 }
@@ -21,14 +84,118 @@ import { StyledPressable, Typography, } from '@mapples/style';
  *
  * @public
  */
-const Button = forwardRef(({ label, styled = {}, typographyVariant, ...props }, ref) => {
-    const { styleTypography, ...styledPressableProps } = styled;
-    return (<StyledPressable ref={ref} styled={styledPressableProps} {...props}>
-        {label && (<Typography style={styled?.styleTypography} variant={typographyVariant}>
+const Button = forwardRef(({ label, styled = {}, typographyVariant, variant, size = 'md', tone = 'primary', leadingIconName, trailingIconName, loading = false, disabled = false, fullWidth = false, onPressIn, onPressOut, onHoverIn, onHoverOut, children, ...props }, ref) => {
+    const { styleTypography, styleIcon, ...styledPressableProps } = styled;
+    const tones = useTones();
+    const [pressed, setPressed] = useState(false);
+    const [hovered, setHovered] = useState(false);
+    const inGroup = groupStyle(useContext(ButtonGroupContext));
+    const handlePressIn = useCallback((event) => {
+        setPressed(true);
+        onPressIn?.(event);
+    }, [onPressIn]);
+    const handlePressOut = useCallback((event) => {
+        setPressed(false);
+        onPressOut?.(event);
+    }, [onPressOut]);
+    const handleHoverIn = useCallback((event) => {
+        setHovered(true);
+        onHoverIn?.(event);
+    }, [onHoverIn]);
+    const handleHoverOut = useCallback((event) => {
+        setHovered(false);
+        onHoverOut?.(event);
+    }, [onHoverOut]);
+    if (variant === undefined) {
+        return (<StyledPressable ref={ref} styled={{
+                ...styledPressableProps,
+                style: [inGroup, styledPressableProps.style],
+            }} disabled={disabled} onPressIn={onPressIn} onPressOut={onPressOut} onHoverIn={onHoverIn} onHoverOut={onHoverOut} {...props}>
+          {label && (<Typography style={styleTypography} variant={typographyVariant}>
+              {label}
+            </Typography>)}
+          {children}
+        </StyledPressable>);
+    }
+    const spec = CONTROL_SIZES[size];
+    const colors = variantColors(variant, tones.tone(tone), tones);
+    const isDisabled = !!disabled;
+    const inactive = isDisabled || loading;
+    const iconOnly = !label && (!!leadingIconName || !!trailingIconName || loading);
+    // An author colour on the label slot also tints the glyphs and the state layer.
+    const authoredLabelColor = Styler.flatten(styleTypography)?.color;
+    const labelColor = typeof authoredLabelColor === 'string'
+        ? tones.resolve(authoredLabelColor)
+        : colors.label;
+    const showLayer = !inactive && (pressed || hovered);
+    const renderGlyph = (iconName) => iconName ? (<Icon iconName={iconName} size={spec.iconSize} color={labelColor} styled={{ styleSvg: styleIcon }}/>) : null;
+    return (<StyledPressable ref={ref} accessibilityRole="button" accessibilityState={{ disabled: inactive, busy: loading }} disabled={inactive} onPressIn={handlePressIn} onPressOut={handlePressOut} onHoverIn={handleHoverIn} onHoverOut={handleHoverOut} styled={{
+            ...styledPressableProps,
+            style: [
+                styler.root,
+                {
+                    height: spec.height,
+                    minWidth: iconOnly ? spec.height : undefined,
+                    paddingHorizontal: iconOnly
+                        ? 0
+                        : variant === 'text'
+                            ? spec.paddingX - 4
+                            : spec.paddingX,
+                    borderRadius: spec.radius,
+                    backgroundColor: colors.background,
+                    borderWidth: colors.border ? 1 : 0,
+                    borderColor: colors.border ?? 'transparent',
+                },
+                colors.elevated && styler.elevated,
+                fullWidth && styler.fullWidth,
+                inGroup,
+                styledPressableProps.style,
+                isDisabled && styler.disabled,
+            ],
+        }} {...props}>
+        {showLayer && (<StyledView pointerEvents="none" styled={{
+                style: [
+                    styler.stateLayer,
+                    {
+                        backgroundColor: tones.stateLayer(labelColor, pressed ? 'pressed' : 'hover'),
+                        borderRadius: spec.radius,
+                    },
+                ],
+            }}/>)}
+        {loading ? (<ActivityIndicator size="small" color={labelColor}/>) : (renderGlyph(leadingIconName))}
+        {!!label && (<Typography variant={typographyVariant ?? spec.labelVariant} numberOfLines={1} style={[{ color: colors.label }, styleTypography]}>
             {label}
           </Typography>)}
+        {renderGlyph(trailingIconName)}
+        {children}
       </StyledPressable>);
 });
 Button.displayName = 'Button';
+const styler = Styler.create({
+    root: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        alignSelf: 'flex-start',
+        gap: 8,
+        overflow: 'hidden',
+    },
+    elevated: {
+        boxShadow: ELEVATION,
+    },
+    fullWidth: {
+        alignSelf: 'stretch',
+    },
+    disabled: {
+        opacity: DISABLED_OPACITY,
+    },
+    stateLayer: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+    },
+});
 export default Button;
 //# sourceMappingURL=Button.js.map

package/dist/components/inputs/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/inputs/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAqB,MAAM,OAAO,CAAC;AAEtD,OAAO,EACL,eAAe,EAGf,UAAU,GACX,MAAM,gBAAgB,CAAC;AAoBxB;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,MAAM,GAAG,UAAU,CACvB,CAAC,EAAE,KAAK,EAAE,MAAM,GAAG,EAAE,EAAE,iBAAiB,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC3D,MAAM,EAAE,eAAe,EAAE,GAAG,oBAAoB,EAAE,GAAG,MAAM,CAAC;IAE5D,OAAO,CACL,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,oBAAoB,CAAC,CAAC,IAAI,KAAK,CAAC,CACjE;QAAA,CAAC,KAAK,IAAI,CACR,CAAC,UAAU,CACT,KAAK,CAAC,CAAC,MAAM,EAAE,eAAe,CAAC,CAC/B,OAAO,CAAC,CAAC,iBAAiB,CAAC,CAE3B;YAAA,CAAC,KAAK,CACR;UAAA,EAAE,UAAU,CAAC,CACd,CACH;MAAA,EAAE,eAAe,CAAC,CACnB,CAAC;AACJ,CAAC,CACF,CAAC;AACF,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC;AAE9B,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/inputs/Button/Button.tsx"],"names":[],"mappings":"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"}

package/dist/components/inputs/Button/ButtonGroupContext.d.ts

@@ -0,0 +1,19 @@
+/**
+ * What a button group tells the `Button`s inside it. A context rather than a
+ * wrapper per child: the buttons size themselves, so the layout is the same
+ * wherever the children come from (the editor renders them through its own
+ * drop area, not as direct children of the group).
+ *
+ * @public
+ */
+export interface ButtonGroupContextValue {
+    /** Main axis of the group. */
+    direction: 'row' | 'column';
+    /** Each button takes an equal share of the group's main axis. */
+    equal: boolean;
+    /** The group spans its parent, so shares split that width rather than the labels'. */
+    fill: boolean;
+}
+/** @public */
+export declare const ButtonGroupContext: import("react").Context<ButtonGroupContextValue | null>;
+//# sourceMappingURL=ButtonGroupContext.d.ts.map

package/dist/components/inputs/Button/ButtonGroupContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroupContext.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/Button/ButtonGroupContext.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AACH,MAAM,WAAW,uBAAuB;IACtC,8BAA8B;IAC9B,SAAS,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC5B,iEAAiE;IACjE,KAAK,EAAE,OAAO,CAAC;IACf,sFAAsF;IACtF,IAAI,EAAE,OAAO,CAAC;CACf;AAED,cAAc;AACd,eAAO,MAAM,kBAAkB,yDAE9B,CAAC"}

package/dist/components/inputs/Button/ButtonGroupContext.js

@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+/** @public */
+export const ButtonGroupContext = createContext(null);
+//# sourceMappingURL=ButtonGroupContext.js.map

package/dist/components/inputs/Button/ButtonGroupContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroupContext.js","sourceRoot":"","sources":["../../../../src/components/inputs/Button/ButtonGroupContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAmBtC,cAAc;AACd,MAAM,CAAC,MAAM,kBAAkB,GAAG,aAAa,CAC7C,IAAI,CACL,CAAC"}

package/dist/components/inputs/Button/index.d.ts

@@ -1,5 +1,6 @@
 import Button from './Button';
 export * from './schematics';
 export * from './Button';
+export * from './ButtonGroupContext';
 export default Button;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/inputs/Button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AAEzB,eAAe,MAAM,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,sBAAsB,CAAC;AAErC,eAAe,MAAM,CAAC"}

package/dist/components/inputs/Button/index.js

@@ -1,5 +1,6 @@
 import Button from './Button';
 export * from './schematics';
 export * from './Button';
+export * from './ButtonGroupContext';
 export default Button;
 //# sourceMappingURL=index.js.map

package/dist/components/inputs/Button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/inputs/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AAEzB,eAAe,MAAM,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/inputs/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,sBAAsB,CAAC;AAErC,eAAe,MAAM,CAAC"}

package/dist/components/inputs/IconButton/IconButton.d.ts

@@ -2,6 +2,7 @@ import { PropsWithChildren } from 'react';
 import { StyledProp, StyledProps, SvgStyle, WithStyledProps } from '@mapples/style';
 import { SvgSource } from '@mapples/types';
 import { PressableProps, View, ViewProps } from 'react-native';
+import { ControlSize, IconButtonVariant, Tone } from '../../../tokens';
 /**
  * Props for the IconButton component.
  *
@@ -14,34 +15,55 @@ export type IconProps = PropsWithChildren<Omit<WithStyledProps<PressableProps>,
         styleSvg?: StyledProp<SvgStyle>;
     };
 }> & {
-    /** URI for the SVG icon to display */
+    /** URI for the SVG icon to display (legacy vector icons) */
     uri?: string | SvgSource;
+    /**
+     * Glyph name from the project icon family. Set, the button renders as a
+     * themed icon button (`variant`, `size`, `tone`, toggle state, badge);
+     * unset, it renders the legacy `uri` vector exactly as before.
+     */
+    iconName?: string;
+    /** Themed appearance: `standard` (no fill), `filled`, `tonal` or `outlined`. */
+    variant?: IconButtonVariant;
+    /** Square size: `sm` 36, `md` 44, `lg` 52 points. */
+    size?: ControlSize;
+    /** Colour role. Defaults to `primary`. */
+    tone?: Tone;
+    /** Toggle state (controlled). Omit for an uncontrolled toggle, or leave both unset for a plain button. */
+    selected?: boolean;
+    /** Fires with the next toggle state after a press. */
+    onSelectedChange?: (selected: boolean) => void;
+    /** Glyph shown while selected (e.g. the filled heart). */
+    selectedIconName?: string;
+    /** Count pinned to the top-right corner; hidden at 0. */
+    badgeCount?: number;
 };
 /**
- * A customizable icon button component with SVG support.
+ * An icon-only button.
  *
- * The IconButton component displays an SVG icon that can be pressed.
- * It supports both remote SVG URIs and fallback mock icons, with
- * comprehensive styling support for both the button container and the icon.
+ * With `iconName` it is a themed control: a square of `size`, painted by
+ * `variant` and `tone`, optionally a toggle (`selected`) with its own glyph,
+ * and a count badge. With only `uri` it renders the legacy SVG vector.
+ * Icon-only controls need an `accessibilityLabel`.
+ *
+ * @example
+ * ```tsx
+ * <IconButton
+ *   iconName="heart-outline"
+ *   selectedIconName="heart"
+ *   variant="standard"
+ *   selected={liked}
+ *   onSelectedChange={setLiked}
+ *   accessibilityLabel="Like"
+ * />
+ * ```
  *
  * @example
  * ```tsx
  * <IconButton
  *   uri="https://example.com/icon.svg"
  *   onPress={() => console.log('Icon pressed')}
- *   styled={{
- *     style: {
- *       width: 48,
- *       height: 48,
- *       backgroundColor: 'lightblue',
- *       borderRadius: 24,
- *     },
- *     styleSvg: {
- *       width: 24,
- *       height: 24,
- *       color: 'blue',
- *     },
- *   }}
+ *   styled={{ styleSvg: { width: 24, height: 24, color: 'blue' } }}
  * />
  * ```
  *
@@ -56,8 +78,28 @@ declare const IconButton: import("react").ForwardRefExoticComponent<Omit<WithSty
 } & {
     children?: import("react").ReactNode | undefined;
 } & {
-    /** URI for the SVG icon to display */
+    /** URI for the SVG icon to display (legacy vector icons) */
     uri?: string | SvgSource;
+    /**
+     * Glyph name from the project icon family. Set, the button renders as a
+     * themed icon button (`variant`, `size`, `tone`, toggle state, badge);
+     * unset, it renders the legacy `uri` vector exactly as before.
+     */
+    iconName?: string;
+    /** Themed appearance: `standard` (no fill), `filled`, `tonal` or `outlined`. */
+    variant?: IconButtonVariant;
+    /** Square size: `sm` 36, `md` 44, `lg` 52 points. */
+    size?: ControlSize;
+    /** Colour role. Defaults to `primary`. */
+    tone?: Tone;
+    /** Toggle state (controlled). Omit for an uncontrolled toggle, or leave both unset for a plain button. */
+    selected?: boolean;
+    /** Fires with the next toggle state after a press. */
+    onSelectedChange?: (selected: boolean) => void;
+    /** Glyph shown while selected (e.g. the filled heart). */
+    selectedIconName?: string;
+    /** Count pinned to the top-right corner; hidden at 0. */
+    badgeCount?: number;
 } & import("react").RefAttributes<View>>;
 export default IconButton;
 //# sourceMappingURL=IconButton.d.ts.map

package/dist/components/inputs/IconButton/IconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/IconButton/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAErE,OAAO,EAIL,UAAU,EACV,WAAW,EACX,QAAQ,EAER,eAAe,EAChB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAK/D;;;;GAIG;AACH,MAAM,MAAM,SAAS,GAAG,iBAAiB,CACvC,IAAI,CAAC,eAAe,CAAC,cAAc,CAAC,EAAE,QAAQ,CAAC,GAAG;IAChD,kEAAkE;IAClE,MAAM,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,GAAG;QAChC,2BAA2B;QAC3B,QAAQ,CAAC,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;KACjC,CAAC;CACH,CACF,GAAG;IACF,sCAAsC;IACtC,GAAG,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC1B,CAAC;AAIF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,QAAA,MAAM,UAAU;IA3CZ,kEAAkE;aACzD,WAAW,CAAC,SAAS,CAAC,GAAG;QAChC,2BAA2B;QAC3B,QAAQ,CAAC,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;KACjC;;;;IAGH,sCAAsC;UAChC,MAAM,GAAG,SAAS;wCAuFzB,CAAC;AAGF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/IconButton/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAGlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAIL,UAAU,EACV,WAAW,EAEX,QAAQ,EAGR,eAAe,EAChB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAGL,cAAc,EACd,IAAI,EACJ,SAAS,EACV,MAAM,cAAc,CAAC;AAItB,OAAO,EAEL,WAAW,EAEX,iBAAiB,EACjB,IAAI,EACL,MAAM,iBAAiB,CAAC;AAKzB;;;;GAIG;AACH,MAAM,MAAM,SAAS,GAAG,iBAAiB,CACvC,IAAI,CAAC,eAAe,CAAC,cAAc,CAAC,EAAE,QAAQ,CAAC,GAAG;IAChD,kEAAkE;IAClE,MAAM,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,GAAG;QAChC,2BAA2B;QAC3B,QAAQ,CAAC,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;KACjC,CAAC;CACH,CACF,GAAG;IACF,4DAA4D;IAC5D,GAAG,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gFAAgF;IAChF,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,qDAAqD;IACrD,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,0GAA0G;IAC1G,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sDAAsD;IACtD,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C,0DAA0D;IAC1D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,yDAAyD;IACzD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAMF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,QAAA,MAAM,UAAU;IAlEZ,kEAAkE;aACzD,WAAW,CAAC,SAAS,CAAC,GAAG;QAChC,2BAA2B;QAC3B,QAAQ,CAAC,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;KACjC;;;;IAGH,4DAA4D;UACtD,MAAM,GAAG,SAAS;IACxB;;;;OAIG;eACQ,MAAM;IACjB,gFAAgF;cACtE,iBAAiB;IAC3B,qDAAqD;WAC9C,WAAW;IAClB,0CAA0C;WACnC,IAAI;IACX,0GAA0G;eAC/F,OAAO;IAClB,sDAAsD;uBACnC,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI;IAC9C,0DAA0D;uBACvC,MAAM;IACzB,yDAAyD;iBAC5C,MAAM;wCAmSpB,CAAC;AAqCF,eAAe,UAAU,CAAC"}